{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "device-mockup",
  "title": "Device Mockup",
  "description": "The nx-ui Device Mockup block.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/blocks/device-mockup.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * DeviceMockup — tasteful, token-driven device frames for wrapping screenshots\n * in marketing sections and empty states:\n *   - `BrowserMockup`: a browser window with traffic-light dots and a URL pill.\n *   - `IPhoneMockup`: a phone bezel with a notch and rounded screen.\n *\n * Both are pure CSS/HTML (no heavy SVG), so they flip in dark mode and scale\n * responsively. Pass the screenshot as children (an <img>, a live node, or a\n * pattern) — it is clipped to the screen area.\n *\n * @example\n * <BrowserMockup url=\"app.nexusregen.com/dashboard\">\n *   <img src=\"/screenshots/dashboard.png\" alt=\"\" />\n * </BrowserMockup>\n */\n\nfunction BrowserMockup({\n  url,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & { url?: string }) {\n  return (\n    <div\n      data-slot=\"browser-mockup\"\n      className={cn(\n        \"overflow-hidden rounded-xl bg-bg-primary shadow-xl ring-1 ring-border-secondary\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2 border-b border-border-secondary bg-bg-secondary px-4 py-3\">\n        <div className=\"flex shrink-0 gap-1.5\">\n          <span className=\"size-3 rounded-full bg-utility-red-400\" />\n          <span className=\"size-3 rounded-full bg-utility-yellow-400\" />\n          <span className=\"size-3 rounded-full bg-utility-green-400\" />\n        </div>\n        {url ? (\n          <div className=\"mx-auto flex max-w-xs min-w-0 flex-1 items-center justify-center truncate rounded-md bg-bg-primary px-3 py-1 text-center text-xs text-text-tertiary ring-1 ring-border-secondary\">\n            {url}\n          </div>\n        ) : null}\n      </div>\n      <div className=\"overflow-hidden bg-bg-secondary [&_img]:block [&_img]:size-full [&_img]:object-cover\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nfunction IPhoneMockup({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"iphone-mockup\"\n      className={cn(\n        \"relative mx-auto aspect-[314/640] w-[280px] rounded-[3rem] bg-neutral-900 p-3 shadow-2xl ring-1 ring-black/20 dark:bg-neutral-800\",\n        className\n      )}\n      {...props}\n    >\n      {/* Notch */}\n      <div className=\"absolute top-3 left-1/2 z-10 h-6 w-32 -translate-x-1/2 rounded-b-2xl bg-neutral-900 dark:bg-neutral-800\" />\n      {/* Screen */}\n      <div className=\"relative size-full overflow-hidden rounded-[2.25rem] bg-bg-primary [&_img]:block [&_img]:size-full [&_img]:object-cover\">\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport { BrowserMockup, IPhoneMockup }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}