{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "command-palette", "type": "registry:ui", "title": "CommandPalette", "description": "Inline and dialog keyboard command surface with typed action/link/page commands, nested page stacks, deterministic filtering, async sources, recents, suggestions, loading/error/retry feedback, live announcements, grouped results, shortcuts, disabled reasons, destructive state, tokenized styling, close-on-run behavior, and children composition.", "dependencies": [ "motion@^12.43.0", "react-aria@^3.52.1", "react-aria-components@^1.21.1" ], "devDependencies": [], "registryDependencies": [ "https://components.dethink.co.uk/r/dethink-base.json", "https://components.dethink.co.uk/r/button.json", "https://components.dethink.co.uk/r/dialog.json" ], "files": [ { "path": "packages/components/src/components/command-palette/command-palette.tsx", "type": "registry:file", "target": "~/components/dethink/components/command-palette/command-palette.tsx", "content": "import {\n Children,\n cloneElement,\n createContext,\n forwardRef,\n isValidElement,\n useCallback,\n useContext,\n useEffect,\n useId,\n useMemo,\n useRef,\n useState,\n type AnchorHTMLAttributes,\n type ButtonHTMLAttributes,\n type ChangeEventHandler,\n type FocusEventHandler,\n type HTMLAttributes,\n type InputHTMLAttributes,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type ReactElement,\n type ReactNode,\n type Ref,\n} from \"react\";\nimport {\n AnimatePresence,\n MotionConfig,\n motion as motionElement,\n useIsPresent,\n useReducedMotion,\n type Transition,\n type Variants,\n} from \"motion/react\";\nimport {\n Dialog,\n DialogContent,\n DialogDescription,\n DialogTitle,\n DialogTrigger,\n dialogContentClassNames,\n dialogOverlayClassNames,\n dialogTriggerClassNames,\n type DialogContentProps,\n type DialogProps,\n type DialogTriggerProps,\n} from \"../dialog\";\nimport { cn } from \"../../utils/cn\";\n\nexport type CommandPaletteValue = string;\nexport type CommandPaletteControlSize = \"sm\" | \"md\" | \"lg\";\nexport type CommandPaletteCommandType =\n \"action\" | \"link\" | \"page\" | \"separator\";\nexport type CommandPaletteMotionPreset =\n \"none\" | \"subtle\" | \"standard\" | \"expressive\";\nexport type CommandPalettePageDirection = \"back\" | \"forward\" | \"none\";\nexport type CommandPalettePageStackChangeReason = \"back\" | \"push\" | \"reset\";\nexport type CommandPaletteCommandSource =\n \"base\" | \"recent\" | \"suggested\" | \"async\" | \"page\" | (string & {});\n\nexport interface CommandPaletteCommandRunContext {\n close?: () => void;\n closeOnRun: boolean;\n page: CommandPaletteValue | undefined;\n pageStack: CommandPaletteValue[];\n query: string;\n source: CommandPaletteCommandSource | undefined;\n}\n\nexport interface CommandPaletteCommand {\n action?: (\n command: CommandPaletteCommand,\n context: CommandPaletteCommandRunContext,\n ) => void;\n aliases?: string[];\n closeOnRun?: boolean;\n description?: ReactNode;\n destructive?: boolean;\n disabled?: boolean;\n disabledReason?: ReactNode;\n group?: string;\n href?: string;\n icon?: ReactNode;\n key: CommandPaletteValue;\n keywords?: string[];\n label: ReactNode;\n metadata?: Record;\n page?: string;\n priority?: number;\n rel?: string;\n shortcut?: ReactNode;\n source?: CommandPaletteCommandSource;\n target?: AnchorHTMLAttributes[\"target\"];\n textValue?: string;\n type?: CommandPaletteCommandType;\n}\n\nexport type CommandPaletteFilter = (\n command: CommandPaletteCommand,\n query: string,\n) => boolean;\n\nexport type CommandPaletteSort = (\n a: CommandPaletteCommand,\n b: CommandPaletteCommand,\n query: string,\n) => number;\n\nexport interface CommandPalettePageDefinition {\n asyncCommands?: CommandPaletteCommand[];\n commands?: CommandPaletteCommand[];\n description?: ReactNode;\n emptyMessage?: ReactNode;\n error?: ReactNode;\n filter?: CommandPaletteFilter;\n id: CommandPaletteValue;\n limit?: number;\n loading?: boolean;\n loadingMessage?: ReactNode;\n minimumQueryLength?: number;\n minimumQueryMessage?: ReactNode;\n onRetry?: () => void;\n recentCommands?: CommandPaletteCommand[];\n retryLabel?: ReactNode;\n shouldFilter?: boolean;\n sort?: CommandPaletteSort;\n stale?: boolean;\n staleMessage?: ReactNode;\n suggestedCommands?: CommandPaletteCommand[];\n title: ReactNode;\n}\n\nexport interface CommandPalettePageStackChangeContext {\n activePage: CommandPaletteValue | undefined;\n direction: CommandPalettePageDirection;\n previousPage: CommandPaletteValue | undefined;\n reason: CommandPalettePageStackChangeReason;\n}\n\nexport interface CommandPaletteProps extends Omit<\n HTMLAttributes,\n \"children\" | \"onSelect\"\n> {\n announcements?: boolean;\n asyncCommands?: CommandPaletteCommand[];\n children?: ReactNode | ((command: CommandPaletteCommand) => ReactNode);\n clearQueryOnPageChange?: boolean;\n closeOnRun?: boolean;\n commands?: CommandPaletteCommand[];\n controlSize?: CommandPaletteControlSize;\n defaultPageStack?: CommandPaletteValue[];\n defaultQuery?: string;\n defaultSelectedKey?: CommandPaletteValue | null;\n description?: ReactNode;\n emptyMessage?: ReactNode;\n error?: ReactNode;\n filter?: CommandPaletteFilter;\n label?: ReactNode;\n limit?: number;\n loading?: boolean;\n loadingMessage?: ReactNode;\n minimumQueryLength?: number;\n minimumQueryMessage?: ReactNode;\n motionPreset?: CommandPaletteMotionPreset;\n onCommandRun?: (\n command: CommandPaletteCommand,\n context: CommandPaletteCommandRunContext,\n ) => void;\n onPageStackChange?: (\n pageStack: CommandPaletteValue[],\n context: CommandPalettePageStackChangeContext,\n ) => void;\n onQueryChange?: (query: string) => void;\n onRetry?: () => void;\n onSelectedKeyChange?: (key: CommandPaletteValue | null) => void;\n pageBackLabel?: ReactNode;\n pageStack?: CommandPaletteValue[];\n pages?: CommandPalettePageDefinition[];\n placeholder?: string;\n query?: string;\n recentCommands?: CommandPaletteCommand[];\n reducedMotion?: boolean;\n retryLabel?: ReactNode;\n selectedKey?: CommandPaletteValue | null;\n shouldFilter?: boolean;\n sort?: CommandPaletteSort;\n stale?: boolean;\n staleMessage?: ReactNode;\n suggestedCommands?: CommandPaletteCommand[];\n}\n\nexport interface CommandPaletteInputProps extends Omit<\n InputHTMLAttributes,\n \"size\"\n> {\n controlSize?: CommandPaletteControlSize;\n}\n\nexport interface CommandPaletteDialogProps extends Omit<\n DialogProps,\n \"children\"\n> {\n children?: ReactNode;\n closeOnRun?: boolean;\n motionPreset?: CommandPaletteMotionPreset;\n reducedMotion?: boolean;\n}\n\nexport interface CommandPaletteTriggerProps extends DialogTriggerProps {}\n\nexport interface CommandPaletteContentProps extends Omit<\n DialogContentProps,\n \"children\"\n> {\n children?: DialogContentProps[\"children\"];\n closeOnRun?: boolean;\n description?: ReactNode;\n motionPreset?: CommandPaletteMotionPreset;\n reducedMotion?: boolean;\n title?: ReactNode;\n titleVisuallyHidden?: boolean;\n}\n\nexport interface CommandPaletteListProps extends HTMLAttributes {}\n\nexport interface CommandPaletteGroupProps extends Omit<\n HTMLAttributes,\n \"title\"\n> {\n heading?: ReactNode;\n}\n\ntype CommandPaletteItemBaseProps = Omit<\n HTMLAttributes,\n \"children\" | \"onSelect\"\n> & {\n asChild?: boolean;\n children?: ReactNode;\n command?: CommandPaletteCommand;\n destructive?: boolean;\n disabled?: boolean;\n disabledReason?: ReactNode;\n href?: string;\n icon?: ReactNode;\n onAction?: (\n command: CommandPaletteCommand,\n context: CommandPaletteCommandRunContext,\n ) => void;\n page?: CommandPaletteValue;\n rel?: string;\n shortcut?: ReactNode;\n target?: AnchorHTMLAttributes[\"target\"];\n value: CommandPaletteValue;\n};\n\nexport type CommandPaletteItemProps = CommandPaletteItemBaseProps;\n\nexport interface CommandPaletteItemIconProps extends HTMLAttributes {}\n\nexport interface CommandPaletteItemLabelProps extends HTMLAttributes {}\n\nexport interface CommandPaletteItemDescriptionProps extends HTMLAttributes {}\n\nexport interface CommandPaletteItemShortcutProps extends HTMLAttributes {}\n\nexport interface CommandPaletteSeparatorProps extends HTMLAttributes {}\n\nexport interface CommandPaletteEmptyProps extends HTMLAttributes {}\n\nexport interface CommandPaletteStatusProps extends HTMLAttributes {}\n\nexport interface CommandPaletteLoadingProps extends HTMLAttributes {}\n\nexport interface CommandPaletteErrorProps extends HTMLAttributes {}\n\nexport interface CommandPaletteRetryProps extends ButtonHTMLAttributes {}\n\nexport interface CommandPaletteAnnouncerProps extends HTMLAttributes {}\n\nexport interface CommandPalettePageStackProps extends HTMLAttributes {\n \"data-page\"?: CommandPaletteValue;\n \"data-page-depth\"?: number | string;\n \"data-page-direction\"?: CommandPalettePageDirection;\n}\n\nexport interface CommandPalettePageProps extends HTMLAttributes {\n \"data-page\"?: CommandPaletteValue;\n \"data-page-depth\"?: number | string;\n \"data-page-direction\"?: CommandPalettePageDirection;\n}\n\nexport interface CommandPalettePageHeaderProps extends HTMLAttributes {}\n\nexport interface CommandPalettePageBackProps extends ButtonHTMLAttributes {}\n\ntype CommandPaletteItemSlotProps = Record & {\n \"aria-disabled\"?: boolean | \"false\" | \"true\";\n children?: ReactNode;\n className?: string;\n href?: string;\n onClick?: MouseEventHandler;\n onFocus?: React.FocusEventHandler;\n onMouseEnter?: MouseEventHandler;\n ref?: Ref;\n rel?: string;\n target?: AnchorHTMLAttributes[\"target\"];\n};\n\ninterface CommandPaletteContextValue {\n activeCommand: CommandPaletteCommand | null;\n controlSize: CommandPaletteControlSize;\n inputAriaLabel: string | undefined;\n inputId: string;\n labelId: string | undefined;\n motionEnabled: boolean;\n motionPreset: CommandPaletteMotionPreset;\n reducedMotion: boolean;\n selectedIndicatorLayoutId: string;\n onInputKeyDown: KeyboardEventHandler;\n page: CommandPaletteValue | undefined;\n pageDirection: CommandPalettePageDirection;\n pageStack: CommandPaletteValue[];\n popPage: () => void;\n query: string;\n registerItem: (key: CommandPaletteValue, element: HTMLElement) => void;\n runCommand: (command: CommandPaletteCommand) => void;\n selectedKey: CommandPaletteValue | null;\n setQuery: (query: string) => void;\n setSelectedKey: (key: CommandPaletteValue | null) => void;\n unregisterItem: (key: CommandPaletteValue, element: HTMLElement) => void;\n}\n\ninterface CommandPaletteDialogConfigContextValue {\n closeOnRun: boolean;\n motionPreset: CommandPaletteMotionPreset;\n reducedMotion: boolean | undefined;\n}\n\ninterface CommandPaletteDialogActionContextValue {\n close: () => void;\n closeOnRun: boolean;\n}\n\ninterface CommandPaletteRenderGroup {\n commands: CommandPaletteCommand[];\n heading: string | undefined;\n key: string;\n}\n\ninterface CommandPaletteMotionSettings {\n indicatorTransition: Transition;\n pageOffset: number;\n pageTransition: Transition;\n resultOffset: number;\n resultTransition: Transition;\n staggerDelay: number;\n}\n\ninterface CommandPalettePageFrameProps {\n children?: ReactNode;\n className?: string;\n \"data-page\"?: CommandPaletteValue;\n \"data-page-depth\"?: number | string;\n \"data-page-direction\"?: CommandPalettePageDirection;\n \"data-state\"?: string;\n}\n\nconst CommandPaletteContext = createContext(\n null,\n);\n\nconst CommandPaletteDialogConfigContext =\n createContext(null);\n\nconst CommandPaletteDialogActionContext =\n createContext(null);\n\nconst emptyCommands: CommandPaletteCommand[] = [];\n\nconst commandPaletteDefaultSourceGroups: Partial<\n Record\n> = {\n async: \"Results\",\n recent: \"Recent\",\n suggested: \"Suggested\",\n};\n\nconst commandPaletteRootClasses =\n \"group/command-palette grid w-full min-w-0 overflow-hidden rounded-lg border border-border bg-background text-foreground shadow-sm\";\n\nconst commandPaletteHeaderClasses =\n \"grid gap-[var(--dt-space-1)] border-b border-border p-[var(--dt-space-3)]\";\n\nconst commandPaletteLabelClasses =\n \"text-sm font-medium leading-5 text-foreground\";\n\nconst commandPaletteDescriptionClasses =\n \"text-xs leading-5 text-muted-foreground\";\n\nconst commandPaletteInputClasses =\n \"w-full min-w-0 border-0 bg-transparent text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-60\";\n\nconst commandPaletteInputSizeClasses: Record<\n CommandPaletteControlSize,\n string\n> = {\n sm: \"h-8 text-base sm:text-sm\",\n md: \"h-density-control text-base sm:text-sm\",\n lg: \"h-11 text-base\",\n};\n\nconst commandPaletteListClasses =\n \"grid max-h-[min(24rem,calc(100dvh_-_var(--dt-space-8)))] gap-[var(--dt-space-1)] overflow-auto p-[var(--dt-space-2)]\";\n\nconst commandPaletteGroupClasses = \"grid min-w-0 gap-[var(--dt-space-1)]\";\n\nconst commandPaletteGroupHeadingClasses =\n \"px-[var(--dt-space-2)] py-[var(--dt-space-1)] text-xs font-medium uppercase tracking-normal text-muted-foreground\";\n\nconst commandPaletteItemClasses =\n \"relative isolate grid w-full min-w-0 cursor-default grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-[var(--dt-space-2)] overflow-hidden rounded-md px-[var(--dt-space-2)] py-[var(--dt-space-1-5)] text-start text-sm leading-5 text-foreground no-underline outline-none motion-safe:transition-[background-color,color,box-shadow] motion-safe:duration-150 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-55 data-[selected=true]:bg-muted data-[destructive=true]:text-destructive data-[destructive=true]:hover:bg-destructive/10 data-[destructive=true]:data-[selected=true]:bg-destructive/10 [&>:not([data-slot=command-palette-selected-indicator])]:relative [&>:not([data-slot=command-palette-selected-indicator])]:z-[1]\";\n\nconst commandPaletteItemSizeClasses: Record =\n {\n sm: \"min-h-8\",\n md: \"min-h-10\",\n lg: \"min-h-11\",\n };\n\nconst commandPaletteItemIconClasses =\n \"flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[destructive=true]/command-palette-item:text-destructive [&>svg]:size-4\";\n\nconst commandPaletteItemContentClasses = \"grid min-w-0 gap-0.5\";\n\nconst commandPaletteItemLabelClasses =\n \"min-w-0 truncate font-medium text-current\";\n\nconst commandPaletteItemDescriptionClasses =\n \"min-w-0 truncate text-xs leading-5 text-muted-foreground group-data-[destructive=true]/command-palette-item:text-destructive/80\";\n\nconst commandPaletteItemShortcutClasses =\n \"ms-[var(--dt-space-2)] inline-flex shrink-0 items-center rounded border border-border bg-muted px-[var(--dt-space-1-5)] py-[var(--dt-space-0-5)] font-mono text-[0.6875rem] leading-4 text-muted-foreground\";\n\nconst commandPaletteSelectedIndicatorClasses =\n \"pointer-events-none absolute inset-0 z-0 rounded-md bg-muted group-data-[destructive=true]/command-palette-item:bg-destructive/10\";\n\nconst commandPaletteSeparatorClasses = \"my-[var(--dt-space-1)] h-px bg-border\";\n\nconst commandPaletteEmptyClasses =\n \"px-[var(--dt-space-3)] py-[var(--dt-space-8)] text-center text-sm text-muted-foreground\";\n\nconst commandPaletteStatusClasses =\n \"grid gap-[var(--dt-space-2)] px-[var(--dt-space-3)] py-[var(--dt-space-5)] text-center text-sm leading-5 text-muted-foreground\";\n\nconst commandPaletteErrorClasses =\n \"grid gap-[var(--dt-space-3)] px-[var(--dt-space-3)] py-[var(--dt-space-5)] text-center text-sm leading-5 text-muted-foreground\";\n\nconst commandPaletteRetryClasses =\n \"mx-auto inline-flex min-h-8 items-center justify-center rounded-md border border-border bg-background px-[var(--dt-space-3)] py-[var(--dt-space-1)] text-sm font-medium leading-5 text-foreground outline-none motion-safe:transition-[background-color,color,box-shadow] motion-safe:duration-150 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60\";\n\nconst commandPaletteAnnouncerClasses = \"sr-only\";\n\nconst commandPalettePageStackClasses = \"grid min-w-0\";\n\nconst commandPalettePageClasses = \"grid min-w-0\";\n\nconst commandPalettePageHeaderClasses =\n \"grid grid-cols-[auto_minmax(0,1fr)] items-start gap-[var(--dt-space-2)] border-b border-border px-[var(--dt-space-3)] py-[var(--dt-space-2)]\";\n\nconst commandPalettePageHeadingClasses = \"grid min-w-0 gap-0.5\";\n\nconst commandPalettePageTitleClasses =\n \"min-w-0 truncate text-sm font-medium leading-5 text-foreground\";\n\nconst commandPalettePageDescriptionClasses =\n \"min-w-0 text-xs leading-5 text-muted-foreground\";\n\nconst commandPalettePageBackClasses =\n \"inline-flex min-h-8 shrink-0 items-center justify-center rounded-md border border-border bg-background px-[var(--dt-space-2)] py-[var(--dt-space-1)] text-sm font-medium leading-5 text-foreground outline-none motion-safe:transition-[background-color,color,box-shadow] motion-safe:duration-150 hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60\";\n\nconst commandPaletteDialogClasses = \"contents\";\n\nconst commandPaletteDialogContentClasses = \"overflow-hidden p-0\";\n\nconst commandPaletteDialogOverlayMotionClasses: Record<\n CommandPaletteMotionPreset,\n string\n> = {\n none: \"motion-safe:duration-0\",\n subtle: \"motion-safe:duration-150 motion-safe:ease-out\",\n standard: \"motion-safe:duration-200 motion-safe:ease-out\",\n expressive: \"motion-safe:duration-300 motion-safe:ease-out\",\n};\n\nconst commandPaletteDialogContentMotionClasses: Record<\n CommandPaletteMotionPreset,\n string\n> = {\n none: \"motion-safe:duration-0 data-[exiting]:translate-y-0 data-[exiting]:scale-100\",\n subtle:\n \"motion-safe:duration-150 data-[exiting]:translate-y-1 data-[exiting]:scale-[0.99]\",\n standard:\n \"motion-safe:duration-200 data-[exiting]:translate-y-2 data-[exiting]:scale-[0.98]\",\n expressive:\n \"motion-safe:duration-300 data-[entering]:scale-100 data-[exiting]:translate-y-3 data-[exiting]:scale-[0.96]\",\n};\n\nconst commandPaletteMotionGroupClasses = \"grid min-w-0\";\n\nconst commandPaletteMotionResultClasses = \"grid min-w-0\";\n\nconst commandPaletteDialogBodyClasses = \"grid min-w-0\";\n\nconst commandPaletteInDialogClasses = \"rounded-none border-0 shadow-none\";\n\nconst commandPaletteMotionSettings: Record<\n CommandPaletteMotionPreset,\n CommandPaletteMotionSettings\n> = {\n none: {\n indicatorTransition: { duration: 0 },\n pageOffset: 0,\n pageTransition: { duration: 0 },\n resultOffset: 0,\n resultTransition: { duration: 0 },\n staggerDelay: 0,\n },\n subtle: {\n indicatorTransition: { duration: 0.14, ease: [0.2, 0, 0, 1] },\n pageOffset: 8,\n pageTransition: { duration: 0.14, ease: [0.2, 0, 0, 1] },\n resultOffset: 3,\n resultTransition: { duration: 0.12, ease: [0.2, 0, 0, 1] },\n staggerDelay: 0,\n },\n standard: {\n indicatorTransition: { duration: 0.18, ease: [0.2, 0, 0, 1] },\n pageOffset: 14,\n pageTransition: { duration: 0.18, ease: [0.2, 0, 0, 1] },\n resultOffset: 5,\n resultTransition: { duration: 0.16, ease: [0.2, 0, 0, 1] },\n staggerDelay: 0.014,\n },\n expressive: {\n indicatorTransition: {\n damping: 32,\n mass: 0.75,\n stiffness: 420,\n type: \"spring\",\n },\n pageOffset: 20,\n pageTransition: { duration: 0.24, ease: [0.16, 1, 0.3, 1] },\n resultOffset: 8,\n resultTransition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },\n staggerDelay: 0.022,\n },\n};\n\nconst commandPalettePageMotionVariants: Variants = {\n animate: {\n opacity: 1,\n x: 0,\n },\n enter: ({\n direction,\n offset,\n }: {\n direction: CommandPalettePageDirection;\n offset: number;\n }) => ({\n opacity: 0,\n x: direction === \"forward\" ? offset : direction === \"back\" ? -offset : 0,\n }),\n exit: ({\n direction,\n offset,\n }: {\n direction: CommandPalettePageDirection;\n offset: number;\n }) => ({\n opacity: 0,\n x: direction === \"forward\" ? -offset : direction === \"back\" ? offset : 0,\n }),\n};\n\nconst commandPaletteResultMotionVariants: Variants = {\n animate: {\n opacity: 1,\n y: 0,\n },\n enter: ({ offset }: { offset: number }) => ({\n opacity: 0,\n y: offset,\n }),\n exit: ({ offset }: { offset: number }) => ({\n opacity: 0,\n y: -offset,\n }),\n};\n\nexport function commandPaletteClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteRootClasses, className);\n}\n\nexport function commandPaletteDialogClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteDialogClasses, className);\n}\n\nexport function commandPaletteTriggerClassNames({\n className,\n size = \"md\",\n variant = \"solid\",\n}: Pick = {}) {\n return dialogTriggerClassNames({ className, size, variant });\n}\n\nexport function commandPaletteContentClassNames({\n className,\n scrollBehavior = \"inside\",\n size = \"lg\",\n}: Pick<\n CommandPaletteContentProps,\n \"className\" | \"scrollBehavior\" | \"size\"\n> = {}) {\n return dialogContentClassNames({\n className: cn(commandPaletteDialogContentClasses, className),\n scrollBehavior,\n size,\n });\n}\n\nexport function commandPaletteOverlayClassNames({\n className,\n}: {\n className?: string;\n} = {}) {\n return dialogOverlayClassNames({ className });\n}\n\nexport function commandPaletteInputClassNames({\n className,\n controlSize = \"md\",\n}: Pick = {}) {\n return cn(\n commandPaletteInputClasses,\n commandPaletteInputSizeClasses[controlSize],\n className,\n );\n}\n\nexport function commandPaletteListClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteListClasses, className);\n}\n\nexport function commandPaletteGroupClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteGroupClasses, className);\n}\n\nexport function commandPaletteItemClassNames({\n className,\n controlSize = \"md\",\n}: Pick & {\n controlSize?: CommandPaletteControlSize;\n} = {}) {\n return cn(\n commandPaletteItemClasses,\n commandPaletteItemSizeClasses[controlSize],\n className,\n );\n}\n\nexport function commandPaletteSeparatorClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteSeparatorClasses, className);\n}\n\nexport function commandPaletteEmptyClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteEmptyClasses, className);\n}\n\nexport function commandPaletteStatusClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteStatusClasses, className);\n}\n\nexport function commandPaletteLoadingClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteStatusClasses, className);\n}\n\nexport function commandPaletteErrorClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteErrorClasses, className);\n}\n\nexport function commandPaletteRetryClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteRetryClasses, className);\n}\n\nexport function commandPaletteAnnouncerClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPaletteAnnouncerClasses, className);\n}\n\nexport function commandPalettePageStackClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPalettePageStackClasses, className);\n}\n\nexport function commandPalettePageClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPalettePageClasses, className);\n}\n\nexport function commandPalettePageHeaderClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPalettePageHeaderClasses, className);\n}\n\nexport function commandPalettePageBackClassNames({\n className,\n}: Pick = {}) {\n return cn(commandPalettePageBackClasses, className);\n}\n\nfunction setRef(ref: Ref | undefined, node: T | null) {\n if (typeof ref === \"function\") {\n ref(node);\n return;\n }\n\n if (ref) {\n ref.current = node;\n }\n}\n\nfunction composeRefs(...refs: Array | undefined>) {\n return (node: T | null) => {\n for (const ref of refs) {\n setRef(ref, node);\n }\n };\n}\n\nfunction composeEventHandlers(\n childHandler: ((event: Event) => void) | undefined,\n componentHandler: (event: Event) => void,\n) {\n return (event: Event) => {\n childHandler?.(event);\n\n if (!event.defaultPrevented) {\n componentHandler(event);\n }\n };\n}\n\nfunction mergeRelForTarget(\n rel: string | undefined,\n target: AnchorHTMLAttributes[\"target\"] | undefined,\n) {\n if (target !== \"_blank\") {\n return rel;\n }\n\n const tokens = new Set((rel ?? \"\").split(/\\s+/).filter(Boolean));\n tokens.add(\"noopener\");\n\n return Array.from(tokens).join(\" \");\n}\n\nfunction getChildRef(child: ReactElement) {\n return child.props.ref;\n}\n\nfunction getCommandText(command: CommandPaletteCommand) {\n if (command.textValue) {\n return command.textValue;\n }\n\n return typeof command.label === \"string\" ? command.label : command.key;\n}\n\nfunction getNodeText(node: ReactNode): string | undefined {\n if (node === null || node === undefined || typeof node === \"boolean\") {\n return undefined;\n }\n\n if (typeof node === \"string\" || typeof node === \"number\") {\n return String(node);\n }\n\n if (Array.isArray(node)) {\n return (\n node\n .map((child) => getNodeText(child))\n .filter(Boolean)\n .join(\" \")\n .trim() || undefined\n );\n }\n\n if (isValidElement<{ children?: ReactNode }>(node)) {\n return getNodeText(node.props.children);\n }\n\n return undefined;\n}\n\nfunction formatCommandCount(count: number) {\n return `${count} command${count === 1 ? \"\" : \"s\"}`;\n}\n\nfunction formatSourceLabel(source: CommandPaletteCommandSource | undefined) {\n if (!source) {\n return undefined;\n }\n\n if (source === \"base\" || source === \"page\") {\n return undefined;\n }\n\n return commandPaletteDefaultSourceGroups[source] ?? source;\n}\n\nfunction removeBoundarySeparators(commands: CommandPaletteCommand[]) {\n const normalizedCommands: CommandPaletteCommand[] = [];\n\n for (const command of commands) {\n if (\n command.type === \"separator\" &&\n (normalizedCommands.length === 0 ||\n normalizedCommands[normalizedCommands.length - 1]?.type === \"separator\")\n ) {\n continue;\n }\n\n normalizedCommands.push(command);\n }\n\n while (\n normalizedCommands[normalizedCommands.length - 1]?.type === \"separator\"\n ) {\n normalizedCommands.pop();\n }\n\n return normalizedCommands;\n}\n\nfunction getPageTitleText(page: CommandPalettePageDefinition | undefined) {\n return getNodeText(page?.title) ?? page?.id;\n}\n\nfunction shouldEnableCommandPaletteMotion({\n motionPreset,\n reducedMotion,\n}: {\n motionPreset: CommandPaletteMotionPreset;\n reducedMotion: boolean;\n}) {\n return motionPreset !== \"none\" && !reducedMotion;\n}\n\nfunction getCommandPaletteMotionSettings(\n motionPreset: CommandPaletteMotionPreset,\n) {\n return commandPaletteMotionSettings[motionPreset];\n}\n\nfunction withCommandPaletteMotionDelay(\n transition: Transition,\n delay: number,\n): Transition {\n if (delay <= 0) {\n return transition;\n }\n\n return {\n ...transition,\n delay,\n };\n}\n\nfunction shouldStaggerCommandSource(\n source: CommandPaletteCommandSource | undefined,\n) {\n return source === \"recent\" || source === \"suggested\";\n}\n\nfunction searchableParts(command: CommandPaletteCommand) {\n return [\n command.key,\n getCommandText(command),\n command.group,\n ...(command.aliases ?? []),\n ...(command.keywords ?? []),\n ]\n .filter(Boolean)\n .join(\" \")\n .toLowerCase();\n}\n\nexport function defaultCommandPaletteFilter(\n command: CommandPaletteCommand,\n query: string,\n) {\n const normalizedQuery = query.trim().toLowerCase();\n\n if (!normalizedQuery) {\n return true;\n }\n\n return searchableParts(command).includes(normalizedQuery);\n}\n\nfunction defaultSort(\n a: CommandPaletteCommand,\n b: CommandPaletteCommand,\n query: string,\n) {\n const aPriority = a.priority ?? 0;\n const bPriority = b.priority ?? 0;\n\n if (aPriority !== bPriority) {\n return bPriority - aPriority;\n }\n\n const normalizedQuery = query.trim().toLowerCase();\n\n if (normalizedQuery) {\n const aText = getCommandText(a).toLowerCase();\n const bText = getCommandText(b).toLowerCase();\n const aStarts = aText.startsWith(normalizedQuery);\n const bStarts = bText.startsWith(normalizedQuery);\n\n if (aStarts !== bStarts) {\n return aStarts ? -1 : 1;\n }\n }\n\n return 0;\n}\n\nfunction isSelectableCommand(command: CommandPaletteCommand) {\n return command.type !== \"separator\" && !command.disabled;\n}\n\nfunction withCommandSource(\n command: CommandPaletteCommand,\n source: CommandPaletteCommandSource,\n) {\n const resolvedSource = command.source ?? source;\n\n return {\n ...command,\n group:\n command.group ??\n (source === \"base\"\n ? undefined\n : commandPaletteDefaultSourceGroups[source]),\n source: resolvedSource,\n };\n}\n\nfunction appendSourceCommands(\n target: CommandPaletteCommand[],\n seenKeys: Set,\n commands: CommandPaletteCommand[] | undefined,\n source: CommandPaletteCommandSource,\n) {\n for (const command of commands ?? emptyCommands) {\n if (seenKeys.has(command.key)) {\n continue;\n }\n\n seenKeys.add(command.key);\n target.push(withCommandSource(command, source));\n }\n}\n\nexport function getCommandPaletteSourceCommands({\n asyncCommands,\n commandSource = \"base\",\n commands,\n minimumQueryLength = 0,\n query = \"\",\n recentCommands,\n suggestedCommands,\n}: {\n asyncCommands?: CommandPaletteCommand[];\n commandSource?: CommandPaletteCommandSource;\n commands?: CommandPaletteCommand[];\n minimumQueryLength?: number;\n query?: string;\n recentCommands?: CommandPaletteCommand[];\n suggestedCommands?: CommandPaletteCommand[];\n} = {}) {\n const normalizedQuery = query.trim();\n const sourceCommands: CommandPaletteCommand[] = [];\n const seenKeys = new Set();\n const canShowDiscoveryCommands = normalizedQuery.length === 0;\n const canShowAsyncCommands =\n minimumQueryLength <= 0 || normalizedQuery.length >= minimumQueryLength;\n\n if (canShowDiscoveryCommands) {\n appendSourceCommands(sourceCommands, seenKeys, recentCommands, \"recent\");\n appendSourceCommands(\n sourceCommands,\n seenKeys,\n suggestedCommands,\n \"suggested\",\n );\n }\n\n if (canShowAsyncCommands) {\n appendSourceCommands(sourceCommands, seenKeys, asyncCommands, \"async\");\n }\n\n appendSourceCommands(sourceCommands, seenKeys, commands, commandSource);\n\n return sourceCommands;\n}\n\nexport function getCommandPaletteFilteredCommands(\n commands: CommandPaletteCommand[],\n {\n filter = defaultCommandPaletteFilter,\n limit,\n query = \"\",\n shouldFilter = true,\n sort,\n }: {\n filter?: CommandPaletteFilter;\n limit?: number;\n query?: string;\n shouldFilter?: boolean;\n sort?: CommandPaletteSort;\n } = {},\n) {\n const filtered = shouldFilter\n ? commands.filter(\n (command) => command.type === \"separator\" || filter(command, query),\n )\n : [...commands];\n const sorter = sort ?? defaultSort;\n const sorted = filtered\n .map((command, index) => ({ command, index }))\n .sort((a, b) => {\n const result = sorter(a.command, b.command, query);\n\n return result === 0 ? a.index - b.index : result;\n })\n .map(({ command }) => command);\n if (limit === undefined) {\n return removeBoundarySeparators(sorted);\n }\n\n let commandCount = 0;\n const maxCommands = Math.max(0, limit);\n\n return removeBoundarySeparators(\n sorted.filter((command) => {\n if (command.type === \"separator\") {\n return true;\n }\n\n if (commandCount >= maxCommands) {\n return false;\n }\n\n commandCount += 1;\n return true;\n }),\n );\n}\n\nfunction groupCommands(\n commands: CommandPaletteCommand[],\n): CommandPaletteRenderGroup[] {\n const groups: CommandPaletteRenderGroup[] = [];\n const indexes = new Map();\n\n for (const command of commands) {\n const heading = command.group;\n const key = heading ?? \"__command-palette-default\";\n const existingIndex = indexes.get(key);\n\n if (existingIndex !== undefined) {\n groups[existingIndex]?.commands.push(command);\n continue;\n }\n\n indexes.set(key, groups.length);\n groups.push({\n commands: [command],\n heading,\n key,\n });\n }\n\n return groups;\n}\n\nfunction renderDefaultCommandContent(command: CommandPaletteCommand) {\n return (\n <>\n {command.icon ? (\n {command.icon}\n ) : (\n \n )}\n \n {command.label}\n {command.disabledReason ? (\n \n {command.disabledReason}\n \n ) : command.description ? (\n \n {command.description}\n \n ) : null}\n \n {command.shortcut ? (\n \n {command.shortcut}\n \n ) : null}\n \n );\n}\n\nfunction CommandPalettePageFrame({\n children,\n className,\n \"data-page\": dataPage,\n \"data-page-depth\": dataPageDepth,\n \"data-page-direction\": dataPageDirection,\n \"data-state\": dataState,\n}: CommandPalettePageFrameProps) {\n const context = useContext(CommandPaletteContext);\n const isPresent = useIsPresent();\n const motionPreset = context?.motionPreset ?? \"standard\";\n const motionSettings = getCommandPaletteMotionSettings(motionPreset);\n const pageDirection = dataPageDirection ?? context?.pageDirection ?? \"none\";\n const resolvedPage = dataPage ?? context?.page ?? \"root\";\n const resolvedPageDepth = dataPageDepth ?? context?.pageStack.length ?? 0;\n const commonProps = {\n \"aria-hidden\":\n context?.motionEnabled === true && !isPresent ? true : undefined,\n \"data-motion\": motionPreset,\n \"data-page\": resolvedPage,\n \"data-page-depth\": resolvedPageDepth,\n \"data-page-direction\": pageDirection,\n \"data-reduced-motion\": context?.reducedMotion ? \"true\" : undefined,\n \"data-slot\": \"command-palette-page\",\n \"data-state\": dataState,\n className: commandPalettePageClassNames({ className }),\n };\n\n if (!context?.motionEnabled) {\n return
{children}
;\n }\n\n return (\n \n {children}\n \n );\n}\n\nfunction CommandPaletteMotionGroup({\n children,\n index,\n source,\n}: {\n children: ReactNode;\n index: number;\n source: CommandPaletteCommandSource | undefined;\n}) {\n const context = useContext(CommandPaletteContext);\n const isPresent = useIsPresent();\n const motionPreset = context?.motionPreset ?? \"standard\";\n const motionSettings = getCommandPaletteMotionSettings(motionPreset);\n const staggered =\n context?.motionEnabled === true &&\n motionSettings.staggerDelay > 0 &&\n (shouldStaggerCommandSource(source) || motionPreset === \"expressive\");\n const transition = withCommandPaletteMotionDelay(\n motionSettings.resultTransition,\n staggered ? index * motionSettings.staggerDelay : 0,\n );\n const commonProps = {\n \"aria-hidden\":\n context?.motionEnabled === true && !isPresent ? true : undefined,\n \"data-motion\": motionPreset,\n \"data-motion-stagger\": staggered ? \"true\" : undefined,\n \"data-reduced-motion\": context?.reducedMotion ? \"true\" : undefined,\n \"data-slot\": \"command-palette-motion-group\",\n className: commandPaletteMotionGroupClasses,\n };\n\n if (!context?.motionEnabled) {\n return
{children}
;\n }\n\n return (\n \n {children}\n \n );\n}\n\nfunction CommandPaletteMotionResult({\n children,\n index,\n source,\n}: {\n children: ReactNode;\n index: number;\n source: CommandPaletteCommandSource | undefined;\n}) {\n const context = useContext(CommandPaletteContext);\n const isPresent = useIsPresent();\n const motionPreset = context?.motionPreset ?? \"standard\";\n const motionSettings = getCommandPaletteMotionSettings(motionPreset);\n const staggered =\n context?.motionEnabled === true &&\n motionSettings.staggerDelay > 0 &&\n (shouldStaggerCommandSource(source) || motionPreset === \"expressive\");\n const transition = withCommandPaletteMotionDelay(\n motionSettings.resultTransition,\n staggered ? index * motionSettings.staggerDelay : 0,\n );\n const commonProps = {\n \"aria-hidden\":\n context?.motionEnabled === true && !isPresent ? true : undefined,\n \"data-motion\": motionPreset,\n \"data-motion-stagger\": staggered ? \"true\" : undefined,\n \"data-reduced-motion\": context?.reducedMotion ? \"true\" : undefined,\n \"data-slot\": \"command-palette-motion-result\",\n className: commandPaletteMotionResultClasses,\n };\n\n if (!context?.motionEnabled) {\n return
{children}
;\n }\n\n return (\n \n {children}\n \n );\n}\n\nfunction CommandPaletteSelectedIndicator() {\n const context = useContext(CommandPaletteContext);\n const motionPreset = context?.motionPreset ?? \"standard\";\n const motionSettings = getCommandPaletteMotionSettings(motionPreset);\n const commonProps = {\n \"aria-hidden\": true,\n \"data-motion\": motionPreset,\n \"data-reduced-motion\": context?.reducedMotion ? \"true\" : undefined,\n \"data-slot\": \"command-palette-selected-indicator\",\n className: commandPaletteSelectedIndicatorClasses,\n } as const;\n\n if (!context?.motionEnabled) {\n return ;\n }\n\n return (\n \n );\n}\n\nfunction commandFromItemProps({\n command,\n destructive,\n disabled,\n disabledReason,\n href,\n onAction,\n page,\n rel,\n shortcut,\n target,\n value,\n}: CommandPaletteItemProps): CommandPaletteCommand {\n const resolvedPage = page ?? command?.page;\n const resolvedHref = href ?? command?.href;\n\n const resolvedCommand: CommandPaletteCommand = {\n ...command,\n destructive: destructive ?? command?.destructive,\n disabled: disabled ?? command?.disabled,\n disabledReason: disabledReason ?? command?.disabledReason,\n href: resolvedHref,\n key: value,\n label: command?.label ?? value,\n page: resolvedPage,\n rel: rel ?? command?.rel,\n shortcut: shortcut ?? command?.shortcut,\n target: target ?? command?.target,\n type:\n command?.type ??\n (resolvedPage ? \"page\" : resolvedHref ? \"link\" : \"action\"),\n };\n\n if (command?.action) {\n resolvedCommand.action = command.action;\n } else if (onAction) {\n resolvedCommand.action = onAction;\n }\n\n return resolvedCommand;\n}\n\nfunction useControllablePageStack({\n defaultValue,\n onChange,\n value,\n}: {\n defaultValue: CommandPaletteValue[];\n onChange?: (\n value: CommandPaletteValue[],\n context: CommandPalettePageStackChangeContext,\n ) => void;\n value?: CommandPaletteValue[];\n}) {\n const [uncontrolledValue, setUncontrolledValue] =\n useState(defaultValue);\n const controlled = value !== undefined;\n const resolvedValue = controlled ? value : uncontrolledValue;\n const setValue = useCallback(\n (\n nextValue: CommandPaletteValue[],\n context: CommandPalettePageStackChangeContext,\n ) => {\n if (!controlled) {\n setUncontrolledValue(nextValue);\n }\n\n onChange?.(nextValue, context);\n },\n [controlled, onChange],\n );\n\n return [resolvedValue, setValue] as const;\n}\n\nfunction useControllableString({\n defaultValue,\n onChange,\n value,\n}: {\n defaultValue: string;\n onChange?: (value: string) => void;\n value?: string;\n}) {\n const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n const controlled = value !== undefined;\n const resolvedValue = controlled ? value : uncontrolledValue;\n const setValue = useCallback(\n (nextValue: string) => {\n if (!controlled) {\n setUncontrolledValue(nextValue);\n }\n\n onChange?.(nextValue);\n },\n [controlled, onChange],\n );\n\n return [resolvedValue, setValue] as const;\n}\n\nfunction useControllableKey({\n defaultValue,\n onChange,\n value,\n}: {\n defaultValue: CommandPaletteValue | null;\n onChange?: (value: CommandPaletteValue | null) => void;\n value?: CommandPaletteValue | null;\n}) {\n const [uncontrolledValue, setUncontrolledValue] =\n useState(defaultValue);\n const controlled = value !== undefined;\n const resolvedValue = controlled ? value : uncontrolledValue;\n const setValue = useCallback(\n (nextValue: CommandPaletteValue | null) => {\n if (!controlled) {\n setUncontrolledValue(nextValue);\n }\n\n onChange?.(nextValue);\n },\n [controlled, onChange],\n );\n\n return [resolvedValue, setValue] as const;\n}\n\nexport const CommandPalette = forwardRef(\n (\n {\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n announcements = true,\n asyncCommands,\n children,\n className,\n clearQueryOnPageChange = true,\n closeOnRun,\n commands: commandsProp,\n controlSize = \"md\",\n defaultPageStack = [],\n defaultQuery = \"\",\n defaultSelectedKey = null,\n description,\n emptyMessage = \"No commands found.\",\n error,\n filter,\n label,\n limit,\n loading = false,\n loadingMessage = \"Searching commands...\",\n minimumQueryLength = 0,\n minimumQueryMessage,\n motionPreset: motionPresetProp,\n onCommandRun,\n onKeyDownCapture,\n onPageStackChange,\n onQueryChange,\n onRetry,\n onSelectedKeyChange,\n pageBackLabel = \"Back\",\n pageStack,\n pages,\n placeholder = \"Type a command or search...\",\n query,\n recentCommands,\n reducedMotion: reducedMotionProp,\n retryLabel = \"Retry\",\n selectedKey,\n shouldFilter = true,\n sort,\n stale = false,\n staleMessage = \"Showing previous results while updating.\",\n suggestedCommands,\n ...props\n },\n ref,\n ) => {\n const dialogActionContext = useContext(CommandPaletteDialogActionContext);\n const dialogConfigContext = useContext(CommandPaletteDialogConfigContext);\n const prefersReducedMotion = useReducedMotion();\n const generatedInputId = useId();\n const generatedLabelId = useId();\n const inputId = `${generatedInputId}-input`;\n const labelId = label ? `${generatedLabelId}-label` : undefined;\n const pageTitleId = `${generatedLabelId}-page-title`;\n const selectedIndicatorLayoutId = `${generatedLabelId}-selected-indicator`;\n const resolvedMotionPreset =\n motionPresetProp ?? dialogConfigContext?.motionPreset ?? \"standard\";\n const resolvedReducedMotion =\n reducedMotionProp ??\n dialogConfigContext?.reducedMotion ??\n prefersReducedMotion === true;\n const motionEnabled = shouldEnableCommandPaletteMotion({\n motionPreset: resolvedMotionPreset,\n reducedMotion: resolvedReducedMotion,\n });\n const motionSettings =\n getCommandPaletteMotionSettings(resolvedMotionPreset);\n const itemRefs = useRef(new Map());\n const pagesById = useMemo(\n () =>\n new Map(\n (pages ?? []).map((pageDefinition) => [\n pageDefinition.id,\n pageDefinition,\n ]),\n ),\n [pages],\n );\n const [resolvedPageStack, setResolvedPageStack] = useControllablePageStack({\n defaultValue: defaultPageStack,\n onChange: onPageStackChange,\n value: pageStack,\n });\n const activePageId = resolvedPageStack[resolvedPageStack.length - 1];\n const activePage = activePageId ? pagesById.get(activePageId) : undefined;\n const activePageTitleText = getPageTitleText(activePage) ?? activePageId;\n const [pageDirection, setPageDirection] =\n useState(\"none\");\n const previousPageDepthRef = useRef(resolvedPageStack.length);\n const [resolvedQuery, setResolvedQuery] = useControllableString({\n defaultValue: defaultQuery,\n onChange: onQueryChange,\n value: query,\n });\n useEffect(() => {\n const previousDepth = previousPageDepthRef.current;\n const nextDepth = resolvedPageStack.length;\n\n if (nextDepth !== previousDepth) {\n setPageDirection(\n nextDepth > previousDepth\n ? \"forward\"\n : nextDepth < previousDepth\n ? \"back\"\n : \"none\",\n );\n previousPageDepthRef.current = nextDepth;\n }\n }, [resolvedPageStack.length]);\n\n const baseCommands =\n activePageId !== undefined\n ? (activePage?.commands ?? emptyCommands)\n : (commandsProp ?? emptyCommands);\n const resolvedAsyncCommands =\n activePageId !== undefined ? activePage?.asyncCommands : asyncCommands;\n const resolvedRecentCommands =\n activePageId !== undefined ? activePage?.recentCommands : recentCommands;\n const resolvedSuggestedCommands =\n activePageId !== undefined\n ? activePage?.suggestedCommands\n : suggestedCommands;\n const resolvedLoading =\n activePageId !== undefined ? activePage?.loading === true : loading;\n const resolvedError =\n activePageId !== undefined ? activePage?.error : error;\n const resolvedOnRetry =\n activePageId !== undefined ? activePage?.onRetry : onRetry;\n const resolvedRetryLabel =\n activePageId !== undefined\n ? (activePage?.retryLabel ?? retryLabel)\n : retryLabel;\n const resolvedEmptyMessage =\n activePageId !== undefined\n ? (activePage?.emptyMessage ?? emptyMessage)\n : emptyMessage;\n const resolvedLoadingMessage =\n activePageId !== undefined\n ? (activePage?.loadingMessage ?? loadingMessage)\n : loadingMessage;\n const resolvedStale =\n activePageId !== undefined ? activePage?.stale === true : stale;\n const resolvedStaleMessage =\n activePageId !== undefined\n ? (activePage?.staleMessage ?? staleMessage)\n : staleMessage;\n const resolvedMinimumQueryLength =\n activePageId !== undefined\n ? (activePage?.minimumQueryLength ?? 0)\n : minimumQueryLength;\n const resolvedMinimumQueryMessageProp =\n activePageId !== undefined\n ? activePage?.minimumQueryMessage\n : minimumQueryMessage;\n const resolvedFilter = activePage?.filter ?? filter;\n const resolvedLimit = activePage?.limit ?? limit;\n const resolvedShouldFilter = activePage?.shouldFilter ?? shouldFilter;\n const resolvedSort = activePage?.sort ?? sort;\n const activeCommandSource: CommandPaletteCommandSource =\n activePageId !== undefined ? \"page\" : \"base\";\n const hasDataCommands =\n commandsProp !== undefined ||\n recentCommands !== undefined ||\n suggestedCommands !== undefined ||\n asyncCommands !== undefined ||\n activePageId !== undefined;\n const normalizedQuery = resolvedQuery.trim();\n const showMinimumQuery =\n resolvedMinimumQueryLength > 0 &&\n normalizedQuery.length > 0 &&\n normalizedQuery.length < resolvedMinimumQueryLength;\n const sourceCommands = useMemo(\n () =>\n getCommandPaletteSourceCommands({\n asyncCommands: resolvedAsyncCommands,\n commandSource: activeCommandSource,\n commands: baseCommands,\n minimumQueryLength: resolvedMinimumQueryLength,\n query: resolvedQuery,\n recentCommands: resolvedRecentCommands,\n suggestedCommands: resolvedSuggestedCommands,\n }),\n [\n activeCommandSource,\n baseCommands,\n resolvedAsyncCommands,\n resolvedMinimumQueryLength,\n resolvedRecentCommands,\n resolvedQuery,\n resolvedSuggestedCommands,\n ],\n );\n const filteredCommands = useMemo(\n () =>\n getCommandPaletteFilteredCommands(sourceCommands, {\n filter: resolvedFilter,\n limit: resolvedLimit,\n query: resolvedQuery,\n shouldFilter: resolvedShouldFilter,\n sort: resolvedSort,\n }),\n [\n resolvedFilter,\n resolvedLimit,\n resolvedQuery,\n resolvedShouldFilter,\n resolvedSort,\n sourceCommands,\n ],\n );\n const resultCommands = useMemo(\n () => filteredCommands.filter((command) => command.type !== \"separator\"),\n [filteredCommands],\n );\n const hasError =\n resolvedError !== undefined &&\n resolvedError !== null &&\n resolvedError !== false;\n const hasStaleResults =\n resolvedStale || (resolvedLoading && resultCommands.length > 0);\n const resolvedMinimumQueryMessage =\n resolvedMinimumQueryMessageProp ??\n `Type at least ${resolvedMinimumQueryLength} ${\n resolvedMinimumQueryLength === 1 ? \"character\" : \"characters\"\n } to search.`;\n const shouldRenderEmpty =\n hasDataCommands &&\n resultCommands.length === 0 &&\n !hasError &&\n !resolvedLoading &&\n !showMinimumQuery;\n const enabledKeys = useMemo(\n () =>\n filteredCommands\n .filter(isSelectableCommand)\n .map((command) => command.key),\n [filteredCommands],\n );\n const [resolvedSelectedKey, setResolvedSelectedKey] = useControllableKey({\n defaultValue: defaultSelectedKey,\n onChange: onSelectedKeyChange,\n value: selectedKey,\n });\n const activeCommand =\n filteredCommands.find((command) => command.key === resolvedSelectedKey) ??\n null;\n const groups = useMemo(\n () => groupCommands(filteredCommands),\n [filteredCommands],\n );\n const [runAnnouncement, setRunAnnouncement] = useState(\"\");\n const [pageAnnouncement, setPageAnnouncement] = useState(\"\");\n const compoundChildren =\n !hasDataCommands && typeof children !== \"function\" && children != null;\n const renderedChildren = hasDataCommands\n ? groups.map((group, index) => (\n command.type !== \"separator\")\n ?.source\n }\n >\n {index > 0 ? : null}\n \n \n {group.commands.map((command, commandIndex) =>\n command.type === \"separator\" ? (\n \n ) : (\n \n \n {typeof children === \"function\"\n ? children(command)\n : renderDefaultCommandContent(command)}\n \n \n ),\n )}\n \n \n \n ))\n : typeof children === \"function\"\n ? null\n : children;\n\n const clearTransientAnnouncements = useCallback(() => {\n setPageAnnouncement(\"\");\n setRunAnnouncement(\"\");\n }, []);\n const registerItem = useCallback(\n (key: CommandPaletteValue, element: HTMLElement) => {\n itemRefs.current.set(key, element);\n },\n [],\n );\n const unregisterItem = useCallback(\n (key: CommandPaletteValue, element: HTMLElement) => {\n if (itemRefs.current.get(key) === element) {\n itemRefs.current.delete(key);\n }\n },\n [],\n );\n const updateQuery = useCallback(\n (nextQuery: string) => {\n clearTransientAnnouncements();\n setResolvedQuery(nextQuery);\n },\n [clearTransientAnnouncements, setResolvedQuery],\n );\n const updateSelectedKey = useCallback(\n (nextKey: CommandPaletteValue | null) => {\n clearTransientAnnouncements();\n setResolvedSelectedKey(nextKey);\n },\n [clearTransientAnnouncements, setResolvedSelectedKey],\n );\n\n const updatePageStack = useCallback(\n (\n nextPageStack: CommandPaletteValue[],\n reason: CommandPalettePageStackChangeReason,\n ) => {\n const nextActivePage = nextPageStack[nextPageStack.length - 1];\n const direction =\n nextPageStack.length > resolvedPageStack.length\n ? \"forward\"\n : nextPageStack.length < resolvedPageStack.length\n ? \"back\"\n : \"none\";\n\n setPageDirection(direction);\n setRunAnnouncement(\"\");\n setResolvedPageStack(nextPageStack, {\n activePage: nextActivePage,\n direction,\n previousPage: activePageId,\n reason,\n });\n setResolvedSelectedKey(null);\n\n if (clearQueryOnPageChange) {\n setResolvedQuery(\"\");\n }\n\n const nextPage = nextActivePage\n ? pagesById.get(nextActivePage)\n : undefined;\n const nextPageTitle = getPageTitleText(nextPage) ?? nextActivePage;\n\n if (reason === \"push\" && nextPageTitle) {\n setPageAnnouncement(`Opened ${nextPageTitle}.`);\n } else if (nextPageTitle) {\n setPageAnnouncement(`Returned to ${nextPageTitle}.`);\n } else {\n setPageAnnouncement(\"Returned to root commands.\");\n }\n },\n [\n activePageId,\n clearQueryOnPageChange,\n pagesById,\n resolvedPageStack.length,\n setResolvedPageStack,\n setResolvedQuery,\n setResolvedSelectedKey,\n ],\n );\n\n const pushPage = useCallback(\n (pageId: CommandPaletteValue) => {\n if (!pagesById.has(pageId)) {\n return;\n }\n\n updatePageStack([...resolvedPageStack, pageId], \"push\");\n },\n [pagesById, resolvedPageStack, updatePageStack],\n );\n\n const popPage = useCallback(() => {\n if (resolvedPageStack.length === 0) {\n return;\n }\n\n updatePageStack(resolvedPageStack.slice(0, -1), \"back\");\n }, [resolvedPageStack, updatePageStack]);\n\n const runCommand = useCallback(\n (command: CommandPaletteCommand) => {\n if (command.disabled || command.type === \"separator\") {\n return;\n }\n\n if (command.type === \"page\") {\n if (command.page) {\n pushPage(command.page);\n }\n\n return;\n }\n\n const shouldClose =\n command.closeOnRun ?? closeOnRun ?? dialogActionContext?.closeOnRun;\n const runContext: CommandPaletteCommandRunContext = {\n close: dialogActionContext?.close,\n closeOnRun: shouldClose === true,\n page: activePageId,\n pageStack: resolvedPageStack,\n query: resolvedQuery,\n source: command.source,\n };\n\n command.action?.(command, runContext);\n onCommandRun?.(command, runContext);\n setRunAnnouncement(`Ran ${getCommandText(command)}.`);\n\n if (shouldClose) {\n dialogActionContext?.close();\n }\n },\n [\n activePageId,\n closeOnRun,\n dialogActionContext,\n onCommandRun,\n pushPage,\n resolvedPageStack,\n resolvedQuery,\n ],\n );\n\n const getNavigationKeys = useCallback(() => {\n if (hasDataCommands) {\n return enabledKeys;\n }\n\n return Array.from(itemRefs.current.keys());\n }, [enabledKeys, hasDataCommands]);\n\n const selectByOffset = useCallback(\n (offset: number) => {\n const navigationKeys = getNavigationKeys();\n\n if (navigationKeys.length === 0) {\n return;\n }\n\n const currentIndex = resolvedSelectedKey\n ? navigationKeys.indexOf(resolvedSelectedKey)\n : -1;\n if (currentIndex === -1) {\n clearTransientAnnouncements();\n setResolvedSelectedKey(\n offset >= 0\n ? (navigationKeys[0] ?? null)\n : (navigationKeys[navigationKeys.length - 1] ?? null),\n );\n return;\n }\n\n const startIndex = currentIndex;\n const nextIndex =\n (startIndex + offset + navigationKeys.length) % navigationKeys.length;\n\n clearTransientAnnouncements();\n setResolvedSelectedKey(navigationKeys[nextIndex] ?? null);\n },\n [\n clearTransientAnnouncements,\n getNavigationKeys,\n resolvedSelectedKey,\n setResolvedSelectedKey,\n ],\n );\n\n const handleInputKeyDown = useCallback<\n KeyboardEventHandler\n >(\n (event) => {\n const navigationKeys = getNavigationKeys();\n\n if (event.key === \"ArrowDown\") {\n event.preventDefault();\n selectByOffset(1);\n } else if (event.key === \"ArrowUp\") {\n event.preventDefault();\n selectByOffset(-1);\n } else if (event.key === \"Home\" && navigationKeys.length > 0) {\n event.preventDefault();\n updateSelectedKey(navigationKeys[0] ?? null);\n } else if (event.key === \"End\" && navigationKeys.length > 0) {\n event.preventDefault();\n updateSelectedKey(navigationKeys[navigationKeys.length - 1] ?? null);\n } else if (event.key === \"Enter\" && resolvedSelectedKey) {\n const element = itemRefs.current.get(resolvedSelectedKey);\n\n if (element) {\n event.preventDefault();\n element.click();\n }\n } else if (event.key === \"Escape\") {\n if (resolvedPageStack.length > 0) {\n event.preventDefault();\n popPage();\n } else if (!dialogActionContext && resolvedQuery) {\n event.preventDefault();\n updateQuery(\"\");\n }\n }\n },\n [\n dialogActionContext,\n getNavigationKeys,\n popPage,\n resolvedPageStack.length,\n resolvedQuery,\n resolvedSelectedKey,\n selectByOffset,\n updateQuery,\n updateSelectedKey,\n ],\n );\n\n const handleRootKeyDownCapture = useCallback<\n KeyboardEventHandler\n >(\n (event) => {\n onKeyDownCapture?.(event);\n\n if (\n !event.defaultPrevented &&\n event.key === \"Escape\" &&\n resolvedPageStack.length > 0\n ) {\n event.preventDefault();\n event.stopPropagation();\n popPage();\n }\n },\n [onKeyDownCapture, popPage, resolvedPageStack.length],\n );\n\n useEffect(() => {\n if (!hasDataCommands) {\n return;\n }\n\n if (enabledKeys.length === 0) {\n if (resolvedSelectedKey !== null) {\n setResolvedSelectedKey(null);\n }\n\n return;\n }\n\n if (!resolvedSelectedKey || !enabledKeys.includes(resolvedSelectedKey)) {\n setResolvedSelectedKey(enabledKeys[0] ?? null);\n }\n }, [\n enabledKeys,\n hasDataCommands,\n resolvedSelectedKey,\n setResolvedSelectedKey,\n ]);\n\n const resolvedAriaLabel =\n ariaLabel ?? (label || ariaLabelledBy ? undefined : \"Command palette\");\n const rootRole =\n props.role ?? (resolvedAriaLabel || ariaLabelledBy ? \"group\" : undefined);\n const statusAnnouncement = (() => {\n if (!hasDataCommands) {\n return undefined;\n }\n\n if (hasError) {\n return `${getNodeText(resolvedError) ?? \"Command search failed.\"}${\n resolvedOnRetry ? \" Retry available.\" : \"\"\n }`;\n }\n\n if (showMinimumQuery) {\n return getNodeText(resolvedMinimumQueryMessage);\n }\n\n if (resolvedLoading && resultCommands.length === 0) {\n return getNodeText(resolvedLoadingMessage);\n }\n\n if (resultCommands.length === 0) {\n return getNodeText(resolvedEmptyMessage);\n }\n\n return `${formatCommandCount(resultCommands.length)} available${\n normalizedQuery ? ` for ${normalizedQuery}` : \"\"\n }${activePageTitleText ? ` in ${activePageTitleText}` : \"\"}.`;\n })();\n const selectedAnnouncement =\n activeCommand && hasDataCommands\n ? `Selected ${getCommandText(activeCommand)}${\n formatSourceLabel(activeCommand.source)\n ? ` from ${formatSourceLabel(activeCommand.source)}`\n : \"\"\n }.`\n : undefined;\n const visibleStatusAnnouncesStatus =\n hasError ||\n showMinimumQuery ||\n (resolvedLoading && resultCommands.length === 0) ||\n shouldRenderEmpty;\n const liveStatusAnnouncement = visibleStatusAnnouncesStatus\n ? undefined\n : statusAnnouncement;\n const liveAnnouncement = announcements\n ? [\n pageAnnouncement,\n liveStatusAnnouncement,\n selectedAnnouncement,\n runAnnouncement,\n ]\n .filter(Boolean)\n .join(\" \")\n : \"\";\n\n const contextValue = useMemo(\n () => ({\n activeCommand,\n controlSize,\n inputAriaLabel: resolvedAriaLabel,\n inputId,\n labelId,\n motionEnabled,\n motionPreset: resolvedMotionPreset,\n reducedMotion: resolvedReducedMotion,\n selectedIndicatorLayoutId,\n onInputKeyDown: handleInputKeyDown,\n page: activePageId,\n pageDirection,\n pageStack: resolvedPageStack,\n popPage,\n query: resolvedQuery,\n registerItem,\n runCommand,\n selectedKey: resolvedSelectedKey,\n setQuery: updateQuery,\n setSelectedKey: updateSelectedKey,\n unregisterItem,\n }),\n [\n activeCommand,\n activePageId,\n controlSize,\n handleInputKeyDown,\n resolvedAriaLabel,\n inputId,\n labelId,\n motionEnabled,\n pageDirection,\n popPage,\n registerItem,\n resolvedMotionPreset,\n resolvedReducedMotion,\n resolvedPageStack,\n resolvedQuery,\n resolvedSelectedKey,\n runCommand,\n selectedIndicatorLayoutId,\n unregisterItem,\n updateQuery,\n updateSelectedKey,\n ],\n );\n\n const pageFrame = (\n \n {activePageId ? (\n \n \n {pageBackLabel}\n \n \n \n {activePage?.title ?? activePageId}\n \n {activePage?.description ? (\n \n {activePage.description}\n \n ) : null}\n \n \n ) : null}\n \n {showMinimumQuery ? (\n \n {resolvedMinimumQueryMessage}\n \n ) : null}\n {renderedChildren}\n {hasError ? (\n \n {resolvedError}\n {resolvedOnRetry ? (\n \n {resolvedRetryLabel}\n \n ) : null}\n \n ) : resolvedLoading && resultCommands.length === 0 ? (\n \n {resolvedLoadingMessage}\n \n ) : resolvedLoading ? (\n \n {resolvedStaleMessage}\n \n ) : null}\n {shouldRenderEmpty ? (\n {resolvedEmptyMessage}\n ) : null}\n \n \n );\n\n return (\n \n \n \n {compoundChildren ? (\n renderedChildren\n ) : (\n <>\n \n {label ? (\n \n {label}\n \n ) : null}\n {description ? (\n \n {description}\n

\n ) : null}\n {/* eslint-disable jsx-a11y/no-autofocus -- Initial focus belongs in this newly opened modal. */}\n \n {/* eslint-enable jsx-a11y/no-autofocus */}\n \n \n {motionEnabled ? (\n \n {pageFrame}\n \n ) : (\n pageFrame\n )}\n \n {liveAnnouncement ? (\n \n {liveAnnouncement}\n \n ) : null}\n \n )}\n \n \n \n );\n },\n);\n\nCommandPalette.displayName = \"CommandPalette\";\n\nexport const CommandPaletteDialog = forwardRef<\n HTMLDivElement,\n CommandPaletteDialogProps\n>(\n (\n {\n children,\n className,\n closeOnRun = true,\n \"data-slot\": dataSlot,\n motionPreset = \"standard\",\n reducedMotion,\n ...props\n },\n ref,\n ) => {\n const configValue = useMemo(\n () => ({ closeOnRun, motionPreset, reducedMotion }),\n [closeOnRun, motionPreset, reducedMotion],\n );\n\n return (\n \n \n {children}\n \n \n );\n },\n);\n\nCommandPaletteDialog.displayName = \"CommandPaletteDialog\";\n\nexport const CommandPaletteTrigger = forwardRef<\n HTMLButtonElement,\n CommandPaletteTriggerProps\n>(({ className, size = \"md\", variant = \"solid\", ...props }, ref) => (\n \n));\n\nCommandPaletteTrigger.displayName = \"CommandPaletteTrigger\";\n\nexport const CommandPaletteContent = forwardRef<\n HTMLDivElement,\n CommandPaletteContentProps\n>(\n (\n {\n children,\n className,\n closeOnRun,\n description,\n motionPreset: motionPresetProp,\n overlayClassName,\n reducedMotion: reducedMotionProp,\n scrollBehavior = \"inside\",\n size = \"lg\",\n title,\n titleVisuallyHidden = true,\n ...props\n },\n ref,\n ) => {\n const dialogConfig = useContext(CommandPaletteDialogConfigContext);\n const prefersReducedMotion = useReducedMotion();\n const fallbackAriaLabel =\n title || props[\"aria-label\"] || props[\"aria-labelledby\"]\n ? undefined\n : \"Command menu\";\n const resolvedCloseOnRun = closeOnRun ?? dialogConfig?.closeOnRun ?? true;\n const resolvedMotionPreset =\n motionPresetProp ?? dialogConfig?.motionPreset ?? \"standard\";\n const resolvedReducedMotion =\n reducedMotionProp ??\n dialogConfig?.reducedMotion ??\n prefersReducedMotion === true;\n\n return (\n \n {(opts) => {\n const actionContextValue: CommandPaletteDialogActionContextValue = {\n close: opts.close,\n closeOnRun: resolvedCloseOnRun,\n };\n const renderedChildren =\n typeof children === \"function\" ? children(opts) : children;\n\n return (\n \n \n {title ? (\n \n {title}\n \n ) : null}\n {description ? (\n \n {description}\n \n ) : null}\n {renderedChildren}\n \n \n );\n }}\n \n );\n },\n);\n\nCommandPaletteContent.displayName = \"CommandPaletteContent\";\n\nexport const CommandPaletteInput = forwardRef<\n HTMLInputElement,\n CommandPaletteInputProps\n>(\n (\n {\n \"aria-labelledby\": ariaLabelledBy,\n className,\n controlSize,\n onChange,\n onKeyDown,\n type = \"search\",\n value,\n ...props\n },\n ref,\n ) => {\n const context = useContext(CommandPaletteContext);\n const resolvedControlSize = controlSize ?? context?.controlSize ?? \"md\";\n const handleChange: ChangeEventHandler = (event) => {\n onChange?.(event);\n\n if (!event.defaultPrevented && value === undefined) {\n context?.setQuery(event.currentTarget.value);\n }\n };\n const handleKeyDown: KeyboardEventHandler = (event) => {\n onKeyDown?.(event);\n\n if (!event.defaultPrevented) {\n context?.onInputKeyDown(event);\n }\n };\n\n return (\n \n );\n },\n);\n\nCommandPaletteInput.displayName = \"CommandPaletteInput\";\n\nexport const CommandPaletteList = forwardRef<\n HTMLDivElement,\n CommandPaletteListProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteList.displayName = \"CommandPaletteList\";\n\nexport const CommandPaletteGroup = forwardRef<\n HTMLElement,\n CommandPaletteGroupProps\n>(({ children, className, heading, ...props }, ref) => {\n const headingId = useId();\n\n return (\n \n {heading ? (\n \n {heading}\n \n ) : null}\n {children}\n \n );\n});\n\nCommandPaletteGroup.displayName = \"CommandPaletteGroup\";\n\nexport const CommandPaletteItem = forwardRef<\n HTMLElement,\n CommandPaletteItemProps\n>(\n (\n {\n asChild = false,\n children,\n className,\n command,\n destructive,\n disabled,\n disabledReason,\n href,\n onAction,\n onClick,\n page,\n rel,\n shortcut,\n target,\n value,\n ...props\n },\n ref,\n ) => {\n const context = useContext(CommandPaletteContext);\n const resolvedCommand = commandFromItemProps({\n command,\n destructive,\n disabled,\n disabledReason,\n href,\n onAction,\n page,\n rel,\n shortcut,\n target,\n value,\n });\n const resolvedDisabled = resolvedCommand.disabled === true;\n const resolvedDestructive = resolvedCommand.destructive === true;\n const selected = context?.selectedKey === value;\n const registeredNodeRef = useRef(null);\n const itemRef = useCallback(\n (node: HTMLElement | null) => {\n const previousNode = registeredNodeRef.current;\n\n if (previousNode && previousNode !== node) {\n context?.unregisterItem(value, previousNode);\n registeredNodeRef.current = null;\n }\n\n if (node && !resolvedDisabled) {\n context?.registerItem(value, node);\n registeredNodeRef.current = node;\n }\n },\n [context, resolvedDisabled, value],\n );\n const composedRef = composeRefs(ref, itemRef);\n const classes = commandPaletteItemClassNames({\n className: cn(\"group/command-palette-item\", className),\n controlSize: context?.controlSize,\n });\n const handleClick: MouseEventHandler = (event) => {\n if (resolvedDisabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n (onClick as MouseEventHandler | undefined)?.(event);\n\n if (!event.defaultPrevented) {\n context?.runCommand(resolvedCommand);\n }\n };\n const handleMouseEnter: MouseEventHandler = (event) => {\n props.onMouseEnter?.(event);\n\n if (!event.defaultPrevented && !resolvedDisabled) {\n context?.setSelectedKey(value);\n }\n };\n const handleFocus: FocusEventHandler = (event) => {\n props.onFocus?.(event);\n\n if (!event.defaultPrevented && !resolvedDisabled) {\n context?.setSelectedKey(value);\n }\n };\n const commonProps = {\n ...props,\n \"aria-disabled\": resolvedDisabled ? true : undefined,\n \"data-destructive\": resolvedDestructive ? \"true\" : undefined,\n \"data-disabled\": resolvedDisabled ? \"true\" : undefined,\n \"data-page\": resolvedCommand.page,\n \"data-selected\": selected ? \"true\" : undefined,\n \"data-slot\": \"command-palette-item\",\n \"data-source\": resolvedCommand.source,\n className: classes,\n onClick: handleClick,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n };\n\n if (asChild) {\n const child = Children.only(children);\n\n if (!isValidElement(child)) {\n throw new Error(\n \"CommandPaletteItem with asChild expects a single React element child.\",\n );\n }\n\n const resolvedHref = child.props.href ?? resolvedCommand.href;\n const resolvedTarget = child.props.target ?? resolvedCommand.target;\n const resolvedRel = mergeRelForTarget(\n child.props.rel ?? resolvedCommand.rel,\n resolvedTarget,\n );\n\n const clonedProps: CommandPaletteItemSlotProps = {\n ...commonProps,\n ...child.props,\n ref: (node) => {\n composeRefs(composedRef, getChildRef(child))(node);\n },\n className: cn(classes, child.props.className),\n onClick: composeEventHandlers(child.props.onClick, handleClick),\n onFocus: composeEventHandlers(child.props.onFocus, handleFocus),\n onMouseEnter: composeEventHandlers(\n child.props.onMouseEnter,\n handleMouseEnter,\n ),\n };\n\n if (resolvedHref !== undefined) {\n clonedProps.href = resolvedHref;\n }\n\n if (resolvedRel !== undefined) {\n clonedProps.rel = resolvedRel;\n }\n\n if (resolvedTarget !== undefined) {\n clonedProps.target = resolvedTarget;\n }\n\n return cloneElement(child, clonedProps);\n }\n\n if (resolvedCommand.href) {\n return (\n )}\n ref={composedRef as Ref}\n href={resolvedCommand.href}\n rel={mergeRelForTarget(resolvedCommand.rel, resolvedCommand.target)}\n target={resolvedCommand.target}\n >\n {selected ? : null}\n {children ?? renderDefaultCommandContent(resolvedCommand)}\n \n );\n }\n\n return (\n )}\n ref={composedRef as Ref}\n disabled={resolvedDisabled}\n type=\"button\"\n >\n {selected ? : null}\n {children ?? renderDefaultCommandContent(resolvedCommand)}\n \n );\n },\n);\n\nCommandPaletteItem.displayName = \"CommandPaletteItem\";\n\nexport const CommandPaletteItemIcon = forwardRef<\n HTMLSpanElement,\n CommandPaletteItemIconProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteItemIcon.displayName = \"CommandPaletteItemIcon\";\n\nexport const CommandPaletteItemLabel = forwardRef<\n HTMLSpanElement,\n CommandPaletteItemLabelProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteItemLabel.displayName = \"CommandPaletteItemLabel\";\n\nexport const CommandPaletteItemDescription = forwardRef<\n HTMLSpanElement,\n CommandPaletteItemDescriptionProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteItemDescription.displayName = \"CommandPaletteItemDescription\";\n\nexport const CommandPaletteItemShortcut = forwardRef<\n HTMLElement,\n CommandPaletteItemShortcutProps\n>(({ className, ...props }, ref) => (\n }\n data-slot=\"command-palette-item-shortcut\"\n className={cn(commandPaletteItemShortcutClasses, className)}\n />\n));\n\nCommandPaletteItemShortcut.displayName = \"CommandPaletteItemShortcut\";\n\nexport const CommandPaletteSeparator = forwardRef<\n HTMLDivElement,\n CommandPaletteSeparatorProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteSeparator.displayName = \"CommandPaletteSeparator\";\n\nexport const CommandPaletteStatus = forwardRef<\n HTMLDivElement,\n CommandPaletteStatusProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteStatus.displayName = \"CommandPaletteStatus\";\n\nexport const CommandPaletteLoading = forwardRef<\n HTMLDivElement,\n CommandPaletteLoadingProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteLoading.displayName = \"CommandPaletteLoading\";\n\nexport const CommandPaletteError = forwardRef<\n HTMLDivElement,\n CommandPaletteErrorProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteError.displayName = \"CommandPaletteError\";\n\nexport const CommandPaletteRetry = forwardRef<\n HTMLButtonElement,\n CommandPaletteRetryProps\n>(({ className, type = \"button\", ...props }, ref) => (\n \n));\n\nCommandPaletteRetry.displayName = \"CommandPaletteRetry\";\n\nexport const CommandPaletteAnnouncer = forwardRef<\n HTMLDivElement,\n CommandPaletteAnnouncerProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteAnnouncer.displayName = \"CommandPaletteAnnouncer\";\n\nexport const CommandPalettePageStack = forwardRef<\n HTMLDivElement,\n CommandPalettePageStackProps\n>(\n (\n {\n className,\n \"data-page\": dataPage,\n \"data-page-depth\": dataPageDepth,\n \"data-page-direction\": dataPageDirection,\n ...props\n },\n ref,\n ) => {\n const context = useContext(CommandPaletteContext);\n\n return (\n \n );\n },\n);\n\nCommandPalettePageStack.displayName = \"CommandPalettePageStack\";\n\nexport const CommandPalettePage = forwardRef<\n HTMLElement,\n CommandPalettePageProps\n>(\n (\n {\n className,\n \"data-page\": dataPage,\n \"data-page-depth\": dataPageDepth,\n \"data-page-direction\": dataPageDirection,\n ...props\n },\n ref,\n ) => {\n const context = useContext(CommandPaletteContext);\n\n return (\n \n );\n },\n);\n\nCommandPalettePage.displayName = \"CommandPalettePage\";\n\nexport const CommandPalettePageHeader = forwardRef<\n HTMLElement,\n CommandPalettePageHeaderProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPalettePageHeader.displayName = \"CommandPalettePageHeader\";\n\nexport const CommandPalettePageBack = forwardRef<\n HTMLButtonElement,\n CommandPalettePageBackProps\n>(({ className, disabled, onClick, type = \"button\", ...props }, ref) => {\n const context = useContext(CommandPaletteContext);\n const resolvedDisabled =\n disabled ?? (context ? context.pageStack.length === 0 : false);\n const handleClick: MouseEventHandler = (event) => {\n onClick?.(event);\n\n if (!event.defaultPrevented && !resolvedDisabled) {\n context?.popPage();\n }\n };\n\n return (\n \n );\n});\n\nCommandPalettePageBack.displayName = \"CommandPalettePageBack\";\n\nexport const CommandPaletteEmpty = forwardRef<\n HTMLDivElement,\n CommandPaletteEmptyProps\n>(({ className, ...props }, ref) => (\n \n));\n\nCommandPaletteEmpty.displayName = \"CommandPaletteEmpty\";\n" }, { "path": "packages/components/src/components/command-palette/index.ts", "type": "registry:file", "target": "~/components/dethink/components/command-palette/index.ts", "content": "export {\n CommandPalette,\n CommandPaletteAnnouncer,\n CommandPaletteContent,\n CommandPaletteDialog,\n CommandPaletteEmpty,\n CommandPaletteError,\n CommandPaletteGroup,\n CommandPaletteInput,\n CommandPaletteItem,\n CommandPaletteItemDescription,\n CommandPaletteItemIcon,\n CommandPaletteItemLabel,\n CommandPaletteItemShortcut,\n CommandPaletteList,\n CommandPaletteLoading,\n CommandPalettePage,\n CommandPalettePageBack,\n CommandPalettePageHeader,\n CommandPalettePageStack,\n CommandPaletteRetry,\n CommandPaletteSeparator,\n CommandPaletteStatus,\n CommandPaletteTrigger,\n commandPaletteAnnouncerClassNames,\n commandPaletteClassNames,\n commandPaletteContentClassNames,\n commandPaletteDialogClassNames,\n commandPaletteEmptyClassNames,\n commandPaletteErrorClassNames,\n commandPaletteGroupClassNames,\n commandPaletteInputClassNames,\n commandPaletteItemClassNames,\n commandPaletteLoadingClassNames,\n commandPaletteListClassNames,\n commandPaletteOverlayClassNames,\n commandPalettePageBackClassNames,\n commandPalettePageClassNames,\n commandPalettePageHeaderClassNames,\n commandPalettePageStackClassNames,\n commandPaletteRetryClassNames,\n commandPaletteSeparatorClassNames,\n commandPaletteStatusClassNames,\n commandPaletteTriggerClassNames,\n defaultCommandPaletteFilter,\n getCommandPaletteFilteredCommands,\n getCommandPaletteSourceCommands,\n type CommandPaletteAnnouncerProps,\n type CommandPaletteCommand,\n type CommandPaletteCommandRunContext,\n type CommandPaletteCommandSource,\n type CommandPaletteCommandType,\n type CommandPaletteControlSize,\n type CommandPaletteContentProps,\n type CommandPaletteDialogProps,\n type CommandPaletteEmptyProps,\n type CommandPaletteErrorProps,\n type CommandPaletteFilter,\n type CommandPaletteGroupProps,\n type CommandPaletteInputProps,\n type CommandPaletteItemDescriptionProps,\n type CommandPaletteItemIconProps,\n type CommandPaletteItemLabelProps,\n type CommandPaletteItemProps,\n type CommandPaletteItemShortcutProps,\n type CommandPaletteListProps,\n type CommandPaletteLoadingProps,\n type CommandPaletteMotionPreset,\n type CommandPalettePageBackProps,\n type CommandPalettePageDefinition,\n type CommandPalettePageDirection,\n type CommandPalettePageHeaderProps,\n type CommandPalettePageProps,\n type CommandPalettePageStackChangeContext,\n type CommandPalettePageStackChangeReason,\n type CommandPalettePageStackProps,\n type CommandPaletteProps,\n type CommandPaletteRetryProps,\n type CommandPaletteSeparatorProps,\n type CommandPaletteSort,\n type CommandPaletteStatusProps,\n type CommandPaletteTriggerProps,\n type CommandPaletteValue,\n} from \"./command-palette\";\n" }, { "path": "packages/components/src/utils/cn.ts", "type": "registry:file", "target": "~/components/dethink/utils/cn.ts", "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n" } ] }