{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "title": "Drawer",
  "dependencies": [
    "vaul",
    "@radix-ui/react-dialog"
  ],
  "files": [
    {
      "path": "src/components/ui/drawer.tsx",
      "content": "\"use client\"\r\n\r\nimport { Drawer as DrawerPrimitive } from \"vaul\"\r\n\r\nimport * as React from \"react\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Drawer({\r\n  shouldScaleBackground = true,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\r\n  return (\r\n    <DrawerPrimitive.Root\r\n      data-slot=\"drawer\"\r\n      shouldScaleBackground={shouldScaleBackground}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DrawerTrigger({\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\r\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />\r\n}\r\n\r\nfunction DrawerPortal({\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\r\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\r\n}\r\n\r\nfunction DrawerClose({\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\r\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />\r\n}\r\n\r\nfunction DrawerOverlay({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\r\n  return (\r\n    <DrawerPrimitive.Overlay\r\n      data-slot=\"drawer-overlay\"\r\n      className={cn(\r\n        \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-overlay\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DrawerContent({\r\n  className,\r\n  children,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Content>) {\r\n  return (\r\n    <DrawerPortal>\r\n      <DrawerOverlay />\r\n      <DrawerPrimitive.Content\r\n        data-slot=\"drawer-content\"\r\n        className={cn(\r\n          \"bg-background group/drawer-content fixed z-50 flex h-auto flex-col\",\r\n          \"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=top]:rounded-b-base border-t-2 border-t-border\",\r\n          \"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=bottom]:rounded-t-base border-b-2 border-b-border\",\r\n          \"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=right]:sm:max-w-sm border-r-2 border-r-border\",\r\n          \"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=left]:sm:max-w-sm border-l-2 border-l-border\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        <div className=\"mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block bg-current\" />\r\n        {children}\r\n      </DrawerPrimitive.Content>\r\n    </DrawerPortal>\r\n  )\r\n}\r\n\r\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"drawer-header\"\r\n      className={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot=\"drawer-footer\"\r\n      className={cn(\"mt-auto flex flex-col gap-3 p-4\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DrawerTitle({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\r\n  return (\r\n    <DrawerPrimitive.Title\r\n      data-slot=\"drawer-title\"\r\n      className={cn(\r\n        \"text-lg font-heading leading-none tracking-tight\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nfunction DrawerDescription({\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\r\n  return (\r\n    <DrawerPrimitive.Description\r\n      data-slot=\"drawer-description\"\r\n      className={cn(\"text-sm font-base text-foreground\", className)}\r\n      {...props}\r\n    />\r\n  )\r\n}\r\n\r\nexport {\r\n  Drawer,\r\n  DrawerPortal,\r\n  DrawerOverlay,\r\n  DrawerTrigger,\r\n  DrawerClose,\r\n  DrawerContent,\r\n  DrawerHeader,\r\n  DrawerFooter,\r\n  DrawerTitle,\r\n  DrawerDescription,\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}