@casinogate/ui 2.0.6 → 2.0.8

package/dist/assets/css/root.css

@@ -382,6 +382,10 @@
     width: calc(var(--cgui-spacing) * 8);
     height: calc(var(--cgui-spacing) * 8);
   }
+  .cgui\:size-9 {
+    width: calc(var(--cgui-spacing) * 9);
+    height: calc(var(--cgui-spacing) * 9);
+  }
   .cgui\:size-10 {
     width: calc(var(--cgui-spacing) * 10);
     height: calc(var(--cgui-spacing) * 10);
@@ -558,6 +562,9 @@
   .cgui\:min-h-11 {
     min-height: calc(var(--cgui-spacing) * 11);
   }
+  .cgui\:min-h-12 {
+    min-height: calc(var(--cgui-spacing) * 12);
+  }
   .cgui\:min-h-48 {
     min-height: calc(var(--cgui-spacing) * 48);
   }
@@ -1109,24 +1116,48 @@
   .cgui\:bg-state-error-light {
     background-color: var(--cg-ui-color-state-error-light);
   }
+  .cgui\:bg-state-error\/30 {
+    background-color: var(--cg-ui-color-state-error);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-state-error) 30%, transparent);
+    }
+  }
   .cgui\:bg-state-info {
     background-color: var(--cg-ui-color-state-info);
   }
   .cgui\:bg-state-info-light {
     background-color: var(--cg-ui-color-state-info-light);
   }
+  .cgui\:bg-state-info\/30 {
+    background-color: var(--cg-ui-color-state-info);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-state-info) 30%, transparent);
+    }
+  }
   .cgui\:bg-state-success {
     background-color: var(--cg-ui-color-state-success);
   }
   .cgui\:bg-state-success-light {
     background-color: var(--cg-ui-color-state-success-light);
   }
+  .cgui\:bg-state-success\/30 {
+    background-color: var(--cg-ui-color-state-success);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-state-success) 30%, transparent);
+    }
+  }
   .cgui\:bg-state-warning {
     background-color: var(--cg-ui-color-state-warning);
   }
   .cgui\:bg-state-warning-light {
     background-color: var(--cg-ui-color-state-warning-light);
   }
+  .cgui\:bg-state-warning\/30 {
+    background-color: var(--cg-ui-color-state-warning);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-state-warning) 30%, transparent);
+    }
+  }
   .cgui\:bg-stroke-divider {
     background-color: var(--cg-ui-color-stroke-divider);
   }
@@ -1178,6 +1209,12 @@
       background-color: color-mix(in oklab, var(--cg-ui-color-surface-primary) 5%, transparent);
     }
   }
+  .cgui\:bg-surface-primary\/30 {
+    background-color: var(--cg-ui-color-surface-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-surface-primary) 30%, transparent);
+    }
+  }
   .cgui\:bg-surface-regular {
     background-color: var(--cg-ui-color-surface-regular);
   }
@@ -1280,6 +1317,9 @@
   .cgui\:px-6 {
     padding-inline: calc(var(--cgui-spacing) * 6);
   }
+  .cgui\:py-0 {
+    padding-block: calc(var(--cgui-spacing) * 0);
+  }
   .cgui\:py-0\.5 {
     padding-block: calc(var(--cgui-spacing) * 0.5);
   }
@@ -1830,6 +1870,26 @@
       --tw-ring-color: var(--cg-ui-color-stroke-focus);
     }
   }
+  .cgui\:hover\:border-stroke-error\/80 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--cg-ui-color-stroke-error);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--cg-ui-color-stroke-error) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:border-stroke-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--cg-ui-color-stroke-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          border-color: color-mix(in oklab, var(--cg-ui-color-stroke-primary) 80%, transparent);
+        }
+      }
+    }
+  }
   .cgui\:hover\:bg-primary-60 {
     &:hover {
       @media (hover: hover) {
@@ -1837,6 +1897,86 @@
       }
     }
   }
+  .cgui\:hover\:bg-state-error\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-error);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-error) 20%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-error\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-error);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-error) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-info\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-info);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-info) 20%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-info\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-info);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-info) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-success\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-success);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-success) 20%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-success\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-success);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-success) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-warning\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-warning);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-warning) 20%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:bg-state-warning\/80 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-state-warning);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-state-warning) 80%, transparent);
+        }
+      }
+    }
+  }
   .cgui\:hover\:bg-surface-hover {
     &:hover {
       @media (hover: hover) {
@@ -1858,6 +1998,16 @@
       }
     }
   }
+  .cgui\:hover\:bg-surface-primary\/20 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--cg-ui-color-surface-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--cg-ui-color-surface-primary) 20%, transparent);
+        }
+      }
+    }
+  }
   .cgui\:hover\:text-fg-darkest {
     &:hover {
       @media (hover: hover) {
@@ -1865,6 +2015,23 @@
       }
     }
   }
+  .cgui\:hover\:text-fg-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-fg-primary);
+      }
+    }
+  }
+  .cgui\:hover\:text-fg-primary\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-fg-primary);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--cg-ui-color-fg-primary) 80%, transparent);
+        }
+      }
+    }
+  }
   .cgui\:hover\:text-fg-white {
     &:hover {
       @media (hover: hover) {
@@ -1879,6 +2046,46 @@
       }
     }
   }
+  .cgui\:hover\:text-state-error\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-state-error);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--cg-ui-color-state-error) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:text-state-info\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-state-info);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--cg-ui-color-state-info) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:text-state-success\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-state-success);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--cg-ui-color-state-success) 80%, transparent);
+        }
+      }
+    }
+  }
+  .cgui\:hover\:text-state-warning\/80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--cg-ui-color-state-warning);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklab, var(--cg-ui-color-state-warning) 80%, transparent);
+        }
+      }
+    }
+  }
   .cgui\:hover\:no-underline {
     &:hover {
       @media (hover: hover) {
@@ -1912,12 +2119,50 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .cgui\:focus-visible\:ring-1 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
   .cgui\:focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .cgui\:focus-visible\:ring-state-error\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--cg-ui-color-state-error);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--cg-ui-color-state-error) 30%, transparent);
+      }
+    }
+  }
+  .cgui\:focus-visible\:ring-state-info\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--cg-ui-color-state-info);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--cg-ui-color-state-info) 30%, transparent);
+      }
+    }
+  }
+  .cgui\:focus-visible\:ring-state-success\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--cg-ui-color-state-success);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--cg-ui-color-state-success) 30%, transparent);
+      }
+    }
+  }
+  .cgui\:focus-visible\:ring-state-warning\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--cg-ui-color-state-warning);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--cg-ui-color-state-warning) 30%, transparent);
+      }
+    }
+  }
   .cgui\:focus-visible\:ring-stroke-focus {
     &:focus-visible {
       --tw-ring-color: var(--cg-ui-color-stroke-focus);
@@ -1928,6 +2173,14 @@
       --tw-ring-color: var(--cg-ui-color-stroke-primary);
     }
   }
+  .cgui\:focus-visible\:ring-stroke-primary\/30 {
+    &:focus-visible {
+      --tw-ring-color: var(--cg-ui-color-stroke-primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--cg-ui-color-stroke-primary) 30%, transparent);
+      }
+    }
+  }
   .cgui\:focus-visible\:ring-stroke-primary\/50 {
     &:focus-visible {
       --tw-ring-color: var(--cg-ui-color-stroke-primary);
@@ -2560,6 +2813,20 @@
       animation: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none);
     }
   }
+  .cgui\:data-\[state\=open\]\:ring-1 {
+    &[data-state="open"] {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .cgui\:data-\[state\=open\]\:ring-stroke-primary\/50 {
+    &[data-state="open"] {
+      --tw-ring-color: var(--cg-ui-color-stroke-primary);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--cg-ui-color-stroke-primary) 50%, transparent);
+      }
+    }
+  }
   .cgui\:data-\[state\=open\]\:fade-in-0 {
     &[data-state="open"] {
       --tw-enter-opacity: calc(0/100);

package/dist/composed/select/root/select.root.svelte

@@ -76,8 +76,8 @@
 
 {#snippet clearControl()}
   {#if clearable && isNotEmpty}
-    <span
-      role="button"
+    <button
+      type="button"
       tabindex={0}
       aria-label="Clear selection"
       class="cgui:ms-auto cgui:text-icon-regular cgui:size-4 cgui:cursor-pointer cgui:flex cgui:items-center cgui:justify-center cgui:shrink-0"
@@ -85,7 +85,7 @@
       onkeydown={onClearKeyDown}
     >
       <Icon.Cross width={16} height={16} />
-    </span>
+    </button>
   {/if}
 {/snippet}
 

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

@@ -0,0 +1,37 @@
+import { type ExternalToast } from 'svelte-sonner';
+import type { Component, ComponentProps } from 'svelte';
+import type { ToastRootProps } from './types.js';
+type ToastContent = Pick<ToastRootProps, 'title' | 'description' | 'icon' | 'hasIcon' | 'rounded' | 'onClose'>;
+type ToastSonnerOptions = Pick<ExternalToast, 'id' | 'duration' | 'position' | 'dismissible' | 'important' | 'onDismiss' | 'onAutoClose' | 'class' | 'classes' | 'descriptionClass' | 'style' | 'unstyled' | 'invert' | 'richColors'>;
+export type ToastId = number | string;
+export type ToastVariant = NonNullable<ToastRootProps['variant']>;
+export type ToastInput = ToastContent & ToastSonnerOptions;
+export type ToastShowInput = ToastInput & {
+    variant?: ToastVariant;
+};
+export type ToastPromiseInput<T> = Omit<ToastInput, 'title' | 'description'> & {
+    loading: Pick<ToastInput, 'title' | 'description'>;
+    success: Pick<ToastInput, 'title' | 'description'> | ((data: T) => Pick<ToastInput, 'title' | 'description'>);
+    error: Pick<ToastInput, 'title' | 'description'> | ((err: unknown) => Pick<ToastInput, 'title' | 'description'>);
+    finally?: () => void | Promise<void>;
+};
+type ToastApi = {
+    info: (input: ToastInput) => ToastId;
+    success: (input: ToastInput) => ToastId;
+    warning: (input: ToastInput) => ToastId;
+    error: (input: ToastInput) => ToastId;
+    loading: (input: ToastInput) => ToastId;
+    message: (input: ToastInput) => ToastId;
+    show: (input: ToastShowInput) => ToastId;
+    update: (id: ToastId, input: ToastShowInput) => ToastId;
+    promise: <T>(p: Promise<T> | (() => Promise<T>), input: ToastPromiseInput<T>) => ToastId;
+    dismiss: (id?: ToastId) => ToastId | undefined;
+    getActiveToasts: () => Array<{
+        id: ToastId;
+    }>;
+    custom: <C extends Component<any, any, any>>(component: C, data?: ExternalToast<C> & {
+        componentProps?: ComponentProps<C>;
+    }) => ToastId;
+};
+export declare const toast: ToastApi;
+export {};

package/dist/composed/toast/toast.js

@@ -51,5 +51,5 @@ export const toast = {
     promise,
     dismiss: (id) => sonnerToast.dismiss(id),
     getActiveToasts: () => sonnerToast.getActiveToasts(),
-    custom: sonnerToast.custom,
+    custom: (component, data) => sonnerToast.custom(component, data),
 };

package/dist/primitives/button/components/button.root.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { Spinner } from '../../spinner/index.js';
   import { useId } from '../../../internal/utils/common.js';
   import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Spinner } from '../../spinner/index.js';
   import { buttonVariants } from '../styles.js';
   import type { ButtonProps } from '../types.js';
 
@@ -14,7 +14,8 @@
     children,
     child,
     ref = $bindable(null),
-    variant = 'primary',
+    variant = 'filled',
+    tone = 'primary',
     size = 'md',
     rounded = 'md',
     disabled = false,
@@ -32,7 +33,7 @@
     id,
     loading,
     disabled: isDisabled,
-    class: cn(buttonVariants({ variant, size, rounded, shadow, w, loading }), className),
+    class: cn(buttonVariants({ variant, tone, size, rounded, shadow, w, loading }), className),
     'data-disabled': boolAttr(isDisabled),
     'data-slot': 'button',
     ...restProps,

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

@@ -1,10 +1,19 @@
 import type { VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {
@@ -39,10 +48,19 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, string[], {
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {
@@ -77,10 +95,19 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {

package/dist/primitives/button/styles.js

@@ -1,27 +1,29 @@
 import { tv } from '../../internal/utils/tailwindcss.js';
 export const buttonVariants = tv({
     base: [
-        'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden',
+        'cgui:flex cgui:items-center cgui:justify-center cgui:gap-1 cgui:cursor-pointer cgui:px-2 cgui:text-center cgui:overflow-hidden cgui:shrink-0',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
-        'cgui:select-none cgui:font-medium',
+        'cgui:select-none cgui:font-medium cgui:outline-none cgui:bg-clip-padding cgui:whitespace-nowrap',
         'cgui:data-disabled:cursor-not-allowed cgui:data-disabled:opacity-50',
-        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:size-4.5',
+        'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg:not([class*="size-"])]:size-4.5',
+        'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-2',
+        'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
     ],
     variants: {
         variant: {
-            primary: ['cgui:bg-primary-80  cgui:text-fg-white', 'cgui:hover:bg-primary-60 ', ' cgui:active:bg-primary-100'],
-            outline: [
-                'cgui:bg-transparent cgui:text-primary-80 cgui:border cgui:border-stroke-primary',
-                'cgui:hover:text-primary-60 cgui:hover:border-stroke-primary-60',
-                'cgui:active:text-primary-100 cgui:active:border-stroke-primary-100',
-            ],
-            ghost: ['cgui:bg-transparent cgui:text-primary-80', 'cgui:hover:text-primary-60', 'cgui:active:text-primary-100'],
-            link: [
-                'cgui:bg-transparent cgui:text-primary-80',
-                'cgui:hover:text-primary-60',
-                'cgui:active:text-primary-100',
-                'cgui:underline',
-            ],
+            filled: [],
+            outline: ['cgui:bg-transparent'],
+            link: ['cgui:bg-transparent', 'cgui:underline'],
+            ghost: ['cgui:bg-transparent'],
+            soft: [],
+            none: [],
+        },
+        tone: {
+            primary: ['cgui:focus-visible:ring-stroke-primary/30 '],
+            success: ['cgui:focus-visible:ring-state-success/30 '],
+            warning: ['cgui:focus-visible:ring-state-warning/30 '],
+            error: ['cgui:focus-visible:ring-state-error/30 '],
+            info: ['cgui:focus-visible:ring-state-info/30 '],
             none: [],
         },
         loading: {
@@ -55,8 +57,170 @@ export const buttonVariants = tv({
             none: '',
         },
     },
+    compoundVariants: [
+        {
+            variant: 'filled',
+            tone: 'primary',
+            class: ['cgui:bg-surface-primary cgui:text-fg-white', 'cgui:hover:bg-surface-primary-active'],
+        },
+        {
+            variant: 'filled',
+            tone: 'success',
+            class: ['cgui:bg-state-success cgui:text-fg-white', 'cgui:hover:bg-state-success/80'],
+        },
+        {
+            variant: 'filled',
+            tone: 'warning',
+            class: ['cgui:bg-state-warning cgui:text-fg-white', 'cgui:hover:bg-state-warning/80'],
+        },
+        {
+            variant: 'filled',
+            tone: 'error',
+            class: ['cgui:bg-state-error cgui:text-fg-white', 'cgui:hover:bg-state-error/80'],
+        },
+        {
+            variant: 'filled',
+            tone: 'info',
+            class: ['cgui:bg-state-info cgui:text-fg-white', 'cgui:hover:bg-state-info/80'],
+        },
+        // outline
+        {
+            variant: 'outline',
+            tone: 'primary',
+            class: [
+                'cgui:text-fg-primary cgui:border cgui:border-stroke-primary',
+                'cgui:hover:text-fg-primary/80 cgui:hover:border-stroke-primary/80',
+            ],
+        },
+        {
+            variant: 'outline',
+            tone: 'success',
+            class: [
+                'cgui:text-state-success cgui:border cgui:border-stroke-success',
+                'cgui:hover:text-state-success/80 cgui:hover:border-stroke-success/80',
+            ],
+        },
+        {
+            variant: 'outline',
+            tone: 'warning',
+            class: [
+                'cgui:text-state-warning cgui:border cgui:border-stroke-warning',
+                'cgui:hover:text-state-warning/80 cgui:hover:border-stroke-warning/80',
+            ],
+        },
+        {
+            variant: 'outline',
+            tone: 'error',
+            class: [
+                'cgui:text-state-error cgui:border cgui:border-stroke-error',
+                'cgui:hover:text-state-error/80 cgui:hover:border-stroke-error/80',
+            ],
+        },
+        {
+            variant: 'outline',
+            tone: 'info',
+            class: [
+                'cgui:text-state-info cgui:border cgui:border-stroke-info',
+                'cgui:hover:text-state-info/80 cgui:hover:border-stroke-info/80',
+            ],
+        },
+        // ghost
+        {
+            variant: 'ghost',
+            tone: 'primary',
+            class: ['cgui:text-fg-primary', 'cgui:hover:text-fg-primary/80'],
+        },
+        {
+            variant: 'ghost',
+            tone: 'success',
+            class: ['cgui:text-state-success', 'cgui:hover:text-state-success/80'],
+        },
+        {
+            variant: 'ghost',
+            tone: 'warning',
+            class: ['cgui:text-state-warning', 'cgui:hover:text-state-warning/80'],
+        },
+        {
+            variant: 'ghost',
+            tone: 'error',
+            class: ['cgui:text-state-error', 'cgui:hover:text-state-error/80'],
+        },
+        {
+            variant: 'ghost',
+            tone: 'info',
+            class: ['cgui:text-state-info', 'cgui:hover:text-state-info/80'],
+        },
+        // link
+        {
+            variant: 'link',
+            tone: 'primary',
+            class: ['cgui:text-fg-primary', 'cgui:hover:text-fg-primary/80'],
+        },
+        {
+            variant: 'link',
+            tone: 'success',
+            class: ['cgui:text-state-success', 'cgui:hover:text-state-success/80'],
+        },
+        {
+            variant: 'link',
+            tone: 'warning',
+            class: ['cgui:text-state-warning', 'cgui:hover:text-state-warning/80'],
+        },
+        {
+            variant: 'link',
+            tone: 'error',
+            class: ['cgui:text-state-error', 'cgui:hover:text-state-error/80'],
+        },
+        {
+            variant: 'link',
+            tone: 'info',
+            class: ['cgui:text-state-info', 'cgui:hover:text-state-info/80'],
+        },
+        // soft
+        {
+            variant: 'soft',
+            tone: 'primary',
+            class: [
+                'cgui:bg-surface-primary/30  cgui:text-fg-primary',
+                'cgui:hover:bg-surface-primary/20 cgui:hover:text-fg-primary',
+            ],
+        },
+        {
+            variant: 'soft',
+            tone: 'success',
+            class: [
+                'cgui:bg-state-success/30 cgui:border-stroke-success cgui:text-state-success',
+                'cgui:hover:bg-state-success/20 cgui:hover:border-stroke-success/80',
+            ],
+        },
+        {
+            variant: 'soft',
+            tone: 'warning',
+            class: [
+                'cgui:bg-state-warning/30 cgui:border-stroke-warning cgui:text-state-warning',
+                'cgui:hover:bg-state-warning/20 cgui:hover:border-stroke-warning/80',
+            ],
+        },
+        {
+            variant: 'soft',
+            tone: 'error',
+            class: [
+                'cgui:bg-state-error/30 cgui:border-stroke-error cgui:text-state-error',
+                'cgui:hover:bg-state-error/20 cgui:hover:border-stroke-error/80',
+            ],
+        },
+        {
+            variant: 'soft',
+            tone: 'info',
+            class: [
+                'cgui:bg-state-info/30 cgui:border-stroke-info cgui:text-state-info',
+                'cgui:hover:bg-state-info/20 cgui:hover:border-stroke-info/80',
+            ],
+        },
+    ],
     defaultVariants: {
-        variant: 'primary',
+        variant: 'filled',
+        tone: 'primary',
         size: 'md',
         shadow: true,
         rounded: 'md',

package/dist/primitives/checkbox/styles.js

@@ -14,9 +14,9 @@ export const checkboxRootVariants = tv({
     variants: {
         size: {
             sm: ['cgui:size-3'],
-            md: ['cgui:size-4'],
+            md: ['cgui:size-5'],
             lg: ['cgui:size-6'],
-            xl: ['cgui:size-12'],
+            xl: ['cgui:size-9'],
         },
         rounded: {
             none: {},

package/dist/primitives/combobox/styles.js

@@ -3,10 +3,13 @@ export const comboboxTriggerVariants = tv({
     base: [
         'cgui:group/combobox-trigger ',
         'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
-        'cgui:text-body',
+        'cgui:text-body cgui:outline-none cgui:bg-clip-padding',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
         'cgui:has-[data-slot=chevron]:pr-3',
+        'cgui:data-[state=open]:ring-stroke-primary/50 cgui:data-[state=open]:ring-1',
+        'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-1',
+        'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
     ],
     variants: {
         variant: {
@@ -22,10 +25,14 @@ export const comboboxTriggerVariants = tv({
             none: [],
         },
         size: {
-            sm: ['cgui:min-h-7.5', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8'],
-            default: ['cgui:min-h-9', 'cgui:px-3 cgui:py-2', 'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10'],
+            sm: ['cgui:min-h-9', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8'],
+            default: [
+                'cgui:min-h-10',
+                'cgui:px-3 cgui:py-2',
+                'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
+            ],
             lg: [
-                'cgui:min-h-11',
+                'cgui:min-h-12',
                 'cgui:text-heading-2',
                 'cgui:px-4 cgui:py-2.5',
                 'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',

package/dist/primitives/date-picker/styles.js

@@ -5,10 +5,13 @@ export const datePickerTriggerVariants = tv({
     base: [
         'cgui:group/date-picker-trigger',
         'cgui:relative cgui:inline-flex cgui:items-center cgui:gap-1',
-        'cgui:text-body',
+        'cgui:text-body cgui:outline-none',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
         'cgui:has-[data-slot=chevron]:pr-3',
+        'cgui:data-[state=open]:ring-stroke-primary/50 cgui:data-[state=open]:ring-1',
+        'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-1',
+        'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
         'cgui:[[data-slot=date-picker-input]_&]:bg-transparent!',
         'cgui:[[data-slot=date-picker-input]_&]:w-auto!',
         'cgui:[[data-slot=date-picker-input]_&]:border-0!',
@@ -39,9 +42,9 @@ export const datePickerTriggerVariants = tv({
             clear: [],
         },
         size: {
-            sm: ['cgui:min-h-7.5', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[has-chevron]:pr-8'],
-            md: ['cgui:min-h-9', 'cgui:px-3 cgui:py-2', 'cgui:data-[has-chevron]:pr-10'],
-            lg: ['cgui:min-h-11', 'cgui:text-heading-2', 'cgui:px-4 cgui:py-2.5', 'cgui:data-[has-chevron]:pr-14'],
+            sm: ['cgui:min-h-9', 'cgui:px-2.5 cgui:py-1.5', 'cgui:data-[has-chevron]:pr-8'],
+            md: ['cgui:min-h-10', 'cgui:px-3 cgui:py-2', 'cgui:data-[has-chevron]:pr-10'],
+            lg: ['cgui:min-h-12', 'cgui:text-heading-2', 'cgui:px-4 cgui:py-2.5', 'cgui:data-[has-chevron]:pr-14'],
         },
         rounded: {
             sm: ['cgui:rounded-sm'],

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

@@ -19,10 +19,19 @@ export declare const drawerContentStyles: import("tailwind-variants").TVReturnTy
 export declare const drawerHandleStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
 export declare const drawerTriggerProps: import("tailwind-variants").TVReturnType<{} | {
     variant: {
-        primary: import("tailwind-merge").ClassNameValue | {};
+        filled: import("tailwind-merge").ClassNameValue | {};
         outline: import("tailwind-merge").ClassNameValue | {};
-        ghost: import("tailwind-merge").ClassNameValue | {};
         link: import("tailwind-merge").ClassNameValue | {};
+        ghost: import("tailwind-merge").ClassNameValue | {};
+        soft: import("tailwind-merge").ClassNameValue | {};
+        none: import("tailwind-merge").ClassNameValue | {};
+    };
+    tone: {
+        primary: import("tailwind-merge").ClassNameValue | {};
+        success: import("tailwind-merge").ClassNameValue | {};
+        warning: import("tailwind-merge").ClassNameValue | {};
+        error: import("tailwind-merge").ClassNameValue | {};
+        info: import("tailwind-merge").ClassNameValue | {};
         none: import("tailwind-merge").ClassNameValue | {};
     };
     loading: {
@@ -57,10 +66,19 @@ export declare const drawerTriggerProps: import("tailwind-variants").TVReturnTyp
     };
 }, undefined, undefined, {
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {
@@ -95,10 +113,19 @@ export declare const drawerTriggerProps: import("tailwind-variants").TVReturnTyp
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {
@@ -133,10 +160,19 @@ export declare const drawerTriggerProps: import("tailwind-variants").TVReturnTyp
     };
 }, undefined, string[], {
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {
@@ -171,10 +207,19 @@ export declare const drawerTriggerProps: import("tailwind-variants").TVReturnTyp
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: string[];
+        filled: never[];
         outline: string[];
-        ghost: string[];
         link: string[];
+        ghost: string[];
+        soft: never[];
+        none: never[];
+    };
+    tone: {
+        primary: string[];
+        success: string[];
+        warning: string[];
+        error: string[];
+        info: string[];
         none: never[];
     };
     loading: {

package/dist/primitives/input/styles.js

@@ -11,7 +11,7 @@ export const inputStyles = tv({
 });
 export const inputVariants = tv({
     base: [
-        'cgui:outline-none',
+        'cgui:outline-none cgui:py-0',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:text-body',
         'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed',
@@ -25,9 +25,9 @@ export const inputVariants = tv({
             ],
         },
         size: {
-            sm: ['cgui:py-1.5 cgui:pl-2.5 cgui:pr-1.5'],
-            md: ['cgui:py-2 cgui:pl-3 cgui:pr-2', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-7'],
-            lg: ['cgui:py-2.5 cgui:pl-4 cgui:pr-2.5'],
+            sm: ['cgui:h-9 cgui:pl-2.5 cgui:pr-1.5'],
+            md: ['cgui:h-10 cgui:pl-3 cgui:pr-2', 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-7'],
+            lg: ['cgui:h-12 cgui:pl-4 cgui:pr-2.5'],
         },
         rounded: {
             sm: ['cgui:rounded-sm'],

package/dist/primitives/number-input/components/number-input.root.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
   import { cn } from '../../../internal/utils/tailwindcss.js';
   import { untrack } from 'svelte';
   import { boxWith } from 'svelte-toolbelt';
-  import { Icon } from '../../../atomic/icons/index.js';
   import { ButtonGroup } from '../../button-group/index.js';
   import { Button } from '../../button/index.js';
   import { Input } from '../../input/index.js';
@@ -97,7 +97,8 @@
 <ButtonGroup.Root class={cn('cgui:w-full', containerClass)}>
   <Button
     type="button"
-    variant="none"
+    variant="ghost"
+    tone="primary"
     w="none"
     class="cgui:border cgui:w-9 cgui:border-r-0 cgui:border-stroke-default cgui:text-fg-dark cgui:bg-surface-lightest"
     size="none"
@@ -116,7 +117,8 @@
 
   <Button
     type="button"
-    variant="none"
+    variant="ghost"
+    tone="primary"
     w="none"
     class="cgui:border cgui:w-9 cgui:border-stroke-default cgui:text-fg-dark cgui:bg-surface-lightest"
     size="none"

package/dist/primitives/select/styles.js

@@ -3,12 +3,12 @@ export const selectTriggerStyles = tv({
     base: [
         'cgui:group/select-trigger',
         'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
-        'cgui:text-body',
+        'cgui:text-body cgui:outline-none cgui:bg-clip-padding',
         'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none cgui:[&_svg]:text-icon-regular cgui:[&_svg:not([class*="size-"])]:size-4',
         'cgui:has-[data-slot=chevron]:pr-3',
-        'cgui:focus-visible:ring-stroke-primary/50 cgui:outline-none cgui:focus-visible:ring-2 cgui:bg-clip-padding',
-        'cgui:focus:ring-stroke-default cgui:focus-visible:border-stroke-focus',
+        'cgui:data-[state=open]:ring-stroke-primary/50 cgui:data-[state=open]:ring-1',
+        'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-1',
         'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
     ],
     variants: {
@@ -26,19 +26,19 @@ export const selectTriggerStyles = tv({
         },
         size: {
             sm: [
-                'cgui:min-h-7.5',
+                'cgui:min-h-9',
                 'cgui:px-2.5 cgui:py-1.5',
                 'cgui:data-[start-chevron]:pl-8 cgui:data-[end-chevron]:pr-8',
                 'cgui:data-[has-chevron]:pr-8',
             ],
             md: [
-                'cgui:min-h-9',
+                'cgui:min-h-10',
                 'cgui:px-3 cgui:py-2',
                 'cgui:data-[start-chevron]:pl-10 cgui:data-[end-chevron]:pr-10',
                 'cgui:data-[has-chevron]:pr-10',
             ],
             lg: [
-                'cgui:min-h-11',
+                'cgui:min-h-12',
                 'cgui:text-heading-2',
                 'cgui:px-4 cgui:py-2.5',
                 'cgui:data-[start-chevron]:pl-14 cgui:data-[end-chevron]:pr-14',

package/dist/primitives/textarea/styles.js

@@ -7,6 +7,8 @@ export const textareaVariants = tv({
         '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',
+        'cgui:focus-visible:ring-stroke-primary/50 cgui:focus-visible:ring-1',
+        'cgui:aria-invalid:ring-stroke-error cgui:aria-invalid:border-stroke-error',
     ],
     variants: {
         variant: {

package/package.json

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