{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "title": "Drawer",
  "description": "A swipeable bottom or side task panel built on Base UI Drawer.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "@neumorphism-ui/utils"
  ],
  "files": [
    {
      "path": "src/components/ui/drawer.tsx",
      "content": "\"use client\";\n\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nfunction Drawer(props: DrawerPrimitive.Root.Props) {\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger(props: DrawerPrimitive.Trigger.Props) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal(props: DrawerPrimitive.Portal.Props) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose(props: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({ className, ...props }: DrawerPrimitive.Backdrop.Props) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      {...props}\n      className={(state) =>\n        cn(\n          \"fixed inset-0 z-50 bg-[var(--neu-overlay)] opacity-[calc(1-var(--drawer-swipe-progress,0))] backdrop-blur-sm transition-opacity duration-[var(--neu-duration)] motion-reduce:transition-none data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:duration-0\",\n          typeof className === \"function\" ? className(state) : className,\n        )\n      }\n    />\n  );\n}\n\nfunction DrawerContent({ className, children, ...props }: DrawerPrimitive.Popup.Props) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          {...props}\n          className={(state) =>\n            cn(\n              \"group/drawer-popup pointer-events-auto fixed z-50 flex min-h-0 transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)] flex-col border border-[color:var(--neu-edge)] bg-[var(--popover)] [background-image:var(--neu-fill-raised)] text-[var(--popover-foreground)] [box-shadow:var(--neu-shadow-floating)] outline-none transition-[transform,height,opacity] duration-[var(--neu-duration)] ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-[swiping]:duration-0 data-[starting-style]:transform-(--closed-transform) data-[ending-style]:transform-(--closed-transform)\",\n              \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:max-h-[85dvh] data-[swipe-direction=down]:rounded-t-[var(--neu-radius-overlay)] data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+1px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))]\",\n              \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:max-h-[85dvh] data-[swipe-direction=up]:rounded-b-[var(--neu-radius-overlay)] data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-1px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y,0px))]\",\n              \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:w-[min(28rem,calc(100vw-1rem))] data-[swipe-direction=right]:rounded-l-[var(--neu-radius-overlay)] data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+1px),0,0)] data-[swipe-direction=right]:[--translate-x:var(--drawer-swipe-movement-x,0px)]\",\n              \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:w-[min(28rem,calc(100vw-1rem))] data-[swipe-direction=left]:rounded-r-[var(--neu-radius-overlay)] data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-1px),0,0)] data-[swipe-direction=left]:[--translate-x:var(--drawer-swipe-movement-x,0px)]\",\n              typeof className === \"function\" ? className(state) : className,\n            )\n          }\n        >\n          <div\n            data-slot=\"drawer-handle\"\n            aria-hidden=\"true\"\n            className=\"relative z-10 shrink-0 rounded-full bg-[var(--muted-foreground)] opacity-45 group-data-[swipe-direction=down]/drawer-popup:mx-auto group-data-[swipe-direction=down]/drawer-popup:mt-3 group-data-[swipe-direction=down]/drawer-popup:h-1.5 group-data-[swipe-direction=down]/drawer-popup:w-20 group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:mx-auto group-data-[swipe-direction=up]/drawer-popup:mb-3 group-data-[swipe-direction=up]/drawer-popup:h-1.5 group-data-[swipe-direction=up]/drawer-popup:w-20 group-data-[swipe-direction=right]/drawer-popup:my-auto group-data-[swipe-direction=right]/drawer-popup:ml-3 group-data-[swipe-direction=right]/drawer-popup:h-20 group-data-[swipe-direction=right]/drawer-popup:w-1.5 group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:my-auto group-data-[swipe-direction=left]/drawer-popup:mr-3 group-data-[swipe-direction=left]/drawer-popup:h-20 group-data-[swipe-direction=left]/drawer-popup:w-1.5\"\n          />\n          <DrawerPrimitive.Content\n            data-slot=\"drawer-body\"\n            className=\"flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain rounded-[inherit] select-text\"\n          >\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"grid shrink-0 gap-2 p-5 text-center sm:text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex shrink-0 flex-col gap-3 p-5 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      {...props}\n      className={(state) =>\n        cn(\"text-lg font-semibold leading-none tracking-tight\", typeof className === \"function\" ? className(state) : className)\n      }\n    />\n  );\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      {...props}\n      className={(state) =>\n        cn(\"text-sm leading-relaxed text-[var(--muted-foreground)]\", typeof className === \"function\" ? className(state) : className)\n      }\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerOverlay,\n  DrawerPortal,\n  DrawerTitle,\n  DrawerTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "categories": [
    "actions-overlays"
  ],
  "type": "registry:ui"
}