@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.esm.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo } from 'react';
|
|
3
|
-
import { motion, AnimatePresence } from 'framer-motion';
|
|
2
|
+
import React, { createContext, useContext, useState, useEffect, useRef, useCallback, useMemo, memo } from 'react';
|
|
3
|
+
import { motion, AnimatePresence, LayoutGroup } from 'framer-motion';
|
|
4
4
|
import { Check, X, Edit } from 'lucide-react';
|
|
5
5
|
import * as d3 from 'd3';
|
|
6
6
|
|
|
@@ -30,7 +30,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
|
|
|
30
30
|
return (jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
|
|
31
31
|
};
|
|
32
32
|
|
|
33
|
-
var styles$
|
|
33
|
+
var styles$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"};
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* Button Component
|
|
@@ -73,17 +73,17 @@ var styles$q = {"button":"Button-module_button__c6nkW","primary":"Button-module_
|
|
|
73
73
|
*/
|
|
74
74
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
|
|
75
75
|
const buttonClasses = [
|
|
76
|
-
styles$
|
|
77
|
-
styles$
|
|
78
|
-
styles$
|
|
79
|
-
fullWidth && styles$
|
|
80
|
-
loading && styles$
|
|
76
|
+
styles$r.button,
|
|
77
|
+
styles$r[variant],
|
|
78
|
+
styles$r[size],
|
|
79
|
+
fullWidth && styles$r.fullWidth,
|
|
80
|
+
loading && styles$r.loading,
|
|
81
81
|
className
|
|
82
82
|
].filter(Boolean).join(' ');
|
|
83
|
-
return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$
|
|
83
|
+
return (jsxs(motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$r.spinner }), iconLeft && jsx("span", { className: styles$r.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$r.iconRight, children: iconRight })] }));
|
|
84
84
|
};
|
|
85
85
|
|
|
86
|
-
var styles$
|
|
86
|
+
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"};
|
|
87
87
|
|
|
88
88
|
/**
|
|
89
89
|
* Card Component
|
|
@@ -148,28 +148,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
|
|
|
148
148
|
onExpandChange?.(newExpanded);
|
|
149
149
|
};
|
|
150
150
|
const cardClasses = [
|
|
151
|
-
styles$
|
|
152
|
-
styles$
|
|
153
|
-
hoverable && styles$
|
|
154
|
-
clickable && styles$
|
|
155
|
-
!padding && styles$
|
|
156
|
-
expandable && styles$
|
|
151
|
+
styles$q.card,
|
|
152
|
+
styles$q[variant],
|
|
153
|
+
hoverable && styles$q.hoverable,
|
|
154
|
+
clickable && styles$q.clickable,
|
|
155
|
+
!padding && styles$q.noPadding,
|
|
156
|
+
expandable && styles$q.expandable,
|
|
157
157
|
className
|
|
158
158
|
].filter(Boolean).join(' ');
|
|
159
159
|
const renderHeader = () => {
|
|
160
160
|
if (header) {
|
|
161
|
-
return (jsxs("div", { className: styles$
|
|
161
|
+
return (jsxs("div", { className: styles$q.header, children: [jsx("div", { className: styles$q.headerContent, children: header }), expandable && (jsx("button", { className: styles$q.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: 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: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
162
162
|
}
|
|
163
163
|
if (title || subtitle) {
|
|
164
|
-
return (jsxs("div", { className: styles$
|
|
164
|
+
return (jsxs("div", { className: styles$q.header, children: [jsxs("div", { className: styles$q.headerContent, children: [title && jsx("h3", { className: styles$q.title, children: title }), subtitle && jsx("p", { className: styles$q.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$q.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: 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: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
165
165
|
}
|
|
166
166
|
return null;
|
|
167
167
|
};
|
|
168
|
-
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$
|
|
168
|
+
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$q.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$q.image }) })), renderHeader(), jsx(AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxs(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 && (jsx("div", { className: padding ? styles$q.body : undefined, children: children })), footer && jsx("div", { className: styles$q.footer, children: footer })] }, "content")) })] }));
|
|
169
169
|
return (jsx(motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
170
170
|
};
|
|
171
171
|
|
|
172
|
-
var styles$
|
|
172
|
+
var styles$p = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
173
173
|
|
|
174
174
|
/**
|
|
175
175
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -213,7 +213,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
213
213
|
checkboxRef.current.indeterminate = indeterminate;
|
|
214
214
|
}
|
|
215
215
|
}, [indeterminate]);
|
|
216
|
-
return (jsxs("label", { className: styles$
|
|
216
|
+
return (jsxs("label", { className: styles$p.checkboxLabel, children: [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 && jsx("span", { className: styles$p.checkboxText, children: label })] }));
|
|
217
217
|
};
|
|
218
218
|
|
|
219
219
|
var DefaultContext = {
|
|
@@ -350,7 +350,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
350
350
|
return '';
|
|
351
351
|
};
|
|
352
352
|
|
|
353
|
-
var styles$
|
|
353
|
+
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"};
|
|
354
354
|
|
|
355
355
|
/**
|
|
356
356
|
* DateInput component - European format date picker with manual input support
|
|
@@ -437,19 +437,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
437
437
|
}
|
|
438
438
|
};
|
|
439
439
|
const getClassName = () => {
|
|
440
|
-
const classes = [styles$
|
|
440
|
+
const classes = [styles$o.dateInput];
|
|
441
441
|
if (error)
|
|
442
|
-
classes.push(styles$
|
|
442
|
+
classes.push(styles$o.error);
|
|
443
443
|
if (success)
|
|
444
|
-
classes.push(styles$
|
|
444
|
+
classes.push(styles$o.success);
|
|
445
445
|
if (loading)
|
|
446
|
-
classes.push(styles$
|
|
446
|
+
classes.push(styles$o.loading);
|
|
447
447
|
return classes.join(' ');
|
|
448
448
|
};
|
|
449
|
-
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$
|
|
449
|
+
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$o.label, children: label }), jsxs("div", { className: styles$o.inputWrapper, children: [jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$o.textInput, disabled: disabled || loading }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$o.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(FiCalendar, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$o.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
450
450
|
}
|
|
451
451
|
|
|
452
|
-
var styles$
|
|
452
|
+
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"};
|
|
453
453
|
|
|
454
454
|
/**
|
|
455
455
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -554,23 +554,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
554
554
|
}
|
|
555
555
|
};
|
|
556
556
|
const getTriggerClassName = () => {
|
|
557
|
-
const classes = [styles$
|
|
557
|
+
const classes = [styles$n.dropdownTrigger];
|
|
558
558
|
if (isOpen)
|
|
559
|
-
classes.push(styles$
|
|
559
|
+
classes.push(styles$n.open);
|
|
560
560
|
if (loading)
|
|
561
|
-
classes.push(styles$
|
|
561
|
+
classes.push(styles$n.loading);
|
|
562
562
|
if (error)
|
|
563
|
-
classes.push(styles$
|
|
563
|
+
classes.push(styles$n.error);
|
|
564
564
|
return classes.join(' ');
|
|
565
565
|
};
|
|
566
|
-
return (jsxs("div", { className: styles$
|
|
566
|
+
return (jsxs("div", { className: styles$n.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsx("label", { children: label }), jsxs(motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsx("span", { className: `${styles$n.dropdownValue} ${!displayValue ? styles$n.placeholder : ''}`, children: displayValue || placeholder }), jsx(FiChevronDown, { className: styles$n.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(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: [jsxs("div", { className: styles$n.dropdownSearch, children: [jsx(FiSearch, { className: styles$n.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$n.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$n.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
567
567
|
const isSelected = value === opt.value;
|
|
568
568
|
const isHighlighted = highlightedIndex === index;
|
|
569
|
-
return (jsxs(motion.button, { type: "button", className: `${styles$
|
|
570
|
-
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$
|
|
569
|
+
return (jsxs(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: [jsx("span", { children: opt.label }), isSelected && jsx(FiCheck, { className: styles$n.checkIcon })] }, `${opt.value}-${index}`));
|
|
570
|
+
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$n.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
571
571
|
}
|
|
572
572
|
|
|
573
|
-
var styles$
|
|
573
|
+
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"};
|
|
574
574
|
|
|
575
575
|
/**
|
|
576
576
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -607,23 +607,23 @@ var styles$l = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
607
607
|
*/
|
|
608
608
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
609
609
|
const getClassName = () => {
|
|
610
|
-
const classes = [styles$
|
|
610
|
+
const classes = [styles$m.selectInput];
|
|
611
611
|
if (error)
|
|
612
|
-
classes.push(styles$
|
|
612
|
+
classes.push(styles$m.error);
|
|
613
613
|
if (success)
|
|
614
|
-
classes.push(styles$
|
|
614
|
+
classes.push(styles$m.success);
|
|
615
615
|
if (loading)
|
|
616
|
-
classes.push(styles$
|
|
616
|
+
classes.push(styles$m.loading);
|
|
617
617
|
return classes.join(' ');
|
|
618
618
|
};
|
|
619
|
-
return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$
|
|
619
|
+
return (jsxs("div", { className: getClassName(), children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$m.selectWrapper, children: [jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
620
620
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
621
621
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
622
622
|
return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
623
|
-
})] }), jsx(FiChevronDown, { className: styles$
|
|
623
|
+
})] }), jsx(FiChevronDown, { className: styles$m.selectIcon })] })] }));
|
|
624
624
|
}
|
|
625
625
|
|
|
626
|
-
var styles$
|
|
626
|
+
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-"};
|
|
627
627
|
|
|
628
628
|
/**
|
|
629
629
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -658,36 +658,36 @@ var styles$k = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
658
658
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
|
|
659
659
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
660
660
|
const getContainerClassName = () => {
|
|
661
|
-
const classes = [styles$
|
|
661
|
+
const classes = [styles$l.textareaContainer];
|
|
662
662
|
if (error)
|
|
663
|
-
classes.push(styles$
|
|
663
|
+
classes.push(styles$l.error);
|
|
664
664
|
if (success)
|
|
665
|
-
classes.push(styles$
|
|
665
|
+
classes.push(styles$l.success);
|
|
666
666
|
if (loading)
|
|
667
|
-
classes.push(styles$
|
|
667
|
+
classes.push(styles$l.loading);
|
|
668
668
|
if (focusMode)
|
|
669
|
-
classes.push(styles$
|
|
669
|
+
classes.push(styles$l.focusMode);
|
|
670
670
|
if (compact)
|
|
671
|
-
classes.push(styles$
|
|
671
|
+
classes.push(styles$l.compact);
|
|
672
672
|
return classes.join(' ');
|
|
673
673
|
};
|
|
674
674
|
const getCharCountClassName = () => {
|
|
675
675
|
if (!maxLength)
|
|
676
|
-
return styles$
|
|
677
|
-
const classes = [styles$
|
|
676
|
+
return styles$l.characterCount;
|
|
677
|
+
const classes = [styles$l.characterCount];
|
|
678
678
|
const percentage = (value.length / maxLength) * 100;
|
|
679
679
|
if (percentage >= 100) {
|
|
680
|
-
classes.push(styles$
|
|
680
|
+
classes.push(styles$l.atLimit);
|
|
681
681
|
}
|
|
682
682
|
else if (percentage >= 80) {
|
|
683
|
-
classes.push(styles$
|
|
683
|
+
classes.push(styles$l.nearLimit);
|
|
684
684
|
}
|
|
685
685
|
return classes.join(' ');
|
|
686
686
|
};
|
|
687
|
-
return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$
|
|
687
|
+
return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$l.textareaLabel, children: [label, required && jsx("span", { className: styles$l.requiredIndicator, children: "*" })] })), 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 && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
|
|
688
688
|
}
|
|
689
689
|
|
|
690
|
-
var styles$
|
|
690
|
+
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"};
|
|
691
691
|
|
|
692
692
|
/**
|
|
693
693
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -722,21 +722,21 @@ var styles$j = {"textInput":"TextInput-module_textInput__b2LVM","required":"Text
|
|
|
722
722
|
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
723
723
|
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
724
724
|
const getContainerClassName = () => {
|
|
725
|
-
const classes = [styles$
|
|
725
|
+
const classes = [styles$k.textInput];
|
|
726
726
|
if (success)
|
|
727
|
-
classes.push(styles$
|
|
727
|
+
classes.push(styles$k.success);
|
|
728
728
|
if (loading)
|
|
729
|
-
classes.push(styles$
|
|
729
|
+
classes.push(styles$k.loading);
|
|
730
730
|
if (icon)
|
|
731
|
-
classes.push(styles$
|
|
731
|
+
classes.push(styles$k.withIcon);
|
|
732
732
|
if (actionButton)
|
|
733
|
-
classes.push(styles$
|
|
733
|
+
classes.push(styles$k.withAction);
|
|
734
734
|
return classes.join(' ');
|
|
735
735
|
};
|
|
736
|
-
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$
|
|
736
|
+
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$k.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$k.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$k.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsx("button", { type: "button", className: styles$k.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$k.errorMessage, children: error }))] }));
|
|
737
737
|
}
|
|
738
738
|
|
|
739
|
-
var styles$
|
|
739
|
+
var styles$j = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
740
740
|
|
|
741
741
|
/**
|
|
742
742
|
* Toggle Component
|
|
@@ -788,10 +788,10 @@ function Toggle(props) {
|
|
|
788
788
|
justifyContent: 'center',
|
|
789
789
|
...style
|
|
790
790
|
};
|
|
791
|
-
return (jsxs("div", { className: `${styles$
|
|
791
|
+
return (jsxs("div", { className: `${styles$j.toggleContainer} ${className || ''}`, children: [jsxs("button", { className: `${styles$j.toggleButton} ${!isOn ? styles$j.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxs("button", { className: `${styles$j.toggleButton} ${isOn ? styles$j.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
|
|
792
792
|
}
|
|
793
793
|
|
|
794
|
-
var styles$
|
|
794
|
+
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"};
|
|
795
795
|
|
|
796
796
|
/**
|
|
797
797
|
* NumberStepper Component
|
|
@@ -908,18 +908,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
908
908
|
setDisplayValue(finalValue);
|
|
909
909
|
}, [displayValue, min, max, step, onChange]);
|
|
910
910
|
const containerClasses = [
|
|
911
|
-
styles$
|
|
912
|
-
styles$
|
|
913
|
-
styles$
|
|
914
|
-
disabled && styles$
|
|
911
|
+
styles$i.container,
|
|
912
|
+
styles$i[size],
|
|
913
|
+
styles$i[variant],
|
|
914
|
+
disabled && styles$i.disabled,
|
|
915
915
|
className
|
|
916
916
|
].filter(Boolean).join(' ');
|
|
917
917
|
const isDecrementDisabled = disabled || value <= min;
|
|
918
918
|
const isIncrementDisabled = disabled || value >= max;
|
|
919
|
-
return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$
|
|
919
|
+
return (jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxs("div", { className: styles$i.header, children: [icon && jsx("span", { className: styles$i.icon, children: icon }), label && jsx("label", { className: styles$i.label, children: label })] })), jsxs("div", { className: styles$i.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$i.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) }), jsx("div", { className: styles$i.valueContainer, children: jsx(AnimatePresence, { mode: "wait", children: jsx(motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$i.valueWrapper, children: 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) }) }), jsx(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 ? (jsx("span", { className: styles$i.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$i.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$i.limits, children: [jsx("span", { className: styles$i.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$i.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
920
920
|
};
|
|
921
921
|
|
|
922
|
-
var styles$
|
|
922
|
+
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"};
|
|
923
923
|
|
|
924
924
|
/**
|
|
925
925
|
* ToggleButton Component
|
|
@@ -957,18 +957,18 @@ var styles$g = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
957
957
|
*/
|
|
958
958
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, }) => {
|
|
959
959
|
const buttonClasses = [
|
|
960
|
-
styles$
|
|
961
|
-
styles$
|
|
962
|
-
styles$
|
|
963
|
-
active && styles$
|
|
964
|
-
active && styles$
|
|
965
|
-
disabled && styles$
|
|
966
|
-
animation !== 'none' && styles$
|
|
960
|
+
styles$h.button,
|
|
961
|
+
styles$h[size],
|
|
962
|
+
styles$h[variant],
|
|
963
|
+
active && styles$h.active,
|
|
964
|
+
active && styles$h[`active-${activeColor}`],
|
|
965
|
+
disabled && styles$h.disabled,
|
|
966
|
+
animation !== 'none' && styles$h[`animation-${animation}`],
|
|
967
967
|
className
|
|
968
968
|
].filter(Boolean).join(' ');
|
|
969
969
|
const labelClasses = [
|
|
970
|
-
styles$
|
|
971
|
-
hideLabelOnMobile && styles$
|
|
970
|
+
styles$h.label,
|
|
971
|
+
hideLabelOnMobile && styles$h.hideMobile
|
|
972
972
|
].filter(Boolean).join(' ');
|
|
973
973
|
const iconVariants = {
|
|
974
974
|
scale: {
|
|
@@ -1029,10 +1029,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1029
1029
|
'--toggle-bg-color': active ? `${color}20` : 'transparent'
|
|
1030
1030
|
})
|
|
1031
1031
|
};
|
|
1032
|
-
return (jsxs(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: [jsx(motion.div, { className: styles$
|
|
1032
|
+
return (jsxs(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: [jsx(motion.div, { className: styles$h.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$h.content, children: [icon && (jsx(motion.div, { className: styles$h.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$h.icon, children: icon })) : (jsx("div", { className: styles$h.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$h.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsx(AnimatePresence, { children: active && (jsx(motion.div, { className: styles$h.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1033
1033
|
};
|
|
1034
1034
|
|
|
1035
|
-
var styles$
|
|
1035
|
+
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"};
|
|
1036
1036
|
|
|
1037
1037
|
/**
|
|
1038
1038
|
* Slider component - A beautiful, animated range input
|
|
@@ -1118,16 +1118,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1118
1118
|
setShowTooltipState(false);
|
|
1119
1119
|
};
|
|
1120
1120
|
const dynamicColor = getDynamicColor();
|
|
1121
|
-
const sizeClass = styles$
|
|
1122
|
-
const stateClass = disabled ? styles$
|
|
1121
|
+
const sizeClass = styles$g[`size-${size}`];
|
|
1122
|
+
const stateClass = disabled ? styles$g.disabled : loading ? styles$g.loading : '';
|
|
1123
1123
|
if (loading) {
|
|
1124
|
-
return (jsxs("div", { className: `${styles$
|
|
1124
|
+
return (jsxs("div", { className: `${styles$g.slider} ${sizeClass} ${styles$g.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$g.label, children: label }), jsx("div", { className: styles$g.loadingTrack, children: jsx(motion.div, { className: styles$g.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
|
|
1125
1125
|
repeat: Infinity,
|
|
1126
1126
|
duration: 1.5,
|
|
1127
1127
|
ease: "easeInOut"
|
|
1128
1128
|
} }) })] }));
|
|
1129
1129
|
}
|
|
1130
|
-
return (jsxs("div", { className: `${styles$
|
|
1130
|
+
return (jsxs("div", { className: `${styles$g.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsx(motion.label, { className: styles$g.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxs(motion.div, { className: styles$g.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsx(motion.div, { className: styles$g.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsx(motion.div, { className: styles$g.fill, style: {
|
|
1131
1131
|
width: `${percentage}%`,
|
|
1132
1132
|
backgroundColor: dynamicColor
|
|
1133
1133
|
}, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
|
|
@@ -1137,7 +1137,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1137
1137
|
damping: 30
|
|
1138
1138
|
}, whileHover: {
|
|
1139
1139
|
boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
|
|
1140
|
-
} }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, className: styles$
|
|
1140
|
+
} }) }), 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 }), jsx(motion.div, { className: styles$g.thumb, style: {
|
|
1141
1141
|
left: `${percentage}%`,
|
|
1142
1142
|
backgroundColor: dynamicColor,
|
|
1143
1143
|
borderColor: colors.thumb || dynamicColor
|
|
@@ -1154,14 +1154,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1154
1154
|
}, whileHover: {
|
|
1155
1155
|
scale: 1.1,
|
|
1156
1156
|
transition: { duration: 0.1 }
|
|
1157
|
-
}, children: isDragging && (jsx(motion.div, { className: styles$
|
|
1157
|
+
}, children: isDragging && (jsx(motion.div, { className: styles$g.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsx(AnimatePresence, { children: showTooltipState && (jsxs(motion.div, { className: styles$g.tooltip, style: {
|
|
1158
1158
|
left: `${percentage}%`,
|
|
1159
1159
|
backgroundColor: dynamicColor
|
|
1160
|
-
}, 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), jsx("div", { className: styles$
|
|
1160
|
+
}, 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), jsx("div", { className: styles$g.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx(motion.div, { className: styles$g.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
|
|
1161
1161
|
duration: 0.2,
|
|
1162
1162
|
type: "spring",
|
|
1163
1163
|
stiffness: 300
|
|
1164
|
-
}, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$
|
|
1164
|
+
}, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$g.labelsContainer, children: labels.map((labelConfig, index) => {
|
|
1165
1165
|
let position = 0;
|
|
1166
1166
|
if (labelConfig.position === 'start')
|
|
1167
1167
|
position = 0;
|
|
@@ -1169,7 +1169,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1169
1169
|
position = 100;
|
|
1170
1170
|
else if (typeof labelConfig.position === 'number')
|
|
1171
1171
|
position = labelConfig.position;
|
|
1172
|
-
return (jsx(motion.div, { className: styles$
|
|
1172
|
+
return (jsx(motion.div, { className: styles$g.labelItem, style: {
|
|
1173
1173
|
left: `${position}%`,
|
|
1174
1174
|
color: labelConfig.color
|
|
1175
1175
|
}, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
@@ -1182,7 +1182,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1182
1182
|
}) }))] }));
|
|
1183
1183
|
}
|
|
1184
1184
|
|
|
1185
|
-
var styles$
|
|
1185
|
+
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"};
|
|
1186
1186
|
|
|
1187
1187
|
/**
|
|
1188
1188
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -1249,11 +1249,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
|
|
|
1249
1249
|
itemIdsRef.current.splice(index, 1);
|
|
1250
1250
|
onChange(newValues);
|
|
1251
1251
|
};
|
|
1252
|
-
return (jsxs("div", { className: styles$
|
|
1252
|
+
return (jsxs("div", { className: styles$f.arrayInput, children: [jsx("h3", { className: styles$f.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$f.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
1253
1253
|
duration: 0.3,
|
|
1254
1254
|
ease: "easeInOut",
|
|
1255
1255
|
layout: { duration: 0.2 }
|
|
1256
|
-
}, children: [jsx("div", { className: styles$
|
|
1256
|
+
}, children: [jsx("div", { className: styles$f.inputWrapper, children: multiline ? (jsx("div", { style: inputStyle, children: jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$f.input, style: inputStyle })) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$f.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: 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]))) }) }), jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$f.addButton, children: label })] }));
|
|
1257
1257
|
}
|
|
1258
1258
|
// Complex object array implementation
|
|
1259
1259
|
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
|
|
@@ -1278,14 +1278,14 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle,
|
|
|
1278
1278
|
// Generate key from all field values
|
|
1279
1279
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
1280
1280
|
};
|
|
1281
|
-
return (jsxs("div", { className: styles$
|
|
1281
|
+
return (jsxs("div", { className: styles$f.arrayInput, children: [jsx("h3", { className: styles$f.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(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: {
|
|
1282
1282
|
duration: 0.3,
|
|
1283
1283
|
ease: "easeInOut",
|
|
1284
1284
|
layout: { duration: 0.2 }
|
|
1285
|
-
}, children: [jsx("div", { className: styles$
|
|
1285
|
+
}, children: [jsx("div", { className: styles$f.fieldsWrapper, children: fields.map((field) => (jsx("div", { style: inputStyle, children: field.multiline ? (jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$f.removeButton, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: 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)))) }) }), jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$f.addButton, children: ["Add ", label] })] }));
|
|
1286
1286
|
}
|
|
1287
1287
|
|
|
1288
|
-
var styles$
|
|
1288
|
+
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"};
|
|
1289
1289
|
|
|
1290
1290
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
1291
1291
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -1370,15 +1370,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1370
1370
|
};
|
|
1371
1371
|
const getVariantClass = () => {
|
|
1372
1372
|
if (isSaving)
|
|
1373
|
-
return styles$
|
|
1373
|
+
return styles$e.primary;
|
|
1374
1374
|
if (isEditMode) {
|
|
1375
|
-
return hasUnsavedChanges ? styles$
|
|
1375
|
+
return hasUnsavedChanges ? styles$e.success : styles$e.secondary;
|
|
1376
1376
|
}
|
|
1377
|
-
return styles$
|
|
1377
|
+
return styles$e.primary;
|
|
1378
1378
|
};
|
|
1379
1379
|
const getIcon = () => {
|
|
1380
1380
|
if (isSaving) {
|
|
1381
|
-
return jsx("div", { className: styles$
|
|
1381
|
+
return jsx("div", { className: styles$e.loader });
|
|
1382
1382
|
}
|
|
1383
1383
|
if (isEditMode) {
|
|
1384
1384
|
return hasUnsavedChanges ? jsx(Check, { size: 24 }) : jsx(X, { size: 24 });
|
|
@@ -1393,14 +1393,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1393
1393
|
}
|
|
1394
1394
|
return "Enter edit mode";
|
|
1395
1395
|
};
|
|
1396
|
-
return (jsx(motion.button, { ref: fabRef, className: `${styles$
|
|
1396
|
+
return (jsx(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: {
|
|
1397
1397
|
type: "spring",
|
|
1398
1398
|
stiffness: 260,
|
|
1399
1399
|
damping: 20
|
|
1400
1400
|
}, children: getIcon() }));
|
|
1401
1401
|
};
|
|
1402
1402
|
|
|
1403
|
-
var styles$
|
|
1403
|
+
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"};
|
|
1404
1404
|
|
|
1405
1405
|
// Default filter options for backwards compatibility
|
|
1406
1406
|
const defaultFilterOptions = [
|
|
@@ -1593,18 +1593,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1593
1593
|
return text || '';
|
|
1594
1594
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1595
1595
|
const parts = text.split(regex);
|
|
1596
|
-
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$
|
|
1596
|
+
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$d.highlight, children: part }, index)) : (part));
|
|
1597
1597
|
};
|
|
1598
|
-
return (jsxs("div", { ref: searchRef, className: `${styles$
|
|
1598
|
+
return (jsxs("div", { ref: searchRef, className: `${styles$d.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$d.searchInputWrapper, children: [jsx(FiSearch, { className: styles$d.searchIcon }), jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$d.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsx(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: jsx(FiX, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$d.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsx(AnimatePresence, { children: isDropdownOpen && (jsx(motion.div, { ref: resultsRef, id: "search-results", className: styles$d.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxs("div", { className: styles$d.loadingState, children: [jsx("div", { className: styles$d.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$d.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$d.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
1599
1599
|
const Icon = entityIcons[type];
|
|
1600
|
-
return (jsxs("div", { className: styles$
|
|
1600
|
+
return (jsxs("div", { className: styles$d.resultGroup, children: [jsxs("div", { className: styles$d.groupHeader, children: [Icon && jsx(Icon, { className: styles$d.groupIcon }), jsx("span", { className: styles$d.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$d.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$d.groupResults, children: groupResults.map((result) => {
|
|
1601
1601
|
const globalIndex = results.indexOf(result);
|
|
1602
|
-
return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
1602
|
+
return (jsxs(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: [jsxs("div", { className: styles$d.resultContent, children: [jsx("div", { className: styles$d.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$d.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$d.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
1603
1603
|
}) })] }, type));
|
|
1604
1604
|
}) })) })) })] }));
|
|
1605
1605
|
};
|
|
1606
1606
|
|
|
1607
|
-
var styles$
|
|
1607
|
+
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"};
|
|
1608
1608
|
|
|
1609
1609
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1610
1610
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1625,10 +1625,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1625
1625
|
};
|
|
1626
1626
|
if (!isOpen)
|
|
1627
1627
|
return null;
|
|
1628
|
-
return (jsx("div", { className: styles$
|
|
1628
|
+
return (jsx("div", { className: styles$c.modalOverlay, onClick: onClose, children: jsxs("div", { className: styles$c.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxs("div", { className: styles$c.modalHeader, children: [jsx("h3", { children: "Select Time" }), jsx("button", { className: styles$c.closeButton, onClick: onClose, "aria-label": "Close", children: jsx(FiX, {}) })] }), jsxs("div", { className: styles$c.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxs("div", { className: styles$c.pickerContainer, children: [jsxs("div", { className: styles$c.pickerColumn, children: [jsx("div", { className: styles$c.pickerLabel, children: "Hours" }), jsx("div", { className: styles$c.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsx("button", { className: `${styles$c.pickerItem} ${selectedHour === i ? styles$c.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsx("div", { className: styles$c.pickerDivider, children: ":" }), jsxs("div", { className: styles$c.pickerColumn, children: [jsx("div", { className: styles$c.pickerLabel, children: "Minutes" }), jsx("div", { className: styles$c.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsx("button", { className: `${styles$c.pickerItem} ${selectedMinute === i ? styles$c.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxs("div", { className: styles$c.modalActions, children: [jsx("button", { className: styles$c.cancelButton, onClick: onClose, children: "Cancel" }), jsx("button", { className: styles$c.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
|
|
1629
1629
|
}
|
|
1630
1630
|
|
|
1631
|
-
var styles$
|
|
1631
|
+
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-"};
|
|
1632
1632
|
|
|
1633
1633
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1634
1634
|
const [showPicker, setShowPicker] = useState(false);
|
|
@@ -1681,18 +1681,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1681
1681
|
}
|
|
1682
1682
|
};
|
|
1683
1683
|
const getContainerClassName = () => {
|
|
1684
|
-
const classes = [styles$
|
|
1684
|
+
const classes = [styles$b.timeInput];
|
|
1685
1685
|
if (error)
|
|
1686
|
-
classes.push(styles$
|
|
1686
|
+
classes.push(styles$b.error);
|
|
1687
1687
|
if (success)
|
|
1688
|
-
classes.push(styles$
|
|
1688
|
+
classes.push(styles$b.success);
|
|
1689
1689
|
if (loading)
|
|
1690
|
-
classes.push(styles$
|
|
1690
|
+
classes.push(styles$b.loading);
|
|
1691
1691
|
if (disabled)
|
|
1692
|
-
classes.push(styles$
|
|
1692
|
+
classes.push(styles$b.disabled);
|
|
1693
1693
|
return classes.join(' ');
|
|
1694
1694
|
};
|
|
1695
|
-
return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$
|
|
1695
|
+
return (jsxs(Fragment, { children: [jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { className: styles$b.label, children: [label, required && jsx("span", { className: styles$b.required, children: "*" })] }), jsxs("div", { className: styles$b.inputWrapper, children: [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:]*" }), jsx("button", { type: "button", onClick: handleClockClick, className: styles$b.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsx(FiClock, { size: 20 }) })] })] }), jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
|
|
1696
1696
|
}
|
|
1697
1697
|
|
|
1698
1698
|
const ThemeContext = createContext(undefined);
|
|
@@ -1704,7 +1704,7 @@ const useTheme = () => {
|
|
|
1704
1704
|
return context;
|
|
1705
1705
|
};
|
|
1706
1706
|
|
|
1707
|
-
var styles$
|
|
1707
|
+
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"};
|
|
1708
1708
|
|
|
1709
1709
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
|
|
1710
1710
|
// Try to use internal context if available, otherwise use props
|
|
@@ -1732,16 +1732,16 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1732
1732
|
if (variant === 'toggle') {
|
|
1733
1733
|
// Simple toggle between light and dark
|
|
1734
1734
|
const isDark = theme.includes('dark');
|
|
1735
|
-
return (jsxs(motion.button, { className: `${styles$
|
|
1735
|
+
return (jsxs(motion.button, { className: `${styles$a.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsx(motion.div, { className: styles$a.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsx(motion.div, { className: styles$a.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsx(FiMoon, { size: 14 }) : jsx(FiSun, { size: 14 }) }) }), showLabel && jsx("span", { className: styles$a.label, children: isDark ? 'Dark' : 'Light' })] }));
|
|
1736
1736
|
}
|
|
1737
1737
|
if (variant === 'dropdown') {
|
|
1738
|
-
return (jsxs("div", { className: `${styles$
|
|
1738
|
+
return (jsxs("div", { className: `${styles$a.dropdown} ${className}`, children: [jsxs(motion.button, { className: styles$a.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsx("span", { className: styles$a.label, children: currentThemeData.label })] }), jsx(motion.div, { className: styles$a.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxs(motion.button, { className: `${styles$a.dropdownItem} ${theme === t.value ? styles$a.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsx("span", { className: styles$a.icon, children: t.icon }), jsx("span", { className: styles$a.text, children: t.label })] }, t.value))) })] }));
|
|
1739
1739
|
}
|
|
1740
1740
|
// Default button variant - cycles through themes
|
|
1741
|
-
return (jsxs(motion.button, { className: `${styles$
|
|
1741
|
+
return (jsxs(motion.button, { className: `${styles$a.button} ${className}`, onClick: () => {
|
|
1742
1742
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1743
1743
|
setTheme(themes[nextIndex].value);
|
|
1744
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$
|
|
1744
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsx(motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$a.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsx("span", { className: styles$a.label, children: currentThemeData.label })] }));
|
|
1745
1745
|
};
|
|
1746
1746
|
|
|
1747
1747
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -1749,7 +1749,7 @@ function SiJira (props) {
|
|
|
1749
1749
|
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);
|
|
1750
1750
|
}
|
|
1751
1751
|
|
|
1752
|
-
var styles$
|
|
1752
|
+
var styles$9 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1753
1753
|
|
|
1754
1754
|
// Default tabs for backwards compatibility
|
|
1755
1755
|
const defaultTabs = [
|
|
@@ -1760,20 +1760,20 @@ const defaultTabs = [
|
|
|
1760
1760
|
];
|
|
1761
1761
|
const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
|
|
1762
1762
|
const tabs = customTabs ?? defaultTabs;
|
|
1763
|
-
return (jsx("div", { className: `${styles$
|
|
1763
|
+
return (jsx("div", { className: `${styles$9.tabs} ${className}`, children: tabs.map((tab) => {
|
|
1764
1764
|
const isActive = activeTab === tab.id;
|
|
1765
|
-
return (jsxs(motion.button, { className: styles$
|
|
1765
|
+
return (jsxs(motion.button, { className: styles$9.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsx(motion.div, { animate: {
|
|
1766
1766
|
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1767
1767
|
}, transition: {
|
|
1768
1768
|
rotate: {
|
|
1769
1769
|
duration: 0.5,
|
|
1770
1770
|
ease: 'easeInOut'
|
|
1771
1771
|
}
|
|
1772
|
-
}, children: tab.icon && (typeof tab.icon === 'function' ? (jsx("span", { className: styles$
|
|
1772
|
+
}, children: tab.icon && (typeof tab.icon === 'function' ? (jsx("span", { className: styles$9.tabIcon, children: React.createElement(tab.icon) })) : (jsx("span", { className: styles$9.tabIcon, children: tab.icon }))) }), jsx("span", { children: tab.label })] }, tab.id));
|
|
1773
1773
|
}) }));
|
|
1774
1774
|
};
|
|
1775
1775
|
|
|
1776
|
-
var styles$
|
|
1776
|
+
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"};
|
|
1777
1777
|
|
|
1778
1778
|
/**
|
|
1779
1779
|
* Calendar component - A flexible, reusable calendar for displaying events
|
|
@@ -1977,11 +1977,11 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
1977
1977
|
return Math.floor(diff / oneWeek) + 1;
|
|
1978
1978
|
};
|
|
1979
1979
|
if (loading) {
|
|
1980
|
-
return (jsx("div", { className: `${styles$
|
|
1980
|
+
return (jsx("div", { className: `${styles$8.calendar} ${styles$8.loading} ${className}`, style: style, children: jsx("div", { className: styles$8.loadingSpinner, children: "Loading..." }) }));
|
|
1981
1981
|
}
|
|
1982
|
-
return (jsxs("div", { className: `${styles$
|
|
1982
|
+
return (jsxs("div", { className: `${styles$8.calendar} ${className}`, style: style, children: [jsxs("div", { className: styles$8.header, children: [jsxs("div", { className: styles$8.navigation, children: [jsx("button", { onClick: handlePrevious, className: styles$8.navButton, "aria-label": "Previous", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsx("h3", { className: styles$8.title, children: calendarData.displayTitle }), jsx("button", { onClick: handleNext, className: styles$8.navButton, "aria-label": "Next", children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxs("div", { className: styles$8.controls, children: [jsx("button", { onClick: handleToday, className: styles$8.todayButton, children: "Today" }), jsxs("div", { className: styles$8.viewToggle, children: [jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'month' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'week' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" }), jsx("button", { className: `${styles$8.viewButton} ${currentViewMode === 'day' ? styles$8.active : ''}`, onClick: () => setCurrentViewMode('day'), children: "Day" })] })] })] }), currentViewMode !== 'day' && (jsxs("div", { className: styles$8.weekDays, children: [showWeekNumbers && jsx("div", { className: styles$8.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsx("div", { className: styles$8.weekDay, children: day }, day)))] })), currentViewMode === 'day' ? (
|
|
1983
1983
|
// Day view layout
|
|
1984
|
-
jsxs("div", { className: styles$
|
|
1984
|
+
jsxs("div", { className: styles$8.dayView, children: [jsxs("div", { className: styles$8.dayViewHeader, children: [jsx("div", { className: styles$8.timeColumnHeader }), jsx("div", { className: styles$8.dayColumnHeader, children: currentDate.toLocaleDateString(locale, { weekday: 'short', day: 'numeric' }) })] }), jsx("div", { className: styles$8.dayViewScrollContainer, children: jsxs("div", { className: styles$8.dayViewContent, children: [(() => {
|
|
1985
1985
|
const now = new Date();
|
|
1986
1986
|
const currentHour = now.getHours();
|
|
1987
1987
|
const currentMinute = now.getMinutes();
|
|
@@ -1989,15 +1989,15 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
1989
1989
|
const topPosition = (minutesSinceMidnight / 1440) * (24 * 60); // 24 hours * 60px per hour
|
|
1990
1990
|
// Only show if viewing today
|
|
1991
1991
|
const isToday = currentDate.toDateString() === now.toDateString();
|
|
1992
|
-
return isToday ? (jsx("div", { className: styles$
|
|
1993
|
-
})(), jsx("div", { className: styles$
|
|
1992
|
+
return isToday ? (jsx("div", { className: styles$8.currentTimeIndicator, style: { top: `${topPosition}px` } })) : null;
|
|
1993
|
+
})(), jsx("div", { className: styles$8.timeColumn, children: Array.from({ length: 24 }, (_, hour) => (jsx("div", { className: styles$8.timeSlot, children: jsxs("span", { className: styles$8.timeLabel, children: [hour.toString().padStart(2, '0'), ":00"] }) }, hour))) }), jsx("div", { className: styles$8.dayColumn, children: Array.from({ length: 24 }, (_, hour) => {
|
|
1994
1994
|
const hourEvents = getDayEvents(currentDate).filter(event => {
|
|
1995
1995
|
if (!event.time)
|
|
1996
1996
|
return false;
|
|
1997
1997
|
const eventHour = parseInt(event.time.split(':')[0]);
|
|
1998
1998
|
return eventHour === hour;
|
|
1999
1999
|
});
|
|
2000
|
-
return (jsxs("div", { className: styles$
|
|
2000
|
+
return (jsxs("div", { className: styles$8.hourSlot, children: [jsx("div", { className: styles$8.hourLine }), hourEvents.map((event, eventIndex) => (jsxs(motion.div, { className: `${styles$8.dayEvent} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
|
|
2001
2001
|
backgroundColor: getEventColor(event),
|
|
2002
2002
|
color: getEventTextColor(event),
|
|
2003
2003
|
opacity: event.status === 'completed' ? 0.7 : 1
|
|
@@ -2015,17 +2015,17 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
2015
2015
|
}, whileTap: {
|
|
2016
2016
|
scale: 0.98,
|
|
2017
2017
|
transition: { duration: 0.1 }
|
|
2018
|
-
}, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$
|
|
2019
|
-
}) })] }) })] })) : (jsx("div", { className: `${styles$
|
|
2018
|
+
}, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$8.dayEventTitle, children: [jsx("span", { className: styles$8.dayEventTime, children: event.time }), event.title] }), event.status === 'completed' && (jsx("svg", { className: styles$8.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id)))] }, hour));
|
|
2019
|
+
}) })] }) })] })) : (jsx("div", { className: `${styles$8.daysGrid} ${currentViewMode === 'week' ? styles$8.weekView : ''}`, children: calendarData.days.map((day, index) => {
|
|
2020
2020
|
const dayEvents = getDayEvents(day);
|
|
2021
2021
|
const dayIsToday = isToday(day);
|
|
2022
2022
|
const isInCurrentMonth = currentViewMode === 'week' || isCurrentMonth(day);
|
|
2023
2023
|
const isWeekStart = showWeekNumbers && (index % 7 === 0);
|
|
2024
|
-
return (jsxs(motion.div, { className: `${styles$
|
|
2024
|
+
return (jsxs(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: {
|
|
2025
2025
|
duration: 0.3,
|
|
2026
2026
|
delay: index * 0.02,
|
|
2027
2027
|
ease: "easeOut"
|
|
2028
|
-
}, onClick: () => handleDateClick(day), children: [isWeekStart && (jsx("div", { className: styles$
|
|
2028
|
+
}, onClick: () => handleDateClick(day), children: [isWeekStart && (jsx("div", { className: styles$8.weekNumber, children: getWeekNumber(day) })), jsx("div", { className: styles$8.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxs("div", { className: styles$8.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxs(motion.div, { className: `${styles$8.event} ${event.status === 'completed' ? styles$8.completed : ''}`, style: {
|
|
2029
2029
|
backgroundColor: getEventColor(event),
|
|
2030
2030
|
color: getEventTextColor(event),
|
|
2031
2031
|
opacity: event.status === 'completed' ? 0.7 : 1
|
|
@@ -2043,7 +2043,7 @@ function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initi
|
|
|
2043
2043
|
}, whileTap: {
|
|
2044
2044
|
scale: 0.98,
|
|
2045
2045
|
transition: { duration: 0.1 }
|
|
2046
|
-
}, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$
|
|
2046
|
+
}, children: [iconRenderer && iconRenderer(event), jsxs("span", { className: styles$8.eventTitle, children: [event.time && (jsx("span", { className: styles$8.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsx("svg", { className: styles$8.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxs("div", { className: styles$8.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })), dayEvents.length === 0 && emptyState && (jsx("div", { className: styles$8.emptyState, children: emptyState }))] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
|
|
2047
2047
|
}) }))] }));
|
|
2048
2048
|
}
|
|
2049
2049
|
|
|
@@ -2113,7 +2113,7 @@ const Navbar = ({ items, logo, onItemClick, variant = 'sidebar', isMobile = fals
|
|
|
2113
2113
|
return (jsxs(Fragment, { children: [(isMobile || window.innerWidth <= 768) && (jsx(motion.button, { className: styles.mobileMenuButton, onClick: toggleMobileMenu, "aria-label": "Toggle navigation menu", whileTap: { scale: 0.9 }, children: jsx(AnimatePresence, { mode: "wait", children: isMobileMenuOpen ? (jsx(motion.div, { initial: { rotate: -90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 90, opacity: 0 }, children: jsx(FiX, {}) }, "close")) : (jsx(motion.div, { initial: { rotate: 90, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: -90, opacity: 0 }, children: jsx(FiMenu, {}) }, "menu")) }) })), jsx(AnimatePresence, { children: isMobileMenuOpen && (jsx(motion.div, { className: styles.mobileBackdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: () => setIsMobileMenuOpen(false) })) }), jsx(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 })] }));
|
|
2114
2114
|
};
|
|
2115
2115
|
|
|
2116
|
-
var styles$
|
|
2116
|
+
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"};
|
|
2117
2117
|
|
|
2118
2118
|
const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
2119
2119
|
const svgRef = useRef(null);
|
|
@@ -2169,27 +2169,27 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
2169
2169
|
g.selectAll('.grid-line-y')
|
|
2170
2170
|
.data(yScale.ticks(5))
|
|
2171
2171
|
.enter().append('line')
|
|
2172
|
-
.attr('class', styles$
|
|
2172
|
+
.attr('class', styles$7.gridLine)
|
|
2173
2173
|
.attr('x1', 0)
|
|
2174
2174
|
.attr('y1', d => yScale(d))
|
|
2175
2175
|
.attr('x2', chartWidth)
|
|
2176
2176
|
.attr('y2', d => yScale(d));
|
|
2177
2177
|
g.append('path')
|
|
2178
2178
|
.datum(processedData)
|
|
2179
|
-
.attr('class', styles$
|
|
2179
|
+
.attr('class', styles$7.line)
|
|
2180
2180
|
.attr('d', line);
|
|
2181
2181
|
g.append('g')
|
|
2182
|
-
.attr('class', styles$
|
|
2182
|
+
.attr('class', styles$7.xAxis)
|
|
2183
2183
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
2184
2184
|
.call(d3.axisBottom(xScale)
|
|
2185
2185
|
.tickFormat(d => d3.timeFormat('%m/%d')(d)));
|
|
2186
2186
|
g.append('g')
|
|
2187
|
-
.attr('class', styles$
|
|
2187
|
+
.attr('class', styles$7.yAxis)
|
|
2188
2188
|
.call(d3.axisLeft(yScale));
|
|
2189
2189
|
g.selectAll('.mood-circle')
|
|
2190
2190
|
.data(processedData)
|
|
2191
2191
|
.enter().append('circle')
|
|
2192
|
-
.attr('class', styles$
|
|
2192
|
+
.attr('class', styles$7.dataPoint)
|
|
2193
2193
|
.attr('cx', d => xScale(d.date))
|
|
2194
2194
|
.attr('cy', d => yScale(d.rating))
|
|
2195
2195
|
.attr('r', 5)
|
|
@@ -2226,16 +2226,16 @@ const MoodChart = ({ moodData, width = 800, height = 400 }) => {
|
|
|
2226
2226
|
setSelectedMood(null);
|
|
2227
2227
|
};
|
|
2228
2228
|
}, []);
|
|
2229
|
-
return (jsxs("div", { className: styles$
|
|
2229
|
+
return (jsxs("div", { className: styles$7.container, ref: containerRef, onMouseLeave: () => setSelectedMood(null), children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$7.chart }), selectedMood && (jsxs("div", { className: styles$7.tooltip, style: {
|
|
2230
2230
|
position: 'absolute',
|
|
2231
2231
|
pointerEvents: 'none',
|
|
2232
2232
|
left: tooltipPosition.x,
|
|
2233
2233
|
top: tooltipPosition.y,
|
|
2234
2234
|
zIndex: 1000
|
|
2235
|
-
}, children: [jsxs("div", { className: styles$
|
|
2235
|
+
}, children: [jsxs("div", { className: styles$7.tooltipHeader, children: [jsx("div", { className: styles$7.tooltipDate, children: selectedMood.date.toLocaleDateString() }), jsxs("div", { className: styles$7.tooltipRating, children: [jsx("span", { className: styles$7.ratingValue, children: selectedMood.rating }), jsx("span", { className: styles$7.ratingMax, children: "/10" })] })] }), selectedMood.tags.length > 0 && (jsx("div", { className: styles$7.tooltipTags, children: selectedMood.tags.map((tag, index) => (jsx("span", { className: styles$7.tag, children: tag }, index))) })), selectedMood.comment && (jsx("div", { className: styles$7.tooltipComment, children: selectedMood.comment }))] }))] }));
|
|
2236
2236
|
};
|
|
2237
2237
|
|
|
2238
|
-
var styles$
|
|
2238
|
+
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"};
|
|
2239
2239
|
|
|
2240
2240
|
// Default colors as fallback
|
|
2241
2241
|
const DEFAULT_HABIT_COLORS = {
|
|
@@ -2382,7 +2382,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2382
2382
|
g.selectAll('.grid-line-y')
|
|
2383
2383
|
.data(yScale.ticks(5))
|
|
2384
2384
|
.enter().append('line')
|
|
2385
|
-
.attr('class', styles$
|
|
2385
|
+
.attr('class', styles$6.gridLine)
|
|
2386
2386
|
.attr('x1', 0)
|
|
2387
2387
|
.attr('y1', d => yScale(d))
|
|
2388
2388
|
.attr('x2', chartWidth)
|
|
@@ -2395,7 +2395,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2395
2395
|
const habitData = dates.map((date, i) => [date, aggregateData[habit][i]]).filter(d => typeof d[1] === 'number');
|
|
2396
2396
|
g.append('path')
|
|
2397
2397
|
.datum(habitData)
|
|
2398
|
-
.attr('class', styles$
|
|
2398
|
+
.attr('class', styles$6.line)
|
|
2399
2399
|
.attr('d', line)
|
|
2400
2400
|
.attr('stroke', getColor(habit))
|
|
2401
2401
|
.attr('opacity', hoveredHabit && hoveredHabit !== habit ? 0.3 : 1);
|
|
@@ -2442,7 +2442,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2442
2442
|
g.selectAll(`.circle-${habit}`)
|
|
2443
2443
|
.data(habitData)
|
|
2444
2444
|
.enter().append('circle')
|
|
2445
|
-
.attr('class', (_d, i) => `${styles$
|
|
2445
|
+
.attr('class', (_d, i) => `${styles$6.dataPoint} circle-${habit}-${i}`)
|
|
2446
2446
|
.attr('cx', d => xScale(d[0]))
|
|
2447
2447
|
.attr('cy', d => yScale(d[1]))
|
|
2448
2448
|
.attr('r', 4)
|
|
@@ -2504,7 +2504,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2504
2504
|
xAxisGenerator.ticks(tickCount);
|
|
2505
2505
|
}
|
|
2506
2506
|
const xAxis = g.append('g')
|
|
2507
|
-
.attr('class', styles$
|
|
2507
|
+
.attr('class', styles$6.xAxis)
|
|
2508
2508
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
2509
2509
|
.call(xAxisGenerator);
|
|
2510
2510
|
// Rotate labels for better readability if needed
|
|
@@ -2516,7 +2516,7 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2516
2516
|
.attr('transform', 'rotate(-45)');
|
|
2517
2517
|
}
|
|
2518
2518
|
g.append('g')
|
|
2519
|
-
.attr('class', styles$
|
|
2519
|
+
.attr('class', styles$6.yAxis)
|
|
2520
2520
|
.call(d3.axisLeft(yScale));
|
|
2521
2521
|
}, [aggregateData, activeHabits, chartWidth, chartHeight, margin, hoveredHabit, customHabitColors, onDataPointClick]);
|
|
2522
2522
|
// Format date for tooltip display
|
|
@@ -2547,13 +2547,13 @@ const QuantifiableHabitsChart = ({ data, width = 800, height = 400, defaultViewT
|
|
|
2547
2547
|
monthly: { icon: '🗓️', label: 'Monthly' },
|
|
2548
2548
|
quarterly: { icon: '📊', label: 'Quarterly' }
|
|
2549
2549
|
};
|
|
2550
|
-
return (jsxs("div", { className: styles$
|
|
2550
|
+
return (jsxs("div", { className: styles$6.container, children: [jsx("div", { className: styles$6.controls, children: jsx("div", { className: styles$6.viewToggle, children: availableViewTypes.map(type => (jsxs("button", { className: `${styles$6.viewButton} ${viewType === type ? styles$6.active : ''}`, onClick: () => setViewType(type), title: viewTypeConfig[type].label, children: [jsx("span", { className: styles$6.viewIcon, children: viewTypeConfig[type].icon }), jsx("span", { className: styles$6.viewLabel, children: viewTypeConfig[type].label })] }, type))) }) }), jsx("div", { className: styles$6.legend, children: habits.map(habit => (jsxs("button", { className: `${styles$6.legendItem} ${!activeHabits.includes(habit) ? styles$6.inactive : ''}`, onClick: () => toggleHabit(habit), onMouseEnter: () => setHoveredHabit(habit), onMouseLeave: () => setHoveredHabit(null), children: [jsx("span", { className: styles$6.legendEmoji, children: customHabitEmojis[habit] || '📊' }), jsx("span", { className: styles$6.legendColor, style: { backgroundColor: getColor(habit) } }), jsx("span", { className: styles$6.legendLabel, children: habit })] }, habit))) }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$6.chart }), tooltipData && (jsxs("div", { ref: tooltipRef, className: `${styles$6.tooltip} ${tooltipData ? styles$6.visible : ''}`, style: {
|
|
2551
2551
|
left: `${tooltipData.x}px`,
|
|
2552
2552
|
top: `${tooltipData.y - 80}px`
|
|
2553
|
-
}, children: [jsxs("div", { className: styles$
|
|
2553
|
+
}, children: [jsxs("div", { className: styles$6.tooltipHeader, children: [jsx("span", { className: styles$6.tooltipEmoji, children: customHabitEmojis[tooltipData.habit] || '📊' }), jsx("span", { className: styles$6.tooltipDot, style: { backgroundColor: getColor(tooltipData.habit) } }), jsx("span", { children: tooltipData.habit })] }), jsxs("div", { className: styles$6.tooltipInfo, children: [jsx("div", { className: styles$6.tooltipDate, children: formatTooltipDate(tooltipData.date, viewType) }), jsxs("div", { className: styles$6.tooltipValue, children: [jsx("strong", { children: Math.round(tooltipData.value * 10) / 10 }), jsx("span", { style: { fontSize: '12px', fontWeight: 'normal', opacity: 0.6 }, children: "units" })] })] })] }))] }));
|
|
2554
2554
|
};
|
|
2555
2555
|
|
|
2556
|
-
var styles$
|
|
2556
|
+
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"};
|
|
2557
2557
|
|
|
2558
2558
|
const parseTimeToDecimal = (time) => {
|
|
2559
2559
|
const [hours, minutes] = time.split(':').map(Number);
|
|
@@ -2611,7 +2611,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2611
2611
|
g.selectAll('.grid-line-x')
|
|
2612
2612
|
.data(d3.range(18, 43, 1))
|
|
2613
2613
|
.enter().append('line')
|
|
2614
|
-
.attr('class', styles$
|
|
2614
|
+
.attr('class', styles$5.gridLine)
|
|
2615
2615
|
.attr('x1', d => xScale(d))
|
|
2616
2616
|
.attr('y1', 0)
|
|
2617
2617
|
.attr('x2', d => xScale(d))
|
|
@@ -2644,7 +2644,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2644
2644
|
return;
|
|
2645
2645
|
const barHeight = yScale.bandwidth();
|
|
2646
2646
|
const sleepGroup = g.append('g')
|
|
2647
|
-
.attr('class', styles$
|
|
2647
|
+
.attr('class', styles$5.sleepBar)
|
|
2648
2648
|
.style('cursor', 'pointer')
|
|
2649
2649
|
.on('click', () => onDateClick?.(dayData.date));
|
|
2650
2650
|
// Handle sleep time and wake hour separately
|
|
@@ -2810,7 +2810,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2810
2810
|
(hour % 24) === 12 ? '12 PM' : `${(hour % 24) - 12} PM`
|
|
2811
2811
|
}));
|
|
2812
2812
|
const xAxis = g.append('g')
|
|
2813
|
-
.attr('class', styles$
|
|
2813
|
+
.attr('class', styles$5.xAxis)
|
|
2814
2814
|
.attr('transform', `translate(0,${chartHeight})`)
|
|
2815
2815
|
.call(d3.axisBottom(xScale)
|
|
2816
2816
|
.tickValues(xAxisTicks.map(t => t.value))
|
|
@@ -2827,7 +2827,7 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2827
2827
|
});
|
|
2828
2828
|
const yAxisTicks = yDomain.filter((_, i) => i % Math.ceil(yDomain.length / 10) === 0);
|
|
2829
2829
|
g.append('g')
|
|
2830
|
-
.attr('class', styles$
|
|
2830
|
+
.attr('class', styles$5.yAxis)
|
|
2831
2831
|
.call(d3.axisLeft(yScale)
|
|
2832
2832
|
.tickValues(yAxisTicks)
|
|
2833
2833
|
.tickFormat(d => {
|
|
@@ -2835,17 +2835,17 @@ const SleepChart = ({ sleepData, width = 800, height = 400, onDateClick }) => {
|
|
|
2835
2835
|
return `${(date.getMonth() + 1).toString().padStart(2, '0')}/${date.getDate().toString().padStart(2, '0')}`;
|
|
2836
2836
|
}));
|
|
2837
2837
|
}, [sleepData, chartWidth, chartHeight, margin, onDateClick]);
|
|
2838
|
-
return (jsxs("div", { className: styles$
|
|
2838
|
+
return (jsxs("div", { className: styles$5.container, children: [jsxs("div", { className: styles$5.header, children: [jsx("h3", { className: styles$5.title, children: "Sleep Pattern" }), jsxs("div", { className: styles$5.legend, children: [jsxs("div", { className: styles$5.legendItem, children: [jsx("span", { className: styles$5.sleepDot }), jsx("span", { children: "Sleep Time" })] }), jsxs("div", { className: styles$5.legendItem, children: [jsx("span", { className: styles$5.wakeDot }), jsx("span", { children: "Wake Time" })] })] })] }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$5.chart }), tooltipData && (jsxs("div", { className: `${styles$5.tooltip} ${tooltipData ? styles$5.visible : ''}`, style: {
|
|
2839
2839
|
left: `${tooltipData.x}px`,
|
|
2840
2840
|
top: `${tooltipData.y}px`
|
|
2841
|
-
}, children: [jsxs("div", { className: styles$
|
|
2841
|
+
}, children: [jsxs("div", { className: styles$5.tooltipHeader, children: [jsx("span", { className: styles$5.tooltipEmoji, children: "\uD83D\uDE34" }), jsx("span", { children: new Date(tooltipData.date).toLocaleDateString('en-US', {
|
|
2842
2842
|
weekday: 'short',
|
|
2843
2843
|
month: 'short',
|
|
2844
2844
|
day: 'numeric'
|
|
2845
|
-
}) })] }), jsxs("div", { className: styles$
|
|
2845
|
+
}) })] }), jsxs("div", { className: styles$5.tooltipInfo, children: [tooltipData.sleepTime && (jsxs("div", { className: styles$5.tooltipRow, children: [jsxs("span", { className: styles$5.tooltipLabel, children: [jsx("span", { children: "\uD83C\uDF19" }), jsx("span", { children: "Sleep:" })] }), jsx("span", { className: styles$5.tooltipValue, children: tooltipData.sleepTime })] })), tooltipData.wakeTime && (jsxs("div", { className: styles$5.tooltipRow, children: [jsxs("span", { className: styles$5.tooltipLabel, children: [jsx("span", { children: "\u2600\uFE0F" }), jsx("span", { children: "Wake:" })] }), jsx("span", { className: styles$5.tooltipValue, children: tooltipData.wakeTime })] })), tooltipData.duration !== null && (jsxs("div", { className: styles$5.tooltipDuration, children: [jsx("span", { children: "\u23F1\uFE0F" }), jsxs("span", { children: [Math.floor(tooltipData.duration), "h ", Math.round((tooltipData.duration % 1) * 60), "m"] })] }))] })] }))] }));
|
|
2846
2846
|
};
|
|
2847
2847
|
|
|
2848
|
-
var styles$
|
|
2848
|
+
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"};
|
|
2849
2849
|
|
|
2850
2850
|
const DAYS_OF_WEEK = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
|
2851
2851
|
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
@@ -2899,20 +2899,20 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
|
|
|
2899
2899
|
g.append('text')
|
|
2900
2900
|
.attr('x', weekIndex * (cellSize + cellGap))
|
|
2901
2901
|
.attr('y', -10)
|
|
2902
|
-
.attr('class', styles$
|
|
2902
|
+
.attr('class', styles$4.monthLabel)
|
|
2903
2903
|
.text(MONTHS[month]);
|
|
2904
2904
|
});
|
|
2905
2905
|
DAYS_OF_WEEK.forEach((day, index) => {
|
|
2906
2906
|
g.append('text')
|
|
2907
2907
|
.attr('x', -10)
|
|
2908
2908
|
.attr('y', index * (cellSize + cellGap) + cellSize / 2)
|
|
2909
|
-
.attr('class', styles$
|
|
2909
|
+
.attr('class', styles$4.dayLabel)
|
|
2910
2910
|
.attr('text-anchor', 'end')
|
|
2911
2911
|
.attr('alignment-baseline', 'middle')
|
|
2912
2912
|
.text(day);
|
|
2913
2913
|
});
|
|
2914
2914
|
const tooltip = d3.select('body').append('div')
|
|
2915
|
-
.attr('class', styles$
|
|
2915
|
+
.attr('class', styles$4.tooltip)
|
|
2916
2916
|
.style('opacity', 0)
|
|
2917
2917
|
.style('position', 'absolute');
|
|
2918
2918
|
const daysToShow = weeksToShow * 7;
|
|
@@ -2931,7 +2931,7 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
|
|
|
2931
2931
|
.attr('width', cellSize)
|
|
2932
2932
|
.attr('height', cellSize)
|
|
2933
2933
|
.attr('rx', 3)
|
|
2934
|
-
.attr('class', styles$
|
|
2934
|
+
.attr('class', styles$4.cell)
|
|
2935
2935
|
.attr('data-date', dateString)
|
|
2936
2936
|
.attr('data-value', isTrue ? 'true' : 'false')
|
|
2937
2937
|
.style('fill', isTrue ? habitColor : '#4D4D4DFF');
|
|
@@ -2959,10 +2959,10 @@ const BooleansHeatmap = ({ data, habitName, width = 800, height = 200, habitColo
|
|
|
2959
2959
|
tooltip.remove();
|
|
2960
2960
|
};
|
|
2961
2961
|
}, [data, habitName, width, height, startDate, endDate, weeksToShow, habitColor, habitEmoji]);
|
|
2962
|
-
return (jsxs("div", { className: styles$
|
|
2962
|
+
return (jsxs("div", { className: styles$4.container, children: [jsxs("h3", { className: styles$4.title, children: [jsx("span", { className: styles$4.habitEmoji, children: habitEmoji }), habitName] }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$4.chart }), jsxs("div", { className: styles$4.legend, children: [jsxs("span", { className: styles$4.legendItem, children: [jsx("span", { className: styles$4.legendColor, style: { backgroundColor: habitColor } }), "Done"] }), jsxs("span", { className: styles$4.legendItem, children: [jsx("span", { className: styles$4.legendColor, style: { backgroundColor: '#4D4D4DFF' } }), "Not done"] })] })] }));
|
|
2963
2963
|
};
|
|
2964
2964
|
|
|
2965
|
-
var styles$
|
|
2965
|
+
var styles$3 = {"container":"SunburstChart-module_container__w1ZYc","title":"SunburstChart-module_title__T6Ak7","chart":"SunburstChart-module_chart__BFM6E","tooltip":"SunburstChart-module_tooltip__TuTAN"};
|
|
2966
2966
|
|
|
2967
2967
|
const COLOR_PALETTE = [
|
|
2968
2968
|
'#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
|
|
@@ -3043,7 +3043,7 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
|
|
|
3043
3043
|
.outerRadius(d => Math.sqrt(d.y1))
|
|
3044
3044
|
.cornerRadius(3);
|
|
3045
3045
|
const tooltip = d3.select('body').append('div')
|
|
3046
|
-
.attr('class', styles$
|
|
3046
|
+
.attr('class', styles$3.tooltip)
|
|
3047
3047
|
.style('opacity', 0)
|
|
3048
3048
|
.style('position', 'absolute');
|
|
3049
3049
|
// Function to reset to original view
|
|
@@ -3473,10 +3473,10 @@ const SunburstChart = ({ data, width = 500, height = 500, title = 'Sunburst Char
|
|
|
3473
3473
|
tooltip.remove();
|
|
3474
3474
|
};
|
|
3475
3475
|
}, [data, width, height, colorMap, radius, tagColors, unit, centerLabel]);
|
|
3476
|
-
return (jsxs("div", { className: styles$
|
|
3476
|
+
return (jsxs("div", { className: styles$3.container, children: [jsx("h3", { className: styles$3.title, children: title }), jsx("svg", { ref: svgRef, width: width, height: height, className: styles$3.chart })] }));
|
|
3477
3477
|
};
|
|
3478
3478
|
|
|
3479
|
-
var styles$
|
|
3479
|
+
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"};
|
|
3480
3480
|
|
|
3481
3481
|
const DEFAULT_COLORS = [
|
|
3482
3482
|
'#6366f1', '#8b5cf6', '#06b6d4', '#10b981',
|
|
@@ -3516,7 +3516,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
3516
3516
|
.innerRadius(radius * 0.7)
|
|
3517
3517
|
.outerRadius(radius * 0.7);
|
|
3518
3518
|
const tooltip = d3.select('body').append('div')
|
|
3519
|
-
.attr('class', styles$
|
|
3519
|
+
.attr('class', styles$2.tooltip)
|
|
3520
3520
|
.style('opacity', 0)
|
|
3521
3521
|
.style('position', 'absolute');
|
|
3522
3522
|
const pieData = pie(data);
|
|
@@ -3612,12 +3612,12 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
3612
3612
|
tooltip.remove();
|
|
3613
3613
|
};
|
|
3614
3614
|
}, [data, width, height, radius]);
|
|
3615
|
-
return (jsxs("div", { className: styles$
|
|
3615
|
+
return (jsxs("div", { className: styles$2.container, children: [jsx("h3", { className: styles$2.title, children: title }), jsxs("div", { className: styles$2.chartContainer, children: [jsx("svg", { ref: svgRef, width: width, height: height, className: styles$2.chart }), showLegend && (jsx("div", { className: styles$2.legend, children: data.map((item, index) => (jsxs("div", { className: styles$2.legendItem, children: [jsx("span", { className: styles$2.legendColor, style: {
|
|
3616
3616
|
backgroundColor: item.color || DEFAULT_COLORS[index % DEFAULT_COLORS.length]
|
|
3617
|
-
} }), jsx("span", { className: styles$
|
|
3617
|
+
} }), jsx("span", { className: styles$2.legendLabel, children: item.name }), jsx("span", { className: styles$2.legendValue, children: item.value.toLocaleString() })] }, item.name))) }))] })] }));
|
|
3618
3618
|
};
|
|
3619
3619
|
|
|
3620
|
-
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"};
|
|
3620
|
+
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"};
|
|
3621
3621
|
|
|
3622
3622
|
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, }) => {
|
|
3623
3623
|
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
|
@@ -3835,7 +3835,7 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
|
|
|
3835
3835
|
return () => document.removeEventListener('keydown', handleKeyDown);
|
|
3836
3836
|
}, [goToPrevious, goToNext]);
|
|
3837
3837
|
if (!imageOrder || imageOrder.length === 0) {
|
|
3838
|
-
return (jsx("div", { className: `${styles.slideshow} ${styles.empty} ${className}`, children: jsx("div", { className: styles.emptyState, children: jsx("span", { children: "No images to display" }) }) }));
|
|
3838
|
+
return (jsx("div", { className: `${styles$1.slideshow} ${styles$1.empty} ${className}`, children: jsx("div", { className: styles$1.emptyState, children: jsx("span", { children: "No images to display" }) }) }));
|
|
3839
3839
|
}
|
|
3840
3840
|
const slideVariants = {
|
|
3841
3841
|
enter: (direction) => ({
|
|
@@ -3855,14 +3855,311 @@ const ImageSlideshow = ({ images, autoPlay = false, autoPlayInterval = 3000, sho
|
|
|
3855
3855
|
};
|
|
3856
3856
|
const currentImage = imageOrder[currentIndex];
|
|
3857
3857
|
const isImageLoaded = loadedImages.has(currentImage.id);
|
|
3858
|
-
return (jsxs("div", { ref: slideshowRef, className: `${styles.slideshow} ${isFullscreen ? styles.fullscreen : ''} ${showThumbnails && imageOrder.length > 1 ? styles.hasThumbnails : ''} ${className}`, children: [jsxs("div", { className: styles.mainContainer, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: [jsx(AnimatePresence, { mode: "wait", custom: 1, children: jsxs(motion.div, { custom: 1, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
|
|
3858
|
+
return (jsxs("div", { ref: slideshowRef, className: `${styles$1.slideshow} ${isFullscreen ? styles$1.fullscreen : ''} ${showThumbnails && imageOrder.length > 1 ? styles$1.hasThumbnails : ''} ${className}`, children: [jsxs("div", { className: styles$1.mainContainer, onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, children: [jsx(AnimatePresence, { mode: "wait", custom: 1, children: jsxs(motion.div, { custom: 1, variants: slideVariants, initial: "enter", animate: "center", exit: "exit", transition: {
|
|
3859
3859
|
x: { type: "spring", stiffness: 300, damping: 30 },
|
|
3860
3860
|
opacity: { duration: 0.3 }
|
|
3861
|
-
}, className: styles.slide, children: [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: {
|
|
3861
|
+
}, className: styles$1.slide, children: [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: {
|
|
3862
3862
|
opacity: lazyLoading && !isImageLoaded ? 0 : 1,
|
|
3863
3863
|
transition: 'opacity 0.3s ease'
|
|
3864
|
-
} }), lazyLoading && !isImageLoaded && (jsx("div", { className: styles.imageLoader, children: jsx("div", { className: styles.spinner }) }))] }, currentIndex) }), showControls && imageOrder.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: `${styles.control} ${styles.controlPrev}`, onClick: goToPrevious, disabled: !loop && currentIndex === 0, "aria-label": "Previous image", children: jsx(FiChevronLeft, {}) }), jsx("button", { className: `${styles.control} ${styles.controlNext}`, onClick: goToNext, disabled: !loop && currentIndex === imageOrder.length - 1, "aria-label": "Next image", children: jsx(FiChevronRight, {}) })] })), jsxs("div", { className: styles.topControls, children: [enableFullscreen && (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: jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsx(FiMaximize, {}) }) })), enableDownload && (jsx("button", { className: `${styles.control} ${styles.controlAction}`, onClick: handleDownload, "aria-label": "Download image", title: "Download image", children: jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsx(FiDownload, {}) }) })), enableShare && (jsx("button", { className: `${styles.control} ${styles.controlAction}`, onClick: handleShare, "aria-label": "Share image", title: "Share image", children: jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsx(FiShare2, {}) }) }))] }), autoPlay && imageOrder.length > 1 && (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 ? jsx(FiPause, {}) : jsx(FiPlay, {}) })), showCaptions && (currentImage.caption || currentImage.title) && (jsxs(motion.div, { className: styles.caption, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: [currentImage.title && (jsx("h3", { className: styles.captionTitle, children: currentImage.title })), currentImage.caption && (jsx("p", { className: styles.captionText, children: currentImage.caption })), currentImage.metadata && (jsxs("div", { className: styles.imageMetadata, children: [currentImage.metadata.photographer && (jsxs("span", { className: styles.metadataItem, children: ["\uD83D\uDCF7 ", currentImage.metadata.photographer] })), currentImage.metadata.location && (jsxs("span", { className: styles.metadataItem, children: ["\uD83D\uDCCD ", currentImage.metadata.location] })), currentImage.metadata.camera && (jsxs("span", { className: styles.metadataItem, children: ["\uD83D\uDCF9 ", currentImage.metadata.camera] }))] }))] }))] }), showIndicators && imageOrder.length > 1 && (jsx("div", { className: styles.indicators, children: imageOrder.map((_, index) => (jsx(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 && (jsx("div", { className: `${styles.thumbnails} ${isDragging ? styles.thumbnailsDragging : ''}`, children: imageOrder.map((image, index) => (jsx(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: jsx("img", { src: image.src, alt: image.alt, className: styles.thumbnailImage, draggable: false }) }, image.id))) }))] }));
|
|
3864
|
+
} }), lazyLoading && !isImageLoaded && (jsx("div", { className: styles$1.imageLoader, children: jsx("div", { className: styles$1.spinner }) }))] }, currentIndex) }), showControls && imageOrder.length > 1 && (jsxs(Fragment, { children: [jsx("button", { className: `${styles$1.control} ${styles$1.controlPrev}`, onClick: goToPrevious, disabled: !loop && currentIndex === 0, "aria-label": "Previous image", children: jsx(FiChevronLeft, {}) }), jsx("button", { className: `${styles$1.control} ${styles$1.controlNext}`, onClick: goToNext, disabled: !loop && currentIndex === imageOrder.length - 1, "aria-label": "Next image", children: jsx(FiChevronRight, {}) })] })), jsxs("div", { className: styles$1.topControls, children: [enableFullscreen && (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: jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsx(FiMaximize, {}) }) })), enableDownload && (jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: handleDownload, "aria-label": "Download image", title: "Download image", children: jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsx(FiDownload, {}) }) })), enableShare && (jsx("button", { className: `${styles$1.control} ${styles$1.controlAction}`, onClick: handleShare, "aria-label": "Share image", title: "Share image", children: jsx("span", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }, children: jsx(FiShare2, {}) }) }))] }), autoPlay && imageOrder.length > 1 && (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 ? jsx(FiPause, {}) : jsx(FiPlay, {}) })), showCaptions && (currentImage.caption || currentImage.title) && (jsxs(motion.div, { className: styles$1.caption, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.3 }, children: [currentImage.title && (jsx("h3", { className: styles$1.captionTitle, children: currentImage.title })), currentImage.caption && (jsx("p", { className: styles$1.captionText, children: currentImage.caption })), currentImage.metadata && (jsxs("div", { className: styles$1.imageMetadata, children: [currentImage.metadata.photographer && (jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCF7 ", currentImage.metadata.photographer] })), currentImage.metadata.location && (jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCCD ", currentImage.metadata.location] })), currentImage.metadata.camera && (jsxs("span", { className: styles$1.metadataItem, children: ["\uD83D\uDCF9 ", currentImage.metadata.camera] }))] }))] }))] }), showIndicators && imageOrder.length > 1 && (jsx("div", { className: styles$1.indicators, children: imageOrder.map((_, index) => (jsx(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 && (jsx("div", { className: `${styles$1.thumbnails} ${isDragging ? styles$1.thumbnailsDragging : ''}`, children: imageOrder.map((image, index) => (jsx(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: jsx("img", { src: image.src, alt: image.alt, className: styles$1.thumbnailImage, draggable: false }) }, image.id))) }))] }));
|
|
3865
3865
|
};
|
|
3866
3866
|
|
|
3867
|
-
|
|
3867
|
+
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"};
|
|
3868
|
+
|
|
3869
|
+
/**
|
|
3870
|
+
* A comprehensive table component with sorting, filtering, pagination, selection, and row actions.
|
|
3871
|
+
*
|
|
3872
|
+
* Features:
|
|
3873
|
+
* - Sorting by clicking column headers
|
|
3874
|
+
* - Global search and per-column filtering
|
|
3875
|
+
* - Row selection with bulk actions
|
|
3876
|
+
* - Pagination with customizable page sizes
|
|
3877
|
+
* - Row-level action buttons
|
|
3878
|
+
* - Responsive design with sticky headers
|
|
3879
|
+
* - Framer Motion animations (can be disabled for performance)
|
|
3880
|
+
* - Full theme integration via CSS custom properties
|
|
3881
|
+
*
|
|
3882
|
+
* @template T - The type of data objects in the table
|
|
3883
|
+
* @param props - Table configuration and data
|
|
3884
|
+
* @returns React component
|
|
3885
|
+
*
|
|
3886
|
+
* @example
|
|
3887
|
+
* ```tsx
|
|
3888
|
+
* const users = [{ id: 1, name: 'John', email: 'john@example.com' }]
|
|
3889
|
+
* const columns = [
|
|
3890
|
+
* { key: 'name', header: 'Name', sortable: true },
|
|
3891
|
+
* { key: 'email', header: 'Email', filterable: true }
|
|
3892
|
+
* ]
|
|
3893
|
+
*
|
|
3894
|
+
* <Table
|
|
3895
|
+
* data={users}
|
|
3896
|
+
* columns={columns}
|
|
3897
|
+
* searchable
|
|
3898
|
+
* pagination
|
|
3899
|
+
* rowActions={[
|
|
3900
|
+
* {
|
|
3901
|
+
* icon: <EditIcon />,
|
|
3902
|
+
* label: 'Edit user',
|
|
3903
|
+
* onClick: (user) => editUser(user),
|
|
3904
|
+
* variant: 'primary'
|
|
3905
|
+
* }
|
|
3906
|
+
* ]}
|
|
3907
|
+
* />
|
|
3908
|
+
* ```
|
|
3909
|
+
*/
|
|
3910
|
+
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 = '' }) {
|
|
3911
|
+
// State
|
|
3912
|
+
const [selectedRows, setSelectedRows] = useState(new Set());
|
|
3913
|
+
const [searchQuery, setSearchQuery] = useState('');
|
|
3914
|
+
const [columnFilters, setColumnFilters] = useState({});
|
|
3915
|
+
const [sortConfig, setSortConfig] = useState({ key: null, direction: 'asc' });
|
|
3916
|
+
const [currentPage, setCurrentPage] = useState(1);
|
|
3917
|
+
const [pageSize, setPageSize] = useState(typeof pagination === 'object' && pagination.pageSize ? pagination.pageSize : 10);
|
|
3918
|
+
// Pagination options
|
|
3919
|
+
const pageSizeOptions = useMemo(() => {
|
|
3920
|
+
if (typeof pagination === 'object' && pagination.pageSizeOptions) {
|
|
3921
|
+
return pagination.pageSizeOptions;
|
|
3922
|
+
}
|
|
3923
|
+
return [10, 25, 50, 100];
|
|
3924
|
+
}, [pagination]);
|
|
3925
|
+
// Memoize search columns for performance
|
|
3926
|
+
const searchableColumns = useMemo(() => columns.map(col => col.key), [columns]);
|
|
3927
|
+
// Filter data
|
|
3928
|
+
const filteredData = useMemo(() => {
|
|
3929
|
+
if (!searchQuery && Object.keys(columnFilters).length === 0) {
|
|
3930
|
+
return data;
|
|
3931
|
+
}
|
|
3932
|
+
let filtered = data;
|
|
3933
|
+
// Global search
|
|
3934
|
+
if (searchable && searchQuery) {
|
|
3935
|
+
const query = searchQuery.toLowerCase();
|
|
3936
|
+
filtered = filtered.filter(item => {
|
|
3937
|
+
return searchableColumns.some(key => {
|
|
3938
|
+
const value = item[key];
|
|
3939
|
+
return value != null && String(value).toLowerCase().includes(query);
|
|
3940
|
+
});
|
|
3941
|
+
});
|
|
3942
|
+
}
|
|
3943
|
+
// Column filters
|
|
3944
|
+
for (const [key, filterValue] of Object.entries(columnFilters)) {
|
|
3945
|
+
if (filterValue) {
|
|
3946
|
+
const lowerFilterValue = filterValue.toLowerCase();
|
|
3947
|
+
filtered = filtered.filter(item => {
|
|
3948
|
+
const value = item[key];
|
|
3949
|
+
return value != null && String(value).toLowerCase().includes(lowerFilterValue);
|
|
3950
|
+
});
|
|
3951
|
+
}
|
|
3952
|
+
}
|
|
3953
|
+
return filtered;
|
|
3954
|
+
}, [data, searchableColumns, searchQuery, columnFilters, searchable]);
|
|
3955
|
+
// Sort data
|
|
3956
|
+
const sortedData = useMemo(() => {
|
|
3957
|
+
if (!sortConfig.key)
|
|
3958
|
+
return filteredData;
|
|
3959
|
+
return [...filteredData].sort((a, b) => {
|
|
3960
|
+
const aValue = a[sortConfig.key];
|
|
3961
|
+
const bValue = b[sortConfig.key];
|
|
3962
|
+
if (aValue === null || aValue === undefined)
|
|
3963
|
+
return 1;
|
|
3964
|
+
if (bValue === null || bValue === undefined)
|
|
3965
|
+
return -1;
|
|
3966
|
+
let comparison = 0;
|
|
3967
|
+
if (typeof aValue === 'number' && typeof bValue === 'number') {
|
|
3968
|
+
comparison = aValue - bValue;
|
|
3969
|
+
}
|
|
3970
|
+
else if (aValue instanceof Date && bValue instanceof Date) {
|
|
3971
|
+
comparison = aValue.getTime() - bValue.getTime();
|
|
3972
|
+
}
|
|
3973
|
+
else {
|
|
3974
|
+
comparison = String(aValue).localeCompare(String(bValue));
|
|
3975
|
+
}
|
|
3976
|
+
return sortConfig.direction === 'asc' ? comparison : -comparison;
|
|
3977
|
+
});
|
|
3978
|
+
}, [filteredData, sortConfig]);
|
|
3979
|
+
// Paginate data
|
|
3980
|
+
const paginatedData = useMemo(() => {
|
|
3981
|
+
if (!pagination)
|
|
3982
|
+
return sortedData;
|
|
3983
|
+
const startIndex = (currentPage - 1) * pageSize;
|
|
3984
|
+
const endIndex = startIndex + pageSize;
|
|
3985
|
+
return sortedData.slice(startIndex, endIndex);
|
|
3986
|
+
}, [sortedData, pagination, currentPage, pageSize]);
|
|
3987
|
+
const totalPages = useMemo(() => {
|
|
3988
|
+
if (!pagination)
|
|
3989
|
+
return 1;
|
|
3990
|
+
return Math.ceil(sortedData.length / pageSize);
|
|
3991
|
+
}, [sortedData, pageSize, pagination]);
|
|
3992
|
+
// Handlers
|
|
3993
|
+
const handleSort = useCallback((key) => {
|
|
3994
|
+
setSortConfig(prev => {
|
|
3995
|
+
if (prev.key !== key) {
|
|
3996
|
+
return { key, direction: 'asc' };
|
|
3997
|
+
}
|
|
3998
|
+
if (prev.direction === 'asc') {
|
|
3999
|
+
return { key, direction: 'desc' };
|
|
4000
|
+
}
|
|
4001
|
+
return { key: null, direction: 'asc' };
|
|
4002
|
+
});
|
|
4003
|
+
}, []);
|
|
4004
|
+
const handleSelectAll = useCallback(() => {
|
|
4005
|
+
const currentPageIds = paginatedData.map(item => item[keyField]);
|
|
4006
|
+
const allSelected = currentPageIds.every(id => selectedRows.has(id));
|
|
4007
|
+
const newSelected = new Set(selectedRows);
|
|
4008
|
+
if (allSelected) {
|
|
4009
|
+
currentPageIds.forEach(id => newSelected.delete(id));
|
|
4010
|
+
}
|
|
4011
|
+
else {
|
|
4012
|
+
currentPageIds.forEach(id => newSelected.add(id));
|
|
4013
|
+
}
|
|
4014
|
+
setSelectedRows(newSelected);
|
|
4015
|
+
if (onSelectionChange) {
|
|
4016
|
+
const selectedItems = data.filter(item => newSelected.has(item[keyField]));
|
|
4017
|
+
onSelectionChange(selectedItems);
|
|
4018
|
+
}
|
|
4019
|
+
}, [paginatedData, selectedRows, keyField, data, onSelectionChange]);
|
|
4020
|
+
const handleSelectRow = useCallback((itemId) => {
|
|
4021
|
+
const newSelected = new Set(selectedRows);
|
|
4022
|
+
if (newSelected.has(itemId)) {
|
|
4023
|
+
newSelected.delete(itemId);
|
|
4024
|
+
}
|
|
4025
|
+
else {
|
|
4026
|
+
newSelected.add(itemId);
|
|
4027
|
+
}
|
|
4028
|
+
setSelectedRows(newSelected);
|
|
4029
|
+
if (onSelectionChange) {
|
|
4030
|
+
const selectedItems = data.filter(item => newSelected.has(item[keyField]));
|
|
4031
|
+
onSelectionChange(selectedItems);
|
|
4032
|
+
}
|
|
4033
|
+
}, [selectedRows, data, keyField, onSelectionChange]);
|
|
4034
|
+
const handleColumnFilter = useCallback((key, value) => {
|
|
4035
|
+
setColumnFilters(prev => ({ ...prev, [key]: value }));
|
|
4036
|
+
setCurrentPage(1);
|
|
4037
|
+
}, []);
|
|
4038
|
+
const clearFilters = useCallback(() => {
|
|
4039
|
+
setSearchQuery('');
|
|
4040
|
+
setColumnFilters({});
|
|
4041
|
+
setSortConfig({ key: null, direction: 'asc' });
|
|
4042
|
+
setCurrentPage(1);
|
|
4043
|
+
}, []);
|
|
4044
|
+
// Computed values
|
|
4045
|
+
const hasActiveFilters = searchQuery || Object.values(columnFilters).some(v => v);
|
|
4046
|
+
const currentPageIds = paginatedData.map(item => item[keyField]);
|
|
4047
|
+
const allCurrentPageSelected = selectable && currentPageIds.length > 0 &&
|
|
4048
|
+
currentPageIds.every(id => selectedRows.has(id));
|
|
4049
|
+
const someCurrentPageSelected = selectable &&
|
|
4050
|
+
currentPageIds.some(id => selectedRows.has(id));
|
|
4051
|
+
const selectedItems = useMemo(() => {
|
|
4052
|
+
return data.filter(item => selectedRows.has(item[keyField]));
|
|
4053
|
+
}, [data, selectedRows, keyField]);
|
|
4054
|
+
// Helper function to merge button styles
|
|
4055
|
+
const getButtonStyles = useCallback((action) => {
|
|
4056
|
+
const defaultSize = actionButtonStyles?.size || 36;
|
|
4057
|
+
const actionSize = action.buttonStyles?.size || defaultSize;
|
|
4058
|
+
const baseStyles = {
|
|
4059
|
+
width: actionSize,
|
|
4060
|
+
height: actionSize,
|
|
4061
|
+
borderRadius: action.buttonStyles?.borderRadius || actionButtonStyles?.borderRadius || '50%',
|
|
4062
|
+
fontSize: action.buttonStyles?.fontSize || actionButtonStyles?.fontSize,
|
|
4063
|
+
padding: action.buttonStyles?.padding || actionButtonStyles?.padding,
|
|
4064
|
+
...actionButtonStyles?.style,
|
|
4065
|
+
...action.style,
|
|
4066
|
+
...action.buttonStyles?.style
|
|
4067
|
+
};
|
|
4068
|
+
// Handle icon size - cast to any to allow CSS custom properties
|
|
4069
|
+
if (action.buttonStyles?.iconSize || actionButtonStyles?.iconSize) {
|
|
4070
|
+
baseStyles['--icon-size'] = typeof (action.buttonStyles?.iconSize || actionButtonStyles?.iconSize) === 'number'
|
|
4071
|
+
? `${action.buttonStyles?.iconSize || actionButtonStyles?.iconSize}px`
|
|
4072
|
+
: action.buttonStyles?.iconSize || actionButtonStyles?.iconSize;
|
|
4073
|
+
}
|
|
4074
|
+
return baseStyles;
|
|
4075
|
+
}, [actionButtonStyles]);
|
|
4076
|
+
const getButtonClassName = useCallback((action) => {
|
|
4077
|
+
const baseClass = styles.actionButton;
|
|
4078
|
+
const variantClass = action.variant === 'primary' ? styles.actionButtonPrimary :
|
|
4079
|
+
action.variant === 'danger' ? styles.actionButtonDanger :
|
|
4080
|
+
action.variant === 'warning' ? styles.actionButtonWarning :
|
|
4081
|
+
action.variant === 'success' ? styles.actionButtonSuccess :
|
|
4082
|
+
action.variant === 'custom' ? '' :
|
|
4083
|
+
styles.actionButtonSecondary;
|
|
4084
|
+
const globalCustomClass = actionButtonStyles?.className || '';
|
|
4085
|
+
const actionCustomClass = action.className || '';
|
|
4086
|
+
const buttonCustomClass = action.buttonStyles?.className || '';
|
|
4087
|
+
return `${baseClass} ${variantClass} ${globalCustomClass} ${actionCustomClass} ${buttonCustomClass}`.trim();
|
|
4088
|
+
}, [actionButtonStyles]);
|
|
4089
|
+
// Loading state
|
|
4090
|
+
if (loading) {
|
|
4091
|
+
return (jsx("div", { className: `${styles.container} ${className}`, children: jsxs("div", { className: styles.loading, children: [jsx("div", { className: styles.spinner }), jsx("span", { children: "Loading..." })] }) }));
|
|
4092
|
+
}
|
|
4093
|
+
// Empty state
|
|
4094
|
+
if (data.length === 0) {
|
|
4095
|
+
return (jsxs("div", { className: `${styles.container} ${className}`, children: [title && jsx("h2", { className: styles.title, children: title }), jsxs("div", { className: styles.empty, children: [jsx("span", { className: styles.emptyIcon, children: "\uD83D\uDCCA" }), jsx("p", { children: emptyMessage })] })] }));
|
|
4096
|
+
}
|
|
4097
|
+
return (jsxs("div", { className: `${styles.container} ${className}`, children: [(title || actions) && (jsxs("div", { className: styles.header, children: [title && jsx("h2", { className: styles.title, children: title }), actions && selectedItems.length > 0 && (jsx("div", { className: styles.actions, children: actions(selectedItems) }))] })), (searchable || hasActiveFilters) && (jsxs("div", { className: styles.controls, children: [searchable && (jsxs("div", { className: styles.searchBox, children: [jsx("span", { className: styles.searchIcon, children: "\uD83D\uDD0D" }), jsx("input", { type: "text", placeholder: "Search...", value: searchQuery, onChange: e => {
|
|
4098
|
+
setSearchQuery(e.target.value);
|
|
4099
|
+
setCurrentPage(1);
|
|
4100
|
+
}, className: styles.searchInput }), searchQuery && (jsx("button", { className: styles.clearButton, onClick: () => setSearchQuery(''), children: "\u2715" }))] })), hasActiveFilters && (jsx("button", { className: styles.clearFiltersButton, onClick: clearFilters, children: "Clear All Filters" })), jsxs("div", { className: styles.resultCount, children: [filteredData.length, " ", filteredData.length === 1 ? 'result' : 'results'] })] })), jsx("div", { className: `${styles.tableWrapper} ${stickyHeader ? styles.stickyHeader : ''}`, children: jsxs("table", { className: `
|
|
4101
|
+
${styles.table}
|
|
4102
|
+
${striped ? styles.striped : ''}
|
|
4103
|
+
${hoverable ? styles.hoverable : ''}
|
|
4104
|
+
${compact ? styles.compact : ''}
|
|
4105
|
+
`, role: "table", "aria-label": title || 'Data table', "aria-rowcount": sortedData.length, "aria-describedby": title ? `${title.replace(/\s+/g, '-').toLowerCase()}-summary` : undefined, children: [jsx("thead", { children: jsxs("tr", { children: [selectable && (jsx("th", { className: styles.checkboxColumn, scope: "col", children: jsx("input", { type: "checkbox", checked: allCurrentPageSelected, ref: input => {
|
|
4106
|
+
if (input) {
|
|
4107
|
+
input.indeterminate = !allCurrentPageSelected && someCurrentPageSelected;
|
|
4108
|
+
}
|
|
4109
|
+
}, onChange: handleSelectAll, className: styles.checkbox, "aria-label": "Select all rows" }) })), columns.map(column => (jsx("th", { className: `${styles.th} ${column.className || ''}`, style: {
|
|
4110
|
+
width: column.width,
|
|
4111
|
+
textAlign: column.align || 'left'
|
|
4112
|
+
}, scope: "col", role: "columnheader", "aria-sort": sortConfig.key === column.key
|
|
4113
|
+
? sortConfig.direction === 'asc' ? 'ascending' : 'descending'
|
|
4114
|
+
: column.sortable ? 'none' : undefined, children: jsxs("div", { className: styles.headerCell, children: [column.sortable ? (jsxs("button", { className: styles.sortButton, onClick: () => handleSort(column.key), "aria-label": `Sort by ${column.header} ${sortConfig.key === column.key
|
|
4115
|
+
? sortConfig.direction === 'asc' ? '(descending)' : '(ascending)'
|
|
4116
|
+
: '(ascending)'}`, children: [jsx("span", { children: column.header }), jsx("span", { className: styles.sortIcon, "aria-hidden": "true", children: sortConfig.key === column.key ? (sortConfig.direction === 'asc' ? '↑' : '↓') : '↕' })] })) : (jsx("span", { className: styles.headerText, children: column.header })), column.filterable && (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 && (jsx("th", { className: styles.actionsColumn, scope: "col", children: jsx("span", { className: styles.headerText, children: "Actions" }) }))] }) }), jsx("tbody", { children: animated ? (jsx(LayoutGroup, { children: jsx(AnimatePresence, { mode: "popLayout", children: paginatedData.map((item, index) => (jsxs(motion.tr, { layout: "position", initial: { opacity: 0, scale: 0.98 }, animate: {
|
|
4117
|
+
opacity: 1,
|
|
4118
|
+
scale: 1,
|
|
4119
|
+
transition: {
|
|
4120
|
+
duration: 0.12,
|
|
4121
|
+
delay: Math.min(index * 0.005, 0.08),
|
|
4122
|
+
ease: [0.25, 0.46, 0.45, 0.94]
|
|
4123
|
+
}
|
|
4124
|
+
}, exit: {
|
|
4125
|
+
opacity: 0,
|
|
4126
|
+
scale: 0.98,
|
|
4127
|
+
transition: { duration: 0.08 }
|
|
4128
|
+
}, className: `
|
|
4129
|
+
${styles.tr}
|
|
4130
|
+
${selectedRows.has(item[keyField]) ? styles.selected : ''}
|
|
4131
|
+
${onRowClick ? styles.clickable : ''}
|
|
4132
|
+
`, onClick: () => onRowClick?.(item, index), children: [selectable && (jsx("td", { className: styles.checkboxColumn, children: jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles.checkbox }) })), columns.map(column => (jsx("td", { className: `${styles.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
|
|
4133
|
+
? column.render(item[column.key], item, index)
|
|
4134
|
+
: formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsx("td", { className: styles.actionsColumn, onClick: e => e.stopPropagation(), children: jsx("div", { className: styles.actionButtons, children: rowActions.map((action, actionIndex) => (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) => (jsxs("tr", { className: `
|
|
4135
|
+
${styles.tr}
|
|
4136
|
+
${selectedRows.has(item[keyField]) ? styles.selected : ''}
|
|
4137
|
+
${onRowClick ? styles.clickable : ''}
|
|
4138
|
+
`, onClick: () => onRowClick?.(item, index), children: [selectable && (jsx("td", { className: styles.checkboxColumn, children: jsx("input", { type: "checkbox", checked: selectedRows.has(item[keyField]), onChange: () => handleSelectRow(item[keyField]), onClick: e => e.stopPropagation(), className: styles.checkbox }) })), columns.map(column => (jsx("td", { className: `${styles.td} ${column.className || ''}`, style: { textAlign: column.align || 'left' }, children: column.render
|
|
4139
|
+
? column.render(item[column.key], item, index)
|
|
4140
|
+
: formatValue(item[column.key]) }, column.key))), rowActions && rowActions.length > 0 && (jsx("td", { className: styles.actionsColumn, onClick: e => e.stopPropagation(), children: jsx("div", { className: styles.actionButtons, children: rowActions.map((action, actionIndex) => (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 && (jsxs("div", { className: styles.pagination, children: [jsxs("div", { className: styles.pageInfo, children: ["Showing ", ((currentPage - 1) * pageSize) + 1, "-", Math.min(currentPage * pageSize, sortedData.length), " of ", sortedData.length] }), jsxs("div", { className: styles.pageControls, children: [jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(1), disabled: currentPage === 1, children: "\u27E8\u27E8" }), jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(prev => Math.max(1, prev - 1)), disabled: currentPage === 1, children: "\u27E8" }), jsxs("span", { className: styles.pageNumber, children: ["Page ", currentPage, " of ", totalPages] }), jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(prev => Math.min(totalPages, prev + 1)), disabled: currentPage === totalPages, children: "\u27E9" }), jsx("button", { className: styles.pageButton, onClick: () => setCurrentPage(totalPages), disabled: currentPage === totalPages, children: "\u27E9\u27E9" })] }), typeof pagination === 'object' && (jsx("select", { className: styles.pageSizeSelect, value: pageSize, onChange: e => {
|
|
4141
|
+
setPageSize(Number(e.target.value));
|
|
4142
|
+
setCurrentPage(1);
|
|
4143
|
+
}, children: pageSizeOptions.map(size => (jsxs("option", { value: size, children: [size, " per page"] }, size))) }))] }))] }));
|
|
4144
|
+
};
|
|
4145
|
+
// Helper function to format values
|
|
4146
|
+
function formatValue(value) {
|
|
4147
|
+
if (value === null || value === undefined) {
|
|
4148
|
+
return jsx("span", { className: styles.nullValue, children: "\u2014" });
|
|
4149
|
+
}
|
|
4150
|
+
if (typeof value === 'boolean') {
|
|
4151
|
+
return (jsx("span", { className: `${styles.badge} ${value ? styles.badgeSuccess : styles.badgeDanger}`, children: value ? '✓' : '✗' }));
|
|
4152
|
+
}
|
|
4153
|
+
if (value instanceof Date) {
|
|
4154
|
+
return value.toLocaleDateString();
|
|
4155
|
+
}
|
|
4156
|
+
if (typeof value === 'object') {
|
|
4157
|
+
return jsx("code", { className: styles.code, children: JSON.stringify(value, null, 2) });
|
|
4158
|
+
}
|
|
4159
|
+
return String(value);
|
|
4160
|
+
}
|
|
4161
|
+
// Memoized Table component to prevent unnecessary re-renders
|
|
4162
|
+
const Table = memo(TableComponent);
|
|
4163
|
+
|
|
4164
|
+
export { ArrayInput, BooleansHeatmap, Button, Calendar, Card, Checkbox, DateInput, EditFAB, ImageSlideshow, MoodChart, Navbar, NumberStepper, PieChart, QuantifiableHabitsChart, SearchBar, SearchableDropdown, SelectInput, SleepChart, Slider, SunburstChart, Table, Tabs, TextArea, TextInput, ThemeProvider, ThemeSwitcher, TimeInput, Toggle, ToggleButton, useTheme$1 as useTheme };
|
|
3868
4165
|
//# sourceMappingURL=index.esm.js.map
|