{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "device-mock",
  "type": "registry:ui",
  "title": "Device Mock",
  "description": "CSS-only phone, laptop, and browser frames for wrapping product screenshots and demos.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/device-mock.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Device frame mockups (Safari browser and iPhone).\n * @author Saasflare™\n * CSS-only device frames for wrapping screenshots and demos.\n * No images or assets required — pure HTML/CSS chrome.\n * @module packages/ui/components/ui/device-mock\n * @package ui\n *\n * @component\n * @example\n * import { SafariMock, IPhoneMock } from '@saasflare/ui';\n * <SafariMock url=\"https://app.example.com\">\n *   <img src=\"/screenshot.png\" alt=\"App screenshot\" />\n * </SafariMock>\n *\n * @example\n * <IPhoneMock>\n *   <img src=\"/mobile-screenshot.png\" alt=\"Mobile view\" />\n * </IPhoneMock>\n */\n\nimport * as React from \"react\"\nimport { type ReactNode } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/* ── Safari Browser Mock ── */\n\n/** Props for the SafariMock component. */\nexport interface SafariMockProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Content to display inside the browser frame. */\n  children: ReactNode\n  /** URL text shown in the address bar. Default: `\"https://example.com\"` */\n  url?: string\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Safari-style browser frame for wrapping screenshots.\n *\n * - CSS-only traffic lights (red/yellow/green dots)\n * - Address bar with optional URL text\n * - Rounded corners matching macOS window chrome\n *\n * @component\n * @package ui\n */\nexport function SafariMock({\n  children,\n  url = \"https://example.com\",\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: SafariMockProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      {...props}\n      className={cn(\"overflow-hidden rounded-xl border bg-background shadow-xl\", className)}\n      data-slot=\"safari-mock\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      {/* Title bar */}\n      <div className=\"flex items-center gap-2 border-b bg-muted/50 px-4 py-3\">\n        {/* Traffic lights */}\n        <div className=\"flex gap-1.5\">\n          <div className=\"size-3 rounded-full bg-[#ff5f57]\" />\n          <div className=\"size-3 rounded-full bg-[#febc2e]\" />\n          <div className=\"size-3 rounded-full bg-[#28c840]\" />\n        </div>\n\n        {/* Address bar */}\n        <div className=\"mx-auto flex max-w-md flex-1 items-center justify-center rounded-md bg-background/80 px-3 py-1 text-xs text-muted-foreground\">\n          <svg\n            className=\"mr-1.5 size-3 text-muted-foreground/50\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            viewBox=\"0 0 24 24\"\n            aria-hidden=\"true\"\n          >\n            <path\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n              strokeWidth={2}\n              d=\"M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z\"\n            />\n          </svg>\n          <span className=\"truncate\">{url}</span>\n        </div>\n      </div>\n\n      {/* Content */}\n      <div className=\"overflow-hidden\">{children}</div>\n    </div>\n  )\n}\n\n/* ── iPhone Mock ── */\n\n/** Props for the IPhoneMock component. */\nexport interface IPhoneMockProps\n  extends Omit<React.ComponentProps<\"div\">, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {\n  /** Content to display inside the phone frame. */\n  children: ReactNode\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * iPhone-style device frame for wrapping mobile screenshots.\n *\n * - CSS-only frame with rounded corners and notch\n * - Status bar with time and signal indicators\n * - Aspect ratio matches iPhone 15 Pro proportions\n *\n * @component\n * @package ui\n */\nexport function IPhoneMock({\n  children,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: IPhoneMockProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"relative mx-auto w-[280px] rounded-[2.5rem] border-[6px] border-foreground/10 bg-background p-1.5 shadow-xl\",\n        className,\n      )}\n      data-slot=\"iphone-mock\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n    >\n      {/* Notch / Dynamic Island */}\n      <div className=\"absolute left-1/2 top-2 z-10 h-5 w-24 -translate-x-1/2 rounded-full bg-foreground/10\" />\n\n      {/* Screen */}\n      <div className=\"overflow-hidden rounded-[2rem] bg-background\">\n        {/* Status bar */}\n        <div className=\"flex items-center justify-between px-6 py-2 text-[10px] font-semibold text-foreground\">\n          <span>9:41</span>\n          <div className=\"flex items-center gap-1\">\n            <div className=\"flex gap-0.5\">\n              <div className=\"h-2 w-0.5 rounded-sm bg-foreground\" />\n              <div className=\"h-2.5 w-0.5 rounded-sm bg-foreground\" />\n              <div className=\"h-3 w-0.5 rounded-sm bg-foreground\" />\n              <div className=\"h-3.5 w-0.5 rounded-sm bg-foreground\" />\n            </div>\n            <span className=\"ml-1\">100%</span>\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"overflow-hidden\">{children}</div>\n      </div>\n\n      {/* Home indicator */}\n      <div className=\"mx-auto mt-1.5 h-1 w-28 rounded-full bg-foreground/20\" />\n    </div>\n  )\n}\n",
      "target": "components/ui/device-mock.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/device-mock.json"
  }
}