@stfrigerio/sito-template 0.1.26 → 0.1.27

package/dist/index.js

@@ -676,7 +676,7 @@ var styles$l = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
  *   required
  * />
  */
-function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
+function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
     const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
     const getContainerClassName = () => {
         const classes = [styles$l.textareaContainer];
@@ -690,6 +690,8 @@ function TextArea({ label, value, onChange, rows = 5, placeholder = "", required
             classes.push(styles$l.focusMode);
         if (compact)
             classes.push(styles$l.compact);
+        if (className)
+            classes.push(className);
         return classes.join(' ');
     };
     const getCharCountClassName = () => {
@@ -843,6 +845,71 @@ var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"Nu
  *   icon="📦"
  * />
  *
+ * @example
+ * // With custom styles
+ * <NumberStepper
+ *   value={volume}
+ *   onChange={setVolume}
+ *   min={0}
+ *   max={100}
+ *   label="Volume"
+ *   icon="🔊"
+ *   customStyles={{
+ *     container: {
+ *       background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+ *       padding: '20px',
+ *       borderRadius: '16px',
+ *     },
+ *     label: { color: 'white', fontWeight: 'bold' },
+ *     button: {
+ *       background: 'rgba(255,255,255,0.2)',
+ *       color: 'white',
+ *     },
+ *     buttonHover: {
+ *       background: 'rgba(255,255,255,0.3)',
+ *     },
+ *     value: {
+ *       color: 'white',
+ *       fontSize: '24px',
+ *       fontWeight: 'bold',
+ *     },
+ *   }}
+ * />
+ *
+ * @example
+ * // Custom variant with horizontal layout
+ * <NumberStepper
+ *   value={discount}
+ *   onChange={setDiscount}
+ *   min={0}
+ *   max={100}
+ *   step={5}
+ *   label="Discount %"
+ *   icon="🏷️"
+ *   variant="custom"
+ *   customStyles={{
+ *     container: {
+ *       display: 'flex',
+ *       alignItems: 'center',
+ *       gap: '16px',
+ *     },
+ *     header: { flex: 1, marginBottom: 0 },
+ *   }}
+ * />
+ *
+ * @example
+ * // With custom buttons
+ * <NumberStepper
+ *   value={rating}
+ *   onChange={setRating}
+ *   min={1}
+ *   max={5}
+ *   customButtons={{
+ *     decrement: <span>👎</span>,
+ *     increment: <span>👍</span>,
+ *   }}
+ * />
+ *
  * @param {NumberStepperProps} props - The props for the NumberStepper component
  * @returns {JSX.Element} The rendered NumberStepper component
  */
@@ -940,13 +1007,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
     const [isButtonHovered, setIsButtonHovered] = React.useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
-                            ...customStyles.button,
-                            ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
-                        }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$i.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
-                            ...customStyles.button,
-                            ...(isButtonHovered === 'increment' && customStyles.buttonHover)
-                        }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }), !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    const stepperContent = (jsxRuntime.jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
+                    ...customStyles.button,
+                    ...(isButtonHovered === 'decrement' && customStyles.buttonHover)
+                }, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$i.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, style: {
+                    ...customStyles.button,
+                    ...(isButtonHovered === 'increment' && customStyles.buttonHover)
+                }, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
+    // For custom variant with horizontal layout, render differently
+    if (variant === 'custom' && (label || icon)) {
+        return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$i.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    }
+    return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
 };
 
 var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"ToggleButton-module_background__NwfTp","content":"ToggleButton-module_content__NHqIN","iconWrapper":"ToggleButton-module_iconWrapper__yN4sP","icon":"ToggleButton-module_icon__r8juX","label":"ToggleButton-module_label__4mPJP","hideMobile":"ToggleButton-module_hideMobile__GFAc3","checkmark":"ToggleButton-module_checkmark__ZJwf-","ripple":"ToggleButton-module_ripple__2-faB","small":"ToggleButton-module_small__MhfoN","large":"ToggleButton-module_large__A3naL","default":"ToggleButton-module_default__q8QaZ","active":"ToggleButton-module_active__4DjlR","outlined":"ToggleButton-module_outlined__OtqJB","filled":"ToggleButton-module_filled__LySNn","ghost":"ToggleButton-module_ghost__9KXcb","active-primary":"ToggleButton-module_active-primary__vXMP7","active-secondary":"ToggleButton-module_active-secondary__9Ttdx","active-success":"ToggleButton-module_active-success__oi0rr","active-danger":"ToggleButton-module_active-danger__VUdxr","active-warning":"ToggleButton-module_active-warning__77nSu","animation-scale":"ToggleButton-module_animation-scale__j-3mJ","scaleAnimation":"ToggleButton-module_scaleAnimation__Ms1j2","animation-rotate":"ToggleButton-module_animation-rotate__pBmfc","rotateAnimation":"ToggleButton-module_rotateAnimation__xWZJ5","animation-flip":"ToggleButton-module_animation-flip__ErAbm","flipAnimation":"ToggleButton-module_flipAnimation__qwDTb","disabled":"ToggleButton-module_disabled__Gv5ji"};
@@ -1660,7 +1732,7 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
 
 var styles$b = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
 
-function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
+function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false, className = "" }) {
     const [showPicker, setShowPicker] = React.useState(false);
     const formatTime24 = (time) => {
         if (!time)
@@ -1720,6 +1792,8 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
             classes.push(styles$b.loading);
         if (disabled)
             classes.push(styles$b.disabled);
+        if (className)
+            classes.push(className);
         return classes.join(' ');
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$b.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$b.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$b.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$b.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsxRuntime.jsx("button", { type: "button", onClick: handleClockClick, className: styles$b.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsxRuntime.jsx(FiClock, { size: 20 }) })] })] }), jsxRuntime.jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));