@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.esm.js
CHANGED
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { motion, AnimatePresence, useMotionValue, useTransform, animate, LayoutGroup } from 'framer-motion';
|
|
3
|
-
import React, { useRef, useEffect, useCallback, useState, createContext, useContext,
|
|
3
|
+
import React, { useRef, useEffect, useCallback, useState, useMemo, createContext, useContext, Fragment as Fragment$1, memo } from 'react';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
|
-
import { X, Calendar as Calendar$1, ChevronDown, Search, Check, Edit, Folder, Users, Book, MessageSquare, UserPlus,
|
|
5
|
+
import { X, Calendar as Calendar$1, ChevronDown, Search, Check, Edit, Folder, Users, Book, MessageSquare, UserPlus, Sun, Moon, Info, Github, SquareKanban, ChevronRight, Plus, Trash2, GripVertical, Pencil, Download, Menu, ChevronLeft, Maximize, Share2, Pause, Play } from 'lucide-react';
|
|
6
|
+
import dayjs from 'dayjs';
|
|
7
|
+
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
|
|
8
|
+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
9
|
+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
10
|
+
import { createTheme, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
|
|
6
11
|
import * as d3 from 'd3';
|
|
7
12
|
|
|
8
|
-
var styles$
|
|
13
|
+
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"};
|
|
9
14
|
|
|
10
15
|
const SOUND_PACKS = {
|
|
11
16
|
digital: {
|
|
@@ -570,11 +575,11 @@ function useComponentSound(config, options) {
|
|
|
570
575
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, soundConfig, onClick, onMouseEnter, onFocus, ...rest }) => {
|
|
571
576
|
const { handlers } = useComponentSound(soundConfig);
|
|
572
577
|
const buttonClasses = [
|
|
573
|
-
styles$
|
|
574
|
-
styles$
|
|
575
|
-
styles$
|
|
576
|
-
fullWidth && styles$
|
|
577
|
-
loading && styles$
|
|
578
|
+
styles$z.button,
|
|
579
|
+
styles$z[variant],
|
|
580
|
+
styles$z[size],
|
|
581
|
+
fullWidth && styles$z.fullWidth,
|
|
582
|
+
loading && styles$z.loading,
|
|
578
583
|
className
|
|
579
584
|
].filter(Boolean).join(' ');
|
|
580
585
|
const handleClick = (e) => {
|
|
@@ -585,10 +590,10 @@ const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loadi
|
|
|
585
590
|
handlers.onMouseEnter?.();
|
|
586
591
|
onMouseEnter?.(e);
|
|
587
592
|
};
|
|
588
|
-
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 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$
|
|
593
|
+
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 }, onClick: handleClick, onMouseEnter: handleMouseEnter, onFocus: onFocus, ...motionProps, ...rest, children: [loading && jsx("span", { className: styles$z.spinner }), iconLeft && jsx("span", { className: styles$z.iconLeft, children: iconLeft }), children, iconRight && jsx("span", { className: styles$z.iconRight, children: iconRight })] }));
|
|
589
594
|
};
|
|
590
595
|
|
|
591
|
-
var styles$
|
|
596
|
+
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"};
|
|
592
597
|
|
|
593
598
|
/**
|
|
594
599
|
* Card Component
|
|
@@ -653,28 +658,28 @@ const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padd
|
|
|
653
658
|
onExpandChange?.(newExpanded);
|
|
654
659
|
};
|
|
655
660
|
const cardClasses = [
|
|
656
|
-
styles$
|
|
657
|
-
styles$
|
|
658
|
-
hoverable && styles$
|
|
659
|
-
clickable && styles$
|
|
660
|
-
!padding && styles$
|
|
661
|
-
expandable && styles$
|
|
661
|
+
styles$y.card,
|
|
662
|
+
styles$y[variant],
|
|
663
|
+
hoverable && styles$y.hoverable,
|
|
664
|
+
clickable && styles$y.clickable,
|
|
665
|
+
!padding && styles$y.noPadding,
|
|
666
|
+
expandable && styles$y.expandable,
|
|
662
667
|
className
|
|
663
668
|
].filter(Boolean).join(' ');
|
|
664
669
|
const renderHeader = () => {
|
|
665
670
|
if (header) {
|
|
666
|
-
return (jsxs("div", { className: styles$
|
|
671
|
+
return (jsxs("div", { className: styles$y.header, children: [jsx("div", { className: styles$y.headerContent, children: header }), expandable && (jsx("button", { className: styles$y.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$y.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
667
672
|
}
|
|
668
673
|
if (title || subtitle) {
|
|
669
|
-
return (jsxs("div", { className: styles$
|
|
674
|
+
return (jsxs("div", { className: styles$y.header, children: [jsxs("div", { className: styles$y.headerContent, children: [title && jsx("h3", { className: styles$y.title, children: title }), subtitle && jsx("p", { className: styles$y.subtitle, children: subtitle })] }), expandable && (jsx("button", { className: styles$y.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$y.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
670
675
|
}
|
|
671
676
|
return null;
|
|
672
677
|
};
|
|
673
|
-
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$
|
|
678
|
+
const cardContent = (jsxs(Fragment, { children: [image && (jsx("div", { className: styles$y.imageContainer, children: jsx("img", { src: image, alt: imageAlt, className: styles$y.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$y.expandableContent, children: [children && (jsx("div", { className: padding ? styles$y.body : undefined, children: children })), footer && jsx("div", { className: styles$y.footer, children: footer })] }, "content")) })] }));
|
|
674
679
|
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 }));
|
|
675
680
|
};
|
|
676
681
|
|
|
677
|
-
var styles$
|
|
682
|
+
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"};
|
|
678
683
|
|
|
679
684
|
/**
|
|
680
685
|
* EmptyState Component
|
|
@@ -711,11 +716,11 @@ var styles$y = {"wrapper":"EmptyState-module_wrapper__h3Y2E","compact":"EmptySta
|
|
|
711
716
|
* @returns {JSX.Element} The rendered EmptyState component
|
|
712
717
|
*/
|
|
713
718
|
const EmptyState = ({ icon, title, message, action, size = 'default', }) => {
|
|
714
|
-
const wrapperClass = [styles$
|
|
715
|
-
return (jsxs("div", { className: wrapperClass, children: [icon && jsx("div", { className: styles$
|
|
719
|
+
const wrapperClass = [styles$x.wrapper, styles$x[size]].filter(Boolean).join(' ');
|
|
720
|
+
return (jsxs("div", { className: wrapperClass, children: [icon && jsx("div", { className: styles$x.icon, children: icon }), title && jsx("h3", { className: styles$x.title, children: title }), jsx("p", { className: styles$x.message, children: message }), action && jsx("div", { className: styles$x.action, children: action })] }));
|
|
716
721
|
};
|
|
717
722
|
|
|
718
|
-
var styles$
|
|
723
|
+
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"};
|
|
719
724
|
|
|
720
725
|
/**
|
|
721
726
|
* Modal Component
|
|
@@ -769,16 +774,16 @@ const Modal = ({ open, title, onClose, children, size = 'default', actions, padd
|
|
|
769
774
|
if (typeof document === 'undefined')
|
|
770
775
|
return null;
|
|
771
776
|
const dialogClass = [
|
|
772
|
-
styles$
|
|
773
|
-
size === 'compact' && styles$
|
|
774
|
-
size === 'wide' && styles$
|
|
777
|
+
styles$w.dialog,
|
|
778
|
+
size === 'compact' && styles$w.dialogCompact,
|
|
779
|
+
size === 'wide' && styles$w.dialogWide,
|
|
775
780
|
]
|
|
776
781
|
.filter(Boolean)
|
|
777
782
|
.join(' ');
|
|
778
|
-
return createPortal(jsx(AnimatePresence, { children: open && (jsx(motion.div, { className: styles$
|
|
783
|
+
return createPortal(jsx(AnimatePresence, { children: open && (jsx(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: jsxs(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: [jsxs("div", { className: styles$w.header, children: [jsx("span", { className: styles$w.title, children: title }), actions && jsx("div", { className: styles$w.headerActions, children: actions }), jsx("button", { className: styles$w.closeButton, onClick: onClose, "aria-label": "Close modal", type: "button", children: jsx(X, { size: 16 }) })] }), jsx("div", { className: padding ? styles$w.body : styles$w.bodyFlush, children: children })] }) })) }), document.body);
|
|
779
784
|
};
|
|
780
785
|
|
|
781
|
-
var styles$
|
|
786
|
+
var styles$v = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
782
787
|
|
|
783
788
|
/**
|
|
784
789
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -823,13 +828,13 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
823
828
|
checkboxRef.current.indeterminate = indeterminate;
|
|
824
829
|
}
|
|
825
830
|
}, [indeterminate]);
|
|
826
|
-
return (jsxs("label", { className: styles$
|
|
831
|
+
return (jsxs("label", { className: styles$v.checkboxLabel, children: [jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => {
|
|
827
832
|
const isChecked = e.target.checked;
|
|
828
833
|
onChange(isChecked);
|
|
829
834
|
if (soundConfig?.onClick !== false) {
|
|
830
835
|
playSound('toggle');
|
|
831
836
|
}
|
|
832
|
-
}, className: styles$
|
|
837
|
+
}, className: styles$v.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsx("span", { className: styles$v.checkboxText, children: label })] }));
|
|
833
838
|
};
|
|
834
839
|
|
|
835
840
|
const formatDateToEuropean = (date) => {
|
|
@@ -860,7 +865,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
860
865
|
return '';
|
|
861
866
|
};
|
|
862
867
|
|
|
863
|
-
var styles$
|
|
868
|
+
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"};
|
|
864
869
|
|
|
865
870
|
/**
|
|
866
871
|
* DateInput component - European format date picker with manual input support
|
|
@@ -949,19 +954,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
949
954
|
}
|
|
950
955
|
};
|
|
951
956
|
const getClassName = () => {
|
|
952
|
-
const classes = [styles$
|
|
957
|
+
const classes = [styles$u.dateInput];
|
|
953
958
|
if (error)
|
|
954
|
-
classes.push(styles$
|
|
959
|
+
classes.push(styles$u.error);
|
|
955
960
|
if (success)
|
|
956
|
-
classes.push(styles$
|
|
961
|
+
classes.push(styles$u.success);
|
|
957
962
|
if (loading)
|
|
958
|
-
classes.push(styles$
|
|
963
|
+
classes.push(styles$u.loading);
|
|
959
964
|
return classes.join(' ');
|
|
960
965
|
};
|
|
961
|
-
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$
|
|
966
|
+
return (jsxs("div", { className: getClassName(), children: [jsx("label", { className: styles$u.label, children: label }), jsxs("div", { className: styles$u.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$u.textInput, disabled: disabled || loading, ...handlers }), jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$u.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsx(Calendar$1, {}) }), jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$u.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
962
967
|
}
|
|
963
968
|
|
|
964
|
-
var styles$
|
|
969
|
+
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"};
|
|
965
970
|
|
|
966
971
|
/**
|
|
967
972
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -1066,23 +1071,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
1066
1071
|
}
|
|
1067
1072
|
};
|
|
1068
1073
|
const getTriggerClassName = () => {
|
|
1069
|
-
const classes = [styles$
|
|
1074
|
+
const classes = [styles$t.dropdownTrigger];
|
|
1070
1075
|
if (isOpen)
|
|
1071
|
-
classes.push(styles$
|
|
1076
|
+
classes.push(styles$t.open);
|
|
1072
1077
|
if (loading)
|
|
1073
|
-
classes.push(styles$
|
|
1078
|
+
classes.push(styles$t.loading);
|
|
1074
1079
|
if (error)
|
|
1075
|
-
classes.push(styles$
|
|
1080
|
+
classes.push(styles$t.error);
|
|
1076
1081
|
return classes.join(' ');
|
|
1077
1082
|
};
|
|
1078
|
-
return (jsxs("div", { className: styles$
|
|
1083
|
+
return (jsxs("div", { className: styles$t.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$t.dropdownValue} ${!displayValue ? styles$t.placeholder : ''}`, children: displayValue || placeholder }), jsx(ChevronDown, { className: styles$t.dropdownArrow })] }), jsx(AnimatePresence, { children: isOpen && (jsxs(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: [jsxs("div", { className: styles$t.dropdownSearch, children: [jsx(Search, { className: styles$t.searchIcon }), jsx("input", { ref: inputRef, type: "text", className: styles$t.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxs("div", { className: styles$t.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
1079
1084
|
const isSelected = value === opt.value;
|
|
1080
1085
|
const isHighlighted = highlightedIndex === index;
|
|
1081
|
-
return (jsxs(motion.button, { type: "button", className: `${styles$
|
|
1082
|
-
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$
|
|
1086
|
+
return (jsxs(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: [jsx("span", { children: opt.label }), isSelected && jsx(Check, { className: styles$t.checkIcon })] }, `${opt.value}-${index}`));
|
|
1087
|
+
}), allOptions.length === 0 && (jsx(motion.div, { className: styles$t.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
1083
1088
|
}
|
|
1084
1089
|
|
|
1085
|
-
var styles$
|
|
1090
|
+
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"};
|
|
1086
1091
|
|
|
1087
1092
|
/**
|
|
1088
1093
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -1120,26 +1125,26 @@ var styles$t = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
1120
1125
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false, soundConfig, className }) {
|
|
1121
1126
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1122
1127
|
const getClassName = () => {
|
|
1123
|
-
const classes = [styles$
|
|
1128
|
+
const classes = [styles$s.selectInput];
|
|
1124
1129
|
if (error)
|
|
1125
|
-
classes.push(styles$
|
|
1130
|
+
classes.push(styles$s.error);
|
|
1126
1131
|
if (success)
|
|
1127
|
-
classes.push(styles$
|
|
1132
|
+
classes.push(styles$s.success);
|
|
1128
1133
|
if (loading)
|
|
1129
|
-
classes.push(styles$
|
|
1134
|
+
classes.push(styles$s.loading);
|
|
1130
1135
|
return classes.join(' ');
|
|
1131
1136
|
};
|
|
1132
|
-
return (jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$
|
|
1137
|
+
return (jsxs("div", { className: `${getClassName()}${className ? ` ${className}` : ''}`, children: [jsxs("label", { children: [label, required && jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxs("div", { className: styles$s.selectWrapper, children: [jsxs("select", { value: value, onChange: e => {
|
|
1133
1138
|
playSound('click');
|
|
1134
1139
|
onChange(e.target.value);
|
|
1135
1140
|
}, disabled: disabled || loading, required: required, ...handlers, children: [jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
1136
1141
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
1137
1142
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
1138
1143
|
return (jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
1139
|
-
})] }), jsx(ChevronDown, { className: styles$
|
|
1144
|
+
})] }), jsx(ChevronDown, { className: styles$s.selectIcon })] })] }));
|
|
1140
1145
|
}
|
|
1141
1146
|
|
|
1142
|
-
var styles$
|
|
1147
|
+
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-"};
|
|
1143
1148
|
|
|
1144
1149
|
/**
|
|
1145
1150
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -1174,38 +1179,38 @@ var styles$s = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
1174
1179
|
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false, className = "" }) {
|
|
1175
1180
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
1176
1181
|
const getContainerClassName = () => {
|
|
1177
|
-
const classes = [styles$
|
|
1182
|
+
const classes = [styles$r.textareaContainer];
|
|
1178
1183
|
if (error)
|
|
1179
|
-
classes.push(styles$
|
|
1184
|
+
classes.push(styles$r.error);
|
|
1180
1185
|
if (success)
|
|
1181
|
-
classes.push(styles$
|
|
1186
|
+
classes.push(styles$r.success);
|
|
1182
1187
|
if (loading)
|
|
1183
|
-
classes.push(styles$
|
|
1188
|
+
classes.push(styles$r.loading);
|
|
1184
1189
|
if (focusMode)
|
|
1185
|
-
classes.push(styles$
|
|
1190
|
+
classes.push(styles$r.focusMode);
|
|
1186
1191
|
if (compact)
|
|
1187
|
-
classes.push(styles$
|
|
1192
|
+
classes.push(styles$r.compact);
|
|
1188
1193
|
if (className)
|
|
1189
1194
|
classes.push(className);
|
|
1190
1195
|
return classes.join(' ');
|
|
1191
1196
|
};
|
|
1192
1197
|
const getCharCountClassName = () => {
|
|
1193
1198
|
if (!maxLength)
|
|
1194
|
-
return styles$
|
|
1195
|
-
const classes = [styles$
|
|
1199
|
+
return styles$r.characterCount;
|
|
1200
|
+
const classes = [styles$r.characterCount];
|
|
1196
1201
|
const percentage = (value.length / maxLength) * 100;
|
|
1197
1202
|
if (percentage >= 100) {
|
|
1198
|
-
classes.push(styles$
|
|
1203
|
+
classes.push(styles$r.atLimit);
|
|
1199
1204
|
}
|
|
1200
1205
|
else if (percentage >= 80) {
|
|
1201
|
-
classes.push(styles$
|
|
1206
|
+
classes.push(styles$r.nearLimit);
|
|
1202
1207
|
}
|
|
1203
1208
|
return classes.join(' ');
|
|
1204
1209
|
};
|
|
1205
|
-
return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$
|
|
1210
|
+
return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { htmlFor: textareaId, className: styles$r.textareaLabel, children: [label, required && jsx("span", { className: styles$r.requiredIndicator, children: "*" })] })), 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 && (jsxs("div", { className: getCharCountClassName(), children: [jsx("span", { children: value.length }), jsx("span", { style: { opacity: 0.7 }, children: " / " }), jsx("span", { children: maxLength })] }))] }));
|
|
1206
1211
|
}
|
|
1207
1212
|
|
|
1208
|
-
var styles$
|
|
1213
|
+
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"};
|
|
1209
1214
|
|
|
1210
1215
|
/**
|
|
1211
1216
|
* TextInput component - A versatile text input field with label and error handling
|
|
@@ -1242,21 +1247,21 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1242
1247
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1243
1248
|
const prevValueRef = React.useRef(value);
|
|
1244
1249
|
const getContainerClassName = () => {
|
|
1245
|
-
const classes = [styles$
|
|
1250
|
+
const classes = [styles$q.textInput];
|
|
1246
1251
|
if (success)
|
|
1247
|
-
classes.push(styles$
|
|
1252
|
+
classes.push(styles$q.success);
|
|
1248
1253
|
if (loading)
|
|
1249
|
-
classes.push(styles$
|
|
1254
|
+
classes.push(styles$q.loading);
|
|
1250
1255
|
if (icon)
|
|
1251
|
-
classes.push(styles$
|
|
1256
|
+
classes.push(styles$q.withIcon);
|
|
1252
1257
|
if (actionButton)
|
|
1253
|
-
classes.push(styles$
|
|
1258
|
+
classes.push(styles$q.withAction);
|
|
1254
1259
|
return classes.join(' ');
|
|
1255
1260
|
};
|
|
1256
1261
|
React.useEffect(() => {
|
|
1257
1262
|
prevValueRef.current = value;
|
|
1258
1263
|
}, [value]);
|
|
1259
|
-
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$
|
|
1264
|
+
return (jsxs("div", { className: getContainerClassName(), children: [jsxs("label", { htmlFor: inputId, children: [label, required && jsx("span", { className: styles$q.required, children: "*" })] }), jsxs("div", { style: { position: 'relative' }, children: [icon && jsx("div", { className: styles$q.inputIcon, children: icon }), jsx("input", { id: inputId, type: type, value: value, onChange: (e) => {
|
|
1260
1265
|
const newValue = e.target.value;
|
|
1261
1266
|
const oldValue = prevValueRef.current;
|
|
1262
1267
|
onChange(newValue);
|
|
@@ -1272,13 +1277,13 @@ function TextInput({ label, value, onChange, type = "text", onBlur, placeholder,
|
|
|
1272
1277
|
if (error && soundConfig?.onError) {
|
|
1273
1278
|
playSound(typeof soundConfig.onError === 'string' ? soundConfig.onError : 'error');
|
|
1274
1279
|
}
|
|
1275
|
-
}, onBlur: onBlur, placeholder: placeholder, className: error ? styles$
|
|
1280
|
+
}, 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 && (jsx("button", { type: "button", className: styles$q.actionButton, onClick: () => {
|
|
1276
1281
|
handlers.onClick?.();
|
|
1277
1282
|
actionButton.onClick();
|
|
1278
|
-
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$
|
|
1283
|
+
}, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsx("span", { id: `${inputId}-error`, className: styles$q.errorMessage, children: error }))] }));
|
|
1279
1284
|
}
|
|
1280
1285
|
|
|
1281
|
-
var styles$
|
|
1286
|
+
var styles$p = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
1282
1287
|
|
|
1283
1288
|
/**
|
|
1284
1289
|
* Toggle Component
|
|
@@ -1339,7 +1344,7 @@ function Toggle(props) {
|
|
|
1339
1344
|
justifyContent: 'center',
|
|
1340
1345
|
...style
|
|
1341
1346
|
};
|
|
1342
|
-
return (jsxs("div", { className: `${styles$
|
|
1347
|
+
return (jsxs("div", { className: `${styles$p.toggleContainer} ${className || ''}`, children: [jsxs(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: () => {
|
|
1343
1348
|
if (!isOn) {
|
|
1344
1349
|
// Already on left
|
|
1345
1350
|
if (enableCelebration) {
|
|
@@ -1354,7 +1359,7 @@ function Toggle(props) {
|
|
|
1354
1359
|
playSound('toggle');
|
|
1355
1360
|
}
|
|
1356
1361
|
onToggle(false);
|
|
1357
|
-
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsx(motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxs(motion.button, { ref: rightButtonRef, className: `${styles$
|
|
1362
|
+
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsx(motion.div, { animate: { scale: !isOn ? 1.1 : 1, rotate: !isOn ? [0, -5, 5, 0] : 0 }, transition: { duration: 0.3 }, children: leftIcon }), leftLabel] }), jsxs(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: () => {
|
|
1358
1363
|
if (isOn) {
|
|
1359
1364
|
// Already on right
|
|
1360
1365
|
if (enableCelebration) {
|
|
@@ -1372,7 +1377,7 @@ function Toggle(props) {
|
|
|
1372
1377
|
}, onMouseEnter: () => handlers.onMouseEnter?.(), style: buttonStyle, children: [jsx(motion.div, { animate: { scale: isOn ? 1.1 : 1, rotate: isOn ? [0, 5, -5, 0] : 0 }, transition: { duration: 0.3 }, children: rightIcon }), rightLabel] })] }));
|
|
1373
1378
|
}
|
|
1374
1379
|
|
|
1375
|
-
var styles$
|
|
1380
|
+
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"};
|
|
1376
1381
|
|
|
1377
1382
|
/**
|
|
1378
1383
|
* NumberStepper Component
|
|
@@ -1559,32 +1564,32 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
1559
1564
|
setDisplayValue(finalValue);
|
|
1560
1565
|
}, [displayValue, min, max, step, onChange]);
|
|
1561
1566
|
const containerClasses = [
|
|
1562
|
-
styles$
|
|
1563
|
-
styles$
|
|
1564
|
-
styles$
|
|
1565
|
-
layout === 'vertical' && styles$
|
|
1566
|
-
disabled && styles$
|
|
1567
|
+
styles$o.container,
|
|
1568
|
+
styles$o[size],
|
|
1569
|
+
styles$o[variant],
|
|
1570
|
+
layout === 'vertical' && styles$o.vertical,
|
|
1571
|
+
disabled && styles$o.disabled,
|
|
1567
1572
|
className
|
|
1568
1573
|
].filter(Boolean).join(' ');
|
|
1569
1574
|
// Merge custom styles with hover states
|
|
1570
1575
|
const [isButtonHovered, setIsButtonHovered] = useState(null);
|
|
1571
1576
|
const isDecrementDisabled = disabled || value <= min;
|
|
1572
1577
|
const isIncrementDisabled = disabled || value >= max;
|
|
1573
|
-
const stepperContent = (jsxs("div", { className: styles$
|
|
1578
|
+
const stepperContent = (jsxs("div", { className: styles$o.stepper, style: customStyles.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, ...handlers, children: [jsx(motion.button, { className: styles$o.button, style: {
|
|
1574
1579
|
...customStyles.button,
|
|
1575
1580
|
...(isButtonHovered === 'decrement' && customStyles.buttonHover)
|
|
1576
|
-
}, 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 ? (jsx("span", { className: styles$
|
|
1581
|
+
}, 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 ? (jsx("span", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, children: "\u2212" })) : (jsx("svg", { className: styles$o.buttonIcon, style: customStyles.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$o.valueContainer, style: customStyles.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$o.valueWrapper, children: 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) }) }), jsx(motion.button, { className: styles$o.button, style: {
|
|
1577
1582
|
...customStyles.button,
|
|
1578
1583
|
...(isButtonHovered === 'increment' && customStyles.buttonHover)
|
|
1579
|
-
}, 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 ? (jsx("span", { className: styles$
|
|
1584
|
+
}, 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 ? (jsx("span", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, children: "+" })) : (jsx("svg", { className: styles$o.buttonIcon, style: customStyles.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }))) })] }));
|
|
1580
1585
|
// For custom variant with horizontal layout, render differently
|
|
1581
1586
|
if (variant === 'custom' && (label || icon)) {
|
|
1582
|
-
return (jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxs("div", { className: styles$
|
|
1587
|
+
return (jsxs("div", { className: containerClasses, style: { ...customStyles.container, display: 'flex', alignItems: 'center' }, children: [jsxs("div", { className: styles$o.header, style: { ...customStyles.header, flex: 1, marginBottom: 0 }, children: [icon && jsx("span", { className: styles$o.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$o.label, style: customStyles.label, children: label })] }), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$o.limits, style: customStyles.limits, children: [jsx("span", { className: styles$o.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$o.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1583
1588
|
}
|
|
1584
|
-
return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$
|
|
1589
|
+
return (jsxs("div", { className: containerClasses, style: customStyles.container, children: [(label || icon) && (jsxs("div", { className: styles$o.header, style: customStyles.header, children: [icon && jsx("span", { className: styles$o.icon, style: customStyles.icon, children: icon }), label && jsx("label", { className: styles$o.label, style: customStyles.label, children: label })] })), stepperContent, !hideLimits && (min !== -Infinity || max !== Infinity) && (jsxs("div", { className: styles$o.limits, style: customStyles.limits, children: [jsx("span", { className: styles$o.limit, children: min !== -Infinity && `Min: ${min}` }), jsx("span", { className: styles$o.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
1585
1590
|
};
|
|
1586
1591
|
|
|
1587
|
-
var styles$
|
|
1592
|
+
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"};
|
|
1588
1593
|
|
|
1589
1594
|
/**
|
|
1590
1595
|
* ToggleButton Component
|
|
@@ -1623,18 +1628,18 @@ var styles$o = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
1623
1628
|
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 }) => {
|
|
1624
1629
|
const { handlers, playSound } = useComponentSound(soundConfig);
|
|
1625
1630
|
const buttonClasses = [
|
|
1626
|
-
styles$
|
|
1627
|
-
styles$
|
|
1628
|
-
styles$
|
|
1629
|
-
active && styles$
|
|
1630
|
-
active && styles$
|
|
1631
|
-
disabled && styles$
|
|
1632
|
-
animation !== 'none' && styles$
|
|
1631
|
+
styles$n.button,
|
|
1632
|
+
styles$n[size],
|
|
1633
|
+
styles$n[variant],
|
|
1634
|
+
active && styles$n.active,
|
|
1635
|
+
active && styles$n[`active-${activeColor}`],
|
|
1636
|
+
disabled && styles$n.disabled,
|
|
1637
|
+
animation !== 'none' && styles$n[`animation-${animation}`],
|
|
1633
1638
|
className
|
|
1634
1639
|
].filter(Boolean).join(' ');
|
|
1635
1640
|
const labelClasses = [
|
|
1636
|
-
styles$
|
|
1637
|
-
hideLabelOnMobile && styles$
|
|
1641
|
+
styles$n.label,
|
|
1642
|
+
hideLabelOnMobile && styles$n.hideMobile
|
|
1638
1643
|
].filter(Boolean).join(' ');
|
|
1639
1644
|
const iconVariants = {
|
|
1640
1645
|
scale: {
|
|
@@ -1698,10 +1703,10 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1698
1703
|
return (jsxs(motion.button, { className: buttonClasses, style: dynamicStyle, onClick: () => {
|
|
1699
1704
|
playSound('toggle');
|
|
1700
1705
|
onClick();
|
|
1701
|
-
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsx(motion.div, { className: styles$
|
|
1706
|
+
}, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, ...handlers, children: [jsx(motion.div, { className: styles$n.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxs("div", { className: styles$n.content, children: [icon && (jsx(motion.div, { className: styles$n.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsx("span", { className: styles$n.icon, children: icon })) : (jsx("div", { className: styles$n.icon, children: icon })) })), label && jsx("span", { className: labelClasses, children: label }), jsx(AnimatePresence, { children: showCheckmark && active && (jsx(motion.div, { className: styles$n.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$n.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1702
1707
|
};
|
|
1703
1708
|
|
|
1704
|
-
var styles$
|
|
1709
|
+
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"};
|
|
1705
1710
|
|
|
1706
1711
|
/**
|
|
1707
1712
|
* Slider component - A beautiful, animated range input
|
|
@@ -1789,16 +1794,16 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1789
1794
|
setShowTooltipState(false);
|
|
1790
1795
|
};
|
|
1791
1796
|
const dynamicColor = getDynamicColor();
|
|
1792
|
-
const sizeClass = styles$
|
|
1793
|
-
const stateClass = disabled ? styles$
|
|
1797
|
+
const sizeClass = styles$m[`size-${size}`];
|
|
1798
|
+
const stateClass = disabled ? styles$m.disabled : loading ? styles$m.loading : '';
|
|
1794
1799
|
if (loading) {
|
|
1795
|
-
return (jsxs("div", { className: `${styles$
|
|
1800
|
+
return (jsxs("div", { className: `${styles$m.slider} ${sizeClass} ${styles$m.loading} ${className}`, style: style, children: [label && jsx("label", { className: styles$m.label, children: label }), jsx("div", { className: styles$m.loadingTrack, children: jsx(motion.div, { className: styles$m.loadingIndicator, animate: { x: ['-100%', '200%'] }, transition: {
|
|
1796
1801
|
repeat: Infinity,
|
|
1797
1802
|
duration: 1.5,
|
|
1798
1803
|
ease: "easeInOut"
|
|
1799
1804
|
} }) })] }));
|
|
1800
1805
|
}
|
|
1801
|
-
return (jsxs("div", { className: `${styles$
|
|
1806
|
+
return (jsxs("div", { className: `${styles$m.slider} ${sizeClass} ${stateClass} ${className}`, style: style, children: [label && (jsx(motion.label, { className: styles$m.label, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { duration: 0.3 }, children: label })), jsxs(motion.div, { className: styles$m.sliderContainer, ref: sliderRef, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, whileHover: { scale: 1.02 }, transition: { duration: 0.1 }, children: [jsx(motion.div, { className: styles$m.track, whileHover: { height: 8, marginTop: -1 }, transition: { duration: 0.1 }, children: jsx(motion.div, { className: styles$m.fill, style: {
|
|
1802
1807
|
width: `${percentage}%`,
|
|
1803
1808
|
backgroundColor: dynamicColor
|
|
1804
1809
|
}, initial: { width: 0 }, animate: { width: `${percentage}%` }, transition: {
|
|
@@ -1808,7 +1813,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1808
1813
|
damping: 30
|
|
1809
1814
|
}, whileHover: {
|
|
1810
1815
|
boxShadow: `inset 0 0 0 1px rgba(255,255,255,0.2)`
|
|
1811
|
-
} }) }), jsx("input", { type: "range", min: min, max: max, step: step, value: value, onChange: handleChange, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...handlers, className: styles$
|
|
1816
|
+
} }) }), 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 }), jsx(motion.div, { className: styles$m.thumb, style: {
|
|
1812
1817
|
left: `${percentage}%`,
|
|
1813
1818
|
backgroundColor: dynamicColor,
|
|
1814
1819
|
borderColor: colors.thumb || dynamicColor
|
|
@@ -1825,14 +1830,14 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1825
1830
|
}, whileHover: {
|
|
1826
1831
|
scale: 1.1,
|
|
1827
1832
|
transition: { duration: 0.1 }
|
|
1828
|
-
}, children: isDragging && (jsx(motion.div, { className: styles$
|
|
1833
|
+
}, children: isDragging && (jsx(motion.div, { className: styles$m.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$m.tooltip, style: {
|
|
1829
1834
|
left: `${percentage}%`,
|
|
1830
1835
|
backgroundColor: dynamicColor
|
|
1831
|
-
}, 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$
|
|
1836
|
+
}, 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$m.tooltipArrow, style: { borderTopColor: dynamicColor } })] })) })] }), showValue && (jsx(motion.div, { className: styles$m.valueDisplay, style: { color: dynamicColor }, initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
|
|
1832
1837
|
duration: 0.2,
|
|
1833
1838
|
type: "spring",
|
|
1834
1839
|
stiffness: 300
|
|
1835
|
-
}, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$
|
|
1840
|
+
}, children: formatValue(value) }, value)), labels.length > 0 && (jsx("div", { className: styles$m.labelsContainer, children: labels.map((labelConfig, index) => {
|
|
1836
1841
|
let position = 0;
|
|
1837
1842
|
if (labelConfig.position === 'start')
|
|
1838
1843
|
position = 0;
|
|
@@ -1840,7 +1845,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1840
1845
|
position = 100;
|
|
1841
1846
|
else if (typeof labelConfig.position === 'number')
|
|
1842
1847
|
position = labelConfig.position;
|
|
1843
|
-
return (jsx(motion.div, { className: styles$
|
|
1848
|
+
return (jsx(motion.div, { className: styles$m.labelItem, style: {
|
|
1844
1849
|
left: `${position}%`,
|
|
1845
1850
|
color: labelConfig.color
|
|
1846
1851
|
}, initial: { opacity: 0, y: 5 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
@@ -1853,7 +1858,7 @@ function Slider({ value, onChange, min = 0, max = 100, step = 1, label, showValu
|
|
|
1853
1858
|
}) }))] }));
|
|
1854
1859
|
}
|
|
1855
1860
|
|
|
1856
|
-
var styles$
|
|
1861
|
+
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"};
|
|
1857
1862
|
|
|
1858
1863
|
const defaultMessages = [
|
|
1859
1864
|
'Loading your content...',
|
|
@@ -1937,22 +1942,22 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1937
1942
|
}
|
|
1938
1943
|
}, [currentMessageIndex, message, messagesToUse, showMessage]);
|
|
1939
1944
|
const containerClasses = [
|
|
1940
|
-
styles$
|
|
1941
|
-
styles$
|
|
1942
|
-
styles$
|
|
1943
|
-
fullScreen && styles$
|
|
1944
|
-
overlay && styles$
|
|
1945
|
+
styles$l.loadingContainer,
|
|
1946
|
+
styles$l[size],
|
|
1947
|
+
styles$l[variant],
|
|
1948
|
+
fullScreen && styles$l.fullScreen,
|
|
1949
|
+
overlay && styles$l.overlay,
|
|
1945
1950
|
className
|
|
1946
1951
|
].filter(Boolean).join(' ');
|
|
1947
1952
|
const customStyle = {
|
|
1948
1953
|
...(color && { '--spinner-color': color }),
|
|
1949
1954
|
...(backgroundColor && { '--spinner-background': backgroundColor }),
|
|
1950
1955
|
};
|
|
1951
|
-
const renderDots = () => (jsxs(motion.div, { className: styles$
|
|
1956
|
+
const renderDots = () => (jsxs(motion.div, { className: styles$l.dotsSpinner, animate: { rotate: 360 }, transition: {
|
|
1952
1957
|
duration: 2,
|
|
1953
1958
|
repeat: Infinity,
|
|
1954
1959
|
ease: 'linear'
|
|
1955
|
-
}, children: [jsx(motion.div, { className: styles$
|
|
1960
|
+
}, children: [jsx(motion.div, { className: styles$l.dot1, animate: {
|
|
1956
1961
|
scale: [1, 1.3, 1],
|
|
1957
1962
|
y: [0, -6, 0]
|
|
1958
1963
|
}, transition: {
|
|
@@ -1960,7 +1965,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1960
1965
|
repeat: Infinity,
|
|
1961
1966
|
ease: 'easeInOut',
|
|
1962
1967
|
delay: 0
|
|
1963
|
-
} }), jsx(motion.div, { className: styles$
|
|
1968
|
+
} }), jsx(motion.div, { className: styles$l.dot2, animate: {
|
|
1964
1969
|
scale: [1, 1.3, 1],
|
|
1965
1970
|
y: [0, -6, 0]
|
|
1966
1971
|
}, transition: {
|
|
@@ -1968,7 +1973,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1968
1973
|
repeat: Infinity,
|
|
1969
1974
|
ease: 'easeInOut',
|
|
1970
1975
|
delay: 0.5
|
|
1971
|
-
} }), jsx(motion.div, { className: styles$
|
|
1976
|
+
} }), jsx(motion.div, { className: styles$l.dot3, animate: {
|
|
1972
1977
|
scale: [1, 1.3, 1],
|
|
1973
1978
|
y: [0, -6, 0]
|
|
1974
1979
|
}, transition: {
|
|
@@ -1977,12 +1982,12 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
1977
1982
|
ease: 'easeInOut',
|
|
1978
1983
|
delay: 1
|
|
1979
1984
|
} })] }));
|
|
1980
|
-
const renderSpinner = () => (jsx(motion.div, { className: styles$
|
|
1985
|
+
const renderSpinner = () => (jsx(motion.div, { className: styles$l.circleSpinner, animate: { rotate: 360 }, transition: {
|
|
1981
1986
|
duration: 1,
|
|
1982
1987
|
repeat: Infinity,
|
|
1983
1988
|
ease: 'linear'
|
|
1984
1989
|
} }));
|
|
1985
|
-
const renderPulse = () => (jsx(motion.div, { className: styles$
|
|
1990
|
+
const renderPulse = () => (jsx(motion.div, { className: styles$l.pulseSpinner, animate: {
|
|
1986
1991
|
scale: [1, 1.2, 1],
|
|
1987
1992
|
opacity: [1, 0.7, 1]
|
|
1988
1993
|
}, transition: {
|
|
@@ -2001,10 +2006,10 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2001
2006
|
return renderDots();
|
|
2002
2007
|
}
|
|
2003
2008
|
};
|
|
2004
|
-
return (jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsx(AnimatePresence, { mode: "wait", children: jsx(motion.p, { className: styles$
|
|
2009
|
+
return (jsxs("div", { className: containerClasses, style: customStyle, children: [renderSpinnerVariant(), showMessage && (jsx(AnimatePresence, { mode: "wait", children: jsx(motion.p, { className: styles$l.loadingText, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -10 }, transition: {
|
|
2005
2010
|
duration: 0.4,
|
|
2006
2011
|
ease: 'easeOut'
|
|
2007
|
-
}, children: currentMessage }, currentMessage) })), showSparkles && (jsx("div", { className: styles$
|
|
2012
|
+
}, children: currentMessage }, currentMessage) })), showSparkles && (jsx("div", { className: styles$l.sparkleContainer, children: [...Array(4)].map((_, i) => (jsx(motion.div, { className: styles$l.sparkle, animate: {
|
|
2008
2013
|
opacity: [0, 1, 0],
|
|
2009
2014
|
scale: [0.5, 1, 0.5],
|
|
2010
2015
|
rotate: [0, 180, 360]
|
|
@@ -2019,7 +2024,7 @@ const LoadingSpinner = ({ message, size = 'medium', variant = 'dots', className
|
|
|
2019
2024
|
} }, i))) }))] }));
|
|
2020
2025
|
};
|
|
2021
2026
|
|
|
2022
|
-
var styles$
|
|
2027
|
+
var styles$k = {"wrapper":"DecryptedText-module_wrapper__tuLvf","srOnly":"DecryptedText-module_srOnly__A-K2T"};
|
|
2023
2028
|
|
|
2024
2029
|
/**
|
|
2025
2030
|
* DecryptedText Component
|
|
@@ -2203,13 +2208,13 @@ const DecryptedText = ({ text, speed = 50, maxIterations = 10, sequential = fals
|
|
|
2203
2208
|
onMouseLeave: () => setIsHovering(false),
|
|
2204
2209
|
}
|
|
2205
2210
|
: {};
|
|
2206
|
-
return (jsxs(motion.span, { className: `${styles$
|
|
2211
|
+
return (jsxs(motion.span, { className: `${styles$k.wrapper} ${parentClassName}`, ref: containerRef, ...hoverProps, ...props, children: [jsx("span", { className: styles$k.srOnly, children: displayText }), jsx("span", { "aria-hidden": "true", children: displayText.split('').map((char, index) => {
|
|
2207
2212
|
const isRevealedOrDone = revealedIndices.has(index) || !isScrambling || !isHovering;
|
|
2208
2213
|
return (jsx("span", { className: isRevealedOrDone ? className : encryptedClassName, children: char }, index));
|
|
2209
2214
|
}) })] }));
|
|
2210
2215
|
};
|
|
2211
2216
|
|
|
2212
|
-
var styles$
|
|
2217
|
+
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"};
|
|
2213
2218
|
|
|
2214
2219
|
/**
|
|
2215
2220
|
* ArrayInput component - Versatile dynamic list manager
|
|
@@ -2276,11 +2281,11 @@ function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inp
|
|
|
2276
2281
|
itemIdsRef.current.splice(index, 1);
|
|
2277
2282
|
onChange(newValues);
|
|
2278
2283
|
};
|
|
2279
|
-
return (jsxs("div", { className: styles$
|
|
2284
|
+
return (jsxs("div", { className: styles$j.arrayInput, children: [jsx("h3", { className: styles$j.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(motion.div, { className: styles$j.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
2280
2285
|
duration: 0.3,
|
|
2281
2286
|
ease: "easeInOut",
|
|
2282
2287
|
layout: { duration: 0.2 }
|
|
2283
|
-
}, children: [jsx("div", { className: styles$
|
|
2288
|
+
}, children: [jsx("div", { className: styles$j.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$j.input, style: inputStyle })) }), jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$j.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$j.addButton, children: label })] }));
|
|
2284
2289
|
}
|
|
2285
2290
|
// Complex object array implementation
|
|
2286
2291
|
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle, buttonVariant = 'primary' }) {
|
|
@@ -2305,14 +2310,14 @@ function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle,
|
|
|
2305
2310
|
// Generate key from all field values
|
|
2306
2311
|
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
2307
2312
|
};
|
|
2308
|
-
return (jsxs("div", { className: styles$
|
|
2313
|
+
return (jsxs("div", { className: styles$j.arrayInput, children: [jsx("h3", { className: styles$j.arrayInputLabel, children: label }), jsx("div", { children: jsx(AnimatePresence, { children: values.map((value, index) => (jsxs(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: {
|
|
2309
2314
|
duration: 0.3,
|
|
2310
2315
|
ease: "easeInOut",
|
|
2311
2316
|
layout: { duration: 0.2 }
|
|
2312
|
-
}, children: [jsx("div", { className: styles$
|
|
2317
|
+
}, children: [jsx("div", { className: styles$j.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$j.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$j.addButton, children: ["Add ", label] })] }));
|
|
2313
2318
|
}
|
|
2314
2319
|
|
|
2315
|
-
var styles$
|
|
2320
|
+
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"};
|
|
2316
2321
|
|
|
2317
2322
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
2318
2323
|
const [isMobile, setIsMobile] = useState(false);
|
|
@@ -2397,15 +2402,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
2397
2402
|
};
|
|
2398
2403
|
const getVariantClass = () => {
|
|
2399
2404
|
if (isSaving)
|
|
2400
|
-
return styles$
|
|
2405
|
+
return styles$i.primary;
|
|
2401
2406
|
if (isEditMode) {
|
|
2402
|
-
return hasUnsavedChanges ? styles$
|
|
2407
|
+
return hasUnsavedChanges ? styles$i.success : styles$i.secondary;
|
|
2403
2408
|
}
|
|
2404
|
-
return styles$
|
|
2409
|
+
return styles$i.primary;
|
|
2405
2410
|
};
|
|
2406
2411
|
const getIcon = () => {
|
|
2407
2412
|
if (isSaving) {
|
|
2408
|
-
return jsx("div", { className: styles$
|
|
2413
|
+
return jsx("div", { className: styles$i.loader });
|
|
2409
2414
|
}
|
|
2410
2415
|
if (isEditMode) {
|
|
2411
2416
|
return hasUnsavedChanges ? jsx(Check, { size: 24 }) : jsx(X, { size: 24 });
|
|
@@ -2420,14 +2425,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
2420
2425
|
}
|
|
2421
2426
|
return "Enter edit mode";
|
|
2422
2427
|
};
|
|
2423
|
-
return (jsx(motion.button, { ref: fabRef, className: `${styles$
|
|
2428
|
+
return (jsx(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: {
|
|
2424
2429
|
type: "spring",
|
|
2425
2430
|
stiffness: 260,
|
|
2426
2431
|
damping: 20
|
|
2427
2432
|
}, children: getIcon() }));
|
|
2428
2433
|
};
|
|
2429
2434
|
|
|
2430
|
-
var styles$
|
|
2435
|
+
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"};
|
|
2431
2436
|
|
|
2432
2437
|
// Default filter options for backwards compatibility
|
|
2433
2438
|
const defaultFilterOptions = [
|
|
@@ -2620,93 +2625,52 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
2620
2625
|
return text || '';
|
|
2621
2626
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
2622
2627
|
const parts = text.split(regex);
|
|
2623
|
-
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$
|
|
2628
|
+
return parts.map((part, index) => regex.test(part) ? (jsx("mark", { className: styles$h.highlight, children: part }, index)) : (part));
|
|
2624
2629
|
};
|
|
2625
|
-
return (jsxs("div", { ref: searchRef, className: `${styles$
|
|
2630
|
+
return (jsxs("div", { ref: searchRef, className: `${styles$h.searchContainer} ${className || ''}`, children: [jsxs("div", { className: styles$h.searchInputWrapper, children: [jsx(Search, { className: styles$h.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$h.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsx(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: jsx(X, {}) })), showFilter && (jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$h.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$h.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$h.loadingState, children: [jsx("div", { className: styles$h.spinner }), jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxs("div", { className: styles$h.emptyState, children: ["No results found for \"", query, "\""] })) : (jsx("div", { className: styles$h.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
2626
2631
|
const Icon = entityIcons[type];
|
|
2627
|
-
return (jsxs("div", { className: styles$
|
|
2632
|
+
return (jsxs("div", { className: styles$h.resultGroup, children: [jsxs("div", { className: styles$h.groupHeader, children: [Icon && jsx(Icon, { className: styles$h.groupIcon }), jsx("span", { className: styles$h.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsx("span", { className: styles$h.groupCount, children: groupResults.length })] }), jsx("div", { className: styles$h.groupResults, children: groupResults.map((result) => {
|
|
2628
2633
|
const globalIndex = results.indexOf(result);
|
|
2629
|
-
return (jsxs(motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
2634
|
+
return (jsxs(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: [jsxs("div", { className: styles$h.resultContent, children: [jsx("div", { className: styles$h.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsx("div", { className: styles$h.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsx("div", { className: styles$h.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
2630
2635
|
}) })] }, type));
|
|
2631
2636
|
}) })) })) })] }));
|
|
2632
2637
|
};
|
|
2633
2638
|
|
|
2634
|
-
var styles$
|
|
2639
|
+
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-"};
|
|
2635
2640
|
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
|
|
2657
|
-
|
|
2658
|
-
|
|
2659
|
-
|
|
2660
|
-
|
|
2661
|
-
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
|
|
2669
|
-
if (cleanTime.length >= 3) {
|
|
2670
|
-
cleanTime = cleanTime.substring(0, 2) + ':' + cleanTime.substring(2);
|
|
2671
|
-
}
|
|
2672
|
-
}
|
|
2673
|
-
if (cleanTime.length === 3 && !cleanTime.includes(':')) {
|
|
2674
|
-
cleanTime = cleanTime.substring(0, 2) + ':' + cleanTime.substring(2);
|
|
2675
|
-
}
|
|
2676
|
-
else if (cleanTime.length === 4 && !cleanTime.includes(':')) {
|
|
2677
|
-
cleanTime = cleanTime.substring(0, 2) + ':' + cleanTime.substring(2);
|
|
2678
|
-
}
|
|
2679
|
-
if (cleanTime.includes(':')) {
|
|
2680
|
-
const parts = cleanTime.split(':');
|
|
2681
|
-
let hours = parts[0];
|
|
2682
|
-
let minutes = parts[1] || '';
|
|
2683
|
-
hours = hours.substring(0, 2);
|
|
2684
|
-
if (hours.length === 2) {
|
|
2685
|
-
const hourNum = parseInt(hours);
|
|
2686
|
-
if (hourNum > 23) {
|
|
2687
|
-
hours = '23';
|
|
2688
|
-
}
|
|
2689
|
-
}
|
|
2690
|
-
minutes = minutes.substring(0, 2);
|
|
2691
|
-
if (minutes.length === 2) {
|
|
2692
|
-
const minNum = parseInt(minutes);
|
|
2693
|
-
if (minNum > 59) {
|
|
2694
|
-
minutes = '59';
|
|
2695
|
-
}
|
|
2696
|
-
}
|
|
2697
|
-
cleanTime = hours + (minutes.length > 0 ? ':' + minutes : ':');
|
|
2698
|
-
}
|
|
2699
|
-
return cleanTime.substring(0, 5);
|
|
2700
|
-
};
|
|
2701
|
-
const handleTextChange = (inputValue) => {
|
|
2702
|
-
const formattedTime = formatTime24(inputValue);
|
|
2703
|
-
onChange(formattedTime);
|
|
2704
|
-
};
|
|
2705
|
-
const handleClockClick = () => {
|
|
2706
|
-
if (!disabled && !loading) {
|
|
2707
|
-
setShowPicker(true);
|
|
2708
|
-
}
|
|
2709
|
-
};
|
|
2641
|
+
const lightTheme = createTheme({
|
|
2642
|
+
palette: {
|
|
2643
|
+
mode: 'light',
|
|
2644
|
+
primary: { main: '#3b82f6' },
|
|
2645
|
+
background: {
|
|
2646
|
+
default: '#f8fafc',
|
|
2647
|
+
paper: '#ffffff',
|
|
2648
|
+
},
|
|
2649
|
+
text: {
|
|
2650
|
+
primary: '#0f172a',
|
|
2651
|
+
secondary: '#475569',
|
|
2652
|
+
},
|
|
2653
|
+
},
|
|
2654
|
+
});
|
|
2655
|
+
const darkTheme = createTheme({
|
|
2656
|
+
palette: {
|
|
2657
|
+
mode: 'dark',
|
|
2658
|
+
primary: { main: '#f5b829' },
|
|
2659
|
+
background: {
|
|
2660
|
+
default: '#010907',
|
|
2661
|
+
paper: '#0e1a19',
|
|
2662
|
+
},
|
|
2663
|
+
text: {
|
|
2664
|
+
primary: '#f1f5f9',
|
|
2665
|
+
secondary: '#cbd5e1',
|
|
2666
|
+
},
|
|
2667
|
+
},
|
|
2668
|
+
});
|
|
2669
|
+
function TimeInput({ label, value, onChange, error = false, success = false, loading = false, disabled = false, required = false, className = '', }) {
|
|
2670
|
+
const dayjsValue = value ? dayjs(`2000-01-01 ${value}`) : null;
|
|
2671
|
+
const isDark = typeof document !== 'undefined' &&
|
|
2672
|
+
!!document.documentElement.getAttribute('data-theme')?.includes('dark');
|
|
2673
|
+
const muiTheme = useMemo(() => (isDark ? darkTheme : lightTheme), [isDark]);
|
|
2710
2674
|
const getContainerClassName = () => {
|
|
2711
2675
|
const classes = [styles$g.timeInput];
|
|
2712
2676
|
if (error)
|
|
@@ -2721,7 +2685,36 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
2721
2685
|
classes.push(className);
|
|
2722
2686
|
return classes.join(' ');
|
|
2723
2687
|
};
|
|
2724
|
-
return (jsxs(
|
|
2688
|
+
return (jsxs("div", { className: getContainerClassName(), children: [label && (jsxs("label", { className: styles$g.label, children: [label, required && jsx("span", { className: styles$g.required, children: "*" })] })), jsx(ThemeProvider$1, { theme: muiTheme, children: jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(MobileTimePicker, { value: dayjsValue, onChange: (newValue) => {
|
|
2689
|
+
onChange(newValue ? newValue.format('HH:mm') : '');
|
|
2690
|
+
}, ampm: false, views: ['hours', 'minutes'], disabled: disabled || loading, slotProps: {
|
|
2691
|
+
textField: {
|
|
2692
|
+
size: 'small',
|
|
2693
|
+
fullWidth: true,
|
|
2694
|
+
className: styles$g.picker,
|
|
2695
|
+
sx: {
|
|
2696
|
+
'& .MuiPickersOutlinedInput-root': {
|
|
2697
|
+
fontFamily: "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace",
|
|
2698
|
+
fontSize: 'var(--font-size-lg)',
|
|
2699
|
+
borderRadius: 'var(--radius-lg)',
|
|
2700
|
+
color: 'var(--color-text) !important',
|
|
2701
|
+
'& .MuiPickersOutlinedInput-notchedOutline': {
|
|
2702
|
+
borderWidth: '2px !important',
|
|
2703
|
+
borderColor: 'var(--color-border) !important',
|
|
2704
|
+
},
|
|
2705
|
+
'&:hover .MuiPickersOutlinedInput-notchedOutline': {
|
|
2706
|
+
borderColor: 'var(--color-border-hover) !important',
|
|
2707
|
+
},
|
|
2708
|
+
'&.Mui-focused .MuiPickersOutlinedInput-notchedOutline': {
|
|
2709
|
+
borderColor: 'var(--color-primary) !important',
|
|
2710
|
+
},
|
|
2711
|
+
},
|
|
2712
|
+
'& .MuiIconButton-root': {
|
|
2713
|
+
color: 'var(--color-text-secondary) !important',
|
|
2714
|
+
},
|
|
2715
|
+
},
|
|
2716
|
+
},
|
|
2717
|
+
} }) }) })] }));
|
|
2725
2718
|
}
|
|
2726
2719
|
|
|
2727
2720
|
const ThemeContext = createContext(undefined);
|