@stfrigerio/sito-template 0.1.8 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/atoms/AllAtoms.stories.d.ts.map +1 -1
- package/dist/components/atoms/ArrayInput/ArrayInput.d.ts +5 -0
- package/dist/components/atoms/ArrayInput/ArrayInput.d.ts.map +1 -1
- package/dist/components/atoms/Card/Card.d.ts +8 -0
- package/dist/components/atoms/Card/Card.d.ts.map +1 -1
- package/dist/components/atoms/Card/Card.stories.d.ts +24 -0
- package/dist/components/atoms/Card/Card.stories.d.ts.map +1 -1
- package/dist/components/atoms/TextArea/TextArea.d.ts +4 -2
- package/dist/components/atoms/TextArea/TextArea.d.ts.map +1 -1
- package/dist/components/atoms/TextArea/TextArea.stories.d.ts +8 -8
- package/dist/components/atoms/TextArea/TextArea.stories.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.d.ts +4 -0
- package/dist/components/atoms/Toggle/Toggle.d.ts.map +1 -1
- package/dist/components/atoms/Toggle/Toggle.stories.d.ts +1 -0
- package/dist/components/atoms/Toggle/Toggle.stories.d.ts.map +1 -1
- package/dist/components/atoms/index.d.ts +0 -2
- package/dist/components/atoms/index.d.ts.map +1 -1
- package/dist/components/molecules/ArrayInput/ArrayInput.d.ts +105 -0
- package/dist/components/molecules/ArrayInput/ArrayInput.d.ts.map +1 -0
- package/dist/components/molecules/ArrayInput/ArrayInput.stories.d.ts +44 -0
- package/dist/components/molecules/ArrayInput/ArrayInput.stories.d.ts.map +1 -0
- package/dist/components/molecules/ArrayInput/index.d.ts +3 -0
- package/dist/components/molecules/ArrayInput/index.d.ts.map +1 -0
- package/dist/components/molecules/index.d.ts +2 -0
- package/dist/components/molecules/index.d.ts.map +1 -1
- package/dist/components/organisms/Calendar/Calendar.d.ts +105 -0
- package/dist/components/organisms/Calendar/Calendar.d.ts.map +1 -0
- package/dist/components/organisms/Calendar/Calendar.stories.d.ts +42 -0
- package/dist/components/organisms/Calendar/Calendar.stories.d.ts.map +1 -0
- package/dist/components/organisms/Calendar/index.d.ts +3 -0
- package/dist/components/organisms/Calendar/index.d.ts.map +1 -0
- package/dist/components/organisms/index.d.ts +2 -0
- package/dist/components/organisms/index.d.ts.map +1 -1
- package/dist/index.esm.js +468 -230
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +468 -229
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/styles.css.map +1 -1
- package/package.json +2 -3
package/dist/index.js
CHANGED
|
@@ -51,7 +51,7 @@ const ThemeProvider = ({ children, defaultTheme = 'light' }) => {
|
|
|
51
51
|
return (jsxRuntime.jsx(ThemeContext$1.Provider, { value: { theme, toggleTheme, setTheme }, children: children }));
|
|
52
52
|
};
|
|
53
53
|
|
|
54
|
-
var styles$
|
|
54
|
+
var styles$o = {"button":"Button-module_button__c6nkW","primary":"Button-module_primary__pMqAs","secondary":"Button-module_secondary__mBWx9","outline":"Button-module_outline__NGGGN","ghost":"Button-module_ghost__u2QBF","danger":"Button-module_danger__2ewhr","small":"Button-module_small__ZI9RX","medium":"Button-module_medium__Wnf9t","large":"Button-module_large__cQCpA","fullWidth":"Button-module_fullWidth__N8vYg","loading":"Button-module_loading__hcSI4","spinner":"Button-module_spinner__HtM96","spin":"Button-module_spin__jblrj","iconLeft":"Button-module_iconLeft__Fpz-y","iconRight":"Button-module_iconRight__kTfjS"};
|
|
55
55
|
|
|
56
56
|
/**
|
|
57
57
|
* Button Component
|
|
@@ -94,17 +94,17 @@ var styles$n = {"button":"Button-module_button__c6nkW","primary":"Button-module_
|
|
|
94
94
|
*/
|
|
95
95
|
const Button = ({ variant = 'primary', size = 'medium', fullWidth = false, loading = false, iconLeft, iconRight, children, className = '', disabled, motionProps, ...rest }) => {
|
|
96
96
|
const buttonClasses = [
|
|
97
|
-
styles$
|
|
98
|
-
styles$
|
|
99
|
-
styles$
|
|
100
|
-
fullWidth && styles$
|
|
101
|
-
loading && styles$
|
|
97
|
+
styles$o.button,
|
|
98
|
+
styles$o[variant],
|
|
99
|
+
styles$o[size],
|
|
100
|
+
fullWidth && styles$o.fullWidth,
|
|
101
|
+
loading && styles$o.loading,
|
|
102
102
|
className
|
|
103
103
|
].filter(Boolean).join(' ');
|
|
104
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$
|
|
104
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, disabled: disabled || loading, whileHover: { scale: disabled || loading ? 1 : 1.02 }, whileTap: { scale: disabled || loading ? 1 : 0.98 }, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: [loading && jsxRuntime.jsx("span", { className: styles$o.spinner }), iconLeft && jsxRuntime.jsx("span", { className: styles$o.iconLeft, children: iconLeft }), children, iconRight && jsxRuntime.jsx("span", { className: styles$o.iconRight, children: iconRight })] }));
|
|
105
105
|
};
|
|
106
106
|
|
|
107
|
-
var styles$
|
|
107
|
+
var styles$n = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hoverable__X3OpS","elevated":"Card-module_elevated__hGV6-","outlined":"Card-module_outlined__ngRag","flat":"Card-module_flat__xy-xt","glass":"Card-module_glass__Sv-Vs","imageContainer":"Card-module_imageContainer__L4ma6","image":"Card-module_image__bQBt6","header":"Card-module_header__0dtj3","headerContent":"Card-module_headerContent__W7-jD","expandButton":"Card-module_expandButton__I7f49","expandIcon":"Card-module_expandIcon__Lu-OY","expandableContent":"Card-module_expandableContent__BFgO5","expandable":"Card-module_expandable__GMXzo","body":"Card-module_body__K7eL3","footer":"Card-module_footer__L5wO-","title":"Card-module_title__pW9g8","subtitle":"Card-module_subtitle__gejH4","clickable":"Card-module_clickable__Y6fm8","padding":"Card-module_padding__wtyDo","noPadding":"Card-module_noPadding__r5Qq0","loading":"Card-module_loading__S4Wng","loadingShimmer":"Card-module_loadingShimmer__Q1Osr","loadingPulse":"Card-module_loadingPulse__bXQmC"};
|
|
108
108
|
|
|
109
109
|
/**
|
|
110
110
|
* Card Component
|
|
@@ -157,150 +157,40 @@ var styles$m = {"card":"Card-module_card__r2DB2","hoverable":"Card-module_hovera
|
|
|
157
157
|
* @param {CardProps} props - The props for the Card component
|
|
158
158
|
* @returns {JSX.Element} The rendered Card component
|
|
159
159
|
*/
|
|
160
|
-
const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, className = '', onClick, motionProps, ...rest }) => {
|
|
160
|
+
const Card = ({ variant = 'elevated', hoverable = false, clickable = false, padding = true, image, imageAlt = '', title, subtitle, header, footer, children, expandable = false, defaultExpanded = false, expanded: controlledExpanded, onExpandChange, className = '', onClick, motionProps, ...rest }) => {
|
|
161
|
+
// State management for expandable cards
|
|
162
|
+
const [internalExpanded, setInternalExpanded] = React.useState(defaultExpanded);
|
|
163
|
+
const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
|
|
164
|
+
const handleToggleExpand = () => {
|
|
165
|
+
const newExpanded = !isExpanded;
|
|
166
|
+
if (controlledExpanded === undefined) {
|
|
167
|
+
setInternalExpanded(newExpanded);
|
|
168
|
+
}
|
|
169
|
+
onExpandChange?.(newExpanded);
|
|
170
|
+
};
|
|
161
171
|
const cardClasses = [
|
|
162
|
-
styles$
|
|
163
|
-
styles$
|
|
164
|
-
hoverable && styles$
|
|
165
|
-
clickable && styles$
|
|
166
|
-
!padding && styles$
|
|
172
|
+
styles$n.card,
|
|
173
|
+
styles$n[variant],
|
|
174
|
+
hoverable && styles$n.hoverable,
|
|
175
|
+
clickable && styles$n.clickable,
|
|
176
|
+
!padding && styles$n.noPadding,
|
|
177
|
+
expandable && styles$n.expandable,
|
|
167
178
|
className
|
|
168
179
|
].filter(Boolean).join(' ');
|
|
169
|
-
const
|
|
180
|
+
const renderHeader = () => {
|
|
181
|
+
if (header) {
|
|
182
|
+
return (jsxRuntime.jsxs("div", { className: styles$n.header, children: [jsxRuntime.jsx("div", { className: styles$n.headerContent, children: header }), expandable && (jsxRuntime.jsx("button", { className: styles$n.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$n.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
183
|
+
}
|
|
184
|
+
if (title || subtitle) {
|
|
185
|
+
return (jsxRuntime.jsxs("div", { className: styles$n.header, children: [jsxRuntime.jsxs("div", { className: styles$n.headerContent, children: [title && jsxRuntime.jsx("h3", { className: styles$n.title, children: title }), subtitle && jsxRuntime.jsx("p", { className: styles$n.subtitle, children: subtitle })] }), expandable && (jsxRuntime.jsx("button", { className: styles$n.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$n.expandIcon, style: { transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)' }, children: jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6" }) }) }))] }));
|
|
186
|
+
}
|
|
187
|
+
return null;
|
|
188
|
+
};
|
|
189
|
+
const cardContent = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [image && (jsxRuntime.jsx("div", { className: styles$n.imageContainer, children: jsxRuntime.jsx("img", { src: image, alt: imageAlt, className: styles$n.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$n.expandableContent, children: [children && (jsxRuntime.jsx("div", { className: padding ? styles$n.body : undefined, children: children })), footer && jsxRuntime.jsx("div", { className: styles$n.footer, children: footer })] }, "content")) })] }));
|
|
170
190
|
return (jsxRuntime.jsx(framerMotion.motion.div, { className: cardClasses, onClick: clickable ? onClick : undefined, whileHover: hoverable ? { y: -4 } : undefined, transition: { type: "spring", stiffness: 400, damping: 17 }, ...motionProps, ...rest, children: cardContent }));
|
|
171
191
|
};
|
|
172
192
|
|
|
173
|
-
var styles$
|
|
174
|
-
|
|
175
|
-
/**
|
|
176
|
-
* TextInput component - A versatile text input field with label and error handling
|
|
177
|
-
*
|
|
178
|
-
* @component
|
|
179
|
-
* @description
|
|
180
|
-
* A foundational input component that provides a clean, accessible text field with
|
|
181
|
-
* built-in support for labels, validation errors, and various HTML5 input types.
|
|
182
|
-
* Follows design system tokens for consistent theming across light/dark modes.
|
|
183
|
-
*
|
|
184
|
-
* @example
|
|
185
|
-
* // Basic usage
|
|
186
|
-
* <TextInput
|
|
187
|
-
* label="Email Address"
|
|
188
|
-
* value={email}
|
|
189
|
-
* onChange={setEmail}
|
|
190
|
-
* type="email"
|
|
191
|
-
* placeholder="Enter your email"
|
|
192
|
-
* />
|
|
193
|
-
*
|
|
194
|
-
* @example
|
|
195
|
-
* // With validation error
|
|
196
|
-
* <TextInput
|
|
197
|
-
* label="Password"
|
|
198
|
-
* value={password}
|
|
199
|
-
* onChange={setPassword}
|
|
200
|
-
* type="password"
|
|
201
|
-
* error="Password must be at least 8 characters"
|
|
202
|
-
* required
|
|
203
|
-
* />
|
|
204
|
-
*/
|
|
205
|
-
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
206
|
-
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
207
|
-
const getContainerClassName = () => {
|
|
208
|
-
const classes = [styles$l.textInput];
|
|
209
|
-
if (success)
|
|
210
|
-
classes.push(styles$l.success);
|
|
211
|
-
if (loading)
|
|
212
|
-
classes.push(styles$l.loading);
|
|
213
|
-
if (icon)
|
|
214
|
-
classes.push(styles$l.withIcon);
|
|
215
|
-
if (actionButton)
|
|
216
|
-
classes.push(styles$l.withAction);
|
|
217
|
-
return classes.join(' ');
|
|
218
|
-
};
|
|
219
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$l.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$l.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$l.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$l.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$l.errorMessage, children: error }))] }));
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
var styles$k = {"arrayInput":"ArrayInput-module_arrayInput__FNrd2","arrayInputLabel":"ArrayInput-module_arrayInputLabel__7Rpkj","arrayInputItem":"ArrayInput-module_arrayInputItem__eSH-6","inputWrapper":"ArrayInput-module_inputWrapper__i-MB-","input":"ArrayInput-module_input__792ru","complexItem":"ArrayInput-module_complexItem__iX3v6","fieldsWrapper":"ArrayInput-module_fieldsWrapper__fzqvn"};
|
|
223
|
-
|
|
224
|
-
/**
|
|
225
|
-
* ArrayInput component - Versatile dynamic list manager
|
|
226
|
-
*
|
|
227
|
-
* @component
|
|
228
|
-
* @description
|
|
229
|
-
* A flexible component that can handle both simple string arrays and complex object arrays.
|
|
230
|
-
* Users can add, remove, and edit items dynamically. Supports custom field configurations
|
|
231
|
-
* for complex data structures.
|
|
232
|
-
*
|
|
233
|
-
* @example
|
|
234
|
-
* // Simple string array
|
|
235
|
-
* <ArrayInput
|
|
236
|
-
* label="Tags"
|
|
237
|
-
* values={tags}
|
|
238
|
-
* onChange={setTags}
|
|
239
|
-
* placeholder="Enter tag"
|
|
240
|
-
* />
|
|
241
|
-
*
|
|
242
|
-
* @example
|
|
243
|
-
* // Complex object array
|
|
244
|
-
* <ArrayInput
|
|
245
|
-
* type="complex"
|
|
246
|
-
* label="Social Links"
|
|
247
|
-
* values={links}
|
|
248
|
-
* onChange={setLinks}
|
|
249
|
-
* fields={[
|
|
250
|
-
* { name: 'label', label: 'Label', placeholder: 'GitHub' },
|
|
251
|
-
* { name: 'url', label: 'URL', type: 'url', placeholder: 'https://github.com/...' }
|
|
252
|
-
* ]}
|
|
253
|
-
* />
|
|
254
|
-
*/
|
|
255
|
-
function ArrayInput(props) {
|
|
256
|
-
if (props.type === 'complex') {
|
|
257
|
-
return jsxRuntime.jsx(ComplexArrayInput, { ...props });
|
|
258
|
-
}
|
|
259
|
-
return jsxRuntime.jsx(SimpleArrayInput, { ...props });
|
|
260
|
-
}
|
|
261
|
-
// Simple string array implementation
|
|
262
|
-
function SimpleArrayInput({ label, values, onChange, placeholder }) {
|
|
263
|
-
const handleChange = (index, value) => {
|
|
264
|
-
const newValues = [...values];
|
|
265
|
-
newValues[index] = value;
|
|
266
|
-
onChange(newValues);
|
|
267
|
-
};
|
|
268
|
-
const handleAdd = () => {
|
|
269
|
-
onChange([...values, '']);
|
|
270
|
-
};
|
|
271
|
-
const handleRemove = (index) => {
|
|
272
|
-
const newValues = values.filter((_, i) => i !== index);
|
|
273
|
-
onChange(newValues);
|
|
274
|
-
};
|
|
275
|
-
return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxRuntime.jsxs("div", { className: styles$k.arrayInputItem, children: [jsxRuntime.jsx("div", { className: styles$k.inputWrapper, children: jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleChange(index, e.target.value), placeholder: placeholder, className: styles$k.input }) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), children: "Remove" })] }, `item-${index}`))), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
276
|
-
}
|
|
277
|
-
// Complex object array implementation
|
|
278
|
-
function ComplexArrayInput({ label, values, onChange, fields, getKey }) {
|
|
279
|
-
const handleChange = (index, field, value) => {
|
|
280
|
-
const newValues = [...values];
|
|
281
|
-
newValues[index] = { ...newValues[index], [field]: value };
|
|
282
|
-
onChange(newValues);
|
|
283
|
-
};
|
|
284
|
-
const handleAdd = () => {
|
|
285
|
-
const newItem = fields.reduce((acc, field) => {
|
|
286
|
-
return { ...acc, [field.name]: '' };
|
|
287
|
-
}, {});
|
|
288
|
-
onChange([...values, newItem]);
|
|
289
|
-
};
|
|
290
|
-
const handleRemove = (index) => {
|
|
291
|
-
const newValues = values.filter((_, i) => i !== index);
|
|
292
|
-
onChange(newValues);
|
|
293
|
-
};
|
|
294
|
-
const generateKey = (item, index) => {
|
|
295
|
-
if (getKey)
|
|
296
|
-
return getKey(item, index);
|
|
297
|
-
// Generate key from all field values
|
|
298
|
-
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
299
|
-
};
|
|
300
|
-
return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), values.map((value, index) => (jsxRuntime.jsxs("div", { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, children: [jsxRuntime.jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (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), children: "Remove" })] }, generateKey(value, index)))), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, children: ["Add ", label] })] }));
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
var styles$j = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
193
|
+
var styles$m = {"checkboxLabel":"Checkbox-module_checkboxLabel__4tBVg","checkbox":"Checkbox-module_checkbox__BbJul","checkboxText":"Checkbox-module_checkboxText__oJsc9"};
|
|
304
194
|
|
|
305
195
|
/**
|
|
306
196
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -344,7 +234,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
344
234
|
checkboxRef.current.indeterminate = indeterminate;
|
|
345
235
|
}
|
|
346
236
|
}, [indeterminate]);
|
|
347
|
-
return (jsxRuntime.jsxs("label", { className: styles$
|
|
237
|
+
return (jsxRuntime.jsxs("label", { className: styles$m.checkboxLabel, children: [jsxRuntime.jsx("input", { ref: checkboxRef, type: "checkbox", checked: checked, onChange: (e) => onChange(e.target.checked), className: styles$m.checkbox, disabled: disabled, id: id, name: name, value: value, "aria-checked": indeterminate ? 'mixed' : checked }), label && jsxRuntime.jsx("span", { className: styles$m.checkboxText, children: label })] }));
|
|
348
238
|
};
|
|
349
239
|
|
|
350
240
|
var DefaultContext = {
|
|
@@ -467,7 +357,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
467
357
|
return '';
|
|
468
358
|
};
|
|
469
359
|
|
|
470
|
-
var styles$
|
|
360
|
+
var styles$l = {"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"};
|
|
471
361
|
|
|
472
362
|
/**
|
|
473
363
|
* DateInput component - European format date picker with manual input support
|
|
@@ -554,19 +444,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
554
444
|
}
|
|
555
445
|
};
|
|
556
446
|
const getClassName = () => {
|
|
557
|
-
const classes = [styles$
|
|
447
|
+
const classes = [styles$l.dateInput];
|
|
558
448
|
if (error)
|
|
559
|
-
classes.push(styles$
|
|
449
|
+
classes.push(styles$l.error);
|
|
560
450
|
if (success)
|
|
561
|
-
classes.push(styles$
|
|
451
|
+
classes.push(styles$l.success);
|
|
562
452
|
if (loading)
|
|
563
|
-
classes.push(styles$
|
|
453
|
+
classes.push(styles$l.loading);
|
|
564
454
|
return classes.join(' ');
|
|
565
455
|
};
|
|
566
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$
|
|
456
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsx("label", { className: styles$l.label, children: label }), jsxRuntime.jsxs("div", { className: styles$l.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$l.textInput, disabled: disabled || loading }), jsxRuntime.jsx("button", { type: "button", onClick: handleCalendarClick, className: styles$l.calendarButton, title: "Select date from calendar", disabled: disabled || loading, children: jsxRuntime.jsx(FiCalendar, {}) }), jsxRuntime.jsx("input", { ref: hiddenDateInputRef, type: "date", onChange: handleCalendarChange, className: styles$l.hiddenDateInput, tabIndex: -1, disabled: disabled || loading })] })] }));
|
|
567
457
|
}
|
|
568
458
|
|
|
569
|
-
var styles$
|
|
459
|
+
var styles$k = {"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"};
|
|
570
460
|
|
|
571
461
|
/**
|
|
572
462
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -671,23 +561,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
671
561
|
}
|
|
672
562
|
};
|
|
673
563
|
const getTriggerClassName = () => {
|
|
674
|
-
const classes = [styles$
|
|
564
|
+
const classes = [styles$k.dropdownTrigger];
|
|
675
565
|
if (isOpen)
|
|
676
|
-
classes.push(styles$
|
|
566
|
+
classes.push(styles$k.open);
|
|
677
567
|
if (loading)
|
|
678
|
-
classes.push(styles$
|
|
568
|
+
classes.push(styles$k.loading);
|
|
679
569
|
if (error)
|
|
680
|
-
classes.push(styles$
|
|
570
|
+
classes.push(styles$k.error);
|
|
681
571
|
return classes.join(' ');
|
|
682
572
|
};
|
|
683
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
573
|
+
return (jsxRuntime.jsxs("div", { className: styles$k.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$k.dropdownValue} ${!displayValue ? styles$k.placeholder : ''}`, children: displayValue || placeholder }), jsxRuntime.jsx(FiChevronDown, { className: styles$k.dropdownArrow })] }), jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$k.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$k.dropdownSearch, children: [jsxRuntime.jsx(FiSearch, { className: styles$k.searchIcon }), jsxRuntime.jsx("input", { ref: inputRef, type: "text", className: styles$k.searchInput, placeholder: "Cerca...", value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onClick: (e) => e.stopPropagation() })] }), jsxRuntime.jsxs("div", { className: styles$k.dropdownOptions, children: [allOptions.map((opt, index) => {
|
|
684
574
|
const isSelected = value === opt.value;
|
|
685
575
|
const isHighlighted = highlightedIndex === index;
|
|
686
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
687
|
-
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
576
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$k.dropdownOption} ${isSelected ? styles$k.selected : ''} ${isHighlighted ? styles$k.highlighted : ''}`, onClick: () => handleSelect(opt.value), onMouseEnter: () => setHighlightedIndex(index), initial: { opacity: 0, x: -20 }, animate: { opacity: 1, x: 0 }, transition: { delay: index * 0.02 }, whileTap: { scale: 0.98 }, style: { willChange: 'transform' }, children: [jsxRuntime.jsx("span", { children: opt.label }), isSelected && jsxRuntime.jsx(FiCheck, { className: styles$k.checkIcon })] }, `${opt.value}-${index}`));
|
|
577
|
+
}), allOptions.length === 0 && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$k.dropdownNoResults, initial: { opacity: 0 }, animate: { opacity: 1 }, children: "No results found" }))] })] })) })] }));
|
|
688
578
|
}
|
|
689
579
|
|
|
690
|
-
var styles$
|
|
580
|
+
var styles$j = {"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"};
|
|
691
581
|
|
|
692
582
|
/**
|
|
693
583
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -724,23 +614,23 @@ var styles$g = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
724
614
|
*/
|
|
725
615
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
726
616
|
const getClassName = () => {
|
|
727
|
-
const classes = [styles$
|
|
617
|
+
const classes = [styles$j.selectInput];
|
|
728
618
|
if (error)
|
|
729
|
-
classes.push(styles$
|
|
619
|
+
classes.push(styles$j.error);
|
|
730
620
|
if (success)
|
|
731
|
-
classes.push(styles$
|
|
621
|
+
classes.push(styles$j.success);
|
|
732
622
|
if (loading)
|
|
733
|
-
classes.push(styles$
|
|
623
|
+
classes.push(styles$j.loading);
|
|
734
624
|
return classes.join(' ');
|
|
735
625
|
};
|
|
736
|
-
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$
|
|
626
|
+
return (jsxRuntime.jsxs("div", { className: getClassName(), children: [jsxRuntime.jsxs("label", { children: [label, required && jsxRuntime.jsx("span", { style: { color: 'var(--color-error)' }, children: " *" })] }), jsxRuntime.jsxs("div", { className: styles$j.selectWrapper, children: [jsxRuntime.jsxs("select", { value: value, onChange: e => onChange(e.target.value), disabled: disabled || loading, required: required, children: [jsxRuntime.jsx("option", { value: "", children: placeholder }), options.map(opt => {
|
|
737
627
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
738
628
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
739
629
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
740
|
-
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$
|
|
630
|
+
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$j.selectIcon })] })] }));
|
|
741
631
|
}
|
|
742
632
|
|
|
743
|
-
var styles$
|
|
633
|
+
var styles$i = {"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-"};
|
|
744
634
|
|
|
745
635
|
/**
|
|
746
636
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -772,37 +662,88 @@ var styles$f = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
772
662
|
* required
|
|
773
663
|
* />
|
|
774
664
|
*/
|
|
775
|
-
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false }) {
|
|
665
|
+
function TextArea({ label, value, onChange, rows = 5, placeholder = "", required = false, maxLength, disabled = false, error = false, success = false, loading = false, focusMode = false, compact = false }) {
|
|
776
666
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
777
667
|
const getContainerClassName = () => {
|
|
778
|
-
const classes = [styles$
|
|
668
|
+
const classes = [styles$i.textareaContainer];
|
|
779
669
|
if (error)
|
|
780
|
-
classes.push(styles$
|
|
670
|
+
classes.push(styles$i.error);
|
|
781
671
|
if (success)
|
|
782
|
-
classes.push(styles$
|
|
672
|
+
classes.push(styles$i.success);
|
|
783
673
|
if (loading)
|
|
784
|
-
classes.push(styles$
|
|
674
|
+
classes.push(styles$i.loading);
|
|
785
675
|
if (focusMode)
|
|
786
|
-
classes.push(styles$
|
|
676
|
+
classes.push(styles$i.focusMode);
|
|
677
|
+
if (compact)
|
|
678
|
+
classes.push(styles$i.compact);
|
|
787
679
|
return classes.join(' ');
|
|
788
680
|
};
|
|
789
681
|
const getCharCountClassName = () => {
|
|
790
682
|
if (!maxLength)
|
|
791
|
-
return styles$
|
|
792
|
-
const classes = [styles$
|
|
683
|
+
return styles$i.characterCount;
|
|
684
|
+
const classes = [styles$i.characterCount];
|
|
793
685
|
const percentage = (value.length / maxLength) * 100;
|
|
794
686
|
if (percentage >= 100) {
|
|
795
|
-
classes.push(styles$
|
|
687
|
+
classes.push(styles$i.atLimit);
|
|
796
688
|
}
|
|
797
689
|
else if (percentage >= 80) {
|
|
798
|
-
classes.push(styles$
|
|
690
|
+
classes.push(styles$i.nearLimit);
|
|
799
691
|
}
|
|
800
692
|
return classes.join(' ');
|
|
801
693
|
};
|
|
802
|
-
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$
|
|
694
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [label && (jsxRuntime.jsxs("label", { htmlFor: textareaId, className: styles$i.textareaLabel, children: [label, required && jsxRuntime.jsx("span", { className: styles$i.requiredIndicator, children: "*" })] })), jsxRuntime.jsx("textarea", { id: textareaId, value: value, onChange: (e) => onChange(e.target.value), rows: rows, placeholder: placeholder, maxLength: maxLength, className: styles$i.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 })] }))] }));
|
|
695
|
+
}
|
|
696
|
+
|
|
697
|
+
var styles$h = {"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"};
|
|
698
|
+
|
|
699
|
+
/**
|
|
700
|
+
* TextInput component - A versatile text input field with label and error handling
|
|
701
|
+
*
|
|
702
|
+
* @component
|
|
703
|
+
* @description
|
|
704
|
+
* A foundational input component that provides a clean, accessible text field with
|
|
705
|
+
* built-in support for labels, validation errors, and various HTML5 input types.
|
|
706
|
+
* Follows design system tokens for consistent theming across light/dark modes.
|
|
707
|
+
*
|
|
708
|
+
* @example
|
|
709
|
+
* // Basic usage
|
|
710
|
+
* <TextInput
|
|
711
|
+
* label="Email Address"
|
|
712
|
+
* value={email}
|
|
713
|
+
* onChange={setEmail}
|
|
714
|
+
* type="email"
|
|
715
|
+
* placeholder="Enter your email"
|
|
716
|
+
* />
|
|
717
|
+
*
|
|
718
|
+
* @example
|
|
719
|
+
* // With validation error
|
|
720
|
+
* <TextInput
|
|
721
|
+
* label="Password"
|
|
722
|
+
* value={password}
|
|
723
|
+
* onChange={setPassword}
|
|
724
|
+
* type="password"
|
|
725
|
+
* error="Password must be at least 8 characters"
|
|
726
|
+
* required
|
|
727
|
+
* />
|
|
728
|
+
*/
|
|
729
|
+
function TextInput({ label, value, onChange, type = "text", onFocus, onBlur, placeholder, error, required, disabled = false, success = false, loading = false, icon, actionButton, maxLength, autoComplete }) {
|
|
730
|
+
const inputId = `input-${Math.random().toString(36).substr(2, 9)}`;
|
|
731
|
+
const getContainerClassName = () => {
|
|
732
|
+
const classes = [styles$h.textInput];
|
|
733
|
+
if (success)
|
|
734
|
+
classes.push(styles$h.success);
|
|
735
|
+
if (loading)
|
|
736
|
+
classes.push(styles$h.loading);
|
|
737
|
+
if (icon)
|
|
738
|
+
classes.push(styles$h.withIcon);
|
|
739
|
+
if (actionButton)
|
|
740
|
+
classes.push(styles$h.withAction);
|
|
741
|
+
return classes.join(' ');
|
|
742
|
+
};
|
|
743
|
+
return (jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { htmlFor: inputId, children: [label, required && jsxRuntime.jsx("span", { className: styles$h.required, children: "*" })] }), jsxRuntime.jsxs("div", { style: { position: 'relative' }, children: [icon && jsxRuntime.jsx("div", { className: styles$h.inputIcon, children: icon }), jsxRuntime.jsx("input", { id: inputId, type: type, value: value, onChange: (e) => onChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: error ? styles$h.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$h.actionButton, onClick: actionButton.onClick, disabled: disabled || loading, children: actionButton.label }))] }), error && (jsxRuntime.jsx("span", { id: `${inputId}-error`, className: styles$h.errorMessage, children: error }))] }));
|
|
803
744
|
}
|
|
804
745
|
|
|
805
|
-
var styles$
|
|
746
|
+
var styles$g = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
806
747
|
|
|
807
748
|
/**
|
|
808
749
|
* Toggle Component
|
|
@@ -846,11 +787,18 @@ var styles$e = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggle
|
|
|
846
787
|
* @returns {JSX.Element} The rendered Toggle component
|
|
847
788
|
*/
|
|
848
789
|
function Toggle(props) {
|
|
849
|
-
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon } = props;
|
|
850
|
-
|
|
790
|
+
const { isOn, onToggle, leftLabel, rightLabel, leftIcon, rightIcon, className, style } = props;
|
|
791
|
+
// Ensure content stays centered by merging styles
|
|
792
|
+
const buttonStyle = {
|
|
793
|
+
display: 'flex',
|
|
794
|
+
alignItems: 'center',
|
|
795
|
+
justifyContent: 'center',
|
|
796
|
+
...style
|
|
797
|
+
};
|
|
798
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$g.toggleContainer} ${className || ''}`, children: [jsxRuntime.jsxs("button", { className: `${styles$g.toggleButton} ${!isOn ? styles$g.active : ''}`, onClick: () => onToggle(false), style: buttonStyle, children: [leftIcon, leftLabel] }), jsxRuntime.jsxs("button", { className: `${styles$g.toggleButton} ${isOn ? styles$g.active : ''}`, onClick: () => onToggle(true), style: buttonStyle, children: [rightIcon, rightLabel] })] }));
|
|
851
799
|
}
|
|
852
800
|
|
|
853
|
-
var styles$
|
|
801
|
+
var styles$f = {"container":"NumberStepper-module_container__WSGlU","header":"NumberStepper-module_header__qXI1Y","icon":"NumberStepper-module_icon__vHgsw","label":"NumberStepper-module_label__AYr3g","stepper":"NumberStepper-module_stepper__oQhTp","disabled":"NumberStepper-module_disabled__kGB-g","button":"NumberStepper-module_button__YcjRt","buttonIcon":"NumberStepper-module_buttonIcon__odXec","valueContainer":"NumberStepper-module_valueContainer__87w2D","valueWrapper":"NumberStepper-module_valueWrapper__TH65N","value":"NumberStepper-module_value__BxJeD","limits":"NumberStepper-module_limits__-UrRE","limit":"NumberStepper-module_limit__7nbIP","small":"NumberStepper-module_small__P-k96","large":"NumberStepper-module_large__Lz6lk","outlined":"NumberStepper-module_outlined__CIXv7","filled":"NumberStepper-module_filled__IxOg-","pulse":"NumberStepper-module_pulse__51oUo"};
|
|
854
802
|
|
|
855
803
|
/**
|
|
856
804
|
* NumberStepper Component
|
|
@@ -967,18 +915,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
967
915
|
setDisplayValue(finalValue);
|
|
968
916
|
}, [displayValue, min, max, step, onChange]);
|
|
969
917
|
const containerClasses = [
|
|
970
|
-
styles$
|
|
971
|
-
styles$
|
|
972
|
-
styles$
|
|
973
|
-
disabled && styles$
|
|
918
|
+
styles$f.container,
|
|
919
|
+
styles$f[size],
|
|
920
|
+
styles$f[variant],
|
|
921
|
+
disabled && styles$f.disabled,
|
|
974
922
|
className
|
|
975
923
|
].filter(Boolean).join(' ');
|
|
976
924
|
const isDecrementDisabled = disabled || value <= min;
|
|
977
925
|
const isIncrementDisabled = disabled || value >= max;
|
|
978
|
-
return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$
|
|
926
|
+
return (jsxRuntime.jsxs("div", { className: containerClasses, children: [(label || icon) && (jsxRuntime.jsxs("div", { className: styles$f.header, children: [icon && jsxRuntime.jsx("span", { className: styles$f.icon, children: icon }), label && jsxRuntime.jsx("label", { className: styles$f.label, children: label })] })), jsxRuntime.jsxs("div", { className: styles$f.stepper, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, children: [jsxRuntime.jsx(framerMotion.motion.button, { className: styles$f.button, onClick: handleDecrement, disabled: isDecrementDisabled, whileTap: !isDecrementDisabled ? { scale: 0.9 } : undefined, animate: isDecrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Decrease value", children: showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$f.buttonIcon, children: "\u2212" })) : (jsxRuntime.jsx("svg", { className: styles$f.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$f.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$f.valueWrapper, children: jsxRuntime.jsx("input", { type: "text", className: styles$f.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$f.button, onClick: handleIncrement, disabled: isIncrementDisabled, whileTap: !isIncrementDisabled ? { scale: 0.9 } : undefined, animate: isIncrementing ? { scale: [1, 1.2, 1] } : undefined, transition: { duration: 0.2 }, "aria-label": "Increase value", children: showPlusMinus ? (jsxRuntime.jsx("span", { className: styles$f.buttonIcon, children: "+" })) : (jsxRuntime.jsx("svg", { className: styles$f.buttonIcon, viewBox: "0 0 24 24", fill: "none", children: jsxRuntime.jsx("path", { d: "M9 18L15 12L9 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })) })] }), (min !== -Infinity || max !== Infinity) && (jsxRuntime.jsxs("div", { className: styles$f.limits, children: [jsxRuntime.jsx("span", { className: styles$f.limit, children: min !== -Infinity && `Min: ${min}` }), jsxRuntime.jsx("span", { className: styles$f.limit, children: max !== Infinity && `Max: ${max}` })] }))] }));
|
|
979
927
|
};
|
|
980
928
|
|
|
981
|
-
var styles$
|
|
929
|
+
var styles$e = {"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"};
|
|
982
930
|
|
|
983
931
|
/**
|
|
984
932
|
* ToggleButton Component
|
|
@@ -1016,18 +964,18 @@ var styles$c = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
1016
964
|
*/
|
|
1017
965
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
1018
966
|
const buttonClasses = [
|
|
1019
|
-
styles$
|
|
1020
|
-
styles$
|
|
1021
|
-
styles$
|
|
1022
|
-
active && styles$
|
|
1023
|
-
active && styles$
|
|
1024
|
-
disabled && styles$
|
|
1025
|
-
animation !== 'none' && styles$
|
|
967
|
+
styles$e.button,
|
|
968
|
+
styles$e[size],
|
|
969
|
+
styles$e[variant],
|
|
970
|
+
active && styles$e.active,
|
|
971
|
+
active && styles$e[`active-${activeColor}`],
|
|
972
|
+
disabled && styles$e.disabled,
|
|
973
|
+
animation !== 'none' && styles$e[`animation-${animation}`],
|
|
1026
974
|
className
|
|
1027
975
|
].filter(Boolean).join(' ');
|
|
1028
976
|
const labelClasses = [
|
|
1029
|
-
styles$
|
|
1030
|
-
hideLabelOnMobile && styles$
|
|
977
|
+
styles$e.label,
|
|
978
|
+
hideLabelOnMobile && styles$e.hideMobile
|
|
1031
979
|
].filter(Boolean).join(' ');
|
|
1032
980
|
const iconVariants = {
|
|
1033
981
|
scale: {
|
|
@@ -1079,10 +1027,99 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1079
1027
|
}
|
|
1080
1028
|
}
|
|
1081
1029
|
};
|
|
1082
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$
|
|
1030
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: buttonClasses, onClick: onClick, disabled: disabled, whileHover: !disabled ? { scale: 1.05 } : undefined, whileTap: !disabled ? { scale: 0.95 } : undefined, title: tooltip, "aria-pressed": active, "aria-label": label, children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$e.background, variants: backgroundVariants, initial: "inactive", animate: active ? "active" : "inactive" }), jsxRuntime.jsxs("div", { className: styles$e.content, children: [icon && (jsxRuntime.jsx(framerMotion.motion.div, { className: styles$e.iconWrapper, variants: iconVariants[animation], initial: "inactive", animate: active ? "active" : "inactive", transition: { duration: 0.3 }, children: typeof icon === 'string' ? (jsxRuntime.jsx("span", { className: styles$e.icon, children: icon })) : (jsxRuntime.jsx("div", { className: styles$e.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$e.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$e.ripple, initial: { scale: 0, opacity: 0.5 }, animate: { scale: 2, opacity: 0 }, exit: { scale: 0, opacity: 0 }, transition: { duration: 0.6 } })) })] }));
|
|
1083
1031
|
};
|
|
1084
1032
|
|
|
1085
|
-
var styles$
|
|
1033
|
+
var styles$d = {"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"};
|
|
1034
|
+
|
|
1035
|
+
/**
|
|
1036
|
+
* ArrayInput component - Versatile dynamic list manager
|
|
1037
|
+
*
|
|
1038
|
+
* @component
|
|
1039
|
+
* @description
|
|
1040
|
+
* A flexible component that can handle both simple string arrays and complex object arrays.
|
|
1041
|
+
* Users can add, remove, and edit items dynamically. Supports custom field configurations
|
|
1042
|
+
* for complex data structures.
|
|
1043
|
+
*
|
|
1044
|
+
* @example
|
|
1045
|
+
* // Simple string array
|
|
1046
|
+
* <ArrayInput
|
|
1047
|
+
* label="Tags"
|
|
1048
|
+
* values={tags}
|
|
1049
|
+
* onChange={setTags}
|
|
1050
|
+
* placeholder="Enter tag"
|
|
1051
|
+
* />
|
|
1052
|
+
*
|
|
1053
|
+
* @example
|
|
1054
|
+
* // Complex object array
|
|
1055
|
+
* <ArrayInput
|
|
1056
|
+
* type="complex"
|
|
1057
|
+
* label="Social Links"
|
|
1058
|
+
* values={links}
|
|
1059
|
+
* onChange={setLinks}
|
|
1060
|
+
* fields={[
|
|
1061
|
+
* { name: 'label', label: 'Label', placeholder: 'GitHub' },
|
|
1062
|
+
* { name: 'url', label: 'URL', type: 'url', placeholder: 'https://github.com/...' }
|
|
1063
|
+
* ]}
|
|
1064
|
+
* />
|
|
1065
|
+
*/
|
|
1066
|
+
function ArrayInput(props) {
|
|
1067
|
+
if (props.type === 'complex') {
|
|
1068
|
+
return jsxRuntime.jsx(ComplexArrayInput, { ...props });
|
|
1069
|
+
}
|
|
1070
|
+
return jsxRuntime.jsx(SimpleArrayInput, { ...props });
|
|
1071
|
+
}
|
|
1072
|
+
// Simple string array implementation
|
|
1073
|
+
function SimpleArrayInput({ label, values, onChange, placeholder, itemStyle, inputStyle, multiline = false, rows = 3 }) {
|
|
1074
|
+
const handleChange = (index, value) => {
|
|
1075
|
+
const newValues = [...values];
|
|
1076
|
+
newValues[index] = value;
|
|
1077
|
+
onChange(newValues);
|
|
1078
|
+
};
|
|
1079
|
+
const handleAdd = () => {
|
|
1080
|
+
onChange([...values, '']);
|
|
1081
|
+
};
|
|
1082
|
+
const handleRemove = (index) => {
|
|
1083
|
+
const newValues = values.filter((_, i) => i !== index);
|
|
1084
|
+
onChange(newValues);
|
|
1085
|
+
};
|
|
1086
|
+
return (jsxRuntime.jsxs("div", { className: styles$d.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$d.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$d.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
1087
|
+
duration: 0.3,
|
|
1088
|
+
ease: "easeInOut",
|
|
1089
|
+
layout: { duration: 0.2 }
|
|
1090
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$d.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$d.input, style: inputStyle })) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$d.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" }) }) })] }, `item-${index}`))) }) }), jsxRuntime.jsxs(Button, { variant: "primary", size: "small", onClick: handleAdd, className: styles$d.addButton, children: ["Add ", label] })] }));
|
|
1091
|
+
}
|
|
1092
|
+
// Complex object array implementation
|
|
1093
|
+
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
|
|
1094
|
+
const handleChange = (index, field, value) => {
|
|
1095
|
+
const newValues = [...values];
|
|
1096
|
+
newValues[index] = { ...newValues[index], [field]: value };
|
|
1097
|
+
onChange(newValues);
|
|
1098
|
+
};
|
|
1099
|
+
const handleAdd = () => {
|
|
1100
|
+
const newItem = fields.reduce((acc, field) => {
|
|
1101
|
+
return { ...acc, [field.name]: '' };
|
|
1102
|
+
}, {});
|
|
1103
|
+
onChange([...values, newItem]);
|
|
1104
|
+
};
|
|
1105
|
+
const handleRemove = (index) => {
|
|
1106
|
+
const newValues = values.filter((_, i) => i !== index);
|
|
1107
|
+
onChange(newValues);
|
|
1108
|
+
};
|
|
1109
|
+
const generateKey = (item, index) => {
|
|
1110
|
+
if (getKey)
|
|
1111
|
+
return getKey(item, index);
|
|
1112
|
+
// Generate key from all field values
|
|
1113
|
+
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
1114
|
+
};
|
|
1115
|
+
return (jsxRuntime.jsxs("div", { className: styles$d.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$d.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$d.arrayInputItem} ${fields.length > 1 ? styles$d.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
1116
|
+
duration: 0.3,
|
|
1117
|
+
ease: "easeInOut",
|
|
1118
|
+
layout: { duration: 0.2 }
|
|
1119
|
+
}, children: [jsxRuntime.jsx("div", { className: styles$d.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$d.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: "primary", size: "small", onClick: handleAdd, className: styles$d.addButton, children: ["Add ", label] })] }));
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
var styles$c = {"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"};
|
|
1086
1123
|
|
|
1087
1124
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
1088
1125
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
@@ -1167,15 +1204,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1167
1204
|
};
|
|
1168
1205
|
const getVariantClass = () => {
|
|
1169
1206
|
if (isSaving)
|
|
1170
|
-
return styles$
|
|
1207
|
+
return styles$c.primary;
|
|
1171
1208
|
if (isEditMode) {
|
|
1172
|
-
return hasUnsavedChanges ? styles$
|
|
1209
|
+
return hasUnsavedChanges ? styles$c.success : styles$c.secondary;
|
|
1173
1210
|
}
|
|
1174
|
-
return styles$
|
|
1211
|
+
return styles$c.primary;
|
|
1175
1212
|
};
|
|
1176
1213
|
const getIcon = () => {
|
|
1177
1214
|
if (isSaving) {
|
|
1178
|
-
return jsxRuntime.jsx("div", { className: styles$
|
|
1215
|
+
return jsxRuntime.jsx("div", { className: styles$c.loader });
|
|
1179
1216
|
}
|
|
1180
1217
|
if (isEditMode) {
|
|
1181
1218
|
return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
|
|
@@ -1190,14 +1227,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1190
1227
|
}
|
|
1191
1228
|
return "Enter edit mode";
|
|
1192
1229
|
};
|
|
1193
|
-
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$
|
|
1230
|
+
return (jsxRuntime.jsx(framerMotion.motion.button, { ref: fabRef, className: `${styles$c.fab} ${getVariantClass()} ${isMobile ? styles$c.draggable : ''} ${isDragging ? styles$c.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: {
|
|
1194
1231
|
type: "spring",
|
|
1195
1232
|
stiffness: 260,
|
|
1196
1233
|
damping: 20
|
|
1197
1234
|
}, children: getIcon() }));
|
|
1198
1235
|
};
|
|
1199
1236
|
|
|
1200
|
-
var styles$
|
|
1237
|
+
var styles$b = {"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"};
|
|
1201
1238
|
|
|
1202
1239
|
// Default filter options for backwards compatibility
|
|
1203
1240
|
const defaultFilterOptions = [
|
|
@@ -1390,18 +1427,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1390
1427
|
return text || '';
|
|
1391
1428
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1392
1429
|
const parts = text.split(regex);
|
|
1393
|
-
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$
|
|
1430
|
+
return parts.map((part, index) => regex.test(part) ? (jsxRuntime.jsx("mark", { className: styles$b.highlight, children: part }, index)) : (part));
|
|
1394
1431
|
};
|
|
1395
|
-
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$
|
|
1432
|
+
return (jsxRuntime.jsxs("div", { ref: searchRef, className: `${styles$b.searchContainer} ${className || ''}`, children: [jsxRuntime.jsxs("div", { className: styles$b.searchInputWrapper, children: [jsxRuntime.jsx(FiSearch, { className: styles$b.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$b.searchInput, "aria-label": "Search", "aria-expanded": isDropdownOpen, "aria-controls": "search-results", "aria-autocomplete": "list" }), query && (jsxRuntime.jsx(framerMotion.motion.button, { className: styles$b.clearButton, onClick: handleClear, whileHover: { scale: 1.1 }, whileTap: { scale: 0.9 }, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: 0.8 }, children: jsxRuntime.jsx(FiX, {}) })), showFilter && (jsxRuntime.jsx("select", { value: filter, onChange: (e) => setFilter(e.target.value), className: styles$b.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$b.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$b.loadingState, children: [jsxRuntime.jsx("div", { className: styles$b.spinner }), jsxRuntime.jsx("span", { children: "Searching..." })] })) : results.length === 0 ? (jsxRuntime.jsxs("div", { className: styles$b.emptyState, children: ["No results found for \"", query, "\""] })) : (jsxRuntime.jsx("div", { className: styles$b.resultsGroups, children: Object.entries(groupedResults).map(([type, groupResults]) => {
|
|
1396
1433
|
const Icon = entityIcons[type];
|
|
1397
|
-
return (jsxRuntime.jsxs("div", { className: styles$
|
|
1434
|
+
return (jsxRuntime.jsxs("div", { className: styles$b.resultGroup, children: [jsxRuntime.jsxs("div", { className: styles$b.groupHeader, children: [Icon && jsxRuntime.jsx(Icon, { className: styles$b.groupIcon }), jsxRuntime.jsx("span", { className: styles$b.groupTitle, children: type.charAt(0).toUpperCase() + type.slice(1) }), jsxRuntime.jsx("span", { className: styles$b.groupCount, children: groupResults.length })] }), jsxRuntime.jsx("div", { className: styles$b.groupResults, children: groupResults.map((result) => {
|
|
1398
1435
|
const globalIndex = results.indexOf(result);
|
|
1399
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$
|
|
1436
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { "data-result-index": globalIndex, className: `${styles$b.resultItem} ${highlightedIndex === globalIndex ? styles$b.highlighted : ''}`, onClick: () => handleResultClick(result), whileHover: { x: 4 }, onMouseEnter: () => setHighlightedIndex(globalIndex), children: [jsxRuntime.jsxs("div", { className: styles$b.resultContent, children: [jsxRuntime.jsx("div", { className: styles$b.resultTitle, children: highlightMatch(result.title || 'Untitled', query) }), result.subtitle && (jsxRuntime.jsx("div", { className: styles$b.resultSubtitle, children: highlightMatch(result.subtitle, query) }))] }), result.meta && (jsxRuntime.jsx("div", { className: styles$b.resultMeta, children: result.meta }))] }, `${result.type}-${result.id}`));
|
|
1400
1437
|
}) })] }, type));
|
|
1401
1438
|
}) })) })) })] }));
|
|
1402
1439
|
};
|
|
1403
1440
|
|
|
1404
|
-
var styles$
|
|
1441
|
+
var styles$a = {"modalOverlay":"TimePickerModal-module_modalOverlay__Cbq5-","modalContent":"TimePickerModal-module_modalContent__e6py2","modalHeader":"TimePickerModal-module_modalHeader__XhTgK","closeButton":"TimePickerModal-module_closeButton__qsRAG","timeDisplay":"TimePickerModal-module_timeDisplay__voGP4","pickerContainer":"TimePickerModal-module_pickerContainer__4qn3r","pickerColumn":"TimePickerModal-module_pickerColumn__0-kWf","pickerLabel":"TimePickerModal-module_pickerLabel__e7zQ2","pickerScroll":"TimePickerModal-module_pickerScroll__5Dcvw","pickerItem":"TimePickerModal-module_pickerItem__n8sC2","selected":"TimePickerModal-module_selected__oQA8Z","pickerDivider":"TimePickerModal-module_pickerDivider__eg83F","modalActions":"TimePickerModal-module_modalActions__eJRWU","cancelButton":"TimePickerModal-module_cancelButton__zri81","confirmButton":"TimePickerModal-module_confirmButton__q2p3Q"};
|
|
1405
1442
|
|
|
1406
1443
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1407
1444
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1422,10 +1459,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1422
1459
|
};
|
|
1423
1460
|
if (!isOpen)
|
|
1424
1461
|
return null;
|
|
1425
|
-
return (jsxRuntime.jsx("div", { className: styles$
|
|
1462
|
+
return (jsxRuntime.jsx("div", { className: styles$a.modalOverlay, onClick: onClose, children: jsxRuntime.jsxs("div", { className: styles$a.modalContent, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsxs("div", { className: styles$a.modalHeader, children: [jsxRuntime.jsx("h3", { children: "Select Time" }), jsxRuntime.jsx("button", { className: styles$a.closeButton, onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(FiX, {}) })] }), jsxRuntime.jsxs("div", { className: styles$a.timeDisplay, children: [selectedHour.toString().padStart(2, '0'), ":", selectedMinute.toString().padStart(2, '0')] }), jsxRuntime.jsxs("div", { className: styles$a.pickerContainer, children: [jsxRuntime.jsxs("div", { className: styles$a.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$a.pickerLabel, children: "Hours" }), jsxRuntime.jsx("div", { className: styles$a.pickerScroll, children: Array.from({ length: 24 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$a.pickerItem} ${selectedHour === i ? styles$a.selected : ''}`, onClick: () => setSelectedHour(i), children: i.toString().padStart(2, '0') }, i))) })] }), jsxRuntime.jsx("div", { className: styles$a.pickerDivider, children: ":" }), jsxRuntime.jsxs("div", { className: styles$a.pickerColumn, children: [jsxRuntime.jsx("div", { className: styles$a.pickerLabel, children: "Minutes" }), jsxRuntime.jsx("div", { className: styles$a.pickerScroll, children: Array.from({ length: 60 }, (_, i) => (jsxRuntime.jsx("button", { className: `${styles$a.pickerItem} ${selectedMinute === i ? styles$a.selected : ''}`, onClick: () => setSelectedMinute(i), children: i.toString().padStart(2, '0') }, i))) })] })] }), jsxRuntime.jsxs("div", { className: styles$a.modalActions, children: [jsxRuntime.jsx("button", { className: styles$a.cancelButton, onClick: onClose, children: "Cancel" }), jsxRuntime.jsx("button", { className: styles$a.confirmButton, onClick: handleConfirm, children: "Confirm" })] })] }) }));
|
|
1426
1463
|
}
|
|
1427
1464
|
|
|
1428
|
-
var styles$
|
|
1465
|
+
var styles$9 = {"timeInput":"TimeInput-module_timeInput__h1DpT","label":"TimeInput-module_label__d4rZw","required":"TimeInput-module_required__rc1vq","inputWrapper":"TimeInput-module_inputWrapper__4RPAn","textInput":"TimeInput-module_textInput__M3eBZ","clockButton":"TimeInput-module_clockButton__3qoub","error":"TimeInput-module_error__gJnpk","success":"TimeInput-module_success__np-lF","loading":"TimeInput-module_loading__Wb1DC","disabled":"TimeInput-module_disabled__wxiZ-"};
|
|
1429
1466
|
|
|
1430
1467
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1431
1468
|
const [showPicker, setShowPicker] = React.useState(false);
|
|
@@ -1478,18 +1515,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1478
1515
|
}
|
|
1479
1516
|
};
|
|
1480
1517
|
const getContainerClassName = () => {
|
|
1481
|
-
const classes = [styles$
|
|
1518
|
+
const classes = [styles$9.timeInput];
|
|
1482
1519
|
if (error)
|
|
1483
|
-
classes.push(styles$
|
|
1520
|
+
classes.push(styles$9.error);
|
|
1484
1521
|
if (success)
|
|
1485
|
-
classes.push(styles$
|
|
1522
|
+
classes.push(styles$9.success);
|
|
1486
1523
|
if (loading)
|
|
1487
|
-
classes.push(styles$
|
|
1524
|
+
classes.push(styles$9.loading);
|
|
1488
1525
|
if (disabled)
|
|
1489
|
-
classes.push(styles$
|
|
1526
|
+
classes.push(styles$9.disabled);
|
|
1490
1527
|
return classes.join(' ');
|
|
1491
1528
|
};
|
|
1492
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$
|
|
1529
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: getContainerClassName(), children: [jsxRuntime.jsxs("label", { className: styles$9.label, children: [label, required && jsxRuntime.jsx("span", { className: styles$9.required, children: "*" })] }), jsxRuntime.jsxs("div", { className: styles$9.inputWrapper, children: [jsxRuntime.jsx("input", { type: "text", value: value, onChange: (e) => handleTextChange(e.target.value), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, className: styles$9.textInput, maxLength: 5, disabled: disabled || loading, "aria-invalid": error, "aria-required": required, inputMode: "numeric", pattern: "[0-9:]*" }), jsxRuntime.jsx("button", { type: "button", onClick: handleClockClick, className: styles$9.clockButton, title: "Open time picker", disabled: disabled || loading, "aria-label": "Open time picker", children: jsxRuntime.jsx(FiClock, { size: 20 }) })] })] }), jsxRuntime.jsx(TimePickerModal, { isOpen: showPicker, onClose: () => setShowPicker(false), value: value, onChange: onChange })] }));
|
|
1493
1530
|
}
|
|
1494
1531
|
|
|
1495
1532
|
const ThemeContext = React.createContext(undefined);
|
|
@@ -1501,7 +1538,7 @@ const useTheme = () => {
|
|
|
1501
1538
|
return context;
|
|
1502
1539
|
};
|
|
1503
1540
|
|
|
1504
|
-
var styles$
|
|
1541
|
+
var styles$8 = {"button":"ThemeSwitcher-module_button__VfRjU","iconWrapper":"ThemeSwitcher-module_iconWrapper__FpHo8","label":"ThemeSwitcher-module_label__2Hfkp","toggle":"ThemeSwitcher-module_toggle__ATXx4","toggleTrack":"ThemeSwitcher-module_toggleTrack__x28Rv","toggleThumb":"ThemeSwitcher-module_toggleThumb__V8QeN","dropdown":"ThemeSwitcher-module_dropdown__3qLdt","dropdownTrigger":"ThemeSwitcher-module_dropdownTrigger__UzYV5","dropdownMenu":"ThemeSwitcher-module_dropdownMenu__3L5hT","dropdownItem":"ThemeSwitcher-module_dropdownItem__inw-K","active":"ThemeSwitcher-module_active__OHP19","icon":"ThemeSwitcher-module_icon__iRZiJ","text":"ThemeSwitcher-module_text__OCOoA"};
|
|
1505
1542
|
|
|
1506
1543
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
|
|
1507
1544
|
// Try to use internal context if available, otherwise use props
|
|
@@ -1529,16 +1566,16 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1529
1566
|
if (variant === 'toggle') {
|
|
1530
1567
|
// Simple toggle between light and dark
|
|
1531
1568
|
const isDark = theme.includes('dark');
|
|
1532
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1569
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$8.toggle} ${className}`, onClick: () => setTheme(isDark ? 'light' : 'dark'), whileTap: { scale: 0.95 }, "aria-label": "Toggle theme", children: [jsxRuntime.jsx(framerMotion.motion.div, { className: styles$8.toggleTrack, animate: { backgroundColor: isDark ? 'var(--color-primary)' : 'var(--color-border)' }, children: jsxRuntime.jsx(framerMotion.motion.div, { className: styles$8.toggleThumb, animate: { x: isDark ? 24 : 0 }, transition: { type: 'spring', stiffness: 500, damping: 30 }, children: isDark ? jsxRuntime.jsx(FiMoon, { size: 14 }) : jsxRuntime.jsx(FiSun, { size: 14 }) }) }), showLabel && jsxRuntime.jsx("span", { className: styles$8.label, children: isDark ? 'Dark' : 'Light' })] }));
|
|
1533
1570
|
}
|
|
1534
1571
|
if (variant === 'dropdown') {
|
|
1535
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
1572
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$8.dropdown} ${className}`, children: [jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$8.dropdownTrigger, whileTap: { scale: 0.98 }, children: [currentThemeData.icon, showLabel && jsxRuntime.jsx("span", { className: styles$8.label, children: currentThemeData.label })] }), jsxRuntime.jsx(framerMotion.motion.div, { className: styles$8.dropdownMenu, initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, children: themes.map((t) => (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$8.dropdownItem} ${theme === t.value ? styles$8.active : ''}`, onClick: () => setTheme(t.value), whileHover: { x: 4 }, whileTap: { scale: 0.98 }, children: [jsxRuntime.jsx("span", { className: styles$8.icon, children: t.icon }), jsxRuntime.jsx("span", { className: styles$8.text, children: t.label })] }, t.value))) })] }));
|
|
1536
1573
|
}
|
|
1537
1574
|
// Default button variant - cycles through themes
|
|
1538
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1575
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$8.button} ${className}`, onClick: () => {
|
|
1539
1576
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1540
1577
|
setTheme(themes[nextIndex].value);
|
|
1541
|
-
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$
|
|
1578
|
+
}, whileTap: { scale: 0.95 }, whileHover: { scale: 1.05 }, "aria-label": `Current theme: ${currentThemeData.label}. Click to change.`, children: [jsxRuntime.jsx(framerMotion.motion.div, { initial: { rotate: -180, opacity: 0 }, animate: { rotate: 0, opacity: 1 }, exit: { rotate: 180, opacity: 0 }, transition: { duration: 0.3 }, className: styles$8.iconWrapper, children: currentThemeData.icon }, theme), showLabel && jsxRuntime.jsx("span", { className: styles$8.label, children: currentThemeData.label })] }));
|
|
1542
1579
|
};
|
|
1543
1580
|
|
|
1544
1581
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -1546,7 +1583,7 @@ function SiJira (props) {
|
|
|
1546
1583
|
return GenIcon({"attr":{"role":"img","viewBox":"0 0 24 24"},"child":[{"tag":"path","attr":{"d":"M11.571 11.513H0a5.218 5.218 0 0 0 5.232 5.215h2.13v2.057A5.215 5.215 0 0 0 12.575 24V12.518a1.005 1.005 0 0 0-1.005-1.005zm5.723-5.756H5.736a5.215 5.215 0 0 0 5.215 5.214h2.129v2.058a5.218 5.218 0 0 0 5.215 5.214V6.758a1.001 1.001 0 0 0-1.001-1.001zM23.013 0H11.455a5.215 5.215 0 0 0 5.215 5.215h2.129v2.057A5.215 5.215 0 0 0 24 12.483V1.005A1.001 1.001 0 0 0 23.013 0Z"},"child":[]}]})(props);
|
|
1547
1584
|
}
|
|
1548
1585
|
|
|
1549
|
-
var styles$
|
|
1586
|
+
var styles$7 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1550
1587
|
|
|
1551
1588
|
// Default tabs for backwards compatibility
|
|
1552
1589
|
const defaultTabs = [
|
|
@@ -1557,19 +1594,220 @@ const defaultTabs = [
|
|
|
1557
1594
|
];
|
|
1558
1595
|
const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
|
|
1559
1596
|
const tabs = customTabs ?? defaultTabs;
|
|
1560
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
1597
|
+
return (jsxRuntime.jsx("div", { className: `${styles$7.tabs} ${className}`, children: tabs.map((tab) => {
|
|
1561
1598
|
const isActive = activeTab === tab.id;
|
|
1562
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$
|
|
1599
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: styles$7.tab, "data-active": isActive, onClick: () => onTabChange(tab.id), style: { position: 'relative' }, children: [jsxRuntime.jsx(framerMotion.motion.div, { animate: {
|
|
1563
1600
|
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1564
1601
|
}, transition: {
|
|
1565
1602
|
rotate: {
|
|
1566
1603
|
duration: 0.5,
|
|
1567
1604
|
ease: 'easeInOut'
|
|
1568
1605
|
}
|
|
1569
|
-
}, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$
|
|
1606
|
+
}, children: tab.icon && (typeof tab.icon === 'function' ? (jsxRuntime.jsx("span", { className: styles$7.tabIcon, children: React.createElement(tab.icon) })) : (jsxRuntime.jsx("span", { className: styles$7.tabIcon, children: tab.icon }))) }), jsxRuntime.jsx("span", { children: tab.label })] }, tab.id));
|
|
1570
1607
|
}) }));
|
|
1571
1608
|
};
|
|
1572
1609
|
|
|
1610
|
+
var styles$6 = {"calendar":"Calendar-module_calendar__3mIJS","loading":"Calendar-module_loading__59Z9-","loadingSpinner":"Calendar-module_loadingSpinner__7MXqV","header":"Calendar-module_header__cZHNA","navigation":"Calendar-module_navigation__PGkpY","navButton":"Calendar-module_navButton__kOe-w","title":"Calendar-module_title__oJZ7m","controls":"Calendar-module_controls__i1Z38","todayButton":"Calendar-module_todayButton__Ac9zc","viewToggle":"Calendar-module_viewToggle__Fhg2t","viewButton":"Calendar-module_viewButton__J2WY6","active":"Calendar-module_active__lIqH-","weekDays":"Calendar-module_weekDays__4J-8f","weekNumberHeader":"Calendar-module_weekNumberHeader__xhKbB","weekDay":"Calendar-module_weekDay__cg8Gr","daysGrid":"Calendar-module_daysGrid__ER0GM","weekView":"Calendar-module_weekView__bdtGs","dayCell":"Calendar-module_dayCell__TV-HR","dayNumber":"Calendar-module_dayNumber__ICH-X","today":"Calendar-module_today__eGuUU","events":"Calendar-module_events__qdbs7","event":"Calendar-module_event__Q1Zq3","eventTitle":"Calendar-module_eventTitle__XU7Wd","eventTime":"Calendar-module_eventTime__pMGEB","otherMonth":"Calendar-module_otherMonth__r6VJK","weekNumber":"Calendar-module_weekNumber__nlo50","completed":"Calendar-module_completed__B-SHI","completedIcon":"Calendar-module_completedIcon__-oDZ9","moreEvents":"Calendar-module_moreEvents__TIKaT","emptyState":"Calendar-module_emptyState__2fcj7"};
|
|
1611
|
+
|
|
1612
|
+
/**
|
|
1613
|
+
* Calendar component - A flexible, reusable calendar for displaying events
|
|
1614
|
+
*
|
|
1615
|
+
* @component
|
|
1616
|
+
* @description
|
|
1617
|
+
* A highly customizable calendar component that can display events in month or week view.
|
|
1618
|
+
* Supports custom event types, colors, icons, and localization. Perfect for scheduling,
|
|
1619
|
+
* project management, habit tracking, or any date-based data visualization.
|
|
1620
|
+
*
|
|
1621
|
+
* @example
|
|
1622
|
+
* // Basic usage
|
|
1623
|
+
* <Calendar
|
|
1624
|
+
* events={myEvents}
|
|
1625
|
+
* onEventClick={handleEventClick}
|
|
1626
|
+
* viewMode="month"
|
|
1627
|
+
* />
|
|
1628
|
+
*
|
|
1629
|
+
* @example
|
|
1630
|
+
* // With custom configuration
|
|
1631
|
+
* <Calendar
|
|
1632
|
+
* events={projectEvents}
|
|
1633
|
+
* config={{
|
|
1634
|
+
* eventColors: { task: '#4A90E2', meeting: '#7ED321' },
|
|
1635
|
+
* maxEventsPerDay: 5,
|
|
1636
|
+
* mondayStart: true
|
|
1637
|
+
* }}
|
|
1638
|
+
* onEventClick={handleEventClick}
|
|
1639
|
+
* />
|
|
1640
|
+
*/
|
|
1641
|
+
function Calendar({ events, onEventClick, onDateClick, viewMode = 'month', initialDate = new Date(), config = {}, className = '', style = {}, loading = false, emptyState }) {
|
|
1642
|
+
const [currentDate, setCurrentDate] = React.useState(initialDate);
|
|
1643
|
+
const [currentViewMode, setCurrentViewMode] = React.useState(viewMode);
|
|
1644
|
+
const { eventColors = {}, iconRenderer, maxEventsPerDay = 3, mondayStart = false, showWeekNumbers = false, dateFormat = { month: 'long', year: 'numeric' }, locale = 'en-US', dayLabels, monthNames } = config;
|
|
1645
|
+
const defaultDayLabels = mondayStart
|
|
1646
|
+
? ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
1647
|
+
: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
|
|
1648
|
+
const finalDayLabels = dayLabels || defaultDayLabels;
|
|
1649
|
+
const calendarData = React.useMemo(() => {
|
|
1650
|
+
const year = currentDate.getFullYear();
|
|
1651
|
+
const month = currentDate.getMonth();
|
|
1652
|
+
let startDate;
|
|
1653
|
+
let endDate;
|
|
1654
|
+
let displayTitle;
|
|
1655
|
+
if (currentViewMode === 'week') {
|
|
1656
|
+
startDate = new Date(currentDate);
|
|
1657
|
+
const day = startDate.getDay();
|
|
1658
|
+
const diff = mondayStart
|
|
1659
|
+
? startDate.getDate() - day + (day === 0 ? -6 : 1)
|
|
1660
|
+
: startDate.getDate() - day;
|
|
1661
|
+
startDate = new Date(startDate.setDate(diff));
|
|
1662
|
+
startDate.setHours(0, 0, 0, 0);
|
|
1663
|
+
endDate = new Date(startDate);
|
|
1664
|
+
endDate.setDate(endDate.getDate() + 6);
|
|
1665
|
+
const weekStart = startDate.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
|
|
1666
|
+
const weekEnd = endDate.toLocaleDateString(locale, { day: 'numeric', month: 'short' });
|
|
1667
|
+
displayTitle = `${weekStart} - ${weekEnd}`;
|
|
1668
|
+
}
|
|
1669
|
+
else {
|
|
1670
|
+
const firstDay = new Date(year, month, 1);
|
|
1671
|
+
const lastDay = new Date(year, month + 1, 0);
|
|
1672
|
+
startDate = new Date(firstDay);
|
|
1673
|
+
const firstDayWeek = mondayStart
|
|
1674
|
+
? (firstDay.getDay() + 6) % 7
|
|
1675
|
+
: firstDay.getDay();
|
|
1676
|
+
startDate.setDate(startDate.getDate() - firstDayWeek);
|
|
1677
|
+
endDate = new Date(lastDay);
|
|
1678
|
+
const lastDayWeek = mondayStart
|
|
1679
|
+
? (lastDay.getDay() + 6) % 7
|
|
1680
|
+
: lastDay.getDay();
|
|
1681
|
+
endDate.setDate(endDate.getDate() + (6 - lastDayWeek));
|
|
1682
|
+
if (monthNames && monthNames[month]) {
|
|
1683
|
+
displayTitle = `${monthNames[month]} ${year}`;
|
|
1684
|
+
}
|
|
1685
|
+
else {
|
|
1686
|
+
displayTitle = currentDate.toLocaleDateString(locale, dateFormat);
|
|
1687
|
+
}
|
|
1688
|
+
}
|
|
1689
|
+
const days = [];
|
|
1690
|
+
const current = new Date(startDate);
|
|
1691
|
+
while (current <= endDate) {
|
|
1692
|
+
days.push(new Date(current));
|
|
1693
|
+
current.setDate(current.getDate() + 1);
|
|
1694
|
+
}
|
|
1695
|
+
return { days, displayTitle };
|
|
1696
|
+
}, [currentDate, currentViewMode, mondayStart, locale, dateFormat, monthNames]);
|
|
1697
|
+
const getDayEvents = (day) => {
|
|
1698
|
+
const dayEvents = events.filter(event => {
|
|
1699
|
+
const eventDate = new Date(event.date);
|
|
1700
|
+
return eventDate.toDateString() === day.toDateString();
|
|
1701
|
+
});
|
|
1702
|
+
// Sort events by time in week view
|
|
1703
|
+
if (currentViewMode === 'week') {
|
|
1704
|
+
return dayEvents.sort((a, b) => {
|
|
1705
|
+
const timeA = a.time ? convertTimeToMinutes(a.time) : 999999;
|
|
1706
|
+
const timeB = b.time ? convertTimeToMinutes(b.time) : 999999;
|
|
1707
|
+
return timeA - timeB;
|
|
1708
|
+
});
|
|
1709
|
+
}
|
|
1710
|
+
return dayEvents;
|
|
1711
|
+
};
|
|
1712
|
+
const convertTimeToMinutes = (time) => {
|
|
1713
|
+
const [hours, minutes] = time.split(':').map(Number);
|
|
1714
|
+
return hours * 60 + minutes;
|
|
1715
|
+
};
|
|
1716
|
+
const handlePrevious = () => {
|
|
1717
|
+
const newDate = new Date(currentDate);
|
|
1718
|
+
if (currentViewMode === 'week') {
|
|
1719
|
+
newDate.setDate(newDate.getDate() - 7);
|
|
1720
|
+
}
|
|
1721
|
+
else {
|
|
1722
|
+
newDate.setMonth(newDate.getMonth() - 1);
|
|
1723
|
+
}
|
|
1724
|
+
setCurrentDate(newDate);
|
|
1725
|
+
};
|
|
1726
|
+
const handleNext = () => {
|
|
1727
|
+
const newDate = new Date(currentDate);
|
|
1728
|
+
if (currentViewMode === 'week') {
|
|
1729
|
+
newDate.setDate(newDate.getDate() + 7);
|
|
1730
|
+
}
|
|
1731
|
+
else {
|
|
1732
|
+
newDate.setMonth(newDate.getMonth() + 1);
|
|
1733
|
+
}
|
|
1734
|
+
setCurrentDate(newDate);
|
|
1735
|
+
};
|
|
1736
|
+
const handleToday = () => {
|
|
1737
|
+
setCurrentDate(new Date());
|
|
1738
|
+
};
|
|
1739
|
+
const getEventColor = (event) => {
|
|
1740
|
+
if (event.color)
|
|
1741
|
+
return event.color;
|
|
1742
|
+
if (event.type && eventColors[event.type])
|
|
1743
|
+
return eventColors[event.type];
|
|
1744
|
+
// Default color scheme based on priority
|
|
1745
|
+
const defaultColors = {
|
|
1746
|
+
high: '#FF4444',
|
|
1747
|
+
medium: '#FFA500',
|
|
1748
|
+
low: '#4A90E2'
|
|
1749
|
+
};
|
|
1750
|
+
if (event.priority && defaultColors[event.priority]) {
|
|
1751
|
+
return defaultColors[event.priority];
|
|
1752
|
+
}
|
|
1753
|
+
return '#4A90E2'; // Default blue
|
|
1754
|
+
};
|
|
1755
|
+
const handleEventClick = (event) => {
|
|
1756
|
+
if (onEventClick) {
|
|
1757
|
+
onEventClick(event);
|
|
1758
|
+
}
|
|
1759
|
+
};
|
|
1760
|
+
const handleDateClick = (date) => {
|
|
1761
|
+
if (onDateClick) {
|
|
1762
|
+
onDateClick(date);
|
|
1763
|
+
}
|
|
1764
|
+
};
|
|
1765
|
+
const isToday = (date) => {
|
|
1766
|
+
const today = new Date();
|
|
1767
|
+
return date.toDateString() === today.toDateString();
|
|
1768
|
+
};
|
|
1769
|
+
const isCurrentMonth = (date) => {
|
|
1770
|
+
return date.getMonth() === currentDate.getMonth();
|
|
1771
|
+
};
|
|
1772
|
+
const getWeekNumber = (date) => {
|
|
1773
|
+
const start = new Date(date.getFullYear(), 0, 1);
|
|
1774
|
+
const diff = date.getTime() - start.getTime();
|
|
1775
|
+
const oneWeek = 1000 * 60 * 60 * 24 * 7;
|
|
1776
|
+
return Math.floor(diff / oneWeek) + 1;
|
|
1777
|
+
};
|
|
1778
|
+
if (loading) {
|
|
1779
|
+
return (jsxRuntime.jsx("div", { className: `${styles$6.calendar} ${styles$6.loading} ${className}`, style: style, children: jsxRuntime.jsx("div", { className: styles$6.loadingSpinner, children: "Loading..." }) }));
|
|
1780
|
+
}
|
|
1781
|
+
return (jsxRuntime.jsxs("div", { className: `${styles$6.calendar} ${className}`, style: style, children: [jsxRuntime.jsxs("div", { className: styles$6.header, children: [jsxRuntime.jsxs("div", { className: styles$6.navigation, children: [jsxRuntime.jsx("button", { onClick: handlePrevious, className: styles$6.navButton, "aria-label": "Previous", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "15,18 9,12 15,6" }) }) }), jsxRuntime.jsx("h3", { className: styles$6.title, children: calendarData.displayTitle }), jsxRuntime.jsx("button", { onClick: handleNext, className: styles$6.navButton, "aria-label": "Next", children: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "9,6 15,12 9,18" }) }) })] }), jsxRuntime.jsxs("div", { className: styles$6.controls, children: [jsxRuntime.jsx("button", { onClick: handleToday, className: styles$6.todayButton, children: "Today" }), jsxRuntime.jsxs("div", { className: styles$6.viewToggle, children: [jsxRuntime.jsx("button", { className: `${styles$6.viewButton} ${currentViewMode === 'month' ? styles$6.active : ''}`, onClick: () => setCurrentViewMode('month'), children: "Month" }), jsxRuntime.jsx("button", { className: `${styles$6.viewButton} ${currentViewMode === 'week' ? styles$6.active : ''}`, onClick: () => setCurrentViewMode('week'), children: "Week" })] })] })] }), jsxRuntime.jsxs("div", { className: styles$6.weekDays, children: [showWeekNumbers && jsxRuntime.jsx("div", { className: styles$6.weekNumberHeader, children: "Week" }), finalDayLabels.map((day) => (jsxRuntime.jsx("div", { className: styles$6.weekDay, children: day }, day)))] }), jsxRuntime.jsx("div", { className: `${styles$6.daysGrid} ${currentViewMode === 'week' ? styles$6.weekView : ''}`, children: calendarData.days.map((day, index) => {
|
|
1782
|
+
const dayEvents = getDayEvents(day);
|
|
1783
|
+
const dayIsToday = isToday(day);
|
|
1784
|
+
const isInCurrentMonth = currentViewMode === 'week' || isCurrentMonth(day);
|
|
1785
|
+
const isWeekStart = showWeekNumbers && (index % 7 === 0);
|
|
1786
|
+
return (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$6.dayCell} ${dayIsToday ? styles$6.today : ''} ${!isInCurrentMonth ? styles$6.otherMonth : ''}`, initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, transition: {
|
|
1787
|
+
duration: 0.3,
|
|
1788
|
+
delay: index * 0.02,
|
|
1789
|
+
ease: "easeOut"
|
|
1790
|
+
}, onClick: () => handleDateClick(day), children: [isWeekStart && (jsxRuntime.jsx("div", { className: styles$6.weekNumber, children: getWeekNumber(day) })), jsxRuntime.jsx("div", { className: styles$6.dayNumber, children: day.getDate() }), dayEvents.length > 0 && (jsxRuntime.jsxs("div", { className: styles$6.events, children: [dayEvents.slice(0, maxEventsPerDay).map((event, eventIndex) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$6.event} ${event.status === 'completed' ? styles$6.completed : ''}`, style: {
|
|
1791
|
+
backgroundColor: getEventColor(event),
|
|
1792
|
+
opacity: event.status === 'completed' ? 0.7 : 1
|
|
1793
|
+
}, onClick: (e) => {
|
|
1794
|
+
e.stopPropagation();
|
|
1795
|
+
handleEventClick(event);
|
|
1796
|
+
}, initial: { opacity: 0, x: -10 }, animate: { opacity: 1, x: 0 }, transition: {
|
|
1797
|
+
duration: 0.2,
|
|
1798
|
+
delay: eventIndex * 0.05,
|
|
1799
|
+
ease: "easeOut"
|
|
1800
|
+
}, whileHover: {
|
|
1801
|
+
scale: 1.02,
|
|
1802
|
+
y: -1,
|
|
1803
|
+
transition: { duration: 0.1 }
|
|
1804
|
+
}, whileTap: {
|
|
1805
|
+
scale: 0.98,
|
|
1806
|
+
transition: { duration: 0.1 }
|
|
1807
|
+
}, children: [iconRenderer && iconRenderer(event), jsxRuntime.jsxs("span", { className: styles$6.eventTitle, children: [event.time && (jsxRuntime.jsx("span", { className: styles$6.eventTime, children: event.time })), event.title] }), event.status === 'completed' && (jsxRuntime.jsx("svg", { className: styles$6.completedIcon, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: jsxRuntime.jsx("polyline", { points: "20,6 9,17 4,12" }) }))] }, event.id))), dayEvents.length > maxEventsPerDay && (jsxRuntime.jsxs("div", { className: styles$6.moreEvents, children: ["+", dayEvents.length - maxEventsPerDay, " more"] }))] })), dayEvents.length === 0 && emptyState && (jsxRuntime.jsx("div", { className: styles$6.emptyState, children: emptyState }))] }, `${day.getFullYear()}-${day.getMonth()}-${day.getDate()}`));
|
|
1808
|
+
}) })] }));
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1573
1811
|
var desktopStyles = {"navbar":"Navbar-module_navbar__-SNiN","navbarSidebar":"Navbar-module_navbarSidebar__RVVL8","navbarTop":"Navbar-module_navbarTop__MLI-S","navList":"Navbar-module_navList__764oY","navItem":"Navbar-module_navItem__cbeLP","navbarMinimal":"Navbar-module_navbarMinimal__7gs0n","navLogo":"Navbar-module_navLogo__y0AxI","logoContainer":"Navbar-module_logoContainer__zJG3x","logoImage":"Navbar-module_logoImage__1Ptmz","logoPlaceholder":"Navbar-module_logoPlaceholder__aIREi","logoContent":"Navbar-module_logoContent__CjPyL","logoText":"Navbar-module_logoText__bTwI0","logoSubtitle":"Navbar-module_logoSubtitle__UA95I","subNavItem":"Navbar-module_subNavItem__WN9is","navLink":"Navbar-module_navLink__I-45k","active":"Navbar-module_active__tLLqx","activeBackground":"Navbar-module_activeBackground__ikyOn","navIcon":"Navbar-module_navIcon__uU4yD","activeIcon":"Navbar-module_activeIcon__omRDk","navText":"Navbar-module_navText__4e0cK","activeText":"Navbar-module_activeText__zSzJC","navBadge":"Navbar-module_navBadge__mLur9","chevron":"Navbar-module_chevron__nmRNk","subNavList":"Navbar-module_subNavList__YsOQP","navFooter":"Navbar-module_navFooter__p1wMO","mobileMenuButton":"Navbar-module_mobileMenuButton__BrALw","mobileBackdrop":"Navbar-module_mobileBackdrop__bgxCV","mobileMenuOpen":"Navbar-module_mobileMenuOpen__oICVa"};
|
|
1574
1812
|
|
|
1575
1813
|
var mobileStyles = {"navbar":"Navbar-mobile-module_navbar__-shkE","navLogo":"Navbar-mobile-module_navLogo__7Gnna","navList":"Navbar-mobile-module_navList__FBo8I","navItem":"Navbar-mobile-module_navItem__-9E9-","navLink":"Navbar-mobile-module_navLink__A8n8F","active":"Navbar-mobile-module_active__h3ajz","activeBackground":"Navbar-mobile-module_activeBackground__btXAN","navIcon":"Navbar-mobile-module_navIcon__4L17v","activeIcon":"Navbar-mobile-module_activeIcon__A8GF-","navText":"Navbar-mobile-module_navText__ewf-i","activeText":"Navbar-mobile-module_activeText__fNqcU","navBadge":"Navbar-mobile-module_navBadge__YccGx","chevron":"Navbar-mobile-module_chevron__nBPqn","subNavList":"Navbar-mobile-module_subNavList__8tINc","navFooter":"Navbar-mobile-module_navFooter__yijWu","mobileMenuButton":"Navbar-mobile-module_mobileMenuButton__Dx3t8","mobileBackdrop":"Navbar-mobile-module_mobileBackdrop__biYng","navbarTop":"Navbar-mobile-module_navbarTop__oyfPE","navbarMinimal":"Navbar-mobile-module_navbarMinimal__cudny"};
|
|
@@ -2582,6 +2820,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
2582
2820
|
exports.ArrayInput = ArrayInput;
|
|
2583
2821
|
exports.BooleansHeatmap = BooleansHeatmap;
|
|
2584
2822
|
exports.Button = Button;
|
|
2823
|
+
exports.Calendar = Calendar;
|
|
2585
2824
|
exports.Card = Card;
|
|
2586
2825
|
exports.Checkbox = Checkbox;
|
|
2587
2826
|
exports.DateInput = DateInput;
|