{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "author": "@fma-ds/ds",
  "description": "A modal panel that slides in from an edge of the screen (top/right/bottom/left) — for navigation drawers, filters, or forms that need more room than a popover.\n\n- **`size`**: `sm` (384px, default), `md` (448px) or `lg` (672px) caps a left/right sheet from the `sm` breakpoint up; a width in `className` replaces it.",
  "dependencies": [
    "class-variance-authority@^0.7.1",
    "cn@^0.5.0",
    "lucide-react@^1.61.0",
    "react-aria-components@^1.22.1"
  ],
  "registryDependencies": [
    "@fma-ds/button"
  ],
  "files": [
    {
      "path": "src/core/sheet/sheet.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"cn\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport {\n  Heading,\n  ModalOverlay as ModalOverlayPrimitive,\n  type ModalOverlayProps as ModalOverlayPrimitiveProps,\n  Modal as ModalPrimitive,\n  Dialog as SheetPrimitive,\n  type DialogProps as SheetPrimitiveProps,\n  DialogTrigger as SheetTriggerPrimitive,\n  type DialogTriggerProps as SheetTriggerPrimitiveProps,\n} from \"react-aria-components\";\nimport { Button } from \"@/core/button/button\";\n\nfunction SheetTrigger({ ...props }: SheetTriggerPrimitiveProps) {\n  return <SheetTriggerPrimitive data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose({\n  className,\n  variant = \"outline\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      slot=\"close\"\n      data-slot=\"sheet-close\"\n      variant={variant}\n      size={size}\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetOverlay({\n  className,\n  children,\n  ...props\n}: Omit<ModalOverlayPrimitiveProps, \"className\" | \"children\"> & {\n  className?: string;\n  children: React.ReactNode;\n}) {\n  return (\n    <ModalOverlayPrimitive\n      data-slot=\"sheet-overlay\"\n      isDismissable\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-entering:opacity-0 data-exiting:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </ModalOverlayPrimitive>\n  );\n}\n\n/**\n * The width cap of a left/right sheet from `sm` up (below it, 3/4 of the\n * screen). Plain `sm:max-w-*` classes, not under `data-[side]`, so a width in\n * the consumer's `className` replaces them instead of losing on specificity.\n */\nconst sheetSizeVariants = cva(\"\", {\n  variants: {\n    size: {\n      sm: \"sm:max-w-sm\",\n      md: \"sm:max-w-md\",\n      lg: \"sm:max-w-2xl\",\n    },\n  },\n  defaultVariants: { size: \"sm\" },\n});\n\nfunction Sheet({\n  className,\n  children,\n  side = \"right\",\n  size = \"sm\",\n  showCloseButton = true,\n  ...props\n}: Omit<ModalOverlayPrimitiveProps, \"className\" | \"children\"> &\n  Pick<React.ComponentProps<typeof ModalPrimitive>, \"isDismissable\"> &\n  VariantProps<typeof sheetSizeVariants> & {\n    className?: string;\n    children: React.ReactNode;\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n    showCloseButton?: boolean;\n  }) {\n  const isSidePanel = side === \"left\" || side === \"right\";\n  return (\n    <SheetOverlay {...props}>\n      <ModalPrimitive\n        data-slot=\"sheet-content\"\n        data-side={side}\n        data-size={isSidePanel ? size : undefined}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-entering:opacity-0 data-exiting:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-entering:translate-y-[2.5rem] data-[side=bottom]:data-exiting:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-entering:translate-x-[-2.5rem] data-[side=left]:data-exiting:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-entering:translate-x-[2.5rem] data-[side=right]:data-exiting:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-entering:translate-y-[-2.5rem] data-[side=top]:data-exiting:translate-y-[-2.5rem]\",\n          isSidePanel && sheetSizeVariants({ size }),\n          className,\n        )}\n      >\n        <SheetPrimitive\n          data-slot=\"sheet\"\n          className=\"[display:inherit] h-full max-h-[inherit] [flex-direction:inherit] [gap:inherit] outline-none\"\n        >\n          {children}\n          {showCloseButton && (\n            <SheetClose variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\">\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </SheetClose>\n          )}\n        </SheetPrimitive>\n      </ModalPrimitive>\n    </SheetOverlay>\n  );\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: React.ComponentProps<typeof Sheet> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  showCloseButton?: boolean;\n}) {\n  return (\n    <Sheet className={className} side={side} showCloseButton={showCloseButton} {...props}>\n      {children}\n    </Sheet>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-0.5 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: Omit<React.ComponentProps<typeof Heading>, \"slot\">) {\n  return (\n    <Heading\n      slot=\"title\"\n      data-slot=\"sheet-title\"\n      className={cn(\"font-heading text-base font-medium text-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({ className, ...props }: Omit<React.ComponentProps<\"div\">, \"slot\">) {\n  return (\n    <div\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  type SheetPrimitiveProps,\n  SheetTitle,\n  SheetTrigger,\n  type SheetTriggerPrimitiveProps,\n  sheetSizeVariants,\n};\n",
      "type": "registry:component",
      "target": "components/fma-ds/sheet.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "customized",
    "license": "MIT",
    "origin": "shadcn/ui, style: aria-nova (base: react-aria-components)",
    "tags": [
      "overlay",
      "modal",
      "drawer",
      "react-aria"
    ],
    "contentHash": "68c99528f19b"
  },
  "categories": [
    "overlay"
  ],
  "type": "registry:ui"
}