{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "author": "@fma-ui/ui",
  "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.",
  "dependencies": [
    "cn@^0.4.0",
    "lucide-react@^1.52.0",
    "react-aria-components@^1.21.1"
  ],
  "registryDependencies": [
    "@fma-ui/button"
  ],
  "files": [
    {
      "path": "src/core/sheet/sheet.tsx",
      "content": "import { 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\nfunction Sheet({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: Omit<ModalOverlayPrimitiveProps, \"className\" | \"children\"> &\n  Pick<React.ComponentProps<typeof ModalPrimitive>, \"isDismissable\"> & {\n    className?: string;\n    children: React.ReactNode;\n    side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n    showCloseButton?: boolean;\n  }) {\n  return (\n    <SheetOverlay {...props}>\n      <ModalPrimitive\n        data-slot=\"sheet-content\"\n        data-side={side}\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] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\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};\n",
      "type": "registry:component",
      "target": "components/fma-ui/sheet.tsx"
    }
  ],
  "meta": {
    "status": "stable",
    "source": "shadcn",
    "tags": [
      "overlay",
      "modal",
      "drawer",
      "react-aria"
    ]
  },
  "categories": [
    "overlay"
  ],
  "type": "registry:ui"
}