@stfrigerio/sito-template 0.1.4 → 0.1.5
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/index.esm.js +293 -61
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +294 -60
- 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$m = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
|
|
55
55
|
|
|
56
56
|
/**
|
|
57
57
|
* Button Component
|
|
@@ -94,17 +94,17 @@ var styles$k = {"button":"Button-module_button__c6nkW","primary":"Button-module_
|
|
|
94
94
|
*/
|
|
95
95
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
|
|
96
96
|
const buttonClasses = [
|
|
97
|
-
styles$
|
|
98
|
-
styles$
|
|
99
|
-
styles$
|
|
100
|
-
fullWidth && styles$
|
|
101
|
-
loading && styles$
|
|
97
|
+
styles$m.button,
|
|
98
|
+
styles$m[variant],
|
|
99
|
+
styles$m[size],
|
|
100
|
+
fullWidth && styles$m.fullWidth,
|
|
101
|
+
loading && styles$m.loading,
|
|
102
102
|
className
|
|
103
103
|
].filter(Boolean).join(' ');
|
|
104
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$
|
|
104
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$m.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$m.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$m.iconRight, children: iconRight })] }));
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
-
var styles$
|
|
107
|
+
var styles$l = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
|
|
108
108
|
|
|
109
109
|
/**
|
|
110
110
|
* Card Component
|
|
@@ -159,18 +159,18 @@ var styles$j = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hovera
|
|
|
159
159
|
*/
|
|
160
160
|
const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, className = '', onClick, motionProps, ...rest }) => {
|
|
161
161
|
const cardClasses = [
|
|
162
|
-
styles$
|
|
163
|
-
styles$
|
|
164
|
-
hoverable && styles$
|
|
165
|
-
clickable && styles$
|
|
166
|
-
!padding && styles$
|
|
162
|
+
styles$l.card,
|
|
163
|
+
styles$l[variant],
|
|
164
|
+
hoverable && styles$l.hoverable,
|
|
165
|
+
clickable && styles$l.clickable,
|
|
166
|
+
!padding && styles$l.noPadding,
|
|
167
167
|
className
|
|
168
168
|
].filter(Boolean).join(' ');
|
|
169
|
-
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$
|
|
169
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$l.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$l.image }) })), header && jsxRuntime.jsx("div", { className: styles$l.header, children: header }), (title || subtitle) && !header && (jsxRuntime.jsxs("div", { className: styles$l.header, children: [title && jsxRuntime.jsx("h3", { className: styles$l.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$l.subtitle, children: subtitle })] })), children && (jsxRuntime.jsx("div", { className: padding ? styles$l.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$l.footer, children: footer })] }));
|
|
170
170
|
return (jsxRuntime.jsx(framerMotion.motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
171
171
|
};
|
|
172
172
|
|
|
173
|
-
var styles$
|
|
173
|
+
var styles$k = {"textInput":"TextInput-module_textInput__b2LVM","required":"TextInput-module_required__7uLiM","inputError":"TextInput-module_inputError__QD0a-","errorMessage":"TextInput-module_errorMessage__nIDoQ","success":"TextInput-module_success__KbSS3","loading":"TextInput-module_loading__qXaca","withIcon":"TextInput-module_withIcon__-8swm","inputIcon":"TextInput-module_inputIcon__B4czN","withAction":"TextInput-module_withAction__JD3ku","actionButton":"TextInput-module_actionButton__zFJel"};
|
|
174
174
|
|
|
175
175
|
/**
|
|
176
176
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -205,21 +205,21 @@ var styles$i = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
|
|
|
205
205
|
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
206
206
|
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
207
207
|
const getContainerClassName = () => {
|
|
208
|
-
const classes = [styles$
|
|
208
|
+
const classes = [styles$k.textInput];
|
|
209
209
|
if (success)
|
|
210
|
-
classes.push(styles$
|
|
210
|
+
classes.push(styles$k.success);
|
|
211
211
|
if (loading)
|
|
212
|
-
classes.push(styles$
|
|
212
|
+
classes.push(styles$k.loading);
|
|
213
213
|
if (icon)
|
|
214
|
-
classes.push(styles$
|
|
214
|
+
classes.push(styles$k.withIcon);
|
|
215
215
|
if (actionButton)
|
|
216
|
-
classes.push(styles$
|
|
216
|
+
classes.push(styles$k.withAction);
|
|
217
217
|
return classes.join(' ');
|
|
218
218
|
};
|
|
219
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$
|
|
219
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$k.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$k.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$k.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$k.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
|
|
220
220
|
}
|
|
221
221
|
|
|
222
|
-
var styles$
|
|
222
|
+
var styles$j = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn"};
|
|
223
223
|
|
|
224
224
|
/**
|
|
225
225
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -272,7 +272,7 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
|
|
|
272
272
|
const newValues = values.filter((_, i) => i !== index);
|
|
273
273
|
onChange(newValues);
|
|
274
274
|
};
|
|
275
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
275
|
+
return (jsxRuntime.jsxs("div", { className: styles$j.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$j.arrayInputLabel, children: label }), values.map((value, index) => (jsxRuntime.jsxs("div", { className: styles$j.arrayInputItem, children: [jsxRuntime.jsx("div", { className: styles$j.inputWrapper, children: jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$j.input }) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
276
276
|
}
|
|
277
277
|
// Complex object array implementation
|
|
278
278
|
function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
@@ -297,10 +297,10 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
|
297
297
|
// Generate key from all field values
|
|
298
298
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
299
299
|
};
|
|
300
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
300
|
+
return (jsxRuntime.jsxs("div", { className: styles$j.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$j.arrayInputLabel, children: label }), values.map((value, index) => (jsxRuntime.jsxs("div", { className: `${styles$j.arrayInputItem} ${fields.length > 1 ? styles$j.complexItem : ''}`, children: [jsxRuntime.jsx("div", { className: styles$j.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, generateKey(value, index)))), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
301
301
|
}
|
|
302
302
|
|
|
303
|
-
var styles$
|
|
303
|
+
var styles$i = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
304
304
|
|
|
305
305
|
/**
|
|
306
306
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -344,7 +344,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
344
344
|
checkboxRef.current.indeterminate = indeterminate;
|
|
345
345
|
}
|
|
346
346
|
}, [indeterminate]);
|
|
347
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
347
|
+
return (jsxRuntime.jsxs("label", { className: styles$i.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$i.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$i.checkboxText, children: label })] }));
|
|
348
348
|
};
|
|
349
349
|
|
|
350
350
|
var DefaultContext = {
|
|
@@ -463,7 +463,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
463
463
|
return '';
|
|
464
464
|
};
|
|
465
465
|
|
|
466
|
-
var styles$
|
|
466
|
+
var styles$h = {"dateInput":"DateInput-module_dateInput__54VPD","label":"DateInput-module_label__yDdUw","inputWrapper":"DateInput-module_inputWrapper__x-r1d","textInput":"DateInput-module_textInput__ToOSX","calendarButton":"DateInput-module_calendarButton__JzDGD","hiddenDateInput":"DateInput-module_hiddenDateInput__IWNg3","error":"DateInput-module_error__ieuPO","success":"DateInput-module_success__rPA93","loading":"DateInput-module_loading__1DAmD"};
|
|
467
467
|
|
|
468
468
|
/**
|
|
469
469
|
* DateInput component - European format date picker with manual input support
|
|
@@ -550,19 +550,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
550
550
|
}
|
|
551
551
|
};
|
|
552
552
|
const getClassName = () => {
|
|
553
|
-
const classes = [styles$
|
|
553
|
+
const classes = [styles$h.dateInput];
|
|
554
554
|
if (error)
|
|
555
|
-
classes.push(styles$
|
|
555
|
+
classes.push(styles$h.error);
|
|
556
556
|
if (success)
|
|
557
|
-
classes.push(styles$
|
|
557
|
+
classes.push(styles$h.success);
|
|
558
558
|
if (loading)
|
|
559
|
-
classes.push(styles$
|
|
559
|
+
classes.push(styles$h.loading);
|
|
560
560
|
return classes.join(' ');
|
|
561
561
|
};
|
|
562
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
562
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$h.label, children: label }), jsxRuntime.jsxs("div", { className: styles$h.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$h.textInput, disabled: disabled || loading }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$h.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$h.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
563
563
|
}
|
|
564
564
|
|
|
565
|
-
var styles$
|
|
565
|
+
var styles$g = {"searchableDropdown":"SearchableDropdown-module_searchableDropdown__S2Nh5","dropdownTrigger":"SearchableDropdown-module_dropdownTrigger__dihdr","open":"SearchableDropdown-module_open__P7mRt","dropdownValue":"SearchableDropdown-module_dropdownValue__ydrc2","placeholder":"SearchableDropdown-module_placeholder__BwM2W","dropdownArrow":"SearchableDropdown-module_dropdownArrow__yd5fp","dropdownMenu":"SearchableDropdown-module_dropdownMenu__2Z5cc","dropdownSearch":"SearchableDropdown-module_dropdownSearch__NRk7j","searchInput":"SearchableDropdown-module_searchInput__VS2Hw","searchIcon":"SearchableDropdown-module_searchIcon__2vKFF","dropdownOptions":"SearchableDropdown-module_dropdownOptions__6YXqF","dropdownOption":"SearchableDropdown-module_dropdownOption__YwDr-","selected":"SearchableDropdown-module_selected__31JeB","highlighted":"SearchableDropdown-module_highlighted__P0bBq","checkIcon":"SearchableDropdown-module_checkIcon__YxowK","dropdownNoResults":"SearchableDropdown-module_dropdownNoResults__WW-Da","loading":"SearchableDropdown-module_loading__xlYf0"};
|
|
566
566
|
|
|
567
567
|
/**
|
|
568
568
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -667,23 +667,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
667
667
|
}
|
|
668
668
|
};
|
|
669
669
|
const getTriggerClassName = () => {
|
|
670
|
-
const classes = [styles$
|
|
670
|
+
const classes = [styles$g.dropdownTrigger];
|
|
671
671
|
if (isOpen)
|
|
672
|
-
classes.push(styles$
|
|
672
|
+
classes.push(styles$g.open);
|
|
673
673
|
if (loading)
|
|
674
|
-
classes.push(styles$
|
|
674
|
+
classes.push(styles$g.loading);
|
|
675
675
|
if (error)
|
|
676
|
-
classes.push(styles$
|
|
676
|
+
classes.push(styles$g.error);
|
|
677
677
|
return classes.join(' ');
|
|
678
678
|
};
|
|
679
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
679
|
+
return (jsxRuntime.jsxs("div", { className: styles$g.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$g.dropdownValue} ${!displayValue ? styles$g.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(FiChevronDown, { className: styles$g.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$g.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$g.dropdownSearch, children: [jsxRuntime.jsx(FiSearch, { className: styles$g.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$g.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$g.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
680
680
|
const isSelected = value === opt.value;
|
|
681
681
|
const isHighlighted = highlightedIndex === index;
|
|
682
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
683
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
682
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$g.dropdownOption} ${isSelected ? styles$g.selected : ''} ${isHighlighted ? styles$g.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$g.checkIcon })] }, `${opt.value}-${index}`));
|
|
683
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
684
684
|
}
|
|
685
685
|
|
|
686
|
-
var styles$
|
|
686
|
+
var styles$f = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWrapper":"SelectInput-module_selectWrapper__Qr4pl","selectIcon":"SelectInput-module_selectIcon__9pjhf","error":"SelectInput-module_error__3WNJc","success":"SelectInput-module_success__WJ5ga","loading":"SelectInput-module_loading__n35N9"};
|
|
687
687
|
|
|
688
688
|
/**
|
|
689
689
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -720,23 +720,23 @@ var styles$d = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
720
720
|
*/
|
|
721
721
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
722
722
|
const getClassName = () => {
|
|
723
|
-
const classes = [styles$
|
|
723
|
+
const classes = [styles$f.selectInput];
|
|
724
724
|
if (error)
|
|
725
|
-
classes.push(styles$
|
|
725
|
+
classes.push(styles$f.error);
|
|
726
726
|
if (success)
|
|
727
|
-
classes.push(styles$
|
|
727
|
+
classes.push(styles$f.success);
|
|
728
728
|
if (loading)
|
|
729
|
-
classes.push(styles$
|
|
729
|
+
classes.push(styles$f.loading);
|
|
730
730
|
return classes.join(' ');
|
|
731
731
|
};
|
|
732
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
732
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$f.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
733
733
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
734
734
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
735
735
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
736
|
-
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$
|
|
736
|
+
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$f.selectIcon })] })] }));
|
|
737
737
|
}
|
|
738
738
|
|
|
739
|
-
var styles$
|
|
739
|
+
var styles$e = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","textareaLabel":"TextArea-module_textareaLabel__7Vmyx","requiredIndicator":"TextArea-module_requiredIndicator__3Fxyy","textareaInput":"TextArea-module_textareaInput__VCDZA","characterCount":"TextArea-module_characterCount__9FO5N","nearLimit":"TextArea-module_nearLimit__cUdnw","atLimit":"TextArea-module_atLimit__GoWCC","error":"TextArea-module_error__ciHgb","success":"TextArea-module_success__a0-xD","loading":"TextArea-module_loading__CSFBR","focusMode":"TextArea-module_focusMode__9A8U-"};
|
|
740
740
|
|
|
741
741
|
/**
|
|
742
742
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -771,34 +771,34 @@ var styles$c = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
771
771
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false }) {
|
|
772
772
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
773
773
|
const getContainerClassName = () => {
|
|
774
|
-
const classes = [styles$
|
|
774
|
+
const classes = [styles$e.textareaContainer];
|
|
775
775
|
if (error)
|
|
776
|
-
classes.push(styles$
|
|
776
|
+
classes.push(styles$e.error);
|
|
777
777
|
if (success)
|
|
778
|
-
classes.push(styles$
|
|
778
|
+
classes.push(styles$e.success);
|
|
779
779
|
if (loading)
|
|
780
|
-
classes.push(styles$
|
|
780
|
+
classes.push(styles$e.loading);
|
|
781
781
|
if (focusMode)
|
|
782
|
-
classes.push(styles$
|
|
782
|
+
classes.push(styles$e.focusMode);
|
|
783
783
|
return classes.join(' ');
|
|
784
784
|
};
|
|
785
785
|
const getCharCountClassName = () => {
|
|
786
786
|
if (!maxLength)
|
|
787
|
-
return styles$
|
|
788
|
-
const classes = [styles$
|
|
787
|
+
return styles$e.characterCount;
|
|
788
|
+
const classes = [styles$e.characterCount];
|
|
789
789
|
const percentage = (value.length / maxLength) * 100;
|
|
790
790
|
if (percentage >= 100) {
|
|
791
|
-
classes.push(styles$
|
|
791
|
+
classes.push(styles$e.atLimit);
|
|
792
792
|
}
|
|
793
793
|
else if (percentage >= 80) {
|
|
794
|
-
classes.push(styles$
|
|
794
|
+
classes.push(styles$e.nearLimit);
|
|
795
795
|
}
|
|
796
796
|
return classes.join(' ');
|
|
797
797
|
};
|
|
798
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
798
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$e.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$e.requiredIndicator, children: "*" })] }), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$e.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
|
|
799
799
|
}
|
|
800
800
|
|
|
801
|
-
var styles$
|
|
801
|
+
var styles$d = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
802
802
|
|
|
803
803
|
/**
|
|
804
804
|
* Toggle Component
|
|
@@ -843,9 +843,241 @@ var styles$b = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
|
|
|
843
843
|
*/
|
|
844
844
|
function Toggle(props) {
|
|
845
845
|
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
|
|
846
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
846
|
+
return (jsxRuntime.jsxs("div", { className: styles$d.toggleContainer, children: [jsxRuntime.jsxs("button", { className: `${styles$d.toggleButton} ${!isOn ? styles$d.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$d.toggleButton} ${isOn ? styles$d.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
|
|
847
847
|
}
|
|
848
848
|
|
|
849
|
+
var styles$c = {"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"};
|
|
850
|
+
|
|
851
|
+
/**
|
|
852
|
+
* NumberStepper Component
|
|
853
|
+
*
|
|
854
|
+
* @component
|
|
855
|
+
* @description
|
|
856
|
+
* A number input component with increment and decrement controls.
|
|
857
|
+
* Supports keyboard navigation, min/max limits, and custom step values.
|
|
858
|
+
*
|
|
859
|
+
* @example
|
|
860
|
+
* // Basic usage
|
|
861
|
+
* <NumberStepper
|
|
862
|
+
* value={count}
|
|
863
|
+
* onChange={setCount}
|
|
864
|
+
* min={0}
|
|
865
|
+
* max={10}
|
|
866
|
+
* />
|
|
867
|
+
*
|
|
868
|
+
* @example
|
|
869
|
+
* // With label and icon
|
|
870
|
+
* <NumberStepper
|
|
871
|
+
* value={5}
|
|
872
|
+
* onChange={(val) => setValue(val)}
|
|
873
|
+
* min={0}
|
|
874
|
+
* max={100}
|
|
875
|
+
* step={5}
|
|
876
|
+
* label="Quantity"
|
|
877
|
+
* icon="📦"
|
|
878
|
+
* />
|
|
879
|
+
*
|
|
880
|
+
* @param {NumberStepperProps} props - The props for the NumberStepper component
|
|
881
|
+
* @returns {JSX.Element} The rendered NumberStepper component
|
|
882
|
+
*/
|
|
883
|
+
const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', }) => {
|
|
884
|
+
const [isIncrementing, setIsIncrementing] = React.useState(false);
|
|
885
|
+
const [isDecrementing, setIsDecrementing] = React.useState(false);
|
|
886
|
+
const [displayValue, setDisplayValue] = React.useState(value);
|
|
887
|
+
React.useEffect(() => {
|
|
888
|
+
setDisplayValue(value);
|
|
889
|
+
}, [value]);
|
|
890
|
+
const handleIncrement = React.useCallback(() => {
|
|
891
|
+
if (disabled || value >= max)
|
|
892
|
+
return;
|
|
893
|
+
const newValue = Math.min(value + step, max);
|
|
894
|
+
onChange(newValue);
|
|
895
|
+
setIsIncrementing(true);
|
|
896
|
+
setTimeout(() => setIsIncrementing(false), 200);
|
|
897
|
+
}, [value, onChange, max, step, disabled]);
|
|
898
|
+
const handleDecrement = React.useCallback(() => {
|
|
899
|
+
if (disabled || value <= min)
|
|
900
|
+
return;
|
|
901
|
+
const newValue = Math.max(value - step, min);
|
|
902
|
+
onChange(newValue);
|
|
903
|
+
setIsDecrementing(true);
|
|
904
|
+
setTimeout(() => setIsDecrementing(false), 200);
|
|
905
|
+
}, [value, onChange, min, step, disabled]);
|
|
906
|
+
const handleKeyDown = React.useCallback((e) => {
|
|
907
|
+
if (!allowKeyboard || disabled)
|
|
908
|
+
return;
|
|
909
|
+
switch (e.key) {
|
|
910
|
+
case 'ArrowUp':
|
|
911
|
+
e.preventDefault();
|
|
912
|
+
handleIncrement();
|
|
913
|
+
break;
|
|
914
|
+
case 'ArrowDown':
|
|
915
|
+
e.preventDefault();
|
|
916
|
+
handleDecrement();
|
|
917
|
+
break;
|
|
918
|
+
case 'PageUp':
|
|
919
|
+
e.preventDefault();
|
|
920
|
+
const bigIncrease = Math.min(value + (step * 10), max);
|
|
921
|
+
onChange(bigIncrease);
|
|
922
|
+
break;
|
|
923
|
+
case 'PageDown':
|
|
924
|
+
e.preventDefault();
|
|
925
|
+
const bigDecrease = Math.max(value - (step * 10), min);
|
|
926
|
+
onChange(bigDecrease);
|
|
927
|
+
break;
|
|
928
|
+
case 'Home':
|
|
929
|
+
e.preventDefault();
|
|
930
|
+
if (min !== -Infinity)
|
|
931
|
+
onChange(min);
|
|
932
|
+
break;
|
|
933
|
+
case 'End':
|
|
934
|
+
e.preventDefault();
|
|
935
|
+
if (max !== Infinity)
|
|
936
|
+
onChange(max);
|
|
937
|
+
break;
|
|
938
|
+
}
|
|
939
|
+
}, [allowKeyboard, disabled, handleIncrement, handleDecrement, value, step, min, max, onChange]);
|
|
940
|
+
const handleInputChange = React.useCallback((e) => {
|
|
941
|
+
const inputValue = e.target.value;
|
|
942
|
+
if (inputValue === '' || inputValue === '-') {
|
|
943
|
+
setDisplayValue(inputValue);
|
|
944
|
+
return;
|
|
945
|
+
}
|
|
946
|
+
const numValue = parseFloat(inputValue);
|
|
947
|
+
if (!isNaN(numValue)) {
|
|
948
|
+
setDisplayValue(numValue);
|
|
949
|
+
}
|
|
950
|
+
}, []);
|
|
951
|
+
const handleInputBlur = React.useCallback(() => {
|
|
952
|
+
let finalValue = typeof displayValue === 'string'
|
|
953
|
+
? (displayValue === '' || displayValue === '-' ? min : parseFloat(displayValue))
|
|
954
|
+
: displayValue;
|
|
955
|
+
if (isNaN(finalValue)) {
|
|
956
|
+
finalValue = min;
|
|
957
|
+
}
|
|
958
|
+
finalValue = Math.max(min, Math.min(max, finalValue));
|
|
959
|
+
if (step !== 1) {
|
|
960
|
+
finalValue = Math.round(finalValue / step) * step;
|
|
961
|
+
}
|
|
962
|
+
onChange(finalValue);
|
|
963
|
+
setDisplayValue(finalValue);
|
|
964
|
+
}, [displayValue, min, max, step, onChange]);
|
|
965
|
+
const containerClasses = [
|
|
966
|
+
styles$c.container,
|
|
967
|
+
styles$c[size],
|
|
968
|
+
styles$c[variant],
|
|
969
|
+
disabled && styles$c.disabled,
|
|
970
|
+
className
|
|
971
|
+
].filter(Boolean).join(' ');
|
|
972
|
+
const isDecrementDisabled = disabled || value <= min;
|
|
973
|
+
const isIncrementDisabled = disabled || value >= max;
|
|
974
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$c.header, children: [icon && jsxRuntime.jsx("span", { className: styles$c.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$c.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$c.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$c.button, onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$c.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$c.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$c.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$c.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$c.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$c.button, onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$c.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$c.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$c.limits, children: [jsxRuntime.jsx("span", { className: styles$c.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$c.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
975
|
+
};
|
|
976
|
+
|
|
977
|
+
var styles$b = {"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"};
|
|
978
|
+
|
|
979
|
+
/**
|
|
980
|
+
* ToggleButton Component
|
|
981
|
+
*
|
|
982
|
+
* @component
|
|
983
|
+
* @description
|
|
984
|
+
* A toggle button component that can be activated/deactivated with a click.
|
|
985
|
+
* Different from a toggle switch, this is a button with on/off states.
|
|
986
|
+
* Perfect for boolean habits tracking or feature toggles.
|
|
987
|
+
*
|
|
988
|
+
* @example
|
|
989
|
+
* // Basic usage
|
|
990
|
+
* <ToggleButton
|
|
991
|
+
* active={isActive}
|
|
992
|
+
* onClick={() => setIsActive(!isActive)}
|
|
993
|
+
* icon="🦷"
|
|
994
|
+
* label="Teeth"
|
|
995
|
+
* />
|
|
996
|
+
*
|
|
997
|
+
* @example
|
|
998
|
+
* // With custom styling and animation
|
|
999
|
+
* <ToggleButton
|
|
1000
|
+
* active={isEnabled}
|
|
1001
|
+
* onClick={handleToggle}
|
|
1002
|
+
* icon={<CustomIcon />}
|
|
1003
|
+
* label="Feature"
|
|
1004
|
+
* variant="filled"
|
|
1005
|
+
* activeColor="success"
|
|
1006
|
+
* animation="flip"
|
|
1007
|
+
* showCheckmark
|
|
1008
|
+
* />
|
|
1009
|
+
*
|
|
1010
|
+
* @param {ToggleButtonProps} props - The props for the ToggleButton component
|
|
1011
|
+
* @returns {JSX.Element} The rendered ToggleButton component
|
|
1012
|
+
*/
|
|
1013
|
+
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
1014
|
+
const buttonClasses = [
|
|
1015
|
+
styles$b.button,
|
|
1016
|
+
styles$b[size],
|
|
1017
|
+
styles$b[variant],
|
|
1018
|
+
active && styles$b.active,
|
|
1019
|
+
active && styles$b[`active-${activeColor}`],
|
|
1020
|
+
disabled && styles$b.disabled,
|
|
1021
|
+
animation !== 'none' && styles$b[`animation-${animation}`],
|
|
1022
|
+
className
|
|
1023
|
+
].filter(Boolean).join(' ');
|
|
1024
|
+
const labelClasses = [
|
|
1025
|
+
styles$b.label,
|
|
1026
|
+
hideLabelOnMobile && styles$b.hideMobile
|
|
1027
|
+
].filter(Boolean).join(' ');
|
|
1028
|
+
const iconVariants = {
|
|
1029
|
+
scale: {
|
|
1030
|
+
inactive: { scale: 1 },
|
|
1031
|
+
active: { scale: [1, 1.2, 1] }
|
|
1032
|
+
},
|
|
1033
|
+
rotate: {
|
|
1034
|
+
inactive: { rotate: 0 },
|
|
1035
|
+
active: { rotate: 360 }
|
|
1036
|
+
},
|
|
1037
|
+
flip: {
|
|
1038
|
+
inactive: { rotateY: 0 },
|
|
1039
|
+
active: { rotateY: 180 }
|
|
1040
|
+
},
|
|
1041
|
+
none: {
|
|
1042
|
+
inactive: {},
|
|
1043
|
+
active: {}
|
|
1044
|
+
}
|
|
1045
|
+
};
|
|
1046
|
+
const checkmarkVariants = {
|
|
1047
|
+
hidden: {
|
|
1048
|
+
scale: 0,
|
|
1049
|
+
opacity: 0,
|
|
1050
|
+
rotate: -90
|
|
1051
|
+
},
|
|
1052
|
+
visible: {
|
|
1053
|
+
scale: 1,
|
|
1054
|
+
opacity: 1,
|
|
1055
|
+
rotate: 0,
|
|
1056
|
+
transition: {
|
|
1057
|
+
type: "spring",
|
|
1058
|
+
stiffness: 500,
|
|
1059
|
+
damping: 25
|
|
1060
|
+
}
|
|
1061
|
+
}
|
|
1062
|
+
};
|
|
1063
|
+
const backgroundVariants = {
|
|
1064
|
+
inactive: {
|
|
1065
|
+
scale: 0,
|
|
1066
|
+
opacity: 0
|
|
1067
|
+
},
|
|
1068
|
+
active: {
|
|
1069
|
+
scale: 1,
|
|
1070
|
+
opacity: 1,
|
|
1071
|
+
transition: {
|
|
1072
|
+
type: "spring",
|
|
1073
|
+
stiffness: 400,
|
|
1074
|
+
damping: 20
|
|
1075
|
+
}
|
|
1076
|
+
}
|
|
1077
|
+
};
|
|
1078
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$b.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$b.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$b.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$b.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$b.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$b.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$b.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1079
|
+
};
|
|
1080
|
+
|
|
849
1081
|
var styles$a = {"fab":"EditFAB-module_fab__nSrTJ","primary":"EditFAB-module_primary__zbA9n","secondary":"EditFAB-module_secondary__BnXs0","success":"EditFAB-module_success__kcLg3","loader":"EditFAB-module_loader__TaJOm","draggable":"EditFAB-module_draggable__eE2vE","dragging":"EditFAB-module_dragging__btRJe"};
|
|
850
1082
|
|
|
851
1083
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
@@ -2192,6 +2424,7 @@ exports.DateInput = DateInput;
|
|
|
2192
2424
|
exports.EditFAB = EditFAB;
|
|
2193
2425
|
exports.MoodChart = MoodChart;
|
|
2194
2426
|
exports.Navbar = Navbar;
|
|
2427
|
+
exports.NumberStepper = NumberStepper;
|
|
2195
2428
|
exports.PieChart = PieChart;
|
|
2196
2429
|
exports.QuantifiableHabitsChart = QuantifiableHabitsChart;
|
|
2197
2430
|
exports.SearchBar = SearchBar;
|
|
@@ -2205,5 +2438,6 @@ exports.ThemeProvider = ThemeProvider;
|
|
|
2205
2438
|
exports.ThemeSwitcher = ThemeSwitcher;
|
|
2206
2439
|
exports.TimeInput = TimeInput;
|
|
2207
2440
|
exports.Toggle = Toggle;
|
|
2441
|
+
exports.ToggleButton = ToggleButton;
|
|
2208
2442
|
exports.useTheme = useTheme$1;
|
|
2209
2443
|
//# sourceMappingURL=index.js.map
|