@casinogate/ui 1.10.17 → 1.10.19

package/dist/assets/css/root.css

@@ -239,6 +239,9 @@
   .cgui\:z-1 {
     z-index: 1;
   }
+  .cgui\:z-5 {
+    z-index: 5;
+  }
   .cgui\:\!m-0 {
     margin: calc(var(--cgui-spacing) * 0) !important;
   }
@@ -311,6 +314,9 @@
       display: none;
     }
   }
+  .cgui\:block {
+    display: block;
+  }
   .cgui\:flex {
     display: flex;
   }
@@ -323,6 +329,9 @@
   .cgui\:inline-flex {
     display: inline-flex;
   }
+  .cgui\:aspect-square {
+    aspect-ratio: 1 / 1;
+  }
   .cgui\:size-1\/2 {
     width: calc(1 / 2 * 100%);
     height: calc(1 / 2 * 100%);
@@ -382,6 +391,12 @@
   .cgui\:h-1\.5 {
     height: calc(var(--cgui-spacing) * 1.5);
   }
+  .cgui\:h-2 {
+    height: calc(var(--cgui-spacing) * 2);
+  }
+  .cgui\:h-2\.5 {
+    height: calc(var(--cgui-spacing) * 2.5);
+  }
   .cgui\:h-3 {
     height: calc(var(--cgui-spacing) * 3);
   }
@@ -436,6 +451,12 @@
   .cgui\:h-34 {
     height: calc(var(--cgui-spacing) * 34);
   }
+  .cgui\:h-100 {
+    height: calc(var(--cgui-spacing) * 100);
+  }
+  .cgui\:h-120 {
+    height: calc(var(--cgui-spacing) * 120);
+  }
   .cgui\:h-\[300px\] {
     height: 300px;
   }
@@ -481,12 +502,18 @@
   .cgui\:w-1\.5 {
     width: calc(var(--cgui-spacing) * 1.5);
   }
+  .cgui\:w-2 {
+    width: calc(var(--cgui-spacing) * 2);
+  }
   .cgui\:w-2\.5 {
     width: calc(var(--cgui-spacing) * 2.5);
   }
   .cgui\:w-3 {
     width: calc(var(--cgui-spacing) * 3);
   }
+  .cgui\:w-3\.5 {
+    width: calc(var(--cgui-spacing) * 3.5);
+  }
   .cgui\:w-4 {
     width: calc(var(--cgui-spacing) * 4);
   }
@@ -613,6 +640,9 @@
   .cgui\:grow {
     flex-grow: 1;
   }
+  .cgui\:basis-1\/2 {
+    flex-basis: calc(1 / 2 * 100%);
+  }
   .cgui\:origin-\(--bits-dropdown-menu-content-transform-origin\) {
     transform-origin: var(--bits-dropdown-menu-content-transform-origin);
   }
@@ -807,6 +837,14 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
   }
+  .cgui\:border-4 {
+    border-style: var(--tw-border-style);
+    border-width: 4px;
+  }
+  .cgui\:border-5 {
+    border-style: var(--tw-border-style);
+    border-width: 5px;
+  }
   .cgui\:border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -844,6 +882,9 @@
   .cgui\:border-stroke-error {
     border-color: var(--cg-ui-color-stroke-error);
   }
+  .cgui\:border-stroke-focus {
+    border-color: var(--cg-ui-color-stroke-focus);
+  }
   .cgui\:border-stroke-primary {
     border-color: var(--cg-ui-color-stroke-primary);
   }
@@ -919,6 +960,12 @@
   .cgui\:bg-surface-darkest {
     background-color: var(--cg-ui-color-surface-darkest);
   }
+  .cgui\:bg-surface-darkest\/50 {
+    background-color: var(--cg-ui-color-surface-darkest);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--cg-ui-color-surface-darkest) 50%, transparent);
+    }
+  }
   .cgui\:bg-surface-hover {
     background-color: var(--cg-ui-color-surface-hover);
   }
@@ -943,6 +990,12 @@
   .cgui\:bg-surface-primary {
     background-color: var(--cg-ui-color-surface-primary);
   }
+  .cgui\:bg-surface-primary-active {
+    background-color: var(--cg-ui-color-surface-primary-active);
+  }
+  .cgui\:bg-surface-primary-light {
+    background-color: var(--cg-ui-color-surface-primary-light);
+  }
   .cgui\:bg-surface-primary-light-active {
     background-color: var(--cg-ui-color-surface-primary-light-active);
   }
@@ -1255,6 +1308,10 @@
     --tw-shadow: var(--cg-ui-shadow-select);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .cgui\:shadow-thumb {
+    --tw-shadow: var(--cg-ui-shadow-thumb);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .cgui\:shadow-toast {
     --tw-shadow: var(--cg-ui-shadow-toast);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1560,6 +1617,16 @@
       --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
+  .cgui\:focus-visible\:outline-hidden {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
   .cgui\:active\:scale-95 {
     &:active {
       --tw-scale-x: 95%;
@@ -1623,6 +1690,11 @@
       color: var(--cg-ui-color-fg-primary);
     }
   }
+  .cgui\:data-active\:scale-\[0\.98\] {
+    &[data-active] {
+      scale: 0.98;
+    }
+  }
   .cgui\:data-highlighted\:bg-surface-lightest {
     &[data-highlighted] {
       background-color: var(--cg-ui-color-surface-lightest);
@@ -1724,11 +1796,61 @@
       padding-inline-start: calc(var(--cgui-spacing) * 8);
     }
   }
+  .cgui\:data-\[orientation\=horizontal\]\:h-2 {
+    &[data-orientation="horizontal"] {
+      height: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-2\.5 {
+    &[data-orientation="horizontal"] {
+      height: calc(var(--cgui-spacing) * 2.5);
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-3\.5 {
+    &[data-orientation="horizontal"] {
+      height: calc(var(--cgui-spacing) * 3.5);
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:h-full {
+    &[data-orientation="horizontal"] {
+      height: 100%;
+    }
+  }
+  .cgui\:data-\[orientation\=horizontal\]\:w-\[1px\] {
+    &[data-orientation="horizontal"] {
+      width: 1px;
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:h-\[1px\] {
+    &[data-orientation="vertical"] {
+      height: 1px;
+    }
+  }
   .cgui\:data-\[orientation\=vertical\]\:h-auto {
     &[data-orientation="vertical"] {
       height: auto;
     }
   }
+  .cgui\:data-\[orientation\=vertical\]\:w-2 {
+    &[data-orientation="vertical"] {
+      width: calc(var(--cgui-spacing) * 2);
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-2\.5 {
+    &[data-orientation="vertical"] {
+      width: calc(var(--cgui-spacing) * 2.5);
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-3\.5 {
+    &[data-orientation="vertical"] {
+      width: calc(var(--cgui-spacing) * 3.5);
+    }
+  }
+  .cgui\:data-\[orientation\=vertical\]\:w-full {
+    &[data-orientation="vertical"] {
+      width: 100%;
+    }
+  }
   .cgui\:data-\[placeholder\]\:text-fg-regular {
     &[data-placeholder] {
       color: var(--cg-ui-color-fg-regular);
@@ -2510,6 +2632,7 @@
   --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
   --cg-ui-shadow-select: var(--cg-ui-shadow-base);
   --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --cg-ui-shadow-thumb: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 2px 8px rgba(0, 0, 0, 0.25);
   --cg-ui-fz-base: 16;
   --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
   --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);

package/dist/assets/css/tailwind/theme.css

@@ -135,6 +135,7 @@
   --shadow-select: var(--cg-ui-shadow-select);
   --shadow-dialog: var(--cg-ui-shadow-dialog);
   --shadow-dropdown: var(--cg-ui-shadow-dropdown);
+  --shadow-thumb: var(--cg-ui-shadow-thumb);
 
   /* -------------------------------------------------------------------------
        Typography

package/dist/assets/css/theme.css

@@ -62,6 +62,9 @@
   --cg-ui-shadow-select: var(--cg-ui-shadow-base);
   --cg-ui-shadow-command: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
   --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --cg-ui-shadow-thumb:
+    rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
+    rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
 
   /* Font sizes, Line heights */
   --cg-ui-fz-base: 16;
@@ -311,6 +314,7 @@
   --shadow-select: var(--cg-ui-shadow-select);
   --shadow-dialog: var(--cg-ui-shadow-dialog);
   --shadow-dropdown: var(--cg-ui-shadow-dropdown);
+  --shadow-thumb: var(--cg-ui-shadow-thumb);
 
   /* Font sizes, Line heights */
   --text-heading: var(--cg-ui-fz-heading);

package/dist/assets/css/tokens/primitives.css

@@ -76,6 +76,7 @@
   --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
   --cg-ui-shadow-select: var(--cg-ui-shadow-base);
   --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  --cg-ui-shadow-thumb: 0px 1px 3px rgba(0, 0, 0, 0.4), 0px 2px 8px rgba(0, 0, 0, 0.25);
 
   /* -------------------------------------------------------------------------
        Typography

package/dist/components/data-table/styles.js

@@ -9,7 +9,7 @@ export const dataTableVariants = tv({
             'cgui:border cgui:border-stroke-divider',
             'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         ],
-        table: ['cgui:size-full'],
+        table: ['cgui:w-full'],
         header: ['cgui:font-medium cgui:text-body-2 cgui:text-fg-darkest cgui:sticky cgui:z-1 cgui:top-0'],
         body: [
             'cgui:relative',

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export * from './segment/index.js';
 export * from './select/index.js';
 export * from './separator/index.js';
 export * from './skeleton/index.js';
+export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
 export * from './textarea/index.js';

package/dist/components/index.js

@@ -23,6 +23,7 @@ export * from './segment/index.js';
 export * from './select/index.js';
 export * from './separator/index.js';
 export * from './skeleton/index.js';
+export * from './slider/index.js';
 export * from './spinner/index.js';
 export * from './switch/index.js';
 export * from './textarea/index.js';

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

@@ -0,0 +1,5 @@
+export { default as Range } from './slider.range.svelte';
+export { default as Root } from './slider.root.svelte';
+export { default as Thumb } from './slider.thumb.svelte';
+export { default as Tick } from './slider.tick.svelte';
+export { default as Track } from './slider.track.svelte';

package/dist/components/slider/components/index.js

@@ -0,0 +1,5 @@
+export { default as Range } from './slider.range.svelte';
+export { default as Root } from './slider.root.svelte';
+export { default as Thumb } from './slider.thumb.svelte';
+export { default as Tick } from './slider.tick.svelte';
+export { default as Track } from './slider.track.svelte';

package/dist/components/slider/components/slider.range.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+
+  import { sliderPrimitiveRangeStyles } from '../styles.js';
+
+  import { cn } from '../../../internal/utils/common.js';
+  import type { SliderPrimitiveRangeProps } from '../types.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: SliderPrimitiveRangeProps = $props();
+</script>
+
+<SliderPrimitive.Range class={cn(sliderPrimitiveRangeStyles({}), className)} bind:ref {...restProps} />

package/dist/components/slider/components/slider.range.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderPrimitiveRangeProps } from '../types.js';
+declare const Slider: import("svelte").Component<SliderPrimitiveRangeProps, {}, "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/slider/components/slider.root.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+
+  import { sliderPrimitiveRootStyles } from '../styles.js';
+
+  import { cn } from '../../../internal/utils/common.js';
+  import { boxWith } from 'svelte-toolbelt';
+  import type { SliderPrimitiveRootProps } from '../types.js';
+  import { SliderPrimitiveRootState } from './state.svelte.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = 'horizontal',
+    class: className,
+    size = 'default',
+    disabled = false,
+    ...restProps
+  }: SliderPrimitiveRootProps = $props();
+
+  SliderPrimitiveRootState.create({
+    size: boxWith(() => size),
+    orientation: boxWith(() => orientation),
+    disabled: boxWith(() => disabled),
+  });
+</script>
+
+<SliderPrimitive.Root
+  class={cn(sliderPrimitiveRootStyles({ orientation }), className)}
+  bind:ref
+  bind:value={value as never}
+  {orientation}
+  {disabled}
+  {...restProps}
+/>

package/dist/components/slider/components/slider.root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderPrimitiveRootProps } from '../types.js';
+declare const Slider: import("svelte").Component<SliderPrimitiveRootProps, {}, "value" | "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/slider/components/slider.thumb.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+
+  import { sliderPrimitiveThumbStyles } from '../styles.js';
+
+  import { cn } from '../../../internal/utils/common.js';
+  import type { SliderPrimitiveThumbProps } from '../types.js';
+
+  import { SliderPrimitiveRootContext } from './state.svelte.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: SliderPrimitiveThumbProps = $props();
+
+  const rootContext = SliderPrimitiveRootContext.get();
+</script>
+
+<SliderPrimitive.Thumb
+  class={cn(
+    sliderPrimitiveThumbStyles({
+      size: rootContext.opts.size.current,
+    }),
+    className
+  )}
+  bind:ref
+  {...restProps}
+/>

package/dist/components/slider/components/slider.thumb.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderPrimitiveThumbProps } from '../types.js';
+declare const Slider: import("svelte").Component<SliderPrimitiveThumbProps, {}, "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/slider/components/slider.tick.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { Slider as SliderPrimitive } from 'bits-ui';
+
+  import { sliderPrimitiveTickStyles } from '../styles.js';
+
+  import { cn } from '../../../internal/utils/common.js';
+  import type { SliderPrimitiveTickProps } from '../types.js';
+  import { SliderPrimitiveRootContext } from './state.svelte.js';
+
+  let { ref = $bindable(null), class: className, ...restProps }: SliderPrimitiveTickProps = $props();
+
+  const rootContext = SliderPrimitiveRootContext.get();
+</script>
+
+<SliderPrimitive.Tick
+  class={cn(
+    sliderPrimitiveTickStyles({
+      size: rootContext.opts.size.current,
+    }),
+    className
+  )}
+  bind:ref
+  {...restProps}
+/>

package/dist/components/slider/components/slider.tick.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderPrimitiveTickProps } from '../types.js';
+declare const Slider: import("svelte").Component<SliderPrimitiveTickProps, {}, "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/slider/components/slider.track.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn } from '../../../internal/utils/common.js';
+  import { sliderPrimitiveTrackStyles } from '../styles.js';
+  import type { SliderPrimitiveTrackProps } from '../types.js';
+  import { SliderPrimitiveRootContext } from './state.svelte.js';
+
+  let { ref = $bindable(null), class: className, child, children, ...restProps }: SliderPrimitiveTrackProps = $props();
+
+  const rootContext = SliderPrimitiveRootContext.get();
+
+  const attrs = $derived({
+    'data-slot': 'slider-track',
+    'data-disabled': boolAttr(rootContext.opts.disabled.current),
+    class: cn(
+      sliderPrimitiveTrackStyles({
+        orientation: rootContext.opts.orientation.current,
+        size: rootContext.opts.size.current,
+      }),
+      className
+    ),
+    ...restProps,
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <span bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </span>
+{/if}

package/dist/components/slider/components/slider.track.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderPrimitiveTrackProps } from '../types.js';
+declare const Slider: import("svelte").Component<SliderPrimitiveTrackProps, {}, "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/slider/components/state.svelte.d.ts

@@ -0,0 +1,15 @@
+import { Context } from 'runed';
+import type { ReadableBoxedValues } from 'svelte-toolbelt';
+import type { SliderPrimitiveRootProps } from '../types.js';
+export declare const SliderPrimitiveRootContext: Context<SliderPrimitiveRootState>;
+type SliderPrimitiveRootStateOps = ReadableBoxedValues<{
+    size: SliderPrimitiveRootProps['size'];
+    orientation: SliderPrimitiveRootProps['orientation'];
+    disabled: boolean;
+}>;
+export declare class SliderPrimitiveRootState {
+    static create(opts: SliderPrimitiveRootStateOps): SliderPrimitiveRootState;
+    readonly opts: SliderPrimitiveRootStateOps;
+    constructor(opts: SliderPrimitiveRootStateOps);
+}
+export {};

package/dist/components/slider/components/state.svelte.js

@@ -0,0 +1,11 @@
+import { Context } from 'runed';
+export const SliderPrimitiveRootContext = new Context('slider-primitive-root-context');
+export class SliderPrimitiveRootState {
+    static create(opts) {
+        return SliderPrimitiveRootContext.set(new SliderPrimitiveRootState(opts));
+    }
+    opts;
+    constructor(opts) {
+        this.opts = opts;
+    }
+}

package/dist/components/slider/composed/index.d.ts

@@ -0,0 +1 @@
+export { Root } from './root/index.js';

package/dist/components/slider/composed/index.js

@@ -0,0 +1 @@
+export { Root } from './root/index.js';

package/dist/components/slider/composed/root/index.d.ts

@@ -0,0 +1 @@
+export { default as Root } from './slider.root.svelte';

package/dist/components/slider/composed/root/index.js

@@ -0,0 +1 @@
+export { default as Root } from './slider.root.svelte';

package/dist/components/slider/composed/root/slider.root.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import * as SliderPrimitive from '../../components/index.js';
+  import type { SliderRootProps } from '../../types.js';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(),
+    orientation = 'horizontal',
+    size = 'default',
+    disabled = false,
+    showTicks = false,
+    class: className,
+    ...restProps
+  }: SliderRootProps = $props();
+</script>
+
+<SliderPrimitive.Root
+  bind:ref
+  bind:value={value as never}
+  {orientation}
+  {size}
+  {disabled}
+  class={className}
+  {...restProps}
+>
+  {#snippet children({ thumbItems, tickItems })}
+    <SliderPrimitive.Track>
+      <SliderPrimitive.Range />
+    </SliderPrimitive.Track>
+
+    {#each thumbItems as { index } (index)}
+      <SliderPrimitive.Thumb {index} />
+    {/each}
+
+    {#if showTicks}
+      {#each tickItems as { index } (index)}
+        <SliderPrimitive.Tick {index} />
+      {/each}
+    {/if}
+  {/snippet}
+</SliderPrimitive.Root>

package/dist/components/slider/composed/root/slider.root.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SliderRootProps } from '../../types.js';
+declare const Slider: import("svelte").Component<SliderRootProps, {}, "value" | "ref">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

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

@@ -0,0 +1,3 @@
+export * as SliderPrimitive from './components/index.js';
+export * as Slider from './composed/index.js';
+export * from './types.js';

package/dist/components/slider/index.js

@@ -0,0 +1,3 @@
+export * as SliderPrimitive from './components/index.js';
+export * as Slider from './composed/index.js';
+export * from './types.js';

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

@@ -0,0 +1,107 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const sliderPrimitiveRootStyles: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sliderPrimitiveTrackStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+    orientation: {
+        horizontal: string[];
+        vertical: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sliderPrimitiveRangeStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sliderPrimitiveThumbStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sliderPrimitiveTickStyles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, string[], {
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string[];
+        default: string[];
+        lg: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type SliderPrimitiveRootVariants = VariantProps<typeof sliderPrimitiveRootStyles>;
+export type SliderPrimitiveRangeVariants = VariantProps<typeof sliderPrimitiveRangeStyles>;
+export type SliderPrimitiveThumbVariants = VariantProps<typeof sliderPrimitiveThumbStyles>;
+export type SliderPrimitiveTickVariants = VariantProps<typeof sliderPrimitiveTickStyles>;
+export type SliderPrimitiveTrackVariants = VariantProps<typeof sliderPrimitiveTrackStyles>;

package/dist/components/slider/styles.js

@@ -0,0 +1,103 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+const SliderSizes = ['sm', 'default', 'lg'];
+const SliderOrientations = ['horizontal', 'vertical'];
+export const sliderPrimitiveRootStyles = tv({
+    base: ['cgui:group', 'cgui:relative cgui:flex cgui:touch-none cgui:select-none cgui:items-center'],
+    variants: {
+        orientation: {
+            horizontal: 'cgui:flex-row cgui:w-full',
+            vertical: 'cgui:flex-col cgui:h-full',
+        },
+        size: {
+            sm: [''],
+            default: [''],
+            lg: [''],
+        },
+    },
+});
+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',
+    ],
+    variants: {
+        size: {
+            sm: [''],
+            default: [''],
+            lg: [''],
+        },
+        orientation: {
+            horizontal: [''],
+            vertical: [''],
+        },
+    },
+    compoundVariants: [
+        {
+            size: 'sm',
+            orientation: 'horizontal',
+            className: ['cgui:h-2 cgui:w-full'],
+        },
+        {
+            size: 'sm',
+            orientation: 'vertical',
+            className: ['cgui:w-2 cgui:h-full'],
+        },
+        {
+            size: 'default',
+            orientation: 'horizontal',
+            className: ['cgui:h-2.5 cgui:w-full'],
+        },
+        {
+            size: 'default',
+            orientation: 'vertical',
+            className: ['cgui:w-2.5 cgui:h-full'],
+        },
+        {
+            size: 'lg',
+            orientation: 'horizontal',
+            className: ['cgui:h-3.5 cgui:w-full'],
+        },
+        {
+            size: 'lg',
+            orientation: 'vertical',
+            className: ['cgui:w-3.5 cgui:h-full'],
+        },
+    ],
+});
+export const sliderPrimitiveRangeStyles = tv({
+    base: [
+        'cgui:absolute cgui:bg-surface-primary-active',
+        'cgui:data-[orientation=horizontal]:h-full cgui:data-[orientation=vertical]:w-full',
+    ],
+});
+export const sliderPrimitiveThumbStyles = tv({
+    base: [
+        'cgui:block',
+        'cgui:cursor-pointer cgui:disabled:pointer-events-none cgui:disabled:opacity-50 cgui:z-5',
+        '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',
+    ],
+    variants: {
+        size: {
+            sm: ['cgui:size-4 cgui:border-2 cgui:aspect-square'],
+            default: ['cgui:size-6 cgui:border-4 cgui:aspect-square'],
+            lg: ['cgui:size-8 cgui:border-5 cgui:aspect-square'],
+        },
+    },
+});
+export const sliderPrimitiveTickStyles = tv({
+    base: [
+        'cgui:z-1 cgui:bg-surface-darkest/50',
+        'cgui:data-[orientation=horizontal]:w-[1px]',
+        'cgui:data-[orientation=vertical]:h-[1px]',
+    ],
+    variants: {
+        size: {
+            sm: ['cgui:data-[orientation=horizontal]:h-2 cgui:data-[orientation=vertical]:w-2'],
+            default: ['cgui:data-[orientation=horizontal]:h-2.5 cgui:data-[orientation=vertical]:w-2.5'],
+            lg: ['cgui:data-[orientation=horizontal]:h-3.5 cgui:data-[orientation=vertical]:w-3.5'],
+        },
+    },
+});

package/dist/components/slider/types.d.ts

@@ -0,0 +1,16 @@
+import type { SliderRangeProps as UISliderRangeProps, SliderRootProps as UISliderRootProps, SliderThumbProps as UISliderThumbProps, SliderTickProps as UISliderTickProps } from 'bits-ui';
+import type { Without } from '../../internal/types/common.js';
+import type { WithVariants } from '../../internal/types/composition.js';
+import type { PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
+import type { WithChild, WithElementRef, WithoutChildrenOrChild } from 'svelte-toolbelt';
+import type { SliderPrimitiveRangeVariants, SliderPrimitiveRootVariants, SliderPrimitiveThumbVariants, SliderPrimitiveTickVariants, SliderPrimitiveTrackVariants } from './styles.js';
+export type SliderPrimitiveRootProps = WithVariants<UISliderRootProps, SliderPrimitiveRootVariants>;
+export type SliderPrimitiveRangeProps = WithVariants<UISliderRangeProps, SliderPrimitiveRangeVariants>;
+export type SliderPrimitiveThumbProps = WithVariants<UISliderThumbProps, Omit<SliderPrimitiveThumbVariants, 'size'>>;
+export type SliderPrimitiveTickProps = WithVariants<UISliderTickProps, Omit<SliderPrimitiveTickVariants, 'size'>>;
+type SliderPrimitiveTrackWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, Omit<SliderPrimitiveTrackVariants, 'size'>>;
+export type SliderPrimitiveTrackProps = SliderPrimitiveTrackWithoutHTML & Without<PrimitiveSpanAttributes, SliderPrimitiveTrackWithoutHTML>;
+export type SliderRootProps = WithoutChildrenOrChild<SliderPrimitiveRootProps> & {
+    showTicks?: boolean;
+};
+export {};

package/dist/components/slider/types.js

@@ -0,0 +1 @@
+export {};

package/dist/internal/constants/stories-namespace.d.ts

@@ -0,0 +1,3 @@
+export declare const STORIES_NAMESPACE: {
+    readonly UI_KIT: "UI Kit";
+};

package/dist/internal/constants/stories-namespace.js

@@ -0,0 +1,3 @@
+export const STORIES_NAMESPACE = {
+    UI_KIT: 'UI Kit',
+};

package/dist/internal/types/composition.d.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
+import type { ReadableBoxedValues, Without, WritableBoxedValues } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
 export type WithChild<Props extends Record<PropertyKey, unknown> = {}, SnippetProps extends Record<PropertyKey, unknown> = {
     _default: never;
@@ -42,4 +42,4 @@ export type WithoutChildren<T> = T extends {
 export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
     ref?: U | null;
 };
-export type WithVariants<TSource, TStyles extends (...args: any) => any, TOmit extends keyof VariantProps<TStyles> = never> = TSource & Omit<VariantProps<TStyles>, TOmit>;
+export type WithVariants<TSource extends Record<string, unknown>, TStyles extends VariantProps<any>> = TSource & Without<TStyles, TSource>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@casinogate/ui",
-  "version": "1.10.17",
+  "version": "1.10.19",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -27,11 +27,11 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.1.2",
     "@poppanator/sveltekit-svg": "^6.0.0",
-    "@storybook/addon-a11y": "^10.0.3",
-    "@storybook/addon-docs": "^10.0.3",
-    "@storybook/addon-svelte-csf": "^5.0.10",
-    "@storybook/addon-vitest": "^10.0.3",
-    "@storybook/sveltekit": "^10.0.3",
+    "@storybook/addon-a11y": "^10.2.17",
+    "@storybook/addon-docs": "^10.2.17",
+    "@storybook/addon-svelte-csf": "^5.0.11",
+    "@storybook/addon-vitest": "^10.2.17",
+    "@storybook/sveltekit": "^10.2.17",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.48.4",
     "@sveltejs/package": "^2.5.4",
@@ -45,7 +45,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.15",
-    "storybook": "^10.0.3",
+    "storybook": "^10.2.17",
     "svelte": "^5.36.1",
     "svelte-check": "^4.3.0",
     "tailwind-scrollbar": "^4.0.2",
@@ -64,7 +64,7 @@
   "dependencies": {
     "@tanstack/table-core": "^8.21.3",
     "@zag-js/collection": "^1.30.0",
-    "bits-ui": "^2.8.11",
+    "bits-ui": "2.16.3",
     "runed": "^0.35.1",
     "svelte-toolbelt": "^0.10.6",
     "tailwind-merge": "^3.3.1",