@stfrigerio/sito-template 0.1.60 → 0.1.61
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/molecules/TimeInput/TimeInput.d.ts +1 -1
- package/dist/components/molecules/TimeInput/TimeInput.d.ts.map +1 -1
- package/dist/components/molecules/TimeInput/index.d.ts +0 -1
- package/dist/components/molecules/TimeInput/index.d.ts.map +1 -1
- package/dist/index.esm.js +208 -215
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +206 -213
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +11 -1
package/dist/index.js
CHANGED
|
@@ -5,6 +5,11 @@ var framerMotion = require('framer-motion');
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
7
7
|
var lucideReact = require('lucide-react');
|
|
8
|
+
var dayjs = require('dayjs');
|
|
9
|
+
var MobileTimePicker = require('@mui/x-date-pickers/MobileTimePicker');
|
|
10
|
+
var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
|
|
11
|
+
var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
|
|
12
|
+
var styles$A = require('@mui/material/styles');
|
|
8
13
|
var d3 = require('d3');
|
|
9
14
|
|
|
10
15
|
function _interopNamespaceDefault(e) {
|
|
@@ -26,7 +31,7 @@ function _interopNamespaceDefault(e) {
|
|
|
26
31
|
|
|
27
32
|
var d3__namespace = /*#__PURE__*/_interopNamespaceDefault(d3);
|
|
28
33
|
|
|
29
|
-
var styles$
|
|
34
|
+
var styles$z = {"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"};
|
|
30
35
|
|
|
31
36
|
const SOUND_PACKS = {
|
|
32
37
|
digital: {
|
|
@@ -591,11 +596,11 @@ function useComponentSound(config, options) {
|
|
|
591
596
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
|
|
592
597
|
const { handlers } = useComponentSound(soundConfig);
|
|
593
598
|
const buttonClasses = [
|
|
594
|
-
styles$
|
|
595
|
-
styles$
|
|
596
|
-
styles$
|
|
597
|
-
fullWidth && styles$
|
|
598
|
-
loading && styles$
|
|
599
|
+
styles$z.button,
|
|
600
|
+
styles$z[variant],
|
|
601
|
+
styles$z[size],
|
|
602
|
+
fullWidth && styles$z.fullWidth,
|
|
603
|
+
loading && styles$z.loading,
|
|
599
604
|
className
|
|
600
605
|
].filter(Boolean).join(' ');
|
|
601
606
|
const handleClick = (e) => {
|
|
@@ -606,10 +611,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
|
|
|
606
611
|
handlers.onMouseEnter?.();
|
|
607
612
|
onMouseEnter?.(e);
|
|
608
613
|
};
|
|
609
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$
|
|
614
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$z.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$z.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$z.iconRight, children: iconRight })] }));
|
|
610
615
|
};
|
|
611
616
|
|
|
612
|
-
var styles$
|
|
617
|
+
var styles$y = {"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"};
|
|
613
618
|
|
|
614
619
|
/**
|
|
615
620
|
* Card Component
|
|
@@ -674,28 +679,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
|
|
|
674
679
|
onExpandChange?.(newExpanded);
|
|
675
680
|
};
|
|
676
681
|
const cardClasses = [
|
|
677
|
-
styles$
|
|
678
|
-
styles$
|
|
679
|
-
hoverable && styles$
|
|
680
|
-
clickable && styles$
|
|
681
|
-
!padding && styles$
|
|
682
|
-
expandable && styles$
|
|
682
|
+
styles$y.card,
|
|
683
|
+
styles$y[variant],
|
|
684
|
+
hoverable && styles$y.hoverable,
|
|
685
|
+
clickable && styles$y.clickable,
|
|
686
|
+
!padding && styles$y.noPadding,
|
|
687
|
+
expandable && styles$y.expandable,
|
|
683
688
|
className
|
|
684
689
|
].filter(Boolean).join(' ');
|
|
685
690
|
const renderHeader = () => {
|
|
686
691
|
if (header) {
|
|
687
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
692
|
+
return (jsxRuntime.jsxs("div", { className: styles$y.header, children: [jsxRuntime.jsx("div", { className: styles$y.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$y.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$y.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
688
693
|
}
|
|
689
694
|
if (title || subtitle) {
|
|
690
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
695
|
+
return (jsxRuntime.jsxs("div", { className: styles$y.header, children: [jsxRuntime.jsxs("div", { className: styles$y.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$y.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$y.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$y.expandButton, onClick: handleToggleExpand, "aria-label": isExpanded ? 'Collapse card' : 'Expand card', children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: styles$y.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
691
696
|
}
|
|
692
697
|
return null;
|
|
693
698
|
};
|
|
694
|
-
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$
|
|
699
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$y.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$y.image }) })), renderHeader(), jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: (!expandable || isExpanded) && (jsxRuntime.jsxs(framerMotion.motion.div, { initial: expandable ? { height: 0, opacity: 0 } : undefined, animate: expandable ? { height: 'auto', opacity: 1 } : undefined, exit: expandable ? { height: 0, opacity: 0 } : undefined, transition: { duration: 0.3, ease: "easeInOut" }, className: styles$y.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$y.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$y.footer, children: footer })] }, "content")) })] }));
|
|
695
700
|
return (jsxRuntime.jsx(framerMotion.motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
696
701
|
};
|
|
697
702
|
|
|
698
|
-
var styles$
|
|
703
|
+
var styles$x = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptyState-module_compact__HdYu1","default":"EmptyState-module_default__ACAbn","large":"EmptyState-module_large__H3ELo","icon":"EmptyState-module_icon__i7-3M","title":"EmptyState-module_title__xCyfH","message":"EmptyState-module_message__Bc5xK","action":"EmptyState-module_action__UpnvZ"};
|
|
699
704
|
|
|
700
705
|
/**
|
|
701
706
|
* EmptyState Component
|
|
@@ -732,11 +737,11 @@ var styles$y = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptySta
|
|
|
732
737
|
* @returns {JSX.Element} The rendered EmptyState component
|
|
733
738
|
*/
|
|
734
739
|
const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
|
|
735
|
-
const wrapperClass = [styles$
|
|
736
|
-
return (jsxRuntime.jsxs("div", { className: wrapperClass, children: [icon && jsxRuntime.jsx("div", { className: styles$
|
|
740
|
+
const wrapperClass = [styles$x.wrapper, styles$x[size]].filter(Boolean).join(' ');
|
|
741
|
+
return (jsxRuntime.jsxs("div", { className: wrapperClass, children: [icon && jsxRuntime.jsx("div", { className: styles$x.icon, children: icon }), title && jsxRuntime.jsx("h3", { className: styles$x.title, children: title }), jsxRuntime.jsx("p", { className: styles$x.message, children: message }), action && jsxRuntime.jsx("div", { className: styles$x.action, children: action })] }));
|
|
737
742
|
};
|
|
738
743
|
|
|
739
|
-
var styles$
|
|
744
|
+
var styles$w = {"backdrop":"Modal-module_backdrop__yOx-a","dialog":"Modal-module_dialog__yEXTq","dialogCompact":"Modal-module_dialogCompact__z1Wxp","dialogWide":"Modal-module_dialogWide__9PTXK","header":"Modal-module_header__NHHKd","title":"Modal-module_title__i3R0x","headerActions":"Modal-module_headerActions__g28UN","closeButton":"Modal-module_closeButton__siC-1","body":"Modal-module_body__U7jvM","bodyFlush":"Modal-module_bodyFlush__wtk3q"};
|
|
740
745
|
|
|
741
746
|
/**
|
|
742
747
|
* Modal Component
|
|
@@ -790,16 +795,16 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
|
|
|
790
795
|
if (typeof document === 'undefined')
|
|
791
796
|
return null;
|
|
792
797
|
const dialogClass = [
|
|
793
|
-
styles$
|
|
794
|
-
size === 'compact' && styles$
|
|
795
|
-
size === 'wide' && styles$
|
|
798
|
+
styles$w.dialog,
|
|
799
|
+
size === 'compact' && styles$w.dialogCompact,
|
|
800
|
+
size === 'wide' && styles$w.dialogWide,
|
|
796
801
|
]
|
|
797
802
|
.filter(Boolean)
|
|
798
803
|
.join(' ');
|
|
799
|
-
return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
804
|
+
return reactDom.createPortal(jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$w.backdrop, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, onClick: onClose, "aria-hidden": "true", children: jsxRuntime.jsxs(framerMotion.motion.div, { className: dialogClass, role: "dialog", "aria-modal": "true", "aria-label": title, initial: { opacity: 0, scale: 0.96, y: 8 }, animate: { opacity: 1, scale: 1, y: 0 }, exit: { opacity: 0, scale: 0.96, y: 8 }, transition: { duration: 0.15, ease: 'easeOut' }, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$w.header, children: [jsxRuntime.jsx("span", { className: styles$w.title, children: title }), actions && jsxRuntime.jsx("div", { className: styles$w.headerActions, children: actions }), jsxRuntime.jsx("button", { className: styles$w.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsxRuntime.jsx(lucideReact.X, { size: 16 }) })] }), jsxRuntime.jsx("div", { className: padding ? styles$w.body : styles$w.bodyFlush, children: children })] }) })) }), document.body);
|
|
800
805
|
};
|
|
801
806
|
|
|
802
|
-
var styles$
|
|
807
|
+
var styles$v = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
803
808
|
|
|
804
809
|
/**
|
|
805
810
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -844,13 +849,13 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
844
849
|
checkboxRef.current.indeterminate = indeterminate;
|
|
845
850
|
}
|
|
846
851
|
}, [indeterminate]);
|
|
847
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
852
|
+
return (jsxRuntime.jsxs("label", { className: styles$v.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
|
|
848
853
|
const isChecked = e.target.checked;
|
|
849
854
|
onChange(isChecked);
|
|
850
855
|
if (soundConfig?.onClick !== false) {
|
|
851
856
|
playSound('toggle');
|
|
852
857
|
}
|
|
853
|
-
}, className: styles$
|
|
858
|
+
}, className: styles$v.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$v.checkboxText, children: label })] }));
|
|
854
859
|
};
|
|
855
860
|
|
|
856
861
|
const formatDateToEuropean = (date) => {
|
|
@@ -881,7 +886,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
881
886
|
return '';
|
|
882
887
|
};
|
|
883
888
|
|
|
884
|
-
var styles$
|
|
889
|
+
var styles$u = {"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"};
|
|
885
890
|
|
|
886
891
|
/**
|
|
887
892
|
* DateInput component - European format date picker with manual input support
|
|
@@ -970,19 +975,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
970
975
|
}
|
|
971
976
|
};
|
|
972
977
|
const getClassName = () => {
|
|
973
|
-
const classes = [styles$
|
|
978
|
+
const classes = [styles$u.dateInput];
|
|
974
979
|
if (error)
|
|
975
|
-
classes.push(styles$
|
|
980
|
+
classes.push(styles$u.error);
|
|
976
981
|
if (success)
|
|
977
|
-
classes.push(styles$
|
|
982
|
+
classes.push(styles$u.success);
|
|
978
983
|
if (loading)
|
|
979
|
-
classes.push(styles$
|
|
984
|
+
classes.push(styles$u.loading);
|
|
980
985
|
return classes.join(' ');
|
|
981
986
|
};
|
|
982
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
987
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$u.label, children: label }), jsxRuntime.jsxs("div", { className: styles$u.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value.includes('-') ? formatDateToEuropean(value) : value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$u.textInput, disabled: disabled || loading, ...handlers }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$u.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(lucideReact.Calendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$u.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
983
988
|
}
|
|
984
989
|
|
|
985
|
-
var styles$
|
|
990
|
+
var styles$t = {"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"};
|
|
986
991
|
|
|
987
992
|
/**
|
|
988
993
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -1087,23 +1092,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
1087
1092
|
}
|
|
1088
1093
|
};
|
|
1089
1094
|
const getTriggerClassName = () => {
|
|
1090
|
-
const classes = [styles$
|
|
1095
|
+
const classes = [styles$t.dropdownTrigger];
|
|
1091
1096
|
if (isOpen)
|
|
1092
|
-
classes.push(styles$
|
|
1097
|
+
classes.push(styles$t.open);
|
|
1093
1098
|
if (loading)
|
|
1094
|
-
classes.push(styles$
|
|
1099
|
+
classes.push(styles$t.loading);
|
|
1095
1100
|
if (error)
|
|
1096
|
-
classes.push(styles$
|
|
1101
|
+
classes.push(styles$t.error);
|
|
1097
1102
|
return classes.join(' ');
|
|
1098
1103
|
};
|
|
1099
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1104
|
+
return (jsxRuntime.jsxs("div", { className: styles$t.searchableDropdown, ref: dropdownRef, onKeyDown: handleKeyDown, children: [jsxRuntime.jsx("label", { children: label }), jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: getTriggerClassName(), onClick: () => !disabled && !loading && setIsOpen(!isOpen), whileTap: { scale: disabled ? 1 : 0.98 }, style: { willChange: 'transform' }, disabled: disabled, children: [jsxRuntime.jsx("span", { className: `${styles$t.dropdownValue} ${!displayValue ? styles$t.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$t.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$t.dropdownMenu, initial: { opacity: 0, y: -10, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -10, scale: 0.95 }, transition: { duration: 0.2, ease: "easeOut" }, children: [jsxRuntime.jsxs("div", { className: styles$t.dropdownSearch, children: [jsxRuntime.jsx(lucideReact.Search, { className: styles$t.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$t.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$t.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
1100
1105
|
const isSelected = value === opt.value;
|
|
1101
1106
|
const isHighlighted = highlightedIndex === index;
|
|
1102
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
1103
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1107
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$t.dropdownOption} ${isSelected ? styles$t.selected : ''} ${isHighlighted ? styles$t.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(lucideReact.Check, { className: styles$t.checkIcon })] }, `${opt.value}-${index}`));
|
|
1108
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$t.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
1104
1109
|
}
|
|
1105
1110
|
|
|
1106
|
-
var styles$
|
|
1111
|
+
var styles$s = {"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"};
|
|
1107
1112
|
|
|
1108
1113
|
/**
|
|
1109
1114
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -1141,26 +1146,26 @@ var styles$t = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
1141
1146
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false, soundConfig, className }) {
|
|
1142
1147
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1143
1148
|
const getClassName = () => {
|
|
1144
|
-
const classes = [styles$
|
|
1149
|
+
const classes = [styles$s.selectInput];
|
|
1145
1150
|
if (error)
|
|
1146
|
-
classes.push(styles$
|
|
1151
|
+
classes.push(styles$s.error);
|
|
1147
1152
|
if (success)
|
|
1148
|
-
classes.push(styles$
|
|
1153
|
+
classes.push(styles$s.success);
|
|
1149
1154
|
if (loading)
|
|
1150
|
-
classes.push(styles$
|
|
1155
|
+
classes.push(styles$s.loading);
|
|
1151
1156
|
return classes.join(' ');
|
|
1152
1157
|
};
|
|
1153
|
-
return (jsxRuntime.jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
1158
|
+
return (jsxRuntime.jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$s.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => {
|
|
1154
1159
|
playSound('click');
|
|
1155
1160
|
onChange(e.target.value);
|
|
1156
1161
|
}, disabled: disabled || loading, required: required, ...handlers, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
1157
1162
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
1158
1163
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
1159
1164
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
1160
|
-
})] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$
|
|
1165
|
+
})] }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: styles$s.selectIcon })] })] }));
|
|
1161
1166
|
}
|
|
1162
1167
|
|
|
1163
|
-
var styles$
|
|
1168
|
+
var styles$r = {"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-"};
|
|
1164
1169
|
|
|
1165
1170
|
/**
|
|
1166
1171
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -1195,38 +1200,38 @@ var styles$s = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
1195
1200
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
|
|
1196
1201
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
1197
1202
|
const getContainerClassName = () => {
|
|
1198
|
-
const classes = [styles$
|
|
1203
|
+
const classes = [styles$r.textareaContainer];
|
|
1199
1204
|
if (error)
|
|
1200
|
-
classes.push(styles$
|
|
1205
|
+
classes.push(styles$r.error);
|
|
1201
1206
|
if (success)
|
|
1202
|
-
classes.push(styles$
|
|
1207
|
+
classes.push(styles$r.success);
|
|
1203
1208
|
if (loading)
|
|
1204
|
-
classes.push(styles$
|
|
1209
|
+
classes.push(styles$r.loading);
|
|
1205
1210
|
if (focusMode)
|
|
1206
|
-
classes.push(styles$
|
|
1211
|
+
classes.push(styles$r.focusMode);
|
|
1207
1212
|
if (compact)
|
|
1208
|
-
classes.push(styles$
|
|
1213
|
+
classes.push(styles$r.compact);
|
|
1209
1214
|
if (className)
|
|
1210
1215
|
classes.push(className);
|
|
1211
1216
|
return classes.join(' ');
|
|
1212
1217
|
};
|
|
1213
1218
|
const getCharCountClassName = () => {
|
|
1214
1219
|
if (!maxLength)
|
|
1215
|
-
return styles$
|
|
1216
|
-
const classes = [styles$
|
|
1220
|
+
return styles$r.characterCount;
|
|
1221
|
+
const classes = [styles$r.characterCount];
|
|
1217
1222
|
const percentage = (value.length / maxLength) * 100;
|
|
1218
1223
|
if (percentage >= 100) {
|
|
1219
|
-
classes.push(styles$
|
|
1224
|
+
classes.push(styles$r.atLimit);
|
|
1220
1225
|
}
|
|
1221
1226
|
else if (percentage >= 80) {
|
|
1222
|
-
classes.push(styles$
|
|
1227
|
+
classes.push(styles$r.nearLimit);
|
|
1223
1228
|
}
|
|
1224
1229
|
return classes.join(' ');
|
|
1225
1230
|
};
|
|
1226
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
1231
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$r.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$r.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$r.textareaInput, "aria-required": required, disabled: disabled || loading, "aria-invalid": error }), maxLength && (jsxRuntime.jsxs("div", { className: getCharCountClassName(), children: [jsxRuntime.jsx("span", { children: value.length }), jsxRuntime.jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsxRuntime.jsx("span", { children: maxLength })] }))] }));
|
|
1227
1232
|
}
|
|
1228
1233
|
|
|
1229
|
-
var styles$
|
|
1234
|
+
var styles$q = {"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"};
|
|
1230
1235
|
|
|
1231
1236
|
/**
|
|
1232
1237
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -1263,21 +1268,21 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1263
1268
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1264
1269
|
const prevValueRef = React.useRef(value);
|
|
1265
1270
|
const getContainerClassName = () => {
|
|
1266
|
-
const classes = [styles$
|
|
1271
|
+
const classes = [styles$q.textInput];
|
|
1267
1272
|
if (success)
|
|
1268
|
-
classes.push(styles$
|
|
1273
|
+
classes.push(styles$q.success);
|
|
1269
1274
|
if (loading)
|
|
1270
|
-
classes.push(styles$
|
|
1275
|
+
classes.push(styles$q.loading);
|
|
1271
1276
|
if (icon)
|
|
1272
|
-
classes.push(styles$
|
|
1277
|
+
classes.push(styles$q.withIcon);
|
|
1273
1278
|
if (actionButton)
|
|
1274
|
-
classes.push(styles$
|
|
1279
|
+
classes.push(styles$q.withAction);
|
|
1275
1280
|
return classes.join(' ');
|
|
1276
1281
|
};
|
|
1277
1282
|
React.useEffect(() => {
|
|
1278
1283
|
prevValueRef.current = value;
|
|
1279
1284
|
}, [value]);
|
|
1280
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$
|
|
1285
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$q.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$q.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
|
|
1281
1286
|
const newValue = e.target.value;
|
|
1282
1287
|
const oldValue = prevValueRef.current;
|
|
1283
1288
|
onChange(newValue);
|
|
@@ -1293,13 +1298,13 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1293
1298
|
if (error && soundConfig?.onError) {
|
|
1294
1299
|
playSound(typeof soundConfig.onError === 'string' ? soundConfig.onError : 'error');
|
|
1295
1300
|
}
|
|
1296
|
-
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$
|
|
1301
|
+
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$q.inputError : '', "aria-invalid": !!error, "aria-describedby": error ? `${inputId}-error` : undefined, disabled: disabled || loading, maxLength: maxLength, autoComplete: autoComplete }), actionButton && (jsxRuntime.jsx("button", { type: "button", className: styles$q.actionButton, onClick: () => {
|
|
1297
1302
|
handlers.onClick?.();
|
|
1298
1303
|
actionButton.onClick();
|
|
1299
|
-
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$
|
|
1304
|
+
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$q.errorMessage, children: error }))] }));
|
|
1300
1305
|
}
|
|
1301
1306
|
|
|
1302
|
-
var styles$
|
|
1307
|
+
var styles$p = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
1303
1308
|
|
|
1304
1309
|
/**
|
|
1305
1310
|
* Toggle Component
|
|
@@ -1360,7 +1365,7 @@ function Toggle(props) {
|
|
|
1360
1365
|
justifyContent: 'center',
|
|
1361
1366
|
...style
|
|
1362
1367
|
};
|
|
1363
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1368
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$p.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { ref: leftButtonRef, className: `${styles$p.toggleButton} ${!isOn ? styles$p.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
|
|
1364
1369
|
if (!isOn) {
|
|
1365
1370
|
// Already on left
|
|
1366
1371
|
if (enableCelebration) {
|
|
@@ -1375,7 +1380,7 @@ function Toggle(props) {
|
|
|
1375
1380
|
playSound('toggle');
|
|
1376
1381
|
}
|
|
1377
1382
|
onToggle(false);
|
|
1378
|
-
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$
|
|
1383
|
+
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxRuntime.jsxs(framerMotion.motion.button, { ref: rightButtonRef, className: `${styles$p.toggleButton} ${isOn ? styles$p.active : ''}`, whileHover: { scale: 1.05 }, whileTap: { scale: 0.95 }, transition: { type: "spring", stiffness: 400, damping: 17 }, onClick: () => {
|
|
1379
1384
|
if (isOn) {
|
|
1380
1385
|
// Already on right
|
|
1381
1386
|
if (enableCelebration) {
|
|
@@ -1393,7 +1398,7 @@ function Toggle(props) {
|
|
|
1393
1398
|
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
|
|
1394
1399
|
}
|
|
1395
1400
|
|
|
1396
|
-
var styles$
|
|
1401
|
+
var styles$o = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","minimal":"NumberStepper-module_minimal__y47-W","custom":"NumberStepper-module_custom__XGSVg","vertical":"NumberStepper-module_vertical__nBcL7","pulse":"NumberStepper-module_pulse__51oUo"};
|
|
1397
1402
|
|
|
1398
1403
|
/**
|
|
1399
1404
|
* NumberStepper Component
|
|
@@ -1580,32 +1585,32 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
1580
1585
|
setDisplayValue(finalValue);
|
|
1581
1586
|
}, [displayValue, min, max, step, onChange]);
|
|
1582
1587
|
const containerClasses = [
|
|
1583
|
-
styles$
|
|
1584
|
-
styles$
|
|
1585
|
-
styles$
|
|
1586
|
-
layout === 'vertical' && styles$
|
|
1587
|
-
disabled && styles$
|
|
1588
|
+
styles$o.container,
|
|
1589
|
+
styles$o[size],
|
|
1590
|
+
styles$o[variant],
|
|
1591
|
+
layout === 'vertical' && styles$o.vertical,
|
|
1592
|
+
disabled && styles$o.disabled,
|
|
1588
1593
|
className
|
|
1589
1594
|
].filter(Boolean).join(' ');
|
|
1590
1595
|
// Merge custom styles with hover states
|
|
1591
1596
|
const [isButtonHovered, setIsButtonHovered] = React.useState(null);
|
|
1592
1597
|
const isDecrementDisabled = disabled || value <= min;
|
|
1593
1598
|
const isIncrementDisabled = disabled || value >= max;
|
|
1594
|
-
const stepperContent = (jsxRuntime.jsxs("div", { className: styles$
|
|
1599
|
+
const stepperContent = (jsxRuntime.jsxs("div", { className: styles$o.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$o.button, style: {
|
|
1595
1600
|
...customStyles.button,
|
|
1596
1601
|
...(isButtonHovered === 'decrement' && customStyles.buttonHover)
|
|
1597
|
-
}, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$
|
|
1602
|
+
}, onMouseEnter: () => setIsButtonHovered('decrement'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: customButtons.decrement || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M15 18L9 12L15 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) }), jsxRuntime.jsx("div", { className: styles$o.valueContainer, style: customStyles.valueContainer, children: jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.div, { initial: { y: isIncrementing ? 10 : isDecrementing ? -10 : 0, opacity: 0 }, animate: { y: 0, opacity: 1 }, exit: { y: isIncrementing ? -10 : isDecrementing ? 10 : 0, opacity: 0 }, transition: { duration: 0.15 }, className: styles$o.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$o.value, style: customStyles.value, value: displayValue, onChange: handleInputChange, onBlur: handleInputBlur, disabled: disabled, "aria-label": label || "Number input", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value }) }, value) }) }), jsxRuntime.jsx(framerMotion.motion.button, { className: styles$o.button, style: {
|
|
1598
1603
|
...customStyles.button,
|
|
1599
1604
|
...(isButtonHovered === 'increment' && customStyles.buttonHover)
|
|
1600
|
-
}, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$
|
|
1605
|
+
}, onMouseEnter: () => setIsButtonHovered('increment'), onMouseLeave: () => setIsButtonHovered(null), onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: customButtons.increment || (showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
|
|
1601
1606
|
// For custom variant with horizontal layout, render differently
|
|
1602
1607
|
if (variant === 'custom' && (label || icon)) {
|
|
1603
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$
|
|
1608
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxRuntime.jsxs("div", { className: styles$o.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsxRuntime.jsx("span", { className: styles$o.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$o.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$o.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$o.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$o.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1604
1609
|
}
|
|
1605
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$
|
|
1610
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$o.header, style: customStyles.header, children: [icon && jsxRuntime.jsx("span", { className: styles$o.icon, style: customStyles.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$o.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$o.limits, style: customStyles.limits, children: [jsxRuntime.jsx("span", { className: styles$o.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$o.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1606
1611
|
};
|
|
1607
1612
|
|
|
1608
|
-
var styles$
|
|
1613
|
+
var styles$n = {"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"};
|
|
1609
1614
|
|
|
1610
1615
|
/**
|
|
1611
1616
|
* ToggleButton Component
|
|
@@ -1644,18 +1649,18 @@ var styles$o = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
1644
1649
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', style = {}, color, tooltip, hideLabelOnMobile = false, soundConfig }) => {
|
|
1645
1650
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1646
1651
|
const buttonClasses = [
|
|
1647
|
-
styles$
|
|
1648
|
-
styles$
|
|
1649
|
-
styles$
|
|
1650
|
-
active && styles$
|
|
1651
|
-
active && styles$
|
|
1652
|
-
disabled && styles$
|
|
1653
|
-
animation !== 'none' && styles$
|
|
1652
|
+
styles$n.button,
|
|
1653
|
+
styles$n[size],
|
|
1654
|
+
styles$n[variant],
|
|
1655
|
+
active && styles$n.active,
|
|
1656
|
+
active && styles$n[`active-${activeColor}`],
|
|
1657
|
+
disabled && styles$n.disabled,
|
|
1658
|
+
animation !== 'none' && styles$n[`animation-${animation}`],
|
|
1654
1659
|
className
|
|
1655
1660
|
].filter(Boolean).join(' ');
|
|
1656
1661
|
const labelClasses = [
|
|
1657
|
-
styles$
|
|
1658
|
-
hideLabelOnMobile && styles$
|
|
1662
|
+
styles$n.label,
|
|
1663
|
+
hideLabelOnMobile && styles$n.hideMobile
|
|
1659
1664
|
].filter(Boolean).join(' ');
|
|
1660
1665
|
const iconVariants = {
|
|
1661
1666
|
scale: {
|
|
@@ -1719,10 +1724,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1719
1724
|
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, style: dynamicStyle, onClick: () => {
|
|
1720
1725
|
playSound('toggle');
|
|
1721
1726
|
onClick();
|
|
1722
|
-
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1727
|
+
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$n.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$n.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$n.icon, children: icon })) })), label && jsxRuntime.jsx("span", { className: labelClasses, children: label }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showCheckmark && active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.checkmark, variants: checkmarkVariants, initial: "hidden", animate: "visible", exit: "hidden", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round" }) }) })) })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: active && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$n.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1723
1728
|
};
|
|
1724
1729
|
|
|
1725
|
-
var styles$
|
|
1730
|
+
var styles$m = {"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"};
|
|
1726
1731
|
|
|
1727
1732
|
/**
|
|
1728
1733
|
* Slider component - A beautiful, animated range input
|
|
@@ -1810,16 +1815,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1810
1815
|
setShowTooltipState(false);
|
|
1811
1816
|
};
|
|
1812
1817
|
const dynamicColor = getDynamicColor();
|
|
1813
|
-
const sizeClass = styles$
|
|
1814
|
-
const stateClass = disabled ? styles$
|
|
1818
|
+
const sizeClass = styles$m[`size-${size}`];
|
|
1819
|
+
const stateClass = disabled ? styles$m.disabled : loading ? styles$m.loading : '';
|
|
1815
1820
|
if (loading) {
|
|
1816
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1821
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$m.slider} ${sizeClass} ${styles$m.loading} ${className}`, style: style, children: [label && jsxRuntime.jsx("label", { className: styles$m.label, children: label }), jsxRuntime.jsx("div", { className: styles$m.loadingTrack, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
|
|
1817
1822
|
repeat: Infinity,
|
|
1818
1823
|
duration: 1.5,
|
|
1819
1824
|
ease: "easeInOut"
|
|
1820
1825
|
} }) })] }));
|
|
1821
1826
|
}
|
|
1822
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1827
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$m.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsxRuntime.jsx(framerMotion.motion.label, { className: styles$m.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$m.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.fill, style: {
|
|
1823
1828
|
width: `${percentage}%`,
|
|
1824
1829
|
backgroundColor: dynamicColor
|
|
1825
1830
|
}, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
|
|
@@ -1829,7 +1834,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1829
1834
|
damping: 30
|
|
1830
1835
|
}, whileHover: {
|
|
1831
1836
|
boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
|
|
1832
|
-
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$
|
|
1837
|
+
} }) }), jsxRuntime.jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$m.input, disabled: disabled, "aria-label": label }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.thumb, style: {
|
|
1833
1838
|
left: `${percentage}%`,
|
|
1834
1839
|
backgroundColor: dynamicColor,
|
|
1835
1840
|
borderColor: colors.thumb || dynamicColor
|
|
@@ -1846,14 +1851,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1846
1851
|
}, whileHover: {
|
|
1847
1852
|
scale: 1.1,
|
|
1848
1853
|
transition: { duration: 0.1 }
|
|
1849
|
-
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1854
|
+
}, children: isDragging && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.ripple, initial: { scale: 0, opacity: 0.6 }, animate: { scale: 2, opacity: 0 }, transition: { duration: 0.5 } })) }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showTooltipState && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$m.tooltip, style: {
|
|
1850
1855
|
left: `${percentage}%`,
|
|
1851
1856
|
backgroundColor: dynamicColor
|
|
1852
|
-
}, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$
|
|
1857
|
+
}, initial: { opacity: 0, y: 10, scale: 0.8 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: 10, scale: 0.8 }, transition: { duration: 0.2 }, children: [tooltipContent ? tooltipContent(value) : formatValue(value), jsxRuntime.jsx("div", { className: styles$m.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
|
|
1853
1858
|
duration: 0.2,
|
|
1854
1859
|
type: "spring",
|
|
1855
1860
|
stiffness: 300
|
|
1856
|
-
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$
|
|
1861
|
+
}, children: formatValue(value) }, value)), labels.length > 0 && (jsxRuntime.jsx("div", { className: styles$m.labelsContainer, children: labels.map((labelConfig, index) => {
|
|
1857
1862
|
let position = 0;
|
|
1858
1863
|
if (labelConfig.position === 'start')
|
|
1859
1864
|
position = 0;
|
|
@@ -1861,7 +1866,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1861
1866
|
position = 100;
|
|
1862
1867
|
else if (typeof labelConfig.position === 'number')
|
|
1863
1868
|
position = labelConfig.position;
|
|
1864
|
-
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1869
|
+
return (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$m.labelItem, style: {
|
|
1865
1870
|
left: `${position}%`,
|
|
1866
1871
|
color: labelConfig.color
|
|
1867
1872
|
}, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
@@ -1874,7 +1879,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1874
1879
|
}) }))] }));
|
|
1875
1880
|
}
|
|
1876
1881
|
|
|
1877
|
-
var styles$
|
|
1882
|
+
var styles$l = {"loadingContainer":"LoadingSpinner-module_loadingContainer__m5u51","fullScreen":"LoadingSpinner-module_fullScreen__TuAem","overlay":"LoadingSpinner-module_overlay__X7FTa","shimmer":"LoadingSpinner-module_shimmer__xw4AH","small":"LoadingSpinner-module_small__nq8A3","loadingText":"LoadingSpinner-module_loadingText__wWwna","medium":"LoadingSpinner-module_medium__3JC1S","large":"LoadingSpinner-module_large__4MvAc","dotsSpinner":"LoadingSpinner-module_dotsSpinner__PXtfs","dot1":"LoadingSpinner-module_dot1__5YKSi","dot2":"LoadingSpinner-module_dot2__l6Rbu","dot3":"LoadingSpinner-module_dot3__b9YPW","circleSpinner":"LoadingSpinner-module_circleSpinner__ZmmWs","pulseSpinner":"LoadingSpinner-module_pulseSpinner__wTtDJ","textGradient":"LoadingSpinner-module_textGradient__QDrTY","sparkleContainer":"LoadingSpinner-module_sparkleContainer__9XLJG","sparkle":"LoadingSpinner-module_sparkle__LtFFf"};
|
|
1878
1883
|
|
|
1879
1884
|
const defaultMessages = [
|
|
1880
1885
|
'Loading your content...',
|
|
@@ -1958,22 +1963,22 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1958
1963
|
}
|
|
1959
1964
|
}, [currentMessageIndex, message, messagesToUse, showMessage]);
|
|
1960
1965
|
const containerClasses = [
|
|
1961
|
-
styles$
|
|
1962
|
-
styles$
|
|
1963
|
-
styles$
|
|
1964
|
-
fullScreen && styles$
|
|
1965
|
-
overlay && styles$
|
|
1966
|
+
styles$l.loadingContainer,
|
|
1967
|
+
styles$l[size],
|
|
1968
|
+
styles$l[variant],
|
|
1969
|
+
fullScreen && styles$l.fullScreen,
|
|
1970
|
+
overlay && styles$l.overlay,
|
|
1966
1971
|
className
|
|
1967
1972
|
].filter(Boolean).join(' ');
|
|
1968
1973
|
const customStyle = {
|
|
1969
1974
|
...(color && { '--spinner-color': color }),
|
|
1970
1975
|
...(backgroundColor && { '--spinner-background': backgroundColor }),
|
|
1971
1976
|
};
|
|
1972
|
-
const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$
|
|
1977
|
+
const renderDots = () => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$l.dotsSpinner, animate: { rotate: 360 }, transition: {
|
|
1973
1978
|
duration: 2,
|
|
1974
1979
|
repeat: Infinity,
|
|
1975
1980
|
ease: 'linear'
|
|
1976
|
-
}, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1981
|
+
}, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.dot1, animate: {
|
|
1977
1982
|
scale: [1, 1.3, 1],
|
|
1978
1983
|
y: [0, -6, 0]
|
|
1979
1984
|
}, transition: {
|
|
@@ -1981,7 +1986,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1981
1986
|
repeat: Infinity,
|
|
1982
1987
|
ease: 'easeInOut',
|
|
1983
1988
|
delay: 0
|
|
1984
|
-
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1989
|
+
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.dot2, animate: {
|
|
1985
1990
|
scale: [1, 1.3, 1],
|
|
1986
1991
|
y: [0, -6, 0]
|
|
1987
1992
|
}, transition: {
|
|
@@ -1989,7 +1994,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1989
1994
|
repeat: Infinity,
|
|
1990
1995
|
ease: 'easeInOut',
|
|
1991
1996
|
delay: 0.5
|
|
1992
|
-
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1997
|
+
} }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.dot3, animate: {
|
|
1993
1998
|
scale: [1, 1.3, 1],
|
|
1994
1999
|
y: [0, -6, 0]
|
|
1995
2000
|
}, transition: {
|
|
@@ -1998,12 +2003,12 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1998
2003
|
ease: 'easeInOut',
|
|
1999
2004
|
delay: 1
|
|
2000
2005
|
} })] }));
|
|
2001
|
-
const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
2006
|
+
const renderSpinner = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.circleSpinner, animate: { rotate: 360 }, transition: {
|
|
2002
2007
|
duration: 1,
|
|
2003
2008
|
repeat: Infinity,
|
|
2004
2009
|
ease: 'linear'
|
|
2005
2010
|
} }));
|
|
2006
|
-
const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
2011
|
+
const renderPulse = () => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.pulseSpinner, animate: {
|
|
2007
2012
|
scale: [1, 1.2, 1],
|
|
2008
2013
|
opacity: [1, 0.7, 1]
|
|
2009
2014
|
}, transition: {
|
|
@@ -2022,10 +2027,10 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2022
2027
|
return renderDots();
|
|
2023
2028
|
}
|
|
2024
2029
|
};
|
|
2025
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$
|
|
2030
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: jsxRuntime.jsx(framerMotion.motion.p, { className: styles$l.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
|
|
2026
2031
|
duration: 0.4,
|
|
2027
2032
|
ease: 'easeOut'
|
|
2028
|
-
}, children: currentMessage }, currentMessage) })), showSparkles && (jsxRuntime.jsx("div", { className: styles$
|
|
2033
|
+
}, children: currentMessage }, currentMessage) })), showSparkles && (jsxRuntime.jsx("div", { className: styles$l.sparkleContainer, children: [...Array(4)].map((_, i) => (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$l.sparkle, animate: {
|
|
2029
2034
|
opacity: [0, 1, 0],
|
|
2030
2035
|
scale: [0.5, 1, 0.5],
|
|
2031
2036
|
rotate: [0, 180, 360]
|
|
@@ -2040,7 +2045,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2040
2045
|
} }, i))) }))] }));
|
|
2041
2046
|
};
|
|
2042
2047
|
|
|
2043
|
-
var styles$
|
|
2048
|
+
var styles$k = {"wrapper":"DecryptedText-module_wrapper__tuLvf","srOnly":"DecryptedText-module_srOnly__A-K2T"};
|
|
2044
2049
|
|
|
2045
2050
|
/**
|
|
2046
2051
|
* DecryptedText Component
|
|
@@ -2224,13 +2229,13 @@ const DecryptedText = ({ text, speed = 50, maxIterations = 10, sequential = fals
|
|
|
2224
2229
|
onMouseLeave: () => setIsHovering(false),
|
|
2225
2230
|
}
|
|
2226
2231
|
: {};
|
|
2227
|
-
return (jsxRuntime.jsxs(framerMotion.motion.span, { className: `${styles$
|
|
2232
|
+
return (jsxRuntime.jsxs(framerMotion.motion.span, { className: `${styles$k.wrapper} ${parentClassName}`, ref: containerRef, ...hoverProps, ...props, children: [jsxRuntime.jsx("span", { className: styles$k.srOnly, children: displayText }), jsxRuntime.jsx("span", { "aria-hidden": "true", children: displayText.split('').map((char, index) => {
|
|
2228
2233
|
const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;
|
|
2229
2234
|
return (jsxRuntime.jsx("span", { className: isRevealedOrDone ? className : encryptedClassName, children: char }, index));
|
|
2230
2235
|
}) })] }));
|
|
2231
2236
|
};
|
|
2232
2237
|
|
|
2233
|
-
var styles$
|
|
2238
|
+
var styles$j = {"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"};
|
|
2234
2239
|
|
|
2235
2240
|
/**
|
|
2236
2241
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -2297,11 +2302,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
|
|
|
2297
2302
|
itemIdsRef.current.splice(index, 1);
|
|
2298
2303
|
onChange(newValues);
|
|
2299
2304
|
};
|
|
2300
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2305
|
+
return (jsxRuntime.jsxs("div", { className: styles$j.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$j.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$j.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
2301
2306
|
duration: 0.3,
|
|
2302
2307
|
ease: "easeInOut",
|
|
2303
2308
|
layout: { duration: 0.2 }
|
|
2304
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
2309
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$j.inputWrapper, children: multiline ? (jsxRuntime.jsx("div", { style: inputStyle, children: jsxRuntime.jsx(TextArea, { label: "", value: value, onChange: (newValue) => handleChange(index, newValue), placeholder: placeholder, rows: rows, compact: true }) })) : (jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$j.input, style: inputStyle })) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$j.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, itemIdsRef.current[index]))) }) }), jsxRuntime.jsx(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$j.addButton, children: label })] }));
|
|
2305
2310
|
}
|
|
2306
2311
|
// Complex object array implementation
|
|
2307
2312
|
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
|
|
@@ -2326,14 +2331,14 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle,
|
|
|
2326
2331
|
// Generate key from all field values
|
|
2327
2332
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
2328
2333
|
};
|
|
2329
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2334
|
+
return (jsxRuntime.jsxs("div", { className: styles$j.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$j.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$j.arrayInputItem} ${fields.length > 1 ? styles$j.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
2330
2335
|
duration: 0.3,
|
|
2331
2336
|
ease: "easeInOut",
|
|
2332
2337
|
layout: { duration: 0.2 }
|
|
2333
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$
|
|
2338
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$j.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: field.multiline ? (jsxRuntime.jsx(TextArea, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, placeholder: field.placeholder, rows: field.rows, compact: true })) : (jsxRuntime.jsx(TextInput, { value: value[field.name] || '', onChange: (newValue) => handleChange(index, field.name, newValue), label: field.label, type: field.type, placeholder: field.placeholder })) }, field.name))) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$j.removeButton, children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }, generateKey(value, index)))) }) }), jsxRuntime.jsxs(Button, { variant: buttonVariant, size: "small", onClick: handleAdd, className: styles$j.addButton, children: ["Add ", label] })] }));
|
|
2334
2339
|
}
|
|
2335
2340
|
|
|
2336
|
-
var styles$
|
|
2341
|
+
var styles$i = {"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"};
|
|
2337
2342
|
|
|
2338
2343
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
2339
2344
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
@@ -2418,15 +2423,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
2418
2423
|
};
|
|
2419
2424
|
const getVariantClass = () => {
|
|
2420
2425
|
if (isSaving)
|
|
2421
|
-
return styles$
|
|
2426
|
+
return styles$i.primary;
|
|
2422
2427
|
if (isEditMode) {
|
|
2423
|
-
return hasUnsavedChanges ? styles$
|
|
2428
|
+
return hasUnsavedChanges ? styles$i.success : styles$i.secondary;
|
|
2424
2429
|
}
|
|
2425
|
-
return styles$
|
|
2430
|
+
return styles$i.primary;
|
|
2426
2431
|
};
|
|
2427
2432
|
const getIcon = () => {
|
|
2428
2433
|
if (isSaving) {
|
|
2429
|
-
return jsxRuntime.jsx("div", { className: styles$
|
|
2434
|
+
return jsxRuntime.jsx("div", { className: styles$i.loader });
|
|
2430
2435
|
}
|
|
2431
2436
|
if (isEditMode) {
|
|
2432
2437
|
return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
|
|
@@ -2441,14 +2446,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
2441
2446
|
}
|
|
2442
2447
|
return "Enter edit mode";
|
|
2443
2448
|
};
|
|
2444
|
-
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$
|
|
2449
|
+
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$i.fab} ${getVariantClass()} ${isMobile ? styles$i.draggable : ''} ${isDragging ? styles$i.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: {
|
|
2445
2450
|
type: "spring",
|
|
2446
2451
|
stiffness: 260,
|
|
2447
2452
|
damping: 20
|
|
2448
2453
|
}, children: getIcon() }));
|
|
2449
2454
|
};
|
|
2450
2455
|
|
|
2451
|
-
var styles$
|
|
2456
|
+
var styles$h = {"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"};
|
|
2452
2457
|
|
|
2453
2458
|
// Default filter options for backwards compatibility
|
|
2454
2459
|
const defaultFilterOptions = [
|
|
@@ -2641,93 +2646,52 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
2641
2646
|
return text || '';
|
|
2642
2647
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
2643
2648
|
const parts = text.split(regex);
|
|
2644
|
-
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$
|
|
2649
|
+
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$h.highlight, children: part }, index)) : (part));
|
|
2645
2650
|
};
|
|
2646
|
-
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$
|
|
2651
|
+
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$h.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$h.searchInputWrapper, children: [jsxRuntime.jsx(lucideReact.Search, { className: styles$h.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: handleKeyDown, onFocus: () => query.trim() && results.length > 0 && setIsDropdownOpen(true), placeholder: placeholder, className: styles$h.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$h.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsxRuntime.jsx(lucideReact.X, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$h.filterSelect, "aria-label": "Filter search results", children: filterOptions.map(option => (jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))) }))] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isDropdownOpen && (jsxRuntime.jsx(framerMotion.motion.div, { ref: resultsRef, id: "search-results", className: styles$h.resultsDropdown, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: { duration: 0.2 }, children: isLoading ? (jsxRuntime.jsxs("div", { className: styles$h.loadingState, children: [jsxRuntime.jsx("div", { className: styles$h.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$h.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$h.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
2647
2652
|
const Icon = entityIcons[type];
|
|
2648
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
2653
|
+
return (jsxRuntime.jsxs("div", { className: styles$h.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$h.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$h.groupIcon }), jsxRuntime.jsx("span", { className: styles$h.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$h.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$h.groupResults, children: groupResults.map((result) => {
|
|
2649
2654
|
const globalIndex = results.indexOf(result);
|
|
2650
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
2655
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$h.resultItem} ${highlightedIndex === globalIndex ? styles$h.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$h.resultContent, children: [jsxRuntime.jsx("div", { className: styles$h.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$h.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$h.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
2651
2656
|
}) })] }, type));
|
|
2652
2657
|
}) })) })) })] }));
|
|
2653
2658
|
};
|
|
2654
2659
|
|
|
2655
|
-
var styles$
|
|
2660
|
+
var styles$g = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","picker":"TimeInput-module_picker__9c6EI","error":"TimeInput-module_error__gJnpk","disabled":"TimeInput-module_disabled__wxiZ-"};
|
|
2656
2661
|
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
|
|
2670
|
-
|
|
2671
|
-
|
|
2672
|
-
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
|
|
2676
|
-
|
|
2677
|
-
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
if (cleanTime.length >= 3) {
|
|
2691
|
-
cleanTime = cleanTime.substring(0, 2) + ':' + cleanTime.substring(2);
|
|
2692
|
-
}
|
|
2693
|
-
}
|
|
2694
|
-
if (cleanTime.length === 3 && !cleanTime.includes(':')) {
|
|
2695
|
-
cleanTime = cleanTime.substring(0, 2) + ':' + cleanTime.substring(2);
|
|
2696
|
-
}
|
|
2697
|
-
else if (cleanTime.length === 4 && !cleanTime.includes(':')) {
|
|
2698
|
-
cleanTime = cleanTime.substring(0, 2) + ':' + cleanTime.substring(2);
|
|
2699
|
-
}
|
|
2700
|
-
if (cleanTime.includes(':')) {
|
|
2701
|
-
const parts = cleanTime.split(':');
|
|
2702
|
-
let hours = parts[0];
|
|
2703
|
-
let minutes = parts[1] || '';
|
|
2704
|
-
hours = hours.substring(0, 2);
|
|
2705
|
-
if (hours.length === 2) {
|
|
2706
|
-
const hourNum = parseInt(hours);
|
|
2707
|
-
if (hourNum > 23) {
|
|
2708
|
-
hours = '23';
|
|
2709
|
-
}
|
|
2710
|
-
}
|
|
2711
|
-
minutes = minutes.substring(0, 2);
|
|
2712
|
-
if (minutes.length === 2) {
|
|
2713
|
-
const minNum = parseInt(minutes);
|
|
2714
|
-
if (minNum > 59) {
|
|
2715
|
-
minutes = '59';
|
|
2716
|
-
}
|
|
2717
|
-
}
|
|
2718
|
-
cleanTime = hours + (minutes.length > 0 ? ':' + minutes : ':');
|
|
2719
|
-
}
|
|
2720
|
-
return cleanTime.substring(0, 5);
|
|
2721
|
-
};
|
|
2722
|
-
const handleTextChange = (inputValue) => {
|
|
2723
|
-
const formattedTime = formatTime24(inputValue);
|
|
2724
|
-
onChange(formattedTime);
|
|
2725
|
-
};
|
|
2726
|
-
const handleClockClick = () => {
|
|
2727
|
-
if (!disabled && !loading) {
|
|
2728
|
-
setShowPicker(true);
|
|
2729
|
-
}
|
|
2730
|
-
};
|
|
2662
|
+
const lightTheme = styles$A.createTheme({
|
|
2663
|
+
palette: {
|
|
2664
|
+
mode: 'light',
|
|
2665
|
+
primary: { main: '#3b82f6' },
|
|
2666
|
+
background: {
|
|
2667
|
+
default: '#f8fafc',
|
|
2668
|
+
paper: '#ffffff',
|
|
2669
|
+
},
|
|
2670
|
+
text: {
|
|
2671
|
+
primary: '#0f172a',
|
|
2672
|
+
secondary: '#475569',
|
|
2673
|
+
},
|
|
2674
|
+
},
|
|
2675
|
+
});
|
|
2676
|
+
const darkTheme = styles$A.createTheme({
|
|
2677
|
+
palette: {
|
|
2678
|
+
mode: 'dark',
|
|
2679
|
+
primary: { main: '#f5b829' },
|
|
2680
|
+
background: {
|
|
2681
|
+
default: '#010907',
|
|
2682
|
+
paper: '#0e1a19',
|
|
2683
|
+
},
|
|
2684
|
+
text: {
|
|
2685
|
+
primary: '#f1f5f9',
|
|
2686
|
+
secondary: '#cbd5e1',
|
|
2687
|
+
},
|
|
2688
|
+
},
|
|
2689
|
+
});
|
|
2690
|
+
function TimeInput({ label, value, onChange, error = false, success = false, loading = false, disabled = false, required = false, className = '', }) {
|
|
2691
|
+
const dayjsValue = value ? dayjs(`2000-01-01 ${value}`) : null;
|
|
2692
|
+
const isDark = typeof document !== 'undefined' &&
|
|
2693
|
+
!!document.documentElement.getAttribute('data-theme')?.includes('dark');
|
|
2694
|
+
const muiTheme = React.useMemo(() => (isDark ? darkTheme : lightTheme), [isDark]);
|
|
2731
2695
|
const getContainerClassName = () => {
|
|
2732
2696
|
const classes = [styles$g.timeInput];
|
|
2733
2697
|
if (error)
|
|
@@ -2742,7 +2706,36 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
2742
2706
|
classes.push(className);
|
|
2743
2707
|
return classes.join(' ');
|
|
2744
2708
|
};
|
|
2745
|
-
return (jsxRuntime.jsxs(
|
|
2709
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { className: styles$g.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$g.required, children: "*" })] })), jsxRuntime.jsx(styles$A.ThemeProvider, { theme: muiTheme, children: jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: jsxRuntime.jsx(MobileTimePicker.MobileTimePicker, { value: dayjsValue, onChange: (newValue) => {
|
|
2710
|
+
onChange(newValue ? newValue.format('HH:mm') : '');
|
|
2711
|
+
}, ampm: false, views: ['hours', 'minutes'], disabled: disabled || loading, slotProps: {
|
|
2712
|
+
textField: {
|
|
2713
|
+
size: 'small',
|
|
2714
|
+
fullWidth: true,
|
|
2715
|
+
className: styles$g.picker,
|
|
2716
|
+
sx: {
|
|
2717
|
+
'& .MuiPickersOutlinedInput-root': {
|
|
2718
|
+
fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
|
|
2719
|
+
fontSize: 'var(--font-size-lg)',
|
|
2720
|
+
borderRadius: 'var(--radius-lg)',
|
|
2721
|
+
color: 'var(--color-text) !important',
|
|
2722
|
+
'& .MuiPickersOutlinedInput-notchedOutline': {
|
|
2723
|
+
borderWidth: '2px !important',
|
|
2724
|
+
borderColor: 'var(--color-border) !important',
|
|
2725
|
+
},
|
|
2726
|
+
'&:hover .MuiPickersOutlinedInput-notchedOutline': {
|
|
2727
|
+
borderColor: 'var(--color-border-hover) !important',
|
|
2728
|
+
},
|
|
2729
|
+
'&.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
|
|
2730
|
+
borderColor: 'var(--color-primary) !important',
|
|
2731
|
+
},
|
|
2732
|
+
},
|
|
2733
|
+
'& .MuiIconButton-root': {
|
|
2734
|
+
color: 'var(--color-text-secondary) !important',
|
|
2735
|
+
},
|
|
2736
|
+
},
|
|
2737
|
+
},
|
|
2738
|
+
} }) }) })] }));
|
|
2746
2739
|
}
|
|
2747
2740
|
|
|
2748
2741
|
const ThemeContext = React.createContext(undefined);
|