{
  "$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.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "tailwind-variants",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/sheet.jsx",
      "content": "\"use client\";\n\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\";\nimport { tv } from \"tailwind-variants\";\n\nimport { cn } from \"@/registry/optics/lib/utils\";\nimport { XIcon } from \"lucide-react\";\n\nfunction Sheet(props = {}) {\n\treturn <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n}\n\nfunction SheetTrigger(props = {}) {\n\treturn <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n}\n\nfunction SheetClose(props = {}) {\n\treturn <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n}\n\nfunction SheetPortal(props = {}) {\n\treturn <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n}\n\nfunction SheetBackdrop({ className = \"\", ...props }) {\n\treturn (\n\t\t<SheetPrimitive.Backdrop\n\t\t\tdata-slot=\"sheet-backdrop\"\n\t\t\tclassName={cn(\n\t\t\t\t\"fixed inset-0 bg-black/32 backdrop-blur-sm z-50 transition-all duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-[-webkit-touch-callout:none]:absolute\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst sheetVariants = tv({\n\tslots: {\n\t\tviewport: \"fixed inset-0 z-50 flex\",\n\t\tpopup: \"group bg-background flex flex-col gap-4 min-h-0 max-h-full\",\n\t},\n\tvariants: {\n\t\tside: {\n\t\t\tright: {\n\t\t\t\tviewport: \"justify-end\",\n\t\t\t\tpopup:\n\t\t\t\t\t\"w-3/4 border-l sm:max-w-sm [transition-property:translate,opacity,scale,border-radius] will-change-[translate,opacity,scale,border-radius] duration-300 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-starting-style:opacity-0 data-starting-style:translate-x-full data-ending-style:opacity-0 data-ending-style:translate-x-full opacity-[calc(1-var(--nested-dialogs)*0.25)] -translate-x-[calc(2.5rem*var(--nested-dialogs))] scale-[calc(1-0.15*var(--nested-dialogs))] data-nested-dialog-open:rounded-lg\",\n\t\t\t},\n\t\t\tleft: {\n\t\t\t\tviewport: \"justify-start\",\n\t\t\t\tpopup:\n\t\t\t\t\t\"w-3/4 border-r sm:max-w-sm [transition-property:translate,opacity,scale,border-radius] will-change-[translate,opacity,scale,border-radius] duration-300 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-starting-style:opacity-0 data-starting-style:-translate-x-full data-ending-style:opacity-0 data-ending-style:-translate-x-full opacity-[calc(1-var(--nested-dialogs)*0.25)] translate-x-[calc(2.5rem*var(--nested-dialogs))] scale-[calc(1-0.15*var(--nested-dialogs))] data-nested-dialog-open:rounded-lg\",\n\t\t\t},\n\t\t\ttop: {\n\t\t\t\tviewport: \"flex-col justify-start\",\n\t\t\t\tpopup:\n\t\t\t\t\t\"h-auto border-b [transition-property:translate,opacity,scale,border-radius] will-change-[translate,opacity,scale,border-radius] duration-300 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-starting-style:opacity-0 data-starting-style:-translate-y-full data-ending-style:opacity-0 data-ending-style:-translate-y-full opacity-[calc(1-var(--nested-dialogs)*0.25)] scale-[calc(1-0.15*var(--nested-dialogs))] data-nested-dialog-open:rounded-lg data-nested-dialog-open:translate-y-[calc(1%*var(--nested-dialogs))]\",\n\t\t\t},\n\t\t\tbottom: {\n\t\t\t\tviewport: \"flex-col justify-end\",\n\t\t\t\tpopup:\n\t\t\t\t\t\"h-auto border-t [transition-property:translate,opacity,scale,border-radius] will-change-[translate,opacity,scale,border-radius] duration-300 ease-[cubic-bezier(0.215,0.61,0.355,1)] data-starting-style:opacity-0 data-starting-style:translate-y-full data-ending-style:opacity-0 data-ending-style:translate-y-full opacity-[calc(1-var(--nested-dialogs)*0.25)] scale-[calc(1-0.15*var(--nested-dialogs))] data-nested-dialog-open:rounded-lg data-nested-dialog-open:-translate-y-[calc(1%*var(--nested-dialogs))]\",\n\t\t\t},\n\t\t},\n\t\tvariant: {\n\t\t\tfull: {},\n\t\t\trounded: {\n\t\t\t\tviewport: \"p-3\",\n\t\t\t\tpopup: \"rounded-lg border\",\n\t\t\t},\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tside: \"right\",\n\t\tvariant: \"full\",\n\t},\n});\n\nfunction SheetViewport({\n\tside = \"right\",\n\tvariant = \"full\",\n\tclassName = \"\",\n\t...props\n}) {\n\tconst { viewport: viewportStyles } = sheetVariants();\n\n\treturn (\n\t\t<SheetPrimitive.Viewport\n\t\t\tdata-slot=\"sheet-viewport\"\n\t\t\tdata-side={side}\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(viewportStyles({ side, variant }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetPopup({\n\tside = \"right\",\n\tvariant = \"full\",\n\tshowCloseButton = true,\n\treduceMotion = false,\n\tclassName = \"\",\n\tchildren = null,\n\t...props\n}) {\n\tconst { popup: popupStyles } = sheetVariants();\n\n\treturn (\n\t\t<SheetPortal>\n\t\t\t<SheetBackdrop />\n\t\t\t<SheetViewport variant={variant} side={side}>\n\t\t\t\t<SheetPrimitive.Popup\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\tpopupStyles({ side, variant }),\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\treduceMotion && \"transition-none!\",\n\t\t\t\t\t)}\n\t\t\t\t\tdata-slot=\"sheet-popup\"\n\t\t\t\t\tdata-side={side}\n\t\t\t\t\tdata-variant={variant}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t<SheetPrimitive.Close className=\"absolute right-2 top-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 outline-none transition-[color,background-color,box-shadow,opacity] hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\">\n\t\t\t\t\t\t\t<XIcon />\n\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t</SheetPrimitive.Close>\n\t\t\t\t\t)}\n\t\t\t\t</SheetPrimitive.Popup>\n\t\t\t</SheetViewport>\n\t\t</SheetPortal>\n\t);\n}\n\nfunction SheetHeader({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sheet-header\"\n\t\t\tclassName={cn(\"flex flex-col gap-1.5 p-4\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetFooter({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"sheet-footer\"\n\t\t\tclassName={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetTitle({ className = \"\", ...props }) {\n\treturn (\n\t\t<SheetPrimitive.Title\n\t\t\tdata-slot=\"sheet-title\"\n\t\t\tclassName={cn(\"text-foreground font-semibold\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction SheetDescription({ className = \"\", ...props }) {\n\treturn (\n\t\t<SheetPrimitive.Description\n\t\t\tdata-slot=\"sheet-description\"\n\t\t\tclassName={cn(\"text-muted-foreground text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nSheet.displayName = \"Sheet\";\nSheetTrigger.displayName = \"SheetTrigger\";\nSheetClose.displayName = \"SheetClose\";\nSheetPopup.displayName = \"SheetPopup\";\nSheetHeader.displayName = \"SheetHeader\";\nSheetFooter.displayName = \"SheetFooter\";\nSheetTitle.displayName = \"SheetTitle\";\nSheetDescription.displayName = \"SheetDescription\";\n\nexport {\n\tSheet,\n\tSheetTrigger,\n\tSheetClose,\n\tSheetPopup,\n\tSheetHeader,\n\tSheetFooter,\n\tSheetTitle,\n\tSheetDescription,\n};\n",
      "type": "registry:component",
      "target": "components/optics/sheet.jsx"
    }
  ],
  "type": "registry:component"
}