{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "drawer",
  "title": "Drawer",
  "description": "A mobile-first bottom panel with swipe dismissal, optional snap points, managed focus, and independent body scrolling.",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/rivetui/components/drawer/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\ntype DrawerProps<Payload = unknown> = Omit<DrawerPrimitive.Root.Props<Payload>, \"swipeDirection\">;\n\ntype DrawerSnapPoint = DrawerPrimitive.Root.SnapPoint;\n\nfunction Drawer<Payload>(props: DrawerProps<Payload>) {\n  return <DrawerPrimitive.Root swipeDirection=\"down\" {...props} />;\n}\n\nfunction DrawerTrigger<Payload>(props: DrawerPrimitive.Trigger.Props<Payload>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerClose(props: DrawerPrimitive.Close.Props) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerSwipeArea(props: DrawerPrimitive.SwipeArea.Props) {\n  return <DrawerPrimitive.SwipeArea data-slot=\"drawer-swipe-area\" {...props} />;\n}\n\ntype DrawerContentProps = DrawerPrimitive.Popup.Props & {\n  showHandle?: boolean;\n};\n\nfunction DrawerContent({ className, children, showHandle = true, ...props }: DrawerContentProps) {\n  return (\n    <DrawerPrimitive.Portal>\n      <DrawerPrimitive.Backdrop\n        data-slot=\"drawer-backdrop\"\n        className=\"fixed inset-0 z-50 min-h-dvh bg-black/55 opacity-[calc(1-var(--drawer-swipe-progress))] transition-opacity [transition-duration:calc(var(--drawer-swipe-strength)*240ms)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute motion-reduce:transition-none dark:bg-black/70\"\n      />\n      <DrawerPrimitive.Viewport\n        data-slot=\"drawer-viewport\"\n        className=\"pointer-events-none fixed inset-0 z-50 flex min-h-dvh items-end justify-center overflow-hidden\"\n      >\n        <DrawerPrimitive.Popup\n          data-slot=\"drawer-content\"\n          className={cn(\n            \"pointer-events-auto relative flex max-h-[calc(100dvh-1rem)] w-full max-w-2xl flex-col overflow-hidden border-x border-t border-border bg-background text-foreground outline-none [transform:translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] transition-transform [transition-duration:calc(var(--drawer-swipe-strength)*240ms)] ease-out focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40 data-ending-style:[transform:translateY(100%)] data-starting-style:[transform:translateY(100%)] data-swiping:select-none data-swiping:duration-0 motion-reduce:transition-none\",\n            className,\n          )}\n          {...props}\n        >\n          <DrawerPrimitive.Content className=\"flex min-h-0 flex-1 flex-col\">\n            {showHandle ? <DrawerHandle /> : null}\n            {children}\n          </DrawerPrimitive.Content>\n        </DrawerPrimitive.Popup>\n      </DrawerPrimitive.Viewport>\n    </DrawerPrimitive.Portal>\n  );\n}\n\nfunction DrawerHandle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-handle\"\n      className={cn(\n        \"flex h-7 shrink-0 cursor-grab touch-none items-center justify-center border-b border-border active:cursor-grabbing\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"h-px w-10 bg-muted-foreground/70\" aria-hidden=\"true\" />\n    </div>\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-1.5 border-b border-border p-5 text-left\", 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      className={cn(\"text-lg font-semibold leading-none tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({ className, ...props }: DrawerPrimitive.Description.Props) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm leading-relaxed text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerBody({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-body\"\n      className={cn(\"min-h-0 flex-1 overflow-y-auto p-5\", 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(\n        \"flex shrink-0 flex-col gap-2 border-t border-border p-5 sm:flex-row sm:flex-wrap sm:justify-end\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport type { DrawerContentProps, DrawerProps, DrawerSnapPoint };\nexport {\n  Drawer,\n  DrawerBody,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHandle,\n  DrawerHeader,\n  DrawerSwipeArea,\n  DrawerTitle,\n  DrawerTrigger,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}