@liiift-studio/mac-os9-ui 0.1.0

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/index.cjs ADDED
@@ -0,0 +1,1625 @@
1
+ 'use strict';
2
+
3
+ var React4 = require('react');
4
+ var jsxRuntime = require('react/jsx-runtime');
5
+
6
+ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
7
+
8
+ var React4__default = /*#__PURE__*/_interopDefault(React4);
9
+
10
+ // src/components/Button/Button.module.css
11
+ var Button_default = {};
12
+ var Button = React4.forwardRef(
13
+ (props, ref) => {
14
+ const {
15
+ variant = "default",
16
+ size = "md",
17
+ disabled = false,
18
+ fullWidth = false,
19
+ loading = false,
20
+ loadingText,
21
+ useCursorLoading = false,
22
+ leftIcon,
23
+ rightIcon,
24
+ iconOnly = false,
25
+ ariaLabel,
26
+ ariaDescribedBy,
27
+ ariaPressed,
28
+ className = "",
29
+ children,
30
+ ...restProps
31
+ } = props;
32
+ const isLink = props.as === "a";
33
+ const classNames = [
34
+ Button_default.button,
35
+ Button_default[`button--${variant}`],
36
+ Button_default[`button--${size}`],
37
+ fullWidth && Button_default["button--full-width"],
38
+ disabled && Button_default["button--disabled"],
39
+ loading && Button_default["button--loading"],
40
+ loading && useCursorLoading && Button_default["button--cursor-loading"],
41
+ iconOnly && Button_default["button--icon-only"],
42
+ (leftIcon || rightIcon) && Button_default["button--with-icon"],
43
+ className
44
+ ].filter(Boolean).join(" ");
45
+ const ariaAttributes = {
46
+ "aria-label": iconOnly ? ariaLabel || (typeof children === "string" ? children : void 0) : ariaLabel,
47
+ "aria-describedby": ariaDescribedBy,
48
+ "aria-pressed": ariaPressed,
49
+ "aria-disabled": disabled || loading,
50
+ "aria-busy": loading
51
+ };
52
+ if (isLink) {
53
+ const { href, target, rel, download, ...linkProps } = restProps;
54
+ let finalRel = rel;
55
+ if (target === "_blank" && !rel) {
56
+ finalRel = "noopener noreferrer";
57
+ }
58
+ const handleClick = (e) => {
59
+ if (disabled || loading) {
60
+ e.preventDefault();
61
+ return;
62
+ }
63
+ linkProps.onClick?.(e);
64
+ };
65
+ return /* @__PURE__ */ jsxRuntime.jsx(
66
+ "a",
67
+ {
68
+ ref,
69
+ href: disabled || loading ? void 0 : href,
70
+ target,
71
+ rel: finalRel,
72
+ download,
73
+ className: classNames,
74
+ ...ariaAttributes,
75
+ ...linkProps,
76
+ onClick: handleClick,
77
+ children: renderButtonContent()
78
+ }
79
+ );
80
+ }
81
+ const {
82
+ type = "button",
83
+ form,
84
+ formAction,
85
+ formMethod,
86
+ formNoValidate,
87
+ formTarget,
88
+ ...buttonProps
89
+ } = restProps;
90
+ return /* @__PURE__ */ jsxRuntime.jsx(
91
+ "button",
92
+ {
93
+ ref,
94
+ type,
95
+ disabled: disabled || loading,
96
+ form,
97
+ formAction,
98
+ formMethod,
99
+ formNoValidate,
100
+ formTarget,
101
+ className: classNames,
102
+ ...ariaAttributes,
103
+ ...buttonProps,
104
+ children: renderButtonContent()
105
+ }
106
+ );
107
+ function renderButtonContent() {
108
+ if (loading) {
109
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
110
+ !useCursorLoading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_default["button__loading-spinner"], "aria-hidden": "true", children: "\u23F3" }),
111
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_default["button__text"], children: loadingText || children })
112
+ ] });
113
+ }
114
+ if (iconOnly) {
115
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_default["button__icon-only"], children });
116
+ }
117
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
118
+ leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_default["button__icon-left"], "aria-hidden": "true", children: leftIcon }),
119
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_default["button__text"], children }),
120
+ rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Button_default["button__icon-right"], "aria-hidden": "true", children: rightIcon })
121
+ ] });
122
+ }
123
+ }
124
+ );
125
+ Button.displayName = "Button";
126
+
127
+ // src/components/Icon/Icon.module.css
128
+ var Icon_default = {};
129
+ var Icon = React4.forwardRef(
130
+ ({ size = "md", children, label, className = "", ...props }, ref) => {
131
+ const classNames = [Icon_default.icon, Icon_default[`icon--${size}`], className].filter(Boolean).join(" ");
132
+ return /* @__PURE__ */ jsxRuntime.jsx(
133
+ "svg",
134
+ {
135
+ ref,
136
+ className: classNames,
137
+ viewBox: "0 0 24 24",
138
+ fill: "currentColor",
139
+ xmlns: "http://www.w3.org/2000/svg",
140
+ "aria-label": label,
141
+ "aria-hidden": !label,
142
+ role: label ? "img" : "presentation",
143
+ ...props,
144
+ children
145
+ }
146
+ );
147
+ }
148
+ );
149
+ Icon.displayName = "Icon";
150
+
151
+ // src/components/IconButton/IconButton.module.css
152
+ var IconButton_default = {};
153
+ var IconButton = React4.forwardRef(
154
+ ({
155
+ icon,
156
+ label,
157
+ labelPosition = "right",
158
+ variant = "default",
159
+ size = "md",
160
+ disabled = false,
161
+ className = "",
162
+ ...props
163
+ }, ref) => {
164
+ const classNames = [
165
+ IconButton_default.iconButton,
166
+ IconButton_default[`iconButton--${variant}`],
167
+ IconButton_default[`iconButton--${size}`],
168
+ label && IconButton_default[`iconButton--with-label`],
169
+ label && IconButton_default[`iconButton--label-${labelPosition}`],
170
+ disabled && IconButton_default["iconButton--disabled"],
171
+ className
172
+ ].filter(Boolean).join(" ");
173
+ return /* @__PURE__ */ jsxRuntime.jsxs(
174
+ "button",
175
+ {
176
+ ref,
177
+ type: "button",
178
+ className: classNames,
179
+ disabled,
180
+ ...props,
181
+ children: [
182
+ label && (labelPosition === "left" || labelPosition === "top") && /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_default.label, children: label }),
183
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_default.icon, children: icon }),
184
+ label && (labelPosition === "right" || labelPosition === "bottom") && /* @__PURE__ */ jsxRuntime.jsx("span", { className: IconButton_default.label, children: label })
185
+ ]
186
+ }
187
+ );
188
+ }
189
+ );
190
+ IconButton.displayName = "IconButton";
191
+
192
+ // src/components/Checkbox/Checkbox.module.css
193
+ var Checkbox_default = {};
194
+ var Checkbox = React4.forwardRef(
195
+ ({
196
+ checked,
197
+ defaultChecked,
198
+ indeterminate = false,
199
+ disabled = false,
200
+ label,
201
+ labelPosition = "right",
202
+ size = "md",
203
+ error = false,
204
+ ariaLabel,
205
+ ariaDescribedBy,
206
+ className = "",
207
+ onChange,
208
+ id,
209
+ ...props
210
+ }, ref) => {
211
+ const inputRef = React4__default.default.useRef(null);
212
+ const combinedRef = ref || inputRef;
213
+ React4__default.default.useEffect(() => {
214
+ if (combinedRef?.current) {
215
+ combinedRef.current.indeterminate = indeterminate;
216
+ }
217
+ }, [indeterminate, combinedRef]);
218
+ const checkboxId = id || React4__default.default.useId();
219
+ const wrapperClassNames = [
220
+ Checkbox_default.wrapper,
221
+ Checkbox_default[`wrapper--${size}`],
222
+ Checkbox_default[`wrapper--label-${labelPosition}`],
223
+ disabled && Checkbox_default["wrapper--disabled"],
224
+ error && Checkbox_default["wrapper--error"],
225
+ className
226
+ ].filter(Boolean).join(" ");
227
+ const checkboxClassNames = [
228
+ Checkbox_default.checkbox,
229
+ Checkbox_default[`checkbox--${size}`],
230
+ indeterminate && Checkbox_default["checkbox--indeterminate"],
231
+ error && Checkbox_default["checkbox--error"]
232
+ ].filter(Boolean).join(" ");
233
+ const labelClassNames = [Checkbox_default.label, Checkbox_default[`label--${size}`]].filter(Boolean).join(" ");
234
+ const ariaAttributes = {
235
+ "aria-label": !label ? ariaLabel : void 0,
236
+ "aria-describedby": ariaDescribedBy,
237
+ "aria-invalid": error,
238
+ "aria-checked": indeterminate ? "mixed" : void 0
239
+ };
240
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClassNames, children: [
241
+ label && labelPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: checkboxId, className: labelClassNames, children: label }),
242
+ /* @__PURE__ */ jsxRuntime.jsx(
243
+ "input",
244
+ {
245
+ ref: combinedRef,
246
+ type: "checkbox",
247
+ id: checkboxId,
248
+ className: checkboxClassNames,
249
+ checked,
250
+ defaultChecked,
251
+ disabled,
252
+ onChange,
253
+ ...ariaAttributes,
254
+ ...props
255
+ }
256
+ ),
257
+ label && labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: checkboxId, className: labelClassNames, children: label })
258
+ ] });
259
+ }
260
+ );
261
+ Checkbox.displayName = "Checkbox";
262
+
263
+ // src/components/Radio/Radio.module.css
264
+ var Radio_default = {};
265
+ var Radio = React4.forwardRef(
266
+ ({
267
+ checked,
268
+ defaultChecked,
269
+ disabled = false,
270
+ label,
271
+ labelPosition = "right",
272
+ size = "md",
273
+ error = false,
274
+ ariaLabel,
275
+ ariaDescribedBy,
276
+ className = "",
277
+ value,
278
+ name,
279
+ onChange,
280
+ id,
281
+ ...props
282
+ }, ref) => {
283
+ const radioId = id || React4__default.default.useId();
284
+ const wrapperClassNames = [
285
+ Radio_default.wrapper,
286
+ Radio_default[`wrapper--${size}`],
287
+ Radio_default[`wrapper--label-${labelPosition}`],
288
+ disabled && Radio_default["wrapper--disabled"],
289
+ error && Radio_default["wrapper--error"],
290
+ className
291
+ ].filter(Boolean).join(" ");
292
+ const radioClassNames = [
293
+ Radio_default.radio,
294
+ Radio_default[`radio--${size}`],
295
+ error && Radio_default["radio--error"]
296
+ ].filter(Boolean).join(" ");
297
+ const labelClassNames = [Radio_default.label, Radio_default[`label--${size}`]].filter(Boolean).join(" ");
298
+ const ariaAttributes = {
299
+ "aria-label": !label ? ariaLabel : void 0,
300
+ "aria-describedby": ariaDescribedBy,
301
+ "aria-invalid": error
302
+ };
303
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClassNames, children: [
304
+ label && labelPosition === "left" && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: radioId, className: labelClassNames, children: label }),
305
+ /* @__PURE__ */ jsxRuntime.jsx(
306
+ "input",
307
+ {
308
+ ref,
309
+ type: "radio",
310
+ id: radioId,
311
+ className: radioClassNames,
312
+ checked,
313
+ defaultChecked,
314
+ disabled,
315
+ value,
316
+ name,
317
+ onChange,
318
+ ...ariaAttributes,
319
+ ...props
320
+ }
321
+ ),
322
+ label && labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: radioId, className: labelClassNames, children: label })
323
+ ] });
324
+ }
325
+ );
326
+ Radio.displayName = "Radio";
327
+
328
+ // src/components/TextField/TextField.module.css
329
+ var TextField_default = {};
330
+ var TextField = React4.forwardRef(
331
+ ({
332
+ label,
333
+ labelPosition = "top",
334
+ size = "md",
335
+ fullWidth = false,
336
+ error = false,
337
+ errorMessage,
338
+ helperText,
339
+ leftIcon,
340
+ rightIcon,
341
+ ariaLabel,
342
+ ariaDescribedBy,
343
+ className = "",
344
+ wrapperClassName = "",
345
+ type = "text",
346
+ id,
347
+ disabled,
348
+ ...props
349
+ }, ref) => {
350
+ const inputId = id || React4__default.default.useId();
351
+ const helperId = `${inputId}-helper`;
352
+ const errorId = `${inputId}-error`;
353
+ const describedByIds = [
354
+ helperText && helperId,
355
+ error && errorMessage && errorId,
356
+ ariaDescribedBy
357
+ ].filter(Boolean).join(" ");
358
+ const wrapperClassNames = [
359
+ TextField_default.wrapper,
360
+ TextField_default[`wrapper--${size}`],
361
+ TextField_default[`wrapper--label-${labelPosition}`],
362
+ fullWidth && TextField_default["wrapper--full-width"],
363
+ disabled && TextField_default["wrapper--disabled"],
364
+ wrapperClassName
365
+ ].filter(Boolean).join(" ");
366
+ const inputWrapperClassNames = [
367
+ TextField_default["input-wrapper"],
368
+ (leftIcon || rightIcon) && TextField_default["input-wrapper--with-icon"],
369
+ leftIcon && TextField_default["input-wrapper--with-left-icon"],
370
+ rightIcon && TextField_default["input-wrapper--with-right-icon"]
371
+ ].filter(Boolean).join(" ");
372
+ const inputClassNames = [
373
+ TextField_default.input,
374
+ TextField_default[`input--${size}`],
375
+ error && TextField_default["input--error"],
376
+ fullWidth && TextField_default["input--full-width"],
377
+ className
378
+ ].filter(Boolean).join(" ");
379
+ const labelClassNames = [TextField_default.label, TextField_default[`label--${size}`]].filter(Boolean).join(" ");
380
+ const ariaAttributes = {
381
+ "aria-label": !label ? ariaLabel : void 0,
382
+ "aria-describedby": describedByIds || void 0,
383
+ "aria-invalid": error
384
+ };
385
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClassNames, children: [
386
+ label && (labelPosition === "top" || labelPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: labelClassNames, children: label }),
387
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapperClassNames, children: [
388
+ leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TextField_default["input-icon-left"], "aria-hidden": "true", children: leftIcon }),
389
+ /* @__PURE__ */ jsxRuntime.jsx(
390
+ "input",
391
+ {
392
+ ref,
393
+ type,
394
+ id: inputId,
395
+ className: inputClassNames,
396
+ disabled,
397
+ ...ariaAttributes,
398
+ ...props
399
+ }
400
+ ),
401
+ rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: TextField_default["input-icon-right"], "aria-hidden": "true", children: rightIcon })
402
+ ] }),
403
+ label && labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: labelClassNames, children: label }),
404
+ helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: TextField_default["helper-text"], children: helperText }),
405
+ error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: TextField_default["error-message"], children: errorMessage })
406
+ ] });
407
+ }
408
+ );
409
+ TextField.displayName = "TextField";
410
+
411
+ // src/components/Select/Select.module.css
412
+ var Select_default = {};
413
+ var Select = React4.forwardRef(
414
+ ({
415
+ label,
416
+ labelPosition = "top",
417
+ size = "md",
418
+ fullWidth = false,
419
+ error = false,
420
+ errorMessage,
421
+ helperText,
422
+ options,
423
+ placeholder,
424
+ ariaLabel,
425
+ ariaDescribedBy,
426
+ className = "",
427
+ wrapperClassName = "",
428
+ id,
429
+ disabled,
430
+ children,
431
+ ...props
432
+ }, ref) => {
433
+ const selectId = id || React4__default.default.useId();
434
+ const helperId = `${selectId}-helper`;
435
+ const errorId = `${selectId}-error`;
436
+ const describedByIds = [
437
+ helperText && helperId,
438
+ error && errorMessage && errorId,
439
+ ariaDescribedBy
440
+ ].filter(Boolean).join(" ");
441
+ const wrapperClassNames = [
442
+ Select_default.wrapper,
443
+ Select_default[`wrapper--${size}`],
444
+ Select_default[`wrapper--label-${labelPosition}`],
445
+ fullWidth && Select_default["wrapper--full-width"],
446
+ disabled && Select_default["wrapper--disabled"],
447
+ wrapperClassName
448
+ ].filter(Boolean).join(" ");
449
+ const selectClassNames = [
450
+ Select_default.select,
451
+ Select_default[`select--${size}`],
452
+ error && Select_default["select--error"],
453
+ fullWidth && Select_default["select--full-width"],
454
+ className
455
+ ].filter(Boolean).join(" ");
456
+ const labelClassNames = [Select_default.label, Select_default[`label--${size}`]].filter(Boolean).join(" ");
457
+ const ariaAttributes = {
458
+ "aria-label": !label ? ariaLabel : void 0,
459
+ "aria-describedby": describedByIds || void 0,
460
+ "aria-invalid": error
461
+ };
462
+ const renderOptions = () => {
463
+ if (options) {
464
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
465
+ placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
466
+ options.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
467
+ ] });
468
+ }
469
+ return children;
470
+ };
471
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: wrapperClassNames, children: [
472
+ label && (labelPosition === "top" || labelPosition === "left") && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: selectId, className: labelClassNames, children: label }),
473
+ /* @__PURE__ */ jsxRuntime.jsx(
474
+ "select",
475
+ {
476
+ ref,
477
+ id: selectId,
478
+ className: selectClassNames,
479
+ disabled,
480
+ ...ariaAttributes,
481
+ ...props,
482
+ children: renderOptions()
483
+ }
484
+ ),
485
+ label && labelPosition === "right" && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: selectId, className: labelClassNames, children: label }),
486
+ helperText && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { id: helperId, className: Select_default["helper-text"], children: helperText }),
487
+ error && errorMessage && /* @__PURE__ */ jsxRuntime.jsx("p", { id: errorId, className: Select_default["error-message"], children: errorMessage })
488
+ ] });
489
+ }
490
+ );
491
+ Select.displayName = "Select";
492
+
493
+ // src/components/Tabs/Tabs.module.css
494
+ var Tabs_default = {};
495
+ var TabPanel = ({ children }) => {
496
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
497
+ };
498
+ TabPanel.displayName = "TabPanel";
499
+ var Tabs = ({
500
+ children,
501
+ defaultActiveTab = 0,
502
+ activeTab: controlledActiveTab,
503
+ onChange,
504
+ size = "md",
505
+ fullWidth = false,
506
+ className = "",
507
+ tabListClassName = "",
508
+ panelClassName = "",
509
+ ariaLabel = "Tabs"
510
+ }) => {
511
+ const [uncontrolledActiveTab, setUncontrolledActiveTab] = React4.useState(defaultActiveTab);
512
+ const isControlled = controlledActiveTab !== void 0;
513
+ const activeTabIndex = isControlled ? controlledActiveTab : uncontrolledActiveTab;
514
+ const tabs = React4.Children.toArray(children).filter(
515
+ (child) => React4.isValidElement(child)
516
+ );
517
+ const handleTabChange = React4.useCallback(
518
+ (index) => {
519
+ const tab = tabs[index];
520
+ if (!tab || tab.props.disabled) return;
521
+ if (!isControlled) {
522
+ setUncontrolledActiveTab(index);
523
+ }
524
+ onChange?.(index, tab.props.value);
525
+ },
526
+ [tabs, isControlled, onChange]
527
+ );
528
+ const handleKeyDown = React4.useCallback(
529
+ (event, currentIndex) => {
530
+ let newIndex = currentIndex;
531
+ switch (event.key) {
532
+ case "ArrowLeft":
533
+ case "ArrowUp":
534
+ event.preventDefault();
535
+ newIndex = currentIndex - 1;
536
+ if (newIndex < 0) newIndex = tabs.length - 1;
537
+ while (tabs[newIndex]?.props.disabled && newIndex !== currentIndex) {
538
+ newIndex--;
539
+ if (newIndex < 0) newIndex = tabs.length - 1;
540
+ }
541
+ break;
542
+ case "ArrowRight":
543
+ case "ArrowDown":
544
+ event.preventDefault();
545
+ newIndex = currentIndex + 1;
546
+ if (newIndex >= tabs.length) newIndex = 0;
547
+ while (tabs[newIndex]?.props.disabled && newIndex !== currentIndex) {
548
+ newIndex++;
549
+ if (newIndex >= tabs.length) newIndex = 0;
550
+ }
551
+ break;
552
+ case "Home":
553
+ event.preventDefault();
554
+ newIndex = 0;
555
+ while (tabs[newIndex]?.props.disabled && newIndex < tabs.length - 1) {
556
+ newIndex++;
557
+ }
558
+ break;
559
+ case "End":
560
+ event.preventDefault();
561
+ newIndex = tabs.length - 1;
562
+ while (tabs[newIndex]?.props.disabled && newIndex > 0) {
563
+ newIndex--;
564
+ }
565
+ break;
566
+ default:
567
+ return;
568
+ }
569
+ handleTabChange(newIndex);
570
+ },
571
+ [tabs, handleTabChange]
572
+ );
573
+ const containerClassNames = [Tabs_default.container, className].filter(Boolean).join(" ");
574
+ const tabListClassNames = [
575
+ Tabs_default.tabList,
576
+ Tabs_default[`tabList--${size}`],
577
+ fullWidth && Tabs_default["tabList--full-width"],
578
+ tabListClassName
579
+ ].filter(Boolean).join(" ");
580
+ const panelContainerClassNames = [
581
+ Tabs_default.panelContainer,
582
+ Tabs_default[`panelContainer--${size}`],
583
+ panelClassName
584
+ ].filter(Boolean).join(" ");
585
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassNames, children: [
586
+ /* @__PURE__ */ jsxRuntime.jsx("div", { role: "tablist", "aria-label": ariaLabel, className: tabListClassNames, children: tabs.map((tab, index) => {
587
+ const isActive = index === activeTabIndex;
588
+ const isDisabled = tab.props.disabled;
589
+ const tabClassNames = [
590
+ Tabs_default.tab,
591
+ Tabs_default[`tab--${size}`],
592
+ isActive && Tabs_default["tab--active"],
593
+ isDisabled && Tabs_default["tab--disabled"],
594
+ fullWidth && Tabs_default["tab--full-width"]
595
+ ].filter(Boolean).join(" ");
596
+ return /* @__PURE__ */ jsxRuntime.jsxs(
597
+ "button",
598
+ {
599
+ role: "tab",
600
+ type: "button",
601
+ "aria-selected": isActive,
602
+ "aria-controls": `panel-${index}`,
603
+ id: `tab-${index}`,
604
+ tabIndex: isActive ? 0 : -1,
605
+ disabled: isDisabled,
606
+ className: tabClassNames,
607
+ onClick: () => handleTabChange(index),
608
+ onKeyDown: (e) => handleKeyDown(e, index),
609
+ children: [
610
+ tab.props.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Tabs_default.tabIcon, children: tab.props.icon }),
611
+ tab.props.label
612
+ ]
613
+ },
614
+ index
615
+ );
616
+ }) }),
617
+ tabs.map((tab, index) => {
618
+ const isActive = index === activeTabIndex;
619
+ return /* @__PURE__ */ jsxRuntime.jsx(
620
+ "div",
621
+ {
622
+ role: "tabpanel",
623
+ id: `panel-${index}`,
624
+ "aria-labelledby": `tab-${index}`,
625
+ hidden: !isActive,
626
+ className: panelContainerClassNames,
627
+ children: isActive && tab.props.children
628
+ },
629
+ index
630
+ );
631
+ })
632
+ ] });
633
+ };
634
+ Tabs.displayName = "Tabs";
635
+
636
+ // src/components/Window/Window.module.css
637
+ var Window_default = {};
638
+ var Window = React4.forwardRef(
639
+ ({
640
+ children,
641
+ title,
642
+ titleBar,
643
+ active = true,
644
+ width = "auto",
645
+ height = "auto",
646
+ className = "",
647
+ contentClassName = "",
648
+ showControls = true,
649
+ onClose,
650
+ onMinimize,
651
+ onMaximize,
652
+ resizable = false
653
+ }, ref) => {
654
+ const windowClassNames = [
655
+ Window_default.window,
656
+ active ? Window_default["window--active"] : Window_default["window--inactive"],
657
+ className
658
+ ].filter(Boolean).join(" ");
659
+ const contentClassNames = [Window_default.content, contentClassName].filter(Boolean).join(" ");
660
+ const windowStyle = {};
661
+ if (width !== "auto") {
662
+ windowStyle.width = typeof width === "number" ? `${width}px` : width;
663
+ }
664
+ if (height !== "auto") {
665
+ windowStyle.height = typeof height === "number" ? `${height}px` : height;
666
+ }
667
+ const renderTitleBar = () => {
668
+ if (titleBar) {
669
+ return titleBar;
670
+ }
671
+ if (title) {
672
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Window_default.titleBar, "data-numControls": [onClose, onMinimize, onMaximize].filter(Boolean).length, children: [
673
+ showControls && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Window_default.controls, children: [
674
+ onClose && /* @__PURE__ */ jsxRuntime.jsx(
675
+ "button",
676
+ {
677
+ type: "button",
678
+ className: Window_default.controlButton,
679
+ onClick: onClose,
680
+ "aria-label": "Close",
681
+ title: "Close",
682
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Window_default.closeBox })
683
+ }
684
+ ),
685
+ onMinimize && /* @__PURE__ */ jsxRuntime.jsx(
686
+ "button",
687
+ {
688
+ type: "button",
689
+ className: Window_default.controlButton,
690
+ onClick: onMinimize,
691
+ "aria-label": "Minimize",
692
+ title: "Minimize",
693
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Window_default.minimizeBox })
694
+ }
695
+ ),
696
+ onMaximize && /* @__PURE__ */ jsxRuntime.jsx(
697
+ "button",
698
+ {
699
+ type: "button",
700
+ className: Window_default.controlButton,
701
+ onClick: onMaximize,
702
+ "aria-label": "Maximize",
703
+ title: "Maximize",
704
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Window_default.maximizeBox })
705
+ }
706
+ )
707
+ ] }),
708
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Window_default.titleCenter, children: [
709
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "132", height: "13", viewBox: "0 0 132 13", fill: "none", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg", children: [
710
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "130.517", height: "13", fill: "#DDDDDD" }),
711
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1", height: "13", fill: "#EEEEEE" }),
712
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "130", width: "1", height: "13", fill: "#C5C5C5" }),
713
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "1", width: "131.268", height: "1", fill: "#999999" }),
714
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "5", width: "131.268", height: "1", fill: "#999999" }),
715
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "9", width: "131.268", height: "1", fill: "#999999" }),
716
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "3", width: "131.268", height: "1", fill: "#999999" }),
717
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "7", width: "131.268", height: "1", fill: "#999999" }),
718
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "11", width: "131.268", height: "1", fill: "#999999" })
719
+ ] }),
720
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: Window_default.titleText, children: title }),
721
+ /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "132", height: "13", viewBox: "0 0 132 13", fill: "none", preserveAspectRatio: "none", xmlns: "http://www.w3.org/2000/svg", children: [
722
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "130.517", height: "13", fill: "#DDDDDD" }),
723
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "1", height: "13", fill: "#EEEEEE" }),
724
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "130", width: "1", height: "13", fill: "#C5C5C5" }),
725
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "1", width: "131.268", height: "1", fill: "#999999" }),
726
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "5", width: "131.268", height: "1", fill: "#999999" }),
727
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "9", width: "131.268", height: "1", fill: "#999999" }),
728
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "3", width: "131.268", height: "1", fill: "#999999" }),
729
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "7", width: "131.268", height: "1", fill: "#999999" }),
730
+ /* @__PURE__ */ jsxRuntime.jsx("rect", { y: "11", width: "131.268", height: "1", fill: "#999999" })
731
+ ] })
732
+ ] })
733
+ ] });
734
+ }
735
+ return null;
736
+ };
737
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: windowClassNames, style: windowStyle, children: [
738
+ renderTitleBar(),
739
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: contentClassNames, children }),
740
+ resizable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Window_default.resizeHandle, "aria-hidden": "true" })
741
+ ] });
742
+ }
743
+ );
744
+ Window.displayName = "Window";
745
+
746
+ // src/components/Dialog/Dialog.module.css
747
+ var Dialog_default = {};
748
+ var Dialog = React4.forwardRef(
749
+ ({
750
+ open = false,
751
+ onClose,
752
+ closeOnBackdropClick = true,
753
+ closeOnEscape = true,
754
+ backdropClassName = "",
755
+ trapFocus = true,
756
+ initialFocus,
757
+ children,
758
+ ...windowProps
759
+ }, ref) => {
760
+ const dialogRef = React4.useRef(null);
761
+ const previousActiveElement = React4.useRef(null);
762
+ React4.useEffect(() => {
763
+ if (!open || !closeOnEscape) return;
764
+ const handleEscape = (event) => {
765
+ if (event.key === "Escape") {
766
+ event.preventDefault();
767
+ event.stopPropagation();
768
+ onClose?.();
769
+ }
770
+ };
771
+ document.addEventListener("keydown", handleEscape);
772
+ return () => document.removeEventListener("keydown", handleEscape);
773
+ }, [open, closeOnEscape, onClose]);
774
+ React4.useEffect(() => {
775
+ if (open) {
776
+ previousActiveElement.current = document.activeElement;
777
+ } else if (previousActiveElement.current) {
778
+ previousActiveElement.current.focus();
779
+ }
780
+ }, [open]);
781
+ React4.useEffect(() => {
782
+ if (!open || !initialFocus) return;
783
+ const focusElement = () => {
784
+ if (typeof initialFocus === "string") {
785
+ const element = dialogRef.current?.querySelector(initialFocus);
786
+ element?.focus();
787
+ } else if (initialFocus.current) {
788
+ initialFocus.current.focus();
789
+ }
790
+ };
791
+ setTimeout(focusElement, 10);
792
+ }, [open, initialFocus]);
793
+ React4.useEffect(() => {
794
+ if (!open || !trapFocus) return;
795
+ const handleTabKey = (event) => {
796
+ if (event.key !== "Tab" || !dialogRef.current) return;
797
+ const focusableElements = dialogRef.current.querySelectorAll(
798
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
799
+ );
800
+ const firstElement = focusableElements[0];
801
+ const lastElement = focusableElements[focusableElements.length - 1];
802
+ if (event.shiftKey) {
803
+ if (document.activeElement === firstElement) {
804
+ event.preventDefault();
805
+ lastElement?.focus();
806
+ }
807
+ } else {
808
+ if (document.activeElement === lastElement) {
809
+ event.preventDefault();
810
+ firstElement?.focus();
811
+ }
812
+ }
813
+ };
814
+ document.addEventListener("keydown", handleTabKey);
815
+ return () => document.removeEventListener("keydown", handleTabKey);
816
+ }, [open, trapFocus]);
817
+ React4.useEffect(() => {
818
+ if (open) {
819
+ document.body.style.overflow = "hidden";
820
+ } else {
821
+ document.body.style.overflow = "";
822
+ }
823
+ return () => {
824
+ document.body.style.overflow = "";
825
+ };
826
+ }, [open]);
827
+ const handleBackdropClick = React4.useCallback(
828
+ (event) => {
829
+ if (closeOnBackdropClick && event.target === event.currentTarget) {
830
+ onClose?.();
831
+ }
832
+ },
833
+ [closeOnBackdropClick, onClose]
834
+ );
835
+ if (!open) return null;
836
+ const backdropClassNames = [Dialog_default.backdrop, backdropClassName].filter(Boolean).join(" ");
837
+ return /* @__PURE__ */ jsxRuntime.jsx(
838
+ "div",
839
+ {
840
+ className: backdropClassNames,
841
+ onClick: handleBackdropClick,
842
+ role: "presentation",
843
+ "aria-modal": "true",
844
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Dialog_default.dialogContainer, ref: dialogRef, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsx(Window, { ...windowProps, ref, active: true, onClose, children }) })
845
+ }
846
+ );
847
+ }
848
+ );
849
+ Dialog.displayName = "Dialog";
850
+
851
+ // src/components/MenuBar/MenuBar.module.css
852
+ var MenuBar_default = {};
853
+ var MenuBar = React4.forwardRef(
854
+ ({ menus, openMenuIndex, onMenuOpen, onMenuClose, className = "", dropdownClassName = "" }, ref) => {
855
+ const [menuBarElement, setMenuBarElement] = React4.useState(null);
856
+ const [focusedIndex, setFocusedIndex] = React4.useState(-1);
857
+ React4.useEffect(() => {
858
+ if (openMenuIndex === void 0 || !menuBarElement) return;
859
+ const handleClickOutside = (event) => {
860
+ if (menuBarElement && !menuBarElement.contains(event.target)) {
861
+ onMenuClose?.();
862
+ }
863
+ };
864
+ document.addEventListener("mousedown", handleClickOutside);
865
+ return () => document.removeEventListener("mousedown", handleClickOutside);
866
+ }, [openMenuIndex, onMenuClose, menuBarElement]);
867
+ React4.useEffect(() => {
868
+ if (openMenuIndex === void 0) return;
869
+ const handleEscape = (event) => {
870
+ if (event.key === "Escape") {
871
+ event.preventDefault();
872
+ onMenuClose?.();
873
+ }
874
+ };
875
+ document.addEventListener("keydown", handleEscape);
876
+ return () => document.removeEventListener("keydown", handleEscape);
877
+ }, [openMenuIndex, onMenuClose]);
878
+ const handleKeyDown = React4.useCallback(
879
+ (event) => {
880
+ switch (event.key) {
881
+ case "ArrowLeft":
882
+ event.preventDefault();
883
+ if (openMenuIndex !== void 0) {
884
+ const prevIndex = openMenuIndex > 0 ? openMenuIndex - 1 : menus.length - 1;
885
+ if (!menus[prevIndex]?.disabled) {
886
+ onMenuOpen?.(prevIndex);
887
+ }
888
+ } else if (focusedIndex > 0) {
889
+ setFocusedIndex(focusedIndex - 1);
890
+ }
891
+ break;
892
+ case "ArrowRight":
893
+ event.preventDefault();
894
+ if (openMenuIndex !== void 0) {
895
+ const nextIndex = openMenuIndex < menus.length - 1 ? openMenuIndex + 1 : 0;
896
+ if (!menus[nextIndex]?.disabled) {
897
+ onMenuOpen?.(nextIndex);
898
+ }
899
+ } else if (focusedIndex < menus.length - 1) {
900
+ setFocusedIndex(focusedIndex + 1);
901
+ }
902
+ break;
903
+ case "ArrowDown":
904
+ event.preventDefault();
905
+ if (openMenuIndex === void 0 && focusedIndex >= 0) {
906
+ if (!menus[focusedIndex]?.disabled) {
907
+ onMenuOpen?.(focusedIndex);
908
+ }
909
+ }
910
+ break;
911
+ case "Enter":
912
+ case " ":
913
+ event.preventDefault();
914
+ if (openMenuIndex === void 0 && focusedIndex >= 0) {
915
+ if (!menus[focusedIndex]?.disabled) {
916
+ onMenuOpen?.(focusedIndex);
917
+ }
918
+ }
919
+ break;
920
+ }
921
+ },
922
+ [openMenuIndex, focusedIndex, menus, onMenuOpen, onMenuClose]
923
+ );
924
+ const handleMenuClick = (index) => {
925
+ if (menus[index]?.disabled) return;
926
+ if (openMenuIndex === index) {
927
+ onMenuClose?.();
928
+ } else {
929
+ onMenuOpen?.(index);
930
+ }
931
+ };
932
+ const menuBarClassNames = [MenuBar_default.menuBar, className].filter(Boolean).join(" ");
933
+ const dropdownClassNames = [MenuBar_default.dropdown, dropdownClassName].filter(Boolean).join(" ");
934
+ const handleRef = React4.useCallback(
935
+ (node) => {
936
+ setMenuBarElement(node);
937
+ if (typeof ref === "function") {
938
+ ref(node);
939
+ }
940
+ },
941
+ [ref]
942
+ );
943
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: handleRef, className: menuBarClassNames, role: "menubar", onKeyDown: handleKeyDown, children: menus.map((menu, index) => {
944
+ const isOpen = openMenuIndex === index;
945
+ const menuButtonClassNames = [
946
+ MenuBar_default.menuButton,
947
+ isOpen ? MenuBar_default["menuButton--open"] : "",
948
+ menu.disabled ? MenuBar_default["menuButton--disabled"] : ""
949
+ ].filter(Boolean).join(" ");
950
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MenuBar_default.menuContainer, children: [
951
+ /* @__PURE__ */ jsxRuntime.jsx(
952
+ "button",
953
+ {
954
+ type: "button",
955
+ className: menuButtonClassNames,
956
+ onClick: () => handleMenuClick(index),
957
+ onFocus: () => setFocusedIndex(index),
958
+ onBlur: () => setFocusedIndex(-1),
959
+ disabled: menu.disabled,
960
+ "aria-haspopup": "true",
961
+ "aria-expanded": isOpen,
962
+ "aria-disabled": menu.disabled,
963
+ children: menu.label
964
+ }
965
+ ),
966
+ isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: dropdownClassNames, role: "menu", children: menu.items })
967
+ ] }, index);
968
+ }) });
969
+ }
970
+ );
971
+ MenuBar.displayName = "MenuBar";
972
+
973
+ // src/components/MenuBar/MenuItem.module.css
974
+ var MenuItem_default = {};
975
+ var MenuItem = React4.forwardRef(
976
+ ({
977
+ label,
978
+ shortcut,
979
+ disabled = false,
980
+ selected = false,
981
+ separator = false,
982
+ checked = false,
983
+ icon,
984
+ onClick,
985
+ onFocus,
986
+ onBlur,
987
+ className = "",
988
+ hasSubmenu = false
989
+ }, ref) => {
990
+ const menuItemClassNames = [
991
+ MenuItem_default.menuItem,
992
+ selected ? MenuItem_default["menuItem--selected"] : "",
993
+ disabled ? MenuItem_default["menuItem--disabled"] : "",
994
+ separator ? MenuItem_default["menuItem--separator"] : "",
995
+ className
996
+ ].filter(Boolean).join(" ");
997
+ const handleClick = (event) => {
998
+ if (disabled) {
999
+ event.preventDefault();
1000
+ return;
1001
+ }
1002
+ onClick?.(event);
1003
+ };
1004
+ return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1005
+ /* @__PURE__ */ jsxRuntime.jsxs(
1006
+ "button",
1007
+ {
1008
+ ref,
1009
+ type: "button",
1010
+ className: menuItemClassNames,
1011
+ onClick: handleClick,
1012
+ onFocus,
1013
+ onBlur,
1014
+ disabled,
1015
+ role: "menuitem",
1016
+ "aria-disabled": disabled,
1017
+ "aria-checked": checked ? "true" : void 0,
1018
+ children: [
1019
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: MenuItem_default.checkmark, children: checked && "\u2713" }),
1020
+ icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MenuItem_default.icon, children: icon }),
1021
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: MenuItem_default.label, children: label }),
1022
+ shortcut && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MenuItem_default.shortcut, children: shortcut }),
1023
+ hasSubmenu && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MenuItem_default.submenuArrow, children: "\u25B6" })
1024
+ ]
1025
+ }
1026
+ ),
1027
+ separator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: MenuItem_default.separatorLine, role: "separator" })
1028
+ ] });
1029
+ }
1030
+ );
1031
+ MenuItem.displayName = "MenuItem";
1032
+
1033
+ // src/components/Scrollbar/Scrollbar.module.css
1034
+ var Scrollbar_default = {};
1035
+ var Scrollbar = React4.forwardRef(
1036
+ ({
1037
+ orientation = "vertical",
1038
+ value = 0,
1039
+ viewportRatio = 0.2,
1040
+ onChange,
1041
+ className = "",
1042
+ disabled = false
1043
+ }, ref) => {
1044
+ const trackRef = React4.useRef(null);
1045
+ const [isDragging, setIsDragging] = React4.useState(false);
1046
+ const [dragStartPos, setDragStartPos] = React4.useState(0);
1047
+ const [dragStartValue, setDragStartValue] = React4.useState(0);
1048
+ const isVertical = orientation === "vertical";
1049
+ const thumbSize = Math.max(viewportRatio * 100, 10);
1050
+ const maxThumbPos = 100 - thumbSize;
1051
+ const thumbPos = value * maxThumbPos;
1052
+ const classNames = [
1053
+ Scrollbar_default.scrollbar,
1054
+ Scrollbar_default[`scrollbar--${orientation}`],
1055
+ disabled && Scrollbar_default["scrollbar--disabled"],
1056
+ className
1057
+ ].filter(Boolean).join(" ");
1058
+ const handleDecrement = React4.useCallback(() => {
1059
+ if (disabled || !onChange) return;
1060
+ const newValue = Math.max(0, value - 0.1);
1061
+ onChange(newValue);
1062
+ }, [disabled, onChange, value]);
1063
+ const handleIncrement = React4.useCallback(() => {
1064
+ if (disabled || !onChange) return;
1065
+ const newValue = Math.min(1, value + 0.1);
1066
+ onChange(newValue);
1067
+ }, [disabled, onChange, value]);
1068
+ const handleTrackClick = React4.useCallback(
1069
+ (event) => {
1070
+ if (disabled || !onChange || !trackRef.current) return;
1071
+ const rect = trackRef.current.getBoundingClientRect();
1072
+ const clickPos = isVertical ? event.clientY - rect.top : event.clientX - rect.left;
1073
+ const trackSize = isVertical ? rect.height : rect.width;
1074
+ const clickRatio = clickPos / trackSize;
1075
+ const newValue = Math.max(0, Math.min(1, clickRatio));
1076
+ onChange(newValue);
1077
+ },
1078
+ [disabled, onChange, isVertical]
1079
+ );
1080
+ const handleThumbMouseDown = React4.useCallback(
1081
+ (event) => {
1082
+ if (disabled) return;
1083
+ event.preventDefault();
1084
+ event.stopPropagation();
1085
+ setIsDragging(true);
1086
+ setDragStartPos(isVertical ? event.clientY : event.clientX);
1087
+ setDragStartValue(value);
1088
+ },
1089
+ [disabled, isVertical, value]
1090
+ );
1091
+ React4.useEffect(() => {
1092
+ if (!isDragging || !onChange || !trackRef.current) return;
1093
+ const handleMouseMove = (event) => {
1094
+ const currentPos = isVertical ? event.clientY : event.clientX;
1095
+ const delta = currentPos - dragStartPos;
1096
+ const rect = trackRef.current.getBoundingClientRect();
1097
+ const trackSize = isVertical ? rect.height : rect.width;
1098
+ const deltaRatio = delta / trackSize;
1099
+ const newValue = Math.max(0, Math.min(1, dragStartValue + deltaRatio));
1100
+ onChange(newValue);
1101
+ };
1102
+ const handleMouseUp = () => {
1103
+ setIsDragging(false);
1104
+ };
1105
+ document.addEventListener("mousemove", handleMouseMove);
1106
+ document.addEventListener("mouseup", handleMouseUp);
1107
+ return () => {
1108
+ document.removeEventListener("mousemove", handleMouseMove);
1109
+ document.removeEventListener("mouseup", handleMouseUp);
1110
+ };
1111
+ }, [isDragging, dragStartPos, dragStartValue, onChange, isVertical]);
1112
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: classNames, children: [
1113
+ /* @__PURE__ */ jsxRuntime.jsx(
1114
+ "button",
1115
+ {
1116
+ type: "button",
1117
+ className: `${Scrollbar_default.arrow} ${Scrollbar_default["arrow--start"]}`,
1118
+ onClick: handleDecrement,
1119
+ disabled,
1120
+ "aria-label": isVertical ? "Scroll up" : "Scroll left",
1121
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Scrollbar_default.arrowIcon })
1122
+ }
1123
+ ),
1124
+ /* @__PURE__ */ jsxRuntime.jsx(
1125
+ "div",
1126
+ {
1127
+ ref: trackRef,
1128
+ className: Scrollbar_default.track,
1129
+ onClick: handleTrackClick,
1130
+ role: "scrollbar",
1131
+ "aria-valuenow": Math.round(value * 100),
1132
+ "aria-valuemin": 0,
1133
+ "aria-valuemax": 100,
1134
+ "aria-orientation": orientation,
1135
+ children: /* @__PURE__ */ jsxRuntime.jsx(
1136
+ "div",
1137
+ {
1138
+ className: Scrollbar_default.thumb,
1139
+ style: {
1140
+ [isVertical ? "height" : "width"]: `${thumbSize}%`,
1141
+ [isVertical ? "top" : "left"]: `${thumbPos}%`
1142
+ },
1143
+ onMouseDown: handleThumbMouseDown
1144
+ }
1145
+ )
1146
+ }
1147
+ ),
1148
+ /* @__PURE__ */ jsxRuntime.jsx(
1149
+ "button",
1150
+ {
1151
+ type: "button",
1152
+ className: `${Scrollbar_default.arrow} ${Scrollbar_default["arrow--end"]}`,
1153
+ onClick: handleIncrement,
1154
+ disabled,
1155
+ "aria-label": isVertical ? "Scroll down" : "Scroll right",
1156
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: Scrollbar_default.arrowIcon })
1157
+ }
1158
+ )
1159
+ ] });
1160
+ }
1161
+ );
1162
+ Scrollbar.displayName = "Scrollbar";
1163
+
1164
+ // src/components/ListView/ListView.module.css
1165
+ var ListView_default = {};
1166
+ var ListView = React4.forwardRef(
1167
+ ({
1168
+ columns,
1169
+ items,
1170
+ selectedIds = [],
1171
+ onSelectionChange,
1172
+ onItemOpen,
1173
+ onSort,
1174
+ className = "",
1175
+ height = "auto"
1176
+ }, ref) => {
1177
+ const [sortColumn, setSortColumn] = React4.useState(null);
1178
+ const [sortDirection, setSortDirection] = React4.useState("asc");
1179
+ const classNames = [ListView_default.listView, className].filter(Boolean).join(" ");
1180
+ const handleColumnClick = React4.useCallback(
1181
+ (columnKey, sortable = true) => {
1182
+ if (!sortable || !onSort) return;
1183
+ const newDirection = sortColumn === columnKey && sortDirection === "asc" ? "desc" : "asc";
1184
+ setSortColumn(columnKey);
1185
+ setSortDirection(newDirection);
1186
+ onSort(columnKey, newDirection);
1187
+ },
1188
+ [sortColumn, sortDirection, onSort]
1189
+ );
1190
+ const handleRowClick = React4.useCallback(
1191
+ (itemId, event) => {
1192
+ if (!onSelectionChange) return;
1193
+ if (event.metaKey || event.ctrlKey) {
1194
+ if (selectedIds.includes(itemId)) {
1195
+ onSelectionChange(selectedIds.filter((id) => id !== itemId));
1196
+ } else {
1197
+ onSelectionChange([...selectedIds, itemId]);
1198
+ }
1199
+ } else if (event.shiftKey && selectedIds.length > 0) {
1200
+ const lastSelectedId = selectedIds[selectedIds.length - 1];
1201
+ const lastIndex = items.findIndex((item) => item.id === lastSelectedId);
1202
+ const currentIndex = items.findIndex((item) => item.id === itemId);
1203
+ const start = Math.min(lastIndex, currentIndex);
1204
+ const end = Math.max(lastIndex, currentIndex);
1205
+ const rangeIds = items.slice(start, end + 1).map((item) => item.id);
1206
+ onSelectionChange(rangeIds);
1207
+ } else {
1208
+ onSelectionChange([itemId]);
1209
+ }
1210
+ },
1211
+ [selectedIds, items, onSelectionChange]
1212
+ );
1213
+ const handleRowDoubleClick = React4.useCallback(
1214
+ (item) => {
1215
+ if (onItemOpen) {
1216
+ onItemOpen(item);
1217
+ }
1218
+ },
1219
+ [onItemOpen]
1220
+ );
1221
+ const containerStyle = {};
1222
+ if (height !== "auto") {
1223
+ containerStyle.height = typeof height === "number" ? `${height}px` : height;
1224
+ }
1225
+ return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: classNames, style: containerStyle, children: [
1226
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: ListView_default.header, children: columns.map((column) => /* @__PURE__ */ jsxRuntime.jsxs(
1227
+ "div",
1228
+ {
1229
+ className: `${ListView_default.headerCell} ${column.sortable !== false ? ListView_default.sortable : ""}`,
1230
+ style: {
1231
+ width: typeof column.width === "number" ? `${column.width}px` : column.width
1232
+ },
1233
+ onClick: () => handleColumnClick(column.key, column.sortable),
1234
+ children: [
1235
+ column.label,
1236
+ sortColumn === column.key && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ListView_default.sortIndicator, children: sortDirection === "asc" ? "\u25B2" : "\u25BC" })
1237
+ ]
1238
+ },
1239
+ column.key
1240
+ )) }),
1241
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: ListView_default.body, children: items.map((item) => {
1242
+ const isSelected = selectedIds.includes(item.id);
1243
+ return /* @__PURE__ */ jsxRuntime.jsx(
1244
+ "div",
1245
+ {
1246
+ className: `${ListView_default.row} ${isSelected ? ListView_default.selected : ""}`,
1247
+ onClick: (e) => handleRowClick(item.id, e),
1248
+ onDoubleClick: () => handleRowDoubleClick(item),
1249
+ children: columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsxs(
1250
+ "div",
1251
+ {
1252
+ className: ListView_default.cell,
1253
+ style: {
1254
+ width: typeof column.width === "number" ? `${column.width}px` : column.width
1255
+ },
1256
+ children: [
1257
+ index === 0 && item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: ListView_default.icon, children: item.icon }),
1258
+ item[column.key]
1259
+ ]
1260
+ },
1261
+ column.key
1262
+ ))
1263
+ },
1264
+ item.id
1265
+ );
1266
+ }) })
1267
+ ] });
1268
+ }
1269
+ );
1270
+ ListView.displayName = "ListView";
1271
+
1272
+ // src/components/FolderList/FolderList.module.css
1273
+ var FolderList_default = {};
1274
+ var FolderList = React4.forwardRef(
1275
+ ({
1276
+ columns = [
1277
+ { key: "name", label: "Name", width: "40%" },
1278
+ { key: "modified", label: "Date Modified", width: "30%" },
1279
+ { key: "size", label: "Size", width: "30%" }
1280
+ ],
1281
+ items,
1282
+ selectedIds,
1283
+ onSelectionChange,
1284
+ onItemOpen,
1285
+ onSort,
1286
+ listHeight = 400,
1287
+ ...windowProps
1288
+ }, ref) => {
1289
+ return /* @__PURE__ */ jsxRuntime.jsx(Window, { ref, contentClassName: FolderList_default.folderListContent, ...windowProps, children: /* @__PURE__ */ jsxRuntime.jsx(
1290
+ ListView,
1291
+ {
1292
+ columns,
1293
+ items,
1294
+ selectedIds,
1295
+ onSelectionChange,
1296
+ onItemOpen,
1297
+ onSort,
1298
+ height: listHeight,
1299
+ className: FolderList_default.listView
1300
+ }
1301
+ ) });
1302
+ }
1303
+ );
1304
+ FolderList.displayName = "FolderList";
1305
+ var SaveIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Save", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" }) });
1306
+ var FolderIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Folder", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z" }) });
1307
+ var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Close", size: "sm", children: /* @__PURE__ */ 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" }) });
1308
+ var ArrowRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Arrow Right", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z" }) });
1309
+ var ArrowLeftIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Arrow Left", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" }) });
1310
+ var DownloadIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Download", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) });
1311
+ var LinkIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Link", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) });
1312
+ var MailIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Mail", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" }) });
1313
+ var PrintIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Print", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z" }) });
1314
+ var TrashIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Delete", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) });
1315
+ var SearchIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Search", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }) });
1316
+ var UserIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "User", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }) });
1317
+ var LockIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Lock", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z" }) });
1318
+ var CalendarIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Calendar", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 3h-1V1h-2v2H8V1H6v2H5c-1.11 0-1.99.9-1.99 2L3 19c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V8h14v11zM7 10h5v5H7z" }) });
1319
+ var DocumentIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Document", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z" }) });
1320
+ var FileIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "File", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11z" }) });
1321
+ var ImageIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Image", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) });
1322
+ var MusicIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Music", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" }) });
1323
+ var VideoIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Video", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4h-4z" }) });
1324
+ var SettingsIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Settings", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" }) });
1325
+ var HomeIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Home", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }) });
1326
+ var StarIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Star", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }) });
1327
+ var HeartIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Heart", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" }) });
1328
+ var InfoIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Info", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) });
1329
+ var WarningIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Warning", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) });
1330
+ var ErrorIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Error", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) });
1331
+ var CheckIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Check", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }) });
1332
+ var PlusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Plus", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" }) });
1333
+ var MinusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Minus", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 13H5v-2h14v2z" }) });
1334
+ var RefreshIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Refresh", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z" }) });
1335
+ var MenuIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Menu", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
1336
+ var MoreIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "More", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }) });
1337
+ var ChevronUpIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Chevron Up", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z" }) });
1338
+ var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Chevron Down", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) });
1339
+ var EyeIcon = () => /* @__PURE__ */ jsxRuntime.jsx(Icon, { label: "Eye", size: "sm", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z" }) });
1340
+
1341
+ // src/tokens/index.ts
1342
+ var colors = {
1343
+ // Grayscale palette (Figma style IDs included for reference)
1344
+ gray100: "#FFFFFF",
1345
+ // 18:47 - White
1346
+ gray200: "#EEEEEE",
1347
+ // 19:2507 - Base UI background
1348
+ gray300: "#DDDDDD",
1349
+ // 18:60 - Inferred mid-tone
1350
+ gray400: "#CCCCCC",
1351
+ // 18:1970 - Inferred mid-tone
1352
+ gray500: "#999999",
1353
+ // 20:7306 - Inferred mid-tone
1354
+ gray600: "#666666",
1355
+ // 18:52 - Inferred dark tone
1356
+ gray700: "#4D4D4D",
1357
+ // 18:46 - Inferred dark tone
1358
+ gray800: "#333333",
1359
+ // 45:184845 - Inferred very dark
1360
+ gray900: "#262626",
1361
+ // 18:48 - Black (strokes, borders, text)
1362
+ // Accent colors
1363
+ lavender: "#CCCCFF",
1364
+ // 60:134029 - Cover background
1365
+ azul: "#0066CC",
1366
+ // 49:36229 - Accent (inferred)
1367
+ linkRed: "#CC0000",
1368
+ // 102:398, 102:3935 - Link color (inferred)
1369
+ // Semantic mappings
1370
+ background: "#EEEEEE",
1371
+ // Gray 200
1372
+ foreground: "#262626",
1373
+ // Gray 900
1374
+ border: "#262626",
1375
+ // Gray 900
1376
+ text: "#262626",
1377
+ // Gray 900
1378
+ textInverse: "#FFFFFF",
1379
+ // Gray 100
1380
+ surface: "#EEEEEE",
1381
+ // Gray 200
1382
+ surfaceInset: "#FFFFFF",
1383
+ // Gray 100 (for inset areas)
1384
+ // Legacy names for compatibility
1385
+ black: "#262626",
1386
+ white: "#FFFFFF",
1387
+ // Status colors (Mac OS 9 style)
1388
+ focus: "#000080",
1389
+ error: "#CC0000",
1390
+ success: "#008000",
1391
+ warning: "#FF8C00"
1392
+ };
1393
+ var typography = {
1394
+ fontFamily: {
1395
+ // Charcoal - Primary system UI font used throughout Mac OS 9
1396
+ // Fallback chain: Try Charcoal variants, then Chicago, then modern system fonts
1397
+ system: 'Charcoal, "Charcoal CY", Chicago, "Chicago Classic", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
1398
+ // Geneva - Used for dialog text and body content in Mac OS 9
1399
+ // More readable for longer text than Charcoal
1400
+ body: 'Geneva, "Geneva CY", "Lucida Grande", "Lucida Sans Unicode", sans-serif',
1401
+ // Apple Garamond Light - Used for headlines in Figma
1402
+ display: '"Apple Garamond Light", "Apple Garamond", Garamond, Georgia, serif',
1403
+ // Chicago - Classic Mac OS system font (menu bar, classic UI)
1404
+ chicago: 'Chicago, "Chicago Classic", "Charcoal CY", Charcoal, monospace',
1405
+ // Monaco - Mac OS 9 monospace font
1406
+ mono: 'Monaco, "Monaco CY", "SF Mono", "Courier New", Courier, monospace'
1407
+ },
1408
+ fontSize: {
1409
+ xs: "9px",
1410
+ // Smallest UI text (9pt Chicago/Charcoal)
1411
+ sm: "10px",
1412
+ // Small labels (10pt)
1413
+ md: "12px",
1414
+ // Standard UI text - Mac OS 9 default (12pt)
1415
+ lg: "13px",
1416
+ // Slightly larger UI text
1417
+ xl: "14px",
1418
+ // Large UI text
1419
+ "2xl": "16px",
1420
+ // Headings
1421
+ "3xl": "18px",
1422
+ // Large headings
1423
+ "4xl": "20px",
1424
+ // Major headings
1425
+ "5xl": "24px"
1426
+ // Display text
1427
+ },
1428
+ fontWeight: {
1429
+ normal: 700,
1430
+ // Charcoal Bold is the Mac OS 9 default
1431
+ medium: 700,
1432
+ // Medium (same as bold for Charcoal)
1433
+ semibold: 700,
1434
+ // Semibold (same as bold)
1435
+ bold: 700,
1436
+ // Bold weight
1437
+ light: 400
1438
+ // Light weight (regular Charcoal)
1439
+ },
1440
+ lineHeight: {
1441
+ tight: 1.2,
1442
+ // Tight leading (Mac OS 9 style)
1443
+ snug: 1.3,
1444
+ // Snug
1445
+ normal: 1.4,
1446
+ // Normal (Mac OS 9 used tighter line heights)
1447
+ relaxed: 1.5,
1448
+ // Relaxed
1449
+ loose: 1.6
1450
+ // Loose
1451
+ },
1452
+ letterSpacing: {
1453
+ tighter: "-0.02em",
1454
+ // Slightly tighter
1455
+ tight: "-0.01em",
1456
+ // Tight
1457
+ normal: "0",
1458
+ // Normal - Mac OS 9 default
1459
+ wide: "0.01em",
1460
+ // Wide
1461
+ wider: "0.02em"
1462
+ // Wider
1463
+ }
1464
+ };
1465
+ var spacing = {
1466
+ "0": "0",
1467
+ px: "1px",
1468
+ "0.5": "2px",
1469
+ // Minimal spacing
1470
+ "1": "4px",
1471
+ // Base grid unit
1472
+ "1.5": "6px",
1473
+ "2": "8px",
1474
+ "2.5": "10px",
1475
+ "3": "12px",
1476
+ "4": "16px",
1477
+ "5": "20px",
1478
+ "6": "24px",
1479
+ "8": "32px",
1480
+ "10": "40px",
1481
+ "12": "48px",
1482
+ "16": "64px",
1483
+ // Legacy names
1484
+ xs: "2px",
1485
+ sm: "4px",
1486
+ md: "8px",
1487
+ lg: "12px",
1488
+ xl: "16px",
1489
+ "2xl": "24px",
1490
+ "3xl": "32px"
1491
+ };
1492
+ var shadows = {
1493
+ // Standard raised bevel (default button state)
1494
+ bevel: "inset 2px 2px 0 rgba(255, 255, 255, 0.6), inset -2px -2px 0 rgba(38, 38, 38, 0.4), 2px 2px 0 rgba(38, 38, 38, 1)",
1495
+ // Inverted bevel for pressed/inset states
1496
+ inset: "inset -2px -2px 0 rgba(255, 255, 255, 0.6), inset 2px 2px 0 rgba(38, 38, 38, 0.4), 2px 2px 0 rgba(38, 38, 38, 1)",
1497
+ // Individual layers for custom composition
1498
+ dropShadow: "2px 2px 0 rgba(38, 38, 38, 1)",
1499
+ innerHighlight: "inset 2px 2px 0 rgba(255, 255, 255, 0.6)",
1500
+ innerShadow: "inset -2px -2px 0 rgba(38, 38, 38, 0.4)",
1501
+ // Legacy format for compatibility
1502
+ raised: {
1503
+ highlight: "inset 2px 2px 0 rgba(255, 255, 255, 0.6)",
1504
+ shadow: "inset -2px -2px 0 rgba(38, 38, 38, 0.4)",
1505
+ full: "inset 2px 2px 0 rgba(255, 255, 255, 0.6), inset -2px -2px 0 rgba(38, 38, 38, 0.4), 2px 2px 0 rgba(38, 38, 38, 1)"
1506
+ },
1507
+ // No shadow (flat)
1508
+ none: "none"
1509
+ };
1510
+ var borders = {
1511
+ width: {
1512
+ none: "0",
1513
+ thin: "1px",
1514
+ medium: "2px",
1515
+ thick: "3px"
1516
+ },
1517
+ style: {
1518
+ solid: "solid",
1519
+ dashed: "dashed",
1520
+ dotted: "dotted",
1521
+ none: "none"
1522
+ },
1523
+ radius: {
1524
+ none: "0",
1525
+ // Mac OS 9 always used square corners
1526
+ sm: "0",
1527
+ // Kept for API consistency
1528
+ md: "0",
1529
+ lg: "0",
1530
+ full: "0"
1531
+ }
1532
+ };
1533
+ var zIndex = {
1534
+ base: 0,
1535
+ dropdown: 1e3,
1536
+ sticky: 1100,
1537
+ modal: 1200,
1538
+ popover: 1300,
1539
+ tooltip: 1400
1540
+ };
1541
+ var transitions = {
1542
+ duration: {
1543
+ instant: "0ms",
1544
+ fast: "100ms",
1545
+ normal: "200ms",
1546
+ slow: "300ms"
1547
+ },
1548
+ timing: {
1549
+ linear: "linear",
1550
+ easeIn: "cubic-bezier(0.4, 0, 1, 1)",
1551
+ easeOut: "cubic-bezier(0, 0, 0.2, 1)",
1552
+ easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)"
1553
+ }
1554
+ };
1555
+ var tokens = {
1556
+ colors,
1557
+ typography,
1558
+ spacing,
1559
+ borders,
1560
+ shadows,
1561
+ zIndex,
1562
+ transitions
1563
+ };
1564
+
1565
+ exports.ArrowLeftIcon = ArrowLeftIcon;
1566
+ exports.ArrowRightIcon = ArrowRightIcon;
1567
+ exports.Button = Button;
1568
+ exports.CalendarIcon = CalendarIcon;
1569
+ exports.CheckIcon = CheckIcon;
1570
+ exports.Checkbox = Checkbox;
1571
+ exports.ChevronDownIcon = ChevronDownIcon;
1572
+ exports.ChevronUpIcon = ChevronUpIcon;
1573
+ exports.CloseIcon = CloseIcon;
1574
+ exports.Dialog = Dialog;
1575
+ exports.DocumentIcon = DocumentIcon;
1576
+ exports.DownloadIcon = DownloadIcon;
1577
+ exports.ErrorIcon = ErrorIcon;
1578
+ exports.EyeIcon = EyeIcon;
1579
+ exports.FileIcon = FileIcon;
1580
+ exports.FolderIcon = FolderIcon;
1581
+ exports.FolderList = FolderList;
1582
+ exports.HeartIcon = HeartIcon;
1583
+ exports.HomeIcon = HomeIcon;
1584
+ exports.Icon = Icon;
1585
+ exports.IconButton = IconButton;
1586
+ exports.ImageIcon = ImageIcon;
1587
+ exports.InfoIcon = InfoIcon;
1588
+ exports.LinkIcon = LinkIcon;
1589
+ exports.ListView = ListView;
1590
+ exports.LockIcon = LockIcon;
1591
+ exports.MailIcon = MailIcon;
1592
+ exports.MenuBar = MenuBar;
1593
+ exports.MenuIcon = MenuIcon;
1594
+ exports.MenuItem = MenuItem;
1595
+ exports.MinusIcon = MinusIcon;
1596
+ exports.MoreIcon = MoreIcon;
1597
+ exports.MusicIcon = MusicIcon;
1598
+ exports.PlusIcon = PlusIcon;
1599
+ exports.PrintIcon = PrintIcon;
1600
+ exports.Radio = Radio;
1601
+ exports.RefreshIcon = RefreshIcon;
1602
+ exports.SaveIcon = SaveIcon;
1603
+ exports.Scrollbar = Scrollbar;
1604
+ exports.SearchIcon = SearchIcon;
1605
+ exports.Select = Select;
1606
+ exports.SettingsIcon = SettingsIcon;
1607
+ exports.StarIcon = StarIcon;
1608
+ exports.TabPanel = TabPanel;
1609
+ exports.Tabs = Tabs;
1610
+ exports.TextField = TextField;
1611
+ exports.TrashIcon = TrashIcon;
1612
+ exports.UserIcon = UserIcon;
1613
+ exports.VideoIcon = VideoIcon;
1614
+ exports.WarningIcon = WarningIcon;
1615
+ exports.Window = Window;
1616
+ exports.borders = borders;
1617
+ exports.colors = colors;
1618
+ exports.shadows = shadows;
1619
+ exports.spacing = spacing;
1620
+ exports.tokens = tokens;
1621
+ exports.transitions = transitions;
1622
+ exports.typography = typography;
1623
+ exports.zIndex = zIndex;
1624
+ //# sourceMappingURL=index.cjs.map
1625
+ //# sourceMappingURL=index.cjs.map