Command

<script lang="ts">
  import { Command } from 'sv5ui';

  const groups = [
    {
      id: 'actions',
      label: 'Actions',
      items: [
        { value: 'new-file', label: 'New File', icon: 'lucide:file-plus' },
        { value: 'new-folder', label: 'New Folder', icon: 'lucide:folder-plus' },
        { value: 'search', label: 'Search', icon: 'lucide:search' }
      ]
    }
  ];
</script>

<Command {groups} placeholder="Type a command..." />

<Command groups={[
  {
    id: 'suggestions',
    label: 'Suggestions',
    items: [
      { value: 'calendar', label: 'Calendar', icon: 'lucide:calendar' },
      { value: 'search', label: 'Search Emoji', icon: 'lucide:smile' },
      { value: 'calculator', label: 'Calculator', icon: 'lucide:calculator' }
    ]
  },
  {
    id: 'settings',
    label: 'Settings',
    items: [
      { value: 'profile', label: 'Profile', icon: 'lucide:user' },
      { value: 'billing', label: 'Billing', icon: 'lucide:credit-card' },
      { value: 'preferences', label: 'Preferences', icon: 'lucide:settings' }
    ]
  }
]} />

<Command groups={[
  {
    id: 'pages',
    label: 'Pages',
    items: [
      { value: 'home', label: 'Home', description: 'Go to the home page', icon: 'lucide:home' },
      { value: 'docs', label: 'Documentation', description: 'Browse component docs', icon: 'lucide:book-open' },
      { value: 'blog', label: 'Blog', description: 'Read latest articles', icon: 'lucide:pen-line' }
    ]
  }
]} />

<script lang="ts">
  import { Command } from 'sv5ui';
  import { toast } from 'sv5ui';

  const groups = [{
    id: 'actions',
    items: [
      { value: 'copy', label: 'Copy', icon: 'lucide:copy', onSelect: () => toast('Copied!') },
      { value: 'paste', label: 'Paste', icon: 'lucide:clipboard', onSelect: () => toast('Pasted!') },
      { value: 'delete', label: 'Delete', icon: 'lucide:trash-2', onSelect: () => toast.error('Deleted!') }
    ]
  }];
</script>

<Command {groups} />

<!-- Keywords help users find items with alternative search terms -->
<Command groups={[{
  id: 'tools',
  items: [
    { value: 'theme', label: 'Toggle Theme', icon: 'lucide:sun', keywords: ['dark', 'light', 'mode'] },
    { value: 'zoom', label: 'Zoom In', icon: 'lucide:zoom-in', keywords: ['magnify', 'scale', 'bigger'] },
    { value: 'terminal', label: 'Open Terminal', icon: 'lucide:terminal', keywords: ['console', 'shell', 'cmd'] }
  ]
}]} />

<Command {groups} size="sm" />
<Command {groups} size="md" />
<Command {groups} size="lg" />

<Command groups={[{
  id: 'items',
  items: [
    { value: 'active', label: 'Active Item', icon: 'lucide:check' },
    { value: 'disabled', label: 'Disabled Item', icon: 'lucide:ban', disabled: true },
    { value: 'another', label: 'Another Item', icon: 'lucide:plus' }
  ]
}]} />

<Command {groups} loading />

<script lang="ts">
  import { Command, Modal, Button, Kbd } from 'sv5ui';
  import { useKbd } from 'sv5ui';

  let open = $state(false);

  useKbd({
    shortcuts: {
      'ctrl+k': () => open = !open
    }
  });
</script>

<Button variant="outline" color="surface" onclick={() => open = true}>
  Search...
  {#snippet trailingSlot()}
    <Kbd value="ctrl" size="sm" /> <Kbd value="K" size="sm" />
  {/snippet}
</Button>

<Modal bind:open ui={{ content: 'p-0 max-w-lg' }} close={false} title="">
  {#snippet content()}
    <Command {groups} size="sm" />
  {/snippet}
</Modal>

<Command {groups} emptyText="No commands match your search." />