{
  "$schema": "https://blode.co/ui/schema/registry-item.json",
  "name": "drawer",
  "title": "Drawer",
  "author": "Matthew Blode",
  "description": "A panel that slides in from the edge of the screen.",
  "dependencies": ["@base-ui/react"],
  "files": [
    {
      "path": "ui/drawer.tsx",
      "content": "\"use client\";\n\nimport { Drawer as DrawerPrimitive } from \"@base-ui/react/drawer\";\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Drawer = ({ ...props }: DrawerPrimitive.Root.Props) => (\n  <DrawerPrimitive.Root data-slot=\"drawer\" {...props} />\n);\n\nconst DrawerTrigger = ({\n  asChild,\n  children,\n  ...props\n}: DrawerPrimitive.Trigger.Props & {\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" render={children} {...props} />;\n  }\n\n  return (\n    <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props}>\n      {children}\n    </DrawerPrimitive.Trigger>\n  );\n};\n\nconst DrawerPortal = ({ ...props }: DrawerPrimitive.Portal.Props) => (\n  <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />\n);\n\nconst DrawerClose = ({\n  asChild,\n  children,\n  ...props\n}: DrawerPrimitive.Close.Props & {\n  asChild?: boolean;\n}) => {\n  if (asChild && React.isValidElement(children)) {\n    return <DrawerPrimitive.Close data-slot=\"drawer-close\" render={children} {...props} />;\n  }\n\n  return (\n    <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props}>\n      {children}\n    </DrawerPrimitive.Close>\n  );\n};\n\nconst DrawerBackdrop = ({ className, ...props }: DrawerPrimitive.Backdrop.Props) => (\n  <DrawerPrimitive.Backdrop\n    className={cn(\n      \"data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-overlay backdrop-blur-[10px] data-closed:animate-out data-open:animate-in data-closed:duration-300 data-open:duration-500 motion-reduce:transition-none\",\n      className,\n    )}\n    data-slot=\"drawer-overlay\"\n    {...props}\n  />\n);\n\nconst DrawerOverlay = DrawerBackdrop;\n\nconst DrawerViewport = ({ className, ...props }: DrawerPrimitive.Viewport.Props) => (\n  <DrawerPrimitive.Viewport\n    className={cn(\"fixed inset-0 z-50 outline-none\", className)}\n    data-slot=\"drawer-viewport\"\n    {...props}\n  />\n);\n\nconst DrawerPopup = ({ className, ...props }: DrawerPrimitive.Popup.Props) => (\n  <DrawerPrimitive.Popup\n    className={cn(\n      \"group/drawer-content fixed z-50 flex h-auto flex-col bg-background shadow-lg transition ease-in-out data-closed:animate-out data-open:animate-in data-closed:duration-300 data-open:duration-500\",\n      \"data-[swipe-direction=up]:data-closed:slide-out-to-top data-[swipe-direction=up]:data-open:slide-in-from-top data-[swipe-direction=up]:inset-x-0 data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:mx-auto data-[swipe-direction=up]:mb-24 data-[swipe-direction=up]:max-h-[80vh] data-[swipe-direction=up]:rounded-b-lg data-[swipe-direction=up]:border-b\",\n      \"data-[swipe-direction=down]:data-closed:slide-out-to-bottom data-[swipe-direction=down]:data-open:slide-in-from-bottom data-[swipe-direction=down]:inset-x-0 data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:mx-auto data-[swipe-direction=down]:mt-24 data-[swipe-direction=down]:max-h-[80vh] data-[swipe-direction=down]:rounded-t-lg data-[swipe-direction=down]:border-t\",\n      \"data-[swipe-direction=left]:data-closed:slide-out-to-right data-[swipe-direction=left]:data-open:slide-in-from-right data-[swipe-direction=left]:inset-y-0 data-[swipe-direction=left]:right-0 data-[swipe-direction=left]:w-3/4 data-[swipe-direction=left]:border-l data-[swipe-direction=left]:sm:max-w-sm\",\n      \"data-[swipe-direction=right]:data-closed:slide-out-to-left data-[swipe-direction=right]:data-open:slide-in-from-left data-[swipe-direction=right]:inset-y-0 data-[swipe-direction=right]:left-0 data-[swipe-direction=right]:w-3/4 data-[swipe-direction=right]:border-r data-[swipe-direction=right]:sm:max-w-sm\",\n      className,\n    )}\n    data-slot=\"drawer-popup\"\n    {...props}\n  />\n);\n\nconst DrawerContent = ({ className, children, ...props }: DrawerPrimitive.Popup.Props) => (\n  <DrawerPortal>\n    <DrawerBackdrop />\n    <DrawerViewport>\n      <DrawerPopup className={className} {...props}>\n        <DrawerPrimitive.Content\n          className=\"flex h-full flex-col outline-none\"\n          data-slot=\"drawer-content\"\n        >\n          {children}\n        </DrawerPrimitive.Content>\n      </DrawerPopup>\n    </DrawerViewport>\n  </DrawerPortal>\n);\n\nconst DrawerHeader = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\n      \"flex flex-col gap-0.5 p-4 group-data-[swipe-direction=down]/drawer-content:text-center group-data-[swipe-direction=up]/drawer-content:text-center md:gap-1.5 md:text-left\",\n      className,\n    )}\n    data-slot=\"drawer-header\"\n    {...props}\n  />\n);\n\nconst DrawerFooter = ({ className, ...props }: React.ComponentProps<\"div\">) => (\n  <div\n    className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n    data-slot=\"drawer-footer\"\n    {...props}\n  />\n);\n\nconst DrawerTitle = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) => (\n  <DrawerPrimitive.Title\n    className={cn(\"font-semibold text-foreground\", className)}\n    data-slot=\"drawer-title\"\n    {...props}\n  />\n);\n\nconst DrawerDescription = ({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) => (\n  <DrawerPrimitive.Description\n    className={cn(\"text-muted-foreground text-sm\", className)}\n    data-slot=\"drawer-description\"\n    {...props}\n  />\n);\n\nexport {\n  Drawer,\n  DrawerBackdrop,\n  DrawerPortal,\n  DrawerPopup,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerViewport,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n",
      "type": "registry:ui",
      "target": ""
    }
  ],
  "type": "registry:ui"
}