{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "light-box",
  "dependencies": [
    "@zenithui/light-box",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/ui/light-box.tsx",
      "content": "\"use client\"\nimport type { ComponentProps } from \"react\"\nimport { LightBox as LightBoxPrimitive } from \"@zenithui/light-box\"\nimport { cn } from \"@/lib/utils\"\nimport { ChevronLeft, ChevronRight, Trash2, X } from \"lucide-react\"\n\nexport default function LightBox({\n  classNames,\n  ...props\n}: ComponentProps<typeof LightBoxPrimitive>) {\n  return (\n    <LightBoxPrimitive\n      classNames={{\n        overLay: cn(\n          \"data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/10\",\n          classNames?.overLay,\n        ),\n        lightBox: cn(\n          \"data-[state=closed]:animate-fade-out data-[state=open]:animate-fade-in bg-background fixed top-[50%] left-[50%] z-50 grid w-11/12 max-w-xl translate-x-[-50%] translate-y-[-50%] gap-4 border shadow-lg duration-200 sm:rounded-lg lg:w-full\",\n          \"flex aspect-square min-w-[35%] flex-col justify-between overflow-hidden border-0 p-6 shadow-[inset_0_0_20px_5px_rgb(0,0,0,0.25)]\",\n          \"data-[animation=slide]:p-0\",\n          classNames?.lightBox,\n        ),\n        controls: cn(\n          \"z-10 flex w-full flex-row items-center justify-end gap-4 space-y-0\",\n          \"data-[animation=slide]:p-4\",\n          classNames?.controls,\n        ),\n        navigation: cn(\n          \"z-10 flex w-full items-center justify-between\",\n          \"data-[animation=slide]:p-4\",\n          classNames?.navigation,\n        ),\n        footer: cn(\n          \"z-10 flex w-full flex-col justify-end sm:flex-col\",\n          \"data-[animation=slide]:p-4\",\n          classNames?.footer,\n        ),\n        caption: cn(\"text-2xl font-semibold text-white\", classNames?.caption),\n        captionDescription: cn(\n          \"text-base font-normal text-white\",\n          classNames?.captionDescription,\n        ),\n        pagination: cn(\n          \"flex w-full items-center justify-center gap-2\",\n          classNames?.pagination,\n        ),\n        closeButton: cn(\n          \"flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/30 text-white backdrop:blur-sm hover:bg-white/40\",\n          classNames?.closeButton,\n        ),\n        deleteButton: cn(\n          \"flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/30 text-white backdrop:blur-sm hover:bg-white/40\",\n          classNames?.deleteButton,\n        ),\n        navigateButton: cn(\n          \"flex size-10 cursor-pointer items-center justify-center rounded-full bg-white/30 text-white backdrop:blur-sm hover:bg-white/40\",\n          classNames?.navigateButton,\n        ),\n        paginationButton: cn(\n          \"size-2.5 cursor-pointer rounded-full border border-white\",\n          classNames?.paginationButton,\n        ),\n        paginationButtonActive: cn(\n          \"bg-white\",\n          classNames?.paginationButtonActive,\n        ),\n      }}\n      components={{\n        DeleteButtonIcon: <Trash2 className=\"size-1/2\" />,\n        CloseButtonIcon: <X className=\"size-1/2\" />,\n        NavigationButtonLeftIcon: <ChevronLeft className=\"size-1/2\" />,\n        NavigationButtonRightIcon: <ChevronRight className=\"size-1/2\" />,\n      }}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}