@stfrigerio/sito-template 0.1.9 → 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/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/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 +460 -237
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +460 -236
- 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,158 +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","removeButton":"ArrayInput-module_removeButton__khhdR","addButton":"ArrayInput-module_addButton__10o-9"};
|
|
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, itemStyle, inputStyle }) {
|
|
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 }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: styles$k.arrayInputItem, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
276
|
-
duration: 0.3,
|
|
277
|
-
ease: "easeInOut",
|
|
278
|
-
layout: { duration: 0.2 }
|
|
279
|
-
}, 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, style: inputStyle }) }), jsxRuntime.jsx(Button, { variant: "ghost", size: "small", onClick: () => handleRemove(index), "aria-label": "Remove item", className: styles$k.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$k.addButton, children: ["Add ", label] })] }));
|
|
280
|
-
}
|
|
281
|
-
// Complex object array implementation
|
|
282
|
-
function ComplexArrayInput({ label, values, onChange, fields, getKey, itemStyle, inputStyle }) {
|
|
283
|
-
const handleChange = (index, field, value) => {
|
|
284
|
-
const newValues = [...values];
|
|
285
|
-
newValues[index] = { ...newValues[index], [field]: value };
|
|
286
|
-
onChange(newValues);
|
|
287
|
-
};
|
|
288
|
-
const handleAdd = () => {
|
|
289
|
-
const newItem = fields.reduce((acc, field) => {
|
|
290
|
-
return { ...acc, [field.name]: '' };
|
|
291
|
-
}, {});
|
|
292
|
-
onChange([...values, newItem]);
|
|
293
|
-
};
|
|
294
|
-
const handleRemove = (index) => {
|
|
295
|
-
const newValues = values.filter((_, i) => i !== index);
|
|
296
|
-
onChange(newValues);
|
|
297
|
-
};
|
|
298
|
-
const generateKey = (item, index) => {
|
|
299
|
-
if (getKey)
|
|
300
|
-
return getKey(item, index);
|
|
301
|
-
// Generate key from all field values
|
|
302
|
-
return fields.map(f => item[f.name] || '').join('-') + `-${index}`;
|
|
303
|
-
};
|
|
304
|
-
return (jsxRuntime.jsxs("div", { className: styles$k.arrayInput, children: [jsxRuntime.jsx("h3", { className: styles$k.arrayInputLabel, children: label }), jsxRuntime.jsx("div", { children: jsxRuntime.jsx(framerMotion.AnimatePresence, { children: values.map((value, index) => (jsxRuntime.jsxs(framerMotion.motion.div, { className: `${styles$k.arrayInputItem} ${fields.length > 1 ? styles$k.complexItem : ''}`, style: itemStyle, initial: { opacity: 0, y: 10 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0 }, transition: {
|
|
305
|
-
duration: 0.3,
|
|
306
|
-
ease: "easeInOut",
|
|
307
|
-
layout: { duration: 0.2 }
|
|
308
|
-
}, children: [jsxRuntime.jsx("div", { className: styles$k.fieldsWrapper, children: fields.map((field) => (jsxRuntime.jsx("div", { style: inputStyle, children: 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$k.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$k.addButton, children: ["Add ", label] })] }));
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
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"};
|
|
312
194
|
|
|
313
195
|
/**
|
|
314
196
|
* Checkbox component - Modern interactive checkbox with animations
|
|
@@ -352,7 +234,7 @@ const Checkbox = ({ checked, onChange, label, disabled = false, indeterminate =
|
|
|
352
234
|
checkboxRef.current.indeterminate = indeterminate;
|
|
353
235
|
}
|
|
354
236
|
}, [indeterminate]);
|
|
355
|
-
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 })] }));
|
|
356
238
|
};
|
|
357
239
|
|
|
358
240
|
var DefaultContext = {
|
|
@@ -475,7 +357,7 @@ const parseEuropeanDate = (dateString) => {
|
|
|
475
357
|
return '';
|
|
476
358
|
};
|
|
477
359
|
|
|
478
|
-
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"};
|
|
479
361
|
|
|
480
362
|
/**
|
|
481
363
|
* DateInput component - European format date picker with manual input support
|
|
@@ -562,19 +444,19 @@ function DateInput({ label, value, onChange, placeholder = "25/12/2024", onFocus
|
|
|
562
444
|
}
|
|
563
445
|
};
|
|
564
446
|
const getClassName = () => {
|
|
565
|
-
const classes = [styles$
|
|
447
|
+
const classes = [styles$l.dateInput];
|
|
566
448
|
if (error)
|
|
567
|
-
classes.push(styles$
|
|
449
|
+
classes.push(styles$l.error);
|
|
568
450
|
if (success)
|
|
569
|
-
classes.push(styles$
|
|
451
|
+
classes.push(styles$l.success);
|
|
570
452
|
if (loading)
|
|
571
|
-
classes.push(styles$
|
|
453
|
+
classes.push(styles$l.loading);
|
|
572
454
|
return classes.join(' ');
|
|
573
455
|
};
|
|
574
|
-
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 })] })] }));
|
|
575
457
|
}
|
|
576
458
|
|
|
577
|
-
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"};
|
|
578
460
|
|
|
579
461
|
/**
|
|
580
462
|
* SearchableDropdown component - Modern filterable dropdown with animations
|
|
@@ -679,23 +561,23 @@ function SearchableDropdown({ label, value, onChange, options, placeholder = "Se
|
|
|
679
561
|
}
|
|
680
562
|
};
|
|
681
563
|
const getTriggerClassName = () => {
|
|
682
|
-
const classes = [styles$
|
|
564
|
+
const classes = [styles$k.dropdownTrigger];
|
|
683
565
|
if (isOpen)
|
|
684
|
-
classes.push(styles$
|
|
566
|
+
classes.push(styles$k.open);
|
|
685
567
|
if (loading)
|
|
686
|
-
classes.push(styles$
|
|
568
|
+
classes.push(styles$k.loading);
|
|
687
569
|
if (error)
|
|
688
|
-
classes.push(styles$
|
|
570
|
+
classes.push(styles$k.error);
|
|
689
571
|
return classes.join(' ');
|
|
690
572
|
};
|
|
691
|
-
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) => {
|
|
692
574
|
const isSelected = value === opt.value;
|
|
693
575
|
const isHighlighted = highlightedIndex === index;
|
|
694
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { type: "button", className: `${styles$
|
|
695
|
-
}), 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" }))] })] })) })] }));
|
|
696
578
|
}
|
|
697
579
|
|
|
698
|
-
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"};
|
|
699
581
|
|
|
700
582
|
/**
|
|
701
583
|
* SelectInput component - Styled dropdown selector with flexible option format
|
|
@@ -732,23 +614,23 @@ var styles$g = {"selectInput":"SelectInput-module_selectInput__s6zEg","selectWra
|
|
|
732
614
|
*/
|
|
733
615
|
function SelectInput({ label, value, onChange, options, placeholder = "Select...", disabled = false, error = false, success = false, loading = false, required = false }) {
|
|
734
616
|
const getClassName = () => {
|
|
735
|
-
const classes = [styles$
|
|
617
|
+
const classes = [styles$j.selectInput];
|
|
736
618
|
if (error)
|
|
737
|
-
classes.push(styles$
|
|
619
|
+
classes.push(styles$j.error);
|
|
738
620
|
if (success)
|
|
739
|
-
classes.push(styles$
|
|
621
|
+
classes.push(styles$j.success);
|
|
740
622
|
if (loading)
|
|
741
|
-
classes.push(styles$
|
|
623
|
+
classes.push(styles$j.loading);
|
|
742
624
|
return classes.join(' ');
|
|
743
625
|
};
|
|
744
|
-
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 => {
|
|
745
627
|
const optionValue = typeof opt === 'string' ? opt : opt.value;
|
|
746
628
|
const optionLabel = typeof opt === 'string' ? opt : opt.label;
|
|
747
629
|
return (jsxRuntime.jsx("option", { value: optionValue, children: optionLabel }, optionValue));
|
|
748
|
-
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$
|
|
630
|
+
})] }), jsxRuntime.jsx(FiChevronDown, { className: styles$j.selectIcon })] })] }));
|
|
749
631
|
}
|
|
750
632
|
|
|
751
|
-
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-"};
|
|
752
634
|
|
|
753
635
|
/**
|
|
754
636
|
* TextArea component - Multi-line text input with character counting
|
|
@@ -780,37 +662,88 @@ var styles$f = {"textareaContainer":"TextArea-module_textareaContainer__AquFj","
|
|
|
780
662
|
* required
|
|
781
663
|
* />
|
|
782
664
|
*/
|
|
783
|
-
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 }) {
|
|
784
666
|
const textareaId = `textarea-${Math.random().toString(36).substr(2, 9)}`;
|
|
785
667
|
const getContainerClassName = () => {
|
|
786
|
-
const classes = [styles$
|
|
668
|
+
const classes = [styles$i.textareaContainer];
|
|
787
669
|
if (error)
|
|
788
|
-
classes.push(styles$
|
|
670
|
+
classes.push(styles$i.error);
|
|
789
671
|
if (success)
|
|
790
|
-
classes.push(styles$
|
|
672
|
+
classes.push(styles$i.success);
|
|
791
673
|
if (loading)
|
|
792
|
-
classes.push(styles$
|
|
674
|
+
classes.push(styles$i.loading);
|
|
793
675
|
if (focusMode)
|
|
794
|
-
classes.push(styles$
|
|
676
|
+
classes.push(styles$i.focusMode);
|
|
677
|
+
if (compact)
|
|
678
|
+
classes.push(styles$i.compact);
|
|
795
679
|
return classes.join(' ');
|
|
796
680
|
};
|
|
797
681
|
const getCharCountClassName = () => {
|
|
798
682
|
if (!maxLength)
|
|
799
|
-
return styles$
|
|
800
|
-
const classes = [styles$
|
|
683
|
+
return styles$i.characterCount;
|
|
684
|
+
const classes = [styles$i.characterCount];
|
|
801
685
|
const percentage = (value.length / maxLength) * 100;
|
|
802
686
|
if (percentage >= 100) {
|
|
803
|
-
classes.push(styles$
|
|
687
|
+
classes.push(styles$i.atLimit);
|
|
804
688
|
}
|
|
805
689
|
else if (percentage >= 80) {
|
|
806
|
-
classes.push(styles$
|
|
690
|
+
classes.push(styles$i.nearLimit);
|
|
807
691
|
}
|
|
808
692
|
return classes.join(' ');
|
|
809
693
|
};
|
|
810
|
-
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 }))] }));
|
|
811
744
|
}
|
|
812
745
|
|
|
813
|
-
var styles$
|
|
746
|
+
var styles$g = {"toggleContainer":"Toggle-module_toggleContainer__QxqQb","toggleButton":"Toggle-module_toggleButton__WUUf-","active":"Toggle-module_active__fX6Io"};
|
|
814
747
|
|
|
815
748
|
/**
|
|
816
749
|
* Toggle Component
|
|
@@ -862,10 +795,10 @@ function Toggle(props) {
|
|
|
862
795
|
justifyContent: 'center',
|
|
863
796
|
...style
|
|
864
797
|
};
|
|
865
|
-
return (jsxRuntime.jsxs("div", { className: `${styles$
|
|
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] })] }));
|
|
866
799
|
}
|
|
867
800
|
|
|
868
|
-
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"};
|
|
869
802
|
|
|
870
803
|
/**
|
|
871
804
|
* NumberStepper Component
|
|
@@ -982,18 +915,18 @@ const NumberStepper = ({ value, onChange, min = -Infinity, max = Infinity, step
|
|
|
982
915
|
setDisplayValue(finalValue);
|
|
983
916
|
}, [displayValue, min, max, step, onChange]);
|
|
984
917
|
const containerClasses = [
|
|
985
|
-
styles$
|
|
986
|
-
styles$
|
|
987
|
-
styles$
|
|
988
|
-
disabled && styles$
|
|
918
|
+
styles$f.container,
|
|
919
|
+
styles$f[size],
|
|
920
|
+
styles$f[variant],
|
|
921
|
+
disabled && styles$f.disabled,
|
|
989
922
|
className
|
|
990
923
|
].filter(Boolean).join(' ');
|
|
991
924
|
const isDecrementDisabled = disabled || value <= min;
|
|
992
925
|
const isIncrementDisabled = disabled || value >= max;
|
|
993
|
-
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}` })] }))] }));
|
|
994
927
|
};
|
|
995
928
|
|
|
996
|
-
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"};
|
|
997
930
|
|
|
998
931
|
/**
|
|
999
932
|
* ToggleButton Component
|
|
@@ -1031,18 +964,18 @@ var styles$c = {"button":"ToggleButton-module_button__DTuyY","background":"Toggl
|
|
|
1031
964
|
*/
|
|
1032
965
|
const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = 'medium', variant = 'default', activeColor = 'primary', showCheckmark = false, animation = 'scale', className = '', tooltip, hideLabelOnMobile = false, }) => {
|
|
1033
966
|
const buttonClasses = [
|
|
1034
|
-
styles$
|
|
1035
|
-
styles$
|
|
1036
|
-
styles$
|
|
1037
|
-
active && styles$
|
|
1038
|
-
active && styles$
|
|
1039
|
-
disabled && styles$
|
|
1040
|
-
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}`],
|
|
1041
974
|
className
|
|
1042
975
|
].filter(Boolean).join(' ');
|
|
1043
976
|
const labelClasses = [
|
|
1044
|
-
styles$
|
|
1045
|
-
hideLabelOnMobile && styles$
|
|
977
|
+
styles$e.label,
|
|
978
|
+
hideLabelOnMobile && styles$e.hideMobile
|
|
1046
979
|
].filter(Boolean).join(' ');
|
|
1047
980
|
const iconVariants = {
|
|
1048
981
|
scale: {
|
|
@@ -1094,10 +1027,99 @@ const ToggleButton = ({ active, onClick, icon, label, disabled = false, size = '
|
|
|
1094
1027
|
}
|
|
1095
1028
|
}
|
|
1096
1029
|
};
|
|
1097
|
-
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 } })) })] }));
|
|
1098
1031
|
};
|
|
1099
1032
|
|
|
1100
|
-
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"};
|
|
1101
1123
|
|
|
1102
1124
|
const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = false, onEnterEditMode, onExitEditMode, position = { bottom: 32, right: 32 } }) => {
|
|
1103
1125
|
const [isMobile, setIsMobile] = React.useState(false);
|
|
@@ -1182,15 +1204,15 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1182
1204
|
};
|
|
1183
1205
|
const getVariantClass = () => {
|
|
1184
1206
|
if (isSaving)
|
|
1185
|
-
return styles$
|
|
1207
|
+
return styles$c.primary;
|
|
1186
1208
|
if (isEditMode) {
|
|
1187
|
-
return hasUnsavedChanges ? styles$
|
|
1209
|
+
return hasUnsavedChanges ? styles$c.success : styles$c.secondary;
|
|
1188
1210
|
}
|
|
1189
|
-
return styles$
|
|
1211
|
+
return styles$c.primary;
|
|
1190
1212
|
};
|
|
1191
1213
|
const getIcon = () => {
|
|
1192
1214
|
if (isSaving) {
|
|
1193
|
-
return jsxRuntime.jsx("div", { className: styles$
|
|
1215
|
+
return jsxRuntime.jsx("div", { className: styles$c.loader });
|
|
1194
1216
|
}
|
|
1195
1217
|
if (isEditMode) {
|
|
1196
1218
|
return hasUnsavedChanges ? jsxRuntime.jsx(lucideReact.Check, { size: 24 }) : jsxRuntime.jsx(lucideReact.X, { size: 24 });
|
|
@@ -1205,14 +1227,14 @@ const EditFAB = ({ canEdit, isEditMode, hasUnsavedChanges = false, isSaving = fa
|
|
|
1205
1227
|
}
|
|
1206
1228
|
return "Enter edit mode";
|
|
1207
1229
|
};
|
|
1208
|
-
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: {
|
|
1209
1231
|
type: "spring",
|
|
1210
1232
|
stiffness: 260,
|
|
1211
1233
|
damping: 20
|
|
1212
1234
|
}, children: getIcon() }));
|
|
1213
1235
|
};
|
|
1214
1236
|
|
|
1215
|
-
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"};
|
|
1216
1238
|
|
|
1217
1239
|
// Default filter options for backwards compatibility
|
|
1218
1240
|
const defaultFilterOptions = [
|
|
@@ -1405,18 +1427,18 @@ const SearchBar = ({ className, placeholder = "Search (Ctrl+Space)...", onSearch
|
|
|
1405
1427
|
return text || '';
|
|
1406
1428
|
const regex = new RegExp(`(${highlight.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
1407
1429
|
const parts = text.split(regex);
|
|
1408
|
-
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));
|
|
1409
1431
|
};
|
|
1410
|
-
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]) => {
|
|
1411
1433
|
const Icon = entityIcons[type];
|
|
1412
|
-
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) => {
|
|
1413
1435
|
const globalIndex = results.indexOf(result);
|
|
1414
|
-
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}`));
|
|
1415
1437
|
}) })] }, type));
|
|
1416
1438
|
}) })) })) })] }));
|
|
1417
1439
|
};
|
|
1418
1440
|
|
|
1419
|
-
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"};
|
|
1420
1442
|
|
|
1421
1443
|
function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
1422
1444
|
const [hours, minutes] = value ? value.split(':').map(Number) : [12, 0];
|
|
@@ -1437,10 +1459,10 @@ function TimePickerModal({ isOpen, onClose, value, onChange }) {
|
|
|
1437
1459
|
};
|
|
1438
1460
|
if (!isOpen)
|
|
1439
1461
|
return null;
|
|
1440
|
-
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" })] })] }) }));
|
|
1441
1463
|
}
|
|
1442
1464
|
|
|
1443
|
-
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-"};
|
|
1444
1466
|
|
|
1445
1467
|
function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onBlur, error = false, success = false, loading = false, disabled = false, required = false }) {
|
|
1446
1468
|
const [showPicker, setShowPicker] = React.useState(false);
|
|
@@ -1493,18 +1515,18 @@ function TimeInput({ label, value, onChange, placeholder = "14:30", onFocus, onB
|
|
|
1493
1515
|
}
|
|
1494
1516
|
};
|
|
1495
1517
|
const getContainerClassName = () => {
|
|
1496
|
-
const classes = [styles$
|
|
1518
|
+
const classes = [styles$9.timeInput];
|
|
1497
1519
|
if (error)
|
|
1498
|
-
classes.push(styles$
|
|
1520
|
+
classes.push(styles$9.error);
|
|
1499
1521
|
if (success)
|
|
1500
|
-
classes.push(styles$
|
|
1522
|
+
classes.push(styles$9.success);
|
|
1501
1523
|
if (loading)
|
|
1502
|
-
classes.push(styles$
|
|
1524
|
+
classes.push(styles$9.loading);
|
|
1503
1525
|
if (disabled)
|
|
1504
|
-
classes.push(styles$
|
|
1526
|
+
classes.push(styles$9.disabled);
|
|
1505
1527
|
return classes.join(' ');
|
|
1506
1528
|
};
|
|
1507
|
-
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 })] }));
|
|
1508
1530
|
}
|
|
1509
1531
|
|
|
1510
1532
|
const ThemeContext = React.createContext(undefined);
|
|
@@ -1516,7 +1538,7 @@ const useTheme = () => {
|
|
|
1516
1538
|
return context;
|
|
1517
1539
|
};
|
|
1518
1540
|
|
|
1519
|
-
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"};
|
|
1520
1542
|
|
|
1521
1543
|
const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '', currentTheme, onThemeChange, themes: customThemes, }) => {
|
|
1522
1544
|
// Try to use internal context if available, otherwise use props
|
|
@@ -1544,16 +1566,16 @@ const ThemeSwitcher = ({ variant = 'button', showLabel = false, className = '',
|
|
|
1544
1566
|
if (variant === 'toggle') {
|
|
1545
1567
|
// Simple toggle between light and dark
|
|
1546
1568
|
const isDark = theme.includes('dark');
|
|
1547
|
-
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' })] }));
|
|
1548
1570
|
}
|
|
1549
1571
|
if (variant === 'dropdown') {
|
|
1550
|
-
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))) })] }));
|
|
1551
1573
|
}
|
|
1552
1574
|
// Default button variant - cycles through themes
|
|
1553
|
-
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$
|
|
1575
|
+
return (jsxRuntime.jsxs(framerMotion.motion.button, { className: `${styles$8.button} ${className}`, onClick: () => {
|
|
1554
1576
|
const nextIndex = (currentThemeIndex + 1) % themes.length;
|
|
1555
1577
|
setTheme(themes[nextIndex].value);
|
|
1556
|
-
}, 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 })] }));
|
|
1557
1579
|
};
|
|
1558
1580
|
|
|
1559
1581
|
// THIS FILE IS AUTO GENERATED
|
|
@@ -1561,7 +1583,7 @@ function SiJira (props) {
|
|
|
1561
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);
|
|
1562
1584
|
}
|
|
1563
1585
|
|
|
1564
|
-
var styles$
|
|
1586
|
+
var styles$7 = {"tabs":"Tabs-module_tabs__Vlvn7","tab":"Tabs-module_tab__uQKim","tabIcon":"Tabs-module_tabIcon__AgN-O"};
|
|
1565
1587
|
|
|
1566
1588
|
// Default tabs for backwards compatibility
|
|
1567
1589
|
const defaultTabs = [
|
|
@@ -1572,19 +1594,220 @@ const defaultTabs = [
|
|
|
1572
1594
|
];
|
|
1573
1595
|
const Tabs = ({ activeTab, onTabChange, tabs: customTabs, className = '' }) => {
|
|
1574
1596
|
const tabs = customTabs ?? defaultTabs;
|
|
1575
|
-
return (jsxRuntime.jsx("div", { className: `${styles$
|
|
1597
|
+
return (jsxRuntime.jsx("div", { className: `${styles$7.tabs} ${className}`, children: tabs.map((tab) => {
|
|
1576
1598
|
const isActive = activeTab === tab.id;
|
|
1577
|
-
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: {
|
|
1578
1600
|
rotate: isActive ? [0, -10, 10, -5, 5, 0] : 0,
|
|
1579
1601
|
}, transition: {
|
|
1580
1602
|
rotate: {
|
|
1581
1603
|
duration: 0.5,
|
|
1582
1604
|
ease: 'easeInOut'
|
|
1583
1605
|
}
|
|
1584
|
-
}, 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));
|
|
1585
1607
|
}) }));
|
|
1586
1608
|
};
|
|
1587
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
|
+
|
|
1588
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"};
|
|
1589
1812
|
|
|
1590
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"};
|
|
@@ -2597,6 +2820,7 @@ const PieChart = ({ data, width = 400, height = 400, title = 'Distribution', sho
|
|
|
2597
2820
|
exports.ArrayInput = ArrayInput;
|
|
2598
2821
|
exports.BooleansHeatmap = BooleansHeatmap;
|
|
2599
2822
|
exports.Button = Button;
|
|
2823
|
+
exports.Calendar = Calendar;
|
|
2600
2824
|
exports.Card = Card;
|
|
2601
2825
|
exports.Checkbox = Checkbox;
|
|
2602
2826
|
exports.DateInput = DateInput;
|