@casinogate/ui 1.10.15 → 1.10.17

package/dist/assets/css/root.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -204,7 +204,7 @@
     top: calc(var(--cgui-spacing) * 0);
   }
   .cgui\:top-1\/2 {
-    top: calc(1/2 * 100%);
+    top: calc(1 / 2 * 100%);
   }
   .cgui\:right-0 {
     right: calc(var(--cgui-spacing) * 0);
@@ -222,7 +222,7 @@
     left: calc(var(--cgui-spacing) * 0);
   }
   .cgui\:left-1\/2 {
-    left: calc(1/2 * 100%);
+    left: calc(1 / 2 * 100%);
   }
   .cgui\:z-\(--cg-ui-z-index-dialog\) {
     z-index: var(--cg-ui-z-index-dialog);
@@ -324,8 +324,8 @@
     display: inline-flex;
   }
   .cgui\:size-1\/2 {
-    width: calc(1/2 * 100%);
-    height: calc(1/2 * 100%);
+    width: calc(1 / 2 * 100%);
+    height: calc(1 / 2 * 100%);
   }
   .cgui\:size-3 {
     width: calc(var(--cgui-spacing) * 3);
@@ -623,11 +623,11 @@
     transform-origin: var(--bits-select-content-transform-origin);
   }
   .cgui\:-translate-x-1\/2 {
-    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .cgui\:-translate-y-1\/2 {
-    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
   .cgui\:-scale-x-\[1\] {
@@ -1628,6 +1628,11 @@
       background-color: var(--cg-ui-color-surface-lightest);
     }
   }
+  .cgui\:data-selected\:text-fg-primary {
+    &[data-selected] {
+      color: var(--cg-ui-color-fg-primary);
+    }
+  }
   .cgui\:data-\[active\=\"\"\]\:bg-surface-white {
     &[data-active=""] {
       background-color: var(--cg-ui-color-surface-white);
@@ -2169,7 +2174,7 @@
   .cgui\:active\:\[\&_span\]\:w-2\/3 {
     &:active {
       & span {
-        width: calc(2/3 * 100%);
+        width: calc(2 / 3 * 100%);
       }
     }
   }

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

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

package/dist/components/combobox/index.js

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

package/dist/components/combobox/{combobox.async.svelte → presets/async/combobox.async.svelte}

@@ -1,21 +1,24 @@
 <script lang="ts">
-  import type { CommandCollection, CommandItem } from '../command/index.js';
-  import type { ComboboxAsyncProps } from './types.js';
+  import type { CommandCollection, CommandItem } from '../../../command/index.js';
+  import type { ComboboxAsyncProps } from '../../types.js';
 
-  import { boolAttr } from '../../internal/utils/attrs.js';
-  import { cn } from '../../internal/utils/common.js';
+  import { SELECTION_TYPE } from '../../../../internal/constants/selection-type.js';
+  import { boolAttr } from '../../../../internal/utils/attrs.js';
+  import { cn, noop } from '../../../../internal/utils/common.js';
   import { Debounced, watch } from 'runed';
-  import type { AnyFn } from 'svelte-toolbelt';
-  import { onMountEffect } from 'svelte-toolbelt';
+  import { afterTick, boxWith, onMountEffect } from 'svelte-toolbelt';
   import type { Attachment } from 'svelte/attachments';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { CommandApi, CommandPrimitive } from '../command/index.js';
-  import { Icon, Icon as IconComponent } from '../icons/index.js';
-  import { Kbd } from '../kbd/index.js';
-  import { PopoverPrimitive } from '../popover/index.js';
-  import { Spinner } from '../spinner/index.js';
-  import { comboboxTriggerVariants } from './styles.js';
+  import { CommandApi, CommandPrimitive } from '../../../command/index.js';
+  import { Icon, Icon as IconComponent } from '../../../icons/index.js';
+  import { Kbd } from '../../../kbd/index.js';
+  import { PopoverPrimitive } from '../../../popover/index.js';
+  import { Spinner } from '../../../spinner/index.js';
+  import { comboboxTriggerVariants } from '../../styles.js';
+  import { useDisplayValue } from '../use-display-value.svelte.js';
+  import { useGroupedItems } from '../use-grouped-items.svelte.js';
+  import { useSelectedItems } from '../use-selected-items.svelte.js';
 
   let {
     open = $bindable(false),
@@ -50,7 +53,7 @@
     searchDebounce = 300,
     dependsOn,
     clearOnDependencyChange = true,
-    onSelect,
+    onSelect = noop,
 
     ...restProps
   }: ComboboxAsyncProps = $props();
@@ -59,9 +62,18 @@
 
   // Initialize value based on type
   if (value === undefined) {
-    value = isMultiple ? ([] as string[]) : '';
+    const defaultValue = type === SELECTION_TYPE.SINGLE ? '' : [];
+    value = defaultValue;
   }
 
+  watch.pre(
+    () => value,
+    () => {
+      if (value !== undefined) return;
+      value = type === SELECTION_TYPE.SINGLE ? '' : [];
+    }
+  );
+
   // let items = $state<CommandItem[]>(initialItems);
   let isLoading = $state(false);
   let isSearching = $state(false);
@@ -91,45 +103,27 @@
   };
 
   const collection = $derived(createCollection(items));
-  const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
-  const groupedItems = $derived(collection.group());
-
-  const isSelected = (itemValue: string): boolean => {
-    if (Array.isArray(value)) return value.includes(itemValue);
-    return value === itemValue;
-  };
-
-  const displayValue = $derived.by(() => {
-    if (typeof value === 'string' && value.trim() !== '') {
-      const item = items.find((i) => i.value === value);
-      return item?.label ?? value;
-    }
-
-    if (Array.isArray(value) && value.length > 0) {
-      return value
-        .map((v) => {
-          const item = items.find((i) => i.value === v);
-          return item?.label ?? v;
-        })
-        .join(', ');
-    }
 
-    return placeholder;
+  const groupedItems = useGroupedItems({
+    collection: boxWith(() => collection),
   });
 
-  const selectedItems = $derived.by(() => {
-    if (typeof value === 'string' && value.trim() !== '') {
-      const item = items.find((i) => i.value === value);
-      return item ? [item] : [];
-    }
-
-    if (Array.isArray(value) && value.length > 0) {
-      return value.map((v) => items.find((i) => i.value === v)).filter((i): i is CommandItem => i !== undefined);
-    }
+  const displayValue = useDisplayValue({
+    value: boxWith(() => value!),
+    collection: boxWith(() => collection),
+    placeholder: boxWith(() => placeholder),
+  });
 
-    return [];
+  const selectedItems = useSelectedItems({
+    value: boxWith(() => value!),
+    collection: boxWith(() => collection),
   });
 
+  const isSelected = (itemValue: string): boolean => {
+    if (Array.isArray(value)) return value.includes(itemValue);
+    return value === itemValue;
+  };
+
   const isPlaceholder = $derived.by(() => {
     if (Array.isArray(value)) return value.length === 0;
     return typeof value === 'string' && value.trim() === '';
@@ -237,34 +231,6 @@
     }
   );
 
-  // onSelect callback
-  let previousValue = $state<string | string[]>(
-    isMultiple ? [...((value as string[]) ?? [])] : ((value as string) ?? '')
-  );
-
-  watch(
-    () => value,
-    (newValue) => {
-      if (!onSelect) {
-        previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
-        return;
-      }
-
-      if (typeof newValue === 'string') {
-        const item = newValue ? (items.find((i) => i.value === newValue) ?? null) : null;
-        onSelect(newValue, item);
-      } else if (Array.isArray(newValue)) {
-        const prev = Array.isArray(previousValue) ? previousValue : [];
-        const added = newValue.find((v) => !prev.includes(v));
-        const item = added ? (items.find((i) => i.value === added) ?? null) : null;
-        onSelect(newValue, item);
-      }
-
-      previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
-    },
-    { lazy: true }
-  );
-
   const loadMore = () => {
     if (!isLoading && hasMore) {
       fetchData(currentPage + 1, searchValue, true);
@@ -301,30 +267,35 @@
       behavior: 'smooth',
     });
   };
-
-  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, itemOnSelect?: AnyFn) => () => {
-    itemOnSelect?.();
-
+  function onSelectItem(item: Omit<CommandItem, 'onSelect'>) {
     if (Array.isArray(value)) {
+      let result = value;
       if (value.includes(item.value)) {
-        value = allowDeselect ? value.filter((v) => v !== item.value) : value;
+        result = allowDeselect ? value.filter((v) => v !== item.value) : value;
       } else {
-        value = [...value, item.value];
+        result = [...value, item.value];
       }
+      onSelect(result, item);
+      value = result;
     } else {
+      let result = value;
       if (item.value === value) {
-        value = allowDeselect ? '' : value;
+        result = allowDeselect ? '' : value;
       } else {
-        value = item.value;
+        result = item.value;
       }
+      onSelect(result, item);
+      value = result;
     }
 
-    const shouldClose = closeOnSelect ?? !isMultiple;
-    if (shouldClose) {
-      open = false;
-    }
-  };
+    afterTick(() => {
+      const shouldClose = closeOnSelect ?? !isMultiple;
 
+      if (shouldClose) {
+        open = false;
+      }
+    });
+  }
   const isNotEmpty = $derived.by(() => {
     if (Array.isArray(value)) return value.length > 0;
 
@@ -355,9 +326,9 @@
   {#if labelSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
       {@render labelSnippet({
-        placeholder: displayValue,
+        placeholder: displayValue.current,
         value: isMultiple ? (value as string[]) : (value as string),
-        selectedItems,
+        selectedItems: selectedItems.current,
       })}
 
       {@render clearBtn()}
@@ -365,12 +336,12 @@
   {:else if triggerSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
       {#snippet child({ props })}
-        {@render triggerSnippet?.({ props, displayValue })}
+        {@render triggerSnippet?.({ props, displayValue: displayValue.current })}
       {/snippet}
     </PopoverPrimitive.Trigger>
   {:else}
     <PopoverPrimitive.Trigger {...triggerProps}>
-      {displayValue}
+      {displayValue.current}
 
       {@render clearBtn()}
     </PopoverPrimitive.Trigger>
@@ -378,22 +349,21 @@
 {/snippet}
 
 {#snippet renderItem(item: CommandItem)}
-  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: itemOnSelect, ...restItem } = item}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: _, ...restItem } = item}
   {@const itemAttrs = {
     value: itemValue,
-    onSelect: onSelectItem(item, itemOnSelect),
-    'data-selected': boolAttr(isSelected(itemValue)),
+    onSelect: () => onSelectItem(item),
     ...restItem,
   }}
 
   {#if itemSnippet}
-    <CommandPrimitive.Item {...itemAttrs}>
+    <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
       {#snippet child({ props })}
         {@render itemSnippet?.({ item, props })}
       {/snippet}
     </CommandPrimitive.Item>
   {:else}
-    <CommandPrimitive.Item {...itemAttrs}>
+    <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
       {#if Icon}
         <Icon width={16} height={16} />
       {/if}
@@ -457,9 +427,9 @@
                 {@render loadingSpinner()}
               {/if}
             {:else if hasResults}
-              {#each groupedItems as [groupKey, groupItems] (groupKey || '__ungrouped__')}
+              {#each groupedItems.items.current as [groupKey, groupItems] (groupKey || '__ungrouped__')}
                 {#if groupKey}
-                  {@const group = groupMap.get(groupKey)}
+                  {@const group = groupedItems.map.current.get(groupKey)}
                   <CommandPrimitive.Group value={group?.value}>
                     <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
 
@@ -474,9 +444,11 @@
                     {/if}
                   </CommandPrimitive.Group>
                 {:else}
-                  {#each groupItems as item (item.value)}
-                    {@render renderItem(item)}
-                  {/each}
+                  <CommandPrimitive.Group value="__ungrouped__">
+                    {#each groupItems as item (item.value)}
+                      {@render renderItem(item)}
+                    {/each}
+                  </CommandPrimitive.Group>
                 {/if}
               {/each}
 

package/dist/components/combobox/{combobox.async.svelte.d.ts → presets/async/combobox.async.svelte.d.ts}

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

package/dist/components/combobox/{exports.d.ts → presets/async/index.d.ts}

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

package/dist/components/combobox/{exports.js → presets/async/index.js}

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

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

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

package/dist/components/combobox/presets/index.js

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

package/dist/components/combobox/{combobox.svelte → presets/root/combobox.svelte}

@@ -1,16 +1,20 @@
 <script lang="ts">
-  import { boolAttr } from '../../internal/utils/attrs.js';
-  import { cn } from '../../internal/utils/common.js';
+  import { SELECTION_TYPE } from '../../../../internal/constants/selection-type.js';
+  import { boolAttr } from '../../../../internal/utils/attrs.js';
+  import { cn, noop } from '../../../../internal/utils/common.js';
   import { watch } from 'runed';
-  import type { AnyFn } from 'svelte-toolbelt';
+  import { afterTick, boxWith } from 'svelte-toolbelt';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { CommandPrimitive, type CommandItem } from '../command/index.js';
-  import { Icon, 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';
+  import { CommandPrimitive, type CommandItem } from '../../../command/index.js';
+  import { Icon, 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';
+  import { useDisplayValue } from '../use-display-value.svelte.js';
+  import { useGroupedItems } from '../use-grouped-items.svelte.js';
+  import { useSelectedItems } from '../use-selected-items.svelte.js';
 
   let {
     open = $bindable(false),
@@ -34,57 +38,38 @@
     fullWidth = true,
     closeOnSelect,
     maxContentHeight,
-    onSelect,
+    onSelect = noop,
     ...restProps
   }: ComboboxProps = $props();
 
-  const isMultiple = $derived(type === 'multiple');
+  const isMultiple = $derived.by(() => type === SELECTION_TYPE.MULTIPLE);
 
-  // Initialize value based on type
   if (value === undefined) {
-    value = isMultiple ? ([] as string[]) : '';
+    const defaultValue = type === SELECTION_TYPE.SINGLE ? '' : [];
+    value = defaultValue;
   }
 
-  const groupMap = $derived(new Map(collection.groups.map((g) => [g.value, g])));
-
-  const groupedItems = $derived(collection.group());
-
-  const isSelected = (itemValue: string): boolean => {
-    if (Array.isArray(value)) return value.includes(itemValue);
-    return value === itemValue;
-  };
-
-  const displayValue = $derived.by(() => {
-    if (typeof value === 'string' && value.trim() !== '') {
-      const item = collection.items.find((i) => i.value === value);
-      return item?.label ?? value;
-    }
-
-    if (Array.isArray(value) && value.length > 0) {
-      return value
-        .map((v) => {
-          const item = collection.items.find((i) => i.value === v);
-          return item?.label ?? v;
-        })
-        .join(', ');
+  watch.pre(
+    () => value,
+    () => {
+      if (value !== undefined) return;
+      value = type === SELECTION_TYPE.SINGLE ? '' : [];
     }
+  );
 
-    return placeholder;
+  const groupedItems = useGroupedItems({
+    collection: boxWith(() => collection),
   });
 
-  const selectedItems = $derived.by(() => {
-    if (typeof value === 'string' && value.trim() !== '') {
-      const item = collection.items.find((i) => i.value === value);
-      return item ? [item] : [];
-    }
-
-    if (Array.isArray(value) && value.length > 0) {
-      return value
-        .map((v) => collection.items.find((i) => i.value === v))
-        .filter((i): i is CommandItem => i !== undefined);
-    }
+  const displayValue = useDisplayValue({
+    value: boxWith(() => value!),
+    collection: boxWith(() => collection),
+    placeholder: boxWith(() => placeholder),
+  });
 
-    return [];
+  const selectedItems = useSelectedItems({
+    value: boxWith(() => value!),
+    collection: boxWith(() => collection),
   });
 
   const isPlaceholder = $derived.by(() => {
@@ -92,61 +77,46 @@
     return typeof value === 'string' && value.trim() === '';
   });
 
-  let previousValue = $state<string | string[]>(
-    isMultiple ? [...((value as string[]) ?? [])] : ((value as string) ?? '')
-  );
-
-  watch(
-    () => value,
-    (newValue) => {
-      if (!onSelect) {
-        previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
-        return;
-      }
-
-      if (typeof newValue === 'string') {
-        const item = newValue ? (collection.items.find((i) => i.value === newValue) ?? null) : null;
-        onSelect(newValue, item);
-      } else if (Array.isArray(newValue)) {
-        const prev = Array.isArray(previousValue) ? previousValue : [];
-        const added = newValue.find((v) => !prev.includes(v));
-        const item = added ? (collection.items.find((i) => i.value === added) ?? null) : null;
-        onSelect(newValue, item);
-      }
-
-      previousValue = isMultiple ? [...((newValue as string[]) ?? [])] : ((newValue as string) ?? '');
-    },
-    { lazy: true }
-  );
+  const isNotEmpty = $derived.by(() => {
+    if (Array.isArray(value)) return value.length > 0;
 
-  const onSelectItem = (item: Omit<CommandItem, 'onSelect'>, itemOnSelect?: AnyFn) => () => {
-    itemOnSelect?.();
+    return typeof value === 'string' && value.trim() !== '';
+  });
 
+  function onSelectItem(item: Omit<CommandItem, 'onSelect'>) {
     if (Array.isArray(value)) {
+      let result = value;
       if (value.includes(item.value)) {
-        value = allowDeselect ? value.filter((v) => v !== item.value) : value;
+        result = allowDeselect ? value.filter((v) => v !== item.value) : value;
       } else {
-        value = [...value, item.value];
+        result = [...value, item.value];
       }
+      onSelect(result, item);
+      value = result;
     } else {
+      let result = value;
       if (item.value === value) {
-        value = allowDeselect ? '' : value;
+        result = allowDeselect ? '' : value;
       } else {
-        value = item.value;
+        result = item.value;
       }
+      onSelect(result, item);
+      value = result;
     }
 
-    const shouldClose = closeOnSelect ?? !isMultiple;
-    if (shouldClose) {
-      open = false;
-    }
-  };
+    afterTick(() => {
+      const shouldClose = closeOnSelect ?? !isMultiple;
 
-  const isNotEmpty = $derived.by(() => {
-    if (Array.isArray(value)) return value.length > 0;
+      if (shouldClose) {
+        open = false;
+      }
+    });
+  }
 
-    return typeof value === 'string' && value.trim() !== '';
-  });
+  function isSelected(itemValue: string): boolean {
+    if (Array.isArray(value)) return value.includes(itemValue);
+    return value === itemValue;
+  }
 </script>
 
 {#snippet clearBtn()}
@@ -168,22 +138,27 @@
   {@const triggerProps = {
     class: cn(comboboxTriggerVariants({ variant, size, rounded, fullWidth, class: triggerClass })),
     'data-placeholder': boolAttr(isPlaceholder),
+    'aria-expanded': open,
   }}
   {#if labelSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
-      {@render labelSnippet({ placeholder: displayValue, value: isMultiple ? (value as string[]) : (value as string), selectedItems })}
+      {@render labelSnippet({
+        placeholder: displayValue.current,
+        value: isMultiple ? (value as string[]) : (value as string),
+        selectedItems: selectedItems.current,
+      })}
 
       {@render clearBtn()}
     </PopoverPrimitive.Trigger>
   {:else if triggerSnippet}
     <PopoverPrimitive.Trigger {...triggerProps}>
       {#snippet child({ props })}
-        {@render triggerSnippet?.({ props, displayValue })}
+        {@render triggerSnippet?.({ props, displayValue: displayValue.current })}
       {/snippet}
     </PopoverPrimitive.Trigger>
   {:else}
     <PopoverPrimitive.Trigger {...triggerProps}>
-      {displayValue}
+      {displayValue.current}
 
       {@render clearBtn()}
     </PopoverPrimitive.Trigger>
@@ -191,22 +166,21 @@
 {/snippet}
 
 {#snippet renderItem(item: CommandItem)}
-  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: itemOnSelect, ...restItem } = item}
+  {@const { value: itemValue, label, icon: Icon, shortcut, onSelect: _, ...restItem } = item}
   {@const itemAttrs = {
     value: itemValue,
-    onSelect: onSelectItem(item, itemOnSelect),
-    'data-selected': boolAttr(isSelected(itemValue)),
+    onSelect: () => onSelectItem(item),
     ...restItem,
   }}
 
   {#if itemSnippet}
-    <CommandPrimitive.Item {...itemAttrs}>
+    <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
       {#snippet child({ props })}
         {@render itemSnippet?.({ item, props })}
       {/snippet}
     </CommandPrimitive.Item>
   {:else}
-    <CommandPrimitive.Item {...itemAttrs}>
+    <CommandPrimitive.Item {...itemAttrs} data-selected={boolAttr(isSelected(itemValue))}>
       {#if Icon}
         <Icon width={16} height={16} />
       {/if}
@@ -242,9 +216,9 @@
           <CommandPrimitive.Viewport>
             <CommandPrimitive.Empty>No results found</CommandPrimitive.Empty>
 
-            {#each groupedItems as [groupKey, items] (groupKey || '__ungrouped__')}
+            {#each groupedItems.items.current as [groupKey, items] (groupKey || '__ungrouped__')}
               {#if groupKey}
-                {@const group = groupMap.get(groupKey)}
+                {@const group = groupedItems.map.current.get(groupKey)}
                 <CommandPrimitive.Group value={group?.value}>
                   <CommandPrimitive.GroupHeading>{group?.label ?? groupKey}</CommandPrimitive.GroupHeading>
 
@@ -259,9 +233,11 @@
                   {/if}
                 </CommandPrimitive.Group>
               {:else}
-                {#each items as item (item.value)}
-                  {@render renderItem(item)}
-                {/each}
+                <CommandPrimitive.Group value="__ungrouped__">
+                  {#each items as item (item.value)}
+                    {@render renderItem(item)}
+                  {/each}
+                </CommandPrimitive.Group>
               {/if}
             {/each}
           </CommandPrimitive.Viewport>

package/dist/components/combobox/{combobox.svelte.d.ts → presets/root/combobox.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { ComboboxProps } from './types.js';
+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/presets/root/index.d.ts

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

package/dist/components/combobox/presets/root/index.js

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

package/dist/components/combobox/presets/use-display-value.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { CommandCollection } from '../../command/types.js';
+import { type ReadableBoxedValues } from 'svelte-toolbelt';
+type Opts = ReadableBoxedValues<{
+    value: string | string[];
+    collection: CommandCollection;
+    placeholder: string;
+}>;
+export declare const useDisplayValue: (opts: Opts) => import("svelte-toolbelt").ReadableBox<string>;
+export {};

package/dist/components/combobox/presets/use-display-value.svelte.js

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

package/dist/components/combobox/presets/use-grouped-items.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CommandCollection } from '../../command/types.js';
+import { type ReadableBoxedValues } from 'svelte-toolbelt';
+type Opts = ReadableBoxedValues<{
+    collection: CommandCollection;
+}>;
+export declare const useGroupedItems: (opts: Opts) => {
+    map: import("svelte-toolbelt").ReadableBox<Map<string, import("../../command/types.js").CommandGroup>>;
+    items: import("svelte-toolbelt").ReadableBox<[string, import("../../command/types.js").CommandItem[]][]>;
+};
+export {};

package/dist/components/combobox/presets/use-grouped-items.svelte.js

@@ -0,0 +1,10 @@
+import { boxWith } from 'svelte-toolbelt';
+export const useGroupedItems = (opts) => {
+    const { collection } = opts;
+    const groupedItems = $derived.by(() => collection.current.group());
+    const groupedMap = $derived.by(() => new Map(collection.current.groups.map((g) => [g.value, g])));
+    return {
+        map: boxWith(() => groupedMap),
+        items: boxWith(() => groupedItems),
+    };
+};

package/dist/components/combobox/presets/use-selected-items.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CommandCollection, CommandItem } from '../../command/types.js';
+import { type ReadableBoxedValues } from 'svelte-toolbelt';
+type Opts = ReadableBoxedValues<{
+    value: string | string[];
+    collection: CommandCollection;
+}>;
+export declare const useSelectedItems: (opts: Opts) => import("svelte-toolbelt").ReadableBox<CommandItem[]>;
+export {};

package/dist/components/combobox/presets/use-selected-items.svelte.js

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

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

@@ -1,3 +1,4 @@
+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 '../popover/types.js';
@@ -33,13 +34,11 @@ type ComboboxBaseProps = PrimitivePopoverRootProps & ComboboxTriggerVariantsProp
     onSelect?: (value: string | string[], item: CommandItem | null) => void;
 };
 type ComboboxSingleProps = ComboboxBaseProps & {
-    /** Selection mode (default: 'single') */
-    type?: 'single';
+    type: typeof SELECTION_TYPE.SINGLE;
     value?: string;
 };
 type ComboboxMultipleProps = ComboboxBaseProps & {
-    /** Selection mode */
-    type: 'multiple';
+    type: typeof SELECTION_TYPE.MULTIPLE;
     value?: string[];
 };
 export type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;

package/dist/components/command/styles.js

@@ -57,6 +57,7 @@ export const commandItemVariants = tv({
     base: [
         'cgui:flex cgui:items-center cgui:gap-2 cgui:px-2 cgui:py-1.5',
         'cgui:aria-selected:bg-surface-lightest cgui:aria-selected:text-fg-primary',
+        'cgui:data-selected:text-fg-primary',
         'cgui:cursor-default  cgui:text-body cgui:select-none cgui:outline-hidden cgui:rounded-xs',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:[&_svg:not([class*="text-"])]:text-muted-foreground cgui:relative',

package/dist/components/select/select.async.svelte

@@ -111,9 +111,7 @@
     }
 
     if (Array.isArray(value) && value.length > 0) {
-      return value
-        .map((v) => collection.find(v))
-        .filter((i): i is SelectItem => i !== undefined);
+      return value.map((v) => collection.find(v)).filter((i): i is SelectItem => i !== undefined);
     }
 
     return [];
@@ -322,12 +320,6 @@
   </div>
 {/snippet}
 
-{#if hasMore}
-  {#key items.length}
-    <div class="cgui:h-1 cgui:w-full" {@attach anchorAttachment}></div>
-  {/key}
-{/if}
-
 {#snippet loadingMore()}
   <div class="cgui:p-2 cgui:flex cgui:items-center cgui:justify-center cgui:text-icon-default">
     <Spinner />
@@ -395,6 +387,12 @@
             {@render loadingMore()}
           {/if}
 
+          {#if hasMore}
+            {#key items.length}
+              <div class="cgui:h-1 cgui:w-full" {@attach anchorAttachment}></div>
+            {/key}
+          {/if}
+
           {#if !hasMore && items.length > pageSize}
             <button
               class="cgui:w-full cgui:flex cgui:justify-center cgui:cursor-pointer cgui:items-center cgui:text-xs cgui:text-icon-default cgui:underline cgui:hover:no-underline"

package/dist/internal/constants/selection-type.d.ts

@@ -0,0 +1,5 @@
+export declare const SELECTION_TYPE: {
+    readonly SINGLE: "single";
+    readonly MULTIPLE: "multiple";
+};
+export type SelectionType = (typeof SELECTION_TYPE)[keyof typeof SELECTION_TYPE];

package/dist/internal/constants/selection-type.js

@@ -0,0 +1,4 @@
+export const SELECTION_TYPE = {
+    SINGLE: 'single',
+    MULTIPLE: 'multiple',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.10.15",
+  "version": "1.10.17",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",