{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "A Base UI slide-over on the raised surface with the overlay shadow and scrim. Supports left, right, top and bottom edges, the brand ease and reduced-motion parity. size=sm|md|lg|xl controls only left and right widths; top and bottom span the viewport and scroll within its height. showCloseButton adds a named close control. Focus stays inside and returns to the trigger on close.",
  "dependencies": [
    "@base-ui/react@1.9.0",
    "lucide-react@1.33.0"
  ],
  "registryDependencies": [
    "@waimakers/utils",
    "@waimakers/theme"
  ],
  "files": [
    {
      "path": "src/components/ui/sheet.tsx",
      "content": "import { Dialog } from \"@base-ui/react/dialog\";\nimport { XIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\n\nimport { cn, focusRing } from \"../../lib/utils\";\n\nconst Sheet = Dialog.Root;\nconst SheetTrigger = Dialog.Trigger;\nconst SheetClose = Dialog.Close;\n\nconst SHEET_WIDTHS = {\n  sm: \"max-w-sm\",\n  md: \"max-w-md\",\n  lg: \"max-w-lg\",\n  xl: \"max-w-xl\",\n} as const;\n\nfunction SheetContent({\n  side = \"right\",\n  size = \"sm\",\n  showCloseButton = false,\n  className,\n  children,\n  ...props\n}: ComponentProps<typeof Dialog.Popup> & {\n  side?: \"left\" | \"right\" | \"top\" | \"bottom\";\n  size?: keyof typeof SHEET_WIDTHS;\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Dialog.Portal>\n      <Dialog.Backdrop className=\"fixed inset-0 z-(--z-overlay,40) bg-brand-scrim transition-opacity duration-(--dur-base,220ms) ease-brand motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0\" />\n      <Dialog.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        data-size={side === \"left\" || side === \"right\" ? size : undefined}\n        className={cn(\n          \"fixed z-(--z-modal,50) flex w-full flex-col gap-4 overflow-y-auto bg-popover p-6 text-popover-foreground shadow-brand-overlay outline-none\",\n          (side === \"left\" || side === \"right\") && cn(\"inset-y-0\", SHEET_WIDTHS[size]),\n          \"transition-transform duration-(--dur-base,220ms) ease-brand motion-reduce:transition-none\",\n          {\n            left: \"inset-y-0 left-0 border-r border-border data-ending-style:-translate-x-full data-starting-style:-translate-x-full\",\n            right:\n              \"inset-y-0 right-0 border-l border-border data-ending-style:translate-x-full data-starting-style:translate-x-full\",\n            top: \"inset-x-0 top-0 max-h-[calc(100dvh-2rem)] border-b border-border data-ending-style:-translate-y-full data-starting-style:-translate-y-full\",\n            bottom:\n              \"inset-x-0 bottom-0 max-h-[calc(100dvh-2rem)] border-t border-border data-ending-style:translate-y-full data-starting-style:translate-y-full\",\n          }[side],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton ? (\n          <Dialog.Close\n            type=\"button\"\n            data-slot=\"sheet-close-button\"\n            className={cn(\n              \"absolute top-4 right-4 flex size-8 items-center justify-center rounded-full text-muted-foreground transition-colors ease-brand hover:bg-muted hover:text-foreground\",\n              focusRing,\n            )}\n          >\n            <XIcon aria-hidden className=\"size-4\" />\n            <span className=\"sr-only\">Close</span>\n          </Dialog.Close>\n        ) : null}\n      </Dialog.Popup>\n    </Dialog.Portal>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 pr-8\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: ComponentProps<typeof Dialog.Title>) {\n  return (\n    <Dialog.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-display text-lg font-bold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({ className, ...props }: ComponentProps<typeof Dialog.Description>) {\n  return (\n    <Dialog.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n};\n",
      "type": "registry:ui",
      "target": "components/ui/sheet.tsx"
    }
  ],
  "type": "registry:ui"
}