@casinogate/ui 1.11.14 → 2.0.0

package/dist/composed/combobox/creatable/combobox.creatable.svelte

@@ -0,0 +1,212 @@
+<script lang="ts" generics="TItem extends ComboboxItem">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { SELECTION_TYPE } from '../../../internal/constants/selection-type.js';
+  import { noop } from '../../../internal/utils/common.js';
+  import { Combobox as ComboboxPrimitive } from '../../../primitives/combobox/index.js';
+  import { Kbd } from '../../../primitives/kbd/index.js';
+  import { boxWith } from 'svelte-toolbelt';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import { useGroupedItems } from '../model/use-grouped-items.svelte.js';
+  import type { ComboboxCreatableProps, ComboboxItem } from '../types.js';
+
+  type CreateOption = ComboboxItem & {
+    __creatable: true;
+    inputValue: string;
+    preventSelect: true;
+  };
+
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    searchValue = $bindable(''),
+    type = SELECTION_TYPE.SINGLE,
+    items = [],
+    groups = [],
+    placeholder = 'Select or create an option',
+    searchPlaceholder,
+    empty,
+    portalDisabled = false,
+    triggerClass,
+    contentClass,
+    size = 'default',
+    variant = 'default',
+    rounded = 'default',
+    fullWidth = true,
+    clearable = false,
+    allowDeselect = true,
+    closeOnSelect,
+    maxContentHeight,
+    trigger: triggerSnippet,
+    item: itemSnippet,
+    label: labelSnippet,
+    createLabel = (inputValue) => `Create "${inputValue}"`,
+    isCreatable = defaultIsCreatable,
+    onCreate,
+    onSelect = noop,
+    ...restProps
+  }: ComboboxCreatableProps<TItem> = $props();
+
+  let createdItems = $state<TItem[]>([]);
+
+  const isMultiple = $derived(type === SELECTION_TYPE.MULTIPLE);
+  const normalize = (text: string) => text.trim();
+
+  function defaultIsCreatable(inputValue: string, currentItems: TItem[]) {
+    const normalizedInput = normalize(inputValue);
+    if (!normalizedInput) return false;
+
+    return !currentItems.some((item) => {
+      return normalize(item.value) === normalizedInput || normalize(item.label ?? '') === normalizedInput;
+    });
+  }
+
+  const baseItems = $derived.by(() => [
+    ...items,
+    ...createdItems.filter((item) => !items.some((existingItem) => existingItem.value === item.value)),
+  ]);
+
+  const trimmedSearchValue = $derived(searchValue.trim());
+  const canCreate = $derived.by(() => isCreatable(trimmedSearchValue, baseItems));
+
+  const createOption = $derived.by(
+    () =>
+      ({
+        value: `__combobox_create__${trimmedSearchValue}`,
+        label: createLabel(trimmedSearchValue),
+        keywords: [trimmedSearchValue],
+        key: `__create_${trimmedSearchValue}`,
+        __creatable: true,
+        inputValue: trimmedSearchValue,
+        preventSelect: true,
+      }) satisfies CreateOption
+  );
+
+  const resolvedItems = $derived.by(() => {
+    if (!canCreate) return baseItems;
+    return [...baseItems, createOption as unknown as TItem];
+  });
+
+  const groupedItems = useGroupedItems({
+    items: boxWith(() => resolvedItems),
+    groups: boxWith(() => groups),
+  });
+
+  const commandKey = $derived.by(() => baseItems.map((item) => item.value).join('|'));
+
+  function isCreateOption(item: TItem | CreateOption | null): item is CreateOption {
+    return Boolean(item && '__creatable' in item && item.__creatable);
+  }
+
+  const getItemKey = (item: TItem) => item.key ?? item.value;
+
+  async function onSelectItem(nextValue: string | string[], item: TItem | null) {
+    if (isCreateOption(item)) {
+      const currentValue = Array.isArray(value) ? value : [];
+      const createdItem = await onCreate(item.inputValue);
+      const createdValue = isMultiple ? [...currentValue, createdItem.value] : createdItem.value;
+
+      createdItems = [...createdItems.filter((created) => created.value !== createdItem.value), createdItem];
+      value = createdValue;
+      searchValue = '';
+      onSelect(createdValue, createdItem);
+      return;
+    }
+
+    value = nextValue;
+    onSelect(nextValue, item);
+  }
+</script>
+
+{#snippet renderItem(item: TItem)}
+  <ComboboxPrimitive.Item {item}>
+    {#snippet children({ props, selected })}
+      {#if itemSnippet}
+        {@render itemSnippet({ item, props })}
+      {:else}
+        <div {...props}>
+          {#if item.icon}
+            <item.icon width={16} height={16} />
+          {/if}
+          {item.label ?? item.value}
+          {#if item.shortcut && item.shortcut.length > 0}
+            <Kbd.Group>
+              {#each item.shortcut as shortcut (shortcut)}
+                <Kbd.Root>{shortcut}</Kbd.Root>
+              {/each}
+            </Kbd.Group>
+          {/if}
+          {#if selected}
+            <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 }}
+            >
+              <Icon.Checkmark class="cgui:ms-auto" width={16} height={16} />
+            </span>
+          {/if}
+        </div>
+      {/if}
+    {/snippet}
+  </ComboboxPrimitive.Item>
+{/snippet}
+
+<ComboboxPrimitive.Root
+  bind:open
+  bind:value={value as never}
+  bind:searchValue
+  {type}
+  items={resolvedItems}
+  {placeholder}
+  {allowDeselect}
+  {closeOnSelect}
+  onSelect={onSelectItem}
+  {...restProps}
+>
+  <ComboboxPrimitive.Trigger
+    class={triggerClass}
+    {size}
+    {variant}
+    {rounded}
+    {fullWidth}
+    {clearable}
+    trigger={triggerSnippet}
+    label={labelSnippet as never}
+  />
+
+  <ComboboxPrimitive.Portal disabled={portalDisabled}>
+    <ComboboxPrimitive.Content class={contentClass} {commandKey}>
+      <ComboboxPrimitive.Input placeholder={searchPlaceholder} />
+
+      <ComboboxPrimitive.List {maxContentHeight}>
+        <ComboboxPrimitive.Viewport>
+          <ComboboxPrimitive.Empty {empty} />
+
+          {#each groupedItems.items.current as [groupKey, groupItems] (groupKey || groupedItems.ungroupedKey)}
+            {#if groupKey}
+              {@const group = groupedItems.map.current.get(groupKey)}
+              <ComboboxPrimitive.Group value={group?.value}>
+                <ComboboxPrimitive.GroupHeading>{group?.label ?? groupKey}</ComboboxPrimitive.GroupHeading>
+
+                <ComboboxPrimitive.GroupItems>
+                  {#each groupItems as item (getItemKey(item))}
+                    {@render renderItem(item)}
+                  {/each}
+                </ComboboxPrimitive.GroupItems>
+
+                {#if group?.separator}
+                  <ComboboxPrimitive.Separator />
+                {/if}
+              </ComboboxPrimitive.Group>
+            {:else}
+              <ComboboxPrimitive.Group value="__ungrouped__">
+                {#each groupItems as item (getItemKey(item))}
+                  {@render renderItem(item)}
+                {/each}
+              </ComboboxPrimitive.Group>
+            {/if}
+          {/each}
+        </ComboboxPrimitive.Viewport>
+      </ComboboxPrimitive.List>
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Portal>
+</ComboboxPrimitive.Root>

package/dist/composed/combobox/creatable/combobox.creatable.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ComboboxCreatableProps, ComboboxItem } from '../types.js';
+declare function $$render<TItem extends ComboboxItem>(): {
+    props: ComboboxCreatableProps<TItem>;
+    exports: {};
+    bindings: "value" | "open" | "searchValue";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends ComboboxItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "value" | "open" | "searchValue";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<TItem extends ComboboxItem> = InstanceType<typeof Combobox<TItem>>;
+export default Combobox;

package/dist/composed/combobox/creatable/index.d.ts

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

package/dist/composed/combobox/creatable/index.js

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

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

@@ -0,0 +1,2 @@
+export * as Combobox from './root/index.js';
+export type * from './types.js';

package/dist/composed/combobox/index.js

@@ -0,0 +1 @@
+export * as Combobox from './root/index.js';

package/dist/composed/combobox/model/use-display-value.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ComboboxItem } from '../types.js';
+import { type ReadableBox, type ReadableBoxedValues } from 'svelte-toolbelt';
+type Opts<TItem extends ComboboxItem> = ReadableBoxedValues<{
+    value: string | string[];
+    items: TItem[];
+    placeholder: string;
+}> & {
+    selectedItems?: ReadableBox<TItem[]>;
+};
+export declare const useDisplayValue: <TItem extends ComboboxItem>(opts: Opts<TItem>) => ReadableBox<string>;
+export {};

package/dist/composed/combobox/model/use-display-value.svelte.js

@@ -0,0 +1,24 @@
+import { boxWith } from 'svelte-toolbelt';
+export const useDisplayValue = (opts) => {
+    const res = $derived.by(() => {
+        const { value, items, placeholder } = opts;
+        const findItem = (itemValue) => {
+            return (items.current.find((item) => item.value === itemValue) ??
+                opts.selectedItems?.current.find((item) => item.value === itemValue));
+        };
+        if (typeof value.current === 'string' && value.current.trim() !== '') {
+            const item = findItem(value.current);
+            return item?.label ?? value.current;
+        }
+        if (Array.isArray(value.current) && value.current.length > 0) {
+            return value.current
+                .map((v) => {
+                const item = findItem(v);
+                return item?.label ?? v;
+            })
+                .join(', ');
+        }
+        return placeholder?.current;
+    });
+    return boxWith(() => res);
+};

package/dist/composed/combobox/model/use-grouped-items.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { CommandGroup } from '../../command/types.js';
+import { type ReadableBoxedValues } from 'svelte-toolbelt';
+import type { ComboboxItem } from '../types.js';
+type Opts<TItem extends ComboboxItem> = ReadableBoxedValues<{
+    items: TItem[];
+    groups: CommandGroup[];
+}>;
+export declare const useGroupedItems: <TItem extends ComboboxItem>(opts: Opts<TItem>) => {
+    map: import("svelte-toolbelt").ReadableBox<import("svelte/reactivity").SvelteMap<string, CommandGroup>>;
+    items: import("svelte-toolbelt").ReadableBox<[string, TItem[]][]>;
+    ungroupedKey: string;
+};
+export {};

package/dist/composed/combobox/model/use-grouped-items.svelte.js

@@ -0,0 +1,13 @@
+import { COMMAND_UNGROUPED_KEY, useCommandItems } from '../../command/model/use-command-items.svelte.js';
+import { boxWith } from 'svelte-toolbelt';
+export const useGroupedItems = (opts) => {
+    const itemsModel = useCommandItems({
+        items: () => opts.items.current,
+        groups: () => opts.groups.current,
+    });
+    return {
+        map: boxWith(() => itemsModel.groupMap),
+        items: boxWith(() => itemsModel.groupedItems),
+        ungroupedKey: COMMAND_UNGROUPED_KEY,
+    };
+};

package/dist/composed/combobox/model/use-selected-items.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ComboboxItem } from '../types.js';
+import { type ReadableBox, type ReadableBoxedValues } from 'svelte-toolbelt';
+type Opts<TItem extends ComboboxItem> = ReadableBoxedValues<{
+    value: string | string[];
+    items: TItem[];
+}> & {
+    selectedItems?: ReadableBox<TItem[]>;
+};
+export declare const useSelectedItems: <TItem extends ComboboxItem>(opts: Opts<TItem>) => ReadableBox<TItem[]>;
+export {};

package/dist/composed/combobox/model/use-selected-items.svelte.js

@@ -0,0 +1,19 @@
+import { boxWith } from 'svelte-toolbelt';
+export const useSelectedItems = (opts) => {
+    const { value, items } = opts;
+    const res = $derived.by(() => {
+        const findItem = (itemValue) => {
+            return (items.current.find((item) => item.value === itemValue) ??
+                opts.selectedItems?.current.find((item) => item.value === itemValue));
+        };
+        if (typeof value.current === 'string' && value.current.trim() !== '') {
+            const item = findItem(value.current);
+            return item ? [item] : [];
+        }
+        if (Array.isArray(value.current) && value.current.length > 0) {
+            return value.current.map((v) => findItem(v)).filter((i) => i !== undefined);
+        }
+        return [];
+    });
+    return boxWith(() => res);
+};

package/dist/composed/combobox/root/combobox.root.svelte

@@ -0,0 +1,139 @@
+<script lang="ts" generics="TItem extends ComboboxItem">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { SELECTION_TYPE } from '../../../internal/constants/selection-type.js';
+  import { Combobox as ComboboxPrimitive } from '../../../primitives/combobox/index.js';
+  import { Kbd } from '../../../primitives/kbd/index.js';
+  import { boxWith } from 'svelte-toolbelt';
+  import { cubicInOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import { useGroupedItems } from '../model/use-grouped-items.svelte.js';
+  import type { ComboboxItem, ComboboxProps } from '../types.js';
+
+  let {
+    open = $bindable(false),
+    value = $bindable(),
+    searchValue = $bindable(''),
+    type = SELECTION_TYPE.SINGLE,
+    items = [],
+    groups = [],
+    empty,
+    placeholder = 'Select an option',
+    searchPlaceholder,
+    trigger: triggerSnippet,
+    item: itemSnippet,
+    label: labelSnippet,
+    portalDisabled = false,
+    allowDeselect = true,
+    triggerClass,
+    size = 'default',
+    variant = 'default',
+    rounded = 'default',
+    clearable = false,
+    fullWidth = true,
+    closeOnSelect,
+    maxContentHeight,
+    contentClass,
+    onSelect,
+    ...restProps
+  }: ComboboxProps<TItem> = $props();
+
+  const groupedItems = useGroupedItems({
+    items: boxWith(() => items),
+    groups: boxWith(() => groups),
+  });
+
+  const getItemKey = (item: TItem) => item.key ?? item.value;
+</script>
+
+{#snippet renderItem(item: TItem)}
+  <ComboboxPrimitive.Item {item}>
+    {#snippet children({ props, selected })}
+      {#if itemSnippet}
+        {@render itemSnippet({ item, props })}
+      {:else}
+        <div {...props}>
+          {#if item.icon}
+            <item.icon width={16} height={16} />
+          {/if}
+          {item.label ?? item.value}
+          {#if item.shortcut && item.shortcut.length > 0}
+            <Kbd.Group>
+              {#each item.shortcut as shortcut (shortcut)}
+                <Kbd.Root>{shortcut}</Kbd.Root>
+              {/each}
+            </Kbd.Group>
+          {/if}
+          {#if selected}
+            <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 }}
+            >
+              <Icon.Checkmark class="cgui:ms-auto" width={16} height={16} />
+            </span>
+          {/if}
+        </div>
+      {/if}
+    {/snippet}
+  </ComboboxPrimitive.Item>
+{/snippet}
+
+<ComboboxPrimitive.Root
+  bind:open
+  bind:value={value as never}
+  bind:searchValue
+  {type}
+  {items}
+  {placeholder}
+  {allowDeselect}
+  {closeOnSelect}
+  {onSelect}
+  {...restProps}
+>
+  <ComboboxPrimitive.Trigger
+    class={triggerClass}
+    {size}
+    {variant}
+    {rounded}
+    {fullWidth}
+    {clearable}
+    trigger={triggerSnippet}
+    label={labelSnippet as never}
+  />
+
+  <ComboboxPrimitive.Portal disabled={portalDisabled}>
+    <ComboboxPrimitive.Content class={contentClass}>
+      <ComboboxPrimitive.Input placeholder={searchPlaceholder} />
+
+      <ComboboxPrimitive.List {maxContentHeight}>
+        <ComboboxPrimitive.Viewport>
+          <ComboboxPrimitive.Empty {empty} />
+
+          {#each groupedItems.items.current as [groupKey, groupItems] (groupKey || groupedItems.ungroupedKey)}
+            {#if groupKey}
+              {@const group = groupedItems.map.current.get(groupKey)}
+              <ComboboxPrimitive.Group value={group?.value}>
+                <ComboboxPrimitive.GroupHeading>{group?.label ?? groupKey}</ComboboxPrimitive.GroupHeading>
+
+                <ComboboxPrimitive.GroupItems>
+                  {#each groupItems as item (getItemKey(item))}
+                    {@render renderItem(item)}
+                  {/each}
+                </ComboboxPrimitive.GroupItems>
+
+                {#if group?.separator}
+                  <ComboboxPrimitive.Separator />
+                {/if}
+              </ComboboxPrimitive.Group>
+            {:else}
+              <ComboboxPrimitive.Group value="__ungrouped__">
+                {#each groupItems as item (getItemKey(item))}
+                  {@render renderItem(item)}
+                {/each}
+              </ComboboxPrimitive.Group>
+            {/if}
+          {/each}
+        </ComboboxPrimitive.Viewport>
+      </ComboboxPrimitive.List>
+    </ComboboxPrimitive.Content>
+  </ComboboxPrimitive.Portal>
+</ComboboxPrimitive.Root>

package/dist/composed/combobox/root/combobox.root.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ComboboxItem, ComboboxProps } from '../types.js';
+declare function $$render<TItem extends ComboboxItem>(): {
+    props: ComboboxProps<TItem>;
+    exports: {};
+    bindings: "value" | "open" | "searchValue";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TItem extends ComboboxItem> {
+    props(): ReturnType<typeof $$render<TItem>>['props'];
+    events(): ReturnType<typeof $$render<TItem>>['events'];
+    slots(): ReturnType<typeof $$render<TItem>>['slots'];
+    bindings(): "value" | "open" | "searchValue";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TItem extends ComboboxItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TItem>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TItem>['props']>, ReturnType<__sveltets_Render<TItem>['events']>, ReturnType<__sveltets_Render<TItem>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TItem>['bindings']>;
+    } & ReturnType<__sveltets_Render<TItem>['exports']>;
+    <TItem extends ComboboxItem>(internal: unknown, props: ReturnType<__sveltets_Render<TItem>['props']> & {}): ReturnType<__sveltets_Render<TItem>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<TItem extends ComboboxItem> = InstanceType<typeof Combobox<TItem>>;
+export default Combobox;

package/dist/composed/combobox/root/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Async } from '../async/combobox.async.svelte';
+export { default as Creatable } from '../creatable/combobox.creatable.svelte';
+export { default as Root } from './combobox.root.svelte';

package/dist/composed/combobox/root/index.js

@@ -0,0 +1,3 @@
+export { default as Async } from '../async/combobox.async.svelte';
+export { default as Creatable } from '../creatable/combobox.creatable.svelte';
+export { default as Root } from './combobox.root.svelte';

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

@@ -0,0 +1,2 @@
+export { comboboxTriggerVariants } from '../../primitives/combobox/styles.js';
+export type { ComboboxTriggerVariantsProps } from '../../primitives/combobox/styles.js';

package/dist/composed/combobox/styles.js

@@ -0,0 +1 @@
+export { comboboxTriggerVariants } from '../../primitives/combobox/styles.js';

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

@@ -0,0 +1,129 @@
+import type { SELECTION_TYPE } from '../../internal/constants/selection-type.js';
+import type { Snippet } from 'svelte';
+import type { CommandGroup, CommandItem, CommandProps } from '../command/index.js';
+import type { PrimitivePopoverRootProps } from '../../primitives/popover/types.js';
+import type { ComboboxTriggerVariantsProps } from './styles.js';
+export type ComboboxRootProps = PrimitivePopoverRootProps;
+export type ComboboxItem = CommandItem & {
+    key?: string | number;
+};
+/**
+ * Base props shared by both single and multiple selection modes
+ */
+type ComboboxBaseProps<TItem extends ComboboxItem = ComboboxItem> = PrimitivePopoverRootProps & ComboboxTriggerVariantsProps & {
+    items?: TItem[];
+    groups?: CommandGroup[];
+    empty?: CommandProps['empty'];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    portalDisabled?: boolean;
+    allowDeselect?: boolean;
+    triggerClass?: string;
+    contentClass?: string;
+    closeOnSelect?: boolean;
+    maxContentHeight?: string;
+    clearable?: boolean;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+        displayValue: string;
+    }]>;
+    item?: Snippet<[{
+        item: TItem;
+        props: Record<string, unknown>;
+    }]>;
+    /** Custom label renderer for trigger display */
+    label?: Snippet<[{
+        placeholder: string;
+        value: string | string[];
+        selectedItems: TItem[];
+    }]>;
+    /** Callback when selection changes */
+    onSelect?: (value: string | string[], item: TItem | null) => void;
+};
+type ComboboxSingleProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxBaseProps<TItem> & {
+    type?: typeof SELECTION_TYPE.SINGLE;
+    value?: string;
+};
+type ComboboxMultipleProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxBaseProps<TItem> & {
+    type: typeof SELECTION_TYPE.MULTIPLE;
+    value?: string[];
+};
+export type ComboboxProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxSingleProps<TItem> | ComboboxMultipleProps<TItem>;
+type ComboboxCreatableBaseProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxBaseProps<TItem> & {
+    createLabel?: (inputValue: string) => string;
+    isCreatable?: (inputValue: string, items: TItem[]) => boolean;
+    onCreate: (inputValue: string) => TItem | Promise<TItem>;
+};
+type ComboboxCreatableSingleProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxCreatableBaseProps<TItem> & {
+    type?: typeof SELECTION_TYPE.SINGLE;
+    value?: string;
+};
+type ComboboxCreatableMultipleProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxCreatableBaseProps<TItem> & {
+    type: typeof SELECTION_TYPE.MULTIPLE;
+    value?: string[];
+};
+export type ComboboxCreatableProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxCreatableSingleProps<TItem> | ComboboxCreatableMultipleProps<TItem>;
+/**
+ * Async Combobox Types
+ */
+export type ComboboxAsyncLoadParams = {
+    page: number;
+    pageSize: number;
+    search: string;
+    signal: AbortSignal;
+    dependency?: unknown;
+};
+export type ComboboxAsyncLoadResult<TItem extends ComboboxItem> = {
+    items: TItem[];
+    hasMore: boolean;
+};
+export type ComboboxAsyncLoader<TItem extends ComboboxItem = ComboboxItem> = (params: ComboboxAsyncLoadParams) => Promise<ComboboxAsyncLoadResult<TItem>>;
+/** @deprecated Use ComboboxAsyncLoadParams instead. */
+export type ComboboxAsyncCallbackParams = ComboboxAsyncLoadParams;
+/** @deprecated Use ComboboxAsyncLoadResult instead. */
+export type ComboboxAsyncCallbackResult<TItem extends ComboboxItem> = ComboboxAsyncLoadResult<TItem>;
+/** @deprecated Use ComboboxAsyncLoader instead. */
+export type ComboboxAsyncCallback<TItem extends ComboboxItem = ComboboxItem> = ComboboxAsyncLoader<TItem>;
+type ComboboxAsyncLoadProp<TItem extends ComboboxItem> = {
+    /** Preferred async loader API */
+    loadItems: ComboboxAsyncLoader<TItem>;
+    callback?: never;
+} | {
+    /** @deprecated Use loadItems instead. Kept for backwards compatibility. */
+    callback: ComboboxAsyncLoader<TItem>;
+    loadItems?: never;
+};
+type ComboboxAsyncBaseProps<TItem extends ComboboxItem> = Omit<ComboboxBaseProps<TItem>, 'items' | 'item' | 'onSelect'> & ComboboxAsyncLoadProp<TItem> & {
+    items?: TItem[];
+    /** Cache of selected item objects, useful when selected values are not in the currently loaded async page. */
+    selectedItems?: TItem[];
+    item?: Snippet<[{
+        item: TItem;
+        props: Record<string, unknown>;
+    }]>;
+    onSelect?: (value: string | string[], item: TItem | null) => void;
+    loading?: Snippet;
+    pageSize?: number;
+    loadImmediate?: boolean;
+    groups?: CommandGroup[];
+    /** Preferred name */
+    debounceMs?: number;
+    /** @deprecated Use debounceMs instead. */
+    searchDebounce?: number;
+    dependsOn?: () => unknown;
+    clearOnDependencyChange?: boolean;
+    onDependencyChange?: (value: unknown) => void;
+};
+type ComboboxAsyncSingleProps<TItem extends ComboboxItem> = ComboboxAsyncBaseProps<TItem> & {
+    /** Selection mode (default: 'single') */
+    type?: 'single';
+    value?: string;
+};
+type ComboboxAsyncMultipleProps<TItem extends ComboboxItem> = ComboboxAsyncBaseProps<TItem> & {
+    /** Selection mode */
+    type: 'multiple';
+    value?: string[];
+};
+export type ComboboxAsyncProps<TItem extends ComboboxItem> = ComboboxAsyncSingleProps<TItem> | ComboboxAsyncMultipleProps<TItem>;
+export {};

package/dist/composed/combobox/types.js

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

package/dist/composed/command/index.d.ts

@@ -0,0 +1,2 @@
+export * as Command from './root/index.js';
+export type * from './types.js';