flikkui 0.1.0-beta.11

package/dist/components/forms/Signature/Signature.js

@@ -0,0 +1,156 @@
+import { __rest, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { signatureTheme } from './Signature.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Button } from '../../core/Button/Button.js';
+
+var Signature = React__default.forwardRef(function (_a, ref) {
+    var _b, _c;
+    var id = _a.id, label = _a.label, labelClassName = _a.labelClassName, helperText = _a.helperText, helperTextClassName = _a.helperTextClassName, wrapperClassName = _a.wrapperClassName, _d = _a.size, size = _d === void 0 ? 'md' : _d, _e = _a.state, state = _e === void 0 ? 'default' : _e, _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.width, width = _h === void 0 ? 400 : _h, _j = _a.height, height = _j === void 0 ? 200 : _j, _k = _a.strokeColor, strokeColor = _k === void 0 ? '#000000' : _k, _l = _a.strokeWidth, strokeWidth = _l === void 0 ? 2 : _l, _m = _a.backgroundColor, backgroundColor = _m === void 0 ? 'transparent' : _m, className = _a.className, _o = _a.theme, customTheme = _o === void 0 ? {} : _o, onChange = _a.onChange, onClear = _a.onClear, _p = _a.showControls, showControls = _p === void 0 ? true : _p, _q = _a.placeholder, placeholder = _q === void 0 ? 'Sign here' : _q, props = __rest(_a, ["id", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "size", "state", "required", "disabled", "width", "height", "strokeColor", "strokeWidth", "backgroundColor", "className", "theme", "onChange", "onClear", "showControls", "placeholder"]);
+    var canvasRef = useRef(null);
+    var _r = useState(false), isDrawing = _r[0], setIsDrawing = _r[1];
+    var _s = useState(true), isEmpty = _s[0], setIsEmpty = _s[1];
+    var lastPointRef = useRef(null);
+    // Generate unique ID if not provided
+    var signatureId = id || "signature-".concat(Math.random().toString(36).substring(2, 9));
+    // Derived state flags
+    var isDisabled = state === 'disabled' || disabled;
+    var isInvalid = state === 'invalid';
+    // State class for CSS selectors
+    var stateClass = isInvalid
+        ? 'state-invalid'
+        : isDisabled
+            ? 'state-disabled'
+            : 'state-default';
+    // Merge theme with defaults
+    var theme = __assign(__assign({}, signatureTheme), customTheme);
+    useEffect(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        // Set canvas size
+        canvas.width = width;
+        canvas.height = height;
+        // Configure drawing context
+        ctx.lineCap = 'round';
+        ctx.lineJoin = 'round';
+        ctx.strokeStyle = strokeColor;
+        ctx.lineWidth = strokeWidth;
+        // Set background
+        if (backgroundColor !== 'transparent') {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+    }, [width, height, strokeColor, strokeWidth, backgroundColor]);
+    var getPointFromEvent = useCallback(function (event) {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return { x: 0, y: 0 };
+        var rect = canvas.getBoundingClientRect();
+        if ('touches' in event) {
+            return {
+                x: event.touches[0].clientX - rect.left,
+                y: event.touches[0].clientY - rect.top,
+            };
+        }
+        return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top,
+        };
+    }, []);
+    var startDrawing = useCallback(function (event) {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        // Focus the canvas to trigger focus-within on parent
+        var canvas = canvasRef.current;
+        if (canvas) {
+            canvas.focus();
+        }
+        setIsDrawing(true);
+        setIsEmpty(false);
+        var point = getPointFromEvent(event.nativeEvent);
+        lastPointRef.current = point;
+    }, [isDisabled, getPointFromEvent]);
+    var draw = useCallback(function (event) {
+        if (isDisabled)
+            return;
+        event.preventDefault();
+        if (!isDrawing)
+            return;
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        var currentPoint = getPointFromEvent(event.nativeEvent);
+        if (lastPointRef.current) {
+            ctx.beginPath();
+            ctx.moveTo(lastPointRef.current.x, lastPointRef.current.y);
+            ctx.lineTo(currentPoint.x, currentPoint.y);
+            ctx.stroke();
+        }
+        lastPointRef.current = currentPoint;
+        // Emit change event
+        var dataURL = canvas.toDataURL();
+        onChange === null || onChange === void 0 ? void 0 : onChange(dataURL);
+    }, [isDisabled, isDrawing, getPointFromEvent, onChange]);
+    var stopDrawing = useCallback(function () {
+        setIsDrawing(false);
+        lastPointRef.current = null;
+    }, []);
+    var clear = useCallback(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        ctx.clearRect(0, 0, width, height);
+        // Reset background
+        if (backgroundColor !== 'transparent') {
+            ctx.fillStyle = backgroundColor;
+            ctx.fillRect(0, 0, width, height);
+        }
+        setIsEmpty(true);
+        onClear === null || onClear === void 0 ? void 0 : onClear();
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }, [width, height, backgroundColor, onClear, onChange]);
+    var save = useCallback(function () {
+        var canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        var dataURL = canvas.toDataURL();
+        // Create download link
+        var link = document.createElement('a');
+        link.download = 'signature.png';
+        link.href = dataURL;
+        link.click();
+    }, []);
+    // Get theme classes
+    var wrapperClasses = theme.wrapperStyle;
+    var inputGroupClasses = theme.inputGroupStyle;
+    var baseClasses = theme.baseStyle;
+    var sizeClasses = ((_b = theme.sizes) === null || _b === void 0 ? void 0 : _b[size]) || '';
+    var stateClasses = ((_c = theme.states) === null || _c === void 0 ? void 0 : _c[state]) || '';
+    var helperTextClasses = theme.helperText || '';
+    return (React__default.createElement("div", { className: cn(wrapperClasses, stateClass, wrapperClassName) },
+        label && (React__default.createElement("div", { className: "mb-1" },
+            React__default.createElement(FormLabel, { htmlFor: signatureId, className: labelClassName, state: state, required: required }, label))),
+        React__default.createElement("div", { className: cn(inputGroupClasses, sizeClasses, stateClasses, className), style: { width: width, height: height } },
+            React__default.createElement("div", __assign({ ref: ref, className: baseClasses }, props),
+                React__default.createElement("canvas", { ref: canvasRef, id: signatureId, className: cn(theme.canvasStyle, customTheme.canvasStyle), tabIndex: isDisabled ? -1 : 0, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, "aria-label": label || 'Signature canvas', "aria-required": required, "aria-invalid": isInvalid, "aria-disabled": isDisabled }),
+                isEmpty && placeholder && !isDisabled && (React__default.createElement("div", { className: cn(theme.placeholderStyle, customTheme.placeholderStyle) }, placeholder)),
+                showControls && !isDisabled && (React__default.createElement("div", { className: cn(theme.controlsStyle, customTheme.controlsStyle) },
+                    React__default.createElement(Button, { size: "sm", variant: "outline", color: 'neutral', onClick: clear, type: "button" }, "Clear"),
+                    React__default.createElement(Button, { size: "sm", variant: "filled", onClick: save, disabled: isEmpty, type: "button" }, "Save"))))),
+        helperText && (React__default.createElement("div", { className: cn(helperTextClasses, helperTextClassName) }, helperText))));
+});
+Signature.displayName = 'Signature';
+
+export { Signature };

package/dist/components/forms/Signature/Signature.theme.d.ts

@@ -0,0 +1,6 @@
+import { SignatureTheme } from "./Signature.types";
+/**
+ * Default theme for the Signature component
+ * Extends the common forms base theme for consistency
+ */
+export declare const signatureTheme: SignatureTheme;

package/dist/components/forms/Signature/Signature.theme.js

@@ -0,0 +1,32 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * Default theme for the Signature component
+ * Extends the common forms base theme for consistency
+ */
+var signatureTheme = {
+    // Base container styles - inherited from common form theme
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Input group styles - extends the common input group style for consistent borders/focus
+    inputGroupStyle: formsBaseTheme.inputGroupBaseStyle,
+    // Canvas wrapper style - minimal, container handles borders/focus
+    baseStyle: "relative overflow-hidden w-full h-full",
+    // Canvas element style
+    canvasStyle: "block w-full h-full cursor-crosshair touch-none focus:outline-none",
+    // Placeholder text style
+    placeholderStyle: "absolute inset-0 flex items-center justify-center pointer-events-none text-[var(--color-text-placeholder)] text-sm",
+    // Control buttons container style
+    controlsStyle: "absolute bottom-2 right-2 flex gap-2 z-10",
+    // Size variants - use shared padding system
+    sizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.padding),
+        md: "".concat(formsBaseTheme.sizes.md.padding),
+        lg: "".concat(formsBaseTheme.sizes.lg.padding),
+    },
+    // State variants - inherited from common form theme
+    states: formsBaseTheme.states,
+    // Helper text styles - inherited from common form theme
+    helperText: formsBaseTheme.helperText,
+};
+
+export { signatureTheme };

package/dist/components/forms/Signature/Signature.types.d.ts

@@ -0,0 +1,93 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Signature component size variants
+ */
+export type SignatureSize = 'sm' | 'md' | 'lg';
+/**
+ * Signature component state variants
+ */
+export type SignatureState = 'default' | 'disabled' | 'invalid';
+/**
+ * Signature theme configuration
+ */
+export interface SignatureTheme {
+    /** Wrapper container style */
+    wrapperStyle: string;
+    /** Input group container style (border, focus, states) */
+    inputGroupStyle: string;
+    /** Canvas wrapper style */
+    baseStyle: string;
+    /** Canvas element style */
+    canvasStyle: string;
+    /** Placeholder text style */
+    placeholderStyle: string;
+    /** Control buttons container style */
+    controlsStyle: string;
+    /** Size variants */
+    sizes?: Record<SignatureSize, string>;
+    /** State variants */
+    states?: Record<SignatureState, string>;
+    /** Helper text style */
+    helperText?: string;
+}
+/**
+ * Theme overrides for the Signature component
+ */
+export interface SignatureThemeOverrides {
+    wrapperStyle?: string;
+    inputGroupStyle?: string;
+    baseStyle?: string;
+    canvasStyle?: string;
+    placeholderStyle?: string;
+    controlsStyle?: string;
+    sizes?: Partial<Record<SignatureSize, string>>;
+    states?: Partial<Record<SignatureState, string>>;
+    helperText?: string;
+}
+/**
+ * Signature component props
+ */
+export interface SignatureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Unique identifier for the signature field */
+    id?: string;
+    /** Label text for the signature */
+    label?: string;
+    /** Additional class name for the label */
+    labelClassName?: string;
+    /** Helper text displayed below the signature */
+    helperText?: string;
+    /** Additional class name for the helper text */
+    helperTextClassName?: string;
+    /** Additional class name for the wrapper */
+    wrapperClassName?: string;
+    /** Size variant of the signature component */
+    size?: SignatureSize;
+    /** State of the signature component */
+    state?: SignatureState;
+    /** Whether the signature is required */
+    required?: boolean;
+    /** Whether the signature is disabled */
+    disabled?: boolean;
+    /** Canvas width */
+    width?: number;
+    /** Canvas height */
+    height?: number;
+    /** Stroke color */
+    strokeColor?: string;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Background color */
+    backgroundColor?: string;
+    /** Custom class name */
+    className?: string;
+    /** Theme overrides */
+    theme?: SignatureThemeOverrides;
+    /** Called when signature changes */
+    onChange?: (dataURL: string) => void;
+    /** Called when signature is cleared */
+    onClear?: () => void;
+    /** Show control buttons */
+    showControls?: boolean;
+    /** Placeholder text when empty */
+    placeholder?: string;
+}

package/dist/components/forms/Signature/index.d.ts

@@ -0,0 +1,3 @@
+export { Signature } from './Signature';
+export type { SignatureProps, SignatureTheme, SignatureThemeOverrides } from './Signature.types';
+export { signatureTheme } from './Signature.theme';

package/dist/components/forms/Slider/Slider.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { SliderProps } from "./Slider.types";
+export declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/forms/Slider/Slider.js

@@ -0,0 +1,230 @@
+import { __rest, __spreadArray, __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { useRef, useState, useCallback } from 'react';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { sliderTheme } from './Slider.theme.js';
+import { cn } from '../../../utils/cn.js';
+
+var Slider = React__default.forwardRef(function (_a, ref) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _o = _a.state, state = _o === void 0 ? "default" : _o, _p = _a.className, className = _p === void 0 ? "" : _p, label = _a.label, _q = _a.labelClassName, labelClassName = _q === void 0 ? "" : _q, helperText = _a.helperText, _r = _a.helperTextClassName, helperTextClassName = _r === void 0 ? "" : _r, _s = _a.wrapperClassName, wrapperClassName = _s === void 0 ? "" : _s, _t = _a.min, min = _t === void 0 ? 0 : _t, _u = _a.max, max = _u === void 0 ? 100 : _u, _v = _a.step, step = _v === void 0 ? 1 : _v, value = _a.value, defaultValue = _a.defaultValue, onChange = _a.onChange, onChangeCommitted = _a.onChangeCommitted, _w = _a.showValue, showValue = _w === void 0 ? false : _w, _x = _a.unit, unit = _x === void 0 ? "" : _x, _y = _a.showMinMax, showMinMax = _y === void 0 ? false : _y, _z = _a.showTicks, showTicks = _z === void 0 ? false : _z, tickStep = _a.tickStep, _0 = _a.range, range = _0 === void 0 ? false : _0, iconStart = _a.iconStart, iconEnd = _a.iconEnd, _1 = _a.theme, theme = _1 === void 0 ? {} : _1, _2 = _a.required, required = _2 === void 0 ? false : _2, name = _a.name, id = _a.id, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], props = __rest(_a, ["state", "className", "label", "labelClassName", "helperText", "helperTextClassName", "wrapperClassName", "min", "max", "step", "value", "defaultValue", "onChange", "onChangeCommitted", "showValue", "unit", "showMinMax", "showTicks", "tickStep", "range", "iconStart", "iconEnd", "theme", "required", "name", "id", "aria-label", "aria-labelledby", "aria-describedby"]);
+    var trackRef = useRef(null);
+    var sliderId = id || "slider-".concat(Math.random().toString(36).substring(2, 9));
+    var helperTextId = helperText ? "".concat(sliderId, "-helper") : undefined;
+    // Handle controlled/uncontrolled value
+    var _3 = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : (range ? [min, min] : min)), internalValue = _3[0], setInternalValue = _3[1];
+    var currentValue = value !== null && value !== void 0 ? value : internalValue;
+    var isDisabled = state === "disabled";
+    var isInvalid = state === "invalid";
+    // Get values as array for consistent handling
+    var values = Array.isArray(currentValue) ? currentValue : [currentValue];
+    var _4 = useState(null), dragIndex = _4[0], setDragIndex = _4[1];
+    // Calculate percentage for positioning
+    var getPercentage = useCallback(function (val) {
+        return ((val - min) / (max - min)) * 100;
+    }, [min, max]);
+    // Get value from mouse/touch position
+    var getValueFromPosition = useCallback(function (clientX) {
+        if (!trackRef.current)
+            return min;
+        var rect = trackRef.current.getBoundingClientRect();
+        var percentage = ((clientX - rect.left) / rect.width) * 100;
+        var clampedPercentage = Math.max(0, Math.min(100, percentage));
+        var rawValue = min + (clampedPercentage / 100) * (max - min);
+        // Round to nearest step
+        var steppedValue = Math.round(rawValue / step) * step;
+        return Math.max(min, Math.min(max, steppedValue));
+    }, [min, max, step]);
+    // Handle value change
+    var handleValueChange = useCallback(function (newValue) {
+        if (isDisabled)
+            return;
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    }, [value, onChange, isDisabled]);
+    // Handle pointer down on thumb
+    var handlePointerDown = useCallback(function (e, thumbIndex) {
+        if (isDisabled)
+            return;
+        e.preventDefault();
+        setDragIndex(thumbIndex);
+        var handleMove = function (moveEvent) {
+            var newValue = getValueFromPosition(moveEvent.clientX);
+            if (range) {
+                var newValues = __spreadArray([], values, true);
+                newValues[thumbIndex] = newValue;
+                // Ensure values don't cross over
+                if (thumbIndex === 0 && newValue > newValues[1]) {
+                    newValues[0] = newValues[1];
+                }
+                else if (thumbIndex === 1 && newValue < newValues[0]) {
+                    newValues[1] = newValues[0];
+                }
+                handleValueChange(newValues);
+            }
+            else {
+                handleValueChange(newValue);
+            }
+        };
+        var handleEnd = function () {
+            setDragIndex(null);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(currentValue);
+            document.removeEventListener("pointermove", handleMove);
+            document.removeEventListener("pointerup", handleEnd);
+        };
+        document.addEventListener("pointermove", handleMove);
+        document.addEventListener("pointerup", handleEnd);
+    }, [isDisabled, range, values, getValueFromPosition, handleValueChange, onChangeCommitted, currentValue]);
+    // Handle track click
+    var handleTrackClick = useCallback(function (e) {
+        if (isDisabled || dragIndex !== null)
+            return;
+        var newValue = getValueFromPosition(e.clientX);
+        if (range) {
+            // Find closest thumb
+            var distances = values.map(function (val) { return Math.abs(val - newValue); });
+            var closestIndex = distances[0] <= distances[1] ? 0 : 1;
+            var newValues = __spreadArray([], values, true);
+            newValues[closestIndex] = newValue;
+            // Ensure values don't cross over
+            if (closestIndex === 0 && newValue > newValues[1]) {
+                newValues[0] = newValues[1];
+            }
+            else if (closestIndex === 1 && newValue < newValues[0]) {
+                newValues[1] = newValues[0];
+            }
+            handleValueChange(newValues);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValues);
+        }
+        else {
+            handleValueChange(newValue);
+            onChangeCommitted === null || onChangeCommitted === void 0 ? void 0 : onChangeCommitted(newValue);
+        }
+    }, [isDisabled, dragIndex, range, values, getValueFromPosition, handleValueChange, onChangeCommitted]);
+    // Handle keyboard navigation
+    var handleKeyDown = useCallback(function (e, thumbIndex) {
+        if (isDisabled)
+            return;
+        var delta = 0;
+        switch (e.key) {
+            case "ArrowRight":
+            case "ArrowUp":
+                delta = step;
+                break;
+            case "ArrowLeft":
+            case "ArrowDown":
+                delta = -step;
+                break;
+            case "PageUp":
+                delta = step * 10;
+                break;
+            case "PageDown":
+                delta = -step * 10;
+                break;
+            case "Home":
+                delta = min - values[thumbIndex];
+                break;
+            case "End":
+                delta = max - values[thumbIndex];
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        if (range) {
+            var newValues = __spreadArray([], values, true);
+            newValues[thumbIndex] = Math.max(min, Math.min(max, newValues[thumbIndex] + delta));
+            // Ensure values don't cross over
+            if (thumbIndex === 0 && newValues[0] > newValues[1]) {
+                newValues[0] = newValues[1];
+            }
+            else if (thumbIndex === 1 && newValues[1] < newValues[0]) {
+                newValues[1] = newValues[0];
+            }
+            handleValueChange(newValues);
+        }
+        else {
+            var newValue = Math.max(min, Math.min(max, values[0] + delta));
+            handleValueChange(newValue);
+        }
+    }, [isDisabled, step, min, max, range, values, handleValueChange]);
+    // Generate tick marks
+    var generateTicks = useCallback(function () {
+        if (!showTicks)
+            return [];
+        var actualTickStep = tickStep !== null && tickStep !== void 0 ? tickStep : step;
+        var ticks = [];
+        for (var i = min; i <= max; i += actualTickStep) {
+            ticks.push(i);
+        }
+        return ticks;
+    }, [showTicks, tickStep, step, min, max]);
+    var ticks = generateTicks();
+    // Merged theme
+    var mergedTheme = {
+        wrapperStyle: (_c = theme.wrapperStyle) !== null && _c !== void 0 ? _c : sliderTheme.wrapperStyle,
+        labelStyle: (_d = theme.labelStyle) !== null && _d !== void 0 ? _d : sliderTheme.labelStyle,
+        helperTextStyle: (_e = theme.helperTextStyle) !== null && _e !== void 0 ? _e : sliderTheme.helperTextStyle,
+        rootStyle: (_f = theme.rootStyle) !== null && _f !== void 0 ? _f : sliderTheme.rootStyle,
+        trackStyle: (_g = theme.trackStyle) !== null && _g !== void 0 ? _g : sliderTheme.trackStyle,
+        rangeStyle: (_h = theme.rangeStyle) !== null && _h !== void 0 ? _h : sliderTheme.rangeStyle,
+        thumbStyle: (_j = theme.thumbStyle) !== null && _j !== void 0 ? _j : sliderTheme.thumbStyle,
+        valueDisplayStyle: (_k = theme.valueDisplayStyle) !== null && _k !== void 0 ? _k : sliderTheme.valueDisplayStyle,
+        minMaxLabelStyle: (_l = theme.minMaxLabelStyle) !== null && _l !== void 0 ? _l : sliderTheme.minMaxLabelStyle,
+        tickStyle: (_m = theme.tickStyle) !== null && _m !== void 0 ? _m : sliderTheme.tickStyle,
+    };
+    // Calculate filled track dimensions
+    var getFilledTrackStyle = function () {
+        if (range) {
+            var start = getPercentage(Math.min.apply(Math, values));
+            var end = getPercentage(Math.max.apply(Math, values));
+            return {
+                left: "".concat(start, "%"),
+                width: "".concat(end - start, "%"),
+            };
+        }
+        var percentage = getPercentage(values[0]);
+        return {
+            left: 0,
+            width: "".concat(percentage, "%"),
+        };
+    };
+    // Format value display
+    var formatValueDisplay = function () {
+        if (Array.isArray(currentValue)) {
+            return "".concat(currentValue[0]).concat(unit, " - ").concat(currentValue[1]).concat(unit);
+        }
+        return "".concat(currentValue).concat(unit);
+    };
+    return (React__default.createElement("div", __assign({ className: cn(mergedTheme.wrapperStyle, wrapperClassName), ref: ref }, props),
+        label && (React__default.createElement(FormLabel, { htmlFor: sliderId, required: required, className: cn(mergedTheme.labelStyle, labelClassName) }, label)),
+        React__default.createElement("div", { className: "flex items-center gap-4" },
+            iconStart && React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconStart),
+            showMinMax && React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, min),
+            React__default.createElement("div", { className: cn(mergedTheme.rootStyle, className), "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined, "data-orientation": "horizontal" },
+                React__default.createElement("div", { ref: trackRef, className: mergedTheme.trackStyle, onPointerDown: handleTrackClick, role: "presentation" },
+                    React__default.createElement("div", { className: mergedTheme.rangeStyle, style: getFilledTrackStyle() }),
+                    showTicks &&
+                        ticks.map(function (tick) {
+                            var percentage = getPercentage(tick);
+                            return React__default.createElement("div", { key: tick, className: mergedTheme.tickStyle, style: { left: "".concat(percentage, "%") } });
+                        })),
+                values.map(function (val, index) {
+                    var percentage = getPercentage(val);
+                    return (React__default.createElement("div", { key: index, className: cn(mergedTheme.thumbStyle), style: {
+                            left: "".concat(percentage, "%"),
+                            transform: "translate(-50%, -50%)",
+                            position: "absolute",
+                            top: "50%",
+                        }, onPointerDown: function (e) { return handlePointerDown(e, index); }, onKeyDown: function (e) { return handleKeyDown(e, index); }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": val, "aria-orientation": "horizontal", "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (range ? "Slider thumb ".concat(index + 1) : "Slider"), "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby !== null && ariaDescribedby !== void 0 ? ariaDescribedby : helperTextId, tabIndex: isDisabled ? -1 : 0, "data-disabled": isDisabled || undefined, "data-invalid": isInvalid || undefined }));
+                }),
+                name && (React__default.createElement("input", { type: "hidden", name: name, value: Array.isArray(currentValue) ? currentValue.join(",") : currentValue }))),
+            showMinMax && React__default.createElement("span", { className: cn(mergedTheme.minMaxLabelStyle) }, max),
+            showValue && React__default.createElement("div", { className: cn(mergedTheme.valueDisplayStyle) }, formatValueDisplay()),
+            iconEnd && React__default.createElement("div", { className: "flex-shrink-0 text-[var(--color-text-muted)]" }, iconEnd)),
+        helperText && (React__default.createElement("div", { id: helperTextId, className: cn(mergedTheme.helperTextStyle, helperTextClassName) }, helperText))));
+});
+Slider.displayName = "Slider";
+
+export { Slider };

package/dist/components/forms/Slider/Slider.theme.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Default theme for the Slider component
+ * Uses flat structure with data-attribute selectors following shadcn pattern
+ */
+export interface SliderTheme {
+    wrapperStyle: string;
+    labelStyle: string;
+    helperTextStyle: string;
+    rootStyle: string;
+    trackStyle: string;
+    rangeStyle: string;
+    thumbStyle: string;
+    valueDisplayStyle: string;
+    minMaxLabelStyle: string;
+    tickStyle: string;
+}
+export declare const sliderTheme: SliderTheme;

package/dist/components/forms/Slider/Slider.theme.js

@@ -0,0 +1,26 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+var sliderTheme = {
+    // Wrapper styles
+    wrapperStyle: formsBaseTheme.wrapperStyle,
+    // Label styles
+    labelStyle: "block text-sm font-medium text-[var(--color-text-primary)] mb-2",
+    // Helper text styles
+    helperTextStyle: formsBaseTheme.helperText,
+    // Root container with layout
+    rootStyle: "relative flex items-center w-full touch-none select-none data-[orientation=vertical]:flex-col data-[orientation=vertical]:h-full",
+    // Track (background)
+    trackStyle: "relative w-full h-2 grow rounded-full bg-neutral-200 overflow-hidden data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full",
+    // Range (filled portion) - rounded to match track clipping
+    rangeStyle: "absolute h-full bg-gradient-to-r from-[var(--color-primary-500)] to-[var(--color-primary-700)] transition-all rounded-full data-[disabled]:bg-[var(--color-background-disabled)] data-[invalid]:bg-[var(--color-danger)]",
+    // Thumb (draggable handle)
+    thumbStyle: "block size-4 rounded-full bg-white border-2 border-[var(--color-primary)] ring-2 ring-white shadow-sm cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 transition-all hover:scale-110 disabled:cursor-not-allowed disabled:bg-[var(--color-background-disabled)] disabled:hover:scale-100 data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-background-disabled)] data-[disabled]:border-[var(--color-border)] data-[disabled]:hover:scale-100 data-[invalid]:border-[var(--color-danger)] data-[invalid]:focus-visible:ring-[var(--color-danger)]",
+    // Value display
+    valueDisplayStyle: "text-sm font-medium text-[var(--color-text-secondary)] w-fit min-w-12",
+    // Min/max labels
+    minMaxLabelStyle: "text-sm font-medium text-[var(--color-text-muted)]",
+    // Tick marks
+    tickStyle: "absolute w-0.5 h-2 bg-white/60 -translate-x-0.5 pointer-events-none",
+};
+
+export { sliderTheme };