{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "macbook-pro",
  "title": "MacBook Pro",
  "description": "Front-facing MacBook Pro device frame with display bezels, notch, and base—empty transparent screen by default; optional children slot.",
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/new-york/blocks/macbook-pro/page.tsx",
      "content": "import MacbookPro from \"./components/macbook-pro\"\n\nexport default function Page() {\n  return (\n    <div className=\"px-4 py-4 md:px-6 md:py-6\">\n      <MacbookPro />\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/macbook-pro/page.tsx"
    },
    {
      "path": "registry/new-york/blocks/macbook-pro/components/macbook-pro.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\nimport MacbookScreen, { type MacbookScreenProps } from \"./macbook-screen\"\n\nimport \"../styles/macbook-pro.css\"\n\ntype MacbookProProps = {\n  className?: string\n} & Omit<MacbookScreenProps, \"className\">\n\nexport default function MacbookPro({\n  className,\n  minHeight,\n  aspectRatio = \"16 / 10\",\n  children,\n}: MacbookProProps) {\n  return (\n    <div\n      className={cn(\n        \"mbp-root mx-auto flex w-full max-w-4xl min-w-0 flex-col items-center drop-shadow-(--mbp-shell-shadow)\",\n        className\n      )}\n      role=\"img\"\n      aria-label=\"MacBook Pro device frame mockup\"\n    >\n      <div className=\"relative z-1 w-full\">\n        <div className=\"mbp-lid-frame rounded-t-xl p-1.5\">\n          <div className=\"relative overflow-hidden rounded-t-lg bg-transparent\">\n            <div\n              className=\"absolute top-0 left-1/2 z-2 flex h-5 w-[13%] max-w-30 min-w-18 -translate-x-1/2 items-end justify-center rounded-b-lg bg-(--mbp-notch) pb-0.5\"\n              aria-hidden\n            >\n              <span className=\"mbp-camera relative block size-1.75 shrink-0 rounded-full\" />\n            </div>\n            <MacbookScreen minHeight={minHeight} aspectRatio={aspectRatio}>\n              {children}\n            </MacbookScreen>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"mbp-hinge -my-px h-0.5 w-full shrink-0\" aria-hidden />\n\n      <div\n        className=\"mbp-base relative z-0 h-8 w-[104%] rounded-b-[0.875rem]\"\n        aria-hidden\n      >\n        <div className=\"mbp-scoop absolute top-1 left-[calc(50%+4px)] z-0 h-2 w-[28%] max-w-40 min-w-20 -translate-x-1/2 -translate-y-1/2 rounded-b-lg\" />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/macbook-pro/components/macbook-pro.tsx"
    },
    {
      "path": "registry/new-york/blocks/macbook-pro/components/macbook-screen.tsx",
      "content": "import type { CSSProperties, ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type MacbookScreenProps = {\n  className?: string\n  minHeight?: string | number\n  aspectRatio?: string\n  children?: ReactNode\n}\n\nexport default function MacbookScreen({\n  className,\n  minHeight = \"20rem\",\n  aspectRatio,\n  children,\n}: MacbookScreenProps) {\n  const style = {\n    ...(aspectRatio ? { aspectRatio } : {}),\n    minHeight: typeof minHeight === \"number\" ? `${minHeight}px` : minHeight,\n  } satisfies CSSProperties\n\n  return (\n    <div\n      className={cn(\n        \"relative z-1 box-border w-full overflow-hidden rounded border-8 border-b-4.5 border-(--mbp-bezel) bg-transparent\",\n        className\n      )}\n      style={style}\n    >\n      {children ? (\n        <div className=\"mbp-screen-slot absolute inset-0 flex size-full overflow-hidden\">\n          {children}\n        </div>\n      ) : null}\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "app/macbook-pro/components/macbook-screen.tsx"
    },
    {
      "path": "registry/new-york/blocks/macbook-pro/styles/macbook-pro.css",
      "content": "/* macbook-pro — Space Gray theme tokens, lid/base gradients, camera pseudo-elements */\n\n.mbp-root {\n  --mbp-space-light: #3a3a3c;\n  --mbp-space-mid: #2c2c2e;\n  --mbp-space-dark: #1d1d1f;\n  --mbp-space-deep: #141416;\n  --mbp-frame-top: var(--mbp-space-light);\n  --mbp-frame-mid: var(--mbp-space-mid);\n  --mbp-frame-bottom: var(--mbp-space-dark);\n  --mbp-frame-highlight: rgb(255 255 255 / 0.08);\n  --mbp-frame-shadow: rgb(0 0 0 / 0.4);\n  --mbp-bezel: var(--mbp-space-deep);\n  --mbp-notch: var(--mbp-space-deep);\n  --mbp-hinge: var(--mbp-space-dark);\n  --mbp-base-top: var(--mbp-space-mid);\n  --mbp-base-mid: var(--mbp-space-dark);\n  --mbp-base-bottom: var(--mbp-space-deep);\n  --mbp-scoop: var(--mbp-space-deep);\n  --mbp-shell-shadow: 0 24px 48px -16px rgb(0 0 0 / 0.28);\n  --mbp-shell-ring: rgb(0 0 0 / 0.2);\n}\n\n.dark .mbp-root {\n  --mbp-shell-shadow: 0 28px 56px -16px rgb(0 0 0 / 0.55);\n  --mbp-shell-ring: rgb(255 255 255 / 0.08);\n}\n\n.mbp-lid-frame {\n  background: linear-gradient(\n    180deg,\n    var(--mbp-frame-top) 0%,\n    var(--mbp-frame-mid) 42%,\n    var(--mbp-frame-bottom) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 var(--mbp-frame-highlight),\n    inset 0 -1px 0 var(--mbp-frame-shadow),\n    0 0 0 1px var(--mbp-shell-ring);\n}\n\n.mbp-camera {\n  background: radial-gradient(\n    circle at 38% 32%,\n    #4a4a58 0%,\n    #252530 38%,\n    #121218 72%,\n    #08080c 100%\n  );\n  box-shadow:\n    0 0 0 1px rgb(0 0 0 / 0.85),\n    0 0 0 1.5px rgb(55 55 62 / 0.9),\n    inset 0 1px 2px rgb(0 0 0 / 0.55),\n    inset 0 -0.5px 0 rgb(255 255 255 / 0.06);\n}\n\n.mbp-camera::before {\n  content: \"\";\n  position: absolute;\n  inset: 18%;\n  border-radius: 50%;\n  background: radial-gradient(\n    circle at 40% 35%,\n    #1e1e28 0%,\n    #0c0c12 100%\n  );\n  box-shadow: inset 0 0 1px rgb(0 0 0 / 0.8);\n}\n\n.mbp-camera::after {\n  content: \"\";\n  position: absolute;\n  top: 22%;\n  left: 30%;\n  width: 28%;\n  height: 28%;\n  border-radius: 50%;\n  background: radial-gradient(\n    circle at 50% 50%,\n    rgb(255 255 255 / 0.5) 0%,\n    rgb(255 255 255 / 0.12) 55%,\n    transparent 100%\n  );\n}\n\n.mbp-hinge {\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--mbp-hinge) 8%,\n    var(--mbp-hinge) 92%,\n    transparent 100%\n  );\n}\n\n.mbp-base {\n  background: linear-gradient(\n    180deg,\n    var(--mbp-base-top) 0%,\n    var(--mbp-base-mid) 55%,\n    var(--mbp-base-bottom) 100%\n  );\n  box-shadow:\n    inset 0 1px 0 var(--mbp-frame-highlight),\n    inset 0 -2px 4px var(--mbp-frame-shadow);\n}\n\n.mbp-scoop {\n  background: var(--mbp-scoop);\n  box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.45);\n}\n\n.mbp-screen-slot > * {\n  flex: 1;\n  min-width: 0;\n  min-height: 0;\n}\n",
      "type": "registry:file",
      "target": "app/macbook-pro/styles/macbook-pro.css"
    }
  ],
  "type": "registry:block"
}