svelora 2.1.0

package/dist/Switch/Switch.svelte

@@ -0,0 +1,150 @@
+<script lang="ts" module>
+    import type { SwitchProps } from './switch.types.js'
+
+    export type Props = SwitchProps
+</script>
+
+<script lang="ts">
+    import { Label, Switch, useId } from 'bits-ui'
+    import { getComponentConfig, iconsDefaults } from '../config.js'
+    import { useFormField, useFormFieldEmit } from '../hooks/useFormField.svelte.js'
+    import Icon from '../Icon/Icon.svelte'
+    import { switchDefaults, switchVariants } from './switch.variants.js'
+
+    const config = getComponentConfig('switch', switchDefaults)
+    const icons = getComponentConfig('icons', iconsDefaults)
+
+    let {
+        ref = $bindable(null),
+        checked = $bindable(false),
+        onCheckedChange,
+        ui,
+        id,
+        name,
+        value,
+        color = config.defaultVariants.color,
+        size,
+        disabled = false,
+        required = false,
+        loading = false,
+        loadingIcon = icons.loading,
+        checkedIcon,
+        uncheckedIcon,
+        label,
+        description,
+        labelSlot,
+        descriptionSlot,
+        class: className,
+        ...restProps
+    }: Props = $props()
+
+    const formFieldContext = useFormField()
+    const emit = useFormFieldEmit()
+
+    const hasError = $derived(
+        formFieldContext?.error !== undefined && formFieldContext?.error !== false
+    )
+    const resolvedSize = $derived(size ?? formFieldContext?.size ?? config.defaultVariants.size)
+    const resolvedColor = $derived(hasError ? 'error' : color)
+    const autoId = useId()
+    const resolvedId = $derived(id ?? formFieldContext?.ariaId ?? autoId)
+    const resolvedName = $derived(name ?? formFieldContext?.name)
+    const isDisabled = $derived(disabled || loading)
+
+    const ariaDescribedBy = $derived(
+        !formFieldContext
+            ? undefined
+            : hasError
+              ? `${formFieldContext.ariaId}-error`
+              : `${formFieldContext.ariaId}-description ${formFieldContext.ariaId}-help`
+    )
+
+    const hasCheckedIcon = $derived(loading || !!checkedIcon)
+    const hasUncheckedIcon = $derived(loading || !!uncheckedIcon)
+    const checkedIconName = $derived(loading ? loadingIcon : checkedIcon)
+    const uncheckedIconName = $derived(loading ? loadingIcon : uncheckedIcon)
+
+    const variantOpts = $derived({
+        color: resolvedColor,
+        size: resolvedSize,
+        loading,
+        required,
+        disabled: isDisabled ? true : undefined
+    })
+
+    const slots = $derived(switchVariants(variantOpts))
+
+    const classes = $derived({
+        root: slots.root({ class: [config.slots.root, className, ui?.root] }),
+        base: slots.base({ class: [config.slots.base, ui?.base] }),
+        container: slots.container({ class: [config.slots.container, ui?.container] }),
+        thumb: slots.thumb({ class: [config.slots.thumb, ui?.thumb] }),
+        wrapper: slots.wrapper({ class: [config.slots.wrapper, ui?.wrapper] }),
+        label: slots.label({ class: [config.slots.label, ui?.label] }),
+        description: slots.description({ class: [config.slots.description, ui?.description] })
+    })
+
+    const iconClasses = $derived.by(() => {
+        if (!hasCheckedIcon && !hasUncheckedIcon)
+            return { checked: undefined, unchecked: undefined }
+        const iconUiClass = [config.slots.icon, ui?.icon]
+        return {
+            checked: hasCheckedIcon
+                ? slots.icon({ class: iconUiClass, checked: true, unchecked: loading })
+                : undefined,
+            unchecked:
+                hasUncheckedIcon && !loading
+                    ? slots.icon({ class: iconUiClass, unchecked: true })
+                    : undefined
+        }
+    })
+</script>
+
+<div {...restProps} bind:this={ref} class={classes.root}>
+    <div class={classes.container}>
+        <Switch.Root
+            bind:checked
+            onCheckedChange={(val) => {
+                emit.onChange()
+                onCheckedChange?.(val)
+            }}
+            onblur={() => emit.onBlur()}
+            onfocus={() => emit.onFocus()}
+            id={resolvedId}
+            name={resolvedName}
+            {value}
+            disabled={isDisabled}
+            {required}
+            aria-describedby={ariaDescribedBy}
+            aria-invalid={hasError ? true : undefined}
+            class={classes.base}
+        >
+            <Switch.Thumb class={classes.thumb}>
+                {#if hasCheckedIcon && checkedIconName}
+                    <Icon name={checkedIconName} class={iconClasses.checked} />
+                {/if}
+                {#if hasUncheckedIcon && uncheckedIconName && !loading}
+                    <Icon name={uncheckedIconName} class={iconClasses.unchecked} />
+                {/if}
+            </Switch.Thumb>
+        </Switch.Root>
+    </div>
+
+    {#if label || description || labelSlot || descriptionSlot}
+        <div class={classes.wrapper}>
+            {#if labelSlot}
+                {@render labelSlot({ label })}
+            {:else if label}
+                <Label.Root for={resolvedId} class={classes.label}>
+                    {label}
+                </Label.Root>
+            {/if}
+
+            {#if descriptionSlot}
+                {@render descriptionSlot({ description })}
+            {:else if description}
+                <p class={classes.description}>{description}</p>
+            {/if}
+        </div>
+    {/if}
+</div>

package/dist/Switch/Switch.svelte.d.ts

@@ -0,0 +1,6 @@
+import type { SwitchProps } from './switch.types.js';
+export type Props = SwitchProps;
+import { Switch } from 'bits-ui';
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch.svelte';
+export type { SwitchProps } from './switch.types.js';

package/dist/Switch/index.js

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

package/dist/Switch/switch.types.d.ts

@@ -0,0 +1,80 @@
+import type { Switch as SwitchPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { SwitchSlots, SwitchVariantProps } from './switch.variants.js';
+export type SwitchProps = Pick<SwitchPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & Omit<HTMLAttributes<HTMLElement>, 'class'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The checked state of the switch. Supports two-way binding with `bind:checked`.
+     * @default false
+     */
+    checked?: boolean;
+    /**
+     * Callback when the checked state changes.
+     */
+    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * Sets the color scheme for the switch.
+     * @default 'primary'
+     */
+    color?: NonNullable<SwitchVariantProps['color']>;
+    /**
+     * Controls the dimensions of the switch.
+     * @default 'md'
+     */
+    size?: NonNullable<SwitchVariantProps['size']>;
+    /**
+     * Renders a loading spinner inside the thumb.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Icon displayed as the loading indicator.
+     * @default Uses `icons.loading` from app config
+     */
+    loadingIcon?: string;
+    /**
+     * Icon displayed inside the thumb when checked.
+     */
+    checkedIcon?: string;
+    /**
+     * Icon displayed inside the thumb when unchecked.
+     */
+    uncheckedIcon?: string;
+    /**
+     * Label text displayed next to the switch.
+     */
+    label?: string;
+    /**
+     * Description text displayed below the label.
+     */
+    description?: string;
+    /**
+     * The HTML id attribute for the switch.
+     */
+    id?: string;
+    /**
+     * Custom snippet for the label.
+     */
+    labelSlot?: Snippet<[{
+        label?: string;
+    }]>;
+    /**
+     * Custom snippet for the description.
+     */
+    descriptionSlot?: Snippet<[{
+        description?: string;
+    }]>;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific switch slots.
+     */
+    ui?: Partial<Record<SwitchSlots, ClassNameValue>>;
+};

package/dist/Switch/switch.types.js

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

package/dist/Switch/switch.variants.d.ts

@@ -0,0 +1,433 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const switchVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        sm: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        md: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        lg: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        xl: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+    };
+    checked: {
+        true: {
+            icon: string;
+        };
+    };
+    unchecked: {
+        true: {
+            icon: string;
+        };
+    };
+    loading: {
+        true: {
+            icon: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            base: string;
+            label: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+    container: string;
+    thumb: string[];
+    icon: string[];
+    wrapper: string;
+    label: string;
+    description: string;
+}, undefined, {
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        sm: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        md: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        lg: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        xl: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+    };
+    checked: {
+        true: {
+            icon: string;
+        };
+    };
+    unchecked: {
+        true: {
+            icon: string;
+        };
+    };
+    loading: {
+        true: {
+            icon: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            base: string;
+            label: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+    container: string;
+    thumb: string[];
+    icon: string[];
+    wrapper: string;
+    label: string;
+    description: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        success: string;
+        warning: string;
+        error: string;
+        info: string;
+        surface: string;
+    };
+    size: {
+        xs: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        sm: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        md: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        lg: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+        xl: {
+            base: string;
+            container: string;
+            thumb: string;
+            icon: string;
+            wrapper: string;
+        };
+    };
+    checked: {
+        true: {
+            icon: string;
+        };
+    };
+    unchecked: {
+        true: {
+            icon: string;
+        };
+    };
+    loading: {
+        true: {
+            icon: string;
+        };
+    };
+    required: {
+        true: {
+            label: string;
+        };
+    };
+    disabled: {
+        true: {
+            root: string;
+            base: string;
+            label: string;
+            description: string;
+        };
+    };
+}, {
+    root: string;
+    base: string[];
+    container: string;
+    thumb: string[];
+    icon: string[];
+    wrapper: string;
+    label: string;
+    description: string;
+}, undefined, unknown, unknown, undefined>>;
+export type SwitchVariantProps = VariantProps<typeof switchVariants>;
+export type SwitchSlots = keyof ReturnType<typeof switchVariants>;
+export declare const switchDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            sm: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            md: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            lg: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            xl: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+        };
+        checked: {
+            true: {
+                icon: string;
+            };
+        };
+        unchecked: {
+            true: {
+                icon: string;
+            };
+        };
+        loading: {
+            true: {
+                icon: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        disabled: {
+            true: {
+                root: string;
+                base: string;
+                label: string;
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+        container: string;
+        thumb: string[];
+        icon: string[];
+        wrapper: string;
+        label: string;
+        description: string;
+    }, {
+        color: {
+            primary: string;
+            secondary: string;
+            tertiary: string;
+            success: string;
+            warning: string;
+            error: string;
+            info: string;
+            surface: string;
+        };
+        size: {
+            xs: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            sm: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            md: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            lg: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+            xl: {
+                base: string;
+                container: string;
+                thumb: string;
+                icon: string;
+                wrapper: string;
+            };
+        };
+        checked: {
+            true: {
+                icon: string;
+            };
+        };
+        unchecked: {
+            true: {
+                icon: string;
+            };
+        };
+        loading: {
+            true: {
+                icon: string;
+            };
+        };
+        required: {
+            true: {
+                label: string;
+            };
+        };
+        disabled: {
+            true: {
+                root: string;
+                base: string;
+                label: string;
+                description: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string[];
+        container: string;
+        thumb: string[];
+        icon: string[];
+        wrapper: string;
+        label: string;
+        description: string;
+    }>;
+    slots: Partial<Record<SwitchSlots, string>>;
+};