@theokit/ui 0.13.0

package/dist/chunk-ZU6IM6PK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/command-palette/command-palette.tsx"],"names":["CommandPrimitive"],"mappings":"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","file":"chunk-ZU6IM6PK.js","sourcesContent":["import { Command as CommandPrimitive } from \"cmdk\";\nimport { ChevronRight, Search } from \"lucide-react\";\nimport { useMemo, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"../../../lib/cn.js\";\nimport type { IconComponent } from \"../../../lib/types.js\";\nimport { Dialog } from \"../../primitives/dialog/index.js\";\n\nexport interface CommandItem {\n  id: string;\n  label: ReactNode;\n  /** Optional secondary line (path, hint, shortcut). */\n  hint?: ReactNode;\n  /** Optional group name. Items with the same group are visually grouped. */\n  group?: string;\n  /** Optional icon. */\n  icon?: IconComponent;\n  /** Optional searchable plain-text used by the cmdk ranker. Falls back to `label` when string. */\n  searchable?: string;\n}\n\ninterface CommandPaletteProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  items: CommandItem[];\n  onSelect: (id: string) => void;\n  placeholder?: string;\n  emptyMessage?: ReactNode;\n  /**\n   * Optional custom filter score (0 = no match, > 0 = match). Receives the\n   * `value` (the item's searchable text) and the current `search` query.\n   * Defaults to cmdk's built-in fuzzy ranker which prioritizes substring +\n   * word-boundary + consecutive matches.\n   */\n  filter?: (value: string, search: string) => number;\n}\n\nconst defaultEmpty = \"No results.\";\n\n/**\n * CommandPalette — Cmd+K-style global launcher with full keyboard navigation.\n *\n * Built on `cmdk` (the de-facto shadcn pattern) + Theo Dialog. Provides\n * out-of-the-box: ArrowUp/ArrowDown navigation, Enter selection, Escape close,\n * Home/End, active-item highlight via `data-selected`, and fuzzy ranking.\n *\n * Stateless: caller owns `open` / `onOpenChange` / `items`. Selecting an item\n * fires `onSelect(id)` and closes the dialog.\n */\nfunction CommandPalette({\n  open,\n  onOpenChange,\n  items,\n  onSelect,\n  placeholder = \"Type a command or search…\",\n  emptyMessage = defaultEmpty,\n  filter,\n}: CommandPaletteProps) {\n  const [search, setSearch] = useState(\"\");\n\n  const groups = useMemo(() => {\n    const map = new Map<string, CommandItem[]>();\n    for (const item of items) {\n      const key = item.group ?? \"\";\n      if (!map.has(key)) map.set(key, []);\n      map.get(key)?.push(item);\n    }\n    return Array.from(map.entries());\n  }, [items]);\n\n  const handleSelect = (id: string) => {\n    onSelect(id);\n    onOpenChange(false);\n    setSearch(\"\");\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <Dialog.Content className=\"max-w-xl p-0\" hideCloseButton>\n        <Dialog.Title className=\"sr-only\">Command palette</Dialog.Title>\n        <Dialog.Description className=\"sr-only\">\n          Type to search commands. Use arrow keys to navigate, Enter to select, Escape to close.\n        </Dialog.Description>\n        <CommandPrimitive label=\"Command palette\" shouldFilter {...(filter ? { filter } : {})}>\n          <div className=\"flex items-center gap-2 border-border/40 border-b px-4 py-3\">\n            <Search className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />\n            <CommandPrimitive.Input\n              value={search}\n              onValueChange={setSearch}\n              placeholder={placeholder}\n              className={cn(\n                \"flex-1 bg-transparent\",\n                \"font-sans text-body-md text-foreground placeholder:text-muted-foreground\",\n                \"focus:outline-none\",\n              )}\n            />\n            <span className=\"rounded-md bg-muted px-1.5 py-0.5 font-mono text-label text-muted-foreground\">\n              ⌘K\n            </span>\n          </div>\n          <CommandPrimitive.List className=\"max-h-[420px] overflow-y-auto p-1\">\n            <CommandPrimitive.Empty className=\"px-3 py-6 text-center text-body-sm text-muted-foreground\">\n              {emptyMessage}\n            </CommandPrimitive.Empty>\n            {groups.map(([groupName, list]) => (\n              <CommandPrimitive.Group\n                key={groupName || \"default\"}\n                heading={groupName || undefined}\n                className={cn(\n                  \"[&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:pt-2 [&_[cmdk-group-heading]]:pb-1\",\n                  \"[&_[cmdk-group-heading]]:font-sans [&_[cmdk-group-heading]]:text-label-caps\",\n                  \"[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider\",\n                )}\n              >\n                {list.map((item) => {\n                  const Icon = item.icon;\n                  const value =\n                    item.searchable ?? (typeof item.label === \"string\" ? item.label : item.id);\n                  return (\n                    <CommandPrimitive.Item\n                      key={item.id}\n                      value={value}\n                      onSelect={() => handleSelect(item.id)}\n                      className={cn(\n                        \"flex w-full cursor-pointer items-center gap-3 rounded-md px-3 py-2 text-left\",\n                        \"transition-colors hover:bg-muted\",\n                        \"data-[selected=true]:bg-muted\",\n                        \"focus-visible:outline-none\",\n                      )}\n                    >\n                      {Icon ? <Icon className=\"size-4 text-primary\" /> : null}\n                      <div className=\"min-w-0 flex-1\">\n                        <p className=\"truncate text-body-sm text-foreground\">{item.label}</p>\n                        {item.hint ? (\n                          <p className=\"truncate font-mono text-label text-muted-foreground\">\n                            {item.hint}\n                          </p>\n                        ) : null}\n                      </div>\n                      <ChevronRight className=\"size-3 text-muted-foreground\" aria-hidden=\"true\" />\n                    </CommandPrimitive.Item>\n                  );\n                })}\n              </CommandPrimitive.Group>\n            ))}\n          </CommandPrimitive.List>\n        </CommandPrimitive>\n      </Dialog.Content>\n    </Dialog>\n  );\n}\n\nexport { CommandPalette };\n"]}