@stfrigerio/sito-template 0.1.5 → 0.1.7
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/molecules/ThemeSwitcher/ThemeSwitcher.d.ts +9 -2
- package/dist/components/molecules/ThemeSwitcher/ThemeSwitcher.d.ts.map +1 -1
- package/dist/components/molecules/index.d.ts +3 -1
- package/dist/components/molecules/index.d.ts.map +1 -1
- package/dist/index.esm.js +150 -107
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +150 -106
- 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.esm.js
CHANGED
|
@@ -30,7 +30,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
|
|
|
30
30
|
return (jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
var styles$
|
|
33
|
+
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"};
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* Button Component
|
|
@@ -73,17 +73,17 @@ var styles$m = {"button":"Button-module_button__c6nkW","primary":"Button-module_
|
|
|
73
73
|
*/
|
|
74
74
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
|
|
75
75
|
const buttonClasses = [
|
|
76
|
-
styles$
|
|
77
|
-
styles$
|
|
78
|
-
styles$
|
|
79
|
-
fullWidth && styles$
|
|
80
|
-
loading && styles$
|
|
76
|
+
styles$n.button,
|
|
77
|
+
styles$n[variant],
|
|
78
|
+
styles$n[size],
|
|
79
|
+
fullWidth && styles$n.fullWidth,
|
|
80
|
+
loading && styles$n.loading,
|
|
81
81
|
className
|
|
82
82
|
].filter(Boolean).join(' ');
|
|
83
|
-
return (jsxs(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 && jsx("span", { className: styles$
|
|
83
|
+
return (jsxs(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 && jsx("span", { className: styles$n.spinner }), iconLeft && jsx("span", { className: styles$n.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$n.iconRight, children: iconRight })] }));
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
-
var styles$
|
|
86
|
+
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"};
|
|
87
87
|
|
|
88
88
|
/**
|
|
89
89
|
* Card Component
|
|
@@ -138,18 +138,18 @@ var styles$l = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hovera
|
|
|
138
138
|
*/
|
|
139
139
|
const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, className = '', onClick, motionProps, ...rest }) => {
|
|
140
140
|
const cardClasses = [
|
|
141
|
-
styles$
|
|
142
|
-
styles$
|
|
143
|
-
hoverable && styles$
|
|
144
|
-
clickable && styles$
|
|
145
|
-
!padding && styles$
|
|
141
|
+
styles$m.card,
|
|
142
|
+
styles$m[variant],
|
|
143
|
+
hoverable && styles$m.hoverable,
|
|
144
|
+
clickable && styles$m.clickable,
|
|
145
|
+
!padding && styles$m.noPadding,
|
|
146
146
|
className
|
|
147
147
|
].filter(Boolean).join(' ');
|
|
148
|
-
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$
|
|
148
|
+
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$m.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$m.image }) })), header && jsx("div", { className: styles$m.header, children: header }), (title || subtitle) && !header && (jsxs("div", { className: styles$m.header, children: [title && jsx("h3", { className: styles$m.title, children: title }), subtitle && jsx("p", { className: styles$m.subtitle, children: subtitle })] })), children && (jsx("div", { className: padding ? styles$m.body : undefined, children: children })), footer && jsx("div", { className: styles$m.footer, children: footer })] }));
|
|
149
149
|
return (jsx(motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
150
150
|
};
|
|
151
151
|
|
|
152
|
-
var styles$
|
|
152
|
+
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"};
|
|
153
153
|
|
|
154
154
|
/**
|
|
155
155
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -184,21 +184,21 @@ var styles$k = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
|
|
|
184
184
|
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
185
185
|
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
186
186
|
const getContainerClassName = () => {
|
|
187
|
-
const classes = [styles$
|
|
187
|
+
const classes = [styles$l.textInput];
|
|
188
188
|
if (success)
|
|
189
|
-
classes.push(styles$
|
|
189
|
+
classes.push(styles$l.success);
|
|
190
190
|
if (loading)
|
|
191
|
-
classes.push(styles$
|
|
191
|
+
classes.push(styles$l.loading);
|
|
192
192
|
if (icon)
|
|
193
|
-
classes.push(styles$
|
|
193
|
+
classes.push(styles$l.withIcon);
|
|
194
194
|
if (actionButton)
|
|
195
|
-
classes.push(styles$
|
|
195
|
+
classes.push(styles$l.withAction);
|
|
196
196
|
return classes.join(' ');
|
|
197
197
|
};
|
|
198
|
-
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$
|
|
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$
|
|
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"};
|
|
202
202
|
|
|
203
203
|
/**
|
|
204
204
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -251,7 +251,7 @@ 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$
|
|
254
|
+
return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: styles$k.arrayInputItem, 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 }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
255
255
|
}
|
|
256
256
|
// Complex object array implementation
|
|
257
257
|
function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
@@ -276,10 +276,10 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
|
276
276
|
// Generate key from all field values
|
|
277
277
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
278
278
|
};
|
|
279
|
-
return (jsxs("div", { className: styles$
|
|
279
|
+
return (jsxs("div", { className: styles$k.arrayInput, children: [jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, children: [jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (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), children: "Remove" })] }, generateKey(value, index)))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
280
280
|
}
|
|
281
281
|
|
|
282
|
-
var styles$
|
|
282
|
+
var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
283
283
|
|
|
284
284
|
/**
|
|
285
285
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -323,7 +323,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
323
323
|
checkboxRef.current.indeterminate = indeterminate;
|
|
324
324
|
}
|
|
325
325
|
}, [indeterminate]);
|
|
326
|
-
return (jsxs("label", { className: styles$
|
|
326
|
+
return (jsxs("label", { className: styles$j.checkboxLabel, children: [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 && jsx("span", { className: styles$j.checkboxText, children: label })] }));
|
|
327
327
|
};
|
|
328
328
|
|
|
329
329
|
var DefaultContext = {
|
|
@@ -396,6 +396,10 @@ function FiBook (props) {
|
|
|
396
396
|
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);
|
|
397
397
|
}function FiFolder (props) {
|
|
398
398
|
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);
|
|
399
|
+
}function FiGithub (props) {
|
|
400
|
+
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);
|
|
401
|
+
}function FiInfo (props) {
|
|
402
|
+
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);
|
|
399
403
|
}function FiMenu (props) {
|
|
400
404
|
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);
|
|
401
405
|
}function FiMessageSquare (props) {
|
|
@@ -442,7 +446,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
442
446
|
return '';
|
|
443
447
|
};
|
|
444
448
|
|
|
445
|
-
var styles$
|
|
449
|
+
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"};
|
|
446
450
|
|
|
447
451
|
/**
|
|
448
452
|
* DateInput component - European format date picker with manual input support
|
|
@@ -529,19 +533,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
529
533
|
}
|
|
530
534
|
};
|
|
531
535
|
const getClassName = () => {
|
|
532
|
-
const classes = [styles$
|
|
536
|
+
const classes = [styles$i.dateInput];
|
|
533
537
|
if (error)
|
|
534
|
-
classes.push(styles$
|
|
538
|
+
classes.push(styles$i.error);
|
|
535
539
|
if (success)
|
|
536
|
-
classes.push(styles$
|
|
540
|
+
classes.push(styles$i.success);
|
|
537
541
|
if (loading)
|
|
538
|
-
classes.push(styles$
|
|
542
|
+
classes.push(styles$i.loading);
|
|
539
543
|
return classes.join(' ');
|
|
540
544
|
};
|
|
541
|
-
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$
|
|
545
|
+
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$i.label, children: label }), jsxs("div", { className: styles$i.inputWrapper, children: [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 }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$i.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$i.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
542
546
|
}
|
|
543
547
|
|
|
544
|
-
var styles$
|
|
548
|
+
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"};
|
|
545
549
|
|
|
546
550
|
/**
|
|
547
551
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -646,23 +650,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
646
650
|
}
|
|
647
651
|
};
|
|
648
652
|
const getTriggerClassName = () => {
|
|
649
|
-
const classes = [styles$
|
|
653
|
+
const classes = [styles$h.dropdownTrigger];
|
|
650
654
|
if (isOpen)
|
|
651
|
-
classes.push(styles$
|
|
655
|
+
classes.push(styles$h.open);
|
|
652
656
|
if (loading)
|
|
653
|
-
classes.push(styles$
|
|
657
|
+
classes.push(styles$h.loading);
|
|
654
658
|
if (error)
|
|
655
|
-
classes.push(styles$
|
|
659
|
+
classes.push(styles$h.error);
|
|
656
660
|
return classes.join(' ');
|
|
657
661
|
};
|
|
658
|
-
return (jsxs("div", { className: styles$
|
|
662
|
+
return (jsxs("div", { className: styles$h.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$h.dropdownValue} ${!displayValue ? styles$h.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$h.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(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: [jsxs("div", { className: styles$h.dropdownSearch, children: [jsx(FiSearch, { className: styles$h.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$h.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$h.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
659
663
|
const isSelected = value === opt.value;
|
|
660
664
|
const isHighlighted = highlightedIndex === index;
|
|
661
|
-
return (jsxs(motion.button, { type: "button", className: `${styles$
|
|
662
|
-
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$
|
|
665
|
+
return (jsxs(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: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$h.checkIcon })] }, `${opt.value}-${index}`));
|
|
666
|
+
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$h.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
663
667
|
}
|
|
664
668
|
|
|
665
|
-
var styles$
|
|
669
|
+
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"};
|
|
666
670
|
|
|
667
671
|
/**
|
|
668
672
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -699,23 +703,23 @@ var styles$f = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
699
703
|
*/
|
|
700
704
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
701
705
|
const getClassName = () => {
|
|
702
|
-
const classes = [styles$
|
|
706
|
+
const classes = [styles$g.selectInput];
|
|
703
707
|
if (error)
|
|
704
|
-
classes.push(styles$
|
|
708
|
+
classes.push(styles$g.error);
|
|
705
709
|
if (success)
|
|
706
|
-
classes.push(styles$
|
|
710
|
+
classes.push(styles$g.success);
|
|
707
711
|
if (loading)
|
|
708
|
-
classes.push(styles$
|
|
712
|
+
classes.push(styles$g.loading);
|
|
709
713
|
return classes.join(' ');
|
|
710
714
|
};
|
|
711
|
-
return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$
|
|
715
|
+
return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$g.selectWrapper, children: [jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
712
716
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
713
717
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
714
718
|
return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
715
|
-
})] }), jsx(FiChevronDown, { className: styles$
|
|
719
|
+
})] }), jsx(FiChevronDown, { className: styles$g.selectIcon })] })] }));
|
|
716
720
|
}
|
|
717
721
|
|
|
718
|
-
var styles$
|
|
722
|
+
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-"};
|
|
719
723
|
|
|
720
724
|
/**
|
|
721
725
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -750,34 +754,34 @@ var styles$e = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
750
754
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false }) {
|
|
751
755
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
752
756
|
const getContainerClassName = () => {
|
|
753
|
-
const classes = [styles$
|
|
757
|
+
const classes = [styles$f.textareaContainer];
|
|
754
758
|
if (error)
|
|
755
|
-
classes.push(styles$
|
|
759
|
+
classes.push(styles$f.error);
|
|
756
760
|
if (success)
|
|
757
|
-
classes.push(styles$
|
|
761
|
+
classes.push(styles$f.success);
|
|
758
762
|
if (loading)
|
|
759
|
-
classes.push(styles$
|
|
763
|
+
classes.push(styles$f.loading);
|
|
760
764
|
if (focusMode)
|
|
761
|
-
classes.push(styles$
|
|
765
|
+
classes.push(styles$f.focusMode);
|
|
762
766
|
return classes.join(' ');
|
|
763
767
|
};
|
|
764
768
|
const getCharCountClassName = () => {
|
|
765
769
|
if (!maxLength)
|
|
766
|
-
return styles$
|
|
767
|
-
const classes = [styles$
|
|
770
|
+
return styles$f.characterCount;
|
|
771
|
+
const classes = [styles$f.characterCount];
|
|
768
772
|
const percentage = (value.length / maxLength) * 100;
|
|
769
773
|
if (percentage >= 100) {
|
|
770
|
-
classes.push(styles$
|
|
774
|
+
classes.push(styles$f.atLimit);
|
|
771
775
|
}
|
|
772
776
|
else if (percentage >= 80) {
|
|
773
|
-
classes.push(styles$
|
|
777
|
+
classes.push(styles$f.nearLimit);
|
|
774
778
|
}
|
|
775
779
|
return classes.join(' ');
|
|
776
780
|
};
|
|
777
|
-
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: textareaId, className: styles$
|
|
781
|
+
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: textareaId, className: styles$f.textareaLabel, children: [label, required && jsx("span", { className: styles$f.requiredIndicator, children: "*" })] }), 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 && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
|
|
778
782
|
}
|
|
779
783
|
|
|
780
|
-
var styles$
|
|
784
|
+
var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
781
785
|
|
|
782
786
|
/**
|
|
783
787
|
* Toggle Component
|
|
@@ -822,10 +826,10 @@ var styles$d = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
|
|
|
822
826
|
*/
|
|
823
827
|
function Toggle(props) {
|
|
824
828
|
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
|
|
825
|
-
return (jsxs("div", { className: styles$
|
|
829
|
+
return (jsxs("div", { className: styles$e.toggleContainer, children: [jsxs("button", { className: `${styles$e.toggleButton} ${!isOn ? styles$e.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$e.toggleButton} ${isOn ? styles$e.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
|
|
826
830
|
}
|
|
827
831
|
|
|
828
|
-
var styles$
|
|
832
|
+
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"};
|
|
829
833
|
|
|
830
834
|
/**
|
|
831
835
|
* NumberStepper Component
|
|
@@ -942,18 +946,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
942
946
|
setDisplayValue(finalValue);
|
|
943
947
|
}, [displayValue, min, max, step, onChange]);
|
|
944
948
|
const containerClasses = [
|
|
945
|
-
styles$
|
|
946
|
-
styles$
|
|
947
|
-
styles$
|
|
948
|
-
disabled && styles$
|
|
949
|
+
styles$d.container,
|
|
950
|
+
styles$d[size],
|
|
951
|
+
styles$d[variant],
|
|
952
|
+
disabled && styles$d.disabled,
|
|
949
953
|
className
|
|
950
954
|
].filter(Boolean).join(' ');
|
|
951
955
|
const isDecrementDisabled = disabled || value <= min;
|
|
952
956
|
const isIncrementDisabled = disabled || value >= max;
|
|
953
|
-
return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$
|
|
957
|
+
return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$d.header, children: [icon && jsx("span", { className: styles$d.icon, children: icon }), label && jsx("label", { className: styles$d.label, children: label })] })), jsxs("div", { className: styles$d.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(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 ? (jsx("span", { className: styles$d.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$d.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$d.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$d.valueWrapper, children: 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) }) }), jsx(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 ? (jsx("span", { className: styles$d.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$d.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$d.limits, children: [jsx("span", { className: styles$d.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$d.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
954
958
|
};
|
|
955
959
|
|
|
956
|
-
var styles$
|
|
960
|
+
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"};
|
|
957
961
|
|
|
958
962
|
/**
|
|
959
963
|
* ToggleButton Component
|
|
@@ -991,18 +995,18 @@ var styles$b = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
991
995
|
*/
|
|
992
996
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
993
997
|
const buttonClasses = [
|
|
994
|
-
styles$
|
|
995
|
-
styles$
|
|
996
|
-
styles$
|
|
997
|
-
active && styles$
|
|
998
|
-
active && styles$
|
|
999
|
-
disabled && styles$
|
|
1000
|
-
animation !== 'none' && styles$
|
|
998
|
+
styles$c.button,
|
|
999
|
+
styles$c[size],
|
|
1000
|
+
styles$c[variant],
|
|
1001
|
+
active && styles$c.active,
|
|
1002
|
+
active && styles$c[`active-${activeColor}`],
|
|
1003
|
+
disabled && styles$c.disabled,
|
|
1004
|
+
animation !== 'none' && styles$c[`animation-${animation}`],
|
|
1001
1005
|
className
|
|
1002
1006
|
].filter(Boolean).join(' ');
|
|
1003
1007
|
const labelClasses = [
|
|
1004
|
-
styles$
|
|
1005
|
-
hideLabelOnMobile && styles$
|
|
1008
|
+
styles$c.label,
|
|
1009
|
+
hideLabelOnMobile && styles$c.hideMobile
|
|
1006
1010
|
].filter(Boolean).join(' ');
|
|
1007
1011
|
const iconVariants = {
|
|
1008
1012
|
scale: {
|
|
@@ -1054,10 +1058,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1054
1058
|
}
|
|
1055
1059
|
}
|
|
1056
1060
|
};
|
|
1057
|
-
return (jsxs(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: [jsx(motion.div, { className: styles$
|
|
1061
|
+
return (jsxs(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: [jsx(motion.div, { className: styles$c.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$c.content, children: [icon && (jsx(motion.div, { className: styles$c.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$c.icon, children: icon })) : (jsx("div", { className: styles$c.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$c.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(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 } })) })] }));
|
|
1058
1062
|
};
|
|
1059
1063
|
|
|
1060
|
-
var styles$
|
|
1064
|
+
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"};
|
|
1061
1065
|
|
|
1062
1066
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
1063
1067
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -1142,15 +1146,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1142
1146
|
};
|
|
1143
1147
|
const getVariantClass = () => {
|
|
1144
1148
|
if (isSaving)
|
|
1145
|
-
return styles$
|
|
1149
|
+
return styles$b.primary;
|
|
1146
1150
|
if (isEditMode) {
|
|
1147
|
-
return hasUnsavedChanges ? styles$
|
|
1151
|
+
return hasUnsavedChanges ? styles$b.success : styles$b.secondary;
|
|
1148
1152
|
}
|
|
1149
|
-
return styles$
|
|
1153
|
+
return styles$b.primary;
|
|
1150
1154
|
};
|
|
1151
1155
|
const getIcon = () => {
|
|
1152
1156
|
if (isSaving) {
|
|
1153
|
-
return jsx("div", { className: styles$
|
|
1157
|
+
return jsx("div", { className: styles$b.loader });
|
|
1154
1158
|
}
|
|
1155
1159
|
if (isEditMode) {
|
|
1156
1160
|
return hasUnsavedChanges ? jsx(Check, { size: 24 }) : jsx(X, { size: 24 });
|
|
@@ -1165,14 +1169,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1165
1169
|
}
|
|
1166
1170
|
return "Enter edit mode";
|
|
1167
1171
|
};
|
|
1168
|
-
return (jsx(motion.button, { ref: fabRef, className: `${styles$
|
|
1172
|
+
return (jsx(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: {
|
|
1169
1173
|
type: "spring",
|
|
1170
1174
|
stiffness: 260,
|
|
1171
1175
|
damping: 20
|
|
1172
1176
|
}, children: getIcon() }));
|
|
1173
1177
|
};
|
|
1174
1178
|
|
|
1175
|
-
var styles$
|
|
1179
|
+
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"};
|
|
1176
1180
|
|
|
1177
1181
|
const filterOptions = [
|
|
1178
1182
|
{ value: 'all', label: 'All', icon: FiSearch },
|
|
@@ -1362,18 +1366,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1362
1366
|
return text || '';
|
|
1363
1367
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1364
1368
|
const parts = text.split(regex);
|
|
1365
|
-
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$
|
|
1369
|
+
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$a.highlight, children: part }, index)) : (part));
|
|
1366
1370
|
};
|
|
1367
|
-
return (jsxs("div", { ref: searchRef, className: `${styles$
|
|
1371
|
+
return (jsxs("div", { ref: searchRef, className: `${styles$a.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$a.searchInputWrapper, children: [jsx(FiSearch, { className: styles$a.searchIcon }), 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 && (jsx(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: jsx(FiX, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$a.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsx(AnimatePresence, { children: isDropdownOpen && (jsx(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 ? (jsxs("div", { className: styles$a.loadingState, children: [jsx("div", { className: styles$a.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$a.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$a.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
1368
1372
|
const Icon = entityIcons[type];
|
|
1369
|
-
return (jsxs("div", { className: styles$
|
|
1373
|
+
return (jsxs("div", { className: styles$a.resultGroup, children: [jsxs("div", { className: styles$a.groupHeader, children: [Icon && jsx(Icon, { className: styles$a.groupIcon }), jsx("span", { className: styles$a.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$a.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$a.groupResults, children: groupResults.map((result) => {
|
|
1370
1374
|
const globalIndex = results.indexOf(result);
|
|
1371
|
-
return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
1375
|
+
return (jsxs(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: [jsxs("div", { className: styles$a.resultContent, children: [jsx("div", { className: styles$a.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$a.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$a.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
1372
1376
|
}) })] }, type));
|
|
1373
1377
|
}) })) })) })] }));
|
|
1374
1378
|
};
|
|
1375
1379
|
|
|
1376
|
-
var styles$
|
|
1380
|
+
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"};
|
|
1377
1381
|
|
|
1378
1382
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1379
1383
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1394,10 +1398,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1394
1398
|
};
|
|
1395
1399
|
if (!isOpen)
|
|
1396
1400
|
return null;
|
|
1397
|
-
return (jsx("div", { className: styles$
|
|
1401
|
+
return (jsx("div", { className: styles$9.modalOverlay, onClick: onClose, children: jsxs("div", { className: styles$9.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: styles$9.modalHeader, children: [jsx("h3", { children: "Select Time" }), jsx("button", { className: styles$9.closeButton, onClick: onClose, "aria-label": "Close", children: jsx(FiX, {}) })] }), jsxs("div", { className: styles$9.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxs("div", { className: styles$9.pickerContainer, children: [jsxs("div", { className: styles$9.pickerColumn, children: [jsx("div", { className: styles$9.pickerLabel, children: "Hours" }), jsx("div", { className: styles$9.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsx("button", { className: `${styles$9.pickerItem} ${selectedHour === i ? styles$9.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsx("div", { className: styles$9.pickerDivider, children: ":" }), jsxs("div", { className: styles$9.pickerColumn, children: [jsx("div", { className: styles$9.pickerLabel, children: "Minutes" }), jsx("div", { className: styles$9.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsx("button", { className: `${styles$9.pickerItem} ${selectedMinute === i ? styles$9.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxs("div", { className: styles$9.modalActions, children: [jsx("button", { className: styles$9.cancelButton, onClick: onClose, children: "Cancel" }), jsx("button", { className: styles$9.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
|
|
1398
1402
|
}
|
|
1399
1403
|
|
|
1400
|
-
var styles$
|
|
1404
|
+
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-"};
|
|
1401
1405
|
|
|
1402
1406
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1403
1407
|
const [showPicker, setShowPicker] = useState(false);
|
|
@@ -1450,18 +1454,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1450
1454
|
}
|
|
1451
1455
|
};
|
|
1452
1456
|
const getContainerClassName = () => {
|
|
1453
|
-
const classes = [styles$
|
|
1457
|
+
const classes = [styles$8.timeInput];
|
|
1454
1458
|
if (error)
|
|
1455
|
-
classes.push(styles$
|
|
1459
|
+
classes.push(styles$8.error);
|
|
1456
1460
|
if (success)
|
|
1457
|
-
classes.push(styles$
|
|
1461
|
+
classes.push(styles$8.success);
|
|
1458
1462
|
if (loading)
|
|
1459
|
-
classes.push(styles$
|
|
1463
|
+
classes.push(styles$8.loading);
|
|
1460
1464
|
if (disabled)
|
|
1461
|
-
classes.push(styles$
|
|
1465
|
+
classes.push(styles$8.disabled);
|
|
1462
1466
|
return classes.join(' ');
|
|
1463
1467
|
};
|
|
1464
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$
|
|
1468
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$8.label, children: [label, required && jsx("span", { className: styles$8.required, children: "*" })] }), jsxs("div", { className: styles$8.inputWrapper, children: [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:]*" }), jsx("button", { type: "button", onClick: handleClockClick, className: styles$8.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsx(FiClock, { size: 20 }) })] })] }), jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
|
|
1465
1469
|
}
|
|
1466
1470
|
|
|
1467
1471
|
const ThemeContext = createContext(undefined);
|
|
@@ -1473,11 +1477,21 @@ const useTheme = () => {
|
|
|
1473
1477
|
return context;
|
|
1474
1478
|
};
|
|
1475
1479
|
|
|
1476
|
-
var styles$
|
|
1480
|
+
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"};
|
|
1477
1481
|
|
|
1478
|
-
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', }) => {
|
|
1479
|
-
|
|
1480
|
-
const
|
|
1482
|
+
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
|
|
1483
|
+
// Try to use internal context if available, otherwise use props
|
|
1484
|
+
const contextTheme = (() => {
|
|
1485
|
+
try {
|
|
1486
|
+
return useTheme();
|
|
1487
|
+
}
|
|
1488
|
+
catch {
|
|
1489
|
+
return null;
|
|
1490
|
+
}
|
|
1491
|
+
})();
|
|
1492
|
+
const theme = currentTheme ?? contextTheme?.theme ?? 'light';
|
|
1493
|
+
const setTheme = onThemeChange ?? contextTheme?.setTheme ?? (() => { });
|
|
1494
|
+
const defaultThemes = [
|
|
1481
1495
|
{ value: 'light', label: 'Light', icon: jsx(FiSun, {}) },
|
|
1482
1496
|
{ value: 'dark', label: 'Dark', icon: jsx(FiMoon, {}) },
|
|
1483
1497
|
{ value: 'lossito', label: 'Lossito Light', icon: '✨' },
|
|
@@ -1485,21 +1499,50 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1485
1499
|
{ value: 'dmood', label: 'Dmood Light', icon: '💙' },
|
|
1486
1500
|
{ value: 'dmood-dark', label: 'Dmood Dark', icon: '🌌' },
|
|
1487
1501
|
];
|
|
1502
|
+
const themes = customThemes ?? defaultThemes;
|
|
1488
1503
|
const currentThemeIndex = themes.findIndex(t => t.value === theme);
|
|
1489
|
-
const
|
|
1504
|
+
const currentThemeData = themes[currentThemeIndex] ?? themes[0];
|
|
1490
1505
|
if (variant === 'toggle') {
|
|
1491
1506
|
// Simple toggle between light and dark
|
|
1492
1507
|
const isDark = theme.includes('dark');
|
|
1493
|
-
return (jsxs(motion.button, { className: `${styles$
|
|
1508
|
+
return (jsxs(motion.button, { className: `${styles$7.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsx(motion.div, { className: styles$7.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsx(motion.div, { className: styles$7.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsx(FiMoon, { size: 14 }) : jsx(FiSun, { size: 14 }) }) }), showLabel && jsx("span", { className: styles$7.label, children: isDark ? 'Dark' : 'Light' })] }));
|
|
1494
1509
|
}
|
|
1495
1510
|
if (variant === 'dropdown') {
|
|
1496
|
-
return (jsxs("div", { className: `${styles$
|
|
1511
|
+
return (jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$7.label, children: currentThemeData.label })] }), jsx(motion.div, { className: styles$7.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxs(motion.button, { className: `${styles$7.dropdownItem} ${theme === t.value ? styles$7.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsx("span", { className: styles$7.icon, children: t.icon }), jsx("span", { className: styles$7.text, children: t.label })] }, t.value))) })] }));
|
|
1497
1512
|
}
|
|
1498
1513
|
// Default button variant - cycles through themes
|
|
1499
|
-
return (jsxs(motion.button, { className: `${styles$
|
|
1514
|
+
return (jsxs(motion.button, { className: `${styles$7.button} ${className}`, onClick: () => {
|
|
1500
1515
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1501
1516
|
setTheme(themes[nextIndex].value);
|
|
1502
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${
|
|
1517
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(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: currentThemeData.icon }, theme), showLabel && jsx("span", { className: styles$7.label, children: currentThemeData.label })] }));
|
|
1518
|
+
};
|
|
1519
|
+
|
|
1520
|
+
// THIS FILE IS AUTO GENERATED
|
|
1521
|
+
function SiJira (props) {
|
|
1522
|
+
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);
|
|
1523
|
+
}
|
|
1524
|
+
|
|
1525
|
+
var styles$6 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1526
|
+
|
|
1527
|
+
const tabs = [
|
|
1528
|
+
{ id: 'details', icon: FiInfo, label: 'Dettagli' },
|
|
1529
|
+
{ id: 'github', icon: FiGithub, label: 'GitHub' },
|
|
1530
|
+
{ id: 'jira', icon: SiJira, label: 'Jira' },
|
|
1531
|
+
{ id: 'functional', icon: FiInfo, label: 'Analisi funzionale' }
|
|
1532
|
+
];
|
|
1533
|
+
const Tabs = ({ activeTab, onTabChange }) => {
|
|
1534
|
+
return (jsx("div", { className: styles$6.tabs, children: tabs.map((tab) => {
|
|
1535
|
+
const Icon = tab.icon;
|
|
1536
|
+
const isActive = activeTab === tab.id;
|
|
1537
|
+
return (jsxs(motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
|
|
1538
|
+
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1539
|
+
}, transition: {
|
|
1540
|
+
rotate: {
|
|
1541
|
+
duration: 0.5,
|
|
1542
|
+
ease: 'easeInOut'
|
|
1543
|
+
}
|
|
1544
|
+
}, children: jsx(Icon, { className: styles$6.tabIcon }) }), jsx("span", { children: tab.label })] }, tab.id));
|
|
1545
|
+
}) }));
|
|
1503
1546
|
};
|
|
1504
1547
|
|
|
1505
1548
|
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"};
|
|
@@ -2394,5 +2437,5 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
2394
2437
|
} }), jsx("span", { className: styles.legendLabel, children: item.name }), jsx("span", { className: styles.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
|
|
2395
2438
|
};
|
|
2396
2439
|
|
|
2397
|
-
export { ArrayInput, BooleansHeatmap, Button, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, useTheme$1 as useTheme };
|
|
2440
|
+
export { ArrayInput, BooleansHeatmap, Button, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, useTheme$1 as useTheme };
|
|
2398
2441
|
//# sourceMappingURL=index.esm.js.map
|