@tomny-dev/uzi 0.1.5 → 0.1.7
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 +109 -166
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +16 -16
- package/dist/index.css.map +1 -1
- package/dist/index.js +109 -166
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -8,26 +8,23 @@ function cx(...values) {
|
|
|
8
8
|
return values.filter(Boolean).join(" ");
|
|
9
9
|
}
|
|
10
10
|
|
|
11
|
-
// src/components/button/button.module.css
|
|
12
|
-
var button_default = {};
|
|
13
|
-
|
|
14
11
|
// src/components/button/Button.tsx
|
|
15
12
|
import { jsx } from "react/jsx-runtime";
|
|
16
13
|
var variantClass = {
|
|
17
|
-
default:
|
|
18
|
-
primary:
|
|
19
|
-
secondary:
|
|
20
|
-
outline:
|
|
21
|
-
ghost:
|
|
22
|
-
destructive:
|
|
23
|
-
link:
|
|
14
|
+
default: "variant-primary",
|
|
15
|
+
primary: "variant-primary",
|
|
16
|
+
secondary: "variant-secondary",
|
|
17
|
+
outline: "variant-outline",
|
|
18
|
+
ghost: "variant-ghost",
|
|
19
|
+
destructive: "variant-destructive",
|
|
20
|
+
link: "variant-link"
|
|
24
21
|
};
|
|
25
22
|
var sizeClass = {
|
|
26
|
-
default:
|
|
27
|
-
sm:
|
|
28
|
-
md:
|
|
29
|
-
lg:
|
|
30
|
-
icon:
|
|
23
|
+
default: "size-md",
|
|
24
|
+
sm: "size-sm",
|
|
25
|
+
md: "size-md",
|
|
26
|
+
lg: "size-lg",
|
|
27
|
+
icon: "size-icon"
|
|
31
28
|
};
|
|
32
29
|
function Button({
|
|
33
30
|
as,
|
|
@@ -39,7 +36,7 @@ function Button({
|
|
|
39
36
|
...rest
|
|
40
37
|
}) {
|
|
41
38
|
const classes = cx(
|
|
42
|
-
|
|
39
|
+
"button",
|
|
43
40
|
variantClass[variant],
|
|
44
41
|
sizeClass[size],
|
|
45
42
|
className
|
|
@@ -70,11 +67,6 @@ function Button({
|
|
|
70
67
|
|
|
71
68
|
// src/components/avatar/Avatar.tsx
|
|
72
69
|
import * as AvatarPrimitive from "@radix-ui/react-avatar";
|
|
73
|
-
|
|
74
|
-
// src/components/avatar/avatar.module.css
|
|
75
|
-
var avatar_default = {};
|
|
76
|
-
|
|
77
|
-
// src/components/avatar/Avatar.tsx
|
|
78
70
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
79
71
|
function Avatar({
|
|
80
72
|
className,
|
|
@@ -84,7 +76,7 @@ function Avatar({
|
|
|
84
76
|
return /* @__PURE__ */ jsx2(
|
|
85
77
|
AvatarPrimitive.Root,
|
|
86
78
|
{
|
|
87
|
-
className: cx(
|
|
79
|
+
className: cx("avatar", size === "sm" ? "size-sm" : size === "lg" ? "size-lg" : "size-md", className),
|
|
88
80
|
...props
|
|
89
81
|
}
|
|
90
82
|
);
|
|
@@ -96,7 +88,7 @@ function AvatarImage({
|
|
|
96
88
|
return /* @__PURE__ */ jsx2(
|
|
97
89
|
AvatarPrimitive.Image,
|
|
98
90
|
{
|
|
99
|
-
className: cx(
|
|
91
|
+
className: cx("image", className),
|
|
100
92
|
...props
|
|
101
93
|
}
|
|
102
94
|
);
|
|
@@ -108,15 +100,12 @@ function AvatarFallback({
|
|
|
108
100
|
return /* @__PURE__ */ jsx2(
|
|
109
101
|
AvatarPrimitive.Fallback,
|
|
110
102
|
{
|
|
111
|
-
className: cx(
|
|
103
|
+
className: cx("fallback", className),
|
|
112
104
|
...props
|
|
113
105
|
}
|
|
114
106
|
);
|
|
115
107
|
}
|
|
116
108
|
|
|
117
|
-
// src/components/card/card.module.css
|
|
118
|
-
var card_default = {};
|
|
119
|
-
|
|
120
109
|
// src/components/card/Card.tsx
|
|
121
110
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
122
111
|
function Card({
|
|
@@ -129,20 +118,18 @@ function Card({
|
|
|
129
118
|
...rest
|
|
130
119
|
}) {
|
|
131
120
|
const Component = as ?? "div";
|
|
132
|
-
const
|
|
121
|
+
const TONE_CLASS2 = { default: null, muted: "tone-muted", contrast: "tone-contrast" };
|
|
122
|
+
const PADDING_CLASS = { none: "padding-none", sm: "padding-sm", md: "padding-md", lg: "padding-lg" };
|
|
133
123
|
const classes = cx(
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
interactive &&
|
|
124
|
+
"card",
|
|
125
|
+
TONE_CLASS2[tone],
|
|
126
|
+
PADDING_CLASS[padding],
|
|
127
|
+
interactive && "interactive",
|
|
138
128
|
className
|
|
139
129
|
);
|
|
140
130
|
return /* @__PURE__ */ jsx3(Component, { className: classes, ...rest, children });
|
|
141
131
|
}
|
|
142
132
|
|
|
143
|
-
// src/components/pill/pill.module.css
|
|
144
|
-
var pill_default = {};
|
|
145
|
-
|
|
146
133
|
// src/components/pill/Pill.tsx
|
|
147
134
|
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
148
135
|
function Pill({
|
|
@@ -155,20 +142,15 @@ function Pill({
|
|
|
155
142
|
...rest
|
|
156
143
|
}) {
|
|
157
144
|
const Component = as ?? "span";
|
|
158
|
-
const classes = cx(
|
|
145
|
+
const classes = cx("pill", `tone-${tone}`, `size-${size}`, className);
|
|
159
146
|
return /* @__PURE__ */ jsxs(Component, { className: classes, ...rest, children: [
|
|
160
|
-
icon ? /* @__PURE__ */ jsx4("span", { className:
|
|
161
|
-
/* @__PURE__ */ jsx4("span", { className:
|
|
147
|
+
icon ? /* @__PURE__ */ jsx4("span", { className: "icon", "aria-hidden": "true", children: icon }) : null,
|
|
148
|
+
/* @__PURE__ */ jsx4("span", { className: "content", children })
|
|
162
149
|
] });
|
|
163
150
|
}
|
|
164
151
|
|
|
165
152
|
// src/components/modal/Modal.tsx
|
|
166
153
|
import { useRef, useEffect } from "react";
|
|
167
|
-
|
|
168
|
-
// src/components/modal/modal.module.css
|
|
169
|
-
var modal_default = {};
|
|
170
|
-
|
|
171
|
-
// src/components/modal/Modal.tsx
|
|
172
154
|
import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
173
155
|
function ModalOverlay({ open, onClose, className, children }) {
|
|
174
156
|
const mouseDownOnBackdrop = useRef(false);
|
|
@@ -187,7 +169,7 @@ function ModalOverlay({ open, onClose, className, children }) {
|
|
|
187
169
|
return /* @__PURE__ */ jsx5(
|
|
188
170
|
"div",
|
|
189
171
|
{
|
|
190
|
-
className: cx(
|
|
172
|
+
className: cx("backdrop", className),
|
|
191
173
|
role: "dialog",
|
|
192
174
|
"aria-modal": "true",
|
|
193
175
|
onMouseDown: (e) => {
|
|
@@ -202,29 +184,32 @@ function ModalOverlay({ open, onClose, className, children }) {
|
|
|
202
184
|
);
|
|
203
185
|
}
|
|
204
186
|
function Modal({ open, onClose, title, subtitle, size = "md", children, footer }) {
|
|
205
|
-
return /* @__PURE__ */ jsx5(ModalOverlay, { open, onClose, children: /* @__PURE__ */ jsxs2("div", { className: cx(
|
|
206
|
-
/* @__PURE__ */ jsxs2("div", { className:
|
|
207
|
-
/* @__PURE__ */ jsxs2("div", { className:
|
|
208
|
-
/* @__PURE__ */ jsx5("div", { className:
|
|
209
|
-
subtitle && /* @__PURE__ */ jsx5("div", { className:
|
|
187
|
+
return /* @__PURE__ */ jsx5(ModalOverlay, { open, onClose, children: /* @__PURE__ */ jsxs2("div", { className: cx("modal", `size-${size}`), children: [
|
|
188
|
+
/* @__PURE__ */ jsxs2("div", { className: "header", children: [
|
|
189
|
+
/* @__PURE__ */ jsxs2("div", { className: "titles", children: [
|
|
190
|
+
/* @__PURE__ */ jsx5("div", { className: "title", children: title }),
|
|
191
|
+
subtitle && /* @__PURE__ */ jsx5("div", { className: "subtitle", children: subtitle })
|
|
210
192
|
] }),
|
|
211
|
-
/* @__PURE__ */ jsx5("button", { className:
|
|
193
|
+
/* @__PURE__ */ jsx5("button", { className: "closeButton", onClick: onClose, "aria-label": "Close", children: /* @__PURE__ */ jsxs2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
212
194
|
/* @__PURE__ */ jsx5("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
213
195
|
/* @__PURE__ */ jsx5("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
214
196
|
] }) })
|
|
215
197
|
] }),
|
|
216
|
-
/* @__PURE__ */ jsx5("div", { className:
|
|
217
|
-
footer && /* @__PURE__ */ jsx5("div", { className:
|
|
198
|
+
/* @__PURE__ */ jsx5("div", { className: "body", children }),
|
|
199
|
+
footer && /* @__PURE__ */ jsx5("div", { className: "footer", children: footer })
|
|
218
200
|
] }) });
|
|
219
201
|
}
|
|
220
202
|
|
|
221
|
-
// src/components/alert/alert.module.css
|
|
222
|
-
var alert_default = {};
|
|
223
|
-
|
|
224
203
|
// src/components/alert/Alert.tsx
|
|
225
204
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
205
|
+
var TONE_CLASS = {
|
|
206
|
+
success: "success",
|
|
207
|
+
error: "error",
|
|
208
|
+
warning: "warning",
|
|
209
|
+
info: "info"
|
|
210
|
+
};
|
|
226
211
|
function Alert({ tone, children, className }) {
|
|
227
|
-
return /* @__PURE__ */ jsx6("div", { className: cx(
|
|
212
|
+
return /* @__PURE__ */ jsx6("div", { className: cx("alert", TONE_CLASS[tone], className), role: "alert", children });
|
|
228
213
|
}
|
|
229
214
|
|
|
230
215
|
// src/components/toast/ToastContext.tsx
|
|
@@ -237,11 +222,6 @@ import {
|
|
|
237
222
|
useRef as useRef2,
|
|
238
223
|
useState
|
|
239
224
|
} from "react";
|
|
240
|
-
|
|
241
|
-
// src/components/toast/toast.module.css
|
|
242
|
-
var toast_default = {};
|
|
243
|
-
|
|
244
|
-
// src/components/toast/ToastContext.tsx
|
|
245
225
|
import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
246
226
|
var DEFAULT_CONFIG = {
|
|
247
227
|
position: "top-right",
|
|
@@ -343,24 +323,24 @@ function ToastContainer({
|
|
|
343
323
|
const posClass = (() => {
|
|
344
324
|
switch (position) {
|
|
345
325
|
case "top-left":
|
|
346
|
-
return
|
|
326
|
+
return "topLeft";
|
|
347
327
|
case "top-center":
|
|
348
|
-
return
|
|
328
|
+
return "topCenter";
|
|
349
329
|
case "bottom-right":
|
|
350
|
-
return
|
|
330
|
+
return "bottomRight";
|
|
351
331
|
case "bottom-left":
|
|
352
|
-
return
|
|
332
|
+
return "bottomLeft";
|
|
353
333
|
case "bottom-center":
|
|
354
|
-
return
|
|
334
|
+
return "bottomCenter";
|
|
355
335
|
case "top-right":
|
|
356
336
|
default:
|
|
357
|
-
return
|
|
337
|
+
return "topRight";
|
|
358
338
|
}
|
|
359
339
|
})();
|
|
360
340
|
return /* @__PURE__ */ jsx7(
|
|
361
341
|
"div",
|
|
362
342
|
{
|
|
363
|
-
className: cx(
|
|
343
|
+
className: cx("stack", posClass),
|
|
364
344
|
role: "presentation",
|
|
365
345
|
onMouseEnter: () => pauseOnHover && onPauseChange(true),
|
|
366
346
|
onMouseLeave: () => pauseOnHover && onPauseChange(false),
|
|
@@ -426,15 +406,15 @@ function ToastItem({
|
|
|
426
406
|
}
|
|
427
407
|
}, [isPaused, schedule, toast.duration]);
|
|
428
408
|
const icon = getIcon(toast.type);
|
|
429
|
-
return /* @__PURE__ */ jsxs3("div", { className: cx(
|
|
430
|
-
/* @__PURE__ */ jsx7("span", { className:
|
|
431
|
-
/* @__PURE__ */ jsxs3("div", { className:
|
|
432
|
-
/* @__PURE__ */ jsx7("div", { className:
|
|
433
|
-
toast.action && /* @__PURE__ */ jsx7("div", { className:
|
|
409
|
+
return /* @__PURE__ */ jsxs3("div", { className: cx("toast", exiting && "exit"), style: styleVars, role: "status", "aria-live": "polite", children: [
|
|
410
|
+
/* @__PURE__ */ jsx7("span", { className: "icon", "aria-hidden": true, children: icon }),
|
|
411
|
+
/* @__PURE__ */ jsxs3("div", { className: "body", children: [
|
|
412
|
+
/* @__PURE__ */ jsx7("div", { className: "message", children: toast.message }),
|
|
413
|
+
toast.action && /* @__PURE__ */ jsx7("div", { className: "actions", children: /* @__PURE__ */ jsx7(
|
|
434
414
|
"button",
|
|
435
415
|
{
|
|
436
416
|
type: "button",
|
|
437
|
-
className:
|
|
417
|
+
className: "actionButton",
|
|
438
418
|
onClick: () => {
|
|
439
419
|
toast.action?.onClick();
|
|
440
420
|
triggerDismiss();
|
|
@@ -447,7 +427,7 @@ function ToastItem({
|
|
|
447
427
|
"button",
|
|
448
428
|
{
|
|
449
429
|
type: "button",
|
|
450
|
-
className:
|
|
430
|
+
className: "closeButton",
|
|
451
431
|
onClick: triggerDismiss,
|
|
452
432
|
"aria-label": "Dismiss notification",
|
|
453
433
|
children: /* @__PURE__ */ jsx7("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx7(
|
|
@@ -524,11 +504,6 @@ function getIcon(type) {
|
|
|
524
504
|
|
|
525
505
|
// src/components/input/Input.tsx
|
|
526
506
|
import * as React from "react";
|
|
527
|
-
|
|
528
|
-
// src/components/input/input.module.css
|
|
529
|
-
var input_default = {};
|
|
530
|
-
|
|
531
|
-
// src/components/input/Input.tsx
|
|
532
507
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
|
533
508
|
var Input = React.forwardRef(
|
|
534
509
|
({ className, type, ...props }, ref) => {
|
|
@@ -537,7 +512,7 @@ var Input = React.forwardRef(
|
|
|
537
512
|
{
|
|
538
513
|
ref,
|
|
539
514
|
type,
|
|
540
|
-
className: cx(
|
|
515
|
+
className: cx("input", className),
|
|
541
516
|
...props
|
|
542
517
|
}
|
|
543
518
|
);
|
|
@@ -547,24 +522,14 @@ Input.displayName = "Input";
|
|
|
547
522
|
|
|
548
523
|
// src/components/label/Label.tsx
|
|
549
524
|
import * as React2 from "react";
|
|
550
|
-
|
|
551
|
-
// src/components/label/label.module.css
|
|
552
|
-
var label_default = {};
|
|
553
|
-
|
|
554
|
-
// src/components/label/Label.tsx
|
|
555
525
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
556
526
|
var Label = React2.forwardRef(
|
|
557
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx9("label", { ref, className: cx(
|
|
527
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx9("label", { ref, className: cx("label", className), ...props })
|
|
558
528
|
);
|
|
559
529
|
Label.displayName = "Label";
|
|
560
530
|
|
|
561
531
|
// src/components/checkbox/Checkbox.tsx
|
|
562
532
|
import * as React3 from "react";
|
|
563
|
-
|
|
564
|
-
// src/components/checkbox/checkbox.module.css
|
|
565
|
-
var checkbox_default = {};
|
|
566
|
-
|
|
567
|
-
// src/components/checkbox/Checkbox.tsx
|
|
568
533
|
import { jsx as jsx10 } from "react/jsx-runtime";
|
|
569
534
|
var Checkbox = React3.forwardRef(
|
|
570
535
|
({ className, ...props }, ref) => {
|
|
@@ -573,7 +538,7 @@ var Checkbox = React3.forwardRef(
|
|
|
573
538
|
{
|
|
574
539
|
ref,
|
|
575
540
|
type: "checkbox",
|
|
576
|
-
className: cx(
|
|
541
|
+
className: cx("checkbox", className),
|
|
577
542
|
...props
|
|
578
543
|
}
|
|
579
544
|
);
|
|
@@ -583,11 +548,6 @@ Checkbox.displayName = "Checkbox";
|
|
|
583
548
|
|
|
584
549
|
// src/components/dropdown/Dropdown.tsx
|
|
585
550
|
import { useState as useState2, useRef as useRef3, useEffect as useEffect3 } from "react";
|
|
586
|
-
|
|
587
|
-
// src/components/dropdown/dropdown.module.css
|
|
588
|
-
var dropdown_default = {};
|
|
589
|
-
|
|
590
|
-
// src/components/dropdown/Dropdown.tsx
|
|
591
551
|
import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
592
552
|
function Dropdown({
|
|
593
553
|
options,
|
|
@@ -612,27 +572,27 @@ function Dropdown({
|
|
|
612
572
|
document.addEventListener("mousedown", handleClickOutside);
|
|
613
573
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
614
574
|
}, []);
|
|
615
|
-
return /* @__PURE__ */ jsxs4("div", { className: cx(
|
|
575
|
+
return /* @__PURE__ */ jsxs4("div", { className: cx("wrapper", className), ref, children: [
|
|
616
576
|
/* @__PURE__ */ jsxs4(
|
|
617
577
|
"button",
|
|
618
578
|
{
|
|
619
579
|
type: "button",
|
|
620
|
-
className: cx(
|
|
580
|
+
className: cx("trigger", isActive && "trigger-active"),
|
|
621
581
|
onClick: () => setOpen((o) => !o),
|
|
622
582
|
"aria-labelledby": ariaLabelledBy,
|
|
623
583
|
"aria-label": ariaLabel,
|
|
624
584
|
children: [
|
|
625
585
|
selected ? selected.label : placeholder,
|
|
626
|
-
/* @__PURE__ */ jsx11("span", { className: cx(
|
|
586
|
+
/* @__PURE__ */ jsx11("span", { className: cx("chevron", open && "chevron-open"), children: /* @__PURE__ */ jsx11("svg", { viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", children: /* @__PURE__ */ jsx11("path", { d: "M2 3.5L5 6.5L8 3.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
|
|
627
587
|
]
|
|
628
588
|
}
|
|
629
589
|
),
|
|
630
|
-
open && /* @__PURE__ */ jsxs4("div", { className:
|
|
590
|
+
open && /* @__PURE__ */ jsxs4("div", { className: "menu", children: [
|
|
631
591
|
allowClear && /* @__PURE__ */ jsx11(
|
|
632
592
|
"button",
|
|
633
593
|
{
|
|
634
594
|
type: "button",
|
|
635
|
-
className: cx(
|
|
595
|
+
className: cx("option", value === "" && "option-selected"),
|
|
636
596
|
onClick: () => {
|
|
637
597
|
onChange("");
|
|
638
598
|
setOpen(false);
|
|
@@ -644,7 +604,7 @@ function Dropdown({
|
|
|
644
604
|
"button",
|
|
645
605
|
{
|
|
646
606
|
type: "button",
|
|
647
|
-
className: cx(
|
|
607
|
+
className: cx("option", value === opt.value && "option-selected"),
|
|
648
608
|
onClick: () => {
|
|
649
609
|
onChange(opt.value);
|
|
650
610
|
setOpen(false);
|
|
@@ -659,11 +619,6 @@ function Dropdown({
|
|
|
659
619
|
|
|
660
620
|
// src/components/dropdown-menu/DropdownMenu.tsx
|
|
661
621
|
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
662
|
-
|
|
663
|
-
// src/components/dropdown-menu/dropdown-menu.module.css
|
|
664
|
-
var dropdown_menu_default = {};
|
|
665
|
-
|
|
666
|
-
// src/components/dropdown-menu/DropdownMenu.tsx
|
|
667
622
|
import { jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
668
623
|
function DropdownMenu(props) {
|
|
669
624
|
return /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Root, { ...props });
|
|
@@ -692,7 +647,7 @@ function DropdownMenuContent({
|
|
|
692
647
|
DropdownMenuPrimitive.Content,
|
|
693
648
|
{
|
|
694
649
|
sideOffset,
|
|
695
|
-
className: cx(
|
|
650
|
+
className: cx("content", className),
|
|
696
651
|
...props
|
|
697
652
|
}
|
|
698
653
|
) });
|
|
@@ -708,8 +663,8 @@ function DropdownMenuItem({
|
|
|
708
663
|
{
|
|
709
664
|
"data-inset": inset ? "true" : void 0,
|
|
710
665
|
className: cx(
|
|
711
|
-
|
|
712
|
-
variant === "destructive" &&
|
|
666
|
+
"item",
|
|
667
|
+
variant === "destructive" && "destructive",
|
|
713
668
|
className
|
|
714
669
|
),
|
|
715
670
|
...props
|
|
@@ -724,17 +679,17 @@ function DropdownMenuCheckboxItem({
|
|
|
724
679
|
return /* @__PURE__ */ jsxs5(
|
|
725
680
|
DropdownMenuPrimitive.CheckboxItem,
|
|
726
681
|
{
|
|
727
|
-
className: cx(
|
|
682
|
+
className: cx("item", "insetItem", className),
|
|
728
683
|
...props,
|
|
729
684
|
children: [
|
|
730
|
-
/* @__PURE__ */ jsx12("span", { className:
|
|
685
|
+
/* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12(
|
|
731
686
|
"svg",
|
|
732
687
|
{
|
|
733
688
|
viewBox: "0 0 16 16",
|
|
734
689
|
width: "16",
|
|
735
690
|
height: "16",
|
|
736
691
|
"aria-hidden": "true",
|
|
737
|
-
className:
|
|
692
|
+
className: "indicatorIcon",
|
|
738
693
|
children: /* @__PURE__ */ jsx12(
|
|
739
694
|
"path",
|
|
740
695
|
{
|
|
@@ -761,10 +716,10 @@ function DropdownMenuRadioItem({
|
|
|
761
716
|
return /* @__PURE__ */ jsxs5(
|
|
762
717
|
DropdownMenuPrimitive.RadioItem,
|
|
763
718
|
{
|
|
764
|
-
className: cx(
|
|
719
|
+
className: cx("item", "insetItem", className),
|
|
765
720
|
...props,
|
|
766
721
|
children: [
|
|
767
|
-
/* @__PURE__ */ jsx12("span", { className:
|
|
722
|
+
/* @__PURE__ */ jsx12("span", { className: "indicator", children: /* @__PURE__ */ jsx12(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx12("span", { className: "radioDot" }) }) }),
|
|
768
723
|
children
|
|
769
724
|
]
|
|
770
725
|
}
|
|
@@ -779,7 +734,7 @@ function DropdownMenuLabel({
|
|
|
779
734
|
DropdownMenuPrimitive.Label,
|
|
780
735
|
{
|
|
781
736
|
"data-inset": inset ? "true" : void 0,
|
|
782
|
-
className: cx(
|
|
737
|
+
className: cx("label", className),
|
|
783
738
|
...props
|
|
784
739
|
}
|
|
785
740
|
);
|
|
@@ -791,7 +746,7 @@ function DropdownMenuSeparator({
|
|
|
791
746
|
return /* @__PURE__ */ jsx12(
|
|
792
747
|
DropdownMenuPrimitive.Separator,
|
|
793
748
|
{
|
|
794
|
-
className: cx(
|
|
749
|
+
className: cx("separator", className),
|
|
795
750
|
...props
|
|
796
751
|
}
|
|
797
752
|
);
|
|
@@ -806,7 +761,7 @@ function DropdownMenuSubTrigger({
|
|
|
806
761
|
DropdownMenuPrimitive.SubTrigger,
|
|
807
762
|
{
|
|
808
763
|
"data-inset": inset ? "true" : void 0,
|
|
809
|
-
className: cx(
|
|
764
|
+
className: cx("item", className),
|
|
810
765
|
...props,
|
|
811
766
|
children: [
|
|
812
767
|
children,
|
|
@@ -817,7 +772,7 @@ function DropdownMenuSubTrigger({
|
|
|
817
772
|
width: "16",
|
|
818
773
|
height: "16",
|
|
819
774
|
"aria-hidden": "true",
|
|
820
|
-
className:
|
|
775
|
+
className: "chevron",
|
|
821
776
|
children: /* @__PURE__ */ jsx12(
|
|
822
777
|
"path",
|
|
823
778
|
{
|
|
@@ -842,7 +797,7 @@ function DropdownMenuSubContent({
|
|
|
842
797
|
return /* @__PURE__ */ jsx12(
|
|
843
798
|
DropdownMenuPrimitive.SubContent,
|
|
844
799
|
{
|
|
845
|
-
className: cx(
|
|
800
|
+
className: cx("content", className),
|
|
846
801
|
...props
|
|
847
802
|
}
|
|
848
803
|
);
|
|
@@ -976,9 +931,6 @@ function useTheme() {
|
|
|
976
931
|
return context;
|
|
977
932
|
}
|
|
978
933
|
|
|
979
|
-
// src/components/theme-toggle-button/theme-toggle-button.module.css
|
|
980
|
-
var theme_toggle_button_default = {};
|
|
981
|
-
|
|
982
934
|
// src/components/theme-toggle-button/ThemeToggleButton.tsx
|
|
983
935
|
import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
984
936
|
function MoonIcon() {
|
|
@@ -1023,7 +975,7 @@ function ThemeToggleButton({
|
|
|
1023
975
|
type: "button",
|
|
1024
976
|
variant: "ghost",
|
|
1025
977
|
size: showLabel ? "sm" : "icon",
|
|
1026
|
-
className: cx(showLabel &&
|
|
978
|
+
className: cx(showLabel && "withLabel", className),
|
|
1027
979
|
"aria-label": `Switch to ${nextThemeLabel.toLowerCase()}`,
|
|
1028
980
|
title: `Switch to ${nextThemeLabel.toLowerCase()}`,
|
|
1029
981
|
onClick: (event) => {
|
|
@@ -1039,9 +991,6 @@ function ThemeToggleButton({
|
|
|
1039
991
|
);
|
|
1040
992
|
}
|
|
1041
993
|
|
|
1042
|
-
// src/components/top-bar/top-bar.module.css
|
|
1043
|
-
var top_bar_default = {};
|
|
1044
|
-
|
|
1045
994
|
// src/components/top-bar/TopBar.tsx
|
|
1046
995
|
import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1047
996
|
function TopBar({
|
|
@@ -1062,23 +1011,23 @@ function TopBar({
|
|
|
1062
1011
|
...rest
|
|
1063
1012
|
}) {
|
|
1064
1013
|
const shouldStick = isSticky ?? sticky;
|
|
1065
|
-
const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx15("a", { href: brandHref, className:
|
|
1014
|
+
const brandNode = !brand ? null : brandHref ? /* @__PURE__ */ jsx15("a", { href: brandHref, className: "topBarBrand", children: /* @__PURE__ */ jsx15("span", { className: "topBarBrandContent", children: brand }) }) : /* @__PURE__ */ jsx15("div", { className: "topBarBrand", children: /* @__PURE__ */ jsx15("span", { className: "topBarBrandContent", children: brand }) });
|
|
1066
1015
|
return /* @__PURE__ */ jsx15(
|
|
1067
1016
|
"header",
|
|
1068
1017
|
{
|
|
1069
|
-
className: cx(
|
|
1018
|
+
className: cx("topBar", !shouldStick && "topBarStatic", className),
|
|
1070
1019
|
...rest,
|
|
1071
|
-
children: /* @__PURE__ */ jsxs7("div", { className: cx(
|
|
1072
|
-
/* @__PURE__ */ jsxs7("div", { className:
|
|
1020
|
+
children: /* @__PURE__ */ jsxs7("div", { className: cx("topBarInner", innerClassName), children: [
|
|
1021
|
+
/* @__PURE__ */ jsxs7("div", { className: "topBarStart", children: [
|
|
1073
1022
|
leading,
|
|
1074
1023
|
brandingLocation === "left" && brandNode,
|
|
1075
1024
|
start
|
|
1076
1025
|
] }),
|
|
1077
|
-
brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx15("div", { className:
|
|
1026
|
+
brandNode && brandingLocation === "center" || center || children ? /* @__PURE__ */ jsx15("div", { className: "topBarCenter", children: /* @__PURE__ */ jsxs7("div", { className: "topBarCenterGroup", children: [
|
|
1078
1027
|
brandingLocation === "center" && brandNode,
|
|
1079
1028
|
center ?? children
|
|
1080
1029
|
] }) }) : null,
|
|
1081
|
-
/* @__PURE__ */ jsxs7("div", { className:
|
|
1030
|
+
/* @__PURE__ */ jsxs7("div", { className: "topBarActions", children: [
|
|
1082
1031
|
showThemeToggle && /* @__PURE__ */ jsx15(ThemeToggleButton, { ...themeToggleProps }),
|
|
1083
1032
|
actions
|
|
1084
1033
|
] })
|
|
@@ -1087,9 +1036,6 @@ function TopBar({
|
|
|
1087
1036
|
);
|
|
1088
1037
|
}
|
|
1089
1038
|
|
|
1090
|
-
// src/components/app-shell/app-shell.module.css
|
|
1091
|
-
var app_shell_default = {};
|
|
1092
|
-
|
|
1093
1039
|
// src/components/app-shell/AppShell.tsx
|
|
1094
1040
|
import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1095
1041
|
var DESKTOP_BREAKPOINT = 960;
|
|
@@ -1185,12 +1131,12 @@ function AppShell({
|
|
|
1185
1131
|
const sidebarWidthValue = sidebarWidth === void 0 ? void 0 : typeof sidebarWidth === "number" ? `${sidebarWidth}px` : sidebarWidth;
|
|
1186
1132
|
const shellStyle = sidebarWidthValue ? { ["--app-shell-sidebar-width"]: sidebarWidthValue } : void 0;
|
|
1187
1133
|
const shellClasses = cx(
|
|
1188
|
-
|
|
1189
|
-
transitionsReady &&
|
|
1190
|
-
sidebarOpen ?
|
|
1134
|
+
"appShell",
|
|
1135
|
+
transitionsReady && "appShellAnimated",
|
|
1136
|
+
sidebarOpen ? "appShellOpen" : "appShellCollapsed",
|
|
1191
1137
|
className
|
|
1192
1138
|
);
|
|
1193
|
-
const sidebarClasses = cx(
|
|
1139
|
+
const sidebarClasses = cx("appShellSidebar", sidebarOpen && "appShellSidebarOpen", sidebarClassName);
|
|
1194
1140
|
return /* @__PURE__ */ jsxs8(
|
|
1195
1141
|
"div",
|
|
1196
1142
|
{
|
|
@@ -1203,13 +1149,13 @@ function AppShell({
|
|
|
1203
1149
|
/* @__PURE__ */ jsx16(
|
|
1204
1150
|
TopBar,
|
|
1205
1151
|
{
|
|
1206
|
-
className: cx(
|
|
1152
|
+
className: cx("appShellTopbar", topbarClassName),
|
|
1207
1153
|
leading: /* @__PURE__ */ jsx16(
|
|
1208
1154
|
"button",
|
|
1209
1155
|
{
|
|
1210
1156
|
ref: hamburgerRef,
|
|
1211
1157
|
type: "button",
|
|
1212
|
-
className:
|
|
1158
|
+
className: "appShellHamburger",
|
|
1213
1159
|
onClick: toggleSidebar,
|
|
1214
1160
|
"aria-label": hamburgerLabel,
|
|
1215
1161
|
"aria-expanded": sidebarOpen,
|
|
@@ -1226,17 +1172,14 @@ function AppShell({
|
|
|
1226
1172
|
themeToggleProps
|
|
1227
1173
|
}
|
|
1228
1174
|
),
|
|
1229
|
-
!isDesktop && sidebarOpen && /* @__PURE__ */ jsx16("div", { className:
|
|
1175
|
+
!isDesktop && sidebarOpen && /* @__PURE__ */ jsx16("div", { className: "appShellBackdrop", onClick: () => setSidebarOpen(false), onTouchStart: () => setSidebarOpen(false), "aria-hidden": "true" }),
|
|
1230
1176
|
/* @__PURE__ */ jsx16("aside", { ref: sidebarRef, id: sidebarId, className: sidebarClasses, "aria-label": "Sidebar navigation", children: sidebar }),
|
|
1231
|
-
/* @__PURE__ */ jsx16("main", { ref: mainRef, className: cx(
|
|
1177
|
+
/* @__PURE__ */ jsx16("main", { ref: mainRef, className: cx("appShellMain", mainClassName), children })
|
|
1232
1178
|
]
|
|
1233
1179
|
}
|
|
1234
1180
|
);
|
|
1235
1181
|
}
|
|
1236
1182
|
|
|
1237
|
-
// src/components/sidebar-nav/sidebar-nav.module.css
|
|
1238
|
-
var sidebar_nav_default = {};
|
|
1239
|
-
|
|
1240
1183
|
// src/components/sidebar-nav/SidebarNav.tsx
|
|
1241
1184
|
import { Fragment, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1242
1185
|
var defaultIsActive = (item, path) => {
|
|
@@ -1268,18 +1211,18 @@ function SidebarNav({
|
|
|
1268
1211
|
return /* @__PURE__ */ jsxs9(
|
|
1269
1212
|
"nav",
|
|
1270
1213
|
{
|
|
1271
|
-
className: cx(
|
|
1214
|
+
className: cx("uziSidebarNav", collapsed && "uziSidebarNavCollapsed", className),
|
|
1272
1215
|
"aria-label": ariaLabel,
|
|
1273
1216
|
style,
|
|
1274
1217
|
children: [
|
|
1275
|
-
header ? /* @__PURE__ */ jsx17("div", { className:
|
|
1276
|
-
/* @__PURE__ */ jsx17("div", { className:
|
|
1218
|
+
header ? /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavHeader", children: header }) : null,
|
|
1219
|
+
/* @__PURE__ */ jsx17("div", { className: "uziSidebarNavSections", children: resolvedSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs9(
|
|
1277
1220
|
"div",
|
|
1278
1221
|
{
|
|
1279
|
-
className: cx(
|
|
1222
|
+
className: cx("uziSidebarNavSection", sectionClassName),
|
|
1280
1223
|
children: [
|
|
1281
|
-
section.label && !collapsed ? /* @__PURE__ */ jsx17("div", { className:
|
|
1282
|
-
/* @__PURE__ */ jsx17("div", { className:
|
|
1224
|
+
section.label && !collapsed ? /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavSectionLabel", children: section.label }) : null,
|
|
1225
|
+
/* @__PURE__ */ jsx17("div", { className: "uziSidebarNavSectionItems", children: section.items.map((item, itemIndex) => /* @__PURE__ */ jsx17(
|
|
1283
1226
|
SidebarNavEntry,
|
|
1284
1227
|
{
|
|
1285
1228
|
item,
|
|
@@ -1294,7 +1237,7 @@ function SidebarNav({
|
|
|
1294
1237
|
},
|
|
1295
1238
|
section.id ?? `section-${sectionIndex}`
|
|
1296
1239
|
)) }),
|
|
1297
|
-
footer ? /* @__PURE__ */ jsx17("div", { className:
|
|
1240
|
+
footer ? /* @__PURE__ */ jsx17("div", { className: "uziSidebarNavFooter", children: footer }) : null
|
|
1298
1241
|
]
|
|
1299
1242
|
}
|
|
1300
1243
|
);
|
|
@@ -1309,20 +1252,20 @@ function SidebarNavEntry({
|
|
|
1309
1252
|
const rel = item.rel ?? (item.target === "_blank" ? "noreferrer" : void 0);
|
|
1310
1253
|
const title = item.title ?? (typeof item.label === "string" ? item.label : void 0);
|
|
1311
1254
|
const classes = cx(
|
|
1312
|
-
|
|
1313
|
-
active &&
|
|
1314
|
-
collapsed &&
|
|
1315
|
-
item.disabled &&
|
|
1255
|
+
"uziSidebarNavItem",
|
|
1256
|
+
active && "uziSidebarNavItemActive",
|
|
1257
|
+
collapsed && "uziSidebarNavItemCollapsed",
|
|
1258
|
+
item.disabled && "uziSidebarNavItemDisabled",
|
|
1316
1259
|
itemClassName
|
|
1317
1260
|
);
|
|
1318
1261
|
const content = /* @__PURE__ */ jsxs9(Fragment, { children: [
|
|
1319
|
-
item.icon && /* @__PURE__ */ jsx17("span", { className:
|
|
1320
|
-
!collapsed ? /* @__PURE__ */ jsxs9("span", { className:
|
|
1321
|
-
/* @__PURE__ */ jsxs9("span", { className:
|
|
1322
|
-
/* @__PURE__ */ jsx17("span", { className:
|
|
1323
|
-
item.badge && /* @__PURE__ */ jsx17("span", { className:
|
|
1262
|
+
item.icon && /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavIcon", children: item.icon }),
|
|
1263
|
+
!collapsed ? /* @__PURE__ */ jsxs9("span", { className: "uziSidebarNavItemBody", children: [
|
|
1264
|
+
/* @__PURE__ */ jsxs9("span", { className: "uziSidebarNavLabelRow", children: [
|
|
1265
|
+
/* @__PURE__ */ jsx17("span", { className: "uziSidebarNavLabel", children: item.label }),
|
|
1266
|
+
item.badge && /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavBadge", children: item.badge })
|
|
1324
1267
|
] }),
|
|
1325
|
-
item.description ? /* @__PURE__ */ jsx17("span", { className:
|
|
1268
|
+
item.description ? /* @__PURE__ */ jsx17("span", { className: "uziSidebarNavDescription", children: item.description }) : null
|
|
1326
1269
|
] }) : null
|
|
1327
1270
|
] });
|
|
1328
1271
|
const handleClick = () => {
|