@casinogate/ui 2.0.4 → 2.0.6

package/dist/assets/css/root.css

@@ -10,6 +10,7 @@
     --cgui-spacing: 0.25rem;
     --cgui-container-sm: 24rem;
     --cgui-container-xl: 36rem;
+    --cgui-container-2xl: 42rem;
     --cgui-text-xs: 0.75rem;
     --cgui-text-xs--line-height: calc(1 / 0.75);
     --cgui-text-sm: 0.875rem;
@@ -21,6 +22,7 @@
     --cgui-font-weight-normal: 400;
     --cgui-font-weight-medium: 500;
     --cgui-font-weight-semibold: 600;
+    --cgui-tracking-wide: 0.025em;
     --cgui-leading-relaxed: 1.625;
     --cgui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --cgui-animate-spin: spin 1s linear infinite;
@@ -646,6 +648,9 @@
   .cgui\:w-screen {
     width: 100vw;
   }
+  .cgui\:max-w-2xl {
+    max-width: var(--cgui-container-2xl);
+  }
   .cgui\:max-w-32 {
     max-width: calc(var(--cgui-spacing) * 32);
   }
@@ -724,6 +729,9 @@
   .cgui\:min-w-42 {
     min-width: calc(var(--cgui-spacing) * 42);
   }
+  .cgui\:min-w-60 {
+    min-width: calc(var(--cgui-spacing) * 60);
+  }
   .cgui\:min-w-64 {
     min-width: calc(var(--cgui-spacing) * 64);
   }
@@ -1413,6 +1421,10 @@
     --tw-font-weight: var(--cgui-font-weight-semibold);
     font-weight: var(--cgui-font-weight-semibold);
   }
+  .cgui\:tracking-wide {
+    --tw-tracking: var(--cgui-tracking-wide);
+    letter-spacing: var(--cgui-tracking-wide);
+  }
   .cgui\:whitespace-nowrap {
     white-space: nowrap;
   }
@@ -1473,6 +1485,9 @@
   .cgui\:text-state-warning {
     color: var(--cg-ui-color-state-warning);
   }
+  .cgui\:uppercase {
+    text-transform: uppercase;
+  }
   .cgui\:underline {
     text-decoration-line: underline;
   }
@@ -1747,6 +1762,12 @@
       border-radius: calc(infinity * 1px);
     }
   }
+  .cgui\:before\:bg-fg-regular {
+    &::before {
+      content: var(--tw-content);
+      background-color: var(--cg-ui-color-fg-regular);
+    }
+  }
   .cgui\:before\:bg-state-error {
     &::before {
       content: var(--tw-content);
@@ -3682,6 +3703,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -3809,6 +3834,7 @@
       --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;

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

@@ -1,3 +1,4 @@
 export * as ToastPrimitive from './components/index.js';
-export { Toast } from '../../composed/toast/index.js';
+export { Toast, toast, Toaster } from '../../composed/toast/index.js';
+export type { ToastId, ToastVariant, ToastInput, ToastShowInput, ToastPromiseInput, ToasterProps, } from '../../composed/toast/index.js';
 export * from './types.js';

package/dist/components/toast/index.js

@@ -1,3 +1,3 @@
 export * as ToastPrimitive from './components/index.js';
-export { Toast } from '../../composed/toast/index.js';
+export { Toast, toast, Toaster } from '../../composed/toast/index.js';
 export * from './types.js';

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

@@ -5,6 +5,7 @@ export declare const toastPrimitiveRootStyles: import("tailwind-variants").TVRet
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
     rounded: {
         xs: string;
@@ -19,6 +20,7 @@ export declare const toastPrimitiveRootStyles: import("tailwind-variants").TVRet
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
     rounded: {
         xs: string;
@@ -33,6 +35,7 @@ export declare const toastPrimitiveRootStyles: import("tailwind-variants").TVRet
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
     rounded: {
         xs: string;
@@ -61,6 +64,7 @@ export declare const toastPrimitiveInnerIconStyles: import("tailwind-variants").
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
 }, undefined, never[], {
     variant: {
@@ -68,6 +72,7 @@ export declare const toastPrimitiveInnerIconStyles: import("tailwind-variants").
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -75,6 +80,7 @@ export declare const toastPrimitiveInnerIconStyles: import("tailwind-variants").
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
 }, undefined, never[], unknown, unknown, undefined>>;
 export declare const toastPrimitiveBodyStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/toast/styles.js

@@ -1,5 +1,5 @@
 import { tv } from '../../internal/utils/tailwindcss.js';
-const ToastVariants = ['error', 'warning', 'success', 'info'];
+const ToastVariants = ['error', 'warning', 'success', 'info', 'loading'];
 const ToastRoundings = ['xs', 'sm', 'md', 'lg', 'xl'];
 export const toastPrimitiveRootStyles = tv({
     base: [
@@ -15,6 +15,7 @@ export const toastPrimitiveRootStyles = tv({
             warning: 'cgui:before:bg-state-warning',
             success: 'cgui:before:bg-state-success',
             info: 'cgui:before:bg-state-info',
+            loading: 'cgui:before:bg-fg-regular',
         },
         rounded: {
             xs: 'cgui:rounded-xs',
@@ -43,6 +44,7 @@ export const toastPrimitiveInnerIconStyles = tv({
             warning: 'cgui:text-state-warning',
             success: 'cgui:text-state-success',
             info: 'cgui:text-state-info',
+            loading: 'cgui:text-fg-regular cgui:animate-spin',
         },
     },
 });

package/dist/composed/combobox/async/combobox.async.svelte

@@ -1,23 +1,23 @@
 <script lang="ts" generics="TItem extends ComboboxItem">
   import type { ComboboxAsyncProps, ComboboxItem } from '../types.js';
 
+  import { Icon, Icon as IconComponent } from '../../../atomic/icons/index.js';
   import { SELECTION_TYPE } from '../../../internal/constants/selection-type.js';
   import { boolAttr } from '../../../internal/utils/attrs.js';
   import { cn, noop } from '../../../internal/utils/common.js';
+  import { Command as CommandPrimitive } from '../../../primitives/command/index.js';
+  import { Kbd } from '../../../primitives/kbd/index.js';
+  import { Popover as PopoverPrimitive } from '../../../primitives/popover/index.js';
+  import { Spinner } from '../../../primitives/spinner/index.js';
   import { watch } from 'runed';
   import { afterTick, boxWith } from 'svelte-toolbelt';
   import type { Attachment } from 'svelte/attachments';
   import { cubicInOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { Icon, Icon as IconComponent } from '../../../atomic/icons/index.js';
-  import { Command as CommandPrimitive } from '../../../primitives/command/index.js';
-  import { Kbd } from '../../../primitives/kbd/index.js';
-  import { Popover as PopoverPrimitive } from '../../../primitives/popover/index.js';
-  import { Spinner } from '../../../primitives/spinner/index.js';
-  import { comboboxTriggerVariants } from '../styles.js';
   import { useDisplayValue } from '../model/use-display-value.svelte.js';
   import { useGroupedItems } from '../model/use-grouped-items.svelte.js';
   import { useSelectedItems } from '../model/use-selected-items.svelte.js';
+  import { comboboxTriggerVariants } from '../styles.js';
   import { useAsyncComboboxData } from './use-async-combobox-data.svelte.js';
 
   let {
@@ -50,11 +50,9 @@
 
     loading: loadingSnippet,
     pageSize = 10,
-    callback,
     loadItems,
     loadImmediate = true,
-    debounceMs,
-    searchDebounce = 300,
+    debounceMs = 300,
     dependsOn,
     clearOnDependencyChange = true,
     onDependencyChange,
@@ -114,7 +112,7 @@
   const hasResults = $derived(items.length > 0);
 
   const resolvedLoadItems = $derived.by(() => {
-    const loader = loadItems ?? callback;
+    const loader = loadItems;
     if (!loader) {
       throw new Error('Combobox.Async requires either loadItems or callback');
     }
@@ -137,7 +135,7 @@
       }
     ),
     pageSize: boxWith(() => pageSize),
-    debounceMs: boxWith(() => debounceMs ?? searchDebounce),
+    debounceMs: boxWith(() => debounceMs),
     loadImmediate: boxWith(() => loadImmediate),
     dependency: boxWith(() => dependsOn?.()),
     onDependencyReset: (dependency) => {

package/dist/composed/combobox/creatable/combobox.creatable.svelte

@@ -1,7 +1,7 @@
 <script lang="ts" generics="TItem extends ComboboxItem">
   import { Icon } from '../../../atomic/icons/index.js';
   import { SELECTION_TYPE } from '../../../internal/constants/selection-type.js';
-  import { noop } from '../../../internal/utils/common.js';
+  import { noop, noopPromise } from '../../../internal/utils/common.js';
   import { Combobox as ComboboxPrimitive } from '../../../primitives/combobox/index.js';
   import { Kbd } from '../../../primitives/kbd/index.js';
   import { boxWith } from 'svelte-toolbelt';
@@ -42,7 +42,7 @@
     label: labelSnippet,
     createLabel = (inputValue) => `Create "${inputValue}"`,
     isCreatable = defaultIsCreatable,
-    onCreate,
+    onCreate = noopPromise,
     onSelect = noop,
     ...restProps
   }: ComboboxCreatableProps<TItem> = $props();

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

@@ -53,7 +53,7 @@ export type ComboboxProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxS
 type ComboboxCreatableBaseProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxBaseProps<TItem> & {
     createLabel?: (inputValue: string) => string;
     isCreatable?: (inputValue: string, items: TItem[]) => boolean;
-    onCreate: (inputValue: string) => TItem | Promise<TItem>;
+    onCreate?: (inputValue: string) => TItem | Promise<TItem>;
 };
 export type ComboboxCreatableSingleProps<TItem extends ComboboxItem = ComboboxItem> = ComboboxCreatableBaseProps<TItem> & {
     type: typeof SELECTION_TYPE.SINGLE;
@@ -79,20 +79,9 @@ export type ComboboxAsyncLoadResult<TItem extends ComboboxItem> = {
     hasMore: boolean;
 };
 export type ComboboxAsyncLoader<TItem extends ComboboxItem = ComboboxItem> = (params: ComboboxAsyncLoadParams) => Promise<ComboboxAsyncLoadResult<TItem>>;
-/** @deprecated Use ComboboxAsyncLoadParams instead. */
-export type ComboboxAsyncCallbackParams = ComboboxAsyncLoadParams;
-/** @deprecated Use ComboboxAsyncLoadResult instead. */
-export type ComboboxAsyncCallbackResult<TItem extends ComboboxItem> = ComboboxAsyncLoadResult<TItem>;
-/** @deprecated Use ComboboxAsyncLoader instead. */
-export type ComboboxAsyncCallback<TItem extends ComboboxItem = ComboboxItem> = ComboboxAsyncLoader<TItem>;
 type ComboboxAsyncLoadProp<TItem extends ComboboxItem> = {
     /** Preferred async loader API */
     loadItems: ComboboxAsyncLoader<TItem>;
-    callback?: never;
-} | {
-    /** @deprecated Use loadItems instead. Kept for backwards compatibility. */
-    callback: ComboboxAsyncLoader<TItem>;
-    loadItems?: never;
 };
 type ComboboxAsyncBaseProps<TItem extends ComboboxItem> = Omit<ComboboxBaseProps<TItem>, 'items' | 'item' | 'onSelect'> & ComboboxAsyncLoadProp<TItem> & {
     items?: TItem[];
@@ -109,8 +98,6 @@ type ComboboxAsyncBaseProps<TItem extends ComboboxItem> = Omit<ComboboxBaseProps
     groups?: CommandGroup[];
     /** Preferred name */
     debounceMs?: number;
-    /** @deprecated Use debounceMs instead. */
-    searchDebounce?: number;
     dependsOn?: () => unknown;
     clearOnDependencyChange?: boolean;
     onDependencyChange?: (value: unknown) => void;

package/dist/composed/toast/index.d.ts

@@ -1,2 +1,6 @@
 export * as Toast from './root/index.js';
+export { toast } from './toast.js';
+export type { ToastId, ToastVariant, ToastInput, ToastShowInput, ToastPromiseInput } from './toast.js';
+export { Toaster } from './toaster/index.js';
+export type { ToasterProps } from './toaster/index.js';
 export type * from './types.js';

package/dist/composed/toast/index.js

@@ -1 +1,3 @@
 export * as Toast from './root/index.js';
+export { toast } from './toast.js';
+export { Toaster } from './toaster/index.js';

package/dist/composed/toast/toast.js

@@ -0,0 +1,55 @@
+import { toast as sonnerToast } from 'svelte-sonner';
+import ToastRoot from './root/toast.root.svelte';
+function emit(variant, input) {
+    const { title, description, icon, hasIcon, rounded, onClose, ...sonnerOpts } = input;
+    let id = sonnerOpts.id ?? '';
+    id = sonnerToast.custom(ToastRoot, {
+        unstyled: true,
+        ...sonnerOpts,
+        componentProps: {
+            variant,
+            title,
+            description,
+            icon,
+            hasIcon,
+            rounded,
+            onClose: () => {
+                sonnerToast.dismiss(id);
+                onClose?.();
+            },
+        },
+    });
+    return id;
+}
+function promise(p, input) {
+    const { loading, success, error, finally: onFinally, ...rest } = input;
+    const id = emit('loading', { ...rest, ...loading });
+    const settle = typeof p === 'function' ? p() : p;
+    settle
+        .then((data) => {
+        const next = typeof success === 'function' ? success(data) : success;
+        emit('success', { ...rest, ...next, id });
+    })
+        .catch((err) => {
+        const next = typeof error === 'function' ? error(err) : error;
+        emit('error', { ...rest, ...next, id });
+    })
+        .finally(() => {
+        onFinally?.();
+    });
+    return id;
+}
+export const toast = {
+    info: (input) => emit('info', input),
+    success: (input) => emit('success', input),
+    warning: (input) => emit('warning', input),
+    error: (input) => emit('error', input),
+    loading: (input) => emit('loading', input),
+    message: (input) => emit('info', input),
+    show: ({ variant = 'info', ...rest }) => emit(variant, rest),
+    update: (id, input) => emit(input.variant ?? 'info', { ...input, id }),
+    promise,
+    dismiss: (id) => sonnerToast.dismiss(id),
+    getActiveToasts: () => sonnerToast.getActiveToasts(),
+    custom: sonnerToast.custom,
+};

package/dist/composed/toast/toaster/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Toaster } from './toaster.svelte';
+export type { ToasterProps } from 'svelte-sonner';

package/dist/composed/toast/toaster/index.js

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

package/dist/composed/toast/toaster/toaster.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Toaster as SonnerToaster, type ToasterProps } from 'svelte-sonner';
+
+  let {
+    position = 'bottom-right',
+    expand = true,
+    visibleToasts = 3,
+    duration = 4000,
+    closeButton = false,
+    toastOptions,
+    ...restProps
+  }: ToasterProps = $props();
+</script>
+
+<SonnerToaster
+  {position}
+  {expand}
+  {visibleToasts}
+  {duration}
+  {closeButton}
+  toastOptions={{ unstyled: true, ...toastOptions }}
+  {...restProps}
+/>

package/dist/composed/toast/toaster/toaster.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ToasterProps } from 'svelte-sonner';
+declare const Toaster: import("svelte").Component<ToasterProps, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;

package/dist/primitives/toast/components/toast.icon.svelte

@@ -14,6 +14,7 @@
     if (variant === 'error') return Icon.Error;
     if (variant === 'warning') return Icon.Warning;
     if (variant === 'success') return Icon.Success;
+    if (variant === 'loading') return Icon.Spinner;
     return Icon.Info;
   });
 </script>

package/dist/primitives/toast/styles.d.ts

@@ -5,6 +5,7 @@ export declare const toastPrimitiveRootStyles: import("tailwind-variants").TVRet
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
     rounded: {
         xs: string;
@@ -19,6 +20,7 @@ export declare const toastPrimitiveRootStyles: import("tailwind-variants").TVRet
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
     rounded: {
         xs: string;
@@ -33,6 +35,7 @@ export declare const toastPrimitiveRootStyles: import("tailwind-variants").TVRet
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
     rounded: {
         xs: string;
@@ -61,6 +64,7 @@ export declare const toastPrimitiveInnerIconStyles: import("tailwind-variants").
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
 }, undefined, never[], {
     variant: {
@@ -68,6 +72,7 @@ export declare const toastPrimitiveInnerIconStyles: import("tailwind-variants").
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -75,6 +80,7 @@ export declare const toastPrimitiveInnerIconStyles: import("tailwind-variants").
         warning: string;
         success: string;
         info: string;
+        loading: string;
     };
 }, undefined, never[], unknown, unknown, undefined>>;
 export declare const toastPrimitiveBodyStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;

package/dist/primitives/toast/styles.js

@@ -1,7 +1,7 @@
 import { tv } from '../../internal/utils/tailwindcss.js';
 export const toastPrimitiveRootStyles = tv({
     base: [
-        'cgui:overflow-hidden cgui:relative cgui:min-w-42 cgui:max-w-80',
+        'cgui:overflow-hidden cgui:relative cgui:min-w-60 cgui:max-w-80',
         'cgui:flex cgui:items-center cgui:gap-2 cgui:p-3',
         'cgui:shadow-toast cgui:bg-surface-white',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
@@ -13,6 +13,7 @@ export const toastPrimitiveRootStyles = tv({
             warning: 'cgui:before:bg-state-warning',
             success: 'cgui:before:bg-state-success',
             info: 'cgui:before:bg-state-info',
+            loading: 'cgui:before:bg-fg-regular',
         },
         rounded: {
             xs: 'cgui:rounded-xs',
@@ -41,6 +42,7 @@ export const toastPrimitiveInnerIconStyles = tv({
             warning: 'cgui:text-state-warning',
             success: 'cgui:text-state-success',
             info: 'cgui:text-state-info',
+            loading: 'cgui:text-fg-regular cgui:animate-spin',
         },
     },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -517,6 +517,7 @@
     "@zag-js/collection": "^1.30.0",
     "bits-ui": "2.16.3",
     "runed": "^0.35.1",
+    "svelte-sonner": "^1.1.1",
     "svelte-toolbelt": "^0.10.6",
     "tailwind-merge": "^3.3.1",
     "tailwind-variants": "^3.2.2",