@stfrigerio/sito-template 0.1.25 → 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 = () => {
@@ -812,7 +814,7 @@ function Toggle(props) {
     return (jsxRuntime.jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
 }
 
-var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","pulse":"NumberStepper-module_pulse__51oUo"};
+var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
 
 /**
  * NumberStepper Component
@@ -843,10 +845,75 @@ 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
  */
-const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', }) => {
+const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', customStyles = {}, customButtons = {}, hideLimits = false, layout = 'horizontal', }) => {
     const [isIncrementing, setIsIncrementing] = React.useState(false);
     const [isDecrementing, setIsDecrementing] = React.useState(false);
     const [displayValue, setDisplayValue] = React.useState(value);
@@ -932,12 +999,26 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
         styles$i.container,
         styles$i[size],
         styles$i[variant],
+        layout === 'vertical' && styles$i.vertical,
         disabled && styles$i.disabled,
         className
     ].filter(Boolean).join(' ');
+    // Merge custom styles with hover states
+    const [isButtonHovered, setIsButtonHovered] = React.useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$i.header, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$i.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.button, 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: showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$i.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, 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, 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, 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: showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$i.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$i.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" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$i.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"};
@@ -1651,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)
@@ -1711,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 })] }));
@@ -4115,7 +4198,7 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
     if (data.length === 0) {
         return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), jsxRuntime.jsxs("div", { className: styles.empty, children: [jsxRuntime.jsx("span", { className: styles.emptyIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("p", { children: emptyMessage })] })] }));
     }
-    return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles.header, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), selectedItems.length > 0 && (jsxRuntime.jsxs("div", { className: styles.bulkActions, children: [actions && (jsxRuntime.jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && (jsxRuntime.jsx("div", { className: styles.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
+    return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles.header, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), (actions || bulkActions) && (jsxRuntime.jsxs("div", { className: styles.bulkActions, children: [actions && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
                                     const isDisabled = (bulkAction.disabled && bulkAction.disabled(selectedItems)) ||
                                         (bulkAction.minSelection && selectedItems.length < bulkAction.minSelection) ||
                                         (bulkAction.maxSelection && selectedItems.length > bulkAction.maxSelection);