@raydenui/ui 0.9.6 → 0.10.0

package/dist/components/Slider/Slider.cjs

@@ -0,0 +1,161 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeSlider = exports.Slider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+const sizeConfig = {
+    sm: { track: "h-1", handle: "size-3.5", handleSize: 14, border: "border-[2.333px]" },
+    md: { track: "h-2", handle: "size-4", handleSize: 16, border: "border-[2.667px]" },
+    lg: { track: "h-3", handle: "size-5", handleSize: 20, border: "border-[3.333px]" },
+};
+/* ─── Utilities ────────────────────────────────────────────────────────── */
+function clamp(val, min, max) {
+    return Math.min(max, Math.max(min, val));
+}
+function getPercent(val, min, max) {
+    return max > min ? ((val - min) / (max - min)) * 100 : 0;
+}
+function snapValue(value, min, max, step) {
+    const increment = step > 0 ? step : 1;
+    return clamp(Number((min + Math.round((value - min) / increment) * increment).toFixed(10)), min, max);
+}
+function getValueFromPosition(clientX, rect, min, max, step) {
+    const pct = clamp((clientX - rect.left) / rect.width, 0, 1);
+    const raw = min + pct * (max - min);
+    return snapValue(raw, min, max, step);
+}
+function keyboardValue(key, value, min, max, step) {
+    const delta = step > 0 ? step : 1;
+    switch (key) {
+        case "ArrowRight":
+        case "ArrowUp":
+            return clamp(value + delta, min, max);
+        case "ArrowLeft":
+        case "ArrowDown":
+            return clamp(value - delta, min, max);
+        case "PageUp":
+            return clamp(value + delta * 10, min, max);
+        case "PageDown":
+            return clamp(value - delta * 10, min, max);
+        case "Home":
+            return min;
+        case "End":
+            return max;
+        default:
+            return null;
+    }
+}
+/* ─── Slider ───────────────────────────────────────────────────────────── */
+exports.Slider = (0, react_1.forwardRef)(({ value: controlledValue, onChange, size = "lg", label, metadata, showPercentage = true, min = 0, max = 100, step = 1, disabled = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => {
+    const [uncontrolled, setUncontrolled] = (0, react_1.useState)(min);
+    const val = clamp(controlledValue ?? uncontrolled, min, max);
+    const labelId = (0, react_1.useId)();
+    const trackRef = (0, react_1.useRef)(null);
+    const config = sizeConfig[size];
+    const pct = getPercent(val, min, max);
+    const metaItems = Array.isArray(metadata) ? metadata : metadata ? [metadata] : [];
+    const updateValue = (0, react_1.useCallback)((clientX) => {
+        if (disabled || !trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(clientX, rect, min, max, step);
+        if (controlledValue === undefined)
+            setUncontrolled(v);
+        onChange?.(v);
+    }, [disabled, min, max, step, controlledValue, onChange]);
+    const handlePointerDown = (0, react_1.useCallback)((e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        e.currentTarget.focus();
+        updateValue(e.clientX);
+    }, [disabled, updateValue]);
+    const handlePointerMove = (0, react_1.useCallback)((e) => {
+        if (disabled || !e.buttons)
+            return;
+        updateValue(e.clientX);
+    }, [disabled, updateValue]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col gap-2 w-full", disabled && "opacity-50", className), ...rest, children: [label && ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label })), (0, jsx_runtime_1.jsxs)("div", { ref: trackRef, className: (0, cn_1.cn)("relative w-full h-11 touch-none cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", disabled && "cursor-not-allowed"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onKeyDown: (event) => {
+                    if (disabled)
+                        return;
+                    const next = keyboardValue(event.key, val, min, max, step);
+                    if (next === null)
+                        return;
+                    event.preventDefault();
+                    if (controlledValue === undefined)
+                        setUncontrolled(next);
+                    onChange?.(next);
+                }, "aria-label": ariaLabel ?? (!label && !ariaLabelledBy ? "Value" : undefined), "aria-labelledby": ariaLabelledBy ?? (label ? labelId : undefined), "aria-disabled": disabled || undefined, role: "slider", "aria-valuenow": val, "aria-valuemin": min, "aria-valuemax": max, tabIndex: disabled ? -1 : 0, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-full bg-grey-200", config.track) }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute left-0 top-1/2 -translate-y-1/2 rounded-full bg-action-primary", config.track), style: { width: `${pct}%` } }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute top-1/2 rounded-full bg-action-primary border-white border-solid shadow-sm", config.handle, config.border), style: { left: `${pct}%`, transform: `translate(-50%, -50%)` } })] }), (metaItems.length > 0 || showPercentage) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [metaItems.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-1 items-center gap-1", children: metaItems.map((item, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "contents", children: [i > 0 && (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-grey-500", children: "\u2022" }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: item })] }, i))) })), showPercentage && ((0, jsx_runtime_1.jsxs)("span", { className: "flex-1 text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [Math.round(pct), "%"] }))] }))] }));
+});
+exports.Slider.displayName = "Slider";
+/* ─── RangeSlider ──────────────────────────────────────────────────────── */
+exports.RangeSlider = (0, react_1.forwardRef)(({ value: controlledValue, onChange, size = "lg", label, showLabels = true, min = 0, max = 100, step = 1, disabled = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => {
+    const [uncontrolled, setUncontrolled] = (0, react_1.useState)(() => [
+        snapValue(min + (max - min) * 0.25, min, max, step),
+        snapValue(min + (max - min) * 0.75, min, max, step),
+    ]);
+    const rawValue = controlledValue ?? uncontrolled;
+    const val = (0, react_1.useMemo)(() => {
+        const low = clamp(rawValue[0], min, max);
+        return [low, clamp(rawValue[1], low, max)];
+    }, [rawValue, min, max]);
+    const labelId = (0, react_1.useId)();
+    const lowRef = (0, react_1.useRef)(null);
+    const highRef = (0, react_1.useRef)(null);
+    const trackRef = (0, react_1.useRef)(null);
+    const dragging = (0, react_1.useRef)(null);
+    const config = sizeConfig[size];
+    const lowPct = getPercent(val[0], min, max);
+    const highPct = getPercent(val[1], min, max);
+    const update = (0, react_1.useCallback)((newVal) => {
+        if (controlledValue === undefined)
+            setUncontrolled(newVal);
+        onChange?.(newVal);
+    }, [controlledValue, onChange]);
+    const handlePointerDown = (0, react_1.useCallback)((e) => {
+        if (disabled || !trackRef.current)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(e.clientX, rect, min, max, step);
+        const distLow = Math.abs(v - val[0]);
+        const distHigh = Math.abs(v - val[1]);
+        dragging.current =
+            e.target.closest("[data-thumb]")?.dataset.thumb || (distLow <= distHigh ? "low" : "high");
+        (dragging.current === "low" ? lowRef : highRef).current?.focus();
+        if (dragging.current === "low") {
+            update([clamp(v, min, val[1]), val[1]]);
+        }
+        else {
+            update([val[0], clamp(v, val[0], max)]);
+        }
+    }, [disabled, min, max, step, val, update]);
+    const handlePointerMove = (0, react_1.useCallback)((e) => {
+        if (disabled || !e.buttons || !trackRef.current || !dragging.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(e.clientX, rect, min, max, step);
+        if (dragging.current === "low") {
+            update([clamp(v, min, val[1]), val[1]]);
+        }
+        else {
+            update([val[0], clamp(v, val[0], max)]);
+        }
+    }, [disabled, min, max, step, val, update]);
+    const handlePointerUp = (0, react_1.useCallback)(() => {
+        dragging.current = null;
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col gap-2 w-full", disabled && "opacity-50", className), ...rest, children: [label && ((0, jsx_runtime_1.jsx)("span", { id: labelId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label })), (0, jsx_runtime_1.jsxs)("div", { ref: trackRef, className: (0, cn_1.cn)("relative w-full h-11 touch-none cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", disabled && "cursor-not-allowed"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-full bg-grey-200", config.track) }), (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("absolute top-1/2 -translate-y-1/2 rounded-full bg-action-primary", config.track), style: { left: `${lowPct}%`, width: `${highPct - lowPct}%` } }), ["low", "high"].map((thumb, index) => ((0, jsx_runtime_1.jsx)("div", { ref: thumb === "low" ? lowRef : highRef, "data-thumb": thumb, role: "slider", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-label": `${ariaLabel ?? label ?? "Range"} ${index === 0 ? "minimum" : "maximum"}`, "aria-describedby": ariaLabelledBy, "aria-valuenow": val[index], "aria-valuemin": index === 0 ? min : val[0], "aria-valuemax": index === 0 ? val[1] : max, onKeyDown: (event) => {
+                            if (disabled)
+                                return;
+                            const next = keyboardValue(event.key, val[index], index === 0 ? min : val[0], index === 0 ? val[1] : max, step);
+                            if (next === null)
+                                return;
+                            event.preventDefault();
+                            update(index === 0 ? [next, val[1]] : [val[0], next]);
+                        }, className: "absolute top-1/2 size-11 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-action-primary-text", style: { left: `${index === 0 ? lowPct : highPct}%` }, children: (0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("rounded-full bg-action-primary border-white border-solid shadow-sm", config.handle, config.border) }) }, thumb)))] }), showLabels && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: [Math.round(getPercent(val[0], min, max)), "%"] }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [Math.round(getPercent(val[1], min, max)), "%"] })] }))] }));
+});
+exports.RangeSlider.displayName = "RangeSlider";

package/dist/components/Slider/Slider.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback, useId, useMemo, useRef, useState, } from "react";
+import { cn } from "../../utils/cn.js";
+const sizeConfig = {
+    sm: { track: "h-1", handle: "size-3.5", handleSize: 14, border: "border-[2.333px]" },
+    md: { track: "h-2", handle: "size-4", handleSize: 16, border: "border-[2.667px]" },
+    lg: { track: "h-3", handle: "size-5", handleSize: 20, border: "border-[3.333px]" },
+};
+/* ─── Utilities ────────────────────────────────────────────────────────── */
+function clamp(val, min, max) {
+    return Math.min(max, Math.max(min, val));
+}
+function getPercent(val, min, max) {
+    return max > min ? ((val - min) / (max - min)) * 100 : 0;
+}
+function snapValue(value, min, max, step) {
+    const increment = step > 0 ? step : 1;
+    return clamp(Number((min + Math.round((value - min) / increment) * increment).toFixed(10)), min, max);
+}
+function getValueFromPosition(clientX, rect, min, max, step) {
+    const pct = clamp((clientX - rect.left) / rect.width, 0, 1);
+    const raw = min + pct * (max - min);
+    return snapValue(raw, min, max, step);
+}
+function keyboardValue(key, value, min, max, step) {
+    const delta = step > 0 ? step : 1;
+    switch (key) {
+        case "ArrowRight":
+        case "ArrowUp":
+            return clamp(value + delta, min, max);
+        case "ArrowLeft":
+        case "ArrowDown":
+            return clamp(value - delta, min, max);
+        case "PageUp":
+            return clamp(value + delta * 10, min, max);
+        case "PageDown":
+            return clamp(value - delta * 10, min, max);
+        case "Home":
+            return min;
+        case "End":
+            return max;
+        default:
+            return null;
+    }
+}
+/* ─── Slider ───────────────────────────────────────────────────────────── */
+export const Slider = forwardRef(({ value: controlledValue, onChange, size = "lg", label, metadata, showPercentage = true, min = 0, max = 100, step = 1, disabled = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => {
+    const [uncontrolled, setUncontrolled] = useState(min);
+    const val = clamp(controlledValue ?? uncontrolled, min, max);
+    const labelId = useId();
+    const trackRef = useRef(null);
+    const config = sizeConfig[size];
+    const pct = getPercent(val, min, max);
+    const metaItems = Array.isArray(metadata) ? metadata : metadata ? [metadata] : [];
+    const updateValue = useCallback((clientX) => {
+        if (disabled || !trackRef.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(clientX, rect, min, max, step);
+        if (controlledValue === undefined)
+            setUncontrolled(v);
+        onChange?.(v);
+    }, [disabled, min, max, step, controlledValue, onChange]);
+    const handlePointerDown = useCallback((e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        e.currentTarget.focus();
+        updateValue(e.clientX);
+    }, [disabled, updateValue]);
+    const handlePointerMove = useCallback((e) => {
+        if (disabled || !e.buttons)
+            return;
+        updateValue(e.clientX);
+    }, [disabled, updateValue]);
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col gap-2 w-full", disabled && "opacity-50", className), ...rest, children: [label && (_jsx("span", { id: labelId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label })), _jsxs("div", { ref: trackRef, className: cn("relative w-full h-11 touch-none cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", disabled && "cursor-not-allowed"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onKeyDown: (event) => {
+                    if (disabled)
+                        return;
+                    const next = keyboardValue(event.key, val, min, max, step);
+                    if (next === null)
+                        return;
+                    event.preventDefault();
+                    if (controlledValue === undefined)
+                        setUncontrolled(next);
+                    onChange?.(next);
+                }, "aria-label": ariaLabel ?? (!label && !ariaLabelledBy ? "Value" : undefined), "aria-labelledby": ariaLabelledBy ?? (label ? labelId : undefined), "aria-disabled": disabled || undefined, role: "slider", "aria-valuenow": val, "aria-valuemin": min, "aria-valuemax": max, tabIndex: disabled ? -1 : 0, children: [_jsx("div", { className: cn("absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-full bg-grey-200", config.track) }), _jsx("div", { className: cn("absolute left-0 top-1/2 -translate-y-1/2 rounded-full bg-action-primary", config.track), style: { width: `${pct}%` } }), _jsx("div", { className: cn("absolute top-1/2 rounded-full bg-action-primary border-white border-solid shadow-sm", config.handle, config.border), style: { left: `${pct}%`, transform: `translate(-50%, -50%)` } })] }), (metaItems.length > 0 || showPercentage) && (_jsxs("div", { className: "flex items-center justify-between", children: [metaItems.length > 0 && (_jsx("div", { className: "flex flex-1 items-center gap-1", children: metaItems.map((item, i) => (_jsxs("span", { className: "contents", children: [i > 0 && _jsx("span", { className: "text-xs text-grey-500", children: "\u2022" }), _jsx("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: item })] }, i))) })), showPercentage && (_jsxs("span", { className: "flex-1 text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [Math.round(pct), "%"] }))] }))] }));
+});
+Slider.displayName = "Slider";
+/* ─── RangeSlider ──────────────────────────────────────────────────────── */
+export const RangeSlider = forwardRef(({ value: controlledValue, onChange, size = "lg", label, showLabels = true, min = 0, max = 100, step = 1, disabled = false, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }, ref) => {
+    const [uncontrolled, setUncontrolled] = useState(() => [
+        snapValue(min + (max - min) * 0.25, min, max, step),
+        snapValue(min + (max - min) * 0.75, min, max, step),
+    ]);
+    const rawValue = controlledValue ?? uncontrolled;
+    const val = useMemo(() => {
+        const low = clamp(rawValue[0], min, max);
+        return [low, clamp(rawValue[1], low, max)];
+    }, [rawValue, min, max]);
+    const labelId = useId();
+    const lowRef = useRef(null);
+    const highRef = useRef(null);
+    const trackRef = useRef(null);
+    const dragging = useRef(null);
+    const config = sizeConfig[size];
+    const lowPct = getPercent(val[0], min, max);
+    const highPct = getPercent(val[1], min, max);
+    const update = useCallback((newVal) => {
+        if (controlledValue === undefined)
+            setUncontrolled(newVal);
+        onChange?.(newVal);
+    }, [controlledValue, onChange]);
+    const handlePointerDown = useCallback((e) => {
+        if (disabled || !trackRef.current)
+            return;
+        e.preventDefault();
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(e.clientX, rect, min, max, step);
+        const distLow = Math.abs(v - val[0]);
+        const distHigh = Math.abs(v - val[1]);
+        dragging.current =
+            e.target.closest("[data-thumb]")?.dataset.thumb || (distLow <= distHigh ? "low" : "high");
+        (dragging.current === "low" ? lowRef : highRef).current?.focus();
+        if (dragging.current === "low") {
+            update([clamp(v, min, val[1]), val[1]]);
+        }
+        else {
+            update([val[0], clamp(v, val[0], max)]);
+        }
+    }, [disabled, min, max, step, val, update]);
+    const handlePointerMove = useCallback((e) => {
+        if (disabled || !e.buttons || !trackRef.current || !dragging.current)
+            return;
+        const rect = trackRef.current.getBoundingClientRect();
+        const v = getValueFromPosition(e.clientX, rect, min, max, step);
+        if (dragging.current === "low") {
+            update([clamp(v, min, val[1]), val[1]]);
+        }
+        else {
+            update([val[0], clamp(v, val[0], max)]);
+        }
+    }, [disabled, min, max, step, val, update]);
+    const handlePointerUp = useCallback(() => {
+        dragging.current = null;
+    }, []);
+    return (_jsxs("div", { ref: ref, className: cn("flex flex-col gap-2 w-full", disabled && "opacity-50", className), ...rest, children: [label && (_jsx("span", { id: labelId, className: "text-sm font-medium text-grey-900 leading-[1.45]", children: label })), _jsxs("div", { ref: trackRef, className: cn("relative w-full h-11 touch-none cursor-pointer rounded-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-action-primary-text", disabled && "cursor-not-allowed"), onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, children: [_jsx("div", { className: cn("absolute inset-x-0 top-1/2 -translate-y-1/2 rounded-full bg-grey-200", config.track) }), _jsx("div", { className: cn("absolute top-1/2 -translate-y-1/2 rounded-full bg-action-primary", config.track), style: { left: `${lowPct}%`, width: `${highPct - lowPct}%` } }), ["low", "high"].map((thumb, index) => (_jsx("div", { ref: thumb === "low" ? lowRef : highRef, "data-thumb": thumb, role: "slider", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, "aria-label": `${ariaLabel ?? label ?? "Range"} ${index === 0 ? "minimum" : "maximum"}`, "aria-describedby": ariaLabelledBy, "aria-valuenow": val[index], "aria-valuemin": index === 0 ? min : val[0], "aria-valuemax": index === 0 ? val[1] : max, onKeyDown: (event) => {
+                            if (disabled)
+                                return;
+                            const next = keyboardValue(event.key, val[index], index === 0 ? min : val[0], index === 0 ? val[1] : max, step);
+                            if (next === null)
+                                return;
+                            event.preventDefault();
+                            update(index === 0 ? [next, val[1]] : [val[0], next]);
+                        }, className: "absolute top-1/2 size-11 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center rounded-full focus-visible:outline-2 focus-visible:outline-action-primary-text", style: { left: `${index === 0 ? lowPct : highPct}%` }, children: _jsx("div", { className: cn("rounded-full bg-action-primary border-white border-solid shadow-sm", config.handle, config.border) }) }, thumb)))] }), showLabels && (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm font-medium text-grey-500 leading-[1.45]", children: [Math.round(getPercent(val[0], min, max)), "%"] }), _jsxs("span", { className: "text-sm font-semibold text-grey-500 text-right leading-[1.45]", children: [Math.round(getPercent(val[1], min, max)), "%"] })] }))] }));
+});
+RangeSlider.displayName = "RangeSlider";

package/dist/components/Slider/index.cjs

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RangeSlider = exports.Slider = void 0;
+var Slider_1 = require("./Slider.cjs");
+Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+Object.defineProperty(exports, "RangeSlider", { enumerable: true, get: function () { return Slider_1.RangeSlider; } });

package/dist/components/Slider/index.js

@@ -0,0 +1 @@
+export { Slider, RangeSlider } from "./Slider.js";

package/dist/components/Spinner/Spinner.cjs

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+/* ─── Size Config ──────────────────────────────────────────────────────── */
+const sizeMap = {
+    xs: 20,
+    sm: 24,
+    md: 32,
+    lg: 40,
+    xl: 48,
+    "2xl": 56,
+    "3xl": 64,
+};
+/* ─── Spinner SVGs ─────────────────────────────────────────────────────── */
+function ThinSpinner({ size, color }) {
+    const r = size / 2 - 2;
+    const c = size / 2;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [(0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }), (0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })] }));
+}
+function BoldSpinner({ size, color }) {
+    const sw = Math.max(2.5, size * 0.1);
+    const r = size / 2 - sw;
+    const c = size / 2;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [(0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }), (0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })] }));
+}
+function DuoToneSpinner({ size, color }) {
+    const sw = Math.max(2, size * 0.08);
+    const r = size / 2 - sw;
+    const c = size / 2;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [(0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.15, className: color }), (0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI} ${r * Math.PI}`, strokeLinecap: "round", className: color })] }));
+}
+function BufferingThinSpinner({ size, color }) {
+    const r = size / 2 - 2;
+    const c = size / 2;
+    const circumference = 2 * Math.PI * r;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [(0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }), (0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", className: (0, cn_1.cn)(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })] }));
+}
+function BufferingBoldSpinner({ size, color }) {
+    const sw = Math.max(2.5, size * 0.1);
+    const r = size / 2 - sw;
+    const c = size / 2;
+    const circumference = 2 * Math.PI * r;
+    return ((0, jsx_runtime_1.jsxs)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [(0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }), (0, jsx_runtime_1.jsx)("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", className: (0, cn_1.cn)(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })] }));
+}
+function DotSpinner({ size, color }) {
+    const dotSize = Math.max(3, size * 0.15);
+    const c = size / 2;
+    const r = size / 2 - dotSize;
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => {
+            const angle = (i * 45 * Math.PI) / 180;
+            const x = c + r * Math.cos(angle);
+            const y = c + r * Math.sin(angle);
+            return ((0, jsx_runtime_1.jsx)("circle", { cx: x, cy: y, r: dotSize / 2, fill: "currentColor", opacity: 0.15 + (i / 8) * 0.85, className: color }, i));
+        }) }));
+}
+function JugglingSpinner({ size, color }) {
+    const dotSize = Math.max(3, size * 0.18);
+    return ((0, jsx_runtime_1.jsx)("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [0, 1, 2].map((i) => {
+            const cx = size / 2 + (i - 1) * (size * 0.35);
+            return ((0, jsx_runtime_1.jsx)("circle", { cx: cx, cy: size / 2, r: dotSize / 2, fill: "currentColor", className: (0, cn_1.cn)(color, "animate-[juggle_1.4s_ease-in-out_infinite]"), style: { animationDelay: `${i * 0.16}s` } }, i));
+        }) }));
+}
+/* ─── Spinner Component ────────────────────────────────────────────────── */
+exports.Spinner = (0, react_1.forwardRef)(({ type = "thin", size = "md", colorStyle = "brand", label, labelPosition = "after", className, ...rest }, ref) => {
+    const px = sizeMap[size];
+    const color = colorStyle === "brand" ? "text-primary-400" : "text-white";
+    const labelColor = colorStyle === "brand" ? "text-grey-900" : "text-white";
+    const spinnerEl = (() => {
+        switch (type) {
+            case "thin":
+                return (0, jsx_runtime_1.jsx)(ThinSpinner, { size: px, color: color });
+            case "bold":
+                return (0, jsx_runtime_1.jsx)(BoldSpinner, { size: px, color: color });
+            case "duo-tone":
+                return (0, jsx_runtime_1.jsx)(DuoToneSpinner, { size: px, color: color });
+            case "buffering-thin":
+                return (0, jsx_runtime_1.jsx)(BufferingThinSpinner, { size: px, color: color });
+            case "buffering-bold":
+                return (0, jsx_runtime_1.jsx)(BufferingBoldSpinner, { size: px, color: color });
+            case "dot":
+                return (0, jsx_runtime_1.jsx)(DotSpinner, { size: px, color: color });
+            case "juggling":
+                return (0, jsx_runtime_1.jsx)(JugglingSpinner, { size: px, color: color });
+        }
+    })();
+    const isVertical = labelPosition === "above" || labelPosition === "below";
+    const isReversed = labelPosition === "before" || labelPosition === "above";
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, role: "status", "aria-label": label || "Loading", "data-rayden-spinner": "", className: (0, cn_1.cn)("inline-flex items-center gap-2", isVertical && "flex-col", isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"), className), ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "shrink-0", style: { width: px, height: px }, children: spinnerEl }), label && ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-sm leading-[1.45] whitespace-nowrap", labelColor), children: label }))] }));
+});
+exports.Spinner.displayName = "Spinner";

package/dist/components/Spinner/Spinner.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../utils/cn.js";
+/* ─── Size Config ──────────────────────────────────────────────────────── */
+const sizeMap = {
+    xs: 20,
+    sm: 24,
+    md: 32,
+    lg: 40,
+    xl: 48,
+    "2xl": 56,
+    "3xl": 64,
+};
+/* ─── Spinner SVGs ─────────────────────────────────────────────────────── */
+function ThinSpinner({ size, color }) {
+    const r = size / 2 - 2;
+    const c = size / 2;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [_jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }), _jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })] }));
+}
+function BoldSpinner({ size, color }) {
+    const sw = Math.max(2.5, size * 0.1);
+    const r = size / 2 - sw;
+    const c = size / 2;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [_jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }), _jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI * 0.75} ${r * Math.PI * 1.25}`, strokeLinecap: "round", className: color })] }));
+}
+function DuoToneSpinner({ size, color }) {
+    const sw = Math.max(2, size * 0.08);
+    const r = size / 2 - sw;
+    const c = size / 2;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [_jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.15, className: color }), _jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeDasharray: `${r * Math.PI} ${r * Math.PI}`, strokeLinecap: "round", className: color })] }));
+}
+function BufferingThinSpinner({ size, color }) {
+    const r = size / 2 - 2;
+    const c = size / 2;
+    const circumference = 2 * Math.PI * r;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, opacity: 0.2, className: color }), _jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })] }));
+}
+function BufferingBoldSpinner({ size, color }) {
+    const sw = Math.max(2.5, size * 0.1);
+    const r = size / 2 - sw;
+    const c = size / 2;
+    const circumference = 2 * Math.PI * r;
+    return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, opacity: 0.2, className: color }), _jsx("circle", { cx: c, cy: c, r: r, fill: "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", className: cn(color, "animate-[spinner-dash_1.5s_ease-in-out_infinite]"), style: { strokeDasharray: circumference, transformOrigin: "center" } })] }));
+}
+function DotSpinner({ size, color }) {
+    const dotSize = Math.max(3, size * 0.15);
+    const c = size / 2;
+    const r = size / 2 - dotSize;
+    return (_jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, className: "animate-spin", children: [0, 1, 2, 3, 4, 5, 6, 7].map((i) => {
+            const angle = (i * 45 * Math.PI) / 180;
+            const x = c + r * Math.cos(angle);
+            const y = c + r * Math.sin(angle);
+            return (_jsx("circle", { cx: x, cy: y, r: dotSize / 2, fill: "currentColor", opacity: 0.15 + (i / 8) * 0.85, className: color }, i));
+        }) }));
+}
+function JugglingSpinner({ size, color }) {
+    const dotSize = Math.max(3, size * 0.18);
+    return (_jsx("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [0, 1, 2].map((i) => {
+            const cx = size / 2 + (i - 1) * (size * 0.35);
+            return (_jsx("circle", { cx: cx, cy: size / 2, r: dotSize / 2, fill: "currentColor", className: cn(color, "animate-[juggle_1.4s_ease-in-out_infinite]"), style: { animationDelay: `${i * 0.16}s` } }, i));
+        }) }));
+}
+/* ─── Spinner Component ────────────────────────────────────────────────── */
+export const Spinner = forwardRef(({ type = "thin", size = "md", colorStyle = "brand", label, labelPosition = "after", className, ...rest }, ref) => {
+    const px = sizeMap[size];
+    const color = colorStyle === "brand" ? "text-primary-400" : "text-white";
+    const labelColor = colorStyle === "brand" ? "text-grey-900" : "text-white";
+    const spinnerEl = (() => {
+        switch (type) {
+            case "thin":
+                return _jsx(ThinSpinner, { size: px, color: color });
+            case "bold":
+                return _jsx(BoldSpinner, { size: px, color: color });
+            case "duo-tone":
+                return _jsx(DuoToneSpinner, { size: px, color: color });
+            case "buffering-thin":
+                return _jsx(BufferingThinSpinner, { size: px, color: color });
+            case "buffering-bold":
+                return _jsx(BufferingBoldSpinner, { size: px, color: color });
+            case "dot":
+                return _jsx(DotSpinner, { size: px, color: color });
+            case "juggling":
+                return _jsx(JugglingSpinner, { size: px, color: color });
+        }
+    })();
+    const isVertical = labelPosition === "above" || labelPosition === "below";
+    const isReversed = labelPosition === "before" || labelPosition === "above";
+    return (_jsxs("div", { ref: ref, role: "status", "aria-label": label || "Loading", "data-rayden-spinner": "", className: cn("inline-flex items-center gap-2", isVertical && "flex-col", isReversed && (isVertical ? "flex-col-reverse" : "flex-row-reverse"), className), ...rest, children: [_jsx("div", { className: "shrink-0", style: { width: px, height: px }, children: spinnerEl }), label && (_jsx("span", { className: cn("text-sm leading-[1.45] whitespace-nowrap", labelColor), children: label }))] }));
+});
+Spinner.displayName = "Spinner";

package/dist/components/Spinner/index.cjs

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spinner = void 0;
+var Spinner_1 = require("./Spinner.cjs");
+Object.defineProperty(exports, "Spinner", { enumerable: true, get: function () { return Spinner_1.Spinner; } });

package/dist/components/Spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner.js";

package/dist/components/Stepper/Stepper.cjs

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedStepper = exports.LinearStepper = exports.Stepper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const cn_1 = require("../../utils/cn.cjs");
+/* ─── Icons ────────────────────────────────────────────────────────────── */
+function CheckIcon({ className }) {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M5 12l5 5L20 7" }) }));
+}
+/* ─── Step Indicator Circle ────────────────────────────────────────────── */
+const statusText = {
+    completed: "Completed",
+    active: "Current step",
+    incomplete: "Not started",
+    disabled: "Unavailable",
+};
+function StepCircle({ status, indicator, stepNumber, icon, }) {
+    const isCompleted = status === "completed";
+    const isActive = status === "active";
+    const isDisabled = status === "disabled";
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)("shrink-0 flex items-center justify-center rounded-full size-6 border transition-colors", isCompleted && "bg-action-primary border-action-primary text-white", isActive && "bg-primary-50 border-primary-400 text-action-primary-text", !isCompleted && !isActive && !isDisabled && "bg-surface border-grey-300", isDisabled && "bg-grey-100 border-grey-200 text-grey-300"), children: [(0, jsx_runtime_1.jsx)("span", { className: "sr-only", children: statusText[status] }), isCompleted ? ((icon ?? (0, jsx_runtime_1.jsx)(CheckIcon, { className: "size-3.5" }))) : indicator === "dot" ? ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("size-2 rounded-full border", isActive
+                    ? "bg-primary-400 border-primary-400"
+                    : isDisabled
+                        ? "bg-grey-300 border-grey-300"
+                        : "bg-grey-400 border-grey-300") })) : indicator === "number" ? ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-xs font-medium", isActive ? "text-primary-400" : isDisabled ? "text-grey-300" : "text-on-surface-muted"), children: stepNumber })) : ((icon ?? ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("size-2 rounded-full", isActive ? "bg-primary-400" : isDisabled ? "bg-grey-300" : "bg-grey-400") }))))] }));
+}
+/* ─── Connector Line ───────────────────────────────────────────────────── */
+function Connector({ orientation, completed, }) {
+    return orientation === "horizontal" ? ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex-1 h-0.5 rounded-full", completed ? "bg-primary-400" : "bg-grey-300") })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("w-0.5 flex-1 min-h-[20px] ml-[11px] rounded-full", completed ? "bg-primary-400" : "bg-grey-300") }));
+}
+/* ─── Stepper ──────────────────────────────────────────────────────────── */
+function resolveStatuses(steps, activeStep) {
+    if (activeStep !== undefined) {
+        return steps.map((s, i) => {
+            if (s.status === "disabled")
+                return "disabled";
+            if (i < activeStep)
+                return "completed";
+            if (i === activeStep)
+                return "active";
+            return "incomplete";
+        });
+    }
+    return steps.map((s) => s.status ?? "incomplete");
+}
+exports.Stepper = (0, react_1.forwardRef)(({ steps, activeStep, orientation = "horizontal", indicator = "dot", className, ...rest }, ref) => {
+    const statuses = resolveStatuses(steps, activeStep);
+    if (orientation === "vertical") {
+        return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col", className), ...rest, children: steps.map((step, i) => {
+                const status = statuses[i];
+                const isLast = i === steps.length - 1;
+                return ((0, jsx_runtime_1.jsxs)("div", { className: "flex gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center", children: [(0, jsx_runtime_1.jsx)(StepCircle, { status: status, indicator: indicator, stepNumber: i + 1, icon: step.icon }), !isLast && ((0, jsx_runtime_1.jsx)(Connector, { orientation: "vertical", completed: status === "completed" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col pb-6", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-sm font-medium leading-[1.45]", status === "active"
+                                        ? "text-on-surface"
+                                        : status === "disabled"
+                                            ? "text-grey-300"
+                                            : "text-on-surface-secondary"), children: step.title }), step.description && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-on-surface-muted leading-[1.45]", children: step.description }))] })] }, i));
+            }) }));
+    }
+    // Horizontal
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: (0, cn_1.cn)("flex items-start w-full", className), ...rest, children: steps.map((step, i) => {
+            const status = statuses[i];
+            const isLast = i === steps.length - 1;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col flex-1 items-center gap-2.5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1 w-full", children: [(0, jsx_runtime_1.jsx)(Connector, { orientation: "horizontal", completed: i > 0 && statuses[i - 1] === "completed" }), (0, jsx_runtime_1.jsx)(StepCircle, { status: status, indicator: indicator, stepNumber: i + 1, icon: step.icon }), (0, jsx_runtime_1.jsx)(Connector, { orientation: "horizontal", completed: !isLast && status === "completed" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col gap-0.5 text-center w-full", children: [(0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)("text-xs font-medium leading-[1.45] tracking-tight", status === "active"
+                                    ? "text-on-surface-body"
+                                    : status === "disabled"
+                                        ? "text-grey-300"
+                                        : "text-on-surface-secondary"), children: step.title }), step.description && ((0, jsx_runtime_1.jsx)("span", { className: "text-xs text-on-surface-muted leading-[1.45] truncate", children: step.description }))] })] }, i));
+        }) }));
+});
+exports.Stepper.displayName = "Stepper";
+/* ─── LinearStepper ────────────────────────────────────────────────────── */
+exports.LinearStepper = (0, react_1.forwardRef)(({ currentStep, totalSteps, showLabel = true, className, ...rest }, ref) => {
+    const pct = Math.min(100, Math.max(0, (currentStep / totalSteps) * 100));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col gap-2 w-full", className), ...rest, children: [showLabel && ((0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-semibold leading-[1.45]", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-on-surface", children: currentStep }), (0, jsx_runtime_1.jsxs)("span", { className: "text-on-surface-muted", children: [" / ", totalSteps, " complete"] })] })), (0, jsx_runtime_1.jsx)("div", { className: "bg-grey-200 rounded-full p-1 w-full overflow-hidden", role: "progressbar", "aria-valuenow": currentStep, "aria-valuemin": 0, "aria-valuemax": totalSteps, "aria-valuetext": `Step ${currentStep} of ${totalSteps}`, "aria-label": "Progress", children: (0, jsx_runtime_1.jsx)("div", { className: "h-2 bg-primary-400 rounded-[10px] transition-all duration-300", style: { width: `${pct}%` } }) })] }));
+});
+exports.LinearStepper.displayName = "LinearStepper";
+/* ─── SegmentedStepper ─────────────────────────────────────────────────── */
+exports.SegmentedStepper = (0, react_1.forwardRef)(({ currentStep, totalSteps, showLabel = true, className, ...rest }, ref) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, cn_1.cn)("flex flex-col gap-2 w-full", className), ...rest, children: [showLabel && ((0, jsx_runtime_1.jsxs)("p", { className: "text-sm font-semibold leading-[1.45]", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-on-surface", children: currentStep }), (0, jsx_runtime_1.jsxs)("span", { className: "text-on-surface-muted", children: [" / ", totalSteps, " complete"] })] })), (0, jsx_runtime_1.jsx)("div", { className: "bg-grey-200 rounded-full p-1 w-full overflow-hidden", role: "progressbar", "aria-valuenow": currentStep, "aria-valuemin": 0, "aria-valuemax": totalSteps, "aria-valuetext": `Step ${currentStep} of ${totalSteps}`, "aria-label": "Progress", children: (0, jsx_runtime_1.jsx)("div", { className: "flex gap-1 h-2 w-full", children: Array.from({ length: totalSteps }, (_, i) => ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)("flex-1 rounded-[14px] border border-grey-50 transition-colors", i < currentStep ? "bg-primary-400" : "bg-grey-50") }, i))) }) })] }));
+});
+exports.SegmentedStepper.displayName = "SegmentedStepper";