{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ipad",
  "type": "registry:ui",
  "title": "iPad",
  "description": "A tablet frame drawn from the real measurements, upright or on its side, with a screen you put anything in.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/loomui/ipad.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface IPadProps extends React.ComponentProps<\"div\"> {\n  /** Largest width the device is drawn at, in pixels. It shrinks below this. */\n  width?: number\n  /** Screenshot to fill the screen with. */\n  src?: string\n  /** Description of the screenshot. Required whenever `src` is set. */\n  alt?: string\n  /** Which way up the tablet is held. */\n  orientation?: \"portrait\" | \"landscape\"\n  /** Draw the camera in the bezel above the screen. */\n  camera?: boolean\n}\n\n/** iPad Pro 11\" in points, held upright. */\nconst SHORT_SIDE = 834\nconst LONG_SIDE = 1194\n\nexport function IPad({\n  children,\n  src,\n  alt = \"\",\n  width = 420,\n  orientation = \"portrait\",\n  camera = true,\n  className,\n  style,\n  ...props\n}: IPadProps) {\n  const portrait = orientation === \"portrait\"\n  const deviceWidth = portrait ? SHORT_SIDE : LONG_SIDE\n  const deviceHeight = portrait ? LONG_SIDE : SHORT_SIDE\n\n  // Every measurement is a share of the frame's own width, so the proportions\n  // hold at whatever size the frame ends up rather than at one tuned by eye.\n  const cq = (points: number) =>\n    `${((points / deviceWidth) * 100).toFixed(4)}cqw`\n\n  return (\n    <div\n      data-slot=\"ipad\"\n      className={cn(\"relative w-full\", className)}\n      style={{\n        maxWidth: width,\n        aspectRatio: `${deviceWidth} / ${deviceHeight}`,\n        containerType: \"inline-size\",\n        ...style,\n      }}\n      {...props}\n    >\n      <div\n        className=\"absolute inset-0 bg-linear-to-br from-neutral-500 via-neutral-700 to-neutral-600 shadow-xl\"\n        style={{ borderRadius: cq(50), padding: cq(22) }}\n      >\n        <div\n          className=\"relative h-full w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800\"\n          style={{ borderRadius: cq(32) }}\n        >\n          {src ? (\n            <img src={src} alt={alt} className=\"h-full w-full object-cover\" />\n          ) : (\n            children\n          )}\n        </div>\n\n        {/* In the bezel rather than on the screen, which is where it sits and\n            what keeps it out of anything laid over the display. */}\n        {camera ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"absolute left-1/2 -translate-x-1/2 rounded-full bg-neutral-900\"\n            style={{ top: cq(8), width: cq(7), height: cq(7) }}\n          />\n        ) : null}\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}