@casinogate/ui 2.0.8 → 2.0.10

package/dist/primitives/select/styles.js

@@ -4,7 +4,7 @@ export const selectTriggerStyles = tv({
         'cgui:group/select-trigger',
         'cgui:relative cgui:flex cgui:items-center cgui:gap-1 cgui:flex-wrap',
         'cgui:text-body cgui:outline-none cgui:bg-clip-padding',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow,transform] cgui:duration-(--cg-ui-duration-base) cgui:ease-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',
@@ -70,9 +70,13 @@ export const selectContentStyles = tv({
         '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:h-(--cg-ui-max-content-height)',
-        'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out cgui:data-[state=closed]:fade-out-0 cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:zoom-out-95 cgui:data-[state=open]:zoom-in-95 cgui:data-[side=bottom]:slide-in-from-top-2 cgui:data-[side=left]:slide-in-from-right-2 cgui:data-[side=right]:slide-in-from-left-2 cgui:data-[side=top]:slide-in-from-bottom-2  cgui:data-[side=bottom]:translate-y-1 cgui:data-[side=left]:-translate-x-1 cgui:data-[side=right]:translate-x-1 cgui:data-[side=top]:-translate-y-1',
+        'cgui:max-h-(--bits-select-content-available-height) cgui:h-(--cg-ui-max-content-height)',
+        'cgui:z-(--cg-ui-z-index-select) cgui:origin-(--bits-select-content-transform-origin) cgui:scroll-smooth',
+        'cgui:data-[state=open]:animate-in cgui:data-[state=closed]:animate-out',
+        'cgui:data-[state=open]:fade-in-0 cgui:data-[state=closed]:fade-out-0',
+        'cgui:data-[state=open]:zoom-in-95 cgui:data-[state=closed]:zoom-out-95',
+        'cgui:data-[state=open]:slide-in-from-top-2 cgui:data-[state=closed]:slide-out-to-top-2',
+        'cgui:transition-[opacity,transform] cgui:duration-(--cg-ui-duration-fast) cgui:ease-out',
     ],
 });
 export const selectViewportStyles = tv({
@@ -85,13 +89,14 @@ export const selectItemStyles = tv({
         'cgui:relative cgui:w-full',
         'cgui:flex cgui:items-center cgui:gap-2',
         'cgui:outline-hidden cgui:cursor-default cgui:select-none',
-        'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        'cgui:transition-[color,background-color,border-color,box-shadow,transform] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:rounded-xs',
         'cgui:p-2',
         'cgui:text-body cgui:text-fg-medium',
         'cgui:data-[disabled]:pointer-events-none cgui:data-[disabled]:opacity-50',
         'cgui:[&_svg]:shrink-0 cgui:[&_svg]:pointer-events-none',
         'cgui:data-[highlighted]:bg-surface-lightest',
+        'cgui:[&_svg:not([class*="size-"])]:size-4 cgui:[&_svg]:text-icon-regular',
     ],
 });
 export const selectGroupStyles = tv({

package/dist/primitives/skeleton/components/skeleton.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
   import { cn } from '../../../internal/utils/tailwindcss.js';
-  import { skeletonStyles } from '../styles.js';
+
+  import { skeletonVariants } from '../styles.js';
   import type { SkeletonProps } from '../types.js';
 
   let {
     ref = $bindable(null),
+    children,
     class: className,
-    w = 'clear',
-    rounded = 'md',
-    variant = 'clear',
     as = 'div',
-    count = 1,
+    variant = 'block',
+    intent = 'none',
+    rounded = 'sm',
+    animate = true,
+    'aria-hidden': ariaHidden = true,
     ...restProps
   }: SkeletonProps = $props();
-
-  const variants = $derived(skeletonStyles({ w, rounded, variant }));
-
-  const items = $derived(Array.from({ length: count }).map((_, idx) => idx));
 </script>
 
-{#each items as item (item)}
-  <svelte:element this={as} bind:this={ref} class={cn(variants, className)} {...restProps}></svelte:element>
-{/each}
+<svelte:element
+  this={as}
+  {...restProps}
+  bind:this={ref}
+  aria-hidden={ariaHidden}
+  data-slot="skeleton"
+  class={cn(skeletonVariants({ variant, intent, rounded, animate }), className)}
+>
+  {@render children?.()}
+</svelte:element>

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

@@ -1,18 +1,10 @@
-import type { VariantProps } from 'tailwind-variants';
-export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
-    w: {
-        full: string;
-        clear: string;
-    };
-    rounded: {
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        full: string;
-        clear: string;
-    };
+import { type VariantProps } from '../../internal/utils/tailwindcss.js';
+export declare const skeletonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
+        block: string;
+        text: string[];
+    };
+    intent: {
         h1: string;
         h2: string;
         h3: string;
@@ -22,12 +14,7 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         p: string;
         avatar: string;
         'avatar-lg': string;
-        clear: string;
-    };
-}, undefined, "cgui:animate-pulse cgui:bg-surface-regular", {
-    w: {
-        full: string;
-        clear: string;
+        none: string;
     };
     rounded: {
         sm: string;
@@ -35,9 +22,17 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
         full: string;
-        clear: string;
+        none: string;
+    };
+    animate: {
+        true: string;
     };
+}, undefined, string[], {
     variant: {
+        block: string;
+        text: string[];
+    };
+    intent: {
         h1: string;
         h2: string;
         h3: string;
@@ -47,12 +42,7 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         p: string;
         avatar: string;
         'avatar-lg': string;
-        clear: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    w: {
-        full: string;
-        clear: string;
+        none: string;
     };
     rounded: {
         sm: string;
@@ -60,9 +50,17 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         lg: string;
         xl: string;
         full: string;
-        clear: string;
+        none: string;
+    };
+    animate: {
+        true: string;
     };
+}, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
+        block: string;
+        text: string[];
+    };
+    intent: {
         h1: string;
         h2: string;
         h3: string;
@@ -72,7 +70,18 @@ export declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
         p: string;
         avatar: string;
         'avatar-lg': string;
-        clear: string;
+        none: string;
+    };
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        none: string;
+    };
+    animate: {
+        true: string;
     };
-}, undefined, "cgui:animate-pulse cgui:bg-surface-regular", unknown, unknown, undefined>>;
-export type SkeletonVariantProps = VariantProps<typeof skeletonStyles>;
+}, undefined, string[], unknown, unknown, undefined>>;
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>;

package/dist/primitives/skeleton/styles.js

@@ -1,10 +1,57 @@
+// import { tv } from '../../internal/utils/tailwindcss.js';
+// import type { VariantProps } from 'tailwind-variants';
 import { tv } from '../../internal/utils/tailwindcss.js';
-export const skeletonStyles = tv({
-    base: 'cgui:animate-pulse cgui:bg-surface-regular',
+// export const skeletonStyles = tv({
+//   base: 'cgui:animate-pulse cgui:bg-surface-regular',
+//   variants: {
+//     w: {
+//       full: 'cgui:w-full',
+//       clear: '',
+//     },
+//     rounded: {
+//       sm: 'cgui:rounded-sm',
+//       md: 'cgui:rounded-md',
+//       lg: 'cgui:rounded-lg',
+//       xl: 'cgui:rounded-xl',
+//       full: 'cgui:rounded-full',
+//       clear: '',
+//     },
+//     variant: {
+//       h1: 'cgui:h-10 cgui:max-w-44 cgui:w-full',
+//       h2: 'cgui:h-8 cgui:max-w-36 cgui:w-full',
+//       h3: 'cgui:h-7 cgui:max-w-32 cgui:w-full',
+//       h4: 'cgui:h-6 cgui:max-w-32 cgui:w-full',
+//       h5: 'cgui:h-5 cgui:max-w-32 cgui:w-full',
+//       h6: 'cgui:h-4 cgui:max-w-32 cgui:w-full',
+//       p: 'cgui:h-3 cgui:max-w-100 cgui:w-full',
+//       avatar: 'cgui:size-11',
+//       'avatar-lg': 'cgui:size-14',
+//       clear: '',
+//     },
+//   },
+// });
+// export type SkeletonVariantProps = VariantProps<typeof skeletonStyles>;
+export const skeletonVariants = tv({
+    base: ['cgui:inline-flex'],
     variants: {
-        w: {
-            full: 'cgui:w-full',
-            clear: '',
+        variant: {
+            block: 'cgui:overflow-hidden cgui:bg-surface-regular',
+            text: [
+                'cgui:w-fit cgui:bg-clip-text cgui:text-transparent cgui:will-change-[background-position] cgui:bg-[length:200%_auto] cgui:bg-[position:-50%_0]',
+                'cgui:bg-[linear-gradient(105deg,color-mix(in_srgb,var(--cg-ui-color-fg-regular)_20%,transparent)_0%_40%,var(--cg-ui-color-fg-regular)_50%,color-mix(in_srgb,var(--cg-ui-color-fg-regular)_20%,transparent)_60%_100%)]',
+            ],
+        },
+        intent: {
+            h1: '',
+            h2: '',
+            h3: '',
+            h4: '',
+            h5: '',
+            h6: '',
+            p: '',
+            avatar: '',
+            'avatar-lg': '',
+            none: '',
         },
         rounded: {
             sm: 'cgui:rounded-sm',
@@ -12,19 +59,77 @@ export const skeletonStyles = tv({
             lg: 'cgui:rounded-lg',
             xl: 'cgui:rounded-xl',
             full: 'cgui:rounded-full',
-            clear: '',
+            none: '',
         },
-        variant: {
-            h1: 'cgui:h-10 cgui:max-w-44 cgui:w-full',
-            h2: 'cgui:h-8 cgui:max-w-36 cgui:w-full',
-            h3: 'cgui:h-7 cgui:max-w-32 cgui:w-full',
-            h4: 'cgui:h-6 cgui:max-w-32 cgui:w-full',
-            h5: 'cgui:h-5 cgui:max-w-32 cgui:w-full',
-            h6: 'cgui:h-4 cgui:max-w-32 cgui:w-full',
-            p: 'cgui:h-3 cgui:max-w-100 cgui:w-full',
-            avatar: 'cgui:size-11',
-            'avatar-lg': 'cgui:size-14',
-            clear: '',
+        animate: {
+            true: '',
         },
     },
+    compoundVariants: [
+        {
+            variant: 'block',
+            animate: true,
+            class: 'cgui:animate-pulse',
+        },
+        {
+            variant: 'text',
+            animate: true,
+            class: 'cgui:motion-safe:animate-shimmer cgui:motion-reduce:duration-[15s]',
+        },
+        {
+            intent: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'],
+            variant: 'block',
+            class: 'cgui:h-10 cgui:max-w-44',
+        },
+        {
+            intent: 'h1',
+            variant: 'block',
+            class: 'cgui:h-10 cgui:max-w-44',
+        },
+        {
+            intent: 'h2',
+            variant: 'block',
+            class: 'cgui:h-8 cgui:max-w-36',
+        },
+        {
+            intent: 'h3',
+            variant: 'block',
+            class: 'cgui:h-7 cgui:max-w-32',
+        },
+        {
+            intent: 'h4',
+            variant: 'block',
+            class: 'cgui:h-6 cgui:max-w-32',
+        },
+        {
+            intent: 'h5',
+            variant: 'block',
+            class: 'cgui:h-5 cgui:max-w-32',
+        },
+        {
+            intent: 'h6',
+            variant: 'block',
+            class: 'cgui:h-4 cgui:max-w-32',
+        },
+        {
+            intent: 'p',
+            variant: 'block',
+            class: 'cgui:h-3 cgui:max-w-100',
+        },
+        {
+            intent: 'avatar',
+            variant: 'block',
+            class: 'cgui:size-11',
+        },
+        {
+            intent: 'avatar-lg',
+            variant: 'block',
+            class: 'cgui:size-14',
+        },
+        {
+            intent: ['avatar', 'avatar-lg'],
+            variant: 'text',
+            class: '',
+        },
+    ],
 });

package/dist/primitives/skeleton/types.d.ts

@@ -1,9 +1,8 @@
 import type { PrimitiveDivAttributes } from '../../internal/types/html-attributes.js';
-import type { WithElementRef, Without } from 'svelte-toolbelt';
-import type { SkeletonVariantProps } from './styles.js';
-type SkeletonPropsWithoutHTML = WithElementRef<{
-    count?: number;
+import type { WithChildren, WithElementRef, Without } from 'svelte-toolbelt';
+import type { SkeletonVariants } from './styles.js';
+type SkeletonPropsWithoutHTML = WithElementRef<WithChildren<{
     as?: keyof HTMLElementTagNameMap;
-}> & SkeletonVariantProps;
+}>> & SkeletonVariants;
 export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
 export {};

package/dist/primitives/slider/styles.js

@@ -16,7 +16,7 @@ export const sliderPrimitiveRootStyles = tv({
 export const sliderPrimitiveTrackStyles = tv({
     base: [
         'cgui:relative cgui:rounded-full cgui:grow cgui:overflow-hidden',
-        'cgui:cursor-pointer cgui:data-disabled:cursor-not-allowd cgui:bg-surface-primary-light',
+        'cgui:cursor-pointer cgui:data-disabled:cursor-not-allowed cgui:bg-surface-primary-light',
     ],
     variants: {
         size: {
@@ -75,7 +75,7 @@ export const sliderPrimitiveThumbStyles = tv({
         'cgui:transition-colors',
         'cgui:border cgui:border-stroke-focus cgui:bg-surface-lightest cgui:rounded-full',
         'cgui:focus-visible:ring-stroke-focus cgui:focus-visible:outline-hidden',
-        'cgui:data-active:scale-[0.98] cgui:shadow-thumb',
+        'cgui:data-active:scale-98 cgui:active:duration-(--cg-ui-duration-instant) cgui:shadow-thumb',
     ],
     variants: {
         size: {

package/dist/primitives/switch/styles.js

@@ -6,7 +6,7 @@ export const switchRootVariants = tv({
         'cgui:relative cgui:overflow-hidden',
         'cgui:flex cgui:items-center cgui:p-0.5',
         'cgui:bg-surface-regular cgui:rounded-xl',
-        'cgui:transition-all cgui:duration-300 cgui:ease-in-out',
+        'cgui:transition-[background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:cursor-pointer cgui:select-none',
         'cgui:data-[state=checked]:bg-surface-primary',
         'cgui:active:[&_span]:w-2/3 cgui:active:data-[state=checked]:[&_span]:translate-x-[calc(44%+2px)]',
@@ -25,7 +25,7 @@ export const switchThumbVariants = tv({
     base: [
         'cgui:relative',
         'cgui:h-full cgui:rounded-full cgui:bg-surface-light',
-        'cgui:transition-all cgui:duration-300 cgui:ease-in-out',
+        'cgui:transition-all cgui:duration-(--cg-ui-duration-slow) cgui:ease-out',
         'cgui:data-[state=checked]:translate-x-full cgui:data-[state=checked]:shadow-switch-thumb',
     ],
     variants: {

package/dist/primitives/textarea/styles.js

@@ -5,7 +5,7 @@ export const textareaVariants = tv({
         '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:transition-[color,background-color,border-color,box-shadow] cgui:duration-(--cg-ui-duration-base) cgui:ease-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',

package/dist/primitives/toast/styles.js

@@ -4,7 +4,7 @@ export const toastPrimitiveRootStyles = tv({
         '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',
+        'cgui:transition-[color,background-color,border-color] cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
         'cgui:before:content-[""] cgui:before:pointer-events-none cgui:before:absolute cgui:before:top-0 cgui:before:inset-x-0 cgui:before:h-1.5 cgui:before:block',
     ],
     variants: {
@@ -60,6 +60,6 @@ export const toastPrimitiveCloseStyles = tv({
         'cgui:shrink-0 cgui:size-6 cgui:flex cgui:items-center cgui:justify-center',
         'cgui:rounded-xs cgui:cursor-pointer cgui:select-none',
         'cgui:text-fg-regular cgui:hover:text-fg-darkest',
-        'cgui:transition-colors cgui:duration-200',
+        'cgui:transition-colors cgui:duration-(--cg-ui-duration-base) cgui:ease-out',
     ],
 });

package/package.json

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