{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "title": "Drawer",
  "description": "A drawer component built with Vaul.",
  "dependencies": [
    "vaul-base",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/drawer.jsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul-base\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Drawer({ ...props } = {}) {\n\treturn <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({ ...props } = {}) {\n\treturn <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({ ...props } = {}) {\n\treturn <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({ ...props } = {}) {\n\treturn <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({ className = \"\", ...props }) {\n\treturn (\n\t\t<DrawerPrimitive.Overlay\n\t\t\tdata-slot=\"drawer-overlay\"\n\t\t\tclassName={cn(\n\t\t\t\t\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/80 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerHandle({ className = \"\", ...props }) {\n\treturn (\n\t\t<DrawerPrimitive.Handle\n\t\t\tdata-slot=\"drawer-handle\"\n\t\t\tclassName={cn(\n\t\t\t\t\"mx-auto mt-4 h-1.5 w-[100px] rounded-full bg-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerContent({ className = \"\", children = null, ...props }) {\n\treturn (\n\t\t<DrawerPortal data-slot=\"drawer-portal\">\n\t\t\t<DrawerOverlay />\n\t\t\t<DrawerPrimitive.Content\n\t\t\t\tdata-slot=\"drawer-content\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"before:bg-background flex h-auto flex-col bg-transparent p-2 text-xs/relaxed before:absolute before:inset-2 before:-z-10 before:rounded-xl data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm group/drawer-content fixed z-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<DrawerHandle className=\"group-data-[vaul-drawer-direction=bottom]/drawer-content:block hidden shrink-0\" />\n\t\t\t\t{children}\n\t\t\t</DrawerPrimitive.Content>\n\t\t</DrawerPortal>\n\t);\n}\n\nfunction DrawerHeader({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"drawer-header\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-1 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:text-left flex flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerFooter({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"drawer-footer\"\n\t\t\tclassName={cn(\"gap-2 p-4 mt-auto flex flex-col\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerTitle({ className = \"\", ...props }) {\n\treturn (\n\t\t<DrawerPrimitive.Title\n\t\t\tdata-slot=\"drawer-title\"\n\t\t\tclassName={cn(\"text-foreground text-sm font-medium\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DrawerDescription({ className = \"\", ...props }) {\n\treturn (\n\t\t<DrawerPrimitive.Description\n\t\t\tdata-slot=\"drawer-description\"\n\t\t\tclassName={cn(\"text-muted-foreground text-xs/relaxed\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nDrawer.displayName = \"Drawer\";\nDrawerPortal.displayName = \"DrawerPortal\";\nDrawerOverlay.displayName = \"DrawerOverlay\";\nDrawerTrigger.displayName = \"DrawerTrigger\";\nDrawerClose.displayName = \"DrawerClose\";\nDrawerHandle.displayName = \"DrawerHandle\";\nDrawerContent.displayName = \"DrawerContent\";\nDrawerHeader.displayName = \"DrawerHeader\";\nDrawerFooter.displayName = \"DrawerFooter\";\nDrawerTitle.displayName = \"DrawerTitle\";\nDrawerDescription.displayName = \"DrawerDescription\";\n\nexport {\n\tDrawer,\n\tDrawerPortal,\n\tDrawerOverlay,\n\tDrawerTrigger,\n\tDrawerClose,\n\tDrawerHandle,\n\tDrawerContent,\n\tDrawerHeader,\n\tDrawerFooter,\n\tDrawerTitle,\n\tDrawerDescription,\n};\n",
      "type": "registry:component",
      "target": "components/optics/drawer.jsx"
    }
  ],
  "type": "registry:component"
}