@casinogate/ui 1.9.2 → 1.9.5

package/dist/components/combobox/combobox.svelte

@@ -0,0 +1,160 @@
+<script lang="ts">
+  import { boolAttr } from '../../internal/utils/attrs.js';
+  import { cn } from '../../internal/utils/common.js';
+  import type { AnyFn } from 'svelte-toolbelt';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import { CommandPrimitive, type CommandItem } from '../command/index.js';
+  import { Icon as IconComponent } from '../icons/index.js';
+  import { Kbd } from '../kbd/index.js';
+  import { PopoverPrimitive } from '../popover/index.js';
+  import { comboboxTriggerVariants } from './styles.js';
+  import type { ComboboxProps } from './types.js';
+
+  let {
+    open = $bindable(false),
+    value = $bindable(''),
+    searchValue = $bindable(''),
+    collection,
+    empty,
+    placeholder = 'Select an option',
+    searchPlaceholder,
+    trigger: triggerSnippet,
+    item: itemSnippet,
+    portalDisabled = false,
+    allowDeselect = true,
+    triggerClass,
+    size = 'default',
+    variant = 'default',
+    rounded = 'default',
+    fullWidth = true,
+    closeOnSelect = true,
+    ...restProps
+  }: ComboboxProps = $props();
+
+  const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
+
+  const groupedItems = $derived(collection.group());
+
+  const displayValue = $derived.by(() => {
+    const val = collection.items.find((item) => item.value === value)?.label ?? value;
+    return val.trim() !== '' ? val : placeholder;
+  });
+
+  const isPlaceholder = $derived.by(() => {
+    return value.trim() === '';
+  });
+
+  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, onSelect?: AnyFn) => () => {
+    onSelect?.();
+
+    if (item.value === value) {
+      value = allowDeselect ? '' : value;
+    } else {
+      value = item.value;
+    }
+
+    if (closeOnSelect) {
+      open = false;
+    }
+  };
+</script>
+
+{#snippet renderTrigger()}
+  {@const triggerProps = {
+    class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
+    'data-placeholder': boolAttr(isPlaceholder),
+  }}
+  {#if triggerSnippet}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {#snippet child({ props })}
+        {@render triggerSnippet?.({ props, displayValue })}
+      {/snippet}
+    </PopoverPrimitive.Trigger>
+  {:else}
+    <PopoverPrimitive.Trigger {...triggerProps}>
+      {displayValue}
+    </PopoverPrimitive.Trigger>
+  {/if}
+{/snippet}
+
+{#snippet renderItem(item: CommandItem)}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect, ...restItem } = item}
+  {@const itemAttrs = {
+    value: itemValue,
+    onSelect: onSelectItem(item, onSelect),
+    'data-selected': boolAttr(itemValue === value),
+    ...restItem,
+  }}
+
+  {#if itemSnippet}
+    <CommandPrimitive.Item {...itemAttrs}>
+      {#snippet child({ props })}
+        {@render itemSnippet?.({ item, props })}
+      {/snippet}
+    </CommandPrimitive.Item>
+  {:else}
+    <CommandPrimitive.Item {...itemAttrs}>
+      {#if Icon}
+        <Icon width={16} height={16} />
+      {/if}
+      {label ?? value}
+      {#if shortcut && shortcut.length > 0}
+        <Kbd.Group>
+          {#each shortcut as shortcut (shortcut)}
+            <Kbd.Root>{shortcut}</Kbd.Root>
+          {/each}
+        </Kbd.Group>
+      {/if}
+      {#if itemValue === value}
+        <span
+          class="cgui:ms-auto cgui:text-icon-regular cgui:size-4 cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0"
+          transition:fly={{ duration: 250, y: 4, easing: cubicInOut }}
+        >
+          <IconComponent.Checkmark class="cgui:ms-auto" width={16} height={16} />
+        </span>
+      {/if}
+    </CommandPrimitive.Item>
+  {/if}
+{/snippet}
+
+<PopoverPrimitive.Root bind:open {...restProps}>
+  {@render renderTrigger()}
+
+  <PopoverPrimitive.Portal disabled={portalDisabled}>
+    <PopoverPrimitive.Content class="cgui:overflow-hidden cgui:rounded-md">
+      <CommandPrimitive.Root>
+        <CommandPrimitive.Input bind:value={searchValue} placeholder={searchPlaceholder} />
+
+        <CommandPrimitive.List class="cgui:rounded-inherit">
+          <CommandPrimitive.Viewport>
+            <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
+
+            {#each groupedItems as [groupKey, items] (groupKey || '__ungrouped__')}
+              {#if groupKey}
+                {@const group = groupMap.get(groupKey)}
+                <CommandPrimitive.Group value={group?.value}>
+                  <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
+
+                  <CommandPrimitive.GroupItems>
+                    {#each items as item (item.value)}
+                      {@render renderItem(item)}
+                    {/each}
+                  </CommandPrimitive.GroupItems>
+
+                  {#if group?.separator}
+                    <CommandPrimitive.Separator />
+                  {/if}
+                </CommandPrimitive.Group>
+              {:else}
+                {#each items as item (item.value)}
+                  {@render renderItem(item)}
+                {/each}
+              {/if}
+            {/each}
+          </CommandPrimitive.Viewport>
+        </CommandPrimitive.List>
+      </CommandPrimitive.Root>
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+</PopoverPrimitive.Root>

package/dist/components/combobox/combobox.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ComboboxProps } from './types.js';
+declare const Combobox: import("svelte").Component<ComboboxProps, {}, "value" | "open" | "searchValue">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/components/combobox/exports.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './combobox.svelte';

package/dist/components/combobox/exports.js

@@ -0,0 +1 @@
+export { default as Root } from './combobox.svelte';

package/dist/components/combobox/index.d.ts

@@ -0,0 +1,3 @@
+export * as Combobox from './exports.js';
+export * as ComboboxApi from './api/index.js';
+export * from './types.js';

package/dist/components/combobox/index.js

@@ -0,0 +1,3 @@
+export * as Combobox from './exports.js';
+export * as ComboboxApi from './api/index.js';
+export * from './types.js';

package/dist/components/combobox/styles.d.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const comboboxTriggerVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        default: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string[];
+        outline: string[];
+        clear: never[];
+    };
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+    rounded: {
+        default: string[];
+        md: string[];
+        lg: string[];
+    };
+    fullWidth: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type ComboboxTriggerVariantsProps = VariantProps<typeof comboboxTriggerVariants>;

package/dist/components/combobox/styles.js

@@ -0,0 +1,49 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const comboboxTriggerVariants = tv({
+    base: [
+        'cgui:group/combobox-trigger ',
+        'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
+        'cgui:text-body',
+        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
+        'cgui:has-[data-slot=chevron]:pr-3',
+    ],
+    variants: {
+        variant: {
+            default: [
+                'cgui:bg-surface-lightest cgui:border cgui:border-stroke-default',
+                'cgui:data-[placeholder]:text-fg-regular/70 cgui:text-fg-dark',
+            ],
+            outline: [
+                'cgui:data-[placeholder]:text-fg-regular cgui:text-fg-dark',
+                'cgui:border-b cgui:border-b-stroke-default',
+                'cgui:rounded-none',
+            ],
+            clear: [],
+        },
+        size: {
+            sm: ['cgui:min-h-7.5', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8'],
+            default: ['cgui:min-h-9', 'cgui:px-3 cgui:py-2', 'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10'],
+            lg: [
+                'cgui:min-h-11',
+                'cgui:text-heading-2',
+                'cgui:px-4 cgui:py-2.5',
+                'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',
+            ],
+        },
+        rounded: {
+            default: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+        },
+        fullWidth: {
+            true: ['cgui:w-full'],
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default',
+        rounded: 'default',
+        w: 'full',
+    },
+});

package/dist/components/combobox/types.d.ts

@@ -0,0 +1,22 @@
+import type { Snippet } from 'svelte';
+import type { CommandProps } from '../command/index.js';
+import type { PrimitivePopoverRootProps } from '../popover/types.js';
+import type { ComboboxTriggerVariantsProps } from './styles.js';
+export type ComboboxRootProps = PrimitivePopoverRootProps;
+export type ComboboxProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsProps & {
+    collection: CommandProps['collection'];
+    value?: string;
+    empty?: CommandProps['empty'];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    portalDisabled?: boolean;
+    allowDeselect?: boolean;
+    triggerClass?: string;
+    closeOnSelect?: boolean;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+        displayValue: string;
+    }]>;
+    item?: CommandProps['item'];
+};

package/dist/components/combobox/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/command/api/create-collection.d.ts

@@ -0,0 +1,2 @@
+import type { CommandCollection, CommandCollectionOptions } from '../types.js';
+export declare const createCollection: (opts: CommandCollectionOptions) => CommandCollection;

package/dist/components/command/api/create-collection.js

@@ -0,0 +1,25 @@
+import { createListCollection } from '../../../internal/index.js';
+export const createCollection = (opts) => {
+    const { items, groups = [], groupSort } = opts;
+    const groupOrderMap = new Map();
+    groups.forEach((g, index) => {
+        groupOrderMap.set(g.value, g.order ?? index);
+    });
+    return Object.assign(createListCollection({
+        items,
+        itemToValue: (item) => item.value,
+        itemToString: (item) => item.label ?? item.value,
+        isItemDisabled: (item) => !!item.disabled,
+        groupBy: (item) => item.group ?? '',
+        groupSort: groupSort ??
+            ((a, b) => {
+                const orderA = groupOrderMap.get(a) ?? Infinity;
+                const orderB = groupOrderMap.get(b) ?? Infinity;
+                if (orderA !== orderB)
+                    return orderA - orderB;
+                return a.localeCompare(b);
+            }),
+    }), {
+        groups,
+    });
+};

package/dist/components/command/api/index.d.ts

@@ -0,0 +1 @@
+export { createCollection } from './create-collection.js';

package/dist/components/command/api/index.js

@@ -0,0 +1 @@
+export { createCollection } from './create-collection.js';

package/dist/components/command/command.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { Kbd } from '../kbd/index.js';
+  import { cn } from '../../internal/utils/common.js';
+  import * as Primitive from './exports-primitive.js';
+  import type { CommandItem, CommandProps } from './types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    searchValue = $bindable(''),
+    api = $bindable(null),
+    collection,
+    placeholder = 'Search...',
+    item: itemSnippet,
+    empty: emptySnippet = 'No results found',
+    maxContentHeight,
+    listClass,
+    viewportClass,
+    ...restProps
+  }: CommandProps = $props();
+
+  const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
+
+  const groupedItems = $derived(collection.group());
+</script>
+
+{#snippet renderItem(item: CommandItem)}
+  {@const { value, label, icon: Icon, shortcut, ...restItem } = item}
+  {#if itemSnippet}
+    <Primitive.Item {value} {...restItem}>
+      {#snippet child({ props })}
+        {@render itemSnippet?.({ item, props })}
+      {/snippet}
+    </Primitive.Item>
+  {:else}
+    <Primitive.Item {value} {...restItem}>
+      {#if Icon}
+        <Icon width={16} height={16} />
+      {/if}
+      {label ?? value}
+      {#if shortcut && shortcut.length > 0}
+        <Kbd.Group>
+          {#each shortcut as shortcut (shortcut)}
+            <Kbd.Root>{shortcut}</Kbd.Root>
+          {/each}
+        </Kbd.Group>
+      {/if}
+    </Primitive.Item>
+  {/if}
+{/snippet}
+
+<Primitive.Root bind:api bind:ref bind:value {...restProps}>
+  <Primitive.Input bind:value={searchValue} {placeholder} />
+
+  <Primitive.List
+    style={maxContentHeight ? { '--max-content-height': maxContentHeight } : undefined}
+    class={cn(listClass, 'cgui:max-h-(--max-content-height)')}
+  >
+    <Primitive.Viewport class={viewportClass}>
+      {#if typeof emptySnippet === 'string'}
+        <Primitive.Empty>{emptySnippet}</Primitive.Empty>
+      {:else}
+        <Primitive.Empty>
+          {#snippet child({ props })}
+            {@render emptySnippet?.({ props })}
+          {/snippet}
+        </Primitive.Empty>
+      {/if}
+
+      {#each groupedItems as [groupKey, items] (groupKey || '__ungrouped__')}
+        {#if groupKey}
+          {@const group = groupMap.get(groupKey)}
+          <Primitive.Group value={group?.value}>
+            <Primitive.GroupHeading>{group?.label ?? groupKey}</Primitive.GroupHeading>
+
+            <Primitive.GroupItems>
+              {#each items as item (item.value)}
+                {@render renderItem(item)}
+              {/each}
+            </Primitive.GroupItems>
+
+            {#if group?.separator}
+              <Primitive.Separator />
+            {/if}
+          </Primitive.Group>
+        {:else}
+          {#each items as item (item.value)}
+            {@render renderItem(item)}
+          {/each}
+        {/if}
+      {/each}
+    </Primitive.Viewport>
+  </Primitive.List>
+</Primitive.Root>

package/dist/components/command/command.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandProps } from './types.js';
+declare const Command: import("svelte").Component<CommandProps, {}, "value" | "ref" | "api" | "searchValue">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.empty.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { commandEmptyVariants } from '../styles.js';
+  import type { CommandEmptyProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: CommandEmptyProps = $props();
+</script>
+
+<CommandPrimitive.Empty
+  bind:ref
+  data-slot="command-empty"
+  class={cn(commandEmptyVariants(), className)}
+  {...restProps}
+/>

package/dist/components/command/components/command.empty.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandEmptyProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandEmptyProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.group-heading.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { commandGroupHeadingVariants } from '../styles.js';
+  import type { CommandGroupHeadingProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: CommandGroupHeadingProps = $props();
+</script>
+
+<CommandPrimitive.GroupHeading bind:ref class={cn(commandGroupHeadingVariants(), className)} {...restProps} />

package/dist/components/command/components/command.group-heading.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandGroupHeadingProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandGroupHeadingProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.group-items.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { CommandGroupItemsProps } from '../types.js';
+
+  let { ref = $bindable(null), ...restProps }: CommandGroupItemsProps = $props();
+</script>
+
+<CommandPrimitive.GroupItems bind:ref {...restProps} />

package/dist/components/command/components/command.group-items.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const Command: import("svelte").Component<CommandPrimitive.GroupItemsProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.group.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, useId } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { commandGroupVariants } from '../styles.js';
+  import type { CommandGroupProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, value, ...restProps }: CommandGroupProps = $props();
+</script>
+
+<CommandPrimitive.Group
+  bind:ref
+  data-slot="command-group"
+  class={cn(commandGroupVariants(), className)}
+  value={value ?? `----${useId()}`}
+  {...restProps}
+/>
+<!-- {#if heading}
+    <CommandPrimitive.GroupHeading class="text-muted-foreground px-2 py-1.5 text-xs font-medium">
+      {heading}
+    </CommandPrimitive.GroupHeading>
+  {/if}
+  <CommandPrimitive.GroupItems {children} />
+</CommandPrimitive.Group> -->

package/dist/components/command/components/command.group.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandGroupProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandGroupProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Icon } from '../../icons/index.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { commandInputVariants } from '../styles.js';
+  import type { CommandInputProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, value = $bindable(''), ...restProps }: CommandInputProps = $props();
+
+  const variants = $derived(commandInputVariants({}));
+</script>
+
+<div class={variants.wrapper()} data-slot="command-input-wrapper">
+  <Icon.Magnifier width={16} height={16} class={variants.icon()} />
+
+  <CommandPrimitive.Input
+    data-slot="command-input"
+    class={cn(variants.input(), className)}
+    bind:ref
+    bind:value
+    {...restProps}
+  />
+</div>

package/dist/components/command/components/command.input.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandInputProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandInputProps, {}, "value" | "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.item.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { commandItemVariants } from '../styles.js';
+  import type { CommandItemProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: CommandItemProps = $props();
+</script>
+
+<CommandPrimitive.Item bind:ref data-slot="command-item" class={cn(commandItemVariants(), className)} {...restProps} />

package/dist/components/command/components/command.item.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandItemProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandItemProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.list.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { ClassNameValue } from 'tailwind-merge';
+  import { commandListVariants } from '../styles.js';
+  import type { CommandListProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: CommandListProps = $props();
+</script>
+
+<CommandPrimitive.List
+  bind:ref
+  data-slot="command-list"
+  class={cn(commandListVariants({ class: className as ClassNameValue }))}
+  {...restProps}
+/>

package/dist/components/command/components/command.list.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { CommandListProps } from '../types.js';
+declare const Command: import("svelte").Component<CommandListProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.loading.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import type { CommandLoadingProps } from '../types.js';
+
+  let { ref = $bindable(null), ...restProps }: CommandLoadingProps = $props();
+</script>
+
+<CommandPrimitive.Loading bind:ref {...restProps} />

package/dist/components/command/components/command.loading.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Command as CommandPrimitive } from 'bits-ui';
+declare const Command: import("svelte").Component<CommandPrimitive.LoadingProps, {}, "ref">;
+type Command = ReturnType<typeof Command>;
+export default Command;

package/dist/components/command/components/command.root.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from 'bits-ui';
+  import { commandRootVariants } from '../styles.js';
+  import type { CommandRootProps } from '../types.js';
+
+  let {
+    api = $bindable(null),
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    rounded = 'default',
+    shadow = true,
+    border = true,
+    ...restProps
+  }: CommandRootProps = $props();
+</script>
+
+<CommandPrimitive.Root
+  bind:this={api}
+  bind:value
+  bind:ref
+  data-slot="command"
+  class={cn(commandRootVariants({ rounded, shadow, border }), className)}
+  {...restProps}
+/>