{"name":"command","type":"registry:ui","files":[{"path":"command.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Autocomplete as AutocompletePrimitive } from \"@base-ui/react/autocomplete\"\nimport { Dialog as DialogPrimitive } from \"@base-ui/react/dialog\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype CommandContextValue = {\n inputValue: string\n usesItemsProp: boolean\n}\n\nconst CommandContext = React.createContext(null)\n\nfunction useCommandContext() {\n const context = React.useContext(CommandContext)\n\n if (!context) {\n throw new Error(\"Command parts must be used within Command\")\n }\n\n return context\n}\n\nfunction getTextContent(node: React.ReactNode): string {\n return React.Children.toArray(node)\n .map((child) => {\n if (typeof child === \"string\" || typeof child === \"number\") {\n return String(child)\n }\n\n if (React.isValidElement<{ children?: React.ReactNode }>(child)) {\n return getTextContent(child.props.children)\n }\n\n return \"\"\n })\n .join(\" \")\n}\n\nfunction matchesSearch(\n value: unknown,\n children: React.ReactNode,\n query: string\n) {\n const searchableValue =\n typeof value === \"string\" ? value : getTextContent(children)\n\n return searchableValue\n .toLocaleLowerCase()\n .includes(query.trim().toLocaleLowerCase())\n}\n\ntype CommandProps = Omit<\n AutocompletePrimitive.Root.Props,\n \"items\"\n> & {\n className?: string\n items?: readonly ItemValue[]\n}\n\nfunction Command({\n value: controlledValue,\n defaultValue,\n onValueChange,\n items,\n inline = true,\n open = true,\n autoHighlight = \"always\",\n keepHighlight = true,\n className,\n children,\n ...props\n}: CommandProps) {\n const [uncontrolledValue, setUncontrolledValue] = React.useState(\n typeof defaultValue === \"string\" ? defaultValue : \"\"\n )\n const inputValue =\n typeof controlledValue === \"string\" ? controlledValue : uncontrolledValue\n\n const handleValueChange = React.useCallback<\n NonNullable[\"onValueChange\"]>\n >(\n (nextValue, eventDetails) => {\n if (controlledValue === undefined) {\n setUncontrolledValue(nextValue)\n }\n onValueChange?.(nextValue, eventDetails)\n },\n [controlledValue, onValueChange]\n )\n\n const context = React.useMemo(\n () => ({\n inputValue,\n usesItemsProp: items !== undefined,\n }),\n [inputValue, items]\n )\n\n return (\n \n \n inline={inline}\n open={open}\n autoHighlight={autoHighlight}\n keepHighlight={keepHighlight}\n value={controlledValue}\n defaultValue={defaultValue}\n onValueChange={handleValueChange}\n items={items}\n {...props}\n >\n \n {children}\n \n \n \n )\n}\n\ntype CommandInputProps = Omit & {\n leadingIcon?: React.ReactNode\n size?: \"sm\" | \"default\" | \"lg\"\n}\n\nfunction CommandInput({\n className,\n leadingIcon,\n size = \"lg\",\n placeholder = \"Search...\",\n autoFocus = true,\n \"aria-label\": ariaLabel = \"Search commands\",\n ...props\n}: CommandInputProps) {\n return (\n \n
\n {leadingIcon ? (\n \n {leadingIcon}\n \n ) : null}\n \n
\n \n )\n}\n\ntype CommandContentProps = AutocompletePrimitive.List.Props\n\nfunction CommandContent({ className, ...props }: CommandContentProps) {\n return (\n [data-slot=command-empty]]:hidden [&:not(:has([data-slot=command-group]))]:gap-[var(--hui-space-1)] [&:not(:has([data-slot=command-group]))]:py-[var(--hui-space-3)]\",\n className\n )}\n {...props}\n />\n )\n}\n\ntype CommandItemProps = AutocompletePrimitive.Item.Props & {\n leadingIcon?: React.ReactNode\n trailingIcon?: React.ReactNode\n}\n\nfunction CommandItem({\n className,\n children,\n value: providedValue,\n leadingIcon,\n trailingIcon,\n ...props\n}: CommandItemProps) {\n const { inputValue, usesItemsProp } = useCommandContext()\n const value =\n providedValue !== undefined\n ? providedValue\n : typeof children === \"string\"\n ? children\n : undefined\n\n if (\n !usesItemsProp &&\n inputValue &&\n !matchesSearch(value, children, inputValue)\n ) {\n return null\n }\n\n return (\n \n {leadingIcon ? (\n \n {leadingIcon}\n \n ) : null}\n \n {children}\n \n {trailingIcon ? (\n \n {trailingIcon}\n \n ) : null}\n \n )\n}\n\ntype CommandEmptyProps = React.ComponentProps<\"div\">\n\nfunction CommandEmpty({ className, ...props }: CommandEmptyProps) {\n return (\n \n )\n}\n\ntype CommandGroupProps = AutocompletePrimitive.Group.Props\n\nfunction CommandGroup({ children, className, ...props }: CommandGroupProps) {\n const { inputValue, usesItemsProp } = useCommandContext()\n\n if (!usesItemsProp && inputValue) return <>{children}\n\n return (\n \n {children}\n \n )\n}\n\ntype CommandLabelProps = AutocompletePrimitive.GroupLabel.Props\n\nfunction CommandLabel({ className, ...props }: CommandLabelProps) {\n const { inputValue, usesItemsProp } = useCommandContext()\n\n if (!usesItemsProp && inputValue) return null\n\n return (\n \n )\n}\n\ntype CommandSeparatorProps = AutocompletePrimitive.Separator.Props\n\nfunction CommandSeparator({ className, ...props }: CommandSeparatorProps) {\n const { inputValue, usesItemsProp } = useCommandContext()\n\n if (!usesItemsProp && inputValue) return null\n\n return (\n \n )\n}\n\nfunction CommandDialog(props: DialogPrimitive.Root.Props) {\n return \n}\n\nfunction CommandDialogTrigger(props: DialogPrimitive.Trigger.Props) {\n return (\n \n )\n}\n\ntype CommandDialogContentProps = DialogPrimitive.Popup.Props & {\n title?: string\n width?: React.CSSProperties[\"width\"]\n}\n\nfunction CommandDialogContent({\n className,\n children,\n title = \"Command palette\",\n width,\n style,\n ...props\n}: CommandDialogContentProps) {\n return (\n \n \n \n \n {title}\n \n {children}\n \n \n \n )\n}\n\nexport {\n Command,\n CommandContent,\n CommandDialog,\n CommandDialogContent,\n CommandDialogTrigger,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandLabel,\n CommandSeparator,\n}\n\nexport type {\n CommandContentProps,\n CommandDialogContentProps,\n CommandEmptyProps,\n CommandGroupProps,\n CommandInputProps,\n CommandItemProps,\n CommandLabelProps,\n CommandProps,\n CommandSeparatorProps,\n}\n","target":"components/ui/command.tsx"}],"dependencies":["@base-ui/react"]}