@casinogate/ui 0.0.3

package/dist/components/collapsible/components/collapsaible.trigger.svelte

@@ -0,0 +1,50 @@
+<script lang="ts" module>
+  export type CollapsibleTriggerProps = CollapsibleTriggerPropsPrimitive & {
+    icon?: Snippet;
+  };
+</script>
+
+<script lang="ts">
+  import ChevronSmallRightIcon from '../../../assets/icons/chevron-small-right.svg?component';
+  import { CollapsibleStylesContext } from '../styles.js';
+  import { cn } from '../../../internal/utils/common.js';
+
+  import {
+    Collapsible as CollapsiblePrimitive,
+    useId,
+    type CollapsibleTriggerProps as CollapsibleTriggerPropsPrimitive,
+  } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    id = useId(),
+    class: className,
+    child: childSnippet,
+    children: childrenSnippet,
+    icon: iconSnippet,
+    ...restProps
+  }: CollapsibleTriggerProps = $props();
+
+  const styles = CollapsibleStylesContext.get();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref {id} class={cn(styles.current.trigger(), className)} {...restProps}>
+  {#snippet child(childProps)}
+    {#if childSnippet}
+      {@render childSnippet?.(childProps)}
+    {:else}
+      <button {...childProps.props}>
+        <span data-slot="icon" class={styles.current.icon()}>
+          {#if iconSnippet}
+            {@render iconSnippet?.()}
+          {:else}
+            <ChevronSmallRightIcon />
+          {/if}
+        </span>
+
+        {@render childrenSnippet?.()}
+      </button>
+    {/if}
+  {/snippet}
+</CollapsiblePrimitive.Trigger>

package/dist/components/collapsible/components/collapsaible.trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+export type CollapsibleTriggerProps = CollapsibleTriggerPropsPrimitive & {
+    icon?: Snippet;
+};
+import { type CollapsibleTriggerProps as CollapsibleTriggerPropsPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+declare const Collapsaible: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
+type Collapsaible = ReturnType<typeof Collapsaible>;
+export default Collapsaible;

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

@@ -0,0 +1,9 @@
+import { type CollapsibleContentProps } from './components/collapsaible.content.svelte';
+import { type CollapsibleRootProps } from './components/collapsaible.root.svelte';
+import { type CollapsibleTriggerProps } from './components/collapsaible.trigger.svelte';
+export declare const CollapsiblePrimitive: {
+    Root: import("svelte").Component<import("bits-ui").CollapsibleRootProps, {}, "ref" | "open">;
+    Trigger: import("svelte").Component<CollapsibleTriggerProps, {}, "ref">;
+    Content: import("svelte").Component<import("bits-ui").CollapsibleContentProps, {}, "ref">;
+};
+export type { CollapsibleContentProps, CollapsibleRootProps, CollapsibleTriggerProps };

package/dist/components/collapsible/index.js

@@ -0,0 +1,8 @@
+import Content, {} from './components/collapsaible.content.svelte';
+import Root, {} from './components/collapsaible.root.svelte';
+import Trigger, {} from './components/collapsaible.trigger.svelte';
+export const CollapsiblePrimitive = {
+    Root,
+    Trigger,
+    Content,
+};

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

@@ -0,0 +1,178 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const collapsibleVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    trigger: string[];
+    icon: string[];
+    content: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            content?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            icon?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string[];
+    trigger: string[];
+    icon: string[];
+    content: string[];
+}, import("tailwind-variants").TVReturnType<unknown, {
+    root: string[];
+    trigger: string[];
+    icon: string[];
+    content: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type CollapsibleVariantsProps = VariantProps<typeof collapsibleVariants>;
+export declare const CollapsibleStylesContext: Context<ReadableBox<{
+    root: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    trigger: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    icon: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    content: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+} & {
+    root: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    trigger: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    icon: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+    content: (slotProps?: ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({
+        [x: string]: string | number | undefined;
+        [x: number]: string | number | undefined;
+    } & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | ({} & import("tailwind-variants").ClassProp<import("tailwind-variants").ClassValue>) | undefined) => string;
+} & {}>>;

package/dist/components/collapsible/styles.js

@@ -0,0 +1,27 @@
+import { keyWithPrefix } from '../../internal/utils/common.js';
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+export const collapsibleVariants = tv({
+    slots: {
+        root: [
+            'cgui:relative cgui:overflow-hidden',
+            'cgui:w-full',
+            'cgui:bg-surface-lightest',
+            'cgui:border cgui:border-stroke-divider cgui:rounded-sm',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+            'cgui:hover:bg-surface-primary-light cgui:hover:[&_[data-slot=icon]]:text-icon-focus',
+            'cgui:data-[disabled]:opacity-50 cgui:data-[disabled]:cursor-not-allowed cgui:data-[disabled]:pointer-events-none',
+        ],
+        trigger: [
+            'cgui:w-full cgui:text-left cgui:py-1.5 cgui:px-2 cgui:flex cgui:items-center cgui:gap-1',
+            'cgui:cursor-pointer cgui:text-fg-darkest cgui:font-normal cgui:text-body-2',
+            'cgui:data-[state=open]:[&_[data-slot=icon]]:rotate-90',
+        ],
+        icon: [
+            'cgui:relative cgui:inline-flex cgui:size-6 cgui:items-center cgui:justify-center cgui:shrink-0 cgui:text-icon-regular',
+            'cgui:transition-all cgui:duration-250 cgui:ease-in-out',
+        ],
+        content: ['cgui:px-2 cgui:pb-1.5', 'cgui:text-fg-medium cgui:text-body-2'],
+    },
+});
+export const CollapsibleStylesContext = new Context(keyWithPrefix('collapsible-styles'));

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

@@ -0,0 +1 @@
+export type CollapsibleOpenVariant = 'single' | 'multiple';

package/dist/components/collapsible/types.js

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

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

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

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

@@ -0,0 +1,6 @@
+export type SwitchRootProps = SwitchRootPropsPrimitive & SwitchVariantsProps;
+import { type SwitchVariantsProps } from '../styles.js';
+import { type SwitchRootProps as SwitchRootPropsPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<SwitchRootProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/switch/components/switch.thumb.svelte

@@ -0,0 +1,17 @@
+<script lang="ts" module>
+  export type SwitchThumbProps = SwitchThumbPropsPrimitive;
+</script>
+
+<script lang="ts">
+  import { cn } from '../../../internal/utils/common.js';
+
+  import { SwitchStylesContext } from '../styles.js';
+
+  import { Switch as SwitchPrimitive, useId, type SwitchThumbProps as SwitchThumbPropsPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), id = useId(), class: className, ...props }: SwitchThumbProps = $props();
+
+  const styles = SwitchStylesContext.get();
+</script>
+
+<SwitchPrimitive.Thumb bind:ref {id} class={cn(styles.current.thumb(), className)} {...props} />

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

@@ -0,0 +1,5 @@
+export type SwitchThumbProps = SwitchThumbPropsPrimitive;
+import { Switch as SwitchPrimitive, type SwitchThumbProps as SwitchThumbPropsPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<SwitchPrimitive.ThumbProps, {}, "ref">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

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

@@ -0,0 +1,5 @@
+export declare const SwitchPrimitive: {
+    Root: import("svelte").Component<import("./components/switch.root.svelte").SwitchRootProps, {}, "ref" | "checked">;
+    Thumb: import("svelte").Component<import("bits-ui").SwitchThumbProps, {}, "ref">;
+};
+export declare const Switch: {};

package/dist/components/switch/index.js

@@ -0,0 +1,7 @@
+import Root from './components/switch.root.svelte';
+import Thumb from './components/switch.thumb.svelte';
+export const SwitchPrimitive = {
+    Root,
+    Thumb,
+};
+export const Switch = {};

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

@@ -0,0 +1 @@
+export { createSwitchModel, SwitchModel } from './switch-model.svelte.js';

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

@@ -0,0 +1 @@
+export { createSwitchModel, SwitchModel } from './switch-model.svelte.js';

package/dist/components/switch/model/switch-model.svelte.d.ts

@@ -0,0 +1,12 @@
+type SwitchModelOpts = {
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+};
+export declare class SwitchModel {
+    #private;
+    constructor(opts?: SwitchModelOpts);
+    get checked(): boolean;
+    set checked(value: boolean);
+}
+export declare const createSwitchModel: (opts?: SwitchModelOpts) => SwitchModel;
+export {};

package/dist/components/switch/model/switch-model.svelte.js

@@ -0,0 +1,18 @@
+export class SwitchModel {
+    #opts;
+    #checked = $state(false);
+    constructor(opts = {}) {
+        this.#opts = opts;
+        this.#checked = this.#opts.defaultChecked ?? false;
+    }
+    get checked() {
+        return this.#checked;
+    }
+    set checked(value) {
+        this.#checked = value;
+        this.#opts.onCheckedChange?.(value);
+    }
+}
+export const createSwitchModel = (opts = {}) => {
+    return new SwitchModel(opts);
+};

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

@@ -0,0 +1,74 @@
+import { Context } from 'runed';
+import type { ReadableBox } from 'svelte-toolbelt';
+import type { VariantProps } from 'tailwind-variants';
+export declare const switchVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string[];
+            thumb: string[];
+        };
+        md: {
+            root: string[];
+            thumb: string[];
+        };
+        lg: {
+            root: string[];
+            thumb: string[];
+        };
+        xl: {
+            root: string[];
+            thumb: string[];
+        };
+    };
+}, {
+    root: string[];
+    thumb: string[];
+}, undefined, {
+    size: {
+        sm: {
+            root: string[];
+            thumb: string[];
+        };
+        md: {
+            root: string[];
+            thumb: string[];
+        };
+        lg: {
+            root: string[];
+            thumb: string[];
+        };
+        xl: {
+            root: string[];
+            thumb: string[];
+        };
+    };
+}, {
+    root: string[];
+    thumb: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            root: string[];
+            thumb: string[];
+        };
+        md: {
+            root: string[];
+            thumb: string[];
+        };
+        lg: {
+            root: string[];
+            thumb: string[];
+        };
+        xl: {
+            root: string[];
+            thumb: string[];
+        };
+    };
+}, {
+    root: string[];
+    thumb: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchVariantsProps = VariantProps<typeof switchVariants>;
+type SwitchStylesContextValues = ReadableBox<ReturnType<typeof switchVariants>>;
+export declare const SwitchStylesContext: Context<SwitchStylesContextValues>;
+export {};

package/dist/components/switch/styles.js

@@ -0,0 +1,44 @@
+import { tv } from '../../internal/utils/tailwindcss.js';
+import { Context } from 'runed';
+import { keyWithPrefix } from './../../internal/utils/common.js';
+export const switchVariants = tv({
+    slots: {
+        root: [
+            'cgui:relative cgui:overflow-hidden',
+            'cgui:flex cgui:items-center cgui:p-0.5',
+            'cgui:bg-surface-regular cgui:rounded-xl',
+            'cgui:transition-all cgui:duration-300 cgui:ease-in-out',
+            'cgui:cursor-pointer cgui:select-none',
+            'cgui:data-[state=checked]:bg-surface-primary',
+            'cgui:active:[&_span]:w-2/3 cgui:active:data-[state=checked]:[&_span]:translate-x-[calc(44%+2px)]',
+            'cgui:disabled:opacity-50 cgui:disabled:cursor-not-allowed cgui:disabled:pointer-events-none',
+        ],
+        thumb: [
+            'cgui:relative',
+            'cgui:h-full cgui:rounded-full cgui:bg-surface-light',
+            'cgui:transition-all cgui:duration-300 cgui:ease-in-out',
+            'cgui:data-[state=checked]:translate-x-full cgui:data-[state=checked]:shadow-switch-thumb',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                root: ['cgui:h-3.5 cgui:w-6'],
+                thumb: ['cgui:w-2.5'],
+            },
+            md: {
+                root: ['cgui:h-4 cgui:w-7.5'],
+                thumb: ['cgui:w-3', 'cgui:data-[state=checked]:translate-x-[calc(100%+2px)]'],
+            },
+            lg: {
+                root: ['cgui:h-5 cgui:w-9'],
+                thumb: ['cgui:w-4'],
+            },
+            xl: {
+                root: ['cgui:h-6 cgui:w-11'],
+                thumb: ['cgui:w-5'],
+            },
+        },
+    },
+});
+export const SwitchStylesContext = new Context(keyWithPrefix('switch-styles'));

package/dist/components/switch/switch.stories.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" module>
+  import { defineMeta } from '../../storybook/addon-svelte-csf';
+  import type { Parameters } from '../../storybook/sveltekit';
+
+  import type { ComponentProps } from 'svelte';
+  import SwitchRoot from './components/switch.root.svelte';
+  import SwitchThumb from './components/switch.thumb.svelte';
+
+  const parameters: Parameters = {
+    controls: {
+      include: ['size', 'disabled', 'checked'],
+    },
+    layout: 'centered',
+  };
+
+  const { Story } = defineMeta({
+    title: 'UI Kit/Switch',
+    component: SwitchRoot,
+    render: template,
+    tags: ['autodocs'],
+
+    argTypes: {
+      checked: {
+        table: {
+          defaultValue: { summary: 'false' },
+        },
+      },
+    },
+
+    parameters,
+  });
+
+  type Args = ComponentProps<typeof SwitchRoot>;
+
+  const args: Args = {
+    size: 'md',
+    checked: false,
+    disabled: false,
+  };
+</script>
+
+{#snippet template(args: Args)}
+  <SwitchRoot {...args}>
+    <SwitchThumb />
+  </SwitchRoot>
+{/snippet}
+
+<Story name="Basic" {args} {template} {parameters} />

package/dist/components/switch/switch.stories.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Switch: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Switch = InstanceType<typeof Switch>;
+export default Switch;