@casinogate/ui 1.10.9 → 1.10.11

package/dist/assets/css/root.css

@@ -8,6 +8,7 @@
     --cgui-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --cgui-spacing: 0.25rem;
+    --cgui-container-sm: 24rem;
     --cgui-text-xs: 0.75rem;
     --cgui-text-xs--line-height: calc(1 / 0.75);
     --cgui-text-sm: 0.875rem;
@@ -223,6 +224,9 @@
   .cgui\:left-1\/2 {
     left: calc(1/2 * 100%);
   }
+  .cgui\:z-\(--cg-ui-z-index-dialog\) {
+    z-index: var(--cg-ui-z-index-dialog);
+  }
   .cgui\:z-\(--cg-ui-z-index-dropdown\) {
     z-index: var(--cg-ui-z-index-dropdown);
   }
@@ -232,9 +236,6 @@
   .cgui\:z-\(--cg-ui-z-index-select\) {
     z-index: var(--cg-ui-z-index-select);
   }
-  .cgui\:z-\(--z-index-dialog\) {
-    z-index: var(--z-index-dialog);
-  }
   .cgui\:z-1 {
     z-index: 1;
   }
@@ -250,6 +251,9 @@
   .cgui\:my-1 {
     margin-block: calc(var(--cgui-spacing) * 1);
   }
+  .cgui\:my-2 {
+    margin-block: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:my-4 {
     margin-block: calc(var(--cgui-spacing) * 4);
   }
@@ -265,6 +269,9 @@
   .cgui\:mt-4 {
     margin-top: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:mt-6 {
+    margin-top: calc(var(--cgui-spacing) * 6);
+  }
   .cgui\:-mb-0\.5 {
     margin-bottom: calc(var(--cgui-spacing) * -0.5);
   }
@@ -372,6 +379,9 @@
   .cgui\:h-1 {
     height: calc(var(--cgui-spacing) * 1);
   }
+  .cgui\:h-1\.5 {
+    height: calc(var(--cgui-spacing) * 1.5);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -495,6 +505,9 @@
   .cgui\:w-11 {
     width: calc(var(--cgui-spacing) * 11);
   }
+  .cgui\:w-12 {
+    width: calc(var(--cgui-spacing) * 12);
+  }
   .cgui\:w-40 {
     width: calc(var(--cgui-spacing) * 40);
   }
@@ -555,6 +568,9 @@
   .cgui\:max-w-\[90vw\] {
     max-width: 90vw;
   }
+  .cgui\:max-w-sm {
+    max-width: var(--cgui-container-sm);
+  }
   .cgui\:min-w-\(--bits-dropdown-menu-anchor-width\) {
     min-width: var(--bits-dropdown-menu-anchor-width);
   }
@@ -984,6 +1000,9 @@
   .cgui\:p-4 {
     padding: calc(var(--cgui-spacing) * 4);
   }
+  .cgui\:p-6 {
+    padding: calc(var(--cgui-spacing) * 6);
+  }
   .cgui\:p-8 {
     padding: calc(var(--cgui-spacing) * 8);
   }
@@ -1896,6 +1915,110 @@
       --tw-enter-scale: .95;
     }
   }
+  .cgui\:data-\[vaul-drawer-direction\=bottom\]\:right-0 {
+    &[data-vaul-drawer-direction="bottom"] {
+      right: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=bottom\]\:bottom-0 {
+    &[data-vaul-drawer-direction="bottom"] {
+      bottom: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=bottom\]\:left-0 {
+    &[data-vaul-drawer-direction="bottom"] {
+      left: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=bottom\]\:max-h-\[96\%\] {
+    &[data-vaul-drawer-direction="bottom"] {
+      max-height: 96%;
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=bottom\]\:rounded-t-md {
+    &[data-vaul-drawer-direction="bottom"] {
+      border-top-left-radius: calc(var(--cg-ui-number-md) * 1px);
+      border-top-right-radius: calc(var(--cg-ui-number-md) * 1px);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:top-0 {
+    &[data-vaul-drawer-direction="left"] {
+      top: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:bottom-0 {
+    &[data-vaul-drawer-direction="left"] {
+      bottom: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:left-0 {
+    &[data-vaul-drawer-direction="left"] {
+      left: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:max-w-\[96\%\] {
+    &[data-vaul-drawer-direction="left"] {
+      max-width: 96%;
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:rounded-r-md {
+    &[data-vaul-drawer-direction="left"] {
+      border-top-right-radius: calc(var(--cg-ui-number-md) * 1px);
+      border-bottom-right-radius: calc(var(--cg-ui-number-md) * 1px);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:top-0 {
+    &[data-vaul-drawer-direction="right"] {
+      top: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:right-0 {
+    &[data-vaul-drawer-direction="right"] {
+      right: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:bottom-0 {
+    &[data-vaul-drawer-direction="right"] {
+      bottom: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:max-w-\[96\%\] {
+    &[data-vaul-drawer-direction="right"] {
+      max-width: 96%;
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:rounded-l-md {
+    &[data-vaul-drawer-direction="right"] {
+      border-top-left-radius: calc(var(--cg-ui-number-md) * 1px);
+      border-bottom-left-radius: calc(var(--cg-ui-number-md) * 1px);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=top\]\:top-0 {
+    &[data-vaul-drawer-direction="top"] {
+      top: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=top\]\:right-0 {
+    &[data-vaul-drawer-direction="top"] {
+      right: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=top\]\:left-0 {
+    &[data-vaul-drawer-direction="top"] {
+      left: calc(var(--cgui-spacing) * 0);
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=top\]\:max-h-\[96\%\] {
+    &[data-vaul-drawer-direction="top"] {
+      max-height: 96%;
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=top\]\:rounded-b-md {
+    &[data-vaul-drawer-direction="top"] {
+      border-bottom-right-radius: calc(var(--cg-ui-number-md) * 1px);
+      border-bottom-left-radius: calc(var(--cg-ui-number-md) * 1px);
+    }
+  }
   .cgui\:scrollbar-hover\:scrollbar-thumb-surface-regular\/60 {
     &::-webkit-scrollbar-thumb:hover {
       --scrollbar-thumb: var(--cg-ui-color-surface-regular);
@@ -2010,6 +2133,34 @@
       }
     }
   }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:\[\&_\[data-vaul-handle\]\]\:my-auto {
+    &[data-vaul-drawer-direction="left"] {
+      & [data-vaul-handle] {
+        margin-block: auto;
+      }
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=left\]\:\[\&_\[data-vaul-handle\]\]\:rotate-90 {
+    &[data-vaul-drawer-direction="left"] {
+      & [data-vaul-handle] {
+        rotate: 90deg;
+      }
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:\[\&_\[data-vaul-handle\]\]\:my-auto {
+    &[data-vaul-drawer-direction="right"] {
+      & [data-vaul-handle] {
+        margin-block: auto;
+      }
+    }
+  }
+  .cgui\:data-\[vaul-drawer-direction\=right\]\:\[\&_\[data-vaul-handle\]\]\:rotate-90 {
+    &[data-vaul-drawer-direction="right"] {
+      & [data-vaul-handle] {
+        rotate: 90deg;
+      }
+    }
+  }
   .cgui\:\[\&_kbd\]\:ml-auto {
     & kbd {
       margin-left: auto;
@@ -2043,6 +2194,12 @@
       height: calc(var(--cgui-spacing) * 4);
     }
   }
+  .cgui\:\[\&_svg\]\:size-4\.5 {
+    & svg {
+      width: calc(var(--cgui-spacing) * 4.5);
+      height: calc(var(--cgui-spacing) * 4.5);
+    }
+  }
   .cgui\:\[\&_svg\]\:size-6 {
     & svg {
       width: calc(var(--cgui-spacing) * 6);

package/dist/components/button/button.component.svelte

@@ -9,8 +9,6 @@
   const uid = $props.id();
 
   let {
-    startChevron,
-    endChevron,
     children,
     ref = $bindable(null),
     variant = 'primary',
@@ -24,28 +22,25 @@
     class: className,
     ...props
   }: ButtonProps = $props();
-
-  const variants = $derived(buttonVariants({ variant, size, rounded, shadow, w, loading }));
 </script>
 
-<Button.Root data-slot="button" bind:ref {id} class={cn(variants.root(), className)} {disabled} {...props}>
-  {#if startChevron}
-    <span data-slot="start-chevron" class={variants.chevron}>
-      {@render startChevron()}
-    </span>
-  {/if}
-
+<Button.Root
+  data-slot="button"
+  bind:ref
+  {id}
+  class={cn(buttonVariants({ variant, size, rounded, shadow, w, loading }), className)}
+  {disabled}
+  {...props}
+>
   {@render children?.()}
 
   {#if loading}
-    <span in:fly={{ duration: 200, x: 20 }} data-slot="loading" class={variants.chevron()}>
+    <span
+      in:fly={{ duration: 200, x: 20 }}
+      data-slot="loading"
+      class="cgui:inline-flex cgui:items-center cgui:justify-center cgui:shrink-0"
+    >
       <Spinner size={18} />
     </span>
   {/if}
-
-  {#if endChevron && !loading}
-    <span data-slot="end-chevron" class={variants.chevron}>
-      {@render endChevron()}
-    </span>
-  {/if}
 </Button.Root>

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

@@ -1,2 +1,3 @@
 export * from './exports.js';
 export type { ButtonProps } from './types.js';
+export { buttonVariants, type ButtonVariantsProps } from './styles.js';

package/dist/components/button/index.js

@@ -1 +1,2 @@
 export * from './exports.js';
+export { buttonVariants } from './styles.js';

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

@@ -1,264 +1,117 @@
 import type { VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: {
-            root: string[];
-        };
-        outline: {
-            root: string[];
-        };
-        ghost: {
-            root: string[];
-        };
-        link: {
-            root: string[];
-        };
-        clean: {
-            root: never[];
-        };
+        primary: string[];
+        outline: string[];
+        ghost: string[];
+        link: string[];
+        clean: never[];
     };
     loading: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     shadow: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        clean: string;
     };
     w: {
-        full: {
-            root: string;
-        };
-        auto: {
-            root: string;
-        };
-        fit: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
+        full: string;
+        auto: string;
+        fit: string;
+        clean: string;
     };
     fullWidth: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     rounded: {
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        xl: {
-            root: string;
-        };
-        full: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
-    };
-}, {
-    root: string[];
-    chevron: string[];
-}, undefined, {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clean: string;
+    };
+}, undefined, string[], {
     variant: {
-        primary: {
-            root: string[];
-        };
-        outline: {
-            root: string[];
-        };
-        ghost: {
-            root: string[];
-        };
-        link: {
-            root: string[];
-        };
-        clean: {
-            root: never[];
-        };
+        primary: string[];
+        outline: string[];
+        ghost: string[];
+        link: string[];
+        clean: never[];
     };
     loading: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     shadow: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        clean: string;
     };
     w: {
-        full: {
-            root: string;
-        };
-        auto: {
-            root: string;
-        };
-        fit: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
+        full: string;
+        auto: string;
+        fit: string;
+        clean: string;
     };
     fullWidth: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     rounded: {
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        xl: {
-            root: string;
-        };
-        full: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
-    };
-}, {
-    root: string[];
-    chevron: string[];
-}, import("tailwind-variants").TVReturnType<{
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clean: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
-        primary: {
-            root: string[];
-        };
-        outline: {
-            root: string[];
-        };
-        ghost: {
-            root: string[];
-        };
-        link: {
-            root: string[];
-        };
-        clean: {
-            root: never[];
-        };
+        primary: string[];
+        outline: string[];
+        ghost: string[];
+        link: string[];
+        clean: never[];
     };
     loading: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     shadow: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     size: {
-        xs: {
-            root: string;
-        };
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        clean: string;
     };
     w: {
-        full: {
-            root: string;
-        };
-        auto: {
-            root: string;
-        };
-        fit: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
+        full: string;
+        auto: string;
+        fit: string;
+        clean: string;
     };
     fullWidth: {
-        true: {
-            root: string;
-        };
+        true: string;
     };
     rounded: {
-        sm: {
-            root: string;
-        };
-        md: {
-            root: string;
-        };
-        lg: {
-            root: string;
-        };
-        xl: {
-            root: string;
-        };
-        full: {
-            root: string;
-        };
-        clean: {
-            root: string;
-        };
-    };
-}, {
-    root: string[];
-    chevron: string[];
-}, undefined, unknown, unknown, undefined>>;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clean: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
 export type ButtonVariantsProps = VariantProps<typeof buttonVariants>;