sv5ui 1.1.3 → 1.3.0

package/dist/Slider/slider.variants.d.ts

@@ -0,0 +1,383 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sliderVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        tertiary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+        error: {
+            range: string;
+            thumb: string;
+        };
+        info: {
+            range: string;
+            thumb: string;
+        };
+        surface: {
+            range: string;
+            thumb: string;
+        };
+    };
+    size: {
+        xs: {
+            thumb: string;
+        };
+        sm: {
+            thumb: string;
+        };
+        md: {
+            thumb: string;
+        };
+        lg: {
+            thumb: string;
+        };
+        xl: {
+            thumb: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            base: string;
+            range: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    tooltip: string[];
+}, undefined, {
+    color: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        tertiary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+        error: {
+            range: string;
+            thumb: string;
+        };
+        info: {
+            range: string;
+            thumb: string;
+        };
+        surface: {
+            range: string;
+            thumb: string;
+        };
+    };
+    size: {
+        xs: {
+            thumb: string;
+        };
+        sm: {
+            thumb: string;
+        };
+        md: {
+            thumb: string;
+        };
+        lg: {
+            thumb: string;
+        };
+        xl: {
+            thumb: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            base: string;
+            range: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    tooltip: string[];
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        tertiary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+        error: {
+            range: string;
+            thumb: string;
+        };
+        info: {
+            range: string;
+            thumb: string;
+        };
+        surface: {
+            range: string;
+            thumb: string;
+        };
+    };
+    size: {
+        xs: {
+            thumb: string;
+        };
+        sm: {
+            thumb: string;
+        };
+        md: {
+            thumb: string;
+        };
+        lg: {
+            thumb: string;
+        };
+        xl: {
+            thumb: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+            range: string;
+        };
+        vertical: {
+            root: string;
+            base: string;
+            range: string;
+        };
+    };
+    disabled: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    root: string;
+    base: string;
+    track: string;
+    range: string;
+    thumb: string[];
+    tooltip: string[];
+}, undefined, unknown, unknown, undefined>>;
+export type SliderVariantProps = VariantProps<typeof sliderVariants>;
+export type SliderSlots = keyof ReturnType<typeof sliderVariants>;
+export declare const sliderDefaults: {
+    defaultVariants: import("tailwind-variants").TVDefaultVariants<{
+        color: {
+            primary: {
+                range: string;
+                thumb: string;
+            };
+            secondary: {
+                range: string;
+                thumb: string;
+            };
+            tertiary: {
+                range: string;
+                thumb: string;
+            };
+            success: {
+                range: string;
+                thumb: string;
+            };
+            warning: {
+                range: string;
+                thumb: string;
+            };
+            error: {
+                range: string;
+                thumb: string;
+            };
+            info: {
+                range: string;
+                thumb: string;
+            };
+            surface: {
+                range: string;
+                thumb: string;
+            };
+        };
+        size: {
+            xs: {
+                thumb: string;
+            };
+            sm: {
+                thumb: string;
+            };
+            md: {
+                thumb: string;
+            };
+            lg: {
+                thumb: string;
+            };
+            xl: {
+                thumb: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                base: string;
+                range: string;
+            };
+            vertical: {
+                root: string;
+                base: string;
+                range: string;
+            };
+        };
+        disabled: {
+            true: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+        track: string;
+        range: string;
+        thumb: string[];
+        tooltip: string[];
+    }, {
+        color: {
+            primary: {
+                range: string;
+                thumb: string;
+            };
+            secondary: {
+                range: string;
+                thumb: string;
+            };
+            tertiary: {
+                range: string;
+                thumb: string;
+            };
+            success: {
+                range: string;
+                thumb: string;
+            };
+            warning: {
+                range: string;
+                thumb: string;
+            };
+            error: {
+                range: string;
+                thumb: string;
+            };
+            info: {
+                range: string;
+                thumb: string;
+            };
+            surface: {
+                range: string;
+                thumb: string;
+            };
+        };
+        size: {
+            xs: {
+                thumb: string;
+            };
+            sm: {
+                thumb: string;
+            };
+            md: {
+                thumb: string;
+            };
+            lg: {
+                thumb: string;
+            };
+            xl: {
+                thumb: string;
+            };
+        };
+        orientation: {
+            horizontal: {
+                base: string;
+                range: string;
+            };
+            vertical: {
+                root: string;
+                base: string;
+                range: string;
+            };
+        };
+        disabled: {
+            true: {
+                base: string;
+            };
+        };
+    }, {
+        root: string;
+        base: string;
+        track: string;
+        range: string;
+        thumb: string[];
+        tooltip: string[];
+    }>;
+    slots: Partial<Record<SliderSlots, string>>;
+};

package/dist/Slider/slider.variants.js

@@ -0,0 +1,102 @@
+import { tv } from 'tailwind-variants';
+export const sliderVariants = tv({
+    slots: {
+        root: '',
+        base: 'relative flex touch-none select-none items-center',
+        track: 'relative grow overflow-hidden rounded-full bg-surface-container-highest',
+        range: 'absolute rounded-full',
+        thumb: [
+            'block rounded-full bg-surface shadow-sm ring-2',
+            'focus-visible:outline-none focus-visible:ring-4',
+            'transition-[box-shadow] duration-150',
+            'data-[disabled]:pointer-events-none'
+        ],
+        tooltip: [
+            'rounded px-1.5 py-0.5 text-xs font-medium',
+            'bg-on-surface text-surface shadow-sm',
+            'pointer-events-none select-none whitespace-nowrap',
+            'mb-2.5 me-2.5'
+        ]
+    },
+    variants: {
+        color: {
+            primary: {
+                range: 'bg-primary',
+                thumb: 'ring-primary focus-visible:ring-primary/40'
+            },
+            secondary: {
+                range: 'bg-secondary',
+                thumb: 'ring-secondary focus-visible:ring-secondary/40'
+            },
+            tertiary: {
+                range: 'bg-tertiary',
+                thumb: 'ring-tertiary focus-visible:ring-tertiary/40'
+            },
+            success: {
+                range: 'bg-success',
+                thumb: 'ring-success focus-visible:ring-success/40'
+            },
+            warning: {
+                range: 'bg-warning',
+                thumb: 'ring-warning focus-visible:ring-warning/40'
+            },
+            error: {
+                range: 'bg-error',
+                thumb: 'ring-error focus-visible:ring-error/40'
+            },
+            info: {
+                range: 'bg-info',
+                thumb: 'ring-info focus-visible:ring-info/40'
+            },
+            surface: {
+                range: 'bg-on-surface',
+                thumb: 'ring-on-surface focus-visible:ring-on-surface/40'
+            }
+        },
+        size: {
+            xs: { thumb: 'size-3' },
+            sm: { thumb: 'size-3.5' },
+            md: { thumb: 'size-4' },
+            lg: { thumb: 'size-4.5' },
+            xl: { thumb: 'size-5' }
+        },
+        orientation: {
+            horizontal: {
+                base: 'w-full flex-row',
+                range: 'h-full left-0'
+            },
+            vertical: {
+                root: 'h-full',
+                base: 'h-full flex-col',
+                range: 'w-full bottom-0'
+            }
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed'
+            }
+        }
+    },
+    compoundVariants: [
+        // Track thickness: size × orientation
+        { size: 'xs', orientation: 'horizontal', class: { track: 'h-1' } },
+        { size: 'sm', orientation: 'horizontal', class: { track: 'h-1.5' } },
+        { size: 'md', orientation: 'horizontal', class: { track: 'h-2' } },
+        { size: 'lg', orientation: 'horizontal', class: { track: 'h-2.5' } },
+        { size: 'xl', orientation: 'horizontal', class: { track: 'h-3' } },
+        { size: 'xs', orientation: 'vertical', class: { track: 'w-1' } },
+        { size: 'sm', orientation: 'vertical', class: { track: 'w-1.5' } },
+        { size: 'md', orientation: 'vertical', class: { track: 'w-2' } },
+        { size: 'lg', orientation: 'vertical', class: { track: 'w-2.5' } },
+        { size: 'xl', orientation: 'vertical', class: { track: 'w-3' } }
+    ],
+    defaultVariants: {
+        color: 'primary',
+        size: 'md',
+        orientation: 'horizontal'
+    }
+});
+export const sliderDefaults = {
+    defaultVariants: sliderVariants.defaultVariants,
+    slots: {}
+};

package/dist/Switch/Switch.svelte

@@ -16,6 +16,7 @@
     const icons = getComponentConfig('icons', iconsDefaults)
 
     let {
+        ref = $bindable(null),
         checked = $bindable(false),
         onCheckedChange,
         ui,
@@ -34,7 +35,8 @@
         description,
         labelSlot,
         descriptionSlot,
-        class: className
+        class: className,
+        ...restProps
     }: Props = $props()
 
     const formFieldContext = getContext<
@@ -57,11 +59,13 @@
     const resolvedName = $derived(name ?? formFieldContext?.name)
     const isDisabled = $derived(disabled || loading)
 
-    const ariaDescribedBy = $derived.by(() => {
-        if (!formFieldContext) return undefined
-        const fid = formFieldContext.ariaId
-        return hasError ? `${fid}-error` : `${fid}-description ${fid}-help`
-    })
+    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)
@@ -74,7 +78,7 @@
         loading,
         required,
         disabled: isDisabled ? true : undefined
-    } as const)
+    })
 
     const classes = $derived.by(() => {
         const slots = switchVariants(variantOpts)
@@ -85,34 +89,31 @@
             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]
-            })
+            description: slots.description({ class: [config.slots.description, ui?.description] })
         }
     })
 
-    const iconUiClass = $derived([config.slots.icon, ui?.icon])
-
-    const checkedIconClass = $derived.by(() => {
-        if (!hasCheckedIcon) return undefined
-        return switchVariants({
-            ...variantOpts,
-            checked: true,
-            unchecked: loading ? true : undefined
-        }).icon({ class: iconUiClass })
-    })
-
-    const uncheckedIconClass = $derived.by(() => {
-        if (!hasUncheckedIcon) return undefined
-        return switchVariants({
-            ...variantOpts,
-            unchecked: true,
-            checked: loading ? true : undefined
-        }).icon({ class: iconUiClass })
+    const iconClasses = $derived.by(() => {
+        if (!hasCheckedIcon && !hasUncheckedIcon)
+            return { checked: undefined, unchecked: undefined }
+        const iconUiClass = [config.slots.icon, ui?.icon]
+        return {
+            checked: hasCheckedIcon
+                ? switchVariants({ ...variantOpts, checked: true, unchecked: loading }).icon({
+                      class: iconUiClass
+                  })
+                : undefined,
+            unchecked:
+                hasUncheckedIcon && !loading
+                    ? switchVariants({ ...variantOpts, unchecked: true }).icon({
+                          class: iconUiClass
+                      })
+                    : undefined
+        }
     })
 </script>
 
-<div class={classes.root}>
+<div {...restProps} bind:this={ref} class={classes.root}>
     <div class={classes.container}>
         <Switch.Root
             bind:checked
@@ -128,10 +129,10 @@
         >
             <Switch.Thumb class={classes.thumb}>
                 {#if hasCheckedIcon && checkedIconName}
-                    <Icon name={checkedIconName} class={checkedIconClass} />
+                    <Icon name={checkedIconName} class={iconClasses.checked} />
                 {/if}
                 {#if hasUncheckedIcon && uncheckedIconName && !loading}
-                    <Icon name={uncheckedIconName} class={uncheckedIconClass} />
+                    <Icon name={uncheckedIconName} class={iconClasses.unchecked} />
                 {/if}
             </Switch.Thumb>
         </Switch.Root>

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

@@ -1,6 +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, {}, "checked">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "ref" | "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

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

@@ -1,8 +1,13 @@
 import type { Snippet } from 'svelte';
 import type { Switch as SwitchPrimitive } from 'bits-ui';
 import type { ClassNameValue } from 'tailwind-merge';
+import type { HTMLAttributes } from 'svelte/elements';
 import type { SwitchVariantProps, SwitchSlots } from './switch.variants.js';
-export type SwitchProps = Pick<SwitchPrimitive.RootProps, 'disabled' | 'name' | 'value' | 'required'> & {
+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

package/dist/Switch/switch.variants.js

@@ -10,7 +10,7 @@ export const switchVariants = tv({
         ],
         container: 'flex items-center',
         thumb: [
-            'group pointer-events-none rounded-full bg-white shadow-lg ring-0',
+            'group pointer-events-none rounded-full bg-surface shadow-lg ring-0',
             'flex items-center justify-center',
             'transition-transform duration-200',
             'data-[state=unchecked]:translate-x-0'
@@ -39,35 +39,35 @@ export const switchVariants = tv({
             xs: {
                 base: 'w-7',
                 container: 'h-4',
-                thumb: 'size-3 data-[state=checked]:translate-x-3',
+                thumb: 'size-3 data-[state=checked]:translate-x-3 rtl:data-[state=checked]:-translate-x-3',
                 icon: 'size-2',
                 wrapper: 'text-xs'
             },
             sm: {
                 base: 'w-8',
                 container: 'h-4',
-                thumb: 'size-3.5 data-[state=checked]:translate-x-3.5',
+                thumb: 'size-3.5 data-[state=checked]:translate-x-3.5 rtl:data-[state=checked]:-translate-x-3.5',
                 icon: 'size-2.5',
                 wrapper: 'text-xs'
             },
             md: {
                 base: 'w-9',
                 container: 'h-5',
-                thumb: 'size-4 data-[state=checked]:translate-x-4',
+                thumb: 'size-4 data-[state=checked]:translate-x-4 rtl:data-[state=checked]:-translate-x-4',
                 icon: 'size-3',
                 wrapper: 'text-sm'
             },
             lg: {
                 base: 'w-10',
                 container: 'h-5',
-                thumb: 'size-4.5 data-[state=checked]:translate-x-4.5',
+                thumb: 'size-4.5 data-[state=checked]:translate-x-4.5 rtl:data-[state=checked]:-translate-x-4.5',
                 icon: 'size-3.5',
                 wrapper: 'text-sm'
             },
             xl: {
                 base: 'w-11',
                 container: 'h-6',
-                thumb: 'size-5 data-[state=checked]:translate-x-5',
+                thumb: 'size-5 data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5',
                 icon: 'size-4',
                 wrapper: 'text-base'
             }