@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.esm.js
CHANGED
|
@@ -30,7 +30,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
|
|
|
30
30
|
return (jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
var styles$
|
|
33
|
+
var styles$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"};
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* Button Component
|
|
@@ -73,17 +73,17 @@ var styles$k = {"button":"Button-module_button__c6nkW","primary":"Button-module_
|
|
|
73
73
|
*/
|
|
74
74
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
|
|
75
75
|
const buttonClasses = [
|
|
76
|
-
styles$
|
|
77
|
-
styles$
|
|
78
|
-
styles$
|
|
79
|
-
fullWidth && styles$
|
|
80
|
-
loading && styles$
|
|
76
|
+
styles$m.button,
|
|
77
|
+
styles$m[variant],
|
|
78
|
+
styles$m[size],
|
|
79
|
+
fullWidth && styles$m.fullWidth,
|
|
80
|
+
loading && styles$m.loading,
|
|
81
81
|
className
|
|
82
82
|
].filter(Boolean).join(' ');
|
|
83
|
-
return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$
|
|
83
|
+
return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$m.spinner }), iconLeft && jsx("span", { className: styles$m.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$m.iconRight, children: iconRight })] }));
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
-
var styles$
|
|
86
|
+
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"};
|
|
87
87
|
|
|
88
88
|
/**
|
|
89
89
|
* Card Component
|
|
@@ -138,18 +138,18 @@ var styles$j = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hovera
|
|
|
138
138
|
*/
|
|
139
139
|
const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, className = '', onClick, motionProps, ...rest }) => {
|
|
140
140
|
const cardClasses = [
|
|
141
|
-
styles$
|
|
142
|
-
styles$
|
|
143
|
-
hoverable && styles$
|
|
144
|
-
clickable && styles$
|
|
145
|
-
!padding && styles$
|
|
141
|
+
styles$l.card,
|
|
142
|
+
styles$l[variant],
|
|
143
|
+
hoverable && styles$l.hoverable,
|
|
144
|
+
clickable && styles$l.clickable,
|
|
145
|
+
!padding && styles$l.noPadding,
|
|
146
146
|
className
|
|
147
147
|
].filter(Boolean).join(' ');
|
|
148
|
-
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$
|
|
148
|
+
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$l.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$l.image }) })), header && jsx("div", { className: styles$l.header, children: header }), (title || subtitle) && !header && (jsxs("div", { className: styles$l.header, children: [title && jsx("h3", { className: styles$l.title, children: title }), subtitle && jsx("p", { className: styles$l.subtitle, children: subtitle })] })), children && (jsx("div", { className: padding ? styles$l.body : undefined, children: children })), footer && jsx("div", { className: styles$l.footer, children: footer })] }));
|
|
149
149
|
return (jsx(motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
150
150
|
};
|
|
151
151
|
|
|
152
|
-
var styles$
|
|
152
|
+
var styles$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"};
|
|
153
153
|
|
|
154
154
|
/**
|
|
155
155
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -184,21 +184,21 @@ var styles$i = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
|
|
|
184
184
|
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
185
185
|
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
186
186
|
const getContainerClassName = () => {
|
|
187
|
-
const classes = [styles$
|
|
187
|
+
const classes = [styles$k.textInput];
|
|
188
188
|
if (success)
|
|
189
|
-
classes.push(styles$
|
|
189
|
+
classes.push(styles$k.success);
|
|
190
190
|
if (loading)
|
|
191
|
-
classes.push(styles$
|
|
191
|
+
classes.push(styles$k.loading);
|
|
192
192
|
if (icon)
|
|
193
|
-
classes.push(styles$
|
|
193
|
+
classes.push(styles$k.withIcon);
|
|
194
194
|
if (actionButton)
|
|
195
|
-
classes.push(styles$
|
|
195
|
+
classes.push(styles$k.withAction);
|
|
196
196
|
return classes.join(' ');
|
|
197
197
|
};
|
|
198
|
-
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$
|
|
198
|
+
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$k.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$k.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$k.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$k.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
|
|
199
199
|
}
|
|
200
200
|
|
|
201
|
-
var styles$
|
|
201
|
+
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"};
|
|
202
202
|
|
|
203
203
|
/**
|
|
204
204
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -251,7 +251,7 @@ function SimpleArrayInput({ label, values, onChange, placeholder }) {
|
|
|
251
251
|
const newValues = values.filter((_, i) => i !== index);
|
|
252
252
|
onChange(newValues);
|
|
253
253
|
};
|
|
254
|
-
return (jsxs("div", { className: styles$
|
|
254
|
+
return (jsxs("div", { className: styles$j.arrayInput, children: [jsx("h3", { className: styles$j.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: styles$j.arrayInputItem, children: [jsx("div", { className: styles$j.inputWrapper, children: jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$j.input }) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
255
255
|
}
|
|
256
256
|
// Complex object array implementation
|
|
257
257
|
function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
@@ -276,10 +276,10 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
|
276
276
|
// Generate key from all field values
|
|
277
277
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
278
278
|
};
|
|
279
|
-
return (jsxs("div", { className: styles$
|
|
279
|
+
return (jsxs("div", { className: styles$j.arrayInput, children: [jsx("h3", { className: styles$j.arrayInputLabel, children: label }), values.map((value, index) => (jsxs("div", { className: `${styles$j.arrayInputItem} ${fields.length > 1 ? styles$j.complexItem : ''}`, children: [jsx("div", { className: styles$j.fieldsWrapper, children: fields.map((field) => (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, generateKey(value, index)))), jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
280
280
|
}
|
|
281
281
|
|
|
282
|
-
var styles$
|
|
282
|
+
var styles$i = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
283
283
|
|
|
284
284
|
/**
|
|
285
285
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -323,7 +323,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
323
323
|
checkboxRef.current.indeterminate = indeterminate;
|
|
324
324
|
}
|
|
325
325
|
}, [indeterminate]);
|
|
326
|
-
return (jsxs("label", { className: styles$
|
|
326
|
+
return (jsxs("label", { className: styles$i.checkboxLabel, children: [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 && jsx("span", { className: styles$i.checkboxText, children: label })] }));
|
|
327
327
|
};
|
|
328
328
|
|
|
329
329
|
var DefaultContext = {
|
|
@@ -442,7 +442,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
442
442
|
return '';
|
|
443
443
|
};
|
|
444
444
|
|
|
445
|
-
var styles$
|
|
445
|
+
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"};
|
|
446
446
|
|
|
447
447
|
/**
|
|
448
448
|
* DateInput component - European format date picker with manual input support
|
|
@@ -529,19 +529,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
529
529
|
}
|
|
530
530
|
};
|
|
531
531
|
const getClassName = () => {
|
|
532
|
-
const classes = [styles$
|
|
532
|
+
const classes = [styles$h.dateInput];
|
|
533
533
|
if (error)
|
|
534
|
-
classes.push(styles$
|
|
534
|
+
classes.push(styles$h.error);
|
|
535
535
|
if (success)
|
|
536
|
-
classes.push(styles$
|
|
536
|
+
classes.push(styles$h.success);
|
|
537
537
|
if (loading)
|
|
538
|
-
classes.push(styles$
|
|
538
|
+
classes.push(styles$h.loading);
|
|
539
539
|
return classes.join(' ');
|
|
540
540
|
};
|
|
541
|
-
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$
|
|
541
|
+
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$h.label, children: label }), jsxs("div", { className: styles$h.inputWrapper, children: [jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$h.textInput, disabled: disabled || loading }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$h.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$h.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
542
542
|
}
|
|
543
543
|
|
|
544
|
-
var styles$
|
|
544
|
+
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"};
|
|
545
545
|
|
|
546
546
|
/**
|
|
547
547
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -646,23 +646,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
646
646
|
}
|
|
647
647
|
};
|
|
648
648
|
const getTriggerClassName = () => {
|
|
649
|
-
const classes = [styles$
|
|
649
|
+
const classes = [styles$g.dropdownTrigger];
|
|
650
650
|
if (isOpen)
|
|
651
|
-
classes.push(styles$
|
|
651
|
+
classes.push(styles$g.open);
|
|
652
652
|
if (loading)
|
|
653
|
-
classes.push(styles$
|
|
653
|
+
classes.push(styles$g.loading);
|
|
654
654
|
if (error)
|
|
655
|
-
classes.push(styles$
|
|
655
|
+
classes.push(styles$g.error);
|
|
656
656
|
return classes.join(' ');
|
|
657
657
|
};
|
|
658
|
-
return (jsxs("div", { className: styles$
|
|
658
|
+
return (jsxs("div", { className: styles$g.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$g.dropdownValue} ${!displayValue ? styles$g.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$g.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(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: [jsxs("div", { className: styles$g.dropdownSearch, children: [jsx(FiSearch, { className: styles$g.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$g.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$g.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
659
659
|
const isSelected = value === opt.value;
|
|
660
660
|
const isHighlighted = highlightedIndex === index;
|
|
661
|
-
return (jsxs(motion.button, { type: "button", className: `${styles$
|
|
662
|
-
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$
|
|
661
|
+
return (jsxs(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: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$g.checkIcon })] }, `${opt.value}-${index}`));
|
|
662
|
+
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$g.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
663
663
|
}
|
|
664
664
|
|
|
665
|
-
var styles$
|
|
665
|
+
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"};
|
|
666
666
|
|
|
667
667
|
/**
|
|
668
668
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -699,23 +699,23 @@ var styles$d = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
699
699
|
*/
|
|
700
700
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
701
701
|
const getClassName = () => {
|
|
702
|
-
const classes = [styles$
|
|
702
|
+
const classes = [styles$f.selectInput];
|
|
703
703
|
if (error)
|
|
704
|
-
classes.push(styles$
|
|
704
|
+
classes.push(styles$f.error);
|
|
705
705
|
if (success)
|
|
706
|
-
classes.push(styles$
|
|
706
|
+
classes.push(styles$f.success);
|
|
707
707
|
if (loading)
|
|
708
|
-
classes.push(styles$
|
|
708
|
+
classes.push(styles$f.loading);
|
|
709
709
|
return classes.join(' ');
|
|
710
710
|
};
|
|
711
|
-
return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$
|
|
711
|
+
return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$f.selectWrapper, children: [jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
712
712
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
713
713
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
714
714
|
return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
715
|
-
})] }), jsx(FiChevronDown, { className: styles$
|
|
715
|
+
})] }), jsx(FiChevronDown, { className: styles$f.selectIcon })] })] }));
|
|
716
716
|
}
|
|
717
717
|
|
|
718
|
-
var styles$
|
|
718
|
+
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-"};
|
|
719
719
|
|
|
720
720
|
/**
|
|
721
721
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -750,34 +750,34 @@ var styles$c = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
750
750
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false }) {
|
|
751
751
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
752
752
|
const getContainerClassName = () => {
|
|
753
|
-
const classes = [styles$
|
|
753
|
+
const classes = [styles$e.textareaContainer];
|
|
754
754
|
if (error)
|
|
755
|
-
classes.push(styles$
|
|
755
|
+
classes.push(styles$e.error);
|
|
756
756
|
if (success)
|
|
757
|
-
classes.push(styles$
|
|
757
|
+
classes.push(styles$e.success);
|
|
758
758
|
if (loading)
|
|
759
|
-
classes.push(styles$
|
|
759
|
+
classes.push(styles$e.loading);
|
|
760
760
|
if (focusMode)
|
|
761
|
-
classes.push(styles$
|
|
761
|
+
classes.push(styles$e.focusMode);
|
|
762
762
|
return classes.join(' ');
|
|
763
763
|
};
|
|
764
764
|
const getCharCountClassName = () => {
|
|
765
765
|
if (!maxLength)
|
|
766
|
-
return styles$
|
|
767
|
-
const classes = [styles$
|
|
766
|
+
return styles$e.characterCount;
|
|
767
|
+
const classes = [styles$e.characterCount];
|
|
768
768
|
const percentage = (value.length / maxLength) * 100;
|
|
769
769
|
if (percentage >= 100) {
|
|
770
|
-
classes.push(styles$
|
|
770
|
+
classes.push(styles$e.atLimit);
|
|
771
771
|
}
|
|
772
772
|
else if (percentage >= 80) {
|
|
773
|
-
classes.push(styles$
|
|
773
|
+
classes.push(styles$e.nearLimit);
|
|
774
774
|
}
|
|
775
775
|
return classes.join(' ');
|
|
776
776
|
};
|
|
777
|
-
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: textareaId, className: styles$
|
|
777
|
+
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: textareaId, className: styles$e.textareaLabel, children: [label, required && jsx("span", { className: styles$e.requiredIndicator, children: "*" })] }), 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 && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
|
|
778
778
|
}
|
|
779
779
|
|
|
780
|
-
var styles$
|
|
780
|
+
var styles$d = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
781
781
|
|
|
782
782
|
/**
|
|
783
783
|
* Toggle Component
|
|
@@ -822,9 +822,241 @@ var styles$b = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
|
|
|
822
822
|
*/
|
|
823
823
|
function Toggle(props) {
|
|
824
824
|
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
|
|
825
|
-
return (jsxs("div", { className: styles$
|
|
825
|
+
return (jsxs("div", { className: styles$d.toggleContainer, children: [jsxs("button", { className: `${styles$d.toggleButton} ${!isOn ? styles$d.active : ''}`, onClick: () => onToggle(false), children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$d.toggleButton} ${isOn ? styles$d.active : ''}`, onClick: () => onToggle(true), children: [rightIcon, rightLabel] })] }));
|
|
826
826
|
}
|
|
827
827
|
|
|
828
|
+
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"};
|
|
829
|
+
|
|
830
|
+
/**
|
|
831
|
+
* NumberStepper Component
|
|
832
|
+
*
|
|
833
|
+
* @component
|
|
834
|
+
* @description
|
|
835
|
+
* A number input component with increment and decrement controls.
|
|
836
|
+
* Supports keyboard navigation, min/max limits, and custom step values.
|
|
837
|
+
*
|
|
838
|
+
* @example
|
|
839
|
+
* // Basic usage
|
|
840
|
+
* <NumberStepper
|
|
841
|
+
* value={count}
|
|
842
|
+
* onChange={setCount}
|
|
843
|
+
* min={0}
|
|
844
|
+
* max={10}
|
|
845
|
+
* />
|
|
846
|
+
*
|
|
847
|
+
* @example
|
|
848
|
+
* // With label and icon
|
|
849
|
+
* <NumberStepper
|
|
850
|
+
* value={5}
|
|
851
|
+
* onChange={(val) => setValue(val)}
|
|
852
|
+
* min={0}
|
|
853
|
+
* max={100}
|
|
854
|
+
* step={5}
|
|
855
|
+
* label="Quantity"
|
|
856
|
+
* icon="📦"
|
|
857
|
+
* />
|
|
858
|
+
*
|
|
859
|
+
* @param {NumberStepperProps} props - The props for the NumberStepper component
|
|
860
|
+
* @returns {JSX.Element} The rendered NumberStepper component
|
|
861
|
+
*/
|
|
862
|
+
const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step = 1, label, icon, disabled = false, size = 'medium', variant = 'default', showPlusMinus = false, allowKeyboard = true, className = '', }) => {
|
|
863
|
+
const [isIncrementing, setIsIncrementing] = useState(false);
|
|
864
|
+
const [isDecrementing, setIsDecrementing] = useState(false);
|
|
865
|
+
const [displayValue, setDisplayValue] = useState(value);
|
|
866
|
+
useEffect(() => {
|
|
867
|
+
setDisplayValue(value);
|
|
868
|
+
}, [value]);
|
|
869
|
+
const handleIncrement = useCallback(() => {
|
|
870
|
+
if (disabled || value >= max)
|
|
871
|
+
return;
|
|
872
|
+
const newValue = Math.min(value + step, max);
|
|
873
|
+
onChange(newValue);
|
|
874
|
+
setIsIncrementing(true);
|
|
875
|
+
setTimeout(() => setIsIncrementing(false), 200);
|
|
876
|
+
}, [value, onChange, max, step, disabled]);
|
|
877
|
+
const handleDecrement = useCallback(() => {
|
|
878
|
+
if (disabled || value <= min)
|
|
879
|
+
return;
|
|
880
|
+
const newValue = Math.max(value - step, min);
|
|
881
|
+
onChange(newValue);
|
|
882
|
+
setIsDecrementing(true);
|
|
883
|
+
setTimeout(() => setIsDecrementing(false), 200);
|
|
884
|
+
}, [value, onChange, min, step, disabled]);
|
|
885
|
+
const handleKeyDown = useCallback((e) => {
|
|
886
|
+
if (!allowKeyboard || disabled)
|
|
887
|
+
return;
|
|
888
|
+
switch (e.key) {
|
|
889
|
+
case 'ArrowUp':
|
|
890
|
+
e.preventDefault();
|
|
891
|
+
handleIncrement();
|
|
892
|
+
break;
|
|
893
|
+
case 'ArrowDown':
|
|
894
|
+
e.preventDefault();
|
|
895
|
+
handleDecrement();
|
|
896
|
+
break;
|
|
897
|
+
case 'PageUp':
|
|
898
|
+
e.preventDefault();
|
|
899
|
+
const bigIncrease = Math.min(value + (step * 10), max);
|
|
900
|
+
onChange(bigIncrease);
|
|
901
|
+
break;
|
|
902
|
+
case 'PageDown':
|
|
903
|
+
e.preventDefault();
|
|
904
|
+
const bigDecrease = Math.max(value - (step * 10), min);
|
|
905
|
+
onChange(bigDecrease);
|
|
906
|
+
break;
|
|
907
|
+
case 'Home':
|
|
908
|
+
e.preventDefault();
|
|
909
|
+
if (min !== -Infinity)
|
|
910
|
+
onChange(min);
|
|
911
|
+
break;
|
|
912
|
+
case 'End':
|
|
913
|
+
e.preventDefault();
|
|
914
|
+
if (max !== Infinity)
|
|
915
|
+
onChange(max);
|
|
916
|
+
break;
|
|
917
|
+
}
|
|
918
|
+
}, [allowKeyboard, disabled, handleIncrement, handleDecrement, value, step, min, max, onChange]);
|
|
919
|
+
const handleInputChange = useCallback((e) => {
|
|
920
|
+
const inputValue = e.target.value;
|
|
921
|
+
if (inputValue === '' || inputValue === '-') {
|
|
922
|
+
setDisplayValue(inputValue);
|
|
923
|
+
return;
|
|
924
|
+
}
|
|
925
|
+
const numValue = parseFloat(inputValue);
|
|
926
|
+
if (!isNaN(numValue)) {
|
|
927
|
+
setDisplayValue(numValue);
|
|
928
|
+
}
|
|
929
|
+
}, []);
|
|
930
|
+
const handleInputBlur = useCallback(() => {
|
|
931
|
+
let finalValue = typeof displayValue === 'string'
|
|
932
|
+
? (displayValue === '' || displayValue === '-' ? min : parseFloat(displayValue))
|
|
933
|
+
: displayValue;
|
|
934
|
+
if (isNaN(finalValue)) {
|
|
935
|
+
finalValue = min;
|
|
936
|
+
}
|
|
937
|
+
finalValue = Math.max(min, Math.min(max, finalValue));
|
|
938
|
+
if (step !== 1) {
|
|
939
|
+
finalValue = Math.round(finalValue / step) * step;
|
|
940
|
+
}
|
|
941
|
+
onChange(finalValue);
|
|
942
|
+
setDisplayValue(finalValue);
|
|
943
|
+
}, [displayValue, min, max, step, onChange]);
|
|
944
|
+
const containerClasses = [
|
|
945
|
+
styles$c.container,
|
|
946
|
+
styles$c[size],
|
|
947
|
+
styles$c[variant],
|
|
948
|
+
disabled && styles$c.disabled,
|
|
949
|
+
className
|
|
950
|
+
].filter(Boolean).join(' ');
|
|
951
|
+
const isDecrementDisabled = disabled || value <= min;
|
|
952
|
+
const isIncrementDisabled = disabled || value >= max;
|
|
953
|
+
return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$c.header, children: [icon && jsx("span", { className: styles$c.icon, children: icon }), label && jsx("label", { className: styles$c.label, children: label })] })), jsxs("div", { className: styles$c.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(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 ? (jsx("span", { className: styles$c.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$c.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$c.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$c.valueWrapper, children: 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) }) }), jsx(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 ? (jsx("span", { className: styles$c.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$c.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$c.limits, children: [jsx("span", { className: styles$c.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$c.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
954
|
+
};
|
|
955
|
+
|
|
956
|
+
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"};
|
|
957
|
+
|
|
958
|
+
/**
|
|
959
|
+
* ToggleButton Component
|
|
960
|
+
*
|
|
961
|
+
* @component
|
|
962
|
+
* @description
|
|
963
|
+
* A toggle button component that can be activated/deactivated with a click.
|
|
964
|
+
* Different from a toggle switch, this is a button with on/off states.
|
|
965
|
+
* Perfect for boolean habits tracking or feature toggles.
|
|
966
|
+
*
|
|
967
|
+
* @example
|
|
968
|
+
* // Basic usage
|
|
969
|
+
* <ToggleButton
|
|
970
|
+
* active={isActive}
|
|
971
|
+
* onClick={() => setIsActive(!isActive)}
|
|
972
|
+
* icon="🦷"
|
|
973
|
+
* label="Teeth"
|
|
974
|
+
* />
|
|
975
|
+
*
|
|
976
|
+
* @example
|
|
977
|
+
* // With custom styling and animation
|
|
978
|
+
* <ToggleButton
|
|
979
|
+
* active={isEnabled}
|
|
980
|
+
* onClick={handleToggle}
|
|
981
|
+
* icon={<CustomIcon />}
|
|
982
|
+
* label="Feature"
|
|
983
|
+
* variant="filled"
|
|
984
|
+
* activeColor="success"
|
|
985
|
+
* animation="flip"
|
|
986
|
+
* showCheckmark
|
|
987
|
+
* />
|
|
988
|
+
*
|
|
989
|
+
* @param {ToggleButtonProps} props - The props for the ToggleButton component
|
|
990
|
+
* @returns {JSX.Element} The rendered ToggleButton component
|
|
991
|
+
*/
|
|
992
|
+
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
993
|
+
const buttonClasses = [
|
|
994
|
+
styles$b.button,
|
|
995
|
+
styles$b[size],
|
|
996
|
+
styles$b[variant],
|
|
997
|
+
active && styles$b.active,
|
|
998
|
+
active && styles$b[`active-${activeColor}`],
|
|
999
|
+
disabled && styles$b.disabled,
|
|
1000
|
+
animation !== 'none' && styles$b[`animation-${animation}`],
|
|
1001
|
+
className
|
|
1002
|
+
].filter(Boolean).join(' ');
|
|
1003
|
+
const labelClasses = [
|
|
1004
|
+
styles$b.label,
|
|
1005
|
+
hideLabelOnMobile && styles$b.hideMobile
|
|
1006
|
+
].filter(Boolean).join(' ');
|
|
1007
|
+
const iconVariants = {
|
|
1008
|
+
scale: {
|
|
1009
|
+
inactive: { scale: 1 },
|
|
1010
|
+
active: { scale: [1, 1.2, 1] }
|
|
1011
|
+
},
|
|
1012
|
+
rotate: {
|
|
1013
|
+
inactive: { rotate: 0 },
|
|
1014
|
+
active: { rotate: 360 }
|
|
1015
|
+
},
|
|
1016
|
+
flip: {
|
|
1017
|
+
inactive: { rotateY: 0 },
|
|
1018
|
+
active: { rotateY: 180 }
|
|
1019
|
+
},
|
|
1020
|
+
none: {
|
|
1021
|
+
inactive: {},
|
|
1022
|
+
active: {}
|
|
1023
|
+
}
|
|
1024
|
+
};
|
|
1025
|
+
const checkmarkVariants = {
|
|
1026
|
+
hidden: {
|
|
1027
|
+
scale: 0,
|
|
1028
|
+
opacity: 0,
|
|
1029
|
+
rotate: -90
|
|
1030
|
+
},
|
|
1031
|
+
visible: {
|
|
1032
|
+
scale: 1,
|
|
1033
|
+
opacity: 1,
|
|
1034
|
+
rotate: 0,
|
|
1035
|
+
transition: {
|
|
1036
|
+
type: "spring",
|
|
1037
|
+
stiffness: 500,
|
|
1038
|
+
damping: 25
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
};
|
|
1042
|
+
const backgroundVariants = {
|
|
1043
|
+
inactive: {
|
|
1044
|
+
scale: 0,
|
|
1045
|
+
opacity: 0
|
|
1046
|
+
},
|
|
1047
|
+
active: {
|
|
1048
|
+
scale: 1,
|
|
1049
|
+
opacity: 1,
|
|
1050
|
+
transition: {
|
|
1051
|
+
type: "spring",
|
|
1052
|
+
stiffness: 400,
|
|
1053
|
+
damping: 20
|
|
1054
|
+
}
|
|
1055
|
+
}
|
|
1056
|
+
};
|
|
1057
|
+
return (jsxs(motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsx(motion.div, { className: styles$b.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$b.content, children: [icon && (jsx(motion.div, { className: styles$b.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$b.icon, children: icon })) : (jsx("div", { className: styles$b.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$b.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$b.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1058
|
+
};
|
|
1059
|
+
|
|
828
1060
|
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"};
|
|
829
1061
|
|
|
830
1062
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
@@ -2162,5 +2394,5 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
2162
2394
|
} }), jsx("span", { className: styles.legendLabel, children: item.name }), jsx("span", { className: styles.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
|
|
2163
2395
|
};
|
|
2164
2396
|
|
|
2165
|
-
export { ArrayInput, BooleansHeatmap, Button, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, useTheme$1 as useTheme };
|
|
2397
|
+
export { ArrayInput, BooleansHeatmap, Button, Card, Checkbox, DateInput, EditFAB, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, SunburstChart, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, useTheme$1 as useTheme };
|
|
2166
2398
|
//# sourceMappingURL=index.esm.js.map
|