{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "type": "registry:ui",
  "dependencies": [
    "vaul"
  ],
  "files": [
    {
      "path": "components/ui/drawer.tsx",
      "content": "\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { Drawer as DrawerPrimitive } from \"vaul\"\r\n\r\nimport { cn } from \"@/lib/utils\"\r\n\r\nfunction Drawer({\r\n  ...props\r\n}: React.ComponentProps<typeof DrawerPrimitive.Root>) {\r\n  return <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\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-black/50\",\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 data-slot=\"drawer-portal\">\r\n      <DrawerOverlay />\r\n      <DrawerPrimitive.Content\r\n        data-slot=\"drawer-content\"\r\n        className={cn(\r\n          \"group/drawer-content bg-background 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-lg data-[vaul-drawer-direction=top]:border-b\",\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-lg data-[vaul-drawer-direction=bottom]:border-t\",\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]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm\",\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]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm\",\r\n          className\r\n        )}\r\n        {...props}\r\n      >\r\n        <div className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block\" />\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(\r\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\",\r\n        className\r\n      )}\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-2 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(\"text-foreground font-semibold\", className)}\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-muted-foreground text-sm\", 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",
      "target": "components/ui/drawer.tsx"
    }
  ]
}