@stfrigerio/sito-template 0.1.83 → 0.1.85

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

@@ -27,7 +27,7 @@ export interface SliderConfig {
     };
     /** Custom size preset */
     size?: 'sm' | 'md' | 'lg';
-    /** Custom animations */
+    /** Reserved for future use */
     animations?: {
         duration?: number;
         bounceIntensity?: number;
@@ -50,7 +50,7 @@ export interface SliderProps {
     step?: number;
     /** Optional label */
     label?: string;
-    /** Show value display */
+    /** Show persistent value display below the track */
     showValue?: boolean;
     /** Custom value formatter */
     valueFormatter?: (value: number) => string;
@@ -68,7 +68,7 @@ export interface SliderProps {
     loading?: boolean;
     /** Color function for dynamic coloring */
     colorFunction?: (value: number) => string;
-    /** Tooltip configuration */
+    /** Show a tooltip above the thumb while dragging */
     showTooltip?: boolean;
     /** Custom tooltip content */
     tooltipContent?: (value: number) => string;
@@ -76,38 +76,10 @@ export interface SliderProps {
     soundConfig?: ComponentSoundConfig;
 }
 /**
- * Slider component - A beautiful, animated range input
+ * Slider component — responsive, accessible range input with a styled track, fill, and thumb.
  *
- * @component
- * @description
- * A highly customizable slider component with smooth Framer Motion animations,
- * dynamic coloring, custom labels, tooltips, and theme support. Perfect for
- * ratings, volume controls, progress indicators, or any numeric input.
- *
- * @example
- * // Basic usage
- * <Slider
- *   value={rating}
- *   onChange={setRating}
- *   min={1}
- *   max={10}
- *   showValue
- * />
- *
- * @example
- * // Rating slider with emojis
- * <Slider
- *   value={mood}
- *   onChange={setMood}
- *   min={1}
- *   max={5}
- *   labels={[
- *     { label: '😢', position: 'start' },
- *     { label: '😐', position: 50 },
- *     { label: '😊', position: 'end' }
- *   ]}
- *   colorFunction={(val) => `hsl(${val * 24}, 70%, 50%)`}
- * />
+ * The thumb is inset at the track endpoints so it never overflows. Drag state is tracked
+ * via pointer events (works on mouse, touch, and pen).
  */
-export declare function Slider({ value, onChange, min, max, step, label, showValue, valueFormatter, labels, config, disabled, className, style, loading, colorFunction, showTooltip, tooltipContent, soundConfig }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value, onChange, min, max, step, label, showValue, valueFormatter, labels, config, disabled, className, style, loading, colorFunction, showTooltip, tooltipContent, soundConfig, }: SliderProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Slider.d.ts.map

package/dist/components/atoms/Slider/Slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGlF;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IACzB,0BAA0B;IAC1B,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,UAAU,CAAC,EAAE;QACT,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACL;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,sDAAsD;IACtD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,SAAiB,EACjB,cAAc,EACd,MAAW,EACX,MAAW,EACX,QAAgB,EAChB,SAAc,EACd,KAAU,EACV,OAAe,EACf,aAAa,EACb,WAAmB,EACnB,cAAc,EACd,WAAW,EACd,EAAE,WAAW,2CA8Pb"}
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Slider/Slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAGlF;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,0BAA0B;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,YAAY;IACzB,0BAA0B;IAC1B,MAAM,CAAC,EAAE;QACL,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IACF,yBAAyB;IACzB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,8BAA8B;IAC9B,UAAU,CAAC,EAAE;QACT,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,eAAe,CAAC,EAAE,MAAM,CAAC;KAC5B,CAAC;CACL;AAED;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,sDAAsD;IACtD,MAAM,CAAC,EAAE,WAAW,EAAE,CAAC;IACvB,mCAAmC;IACnC,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC1C,oDAAoD;IACpD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,6BAA6B;IAC7B,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,2CAA2C;IAC3C,WAAW,CAAC,EAAE,oBAAoB,CAAC;CACtC;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,GAAO,EACP,GAAS,EACT,IAAQ,EACR,KAAK,EACL,SAAiB,EACjB,cAAc,EACd,MAAW,EACX,MAAW,EACX,QAAgB,EAChB,SAAc,EACd,KAAU,EACV,OAAe,EACf,aAAa,EACb,WAAmB,EACnB,cAAc,EACd,WAAW,GACd,EAAE,WAAW,2CAyJb"}

package/dist/index.esm.js

@@ -1712,66 +1712,31 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
         }, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsx(motion.div, { className: styles$p.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$p.content, children: [icon && (jsx(motion.div, { className: styles$p.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$p.icon, children: icon })) : (jsx("div", { className: styles$p.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$p.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$p.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
 };
 
-var styles$o = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
+var styles$o = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","dragging":"Slider-module_dragging__rynPv","fill":"Slider-module_fill__AYR4-","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
 
 /**
- * Slider component - A beautiful, animated range input
+ * Slider component — responsive, accessible range input with a styled track, fill, and thumb.
  *
- * @component
- * @description
- * A highly customizable slider component with smooth Framer Motion animations,
- * dynamic coloring, custom labels, tooltips, and theme support. Perfect for
- * ratings, volume controls, progress indicators, or any numeric input.
- *
- * @example
- * // Basic usage
- * <Slider
- *   value={rating}
- *   onChange={setRating}
- *   min={1}
- *   max={10}
- *   showValue
- * />
- *
- * @example
- * // Rating slider with emojis
- * <Slider
- *   value={mood}
- *   onChange={setMood}
- *   min={1}
- *   max={5}
- *   labels={[
- *     { label: '😢', position: 'start' },
- *     { label: '😐', position: 50 },
- *     { label: '😊', position: 'end' }
- *   ]}
- *   colorFunction={(val) => `hsl(${val * 24}, 70%, 50%)`}
- * />
+ * The thumb is inset at the track endpoints so it never overflows. Drag state is tracked
+ * via pointer events (works on mouse, touch, and pen).
  */
-function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValue = false, valueFormatter, labels = [], config = {}, disabled = false, className = '', style = {}, loading = false, colorFunction, showTooltip = false, tooltipContent, soundConfig }) {
+function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValue = false, valueFormatter, labels = [], config = {}, disabled = false, className = '', style = {}, loading = false, colorFunction, showTooltip = false, tooltipContent, soundConfig, }) {
     const { handlers, playSound } = useComponentSound(soundConfig);
     const [isDragging, setIsDragging] = useState(false);
-    const [showTooltipState, setShowTooltipState] = useState(false);
-    const sliderRef = useRef(null);
-    const { colors = {}, size = 'md', animations = {} } = config;
-    const { duration = 0.2 } = animations;
-    // Calculate percentage
-    const percentage = ((value - min) / (max - min)) * 100;
-    // Get dynamic color
+    const { colors = {}, size = 'md' } = config;
+    const percentage = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));
     const getDynamicColor = () => {
         if (colorFunction)
             return colorFunction(value);
         if (colors.fill)
             return colors.fill;
-        return `hsl(${percentage * 1.2}, 70%, 50%)`;
+        return 'var(--color-primary)';
     };
-    // Format value display
     const formatValue = (val) => {
         if (valueFormatter)
             return valueFormatter(val);
         return `${val}${max <= 10 ? `/${max}` : ''}`;
     };
-    // Handle slider change
     const handleChange = (e) => {
         if (disabled || loading)
             return;
@@ -1779,71 +1744,30 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
         playSound('click');
         onChange(newValue);
     };
-    // Handle mouse events for enhanced interactions
-    const handleMouseDown = () => {
+    const startDrag = () => {
+        if (disabled || loading)
+            return;
         setIsDragging(true);
-        if (showTooltip)
-            setShowTooltipState(true);
-    };
-    const handleMouseUp = () => {
-        setIsDragging(false);
-        if (showTooltip) {
-            setTimeout(() => setShowTooltipState(false), 500);
-        }
-    };
-    const handleMouseEnter = () => {
-        if (showTooltip && !disabled)
-            setShowTooltipState(true);
-    };
-    const handleMouseLeave = () => {
-        if (showTooltip && !isDragging)
-            setShowTooltipState(false);
     };
+    const endDrag = () => setIsDragging(false);
     const dynamicColor = getDynamicColor();
     const sizeClass = styles$o[`size-${size}`];
-    const stateClass = disabled ? styles$o.disabled : loading ? styles$o.loading : '';
+    const stateClass = disabled ? styles$o.disabled : '';
+    const dragClass = isDragging ? styles$o.dragging : '';
     if (loading) {
-        return (jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${styles$o.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$o.label, children: label }), jsx("div", { className: styles$o.loadingTrack, children: jsx(motion.div, { className: styles$o.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
-                            repeat: Infinity,
-                            duration: 1.5,
-                            ease: "easeInOut"
-                        } }) })] }));
+        return (jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${styles$o.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$o.label, children: label }), jsx("div", { className: styles$o.loadingTrack, children: jsx(motion.div, { className: styles$o.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' } }) })] }));
     }
-    return (jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsx(motion.label, { className: styles$o.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxs(motion.div, { className: styles$o.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsx(motion.div, { className: styles$o.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsx(motion.div, { className: styles$o.fill, style: {
-                                width: `${percentage}%`,
-                                backgroundColor: dynamicColor
-                            }, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
-                                duration,
-                                type: "spring",
-                                stiffness: 300,
-                                damping: 30
-                            }, whileHover: {
-                                boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
-                            } }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$o.input, disabled: disabled, "aria-label": label }), jsx(motion.div, { className: styles$o.thumb, style: {
-                            left: `${percentage}%`,
+    // Inset the thumb so its bounding box stays inside the track at 0/100%.
+    // At percentage=0: marginLeft=0 → thumb flush-left. At 100%: marginLeft=-thumbSize → flush-right.
+    const insetStyle = {
+        left: `${percentage}%`,
+        marginLeft: `calc(var(--slider-thumb-size) * ${-percentage / 100})`,
+    };
+    return (jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${stateClass} ${dragClass} ${className}`, style: style, children: [label && jsx("label", { className: styles$o.label, children: label }), jsxs("div", { className: styles$o.sliderContainer, children: [jsx("div", { className: styles$o.track, children: jsx("div", { className: styles$o.fill, style: { width: `${percentage}%`, backgroundColor: dynamicColor } }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onPointerDown: startDrag, onPointerUp: endDrag, onPointerCancel: endDrag, onBlur: endDrag, ...handlers, className: styles$o.input, disabled: disabled, "aria-label": label }), jsx("div", { className: styles$o.thumb, style: {
+                            ...insetStyle,
                             backgroundColor: dynamicColor,
-                            borderColor: colors.thumb || dynamicColor
-                        }, animate: {
-                            scale: isDragging ? 1.3 : 1,
-                            boxShadow: isDragging
-                                ? `0 0 20px ${dynamicColor}40`
-                                : `0 2px 8px ${dynamicColor}30`
-                        }, transition: {
-                            duration: 0.1,
-                            type: "spring",
-                            stiffness: 400,
-                            damping: 25
-                        }, whileHover: {
-                            scale: 1.1,
-                            transition: { duration: 0.1 }
-                        }, children: isDragging && (jsx(motion.div, { className: styles$o.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsx(AnimatePresence, { children: showTooltipState && (jsxs(motion.div, { className: styles$o.tooltip, style: {
-                                left: `${percentage}%`,
-                                backgroundColor: dynamicColor
-                            }, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsx("div", { className: styles$o.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx(motion.div, { className: styles$o.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
-                    duration: 0.2,
-                    type: "spring",
-                    stiffness: 300
-                }, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$o.labelsContainer, children: labels.map((labelConfig, index) => {
+                            borderColor: colors.thumb || dynamicColor,
+                        } }), jsx(AnimatePresence, { children: showTooltip && isDragging && !disabled && (jsxs(motion.div, { className: styles$o.tooltip, style: { ...insetStyle, backgroundColor: dynamicColor }, initial: { opacity: 0, y: 6, scale: 0.9 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 6, scale: 0.9 }, transition: { duration: 0.15 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsx("div", { className: styles$o.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx("div", { className: styles$o.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) })), labels.length > 0 && (jsx("div", { className: styles$o.labelsContainer, children: labels.map((labelConfig, index) => {
                     let position = 0;
                     if (labelConfig.position === 'start')
                         position = 0;
@@ -1851,16 +1775,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
                         position = 100;
                     else if (typeof labelConfig.position === 'number')
                         position = labelConfig.position;
-                    return (jsx(motion.div, { className: styles$o.labelItem, style: {
-                            left: `${position}%`,
-                            color: labelConfig.color
-                        }, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
-                            duration: 0.3,
-                            delay: index * 0.1
-                        }, whileHover: {
-                            scale: 1.2,
-                            transition: { duration: 0.1 }
-                        }, children: labelConfig.label }, index));
+                    return (jsx("div", { className: styles$o.labelItem, style: { left: `${position}%`, color: labelConfig.color }, children: labelConfig.label }, index));
                 }) }))] }));
 }