@casinogate/ui 1.10.18 → 1.11.0

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

@@ -1,50 +1,9 @@
-import { Context } from 'runed';
-import type { ReadableBox } from 'svelte-toolbelt';
 import type { VariantProps } from 'tailwind-variants';
-export declare const fieldStyles: import("tailwind-variants").TVReturnType<{
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            description?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            label?: import("tailwind-merge").ClassNameValue;
-            error?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            description?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            label?: import("tailwind-merge").ClassNameValue;
-            error?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    root: string;
-    label: string[];
-    error: string;
-    description: string;
-}, undefined, {
-    [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            description?: import("tailwind-merge").ClassNameValue;
-            root?: import("tailwind-merge").ClassNameValue;
-            label?: import("tailwind-merge").ClassNameValue;
-            error?: import("tailwind-merge").ClassNameValue;
-        };
-    };
-} | {}, {
-    root: string;
-    label: string[];
-    error: string;
-    description: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
-    root: string;
-    label: string[];
-    error: string;
-    description: string;
-}, undefined, unknown, unknown, undefined>>;
-export type FieldVariantsProps = VariantProps<typeof fieldStyles>;
-type FieldStylesContextValues = ReadableBox<ReturnType<typeof fieldStyles>>;
-export declare const FieldStylesContext: Context<FieldStylesContextValues>;
-export {};
+export declare const fieldRootVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldLabelVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldErrorVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const fieldDescriptionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type FieldRootVariants = VariantProps<typeof fieldRootVariants>;
+export type FieldLabelVariants = VariantProps<typeof fieldLabelVariants>;
+export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;
+export type FieldDescriptionVariants = VariantProps<typeof fieldDescriptionVariants>;

package/dist/components/field/styles.js

@@ -1,17 +1,23 @@
-import { keyWithPrefix } from '../../internal/utils/common.js';
 import { tv } from '../../internal/utils/tailwindcss.js';
-import { Context } from 'runed';
-export const fieldStyles = tv({
-    slots: {
-        root: 'cgui:flex cgui:flex-col cgui:gap-1',
-        label: [
-            'cgui:relative',
-            'cgui:w-fit',
-            'cgui:inline-flex cgui:items-center cgui:gap-0.5',
-            'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
-        ],
-        error: 'cgui:text-caption  cgui:text-fg-error',
-        description: 'cgui:text-caption cgui:text-fg-medium',
-    },
+export const fieldRootVariants = tv({
+    base: ['cgui:flex cgui:flex-col cgui:gap-1'],
+});
+export const fieldLabelVariants = tv({
+    base: [
+        'cgui:relative',
+        'cgui:w-fit',
+        'cgui:inline-flex cgui:items-center cgui:gap-0.5',
+        'cgui:text-fg-medium cgui:text-caption cgui:font-medium',
+    ],
+});
+export const fieldErrorVariants = tv({
+    base: [
+        'cgui:text-caption cgui:text-fg-error',
+        'cgui:min-h-[1lh]',
+        'cgui:invisible cgui:opacity-0 cgui:transition-opacity cgui:duration-200',
+        'cgui:data-[invalid]:visible cgui:data-[invalid]:opacity-100',
+    ],
+});
+export const fieldDescriptionVariants = tv({
+    base: ['cgui:text-caption cgui:text-fg-medium'],
 });
-export const FieldStylesContext = new Context(keyWithPrefix('field-styles'));

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

@@ -1,7 +1,9 @@
+import type { WithVariants } from '../../internal/types/composition.js';
 import type { PrimitiveDivAttributes, PrimitiveLabelAttributes, PrimitiveSpanAttributes } from '../../internal/types/html-attributes.js';
 import type { Snippet } from 'svelte';
 import type { WithChild, WithElementRef, Without, WithoutChildrenOrChild } from 'svelte-toolbelt';
-type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
+import type { FieldDescriptionVariants, FieldErrorVariants, FieldLabelVariants, FieldRootVariants } from './styles.js';
+type FieldRootPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{
     invalid?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
@@ -11,7 +13,7 @@ type FieldRootPropsWithoutHTML = WithElementRef<WithChild<{
     disabled: boolean;
     readOnly: boolean;
     required: boolean;
-}>>;
+}>>, FieldRootVariants>;
 export type FieldRootProps = FieldRootPropsWithoutHTML & Without<PrimitiveDivAttributes, FieldRootPropsWithoutHTML>;
 export type FieldControlProps = {
     children?: Snippet<[{
@@ -19,11 +21,11 @@ export type FieldControlProps = {
     }]>;
     id?: string;
 };
-type FieldDescriptionPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type FieldDescriptionPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldDescriptionVariants>;
 export type FieldDescriptionProps = FieldDescriptionPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldDescriptionPropsWithoutHTML>;
-type FieldErrorPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type FieldErrorPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldErrorVariants>;
 export type FieldErrorProps = FieldErrorPropsWithoutHTML & Without<PrimitiveSpanAttributes, FieldErrorPropsWithoutHTML>;
-type FieldLabelPropsWithoutHTML = WithElementRef<WithChild<{}>>;
+type FieldLabelPropsWithoutHTML = WithVariants<WithElementRef<WithChild<{}>>, FieldLabelVariants>;
 export type FieldLabelProps = FieldLabelPropsWithoutHTML & Without<PrimitiveLabelAttributes, FieldLabelPropsWithoutHTML>;
 export type FieldProps = WithoutChildrenOrChild<FieldRootProps> & {
     label?: string | Snippet;

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/navigation/components/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Content } from './navigation.content.svelte';
+export { default as Item } from './navigation.item.svelte';
+export { default as Root } from './navigation.root.svelte';
+export { default as SubContent } from './navigation.sub-content.svelte';
+export { default as SubTrigger } from './navigation.sub-trigger.svelte';
+export { default as Sub } from './navigation.sub.svelte';
+export { default as Trigger } from './navigation.trigger.svelte';

package/dist/components/navigation/components/index.js

@@ -0,0 +1,7 @@
+export { default as Content } from './navigation.content.svelte';
+export { default as Item } from './navigation.item.svelte';
+export { default as Root } from './navigation.root.svelte';
+export { default as SubContent } from './navigation.sub-content.svelte';
+export { default as SubTrigger } from './navigation.sub-trigger.svelte';
+export { default as Sub } from './navigation.sub.svelte';
+export { default as Trigger } from './navigation.trigger.svelte';

package/dist/components/navigation/components/navigation.sub-trigger.svelte

@@ -20,6 +20,7 @@
     label,
     class: className,
     disabled = false,
+    active = false,
     ...restProps
   }: NavigationSubTriggerProps = $props();
 
@@ -30,6 +31,7 @@
     ),
     id: boxWith(() => id),
     disabled: boxWith(() => disabled),
+    active: boxWith(() => active),
   });
 
   const mergedProps = $derived(

package/dist/components/navigation/components/navigation.svelte.d.ts

@@ -49,6 +49,7 @@ export declare class NavigationItemState {
 }
 type NavigationTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
+    active: boolean;
 }>>;
 export declare class NavigationTriggerState {
     static create(opts: NavigationTriggerStateOpts): NavigationTriggerState;
@@ -60,6 +61,7 @@ export declare class NavigationTriggerState {
         readonly id: string;
         readonly "data-slot": "trigger";
         readonly 'data-disabled': "" | undefined;
+        readonly 'data-active': "" | undefined;
     };
 }
 type NavigationSubStateOpts = WithRefProps<WritableBoxedValues<{
@@ -83,6 +85,7 @@ export declare class NavigationSubState {
 }
 type NavigationSubTriggerStateOpts = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
+    active: boolean;
 }>>;
 export declare class NavigationSubTriggerState {
     static create(opts: NavigationSubTriggerStateOpts): NavigationSubTriggerState;
@@ -95,6 +98,7 @@ export declare class NavigationSubTriggerState {
         readonly id: string;
         readonly "data-slot": "sub-trigger";
         readonly 'data-disabled': "" | undefined;
+        readonly 'data-active': "" | undefined;
         readonly 'data-state': "open" | "closed";
         readonly 'aria-expanded': boolean;
         readonly 'aria-haspopup': "menu";

package/dist/components/navigation/components/navigation.svelte.js

@@ -89,6 +89,7 @@ export class NavigationTriggerState {
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.trigger,
         'data-disabled': boolAttr(this.opts.disabled.current),
+        'data-active': boolAttr(this.opts.active.current),
         ...this.attachment,
     }));
 }
@@ -142,6 +143,7 @@ export class NavigationSubTriggerState {
         id: this.opts.id.current,
         [SLOT_ATTR_NAME]: SLOT_ATTR_VALUES.subTrigger,
         'data-disabled': boolAttr(this.opts.disabled.current),
+        'data-active': boolAttr(this.opts.active.current),
         'data-state': this.sub.isOpen ? 'open' : 'closed',
         'aria-expanded': this.sub.isOpen,
         'aria-haspopup': 'menu',

package/dist/components/navigation/components/navigation.trigger.svelte

@@ -18,6 +18,7 @@
     class: className,
     href,
     disabled = false,
+    active = false,
     ...restProps
   }: NavigationTriggerProps = $props();
 
@@ -31,6 +32,7 @@
     ),
     id: boxWith(() => id),
     disabled: boxWith(() => disabled),
+    active: boxWith(() => active),
   });
 
   const mergedProps = $derived(

package/dist/components/navigation/{navigation.svelte → composed/basic/basic.svelte}

@@ -1,29 +1,10 @@
 <script lang="ts" module>
-  import { createListCollection } from '../../internal/index.js';
-  import type { ListCollection } from '../../internal/lib/collection/index.js';
   import type {
-    NavigationCollectionOptions,
-    NavigationItem,
     NavigationItemAction,
     NavigationItemLink,
     NavigationItemSub,
     NavigationSelectableItem,
-  } from './types.js';
-
-  export function createNavigationCollection(options: NavigationCollectionOptions): ListCollection<NavigationItem> {
-    const { items } = options;
-
-    return createListCollection({
-      items,
-      itemToValue: (item) => item.key,
-      itemToString: (item) => {
-        return item.label;
-      },
-      isItemDisabled: (item) => {
-        return !!item.disabled;
-      },
-    });
-  }
+  } from '../../types.js';
 
   function isLink(item: NavigationSelectableItem): item is NavigationItemLink {
     return item.type === 'link';
@@ -39,8 +20,8 @@
 </script>
 
 <script lang="ts">
-  import * as Primitive from './exports-primitive.js';
-  import type { NavigationProps } from './types.js';
+  import * as Primitive from '../../components/index.js';
+  import type { NavigationProps } from '../../types.js';
 
   let {
     collection,
@@ -48,6 +29,7 @@
     compact = $bindable(false),
     contentClass,
     item: itemSnippet,
+    activeKey,
     ...restProps
   }: NavigationProps = $props();
 
@@ -56,7 +38,11 @@
 
 {#snippet defaultSubRenderer(item: NavigationItemSub)}
   <Primitive.Sub>
-    <Primitive.SubTrigger label={item.label} disabled={item.disabled}>
+    <Primitive.SubTrigger
+      label={item.label}
+      disabled={item.disabled}
+      active={item.children.some((child) => child.key === activeKey)}
+    >
       {#snippet icon()}
         {#if item.icon}
           <item.icon width={24} height={24} />
@@ -74,7 +60,7 @@
 
 {#snippet defaultLinkRenderer(item: NavigationItemLink)}
   <Primitive.Item>
-    <Primitive.Trigger label={item.label} href={item.href} disabled={item.disabled}>
+    <Primitive.Trigger label={item.label} href={item.href} disabled={item.disabled} active={item.key === activeKey}>
       {#snippet icon()}
         {#if item.icon}
           <item.icon width={24} height={24} />
@@ -86,7 +72,7 @@
 
 {#snippet defaultActionRenderer(item: NavigationItemAction)}
   <Primitive.Item>
-    <Primitive.Trigger label={item.label} disabled={item.disabled}>
+    <Primitive.Trigger label={item.label} disabled={item.disabled} active={item.key === activeKey}>
       {#snippet icon()}
         {#if item.icon}
           <item.icon width={24} height={24} />

package/dist/components/navigation/composed/basic/basic.svelte.d.ts

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

package/dist/components/navigation/composed/basic/index.d.ts

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

package/dist/components/navigation/composed/basic/index.js

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

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

@@ -0,0 +1 @@
+export * from './basic/index.js';

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

@@ -0,0 +1 @@
+export * from './basic/index.js';

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

@@ -1,4 +1,4 @@
-export * as NavigationPrimitive from './exports-primitive.js';
-export * as Navigation from './exports.js';
-export { createNavigationCollection } from './navigation.svelte';
-export type { NavigationCollection, NavigationCollectionOptions, NavigationContentProps, NavigationItem, NavigationItemAction, NavigationItemBase, NavigationItemLink, NavigationItemProps, NavigationItemSeparator, NavigationItemSub, NavigationProps, NavigationRootProps, NavigationSelectableItem, NavigationSubContentProps, NavigationSubProps, NavigationSubTriggerProps, NavigationTriggerProps, } from './types.js';
+export * as NavigationPrimitive from './components/index.js';
+export * as Navigation from './composed/index.js';
+export { createNavCollection } from './model/index.js';
+export type { NavigationCollection, NavigationCollectionOptions, NavigationContentProps, NavigationItem, NavigationItemAction, NavigationItemBase, NavigationItemLink, NavigationItemProps, NavigationItemSub, NavigationProps, NavigationRootProps, NavigationSelectableItem, NavigationSubContentProps, NavigationSubProps, NavigationSubTriggerProps, NavigationTriggerProps, } from './types.js';

package/dist/components/navigation/index.js

@@ -1,3 +1,3 @@
-export * as NavigationPrimitive from './exports-primitive.js';
-export * as Navigation from './exports.js';
-export { createNavigationCollection } from './navigation.svelte';
+export * as NavigationPrimitive from './components/index.js';
+export * as Navigation from './composed/index.js';
+export { createNavCollection } from './model/index.js';

package/dist/components/navigation/model/create-nav-collection.d.ts

@@ -0,0 +1,3 @@
+import type { ListCollection } from '@zag-js/collection';
+import type { NavigationCollectionOptions, NavigationItem } from '../types.js';
+export declare const createNavCollection: (options: NavigationCollectionOptions) => ListCollection<NavigationItem>;

package/dist/components/navigation/model/create-nav-collection.js

@@ -0,0 +1,14 @@
+import { createListCollection } from '../../../internal/index.js';
+export const createNavCollection = (options) => {
+    const { items } = options;
+    return createListCollection({
+        items,
+        itemToValue: (item) => item.key,
+        itemToString: (item) => {
+            return item.label;
+        },
+        isItemDisabled: (item) => {
+            return !!item.disabled;
+        },
+    });
+};

package/dist/components/navigation/model/index.d.ts

@@ -0,0 +1 @@
+export { createNavCollection } from './create-nav-collection.js';

package/dist/components/navigation/model/index.js

@@ -0,0 +1 @@
+export { createNavCollection } from './create-nav-collection.js';

package/dist/components/navigation/styles.js

@@ -20,13 +20,15 @@ export const navigationItemStyles = tv({
 export const navigationTriggerStyles = tv({
     base: [
         'cgui:flex cgui:items-center cgui:gap-2',
-        'cgui:overflow-hidden cgui:truncate',
+        'cgui:overflow-hidden cgui:truncate cgui:rounded-xs',
         'cgui:w-full cgui:px-3 cgui:py-4',
         'cgui:group-data-[compact=true]/navigation:py-3 cgui:group-data-[compact=true]/navigation:justify-center',
         'cgui:text-fg-semilight cgui:text-body',
         'cgui:cursor-pointer cgui:transition-all cgui:duration-250 cgui:ease-in-out',
         'cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:opacity-50',
         'cgui:[&_svg]:size-6 cgui:[&_[data-slot="icon"]]:me-auto',
+        'cgui:hover:text-fg-white',
+        'cgui:data-[active]:bg-surface-dark cgui:data-[active]:text-fg-white',
     ],
 });
 export const navigationSubStyles = tv({
@@ -37,7 +39,11 @@ export const navigationSubTriggerStyles = tv({
     base: ['cgui:group-data-[compact=false]/navigation:data-[state=open]:[&_[data-slot="chevron"]]:rotate-180'],
 });
 export const navigationSubContentStyles = tv({
-    base: ['cgui:data-[compact=false]:pl-10', 'cgui:data-[compact=false]:[&_[data-slot="trigger"]]:pl-0'],
+    base: [
+        'cgui:data-[compact=false]:pl-10',
+        'cgui:data-[compact=false]:[&_[data-slot="trigger"]]:pl-0',
+        'cgui:[&_[data-slot="trigger"][data-active]]:bg-transparent',
+    ],
 });
 export const navigationDropdownContentStyles = tv({
     base: [

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

@@ -20,6 +20,7 @@ export type NavigationItemProps = NavigationItemPropsWithoutHTML & Without<Primi
 type NavigationTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     href?: string;
     disabled?: boolean;
+    active?: boolean;
     icon?: Snippet;
     label?: string | Snippet<[{
         props: Record<string, unknown>;
@@ -36,6 +37,7 @@ type NavigationSubPropsWithoutHTML = WithElementRef<WithChild<{
 export type NavigationSubProps = NavigationSubPropsWithoutHTML & Without<PrimitiveElementAttributes, NavigationSubPropsWithoutHTML>;
 type NavigationSubTriggerPropsWithoutHTML = WithElementRef<WithoutChildren<WithChild<{
     disabled?: boolean;
+    active?: boolean;
     icon?: Snippet;
     label?: string | Snippet<[{
         props: Record<string, unknown>;
@@ -61,6 +63,7 @@ export type NavigationItemBase = {
     }>;
     /** Whether the item is disabled */
     disabled?: boolean;
+    [key: string]: unknown;
 };
 export type NavigationItemLink = NavigationItemBase & {
     type: 'link';
@@ -89,5 +92,6 @@ export type NavigationProps = WithoutChildrenOrChild<NavigationRootProps> & {
         props: Record<string, unknown>;
     }]>;
     contentClass?: string;
+    activeKey?: string;
 };
 export {};

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;