@stfrigerio/sito-template 0.1.25 → 0.1.26

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

@@ -23,13 +23,36 @@ export interface NumberStepperProps {
     /** Size variant */
     size?: 'small' | 'medium' | 'large';
     /** Visual variant */
-    variant?: 'default' | 'outlined' | 'filled';
+    variant?: 'default' | 'outlined' | 'filled' | 'minimal' | 'custom';
     /** Show plus/minus icons instead of arrows */
     showPlusMinus?: boolean;
     /** Allow keyboard navigation */
     allowKeyboard?: boolean;
     /** Custom className */
     className?: string;
+    /** Custom styles for different parts of the component */
+    customStyles?: {
+        container?: React.CSSProperties;
+        header?: React.CSSProperties;
+        icon?: React.CSSProperties;
+        label?: React.CSSProperties;
+        stepper?: React.CSSProperties;
+        button?: React.CSSProperties;
+        buttonHover?: React.CSSProperties;
+        buttonIcon?: React.CSSProperties;
+        value?: React.CSSProperties;
+        valueContainer?: React.CSSProperties;
+        limits?: React.CSSProperties;
+    };
+    /** Custom button content (overrides default icons) */
+    customButtons?: {
+        increment?: React.ReactNode;
+        decrement?: React.ReactNode;
+    };
+    /** Hide the limits display */
+    hideLimits?: boolean;
+    /** Layout direction */
+    layout?: 'horizontal' | 'vertical';
 }
 /**
  * NumberStepper Component

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

@@ -1 +1 @@
-{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC5C,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA2MtD,CAAC"}
+{"version":3,"file":"NumberStepper.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/NumberStepper/NumberStepper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAIhE;;;GAGG;AACH,MAAM,WAAW,kBAAkB;IAC/B,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sCAAsC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;IACnE,8CAA8C;IAC9C,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,gCAAgC;IAChC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,YAAY,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC3B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC9B,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAClC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACjC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QACrC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;KAChC,CAAC;IACF,sDAAsD;IACtD,aAAa,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC/B,CAAC;IACF,8BAA8B;IAC9B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uBAAuB;IACvB,MAAM,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACtC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAgOtD,CAAC"}

package/dist/index.esm.js

@@ -791,7 +791,7 @@ function Toggle(props) {
     return (jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), 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
@@ -825,7 +825,7 @@ var styles$i = {"container":"NumberStepper-module_container__WSGlU","header":"Nu
  * @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] = useState(false);
     const [isDecrementing, setIsDecrementing] = useState(false);
     const [displayValue, setDisplayValue] = useState(value);
@@ -911,12 +911,21 @@ 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] = useState(null);
     const isDecrementDisabled = disabled || value <= min;
     const isIncrementDisabled = disabled || value >= max;
-    return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$i.header, children: [icon && jsx("span", { className: styles$i.icon, children: icon }), label && jsx("label", { className: styles$i.label, children: label })] })), jsxs("div", { className: styles$i.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$i.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(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: 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) }) }), jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$i.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
+    return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$i.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$i.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$i.label, style: customStyles.label, children: label })] })), jsxs("div", { className: styles$i.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsx("div", { className: styles$i.valueContainer, style: customStyles.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(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: 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) }) }), jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$i.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }), !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, style: customStyles.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), 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"};
@@ -4094,7 +4103,7 @@ const TableComponent = function Table({ data, columns, keyField = 'id', title, s
     if (data.length === 0) {
         return (jsxs("div", { className: `${styles.container} ${className}`, children: [title && jsx("h2", { className: styles.title, children: title }), jsxs("div", { className: styles.empty, children: [jsx("span", { className: styles.emptyIcon, children: "\uD83D\uDCCA" }), jsx("p", { children: emptyMessage })] })] }));
     }
-    return (jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxs("div", { className: styles.header, children: [title && jsx("h2", { className: styles.title, children: title }), selectedItems.length > 0 && (jsxs("div", { className: styles.bulkActions, children: [actions && (jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && (jsx("div", { className: styles.bulkActionButtons, children: bulkActions.map((bulkAction, index) => {
+    return (jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions || bulkActions) && (jsxs("div", { className: styles.header, children: [title && jsx("h2", { className: styles.title, children: title }), (actions || bulkActions) && (jsxs("div", { className: styles.bulkActions, children: [actions && selectedItems.length > 0 && (jsx("div", { className: styles.actions, children: actions(selectedItems) })), bulkActions && bulkActions.length > 0 && selectedItems.length > 0 && (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);