first

src/lib/components/ui/command/command-dialog.svelte

@@ -0,0 +1,24 @@
+<script>
+  import Command from "./command.svelte";
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+
+  let {
+    open = $bindable(false),
+    ref = $bindable(null),
+    value = $bindable(""),
+    children,
+    ...restProps
+  } = $props();
+</script>
+
+<Dialog.Root bind:open {...restProps}>
+  <Dialog.Content class="overflow-hidden p-0 shadow-lg">
+    <Command
+      class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-group]]:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
+      {...restProps}
+      bind:value
+      bind:ref
+      {children}
+    />
+  </Dialog.Content>
+</Dialog.Root>

src/lib/components/ui/command/command-empty.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps} />

src/lib/components/ui/command/command-group.svelte

@@ -0,0 +1,19 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, heading, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.Group
+  class={cn("overflow-hidden p-1 text-foreground", className)}
+  bind:ref
+  {...restProps}
+>
+  {#if heading}
+    <CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {heading}
+    </CommandPrimitive.GroupHeading>
+  {/if}
+  <CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group>

src/lib/components/ui/command/command-input.svelte

@@ -0,0 +1,20 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import Search from "lucide-svelte/icons/search";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, value = $bindable(""), ...restProps } = $props();
+</script>
+
+<div class="flex items-center border-b px-2" data-command-input-wrapper="">
+  <Search class="mr-2 size-4 shrink-0 opacity-50" />
+  <CommandPrimitive.Input
+    class={cn(
+      "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    bind:ref
+    {...restProps}
+    bind:value
+  />
+</div>

src/lib/components/ui/command/command-item.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.Item
+  class={cn(
+    "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+    className,
+  )}
+  bind:ref
+  {...restProps}
+/>

src/lib/components/ui/command/command-link-item.svelte

@@ -0,0 +1,15 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.LinkItem
+  class={cn(
+    "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+    className,
+  )}
+  bind:ref
+  {...restProps}
+/>

src/lib/components/ui/command/command-list.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.List
+  class={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+  {...restProps}
+  bind:ref
+/>

src/lib/components/ui/command/command-separator.svelte

@@ -0,0 +1,8 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.Separator class={cn("-mx-1 h-px bg-border", className)} bind:ref {...restProps} />

src/lib/components/ui/command/command-shortcut.svelte

@@ -0,0 +1,13 @@
+<script>
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), class: className, children, ...restProps } = $props();
+</script>
+
+<span
+  bind:this={ref}
+  class={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

src/lib/components/ui/command/command.svelte

@@ -0,0 +1,16 @@
+<script>
+  import { Command as CommandPrimitive } from "bits-ui";
+  import { cn } from "$lib/utils.js";
+
+  let { ref = $bindable(null), value = $bindable(""), class: className, ...restProps } = $props();
+</script>
+
+<CommandPrimitive.Root
+  class={cn(
+    "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+    className,
+  )}
+  bind:value
+  bind:ref
+  {...restProps}
+/>

src/lib/components/ui/command/index.js

@@ -0,0 +1,40 @@
+import { Command as CommandPrimitive } from "bits-ui";
+
+import Dialog from "./command-dialog.svelte";
+import Empty from "./command-empty.svelte";
+import Group from "./command-group.svelte";
+import Input from "./command-input.svelte";
+import Item from "./command-item.svelte";
+import LinkItem from "./command-link-item.svelte";
+import List from "./command-list.svelte";
+import Separator from "./command-separator.svelte";
+import Shortcut from "./command-shortcut.svelte";
+import Root from "./command.svelte";
+
+const Loading = CommandPrimitive.Loading;
+
+export {
+  //
+  Root as Command,
+  Dialog as CommandDialog,
+  Empty as CommandEmpty,
+  Group as CommandGroup,
+  Input as CommandInput,
+  Item as CommandItem,
+  LinkItem as CommandLinkItem,
+  List as CommandList,
+  Loading as CommandLoading,
+  Separator as CommandSeparator,
+  Shortcut as CommandShortcut,
+  Dialog,
+  Empty,
+  Group,
+  Input,
+  Item,
+  LinkItem,
+  List,
+  Loading,
+  Root,
+  Separator,
+  Shortcut,
+};