@stfrigerio/sito-template 0.1.23 → 0.1.24
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/organisms/index.d.ts +2 -0
- package/dist/components/organisms/index.d.ts.map +1 -1
- package/dist/index.esm.js +476 -179
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +474 -176
- 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$r = {"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$q = {"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$r.button,
|
|
98
|
+
styles$r[variant],
|
|
99
|
+
styles$r[size],
|
|
100
|
+
fullWidth && styles$r.fullWidth,
|
|
101
|
+
loading && styles$r.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$r.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$r.iconRight, children: iconRight })] }));
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
-
var styles$
|
|
107
|
+
var styles$q = {"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"};
|
|
108
108
|
|
|
109
109
|
/**
|
|
110
110
|
* Card Component
|
|
@@ -169,28 +169,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
|
|
|
169
169
|
onExpandChange?.(newExpanded);
|
|
170
170
|
};
|
|
171
171
|
const cardClasses = [
|
|
172
|
-
styles$
|
|
173
|
-
styles$
|
|
174
|
-
hoverable && styles$
|
|
175
|
-
clickable && styles$
|
|
176
|
-
!padding && styles$
|
|
177
|
-
expandable && styles$
|
|
172
|
+
styles$q.card,
|
|
173
|
+
styles$q[variant],
|
|
174
|
+
hoverable && styles$q.hoverable,
|
|
175
|
+
clickable && styles$q.clickable,
|
|
176
|
+
!padding && styles$q.noPadding,
|
|
177
|
+
expandable && styles$q.expandable,
|
|
178
178
|
className
|
|
179
179
|
].filter(Boolean).join(' ');
|
|
180
180
|
const renderHeader = () => {
|
|
181
181
|
if (header) {
|
|
182
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
182
|
+
return (jsxRuntime.jsxs("div", { className: styles$q.header, children: [jsxRuntime.jsx("div", { className: styles$q.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$q.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$q.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
183
183
|
}
|
|
184
184
|
if (title || subtitle) {
|
|
185
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
185
|
+
return (jsxRuntime.jsxs("div", { className: styles$q.header, children: [jsxRuntime.jsxs("div", { className: styles$q.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$q.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$q.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$q.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$q.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
186
186
|
}
|
|
187
187
|
return null;
|
|
188
188
|
};
|
|
189
|
-
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$
|
|
189
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$q.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$q.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$q.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$q.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$q.footer, children: footer })] }, "content")) })] }));
|
|
190
190
|
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 }));
|
|
191
191
|
};
|
|
192
192
|
|
|
193
|
-
var styles$
|
|
193
|
+
var styles$p = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
194
194
|
|
|
195
195
|
/**
|
|
196
196
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -234,7 +234,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
234
234
|
checkboxRef.current.indeterminate = indeterminate;
|
|
235
235
|
}
|
|
236
236
|
}, [indeterminate]);
|
|
237
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
237
|
+
return (jsxRuntime.jsxs("label", { className: styles$p.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$p.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$p.checkboxText, children: label })] }));
|
|
238
238
|
};
|
|
239
239
|
|
|
240
240
|
var DefaultContext = {
|
|
@@ -371,7 +371,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
371
371
|
return '';
|
|
372
372
|
};
|
|
373
373
|
|
|
374
|
-
var styles$
|
|
374
|
+
var styles$o = {"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"};
|
|
375
375
|
|
|
376
376
|
/**
|
|
377
377
|
* DateInput component - European format date picker with manual input support
|
|
@@ -458,19 +458,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
458
458
|
}
|
|
459
459
|
};
|
|
460
460
|
const getClassName = () => {
|
|
461
|
-
const classes = [styles$
|
|
461
|
+
const classes = [styles$o.dateInput];
|
|
462
462
|
if (error)
|
|
463
|
-
classes.push(styles$
|
|
463
|
+
classes.push(styles$o.error);
|
|
464
464
|
if (success)
|
|
465
|
-
classes.push(styles$
|
|
465
|
+
classes.push(styles$o.success);
|
|
466
466
|
if (loading)
|
|
467
|
-
classes.push(styles$
|
|
467
|
+
classes.push(styles$o.loading);
|
|
468
468
|
return classes.join(' ');
|
|
469
469
|
};
|
|
470
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
470
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$o.label, children: label }), jsxRuntime.jsxs("div", { className: styles$o.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$o.textInput, disabled: disabled || loading }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$o.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
471
471
|
}
|
|
472
472
|
|
|
473
|
-
var styles$
|
|
473
|
+
var styles$n = {"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"};
|
|
474
474
|
|
|
475
475
|
/**
|
|
476
476
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -575,23 +575,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
575
575
|
}
|
|
576
576
|
};
|
|
577
577
|
const getTriggerClassName = () => {
|
|
578
|
-
const classes = [styles$
|
|
578
|
+
const classes = [styles$n.dropdownTrigger];
|
|
579
579
|
if (isOpen)
|
|
580
|
-
classes.push(styles$
|
|
580
|
+
classes.push(styles$n.open);
|
|
581
581
|
if (loading)
|
|
582
|
-
classes.push(styles$
|
|
582
|
+
classes.push(styles$n.loading);
|
|
583
583
|
if (error)
|
|
584
|
-
classes.push(styles$
|
|
584
|
+
classes.push(styles$n.error);
|
|
585
585
|
return classes.join(' ');
|
|
586
586
|
};
|
|
587
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
587
|
+
return (jsxRuntime.jsxs("div", { className: styles$n.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$n.dropdownValue} ${!displayValue ? styles$n.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(FiChevronDown, { className: styles$n.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$n.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$n.dropdownSearch, children: [jsxRuntime.jsx(FiSearch, { className: styles$n.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$n.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$n.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
588
588
|
const isSelected = value === opt.value;
|
|
589
589
|
const isHighlighted = highlightedIndex === index;
|
|
590
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
591
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
590
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$n.dropdownOption} ${isSelected ? styles$n.selected : ''} ${isHighlighted ? styles$n.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$n.checkIcon })] }, `${opt.value}-${index}`));
|
|
591
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
592
592
|
}
|
|
593
593
|
|
|
594
|
-
var styles$
|
|
594
|
+
var styles$m = {"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"};
|
|
595
595
|
|
|
596
596
|
/**
|
|
597
597
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -628,23 +628,23 @@ var styles$l = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
628
628
|
*/
|
|
629
629
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
630
630
|
const getClassName = () => {
|
|
631
|
-
const classes = [styles$
|
|
631
|
+
const classes = [styles$m.selectInput];
|
|
632
632
|
if (error)
|
|
633
|
-
classes.push(styles$
|
|
633
|
+
classes.push(styles$m.error);
|
|
634
634
|
if (success)
|
|
635
|
-
classes.push(styles$
|
|
635
|
+
classes.push(styles$m.success);
|
|
636
636
|
if (loading)
|
|
637
|
-
classes.push(styles$
|
|
637
|
+
classes.push(styles$m.loading);
|
|
638
638
|
return classes.join(' ');
|
|
639
639
|
};
|
|
640
|
-
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$
|
|
640
|
+
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$m.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 => {
|
|
641
641
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
642
642
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
643
643
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
644
|
-
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$
|
|
644
|
+
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$m.selectIcon })] })] }));
|
|
645
645
|
}
|
|
646
646
|
|
|
647
|
-
var styles$
|
|
647
|
+
var styles$l = {"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-"};
|
|
648
648
|
|
|
649
649
|
/**
|
|
650
650
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -679,36 +679,36 @@ var styles$k = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
679
679
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
|
|
680
680
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
681
681
|
const getContainerClassName = () => {
|
|
682
|
-
const classes = [styles$
|
|
682
|
+
const classes = [styles$l.textareaContainer];
|
|
683
683
|
if (error)
|
|
684
|
-
classes.push(styles$
|
|
684
|
+
classes.push(styles$l.error);
|
|
685
685
|
if (success)
|
|
686
|
-
classes.push(styles$
|
|
686
|
+
classes.push(styles$l.success);
|
|
687
687
|
if (loading)
|
|
688
|
-
classes.push(styles$
|
|
688
|
+
classes.push(styles$l.loading);
|
|
689
689
|
if (focusMode)
|
|
690
|
-
classes.push(styles$
|
|
690
|
+
classes.push(styles$l.focusMode);
|
|
691
691
|
if (compact)
|
|
692
|
-
classes.push(styles$
|
|
692
|
+
classes.push(styles$l.compact);
|
|
693
693
|
return classes.join(' ');
|
|
694
694
|
};
|
|
695
695
|
const getCharCountClassName = () => {
|
|
696
696
|
if (!maxLength)
|
|
697
|
-
return styles$
|
|
698
|
-
const classes = [styles$
|
|
697
|
+
return styles$l.characterCount;
|
|
698
|
+
const classes = [styles$l.characterCount];
|
|
699
699
|
const percentage = (value.length / maxLength) * 100;
|
|
700
700
|
if (percentage >= 100) {
|
|
701
|
-
classes.push(styles$
|
|
701
|
+
classes.push(styles$l.atLimit);
|
|
702
702
|
}
|
|
703
703
|
else if (percentage >= 80) {
|
|
704
|
-
classes.push(styles$
|
|
704
|
+
classes.push(styles$l.nearLimit);
|
|
705
705
|
}
|
|
706
706
|
return classes.join(' ');
|
|
707
707
|
};
|
|
708
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
708
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$l.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$l.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$l.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 })] }))] }));
|
|
709
709
|
}
|
|
710
710
|
|
|
711
|
-
var styles$
|
|
711
|
+
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"};
|
|
712
712
|
|
|
713
713
|
/**
|
|
714
714
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -743,21 +743,21 @@ var styles$j = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
|
|
|
743
743
|
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
744
744
|
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
745
745
|
const getContainerClassName = () => {
|
|
746
|
-
const classes = [styles$
|
|
746
|
+
const classes = [styles$k.textInput];
|
|
747
747
|
if (success)
|
|
748
|
-
classes.push(styles$
|
|
748
|
+
classes.push(styles$k.success);
|
|
749
749
|
if (loading)
|
|
750
|
-
classes.push(styles$
|
|
750
|
+
classes.push(styles$k.loading);
|
|
751
751
|
if (icon)
|
|
752
|
-
classes.push(styles$
|
|
752
|
+
classes.push(styles$k.withIcon);
|
|
753
753
|
if (actionButton)
|
|
754
|
-
classes.push(styles$
|
|
754
|
+
classes.push(styles$k.withAction);
|
|
755
755
|
return classes.join(' ');
|
|
756
756
|
};
|
|
757
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$
|
|
757
|
+
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 }))] }));
|
|
758
758
|
}
|
|
759
759
|
|
|
760
|
-
var styles$
|
|
760
|
+
var styles$j = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
761
761
|
|
|
762
762
|
/**
|
|
763
763
|
* Toggle Component
|
|
@@ -809,10 +809,10 @@ function Toggle(props) {
|
|
|
809
809
|
justifyContent: 'center',
|
|
810
810
|
...style
|
|
811
811
|
};
|
|
812
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
812
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
|
|
813
813
|
}
|
|
814
814
|
|
|
815
|
-
var styles$
|
|
815
|
+
var styles$i = {"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"};
|
|
816
816
|
|
|
817
817
|
/**
|
|
818
818
|
* NumberStepper Component
|
|
@@ -929,18 +929,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
929
929
|
setDisplayValue(finalValue);
|
|
930
930
|
}, [displayValue, min, max, step, onChange]);
|
|
931
931
|
const containerClasses = [
|
|
932
|
-
styles$
|
|
933
|
-
styles$
|
|
934
|
-
styles$
|
|
935
|
-
disabled && styles$
|
|
932
|
+
styles$i.container,
|
|
933
|
+
styles$i[size],
|
|
934
|
+
styles$i[variant],
|
|
935
|
+
disabled && styles$i.disabled,
|
|
936
936
|
className
|
|
937
937
|
].filter(Boolean).join(' ');
|
|
938
938
|
const isDecrementDisabled = disabled || value <= min;
|
|
939
939
|
const isIncrementDisabled = disabled || value >= max;
|
|
940
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$
|
|
940
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$i.header, children: [icon && jsxRuntime.jsx("span", { className: styles$i.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$i.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$i.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$i.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$i.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$i.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$i.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$i.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$i.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$i.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$i.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$i.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$i.limits, children: [jsxRuntime.jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
941
941
|
};
|
|
942
942
|
|
|
943
|
-
var styles$
|
|
943
|
+
var styles$h = {"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"};
|
|
944
944
|
|
|
945
945
|
/**
|
|
946
946
|
* ToggleButton Component
|
|
@@ -978,18 +978,18 @@ var styles$g = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
978
978
|
*/
|
|
979
979
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, }) => {
|
|
980
980
|
const buttonClasses = [
|
|
981
|
-
styles$
|
|
982
|
-
styles$
|
|
983
|
-
styles$
|
|
984
|
-
active && styles$
|
|
985
|
-
active && styles$
|
|
986
|
-
disabled && styles$
|
|
987
|
-
animation !== 'none' && styles$
|
|
981
|
+
styles$h.button,
|
|
982
|
+
styles$h[size],
|
|
983
|
+
styles$h[variant],
|
|
984
|
+
active && styles$h.active,
|
|
985
|
+
active && styles$h[`active-${activeColor}`],
|
|
986
|
+
disabled && styles$h.disabled,
|
|
987
|
+
animation !== 'none' && styles$h[`animation-${animation}`],
|
|
988
988
|
className
|
|
989
989
|
].filter(Boolean).join(' ');
|
|
990
990
|
const labelClasses = [
|
|
991
|
-
styles$
|
|
992
|
-
hideLabelOnMobile && styles$
|
|
991
|
+
styles$h.label,
|
|
992
|
+
hideLabelOnMobile && styles$h.hideMobile
|
|
993
993
|
].filter(Boolean).join(' ');
|
|
994
994
|
const iconVariants = {
|
|
995
995
|
scale: {
|
|
@@ -1050,10 +1050,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1050
1050
|
'--toggle-bg-color': active ? `${color}20` : 'transparent'
|
|
1051
1051
|
})
|
|
1052
1052
|
};
|
|
1053
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, 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$
|
|
1053
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, 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$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$h.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$h.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$h.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$h.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$h.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1054
1054
|
};
|
|
1055
1055
|
|
|
1056
|
-
var styles$
|
|
1056
|
+
var styles$g = {"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"};
|
|
1057
1057
|
|
|
1058
1058
|
/**
|
|
1059
1059
|
* Slider component - A beautiful, animated range input
|
|
@@ -1139,16 +1139,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1139
1139
|
setShowTooltipState(false);
|
|
1140
1140
|
};
|
|
1141
1141
|
const dynamicColor = getDynamicColor();
|
|
1142
|
-
const sizeClass = styles$
|
|
1143
|
-
const stateClass = disabled ? styles$
|
|
1142
|
+
const sizeClass = styles$g[`size-${size}`];
|
|
1143
|
+
const stateClass = disabled ? styles$g.disabled : loading ? styles$g.loading : '';
|
|
1144
1144
|
if (loading) {
|
|
1145
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1145
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$g.slider} ${sizeClass} ${styles$g.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$g.label, children: label }), jsxRuntime.jsx("div", { className: styles$g.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
|
|
1146
1146
|
repeat: Infinity,
|
|
1147
1147
|
duration: 1.5,
|
|
1148
1148
|
ease: "easeInOut"
|
|
1149
1149
|
} }) })] }));
|
|
1150
1150
|
}
|
|
1151
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1151
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$g.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$g.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$g.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.fill, style: {
|
|
1152
1152
|
width: `${percentage}%`,
|
|
1153
1153
|
backgroundColor: dynamicColor
|
|
1154
1154
|
}, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
|
|
@@ -1158,7 +1158,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1158
1158
|
damping: 30
|
|
1159
1159
|
}, whileHover: {
|
|
1160
1160
|
boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
|
|
1161
|
-
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, className: styles$
|
|
1161
|
+
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, className: styles$g.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.thumb, style: {
|
|
1162
1162
|
left: `${percentage}%`,
|
|
1163
1163
|
backgroundColor: dynamicColor,
|
|
1164
1164
|
borderColor: colors.thumb || dynamicColor
|
|
@@ -1175,14 +1175,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1175
1175
|
}, whileHover: {
|
|
1176
1176
|
scale: 1.1,
|
|
1177
1177
|
transition: { duration: 0.1 }
|
|
1178
|
-
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1178
|
+
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.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$g.tooltip, style: {
|
|
1179
1179
|
left: `${percentage}%`,
|
|
1180
1180
|
backgroundColor: dynamicColor
|
|
1181
|
-
}, 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$
|
|
1181
|
+
}, 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$g.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
|
|
1182
1182
|
duration: 0.2,
|
|
1183
1183
|
type: "spring",
|
|
1184
1184
|
stiffness: 300
|
|
1185
|
-
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$
|
|
1185
|
+
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$g.labelsContainer, children: labels.map((labelConfig, index) => {
|
|
1186
1186
|
let position = 0;
|
|
1187
1187
|
if (labelConfig.position === 'start')
|
|
1188
1188
|
position = 0;
|
|
@@ -1190,7 +1190,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1190
1190
|
position = 100;
|
|
1191
1191
|
else if (typeof labelConfig.position === 'number')
|
|
1192
1192
|
position = labelConfig.position;
|
|
1193
|
-
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1193
|
+
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$g.labelItem, style: {
|
|
1194
1194
|
left: `${position}%`,
|
|
1195
1195
|
color: labelConfig.color
|
|
1196
1196
|
}, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
@@ -1203,7 +1203,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1203
1203
|
}) }))] }));
|
|
1204
1204
|
}
|
|
1205
1205
|
|
|
1206
|
-
var styles$
|
|
1206
|
+
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"};
|
|
1207
1207
|
|
|
1208
1208
|
/**
|
|
1209
1209
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -1270,11 +1270,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
|
|
|
1270
1270
|
itemIdsRef.current.splice(index, 1);
|
|
1271
1271
|
onChange(newValues);
|
|
1272
1272
|
};
|
|
1273
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1273
|
+
return (jsxRuntime.jsxs("div", { className: styles$f.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$f.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$f.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
1274
1274
|
duration: 0.3,
|
|
1275
1275
|
ease: "easeInOut",
|
|
1276
1276
|
layout: { duration: 0.2 }
|
|
1277
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
1277
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$f.inputWrapper, children: multiline ? (jsxRuntime.jsx("div", { style: inputStyle, children: jsxRuntime.jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$f.input, style: inputStyle })) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$f.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, itemIdsRef.current[index]))) }) }), jsxRuntime.jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$f.addButton, children: label })] }));
|
|
1278
1278
|
}
|
|
1279
1279
|
// Complex object array implementation
|
|
1280
1280
|
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
|
|
@@ -1299,14 +1299,14 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle,
|
|
|
1299
1299
|
// Generate key from all field values
|
|
1300
1300
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
1301
1301
|
};
|
|
1302
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1302
|
+
return (jsxRuntime.jsxs("div", { className: styles$f.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$f.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$f.arrayInputItem} ${fields.length > 1 ? styles$f.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
1303
1303
|
duration: 0.3,
|
|
1304
1304
|
ease: "easeInOut",
|
|
1305
1305
|
layout: { duration: 0.2 }
|
|
1306
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
1306
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$f.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: field.multiline ? (jsxRuntime.jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (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), "aria-label": "Remove item", className: styles$f.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxRuntime.jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$f.addButton, children: ["Add ", label] })] }));
|
|
1307
1307
|
}
|
|
1308
1308
|
|
|
1309
|
-
var styles$
|
|
1309
|
+
var styles$e = {"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"};
|
|
1310
1310
|
|
|
1311
1311
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
1312
1312
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
@@ -1391,15 +1391,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1391
1391
|
};
|
|
1392
1392
|
const getVariantClass = () => {
|
|
1393
1393
|
if (isSaving)
|
|
1394
|
-
return styles$
|
|
1394
|
+
return styles$e.primary;
|
|
1395
1395
|
if (isEditMode) {
|
|
1396
|
-
return hasUnsavedChanges ? styles$
|
|
1396
|
+
return hasUnsavedChanges ? styles$e.success : styles$e.secondary;
|
|
1397
1397
|
}
|
|
1398
|
-
return styles$
|
|
1398
|
+
return styles$e.primary;
|
|
1399
1399
|
};
|
|
1400
1400
|
const getIcon = () => {
|
|
1401
1401
|
if (isSaving) {
|
|
1402
|
-
return jsxRuntime.jsx("div", { className: styles$
|
|
1402
|
+
return jsxRuntime.jsx("div", { className: styles$e.loader });
|
|
1403
1403
|
}
|
|
1404
1404
|
if (isEditMode) {
|
|
1405
1405
|
return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
|
|
@@ -1414,14 +1414,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1414
1414
|
}
|
|
1415
1415
|
return "Enter edit mode";
|
|
1416
1416
|
};
|
|
1417
|
-
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$
|
|
1417
|
+
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$e.fab} ${getVariantClass()} ${isMobile ? styles$e.draggable : ''} ${isDragging ? styles$e.dragging : ''}`, style: getPositionStyles(), onClick: handleClick, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, disabled: isSaving, "aria-label": getAriaLabel(), initial: { scale: 0, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0, opacity: 0 }, whileHover: !isSaving && !isDragging ? { scale: 1.1 } : {}, whileTap: !isSaving && !isDragging ? { scale: 0.9 } : {}, transition: {
|
|
1418
1418
|
type: "spring",
|
|
1419
1419
|
stiffness: 260,
|
|
1420
1420
|
damping: 20
|
|
1421
1421
|
}, children: getIcon() }));
|
|
1422
1422
|
};
|
|
1423
1423
|
|
|
1424
|
-
var styles$
|
|
1424
|
+
var styles$d = {"searchContainer":"SearchBar-module_searchContainer__TdM1w","searchInputWrapper":"SearchBar-module_searchInputWrapper__kCZLU","searchIcon":"SearchBar-module_searchIcon__IIxEu","searchInput":"SearchBar-module_searchInput__V4gkE","clearButton":"SearchBar-module_clearButton__7fNIY","filterSelect":"SearchBar-module_filterSelect__xIVE4","resultsDropdown":"SearchBar-module_resultsDropdown__yh6NF","loadingState":"SearchBar-module_loadingState__4gidK","emptyState":"SearchBar-module_emptyState__RbI4s","spinner":"SearchBar-module_spinner__PMc6-","resultsGroups":"SearchBar-module_resultsGroups__U24DC","resultGroup":"SearchBar-module_resultGroup__SoTQH","groupHeader":"SearchBar-module_groupHeader__bFRHA","groupIcon":"SearchBar-module_groupIcon__9ENM-","groupTitle":"SearchBar-module_groupTitle__ZekZs","groupCount":"SearchBar-module_groupCount__PQIqw","groupResults":"SearchBar-module_groupResults__xTF52","resultItem":"SearchBar-module_resultItem__VaKKy","highlighted":"SearchBar-module_highlighted__Q-3sH","resultTitle":"SearchBar-module_resultTitle__i1uqL","resultSubtitle":"SearchBar-module_resultSubtitle__LQOJ1","resultMeta":"SearchBar-module_resultMeta__Kmkrn","resultContent":"SearchBar-module_resultContent__TzVzL","highlight":"SearchBar-module_highlight__Q3PSP"};
|
|
1425
1425
|
|
|
1426
1426
|
// Default filter options for backwards compatibility
|
|
1427
1427
|
const defaultFilterOptions = [
|
|
@@ -1614,18 +1614,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1614
1614
|
return text || '';
|
|
1615
1615
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1616
1616
|
const parts = text.split(regex);
|
|
1617
|
-
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$
|
|
1617
|
+
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$d.highlight, children: part }, index)) : (part));
|
|
1618
1618
|
};
|
|
1619
|
-
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$
|
|
1619
|
+
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$d.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$d.searchInputWrapper, children: [jsxRuntime.jsx(FiSearch, { className: styles$d.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$d.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$d.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsxRuntime.jsx(FiX, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$d.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && (jsxRuntime.jsx(framerMotion.motion.div, { ref: resultsRef, id: "search-results", className: styles$d.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxRuntime.jsxs("div", { className: styles$d.loadingState, children: [jsxRuntime.jsx("div", { className: styles$d.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$d.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$d.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
1620
1620
|
const Icon = entityIcons[type];
|
|
1621
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1621
|
+
return (jsxRuntime.jsxs("div", { className: styles$d.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$d.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$d.groupIcon }), jsxRuntime.jsx("span", { className: styles$d.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$d.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$d.groupResults, children: groupResults.map((result) => {
|
|
1622
1622
|
const globalIndex = results.indexOf(result);
|
|
1623
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
1623
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$d.resultItem} ${highlightedIndex === globalIndex ? styles$d.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$d.resultContent, children: [jsxRuntime.jsx("div", { className: styles$d.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$d.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$d.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
1624
1624
|
}) })] }, type));
|
|
1625
1625
|
}) })) })) })] }));
|
|
1626
1626
|
};
|
|
1627
1627
|
|
|
1628
|
-
var styles$
|
|
1628
|
+
var styles$c = {"modalOverlay":"TimePickerModal-module_modalOverlay__Cbq5-","modalContent":"TimePickerModal-module_modalContent__e6py2","modalHeader":"TimePickerModal-module_modalHeader__XhTgK","closeButton":"TimePickerModal-module_closeButton__qsRAG","timeDisplay":"TimePickerModal-module_timeDisplay__voGP4","pickerContainer":"TimePickerModal-module_pickerContainer__4qn3r","pickerColumn":"TimePickerModal-module_pickerColumn__0-kWf","pickerLabel":"TimePickerModal-module_pickerLabel__e7zQ2","pickerScroll":"TimePickerModal-module_pickerScroll__5Dcvw","pickerItem":"TimePickerModal-module_pickerItem__n8sC2","selected":"TimePickerModal-module_selected__oQA8Z","pickerDivider":"TimePickerModal-module_pickerDivider__eg83F","modalActions":"TimePickerModal-module_modalActions__eJRWU","cancelButton":"TimePickerModal-module_cancelButton__zri81","confirmButton":"TimePickerModal-module_confirmButton__q2p3Q"};
|
|
1629
1629
|
|
|
1630
1630
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1631
1631
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1646,10 +1646,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1646
1646
|
};
|
|
1647
1647
|
if (!isOpen)
|
|
1648
1648
|
return null;
|
|
1649
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
1649
|
+
return (jsxRuntime.jsx("div", { className: styles$c.modalOverlay, onClick: onClose, children: jsxRuntime.jsxs("div", { className: styles$c.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$c.modalHeader, children: [jsxRuntime.jsx("h3", { children: "Select Time" }), jsxRuntime.jsx("button", { className: styles$c.closeButton, onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(FiX, {}) })] }), jsxRuntime.jsxs("div", { className: styles$c.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxRuntime.jsxs("div", { className: styles$c.pickerContainer, children: [jsxRuntime.jsxs("div", { className: styles$c.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$c.pickerLabel, children: "Hours" }), jsxRuntime.jsx("div", { className: styles$c.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$c.pickerItem} ${selectedHour === i ? styles$c.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsxRuntime.jsx("div", { className: styles$c.pickerDivider, children: ":" }), jsxRuntime.jsxs("div", { className: styles$c.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$c.pickerLabel, children: "Minutes" }), jsxRuntime.jsx("div", { className: styles$c.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$c.pickerItem} ${selectedMinute === i ? styles$c.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxRuntime.jsxs("div", { className: styles$c.modalActions, children: [jsxRuntime.jsx("button", { className: styles$c.cancelButton, onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { className: styles$c.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
|
|
1650
1650
|
}
|
|
1651
1651
|
|
|
1652
|
-
var styles$
|
|
1652
|
+
var styles$b = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
|
|
1653
1653
|
|
|
1654
1654
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1655
1655
|
const [showPicker, setShowPicker] = React.useState(false);
|
|
@@ -1702,18 +1702,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1702
1702
|
}
|
|
1703
1703
|
};
|
|
1704
1704
|
const getContainerClassName = () => {
|
|
1705
|
-
const classes = [styles$
|
|
1705
|
+
const classes = [styles$b.timeInput];
|
|
1706
1706
|
if (error)
|
|
1707
|
-
classes.push(styles$
|
|
1707
|
+
classes.push(styles$b.error);
|
|
1708
1708
|
if (success)
|
|
1709
|
-
classes.push(styles$
|
|
1709
|
+
classes.push(styles$b.success);
|
|
1710
1710
|
if (loading)
|
|
1711
|
-
classes.push(styles$
|
|
1711
|
+
classes.push(styles$b.loading);
|
|
1712
1712
|
if (disabled)
|
|
1713
|
-
classes.push(styles$
|
|
1713
|
+
classes.push(styles$b.disabled);
|
|
1714
1714
|
return classes.join(' ');
|
|
1715
1715
|
};
|
|
1716
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$
|
|
1716
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$b.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$b.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$b.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$b.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsxRuntime.jsx("button", { type: "button", onClick: handleClockClick, className: styles$b.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsxRuntime.jsx(FiClock, { size: 20 }) })] })] }), jsxRuntime.jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
|
|
1717
1717
|
}
|
|
1718
1718
|
|
|
1719
1719
|
const ThemeContext = React.createContext(undefined);
|
|
@@ -1725,7 +1725,7 @@ const useTheme = () => {
|
|
|
1725
1725
|
return context;
|
|
1726
1726
|
};
|
|
1727
1727
|
|
|
1728
|
-
var styles$
|
|
1728
|
+
var styles$a = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
|
|
1729
1729
|
|
|
1730
1730
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
|
|
1731
1731
|
// Try to use internal context if available, otherwise use props
|
|
@@ -1753,16 +1753,16 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1753
1753
|
if (variant === 'toggle') {
|
|
1754
1754
|
// Simple toggle between light and dark
|
|
1755
1755
|
const isDark = theme.includes('dark');
|
|
1756
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1756
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$a.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(FiMoon, { size: 14 }) : jsxRuntime.jsx(FiSun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$a.label, children: isDark ? 'Dark' : 'Light' })] }));
|
|
1757
1757
|
}
|
|
1758
1758
|
if (variant === 'dropdown') {
|
|
1759
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1759
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$a.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$a.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$a.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$a.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$a.dropdownItem} ${theme === t.value ? styles$a.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$a.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$a.text, children: t.label })] }, t.value))) })] }));
|
|
1760
1760
|
}
|
|
1761
1761
|
// Default button variant - cycles through themes
|
|
1762
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1762
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$a.button} ${className}`, onClick: () => {
|
|
1763
1763
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1764
1764
|
setTheme(themes[nextIndex].value);
|
|
1765
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$
|
|
1765
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$a.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$a.label, children: currentThemeData.label })] }));
|
|
1766
1766
|
};
|
|
1767
1767
|
|
|
1768
1768
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -1770,7 +1770,7 @@ function SiJira (props) {
|
|
|
1770
1770
|
return GenIcon({"attr":{"role":"img","viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"},"child":[]}]})(props);
|
|
1771
1771
|
}
|
|
1772
1772
|
|
|
1773
|
-
var styles$
|
|
1773
|
+
var styles$9 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1774
1774
|
|
|
1775
1775
|
// Default tabs for backwards compatibility
|
|
1776
1776
|
const defaultTabs = [
|
|
@@ -1781,20 +1781,20 @@ const defaultTabs = [
|
|
|
1781
1781
|
];
|
|
1782
1782
|
const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
|
|
1783
1783
|
const tabs = customTabs ?? defaultTabs;
|
|
1784
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
1784
|
+
return (jsxRuntime.jsx("div", { className: `${styles$9.tabs} ${className}`, children: tabs.map((tab) => {
|
|
1785
1785
|
const isActive = activeTab === tab.id;
|
|
1786
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$
|
|
1786
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$9.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
|
|
1787
1787
|
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1788
1788
|
}, transition: {
|
|
1789
1789
|
rotate: {
|
|
1790
1790
|
duration: 0.5,
|
|
1791
1791
|
ease: 'easeInOut'
|
|
1792
1792
|
}
|
|
1793
|
-
}, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$
|
|
1793
|
+
}, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$9.tabIcon, children: React.createElement(tab.icon) })) : (jsxRuntime.jsx("span", { className: styles$9.tabIcon, children: tab.icon }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
|
|
1794
1794
|
}) }));
|
|
1795
1795
|
};
|
|
1796
1796
|
|
|
1797
|
-
var styles$
|
|
1797
|
+
var styles$8 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","weekDays":"Calendar-module_weekDays__4J-8f","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","weekView":"Calendar-module_weekView__bdtGs","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","weekNumber":"Calendar-module_weekNumber__nlo50","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7","dayView":"Calendar-module_dayView__PCIos","dayViewHeader":"Calendar-module_dayViewHeader__Gvxx2","timeColumnHeader":"Calendar-module_timeColumnHeader__B0btR","dayColumnHeader":"Calendar-module_dayColumnHeader__Rjqwg","dayViewScrollContainer":"Calendar-module_dayViewScrollContainer__84Byq","dayViewContent":"Calendar-module_dayViewContent__VU9JI","timeColumn":"Calendar-module_timeColumn__Sce-X","dayColumn":"Calendar-module_dayColumn__-j2oT","timeSlot":"Calendar-module_timeSlot__jldHq","timeLabel":"Calendar-module_timeLabel__9xLiK","hourSlot":"Calendar-module_hourSlot__z-80Q","hourLine":"Calendar-module_hourLine__fofdD","dayEvent":"Calendar-module_dayEvent__tSPFa","dayEventTitle":"Calendar-module_dayEventTitle__er03k","dayEventTime":"Calendar-module_dayEventTime__TlkeQ","currentTimeIndicator":"Calendar-module_currentTimeIndicator__GntOZ"};
|
|
1798
1798
|
|
|
1799
1799
|
/**
|
|
1800
1800
|
* Calendar component - A flexible, reusable calendar for displaying events
|
|
@@ -1998,11 +1998,11 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
1998
1998
|
return Math.floor(diff / oneWeek) + 1;
|
|
1999
1999
|
};
|
|
2000
2000
|
if (loading) {
|
|
2001
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
2001
|
+
return (jsxRuntime.jsx("div", { className: `${styles$8.calendar} ${styles$8.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$8.loadingSpinner, children: "Loading..." }) }));
|
|
2002
2002
|
}
|
|
2003
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
2003
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$8.calendar} ${className}`, style: style, children: [jsxRuntime.jsxs("div", { className: styles$8.header, children: [jsxRuntime.jsxs("div", { className: styles$8.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$8.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$8.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$8.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$8.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$8.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$8.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'month' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'week' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsxRuntime.jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'day' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] }), currentViewMode !== 'day' && (jsxRuntime.jsxs("div", { className: styles$8.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$8.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$8.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
|
|
2004
2004
|
// Day view layout
|
|
2005
|
-
jsxRuntime.jsxs("div", { className: styles$
|
|
2005
|
+
jsxRuntime.jsxs("div", { className: styles$8.dayView, children: [jsxRuntime.jsxs("div", { className: styles$8.dayViewHeader, children: [jsxRuntime.jsx("div", { className: styles$8.timeColumnHeader }), jsxRuntime.jsx("div", { className: styles$8.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsxRuntime.jsx("div", { className: styles$8.dayViewScrollContainer, children: jsxRuntime.jsxs("div", { className: styles$8.dayViewContent, children: [(() => {
|
|
2006
2006
|
const now = new Date();
|
|
2007
2007
|
const currentHour = now.getHours();
|
|
2008
2008
|
const currentMinute = now.getMinutes();
|
|
@@ -2010,15 +2010,15 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
2010
2010
|
const topPosition = (minutesSinceMidnight / 1440) * (24 * 60); // 24 hours * 60px per hour
|
|
2011
2011
|
// Only show if viewing today
|
|
2012
2012
|
const isToday = currentDate.toDateString() === now.toDateString();
|
|
2013
|
-
return isToday ? (jsxRuntime.jsx("div", { className: styles$
|
|
2014
|
-
})(), jsxRuntime.jsx("div", { className: styles$
|
|
2013
|
+
return isToday ? (jsxRuntime.jsx("div", { className: styles$8.currentTimeIndicator, style: { top: `${topPosition}px` } })) : null;
|
|
2014
|
+
})(), jsxRuntime.jsx("div", { className: styles$8.timeColumn, children: Array.from({ length: 24 }, (_, hour) => (jsxRuntime.jsx("div", { className: styles$8.timeSlot, children: jsxRuntime.jsxs("span", { className: styles$8.timeLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsxRuntime.jsx("div", { className: styles$8.dayColumn, children: Array.from({ length: 24 }, (_, hour) => {
|
|
2015
2015
|
const hourEvents = getDayEvents(currentDate).filter(event => {
|
|
2016
2016
|
if (!event.time)
|
|
2017
2017
|
return false;
|
|
2018
2018
|
const eventHour = parseInt(event.time.split(':')[0]);
|
|
2019
2019
|
return eventHour === hour;
|
|
2020
2020
|
});
|
|
2021
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2021
|
+
return (jsxRuntime.jsxs("div", { className: styles$8.hourSlot, children: [jsxRuntime.jsx("div", { className: styles$8.hourLine }), hourEvents.map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.dayEvent} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
|
|
2022
2022
|
backgroundColor: getEventColor(event),
|
|
2023
2023
|
color: getEventTextColor(event),
|
|
2024
2024
|
opacity: event.status === 'completed' ? 0.7 : 1
|
|
@@ -2036,17 +2036,17 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
2036
2036
|
}, whileTap: {
|
|
2037
2037
|
scale: 0.98,
|
|
2038
2038
|
transition: { duration: 0.1 }
|
|
2039
|
-
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$
|
|
2040
|
-
}) })] }) })] })) : (jsxRuntime.jsx("div", { className: `${styles$
|
|
2039
|
+
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$8.dayEventTitle, children: [jsxRuntime.jsx("span", { className: styles$8.dayEventTime, children: event.time }), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$8.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id)))] }, hour));
|
|
2040
|
+
}) })] }) })] })) : (jsxRuntime.jsx("div", { className: `${styles$8.daysGrid} ${currentViewMode === 'week' ? styles$8.weekView : ''}`, children: calendarData.days.map((day, index) => {
|
|
2041
2041
|
const dayEvents = getDayEvents(day);
|
|
2042
2042
|
const dayIsToday = isToday(day);
|
|
2043
2043
|
const isInCurrentMonth = currentViewMode === 'week' || isCurrentMonth(day);
|
|
2044
2044
|
const isWeekStart = showWeekNumbers && (index % 7 === 0);
|
|
2045
|
-
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$
|
|
2045
|
+
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.dayCell} ${dayIsToday ? styles$8.today : ''} ${!isInCurrentMonth ? styles$8.otherMonth : ''}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
2046
2046
|
duration: 0.3,
|
|
2047
2047
|
delay: index * 0.02,
|
|
2048
2048
|
ease: "easeOut"
|
|
2049
|
-
}, onClick: () => handleDateClick(day), children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$
|
|
2049
|
+
}, onClick: () => handleDateClick(day), children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$8.weekNumber, children: getWeekNumber(day) })), jsxRuntime.jsx("div", { className: styles$8.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$8.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$8.event} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
|
|
2050
2050
|
backgroundColor: getEventColor(event),
|
|
2051
2051
|
color: getEventTextColor(event),
|
|
2052
2052
|
opacity: event.status === 'completed' ? 0.7 : 1
|
|
@@ -2064,7 +2064,7 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
2064
2064
|
}, whileTap: {
|
|
2065
2065
|
scale: 0.98,
|
|
2066
2066
|
transition: { duration: 0.1 }
|
|
2067
|
-
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$
|
|
2067
|
+
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$8.eventTitle, children: [event.time && (jsxRuntime.jsx("span", { className: styles$8.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$8.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("div", { className: styles$8.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })), dayEvents.length === 0 && emptyState && (jsxRuntime.jsx("div", { className: styles$8.emptyState, children: emptyState }))] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
|
|
2068
2068
|
}) }))] }));
|
|
2069
2069
|
}
|
|
2070
2070
|
|
|
@@ -2134,7 +2134,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
|
|
|
2134
2134
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(isMobile || window.innerWidth <= 768) && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles.mobileMenuButton, onClick: toggleMobileMenu, "aria-label": "Toggle navigation menu", whileTap: { scale: 0.9 }, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: isMobileMenuOpen ? (jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 90, opacity: 0 }, children: jsxRuntime.jsx(FiX, {}) }, "close")) : (jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: 90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: -90, opacity: 0 }, children: jsxRuntime.jsx(FiMenu, {}) }, "menu")) }) })), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isMobileMenuOpen && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles.mobileBackdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: () => setIsMobileMenuOpen(false) })) }), jsxRuntime.jsx(framerMotion.motion.nav, { className: `${styles.navbar} ${styles[`navbar${variant.charAt(0).toUpperCase() + variant.slice(1)}`]} ${isMobileMenuOpen ? styles.mobileMenuOpen : ''} ${className}`, initial: variant === 'sidebar' ? { x: -300 } : { opacity: 0 }, animate: variant === 'sidebar' ? { x: isMobileMenuOpen || !isMobile ? 0 : -300 } : { opacity: 1 }, transition: { type: "spring", stiffness: 300, damping: 30 }, children: navContent })] }));
|
|
2135
2135
|
};
|
|
2136
2136
|
|
|
2137
|
-
var styles$
|
|
2137
|
+
var styles$7 = {"container":"MoodChart-module_container__MB1Vr","chart":"MoodChart-module_chart__4-spu","gridLine":"MoodChart-module_gridLine__YJpZ8","line":"MoodChart-module_line__LfeUX","xAxis":"MoodChart-module_xAxis__SeIWG","yAxis":"MoodChart-module_yAxis__sRjjE","dataPoint":"MoodChart-module_dataPoint__112P1","tooltip":"MoodChart-module_tooltip__vW59y","tooltipHeader":"MoodChart-module_tooltipHeader__U7yvN","tooltipDate":"MoodChart-module_tooltipDate__6Jjeu","tooltipRating":"MoodChart-module_tooltipRating__5A2Yx","ratingValue":"MoodChart-module_ratingValue__7Gpfx","ratingMax":"MoodChart-module_ratingMax__10WcJ","tooltipTags":"MoodChart-module_tooltipTags__FUQrU","tag":"MoodChart-module_tag__QhCh5","tooltipComment":"MoodChart-module_tooltipComment__6driJ"};
|
|
2138
2138
|
|
|
2139
2139
|
const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
2140
2140
|
const svgRef = React.useRef(null);
|
|
@@ -2190,27 +2190,27 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
2190
2190
|
g.selectAll('.grid-line-y')
|
|
2191
2191
|
.data(yScale.ticks(5))
|
|
2192
2192
|
.enter().append('line')
|
|
2193
|
-
.attr('class', styles$
|
|
2193
|
+
.attr('class', styles$7.gridLine)
|
|
2194
2194
|
.attr('x1', 0)
|
|
2195
2195
|
.attr('y1', d => yScale(d))
|
|
2196
2196
|
.attr('x2', chartWidth)
|
|
2197
2197
|
.attr('y2', d => yScale(d));
|
|
2198
2198
|
g.append('path')
|
|
2199
2199
|
.datum(processedData)
|
|
2200
|
-
.attr('class', styles$
|
|
2200
|
+
.attr('class', styles$7.line)
|
|
2201
2201
|
.attr('d', line);
|
|
2202
2202
|
g.append('g')
|
|
2203
|
-
.attr('class', styles$
|
|
2203
|
+
.attr('class', styles$7.xAxis)
|
|
2204
2204
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
2205
2205
|
.call(d3__namespace.axisBottom(xScale)
|
|
2206
2206
|
.tickFormat(d => d3__namespace.timeFormat('%m/%d')(d)));
|
|
2207
2207
|
g.append('g')
|
|
2208
|
-
.attr('class', styles$
|
|
2208
|
+
.attr('class', styles$7.yAxis)
|
|
2209
2209
|
.call(d3__namespace.axisLeft(yScale));
|
|
2210
2210
|
g.selectAll('.mood-circle')
|
|
2211
2211
|
.data(processedData)
|
|
2212
2212
|
.enter().append('circle')
|
|
2213
|
-
.attr('class', styles$
|
|
2213
|
+
.attr('class', styles$7.dataPoint)
|
|
2214
2214
|
.attr('cx', d => xScale(d.date))
|
|
2215
2215
|
.attr('cy', d => yScale(d.rating))
|
|
2216
2216
|
.attr('r', 5)
|
|
@@ -2247,16 +2247,16 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
2247
2247
|
setSelectedMood(null);
|
|
2248
2248
|
};
|
|
2249
2249
|
}, []);
|
|
2250
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2250
|
+
return (jsxRuntime.jsxs("div", { className: styles$7.container, ref: containerRef, onMouseLeave: () => setSelectedMood(null), children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxRuntime.jsxs("div", { className: styles$7.tooltip, style: {
|
|
2251
2251
|
position: 'absolute',
|
|
2252
2252
|
pointerEvents: 'none',
|
|
2253
2253
|
left: tooltipPosition.x,
|
|
2254
2254
|
top: tooltipPosition.y,
|
|
2255
2255
|
zIndex: 1000
|
|
2256
|
-
}, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
2256
|
+
}, 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 }))] }))] }));
|
|
2257
2257
|
};
|
|
2258
2258
|
|
|
2259
|
-
var styles$
|
|
2259
|
+
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"};
|
|
2260
2260
|
|
|
2261
2261
|
// Default colors as fallback
|
|
2262
2262
|
const DEFAULT_HABIT_COLORS = {
|
|
@@ -2403,7 +2403,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2403
2403
|
g.selectAll('.grid-line-y')
|
|
2404
2404
|
.data(yScale.ticks(5))
|
|
2405
2405
|
.enter().append('line')
|
|
2406
|
-
.attr('class', styles$
|
|
2406
|
+
.attr('class', styles$6.gridLine)
|
|
2407
2407
|
.attr('x1', 0)
|
|
2408
2408
|
.attr('y1', d => yScale(d))
|
|
2409
2409
|
.attr('x2', chartWidth)
|
|
@@ -2416,7 +2416,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2416
2416
|
const habitData = dates.map((date, i) => [date, aggregateData[habit][i]]).filter(d => typeof d[1] === 'number');
|
|
2417
2417
|
g.append('path')
|
|
2418
2418
|
.datum(habitData)
|
|
2419
|
-
.attr('class', styles$
|
|
2419
|
+
.attr('class', styles$6.line)
|
|
2420
2420
|
.attr('d', line)
|
|
2421
2421
|
.attr('stroke', getColor(habit))
|
|
2422
2422
|
.attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
|
|
@@ -2463,7 +2463,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2463
2463
|
g.selectAll(`.circle-${habit}`)
|
|
2464
2464
|
.data(habitData)
|
|
2465
2465
|
.enter().append('circle')
|
|
2466
|
-
.attr('class', (_d, i) => `${styles$
|
|
2466
|
+
.attr('class', (_d, i) => `${styles$6.dataPoint} circle-${habit}-${i}`)
|
|
2467
2467
|
.attr('cx', d => xScale(d[0]))
|
|
2468
2468
|
.attr('cy', d => yScale(d[1]))
|
|
2469
2469
|
.attr('r', 4)
|
|
@@ -2525,7 +2525,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2525
2525
|
xAxisGenerator.ticks(tickCount);
|
|
2526
2526
|
}
|
|
2527
2527
|
const xAxis = g.append('g')
|
|
2528
|
-
.attr('class', styles$
|
|
2528
|
+
.attr('class', styles$6.xAxis)
|
|
2529
2529
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
2530
2530
|
.call(xAxisGenerator);
|
|
2531
2531
|
// Rotate labels for better readability if needed
|
|
@@ -2537,7 +2537,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2537
2537
|
.attr('transform', 'rotate(-45)');
|
|
2538
2538
|
}
|
|
2539
2539
|
g.append('g')
|
|
2540
|
-
.attr('class', styles$
|
|
2540
|
+
.attr('class', styles$6.yAxis)
|
|
2541
2541
|
.call(d3__namespace.axisLeft(yScale));
|
|
2542
2542
|
}, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, customHabitColors, onDataPointClick]);
|
|
2543
2543
|
// Format date for tooltip display
|
|
@@ -2568,13 +2568,13 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2568
2568
|
monthly: { icon: '🗓️', label: 'Monthly' },
|
|
2569
2569
|
quarterly: { icon: '📊', label: 'Quarterly' }
|
|
2570
2570
|
};
|
|
2571
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2571
|
+
return (jsxRuntime.jsxs("div", { className: styles$6.container, children: [jsxRuntime.jsx("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))) }) }), 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: {
|
|
2572
2572
|
left: `${tooltipData.x}px`,
|
|
2573
2573
|
top: `${tooltipData.y - 80}px`
|
|
2574
|
-
}, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
2574
|
+
}, 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" })] })] })] }))] }));
|
|
2575
2575
|
};
|
|
2576
2576
|
|
|
2577
|
-
var styles$
|
|
2577
|
+
var styles$5 = {"container":"SleepChart-module_container__RjHVU","header":"SleepChart-module_header__bcoWe","title":"SleepChart-module_title__6-QII","legend":"SleepChart-module_legend__VsqQj","legendItem":"SleepChart-module_legendItem__2c1nd","sleepDot":"SleepChart-module_sleepDot__qCY6O","wakeDot":"SleepChart-module_wakeDot__-RcrT","chart":"SleepChart-module_chart__jC1nL","gridLine":"SleepChart-module_gridLine__hi715","sleepBar":"SleepChart-module_sleepBar__Hk76f","xAxis":"SleepChart-module_xAxis__xzXyM","yAxis":"SleepChart-module_yAxis__7N-LA","tooltip":"SleepChart-module_tooltip__jQBv1","visible":"SleepChart-module_visible__wy0ck","tooltipHeader":"SleepChart-module_tooltipHeader__5BdPL","tooltipEmoji":"SleepChart-module_tooltipEmoji__c5vtz","tooltipInfo":"SleepChart-module_tooltipInfo__9Yrno","tooltipRow":"SleepChart-module_tooltipRow__CuDaE","tooltipLabel":"SleepChart-module_tooltipLabel__7SNzQ","tooltipValue":"SleepChart-module_tooltipValue__FoAVy","tooltipDuration":"SleepChart-module_tooltipDuration__d2wBW"};
|
|
2578
2578
|
|
|
2579
2579
|
const parseTimeToDecimal = (time) => {
|
|
2580
2580
|
const [hours, minutes] = time.split(':').map(Number);
|
|
@@ -2632,7 +2632,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2632
2632
|
g.selectAll('.grid-line-x')
|
|
2633
2633
|
.data(d3__namespace.range(18, 43, 1))
|
|
2634
2634
|
.enter().append('line')
|
|
2635
|
-
.attr('class', styles$
|
|
2635
|
+
.attr('class', styles$5.gridLine)
|
|
2636
2636
|
.attr('x1', d => xScale(d))
|
|
2637
2637
|
.attr('y1', 0)
|
|
2638
2638
|
.attr('x2', d => xScale(d))
|
|
@@ -2665,7 +2665,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2665
2665
|
return;
|
|
2666
2666
|
const barHeight = yScale.bandwidth();
|
|
2667
2667
|
const sleepGroup = g.append('g')
|
|
2668
|
-
.attr('class', styles$
|
|
2668
|
+
.attr('class', styles$5.sleepBar)
|
|
2669
2669
|
.style('cursor', 'pointer')
|
|
2670
2670
|
.on('click', () => onDateClick?.(dayData.date));
|
|
2671
2671
|
// Handle sleep time and wake hour separately
|
|
@@ -2831,7 +2831,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2831
2831
|
(hour % 24) === 12 ? '12 PM' : `${(hour % 24) - 12} PM`
|
|
2832
2832
|
}));
|
|
2833
2833
|
const xAxis = g.append('g')
|
|
2834
|
-
.attr('class', styles$
|
|
2834
|
+
.attr('class', styles$5.xAxis)
|
|
2835
2835
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
2836
2836
|
.call(d3__namespace.axisBottom(xScale)
|
|
2837
2837
|
.tickValues(xAxisTicks.map(t => t.value))
|
|
@@ -2848,7 +2848,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2848
2848
|
});
|
|
2849
2849
|
const yAxisTicks = yDomain.filter((_, i) => i % Math.ceil(yDomain.length / 10) === 0);
|
|
2850
2850
|
g.append('g')
|
|
2851
|
-
.attr('class', styles$
|
|
2851
|
+
.attr('class', styles$5.yAxis)
|
|
2852
2852
|
.call(d3__namespace.axisLeft(yScale)
|
|
2853
2853
|
.tickValues(yAxisTicks)
|
|
2854
2854
|
.tickFormat(d => {
|
|
@@ -2856,17 +2856,17 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2856
2856
|
return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
|
|
2857
2857
|
}));
|
|
2858
2858
|
}, [sleepData, chartWidth, chartHeight, margin, onDateClick]);
|
|
2859
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2859
|
+
return (jsxRuntime.jsxs("div", { className: styles$5.container, children: [jsxRuntime.jsxs("div", { className: styles$5.header, children: [jsxRuntime.jsx("h3", { className: styles$5.title, children: "Sleep Pattern" }), jsxRuntime.jsxs("div", { className: styles$5.legend, children: [jsxRuntime.jsxs("div", { className: styles$5.legendItem, children: [jsxRuntime.jsx("span", { className: styles$5.sleepDot }), jsxRuntime.jsx("span", { children: "Sleep Time" })] }), jsxRuntime.jsxs("div", { className: styles$5.legendItem, children: [jsxRuntime.jsx("span", { className: styles$5.wakeDot }), jsxRuntime.jsx("span", { children: "Wake Time" })] })] })] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart }), tooltipData && (jsxRuntime.jsxs("div", { className: `${styles$5.tooltip} ${tooltipData ? styles$5.visible : ''}`, style: {
|
|
2860
2860
|
left: `${tooltipData.x}px`,
|
|
2861
2861
|
top: `${tooltipData.y}px`
|
|
2862
|
-
}, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
2862
|
+
}, children: [jsxRuntime.jsxs("div", { className: styles$5.tooltipHeader, children: [jsxRuntime.jsx("span", { className: styles$5.tooltipEmoji, children: "\uD83D\uDE34" }), jsxRuntime.jsx("span", { children: new Date(tooltipData.date).toLocaleDateString('en-US', {
|
|
2863
2863
|
weekday: 'short',
|
|
2864
2864
|
month: 'short',
|
|
2865
2865
|
day: 'numeric'
|
|
2866
|
-
}) })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
2866
|
+
}) })] }), jsxRuntime.jsxs("div", { className: styles$5.tooltipInfo, children: [tooltipData.sleepTime && (jsxRuntime.jsxs("div", { className: styles$5.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$5.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\uD83C\uDF19" }), jsxRuntime.jsx("span", { children: "Sleep:" })] }), jsxRuntime.jsx("span", { className: styles$5.tooltipValue, children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxRuntime.jsxs("div", { className: styles$5.tooltipRow, children: [jsxRuntime.jsxs("span", { className: styles$5.tooltipLabel, children: [jsxRuntime.jsx("span", { children: "\u2600\uFE0F" }), jsxRuntime.jsx("span", { children: "Wake:" })] }), jsxRuntime.jsx("span", { className: styles$5.tooltipValue, children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxRuntime.jsxs("div", { className: styles$5.tooltipDuration, children: [jsxRuntime.jsx("span", { children: "\u23F1\uFE0F" }), jsxRuntime.jsxs("span", { children: [Math.floor(tooltipData.duration), "h ", Math.round((tooltipData.duration % 1) * 60), "m"] })] }))] })] }))] }));
|
|
2867
2867
|
};
|
|
2868
2868
|
|
|
2869
|
-
var styles$
|
|
2869
|
+
var styles$4 = {"container":"BooleansHeatmap-module_container__IOyeU","title":"BooleansHeatmap-module_title__8DRRQ","habitEmoji":"BooleansHeatmap-module_habitEmoji__Mawv-","chart":"BooleansHeatmap-module_chart__-q0Pc","monthLabel":"BooleansHeatmap-module_monthLabel__MXbIg","dayLabel":"BooleansHeatmap-module_dayLabel__2RRtm","cell":"BooleansHeatmap-module_cell__WADVB","legend":"BooleansHeatmap-module_legend__WqGF8","legendItem":"BooleansHeatmap-module_legendItem__rDE2g","legendColor":"BooleansHeatmap-module_legendColor__Z34-d","tooltip":"BooleansHeatmap-module_tooltip__-fHl7"};
|
|
2870
2870
|
|
|
2871
2871
|
const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
2872
2872
|
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
@@ -2920,20 +2920,20 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
|
|
|
2920
2920
|
g.append('text')
|
|
2921
2921
|
.attr('x', weekIndex * (cellSize + cellGap))
|
|
2922
2922
|
.attr('y', -10)
|
|
2923
|
-
.attr('class', styles$
|
|
2923
|
+
.attr('class', styles$4.monthLabel)
|
|
2924
2924
|
.text(MONTHS[month]);
|
|
2925
2925
|
});
|
|
2926
2926
|
DAYS_OF_WEEK.forEach((day, index) => {
|
|
2927
2927
|
g.append('text')
|
|
2928
2928
|
.attr('x', -10)
|
|
2929
2929
|
.attr('y', index * (cellSize + cellGap) + cellSize / 2)
|
|
2930
|
-
.attr('class', styles$
|
|
2930
|
+
.attr('class', styles$4.dayLabel)
|
|
2931
2931
|
.attr('text-anchor', 'end')
|
|
2932
2932
|
.attr('alignment-baseline', 'middle')
|
|
2933
2933
|
.text(day);
|
|
2934
2934
|
});
|
|
2935
2935
|
const tooltip = d3__namespace.select('body').append('div')
|
|
2936
|
-
.attr('class', styles$
|
|
2936
|
+
.attr('class', styles$4.tooltip)
|
|
2937
2937
|
.style('opacity', 0)
|
|
2938
2938
|
.style('position', 'absolute');
|
|
2939
2939
|
const daysToShow = weeksToShow * 7;
|
|
@@ -2952,7 +2952,7 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
|
|
|
2952
2952
|
.attr('width', cellSize)
|
|
2953
2953
|
.attr('height', cellSize)
|
|
2954
2954
|
.attr('rx', 3)
|
|
2955
|
-
.attr('class', styles$
|
|
2955
|
+
.attr('class', styles$4.cell)
|
|
2956
2956
|
.attr('data-date', dateString)
|
|
2957
2957
|
.attr('data-value', isTrue ? 'true' : 'false')
|
|
2958
2958
|
.style('fill', isTrue ? habitColor : '#4D4D4DFF');
|
|
@@ -2980,10 +2980,10 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
|
|
|
2980
2980
|
tooltip.remove();
|
|
2981
2981
|
};
|
|
2982
2982
|
}, [data, habitName, width, height, startDate, endDate, weeksToShow, habitColor, habitEmoji]);
|
|
2983
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2983
|
+
return (jsxRuntime.jsxs("div", { className: styles$4.container, children: [jsxRuntime.jsxs("h3", { className: styles$4.title, children: [jsxRuntime.jsx("span", { className: styles$4.habitEmoji, children: habitEmoji }), habitName] }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart }), jsxRuntime.jsxs("div", { className: styles$4.legend, children: [jsxRuntime.jsxs("span", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.legendColor, style: { backgroundColor: habitColor } }), "Done"] }), jsxRuntime.jsxs("span", { className: styles$4.legendItem, children: [jsxRuntime.jsx("span", { className: styles$4.legendColor, style: { backgroundColor: '#4D4D4DFF' } }), "Not done"] })] })] }));
|
|
2984
2984
|
};
|
|
2985
2985
|
|
|
2986
|
-
var styles$
|
|
2986
|
+
var styles$3 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
|
|
2987
2987
|
|
|
2988
2988
|
const COLOR_PALETTE = [
|
|
2989
2989
|
'#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
|
|
@@ -3064,7 +3064,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
|
|
|
3064
3064
|
.outerRadius(d => Math.sqrt(d.y1))
|
|
3065
3065
|
.cornerRadius(3);
|
|
3066
3066
|
const tooltip = d3__namespace.select('body').append('div')
|
|
3067
|
-
.attr('class', styles$
|
|
3067
|
+
.attr('class', styles$3.tooltip)
|
|
3068
3068
|
.style('opacity', 0)
|
|
3069
3069
|
.style('position', 'absolute');
|
|
3070
3070
|
// Function to reset to original view
|
|
@@ -3494,10 +3494,10 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
|
|
|
3494
3494
|
tooltip.remove();
|
|
3495
3495
|
};
|
|
3496
3496
|
}, [data, width, height, colorMap, radius, tagColors, unit, centerLabel]);
|
|
3497
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3497
|
+
return (jsxRuntime.jsxs("div", { className: styles$3.container, children: [jsxRuntime.jsx("h3", { className: styles$3.title, children: title }), jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$3.chart })] }));
|
|
3498
3498
|
};
|
|
3499
3499
|
|
|
3500
|
-
var styles$
|
|
3500
|
+
var styles$2 = {"container":"PieChart-module_container__tXjbe","title":"PieChart-module_title__61o0R","chartContainer":"PieChart-module_chartContainer__uLmOz","chart":"PieChart-module_chart__3nqON","legend":"PieChart-module_legend__rAWgh","legendItem":"PieChart-module_legendItem__Nb031","legendColor":"PieChart-module_legendColor__fLuv9","legendLabel":"PieChart-module_legendLabel__xbjBr","legendValue":"PieChart-module_legendValue__h2WS2","tooltip":"PieChart-module_tooltip__140RU"};
|
|
3501
3501
|
|
|
3502
3502
|
const DEFAULT_COLORS = [
|
|
3503
3503
|
'#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
|
|
@@ -3537,7 +3537,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
3537
3537
|
.innerRadius(radius * 0.7)
|
|
3538
3538
|
.outerRadius(radius * 0.7);
|
|
3539
3539
|
const tooltip = d3__namespace.select('body').append('div')
|
|
3540
|
-
.attr('class', styles$
|
|
3540
|
+
.attr('class', styles$2.tooltip)
|
|
3541
3541
|
.style('opacity', 0)
|
|
3542
3542
|
.style('position', 'absolute');
|
|
3543
3543
|
const pieData = pie(data);
|
|
@@ -3633,12 +3633,12 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
3633
3633
|
tooltip.remove();
|
|
3634
3634
|
};
|
|
3635
3635
|
}, [data, width, height, radius]);
|
|
3636
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
3636
|
+
return (jsxRuntime.jsxs("div", { className: styles$2.container, children: [jsxRuntime.jsx("h3", { className: styles$2.title, children: title }), jsxRuntime.jsxs("div", { className: styles$2.chartContainer, children: [jsxRuntime.jsx("svg", { ref: svgRef, width: width, height: height, className: styles$2.chart }), showLegend && (jsxRuntime.jsx("div", { className: styles$2.legend, children: data.map((item, index) => (jsxRuntime.jsxs("div", { className: styles$2.legendItem, children: [jsxRuntime.jsx("span", { className: styles$2.legendColor, style: {
|
|
3637
3637
|
backgroundColor: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]
|
|
3638
|
-
} }), jsxRuntime.jsx("span", { className: styles$
|
|
3638
|
+
} }), jsxRuntime.jsx("span", { className: styles$2.legendLabel, children: item.name }), jsxRuntime.jsx("span", { className: styles$2.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
|
|
3639
3639
|
};
|
|
3640
3640
|
|
|
3641
|
-
var styles = {"slideshow":"ImageSlideshow-module_slideshow__Ku43h","fullscreen":"ImageSlideshow-module_fullscreen__YhVju","empty":"ImageSlideshow-module_empty__XaCpW","emptyState":"ImageSlideshow-module_emptyState__caEwx","mainContainer":"ImageSlideshow-module_mainContainer__E9aZ3","slide":"ImageSlideshow-module_slide__Wt0U-","image":"ImageSlideshow-module_image__aLHJX","imageLoader":"ImageSlideshow-module_imageLoader__5oAf5","spinner":"ImageSlideshow-module_spinner__fmIFu","control":"ImageSlideshow-module_control__WF7Lz","controlPrev":"ImageSlideshow-module_controlPrev__PCSgw","controlNext":"ImageSlideshow-module_controlNext__RMVX2","controlPlay":"ImageSlideshow-module_controlPlay__183mX","topControls":"ImageSlideshow-module_topControls__AIEJT","controlAction":"ImageSlideshow-module_controlAction__NCD7t","caption":"ImageSlideshow-module_caption__9a3JW","captionTitle":"ImageSlideshow-module_captionTitle__w5Izi","captionText":"ImageSlideshow-module_captionText__FvPyQ","imageMetadata":"ImageSlideshow-module_imageMetadata__5RF2N","metadataItem":"ImageSlideshow-module_metadataItem__6MJDP","indicators":"ImageSlideshow-module_indicators__2cH2G","hasThumbnails":"ImageSlideshow-module_hasThumbnails__0B1N-","indicator":"ImageSlideshow-module_indicator__4zGqm","indicatorActive":"ImageSlideshow-module_indicatorActive__oLeK2","thumbnails":"ImageSlideshow-module_thumbnails__zwiUz","thumbnail":"ImageSlideshow-module_thumbnail__3YyIx","thumbnailActive":"ImageSlideshow-module_thumbnailActive__aADJh","thumbnailImage":"ImageSlideshow-module_thumbnailImage__Ft7Iq"};
|
|
3641
|
+
var styles$1 = {"slideshow":"ImageSlideshow-module_slideshow__Ku43h","fullscreen":"ImageSlideshow-module_fullscreen__YhVju","empty":"ImageSlideshow-module_empty__XaCpW","emptyState":"ImageSlideshow-module_emptyState__caEwx","mainContainer":"ImageSlideshow-module_mainContainer__E9aZ3","slide":"ImageSlideshow-module_slide__Wt0U-","image":"ImageSlideshow-module_image__aLHJX","imageLoader":"ImageSlideshow-module_imageLoader__5oAf5","spinner":"ImageSlideshow-module_spinner__fmIFu","control":"ImageSlideshow-module_control__WF7Lz","controlPrev":"ImageSlideshow-module_controlPrev__PCSgw","controlNext":"ImageSlideshow-module_controlNext__RMVX2","controlPlay":"ImageSlideshow-module_controlPlay__183mX","topControls":"ImageSlideshow-module_topControls__AIEJT","controlAction":"ImageSlideshow-module_controlAction__NCD7t","caption":"ImageSlideshow-module_caption__9a3JW","captionTitle":"ImageSlideshow-module_captionTitle__w5Izi","captionText":"ImageSlideshow-module_captionText__FvPyQ","imageMetadata":"ImageSlideshow-module_imageMetadata__5RF2N","metadataItem":"ImageSlideshow-module_metadataItem__6MJDP","indicators":"ImageSlideshow-module_indicators__2cH2G","hasThumbnails":"ImageSlideshow-module_hasThumbnails__0B1N-","indicator":"ImageSlideshow-module_indicator__4zGqm","indicatorActive":"ImageSlideshow-module_indicatorActive__oLeK2","thumbnails":"ImageSlideshow-module_thumbnails__zwiUz","thumbnail":"ImageSlideshow-module_thumbnail__3YyIx","thumbnailActive":"ImageSlideshow-module_thumbnailActive__aADJh","thumbnailImage":"ImageSlideshow-module_thumbnailImage__Ft7Iq"};
|
|
3642
3642
|
|
|
3643
3643
|
const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, showThumbnails = true, showControls = true, showIndicators = true, showCaptions = true, loop = true, fadeTransition = false, enableFullscreen = true, enableDownload = false, enableShare = false, enableDragReorder = false, lazyLoading = true, preloadAdjacent = true, className = '', onImageChange, onDownload, onShare, onImageReorder, initialIndex = 0, }) => {
|
|
3644
3644
|
const [currentIndex, setCurrentIndex] = React.useState(initialIndex);
|
|
@@ -3856,7 +3856,7 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
|
|
|
3856
3856
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
3857
3857
|
}, [goToPrevious, goToNext]);
|
|
3858
3858
|
if (!imageOrder || imageOrder.length === 0) {
|
|
3859
|
-
return (jsxRuntime.jsx("div", { className: `${styles.slideshow} ${styles.empty} ${className}`, children: jsxRuntime.jsx("div", { className: styles.emptyState, children: jsxRuntime.jsx("span", { children: "No images to display" }) }) }));
|
|
3859
|
+
return (jsxRuntime.jsx("div", { className: `${styles$1.slideshow} ${styles$1.empty} ${className}`, children: jsxRuntime.jsx("div", { className: styles$1.emptyState, children: jsxRuntime.jsx("span", { children: "No images to display" }) }) }));
|
|
3860
3860
|
}
|
|
3861
3861
|
const slideVariants = {
|
|
3862
3862
|
enter: (direction) => ({
|
|
@@ -3876,15 +3876,312 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
|
|
|
3876
3876
|
};
|
|
3877
3877
|
const currentImage = imageOrder[currentIndex];
|
|
3878
3878
|
const isImageLoaded = loadedImages.has(currentImage.id);
|
|
3879
|
-
return (jsxRuntime.jsxs("div", { ref: slideshowRef, className: `${styles.slideshow} ${isFullscreen ? styles.fullscreen : ''} ${showThumbnails && imageOrder.length > 1 ? styles.hasThumbnails : ''} ${className}`, children: [jsxRuntime.jsxs("div", { className: styles.mainContainer, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: 1, children: jsxRuntime.jsxs(framerMotion.motion.div, { custom: 1, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
|
|
3879
|
+
return (jsxRuntime.jsxs("div", { ref: slideshowRef, className: `${styles$1.slideshow} ${isFullscreen ? styles$1.fullscreen : ''} ${showThumbnails && imageOrder.length > 1 ? styles$1.hasThumbnails : ''} ${className}`, children: [jsxRuntime.jsxs("div", { className: styles$1.mainContainer, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: [jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", custom: 1, children: jsxRuntime.jsxs(framerMotion.motion.div, { custom: 1, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
|
|
3880
3880
|
x: { type: "spring", stiffness: 300, damping: 30 },
|
|
3881
3881
|
opacity: { duration: 0.3 }
|
|
3882
|
-
}, className: styles.slide, children: [jsxRuntime.jsx("img", { ref: imageRef, src: lazyLoading && !isImageLoaded ? undefined : currentImage.src, "data-src": lazyLoading ? currentImage.src : undefined, srcSet: currentImage.srcSet, sizes: currentImage.sizes, alt: currentImage.alt, className: styles.image, draggable: false, onLoad: () => handleImageLoad(currentImage.id), style: {
|
|
3882
|
+
}, className: styles$1.slide, children: [jsxRuntime.jsx("img", { ref: imageRef, src: lazyLoading && !isImageLoaded ? undefined : currentImage.src, "data-src": lazyLoading ? currentImage.src : undefined, srcSet: currentImage.srcSet, sizes: currentImage.sizes, alt: currentImage.alt, className: styles$1.image, draggable: false, onLoad: () => handleImageLoad(currentImage.id), style: {
|
|
3883
3883
|
opacity: lazyLoading && !isImageLoaded ? 0 : 1,
|
|
3884
3884
|
transition: 'opacity 0.3s ease'
|
|
3885
|
-
} }), lazyLoading && !isImageLoaded && (jsxRuntime.jsx("div", { className: styles.imageLoader, children: jsxRuntime.jsx("div", { className: styles.spinner }) }))] }, currentIndex) }), showControls && imageOrder.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: `${styles.control} ${styles.controlPrev}`, onClick: goToPrevious, disabled: !loop && currentIndex === 0, "aria-label": "Previous image", children: jsxRuntime.jsx(FiChevronLeft, {}) }), jsxRuntime.jsx("button", { className: `${styles.control} ${styles.controlNext}`, onClick: goToNext, disabled: !loop && currentIndex === imageOrder.length - 1, "aria-label": "Next image", children: jsxRuntime.jsx(FiChevronRight, {}) })] })), jsxRuntime.jsxs("div", { className: styles.topControls, children: [enableFullscreen && (jsxRuntime.jsx("button", { className: `${styles.control} ${styles.controlAction}`, onClick: toggleFullscreen, "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', title: isFullscreen ? 'Exit fullscreen (F)' : 'Enter fullscreen (F)', children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiMaximize, {}) }) })), enableDownload && (jsxRuntime.jsx("button", { className: `${styles.control} ${styles.controlAction}`, onClick: handleDownload, "aria-label": "Download image", title: "Download image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiDownload, {}) }) })), enableShare && (jsxRuntime.jsx("button", { className: `${styles.control} ${styles.controlAction}`, onClick: handleShare, "aria-label": "Share image", title: "Share image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiShare2, {}) }) }))] }), autoPlay && imageOrder.length > 1 && (jsxRuntime.jsx("button", { className: `${styles.control} ${styles.controlPlay}`, onClick: togglePlayPause, "aria-label": isPlaying ? 'Pause slideshow' : 'Play slideshow', title: isPlaying ? 'Pause slideshow (Space)' : 'Play slideshow (Space)', children: isPlaying ? jsxRuntime.jsx(FiPause, {}) : jsxRuntime.jsx(FiPlay, {}) })), showCaptions && (currentImage.caption || currentImage.title) && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles.caption, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: [currentImage.title && (jsxRuntime.jsx("h3", { className: styles.captionTitle, children: currentImage.title })), currentImage.caption && (jsxRuntime.jsx("p", { className: styles.captionText, children: currentImage.caption })), currentImage.metadata && (jsxRuntime.jsxs("div", { className: styles.imageMetadata, children: [currentImage.metadata.photographer && (jsxRuntime.jsxs("span", { className: styles.metadataItem, children: ["\uD83D\uDCF7 ", currentImage.metadata.photographer] })), currentImage.metadata.location && (jsxRuntime.jsxs("span", { className: styles.metadataItem, children: ["\uD83D\uDCCD ", currentImage.metadata.location] })), currentImage.metadata.camera && (jsxRuntime.jsxs("span", { className: styles.metadataItem, children: ["\uD83D\uDCF9 ", currentImage.metadata.camera] }))] }))] }))] }), showIndicators && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: styles.indicators, children: imageOrder.map((_, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles.indicator} ${index === currentIndex ? styles.indicatorActive : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.2 }, whileTap: { scale: 0.8 }, "aria-label": `Go to slide ${index + 1}` }, index))) })), showThumbnails && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: `${styles.thumbnails} ${isDragging ? styles.thumbnailsDragging : ''}`, children: imageOrder.map((image, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles.thumbnail} ${index === currentIndex ? styles.thumbnailActive : ''} ${draggedIndex === index ? styles.thumbnailDragged : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, "aria-label": `Go to ${image.alt}`, draggable: enableDragReorder, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), title: image.title || image.alt, children: jsxRuntime.jsx("img", { src: image.src, alt: image.alt, className: styles.thumbnailImage, draggable: false }) }, image.id))) }))] }));
|
|
3885
|
+
} }), lazyLoading && !isImageLoaded && (jsxRuntime.jsx("div", { className: styles$1.imageLoader, children: jsxRuntime.jsx("div", { className: styles$1.spinner }) }))] }, currentIndex) }), showControls && imageOrder.length > 1 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlPrev}`, onClick: goToPrevious, disabled: !loop && currentIndex === 0, "aria-label": "Previous image", children: jsxRuntime.jsx(FiChevronLeft, {}) }), jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlNext}`, onClick: goToNext, disabled: !loop && currentIndex === imageOrder.length - 1, "aria-label": "Next image", children: jsxRuntime.jsx(FiChevronRight, {}) })] })), jsxRuntime.jsxs("div", { className: styles$1.topControls, children: [enableFullscreen && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: toggleFullscreen, "aria-label": isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen', title: isFullscreen ? 'Exit fullscreen (F)' : 'Enter fullscreen (F)', children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiMaximize, {}) }) })), enableDownload && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: handleDownload, "aria-label": "Download image", title: "Download image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiDownload, {}) }) })), enableShare && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: handleShare, "aria-label": "Share image", title: "Share image", children: jsxRuntime.jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsxRuntime.jsx(FiShare2, {}) }) }))] }), autoPlay && imageOrder.length > 1 && (jsxRuntime.jsx("button", { className: `${styles$1.control} ${styles$1.controlPlay}`, onClick: togglePlayPause, "aria-label": isPlaying ? 'Pause slideshow' : 'Play slideshow', title: isPlaying ? 'Pause slideshow (Space)' : 'Play slideshow (Space)', children: isPlaying ? jsxRuntime.jsx(FiPause, {}) : jsxRuntime.jsx(FiPlay, {}) })), showCaptions && (currentImage.caption || currentImage.title) && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$1.caption, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: [currentImage.title && (jsxRuntime.jsx("h3", { className: styles$1.captionTitle, children: currentImage.title })), currentImage.caption && (jsxRuntime.jsx("p", { className: styles$1.captionText, children: currentImage.caption })), currentImage.metadata && (jsxRuntime.jsxs("div", { className: styles$1.imageMetadata, children: [currentImage.metadata.photographer && (jsxRuntime.jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCF7 ", currentImage.metadata.photographer] })), currentImage.metadata.location && (jsxRuntime.jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCCD ", currentImage.metadata.location] })), currentImage.metadata.camera && (jsxRuntime.jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCF9 ", currentImage.metadata.camera] }))] }))] }))] }), showIndicators && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: styles$1.indicators, children: imageOrder.map((_, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles$1.indicator} ${index === currentIndex ? styles$1.indicatorActive : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.2 }, whileTap: { scale: 0.8 }, "aria-label": `Go to slide ${index + 1}` }, index))) })), showThumbnails && imageOrder.length > 1 && (jsxRuntime.jsx("div", { className: `${styles$1.thumbnails} ${isDragging ? styles$1.thumbnailsDragging : ''}`, children: imageOrder.map((image, index) => (jsxRuntime.jsx(framerMotion.motion.button, { className: `${styles$1.thumbnail} ${index === currentIndex ? styles$1.thumbnailActive : ''} ${draggedIndex === index ? styles$1.thumbnailDragged : ''}`, onClick: () => goToSlide(index), whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, "aria-label": `Go to ${image.alt}`, draggable: enableDragReorder, onDragStart: (e) => handleDragStart(e, index), onDragOver: handleDragOver, onDrop: (e) => handleDrop(e, index), title: image.title || image.alt, children: jsxRuntime.jsx("img", { src: image.src, alt: image.alt, className: styles$1.thumbnailImage, draggable: false }) }, image.id))) }))] }));
|
|
3886
3886
|
};
|
|
3887
3887
|
|
|
3888
|
+
var styles = {"container":"Table-module_container__CH3T9","header":"Table-module_header__qVoF2","title":"Table-module_title__DSZgm","actions":"Table-module_actions__2J1i0","controls":"Table-module_controls__3WToN","searchBox":"Table-module_searchBox__bh3f3","searchIcon":"Table-module_searchIcon__1pQ5l","searchInput":"Table-module_searchInput__SrK6l","clearButton":"Table-module_clearButton__4Fysz","clearFiltersButton":"Table-module_clearFiltersButton__yFLI9","resultCount":"Table-module_resultCount__RR7Z6","loading":"Table-module_loading__xxSIa","spinner":"Table-module_spinner__T8mdH","empty":"Table-module_empty__-qPi2","emptyIcon":"Table-module_emptyIcon__FLViS","tableWrapper":"Table-module_tableWrapper__LvHGH","stickyHeader":"Table-module_stickyHeader__Dz0O8","table":"Table-module_table__4T9xo","striped":"Table-module_striped__TBcT6","compact":"Table-module_compact__w-QVs","th":"Table-module_th__bpKfX","td":"Table-module_td__HaytM","hoverable":"Table-module_hoverable__4aHgq","headerCell":"Table-module_headerCell__WUy2w","headerText":"Table-module_headerText__WGAqz","sortButton":"Table-module_sortButton__CJwYq","sortIcon":"Table-module_sortIcon__G48h1","columnFilter":"Table-module_columnFilter__hwNd2","tr":"Table-module_tr__-j8Fa","selected":"Table-module_selected__pjiMr","clickable":"Table-module_clickable__9R5oq","checkboxColumn":"Table-module_checkboxColumn__SpbCr","actionsColumn":"Table-module_actionsColumn__7x--N","actionButtons":"Table-module_actionButtons__8JQhr","actionButton":"Table-module_actionButton__9EQZu","actionButtonPrimary":"Table-module_actionButtonPrimary__Xyzgu","actionButtonSecondary":"Table-module_actionButtonSecondary__RiR1E","actionButtonDanger":"Table-module_actionButtonDanger__7aX-2","actionButtonWarning":"Table-module_actionButtonWarning__2s73k","actionButtonSuccess":"Table-module_actionButtonSuccess__DvbtN","checkbox":"Table-module_checkbox__9LC-f","nullValue":"Table-module_nullValue__TVTmT","badge":"Table-module_badge__OO-UL","badgeSuccess":"Table-module_badgeSuccess__uIJVY","badgeDanger":"Table-module_badgeDanger__Y6RPD","code":"Table-module_code__SIFLQ","pagination":"Table-module_pagination__UVcSr","pageInfo":"Table-module_pageInfo__e-k17","pageControls":"Table-module_pageControls__htKNN","pageButton":"Table-module_pageButton__9ukDT","pageNumber":"Table-module_pageNumber__qpnbj","pageSizeSelect":"Table-module_pageSizeSelect__GbSKL"};
|
|
3889
|
+
|
|
3890
|
+
/**
|
|
3891
|
+
* A comprehensive table component with sorting, filtering, pagination, selection, and row actions.
|
|
3892
|
+
*
|
|
3893
|
+
* Features:
|
|
3894
|
+
* - Sorting by clicking column headers
|
|
3895
|
+
* - Global search and per-column filtering
|
|
3896
|
+
* - Row selection with bulk actions
|
|
3897
|
+
* - Pagination with customizable page sizes
|
|
3898
|
+
* - Row-level action buttons
|
|
3899
|
+
* - Responsive design with sticky headers
|
|
3900
|
+
* - Framer Motion animations (can be disabled for performance)
|
|
3901
|
+
* - Full theme integration via CSS custom properties
|
|
3902
|
+
*
|
|
3903
|
+
* @template T - The type of data objects in the table
|
|
3904
|
+
* @param props - Table configuration and data
|
|
3905
|
+
* @returns React component
|
|
3906
|
+
*
|
|
3907
|
+
* @example
|
|
3908
|
+
* ```tsx
|
|
3909
|
+
* const users = [{ id: 1, name: 'John', email: 'john@example.com' }]
|
|
3910
|
+
* const columns = [
|
|
3911
|
+
* { key: 'name', header: 'Name', sortable: true },
|
|
3912
|
+
* { key: 'email', header: 'Email', filterable: true }
|
|
3913
|
+
* ]
|
|
3914
|
+
*
|
|
3915
|
+
* <Table
|
|
3916
|
+
* data={users}
|
|
3917
|
+
* columns={columns}
|
|
3918
|
+
* searchable
|
|
3919
|
+
* pagination
|
|
3920
|
+
* rowActions={[
|
|
3921
|
+
* {
|
|
3922
|
+
* icon: <EditIcon />,
|
|
3923
|
+
* label: 'Edit user',
|
|
3924
|
+
* onClick: (user) => editUser(user),
|
|
3925
|
+
* variant: 'primary'
|
|
3926
|
+
* }
|
|
3927
|
+
* ]}
|
|
3928
|
+
* />
|
|
3929
|
+
* ```
|
|
3930
|
+
*/
|
|
3931
|
+
const TableComponent = function Table({ data, columns, keyField = 'id', title, searchable = false, selectable = false, pagination = false, onRowClick, onSelectionChange, actions, rowActions, actionButtonStyles, emptyMessage = 'No data available', loading = false, striped = false, hoverable = true, compact = false, stickyHeader = false, animated = true, className = '' }) {
|
|
3932
|
+
// State
|
|
3933
|
+
const [selectedRows, setSelectedRows] = React.useState(new Set());
|
|
3934
|
+
const [searchQuery, setSearchQuery] = React.useState('');
|
|
3935
|
+
const [columnFilters, setColumnFilters] = React.useState({});
|
|
3936
|
+
const [sortConfig, setSortConfig] = React.useState({ key: null, direction: 'asc' });
|
|
3937
|
+
const [currentPage, setCurrentPage] = React.useState(1);
|
|
3938
|
+
const [pageSize, setPageSize] = React.useState(typeof pagination === 'object' && pagination.pageSize ? pagination.pageSize : 10);
|
|
3939
|
+
// Pagination options
|
|
3940
|
+
const pageSizeOptions = React.useMemo(() => {
|
|
3941
|
+
if (typeof pagination === 'object' && pagination.pageSizeOptions) {
|
|
3942
|
+
return pagination.pageSizeOptions;
|
|
3943
|
+
}
|
|
3944
|
+
return [10, 25, 50, 100];
|
|
3945
|
+
}, [pagination]);
|
|
3946
|
+
// Memoize search columns for performance
|
|
3947
|
+
const searchableColumns = React.useMemo(() => columns.map(col => col.key), [columns]);
|
|
3948
|
+
// Filter data
|
|
3949
|
+
const filteredData = React.useMemo(() => {
|
|
3950
|
+
if (!searchQuery && Object.keys(columnFilters).length === 0) {
|
|
3951
|
+
return data;
|
|
3952
|
+
}
|
|
3953
|
+
let filtered = data;
|
|
3954
|
+
// Global search
|
|
3955
|
+
if (searchable && searchQuery) {
|
|
3956
|
+
const query = searchQuery.toLowerCase();
|
|
3957
|
+
filtered = filtered.filter(item => {
|
|
3958
|
+
return searchableColumns.some(key => {
|
|
3959
|
+
const value = item[key];
|
|
3960
|
+
return value != null && String(value).toLowerCase().includes(query);
|
|
3961
|
+
});
|
|
3962
|
+
});
|
|
3963
|
+
}
|
|
3964
|
+
// Column filters
|
|
3965
|
+
for (const [key, filterValue] of Object.entries(columnFilters)) {
|
|
3966
|
+
if (filterValue) {
|
|
3967
|
+
const lowerFilterValue = filterValue.toLowerCase();
|
|
3968
|
+
filtered = filtered.filter(item => {
|
|
3969
|
+
const value = item[key];
|
|
3970
|
+
return value != null && String(value).toLowerCase().includes(lowerFilterValue);
|
|
3971
|
+
});
|
|
3972
|
+
}
|
|
3973
|
+
}
|
|
3974
|
+
return filtered;
|
|
3975
|
+
}, [data, searchableColumns, searchQuery, columnFilters, searchable]);
|
|
3976
|
+
// Sort data
|
|
3977
|
+
const sortedData = React.useMemo(() => {
|
|
3978
|
+
if (!sortConfig.key)
|
|
3979
|
+
return filteredData;
|
|
3980
|
+
return [...filteredData].sort((a, b) => {
|
|
3981
|
+
const aValue = a[sortConfig.key];
|
|
3982
|
+
const bValue = b[sortConfig.key];
|
|
3983
|
+
if (aValue === null || aValue === undefined)
|
|
3984
|
+
return 1;
|
|
3985
|
+
if (bValue === null || bValue === undefined)
|
|
3986
|
+
return -1;
|
|
3987
|
+
let comparison = 0;
|
|
3988
|
+
if (typeof aValue === 'number' && typeof bValue === 'number') {
|
|
3989
|
+
comparison = aValue - bValue;
|
|
3990
|
+
}
|
|
3991
|
+
else if (aValue instanceof Date && bValue instanceof Date) {
|
|
3992
|
+
comparison = aValue.getTime() - bValue.getTime();
|
|
3993
|
+
}
|
|
3994
|
+
else {
|
|
3995
|
+
comparison = String(aValue).localeCompare(String(bValue));
|
|
3996
|
+
}
|
|
3997
|
+
return sortConfig.direction === 'asc' ? comparison : -comparison;
|
|
3998
|
+
});
|
|
3999
|
+
}, [filteredData, sortConfig]);
|
|
4000
|
+
// Paginate data
|
|
4001
|
+
const paginatedData = React.useMemo(() => {
|
|
4002
|
+
if (!pagination)
|
|
4003
|
+
return sortedData;
|
|
4004
|
+
const startIndex = (currentPage - 1) * pageSize;
|
|
4005
|
+
const endIndex = startIndex + pageSize;
|
|
4006
|
+
return sortedData.slice(startIndex, endIndex);
|
|
4007
|
+
}, [sortedData, pagination, currentPage, pageSize]);
|
|
4008
|
+
const totalPages = React.useMemo(() => {
|
|
4009
|
+
if (!pagination)
|
|
4010
|
+
return 1;
|
|
4011
|
+
return Math.ceil(sortedData.length / pageSize);
|
|
4012
|
+
}, [sortedData, pageSize, pagination]);
|
|
4013
|
+
// Handlers
|
|
4014
|
+
const handleSort = React.useCallback((key) => {
|
|
4015
|
+
setSortConfig(prev => {
|
|
4016
|
+
if (prev.key !== key) {
|
|
4017
|
+
return { key, direction: 'asc' };
|
|
4018
|
+
}
|
|
4019
|
+
if (prev.direction === 'asc') {
|
|
4020
|
+
return { key, direction: 'desc' };
|
|
4021
|
+
}
|
|
4022
|
+
return { key: null, direction: 'asc' };
|
|
4023
|
+
});
|
|
4024
|
+
}, []);
|
|
4025
|
+
const handleSelectAll = React.useCallback(() => {
|
|
4026
|
+
const currentPageIds = paginatedData.map(item => item[keyField]);
|
|
4027
|
+
const allSelected = currentPageIds.every(id => selectedRows.has(id));
|
|
4028
|
+
const newSelected = new Set(selectedRows);
|
|
4029
|
+
if (allSelected) {
|
|
4030
|
+
currentPageIds.forEach(id => newSelected.delete(id));
|
|
4031
|
+
}
|
|
4032
|
+
else {
|
|
4033
|
+
currentPageIds.forEach(id => newSelected.add(id));
|
|
4034
|
+
}
|
|
4035
|
+
setSelectedRows(newSelected);
|
|
4036
|
+
if (onSelectionChange) {
|
|
4037
|
+
const selectedItems = data.filter(item => newSelected.has(item[keyField]));
|
|
4038
|
+
onSelectionChange(selectedItems);
|
|
4039
|
+
}
|
|
4040
|
+
}, [paginatedData, selectedRows, keyField, data, onSelectionChange]);
|
|
4041
|
+
const handleSelectRow = React.useCallback((itemId) => {
|
|
4042
|
+
const newSelected = new Set(selectedRows);
|
|
4043
|
+
if (newSelected.has(itemId)) {
|
|
4044
|
+
newSelected.delete(itemId);
|
|
4045
|
+
}
|
|
4046
|
+
else {
|
|
4047
|
+
newSelected.add(itemId);
|
|
4048
|
+
}
|
|
4049
|
+
setSelectedRows(newSelected);
|
|
4050
|
+
if (onSelectionChange) {
|
|
4051
|
+
const selectedItems = data.filter(item => newSelected.has(item[keyField]));
|
|
4052
|
+
onSelectionChange(selectedItems);
|
|
4053
|
+
}
|
|
4054
|
+
}, [selectedRows, data, keyField, onSelectionChange]);
|
|
4055
|
+
const handleColumnFilter = React.useCallback((key, value) => {
|
|
4056
|
+
setColumnFilters(prev => ({ ...prev, [key]: value }));
|
|
4057
|
+
setCurrentPage(1);
|
|
4058
|
+
}, []);
|
|
4059
|
+
const clearFilters = React.useCallback(() => {
|
|
4060
|
+
setSearchQuery('');
|
|
4061
|
+
setColumnFilters({});
|
|
4062
|
+
setSortConfig({ key: null, direction: 'asc' });
|
|
4063
|
+
setCurrentPage(1);
|
|
4064
|
+
}, []);
|
|
4065
|
+
// Computed values
|
|
4066
|
+
const hasActiveFilters = searchQuery || Object.values(columnFilters).some(v => v);
|
|
4067
|
+
const currentPageIds = paginatedData.map(item => item[keyField]);
|
|
4068
|
+
const allCurrentPageSelected = selectable && currentPageIds.length > 0 &&
|
|
4069
|
+
currentPageIds.every(id => selectedRows.has(id));
|
|
4070
|
+
const someCurrentPageSelected = selectable &&
|
|
4071
|
+
currentPageIds.some(id => selectedRows.has(id));
|
|
4072
|
+
const selectedItems = React.useMemo(() => {
|
|
4073
|
+
return data.filter(item => selectedRows.has(item[keyField]));
|
|
4074
|
+
}, [data, selectedRows, keyField]);
|
|
4075
|
+
// Helper function to merge button styles
|
|
4076
|
+
const getButtonStyles = React.useCallback((action) => {
|
|
4077
|
+
const defaultSize = actionButtonStyles?.size || 36;
|
|
4078
|
+
const actionSize = action.buttonStyles?.size || defaultSize;
|
|
4079
|
+
const baseStyles = {
|
|
4080
|
+
width: actionSize,
|
|
4081
|
+
height: actionSize,
|
|
4082
|
+
borderRadius: action.buttonStyles?.borderRadius || actionButtonStyles?.borderRadius || '50%',
|
|
4083
|
+
fontSize: action.buttonStyles?.fontSize || actionButtonStyles?.fontSize,
|
|
4084
|
+
padding: action.buttonStyles?.padding || actionButtonStyles?.padding,
|
|
4085
|
+
...actionButtonStyles?.style,
|
|
4086
|
+
...action.style,
|
|
4087
|
+
...action.buttonStyles?.style
|
|
4088
|
+
};
|
|
4089
|
+
// Handle icon size - cast to any to allow CSS custom properties
|
|
4090
|
+
if (action.buttonStyles?.iconSize || actionButtonStyles?.iconSize) {
|
|
4091
|
+
baseStyles['--icon-size'] = typeof (action.buttonStyles?.iconSize || actionButtonStyles?.iconSize) === 'number'
|
|
4092
|
+
? `${action.buttonStyles?.iconSize || actionButtonStyles?.iconSize}px`
|
|
4093
|
+
: action.buttonStyles?.iconSize || actionButtonStyles?.iconSize;
|
|
4094
|
+
}
|
|
4095
|
+
return baseStyles;
|
|
4096
|
+
}, [actionButtonStyles]);
|
|
4097
|
+
const getButtonClassName = React.useCallback((action) => {
|
|
4098
|
+
const baseClass = styles.actionButton;
|
|
4099
|
+
const variantClass = action.variant === 'primary' ? styles.actionButtonPrimary :
|
|
4100
|
+
action.variant === 'danger' ? styles.actionButtonDanger :
|
|
4101
|
+
action.variant === 'warning' ? styles.actionButtonWarning :
|
|
4102
|
+
action.variant === 'success' ? styles.actionButtonSuccess :
|
|
4103
|
+
action.variant === 'custom' ? '' :
|
|
4104
|
+
styles.actionButtonSecondary;
|
|
4105
|
+
const globalCustomClass = actionButtonStyles?.className || '';
|
|
4106
|
+
const actionCustomClass = action.className || '';
|
|
4107
|
+
const buttonCustomClass = action.buttonStyles?.className || '';
|
|
4108
|
+
return `${baseClass} ${variantClass} ${globalCustomClass} ${actionCustomClass} ${buttonCustomClass}`.trim();
|
|
4109
|
+
}, [actionButtonStyles]);
|
|
4110
|
+
// Loading state
|
|
4111
|
+
if (loading) {
|
|
4112
|
+
return (jsxRuntime.jsx("div", { className: `${styles.container} ${className}`, children: jsxRuntime.jsxs("div", { className: styles.loading, children: [jsxRuntime.jsx("div", { className: styles.spinner }), jsxRuntime.jsx("span", { children: "Loading..." })] }) }));
|
|
4113
|
+
}
|
|
4114
|
+
// Empty state
|
|
4115
|
+
if (data.length === 0) {
|
|
4116
|
+
return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), jsxRuntime.jsxs("div", { className: styles.empty, children: [jsxRuntime.jsx("span", { className: styles.emptyIcon, children: "\uD83D\uDCCA" }), jsxRuntime.jsx("p", { children: emptyMessage })] })] }));
|
|
4117
|
+
}
|
|
4118
|
+
return (jsxRuntime.jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions) && (jsxRuntime.jsxs("div", { className: styles.header, children: [title && jsxRuntime.jsx("h2", { className: styles.title, children: title }), actions && selectedItems.length > 0 && (jsxRuntime.jsx("div", { className: styles.actions, children: actions(selectedItems) }))] })), (searchable || hasActiveFilters) && (jsxRuntime.jsxs("div", { className: styles.controls, children: [searchable && (jsxRuntime.jsxs("div", { className: styles.searchBox, children: [jsxRuntime.jsx("span", { className: styles.searchIcon, children: "\uD83D\uDD0D" }), jsxRuntime.jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: e => {
|
|
4119
|
+
setSearchQuery(e.target.value);
|
|
4120
|
+
setCurrentPage(1);
|
|
4121
|
+
}, className: styles.searchInput }), searchQuery && (jsxRuntime.jsx("button", { className: styles.clearButton, onClick: () => setSearchQuery(''), children: "\u2715" }))] })), hasActiveFilters && (jsxRuntime.jsx("button", { className: styles.clearFiltersButton, onClick: clearFilters, children: "Clear All Filters" })), jsxRuntime.jsxs("div", { className: styles.resultCount, children: [filteredData.length, " ", filteredData.length === 1 ? 'result' : 'results'] })] })), jsxRuntime.jsx("div", { className: `${styles.tableWrapper} ${stickyHeader ? styles.stickyHeader : ''}`, children: jsxRuntime.jsxs("table", { className: `
|
|
4122
|
+
${styles.table}
|
|
4123
|
+
${striped ? styles.striped : ''}
|
|
4124
|
+
${hoverable ? styles.hoverable : ''}
|
|
4125
|
+
${compact ? styles.compact : ''}
|
|
4126
|
+
`, role: "table", "aria-label": title || 'Data table', "aria-rowcount": sortedData.length, "aria-describedby": title ? `${title.replace(/\s+/g, '-').toLowerCase()}-summary` : undefined, children: [jsxRuntime.jsx("thead", { children: jsxRuntime.jsxs("tr", { children: [selectable && (jsxRuntime.jsx("th", { className: styles.checkboxColumn, scope: "col", children: jsxRuntime.jsx("input", { type: "checkbox", checked: allCurrentPageSelected, ref: input => {
|
|
4127
|
+
if (input) {
|
|
4128
|
+
input.indeterminate = !allCurrentPageSelected && someCurrentPageSelected;
|
|
4129
|
+
}
|
|
4130
|
+
}, onChange: handleSelectAll, className: styles.checkbox, "aria-label": "Select all rows" }) })), columns.map(column => (jsxRuntime.jsx("th", { className: `${styles.th} ${column.className || ''}`, style: {
|
|
4131
|
+
width: column.width,
|
|
4132
|
+
textAlign: column.align || 'left'
|
|
4133
|
+
}, scope: "col", role: "columnheader", "aria-sort": sortConfig.key === column.key
|
|
4134
|
+
? sortConfig.direction === 'asc' ? 'ascending' : 'descending'
|
|
4135
|
+
: column.sortable ? 'none' : undefined, children: jsxRuntime.jsxs("div", { className: styles.headerCell, children: [column.sortable ? (jsxRuntime.jsxs("button", { className: styles.sortButton, onClick: () => handleSort(column.key), "aria-label": `Sort by ${column.header} ${sortConfig.key === column.key
|
|
4136
|
+
? sortConfig.direction === 'asc' ? '(descending)' : '(ascending)'
|
|
4137
|
+
: '(ascending)'}`, children: [jsxRuntime.jsx("span", { children: column.header }), jsxRuntime.jsx("span", { className: styles.sortIcon, "aria-hidden": "true", children: sortConfig.key === column.key ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '↕' })] })) : (jsxRuntime.jsx("span", { className: styles.headerText, children: column.header })), column.filterable && (jsxRuntime.jsx("input", { type: "text", placeholder: "Filter...", value: columnFilters[column.key] || '', onChange: e => handleColumnFilter(column.key, e.target.value), onClick: e => e.stopPropagation(), className: styles.columnFilter, "aria-label": `Filter ${column.header}` }))] }) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("th", { className: styles.actionsColumn, scope: "col", children: jsxRuntime.jsx("span", { className: styles.headerText, children: "Actions" }) }))] }) }), jsxRuntime.jsx("tbody", { children: animated ? (jsxRuntime.jsx(framerMotion.LayoutGroup, { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", children: paginatedData.map((item, index) => (jsxRuntime.jsxs(framerMotion.motion.tr, { layout: "position", initial: { opacity: 0, scale: 0.98 }, animate: {
|
|
4138
|
+
opacity: 1,
|
|
4139
|
+
scale: 1,
|
|
4140
|
+
transition: {
|
|
4141
|
+
duration: 0.12,
|
|
4142
|
+
delay: Math.min(index * 0.005, 0.08),
|
|
4143
|
+
ease: [0.25, 0.46, 0.45, 0.94]
|
|
4144
|
+
}
|
|
4145
|
+
}, exit: {
|
|
4146
|
+
opacity: 0,
|
|
4147
|
+
scale: 0.98,
|
|
4148
|
+
transition: { duration: 0.08 }
|
|
4149
|
+
}, className: `
|
|
4150
|
+
${styles.tr}
|
|
4151
|
+
${selectedRows.has(item[keyField]) ? styles.selected : ''}
|
|
4152
|
+
${onRowClick ? styles.clickable : ''}
|
|
4153
|
+
`, onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntime.jsx("td", { className: styles.checkboxColumn, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles.checkbox }) })), columns.map(column => (jsxRuntime.jsx("td", { className: `${styles.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
|
|
4154
|
+
? column.render(item[column.key], item, index)
|
|
4155
|
+
: formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("td", { className: styles.actionsColumn, onClick: e => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: styles.actionButtons, children: rowActions.map((action, actionIndex) => (jsxRuntime.jsx("button", { className: getButtonClassName(action), style: getButtonStyles(action), onClick: () => action.onClick(item, index), disabled: action.disabled ? action.disabled(item) : false, title: action.label, "aria-label": action.label, children: action.icon }, actionIndex))) }) }))] }, `${item[keyField]}-${currentPage}`))) }) })) : (paginatedData.map((item, index) => (jsxRuntime.jsxs("tr", { className: `
|
|
4156
|
+
${styles.tr}
|
|
4157
|
+
${selectedRows.has(item[keyField]) ? styles.selected : ''}
|
|
4158
|
+
${onRowClick ? styles.clickable : ''}
|
|
4159
|
+
`, onClick: () => onRowClick?.(item, index), children: [selectable && (jsxRuntime.jsx("td", { className: styles.checkboxColumn, children: jsxRuntime.jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles.checkbox }) })), columns.map(column => (jsxRuntime.jsx("td", { className: `${styles.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
|
|
4160
|
+
? column.render(item[column.key], item, index)
|
|
4161
|
+
: formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsxRuntime.jsx("td", { className: styles.actionsColumn, onClick: e => e.stopPropagation(), children: jsxRuntime.jsx("div", { className: styles.actionButtons, children: rowActions.map((action, actionIndex) => (jsxRuntime.jsx("button", { className: getButtonClassName(action), style: getButtonStyles(action), onClick: () => action.onClick(item, index), disabled: action.disabled ? action.disabled(item) : false, title: action.label, "aria-label": action.label, children: action.icon }, actionIndex))) }) }))] }, item[keyField])))) })] }) }), pagination && totalPages > 1 && (jsxRuntime.jsxs("div", { className: styles.pagination, children: [jsxRuntime.jsxs("div", { className: styles.pageInfo, children: ["Showing ", ((currentPage - 1) * pageSize) + 1, "-", Math.min(currentPage * pageSize, sortedData.length), " of ", sortedData.length] }), jsxRuntime.jsxs("div", { className: styles.pageControls, children: [jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(1), disabled: currentPage === 1, children: "\u27E8\u27E8" }), jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "\u27E8" }), jsxRuntime.jsxs("span", { className: styles.pageNumber, children: ["Page ", currentPage, " of ", totalPages] }), jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "\u27E9" }), jsxRuntime.jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(totalPages), disabled: currentPage === totalPages, children: "\u27E9\u27E9" })] }), typeof pagination === 'object' && (jsxRuntime.jsx("select", { className: styles.pageSizeSelect, value: pageSize, onChange: e => {
|
|
4162
|
+
setPageSize(Number(e.target.value));
|
|
4163
|
+
setCurrentPage(1);
|
|
4164
|
+
}, children: pageSizeOptions.map(size => (jsxRuntime.jsxs("option", { value: size, children: [size, " per page"] }, size))) }))] }))] }));
|
|
4165
|
+
};
|
|
4166
|
+
// Helper function to format values
|
|
4167
|
+
function formatValue(value) {
|
|
4168
|
+
if (value === null || value === undefined) {
|
|
4169
|
+
return jsxRuntime.jsx("span", { className: styles.nullValue, children: "\u2014" });
|
|
4170
|
+
}
|
|
4171
|
+
if (typeof value === 'boolean') {
|
|
4172
|
+
return (jsxRuntime.jsx("span", { className: `${styles.badge} ${value ? styles.badgeSuccess : styles.badgeDanger}`, children: value ? '✓' : '✗' }));
|
|
4173
|
+
}
|
|
4174
|
+
if (value instanceof Date) {
|
|
4175
|
+
return value.toLocaleDateString();
|
|
4176
|
+
}
|
|
4177
|
+
if (typeof value === 'object') {
|
|
4178
|
+
return jsxRuntime.jsx("code", { className: styles.code, children: JSON.stringify(value, null, 2) });
|
|
4179
|
+
}
|
|
4180
|
+
return String(value);
|
|
4181
|
+
}
|
|
4182
|
+
// Memoized Table component to prevent unnecessary re-renders
|
|
4183
|
+
const Table = React.memo(TableComponent);
|
|
4184
|
+
|
|
3888
4185
|
exports.ArrayInput = ArrayInput;
|
|
3889
4186
|
exports.BooleansHeatmap = BooleansHeatmap;
|
|
3890
4187
|
exports.Button = Button;
|
|
@@ -3905,6 +4202,7 @@ exports.SelectInput = SelectInput;
|
|
|
3905
4202
|
exports.SleepChart = SleepChart;
|
|
3906
4203
|
exports.Slider = Slider;
|
|
3907
4204
|
exports.SunburstChart = SunburstChart;
|
|
4205
|
+
exports.Table = Table;
|
|
3908
4206
|
exports.Tabs = Tabs;
|
|
3909
4207
|
exports.TextArea = TextArea;
|
|
3910
4208
|
exports.TextInput = TextInput;
|