@urbicon-ui/blocks 6.1.4

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

@@ -0,0 +1,128 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { MintProp } from '../../mint';
+import type { SliderVariants } from './slider.variants';
+/** A labelled tick mark on the slider track. */
+export interface SliderMark {
+    value: number;
+    label?: string;
+}
+/**
+ * Display texts for the three range status zones (validRange/recommendedRange).
+ * Only shown when `validRange` and/or `recommendedRange` are set. Missing
+ * texts fall back to the UIB i18n localization.
+ */
+export interface SliderRangeStatusText {
+    /** Value is within the recommended range. */
+    insideRecommended?: string;
+    /** Value is within the valid range but outside the recommended range. */
+    insideValidOnly?: string;
+    /** Value is outside the valid range. */
+    outsideValid?: string;
+}
+/**
+ * @description Slider for selecting a numeric value or range within min/max bounds.
+ * Supports single and range modes, step snapping, tick marks, and labels.
+ *
+ * Optional `validRange` and `recommendedRange` paint the track as a three-zone
+ * gradient (red/yellow/green) and show a live status text that is also announced
+ * via an ARIA live region. Both props are optional and additive — a slider
+ * without `validRange`/`recommendedRange` behaves exactly as before.
+ *
+ * @tag form
+ *
+ * @example
+ * ```svelte
+ * <Slider label="Volume" bind:value={volume} />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Slider label="Price range" range bind:value={priceRange} min={0} max={500} step={10} showValue />
+ * ```
+ *
+ * @example
+ * ```svelte
+ * <Slider
+ *   label="Consumption share of heating costs"
+ *   bind:value={share}
+ *   min={0}
+ *   max={100}
+ *   step={5}
+ *   validRange={[50, 100]}
+ *   recommendedRange={[60, 80]}
+ *   formatValue={(v) => `${v} %`}
+ * />
+ * ```
+ */
+export interface SliderProps extends Omit<SliderVariants, 'error' | 'rangeStatus'>, Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class'> {
+    /** Current value. Number for single, [min, max] tuple for range. Supports `bind:value`. */
+    value?: number | [number, number];
+    /** Minimum allowed value. @default 0 */
+    min?: number;
+    /** Maximum allowed value. @default 100 */
+    max?: number;
+    /** Snap to increments of this value. @default 1 */
+    step?: number;
+    /** Enable range mode with two thumbs. @default false */
+    range?: boolean;
+    /** Text label displayed above the slider. */
+    label?: string;
+    /** Show the current value next to the label. @default false */
+    showValue?: boolean;
+    /** Format function for the displayed value. */
+    formatValue?: (value: number | [number, number]) => string;
+    /** Tick marks along the track. */
+    marks?: SliderMark[];
+    /** Error message below the slider. Overrides `helper`. */
+    error?: string;
+    /** Helper text below the slider. Hidden when `error` is set. */
+    helper?: string;
+    /**
+     * Valid value range (e.g. a legal limit). Values outside it style track and
+     * thumb in the `outOfValidRangeIntent` color (default: `danger`). Status
+     * changes are announced via an ARIA live region. If the range lies outside
+     * `[min, max]`, a console warning is emitted — the visible `min`/`max` are
+     * NOT shifted automatically.
+     */
+    validRange?: [number, number];
+    /**
+     * Recommended value range (UX recommendation, softer than `validRange`).
+     * Values inside appear green, values outside yellow (warning). Typically
+     * `recommendedRange ⊂ validRange`, but this is not enforced.
+     */
+    recommendedRange?: [number, number];
+    /**
+     * Intent applied outside the `validRange`. `'warning'` for softer limits
+     * (recommendation, not a violation), `'danger'` for hard limits.
+     * @default 'danger'
+     */
+    outOfValidRangeIntent?: 'danger' | 'warning';
+    /**
+     * Custom status texts for the three zones. Defaults to the UIB i18n
+     * localization (`bt('slider.rangeStatus.*')`).
+     */
+    rangeStatusText?: SliderRangeStatusText;
+    /** @default false */
+    disabled?: boolean;
+    /** Shared `name` for hidden inputs for form submission. */
+    name?: string;
+    /** Fires after the value changes. Receives the new value. */
+    onValueChange?: (value: number | [number, number]) => void;
+    /** Micro-interaction preset. @default 'none' */
+    mint?: MintProp;
+    /** Extra classes merged onto the root wrapper. */
+    class?: string;
+    /** Remove all default tv() classes. */
+    unstyled?: boolean;
+    /** Per-slot class overrides. */
+    slotClasses?: Partial<Record<'wrapper' | 'header' | 'label' | 'valueText' | 'base' | 'track' | 'range' | 'thumb' | 'mark' | 'boundaryTick' | 'rangeStatus' | 'rangeStatusIcon' | 'message', string>>;
+    /**
+     * Apply a named preset registered via `<BlocksProvider presets={{ Slider: {...} }}>`.
+     * Prefer this over `class` overrides when the requested look falls outside the
+     * semantic intent palette — presets keep hover/active/dark-mode logic coherent
+     * and make the custom look reusable across the project.
+     */
+    preset?: string;
+}
+export { default as Slider } from './Slider.svelte';
+export { type SliderVariants, sliderVariants } from './slider.variants';

package/dist/primitives/Slider/index.js

@@ -0,0 +1,2 @@
+export { default as Slider } from './Slider.svelte';
+export { sliderVariants } from './slider.variants';

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

@@ -0,0 +1,256 @@
+import { type VariantProps } from '../../utils/variants';
+export declare const sliderVariants: (props?: import("../../utils/variants").TVProps<{
+    intent: {
+        primary: {
+            range: string;
+            thumb: string;
+        };
+        secondary: {
+            range: string;
+            thumb: string;
+        };
+        success: {
+            range: string;
+            thumb: string;
+        };
+        warning: {
+            range: string;
+            thumb: string;
+        };
+        danger: {
+            range: string;
+            thumb: string;
+        };
+        neutral: {
+            range: string;
+            thumb: string;
+        };
+    };
+    size: {
+        sm: {
+            track: string;
+            range: string;
+            thumb: string;
+        };
+        md: {
+            track: string;
+            range: string;
+            thumb: string;
+        };
+        lg: {
+            track: string;
+            range: string;
+            thumb: string;
+        };
+    };
+    appearance: {
+        default: {};
+        rail: {};
+    };
+    disabled: {
+        true: {
+            base: string;
+            thumb: string;
+        };
+    };
+    error: {
+        true: {
+            message: string;
+        };
+    };
+    messageType: {
+        error: {
+            message: string;
+        };
+        helper: {
+            message: string;
+        };
+    };
+    /**
+     * Status of the current slider position relative to validRange/recommendedRange.
+     * `none` means no range constraints are configured — the default behavior,
+     * where `intent` applies as usual. For any other value, `rangeStatus`
+     * overrides `intent` for `range` and `thumb`.
+     */
+    rangeStatus: {
+        none: {};
+        insideRecommended: {
+            range: string;
+            thumb: string;
+            rangeStatus: string;
+        };
+        insideValidOnly: {
+            range: string;
+            thumb: string;
+            rangeStatus: string;
+        };
+        outsideValidDanger: {
+            range: string;
+            thumb: string;
+            rangeStatus: string;
+        };
+        outsideValidWarning: {
+            range: string;
+            thumb: string;
+            rangeStatus: string;
+        };
+    };
+}> | undefined) => {
+    wrapper: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    header: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    label: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    valueText: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    base: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    track: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    range: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    thumb: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    mark: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    boundaryTick: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    rangeStatus: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    rangeStatusIcon: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+    message: (props?: ({
+        intent?: "primary" | "secondary" | "success" | "warning" | "danger" | "neutral" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        appearance?: "default" | "rail" | undefined;
+        disabled?: boolean | undefined;
+        error?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        rangeStatus?: "none" | "insideRecommended" | "insideValidOnly" | "outsideValidDanger" | "outsideValidWarning" | undefined;
+    } & {
+        class?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+        className?: string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | (string | false | /*elided*/ any | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined)[] | null | undefined;
+    }) | undefined) => string;
+};
+export type SliderVariants = VariantProps<typeof sliderVariants>;

package/dist/primitives/Slider/slider.variants.js

@@ -0,0 +1,193 @@
+import { tv } from '../../utils/variants';
+export const sliderVariants = tv({
+    slots: {
+        wrapper: ['flex flex-col gap-1.5 w-full'],
+        header: ['flex items-center justify-between'],
+        label: ['text-sm font-medium text-text-secondary'],
+        valueText: ['text-sm tabular-nums text-text-tertiary'],
+        base: ['relative flex items-center w-full touch-none select-none cursor-pointer'],
+        // tier: commit — slider is a continuous-value pill (track + range + thumb).
+        track: [
+            'relative w-full overflow-hidden rounded-commit bg-surface-subtle',
+            'transition-[background-color] duration-[var(--blocks-duration-fast)]'
+        ],
+        range: [
+            'absolute h-full rounded-commit',
+            'transition-[background-color] duration-[var(--blocks-duration-fast)]'
+        ],
+        thumb: [
+            'absolute rounded-commit bg-surface-base border-2',
+            'shadow-[var(--blocks-shadow-sm)]',
+            '-translate-x-1/2 -translate-y-1/2 top-1/2',
+            'transition-[box-shadow,transform] duration-[var(--blocks-duration-fast)]',
+            'hover:scale-110 hover:shadow-[var(--blocks-shadow-md)]',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-base'
+        ],
+        mark: ['absolute top-full mt-2 -translate-x-1/2 text-xs text-text-tertiary'],
+        boundaryTick: [
+            'absolute top-0 bottom-0 w-px bg-border-default pointer-events-none',
+            'opacity-60'
+        ],
+        rangeStatus: [
+            'flex items-center gap-1.5 text-xs',
+            'transition-[color] duration-[var(--blocks-duration-fast)]'
+        ],
+        rangeStatusIcon: ['inline-flex shrink-0'],
+        message: ['text-xs']
+    },
+    variants: {
+        intent: {
+            primary: {
+                range: 'bg-primary',
+                thumb: 'border-primary focus-visible:ring-primary/50'
+            },
+            secondary: {
+                range: 'bg-secondary',
+                thumb: 'border-secondary focus-visible:ring-secondary/50'
+            },
+            success: {
+                range: 'bg-success',
+                thumb: 'border-success focus-visible:ring-success/50'
+            },
+            warning: {
+                range: 'bg-warning',
+                thumb: 'border-warning focus-visible:ring-warning/50'
+            },
+            danger: {
+                range: 'bg-danger',
+                thumb: 'border-danger focus-visible:ring-danger/50'
+            },
+            neutral: {
+                range: 'bg-neutral',
+                thumb: 'border-neutral focus-visible:ring-neutral/50'
+            }
+        },
+        size: {
+            sm: {
+                track: 'h-1',
+                range: 'h-1',
+                thumb: 'w-3.5 h-3.5'
+            },
+            md: {
+                track: 'h-2',
+                range: 'h-2',
+                thumb: 'w-5 h-5'
+            },
+            lg: {
+                track: 'h-3',
+                range: 'h-3',
+                thumb: 'w-7 h-7'
+            }
+        },
+        // Appearance contract (mirrors Toggle's `dot` and SegmentGroup's `text`).
+        //   default → classic pill slider: filled range + 20px thumb with a
+        //             white center, border in the intent color, shadow + scale on
+        //             hover. Ideal for mobile and content-light contexts where the
+        //             slider is the primary voice in the layout.
+        //   rail    → 1px hairline track + 1px range + 8px filled intent dot,
+        //             without border/shadow/hover-scale. Visually at the same
+        //             volume as Toggle `dot` and SegmentGroup `text` — for
+        //             knob-strips, dense forms, editorial stages. The hit-target
+        //             is expanded to 24×24 via ::before (WCAG 2.5.5 AA).
+        //
+        // The concrete classes for `rail` live in compoundVariants further below,
+        // so the tv() pipeline override can cleanly strip the size stage
+        // (h-1/2/3, w-3.5 …) — variants and compounds sit in different stages,
+        // and only compounds reliably win against variants.
+        appearance: {
+            default: {},
+            rail: {}
+        },
+        disabled: {
+            true: {
+                base: 'opacity-50 cursor-not-allowed pointer-events-none',
+                thumb: 'hover:scale-100 hover:shadow-[var(--blocks-shadow-sm)]'
+            }
+        },
+        error: {
+            true: {
+                message: 'text-danger'
+            }
+        },
+        messageType: {
+            error: { message: 'text-danger' },
+            helper: { message: 'text-text-tertiary' }
+        },
+        /**
+         * Status of the current slider position relative to validRange/recommendedRange.
+         * `none` means no range constraints are configured — the default behavior,
+         * where `intent` applies as usual. For any other value, `rangeStatus`
+         * overrides `intent` for `range` and `thumb`.
+         */
+        rangeStatus: {
+            none: {},
+            insideRecommended: {
+                range: 'bg-success',
+                thumb: 'border-success focus-visible:ring-success/50',
+                rangeStatus: 'text-success'
+            },
+            insideValidOnly: {
+                range: 'bg-warning',
+                thumb: 'border-warning focus-visible:ring-warning/50',
+                rangeStatus: 'text-warning'
+            },
+            outsideValidDanger: {
+                range: 'bg-danger',
+                thumb: 'border-danger focus-visible:ring-danger/50',
+                rangeStatus: 'text-danger'
+            },
+            outsideValidWarning: {
+                range: 'bg-warning',
+                thumb: 'border-warning focus-visible:ring-warning/50',
+                rangeStatus: 'text-warning'
+            }
+        }
+    },
+    compoundVariants: [
+        // ─── rail appearance: structural overrides ──────────────────────────
+        // Strips the default-appearance pill chrome from track, range and
+        // thumb. tv() applies compoundVariants after base variants, so the
+        // h-px / rounded-none / border-0 overrides win against the size and
+        // intent stages without us having to repeat them per-size.
+        {
+            appearance: 'rail',
+            class: {
+                track: 'h-px rounded-none bg-border-default',
+                range: 'h-px rounded-none',
+                thumb: [
+                    // Reset default-appearance chrome
+                    'rounded-full border-0 bg-current shadow-none',
+                    // Fixed 8×8 visual — rail is size-invariant by design (analogue
+                    // to Toggle dot, which keeps the same dot size across sm/md/lg).
+                    'w-2 h-2',
+                    // Disable hover-scale and shadow lift; no affordance shift on
+                    // hover — the dot is the affordance, not a lifted disc.
+                    'hover:scale-100 hover:shadow-none',
+                    // Expanded hit-area (24×24, WCAG 2.5.5 AA). The pseudo-element
+                    // is transparent and sits behind the visible dot, so the dot
+                    // stays sharp while the hit-target swells out 8px on each side.
+                    'before:content-[""] before:absolute before:-inset-2 before:rounded-full'
+                ]
+            }
+        },
+        // ─── rail × intent: dot fill via text-color + bg-current ────────────
+        // bg-current picks up the text-color set here, so we map intent →
+        // text-color once instead of overriding bg-primary/secondary/…
+        // for every intent.
+        { appearance: 'rail', intent: 'primary', class: { thumb: 'text-primary' } },
+        { appearance: 'rail', intent: 'secondary', class: { thumb: 'text-secondary' } },
+        { appearance: 'rail', intent: 'success', class: { thumb: 'text-success' } },
+        { appearance: 'rail', intent: 'warning', class: { thumb: 'text-warning' } },
+        { appearance: 'rail', intent: 'danger', class: { thumb: 'text-danger' } },
+        { appearance: 'rail', intent: 'neutral', class: { thumb: 'text-neutral' } }
+    ],
+    defaultVariants: {
+        intent: 'primary',
+        size: 'md',
+        appearance: 'default',
+        disabled: false,
+        error: false,
+        messageType: 'helper',
+        rangeStatus: 'none'
+    }
+});