{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "stacked-dialog", "type": "registry:ui", "title": "Stacked Dialog", "description": "Each dialog opened from another pushes it back, dimmed, with a way back.", "categories": [ "dialogs" ], "dependencies": [ "@base-ui/react" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/stacked-dialog.tsx", "content": "\"use client\";\nimport { Dialog as BaseDialog } from \"@base-ui/react/dialog\";\nimport { createContext, useContext, useEffect, useRef } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { ChevronLeft, X } from \"@/lib/icons\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\ntype Stack = {\n /** 1 for the first dialog, 2 for one opened from it, and so on. */\n depth: number;\n /** Title of the dialog this one was opened from, for the back button. */\n parentTitle: React.ReactNode | null;\n register: (close: () => void) => () => void;\n closeAll: () => void;\n closeSelf: () => void;\n};\nconst StackCtx = createContext(null);\n\ntype Level = { depth: number; title: React.ReactNode | null; close: () => void };\nconst LevelCtx = createContext(null);\n\nexport type StackedDialogProps = Omit & {\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n};\n\n/**\n * One level of a stack. Nest another StackedDialog inside a StackedDialogContent\n * and opening it pushes this one back; closing it brings this one forward again.\n */\nexport function StackedDialog({ open: openProp, defaultOpen = false, onOpenChange, children, ...rest }: StackedDialogProps) {\n const outer = useContext(StackCtx);\n const level = useContext(LevelCtx);\n const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });\n const closers = useRef(new Set<() => void>());\n\n const depth = (level?.depth ?? 0) + 1;\n // The outermost level owns the registry; every level below registers with it.\n const register = outer?.register ?? ((close: () => void) => {\n closers.current.add(close);\n return () => closers.current.delete(close);\n });\n const closeAll = outer?.closeAll ?? (() => {\n for (const close of closers.current) close();\n setOpen(false);\n });\n\n useEffect(() => {\n if (!outer) return;\n return outer.register(() => setOpen(false));\n }, [outer, setOpen]);\n\n return (\n setOpen(false) }}>\n setOpen(next)} {...rest}>\n {children}\n \n \n );\n}\n\n/** Depth, and ways out: close this level, or the whole stack at once (after a final save, say). */\nexport function useStackedDialog() {\n const stack = useContext(StackCtx);\n const level = useContext(LevelCtx);\n return { depth: level?.depth ?? stack?.depth ?? 0, close: level?.close ?? (() => {}), closeAll: stack?.closeAll ?? (() => {}) };\n}\n\nexport type StackedDialogTriggerProps = BaseDialog.Trigger.Props;\n\nexport function StackedDialogTrigger(props: StackedDialogTriggerProps) {\n return ;\n}\n\nexport type StackedDialogContentProps = Omit & {\n className?: string;\n /** Names the dialog, and becomes the back label of any dialog opened from it. */\n title: React.ReactNode;\n description?: React.ReactNode;\n size?: \"sm\" | \"md\" | \"lg\";\n /** Render into this element instead of document.body. */\n container?: BaseDialog.Portal.Props[\"container\"];\n closeLabel?: string;\n};\n\nconst widths = { sm: \"max-w-[400px]\", md: \"max-w-[480px]\", lg: \"max-w-[640px]\" };\n\nexport function StackedDialogContent({\n title,\n description,\n size = \"md\",\n container,\n closeLabel = \"Close\",\n className,\n children,\n ...rest\n}: StackedDialogContentProps) {\n const stack = useContext(StackCtx);\n const depth = stack?.depth ?? 1;\n const parentTitle = stack?.parentTitle ?? null;\n const contained = container != null;\n\n return (\n \n {/* Only the first level draws a backdrop; the ones above dim the dialog they cover instead. */}\n \n \n \n stack?.closeSelf() }}>\n
\n {depth > 1 && parentTitle != null && (\n \n \n Back to \n {parentTitle}\n \n )}\n {title}\n {description && {description}}\n
\n {children}\n \n {\n // The × on a nested level leaves the whole flow; the back link steps down one level.\n if (depth > 1) stack?.closeAll();\n }}\n className={cn(\n \"absolute right-3 top-3 grid size-7 place-items-center rounded-md text-fg-3\",\n \"outline-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-fg-3\",\n \"transition-[background-color,color,scale] duration-150 ease-out-quart hover:bg-hover hover:text-fg active:scale-[0.92] active:duration-75\",\n \"before:absolute before:-inset-2 before:content-[''] pointer-fine:before:hidden\",\n )}\n >\n \n \n \n \n \n );\n}\n\nexport type StackedDialogBodyProps = React.ComponentProps<\"div\">;\n\nexport function StackedDialogBody({ className, ...rest }: StackedDialogBodyProps) {\n return
;\n}\n\nexport type StackedDialogFooterProps = React.ComponentProps<\"div\">;\n\nexport function StackedDialogFooter({ className, ...rest }: StackedDialogFooterProps) {\n return (\n \n );\n}\n\nexport type StackedDialogCloseProps = Omit & {\n className?: string;\n variant?: \"primary\" | \"secondary\" | \"ghost\";\n};\n\n/** Closes this level only, returning to the one below. */\nexport function StackedDialogClose({ variant = \"secondary\", className, ...rest }: StackedDialogCloseProps) {\n return (\n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/stacked-dialog" }