@stfrigerio/sito-template 0.1.83 → 0.1.85

package/dist/index.js

@@ -1733,66 +1733,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: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$p.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$p.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$p.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$p.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.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] = React.useState(false);
-    const [showTooltipState, setShowTooltipState] = React.useState(false);
-    const sliderRef = React.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;
@@ -1800,71 +1765,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 (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${styles$o.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsx("div", { className: styles$o.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
-                            repeat: Infinity,
-                            duration: 1.5,
-                            ease: "easeInOut"
-                        } }) })] }));
+        return (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${styles$o.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsx("div", { className: styles$o.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: { repeat: Infinity, duration: 1.5, ease: 'easeInOut' } }) })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$o.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$o.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.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)`
-                            } }) }), jsxRuntime.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 }), jsxRuntime.jsx(framerMotion.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 (jsxRuntime.jsxs("div", { className: `${styles$o.slider} ${sizeClass} ${stateClass} ${dragClass} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsxs("div", { className: styles$o.sliderContainer, children: [jsxRuntime.jsx("div", { className: styles$o.track, children: jsxRuntime.jsx("div", { className: styles$o.fill, style: { width: `${percentage}%`, backgroundColor: dynamicColor } }) }), jsxRuntime.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 }), jsxRuntime.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 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltipState && (jsxRuntime.jsxs(framerMotion.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), jsxRuntime.jsx("div", { className: styles$o.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.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 && (jsxRuntime.jsx("div", { className: styles$o.labelsContainer, children: labels.map((labelConfig, index) => {
+                            borderColor: colors.thumb || dynamicColor,
+                        } }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltip && isDragging && !disabled && (jsxRuntime.jsxs(framerMotion.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), jsxRuntime.jsx("div", { className: styles$o.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx("div", { className: styles$o.valueDisplay, style: { color: dynamicColor }, children: formatValue(value) })), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$o.labelsContainer, children: labels.map((labelConfig, index) => {
                     let position = 0;
                     if (labelConfig.position === 'start')
                         position = 0;
@@ -1872,16 +1796,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 (jsxRuntime.jsx(framerMotion.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 (jsxRuntime.jsx("div", { className: styles$o.labelItem, style: { left: `${position}%`, color: labelConfig.color }, children: labelConfig.label }, index));
                 }) }))] }));
 }