@stfrigerio/sito-template 0.1.8 → 0.1.9

package/dist/index.js

@@ -219,7 +219,7 @@ function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, pla
     return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$l.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$l.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$l.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
 }
 
-var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn"};
+var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn","removeButton":"ArrayInput-module_removeButton__khhdR","addButton":"ArrayInput-module_addButton__10o-9"};
 
 /**
  * ArrayInput component - Versatile dynamic list manager
@@ -259,7 +259,7 @@ function ArrayInput(props) {
     return jsxRuntime.jsx(SimpleArrayInput, { ...props });
 }
 // Simple string array implementation
-function SimpleArrayInput({ label, values, onChange, placeholder }) {
+function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inputStyle }) {
     const handleChange = (index, value) => {
         const newValues = [...values];
         newValues[index] = value;
@@ -272,10 +272,14 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
         const newValues = values.filter((_, i) => i !== index);
         onChange(newValues);
     };
-    return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxRuntime.jsxs("div", { className: styles$k.arrayInputItem, children: [jsxRuntime.jsx("div", { className: styles$k.inputWrapper, children: jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input }) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$k.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+                            duration: 0.3,
+                            ease: "easeInOut",
+                            layout: { duration: 0.2 }
+                        }, children: [jsxRuntime.jsx("div", { className: styles$k.inputWrapper, children: jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input, style: inputStyle }) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, `item-${index}`))) }) }), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
 }
 // Complex object array implementation
-function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
+function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
     const handleChange = (index, field, value) => {
         const newValues = [...values];
         newValues[index] = { ...newValues[index], [field]: value };
@@ -297,7 +301,11 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
         // Generate key from all field values
         return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
     };
-    return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxRuntime.jsxs("div", { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, children: [jsxRuntime.jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, generateKey(value, index)))), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
+    return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
+                            duration: 0.3,
+                            ease: "easeInOut",
+                            layout: { duration: 0.2 }
+                        }, children: [jsxRuntime.jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }) }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
 }
 
 var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
@@ -846,8 +854,15 @@ var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
  * @returns {JSX.Element} The rendered Toggle component
  */
 function Toggle(props) {
-    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
-    return (jsxRuntime.jsxs("div", { className: styles$e.toggleContainer, children: [jsxRuntime.jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
+    const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
+    // Ensure content stays centered by merging styles
+    const buttonStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        ...style
+    };
+    return (jsxRuntime.jsxs("div", { className: `${styles$e.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
 }
 
 var styles$d = {"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"};