{"_id":"@allem-ui/command","name":"@allem-ui/command","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.2":{"name":"@allem-ui/command","version":"0.0.2","description":"Command palette (⌘K) component for Allem UI","license":"MIT","author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"sideEffects":false,"devDependencies":{"@types/react":"^19.2.0","@types/react-dom":"^19.2.0","react":"^19.2.0","react-dom":"^19.2.0","tsup":"^8.5.0","typescript":"^5.9.0"},"peerDependencies":{"@allem-ui/react":">=0.0.4","@allem-ui/theme":">=0.0.3","react":">=18.0.0","react-dom":">=18.0.0","tailwindcss":">=4.0.0"},"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/command"},"keywords":["allem-ui","command-palette","cmdk","spotlight","search","react","components"],"publishConfig":{"access":"public"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist"},"_id":"@allem-ui/command@0.0.2","bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"homepage":"https://github.com/kingofmit/allem-ui#readme","_integrity":"sha512-TMIgIJ4o3foGc3lWM7qsuBjYsBOTvCSNeJiAETU4eW95RZdbDnez4l4T9yHjr/SZQKm0ctY4OfrgVIwvd8K95g==","_resolved":"/private/var/folders/4v/rph2hgm54rqf12vzbjxpn5kc0000gn/T/f68e27651948cad5e8426a6fd6e79e62/allem-ui-command-0.0.2.tgz","_from":"file:allem-ui-command-0.0.2.tgz","_nodeVersion":"26.0.0","_npmVersion":"11.12.1","dist":{"integrity":"sha512-TMIgIJ4o3foGc3lWM7qsuBjYsBOTvCSNeJiAETU4eW95RZdbDnez4l4T9yHjr/SZQKm0ctY4OfrgVIwvd8K95g==","shasum":"3b4bf0ed62fef571ace6750b05b03107bfcfbcbc","tarball":"https://registry.npmjs.org/@allem-ui/command/-/command-0.0.2.tgz","fileCount":8,"unpackedSize":56666,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIFFxL9Wpx/2BVx1wROOCqFLEYavNE99apy7/1mKadms3AiEA9PD1wU7DMbU9gvC3eXs90z3t89Z2anlAUOwpFh8j2X0="}]},"_npmUser":{"name":"kingofmit","email":"allem.ahmed@gmail.com"},"directories":{},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/command_0.0.2_1779581028376_0.6002657458522325"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-24T00:03:48.250Z","0.0.2":"2026-05-24T00:03:48.552Z","modified":"2026-05-24T00:03:48.770Z"},"maintainers":[{"name":"kingofmit","email":"allem.ahmed@gmail.com"}],"description":"Command palette (⌘K) component for Allem UI","homepage":"https://github.com/kingofmit/allem-ui#readme","keywords":["allem-ui","command-palette","cmdk","spotlight","search","react","components"],"repository":{"type":"git","url":"git+https://github.com/kingofmit/allem-ui.git","directory":"packages/command"},"author":{"name":"Ahmed Allem","url":"https://kingallem.com"},"bugs":{"url":"https://github.com/kingofmit/allem-ui/issues"},"license":"MIT","readme":"# @allem-ui/command\n\nCommand palette (⌘K) component for [Allem UI](https://github.com/kingofmit/allem-ui) — a spotlight-style search and action launcher with keyboard navigation, grouped results, and shortcut badges.\n\n## Install\n\n```bash\nnpm install @allem-ui/command @allem-ui/react @allem-ui/theme\n```\n\n## Tailwind CSS Setup\n\nAdd the following to your main CSS file (e.g. `globals.css`) so Tailwind generates the utility classes used by the components:\n\n```css\n@import \"tailwindcss\";\n@source \"@allem-ui/react\";\n@source \"@allem-ui/command\";\n@source \"@allem-ui/theme\";\n```\n\n> **Note:** The `@source` directive tells Tailwind CSS v4 to scan the package for class names. Without it, component styles like padding, borders, and colors won't be generated.\n\n## Quick Start\n\n```tsx\nimport {\n  CommandPalette,\n  CommandInput,\n  CommandList,\n  CommandGroup,\n  CommandItem,\n  CommandEmpty,\n  useCommandPalette,\n} from \"@allem-ui/command\";\n\nfunction App() {\n  const { isOpen, setIsOpen } = useCommandPalette(); // ⌘K to toggle\n  const [search, setSearch] = useState(\"\");\n\n  const items = [\n    { label: \"Home\", icon: <HomeIcon />, shortcut: \"⌘H\" },\n    { label: \"Settings\", icon: <GearIcon />, shortcut: \"⌘,\" },\n    { label: \"Search users\", icon: <SearchIcon /> },\n  ];\n\n  const filtered = items.filter((i) =>\n    i.label.toLowerCase().includes(search.toLowerCase())\n  );\n\n  return (\n    <CommandPalette open={isOpen} onOpenChange={setIsOpen}>\n      <CommandInput value={search} onValueChange={setSearch} />\n      <CommandList>\n        {filtered.length === 0 ? (\n          <CommandEmpty>No results for \"{search}\"</CommandEmpty>\n        ) : (\n          <CommandGroup heading=\"Navigation\">\n            {filtered.map((item) => (\n              <CommandItem\n                key={item.label}\n                onSelect={() => console.log(item.label)}\n                icon={item.icon}\n                shortcut={item.shortcut}\n              >\n                {item.label}\n              </CommandItem>\n            ))}\n          </CommandGroup>\n        )}\n      </CommandList>\n    </CommandPalette>\n  );\n}\n```\n\n## Components\n\n### CommandPalette\n\nMain overlay container with backdrop and animations.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `open` | `boolean` | — | Whether the palette is open |\n| `onOpenChange` | `(open: boolean) => void` | — | Callback when open state changes |\n| `className` | `string` | — | Additional CSS classes |\n\n### CommandInput\n\nSearch input with magnifying glass icon and clear button.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `string` | — | Current search value |\n| `onValueChange` | `(value: string) => void` | — | Search change callback |\n| `placeholder` | `string` | `\"Type a command or search...\"` | Placeholder text |\n\n### CommandList\n\nScrollable results container with keyboard navigation (↑↓ arrows, Enter to select).\n\n### CommandItem\n\nIndividual result row.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `onSelect` | `() => void` | — | Called when item is selected |\n| `icon` | `ReactNode` | — | Icon displayed on the left |\n| `shortcut` | `string` | — | Keyboard shortcut badge |\n| `disabled` | `boolean` | `false` | Whether the item is disabled |\n\n### CommandGroup\n\nLabeled section divider for grouping items.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `heading` | `string` | — | Section heading text |\n\n### CommandEmpty\n\nEmpty state shown when no results match.\n\n### useCommandPalette\n\nHook for controlling the palette programmatically. Registers ⌘K / Ctrl+K by default.\n\n```tsx\nconst { isOpen, open, close, toggle, setIsOpen } = useCommandPalette({\n  shortcut: \"k\", // customizable\n});\n```\n\n## Features\n\n- ⌘K / Ctrl+K keyboard shortcut (configurable)\n- Arrow key navigation with scroll-into-view\n- Enter to select, Escape to close\n- Grouped results with section headers\n- Keyboard shortcut badges on items\n- Animated entrance/exit (CSS only)\n- Body scroll lock when open\n- Dark mode support\n- Zero dependencies\n\n## License\n\nMIT\n","readmeFilename":"README.md","_rev":"1-3a9245ff76f81ef0662e947190a683ba"}