{"$schema":"https://ui.shadcn.com/schema/registry-item.json","author":"Eduardo Calvo <edu@smoothui.dev>","css":{},"dependencies":["cmdk","lucide-react","motion"],"description":"Command palette for SmoothUI — cmdk list inside SmoothUI Dialog.","devDependencies":[],"files":[{"content":"\"use client\";\n\nimport Dialog, { DialogDescription, DialogTitle } from \"@/components/smoothui/dialog\";\nimport { cn } from \"@/lib/utils\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { SearchIcon } from \"lucide-react\";\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  type RefObject,\n  useCallback,\n  useContext,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  type UseFluidHoverReturn,\n  useFluidHover,\n} from \"@/components/smoothui/lib/use-fluid-hover\";\nimport { FluidHoverHighlight } from \"../fluid-hover-highlight\";\n\nexport type CommandProps = ComponentProps<typeof CommandPrimitive>;\nexport type CommandInputProps = ComponentProps<typeof CommandPrimitive.Input>;\nexport type CommandListProps = ComponentProps<typeof CommandPrimitive.List>;\nexport type CommandEmptyProps = ComponentProps<typeof CommandPrimitive.Empty>;\nexport type CommandGroupProps = ComponentProps<typeof CommandPrimitive.Group>;\nexport type CommandItemProps = ComponentProps<typeof CommandPrimitive.Item>;\nexport type CommandSeparatorProps = ComponentProps<\n  typeof CommandPrimitive.Separator\n>;\nexport type CommandShortcutProps = ComponentProps<\"span\">;\n\nexport interface CommandDialogProps {\n  children?: ReactNode;\n  className?: string;\n  description?: string;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n  title?: string;\n  trigger?: ReactNode;\n}\n\ntype FluidHoverListContextValue = {\n  claimIndex: () => number;\n  registerItem: UseFluidHoverReturn[\"registerItem\"];\n};\n\nconst FluidHoverListContext = createContext<FluidHoverListContextValue | null>(\n  null\n);\n\n/**\n * SmoothUI Command — cmdk root. Compose with Dialog via CommandDialog.\n */\nexport default function Command({ className, ...props }: CommandProps) {\n  return (\n    <CommandPrimitive\n      className={cn(\n        \"overlay-surface flex w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        className\n      )}\n      data-slot=\"command\"\n      {...props}\n    />\n  );\n}\n\n/**\n * Command palette in a dialog. Title/description are screen-reader only\n * (same pattern as shadcn CommandDialog) so `p-0` chrome stays clean.\n */\nexport const CommandDialog = ({\n  children,\n  className,\n  description = \"Search for a command to run…\",\n  onOpenChange,\n  open,\n  title = \"Command Palette\",\n  trigger,\n}: CommandDialogProps) => (\n  <Dialog\n    className={cn(\"gap-0 overflow-hidden p-0 sm:max-w-lg\", className)}\n    onOpenChange={onOpenChange}\n    open={open}\n    showCloseButton={false}\n    trigger={trigger}\n  >\n    <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3\">\n      <DialogTitle className=\"sr-only\">{title}</DialogTitle>\n      <DialogDescription className=\"sr-only\">{description}</DialogDescription>\n      {children}\n    </Command>\n  </Dialog>\n);\n\nexport const CommandInput = ({ className, ...props }: CommandInputProps) => (\n  <div\n    className=\"flex h-10 items-center gap-2 border-foreground/10 border-b px-3\"\n    data-slot=\"command-input-wrapper\"\n  >\n    <SearchIcon aria-hidden className=\"size-4 shrink-0 opacity-50\" />\n    <CommandPrimitive.Input\n      className={cn(\n        \"flex h-full w-full rounded-md bg-transparent text-base outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n        className\n      )}\n      data-slot=\"command-input\"\n      {...props}\n    />\n  </div>\n);\n\n/**\n * Command list with Fluid Functionalism nearest-item hover.\n * Highlight lives outside cmdk List so it never participates in cmdk layout.\n */\nexport const CommandList = ({\n  children,\n  className,\n  ...props\n}: CommandListProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const hover = useFluidHover(containerRef as RefObject<HTMLElement | null>);\n  const nextIndexRef = useRef(0);\n  // Renumber from 0 each render so filtered remounts reclaim a dense range.\n  nextIndexRef.current = 0;\n\n  const claimIndex = useCallback(() => {\n    const index = nextIndexRef.current;\n    nextIndexRef.current += 1;\n    return index;\n  }, []);\n\n  const listCtx = useMemo(\n    () => ({\n      claimIndex,\n      registerItem: hover.registerItem,\n    }),\n    [claimIndex, hover.registerItem]\n  );\n\n  return (\n    <FluidHoverListContext.Provider value={listCtx}>\n      <div\n        className=\"relative\"\n        data-slot=\"command-list-scope\"\n        ref={containerRef}\n        {...hover.handlers}\n      >\n        <FluidHoverHighlight\n          className=\"z-0 rounded-sm bg-foreground/10\"\n          hover={hover}\n        />\n        <CommandPrimitive.List\n          className={cn(\n            \"scroll-fade z-10 max-h-72 scroll-py-1 overflow-y-auto overflow-x-hidden\",\n            className\n          )}\n          data-slot=\"command-list\"\n          {...props}\n        >\n          {children}\n        </CommandPrimitive.List>\n      </div>\n    </FluidHoverListContext.Provider>\n  );\n};\n\nexport const CommandEmpty = ({ className, ...props }: CommandEmptyProps) => (\n  <CommandPrimitive.Empty\n    className={cn(\"py-6 text-center text-sm\", className)}\n    data-slot=\"command-empty\"\n    {...props}\n  />\n);\n\nexport const CommandGroup = ({ className, ...props }: CommandGroupProps) => (\n  <CommandPrimitive.Group\n    className={cn(\n      \"overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs\",\n      className\n    )}\n    data-slot=\"command-group\"\n    {...props}\n  />\n);\n\nexport const CommandSeparator = ({\n  className,\n  ...props\n}: CommandSeparatorProps) => (\n  <CommandPrimitive.Separator\n    className={cn(\"-mx-1 h-px bg-foreground/10\", className)}\n    data-slot=\"command-separator\"\n    {...props}\n  />\n);\n\nexport const CommandItem = ({ className, ...props }: CommandItemProps) => {\n  const list = useContext(FluidHoverListContext);\n  const itemRef = useRef<HTMLDivElement>(null);\n  const indexRef = useRef<number | null>(null);\n\n  useLayoutEffect(() => {\n    if (!list) {\n      return;\n    }\n    if (indexRef.current === null) {\n      indexRef.current = list.claimIndex();\n    }\n    list.registerItem(indexRef.current, itemRef.current);\n    return () => {\n      if (indexRef.current !== null) {\n        list.registerItem(indexRef.current, null);\n        indexRef.current = null;\n      }\n    };\n  }, [list]);\n\n  return (\n    <CommandPrimitive.Item\n      className={cn(\n        \"relative z-10 flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-foreground/10 data-[disabled=true]:text-muted-foreground/60 data-[selected=true]:text-foreground [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      data-slot=\"command-item\"\n      ref={itemRef}\n      {...props}\n    />\n  );\n};\n\nexport const CommandShortcut = ({\n  className,\n  ...props\n}: CommandShortcutProps) => (\n  <span\n    className={cn(\n      \"ml-auto text-muted-foreground text-xs tracking-widest\",\n      className\n    )}\n    data-slot=\"command-shortcut\"\n    {...props}\n  />\n);\n","path":"index.tsx","target":"components/smoothui/command/index.tsx","type":"registry:ui"}],"name":"command","registryDependencies":["https://smoothui.dev/r/dialog.json","https://smoothui.dev/r/kbd.json","https://smoothui.dev/r/fluid-hover-highlight.json","https://smoothui.dev/r/lib.json","https://smoothui.dev/r/tokens.json"],"title":"Command","type":"registry:ui"}