@casinogate/ui 1.3.7 → 1.5.0

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

@@ -1,9 +1,8 @@
 <script lang="ts" module>
-  import { Icon } from '../icons/index.js';
   import { defineMeta } from '@storybook/addon-svelte-csf';
   import type { Parameters } from '@storybook/sveltekit';
   import type { ComponentProps } from 'svelte';
-  import { SelectPrimitive } from './index.js';
+  import { Select, SelectPrimitive } from './index.js';
 
   const parameters: Parameters = {
     controls: {
@@ -24,30 +23,194 @@
     variant: 'primary',
     rounded: 'sm',
     w: 'full',
-    type: 'single',
-  };
+    // type: 'single',
+  } as Args;
 </script>
 
-{#snippet startChevron()}
-  <Icon.ChevronDown class="cgui:size-4" />
-{/snippet}
+<script lang="ts">
+  const items = [
+    {
+      value: '1',
+      label: 'Item 1',
+    },
+    {
+      value: '2',
+      label: 'Item 2',
+    },
+    {
+      value: '3',
+      label: 'Item 3',
+    },
+  ];
+
+  const groupedItems = [
+    {
+      value: '1',
+      label: 'Item 1',
+      group: 'Group 1',
+    },
+    {
+      value: '2',
+      label: 'Item 2',
+      group: 'Group 1',
+    },
+    {
+      value: '3',
+      label: 'Item 3',
+      group: 'Group 1',
+    },
+    {
+      value: '4',
+      label: 'Item 4',
+      group: 'Group 2',
+    },
+    {
+      value: '5',
+      label: 'Item 5',
+      group: 'Group 2',
+    },
+    {
+      value: '6',
+      label: 'Item 6',
+      group: 'Group 2',
+    },
+  ];
+
+  let basic = $state<string>('');
+  let grouped = $state<string>('');
 
-{#snippet endChevron()}
-  <Icon.ChevronDown class="cgui:size-4" />
-{/snippet}
+  const selectedLabel = $derived(basic ? items.find((item) => item.value === basic)?.label : 'Select');
+  const selectedGroupedLabel = $derived(
+    grouped ? groupedItems.find((group) => group.value === grouped)?.label : 'Select'
+  );
+
+  const organizedGroups = $derived(
+    groupedItems.reduce(
+      (acc, item) => {
+        const groupName = item.group;
+        const existingGroup = acc.find((g) => g.label === groupName);
+
+        if (existingGroup) {
+          existingGroup.items.push(item);
+        } else {
+          acc.push({
+            label: groupName,
+            items: [item],
+          });
+        }
+
+        return acc;
+      },
+      [] as Array<{ label: string; items: typeof groupedItems }>
+    )
+  );
+</script>
 
 <Story name="Basic" {args} {parameters}>
   {#snippet template(args: Args)}
-    <SelectPrimitive.Root {...args}>
-      <SelectPrimitive.Trigger>Select</SelectPrimitive.Trigger>
+    <SelectPrimitive.Root {...args} type="single" bind:value={basic}>
+      <SelectPrimitive.Trigger>
+        {selectedLabel}
+      </SelectPrimitive.Trigger>
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content>
+          <SelectPrimitive.Viewport>
+            {#each items as item}
+              <SelectPrimitive.Item value={item.value} label={item.label} />
+            {/each}
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
     </SelectPrimitive.Root>
   {/snippet}
 </Story>
 
-<Story name="With Chevron" {args} {parameters}>
+<Story name="Grouped" {args} {parameters}>
   {#snippet template(args: Args)}
-    <SelectPrimitive.Root {...args}>
-      <SelectPrimitive.Trigger {startChevron} {endChevron}>Select</SelectPrimitive.Trigger>
+    <SelectPrimitive.Root {...args} type="single" bind:value={grouped}>
+      <SelectPrimitive.Trigger>{selectedGroupedLabel}</SelectPrimitive.Trigger>
+
+      <SelectPrimitive.Portal>
+        <SelectPrimitive.Content>
+          <SelectPrimitive.Viewport>
+            <SelectPrimitive.Group>
+              {#each organizedGroups as group}
+                <SelectPrimitive.GroupHeading>{group.label}</SelectPrimitive.GroupHeading>
+                {#each group.items as item}
+                  <SelectPrimitive.Item value={item.value} label={item.label} />
+                {/each}
+              {/each}
+            </SelectPrimitive.Group>
+          </SelectPrimitive.Viewport>
+        </SelectPrimitive.Content>
+      </SelectPrimitive.Portal>
     </SelectPrimitive.Root>
   {/snippet}
 </Story>
+
+<Story name="Preset" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <div class="cgui:flex cgui:flex-col cgui:gap-4">
+      <Select.Root {...args} type="single" data={['Item 1', 'Item 2', 'Item 3']} placeholder="Select Item" />
+
+      <Select.Root
+        {...args}
+        type="single"
+        data={[
+          { label: 'Item 1', value: '1' },
+          { label: 'Item 2', value: '2' },
+          { label: 'Item 3', value: '3' },
+        ]}
+        placeholder="Select Item"
+      />
+
+      <Select.Root
+        {...args}
+        type="single"
+        data={[
+          {
+            group: 'Group 1',
+            items: [
+              { label: 'Item 1', value: '1' },
+              { label: 'Item 2', value: '2' },
+              { label: 'Item 3', value: '3' },
+            ],
+          },
+          {
+            group: 'Group 2',
+            items: [
+              { label: 'Item 4', value: '4' },
+              { label: 'Item 5', value: '5' },
+              { label: 'Item 6', value: '6' },
+            ],
+          },
+        ]}
+        placeholder="Select Item"
+      />
+
+      <Select.Root
+        {...args}
+        type="multiple"
+        data={[
+          {
+            group: 'Group 1',
+            items: [
+              { label: 'Item 1', value: '1' },
+              { label: 'Item 2', value: '2' },
+              { label: 'Item 3', value: '3' },
+            ],
+          },
+          {
+            group: 'Group 2',
+            items: [
+              { label: 'Item 4', value: '4' },
+              { label: 'Item 5', value: '5' },
+              { label: 'Item 6', value: '6' },
+            ],
+          },
+        ]}
+        placeholder="Select Item"
+      />
+    </div>
+  {/snippet}
+</Story>

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

@@ -1,18 +1,4 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Select: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Select = InstanceType<typeof Select>;
+import { Select } from './index.js';
+declare const Select: import("svelte").Component<Record<string, never>, {}, "">;
+type Select = ReturnType<typeof Select>;
 export default Select;

package/dist/components/select/select.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+  import type { SelectItem, SelectItemData, SelectItemGroup, SelectProps } from './types.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';
+
+  let {
+    value = $bindable(''),
+    open = $bindable(false),
+
+    empty = 'No results found',
+
+    data,
+    item,
+    trigger,
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    avoidCollisions,
+    collisionPadding,
+    customAnchor,
+
+    placeholder: placeholderProp,
+
+    ...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);
+      return label ?? value;
+    }
+
+    if (Array.isArray(value) && value.length > 0) {
+      const labels = value.map((v) => getLabelFromValue(v) ?? v);
+      return labels.join(', ');
+    }
+
+    if (placeholderProp) return placeholderProp;
+
+    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;
+  });
+</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}>
+  {#if trigger}
+    <Trigger>
+      {#snippet child({ props })}
+        {@render trigger?.({ props, label: placeholder })}
+      {/snippet}
+    </Trigger>
+  {:else}
+    <Trigger>
+      {placeholder}
+    </Trigger>
+  {/if}
+
+  <Portal>
+    <Content>
+      <Viewport>
+        {#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}
+        {:else if typeof empty === 'string'}
+          <div class="cgui:p-4 cgui:text-center cgui:text-body-2 cgui:text-fg-darkest">
+            {empty}
+          </div>
+        {:else}
+          {@render empty?.()}
+        {/if}
+      </Viewport>
+    </Content>
+  </Portal>
+</Root>

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

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

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

@@ -46,8 +46,12 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
+    content: string[];
+    item: string[];
+    viewport: string[];
+    group: never[];
+    label: string[];
     trigger: string[];
-    chevron: string[];
 }, undefined, {
     variant: {
         primary: {
@@ -93,8 +97,12 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
+    content: string[];
+    item: string[];
+    viewport: string[];
+    group: never[];
+    label: string[];
     trigger: string[];
-    chevron: string[];
 }, import("tailwind-variants").TVReturnType<{
     variant: {
         primary: {
@@ -140,8 +148,12 @@ export declare const selectVariants: import("tailwind-variants").TVReturnType<{
         };
     };
 }, {
+    content: string[];
+    item: string[];
+    viewport: string[];
+    group: never[];
+    label: string[];
     trigger: string[];
-    chevron: string[];
 }, undefined, unknown, unknown, undefined>>;
 export type SelectVariantsProps = VariantProps<typeof selectVariants>;
 type SelectStylesContextValues = ReadableBox<ReturnType<typeof selectVariants>>;

package/dist/components/select/styles.js

@@ -3,16 +3,32 @@ import { Context } from 'runed';
 import { keyWithPrefix } from './../../internal/utils/common.js';
 export const selectVariants = tv({
     slots: {
-        trigger: [
-            'cgui:relative cgui:flex cgui:items-center cgui:justify-start cgui:flex-wrap',
-            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        content: [
+            '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: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:p-2',
+            'cgui:text-body cgui:text-fg-dark',
+            'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
+            'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
         ],
-        chevron: [
-            'cgui:absolute cgui:top-1/2 cgui:-translate-y-1/2 cgui:flex cgui:items-center cgui:justify-center cgui:size-6',
+        viewport: [
+            'cgui:h-(--bits-select-anchor-height) cgui:min-w-(--bits-select-anchor-width) cgui:w-full cgui:scroll-my-1 cgui:p-1',
+        ],
+        group: [],
+        label: ['cgui:text-fg-semilight cgui:px-2 cgui:py-1.5 cgui:text-caption'],
+        trigger: [
+            'cgui:group/select-trigger',
+            'cgui:relative cgui:flex cgui:items-center cgui:justify-between cgui:flex-wrap',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-            'cgui:text-icon-regular',
-            'cgui:data-[slot=start-chevron]:left-0 cgui:data-[slot=end-chevron]:right-0',
-            'cgui:data-[slot=start-chevron]:translate-x-1/2 cgui:data-[slot=end-chevron]:-translate-x-1/2',
         ],
     },
     variants: {

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

@@ -1,9 +1,47 @@
-import { type SelectRootProps as SelectRootPropsPrimitive, type SelectTriggerProps as SelectTriggerPropsPrimitive } from 'bits-ui';
+import { type SelectContentProps as SelectContentPropsPrimitive, type SelectGroupHeadingProps as SelectGroupHeadingPropsPrimitive, type SelectGroupProps as SelectGroupPropsPrimitive, type SelectItemProps as SelectItemPropsPrimitive, type SelectPortalProps as SelectPortalPropsPrimitive, type SelectRootProps as SelectRootPropsPrimitive, type SelectTriggerProps as SelectTriggerPropsPrimitive, type SelectViewportProps as SelectViewportPropsPrimitive } from 'bits-ui';
 import type { Snippet } from 'svelte';
 import type { WithoutChild } from 'svelte-toolbelt';
 import { type SelectVariantsProps } from './styles.js';
 export type SelectRootProps = SelectRootPropsPrimitive & SelectVariantsProps;
-export type SelectTriggerProps = WithoutChild<SelectTriggerPropsPrimitive> & {
-    startChevron?: Snippet;
-    endChevron?: Snippet;
+export type SelectTriggerProps = SelectTriggerPropsPrimitive & {
+    hasChevron?: boolean;
+};
+export type SelectContentProps = WithoutChild<SelectContentPropsPrimitive>;
+export type SelectViewportProps = SelectViewportPropsPrimitive;
+export type SelectItemProps = WithoutChild<SelectItemPropsPrimitive>;
+export type SelectGroupProps = SelectGroupPropsPrimitive;
+export type SelectGroupHeadingProps = SelectGroupHeadingPropsPrimitive;
+export type SelectPortalProps = SelectPortalPropsPrimitive;
+export type SelectBaseItem = {
+    value: string;
+    disabled?: boolean;
+};
+export type SelectItem = SelectBaseItem & {
+    label: string;
+};
+export type SelectItemGroup<T = SelectItem | string> = {
+    group: string;
+    items: T[];
+};
+export type SelectItemData = string | SelectItemGroup | SelectItem;
+export type SelectData = string[] | SelectItemGroup[] | SelectItem[];
+export type SelectProps = SelectRootProps & {
+    data: SelectData;
+    placeholder?: string;
+    item?: Snippet<[{
+        item: SelectItemData;
+        props: Record<string, unknown>;
+    }]>;
+    trigger?: Snippet<[{
+        props: Record<string, unknown>;
+        label: string;
+    }]>;
+    empty?: Snippet | string;
+    side?: SelectContentProps['side'];
+    sideOffset?: SelectContentProps['sideOffset'];
+    align?: SelectContentProps['align'];
+    alignOffset?: SelectContentProps['alignOffset'];
+    avoidCollisions?: SelectContentProps['avoidCollisions'];
+    collisionPadding?: SelectContentProps['collisionPadding'];
+    customAnchor?: SelectContentProps['customAnchor'];
 };

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

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

package/dist/components/textarea/exports.js

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

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

@@ -0,0 +1,2 @@
+export * as Textarea from './exports.js';
+export type { TextareaProps } from './types.js';

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export * as Textarea from './exports.js';

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

@@ -0,0 +1,54 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const textareaVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: never[];
+    };
+    resizable: {
+        true: string[];
+        false: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        primary: string[];
+        clear: never[];
+    };
+    resizable: {
+        true: string[];
+        false: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string[];
+        clear: never[];
+    };
+    resizable: {
+        true: string[];
+        false: string[];
+    };
+    rounded: {
+        sm: string[];
+        md: string[];
+        lg: string[];
+        xl: string[];
+        full: string[];
+        none: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type TextareaVariantsProps = VariantProps<typeof textareaVariants>;

package/dist/components/textarea/styles.js

@@ -0,0 +1,39 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const textareaVariants = tv({
+    base: [
+        'cgui:w-full cgui:overflow-x-hidden',
+        'cgui:scrollbar-thin cgui:scrollbar-track-surface-lightest cgui:scrollbar-thumb-rounded-md cgui:scrollbar-track-rounded-md',
+        'cgui:scrollbar-thumb-surface-regular/40 cgui:scrollbar-hover:scrollbar-thumb-surface-regular/60',
+        'cgui:outline-none cgui:text-body',
+        'cgui:transition-[opacity] cgui:duration-250 cgui:ease-in-out',
+        'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
+    ],
+    variants: {
+        variant: {
+            primary: [
+                'cgui:border cgui:border-stroke-default',
+                'cgui:bg-surface-lightest cgui:placeholder:text-fg-regular cgui:shadow-none',
+                'cgui:focus:ring-stroke-default cgui:focus-visible:border-stroke-focus',
+                'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
+            ],
+            clear: [],
+        },
+        resizable: {
+            true: ['cgui:resize-y'],
+            false: ['cgui:resize-none'],
+        },
+        rounded: {
+            sm: ['cgui:rounded-sm'],
+            md: ['cgui:rounded-md'],
+            lg: ['cgui:rounded-lg'],
+            xl: ['cgui:rounded-xl'],
+            full: ['cgui:rounded-full'],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        rounded: 'sm',
+        resizable: true,
+        variant: 'primary',
+    },
+});

package/dist/components/textarea/textarea.stories.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import type { Parameters } from '@storybook/sveltekit';
+  import type { ComponentProps } from 'svelte';
+  import { Textarea } from './index.js';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['placeholder', 'disabled', 'rounded', 'resizable', 'variant', 'rows'],
+    },
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Textarea',
+    component: Textarea.Root,
+    tags: ['autodocs'],
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof Textarea.Root>;
+
+  const args: Args = {
+    placeholder: 'Textarea',
+    disabled: false,
+    rounded: 'sm',
+    variant: 'primary',
+    rows: 3,
+    resizable: false,
+  };
+</script>
+
+<Story name="Basic" {args} {parameters}>
+  {#snippet template(args: Args)}
+    <Textarea.Root {...args} />
+  {/snippet}
+</Story>