{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "browser-frame",
  "title": "Browser Frame",
  "description": "A browser window drawn in CSS around a page or a screenshot, with window dots, an address field and optional actions.",
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/browser-frame.tsx",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n\ninterface BrowserFrameProps extends ComponentProps<\"div\"> {\n  /** Address shown in the bar, as plain text (it is not a link). */\n  url?: string;\n  /**\n   * Let screen readers read the address. By default the address is\n   * decoration, like the window dots, and is hidden from them.\n   */\n  announceUrl?: boolean;\n  /** Content at the right end of the bar, such as buttons. It stays accessible. */\n  actions?: ReactNode;\n  /**\n   * Width / height of the whole window, as a number (`16 / 10`) or a CSS ratio\n   * (`\"16 / 10\"`). The viewport fills what the bar leaves. Without it the\n   * content sets the height.\n   */\n  aspect?: number | string;\n  /** Classes for the top bar. */\n  barClassName?: string;\n  /** Classes for the viewport that holds the children. */\n  viewportClassName?: string;\n}\n\n/**\n * A browser window drawn in CSS around a page or a screenshot: a top bar\n * with three window dots and an address field, and a viewport for the\n * children. The dots are always hidden from screen readers; the address is\n * too unless `announceUrl` is set, and the whole bar is hidden when it holds\n * nothing to read or use. `actions` keep the bar in the accessibility tree.\n * A server component with no motion.\n *\n * @example\n * <BrowserFrame url=\"app.example.com/dashboard\" aspect=\"16 / 10\" className=\"w-full max-w-4xl\">\n *   <Image src=\"/screens/dashboard.png\" alt=\"The dashboard\" fill className=\"object-cover\" />\n * </BrowserFrame>\n */\nfunction BrowserFrame({\n  url,\n  announceUrl = false,\n  actions,\n  aspect,\n  barClassName,\n  viewportClassName,\n  className,\n  style,\n  children,\n  ...props\n}: BrowserFrameProps) {\n  const hasActions = actions != null && actions !== false;\n  const barHidden = !announceUrl && !hasActions;\n\n  return (\n    <div\n      data-slot=\"browser-frame\"\n      className={cn(\n        \"border-border bg-card flex flex-col overflow-hidden rounded-lg border\",\n        className\n      )}\n      style={aspect != null ? { aspectRatio: String(aspect), ...style } : style}\n      {...props}\n    >\n      <div\n        data-slot=\"browser-frame-bar\"\n        aria-hidden={barHidden ? \"true\" : undefined}\n        className={cn(\n          \"border-border flex h-11 shrink-0 items-center gap-3 border-b px-3\",\n          barClassName\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"browser-frame-dots\"\n          className=\"flex shrink-0 items-center gap-1.5\"\n        >\n          {[0, 1, 2].map((dot) => (\n            <span\n              key={dot}\n              data-slot=\"browser-frame-dot\"\n              className=\"bg-muted-foreground/40 size-2.5 rounded-full\"\n            />\n          ))}\n        </span>\n        <span\n          aria-hidden={announceUrl || barHidden ? undefined : \"true\"}\n          data-slot=\"browser-frame-address\"\n          className=\"bg-muted text-muted-foreground flex h-7 min-w-0 flex-1 items-center rounded-md px-3 text-xs\"\n        >\n          <span className=\"truncate\">{url}</span>\n        </span>\n        {hasActions && (\n          <div data-slot=\"browser-frame-actions\" className=\"flex shrink-0 items-center gap-1\">\n            {actions}\n          </div>\n        )}\n      </div>\n      <div\n        data-slot=\"browser-frame-viewport\"\n        className={cn(\n          \"bg-background relative overflow-hidden\",\n          aspect != null && \"min-h-0 flex-1\",\n          viewportClassName\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport { BrowserFrame, type BrowserFrameProps };\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "creative"
  ],
  "type": "registry:ui"
}