{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lightbox",
  "title": "Lightbox",
  "description": "A full-screen, always-dark dialog for viewing photos, videos and documents, with focus trapping, Escape to close and focus restoration.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "cn@^0.4.0"
  ],
  "files": [
    {
      "path": "registry/familis/ui/lightbox.tsx",
      "content": "import { Dialog as LightboxPrimitive } from \"@base-ui/react/dialog\"\nimport { cn } from \"cn\"\n\n/**\n * A full-screen, dark stage for viewing media: photos, videos, documents.\n * Built on the dialog primitive, so it traps focus, closes on Escape and\n * restores focus to whatever opened it.\n *\n * @param props - Properties forwarded to the dialog root.\n * @returns The lightbox root.\n */\nfunction Lightbox({ ...props }: LightboxPrimitive.Root.Props) {\n  return <LightboxPrimitive.Root data-slot=\"lightbox\" {...props} />\n}\n\n/**\n * Renders the element that opens the lightbox, typically a thumbnail.\n *\n * @param props - Properties forwarded to the dialog trigger.\n * @returns The lightbox trigger.\n */\nfunction LightboxTrigger({ ...props }: LightboxPrimitive.Trigger.Props) {\n  return <LightboxPrimitive.Trigger data-slot=\"lightbox-trigger\" {...props} />\n}\n\n/**\n * Renders an element that closes the lightbox.\n *\n * @param props - Properties forwarded to the dialog close.\n * @returns The lightbox close.\n */\nfunction LightboxClose({ ...props }: LightboxPrimitive.Close.Props) {\n  return <LightboxPrimitive.Close data-slot=\"lightbox-close\" {...props} />\n}\n\n/**\n * Renders the lightbox content: a popup covering the whole viewport, always in\n * the dark theme so media reads the same whatever the app's theme.\n *\n * @param props - Properties forwarded to the dialog popup; `className` handles layout.\n * @returns The portalled backdrop and popup.\n */\nfunction LightboxContent({ className, ...props }: LightboxPrimitive.Popup.Props) {\n  return (\n    <LightboxPrimitive.Portal data-slot=\"lightbox-portal\">\n      <LightboxPrimitive.Backdrop\n        data-slot=\"lightbox-overlay\"\n        className=\"fixed inset-0 isolate z-50 bg-black/80 duration-150 data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0\"\n      />\n      <LightboxPrimitive.Popup\n        data-slot=\"lightbox-content\"\n        className={cn(\n          \"dark fixed inset-0 z-50 flex h-dvh w-dvw bg-background text-sm text-foreground duration-150 outline-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-98 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-98\",\n          className,\n        )}\n        {...props}\n      />\n    </LightboxPrimitive.Portal>\n  )\n}\n\n/**\n * Renders the lightbox title, which names the dialog for assistive technology.\n *\n * @param props - Properties forwarded to the dialog title.\n * @returns The lightbox title.\n */\nfunction LightboxTitle({ className, ...props }: LightboxPrimitive.Title.Props) {\n  return (\n    <LightboxPrimitive.Title\n      data-slot=\"lightbox-title\"\n      className={cn(\"font-heading text-base leading-none font-medium\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Lightbox, LightboxClose, LightboxContent, LightboxTitle, LightboxTrigger }\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "base": "base",
    "storybookId": "ui-lightbox--default",
    "links": {
      "api": "https://base-ui.com/react/components/dialog.md"
    }
  },
  "type": "registry:ui"
}