{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browser-frame",
  "title": "BrowserFrame",
  "description": "A browser window drawn around a preview.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "browser-frame/BrowserFrame.css",
      "content": ".cr-browser-frame {\n  margin: 0;\n  overflow: hidden;\n  border-radius: var(--cr-radius-lg);\n  box-shadow: var(--cr-shadow-sheet);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n}\n\n.cr-browser-frame__bar {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  padding: 10px 14px;\n  border-bottom: 1px solid var(--cr-color-border-default);\n  background: var(--cr-color-glass-tile);\n}\n\n.cr-browser-frame__lights {\n  display: flex;\n  gap: 6px;\n}\n\n.cr-browser-frame__lights > span {\n  width: 11px;\n  height: 11px;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-border-strong);\n}\n\n.cr-browser-frame__url {\n  flex: 1;\n  padding: 5px var(--cr-space-3);\n  overflow: hidden;\n  border-radius: var(--cr-radius-sm);\n  background: var(--cr-color-bg-subtle);\n  color: var(--cr-color-text-secondary);\n  font-size: var(--cr-font-size-xs);\n  text-align: center;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.cr-browser-frame__body {\n  overflow: auto;\n}\n\n.cr-browser-frame__body > :is(img, video) {\n  display: block;\n  width: 100%;\n  height: auto;\n}\n\n.cr-browser-frame__caption {\n  padding: 10px 14px;\n  border-top: 1px solid var(--cr-color-border-default);\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n  font-weight: var(--cr-font-weight-semibold);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/browser-frame/BrowserFrame.css"
    },
    {
      "path": "browser-frame/BrowserFrame.tsx",
      "content": "import { useId, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './BrowserFrame.css';\n\nexport interface BrowserFrameProps {\n  /** The address shown in the bar. Display only. */\n  url?: string;\n  children: ReactNode;\n  caption?: ReactNode;\n  className?: string;\n}\n\n/** A browser window drawn around a preview or screenshot. */\nexport function BrowserFrame({ url, children, caption, className }: BrowserFrameProps) {\n  const captionId = useId();\n  return (\n    <figure aria-labelledby={caption ? captionId : undefined} className={cx('cr-browser-frame cr-surface', className)}>\n      <div className=\"cr-browser-frame__bar\" aria-hidden=\"true\">\n        <span className=\"cr-browser-frame__lights\">\n          <span />\n          <span />\n          <span />\n        </span>\n        {url && <span className=\"cr-browser-frame__url\">{url}</span>}\n      </div>\n      <div className=\"cr-browser-frame__body\">{children}</div>\n      {caption && <figcaption id={captionId} className=\"cr-browser-frame__caption\">{caption}</figcaption>}\n    </figure>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/browser-frame/BrowserFrame.tsx"
    }
  ],
  "categories": [
    "molecule",
    "media"
  ],
  "type": "registry:ui"
}