@casinogate/ui 1.5.1 → 1.5.3

package/dist/assets/css/root.css

@@ -312,6 +312,9 @@
   .cgui\:h-\(--bits-select-anchor-height\) {
     height: var(--bits-select-anchor-height);
   }
+  .cgui\:h-\(--cg-ui-max-content-height\) {
+    height: var(--cg-ui-max-content-height);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -357,6 +360,9 @@
   .cgui\:h-20 {
     height: calc(var(--cgui-spacing) * 20);
   }
+  .cgui\:h-30 {
+    height: calc(var(--cgui-spacing) * 30);
+  }
   .cgui\:h-34 {
     height: calc(var(--cgui-spacing) * 34);
   }
@@ -543,6 +549,9 @@
   .cgui\:justify-end {
     justify-content: flex-end;
   }
+  .cgui\:gap-0\.5 {
+    gap: calc(var(--cgui-spacing) * 0.5);
+  }
   .cgui\:gap-1 {
     gap: calc(var(--cgui-spacing) * 1);
   }
@@ -1044,6 +1053,9 @@
   .cgui\:scrollbar-thumb-rounded-md {
     --scrollbar-thumb-radius: calc(var(--cg-ui-number-md) * 1px);
   }
+  .cgui\:scrollbar-thumb-stroke-default {
+    --scrollbar-thumb: var(--cg-ui-palette-neutral-40);
+  }
   .cgui\:scrollbar-thumb-surface-regular {
     --scrollbar-thumb: var(--cg-ui-palette-neutral-50);
   }
@@ -1062,6 +1074,9 @@
   .cgui\:scrollbar-track-surface-lightest {
     --scrollbar-track: var(--cg-ui-palette-neutral-10);
   }
+  .cgui\:scrollbar-track-transparent {
+    --scrollbar-track: transparent;
+  }
   .cgui\:group-has-\[\[data-slot\=\"header\"\]\]\/appShell\:h-\[calc\(100\%-var\(--app-shell-header-height\)\)\] {
     &:is(:where(.cgui\:group\/appShell):has(*:is([data-slot="header"])) *) {
       height: calc(100% - var(--app-shell-header-height));
@@ -1336,21 +1351,6 @@
       opacity: 50%;
     }
   }
-  .cgui\:data-\[end-chevron\]\:right-2\.5 {
-    &[data-end-chevron] {
-      right: calc(var(--cgui-spacing) * 2.5);
-    }
-  }
-  .cgui\:data-\[end-chevron\]\:right-3 {
-    &[data-end-chevron] {
-      right: calc(var(--cgui-spacing) * 3);
-    }
-  }
-  .cgui\:data-\[end-chevron\]\:right-4 {
-    &[data-end-chevron] {
-      right: calc(var(--cgui-spacing) * 4);
-    }
-  }
   .cgui\:data-\[end-chevron\]\:pr-7 {
     &[data-end-chevron] {
       padding-right: calc(var(--cgui-spacing) * 7);
@@ -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;
@@ -1475,21 +1480,6 @@
       left: calc(var(--cgui-spacing) * 2);
     }
   }
-  .cgui\:data-\[start-chevron\]\:left-2\.5 {
-    &[data-start-chevron] {
-      left: calc(var(--cgui-spacing) * 2.5);
-    }
-  }
-  .cgui\:data-\[start-chevron\]\:left-3 {
-    &[data-start-chevron] {
-      left: calc(var(--cgui-spacing) * 3);
-    }
-  }
-  .cgui\:data-\[start-chevron\]\:left-4 {
-    &[data-start-chevron] {
-      left: calc(var(--cgui-spacing) * 4);
-    }
-  }
   .cgui\:data-\[start-chevron\]\:pl-8 {
     &[data-start-chevron] {
       padding-left: calc(var(--cgui-spacing) * 8);

package/dist/components/field/components/field.label.svelte

@@ -39,5 +39,13 @@
 {:else}
   <label {...mergedProps}>
     {@render children?.()}
+
+    {#if labelState.root.opts.required.current}
+      <span
+        class=" cgui:inline-flex cgui:items-center cgui:justify-center cgui:text-caption cgui:font-medium cgui:text-fg-error cgui:shrink-0 cgui:align-middle"
+      >
+        *
+      </span>
+    {/if}
   </label>
 {/if}

package/dist/components/field/components/field.root.svelte

@@ -37,12 +37,19 @@
   FieldStylesContext.set(box.with(() => variants));
 
   const mergedProps = $derived(mergeProps(restProps, rootState.props, { class: cn(variants.root(), className) }));
+
+  const attrStates = $derived({
+    invalid: rootState.opts.invalid.current,
+    disabled: rootState.opts.disabled.current,
+    readOnly: rootState.opts.readOnly.current,
+    required: rootState.opts.required.current,
+  });
 </script>
 
 {#if child}
-  {@render child({ props: mergedProps })}
+  {@render child({ props: mergedProps, ...attrStates })}
 {:else}
   <div {...mergedProps}>
-    {@render children?.()}
+    {@render children?.(attrStates)}
   </div>
 {/if}

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

@@ -78,6 +78,8 @@ export declare class FieldControlState {
     readonly props: {
         readonly id: string;
         readonly 'aria-invalid': boolean;
+        readonly disabled: boolean;
+        readonly readOnly: boolean;
     };
 }
 export {};

package/dist/components/field/components/field.svelte.js

@@ -122,5 +122,7 @@ export class FieldControlState {
     props = $derived.by(() => ({
         id: this.opts.id.current,
         'aria-invalid': this.root.opts.invalid.current,
+        disabled: this.root.opts.disabled.current,
+        readOnly: this.root.opts.readOnly.current,
     }));
 }

package/dist/components/field/field.stories.svelte

@@ -7,7 +7,7 @@
 
   const parameters: Parameters = {
     controls: {
-      include: [],
+      include: ['invalid', 'disabled', 'required', 'readOnly'],
     },
   };
 
@@ -19,7 +19,12 @@
 
   type Args = ComponentProps<typeof FieldPrimitive.Root>;
 
-  const args: Args = {};
+  const args: Args = {
+    invalid: false,
+    disabled: false,
+    required: false,
+    readOnly: false,
+  };
 </script>
 
 <Story name="Basic" {args} {parameters}>
@@ -34,7 +39,7 @@
 
 <Story name="Primitive" {args} {parameters}>
   {#snippet template(args: Args)}
-    <FieldPrimitive.Root {...args} invalid>
+    <FieldPrimitive.Root {...args} invalid required>
       <FieldPrimitive.Label>Label</FieldPrimitive.Label>
 
       <FieldPrimitive.Control>

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

@@ -21,7 +21,7 @@ export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    label: string;
+    label: string[];
     error: string;
     description: string;
 }, undefined, {
@@ -35,12 +35,12 @@ export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
     };
 } | {}, {
     root: string;
-    label: string;
+    label: string[];
     error: string;
     description: string;
 }, import("tailwind-variants").TVReturnType<unknown, {
     root: string;
-    label: string;
+    label: string[];
     error: string;
     description: string;
 }, undefined, unknown, unknown, undefined>>;

package/dist/components/field/styles.js

@@ -4,7 +4,12 @@ import { Context } from 'runed';
 export const fieldStyles = tv({
     slots: {
         root: 'cgui:flex cgui:flex-col cgui:gap-1',
-        label: 'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+        label: [
+            'cgui:relative',
+            'cgui:w-fit',
+            'cgui:inline-flex cgui:items-center cgui:gap-0.5',
+            'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+        ],
         error: 'cgui:text-caption  cgui:text-fg-error',
         description: 'cgui:text-caption cgui:text-fg-medium',
     },

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

@@ -6,6 +6,11 @@ type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
     disabled?: boolean;
     readOnly?: boolean;
     required?: boolean;
+}, {
+    invalid: boolean;
+    disabled: boolean;
+    readOnly: boolean;
+    required: boolean;
 }>>;
 export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
 export type FieldControlProps = {

package/dist/components/icons/asterisk.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { IconProps } from './types.js';
+
+  let { width = 24, height = 24, color = 'currentColor', ...props }: IconProps = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" {width} {height} viewBox="0 0 24 24" {...props}>
+  <path
+    fill={color}
+    d="M21 13h-6.6l4.7 4.7l-1.4 1.4l-4.7-4.7V21h-2v-6.7L6.3 19l-1.4-1.4L9.4 13H3v-2h6.6L4.9 6.3l1.4-1.4L11 9.6V3h2v6.4l4.6-4.6L19 6.3L14.3 11H21z"
+  />
+</svg>

package/dist/components/icons/asterisk.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Asterisk: import("svelte").Component<import("../../internal/types/html-attributes.js").PrimitiveSVGAttributes, {}, "">;
+type Asterisk = ReturnType<typeof Asterisk>;
+export default Asterisk;

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

@@ -1,3 +1,4 @@
+export { default as Asterisk } from './asterisk.svelte';
 export { default as CaretDown } from './caret-down.svelte';
 export { default as CaretUp } from './caret-up.svelte';
 export { default as Check } from './check.svelte';

package/dist/components/icons/exports.js

@@ -1,3 +1,4 @@
+export { default as Asterisk } from './asterisk.svelte';
 export { default as CaretDown } from './caret-down.svelte';
 export { default as CaretUp } from './caret-up.svelte';
 export { default as Check } from './check.svelte';

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/components/select.trigger.svelte

@@ -37,7 +37,7 @@
           'cgui:group-data-[state=open]/select-trigger:-rotate-180'
         )}
       >
-        <Icon.ChevronDown width={20} height={20} />
+        <Icon.ChevronDown width={18} height={18} />
       </span>
     {/if}
   </SelectPrimitive.Trigger>

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}>
@@ -131,7 +164,7 @@
       <SelectPrimitive.Trigger>{selectedGroupedLabel}</SelectPrimitive.Trigger>
 
       <SelectPrimitive.Portal>
-        <SelectPrimitive.Content>
+        <SelectPrimitive.Content class="cgui:h-30">
           <SelectPrimitive.Viewport>
             <SelectPrimitive.Group>
               {#each organizedGroups as group}
@@ -191,6 +224,7 @@
       <Select.Root
         {...args}
         type="multiple"
+        maxContentHeight="150px"
         data={[
           {
             group: 'Group 1',
@@ -214,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,5 +1,6 @@
 <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 Content from './components/select.content.svelte';
   import GroupHeading from './components/select.group-heading.svelte';
@@ -16,6 +17,7 @@
 
     empty = 'No results found',
 
+    maxContentHeight,
     data,
     item,
     trigger,
@@ -32,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(', ');
     }
 
@@ -67,12 +50,6 @@
     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;
   });
@@ -116,7 +93,16 @@
   {/if}
 
   <Portal>
-    <Content>
+    <Content
+      {maxContentHeight}
+      {side}
+      {sideOffset}
+      {align}
+      {alignOffset}
+      {avoidCollisions}
+      {collisionPadding}
+      {customAnchor}
+    >
       <Viewport>
         {#if hasResults}
           {#each data as item (getItemKey(item))}
@@ -129,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

@@ -4,23 +4,28 @@ import { keyWithPrefix } from './../../internal/utils/common.js';
 export const selectVariants = tv({
     slots: {
         content: [
+            'cgui:scrollbar-thin',
             'cgui:relative cgui:overflow-y-auto cgui:overflow-x-hidden',
             '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:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
         ],
         group: [],
@@ -28,6 +33,7 @@ export const selectVariants = tv({
         trigger: [
             'cgui:group/select-trigger',
             'cgui:relative cgui:flex cgui:items-center cgui:justify-between cgui:flex-wrap',
+            'cgui:text-body',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         ],
     },
@@ -54,7 +60,6 @@ export const selectVariants = tv({
                     'cgui:px-2.5 cgui:py-1.5',
                     'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8',
                 ],
-                // chevron: ['cgui:data-[start-chevron]:left-2.5 cgui:data-[end-chevron]:right-2.5'],
             },
             md: {
                 trigger: [
@@ -63,15 +68,14 @@ export const selectVariants = tv({
                     'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
                 ],
                 chevron: [],
-                // chevron: ['cgui:data-[start-chevron]:left-3 cgui:data-[end-chevron]:right-3'],
             },
             lg: {
                 trigger: [
                     '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',
                 ],
-                // chevron: ['cgui:data-[start-chevron]:left-4 cgui:data-[end-chevron]:right-4'],
             },
         },
         rounded: {

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,6 +39,7 @@ export type SelectProps = SelectRootProps & {
         label: string;
     }]>;
     empty?: Snippet | string;
+    maxContentHeight?: SelectContentProps['maxContentHeight'];
     side?: SelectContentProps['side'];
     sideOffset?: SelectContentProps['sideOffset'];
     align?: SelectContentProps['align'];
@@ -45,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.1",
+  "version": "1.5.3",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",