{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sheet",
  "title": "Sheet",
  "description": "Panel that slides in from a screen edge, built on Base UI Dialog.",
  "dependencies": [
    "@base-ui/react@^1.8.0",
    "class-variance-authority@^0.7.1",
    "lucide-react@^1.48.0"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/button.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/sheet/sheet.tsx",
      "content": "'use client'\n\nimport { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { XIcon } from 'lucide-react'\nimport type * as React from 'react'\n\nimport { Button } from '@/components/ui/button'\nimport { cn } from '@/lib/utils'\n\nfunction Sheet({ ...props }: SheetPrimitive.Root.Props) {\n\treturn <SheetPrimitive.Root data-slot=\"sheet\" {...props} />\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n\treturn <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n\treturn <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n\treturn <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n\treturn (\n\t\t<SheetPrimitive.Backdrop\n\t\t\tdata-slot=\"sheet-overlay\"\n\t\t\tclassName={cn(\n\t\t\t\t'fixed inset-0 z-50 bg-black/50 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\n// Plain classes per side, not data-[side=…] variants: the attribute selector out-ranks a caller's className, so a\n// drawer could not set its own width\nconst sheetContentVariants = cva(\n\t'fixed z-50 flex flex-col gap-4 overflow-y-auto bg-background bg-clip-padding text-sm text-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0',\n\t{\n\t\tvariants: {\n\t\t\tside: {\n\t\t\t\ttop: 'inset-x-0 top-0 h-auto max-h-dvh border-b data-ending-style:translate-y-[-2.5rem] data-starting-style:translate-y-[-2.5rem]',\n\t\t\t\tright:\n\t\t\t\t\t'inset-y-0 right-0 h-full w-3/4 border-l data-ending-style:translate-x-[2.5rem] data-starting-style:translate-x-[2.5rem] sm:max-w-sm',\n\t\t\t\tbottom:\n\t\t\t\t\t'inset-x-0 bottom-0 h-auto max-h-dvh border-t data-ending-style:translate-y-[2.5rem] data-starting-style:translate-y-[2.5rem]',\n\t\t\t\tleft:\n\t\t\t\t\t'inset-y-0 left-0 h-full w-3/4 border-r data-ending-style:translate-x-[-2.5rem] data-starting-style:translate-x-[-2.5rem] sm:max-w-sm',\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tside: 'right',\n\t\t},\n\t},\n)\n\nfunction SheetContent({\n\tclassName,\n\tchildren,\n\tside = 'right',\n\tshowCloseButton = true,\n\t...props\n}: SheetPrimitive.Popup.Props & {\n\tside?: NonNullable<VariantProps<typeof sheetContentVariants>['side']>\n\tshowCloseButton?: boolean\n}) {\n\treturn (\n\t\t<SheetPortal>\n\t\t\t<SheetOverlay />\n\t\t\t<SheetPrimitive.Popup\n\t\t\t\tdata-slot=\"sheet-content\"\n\t\t\t\tdata-side={side}\n\t\t\t\tclassName={cn(sheetContentVariants({ side }), className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{showCloseButton && (\n\t\t\t\t\t<SheetPrimitive.Close\n\t\t\t\t\t\tdata-slot=\"sheet-close\"\n\t\t\t\t\t\trender={<Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\" />}\n\t\t\t\t\t>\n\t\t\t\t\t\t<XIcon />\n\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t</SheetPrimitive.Close>\n\t\t\t\t)}\n\t\t\t</SheetPrimitive.Popup>\n\t\t</SheetPortal>\n\t)\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn <div data-slot=\"sheet-header\" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn <div data-slot=\"sheet-footer\" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n\treturn (\n\t\t<SheetPrimitive.Title\n\t\t\tdata-slot=\"sheet-title\"\n\t\t\tclassName={cn('font-heading text-base font-medium text-foreground', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction SheetDescription({ className, ...props }: SheetPrimitive.Description.Props) {\n\treturn (\n\t\t<SheetPrimitive.Description\n\t\t\tdata-slot=\"sheet-description\"\n\t\t\tclassName={cn('text-sm text-muted-foreground', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nexport { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription }\n",
      "type": "registry:ui",
      "target": "components/ui/sheet.tsx"
    }
  ],
  "type": "registry:ui"
}