{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mockup-showcase",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "mockup-showcase.tsx",
      "target": "components/ui/mockup-showcase.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type MockupFrame = \"browser\" | \"device\" | \"none\";\n\nexport interface MockupShowcaseProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  frame?: MockupFrame;\n  /** Decorative text in the browser chrome's address bar. */\n  url?: string;\n  /** Any CSS aspect-ratio value, or `\"auto\"` to let live children set the\n   * height instead of locking a ratio and cropping them to cover. */\n  aspect?: string;\n}\n\n/**\n * Device and browser chrome around arbitrary media.\n *\n * There is no image abstraction on purpose: children may be a next/image, a\n * bare img, a video, or a live iframe. The well stretches whatever it gets, so\n * an unknown child element still fills the frame.\n */\nexport const MockupShowcase = React.forwardRef<\n  HTMLDivElement,\n  MockupShowcaseProps\n>(\n  (\n    { className, frame = \"browser\", url, aspect = \"16/10\", children, ...props },\n    ref,\n  ) => {\n    const fluidHeight = aspect === \"auto\";\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"overflow-hidden border border-border bg-surface shadow-floating\",\n          frame === \"device\" ? \"rounded-[1.75rem] p-2\" : \"rounded-xl\",\n          className,\n        )}\n        {...props}\n      >\n        {frame === \"browser\" && (\n          <div\n            aria-hidden=\"true\"\n            className=\"flex items-center gap-2 border-b border-border bg-surface-2 px-3 py-2.5\"\n          >\n            <span className=\"flex gap-1.5\">\n              <span className=\"size-2.5 rounded-full bg-border-strong\" />\n              <span className=\"size-2.5 rounded-full bg-border-strong\" />\n              <span className=\"size-2.5 rounded-full bg-border-strong\" />\n            </span>\n            {url != null && (\n              <span className=\"ml-2 flex-1 truncate rounded-md bg-sunken px-2.5 py-1 font-mono text-[0.6875rem] text-muted\">\n                {url}\n              </span>\n            )}\n          </div>\n        )}\n\n        {frame === \"device\" && (\n          <div\n            aria-hidden=\"true\"\n            className=\"mx-auto mb-2 h-1.5 w-24 rounded-full bg-border-strong\"\n          />\n        )}\n\n        <div\n          data-testid=\"mockup-well\"\n          style={fluidHeight ? undefined : { aspectRatio: aspect }}\n          className={cn(\n            \"relative w-full overflow-hidden bg-sunken\",\n            fluidHeight\n              ? \"[&>*]:w-full\"\n              : \"[&>*]:h-full [&>*]:w-full [&>*]:object-cover\",\n            frame === \"device\" && \"rounded-[1.25rem]\",\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\nMockupShowcase.displayName = \"MockupShowcase\";\n"
    }
  ]
}