@casinogate/ui 1.11.14 → 2.0.1

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

@@ -0,0 +1,78 @@
+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;
+    };
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        p: string;
+        avatar: string;
+        'avatar-lg': string;
+        clear: string;
+    };
+}, undefined, "cgui:animate-pulse cgui:bg-surface-regular", {
+    w: {
+        full: string;
+        clear: string;
+    };
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clear: string;
+    };
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        p: string;
+        avatar: string;
+        'avatar-lg': string;
+        clear: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    w: {
+        full: string;
+        clear: string;
+    };
+    rounded: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+        clear: string;
+    };
+    variant: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+        p: string;
+        avatar: string;
+        'avatar-lg': string;
+        clear: string;
+    };
+}, undefined, "cgui:animate-pulse cgui:bg-surface-regular", unknown, unknown, undefined>>;
+export type SkeletonVariantProps = VariantProps<typeof skeletonStyles>;

package/dist/primitives/skeleton/styles.js

@@ -0,0 +1,30 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+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: '',
+        },
+    },
+});

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

@@ -0,0 +1,9 @@
+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;
+    as?: keyof HTMLElementTagNameMap;
+}> & SkeletonVariantProps;
+export type SkeletonProps = SkeletonPropsWithoutHTML & Without<PrimitiveDivAttributes, SkeletonPropsWithoutHTML>;
+export {};

package/dist/primitives/skeleton/types.js

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

package/dist/primitives/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/primitives/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/primitives/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/tailwindcss.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/primitives/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/primitives/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/tailwindcss.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/primitives/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/primitives/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/tailwindcss.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/primitives/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/primitives/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/tailwindcss.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/primitives/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/primitives/slider/components/slider.track.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { boolAttr } from '../../../internal/utils/attrs.js';
+  import { cn } from '../../../internal/utils/tailwindcss.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/primitives/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/primitives/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/primitives/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/primitives/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * as Slider from './components/index.js';
+export type * from './types.js';

package/dist/primitives/slider/index.js

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

package/dist/primitives/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/primitives/slider/styles.js

@@ -0,0 +1,101 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+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/primitives/slider/types.d.ts

@@ -0,0 +1,13 @@
+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 } 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 {};

package/dist/primitives/slider/types.js

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

package/dist/primitives/spinner/components/index.d.ts

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

package/dist/primitives/spinner/components/index.js

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

package/dist/primitives/spinner/components/spinner.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { Icon } from '../../../atomic/icons/index.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { spinnerStyles } from '../styles.js';
+  import type { SpinnerProps } from '../types.js';
+
+  let { class: className, size = 24, ...restProps }: SpinnerProps = $props();
+</script>
+
+<Icon.Spinner class={cn(spinnerStyles(), className)} width={size} height={size} {...restProps} />

package/dist/primitives/spinner/components/spinner.svelte.d.ts

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

package/dist/primitives/spinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/index.js';
+export type * from './types.js';

package/dist/primitives/spinner/index.js

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

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

@@ -0,0 +1,3 @@
+import type { VariantProps } from 'tailwind-variants';
+export declare const spinnerStyles: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "cgui:animate-spin", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "cgui:animate-spin", unknown, unknown, undefined>>;
+export type SpinnerVariantsProps = VariantProps<typeof spinnerStyles>;

package/dist/primitives/spinner/styles.js

@@ -0,0 +1,4 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+export const spinnerStyles = tv({
+    base: 'cgui:animate-spin',
+});

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

@@ -0,0 +1,8 @@
+import type { PrimitiveSVGAttributes } from '../../internal/types/html-attributes.js';
+import type { Without } from 'svelte-toolbelt';
+import type { SpinnerVariantsProps } from './styles.js';
+type SpinnerPropsWithoutHTML = {
+    size?: number;
+} & SpinnerVariantsProps;
+export type SpinnerProps = SpinnerPropsWithoutHTML & Without<Omit<PrimitiveSVGAttributes, 'width' | 'height'>, SpinnerPropsWithoutHTML>;
+export {};

package/dist/primitives/spinner/types.js

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

package/dist/primitives/switch/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Root } from './switch.root.svelte';
+export { default as Thumb } from './switch.thumb.svelte';

package/dist/primitives/switch/components/index.js

@@ -0,0 +1,2 @@
+export { default as Root } from './switch.root.svelte';
+export { default as Thumb } from './switch.thumb.svelte';

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { box } from 'svelte-toolbelt';
+
+  import { SwitchStylesContext, switchRootVariants } from '../styles.js';
+
+  import { useId } from '../../../internal/utils/common.js';
+  import { cn } from '../../../internal/utils/tailwindcss.js';
+  import { Switch as SwitchPrimitive } from 'bits-ui';
+  import type { SwitchRootProps } from '../types.js';
+
+  const uid = $props.id();
+
+  let {
+    id = useId(uid),
+    ref = $bindable(null),
+    checked = $bindable(false),
+    size = 'md',
+    class: className,
+    ...props
+  }: SwitchRootProps = $props();
+
+  const variants = $derived({ size });
+
+  SwitchStylesContext.set(box.with(() => variants));
+</script>
+
+<SwitchPrimitive.Root bind:ref bind:checked {id} class={cn(switchRootVariants({ size }), className)} {...props} />