@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.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$k = {"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$j = {"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$i = {"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$d = {"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$c = {"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,242 @@ var styles$b = {"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"};
|
|
833
|
+
|
|
834
|
+
/**
|
|
835
|
+
* NumberStepper Component
|
|
836
|
+
*
|
|
837
|
+
* @component
|
|
838
|
+
* @description
|
|
839
|
+
* A number input component with increment and decrement controls.
|
|
840
|
+
* Supports keyboard navigation, min/max limits, and custom step values.
|
|
841
|
+
*
|
|
842
|
+
* @example
|
|
843
|
+
* // Basic usage
|
|
844
|
+
* <NumberStepper
|
|
845
|
+
* value={count}
|
|
846
|
+
* onChange={setCount}
|
|
847
|
+
* min={0}
|
|
848
|
+
* max={10}
|
|
849
|
+
* />
|
|
850
|
+
*
|
|
851
|
+
* @example
|
|
852
|
+
* // With label and icon
|
|
853
|
+
* <NumberStepper
|
|
854
|
+
* value={5}
|
|
855
|
+
* onChange={(val) => setValue(val)}
|
|
856
|
+
* min={0}
|
|
857
|
+
* max={100}
|
|
858
|
+
* step={5}
|
|
859
|
+
* label="Quantity"
|
|
860
|
+
* icon="📦"
|
|
861
|
+
* />
|
|
862
|
+
*
|
|
863
|
+
* @param {NumberStepperProps} props - The props for the NumberStepper component
|
|
864
|
+
* @returns {JSX.Element} The rendered NumberStepper component
|
|
865
|
+
*/
|
|
866
|
+
const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', }) => {
|
|
867
|
+
const [isIncrementing, setIsIncrementing] = useState(false);
|
|
868
|
+
const [isDecrementing, setIsDecrementing] = useState(false);
|
|
869
|
+
const [displayValue, setDisplayValue] = useState(value);
|
|
870
|
+
useEffect(() => {
|
|
871
|
+
setDisplayValue(value);
|
|
872
|
+
}, [value]);
|
|
873
|
+
const handleIncrement = useCallback(() => {
|
|
874
|
+
if (disabled || value >= max)
|
|
875
|
+
return;
|
|
876
|
+
const newValue = Math.min(value + step, max);
|
|
877
|
+
onChange(newValue);
|
|
878
|
+
setIsIncrementing(true);
|
|
879
|
+
setTimeout(() => setIsIncrementing(false), 200);
|
|
880
|
+
}, [value, onChange, max, step, disabled]);
|
|
881
|
+
const handleDecrement = useCallback(() => {
|
|
882
|
+
if (disabled || value <= min)
|
|
883
|
+
return;
|
|
884
|
+
const newValue = Math.max(value - step, min);
|
|
885
|
+
onChange(newValue);
|
|
886
|
+
setIsDecrementing(true);
|
|
887
|
+
setTimeout(() => setIsDecrementing(false), 200);
|
|
888
|
+
}, [value, onChange, min, step, disabled]);
|
|
889
|
+
const handleKeyDown = useCallback((e) => {
|
|
890
|
+
if (!allowKeyboard || disabled)
|
|
891
|
+
return;
|
|
892
|
+
switch (e.key) {
|
|
893
|
+
case 'ArrowUp':
|
|
894
|
+
e.preventDefault();
|
|
895
|
+
handleIncrement();
|
|
896
|
+
break;
|
|
897
|
+
case 'ArrowDown':
|
|
898
|
+
e.preventDefault();
|
|
899
|
+
handleDecrement();
|
|
900
|
+
break;
|
|
901
|
+
case 'PageUp':
|
|
902
|
+
e.preventDefault();
|
|
903
|
+
const bigIncrease = Math.min(value + (step * 10), max);
|
|
904
|
+
onChange(bigIncrease);
|
|
905
|
+
break;
|
|
906
|
+
case 'PageDown':
|
|
907
|
+
e.preventDefault();
|
|
908
|
+
const bigDecrease = Math.max(value - (step * 10), min);
|
|
909
|
+
onChange(bigDecrease);
|
|
910
|
+
break;
|
|
911
|
+
case 'Home':
|
|
912
|
+
e.preventDefault();
|
|
913
|
+
if (min !== -Infinity)
|
|
914
|
+
onChange(min);
|
|
915
|
+
break;
|
|
916
|
+
case 'End':
|
|
917
|
+
e.preventDefault();
|
|
918
|
+
if (max !== Infinity)
|
|
919
|
+
onChange(max);
|
|
920
|
+
break;
|
|
921
|
+
}
|
|
922
|
+
}, [allowKeyboard, disabled, handleIncrement, handleDecrement, value, step, min, max, onChange]);
|
|
923
|
+
const handleInputChange = useCallback((e) => {
|
|
924
|
+
const inputValue = e.target.value;
|
|
925
|
+
if (inputValue === '' || inputValue === '-') {
|
|
926
|
+
setDisplayValue(inputValue);
|
|
927
|
+
return;
|
|
928
|
+
}
|
|
929
|
+
const numValue = parseFloat(inputValue);
|
|
930
|
+
if (!isNaN(numValue)) {
|
|
931
|
+
setDisplayValue(numValue);
|
|
932
|
+
}
|
|
933
|
+
}, []);
|
|
934
|
+
const handleInputBlur = useCallback(() => {
|
|
935
|
+
let finalValue = typeof displayValue === 'string'
|
|
936
|
+
? (displayValue === '' || displayValue === '-' ? min : parseFloat(displayValue))
|
|
937
|
+
: displayValue;
|
|
938
|
+
if (isNaN(finalValue)) {
|
|
939
|
+
finalValue = min;
|
|
940
|
+
}
|
|
941
|
+
finalValue = Math.max(min, Math.min(max, finalValue));
|
|
942
|
+
if (step !== 1) {
|
|
943
|
+
finalValue = Math.round(finalValue / step) * step;
|
|
944
|
+
}
|
|
945
|
+
onChange(finalValue);
|
|
946
|
+
setDisplayValue(finalValue);
|
|
947
|
+
}, [displayValue, min, max, step, onChange]);
|
|
948
|
+
const containerClasses = [
|
|
949
|
+
styles$d.container,
|
|
950
|
+
styles$d[size],
|
|
951
|
+
styles$d[variant],
|
|
952
|
+
disabled && styles$d.disabled,
|
|
953
|
+
className
|
|
954
|
+
].filter(Boolean).join(' ');
|
|
955
|
+
const isDecrementDisabled = disabled || value <= min;
|
|
956
|
+
const isIncrementDisabled = disabled || value >= max;
|
|
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}` })] }))] }));
|
|
958
|
+
};
|
|
959
|
+
|
|
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"};
|
|
961
|
+
|
|
962
|
+
/**
|
|
963
|
+
* ToggleButton Component
|
|
964
|
+
*
|
|
965
|
+
* @component
|
|
966
|
+
* @description
|
|
967
|
+
* A toggle button component that can be activated/deactivated with a click.
|
|
968
|
+
* Different from a toggle switch, this is a button with on/off states.
|
|
969
|
+
* Perfect for boolean habits tracking or feature toggles.
|
|
970
|
+
*
|
|
971
|
+
* @example
|
|
972
|
+
* // Basic usage
|
|
973
|
+
* <ToggleButton
|
|
974
|
+
* active={isActive}
|
|
975
|
+
* onClick={() => setIsActive(!isActive)}
|
|
976
|
+
* icon="🦷"
|
|
977
|
+
* label="Teeth"
|
|
978
|
+
* />
|
|
979
|
+
*
|
|
980
|
+
* @example
|
|
981
|
+
* // With custom styling and animation
|
|
982
|
+
* <ToggleButton
|
|
983
|
+
* active={isEnabled}
|
|
984
|
+
* onClick={handleToggle}
|
|
985
|
+
* icon={<CustomIcon />}
|
|
986
|
+
* label="Feature"
|
|
987
|
+
* variant="filled"
|
|
988
|
+
* activeColor="success"
|
|
989
|
+
* animation="flip"
|
|
990
|
+
* showCheckmark
|
|
991
|
+
* />
|
|
992
|
+
*
|
|
993
|
+
* @param {ToggleButtonProps} props - The props for the ToggleButton component
|
|
994
|
+
* @returns {JSX.Element} The rendered ToggleButton component
|
|
995
|
+
*/
|
|
996
|
+
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
997
|
+
const buttonClasses = [
|
|
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}`],
|
|
1005
|
+
className
|
|
1006
|
+
].filter(Boolean).join(' ');
|
|
1007
|
+
const labelClasses = [
|
|
1008
|
+
styles$c.label,
|
|
1009
|
+
hideLabelOnMobile && styles$c.hideMobile
|
|
1010
|
+
].filter(Boolean).join(' ');
|
|
1011
|
+
const iconVariants = {
|
|
1012
|
+
scale: {
|
|
1013
|
+
inactive: { scale: 1 },
|
|
1014
|
+
active: { scale: [1, 1.2, 1] }
|
|
1015
|
+
},
|
|
1016
|
+
rotate: {
|
|
1017
|
+
inactive: { rotate: 0 },
|
|
1018
|
+
active: { rotate: 360 }
|
|
1019
|
+
},
|
|
1020
|
+
flip: {
|
|
1021
|
+
inactive: { rotateY: 0 },
|
|
1022
|
+
active: { rotateY: 180 }
|
|
1023
|
+
},
|
|
1024
|
+
none: {
|
|
1025
|
+
inactive: {},
|
|
1026
|
+
active: {}
|
|
1027
|
+
}
|
|
1028
|
+
};
|
|
1029
|
+
const checkmarkVariants = {
|
|
1030
|
+
hidden: {
|
|
1031
|
+
scale: 0,
|
|
1032
|
+
opacity: 0,
|
|
1033
|
+
rotate: -90
|
|
1034
|
+
},
|
|
1035
|
+
visible: {
|
|
1036
|
+
scale: 1,
|
|
1037
|
+
opacity: 1,
|
|
1038
|
+
rotate: 0,
|
|
1039
|
+
transition: {
|
|
1040
|
+
type: "spring",
|
|
1041
|
+
stiffness: 500,
|
|
1042
|
+
damping: 25
|
|
1043
|
+
}
|
|
1044
|
+
}
|
|
1045
|
+
};
|
|
1046
|
+
const backgroundVariants = {
|
|
1047
|
+
inactive: {
|
|
1048
|
+
scale: 0,
|
|
1049
|
+
opacity: 0
|
|
1050
|
+
},
|
|
1051
|
+
active: {
|
|
1052
|
+
scale: 1,
|
|
1053
|
+
opacity: 1,
|
|
1054
|
+
transition: {
|
|
1055
|
+
type: "spring",
|
|
1056
|
+
stiffness: 400,
|
|
1057
|
+
damping: 20
|
|
1058
|
+
}
|
|
1059
|
+
}
|
|
1060
|
+
};
|
|
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 } })) })] }));
|
|
1062
|
+
};
|
|
1063
|
+
|
|
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"};
|
|
829
1065
|
|
|
830
1066
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
831
1067
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -910,15 +1146,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
910
1146
|
};
|
|
911
1147
|
const getVariantClass = () => {
|
|
912
1148
|
if (isSaving)
|
|
913
|
-
return styles$
|
|
1149
|
+
return styles$b.primary;
|
|
914
1150
|
if (isEditMode) {
|
|
915
|
-
return hasUnsavedChanges ? styles$
|
|
1151
|
+
return hasUnsavedChanges ? styles$b.success : styles$b.secondary;
|
|
916
1152
|
}
|
|
917
|
-
return styles$
|
|
1153
|
+
return styles$b.primary;
|
|
918
1154
|
};
|
|
919
1155
|
const getIcon = () => {
|
|
920
1156
|
if (isSaving) {
|
|
921
|
-
return jsx("div", { className: styles$
|
|
1157
|
+
return jsx("div", { className: styles$b.loader });
|
|
922
1158
|
}
|
|
923
1159
|
if (isEditMode) {
|
|
924
1160
|
return hasUnsavedChanges ? jsx(Check, { size: 24 }) : jsx(X, { size: 24 });
|
|
@@ -933,14 +1169,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
933
1169
|
}
|
|
934
1170
|
return "Enter edit mode";
|
|
935
1171
|
};
|
|
936
|
-
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: {
|
|
937
1173
|
type: "spring",
|
|
938
1174
|
stiffness: 260,
|
|
939
1175
|
damping: 20
|
|
940
1176
|
}, children: getIcon() }));
|
|
941
1177
|
};
|
|
942
1178
|
|
|
943
|
-
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"};
|
|
944
1180
|
|
|
945
1181
|
const filterOptions = [
|
|
946
1182
|
{ value: 'all', label: 'All', icon: FiSearch },
|
|
@@ -1130,18 +1366,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1130
1366
|
return text || '';
|
|
1131
1367
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1132
1368
|
const parts = text.split(regex);
|
|
1133
|
-
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));
|
|
1134
1370
|
};
|
|
1135
|
-
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]) => {
|
|
1136
1372
|
const Icon = entityIcons[type];
|
|
1137
|
-
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) => {
|
|
1138
1374
|
const globalIndex = results.indexOf(result);
|
|
1139
|
-
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}`));
|
|
1140
1376
|
}) })] }, type));
|
|
1141
1377
|
}) })) })) })] }));
|
|
1142
1378
|
};
|
|
1143
1379
|
|
|
1144
|
-
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"};
|
|
1145
1381
|
|
|
1146
1382
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1147
1383
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1162,10 +1398,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1162
1398
|
};
|
|
1163
1399
|
if (!isOpen)
|
|
1164
1400
|
return null;
|
|
1165
|
-
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" })] })] }) }));
|
|
1166
1402
|
}
|
|
1167
1403
|
|
|
1168
|
-
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-"};
|
|
1169
1405
|
|
|
1170
1406
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1171
1407
|
const [showPicker, setShowPicker] = useState(false);
|
|
@@ -1218,18 +1454,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1218
1454
|
}
|
|
1219
1455
|
};
|
|
1220
1456
|
const getContainerClassName = () => {
|
|
1221
|
-
const classes = [styles$
|
|
1457
|
+
const classes = [styles$8.timeInput];
|
|
1222
1458
|
if (error)
|
|
1223
|
-
classes.push(styles$
|
|
1459
|
+
classes.push(styles$8.error);
|
|
1224
1460
|
if (success)
|
|
1225
|
-
classes.push(styles$
|
|
1461
|
+
classes.push(styles$8.success);
|
|
1226
1462
|
if (loading)
|
|
1227
|
-
classes.push(styles$
|
|
1463
|
+
classes.push(styles$8.loading);
|
|
1228
1464
|
if (disabled)
|
|
1229
|
-
classes.push(styles$
|
|
1465
|
+
classes.push(styles$8.disabled);
|
|
1230
1466
|
return classes.join(' ');
|
|
1231
1467
|
};
|
|
1232
|
-
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 })] }));
|
|
1233
1469
|
}
|
|
1234
1470
|
|
|
1235
1471
|
const ThemeContext = createContext(undefined);
|
|
@@ -1241,7 +1477,7 @@ const useTheme = () => {
|
|
|
1241
1477
|
return context;
|
|
1242
1478
|
};
|
|
1243
1479
|
|
|
1244
|
-
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"};
|
|
1245
1481
|
|
|
1246
1482
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', }) => {
|
|
1247
1483
|
const { theme, setTheme } = useTheme();
|
|
@@ -1258,16 +1494,44 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1258
1494
|
if (variant === 'toggle') {
|
|
1259
1495
|
// Simple toggle between light and dark
|
|
1260
1496
|
const isDark = theme.includes('dark');
|
|
1261
|
-
return (jsxs(motion.button, { className: `${styles$
|
|
1497
|
+
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' })] }));
|
|
1262
1498
|
}
|
|
1263
1499
|
if (variant === 'dropdown') {
|
|
1264
|
-
return (jsxs("div", { className: `${styles$
|
|
1500
|
+
return (jsxs("div", { className: `${styles$7.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$7.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentTheme.icon, showLabel && jsx("span", { className: styles$7.label, children: currentTheme.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))) })] }));
|
|
1265
1501
|
}
|
|
1266
1502
|
// Default button variant - cycles through themes
|
|
1267
|
-
return (jsxs(motion.button, { className: `${styles$
|
|
1503
|
+
return (jsxs(motion.button, { className: `${styles$7.button} ${className}`, onClick: () => {
|
|
1268
1504
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1269
1505
|
setTheme(themes[nextIndex].value);
|
|
1270
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentTheme.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$
|
|
1506
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentTheme.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: currentTheme.icon }, theme), showLabel && jsx("span", { className: styles$7.label, children: currentTheme.label })] }));
|
|
1507
|
+
};
|
|
1508
|
+
|
|
1509
|
+
// THIS FILE IS AUTO GENERATED
|
|
1510
|
+
function SiJira (props) {
|
|
1511
|
+
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);
|
|
1512
|
+
}
|
|
1513
|
+
|
|
1514
|
+
var styles$6 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1515
|
+
|
|
1516
|
+
const tabs = [
|
|
1517
|
+
{ id: 'details', icon: FiInfo, label: 'Dettagli' },
|
|
1518
|
+
{ id: 'github', icon: FiGithub, label: 'GitHub' },
|
|
1519
|
+
{ id: 'jira', icon: SiJira, label: 'Jira' },
|
|
1520
|
+
{ id: 'functional', icon: FiInfo, label: 'Analisi funzionale' }
|
|
1521
|
+
];
|
|
1522
|
+
const Tabs = ({ activeTab, onTabChange }) => {
|
|
1523
|
+
return (jsx("div", { className: styles$6.tabs, children: tabs.map((tab) => {
|
|
1524
|
+
const Icon = tab.icon;
|
|
1525
|
+
const isActive = activeTab === tab.id;
|
|
1526
|
+
return (jsxs(motion.button, { className: styles$6.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
|
|
1527
|
+
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1528
|
+
}, transition: {
|
|
1529
|
+
rotate: {
|
|
1530
|
+
duration: 0.5,
|
|
1531
|
+
ease: 'easeInOut'
|
|
1532
|
+
}
|
|
1533
|
+
}, children: jsx(Icon, { className: styles$6.tabIcon }) }), jsx("span", { children: tab.label })] }, tab.id));
|
|
1534
|
+
}) }));
|
|
1271
1535
|
};
|
|
1272
1536
|
|
|
1273
1537
|
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"};
|
|
@@ -2162,5 +2426,5 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
2162
2426
|
} }), jsx("span", { className: styles.legendLabel, children: item.name }), jsx("span", { className: styles.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
|
|
2163
2427
|
};
|
|
2164
2428
|
|
|
2165
|
-
export { ArrayInput, BooleansHeatmap, Button, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, useTheme$1 as useTheme };
|
|
2429
|
+
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 };
|
|
2166
2430
|
//# sourceMappingURL=index.esm.js.map
|