{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "macbook",
  "type": "registry:ui",
  "title": "MacBook",
  "description": "A laptop frame with the camera housing cut into the display and the scoop cut into its base.",
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/loomui/macbook.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport interface MacBookProps extends React.ComponentProps<\"div\"> {\n  /** Largest width the machine 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  /** Draw the camera housing cut into the top of the display. */\n  notch?: boolean\n  /** Draw the base the lid stands on. */\n  base?: boolean\n}\n\n/**\n * MacBook Pro 14\" in points. The base is a little wider than the lid, which is\n * the only reason the machine reads as standing on something rather than\n * floating above a bar.\n */\nconst LID_WIDTH = 1544\nconst LID_HEIGHT = 1014\nconst BASE_WIDTH = 1600\nconst BASE_HEIGHT = 26\n\nexport function MacBook({\n  children,\n  src,\n  alt = \"\",\n  width = 620,\n  notch = true,\n  base = true,\n  className,\n  style,\n  ...props\n}: MacBookProps) {\n  const height = LID_HEIGHT + (base ? BASE_HEIGHT : 0)\n\n  // Shares of the whole machine's width, so the lid, the base and the scoop\n  // stay in step with each other at any size.\n  const cq = (points: number) =>\n    `${((points / BASE_WIDTH) * 100).toFixed(4)}cqw`\n\n  return (\n    <div\n      data-slot=\"macbook\"\n      className={cn(\"relative w-full\", className)}\n      style={{\n        maxWidth: width,\n        aspectRatio: `${BASE_WIDTH} / ${height}`,\n        containerType: \"inline-size\",\n        ...style,\n      }}\n      {...props}\n    >\n      {/* The lid. Narrower than the base and centred on it. */}\n      <div\n        className=\"mx-auto bg-linear-to-br from-neutral-500 via-neutral-700 to-neutral-600 shadow-xl\"\n        style={{\n          width: cq(LID_WIDTH),\n          height: cq(LID_HEIGHT),\n          borderRadius: cq(22),\n          padding: cq(16),\n        }}\n      >\n        <div\n          className=\"relative h-full w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800\"\n          style={{ borderRadius: cq(8) }}\n        >\n          {src ? (\n            <img src={src} alt={alt} className=\"h-full w-full object-cover\" />\n          ) : (\n            children\n          )}\n\n          {/* The camera housing is bezel that intrudes into the display, so it\n              is drawn over the screen rather than around it. */}\n          {notch ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"absolute top-0 left-1/2 -translate-x-1/2 bg-neutral-900\"\n              style={{\n                width: cq(160),\n                height: cq(30),\n                borderBottomLeftRadius: cq(10),\n                borderBottomRightRadius: cq(10),\n              }}\n            />\n          ) : null}\n        </div>\n      </div>\n\n      {base ? (\n        <div\n          aria-hidden=\"true\"\n          className=\"relative w-full bg-linear-to-b from-neutral-400 to-neutral-600\"\n          style={{\n            height: cq(BASE_HEIGHT),\n            borderBottomLeftRadius: cq(10),\n            borderBottomRightRadius: cq(10),\n          }}\n        >\n          {/* The scoop cut into the front edge, which is the detail that names\n              the machine from across a room. */}\n          <span\n            className=\"absolute bottom-0 left-1/2 -translate-x-1/2 bg-neutral-500\"\n            style={{\n              width: cq(210),\n              height: cq(11),\n              borderBottomLeftRadius: cq(11),\n              borderBottomRightRadius: cq(11),\n            }}\n          />\n        </div>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ]
}