{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "Extends the Dialog component to display content that complements the main content of the screen.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react"
  ],
  "registryDependencies": [
    "@lumi-ui/dialog",
    "@lumi-ui/button",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/sheet.tsx",
      "content": "\"use client\";\n\nimport { Dialog as BaseSheet } from \"@base-ui/react/dialog\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { XIcon } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Button } from \"@/registry/ui/button\";\n\nfunction Sheet<Payload>(props: BaseSheet.Root.Props<Payload>) {\n  return <BaseSheet.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger<Payload>({\n  className,\n  ...props\n}: BaseSheet.Trigger.Props<Payload>) {\n  return (\n    <BaseSheet.Trigger\n      className={className}\n      data-slot=\"sheet-trigger\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetPortal({ className, ...props }: BaseSheet.Portal.Props) {\n  return (\n    <BaseSheet.Portal\n      className={className}\n      data-slot=\"sheet-portal\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetViewport({\n  className,\n  side,\n  inset = false,\n  ...props\n}: BaseSheet.Viewport.Props & {\n  side?: VariantProps<typeof popupVariants>[\"side\"];\n  inset?: boolean;\n}) {\n  return (\n    <BaseSheet.Viewport\n      className={cn(\n        \"fixed inset-0\",\n        side === \"bottom\" && \"grid grid-rows-[1fr_auto]\",\n        side === \"top\" && \"grid grid-rows-[auto_1fr]\",\n        side === \"left\" && \"flex justify-start\",\n        side === \"right\" && \"flex justify-end\",\n        inset && \"p-4 sm:p-6\",\n      )}\n      data-slot=\"sheet-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetBackdrop({ className, ...props }: BaseSheet.Backdrop.Props) {\n  return (\n    <BaseSheet.Backdrop\n      className={cn(\n        \"fixed inset-0 min-h-dvh bg-black/20 backdrop-blur-xs animate-fade\",\n        \"supports-[-webkit-touch-callout:none]:absolute\",\n        className,\n      )}\n      data-slot=\"sheet-backdrop\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetPopup({ className, children, ...props }: BaseSheet.Popup.Props) {\n  return (\n    <BaseSheet.Popup\n      className={cn(\"bg-background\", className)}\n      data-slot=\"sheet-popup\"\n      {...props}\n    >\n      {children}\n    </BaseSheet.Popup>\n  );\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"flex flex-col gap-1.5\", className)}\n      data-slot=\"sheet-header\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetTitle({ className, ...props }: BaseSheet.Title.Props) {\n  return (\n    <BaseSheet.Title\n      className={cn(\"text-xl font-semibold\", className)}\n      data-slot=\"sheet-title\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: BaseSheet.Description.Props) {\n  return (\n    <BaseSheet.Description\n      className={cn(\"text-muted-foreground text-sm\", className)}\n      data-slot=\"sheet-description\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"mt-auto flex flex-col gap-2\", className)}\n      data-slot=\"sheet-footer\"\n      {...props}\n    />\n  );\n}\n\nfunction SheetClose({ className, ...props }: BaseSheet.Close.Props) {\n  return (\n    <BaseSheet.Close className={className} data-slot=\"sheet-close\" {...props} />\n  );\n}\n\nconst popupVariants = cva(\n  \"relative flex flex-col gap-4 p-4 sm:p-6 bg-background text-foreground max-h-full w-full overflow-hidden\",\n  {\n    defaultVariants: {\n      side: \"right\",\n    },\n    variants: {\n      side: {\n        bottom: \"row-start-2 animate-fade-up border-t\",\n        left: \"max-w-md animate-slide-right border-r w-[calc(100%-3rem)]\",\n        right: \"max-w-md animate-slide-left border-l w-[calc(100%-3rem)]\",\n        top: \"animate-fade-down border-b\",\n      },\n    },\n  },\n);\n\ninterface SheetContentProps\n  extends BaseSheet.Popup.Props,\n    VariantProps<typeof popupVariants> {\n  showCloseButton?: boolean;\n  inset?: boolean;\n  backdropClassName?: string;\n}\n\nfunction SheetContent({\n  className,\n  children,\n  showCloseButton = false,\n  side = \"right\",\n  inset = false,\n  backdropClassName,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPortal>\n      <SheetBackdrop className={cn(backdropClassName)} />\n      <SheetViewport inset={inset} side={side}>\n        <BaseSheet.Popup\n          className={cn(\n            popupVariants({ side }),\n            inset && \"rounded-md overlay-outline\",\n            className,\n          )}\n          data-slot=\"sheet-content\"\n          {...props}\n        >\n          {children}\n          {showCloseButton && (\n            <BaseSheet.Close\n              aria-label=\"Close\"\n              className=\"absolute top-2 right-2\"\n              data-slot=\"sheet-close\"\n              render={<Button size=\"icon-sm\" variant=\"ghost\" />}\n            >\n              <XIcon />\n              <span className=\"sr-only\">Close</span>\n            </BaseSheet.Close>\n          )}\n        </BaseSheet.Popup>\n      </SheetViewport>\n    </SheetPortal>\n  );\n}\n\nconst createSheetHandle = BaseSheet.createHandle;\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetPortal,\n  SheetViewport,\n  SheetBackdrop,\n  SheetPopup,\n  SheetHeader,\n  SheetTitle,\n  SheetDescription,\n  SheetFooter,\n  SheetClose,\n  createSheetHandle,\n  // Composite component\n  SheetContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}