{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"command-palette","type":"registry:ui","title":"Command palette","description":"A searchable list of destinations and actions opened from the keyboard.","dependencies":["@radix-ui/react-dialog","@radix-ui/react-slot","clsx","lucide-react","tailwind-merge"],"registryDependencies":["https://caliperui.site/r/styles.json"],"files":[{"path":"ui/button.tsx","type":"registry:ui","target":"components/ui/button.tsx","content":"\"use client\";\n\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport { LoaderCircle } from \"lucide-react\";\nimport {\n useLayoutEffect,\n useRef,\n useState,\n type ComponentProps,\n type ReactNode,\n} from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/loading-indicator.css\";\nimport \"./button.css\";\n\n/* Colour, material and press live in button.css keyed on data-variant, so a\n consumer's utility classes still override them. Raised to press: the\n button sinks 1px into an inner shade instead of scaling. */\nconst variants = {\n default: \"\",\n secondary: \"\",\n ghost: \"\",\n destructive: \"\",\n};\n\nconst sizes = {\n sm: \"h-8 gap-1.5 rounded-full px-3 text-[13px] max-md:min-h-11 [@media(pointer:coarse)]:min-h-11\",\n md: \"h-[var(--control-height)] gap-2 rounded-full px-3.5 text-sm\",\n lg: \"h-11 gap-2 rounded-full px-[18px] text-[15px]\",\n icon: \"size-[var(--control-height)] rounded-full p-0\",\n};\n\nexport type ButtonProps = ComponentProps<\"button\"> & {\n variant?: keyof typeof variants;\n size?: keyof typeof sizes;\n asChild?: boolean;\n /** Shows a spinner over the label and swallows clicks while keeping focus and width. */\n loading?: boolean;\n /** Animate a meaningful label/icon change, such as saving → saved. */\n feedbackKey?: string;\n};\n\nexport function Button({\n className,\n variant = \"default\",\n size = \"md\",\n asChild = false,\n loading = false,\n feedbackKey,\n disabled,\n \"aria-disabled\": ariaDisabled,\n children,\n onClick,\n onClickCapture,\n tabIndex,\n type = \"button\",\n ...props\n}: ButtonProps) {\n const Component = asChild ? Slot : \"button\";\n const nativeDisabled = Boolean(disabled);\n const blocked =\n nativeDisabled ||\n loading ||\n ariaDisabled === true ||\n ariaDisabled === \"true\";\n\n return (\n {\n if (blocked && (event.key === \"Enter\" || event.key === \" \")) {\n event.preventDefault();\n }\n props.onKeyDown?.(event);\n }}\n onClickCapture={(event) => {\n if (blocked) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n onClickCapture?.(event);\n }}\n onClick={onClick}\n >\n {loading && asChild && (\n \n )}\n {loading && !asChild && feedbackKey === undefined && (\n \n \n \n )}\n \n {loading && !asChild && feedbackKey === undefined ? (\n \n {children}\n \n ) : feedbackKey !== undefined && !asChild ? (\n \n {loading && (\n \n )}\n {children}\n \n ) : (\n children\n )}\n \n \n );\n}\n\nfunction ButtonFeedback({\n stateKey,\n children,\n}: {\n stateKey: string;\n children: ReactNode;\n}) {\n const content = useRef(null);\n const [initialKey] = useState(stateKey);\n const [width, setWidth] = useState();\n useLayoutEffect(() => {\n const element = content.current;\n if (!element) return;\n const measure = () => setWidth(element.offsetWidth);\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(element);\n return () => observer.disconnect();\n }, [stateKey]);\n return (\n \n \n {children}\n \n \n );\n}\n"},{"path":"ui/command-palette.tsx","type":"registry:ui","target":"components/ui/command-palette.tsx","content":"\"use client\";\n\nimport { Search, X } from \"lucide-react\";\nimport {\n useEffect,\n useLayoutEffect,\n useId,\n useRef,\n useState,\n type ReactNode,\n} from \"react\";\nimport { Button } from \"./button\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n type DialogContentProps,\n} from \"./dialog\";\nimport { Input } from \"./input\";\nimport { cn } from \"./lib/cn\";\nimport \"./command-palette.css\";\n\nexport type CommandItem = {\n id: string;\n label: string;\n description?: string;\n group?: string;\n icon?: ReactNode;\n keywords?: readonly string[];\n disabled?: boolean;\n /** One disambiguating fact on the right, in mono: an amount, a role, a shortcut. */\n meta?: string;\n /** Shown in the side pane while the item is highlighted. */\n preview?: CommandPreview;\n onSelect: () => void;\n};\n\nexport type CommandPreview = {\n kind: string;\n title: string;\n rows?: readonly (readonly [string, string])[];\n hint?: string;\n};\n\n/** Typing the prefix narrows the list to one group, shown as a chip. */\nexport type CommandScope = { prefix: string; label: string; group: string };\n\nexport type CommandPaletteProps = {\n open: boolean;\n onOpenChange: (open: boolean) => void;\n items: readonly CommandItem[];\n title?: string;\n description?: string;\n className?: string;\n onCloseAutoFocus?: DialogContentProps[\"onCloseAutoFocus\"];\n scopes?: readonly CommandScope[];\n /** Offered when nothing matches, e.g. create an invoice for the typed name. */\n emptyAction?: { label: (query: string) => string; onSelect: (query: string) => void };\n /** The search field's prompt, naming what can be found, e.g. \"Search people, companies and deals…\". */\n placeholder?: string;\n /** What one item is called in the count and the empty state, singular and plural: [\"result\", \"results\"] for a site search. */\n noun?: readonly [string, string];\n};\n\nexport function CommandPalette({\n open,\n onOpenChange,\n items,\n title = \"Command palette\",\n description = \"Search destinations, projects, and actions.\",\n className,\n onCloseAutoFocus,\n scopes = [],\n emptyAction,\n placeholder = \"Find a project or action…\",\n noun = [\"command\", \"commands\"],\n}: CommandPaletteProps) {\n const hasPreview = items.some((item) => item.preview);\n // Esc leaves an active scope first; without a scope it closes.\n const clearOnEscape = useRef<(() => boolean) | null>(null);\n return (\n \n {\n if (clearOnEscape.current?.()) event.preventDefault();\n }}\n >\n {\n onOpenChange(false);\n item.onSelect();\n }}\n />\n \n \n );\n}\n\nfunction PaletteContent({\n items,\n title,\n description,\n interactive,\n onSelect,\n scopes,\n emptyAction,\n placeholder,\n noun,\n hasPreview,\n clearOnEscape,\n}: {\n items: readonly CommandItem[];\n title: string;\n description: string;\n interactive: boolean;\n onSelect: (item: CommandItem) => void;\n scopes: readonly CommandScope[];\n emptyAction?: CommandPaletteProps[\"emptyAction\"];\n placeholder: string;\n noun: readonly [string, string];\n hasPreview: boolean;\n clearOnEscape: { current: (() => boolean) | null };\n}) {\n const id = useId();\n const input = useRef(null);\n const activeOption = useRef(null);\n const options = useRef(null);\n const [highlight, setHighlight] = useState<{\n top: number;\n height: number;\n } | null>(null);\n const [query, setQuery] = useState(\"\");\n const [activeId, setActiveId] = useState(null);\n const [scopeId, setScopeId] = useState(null);\n const scope = scopes.find((candidate) => candidate.prefix === scopeId);\n const search = query.trim().toLowerCase();\n const showIcons = items.some((item) => Boolean(item.icon));\n const groups = new Map();\n for (const item of items) {\n const group = item.group ?? \"\";\n if (scope && group !== scope.group) continue;\n const grouped = groups.get(group) ?? [];\n groups.set(group, grouped);\n const text = [item.label, item.description, ...(item.keywords ?? [])]\n .join(\" \")\n .toLowerCase();\n if (text.includes(search)) grouped.push(item);\n }\n const visibleGroups = [...groups.entries()].filter(\n ([, commands]) => commands.length,\n );\n const matched = visibleGroups.flatMap(([, commands]) => commands);\n const enabled = matched.filter((item) => !item.disabled);\n const active = enabled.find((item) => item.id === activeId) ?? enabled[0];\n const optionIds = new Map(\n matched.map((item, index) => [item.id, `${id}-option-${index}`]),\n );\n const listId = `${id}-commands`;\n\n useEffect(() => {\n activeOption.current?.scrollIntoView({\n block: \"nearest\",\n behavior: \"instant\",\n });\n }, [active?.id, search]);\n\n useLayoutEffect(() => {\n const list = options.current;\n const option = activeOption.current;\n if (!list || !option) {\n setHighlight(null);\n return;\n }\n const measure = () => {\n setHighlight({\n top: option.offsetTop,\n height: option.offsetHeight,\n });\n };\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(list);\n observer.observe(option);\n return () => observer.disconnect();\n }, [active?.id, search]);\n\n function select(item: CommandItem) {\n if (interactive && !item.disabled) onSelect(item);\n }\n\n useEffect(() => {\n clearOnEscape.current = () => {\n if (!scope) return false;\n setScopeId(null);\n setActiveId(null);\n return true;\n };\n });\n\n function mark(text: string) {\n const at = search ? text.toLowerCase().indexOf(search) : -1;\n if (at < 0) return text;\n return (\n <>\n {text.slice(0, at)}\n {text.slice(at, at + search.length)}\n {text.slice(at + search.length)}\n \n );\n }\n\n function clearSearch() {\n setQuery(\"\");\n setScopeId(null);\n setActiveId(null);\n input.current?.focus();\n }\n\n return (\n <>\n
\n {title}\n {description}\n \n
\n \n {scope && {scope.label}}\n {\n if (!interactive) return;\n const value = event.target.value;\n // Typing a scope prefix first turns it into a chip.\n const typed = !scope && scopes.find((candidate) => value.startsWith(candidate.prefix));\n if (typed) {\n setScopeId(typed.prefix);\n setQuery(value.slice(typed.prefix.length));\n } else {\n setQuery(value);\n }\n setActiveId(null);\n }}\n onKeyDown={(event) => {\n if (event.key === \"Backspace\" && !query && scope) {\n event.preventDefault();\n setScopeId(null);\n return;\n }\n if (\n !interactive ||\n event.nativeEvent.isComposing ||\n event.altKey ||\n event.ctrlKey ||\n event.metaKey ||\n event.shiftKey\n )\n return;\n if (event.key === \"Enter\" && active) {\n event.preventDefault();\n select(active);\n } else if (\n enabled.length &&\n ([\"ArrowDown\", \"ArrowUp\"].includes(event.key) ||\n (!query && [\"Home\", \"End\"].includes(event.key)))\n ) {\n event.preventDefault();\n const current = enabled.findIndex(\n (item) => item.id === active?.id,\n );\n const next =\n event.key === \"Home\"\n ? 0\n : event.key === \"End\"\n ? enabled.length - 1\n : (current +\n (event.key === \"ArrowDown\" ? 1 : -1) +\n enabled.length) %\n enabled.length;\n setActiveId(enabled[next].id);\n }\n }}\n />\n {query && (\n \n \n \n )}\n
\n
\n\n
\n
\n \n {highlight && (\n \n )}\n {visibleGroups.map(([group, commands], groupIndex) => (\n
\n {group && (\n \n {group}\n

\n )}\n {commands.map((item) => {\n const selected = active?.id === item.id;\n return (\n event.preventDefault()}\n onMouseEnter={() => {\n if (!item.disabled && interactive) setActiveId(item.id);\n }}\n onClick={() => select(item)}\n >\n {showIcons && (\n \n {item.icon}\n \n )}\n \n \n {mark(item.label)}\n \n {item.description && (\n \n {item.description}\n \n )}\n \n {item.meta && !item.disabled && (\n \n {item.meta}\n \n )}\n {item.disabled && (\n \n Unavailable\n \n )}\n
\n );\n })}\n
\n ))}\n
\n {!matched.length && (\n
\n

No {noun[1]} found

\n

\n {search\n ? `Nothing matches “${query.trim()}”. Try another word or a shorter one.`\n : `There are no ${noun[1]} in this context.`}\n

\n {search && (\n
\n {emptyAction && (\n emptyAction.onSelect(search)}\n >\n {emptyAction.label(search)}\n \n )}\n \n
\n )}\n
\n )}\n \n {hasPreview && (\n
\n {active?.preview ? (\n <>\n {active.preview.kind}\n {active.preview.title}\n {active.preview.rows && (\n
\n {active.preview.rows.map(([key, value]) => (\n
\n
{key}
\n
{value}
\n
\n ))}\n
\n )}\n {active.preview.hint && {active.preview.hint}}\n \n ) : (\n Highlight a result to preview it.\n )}\n
\n )}\n \n\n
\n

\n {matched.length} {matched.length === 1 ? noun[0] : noun[1]}\n

\n

\n ↑↓ Navigate · Enter Select · Esc Close\n

\n
\n \n );\n}\n"},{"path":"ui/dialog.tsx","type":"registry:ui","target":"components/ui/dialog.tsx","content":"\"use client\";\n\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { X } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport { Button } from \"./button\";\nimport \"./shared/dialog-overlay.css\";\nimport \"./dialog.css\";\n\nexport const Dialog = DialogPrimitive.Root;\nexport const DialogTrigger = DialogPrimitive.Trigger;\nexport const DialogClose = DialogPrimitive.Close;\n\nexport type DialogContentProps = ComponentProps<\n typeof DialogPrimitive.Content\n> & {\n showCloseButton?: boolean;\n};\n\nexport function DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: DialogContentProps) {\n return (\n \n \n \n {children}\n {showCloseButton && (\n \n \n \n \n \n )}\n \n \n );\n}\n\nexport function DialogHeader({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nexport function DialogFooter({ className, ...props }: ComponentProps<\"div\">) {\n return (\n \n );\n}\n\nexport function DialogTitle({\n className,\n ...props\n}: ComponentProps) {\n return (\n \n );\n}\n\nexport function DialogDescription({\n className,\n ...props\n}: ComponentProps) {\n return (\n \n );\n}\n"},{"path":"ui/input.tsx","type":"registry:ui","target":"components/ui/input.tsx","content":"import type { ComponentProps, ReactNode } from \"react\";\nimport { cn } from \"./lib/cn\";\nimport \"./shared/input.css\";\nimport \"./shared/input-2.css\";\nimport \"./shared/input-group.css\";\nimport \"./input.css\";\n\nconst fieldText =\n \"w-full min-w-0 text-base text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed md:text-sm\";\n\nexport type InputProps = ComponentProps<\"input\"> & {\n /** Fixed text or an icon before the value, e.g. \"caliper.app/\". */\n leading?: ReactNode;\n /** Text, an icon or a status after the value, e.g. a spinner or a count. */\n trailing?: ReactNode;\n};\n\n/**\n * A recessed text field. Fields sit slightly below the paper (an inner shade\n * and a 3:1 ring); buttons stand on it, so what you fill and what you press\n * never look alike.\n */\nexport function Input({ className, leading, trailing, ...props }: InputProps) {\n if (leading === undefined && trailing === undefined) {\n return (\n \n );\n }\n return (\n \n {leading !== undefined && {leading}}\n \n {trailing !== undefined && {trailing}}\n \n );\n}\n"},{"path":"ui/lib/cn.ts","type":"registry:ui","target":"components/ui/lib/cn.ts","content":"import { clsx, type ClassValue } from \"clsx\";\nimport { extendTailwindMerge } from \"tailwind-merge\";\n\nconst twMerge = extendTailwindMerge({\n extend: { theme: { radius: [\"control\", \"surface\", \"overlay\"], shadow: [\"overlay\"] } },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"},{"path":"ui/shared/loading-indicator.css","type":"registry:file","target":"components/ui/shared/loading-indicator.css","content":"/* Shared by button.tsx, confirm-morph.tsx, expanding-button-group.tsx, field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"loading-indicator\"] {\n animation: caliper-spin var(--duration-loading) var(--ease-linear) infinite;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"loading-indicator\"] {\n animation: none;\n }\n }\n}\n"},{"path":"ui/button.css","type":"registry:file","target":"components/ui/button.css","content":"/* button.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"button\"] {\n transition-property: background-color, color, border-color;\n transition-duration: var(--duration-fast);\n transition-timing-function: var(--ease-out);\n }\n\n /* Button material. Raised to press: a lit top edge and a small lift; the\n press travels 1px down and swaps the lift for an inner shade. Only\n translate animates (release on the settle curve); shadows swap. */\n [data-slot=\"button\"] {\n --b-bg: var(--raised);\n --b-bg-hover: var(--raised-hover);\n --b-bg-press: var(--raised-press);\n --b-fg: var(--foreground);\n --b-shadow: var(--shadow-raised);\n --b-shadow-press: var(--shadow-raised-press);\n background-color: var(--b-bg);\n color: var(--b-fg);\n box-shadow: var(--b-shadow);\n transition-property: background-color, color, border-color, translate, scale;\n transition-duration:\n var(--duration-fast), var(--duration-fast), var(--duration-fast),\n var(--duration-normal), var(--duration-normal);\n transition-timing-function:\n var(--ease-out), var(--ease-out), var(--ease-out), var(--ease-settle),\n var(--ease-settle);\n }\n [data-slot=\"button\"][data-variant=\"default\"] {\n --b-bg: var(--primary);\n --b-bg-hover: var(--primary-hover);\n --b-bg-press: var(--primary-press);\n --b-fg: var(--primary-foreground);\n --b-shadow: var(--shadow-accent);\n --b-shadow-press: var(--shadow-accent-press);\n }\n [data-slot=\"button\"][data-variant=\"destructive\"] {\n --b-bg: var(--danger-fill);\n --b-bg-hover: var(--danger-fill-hover);\n --b-bg-press: var(--danger-fill-press);\n --b-fg: var(--danger-fill-foreground);\n --b-shadow: var(--shadow-danger);\n --b-shadow-press: var(--shadow-danger-press);\n }\n [data-slot=\"button\"][data-variant=\"ghost\"] {\n --b-bg: transparent;\n --b-bg-hover: var(--muted);\n --b-bg-press: var(--muted);\n --b-fg: var(--muted-foreground);\n --b-shadow: none;\n --b-shadow-press: none;\n }\n @media (hover: hover) {\n [data-slot=\"button\"]:hover {\n background-color: var(--b-bg-hover);\n }\n [data-slot=\"button\"][data-variant=\"ghost\"]:hover {\n color: var(--foreground);\n }\n }\n [data-slot=\"button\"]:active:not(:disabled):not([aria-disabled=\"true\"]):not(\n [aria-busy=\"true\"]\n ) {\n translate: 0 var(--motion-press-travel);\n scale: var(--motion-press-scale);\n background-color: var(--b-bg-press);\n box-shadow: var(--b-shadow-press);\n transition-duration:\n var(--duration-fast), var(--duration-fast), var(--duration-fast), 90ms,\n 90ms;\n transition-timing-function: var(--ease-out);\n }\n [data-slot=\"button\"]:is(:disabled, [aria-disabled=\"true\"]):not([aria-busy=\"true\"]) {\n background-color: var(--sunken);\n color: var(--muted-foreground);\n }\n [data-slot=\"button\"][data-variant=\"ghost\"]:is(:disabled, [aria-disabled=\"true\"]):not(\n [aria-busy=\"true\"]\n ) {\n background-color: transparent;\n box-shadow: none;\n }\n /* Loading keeps the exact width: the label stays in flow but invisible. */\n [data-slot=\"button-label\"] {\n display: inline-flex;\n align-items: center;\n gap: inherit;\n }\n /* Opacity, not visibility, so the label still names the button. */\n [data-slot=\"button-label\"][data-hidden=\"true\"] {\n opacity: 0;\n }\n [data-slot=\"button-busy\"] {\n position: absolute;\n inset: 0;\n display: grid;\n place-items: center;\n }\n [data-slot=\"button-feedback\"] {\n display: inline-flex;\n align-items: center;\n gap: inherit;\n overflow: clip;\n transition: width var(--duration-normal) var(--ease-out);\n }\n [data-slot=\"button-feedback-label\"] {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n gap: inherit;\n width: max-content;\n }\n [data-slot=\"button-feedback-label\"][data-enter=\"true\"] {\n animation: caliper-feedback-enter var(--duration-normal) var(--ease-out);\n }\n\n [data-slot=\"button\"][aria-busy=\"true\"] {\n pointer-events: none;\n }\n [data-slot=\"button\"][data-action-phase=\"error\"] {\n color: var(--danger);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"button\"],\n [data-slot=\"button-feedback\"] {\n transition: none;\n }\n [data-slot=\"button\"]:active:not(:disabled):not([aria-disabled=\"true\"]):not(\n [aria-busy=\"true\"]\n ) {\n translate: none;\n }\n [data-slot=\"button-feedback-label\"],\n [data-slot=\"button-feedback-label\"][data-enter=\"true\"] {\n animation: none;\n }\n }\n\n /* Toggle: pressed is recessed, as a toggled tool in a button group is. */\n /* Four attributes, so it wins over the group and toolbar pressed rules in any stylesheet order. */\n [data-slot=\"button\"][data-variant=\"ghost\"][data-toggle][aria-pressed=\"true\"] {\n --b-bg: var(--raised-press);\n --b-bg-hover: var(--raised-press);\n --b-bg-press: var(--raised-press);\n --b-fg: var(--foreground);\n --b-shadow: var(--shadow-sunken);\n --b-shadow-press: var(--shadow-sunken);\n }\n}\n"},{"path":"ui/command-palette.css","type":"registry:file","target":"components/ui/command-palette.css","content":"/* command-palette.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"command-option\"] {\n transition-property: background-color, color, border-color;\n transition-duration: var(--duration-fast);\n transition-timing-function: var(--ease-out);\n }\n [data-slot=\"command-highlight\"] {\n position: absolute;\n inset-inline: 0;\n top: 0;\n z-index: -1;\n pointer-events: none;\n border-radius: var(--radius-surface);\n background: var(--muted);\n transition:\n transform var(--duration-normal) var(--ease-settle),\n height var(--duration-normal) var(--ease-settle);\n }\n [data-slot=\"command-scope\"] {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n height: 22px;\n padding: 0 8px;\n border-radius: 8px;\n font-size: 12px;\n font-weight: 500;\n color: var(--accent-text);\n background: var(--brand-subtle);\n }\n [data-slot=\"command-match\"] {\n background: none;\n color: inherit;\n font-weight: 600;\n text-decoration: underline;\n text-decoration-color: var(--ring);\n text-decoration-thickness: 1.5px;\n text-underline-offset: 3px;\n }\n [data-slot=\"command-preview\"] {\n flex-direction: column;\n gap: 10px;\n padding: 16px;\n box-shadow: inset 1px 0 0 var(--border);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"command-highlight\"],\n [data-slot=\"command-option\"] {\n transition: none;\n }\n }\n}\n"},{"path":"ui/shared/dialog-overlay.css","type":"registry:file","target":"components/ui/shared/dialog-overlay.css","content":"/* Shared by bottom-sheet.tsx, dialog.tsx, morphing-modal.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"dialog-overlay\"][data-state=\"open\"] {\n animation: caliper-fade-in var(--duration-normal) var(--ease-out);\n }\n\n [data-slot=\"dialog-overlay\"][data-state=\"closed\"] {\n animation: caliper-fade-out var(--duration-fast) var(--ease-in) forwards;\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"dialog-overlay\"] {\n animation: none;\n }\n /* Preserve the exit name for Radix Presence's completion matcher, including\n a preference changed during exit. No visual motion or unmount timer. */\n [data-slot=\"dialog-overlay\"][data-state=\"closed\"] {\n animation: caliper-fade-out var(--duration-instant) var(--ease-in) forwards !important;\n }\n }\n}\n\n/* Outside the component layer so this wins over bg-elevated utilities. */\n[data-slot=\"dialog-overlay\"] {\n backdrop-filter: blur(2px);\n}\n"},{"path":"ui/dialog.css","type":"registry:file","target":"components/ui/dialog.css","content":"/* dialog.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"dialog-content\"][data-motion=\"sheet\"][data-state=\"open\"] {\n animation: caliper-fade-in var(--duration-normal) var(--ease-out);\n }\n\n [data-slot=\"dialog-content\"]:not([data-motion=\"sheet\"])[data-state=\"open\"] {\n animation: caliper-dialog-enter var(--duration-normal) var(--ease-settle);\n }\n\n [data-slot=\"dialog-content\"][data-state=\"closed\"] {\n animation: caliper-fade-out var(--duration-fast) var(--ease-in) forwards;\n pointer-events: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"dialog-content\"],\n [data-slot=\"dialog-content\"]:not([data-motion=\"sheet\"])[data-state=\"open\"] {\n animation: none;\n }\n /* Preserve the exit name for Radix Presence's completion matcher, including\n a preference changed during exit. No visual motion or unmount timer. */\n [data-slot=\"dialog-content\"][data-state=\"closed\"] {\n animation: caliper-fade-out var(--duration-instant) var(--ease-in) forwards !important;\n }\n }\n}\n\n[data-slot=\"dialog-content\"] {\n background-color: var(--elevated-glass);\n border-color: color-mix(in srgb, var(--edge-light) 45%, var(--border));\n backdrop-filter: blur(var(--blur-overlay));\n box-shadow:\n var(--shadow-overlay),\n 0 0 40px var(--edge-glow),\n inset 0 1px 0 var(--edge-light);\n}\n"},{"path":"ui/shared/input.css","type":"registry:file","target":"components/ui/shared/input.css","content":"/* Shared by combobox.tsx, input.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n [data-slot=\"input\"] {\n transition-property: background-color, color, border-color;\n transition-duration: var(--duration-fast);\n transition-timing-function: var(--ease-out);\n }\n\n /* Recessed to fill. One ring for every field: 3:1 at rest, darker on\n hover, a 2px ember ring with a soft halo on focus, danger when invalid.\n Disabled and read-only drop into the sunken fill and stay legible. */\n [data-slot=\"input\"] {\n border: 0;\n background-color: var(--field);\n box-shadow: var(--shadow-field);\n transition: box-shadow var(--duration-fast) var(--ease-out);\n }\n\n @media (prefers-reduced-motion: reduce) {\n [data-slot=\"input\"] {\n transition: none;\n }\n }\n}\n"},{"path":"ui/shared/input-2.css","type":"registry:file","target":"components/ui/shared/input-2.css","content":"/* Shared by combobox.tsx, input.tsx, select-menu.tsx, select.tsx, textarea.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n @media (hover: hover) {\n :is([data-slot=\"input\"], [data-slot=\"textarea\"], [data-slot=\"select\"]):hover:enabled:not(:focus-visible):not([aria-invalid=\"true\"]) {\n box-shadow: var(--shadow-field-hover);\n }\n }\n :is([data-slot=\"input\"], [data-slot=\"textarea\"], [data-slot=\"select\"]):focus-visible {\n outline: none;\n box-shadow: var(--shadow-field-focus);\n transition: none;\n }\n :is([data-slot=\"input\"], [data-slot=\"textarea\"], [data-slot=\"select\"])[aria-invalid=\"true\"] {\n box-shadow: var(--shadow-field-invalid);\n }\n :is([data-slot=\"input\"], [data-slot=\"textarea\"], [data-slot=\"select\"])[aria-invalid=\"true\"]:focus-visible {\n box-shadow:\n var(--shadow-field-invalid),\n 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);\n }\n :is([data-slot=\"input\"], [data-slot=\"textarea\"], [data-slot=\"select\"]):disabled {\n background-color: var(--sunken);\n box-shadow: var(--shadow-field-quiet);\n color: var(--muted-foreground);\n }\n :is([data-slot=\"input\"], [data-slot=\"textarea\"])[readonly] {\n background-color: var(--sunken);\n box-shadow: var(--shadow-field-quiet);\n }\n}\n"},{"path":"ui/shared/input-group.css","type":"registry:file","target":"components/ui/shared/input-group.css","content":"/* Shared by input.tsx, money-field.tsx, phone-field.tsx; each imports it. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n @media (hover: hover) {\n :is([data-slot=\"input-group\"], [data-slot=\"money-field\"], [data-slot=\"phone-field-control\"]):not([data-disabled]):not([data-invalid]):hover:not(:focus-within) {\n box-shadow: var(--shadow-field-hover);\n }\n }\n :is([data-slot=\"input-group\"], [data-slot=\"money-field\"], [data-slot=\"phone-field-control\"]):focus-within {\n outline: none;\n box-shadow: var(--shadow-field-focus);\n transition: none;\n }\n}\n"},{"path":"ui/input.css","type":"registry:file","target":"components/ui/input.css","content":"/* input.tsx's styles; it imports this file. Edit freely. */\n@layer theme, base, components, utilities;\n\n@layer components {\n /* Recessed to fill. One ring for every field: 3:1 at rest, darker on\n hover, a 2px ember ring with a soft halo on focus, danger when invalid.\n Disabled and read-only drop into the sunken fill and stay legible. */\n [data-slot=\"input-group\"] {\n border: 0;\n background-color: var(--field);\n box-shadow: var(--shadow-field);\n transition: box-shadow var(--duration-fast) var(--ease-out);\n }\n [data-slot=\"input-group\"][data-invalid] {\n box-shadow: var(--shadow-field-invalid);\n }\n [data-slot=\"input-group\"][data-invalid]:focus-within {\n box-shadow:\n var(--shadow-field-invalid),\n 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent);\n }\n [data-slot=\"input-group\"][data-disabled] {\n background-color: var(--sunken);\n box-shadow: var(--shadow-field-quiet);\n color: var(--muted-foreground);\n }\n [data-slot=\"input-group\"][data-readonly] {\n background-color: var(--sunken);\n box-shadow: var(--shadow-field-quiet);\n }\n [data-slot=\"input-bare\"] {\n border: 0;\n box-shadow: none;\n outline: none;\n }\n [data-slot=\"input-affix\"] {\n display: inline-flex;\n align-items: center;\n height: 20px;\n padding-inline-end: 10px;\n margin-inline-end: 2px;\n color: var(--muted-foreground);\n box-shadow: 1px 0 0 var(--border);\n white-space: nowrap;\n }\n [data-slot=\"input-affix\"]:dir(rtl) {\n box-shadow: -1px 0 0 var(--border);\n }\n [data-slot=\"input-affix\"]:has(> svg:only-child) {\n padding-inline-end: 0;\n box-shadow: none;\n }\n [data-slot=\"input-trailing\"] {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n color: var(--muted-foreground);\n white-space: nowrap;\n font-size: 12px;\n }\n :is([data-slot=\"input-affix\"], [data-slot=\"input-trailing\"]) svg {\n width: 16px;\n height: 16px;\n }\n [data-slot=\"docs-toolbar\"] [data-slot=\"input-group\"] { max-width: 24rem; }\n}\n"}],"categories":["overlays"],"meta":{"tier":"free","license":"MIT","family":"command-palette","docs":"/docs/components/command-palette"}}