@stfrigerio/sito-template 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/ArrayInput/ArrayInput.d.ts +5 -0
- package/dist/components/atoms/ArrayInput/ArrayInput.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.d.ts +4 -0
- package/dist/components/atoms/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.stories.d.ts +1 -0
- package/dist/components/atoms/Toggle/Toggle.stories.d.ts.map +1 -1
- package/dist/index.esm.js +22 -7
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +22 -7
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import React from 'react';
|
|
1
2
|
/**
|
|
2
3
|
* Configuration for a field in complex object arrays
|
|
3
4
|
* @interface FieldConfig
|
|
@@ -19,6 +20,10 @@ export interface FieldConfig {
|
|
|
19
20
|
interface BaseArrayInputProps {
|
|
20
21
|
/** Label text displayed above the array input */
|
|
21
22
|
label: string;
|
|
23
|
+
/** Style object for individual array items */
|
|
24
|
+
itemStyle?: React.CSSProperties;
|
|
25
|
+
/** Style object for input fields */
|
|
26
|
+
inputStyle?: React.CSSProperties;
|
|
22
27
|
}
|
|
23
28
|
/**
|
|
24
29
|
* Props for simple string array input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ArrayInput.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ArrayInput/ArrayInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ArrayInput.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/ArrayInput/ArrayInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,UAAU,mBAAmB;IACzB,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAChC,oCAAoC;IACpC,UAAU,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACpC;AAED;;;GAGG;AACH,UAAU,qBAAsB,SAAQ,mBAAmB;IACvD,0DAA0D;IAC1D,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;GAIG;AACH,UAAU,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAE,SAAQ,mBAAmB;IACvF,uDAAuD;IACvD,IAAI,EAAE,SAAS,CAAC;IAChB,6BAA6B;IAC7B,MAAM,EAAE,CAAC,EAAE,CAAC;IACZ,8CAA8C;IAC9C,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAChC,kDAAkD;IAClD,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;CAC/C;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IACzE,qBAAqB,GACrB,sBAAsB,CAAC,CAAC,CAAC,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1E,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,2CAOtC;AAiLD,MAAM,WAAW,WAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf"}
|
|
@@ -16,6 +16,10 @@ export interface ToggleProps {
|
|
|
16
16
|
readonly leftIcon?: React.ReactNode;
|
|
17
17
|
/** Icon to display with the right option */
|
|
18
18
|
readonly rightIcon?: React.ReactNode;
|
|
19
|
+
/** Optional CSS class name */
|
|
20
|
+
readonly className?: string;
|
|
21
|
+
/** Optional inline styles */
|
|
22
|
+
readonly style?: React.CSSProperties;
|
|
19
23
|
}
|
|
20
24
|
/**
|
|
21
25
|
* Toggle Component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2CAA2C;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,4CAA4C;IAC5C,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,
|
|
1
|
+
{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,2DAA2D;IAC3D,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,+CAA+C;IAC/C,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,2CAA2C;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,2CAA2C;IAC3C,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,2CAA2C;IAC3C,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,4CAA4C;IAC5C,QAAQ,CAAC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACrC,8BAA8B;IAC9B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,6BAA6B;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACxC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,WAAW,CAAC,2CA+BlD"}
|
|
@@ -39,5 +39,6 @@ export declare const WithLabelsAndIcons: Story;
|
|
|
39
39
|
export declare const ViewToggle: Story;
|
|
40
40
|
export declare const Interactive: Story;
|
|
41
41
|
export declare const ThemeToggle: Story;
|
|
42
|
+
export declare const CustomStyling: Story;
|
|
42
43
|
export declare const MultipleToggles: Story;
|
|
43
44
|
//# sourceMappingURL=Toggle.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,
|
|
1
|
+
{"version":3,"file":"Toggle.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Toggle/Toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIlC,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BqB,CAAC;AAEhC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAOrB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAK3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAOvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAShC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KASxB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAkBzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAqCzB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAyC3B,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA8D7B,CAAC"}
|
package/dist/index.esm.js
CHANGED
|
@@ -198,7 +198,7 @@ function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, pla
|
|
|
198
198
|
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$l.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$l.inputIcon, children: icon }), 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 && (jsx("button", { type: "button", className: styles$l.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
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"};
|
|
201
|
+
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"};
|
|
202
202
|
|
|
203
203
|
/**
|
|
204
204
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -238,7 +238,7 @@ function ArrayInput(props) {
|
|
|
238
238
|
return jsx(SimpleArrayInput, { ...props });
|
|
239
239
|
}
|
|
240
240
|
// Simple string array implementation
|
|
241
|
-
function SimpleArrayInput({ label, values, onChange, placeholder }) {
|
|
241
|
+
function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inputStyle }) {
|
|
242
242
|
const handleChange = (index, value) => {
|
|
243
243
|
const newValues = [...values];
|
|
244
244
|
newValues[index] = value;
|
|
@@ -251,10 +251,14 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
|
|
|
251
251
|
const newValues = values.filter((_, i) => i !== index);
|
|
252
252
|
onChange(newValues);
|
|
253
253
|
};
|
|
254
|
-
return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }),
|
|
254
|
+
return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$k.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
255
|
+
duration: 0.3,
|
|
256
|
+
ease: "easeInOut",
|
|
257
|
+
layout: { duration: 0.2 }
|
|
258
|
+
}, children: [jsx("div", { className: styles$k.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input, style: inputStyle }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: 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}`))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
|
|
255
259
|
}
|
|
256
260
|
// Complex object array implementation
|
|
257
|
-
function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
261
|
+
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
|
|
258
262
|
const handleChange = (index, field, value) => {
|
|
259
263
|
const newValues = [...values];
|
|
260
264
|
newValues[index] = { ...newValues[index], [field]: value };
|
|
@@ -276,7 +280,11 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
|
276
280
|
// Generate key from all field values
|
|
277
281
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
278
282
|
};
|
|
279
|
-
return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs(
|
|
283
|
+
return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(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: {
|
|
284
|
+
duration: 0.3,
|
|
285
|
+
ease: "easeInOut",
|
|
286
|
+
layout: { duration: 0.2 }
|
|
287
|
+
}, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: 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)))) }) }), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$k.addButton, children: ["Add ", label] })] }));
|
|
280
288
|
}
|
|
281
289
|
|
|
282
290
|
var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
@@ -825,8 +833,15 @@ var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
|
|
|
825
833
|
* @returns {JSX.Element} The rendered Toggle component
|
|
826
834
|
*/
|
|
827
835
|
function Toggle(props) {
|
|
828
|
-
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
|
|
829
|
-
|
|
836
|
+
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
|
|
837
|
+
// Ensure content stays centered by merging styles
|
|
838
|
+
const buttonStyle = {
|
|
839
|
+
display: 'flex',
|
|
840
|
+
alignItems: 'center',
|
|
841
|
+
justifyContent: 'center',
|
|
842
|
+
...style
|
|
843
|
+
};
|
|
844
|
+
return (jsxs("div", { className: `${styles$e.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
|
|
830
845
|
}
|
|
831
846
|
|
|
832
847
|
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"};
|