sv5ui 1.2.0 → 1.4.0

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

@@ -0,0 +1,55 @@
+import type { Slider as SliderPrimitive } from 'bits-ui';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { SliderVariantProps, SliderSlots } from './slider.variants.js';
+export type SliderProps = Pick<SliderPrimitive.RootProps, 'dir' | 'orientation' | 'disabled' | 'min' | 'max' | 'step' | 'autoSort' | 'thumbPositioning' | 'trackPadding'> & Omit<HTMLAttributes<HTMLElement>, 'class' | 'children' | 'dir'> & {
+    /**
+     * Bindable reference to the root DOM element.
+     */
+    ref?: HTMLElement | null;
+    /**
+     * The HTML id attribute forwarded to the slider root element.
+     */
+    id?: string;
+    /**
+     * The current value. Use `number` for a single thumb, `number[]` for a range slider.
+     * Supports two-way binding with `bind:value`.
+     * @default 0
+     */
+    value?: number | number[];
+    /**
+     * Callback fired continuously while the user drags a thumb.
+     */
+    onValueChange?: (value: number | number[]) => void;
+    /**
+     * Callback fired once when the user releases the thumb.
+     */
+    onValueCommit?: (value: number | number[]) => void;
+    /**
+     * Color scheme of the slider.
+     * @default 'primary'
+     */
+    color?: NonNullable<SliderVariantProps['color']>;
+    /**
+     * Size of the slider track and thumbs.
+     * @default 'md'
+     */
+    size?: NonNullable<SliderVariantProps['size']>;
+    /**
+     * Show a floating value label above each thumb.
+     * @default false
+     */
+    tooltip?: boolean;
+    /**
+     * The name attribute for hidden inputs used in form submission.
+     */
+    name?: string;
+    /**
+     * Additional CSS classes for the root element.
+     */
+    class?: ClassNameValue;
+    /**
+     * Override styles for specific slider slots.
+     */
+    ui?: Partial<Record<SliderSlots, ClassNameValue>>;
+};

package/dist/Slider/slider.types.js

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

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: {}
+};