{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "files": [
    {
      "path": "components/ui/drawer.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst swipeDirectionMap = {\n  bottom: \"down\",\n  top: \"up\",\n  right: \"right\",\n  left: \"left\",\n} as const\n\nfunction Drawer({\n  direction = \"bottom\",\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root> & {\n  direction?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  const swipeDirection = swipeDirectionMap[direction]\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      swipeDirection={swipeDirection}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Backdrop>) {\n  return (\n    <DrawerPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 min-h-dvh bg-black opacity-[calc(0.5*(1-var(--drawer-swipe-progress)))] transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:opacity-0 data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[starting-style]:opacity-0 data-[swiping]:duration-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay />\n      <DrawerPrimitive.Viewport className=\"fixed inset-0 z-50\">\n        <DrawerPrimitive.Popup\n          className={cn(\n            \"group/drawer-content fixed touch-auto overflow-y-auto overscroll-contain bg-popover text-foreground outline outline-border transition-transform duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-[ending-style]:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-[swiping]:select-none\",\n            // right\n            \"data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:-mr-[3rem] data-[swipe-direction=right]:w-full data-[swipe-direction=right]:[transform:translateX(var(--drawer-swipe-movement-x))] data-[swipe-direction=right]:pr-[3rem] data-[swipe-direction=right]:data-[ending-style]:[transform:translateX(calc(100%-3rem))] data-[swipe-direction=right]:data-[starting-style]:[transform:translateX(calc(100%-3rem))] data-[swipe-direction=right]:sm:max-w-sm\",\n            // left\n            \"data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:-ml-[3rem] data-[swipe-direction=left]:w-full data-[swipe-direction=left]:[transform:translateX(var(--drawer-swipe-movement-x))] data-[swipe-direction=left]:pl-[3rem] data-[swipe-direction=left]:data-[ending-style]:[transform:translateX(calc(-100%+3rem))] data-[swipe-direction=left]:data-[starting-style]:[transform:translateX(calc(-100%+3rem))] data-[swipe-direction=left]:sm:max-w-sm\",\n            // top\n            \"data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:-mt-[3rem] data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:[transform:translateY(var(--drawer-swipe-movement-y))] data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:pt-[calc(env(safe-area-inset-top,0px)+3rem)] data-[swipe-direction=up]:data-[ending-style]:[transform:translateY(calc(-100%+3rem))] data-[swipe-direction=up]:data-[starting-style]:[transform:translateY(calc(-100%+3rem))]\",\n            // down\n            \"data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:-mb-[3rem] data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:[transform:translateY(var(--drawer-swipe-movement-y))] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:pb-[calc(env(safe-area-inset-bottom,0px)+3rem)] data-[swipe-direction=down]:data-[ending-style]:[transform:translateY(calc(100%-3rem))] data-[swipe-direction=down]:data-[starting-style]:[transform:translateY(calc(100%-3rem))]\"\n          )}\n          {...props}\n        >\n          <DrawerPrimitive.Content\n            data-slot=\"drawer-content\"\n            className={cn(\"flex flex-col text-sm\", className)}\n            {...props}\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(\n        \"flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left\",\n        className\n      )}\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 flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-lg font-semibold\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}