@stfrigerio/sito-template 0.1.29 → 0.1.31
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/LoadingSpinner/LoadingSpinner.d.ts +84 -0
- package/dist/components/atoms/LoadingSpinner/LoadingSpinner.d.ts.map +1 -0
- package/dist/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts +23 -0
- package/dist/components/atoms/LoadingSpinner/LoadingSpinner.stories.d.ts.map +1 -0
- package/dist/components/atoms/LoadingSpinner/index.d.ts +3 -0
- package/dist/components/atoms/LoadingSpinner/index.d.ts.map +1 -0
- package/dist/components/atoms/index.d.ts +2 -0
- package/dist/components/atoms/index.d.ts.map +1 -1
- package/dist/components/organisms/Navbar/Navbar.d.ts +2 -0
- package/dist/components/organisms/Navbar/Navbar.d.ts.map +1 -1
- package/dist/components/organisms/Navbar/Navbar.stories.d.ts +2 -0
- package/dist/components/organisms/Navbar/Navbar.stories.d.ts.map +1 -1
- package/dist/components/organisms/charts/QuantifiableHabitsChart/QuantifiableHabitsChart.d.ts.map +1 -1
- package/dist/index.esm.js +281 -106
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +281 -105
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -51,7 +51,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
|
|
|
51
51
|
return (jsxRuntime.jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
-
var styles$
|
|
54
|
+
var styles$s = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
|
|
55
55
|
|
|
56
56
|
const SOUND_PACKS = {
|
|
57
57
|
digital: {
|
|
@@ -616,11 +616,11 @@ function useComponentSound(config, options) {
|
|
|
616
616
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
|
|
617
617
|
const { handlers } = useComponentSound(soundConfig);
|
|
618
618
|
const buttonClasses = [
|
|
619
|
-
styles$
|
|
620
|
-
styles$
|
|
621
|
-
styles$
|
|
622
|
-
fullWidth && styles$
|
|
623
|
-
loading && styles$
|
|
619
|
+
styles$s.button,
|
|
620
|
+
styles$s[variant],
|
|
621
|
+
styles$s[size],
|
|
622
|
+
fullWidth && styles$s.fullWidth,
|
|
623
|
+
loading && styles$s.loading,
|
|
624
624
|
className
|
|
625
625
|
].filter(Boolean).join(' ');
|
|
626
626
|
const handleClick = (e) => {
|
|
@@ -631,10 +631,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
|
|
|
631
631
|
handlers.onMouseEnter?.();
|
|
632
632
|
onMouseEnter?.(e);
|
|
633
633
|
};
|
|
634
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$
|
|
634
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$s.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$s.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$s.iconRight, children: iconRight })] }));
|
|
635
635
|
};
|
|
636
636
|
|
|
637
|
-
var styles$
|
|
637
|
+
var styles$r = {"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","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","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"};
|
|
638
638
|
|
|
639
639
|
/**
|
|
640
640
|
* Card Component
|
|
@@ -699,28 +699,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
|
|
|
699
699
|
onExpandChange?.(newExpanded);
|
|
700
700
|
};
|
|
701
701
|
const cardClasses = [
|
|
702
|
-
styles$
|
|
703
|
-
styles$
|
|
704
|
-
hoverable && styles$
|
|
705
|
-
clickable && styles$
|
|
706
|
-
!padding && styles$
|
|
707
|
-
expandable && styles$
|
|
702
|
+
styles$r.card,
|
|
703
|
+
styles$r[variant],
|
|
704
|
+
hoverable && styles$r.hoverable,
|
|
705
|
+
clickable && styles$r.clickable,
|
|
706
|
+
!padding && styles$r.noPadding,
|
|
707
|
+
expandable && styles$r.expandable,
|
|
708
708
|
className
|
|
709
709
|
].filter(Boolean).join(' ');
|
|
710
710
|
const renderHeader = () => {
|
|
711
711
|
if (header) {
|
|
712
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
712
|
+
return (jsxRuntime.jsxs("div", { className: styles$r.header, children: [jsxRuntime.jsx("div", { className: styles$r.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
713
713
|
}
|
|
714
714
|
if (title || subtitle) {
|
|
715
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
715
|
+
return (jsxRuntime.jsxs("div", { className: styles$r.header, children: [jsxRuntime.jsxs("div", { className: styles$r.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$r.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$r.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$r.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$r.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
716
716
|
}
|
|
717
717
|
return null;
|
|
718
718
|
};
|
|
719
|
-
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$
|
|
719
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$r.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$r.image }) })), renderHeader(), jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxRuntime.jsxs(framerMotion.motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$r.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$r.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$r.footer, children: footer })] }, "content")) })] }));
|
|
720
720
|
return (jsxRuntime.jsx(framerMotion.motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
721
721
|
};
|
|
722
722
|
|
|
723
|
-
var styles$
|
|
723
|
+
var styles$q = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
724
724
|
|
|
725
725
|
/**
|
|
726
726
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -765,13 +765,13 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
765
765
|
checkboxRef.current.indeterminate = indeterminate;
|
|
766
766
|
}
|
|
767
767
|
}, [indeterminate]);
|
|
768
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
768
|
+
return (jsxRuntime.jsxs("label", { className: styles$q.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
|
|
769
769
|
const isChecked = e.target.checked;
|
|
770
770
|
onChange(isChecked);
|
|
771
771
|
if (soundConfig?.onClick !== false) {
|
|
772
772
|
playSound('toggle');
|
|
773
773
|
}
|
|
774
|
-
}, className: styles$
|
|
774
|
+
}, className: styles$q.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$q.checkboxText, children: label })] }));
|
|
775
775
|
};
|
|
776
776
|
|
|
777
777
|
var DefaultContext = {
|
|
@@ -908,7 +908,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
908
908
|
return '';
|
|
909
909
|
};
|
|
910
910
|
|
|
911
|
-
var styles$
|
|
911
|
+
var styles$p = {"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"};
|
|
912
912
|
|
|
913
913
|
/**
|
|
914
914
|
* DateInput component - European format date picker with manual input support
|
|
@@ -997,19 +997,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
997
997
|
}
|
|
998
998
|
};
|
|
999
999
|
const getClassName = () => {
|
|
1000
|
-
const classes = [styles$
|
|
1000
|
+
const classes = [styles$p.dateInput];
|
|
1001
1001
|
if (error)
|
|
1002
|
-
classes.push(styles$
|
|
1002
|
+
classes.push(styles$p.error);
|
|
1003
1003
|
if (success)
|
|
1004
|
-
classes.push(styles$
|
|
1004
|
+
classes.push(styles$p.success);
|
|
1005
1005
|
if (loading)
|
|
1006
|
-
classes.push(styles$
|
|
1006
|
+
classes.push(styles$p.loading);
|
|
1007
1007
|
return classes.join(' ');
|
|
1008
1008
|
};
|
|
1009
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
1009
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$p.label, children: label }), jsxRuntime.jsxs("div", { className: styles$p.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$p.textInput, disabled: disabled || loading, ...handlers }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$p.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$p.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
1010
1010
|
}
|
|
1011
1011
|
|
|
1012
|
-
var styles$
|
|
1012
|
+
var styles$o = {"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"};
|
|
1013
1013
|
|
|
1014
1014
|
/**
|
|
1015
1015
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -1114,23 +1114,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
1114
1114
|
}
|
|
1115
1115
|
};
|
|
1116
1116
|
const getTriggerClassName = () => {
|
|
1117
|
-
const classes = [styles$
|
|
1117
|
+
const classes = [styles$o.dropdownTrigger];
|
|
1118
1118
|
if (isOpen)
|
|
1119
|
-
classes.push(styles$
|
|
1119
|
+
classes.push(styles$o.open);
|
|
1120
1120
|
if (loading)
|
|
1121
|
-
classes.push(styles$
|
|
1121
|
+
classes.push(styles$o.loading);
|
|
1122
1122
|
if (error)
|
|
1123
|
-
classes.push(styles$
|
|
1123
|
+
classes.push(styles$o.error);
|
|
1124
1124
|
return classes.join(' ');
|
|
1125
1125
|
};
|
|
1126
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1126
|
+
return (jsxRuntime.jsxs("div", { className: styles$o.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `${styles$o.dropdownValue} ${!displayValue ? styles$o.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(FiChevronDown, { className: styles$o.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$o.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxRuntime.jsxs("div", { className: styles$o.dropdownSearch, children: [jsxRuntime.jsx(FiSearch, { className: styles$o.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$o.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$o.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
1127
1127
|
const isSelected = value === opt.value;
|
|
1128
1128
|
const isHighlighted = highlightedIndex === index;
|
|
1129
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
1130
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1129
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$o.dropdownOption} ${isSelected ? styles$o.selected : ''} ${isHighlighted ? styles$o.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(FiCheck, { className: styles$o.checkIcon })] }, `${opt.value}-${index}`));
|
|
1130
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$o.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
1131
1131
|
}
|
|
1132
1132
|
|
|
1133
|
-
var styles$
|
|
1133
|
+
var styles$n = {"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"};
|
|
1134
1134
|
|
|
1135
1135
|
/**
|
|
1136
1136
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -1168,26 +1168,26 @@ var styles$m = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
1168
1168
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false, soundConfig }) {
|
|
1169
1169
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1170
1170
|
const getClassName = () => {
|
|
1171
|
-
const classes = [styles$
|
|
1171
|
+
const classes = [styles$n.selectInput];
|
|
1172
1172
|
if (error)
|
|
1173
|
-
classes.push(styles$
|
|
1173
|
+
classes.push(styles$n.error);
|
|
1174
1174
|
if (success)
|
|
1175
|
-
classes.push(styles$
|
|
1175
|
+
classes.push(styles$n.success);
|
|
1176
1176
|
if (loading)
|
|
1177
|
-
classes.push(styles$
|
|
1177
|
+
classes.push(styles$n.loading);
|
|
1178
1178
|
return classes.join(' ');
|
|
1179
1179
|
};
|
|
1180
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
1180
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$n.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => {
|
|
1181
1181
|
playSound('click');
|
|
1182
1182
|
onChange(e.target.value);
|
|
1183
1183
|
}, disabled: disabled || loading, required: required, ...handlers, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
1184
1184
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
1185
1185
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
1186
1186
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
1187
|
-
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$
|
|
1187
|
+
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$n.selectIcon })] })] }));
|
|
1188
1188
|
}
|
|
1189
1189
|
|
|
1190
|
-
var styles$
|
|
1190
|
+
var styles$m = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","compact":"TextArea-module_compact__U5lPn","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-"};
|
|
1191
1191
|
|
|
1192
1192
|
/**
|
|
1193
1193
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -1222,38 +1222,38 @@ var styles$l = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
1222
1222
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
|
|
1223
1223
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
1224
1224
|
const getContainerClassName = () => {
|
|
1225
|
-
const classes = [styles$
|
|
1225
|
+
const classes = [styles$m.textareaContainer];
|
|
1226
1226
|
if (error)
|
|
1227
|
-
classes.push(styles$
|
|
1227
|
+
classes.push(styles$m.error);
|
|
1228
1228
|
if (success)
|
|
1229
|
-
classes.push(styles$
|
|
1229
|
+
classes.push(styles$m.success);
|
|
1230
1230
|
if (loading)
|
|
1231
|
-
classes.push(styles$
|
|
1231
|
+
classes.push(styles$m.loading);
|
|
1232
1232
|
if (focusMode)
|
|
1233
|
-
classes.push(styles$
|
|
1233
|
+
classes.push(styles$m.focusMode);
|
|
1234
1234
|
if (compact)
|
|
1235
|
-
classes.push(styles$
|
|
1235
|
+
classes.push(styles$m.compact);
|
|
1236
1236
|
if (className)
|
|
1237
1237
|
classes.push(className);
|
|
1238
1238
|
return classes.join(' ');
|
|
1239
1239
|
};
|
|
1240
1240
|
const getCharCountClassName = () => {
|
|
1241
1241
|
if (!maxLength)
|
|
1242
|
-
return styles$
|
|
1243
|
-
const classes = [styles$
|
|
1242
|
+
return styles$m.characterCount;
|
|
1243
|
+
const classes = [styles$m.characterCount];
|
|
1244
1244
|
const percentage = (value.length / maxLength) * 100;
|
|
1245
1245
|
if (percentage >= 100) {
|
|
1246
|
-
classes.push(styles$
|
|
1246
|
+
classes.push(styles$m.atLimit);
|
|
1247
1247
|
}
|
|
1248
1248
|
else if (percentage >= 80) {
|
|
1249
|
-
classes.push(styles$
|
|
1249
|
+
classes.push(styles$m.nearLimit);
|
|
1250
1250
|
}
|
|
1251
1251
|
return classes.join(' ');
|
|
1252
1252
|
};
|
|
1253
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
1253
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$m.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$m.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$m.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
|
|
1254
1254
|
}
|
|
1255
1255
|
|
|
1256
|
-
var styles$
|
|
1256
|
+
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"};
|
|
1257
1257
|
|
|
1258
1258
|
/**
|
|
1259
1259
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -1290,21 +1290,21 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1290
1290
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1291
1291
|
const prevValueRef = React.useRef(value);
|
|
1292
1292
|
const getContainerClassName = () => {
|
|
1293
|
-
const classes = [styles$
|
|
1293
|
+
const classes = [styles$l.textInput];
|
|
1294
1294
|
if (success)
|
|
1295
|
-
classes.push(styles$
|
|
1295
|
+
classes.push(styles$l.success);
|
|
1296
1296
|
if (loading)
|
|
1297
|
-
classes.push(styles$
|
|
1297
|
+
classes.push(styles$l.loading);
|
|
1298
1298
|
if (icon)
|
|
1299
|
-
classes.push(styles$
|
|
1299
|
+
classes.push(styles$l.withIcon);
|
|
1300
1300
|
if (actionButton)
|
|
1301
|
-
classes.push(styles$
|
|
1301
|
+
classes.push(styles$l.withAction);
|
|
1302
1302
|
return classes.join(' ');
|
|
1303
1303
|
};
|
|
1304
1304
|
React.useEffect(() => {
|
|
1305
1305
|
prevValueRef.current = value;
|
|
1306
1306
|
}, [value]);
|
|
1307
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$
|
|
1307
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$l.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$l.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
|
|
1308
1308
|
const newValue = e.target.value;
|
|
1309
1309
|
const oldValue = prevValueRef.current;
|
|
1310
1310
|
onChange(newValue);
|
|
@@ -1320,13 +1320,13 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1320
1320
|
if (error && soundConfig?.onError) {
|
|
1321
1321
|
playSound(typeof soundConfig.onError === 'string' ? soundConfig.onError : 'error');
|
|
1322
1322
|
}
|
|
1323
|
-
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$
|
|
1323
|
+
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$l.actionButton, onClick: () => {
|
|
1324
1324
|
handlers.onClick?.();
|
|
1325
1325
|
actionButton.onClick();
|
|
1326
|
-
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$
|
|
1326
|
+
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
|
|
1327
1327
|
}
|
|
1328
1328
|
|
|
1329
|
-
var styles$
|
|
1329
|
+
var styles$k = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
1330
1330
|
|
|
1331
1331
|
/**
|
|
1332
1332
|
* Toggle Component
|
|
@@ -1387,7 +1387,7 @@ function Toggle(props) {
|
|
|
1387
1387
|
justifyContent: 'center',
|
|
1388
1388
|
...style
|
|
1389
1389
|
};
|
|
1390
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1390
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$k.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { ref: leftButtonRef, className: `${styles$k.toggleButton} ${!isOn ? styles$k.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
|
|
1391
1391
|
const element = leftButtonRef.current;
|
|
1392
1392
|
if (!isOn) {
|
|
1393
1393
|
// Already on left, celebration!
|
|
@@ -1403,7 +1403,7 @@ function Toggle(props) {
|
|
|
1403
1403
|
playSound('toggle', element || undefined);
|
|
1404
1404
|
}
|
|
1405
1405
|
onToggle(false);
|
|
1406
|
-
}, onMouseEnter: () => handlers.onMouseEnter?.(leftButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$
|
|
1406
|
+
}, onMouseEnter: () => handlers.onMouseEnter?.(leftButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$k.toggleButton} ${isOn ? styles$k.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
|
|
1407
1407
|
const element = rightButtonRef.current;
|
|
1408
1408
|
if (isOn) {
|
|
1409
1409
|
// Already on right, celebration!
|
|
@@ -1422,7 +1422,7 @@ function Toggle(props) {
|
|
|
1422
1422
|
}, onMouseEnter: () => handlers.onMouseEnter?.(rightButtonRef.current || undefined), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
|
|
1423
1423
|
}
|
|
1424
1424
|
|
|
1425
|
-
var styles$
|
|
1425
|
+
var styles$j = {"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-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
|
|
1426
1426
|
|
|
1427
1427
|
/**
|
|
1428
1428
|
* NumberStepper Component
|
|
@@ -1607,32 +1607,32 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
1607
1607
|
setDisplayValue(finalValue);
|
|
1608
1608
|
}, [displayValue, min, max, step, onChange]);
|
|
1609
1609
|
const containerClasses = [
|
|
1610
|
-
styles$
|
|
1611
|
-
styles$
|
|
1612
|
-
styles$
|
|
1613
|
-
layout === 'vertical' && styles$
|
|
1614
|
-
disabled && styles$
|
|
1610
|
+
styles$j.container,
|
|
1611
|
+
styles$j[size],
|
|
1612
|
+
styles$j[variant],
|
|
1613
|
+
layout === 'vertical' && styles$j.vertical,
|
|
1614
|
+
disabled && styles$j.disabled,
|
|
1615
1615
|
className
|
|
1616
1616
|
].filter(Boolean).join(' ');
|
|
1617
1617
|
// Merge custom styles with hover states
|
|
1618
1618
|
const [isButtonHovered, setIsButtonHovered] = React.useState(null);
|
|
1619
1619
|
const isDecrementDisabled = disabled || value <= min;
|
|
1620
1620
|
const isIncrementDisabled = disabled || value >= max;
|
|
1621
|
-
const stepperContent = (jsxRuntime.jsxs("div", { className: styles$
|
|
1621
|
+
const stepperContent = (jsxRuntime.jsxs("div", { className: styles$j.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$j.button, style: {
|
|
1622
1622
|
...customStyles.button,
|
|
1623
1623
|
...(isButtonHovered === 'decrement' && customStyles.buttonHover)
|
|
1624
|
-
}, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), 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: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$
|
|
1624
|
+
}, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), 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: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$j.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$j.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$j.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$j.button, style: {
|
|
1625
1625
|
...customStyles.button,
|
|
1626
1626
|
...(isButtonHovered === 'increment' && customStyles.buttonHover)
|
|
1627
|
-
}, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), 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: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$
|
|
1627
|
+
}, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), 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: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$j.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
|
|
1628
1628
|
// For custom variant with horizontal layout, render differently
|
|
1629
1629
|
if (variant === 'custom' && (label || icon)) {
|
|
1630
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
1630
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$j.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$j.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$j.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$j.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$j.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$j.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1631
1631
|
}
|
|
1632
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$
|
|
1632
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$j.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$j.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$j.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$j.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$j.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$j.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1633
1633
|
};
|
|
1634
1634
|
|
|
1635
|
-
var styles$
|
|
1635
|
+
var styles$i = {"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"};
|
|
1636
1636
|
|
|
1637
1637
|
/**
|
|
1638
1638
|
* ToggleButton Component
|
|
@@ -1671,18 +1671,18 @@ var styles$h = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
1671
1671
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, soundConfig }) => {
|
|
1672
1672
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1673
1673
|
const buttonClasses = [
|
|
1674
|
-
styles$
|
|
1675
|
-
styles$
|
|
1676
|
-
styles$
|
|
1677
|
-
active && styles$
|
|
1678
|
-
active && styles$
|
|
1679
|
-
disabled && styles$
|
|
1680
|
-
animation !== 'none' && styles$
|
|
1674
|
+
styles$i.button,
|
|
1675
|
+
styles$i[size],
|
|
1676
|
+
styles$i[variant],
|
|
1677
|
+
active && styles$i.active,
|
|
1678
|
+
active && styles$i[`active-${activeColor}`],
|
|
1679
|
+
disabled && styles$i.disabled,
|
|
1680
|
+
animation !== 'none' && styles$i[`animation-${animation}`],
|
|
1681
1681
|
className
|
|
1682
1682
|
].filter(Boolean).join(' ');
|
|
1683
1683
|
const labelClasses = [
|
|
1684
|
-
styles$
|
|
1685
|
-
hideLabelOnMobile && styles$
|
|
1684
|
+
styles$i.label,
|
|
1685
|
+
hideLabelOnMobile && styles$i.hideMobile
|
|
1686
1686
|
].filter(Boolean).join(' ');
|
|
1687
1687
|
const iconVariants = {
|
|
1688
1688
|
scale: {
|
|
@@ -1746,10 +1746,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1746
1746
|
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, onClick: () => {
|
|
1747
1747
|
playSound('toggle');
|
|
1748
1748
|
onClick();
|
|
1749
|
-
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1749
|
+
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$i.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$i.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$i.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$i.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1750
1750
|
};
|
|
1751
1751
|
|
|
1752
|
-
var styles$
|
|
1752
|
+
var styles$h = {"slider":"Slider-module_slider__RD4G7","label":"Slider-module_label__j4H8M","sliderContainer":"Slider-module_sliderContainer__kQICC","track":"Slider-module_track__fQ-oP","fill":"Slider-module_fill__AYR4-","shimmer":"Slider-module_shimmer__271tL","input":"Slider-module_input__fqY-G","thumb":"Slider-module_thumb__yQJho","ripple":"Slider-module_ripple__gVS04","tooltip":"Slider-module_tooltip__ZubHR","tooltipArrow":"Slider-module_tooltipArrow__1aV9s","valueDisplay":"Slider-module_valueDisplay__V6caL","labelsContainer":"Slider-module_labelsContainer__F6ojF","labelItem":"Slider-module_labelItem__FuEaY","size-sm":"Slider-module_size-sm__Y2bmS","size-lg":"Slider-module_size-lg__RSnPf","disabled":"Slider-module_disabled__gxYoH","loading":"Slider-module_loading__6FkKb","loadingTrack":"Slider-module_loadingTrack__8ItT2","loadingIndicator":"Slider-module_loadingIndicator__Elydq"};
|
|
1753
1753
|
|
|
1754
1754
|
/**
|
|
1755
1755
|
* Slider component - A beautiful, animated range input
|
|
@@ -1837,16 +1837,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1837
1837
|
setShowTooltipState(false);
|
|
1838
1838
|
};
|
|
1839
1839
|
const dynamicColor = getDynamicColor();
|
|
1840
|
-
const sizeClass = styles$
|
|
1841
|
-
const stateClass = disabled ? styles$
|
|
1840
|
+
const sizeClass = styles$h[`size-${size}`];
|
|
1841
|
+
const stateClass = disabled ? styles$h.disabled : loading ? styles$h.loading : '';
|
|
1842
1842
|
if (loading) {
|
|
1843
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1843
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$h.slider} ${sizeClass} ${styles$h.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$h.label, children: label }), jsxRuntime.jsx("div", { className: styles$h.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
|
|
1844
1844
|
repeat: Infinity,
|
|
1845
1845
|
duration: 1.5,
|
|
1846
1846
|
ease: "easeInOut"
|
|
1847
1847
|
} }) })] }));
|
|
1848
1848
|
}
|
|
1849
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1849
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$h.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$h.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$h.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.fill, style: {
|
|
1850
1850
|
width: `${percentage}%`,
|
|
1851
1851
|
backgroundColor: dynamicColor
|
|
1852
1852
|
}, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
|
|
@@ -1856,7 +1856,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1856
1856
|
damping: 30
|
|
1857
1857
|
}, whileHover: {
|
|
1858
1858
|
boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
|
|
1859
|
-
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$
|
|
1859
|
+
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$h.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.thumb, style: {
|
|
1860
1860
|
left: `${percentage}%`,
|
|
1861
1861
|
backgroundColor: dynamicColor,
|
|
1862
1862
|
borderColor: colors.thumb || dynamicColor
|
|
@@ -1873,14 +1873,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1873
1873
|
}, whileHover: {
|
|
1874
1874
|
scale: 1.1,
|
|
1875
1875
|
transition: { duration: 0.1 }
|
|
1876
|
-
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1876
|
+
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltipState && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$h.tooltip, style: {
|
|
1877
1877
|
left: `${percentage}%`,
|
|
1878
1878
|
backgroundColor: dynamicColor
|
|
1879
|
-
}, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$
|
|
1879
|
+
}, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$h.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
|
|
1880
1880
|
duration: 0.2,
|
|
1881
1881
|
type: "spring",
|
|
1882
1882
|
stiffness: 300
|
|
1883
|
-
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$
|
|
1883
|
+
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$h.labelsContainer, children: labels.map((labelConfig, index) => {
|
|
1884
1884
|
let position = 0;
|
|
1885
1885
|
if (labelConfig.position === 'start')
|
|
1886
1886
|
position = 0;
|
|
@@ -1888,7 +1888,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1888
1888
|
position = 100;
|
|
1889
1889
|
else if (typeof labelConfig.position === 'number')
|
|
1890
1890
|
position = labelConfig.position;
|
|
1891
|
-
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1891
|
+
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.labelItem, style: {
|
|
1892
1892
|
left: `${position}%`,
|
|
1893
1893
|
color: labelConfig.color
|
|
1894
1894
|
}, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
@@ -1901,6 +1901,171 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1901
1901
|
}) }))] }));
|
|
1902
1902
|
}
|
|
1903
1903
|
|
|
1904
|
+
var styles$g = {"loadingContainer":"LoadingSpinner-module_loadingContainer__m5u51","fullScreen":"LoadingSpinner-module_fullScreen__TuAem","overlay":"LoadingSpinner-module_overlay__X7FTa","shimmer":"LoadingSpinner-module_shimmer__xw4AH","small":"LoadingSpinner-module_small__nq8A3","loadingText":"LoadingSpinner-module_loadingText__wWwna","medium":"LoadingSpinner-module_medium__3JC1S","large":"LoadingSpinner-module_large__4MvAc","dotsSpinner":"LoadingSpinner-module_dotsSpinner__PXtfs","dot1":"LoadingSpinner-module_dot1__5YKSi","dot2":"LoadingSpinner-module_dot2__l6Rbu","dot3":"LoadingSpinner-module_dot3__b9YPW","circleSpinner":"LoadingSpinner-module_circleSpinner__ZmmWs","pulseSpinner":"LoadingSpinner-module_pulseSpinner__wTtDJ","textGradient":"LoadingSpinner-module_textGradient__QDrTY","sparkleContainer":"LoadingSpinner-module_sparkleContainer__9XLJG","sparkle":"LoadingSpinner-module_sparkle__LtFFf"};
|
|
1905
|
+
|
|
1906
|
+
const defaultMessages = [
|
|
1907
|
+
'Loading your content...',
|
|
1908
|
+
'Just a moment please...',
|
|
1909
|
+
'Preparing something awesome...',
|
|
1910
|
+
'Almost ready...',
|
|
1911
|
+
'Working on it...',
|
|
1912
|
+
'Just a sec...',
|
|
1913
|
+
'Loading with care...',
|
|
1914
|
+
'Getting things ready...',
|
|
1915
|
+
'Almost there...',
|
|
1916
|
+
'Polishing the details...'
|
|
1917
|
+
];
|
|
1918
|
+
/**
|
|
1919
|
+
* LoadingSpinner Component
|
|
1920
|
+
*
|
|
1921
|
+
* @component
|
|
1922
|
+
* @description
|
|
1923
|
+
* A highly customizable, animated loading spinner component built with Framer Motion.
|
|
1924
|
+
* Supports multiple visual variants, sizes, custom messages, and advanced styling options.
|
|
1925
|
+
* Perfect for indicating loading states across different contexts in your application.
|
|
1926
|
+
*
|
|
1927
|
+
* Features:
|
|
1928
|
+
* - Multiple spinner variants (dots, spinner, pulse)
|
|
1929
|
+
* - Three size options (small, medium, large)
|
|
1930
|
+
* - Rotating or static messages
|
|
1931
|
+
* - Customizable colors and styling
|
|
1932
|
+
* - Full-screen overlay support
|
|
1933
|
+
* - Decorative sparkle effects
|
|
1934
|
+
* - Accessibility support (respects reduced motion preferences)
|
|
1935
|
+
* - Theme-aware styling
|
|
1936
|
+
*
|
|
1937
|
+
* @example
|
|
1938
|
+
* // Basic usage
|
|
1939
|
+
* <LoadingSpinner />
|
|
1940
|
+
*
|
|
1941
|
+
* @example
|
|
1942
|
+
* // With custom message and variant
|
|
1943
|
+
* <LoadingSpinner
|
|
1944
|
+
* variant="pulse"
|
|
1945
|
+
* message="Saving your changes..."
|
|
1946
|
+
* size="large"
|
|
1947
|
+
* />
|
|
1948
|
+
*
|
|
1949
|
+
* @example
|
|
1950
|
+
* // Full-screen overlay
|
|
1951
|
+
* <LoadingSpinner
|
|
1952
|
+
* fullScreen
|
|
1953
|
+
* overlay
|
|
1954
|
+
* message="Loading application..."
|
|
1955
|
+
* />
|
|
1956
|
+
*
|
|
1957
|
+
* @example
|
|
1958
|
+
* // Custom messages and styling
|
|
1959
|
+
* <LoadingSpinner
|
|
1960
|
+
* customMessages={['Processing...', 'Almost done...', 'Final touches...']}
|
|
1961
|
+
* color="#ff6b6b"
|
|
1962
|
+
* backgroundColor="#f8f9fa"
|
|
1963
|
+
* showSparkles={false}
|
|
1964
|
+
* />
|
|
1965
|
+
*
|
|
1966
|
+
* @param {LoadingSpinnerProps} props - The props for the LoadingSpinner component
|
|
1967
|
+
* @returns {JSX.Element} The rendered LoadingSpinner component
|
|
1968
|
+
*/
|
|
1969
|
+
const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className = '', showMessage = true, customMessages, messageRotationInterval = 2500, showSparkles = true, fullScreen = false, overlay = false, color, backgroundColor }) => {
|
|
1970
|
+
const messagesToUse = customMessages || defaultMessages;
|
|
1971
|
+
const [currentMessageIndex, setCurrentMessageIndex] = React.useState(0);
|
|
1972
|
+
const [currentMessage, setCurrentMessage] = React.useState(message || messagesToUse[0]);
|
|
1973
|
+
React.useEffect(() => {
|
|
1974
|
+
if (!message && showMessage) {
|
|
1975
|
+
const interval = setInterval(() => {
|
|
1976
|
+
setCurrentMessageIndex((prev) => (prev + 1) % messagesToUse.length);
|
|
1977
|
+
}, messageRotationInterval);
|
|
1978
|
+
return () => clearInterval(interval);
|
|
1979
|
+
}
|
|
1980
|
+
}, [message, showMessage, messagesToUse.length, messageRotationInterval]);
|
|
1981
|
+
React.useEffect(() => {
|
|
1982
|
+
if (!message && showMessage) {
|
|
1983
|
+
setCurrentMessage(messagesToUse[currentMessageIndex]);
|
|
1984
|
+
}
|
|
1985
|
+
}, [currentMessageIndex, message, messagesToUse, showMessage]);
|
|
1986
|
+
const containerClasses = [
|
|
1987
|
+
styles$g.loadingContainer,
|
|
1988
|
+
styles$g[size],
|
|
1989
|
+
styles$g[variant],
|
|
1990
|
+
fullScreen && styles$g.fullScreen,
|
|
1991
|
+
overlay && styles$g.overlay,
|
|
1992
|
+
className
|
|
1993
|
+
].filter(Boolean).join(' ');
|
|
1994
|
+
const customStyle = {
|
|
1995
|
+
...(color && { '--spinner-color': color }),
|
|
1996
|
+
...(backgroundColor && { '--spinner-background': backgroundColor }),
|
|
1997
|
+
};
|
|
1998
|
+
const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$g.dotsSpinner, animate: { rotate: 360 }, transition: {
|
|
1999
|
+
duration: 2,
|
|
2000
|
+
repeat: Infinity,
|
|
2001
|
+
ease: 'linear'
|
|
2002
|
+
}, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dot1, animate: {
|
|
2003
|
+
scale: [1, 1.3, 1],
|
|
2004
|
+
y: [0, -6, 0]
|
|
2005
|
+
}, transition: {
|
|
2006
|
+
duration: 1.5,
|
|
2007
|
+
repeat: Infinity,
|
|
2008
|
+
ease: 'easeInOut',
|
|
2009
|
+
delay: 0
|
|
2010
|
+
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dot2, animate: {
|
|
2011
|
+
scale: [1, 1.3, 1],
|
|
2012
|
+
y: [0, -6, 0]
|
|
2013
|
+
}, transition: {
|
|
2014
|
+
duration: 1.5,
|
|
2015
|
+
repeat: Infinity,
|
|
2016
|
+
ease: 'easeInOut',
|
|
2017
|
+
delay: 0.5
|
|
2018
|
+
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dot3, animate: {
|
|
2019
|
+
scale: [1, 1.3, 1],
|
|
2020
|
+
y: [0, -6, 0]
|
|
2021
|
+
}, transition: {
|
|
2022
|
+
duration: 1.5,
|
|
2023
|
+
repeat: Infinity,
|
|
2024
|
+
ease: 'easeInOut',
|
|
2025
|
+
delay: 1
|
|
2026
|
+
} })] }));
|
|
2027
|
+
const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.circleSpinner, animate: { rotate: 360 }, transition: {
|
|
2028
|
+
duration: 1,
|
|
2029
|
+
repeat: Infinity,
|
|
2030
|
+
ease: 'linear'
|
|
2031
|
+
} }));
|
|
2032
|
+
const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.pulseSpinner, animate: {
|
|
2033
|
+
scale: [1, 1.2, 1],
|
|
2034
|
+
opacity: [1, 0.7, 1]
|
|
2035
|
+
}, transition: {
|
|
2036
|
+
duration: 1.5,
|
|
2037
|
+
repeat: Infinity,
|
|
2038
|
+
ease: 'easeInOut'
|
|
2039
|
+
} }));
|
|
2040
|
+
const renderSpinnerVariant = () => {
|
|
2041
|
+
switch (variant) {
|
|
2042
|
+
case 'spinner':
|
|
2043
|
+
return renderSpinner();
|
|
2044
|
+
case 'pulse':
|
|
2045
|
+
return renderPulse();
|
|
2046
|
+
case 'dots':
|
|
2047
|
+
default:
|
|
2048
|
+
return renderDots();
|
|
2049
|
+
}
|
|
2050
|
+
};
|
|
2051
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$g.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
|
|
2052
|
+
duration: 0.4,
|
|
2053
|
+
ease: 'easeOut'
|
|
2054
|
+
}, children: currentMessage }, currentMessage) })), showSparkles && (jsxRuntime.jsx("div", { className: styles$g.sparkleContainer, children: [...Array(4)].map((_, i) => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.sparkle, animate: {
|
|
2055
|
+
opacity: [0, 1, 0],
|
|
2056
|
+
scale: [0.5, 1, 0.5],
|
|
2057
|
+
rotate: [0, 180, 360]
|
|
2058
|
+
}, transition: {
|
|
2059
|
+
duration: 3,
|
|
2060
|
+
repeat: Infinity,
|
|
2061
|
+
delay: i * 0.75,
|
|
2062
|
+
ease: 'easeInOut'
|
|
2063
|
+
}, style: {
|
|
2064
|
+
left: `${20 + (i % 2) * 60}%`,
|
|
2065
|
+
top: `${20 + Math.floor(i / 2) * 60}%`
|
|
2066
|
+
} }, i))) }))] }));
|
|
2067
|
+
};
|
|
2068
|
+
|
|
1904
2069
|
var styles$f = {"arrayInput":"ArrayInput-module_arrayInput__q1x7A","arrayInputLabel":"ArrayInput-module_arrayInputLabel__HyUC7","arrayInputItem":"ArrayInput-module_arrayInputItem__bFtgl","inputWrapper":"ArrayInput-module_inputWrapper__ajhbW","input":"ArrayInput-module_input__1uywi","complexItem":"ArrayInput-module_complexItem__zr-Q-","fieldsWrapper":"ArrayInput-module_fieldsWrapper__7BVPa","removeButton":"ArrayInput-module_removeButton__gYf8Y","addButton":"ArrayInput-module_addButton__mia29"};
|
|
1905
2070
|
|
|
1906
2071
|
/**
|
|
@@ -2772,10 +2937,11 @@ var desktopStyles = {"navbar":"Navbar-module_navbar__-SNiN","navbarSidebar":"Nav
|
|
|
2772
2937
|
|
|
2773
2938
|
var mobileStyles = {"navbar":"Navbar-mobile-module_navbar__-shkE","navLogo":"Navbar-mobile-module_navLogo__7Gnna","navList":"Navbar-mobile-module_navList__FBo8I","navItem":"Navbar-mobile-module_navItem__-9E9-","navLink":"Navbar-mobile-module_navLink__A8n8F","active":"Navbar-mobile-module_active__h3ajz","activeBackground":"Navbar-mobile-module_activeBackground__btXAN","navIcon":"Navbar-mobile-module_navIcon__4L17v","activeIcon":"Navbar-mobile-module_activeIcon__A8GF-","navText":"Navbar-mobile-module_navText__ewf-i","activeText":"Navbar-mobile-module_activeText__fNqcU","navBadge":"Navbar-mobile-module_navBadge__YccGx","chevron":"Navbar-mobile-module_chevron__nBPqn","subNavList":"Navbar-mobile-module_subNavList__8tINc","navFooter":"Navbar-mobile-module_navFooter__yijWu","mobileMenuButton":"Navbar-mobile-module_mobileMenuButton__Dx3t8","mobileBackdrop":"Navbar-mobile-module_mobileBackdrop__biYng","navbarTop":"Navbar-mobile-module_navbarTop__oyfPE","navbarMinimal":"Navbar-mobile-module_navbarMinimal__cudny"};
|
|
2774
2939
|
|
|
2775
|
-
const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = false, footer, className = '' }) => {
|
|
2940
|
+
const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = false, footer, className = '', soundConfig }) => {
|
|
2776
2941
|
const styles = React.useMemo(() => isMobile ? mobileStyles : desktopStyles, [isMobile]);
|
|
2777
2942
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
|
|
2778
2943
|
const [expandedItems, setExpandedItems] = React.useState(new Set());
|
|
2944
|
+
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
2779
2945
|
// Close mobile menu when screen size changes
|
|
2780
2946
|
React.useEffect(() => {
|
|
2781
2947
|
const handleResize = () => {
|
|
@@ -2787,6 +2953,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
|
|
|
2787
2953
|
return () => window.removeEventListener('resize', handleResize);
|
|
2788
2954
|
}, []);
|
|
2789
2955
|
const toggleMobileMenu = () => {
|
|
2956
|
+
playSound('toggle');
|
|
2790
2957
|
setIsMobileMenuOpen(!isMobileMenuOpen);
|
|
2791
2958
|
};
|
|
2792
2959
|
const toggleExpanded = (itemId) => {
|
|
@@ -2802,6 +2969,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
|
|
|
2802
2969
|
});
|
|
2803
2970
|
};
|
|
2804
2971
|
const handleItemClick = (item) => {
|
|
2972
|
+
handlers.onClick?.();
|
|
2805
2973
|
if (item.children && item.children.length > 0) {
|
|
2806
2974
|
toggleExpanded(item.id);
|
|
2807
2975
|
}
|
|
@@ -2821,13 +2989,13 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
|
|
|
2821
2989
|
const Icon = item.icon;
|
|
2822
2990
|
const isExpanded = expandedItems.has(item.id);
|
|
2823
2991
|
const hasChildren = item.children && item.children.length > 0;
|
|
2824
|
-
return (jsxRuntime.jsxs(framerMotion.motion.li, { className: `${styles.navItem} ${depth > 0 ? styles.subNavItem : ''}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.05 }, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles.navLink} ${item.isActive ? styles.active : ''}`, onClick: () => handleItemClick(item), whileHover: { x: 5 }, whileTap: { scale: 0.98 }, children: [item.isActive && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.activeBackground, layoutId: "activeNavBackground", initial: false, transition: {
|
|
2992
|
+
return (jsxRuntime.jsxs(framerMotion.motion.li, { className: `${styles.navItem} ${depth > 0 ? styles.subNavItem : ''}`, initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.05 }, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles.navLink} ${item.isActive ? styles.active : ''}`, onClick: () => handleItemClick(item), onMouseEnter: handlers.onMouseEnter, whileHover: { x: 5 }, whileTap: { scale: 0.98 }, children: [item.isActive && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.activeBackground, layoutId: "activeNavBackground", initial: false, transition: {
|
|
2825
2993
|
type: "spring",
|
|
2826
2994
|
stiffness: 500,
|
|
2827
2995
|
damping: 35
|
|
2828
2996
|
} })), Icon && (jsxRuntime.jsx(Icon, { className: `${styles.navIcon} ${item.isActive ? styles.activeIcon : ''}` })), jsxRuntime.jsx("span", { className: `${styles.navText} ${item.isActive ? styles.activeText : ''}`, children: item.label }), item.badge && (jsxRuntime.jsx("span", { className: styles.navBadge, children: item.badge })), hasChildren && (jsxRuntime.jsx(framerMotion.motion.span, { className: styles.chevron, animate: { rotate: isExpanded ? 180 : 0 }, transition: { duration: 0.2 }, children: "\u25BC" }))] }), hasChildren && (jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isExpanded && (jsxRuntime.jsx(framerMotion.motion.ul, { className: styles.subNavList, initial: { height: 0, opacity: 0 }, animate: { height: 'auto', opacity: 1 }, exit: { height: 0, opacity: 0 }, transition: { duration: 0.2 }, children: item.children.map((child, childIndex) => renderNavItem(child, childIndex, depth + 1)) })) }))] }, item.id));
|
|
2829
2997
|
};
|
|
2830
|
-
const navContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [logo && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navLogo, initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: jsxRuntime.jsxs("div", { className: styles.logoContainer, children: [logo.src ? (jsxRuntime.jsx(framerMotion.motion.img, { src: logo.src, alt: logo.alt || 'Logo', className: styles.logoImage, whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } })) : (jsxRuntime.jsx("div", { className: styles.logoPlaceholder, children: logo.text?.charAt(0) || 'L' })), (logo.text || logo.subtitle) && (jsxRuntime.jsxs("div", { className: styles.logoContent, children: [logo.text && (jsxRuntime.jsx("span", { className: styles.logoText, children: logo.text })), logo.subtitle && (jsxRuntime.jsx("span", { className: styles.logoSubtitle, children: logo.subtitle }))] }))] }) })), jsxRuntime.jsx("ul", { className: styles.navList, children: items.map((item, index) => renderNavItem(item, index)) }), footer && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navFooter, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: footer }))] }));
|
|
2998
|
+
const navContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [logo && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navLogo, initial: { opacity: 0, y: -20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: jsxRuntime.jsxs("div", { className: styles.logoContainer, children: [logo.src ? (jsxRuntime.jsx(framerMotion.motion.img, { src: logo.src, alt: logo.alt || 'Logo', className: styles.logoImage, onMouseEnter: handlers.onMouseEnter, whileHover: { scale: 1.05 }, transition: { type: "spring", stiffness: 400 } })) : (jsxRuntime.jsx("div", { className: styles.logoPlaceholder, children: logo.text?.charAt(0) || 'L' })), (logo.text || logo.subtitle) && (jsxRuntime.jsxs("div", { className: styles.logoContent, children: [logo.text && (jsxRuntime.jsx("span", { className: styles.logoText, children: logo.text })), logo.subtitle && (jsxRuntime.jsx("span", { className: styles.logoSubtitle, children: logo.subtitle }))] }))] }) })), jsxRuntime.jsx("ul", { className: styles.navList, children: items.map((item, index) => renderNavItem(item, index)) }), footer && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.navFooter, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: footer }))] }));
|
|
2831
2999
|
if (variant === 'top') {
|
|
2832
3000
|
return (jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles.navbarTop} ${className}`, initial: { y: -100 }, animate: { y: 0 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent }));
|
|
2833
3001
|
}
|
|
@@ -2956,7 +3124,7 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
2956
3124
|
}, children: [jsxRuntime.jsxs("div", { className: styles$7.tooltipHeader, children: [jsxRuntime.jsx("div", { className: styles$7.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxRuntime.jsxs("div", { className: styles$7.tooltipRating, children: [jsxRuntime.jsx("span", { className: styles$7.ratingValue, children: selectedMood.rating }), jsxRuntime.jsx("span", { className: styles$7.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsxRuntime.jsx("div", { className: styles$7.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsxRuntime.jsx("span", { className: styles$7.tag, children: tag }, index))) })), selectedMood.comment && (jsxRuntime.jsx("div", { className: styles$7.tooltipComment, children: selectedMood.comment }))] }))] }));
|
|
2957
3125
|
};
|
|
2958
3126
|
|
|
2959
|
-
var styles$6 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
|
|
3127
|
+
var styles$6 = {"container":"QuantifiableHabitsChart-module_container__X5SBp","controls":"QuantifiableHabitsChart-module_controls__O-ObQ","viewToggle":"QuantifiableHabitsChart-module_viewToggle__24hKA","viewButton":"QuantifiableHabitsChart-module_viewButton__WFU6j","active":"QuantifiableHabitsChart-module_active__Pjqy9","viewIcon":"QuantifiableHabitsChart-module_viewIcon__b2mfk","viewLabel":"QuantifiableHabitsChart-module_viewLabel__9MjCU","aggregationToggle":"QuantifiableHabitsChart-module_aggregationToggle__WnxwB","aggregationButton":"QuantifiableHabitsChart-module_aggregationButton__sGCxX","aggregationIcon":"QuantifiableHabitsChart-module_aggregationIcon__HIaEf","aggregationLabel":"QuantifiableHabitsChart-module_aggregationLabel__Yc-S-","legend":"QuantifiableHabitsChart-module_legend__3Ki7c","legendItem":"QuantifiableHabitsChart-module_legendItem__Zl7fz","inactive":"QuantifiableHabitsChart-module_inactive__TzZC-","legendColor":"QuantifiableHabitsChart-module_legendColor__zbPoV","legendEmoji":"QuantifiableHabitsChart-module_legendEmoji__HG9CZ","legendLabel":"QuantifiableHabitsChart-module_legendLabel__H3oFL","chart":"QuantifiableHabitsChart-module_chart__FMeA-","gridLine":"QuantifiableHabitsChart-module_gridLine__CTNIq","line":"QuantifiableHabitsChart-module_line__CpYip","xAxis":"QuantifiableHabitsChart-module_xAxis__lbgBG","yAxis":"QuantifiableHabitsChart-module_yAxis__Y6WeV","dataPoint":"QuantifiableHabitsChart-module_dataPoint__s8UMX","tooltip":"QuantifiableHabitsChart-module_tooltip__Fay8N","visible":"QuantifiableHabitsChart-module_visible__-KSJq","tooltipHeader":"QuantifiableHabitsChart-module_tooltipHeader__7Q2up","tooltipEmoji":"QuantifiableHabitsChart-module_tooltipEmoji__atV3T","tooltipDot":"QuantifiableHabitsChart-module_tooltipDot__YbdFh","tooltipInfo":"QuantifiableHabitsChart-module_tooltipInfo__XC7WF","tooltipDate":"QuantifiableHabitsChart-module_tooltipDate__6V6Xi","tooltipValue":"QuantifiableHabitsChart-module_tooltipValue__ldASB"};
|
|
2960
3128
|
|
|
2961
3129
|
// Default colors as fallback
|
|
2962
3130
|
const DEFAULT_HABIT_COLORS = {
|
|
@@ -2976,6 +3144,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2976
3144
|
const [activeHabits, setActiveHabits] = React.useState([]);
|
|
2977
3145
|
const [hoveredHabit, setHoveredHabit] = React.useState(null);
|
|
2978
3146
|
const [tooltipData, setTooltipData] = React.useState(null);
|
|
3147
|
+
const [aggregationMode, setAggregationMode] = React.useState('average');
|
|
2979
3148
|
const margin = { top: 20, right: 20, bottom: 50, left: 50 };
|
|
2980
3149
|
const chartWidth = width - margin.left - margin.right;
|
|
2981
3150
|
const chartHeight = height - margin.top - margin.bottom;
|
|
@@ -3065,12 +3234,17 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
3065
3234
|
.filter(v => typeof v === 'number' && !isNaN(v));
|
|
3066
3235
|
if (values.length === 0)
|
|
3067
3236
|
return 0;
|
|
3068
|
-
// Calculate
|
|
3069
|
-
|
|
3237
|
+
// Calculate aggregation based on mode
|
|
3238
|
+
if (aggregationMode === 'sum') {
|
|
3239
|
+
return Math.round(values.reduce((sum, v) => sum + v, 0));
|
|
3240
|
+
}
|
|
3241
|
+
else { // average
|
|
3242
|
+
return Math.round(values.reduce((sum, v) => sum + v, 0) / values.length);
|
|
3243
|
+
}
|
|
3070
3244
|
});
|
|
3071
3245
|
});
|
|
3072
3246
|
return aggregated;
|
|
3073
|
-
}, [data, viewType, habits]);
|
|
3247
|
+
}, [data, viewType, habits, aggregationMode]);
|
|
3074
3248
|
const toggleHabit = (habit) => {
|
|
3075
3249
|
setActiveHabits(prev => prev.includes(habit)
|
|
3076
3250
|
? prev.filter(h => h !== habit)
|
|
@@ -3268,7 +3442,8 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
3268
3442
|
monthly: { icon: '🗓️', label: 'Monthly' },
|
|
3269
3443
|
quarterly: { icon: '📊', label: 'Quarterly' }
|
|
3270
3444
|
};
|
|
3271
|
-
|
|
3445
|
+
const shouldShowAggregationToggle = viewType !== 'daily';
|
|
3446
|
+
return (jsxRuntime.jsxs("div", { className: styles$6.container, children: [jsxRuntime.jsxs("div", { className: styles$6.controls, children: [jsxRuntime.jsx("div", { className: styles$6.viewToggle, children: availableViewTypes.map(type => (jsxRuntime.jsxs("button", { className: `${styles$6.viewButton} ${viewType === type ? styles$6.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsxRuntime.jsx("span", { className: styles$6.viewIcon, children: viewTypeConfig[type].icon }), jsxRuntime.jsx("span", { className: styles$6.viewLabel, children: viewTypeConfig[type].label })] }, type))) }), shouldShowAggregationToggle && (jsxRuntime.jsxs("div", { className: styles$6.aggregationToggle, children: [jsxRuntime.jsxs("button", { className: `${styles$6.aggregationButton} ${aggregationMode === 'average' ? styles$6.active : ''}`, onClick: () => setAggregationMode('average'), title: "Show average values for each period", children: [jsxRuntime.jsx("span", { className: styles$6.aggregationIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("span", { className: styles$6.aggregationLabel, children: "Average" })] }), jsxRuntime.jsxs("button", { className: `${styles$6.aggregationButton} ${aggregationMode === 'sum' ? styles$6.active : ''}`, onClick: () => setAggregationMode('sum'), title: "Show total values for each period", children: [jsxRuntime.jsx("span", { className: styles$6.aggregationIcon, children: "\u2795" }), jsxRuntime.jsx("span", { className: styles$6.aggregationLabel, children: "Sum" })] })] }))] }), jsxRuntime.jsx("div", { className: styles$6.legend, children: habits.map(habit => (jsxRuntime.jsxs("button", { className: `${styles$6.legendItem} ${!activeHabits.includes(habit) ? styles$6.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsxRuntime.jsx("span", { className: styles$6.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$6.legendColor, style: { backgroundColor: getColor(habit) } }), jsxRuntime.jsx("span", { className: styles$6.legendLabel, children: habit })] }, habit))) }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxRuntime.jsxs("div", { ref: tooltipRef, className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
|
|
3272
3447
|
left: `${tooltipData.x}px`,
|
|
3273
3448
|
top: `${tooltipData.y - 80}px`
|
|
3274
3449
|
}, children: [jsxRuntime.jsxs("div", { className: styles$6.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$6.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsxRuntime.jsx("span", { className: styles$6.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsxRuntime.jsx("span", { children: tooltipData.habit })] }), jsxRuntime.jsxs("div", { className: styles$6.tooltipInfo, children: [jsxRuntime.jsx("div", { className: styles$6.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxRuntime.jsxs("div", { className: styles$6.tooltipValue, children: [jsxRuntime.jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsxRuntime.jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
|
|
@@ -4911,6 +5086,7 @@ exports.Checkbox = Checkbox;
|
|
|
4911
5086
|
exports.DateInput = DateInput;
|
|
4912
5087
|
exports.EditFAB = EditFAB;
|
|
4913
5088
|
exports.ImageSlideshow = ImageSlideshow;
|
|
5089
|
+
exports.LoadingSpinner = LoadingSpinner;
|
|
4914
5090
|
exports.MoodChart = MoodChart;
|
|
4915
5091
|
exports.Navbar = Navbar;
|
|
4916
5092
|
exports.NumberStepper = NumberStepper;
|