@casinogate/ui 1.6.2 → 1.8.0

package/dist/internal/lib/collection/list-collection.d.ts

@@ -0,0 +1,3 @@
+import { type CollectionItem, type CollectionOptions, ListCollection } from '@zag-js/collection';
+export declare const createListCollection: <T extends CollectionItem>(options: CollectionOptions<T>) => ListCollection<T>;
+export type { CollectionItem, CollectionOptions, ListCollection };

package/dist/internal/lib/collection/list-collection.js

@@ -0,0 +1,2 @@
+import { ListCollection } from '@zag-js/collection';
+export const createListCollection = (options) => new ListCollection(options);

package/dist/internal/lib/collection/tree-collection.d.ts

@@ -0,0 +1,4 @@
+import { type FilePathTreeNode, TreeCollection, type TreeCollectionOptions, type TreeNode } from '@zag-js/collection';
+export type { FilePathTreeNode, FlatTreeNode, TreeCollection, TreeCollectionOptions, TreeNode, } from '@zag-js/collection';
+export declare const createTreeCollection: <T extends TreeNode>(options: TreeCollectionOptions<T>) => TreeCollection<T>;
+export declare const createFileTreeCollection: (paths: string[]) => TreeCollection<FilePathTreeNode>;

package/dist/internal/lib/collection/tree-collection.js

@@ -0,0 +1,3 @@
+import { TreeCollection, filePathToTree, } from '@zag-js/collection';
+export const createTreeCollection = (options) => new TreeCollection(options);
+export const createFileTreeCollection = (paths) => filePathToTree(paths);

package/dist/internal/lib/collection/use-list-collection.svelte.d.ts

@@ -0,0 +1,88 @@
+import { type MaybeFunction } from '../../utils/functions.js';
+import { type CollectionOptions, type ListCollection } from './list-collection.js';
+export interface UseListCollectionProps<T> extends Omit<CollectionOptions<T>, 'items'> {
+    /**
+     * The initial items to display in the collection.
+     */
+    initialItems: T[] | readonly T[];
+    /**
+     * The filter function to use to filter the items.
+     */
+    filter?: (itemText: string, filterText: string, item: T) => boolean;
+    /**
+     * The maximum number of items to display in the collection.
+     * Useful for performance when you have a large number of items.
+     */
+    limit?: number;
+}
+export declare function useListCollection<T>(props: MaybeFunction<UseListCollectionProps<T>>): UseListCollectionReturn<T>;
+export interface UseListCollectionReturn<T> {
+    /**
+     * The collection of items.
+     */
+    collection: () => ListCollection<T>;
+    /**
+     * The function to filter the items.
+     */
+    filter: (inputValue: string) => void;
+    /**
+     * The function to set the items.
+     */
+    set: (items: T[]) => void;
+    /**
+     * The function to reset the items.
+     */
+    reset: () => void;
+    /**
+     * The function to clear the items.
+     */
+    clear: () => void;
+    /**
+     * The function to insert items at a specific index.
+     */
+    insert: (index: number, ...items: T[]) => void;
+    /**
+     * The function to insert items before a specific value.
+     */
+    insertBefore: (value: string, ...items: T[]) => void;
+    /**
+     * The function to insert items after a specific value.
+     */
+    insertAfter: (value: string, ...items: T[]) => void;
+    /**
+     * The function to remove items.
+     */
+    remove: (...itemOrValues: Array<T | string>) => void;
+    /**
+     * The function to move an item to a specific index.
+     */
+    move: (value: string, to: number) => void;
+    /**
+     * The function to move an item before a specific value.
+     */
+    moveBefore: (value: string, ...values: string[]) => void;
+    /**
+     * The function to move an item after a specific value.
+     */
+    moveAfter: (value: string, ...values: string[]) => void;
+    /**
+     * The function to reorder items.
+     */
+    reorder: (from: number, to: number) => void;
+    /**
+     * The function to append items.
+     */
+    append: (...items: T[]) => void;
+    /**
+     * The function to upsert an item.
+     */
+    upsert: (value: string, item: T, mode?: 'append' | 'prepend') => void;
+    /**
+     * The function to prepend items.
+     */
+    prepend: (...items: T[]) => void;
+    /**
+     * The function to update an item.
+     */
+    update: (value: string, item: T) => void;
+}

package/dist/internal/lib/collection/use-list-collection.svelte.js

@@ -0,0 +1,94 @@
+import { untrack } from 'svelte';
+import { runIfFn } from '../../utils/functions.js';
+import { createListCollection } from './list-collection.js';
+export function useListCollection(props) {
+    const [localProps, collectionOptions] = $derived.by(() => {
+        const { initialItems = [], filter, limit, ...collectionOptions } = runIfFn(props);
+        return [{ initialItems, filter, limit }, collectionOptions];
+    });
+    let items = $state(untrack(() => localProps.initialItems));
+    let filterText = $state('');
+    const setItems = (newItems) => {
+        items = newItems;
+        filterText = '';
+    };
+    const create = (itemsToCreate) => {
+        return createListCollection({ ...collectionOptions, items: itemsToCreate });
+    };
+    const collection = $derived.by(() => {
+        let activeItems = items;
+        // Apply filter if we have filter text and a filter function
+        const filter = localProps.filter;
+        if (filterText && filter) {
+            activeItems = create(items).filter((itemString, _index, item) => filter(itemString, filterText, item)).items;
+        }
+        // Apply limit
+        const limitedItems = localProps.limit == null ? activeItems : activeItems.slice(0, localProps.limit);
+        return createListCollection({ ...collectionOptions, items: limitedItems });
+    });
+    return {
+        collection() {
+            return collection;
+        },
+        filter: (inputValue = '') => {
+            filterText = inputValue;
+        },
+        set: (newItems) => {
+            setItems(newItems);
+        },
+        reset: () => {
+            setItems(localProps.initialItems);
+        },
+        clear: () => {
+            setItems([]);
+        },
+        insert: (index, ...itemsToInsert) => {
+            const newItems = create(items).insert(index, ...itemsToInsert).items;
+            setItems(newItems);
+        },
+        insertBefore: (value, ...itemsToInsert) => {
+            const newItems = create(items).insertBefore(value, ...itemsToInsert).items;
+            setItems(newItems);
+        },
+        insertAfter: (value, ...itemsToInsert) => {
+            const newItems = create(items).insertAfter(value, ...itemsToInsert).items;
+            setItems(newItems);
+        },
+        remove: (...itemOrValues) => {
+            const newItems = create(items).remove(...itemOrValues).items;
+            setItems(newItems);
+        },
+        move: (value, to) => {
+            const newItems = create(items).move(value, to).items;
+            setItems(newItems);
+        },
+        moveBefore: (value, ...values) => {
+            const newItems = create(items).moveBefore(value, ...values).items;
+            setItems(newItems);
+        },
+        moveAfter: (value, ...values) => {
+            const newItems = create(items).moveAfter(value, ...values).items;
+            setItems(newItems);
+        },
+        reorder: (from, to) => {
+            const newItems = create(items).reorder(from, to).items;
+            setItems(newItems);
+        },
+        append: (...itemsToAppend) => {
+            const newItems = create(items).append(...itemsToAppend).items;
+            setItems(newItems);
+        },
+        upsert: (value, item, mode = 'append') => {
+            const newItems = create(items).upsert(value, item, mode).items;
+            setItems(newItems);
+        },
+        prepend: (...itemsToPrepend) => {
+            const newItems = create(items).prepend(...itemsToPrepend).items;
+            setItems(newItems);
+        },
+        update: (value, item) => {
+            const newItems = create(items).update(value, item).items;
+            setItems(newItems);
+        },
+    };
+}

package/dist/internal/lib/collection/use-list-selection.svelte.d.ts

@@ -0,0 +1,92 @@
+import { type SelectionMode } from '@zag-js/collection';
+import { type MaybeFunction } from '../../utils/functions.js';
+import type { CollectionItem, ListCollection } from './list-collection.js';
+export interface UseListSelectionProps<T extends CollectionItem> {
+    /**
+     * The selection mode.
+     */
+    selectionMode?: SelectionMode;
+    /**
+     * Whether the selection is deselectable.
+     */
+    deselectable?: boolean;
+    /**
+     * The initial selected values.
+     */
+    initialSelectedValues?: string[];
+    /**
+     * Whether to reset the selection when the collection changes.
+     */
+    resetOnCollectionChange?: boolean;
+    /**
+     * The collection to use.
+     */
+    collection: ListCollection<T>;
+}
+export declare function useListSelection<T extends CollectionItem>(props: MaybeFunction<UseListSelectionProps<T>>): UseListSelectionReturn;
+export interface UseListSelectionReturn {
+    /**
+     * The selected values as an array.
+     */
+    selectedValues: () => string[];
+    /**
+     * Whether the selection is empty.
+     */
+    isEmpty: () => boolean;
+    /**
+     * The first selected value.
+     */
+    firstSelectedValue: () => string | null;
+    /**
+     * The last selected value.
+     */
+    lastSelectedValue: () => string | null;
+    /**
+     * Check if a value is selected.
+     */
+    isSelected: (value: string | null) => boolean;
+    /**
+     * Check if a value can be selected.
+     */
+    canSelect: (value: string) => boolean;
+    /**
+     * Select a value.
+     */
+    select: (value: string, forceToggle?: boolean) => void;
+    /**
+     * Deselect a value.
+     */
+    deselect: (value: string) => void;
+    /**
+     * Toggle selection of a value.
+     */
+    toggle: (value: string) => void;
+    /**
+     * Replace the selection with a single value.
+     */
+    replace: (value: string | null) => void;
+    /**
+     * Extend the selection from anchor to target.
+     */
+    extend: (anchorValue: string, targetValue: string) => void;
+    /**
+     * Set the selected values.
+     */
+    setSelectedValues: (values: string[]) => void;
+    /**
+     * Clear the selection.
+     */
+    clear: () => void;
+    /**
+     * Clear all selections.
+     */
+    resetSelection: () => void;
+    /**
+     * Returns true if all items from the collection are selected.
+     */
+    isAllSelected: () => boolean;
+    /**
+     * Returns true if at least one item from the collection is selected.
+     */
+    isSomeSelected: () => boolean;
+}

package/dist/internal/lib/collection/use-list-selection.svelte.js

@@ -0,0 +1,80 @@
+import { Selection } from '@zag-js/collection';
+import { untrack } from 'svelte';
+import { runIfFn } from '../../utils/functions.js';
+export function useListSelection(props) {
+    const localProps = $derived.by(() => {
+        const { collection, selectionMode = 'single', deselectable = true, initialSelectedValues = [], resetOnCollectionChange = false, } = runIfFn(props);
+        return {
+            collection,
+            selectionMode,
+            deselectable,
+            initialSelectedValues,
+            resetOnCollectionChange,
+        };
+    });
+    const createSelection = (values = []) => {
+        const selection = new Selection(values);
+        selection.selectionMode = localProps.selectionMode;
+        selection.deselectable = localProps.deselectable;
+        return selection;
+    };
+    const initialSelectedValues = untrack(() => localProps.initialSelectedValues);
+    let selection = $state(createSelection(initialSelectedValues));
+    // Watch for collection changes and reset selection if needed
+    $effect(() => {
+        const { collection, resetOnCollectionChange } = localProps;
+        // Trigger effect when collection values change
+        collection.getValues();
+        if (resetOnCollectionChange) {
+            selection = createSelection();
+        }
+    });
+    const selectedValues = $derived(Array.from(selection));
+    const isEmpty = $derived(selection.isEmpty());
+    const firstSelectedValue = $derived(selection.firstSelectedValue(localProps.collection));
+    const lastSelectedValue = $derived(selection.lastSelectedValue(localProps.collection));
+    return {
+        selectedValues: () => selectedValues,
+        isEmpty: () => isEmpty,
+        firstSelectedValue: () => firstSelectedValue,
+        lastSelectedValue: () => lastSelectedValue,
+        isSelected: (value) => {
+            return selection.isSelected(value);
+        },
+        isAllSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.length > 0 && allValues.every((value) => selection.isSelected(value));
+        },
+        isSomeSelected: () => {
+            const allValues = localProps.collection.getValues();
+            return allValues.some((value) => selection.isSelected(value));
+        },
+        canSelect: (value) => {
+            return selection.canSelect(localProps.collection, value);
+        },
+        select: (value, forceToggle) => {
+            selection = selection.select(localProps.collection, value, forceToggle);
+        },
+        deselect: (value) => {
+            selection = selection.deselect(value);
+        },
+        toggle: (value) => {
+            selection = selection.toggleSelection(localProps.collection, value);
+        },
+        replace: (value) => {
+            selection = selection.replaceSelection(localProps.collection, value);
+        },
+        extend: (anchorValue, targetValue) => {
+            selection = selection.extendSelection(localProps.collection, anchorValue, targetValue);
+        },
+        setSelectedValues: (values) => {
+            selection = selection.setSelection(values);
+        },
+        clear: () => {
+            selection = selection.clearSelection();
+        },
+        resetSelection: () => {
+            selection = createSelection();
+        },
+    };
+}

package/dist/internal/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './collection/index.js';

package/dist/internal/lib/index.js

@@ -0,0 +1 @@
+export * from './collection/index.js';

package/dist/internal/utils/equal.d.ts

@@ -0,0 +1,3 @@
+export declare const isArrayEqual: (a: any[], b: any[]) => boolean;
+export declare const isEqual: (a: any, b: any) => boolean;
+export declare function isDeepEqual(a: unknown, b: unknown): boolean;

package/dist/internal/utils/equal.js

@@ -0,0 +1,56 @@
+const isArrayLike = (value) => value?.constructor.name === 'Array';
+export const isArrayEqual = (a, b) => {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (!isEqual(a[i], b[i]))
+            return false;
+    }
+    return true;
+};
+export const isEqual = (a, b) => {
+    if (Object.is(a, b))
+        return true;
+    if ((a == null && b != null) || (a != null && b == null))
+        return false;
+    if (typeof a?.isEqual === 'function' && typeof b?.isEqual === 'function') {
+        return a.isEqual(b);
+    }
+    if (typeof a === 'function' && typeof b === 'function') {
+        return a.toString() === b.toString();
+    }
+    if (isArrayLike(a) && isArrayLike(b)) {
+        return isArrayEqual(Array.from(a), Array.from(b));
+    }
+    if (!(typeof a === 'object') || !(typeof b === 'object'))
+        return false;
+    const keys = Object.keys(b ?? Object.create(null));
+    const length = keys.length;
+    for (let i = 0; i < length; i++) {
+        const hasKey = Reflect.has(a, keys[i]);
+        if (!hasKey)
+            return false;
+    }
+    for (let i = 0; i < length; i++) {
+        const key = keys[i];
+        if (!isEqual(a[key], b[key]))
+            return false;
+    }
+    return true;
+};
+export function isDeepEqual(a, b) {
+    if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null)
+        return false;
+    const aKeys = Object.keys(a);
+    const bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    for (const key of aKeys) {
+        if (!bKeys.includes(key))
+            return false;
+        if (!isEqual(a[key], b[key])) {
+            return false;
+        }
+    }
+    return true;
+}

package/dist/internal/utils/functions.d.ts

@@ -0,0 +1,2 @@
+export type MaybeFunction<T> = T | (() => T);
+export declare const runIfFn: <T>(v: T | undefined, ...a: T extends (...a: any[]) => void ? Parameters<T> : never) => T extends (...a: any[]) => void ? NonNullable<ReturnType<T>> : NonNullable<T>;

package/dist/internal/utils/functions.js

@@ -0,0 +1,4 @@
+export const runIfFn = (v, ...a) => {
+    const res = typeof v === 'function' ? v(...a) : v;
+    return res ?? undefined;
+};

package/dist/internal/utils/guard.d.ts

@@ -0,0 +1,5 @@
+export declare const isArray: (v: any) => v is any[];
+export declare const isBoolean: (v: any) => v is boolean;
+export declare const isObjectLike: (v: any) => v is Record<string, any>;
+export declare const isObject: (v: any) => v is Record<string, any>;
+export declare const hasProp: <T extends string>(obj: any, prop: T) => obj is Record<T, any>;

package/dist/internal/utils/guard.js

@@ -0,0 +1,5 @@
+export const isArray = (v) => Array.isArray(v);
+export const isBoolean = (v) => v === true || v === false;
+export const isObjectLike = (v) => v != null && typeof v === 'object';
+export const isObject = (v) => isObjectLike(v) && !isArray(v);
+export const hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);

package/dist/internal/utils/tailwindcss.d.ts

@@ -1,3 +1,4 @@
+import { type TV } from 'tailwind-variants';
 declare const twMerge: (...classLists: import("tailwind-merge").ClassNameValue[]) => string;
-declare const tv: import("tailwind-variants").CreateTV;
-export { tv, twMerge };
+export declare const tv: TV;
+export { twMerge };

package/dist/internal/utils/tailwindcss.js

@@ -1,5 +1,5 @@
 import { extendTailwindMerge, } from 'tailwind-merge';
-import { createTV } from 'tailwind-variants';
+import { tv as tvBase } from 'tailwind-variants';
 const tailwindMergeConfig = {
     prefix: 'cgui:',
     extend: {
@@ -35,12 +35,32 @@ const tailwindMergeConfig = {
                 'border-state-info-light',
             ],
             blur: ['blur-xxs', 'blur-xs', 'blur-sm', 'blur-md', 'blur-lg', 'blur-xl', 'blur-2xl'],
+            shadow: [
+                'shadow-base',
+                'shadow-toast',
+                'shadow-switch-thumb',
+                'shadow-segment-item',
+                'shadow-popover',
+                'shadow-select',
+                'shadow-dialog',
+                'shadow-dropdown',
+            ],
         },
     },
 };
+const tvMergeConfig = {
+    classGroups: tailwindMergeConfig.extend?.classGroups,
+};
 const twMerge = extendTailwindMerge(tailwindMergeConfig);
-const tv = createTV({
-    twMerge: true,
-    twMergeConfig: tailwindMergeConfig,
+export const tv = (options, config) => tvBase(options, {
+    ...config,
+    twMerge: config?.twMerge ?? true,
+    twMergeConfig: {
+        ...config?.twMergeConfig,
+        classGroups: {
+            ...tvMergeConfig.classGroups,
+            ...config?.twMergeConfig?.classGroups,
+        },
+    },
 });
-export { tv, twMerge };
+export { twMerge };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.6.2",
+  "version": "1.8.0",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -14,8 +14,9 @@
   },
   "files": [
     "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
+    "!dist/**/*.stories.*",
+    "!dist/**/examples/**",
+    "!dist/**/*.test.*"
   ],
   "sideEffects": [
     "**/*.css"
@@ -62,11 +63,12 @@
   },
   "dependencies": {
     "@tanstack/table-core": "^8.21.3",
+    "@zag-js/collection": "^1.30.0",
     "bits-ui": "^2.8.11",
     "runed": "^0.35.1",
     "svelte-toolbelt": "^0.10.6",
     "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^1.0.0"
+    "tailwind-variants": "^3.2.2"
   },
   "scripts": {
     "dev": "vite dev",

package/dist/components/app-shell/app-shell.stories.svelte

@@ -1,107 +0,0 @@
-<script lang="ts" module>
-  import { Skeleton } from '../skeleton/index.js';
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import type { Parameters } from '@storybook/sveltekit';
-  import type { ComponentProps } from 'svelte';
-  import Root from './components/app-shell.root.svelte';
-  import { AppShellPrimitive } from './index.js';
-
-  const parameters: Parameters = {
-    controls: {
-      include: ['collapsed', 'layout', 'sidebar', 'header', 'withBorder'],
-    },
-
-    docs: {
-      story: {
-        inline: false,
-        iframeHeight: 700,
-      },
-    },
-  };
-
-  const { Story } = defineMeta({
-    title: 'UI Kit/AppShell',
-    component: Root,
-    tags: ['autodocs'],
-    parameters,
-
-    argTypes: {
-      collapsed: {
-        table: {
-          defaultValue: { summary: 'false' },
-        },
-      },
-    },
-  });
-
-  type Args = ComponentProps<typeof Root>;
-
-  const args: Args = {
-    collapsed: false,
-    layout: 'adjacent',
-    withBorder: true,
-    sidebar: {
-      width: 256,
-      collapsedWidth: 80,
-    },
-    header: {
-      height: 48,
-    },
-  };
-
-  const items = Array.from({ length: 10 }).map((_, idx) => idx);
-
-  function formatDate(date: Date): string {
-    const formatter = new Intl.DateTimeFormat('en-GB', {
-      day: '2-digit',
-      month: '2-digit',
-      year: 'numeric',
-      hour: 'numeric',
-      minute: '2-digit',
-      timeZoneName: 'shortOffset',
-      hour12: false,
-    });
-
-    const parts = formatter.formatToParts(date);
-    const day = parts.find((p) => p.type === 'day')?.value;
-    const month = parts.find((p) => p.type === 'month')?.value;
-    const year = parts.find((p) => p.type === 'year')?.value;
-    const hour = parts.find((p) => p.type === 'hour')?.value;
-    const minute = parts.find((p) => p.type === 'minute')?.value;
-    const timeZone = parts.find((p) => p.type === 'timeZoneName')?.value;
-
-    return `${day}.${month}.${year} ${hour}:${minute} ${timeZone}`;
-  }
-</script>
-
-<Story name="Basic" {parameters} {args}>
-  {#snippet template(args: Args)}
-    <div class="cgui:fixed cgui:inset-0">
-      <AppShellPrimitive.Root {...args}>
-        <AppShellPrimitive.Header class="cgui:p-4">
-          <p class="cgui:text-caption cgui:text-fg-regular">
-            {formatDate(new Date())}
-          </p>
-        </AppShellPrimitive.Header>
-        <AppShellPrimitive.Sidebar>
-          <AppShellPrimitive.SidebarHead></AppShellPrimitive.SidebarHead>
-          <AppShellPrimitive.NavBar></AppShellPrimitive.NavBar>
-          <AppShellPrimitive.SidebarFooter class="cgui:justify-end">
-            <AppShellPrimitive.SidebarToggle />
-          </AppShellPrimitive.SidebarFooter>
-        </AppShellPrimitive.Sidebar>
-        <AppShellPrimitive.Viewport>
-          <AppShellPrimitive.Content class="cgui:p-4">
-            <div class="cgui:grow cgui:flex cgui:flex-col cgui:gap-4">
-              {#each items as item (item)}
-                <div class="cgui:flex cgui:items-center cgui:gap-4">
-                  <Skeleton count={2} class="cgui:h-20 cgui:flex-1" color="surface" />
-                </div>
-              {/each}
-            </div>
-          </AppShellPrimitive.Content>
-        </AppShellPrimitive.Viewport>
-      </AppShellPrimitive.Root>
-    </div>
-  {/snippet}
-</Story>