{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dialog",
  "title": "Dialog",
  "description": "A window overlaid on either the primary window or another dialog window.",
  "dependencies": [
    "@base-ui/react",
    "lucide-react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/button.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/dialog.jsx",
      "content": "\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\";\nimport { XIcon } from \"lucide-react\";\n\nimport { cn } from \"@/registry/optics/lib/utils\";\nimport { Button } from \"@/registry/optics/button\";\n\nconst cssAnimationPresets = {\n\tnone: \"transition-none\",\n\tscale: [\n\t\t`[transition-property:scale,opacity,translate] [will-change:scale,opacity,translate]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-starting-style:translate-y-4 max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:scale-98 max-sm:data-ending-style:scale-98 max-sm:origin-bottom`,\n\t\t`sm:-translate-y-[calc(2rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:data-starting-style:scale-98 sm:data-ending-style:scale-98 sm:data-nested:data-ending-style:translate-y-8 sm:data-nested:data-starting-style:translate-y-8`,\n\t],\n\tfade: [\n\t\t`[transition-property:opacity,translate,scale] [will-change:opacity,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-starting-style:translate-y-4 max-sm:data-ending-style:translate-y-4`,\n\t\t`sm:-translate-y-[calc(2rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\ttopFlip: [\n\t\t`[transition-property:opacity,filter,transform,translate,scale] [will-change:opacity,filter,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:blur-[4px] data-ending-style:blur-[4px] data-starting-style:transform-[perspective(1000px)_rotateX(50deg)_scale(0.8)] data-ending-style:transform-[perspective(1000px)_rotateX(50deg)_scale(0.8)]`,\n\t\t`sm:translate-y-[calc(3.5rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\tbottomFlip: [\n\t\t`[transition-property:opacity,filter,transform,translate,scale] [will-change:opacity,filter,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:blur-[4px] data-ending-style:blur-[4px] data-starting-style:transform-[perspective(1000px)_rotateX(-50deg)_scale(0.8)] data-ending-style:transform-[perspective(1000px)_rotateX(-50deg)_scale(0.8)]`,\n\t\t`sm:-translate-y-[calc(2rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\trightFlip: [\n\t\t`[transition-property:opacity,filter,transform,translate,scale] [will-change:opacity,filter,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:blur-[4px] data-ending-style:blur-[4px] data-starting-style:transform-[perspective(1000px)_rotateY(50deg)_scale(0.8)] data-ending-style:transform-[perspective(1000px)_rotateY(50deg)_scale(0.8)]`,\n\t\t`sm:-translate-x-[calc(2.5rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\tleftFlip: [\n\t\t`[transition-property:opacity,filter,transform,translate,scale] [will-change:opacity,filter,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:blur-[4px] data-ending-style:blur-[4px] data-starting-style:transform-[perspective(1000px)_rotateY(-50deg)_scale(0.8)] data-ending-style:transform-[perspective(1000px)_rotateY(-50deg)_scale(0.8)]`,\n\t\t`sm:translate-x-[calc(2.5rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\ttopSlide: [\n\t\t`[transition-property:opacity,transform,translate,scale] [will-change:opacity,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:translate-y-[-20px] data-ending-style:translate-y-[-20px] max-sm:data-starting-style:-translate-y-4 max-sm:data-ending-style:-translate-y-4`,\n\t\t`sm:translate-y-[calc(3.5rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\tbottomSlide: [\n\t\t`[transition-property:opacity,transform,translate,scale] [will-change:opacity,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:translate-y-[20px] data-ending-style:translate-y-[20px] max-sm:data-starting-style:translate-y-4 max-sm:data-ending-style:translate-y-4`,\n\t\t`sm:-translate-y-[calc(2rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\tleftSlide: [\n\t\t`[transition-property:opacity,transform,translate,scale] [will-change:opacity,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:translate-x-[-20px] data-ending-style:translate-x-[-20px] max-sm:data-starting-style:-translate-x-4 max-sm:data-ending-style:-translate-x-4`,\n\t\t`sm:translate-x-[calc(2.5rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\trightSlide: [\n\t\t`[transition-property:opacity,transform,translate,scale] [will-change:opacity,transform,translate,scale]`,\n\t\t`data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:translate-x-[20px] data-ending-style:translate-x-[20px] max-sm:data-starting-style:translate-x-4 max-sm:data-ending-style:translate-x-4`,\n\t\t`sm:-translate-x-[calc(2.5rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n\twipe: [\n\t\t`[transition-property:clip-path,translate,scale] [will-change:clip-path,translate,scale] [clip-path:inset(0_0_0_0_round_12px)] [-webkit-clip-path:inset(0_0_0_0_round_12px)]`,\n\t\t`data-starting-style:[clip-path:inset(0_0_100%_0_round_12px)] data-ending-style:[clip-path:inset(0_0_100%_0_round_12px)]`,\n\t\t`sm:-translate-y-[calc(2rem*var(--nested-dialogs))] sm:scale-[calc(1-0.1*var(--nested-dialogs))]`,\n\t],\n};\n\nconst cssTransitionPresets = {\n\tinExpo: `duration-[0.35s] ease-[cubic-bezier(0.95,0.05,0.795,0.035)]`,\n\toutExpo: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,\n\tinOutExpo: `duration-[0.35s] ease-[cubic-bezier(1,0,0,1)]`,\n\tanticipate: `duration-[0.35s] ease-[cubic-bezier(1,-0.4,0.35,0.95)]`,\n\tquickOut: `duration-[0.35s] ease-out`,\n\tovershootOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.275)]`,\n\tswiftOut: `duration-[0.35s] ease-[cubic-bezier(0.175,0.885,0.32,1.1)]`,\n\tsnappyOut: `duration-[0.35s] ease-[cubic-bezier(0.19,1,0.22,1)]`,\n\tin: `duration-[0.35s] ease-[cubic-bezier(0.42,0,1,1)]`,\n\tout: `duration-[0.35s] ease-[cubic-bezier(0,0,0.58,1)]`,\n\tinOut: `duration-[0.25s] ease-[cubic-bezier(0.42,0,0.58,1)]`,\n\toutIn: `duration-[0.35s] ease-[cubic-bezier(0.1,0.7,0.9,0.5)]`,\n\tinQuad: `duration-[0.35s] ease-[cubic-bezier(0.55,0.085,0.68,0.53)]`,\n\toutQuad: `duration-[0.25s] ease-[cubic-bezier(0.25,0.46,0.45,0.94)]`,\n\tinOutQuad: `duration-[0.32s] ease-[cubic-bezier(0.455,0.03,0.515,0.955)]`,\n\tinCubic: `duration-[0.35s] ease-[cubic-bezier(0.55,0.055,0.675,0.19)]`,\n\toutCubic: `duration-[0.35s] ease-[cubic-bezier(0.215,0.61,0.355,1)]`,\n\tinOutCubic: `duration-[0.35s] ease-[cubic-bezier(0.645,0.045,0.355,1)]`,\n\tinQuart: `duration-[0.35s] ease-[cubic-bezier(0.895,0.03,0.685,0.22)]`,\n\toutQuart: `duration-[0.35s] ease-[cubic-bezier(0.165,0.84,0.44,1)]`,\n\tinOutQuart: `duration-[0.35s] ease-[cubic-bezier(0.77,0,0.175,1)]`,\n\tinQuint: `duration-[0.35s] ease-[cubic-bezier(0.755,0.05,0.855,0.06)]`,\n\toutQuint: `duration-[0.35s] ease-[cubic-bezier(0.23,1,0.32,1)]`,\n\tinOutQuint: `duration-[0.35s] ease-[cubic-bezier(0.86,0,0.07,1)]`,\n\tinCirc: `duration-[0.35s] ease-[cubic-bezier(0.6,0.04,0.98,0.335)]`,\n\toutCirc: `duration-[0.35s] ease-[cubic-bezier(0.075,0.82,0.165,1)]`,\n\tinOutCirc: `duration-[0.35s] ease-[cubic-bezier(0.785,0.135,0.15,0.86)]`,\n\tinOutBase: `duration-[0.35s] ease-[cubic-bezier(0.25,0.1,0.25,1)]`,\n};\n\nconst DialogContext = createContext(undefined);\n\nfunction useDialog() {\n\tconst context = useContext(DialogContext);\n\tif (!context) {\n\t\tthrow new Error(\"useDialog must be used within a DialogProvider\");\n\t}\n\treturn context;\n}\n\nfunction Dialog({ modal = true, ...props } = {}) {\n\treturn (\n\t\t<DialogContext.Provider value={{ modal }}>\n\t\t\t<DialogPrimitive.Root data-slot=\"dialog\" modal={modal} {...props} />\n\t\t</DialogContext.Provider>\n\t);\n}\n\nfunction DialogTrigger({ ...props } = {}) {\n\treturn <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogViewport({ ...props } = {}) {\n\treturn <DialogPrimitive.Viewport data-slot=\"dialog-viewport\" {...props} />;\n}\n\nfunction DialogPortal(props = {}) {\n\treturn <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogBackdrop({ className = \"\", ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Backdrop\n\t\t\tdata-slot=\"dialog-backdrop\"\n\t\t\trender={\n\t\t\t\t<div\n\t\t\t\t\tkey=\"dialog-backdrop\"\n\t\t\t\t\tclassName={cn(\n\t\t\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\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t/>\n\t\t\t}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DialogPopup({\n\tclassName = \"\",\n\tanimationPreset = \"scale\",\n\ttransitionPreset = \"outCubic\",\n\tchildren = null,\n\treduceMotion = false,\n\tshowCloseButton = true,\n\tcontainerClassName = \"\",\n\t...rest\n}) {\n\tconst { modal } = useDialog();\n\n\tconst cssAnimationConfig = useMemo(() => {\n\t\tif (reduceMotion) return \"none\";\n\n\t\tif (animationPreset) {\n\t\t\treturn cssAnimationPresets[animationPreset];\n\t\t}\n\n\t\treturn cssAnimationPresets.scale;\n\t}, [animationPreset, reduceMotion]);\n\n\tconst cssTransitionConfig = useMemo(() => {\n\t\tif (reduceMotion) return \"none\";\n\n\t\tif (transitionPreset) {\n\t\t\treturn cssTransitionPresets[transitionPreset];\n\t\t}\n\n\t\treturn cssTransitionPresets.snappyOut;\n\t}, [transitionPreset, reduceMotion]);\n\n\treturn (\n\t\t<DialogPortal>\n\t\t\t{modal && <DialogBackdrop />}\n\t\t\t<div className=\"fixed inset-0 z-50\">\n\t\t\t\t<div className=\"flex h-dvh flex-col items-center justify-center overflow-hidden sm:overflow-y-auto sm:p-4\">\n\t\t\t\t\t<DialogPrimitive.Popup\n\t\t\t\t\t\tdata-slot=\"dialog-popup\"\n\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey=\"dialog-popup\"\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"relative row-start-2 grid w-full min-w-0 gap-4 border bg-muted p-2 shadow-lg duration-200\",\n\t\t\t\t\t\t\t\t\t\"max-w-[calc(100%-2rem)] rounded-3xl sm:max-w-lg\",\n\t\t\t\t\t\t\t\t\t\"max-sm:overflow-y-auto max-sm:border-none\",\n\t\t\t\t\t\t\t\t\tcssTransitionConfig,\n\t\t\t\t\t\t\t\t\tcssAnimationConfig,\n\t\t\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"bg-background flex flex-col w-full gap-8 rounded-2xl pt-6 px-6 pb-0 shadow-lg duration-200 sm:max-w-lg overflow-hidden\",\n\t\t\t\t\t\t\t\t\t\tcontainerClassName,\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t\t{showCloseButton && (\n\t\t\t\t\t\t\t\t\t\t<DialogPrimitive.Close\n\t\t\t\t\t\t\t\t\t\t\tdata-slot=\"dialog-close\"\n\t\t\t\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"rounded-full squircle-none size-6 p-0 -mr-4 -mt-2 absolute top-6 right-8\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<XIcon className=\"!size-4\" />\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"sr-only\">Close</span>\n\t\t\t\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{...rest}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</DialogPortal>\n\t);\n}\n\nfunction DialogHeader({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"dialog-header\"\n\t\t\tclassName={cn(\"flex flex-col gap-2 text-center sm:text-left\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DialogFooter({ className, ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"dialog-footer\"\n\t\t\tclassName={cn(\n\t\t\t\t\"flex flex-col-reverse gap-2 mt-auto sm:-mx-6 sm:mt-2 sm:flex-row sm:justify-end sm:rounded-b-2xl sm:border-t sm:border-border/60 sm:bg-muted/50 sm:px-6 sm:py-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DialogTitle({ className, ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Title\n\t\t\tdata-slot=\"dialog-title\"\n\t\t\tclassName={cn(\"text-lg leading-none font-semibold\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DialogDescription({ className, ...props }) {\n\treturn (\n\t\t<DialogPrimitive.Description\n\t\t\tdata-slot=\"dialog-description\"\n\t\t\tclassName={cn(\"text-muted-foreground text-sm\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction DialogClose(props) {\n\treturn <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nDialog.displayName = \"Dialog\";\nDialogClose.displayName = \"DialogClose\";\nDialogPopup.displayName = \"DialogPopup\";\nDialogDescription.displayName = \"DialogDescription\";\nDialogFooter.displayName = \"DialogFooter\";\nDialogHeader.displayName = \"DialogHeader\";\nDialogBackdrop.displayName = \"DialogBackdrop\";\nDialogViewport.displayName = \"DialogViewport\";\nDialogPortal.displayName = \"DialogPortal\";\nDialogTitle.displayName = \"DialogTitle\";\nDialogTrigger.displayName = \"DialogTrigger\";\n\nexport {\n\tDialog,\n\tDialogClose,\n\tDialogPopup,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogBackdrop,\n\tDialogViewport,\n\tDialogPortal,\n\tDialogTitle,\n\tDialogTrigger,\n};\n",
      "type": "registry:component",
      "target": "components/optics/dialog.jsx"
    }
  ],
  "type": "registry:component"
}