@stfrigerio/sito-template 0.1.4 → 0.1.6
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/AllAtoms.stories.d.ts.map +1 -1
- package/dist/components/atoms/Card/Card.d.ts +1 -1
- package/dist/components/atoms/Card/Card.d.ts.map +1 -1
- package/dist/components/atoms/NumberStepper/NumberStepper.d.ts +67 -0
- package/dist/components/atoms/NumberStepper/NumberStepper.d.ts.map +1 -0
- package/dist/components/atoms/NumberStepper/NumberStepper.stories.d.ts +18 -0
- package/dist/components/atoms/NumberStepper/NumberStepper.stories.d.ts.map +1 -0
- package/dist/components/atoms/NumberStepper/index.d.ts +3 -0
- package/dist/components/atoms/NumberStepper/index.d.ts.map +1 -0
- package/dist/components/atoms/ToggleButton/ToggleButton.d.ts +69 -0
- package/dist/components/atoms/ToggleButton/ToggleButton.d.ts.map +1 -0
- package/dist/components/atoms/ToggleButton/ToggleButton.stories.d.ts +16 -0
- package/dist/components/atoms/ToggleButton/ToggleButton.stories.d.ts.map +1 -0
- package/dist/components/atoms/ToggleButton/index.d.ts +3 -0
- package/dist/components/atoms/ToggleButton/index.d.ts.map +1 -0
- package/dist/components/atoms/index.d.ts +4 -0
- package/dist/components/atoms/index.d.ts.map +1 -1
- package/dist/components/molecules/Tabs/Tabs.d.ts +9 -0
- package/dist/components/molecules/Tabs/Tabs.d.ts.map +1 -0
- package/dist/components/molecules/Tabs/Tabs.stories.d.ts +10 -0
- package/dist/components/molecules/Tabs/Tabs.stories.d.ts.map +1 -0
- package/dist/components/molecules/index.d.ts +2 -1
- package/dist/components/molecules/index.d.ts.map +1 -1
- package/dist/index.esm.js +350 -86
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +352 -85
- 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
package/dist/index.js
CHANGED
|
@@ -51,7 +51,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
|
|
|
51
51
|
return (jsxRuntime.jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
-
var styles$
|
|
54
|
+
var styles$n = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
|
|
55
55
|
|
|
56
56
|
/**
|
|
57
57
|
* Button Component
|
|
@@ -94,17 +94,17 @@ var styles$k = {"button":"Button-module_button__c6nkW","primary":"Button-module_
|
|
|
94
94
|
*/
|
|
95
95
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
|
|
96
96
|
const buttonClasses = [
|
|
97
|
-
styles$
|
|
98
|
-
styles$
|
|
99
|
-
styles$
|
|
100
|
-
fullWidth && styles$
|
|
101
|
-
loading && styles$
|
|
97
|
+
styles$n.button,
|
|
98
|
+
styles$n[variant],
|
|
99
|
+
styles$n[size],
|
|
100
|
+
fullWidth && styles$n.fullWidth,
|
|
101
|
+
loading && styles$n.loading,
|
|
102
102
|
className
|
|
103
103
|
].filter(Boolean).join(' ');
|
|
104
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$
|
|
104
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$n.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$n.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$n.iconRight, children: iconRight })] }));
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
-
var styles$
|
|
107
|
+
var styles$m = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
|
|
108
108
|
|
|
109
109
|
/**
|
|
110
110
|
* Card Component
|
|
@@ -159,18 +159,18 @@ var styles$j = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hovera
|
|
|
159
159
|
*/
|
|
160
160
|
const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, className = '', onClick, motionProps, ...rest }) => {
|
|
161
161
|
const cardClasses = [
|
|
162
|
-
styles$
|
|
163
|
-
styles$
|
|
164
|
-
hoverable && styles$
|
|
165
|
-
clickable && styles$
|
|
166
|
-
!padding && styles$
|
|
162
|
+
styles$m.card,
|
|
163
|
+
styles$m[variant],
|
|
164
|
+
hoverable && styles$m.hoverable,
|
|
165
|
+
clickable && styles$m.clickable,
|
|
166
|
+
!padding && styles$m.noPadding,
|
|
167
167
|
className
|
|
168
168
|
].filter(Boolean).join(' ');
|
|
169
|
-
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$
|
|
169
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$m.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$m.image }) })), header && jsxRuntime.jsx("div", { className: styles$m.header, children: header }), (title || subtitle) && !header && (jsxRuntime.jsxs("div", { className: styles$m.header, children: [title && jsxRuntime.jsx("h3", { className: styles$m.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$m.subtitle, children: subtitle })] })), children && (jsxRuntime.jsx("div", { className: padding ? styles$m.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$m.footer, children: footer })] }));
|
|
170
170
|
return (jsxRuntime.jsx(framerMotion.motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
171
171
|
};
|
|
172
172
|
|
|
173
|
-
var styles$
|
|
173
|
+
var styles$l = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
|
|
174
174
|
|
|
175
175
|
/**
|
|
176
176
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -205,21 +205,21 @@ var styles$i = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
|
|
|
205
205
|
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
206
206
|
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
207
207
|
const getContainerClassName = () => {
|
|
208
|
-
const classes = [styles$
|
|
208
|
+
const classes = [styles$l.textInput];
|
|
209
209
|
if (success)
|
|
210
|
-
classes.push(styles$
|
|
210
|
+
classes.push(styles$l.success);
|
|
211
211
|
if (loading)
|
|
212
|
-
classes.push(styles$
|
|
212
|
+
classes.push(styles$l.loading);
|
|
213
213
|
if (icon)
|
|
214
|
-
classes.push(styles$
|
|
214
|
+
classes.push(styles$l.withIcon);
|
|
215
215
|
if (actionButton)
|
|
216
|
-
classes.push(styles$
|
|
216
|
+
classes.push(styles$l.withAction);
|
|
217
217
|
return classes.join(' ');
|
|
218
218
|
};
|
|
219
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$
|
|
219
|
+
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 }))] }));
|
|
220
220
|
}
|
|
221
221
|
|
|
222
|
-
var styles$
|
|
222
|
+
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"};
|
|
223
223
|
|
|
224
224
|
/**
|
|
225
225
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -272,7 +272,7 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
|
|
|
272
272
|
const newValues = values.filter((_, i) => i !== index);
|
|
273
273
|
onChange(newValues);
|
|
274
274
|
};
|
|
275
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
275
|
+
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] })] }));
|
|
276
276
|
}
|
|
277
277
|
// Complex object array implementation
|
|
278
278
|
function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
@@ -297,10 +297,10 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
|
297
297
|
// Generate key from all field values
|
|
298
298
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
299
299
|
};
|
|
300
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
300
|
+
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] })] }));
|
|
301
301
|
}
|
|
302
302
|
|
|
303
|
-
var styles$
|
|
303
|
+
var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
304
304
|
|
|
305
305
|
/**
|
|
306
306
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -344,7 +344,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
344
344
|
checkboxRef.current.indeterminate = indeterminate;
|
|
345
345
|
}
|
|
346
346
|
}, [indeterminate]);
|
|
347
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
347
|
+
return (jsxRuntime.jsxs("label", { className: styles$j.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$j.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$j.checkboxText, children: label })] }));
|
|
348
348
|
};
|
|
349
349
|
|
|
350
350
|
var DefaultContext = {
|
|
@@ -417,6 +417,10 @@ function FiBook (props) {
|
|
|
417
417
|
return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"12","cy":"12","r":"10"},"child":[]},{"tag":"polyline","attr":{"points":"12 6 12 12 16 14"},"child":[]}]})(props);
|
|
418
418
|
}function FiFolder (props) {
|
|
419
419
|
return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"},"child":[]}]})(props);
|
|
420
|
+
}function FiGithub (props) {
|
|
421
|
+
return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"path","attr":{"d":"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"},"child":[]}]})(props);
|
|
422
|
+
}function FiInfo (props) {
|
|
423
|
+
return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"circle","attr":{"cx":"12","cy":"12","r":"10"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"16","x2":"12","y2":"12"},"child":[]},{"tag":"line","attr":{"x1":"12","y1":"8","x2":"12.01","y2":"8"},"child":[]}]})(props);
|
|
420
424
|
}function FiMenu (props) {
|
|
421
425
|
return GenIcon({"attr":{"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":"2","strokeLinecap":"round","strokeLinejoin":"round"},"child":[{"tag":"line","attr":{"x1":"3","y1":"12","x2":"21","y2":"12"},"child":[]},{"tag":"line","attr":{"x1":"3","y1":"6","x2":"21","y2":"6"},"child":[]},{"tag":"line","attr":{"x1":"3","y1":"18","x2":"21","y2":"18"},"child":[]}]})(props);
|
|
422
426
|
}function FiMessageSquare (props) {
|
|
@@ -463,7 +467,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
463
467
|
return '';
|
|
464
468
|
};
|
|
465
469
|
|
|
466
|
-
var styles$
|
|
470
|
+
var styles$i = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
|
|
467
471
|
|
|
468
472
|
/**
|
|
469
473
|
* DateInput component - European format date picker with manual input support
|
|
@@ -550,19 +554,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
550
554
|
}
|
|
551
555
|
};
|
|
552
556
|
const getClassName = () => {
|
|
553
|
-
const classes = [styles$
|
|
557
|
+
const classes = [styles$i.dateInput];
|
|
554
558
|
if (error)
|
|
555
|
-
classes.push(styles$
|
|
559
|
+
classes.push(styles$i.error);
|
|
556
560
|
if (success)
|
|
557
|
-
classes.push(styles$
|
|
561
|
+
classes.push(styles$i.success);
|
|
558
562
|
if (loading)
|
|
559
|
-
classes.push(styles$
|
|
563
|
+
classes.push(styles$i.loading);
|
|
560
564
|
return classes.join(' ');
|
|
561
565
|
};
|
|
562
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
566
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$i.label, children: label }), jsxRuntime.jsxs("div", { className: styles$i.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$i.textInput, disabled: disabled || loading }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$i.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$i.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
563
567
|
}
|
|
564
568
|
|
|
565
|
-
var styles$
|
|
569
|
+
var styles$h = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
|
|
566
570
|
|
|
567
571
|
/**
|
|
568
572
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -667,23 +671,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
667
671
|
}
|
|
668
672
|
};
|
|
669
673
|
const getTriggerClassName = () => {
|
|
670
|
-
const classes = [styles$
|
|
674
|
+
const classes = [styles$h.dropdownTrigger];
|
|
671
675
|
if (isOpen)
|
|
672
|
-
classes.push(styles$
|
|
676
|
+
classes.push(styles$h.open);
|
|
673
677
|
if (loading)
|
|
674
|
-
classes.push(styles$
|
|
678
|
+
classes.push(styles$h.loading);
|
|
675
679
|
if (error)
|
|
676
|
-
classes.push(styles$
|
|
680
|
+
classes.push(styles$h.error);
|
|
677
681
|
return classes.join(' ');
|
|
678
682
|
};
|
|
679
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
683
|
+
return (jsxRuntime.jsxs("div", { className: styles$h.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `${styles$h.dropdownValue} ${!displayValue ? styles$h.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(FiChevronDown, { className: styles$h.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$h.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxRuntime.jsxs("div", { className: styles$h.dropdownSearch, children: [jsxRuntime.jsx(FiSearch, { className: styles$h.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$h.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$h.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
680
684
|
const isSelected = value === opt.value;
|
|
681
685
|
const isHighlighted = highlightedIndex === index;
|
|
682
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
683
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
686
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$h.dropdownOption} ${isSelected ? styles$h.selected : ''} ${isHighlighted ? styles$h.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(FiCheck, { className: styles$h.checkIcon })] }, `${opt.value}-${index}`));
|
|
687
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
684
688
|
}
|
|
685
689
|
|
|
686
|
-
var styles$
|
|
690
|
+
var styles$g = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWrapper":"SelectInput-module_selectWrapper__Qr4pl","selectIcon":"SelectInput-module_selectIcon__9pjhf","error":"SelectInput-module_error__3WNJc","success":"SelectInput-module_success__WJ5ga","loading":"SelectInput-module_loading__n35N9"};
|
|
687
691
|
|
|
688
692
|
/**
|
|
689
693
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -720,23 +724,23 @@ var styles$d = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
720
724
|
*/
|
|
721
725
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
722
726
|
const getClassName = () => {
|
|
723
|
-
const classes = [styles$
|
|
727
|
+
const classes = [styles$g.selectInput];
|
|
724
728
|
if (error)
|
|
725
|
-
classes.push(styles$
|
|
729
|
+
classes.push(styles$g.error);
|
|
726
730
|
if (success)
|
|
727
|
-
classes.push(styles$
|
|
731
|
+
classes.push(styles$g.success);
|
|
728
732
|
if (loading)
|
|
729
|
-
classes.push(styles$
|
|
733
|
+
classes.push(styles$g.loading);
|
|
730
734
|
return classes.join(' ');
|
|
731
735
|
};
|
|
732
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
736
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$g.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
733
737
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
734
738
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
735
739
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
736
|
-
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$
|
|
740
|
+
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$g.selectIcon })] })] }));
|
|
737
741
|
}
|
|
738
742
|
|
|
739
|
-
var styles$
|
|
743
|
+
var styles$f = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","textareaLabel":"TextArea-module_textareaLabel__7Vmyx","requiredIndicator":"TextArea-module_requiredIndicator__3Fxyy","textareaInput":"TextArea-module_textareaInput__VCDZA","characterCount":"TextArea-module_characterCount__9FO5N","nearLimit":"TextArea-module_nearLimit__cUdnw","atLimit":"TextArea-module_atLimit__GoWCC","error":"TextArea-module_error__ciHgb","success":"TextArea-module_success__a0-xD","loading":"TextArea-module_loading__CSFBR","focusMode":"TextArea-module_focusMode__9A8U-"};
|
|
740
744
|
|
|
741
745
|
/**
|
|
742
746
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -771,34 +775,34 @@ var styles$c = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
771
775
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false }) {
|
|
772
776
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
773
777
|
const getContainerClassName = () => {
|
|
774
|
-
const classes = [styles$
|
|
778
|
+
const classes = [styles$f.textareaContainer];
|
|
775
779
|
if (error)
|
|
776
|
-
classes.push(styles$
|
|
780
|
+
classes.push(styles$f.error);
|
|
777
781
|
if (success)
|
|
778
|
-
classes.push(styles$
|
|
782
|
+
classes.push(styles$f.success);
|
|
779
783
|
if (loading)
|
|
780
|
-
classes.push(styles$
|
|
784
|
+
classes.push(styles$f.loading);
|
|
781
785
|
if (focusMode)
|
|
782
|
-
classes.push(styles$
|
|
786
|
+
classes.push(styles$f.focusMode);
|
|
783
787
|
return classes.join(' ');
|
|
784
788
|
};
|
|
785
789
|
const getCharCountClassName = () => {
|
|
786
790
|
if (!maxLength)
|
|
787
|
-
return styles$
|
|
788
|
-
const classes = [styles$
|
|
791
|
+
return styles$f.characterCount;
|
|
792
|
+
const classes = [styles$f.characterCount];
|
|
789
793
|
const percentage = (value.length / maxLength) * 100;
|
|
790
794
|
if (percentage >= 100) {
|
|
791
|
-
classes.push(styles$
|
|
795
|
+
classes.push(styles$f.atLimit);
|
|
792
796
|
}
|
|
793
797
|
else if (percentage >= 80) {
|
|
794
|
-
classes.push(styles$
|
|
798
|
+
classes.push(styles$f.nearLimit);
|
|
795
799
|
}
|
|
796
800
|
return classes.join(' ');
|
|
797
801
|
};
|
|
798
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
802
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$f.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$f.requiredIndicator, children: "*" })] }), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$f.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
|
|
799
803
|
}
|
|
800
804
|
|
|
801
|
-
var styles$
|
|
805
|
+
var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
802
806
|
|
|
803
807
|
/**
|
|
804
808
|
* Toggle Component
|
|
@@ -843,10 +847,242 @@ var styles$b = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
|
|
|
843
847
|
*/
|
|
844
848
|
function Toggle(props) {
|
|
845
849
|
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
|
|
846
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
850
|
+
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] })] }));
|
|
847
851
|
}
|
|
848
852
|
|
|
849
|
-
var styles$
|
|
853
|
+
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"};
|
|
854
|
+
|
|
855
|
+
/**
|
|
856
|
+
* NumberStepper Component
|
|
857
|
+
*
|
|
858
|
+
* @component
|
|
859
|
+
* @description
|
|
860
|
+
* A number input component with increment and decrement controls.
|
|
861
|
+
* Supports keyboard navigation, min/max limits, and custom step values.
|
|
862
|
+
*
|
|
863
|
+
* @example
|
|
864
|
+
* // Basic usage
|
|
865
|
+
* <NumberStepper
|
|
866
|
+
* value={count}
|
|
867
|
+
* onChange={setCount}
|
|
868
|
+
* min={0}
|
|
869
|
+
* max={10}
|
|
870
|
+
* />
|
|
871
|
+
*
|
|
872
|
+
* @example
|
|
873
|
+
* // With label and icon
|
|
874
|
+
* <NumberStepper
|
|
875
|
+
* value={5}
|
|
876
|
+
* onChange={(val) => setValue(val)}
|
|
877
|
+
* min={0}
|
|
878
|
+
* max={100}
|
|
879
|
+
* step={5}
|
|
880
|
+
* label="Quantity"
|
|
881
|
+
* icon="📦"
|
|
882
|
+
* />
|
|
883
|
+
*
|
|
884
|
+
* @param {NumberStepperProps} props - The props for the NumberStepper component
|
|
885
|
+
* @returns {JSX.Element} The rendered NumberStepper component
|
|
886
|
+
*/
|
|
887
|
+
const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', }) => {
|
|
888
|
+
const [isIncrementing, setIsIncrementing] = React.useState(false);
|
|
889
|
+
const [isDecrementing, setIsDecrementing] = React.useState(false);
|
|
890
|
+
const [displayValue, setDisplayValue] = React.useState(value);
|
|
891
|
+
React.useEffect(() => {
|
|
892
|
+
setDisplayValue(value);
|
|
893
|
+
}, [value]);
|
|
894
|
+
const handleIncrement = React.useCallback(() => {
|
|
895
|
+
if (disabled || value >= max)
|
|
896
|
+
return;
|
|
897
|
+
const newValue = Math.min(value + step, max);
|
|
898
|
+
onChange(newValue);
|
|
899
|
+
setIsIncrementing(true);
|
|
900
|
+
setTimeout(() => setIsIncrementing(false), 200);
|
|
901
|
+
}, [value, onChange, max, step, disabled]);
|
|
902
|
+
const handleDecrement = React.useCallback(() => {
|
|
903
|
+
if (disabled || value <= min)
|
|
904
|
+
return;
|
|
905
|
+
const newValue = Math.max(value - step, min);
|
|
906
|
+
onChange(newValue);
|
|
907
|
+
setIsDecrementing(true);
|
|
908
|
+
setTimeout(() => setIsDecrementing(false), 200);
|
|
909
|
+
}, [value, onChange, min, step, disabled]);
|
|
910
|
+
const handleKeyDown = React.useCallback((e) => {
|
|
911
|
+
if (!allowKeyboard || disabled)
|
|
912
|
+
return;
|
|
913
|
+
switch (e.key) {
|
|
914
|
+
case 'ArrowUp':
|
|
915
|
+
e.preventDefault();
|
|
916
|
+
handleIncrement();
|
|
917
|
+
break;
|
|
918
|
+
case 'ArrowDown':
|
|
919
|
+
e.preventDefault();
|
|
920
|
+
handleDecrement();
|
|
921
|
+
break;
|
|
922
|
+
case 'PageUp':
|
|
923
|
+
e.preventDefault();
|
|
924
|
+
const bigIncrease = Math.min(value + (step * 10), max);
|
|
925
|
+
onChange(bigIncrease);
|
|
926
|
+
break;
|
|
927
|
+
case 'PageDown':
|
|
928
|
+
e.preventDefault();
|
|
929
|
+
const bigDecrease = Math.max(value - (step * 10), min);
|
|
930
|
+
onChange(bigDecrease);
|
|
931
|
+
break;
|
|
932
|
+
case 'Home':
|
|
933
|
+
e.preventDefault();
|
|
934
|
+
if (min !== -Infinity)
|
|
935
|
+
onChange(min);
|
|
936
|
+
break;
|
|
937
|
+
case 'End':
|
|
938
|
+
e.preventDefault();
|
|
939
|
+
if (max !== Infinity)
|
|
940
|
+
onChange(max);
|
|
941
|
+
break;
|
|
942
|
+
}
|
|
943
|
+
}, [allowKeyboard, disabled, handleIncrement, handleDecrement, value, step, min, max, onChange]);
|
|
944
|
+
const handleInputChange = React.useCallback((e) => {
|
|
945
|
+
const inputValue = e.target.value;
|
|
946
|
+
if (inputValue === '' || inputValue === '-') {
|
|
947
|
+
setDisplayValue(inputValue);
|
|
948
|
+
return;
|
|
949
|
+
}
|
|
950
|
+
const numValue = parseFloat(inputValue);
|
|
951
|
+
if (!isNaN(numValue)) {
|
|
952
|
+
setDisplayValue(numValue);
|
|
953
|
+
}
|
|
954
|
+
}, []);
|
|
955
|
+
const handleInputBlur = React.useCallback(() => {
|
|
956
|
+
let finalValue = typeof displayValue === 'string'
|
|
957
|
+
? (displayValue === '' || displayValue === '-' ? min : parseFloat(displayValue))
|
|
958
|
+
: displayValue;
|
|
959
|
+
if (isNaN(finalValue)) {
|
|
960
|
+
finalValue = min;
|
|
961
|
+
}
|
|
962
|
+
finalValue = Math.max(min, Math.min(max, finalValue));
|
|
963
|
+
if (step !== 1) {
|
|
964
|
+
finalValue = Math.round(finalValue / step) * step;
|
|
965
|
+
}
|
|
966
|
+
onChange(finalValue);
|
|
967
|
+
setDisplayValue(finalValue);
|
|
968
|
+
}, [displayValue, min, max, step, onChange]);
|
|
969
|
+
const containerClasses = [
|
|
970
|
+
styles$d.container,
|
|
971
|
+
styles$d[size],
|
|
972
|
+
styles$d[variant],
|
|
973
|
+
disabled && styles$d.disabled,
|
|
974
|
+
className
|
|
975
|
+
].filter(Boolean).join(' ');
|
|
976
|
+
const isDecrementDisabled = disabled || value <= min;
|
|
977
|
+
const isIncrementDisabled = disabled || value >= max;
|
|
978
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$d.header, children: [icon && jsxRuntime.jsx("span", { className: styles$d.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$d.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$d.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$d.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$d.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$d.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$d.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$d.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$d.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$d.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$d.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$d.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$d.limits, children: [jsxRuntime.jsx("span", { className: styles$d.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$d.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
979
|
+
};
|
|
980
|
+
|
|
981
|
+
var styles$c = {"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"};
|
|
982
|
+
|
|
983
|
+
/**
|
|
984
|
+
* ToggleButton Component
|
|
985
|
+
*
|
|
986
|
+
* @component
|
|
987
|
+
* @description
|
|
988
|
+
* A toggle button component that can be activated/deactivated with a click.
|
|
989
|
+
* Different from a toggle switch, this is a button with on/off states.
|
|
990
|
+
* Perfect for boolean habits tracking or feature toggles.
|
|
991
|
+
*
|
|
992
|
+
* @example
|
|
993
|
+
* // Basic usage
|
|
994
|
+
* <ToggleButton
|
|
995
|
+
* active={isActive}
|
|
996
|
+
* onClick={() => setIsActive(!isActive)}
|
|
997
|
+
* icon="🦷"
|
|
998
|
+
* label="Teeth"
|
|
999
|
+
* />
|
|
1000
|
+
*
|
|
1001
|
+
* @example
|
|
1002
|
+
* // With custom styling and animation
|
|
1003
|
+
* <ToggleButton
|
|
1004
|
+
* active={isEnabled}
|
|
1005
|
+
* onClick={handleToggle}
|
|
1006
|
+
* icon={<CustomIcon />}
|
|
1007
|
+
* label="Feature"
|
|
1008
|
+
* variant="filled"
|
|
1009
|
+
* activeColor="success"
|
|
1010
|
+
* animation="flip"
|
|
1011
|
+
* showCheckmark
|
|
1012
|
+
* />
|
|
1013
|
+
*
|
|
1014
|
+
* @param {ToggleButtonProps} props - The props for the ToggleButton component
|
|
1015
|
+
* @returns {JSX.Element} The rendered ToggleButton component
|
|
1016
|
+
*/
|
|
1017
|
+
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
1018
|
+
const buttonClasses = [
|
|
1019
|
+
styles$c.button,
|
|
1020
|
+
styles$c[size],
|
|
1021
|
+
styles$c[variant],
|
|
1022
|
+
active && styles$c.active,
|
|
1023
|
+
active && styles$c[`active-${activeColor}`],
|
|
1024
|
+
disabled && styles$c.disabled,
|
|
1025
|
+
animation !== 'none' && styles$c[`animation-${animation}`],
|
|
1026
|
+
className
|
|
1027
|
+
].filter(Boolean).join(' ');
|
|
1028
|
+
const labelClasses = [
|
|
1029
|
+
styles$c.label,
|
|
1030
|
+
hideLabelOnMobile && styles$c.hideMobile
|
|
1031
|
+
].filter(Boolean).join(' ');
|
|
1032
|
+
const iconVariants = {
|
|
1033
|
+
scale: {
|
|
1034
|
+
inactive: { scale: 1 },
|
|
1035
|
+
active: { scale: [1, 1.2, 1] }
|
|
1036
|
+
},
|
|
1037
|
+
rotate: {
|
|
1038
|
+
inactive: { rotate: 0 },
|
|
1039
|
+
active: { rotate: 360 }
|
|
1040
|
+
},
|
|
1041
|
+
flip: {
|
|
1042
|
+
inactive: { rotateY: 0 },
|
|
1043
|
+
active: { rotateY: 180 }
|
|
1044
|
+
},
|
|
1045
|
+
none: {
|
|
1046
|
+
inactive: {},
|
|
1047
|
+
active: {}
|
|
1048
|
+
}
|
|
1049
|
+
};
|
|
1050
|
+
const checkmarkVariants = {
|
|
1051
|
+
hidden: {
|
|
1052
|
+
scale: 0,
|
|
1053
|
+
opacity: 0,
|
|
1054
|
+
rotate: -90
|
|
1055
|
+
},
|
|
1056
|
+
visible: {
|
|
1057
|
+
scale: 1,
|
|
1058
|
+
opacity: 1,
|
|
1059
|
+
rotate: 0,
|
|
1060
|
+
transition: {
|
|
1061
|
+
type: "spring",
|
|
1062
|
+
stiffness: 500,
|
|
1063
|
+
damping: 25
|
|
1064
|
+
}
|
|
1065
|
+
}
|
|
1066
|
+
};
|
|
1067
|
+
const backgroundVariants = {
|
|
1068
|
+
inactive: {
|
|
1069
|
+
scale: 0,
|
|
1070
|
+
opacity: 0
|
|
1071
|
+
},
|
|
1072
|
+
active: {
|
|
1073
|
+
scale: 1,
|
|
1074
|
+
opacity: 1,
|
|
1075
|
+
transition: {
|
|
1076
|
+
type: "spring",
|
|
1077
|
+
stiffness: 400,
|
|
1078
|
+
damping: 20
|
|
1079
|
+
}
|
|
1080
|
+
}
|
|
1081
|
+
};
|
|
1082
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$c.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$c.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$c.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$c.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$c.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$c.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$c.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1083
|
+
};
|
|
1084
|
+
|
|
1085
|
+
var styles$b = {"fab":"EditFAB-module_fab__nSrTJ","primary":"EditFAB-module_primary__zbA9n","secondary":"EditFAB-module_secondary__BnXs0","success":"EditFAB-module_success__kcLg3","loader":"EditFAB-module_loader__TaJOm","draggable":"EditFAB-module_draggable__eE2vE","dragging":"EditFAB-module_dragging__btRJe"};
|
|
850
1086
|
|
|
851
1087
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
852
1088
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
@@ -931,15 +1167,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
931
1167
|
};
|
|
932
1168
|
const getVariantClass = () => {
|
|
933
1169
|
if (isSaving)
|
|
934
|
-
return styles$
|
|
1170
|
+
return styles$b.primary;
|
|
935
1171
|
if (isEditMode) {
|
|
936
|
-
return hasUnsavedChanges ? styles$
|
|
1172
|
+
return hasUnsavedChanges ? styles$b.success : styles$b.secondary;
|
|
937
1173
|
}
|
|
938
|
-
return styles$
|
|
1174
|
+
return styles$b.primary;
|
|
939
1175
|
};
|
|
940
1176
|
const getIcon = () => {
|
|
941
1177
|
if (isSaving) {
|
|
942
|
-
return jsxRuntime.jsx("div", { className: styles$
|
|
1178
|
+
return jsxRuntime.jsx("div", { className: styles$b.loader });
|
|
943
1179
|
}
|
|
944
1180
|
if (isEditMode) {
|
|
945
1181
|
return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
|
|
@@ -954,14 +1190,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
954
1190
|
}
|
|
955
1191
|
return "Enter edit mode";
|
|
956
1192
|
};
|
|
957
|
-
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$
|
|
1193
|
+
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$b.fab} ${getVariantClass()} ${isMobile ? styles$b.draggable : ''} ${isDragging ? styles$b.dragging : ''}`, style: getPositionStyles(), onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, disabled: isSaving, "aria-label": getAriaLabel(), initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, whileHover: !isSaving && !isDragging ? { scale: 1.1 } : {}, whileTap: !isSaving && !isDragging ? { scale: 0.9 } : {}, transition: {
|
|
958
1194
|
type: "spring",
|
|
959
1195
|
stiffness: 260,
|
|
960
1196
|
damping: 20
|
|
961
1197
|
}, children: getIcon() }));
|
|
962
1198
|
};
|
|
963
1199
|
|
|
964
|
-
var styles$
|
|
1200
|
+
var styles$a = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
|
|
965
1201
|
|
|
966
1202
|
const filterOptions = [
|
|
967
1203
|
{ value: 'all', label: 'All', icon: FiSearch },
|
|
@@ -1151,18 +1387,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1151
1387
|
return text || '';
|
|
1152
1388
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1153
1389
|
const parts = text.split(regex);
|
|
1154
|
-
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$
|
|
1390
|
+
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$a.highlight, children: part }, index)) : (part));
|
|
1155
1391
|
};
|
|
1156
|
-
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$
|
|
1392
|
+
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$a.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$a.searchInputWrapper, children: [jsxRuntime.jsx(FiSearch, { className: styles$a.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$a.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$a.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsxRuntime.jsx(FiX, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$a.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && (jsxRuntime.jsx(framerMotion.motion.div, { ref: resultsRef, id: "search-results", className: styles$a.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxRuntime.jsxs("div", { className: styles$a.loadingState, children: [jsxRuntime.jsx("div", { className: styles$a.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$a.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$a.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
1157
1393
|
const Icon = entityIcons[type];
|
|
1158
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1394
|
+
return (jsxRuntime.jsxs("div", { className: styles$a.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$a.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$a.groupIcon }), jsxRuntime.jsx("span", { className: styles$a.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$a.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$a.groupResults, children: groupResults.map((result) => {
|
|
1159
1395
|
const globalIndex = results.indexOf(result);
|
|
1160
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
1396
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$a.resultItem} ${highlightedIndex === globalIndex ? styles$a.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$a.resultContent, children: [jsxRuntime.jsx("div", { className: styles$a.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$a.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$a.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
1161
1397
|
}) })] }, type));
|
|
1162
1398
|
}) })) })) })] }));
|
|
1163
1399
|
};
|
|
1164
1400
|
|
|
1165
|
-
var styles$
|
|
1401
|
+
var styles$9 = {"modalOverlay":"TimePickerModal-module_modalOverlay__Cbq5-","modalContent":"TimePickerModal-module_modalContent__e6py2","modalHeader":"TimePickerModal-module_modalHeader__XhTgK","closeButton":"TimePickerModal-module_closeButton__qsRAG","timeDisplay":"TimePickerModal-module_timeDisplay__voGP4","pickerContainer":"TimePickerModal-module_pickerContainer__4qn3r","pickerColumn":"TimePickerModal-module_pickerColumn__0-kWf","pickerLabel":"TimePickerModal-module_pickerLabel__e7zQ2","pickerScroll":"TimePickerModal-module_pickerScroll__5Dcvw","pickerItem":"TimePickerModal-module_pickerItem__n8sC2","selected":"TimePickerModal-module_selected__oQA8Z","pickerDivider":"TimePickerModal-module_pickerDivider__eg83F","modalActions":"TimePickerModal-module_modalActions__eJRWU","cancelButton":"TimePickerModal-module_cancelButton__zri81","confirmButton":"TimePickerModal-module_confirmButton__q2p3Q"};
|
|
1166
1402
|
|
|
1167
1403
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1168
1404
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1183,10 +1419,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1183
1419
|
};
|
|
1184
1420
|
if (!isOpen)
|
|
1185
1421
|
return null;
|
|
1186
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
1422
|
+
return (jsxRuntime.jsx("div", { className: styles$9.modalOverlay, onClick: onClose, children: jsxRuntime.jsxs("div", { className: styles$9.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$9.modalHeader, children: [jsxRuntime.jsx("h3", { children: "Select Time" }), jsxRuntime.jsx("button", { className: styles$9.closeButton, onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(FiX, {}) })] }), jsxRuntime.jsxs("div", { className: styles$9.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxRuntime.jsxs("div", { className: styles$9.pickerContainer, children: [jsxRuntime.jsxs("div", { className: styles$9.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$9.pickerLabel, children: "Hours" }), jsxRuntime.jsx("div", { className: styles$9.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$9.pickerItem} ${selectedHour === i ? styles$9.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsxRuntime.jsx("div", { className: styles$9.pickerDivider, children: ":" }), jsxRuntime.jsxs("div", { className: styles$9.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$9.pickerLabel, children: "Minutes" }), jsxRuntime.jsx("div", { className: styles$9.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$9.pickerItem} ${selectedMinute === i ? styles$9.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxRuntime.jsxs("div", { className: styles$9.modalActions, children: [jsxRuntime.jsx("button", { className: styles$9.cancelButton, onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { className: styles$9.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
|
|
1187
1423
|
}
|
|
1188
1424
|
|
|
1189
|
-
var styles$
|
|
1425
|
+
var styles$8 = {"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-"};
|
|
1190
1426
|
|
|
1191
1427
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1192
1428
|
const [showPicker, setShowPicker] = React.useState(false);
|
|
@@ -1239,18 +1475,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1239
1475
|
}
|
|
1240
1476
|
};
|
|
1241
1477
|
const getContainerClassName = () => {
|
|
1242
|
-
const classes = [styles$
|
|
1478
|
+
const classes = [styles$8.timeInput];
|
|
1243
1479
|
if (error)
|
|
1244
|
-
classes.push(styles$
|
|
1480
|
+
classes.push(styles$8.error);
|
|
1245
1481
|
if (success)
|
|
1246
|
-
classes.push(styles$
|
|
1482
|
+
classes.push(styles$8.success);
|
|
1247
1483
|
if (loading)
|
|
1248
|
-
classes.push(styles$
|
|
1484
|
+
classes.push(styles$8.loading);
|
|
1249
1485
|
if (disabled)
|
|
1250
|
-
classes.push(styles$
|
|
1486
|
+
classes.push(styles$8.disabled);
|
|
1251
1487
|
return classes.join(' ');
|
|
1252
1488
|
};
|
|
1253
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$
|
|
1489
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$8.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$8.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$8.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$8.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$8.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 })] }));
|
|
1254
1490
|
}
|
|
1255
1491
|
|
|
1256
1492
|
const ThemeContext = React.createContext(undefined);
|
|
@@ -1262,7 +1498,7 @@ const useTheme = () => {
|
|
|
1262
1498
|
return context;
|
|
1263
1499
|
};
|
|
1264
1500
|
|
|
1265
|
-
var styles$
|
|
1501
|
+
var styles$7 = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
|
|
1266
1502
|
|
|
1267
1503
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', }) => {
|
|
1268
1504
|
const { theme, setTheme } = useTheme();
|
|
@@ -1279,16 +1515,44 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1279
1515
|
if (variant === 'toggle') {
|
|
1280
1516
|
// Simple toggle between light and dark
|
|
1281
1517
|
const isDark = theme.includes('dark');
|
|
1282
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1518
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(FiMoon, { size: 14 }) : jsxRuntime.jsx(FiSun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: isDark ? 'Dark' : 'Light' })] }));
|
|
1283
1519
|
}
|
|
1284
1520
|
if (variant === 'dropdown') {
|
|
1285
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1521
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentTheme.icon, showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentTheme.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$7.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
|
|
1286
1522
|
}
|
|
1287
1523
|
// Default button variant - cycles through themes
|
|
1288
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1524
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$7.button} ${className}`, onClick: () => {
|
|
1289
1525
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1290
1526
|
setTheme(themes[nextIndex].value);
|
|
1291
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentTheme.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$
|
|
1527
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentTheme.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$7.iconWrapper, children: currentTheme.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$7.label, children: currentTheme.label })] }));
|
|
1528
|
+
};
|
|
1529
|
+
|
|
1530
|
+
// THIS FILE IS AUTO GENERATED
|
|
1531
|
+
function SiJira (props) {
|
|
1532
|
+
return GenIcon({"attr":{"role":"img","viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"},"child":[]}]})(props);
|
|
1533
|
+
}
|
|
1534
|
+
|
|
1535
|
+
var styles$6 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1536
|
+
|
|
1537
|
+
const tabs = [
|
|
1538
|
+
{ id: 'details', icon: FiInfo, label: 'Dettagli' },
|
|
1539
|
+
{ id: 'github', icon: FiGithub, label: 'GitHub' },
|
|
1540
|
+
{ id: 'jira', icon: SiJira, label: 'Jira' },
|
|
1541
|
+
{ id: 'functional', icon: FiInfo, label: 'Analisi funzionale' }
|
|
1542
|
+
];
|
|
1543
|
+
const Tabs = ({ activeTab, onTabChange }) => {
|
|
1544
|
+
return (jsxRuntime.jsx("div", { className: styles$6.tabs, children: tabs.map((tab) => {
|
|
1545
|
+
const Icon = tab.icon;
|
|
1546
|
+
const isActive = activeTab === tab.id;
|
|
1547
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
|
|
1548
|
+
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1549
|
+
}, transition: {
|
|
1550
|
+
rotate: {
|
|
1551
|
+
duration: 0.5,
|
|
1552
|
+
ease: 'easeInOut'
|
|
1553
|
+
}
|
|
1554
|
+
}, children: jsxRuntime.jsx(Icon, { className: styles$6.tabIcon }) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
|
|
1555
|
+
}) }));
|
|
1292
1556
|
};
|
|
1293
1557
|
|
|
1294
1558
|
var desktopStyles = {"navbar":"Navbar-module_navbar__-SNiN","navbarSidebar":"Navbar-module_navbarSidebar__RVVL8","navbarTop":"Navbar-module_navbarTop__MLI-S","navList":"Navbar-module_navList__764oY","navItem":"Navbar-module_navItem__cbeLP","navbarMinimal":"Navbar-module_navbarMinimal__7gs0n","navLogo":"Navbar-module_navLogo__y0AxI","logoContainer":"Navbar-module_logoContainer__zJG3x","logoImage":"Navbar-module_logoImage__1Ptmz","logoPlaceholder":"Navbar-module_logoPlaceholder__aIREi","logoContent":"Navbar-module_logoContent__CjPyL","logoText":"Navbar-module_logoText__bTwI0","logoSubtitle":"Navbar-module_logoSubtitle__UA95I","subNavItem":"Navbar-module_subNavItem__WN9is","navLink":"Navbar-module_navLink__I-45k","active":"Navbar-module_active__tLLqx","activeBackground":"Navbar-module_activeBackground__ikyOn","navIcon":"Navbar-module_navIcon__uU4yD","activeIcon":"Navbar-module_activeIcon__omRDk","navText":"Navbar-module_navText__4e0cK","activeText":"Navbar-module_activeText__zSzJC","navBadge":"Navbar-module_navBadge__mLur9","chevron":"Navbar-module_chevron__nmRNk","subNavList":"Navbar-module_subNavList__YsOQP","navFooter":"Navbar-module_navFooter__p1wMO","mobileMenuButton":"Navbar-module_mobileMenuButton__BrALw","mobileBackdrop":"Navbar-module_mobileBackdrop__bgxCV","mobileMenuOpen":"Navbar-module_mobileMenuOpen__oICVa"};
|
|
@@ -2192,6 +2456,7 @@ exports.DateInput = DateInput;
|
|
|
2192
2456
|
exports.EditFAB = EditFAB;
|
|
2193
2457
|
exports.MoodChart = MoodChart;
|
|
2194
2458
|
exports.Navbar = Navbar;
|
|
2459
|
+
exports.NumberStepper = NumberStepper;
|
|
2195
2460
|
exports.PieChart = PieChart;
|
|
2196
2461
|
exports.QuantifiableHabitsChart = QuantifiableHabitsChart;
|
|
2197
2462
|
exports.SearchBar = SearchBar;
|
|
@@ -2199,11 +2464,13 @@ exports.SearchableDropdown = SearchableDropdown;
|
|
|
2199
2464
|
exports.SelectInput = SelectInput;
|
|
2200
2465
|
exports.SleepChart = SleepChart;
|
|
2201
2466
|
exports.SunburstChart = SunburstChart;
|
|
2467
|
+
exports.Tabs = Tabs;
|
|
2202
2468
|
exports.TextArea = TextArea;
|
|
2203
2469
|
exports.TextInput = TextInput;
|
|
2204
2470
|
exports.ThemeProvider = ThemeProvider;
|
|
2205
2471
|
exports.ThemeSwitcher = ThemeSwitcher;
|
|
2206
2472
|
exports.TimeInput = TimeInput;
|
|
2207
2473
|
exports.Toggle = Toggle;
|
|
2474
|
+
exports.ToggleButton = ToggleButton;
|
|
2208
2475
|
exports.useTheme = useTheme$1;
|
|
2209
2476
|
//# sourceMappingURL=index.js.map
|