@casinogate/ui 1.5.2 → 1.5.3

package/dist/assets/css/root.css

@@ -1371,6 +1371,11 @@
       padding-right: calc(var(--cgui-spacing) * 14);
     }
   }
+  .cgui\:data-\[highlighted\]\:bg-surface-lightest {
+    &[data-highlighted] {
+      background-color: var(--cg-ui-palette-neutral-10);
+    }
+  }
   .cgui\:data-\[orientation\=horizontal\]\:h-px {
     &[data-orientation="horizontal"] {
       height: 1px;

package/dist/components/select/components/select.content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/common.js';
   import { Select as SelectPrimitive } from 'bits-ui';
+  import type { Attachment } from 'svelte/attachments';
   import { SelectStylesContext } from '../styles.js';
   import type { SelectContentProps } from '../types.js';
 
@@ -11,6 +12,7 @@
     children,
     side = 'bottom',
     forceMount = false,
+    maxContentHeight,
     ...restProps
   }: SelectContentProps = $props();
 
@@ -24,8 +26,24 @@
     side,
     ...restProps,
   });
+
+  const contentStyle = $derived.by(() => {
+    return {
+      ...(maxContentHeight ? { '--cg-ui-max-content-height': maxContentHeight } : {}),
+    };
+  });
+
+  const contentMount: Attachment<HTMLDivElement> = (el) => {
+    $effect.pre(() => {
+      if (!el) return;
+
+      Object.entries(contentStyle).forEach(([key, value]) => {
+        el.style.setProperty(key, value);
+      });
+    });
+  };
 </script>
 
-<SelectPrimitive.Content bind:ref {...attrs}>
+<SelectPrimitive.Content bind:ref {...attrs} {@attach contentMount}>
   {@render children?.()}
 </SelectPrimitive.Content>

package/dist/components/select/components/select.content.svelte.d.ts

@@ -1,4 +1,4 @@
-import { Select as SelectPrimitive } from 'bits-ui';
-declare const Select: import("svelte").Component<Omit<SelectPrimitive.ContentProps, "child">, {}, "ref">;
+import type { SelectContentProps } from '../types.js';
+declare const Select: import("svelte").Component<SelectContentProps, {}, "ref">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

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

package/dist/components/select/exports.js

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

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

@@ -1,3 +1,3 @@
 export * as SelectPrimitive from './exports-primitive.js';
 export * as Select from './exports.js';
-export type { SelectContentProps, SelectGroupHeadingProps, SelectGroupProps, SelectItem, SelectItemData, SelectItemGroup, SelectItemProps, SelectRootProps, SelectTriggerProps, SelectViewportProps, } from './types.js';
+export type { SelectAsyncCallback, SelectAsyncCallbackParams, SelectAsyncCallbackResult, SelectAsyncProps, SelectContentProps, SelectGroupHeadingProps, SelectGroupProps, SelectItem, SelectItemData, SelectItemGroup, SelectItemProps, SelectRootProps, SelectTriggerProps, SelectViewportProps, } from './types.js';

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

@@ -0,0 +1,204 @@
+<script lang="ts">
+  import { Spinner } from '../spinner/index.js';
+  import Content from './components/select.content.svelte';
+  import GroupHeading from './components/select.group-heading.svelte';
+  import Group from './components/select.group.svelte';
+  import Item from './components/select.item.svelte';
+  import Portal from './components/select.portal.svelte';
+  import Root from './components/select.root.svelte';
+  import Trigger from './components/select.trigger.svelte';
+  import Viewport from './components/select.viewport.svelte';
+  import type { SelectAsyncProps, SelectData, SelectItem, SelectItemGroup } from './types.js';
+  import { getItemKey, getLabelFromValue } from './utils/index.js';
+
+  let {
+    value = $bindable(''),
+    open = $bindable(false),
+    empty = 'No results found',
+    maxContentHeight,
+    item,
+    trigger,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    avoidCollisions,
+    collisionPadding,
+    customAnchor,
+    placeholder: placeholderProp,
+    loading,
+    pageSize = 10,
+    callback,
+    ...restProps
+  }: SelectAsyncProps = $props();
+
+  let data = $state<SelectData>([]);
+  let isLoading = $state(false);
+  let hasMore = $state(true);
+  let currentPage = $state(1);
+
+  let error = $state<string | null>(null);
+
+  const placeholder = $derived.by(() => {
+    if (typeof value === 'string' && value.trim() !== '') {
+      const label = getLabelFromValue(value, data);
+      return label ?? value;
+    }
+
+    if (Array.isArray(value) && value.length > 0) {
+      const labels = value.map((v) => getLabelFromValue(v, data) ?? v);
+      return labels.join(', ');
+    }
+
+    if (placeholderProp) return placeholderProp;
+
+    return '';
+  });
+
+  const fetchData = async (page: number, append = false) => {
+    isLoading = true;
+    error = null;
+
+    try {
+      const result = await callback({ page, pageSize });
+
+      if (append) {
+        data = [...data, ...(result.data as any)];
+      } else {
+        data = result.data;
+      }
+
+      currentPage = page;
+      hasMore = result.hasMore;
+      isLoading = false;
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to fetch data';
+    } finally {
+      isLoading = false;
+    }
+  };
+
+  $effect(() => {
+    if (open && data.length === 0 && !isLoading) {
+      fetchData(currentPage);
+    }
+  });
+
+  $effect(() => {
+    return () => {
+      currentPage = 1;
+    };
+  });
+
+  const loadMore = () => {
+    if (!isLoading && hasMore) {
+      const nextPage = currentPage + 1;
+      fetchData(nextPage, true);
+    }
+  };
+
+  const handleScroll = (event: Event) => {
+    const viewport = event.target as HTMLElement;
+    const scrollBottom = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+
+    if (scrollBottom < 100 && hasMore && !isLoading) {
+      loadMore();
+    }
+  };
+
+  const hasResults = $derived.by(() => {
+    return data.length > 0;
+  });
+</script>
+
+{#snippet itemsString(item: string)}
+  <Item value={item} label={item} />
+{/snippet}
+
+{#snippet itemBasic(item: SelectItem)}
+  <Item value={item.value} label={item.label} />
+{/snippet}
+
+{#snippet itemGroup(group: SelectItemGroup)}
+  <Group>
+    <GroupHeading>
+      {group.group}
+    </GroupHeading>
+
+    {#each group.items as item (getItemKey(item))}
+      {#if typeof item === 'string'}
+        {@render itemsString(item)}
+      {:else}
+        {@render itemBasic(item)}
+      {/if}
+    {/each}
+  </Group>
+{/snippet}
+
+<Root bind:value={value as never} bind:open {...restProps as any}>
+  {#if trigger}
+    <Trigger>
+      {#snippet child({ props })}
+        {@render trigger?.({ props, label: placeholder })}
+      {/snippet}
+    </Trigger>
+  {:else}
+    <Trigger>
+      {placeholder}
+    </Trigger>
+  {/if}
+
+  <Portal>
+    <Content
+      {maxContentHeight}
+      {side}
+      {sideOffset}
+      {align}
+      {alignOffset}
+      {avoidCollisions}
+      {collisionPadding}
+      {customAnchor}
+    >
+      <Viewport onscroll={handleScroll}>
+        {#if error}
+          <div class="cgui:p-4 cgui:text-center cgui:text-body-2 cgui:text-fg-darkest cgui:text-destructive">
+            {error}
+          </div>
+        {:else if isLoading && !hasResults}
+          {#if loading}
+            {@render loading?.()}
+          {:else}
+            <div class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-fg-darkest">
+              <Spinner />
+            </div>
+          {/if}
+        {:else if hasResults}
+          {#each data as item (getItemKey(item))}
+            {#if typeof item === 'string'}
+              {@render itemsString(item)}
+            {:else if 'group' in item}
+              {@render itemGroup(item)}
+            {:else}
+              {@render itemBasic(item)}
+            {/if}
+          {/each}
+          {#if isLoading}
+            <div
+              class="cgui:p-2 cgui:flex cgui:items-center cgui:justify-center cgui:text-center cgui:text-body-2 cgui:text-fg-darkest"
+            >
+              <Spinner />
+            </div>
+          {/if}
+        {:else if typeof empty === 'string'}
+          <div
+            class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-center cgui:text-body-2 cgui:text-fg-regular"
+          >
+            {empty}
+          </div>
+        {:else}
+          {@render empty?.()}
+        {/if}
+      </Viewport>
+    </Content>
+  </Portal>
+</Root>

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

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

package/dist/components/select/select.stories.svelte

@@ -3,6 +3,7 @@
   import type { Parameters } from '@storybook/sveltekit';
   import type { ComponentProps } from 'svelte';
   import { Select, SelectPrimitive } from './index.js';
+  import type { SelectAsyncCallback } from './types.js';
 
   const parameters: Parameters = {
     controls: {
@@ -104,6 +105,38 @@
       [] as Array<{ label: string; items: typeof groupedItems }>
     )
   );
+
+  type CatData = {
+    id: string;
+    url: string;
+    width: number;
+    height: number;
+  };
+
+  const fetchCatData: SelectAsyncCallback = async (params) => {
+    const { page, pageSize } = params;
+
+    try {
+      const res = await fetch(`https://api.thecatapi.com/v1/images/search?limit=${pageSize}&page=${page}`, {
+        headers: {
+          'Content-Type': 'application/json',
+          'x-api-key': 'live_V1XvjJ84eY5LPP29tbKPJXDiRFPg0WgkDjRtCsocndgnNrVtiUDP25W9rp3QuwbX',
+        },
+      });
+
+      const data = (await res.json()) as CatData[];
+
+      return {
+        data: data.map((item) => ({
+          value: item.id,
+          label: item.id,
+        })),
+        hasMore: data.length > 0,
+      };
+    } catch (error) {
+      throw error;
+    }
+  };
 </script>
 
 <Story name="Basic" {args} {parameters}>
@@ -215,3 +248,16 @@
     </div>
   {/snippet}
 </Story>
+
+<Story name="Async" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Select.Async
+      {...args}
+      type="single"
+      side="top"
+      maxContentHeight="150px"
+      callback={fetchCatData}
+      placeholder="Select Item"
+    />
+  {/snippet}
+</Story>

package/dist/components/select/select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { SelectItem, SelectItemData, SelectItemGroup, SelectProps } from './types.js';
+  import type { SelectItem, SelectItemGroup, SelectProps } from './types.js';
+  import { getItemKey, getLabelFromValue } from './utils/index.js';
 
-  import type { Attachment } from 'svelte/attachments';
   import Content from './components/select.content.svelte';
   import GroupHeading from './components/select.group-heading.svelte';
   import Group from './components/select.group.svelte';
@@ -18,7 +18,6 @@
     empty = 'No results found',
 
     maxContentHeight,
-
     data,
     item,
     trigger,
@@ -35,33 +34,14 @@
     ...restProps
   }: SelectProps = $props();
 
-  const getLabelFromValue = (searchValue: string): string | null => {
-    for (const item of data) {
-      if (typeof item === 'string') {
-        if (item === searchValue) return item;
-      } else if ('group' in item) {
-        for (const groupItem of item.items) {
-          if (typeof groupItem === 'string') {
-            if (groupItem === searchValue) return groupItem;
-          } else if (groupItem.value === searchValue) {
-            return groupItem.label;
-          }
-        }
-      } else if (item.value === searchValue) {
-        return item.label;
-      }
-    }
-    return null;
-  };
-
   const placeholder = $derived.by(() => {
     if (typeof value === 'string' && value.trim() !== '') {
-      const label = getLabelFromValue(value);
+      const label = getLabelFromValue(value, data);
       return label ?? value;
     }
 
     if (Array.isArray(value) && value.length > 0) {
-      const labels = value.map((v) => getLabelFromValue(v) ?? v);
+      const labels = value.map((v) => getLabelFromValue(v, data) ?? v);
       return labels.join(', ');
     }
 
@@ -70,31 +50,9 @@
     return '';
   });
 
-  const getItemKey = (item: SelectItemData) => {
-    if (typeof item === 'string') return item;
-    if ('group' in item) return item.group;
-    return item.value;
-  };
-
   const hasResults = $derived.by(() => {
     return data.length > 0;
   });
-
-  const contentStyle = $derived.by(() => {
-    return {
-      ...(maxContentHeight ? { '--cg-ui-max-content-height': maxContentHeight } : {}),
-    };
-  });
-
-  const contentMount: Attachment<HTMLDivElement> = (el) => {
-    $effect.pre(() => {
-      if (!el) return;
-
-      Object.entries(contentStyle).forEach(([key, value]) => {
-        el.style.setProperty(key, value);
-      });
-    });
-  };
 </script>
 
 {#snippet itemsString(item: string)}
@@ -135,7 +93,16 @@
   {/if}
 
   <Portal>
-    <Content {@attach contentMount} class="cgui:h-(--cg-ui-max-content-height)">
+    <Content
+      {maxContentHeight}
+      {side}
+      {sideOffset}
+      {align}
+      {alignOffset}
+      {avoidCollisions}
+      {collisionPadding}
+      {customAnchor}
+    >
       <Viewport>
         {#if hasResults}
           {#each data as item (getItemKey(item))}
@@ -148,7 +115,9 @@
             {/if}
           {/each}
         {:else if typeof empty === 'string'}
-          <div class="cgui:p-4 cgui:text-center cgui:text-body-2 cgui:text-fg-darkest">
+          <div
+            class="cgui:p-4 cgui:flex cgui:items-center cgui:h-full cgui:justify-center cgui:text-center cgui:text-body-2 cgui:text-fg-regular"
+          >
             {empty}
           </div>
         {:else}

package/dist/components/select/styles.js

@@ -9,20 +9,23 @@ export const selectVariants = tv({
             'cgui:shadow-select cgui:bg-surface-white',
             'cgui:rounded-sm',
             'cgui:z-(--cg-ui-z-index-select)',
-            'cgui:max-h-(--bits-select-content-available-height) cgui:origin-(--bits-select-content-transform-origin)',
+            'cgui:max-h-(--bits-select-content-available-height) cgui:origin-(--bits-select-content-transform-origin) cgui:h-(--cg-ui-max-content-height)',
             'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95 cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-right-2 cgui:data-[side=right]:slide-in-from-left-2 cgui:data-[side=top]:slide-in-from-bottom-2  cgui:data-[side=bottom]:translate-y-1 cgui:data-[side=left]:-translate-x-1 cgui:data-[side=right]:translate-x-1 cgui:data-[side=top]:-translate-y-1',
         ],
         item: [
             'cgui:relative cgui:w-full',
             'cgui:flex cgui:items-center cgui:justify-between cgui:gap-2',
             'cgui:outline-hidden cgui:cursor-default cgui:select-none',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:rounded-xs',
             'cgui:p-2',
-            'cgui:text-body cgui:text-fg-dark',
+            'cgui:text-body cgui:text-fg-medium',
             'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
             'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
+            'cgui:data-[highlighted]:bg-surface-lightest',
         ],
         viewport: [
-            ' cgui:scrollbar-track-transparent cgui:scrollbar-thumb-stroke-default cgui:scrollbar-thumb-rounded-full',
+            'cgui:scrollbar-track-transparent cgui:scrollbar-thumb-stroke-default cgui:scrollbar-thumb-rounded-full',
             'cgui:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
         ],
         group: [],

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

@@ -6,7 +6,9 @@ export type SelectRootProps = SelectRootPropsPrimitive & SelectVariantsProps;
 export type SelectTriggerProps = SelectTriggerPropsPrimitive & {
     hasChevron?: boolean;
 };
-export type SelectContentProps = WithoutChild<SelectContentPropsPrimitive>;
+export type SelectContentProps = WithoutChild<SelectContentPropsPrimitive> & {
+    maxContentHeight?: string;
+};
 export type SelectViewportProps = SelectViewportPropsPrimitive;
 export type SelectItemProps = WithoutChild<SelectItemPropsPrimitive>;
 export type SelectGroupProps = SelectGroupPropsPrimitive;
@@ -37,7 +39,7 @@ export type SelectProps = SelectRootProps & {
         label: string;
     }]>;
     empty?: Snippet | string;
-    maxContentHeight?: string;
+    maxContentHeight?: SelectContentProps['maxContentHeight'];
     side?: SelectContentProps['side'];
     sideOffset?: SelectContentProps['sideOffset'];
     align?: SelectContentProps['align'];
@@ -46,3 +48,17 @@ export type SelectProps = SelectRootProps & {
     collisionPadding?: SelectContentProps['collisionPadding'];
     customAnchor?: SelectContentProps['customAnchor'];
 };
+export type SelectAsyncCallbackParams = {
+    page: number;
+    pageSize: number;
+};
+export type SelectAsyncCallbackResult = {
+    data: SelectData;
+    hasMore: boolean;
+};
+export type SelectAsyncCallback = (params: SelectAsyncCallbackParams) => Promise<SelectAsyncCallbackResult>;
+export type SelectAsyncProps = Omit<SelectProps, 'data'> & {
+    loading?: Snippet;
+    pageSize?: number;
+    callback: SelectAsyncCallback;
+};

package/dist/components/select/utils/get-item-key.d.ts

@@ -0,0 +1,2 @@
+import type { SelectItemData } from '../types.js';
+export declare const getItemKey: (item: SelectItemData) => string;

package/dist/components/select/utils/get-item-key.js

@@ -0,0 +1,7 @@
+export const getItemKey = (item) => {
+    if (typeof item === 'string')
+        return item;
+    if ('group' in item)
+        return item.group;
+    return item.value;
+};

package/dist/components/select/utils/get-label-from-value.d.ts

@@ -0,0 +1,2 @@
+import type { SelectData } from '../types.js';
+export declare const getLabelFromValue: (searchValue: string, data: SelectData) => string | null;

package/dist/components/select/utils/get-label-from-value.js

@@ -0,0 +1,23 @@
+export const getLabelFromValue = (searchValue, data) => {
+    for (const item of data) {
+        if (typeof item === 'string') {
+            if (item === searchValue)
+                return item;
+        }
+        else if ('group' in item) {
+            for (const groupItem of item.items) {
+                if (typeof groupItem === 'string') {
+                    if (groupItem === searchValue)
+                        return groupItem;
+                }
+                else if (groupItem.value === searchValue) {
+                    return groupItem.label;
+                }
+            }
+        }
+        else if (item.value === searchValue) {
+            return item.label;
+        }
+    }
+    return null;
+};

package/dist/components/select/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { getItemKey } from './get-item-key.js';
+export { getLabelFromValue } from './get-label-from-value.js';

package/dist/components/select/utils/index.js

@@ -0,0 +1,2 @@
+export { getItemKey } from './get-item-key.js';
+export { getLabelFromValue } from './get-label-from-value.js';

package/package.json

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