@platned/ui 0.1.3 → 0.1.4
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/README.md +2 -19
- package/dist/index.cjs +312 -291
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +10 -3
- package/dist/index.d.ts +10 -3
- package/dist/index.js +311 -291
- package/dist/index.js.map +1 -1
- package/dist/sidebar.cjs +22 -22
- package/dist/sidebar.cjs.map +1 -1
- package/dist/sidebar.js +22 -22
- package/dist/sidebar.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -1
- package/tailwind-preset.js +99 -52
package/dist/index.js
CHANGED
|
@@ -1,34 +1,37 @@
|
|
|
1
1
|
// src/index.tsx
|
|
2
|
-
import
|
|
2
|
+
import clsx21 from "clsx";
|
|
3
3
|
|
|
4
4
|
// src/components/button.tsx
|
|
5
5
|
import clsx from "clsx";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
7
|
var variantStyles = {
|
|
8
8
|
primary: clsx(
|
|
9
|
-
"bg-
|
|
10
|
-
"hover:bg-
|
|
11
|
-
"disabled:bg-
|
|
9
|
+
"bg-brand border border-brand text-brand-on-brand",
|
|
10
|
+
"hover:bg-brand-hover",
|
|
11
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
12
12
|
),
|
|
13
13
|
neutral: clsx(
|
|
14
|
-
"bg-
|
|
15
|
-
"hover:bg-
|
|
16
|
-
"disabled:bg-
|
|
14
|
+
"bg-default border border-default text-default",
|
|
15
|
+
"hover:bg-default-hover hover:text-brand",
|
|
16
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
17
17
|
),
|
|
18
18
|
subtle: clsx(
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
"
|
|
19
|
+
// border-transparent holds space so hover border doesn't shift layout
|
|
20
|
+
"bg-transparent border border-transparent text-neutral",
|
|
21
|
+
"hover:border-default hover:text-brand",
|
|
22
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
22
23
|
),
|
|
23
24
|
danger: clsx(
|
|
24
|
-
"bg-
|
|
25
|
-
|
|
26
|
-
"
|
|
25
|
+
"bg-danger border border-danger-secondary text-danger-on-danger",
|
|
26
|
+
// border shifts from danger-secondary → danger-default on hover (Figma spec)
|
|
27
|
+
"hover:bg-danger-hover hover:border-danger",
|
|
28
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
27
29
|
),
|
|
28
30
|
"danger-subtle": clsx(
|
|
29
|
-
|
|
30
|
-
"
|
|
31
|
-
"
|
|
31
|
+
// border-transparent base avoids layout shift when hover border appears
|
|
32
|
+
"bg-transparent border border-transparent text-danger",
|
|
33
|
+
"hover:bg-danger-tertiary-hover hover:border-danger",
|
|
34
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
32
35
|
)
|
|
33
36
|
};
|
|
34
37
|
var sizeStyles = {
|
|
@@ -50,7 +53,7 @@ function Button({
|
|
|
50
53
|
{
|
|
51
54
|
className: clsx(
|
|
52
55
|
"inline-flex items-center justify-center whitespace-nowrap transition-colors",
|
|
53
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
56
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
54
57
|
"disabled:cursor-not-allowed",
|
|
55
58
|
variantStyles[variant],
|
|
56
59
|
sizeStyles[size],
|
|
@@ -71,20 +74,23 @@ import clsx2 from "clsx";
|
|
|
71
74
|
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
72
75
|
var variantStyles2 = {
|
|
73
76
|
primary: clsx2(
|
|
74
|
-
"bg-
|
|
75
|
-
"hover:bg-
|
|
76
|
-
"disabled:bg-
|
|
77
|
+
"bg-brand border border-brand text-brand-on-brand",
|
|
78
|
+
"hover:bg-brand-hover",
|
|
79
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
77
80
|
),
|
|
78
81
|
// Neutral uses secondary background (light gray) for visual weight without a text label
|
|
79
82
|
neutral: clsx2(
|
|
80
|
-
"bg-
|
|
81
|
-
|
|
82
|
-
"
|
|
83
|
+
"bg-default-secondary border border-default text-default",
|
|
84
|
+
// icon turns brand blue on hover (Figma spec)
|
|
85
|
+
"hover:bg-default-secondary-hover hover:text-brand",
|
|
86
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
83
87
|
),
|
|
84
88
|
subtle: clsx2(
|
|
85
|
-
"bg-transparent text-
|
|
86
|
-
|
|
87
|
-
"
|
|
89
|
+
"bg-transparent text-neutral",
|
|
90
|
+
// hover uses background-default-default-hover (#f5f5f5), icon turns brand blue (Figma spec)
|
|
91
|
+
"hover:bg-default-hover hover:text-brand",
|
|
92
|
+
// disabled needs explicit border since there is no base border
|
|
93
|
+
"disabled:bg-disabled disabled:border disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
88
94
|
)
|
|
89
95
|
};
|
|
90
96
|
var sizeStyles2 = {
|
|
@@ -95,7 +101,7 @@ var sizeStyles2 = {
|
|
|
95
101
|
function IconButton({
|
|
96
102
|
variant = "primary",
|
|
97
103
|
size = "md",
|
|
98
|
-
|
|
104
|
+
children,
|
|
99
105
|
className,
|
|
100
106
|
...props
|
|
101
107
|
}) {
|
|
@@ -104,14 +110,14 @@ function IconButton({
|
|
|
104
110
|
{
|
|
105
111
|
className: clsx2(
|
|
106
112
|
"inline-flex shrink-0 items-center justify-center transition-colors",
|
|
107
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
113
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
108
114
|
"disabled:cursor-not-allowed",
|
|
109
115
|
variantStyles2[variant],
|
|
110
116
|
sizeStyles2[size],
|
|
111
117
|
className
|
|
112
118
|
),
|
|
113
119
|
...props,
|
|
114
|
-
children
|
|
120
|
+
children
|
|
115
121
|
}
|
|
116
122
|
);
|
|
117
123
|
}
|
|
@@ -120,28 +126,28 @@ function IconButton({
|
|
|
120
126
|
import clsx3 from "clsx";
|
|
121
127
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
122
128
|
var containerStyles = {
|
|
123
|
-
primary: "bg-
|
|
124
|
-
neutral: "bg-
|
|
125
|
-
filter: "bg-
|
|
129
|
+
primary: "bg-neutral-tertiary p-1 rounded-2xl",
|
|
130
|
+
neutral: "bg-neutral-tertiary p-1 rounded-2xl",
|
|
131
|
+
filter: "bg-default border border-default p-1 rounded-xl"
|
|
126
132
|
};
|
|
127
133
|
var selectedStyles = {
|
|
128
134
|
primary: clsx3(
|
|
129
|
-
"bg-
|
|
130
|
-
"hover:bg-
|
|
135
|
+
"bg-brand border border-brand text-brand-on-brand",
|
|
136
|
+
"hover:bg-brand-hover"
|
|
131
137
|
),
|
|
132
138
|
neutral: clsx3(
|
|
133
|
-
"bg-
|
|
134
|
-
"hover:bg-
|
|
139
|
+
"bg-default border border-default text-default",
|
|
140
|
+
"hover:bg-default-hover"
|
|
135
141
|
),
|
|
136
142
|
filter: clsx3(
|
|
137
|
-
"bg-
|
|
138
|
-
"hover:bg-
|
|
143
|
+
"bg-brand text-brand-on-brand",
|
|
144
|
+
"hover:bg-brand-hover"
|
|
139
145
|
)
|
|
140
146
|
};
|
|
141
147
|
var unselectedStyles = {
|
|
142
|
-
primary: clsx3("bg-transparent text-
|
|
143
|
-
neutral: clsx3("bg-transparent text-
|
|
144
|
-
filter: clsx3("text-
|
|
148
|
+
primary: clsx3("bg-transparent text-neutral", "hover:bg-neutral-tertiary-hover"),
|
|
149
|
+
neutral: clsx3("bg-transparent text-neutral", "hover:bg-neutral-tertiary-hover"),
|
|
150
|
+
filter: clsx3("text-default-secondary", "hover:text-default")
|
|
145
151
|
};
|
|
146
152
|
var itemSizeStyles = {
|
|
147
153
|
lg: "h-12 px-3 gap-1 rounded-2xl text-body font-semibold [&_svg]:size-5",
|
|
@@ -192,8 +198,8 @@ function ButtonGroup({
|
|
|
192
198
|
onClick: () => onChange(item.value),
|
|
193
199
|
className: clsx3(
|
|
194
200
|
"inline-flex items-center justify-center whitespace-nowrap transition-colors",
|
|
195
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
196
|
-
"disabled:cursor-not-allowed disabled:text-
|
|
201
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
202
|
+
"disabled:cursor-not-allowed disabled:text-disabled",
|
|
197
203
|
(isJustify || isStack) && "w-full",
|
|
198
204
|
itemSizeStyles[size],
|
|
199
205
|
isSelected ? selectedStyles[variant] : unselectedStyles[variant]
|
|
@@ -226,16 +232,16 @@ var initialTextStyles = {
|
|
|
226
232
|
md: "text-body-xs font-semibold",
|
|
227
233
|
sm: "text-body-tiny font-semibold"
|
|
228
234
|
};
|
|
229
|
-
|
|
230
|
-
circle
|
|
231
|
-
|
|
232
|
-
}
|
|
235
|
+
function getShapeClass(shape, size) {
|
|
236
|
+
if (shape === "circle") return "rounded-full";
|
|
237
|
+
return size === "sm" ? "rounded" : "rounded-lg";
|
|
238
|
+
}
|
|
233
239
|
function Avatar(props) {
|
|
234
240
|
const { size = "lg", shape = "circle", className } = props;
|
|
235
241
|
const base = clsx4(
|
|
236
242
|
"shrink-0 overflow-hidden",
|
|
237
243
|
sizeStyles3[size],
|
|
238
|
-
|
|
244
|
+
getShapeClass(shape, size),
|
|
239
245
|
className
|
|
240
246
|
);
|
|
241
247
|
if (props.type === "image") {
|
|
@@ -259,7 +265,7 @@ function Avatar(props) {
|
|
|
259
265
|
"span",
|
|
260
266
|
{
|
|
261
267
|
className: clsx4(
|
|
262
|
-
"select-none leading-none text-
|
|
268
|
+
"select-none leading-none text-brand-on-brand",
|
|
263
269
|
initialTextStyles[size]
|
|
264
270
|
),
|
|
265
271
|
children: props.initial.charAt(0).toUpperCase()
|
|
@@ -294,7 +300,7 @@ function AvatarGroup({
|
|
|
294
300
|
className: clsx5(
|
|
295
301
|
"flex items-center justify-center",
|
|
296
302
|
"min-w-6 h-6 px-1 rounded-lg",
|
|
297
|
-
"bg-
|
|
303
|
+
"bg-default-secondary text-default-secondary text-body-sm",
|
|
298
304
|
spacing === "overlap" && "drop-shadow-sm"
|
|
299
305
|
),
|
|
300
306
|
children: [
|
|
@@ -308,9 +314,22 @@ function AvatarGroup({
|
|
|
308
314
|
);
|
|
309
315
|
}
|
|
310
316
|
|
|
311
|
-
// src/components/
|
|
317
|
+
// src/components/avatar-block.tsx
|
|
312
318
|
import clsx6 from "clsx";
|
|
313
319
|
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
320
|
+
function AvatarBlock({ children, title, description, className }) {
|
|
321
|
+
return /* @__PURE__ */ jsxs4("div", { className: clsx6("flex items-start gap-3", className), children: [
|
|
322
|
+
/* @__PURE__ */ jsx5("div", { className: "shrink-0", children }),
|
|
323
|
+
/* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
|
|
324
|
+
/* @__PURE__ */ jsx5("span", { className: "text-body font-semibold leading-[1.4] text-default-secondary", children: title }),
|
|
325
|
+
description && /* @__PURE__ */ jsx5("span", { className: "text-body leading-[1.4] text-default-tertiary", children: description })
|
|
326
|
+
] })
|
|
327
|
+
] });
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
// src/components/nav-item.tsx
|
|
331
|
+
import clsx7 from "clsx";
|
|
332
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
314
333
|
function NavItem({
|
|
315
334
|
icon,
|
|
316
335
|
label,
|
|
@@ -319,22 +338,22 @@ function NavItem({
|
|
|
319
338
|
collapsed = false,
|
|
320
339
|
className
|
|
321
340
|
}) {
|
|
322
|
-
return /* @__PURE__ */
|
|
341
|
+
return /* @__PURE__ */ jsxs5(
|
|
323
342
|
"span",
|
|
324
343
|
{
|
|
325
|
-
className:
|
|
344
|
+
className: clsx7(
|
|
326
345
|
"relative flex h-11 w-full items-center gap-3 rounded-xl px-3.5 py-2.5 transition-colors",
|
|
327
346
|
collapsed && "justify-center",
|
|
328
|
-
isActive ? "bg-
|
|
329
|
-
"border border-
|
|
330
|
-
"hover:bg-
|
|
347
|
+
isActive ? "bg-brand text-brand-on-brand" : [
|
|
348
|
+
"border border-default bg-default text-default-secondary",
|
|
349
|
+
"hover:bg-brand-tertiary-hover hover:border-brand-tertiary hover:text-brand"
|
|
331
350
|
],
|
|
332
351
|
className
|
|
333
352
|
),
|
|
334
353
|
children: [
|
|
335
|
-
icon !== void 0 && /* @__PURE__ */
|
|
336
|
-
!collapsed && /* @__PURE__ */
|
|
337
|
-
indicator && /* @__PURE__ */
|
|
354
|
+
icon !== void 0 && /* @__PURE__ */ jsx6("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
|
|
355
|
+
!collapsed && /* @__PURE__ */ jsx6("span", { className: "flex-1 min-w-0 truncate text-body-sm font-regular leading-snug", children: label }),
|
|
356
|
+
indicator && /* @__PURE__ */ jsx6("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
|
|
338
357
|
]
|
|
339
358
|
}
|
|
340
359
|
);
|
|
@@ -342,8 +361,8 @@ function NavItem({
|
|
|
342
361
|
|
|
343
362
|
// src/components/input.tsx
|
|
344
363
|
import { forwardRef } from "react";
|
|
345
|
-
import
|
|
346
|
-
import { jsx as
|
|
364
|
+
import clsx8 from "clsx";
|
|
365
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
347
366
|
var wrapGap = {
|
|
348
367
|
lg: "gap-2",
|
|
349
368
|
// 8px
|
|
@@ -380,47 +399,47 @@ var iconWrap = {
|
|
|
380
399
|
var Input = forwardRef(function Input2({ label, description, error, hint, size = "md", leadingIcon, trailingIcon, className, disabled, id, ...props }, ref) {
|
|
381
400
|
const hasError = !!error;
|
|
382
401
|
const iw = iconWrap[size];
|
|
383
|
-
return /* @__PURE__ */
|
|
384
|
-
label && /* @__PURE__ */
|
|
402
|
+
return /* @__PURE__ */ jsxs6("div", { className: clsx8("flex flex-col", wrapGap[size], className), children: [
|
|
403
|
+
label && /* @__PURE__ */ jsx7(
|
|
385
404
|
"label",
|
|
386
405
|
{
|
|
387
406
|
htmlFor: id,
|
|
388
|
-
className:
|
|
407
|
+
className: clsx8(labelText[size], disabled ? "text-disabled" : "text-default"),
|
|
389
408
|
children: label
|
|
390
409
|
}
|
|
391
410
|
),
|
|
392
|
-
description && /* @__PURE__ */
|
|
393
|
-
/* @__PURE__ */
|
|
394
|
-
leadingIcon && /* @__PURE__ */
|
|
395
|
-
/* @__PURE__ */
|
|
411
|
+
description && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
|
|
412
|
+
/* @__PURE__ */ jsxs6("div", { className: "relative flex items-center", children: [
|
|
413
|
+
leadingIcon && /* @__PURE__ */ jsx7("span", { className: clsx8("pointer-events-none absolute", iw.left, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: leadingIcon }),
|
|
414
|
+
/* @__PURE__ */ jsx7(
|
|
396
415
|
"input",
|
|
397
416
|
{
|
|
398
417
|
ref,
|
|
399
418
|
id,
|
|
400
419
|
disabled,
|
|
401
|
-
className:
|
|
420
|
+
className: clsx8(
|
|
402
421
|
"w-full rounded-lg border outline-none transition-colors",
|
|
403
|
-
"bg-
|
|
404
|
-
"placeholder:text-
|
|
422
|
+
"bg-default text-default",
|
|
423
|
+
"placeholder:text-default-tertiary",
|
|
405
424
|
inputBase[size],
|
|
406
425
|
leadingIcon && leadingPad[size],
|
|
407
426
|
trailingIcon && trailingPad[size],
|
|
408
|
-
disabled ? "cursor-not-allowed bg-
|
|
427
|
+
disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled placeholder:text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-tertiary focus:ring-1 focus:ring-brand-tertiary"
|
|
409
428
|
),
|
|
410
429
|
...props
|
|
411
430
|
}
|
|
412
431
|
),
|
|
413
|
-
trailingIcon && /* @__PURE__ */
|
|
432
|
+
trailingIcon && /* @__PURE__ */ jsx7("span", { className: clsx8("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon })
|
|
414
433
|
] }),
|
|
415
|
-
hasError && /* @__PURE__ */
|
|
416
|
-
!hasError && hint && /* @__PURE__ */
|
|
434
|
+
hasError && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText[size], "text-danger"), children: error }),
|
|
435
|
+
!hasError && hint && /* @__PURE__ */ jsx7("p", { className: clsx8(labelText[size], "text-default-secondary"), children: hint })
|
|
417
436
|
] });
|
|
418
437
|
});
|
|
419
438
|
|
|
420
439
|
// src/components/textarea.tsx
|
|
421
440
|
import { forwardRef as forwardRef2 } from "react";
|
|
422
|
-
import
|
|
423
|
-
import { jsx as
|
|
441
|
+
import clsx9 from "clsx";
|
|
442
|
+
import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
424
443
|
var wrapGap2 = {
|
|
425
444
|
lg: "gap-2",
|
|
426
445
|
md: "gap-1",
|
|
@@ -438,42 +457,42 @@ var textareaBase = {
|
|
|
438
457
|
};
|
|
439
458
|
var Textarea = forwardRef2(function Textarea2({ label, description, error, hint, size = "md", className, disabled, id, ...props }, ref) {
|
|
440
459
|
const hasError = !!error;
|
|
441
|
-
return /* @__PURE__ */
|
|
442
|
-
label && /* @__PURE__ */
|
|
460
|
+
return /* @__PURE__ */ jsxs7("div", { className: clsx9("flex flex-col", wrapGap2[size], className), children: [
|
|
461
|
+
label && /* @__PURE__ */ jsx8(
|
|
443
462
|
"label",
|
|
444
463
|
{
|
|
445
464
|
htmlFor: id,
|
|
446
|
-
className:
|
|
465
|
+
className: clsx9(labelText2[size], disabled ? "text-disabled" : "text-default"),
|
|
447
466
|
children: label
|
|
448
467
|
}
|
|
449
468
|
),
|
|
450
|
-
description && /* @__PURE__ */
|
|
451
|
-
/* @__PURE__ */
|
|
469
|
+
description && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText2[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
|
|
470
|
+
/* @__PURE__ */ jsx8(
|
|
452
471
|
"textarea",
|
|
453
472
|
{
|
|
454
473
|
ref,
|
|
455
474
|
id,
|
|
456
475
|
disabled,
|
|
457
|
-
className:
|
|
476
|
+
className: clsx9(
|
|
458
477
|
"w-full rounded-lg border outline-none transition-colors resize-y",
|
|
459
|
-
"bg-
|
|
460
|
-
"placeholder:text-
|
|
478
|
+
"bg-default text-default",
|
|
479
|
+
"placeholder:text-default-tertiary",
|
|
461
480
|
textareaBase[size],
|
|
462
|
-
disabled ? "cursor-not-allowed bg-
|
|
481
|
+
disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled placeholder:text-disabled resize-none" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-tertiary focus:ring-1 focus:ring-brand-tertiary"
|
|
463
482
|
),
|
|
464
483
|
...props
|
|
465
484
|
}
|
|
466
485
|
),
|
|
467
|
-
hasError && /* @__PURE__ */
|
|
468
|
-
!hasError && hint && /* @__PURE__ */
|
|
486
|
+
hasError && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText2[size], "text-danger"), children: error }),
|
|
487
|
+
!hasError && hint && /* @__PURE__ */ jsx8("p", { className: clsx9(labelText2[size], "text-default-secondary"), children: hint })
|
|
469
488
|
] });
|
|
470
489
|
});
|
|
471
490
|
|
|
472
491
|
// src/components/select.tsx
|
|
473
492
|
import { forwardRef as forwardRef3 } from "react";
|
|
474
|
-
import
|
|
493
|
+
import clsx10 from "clsx";
|
|
475
494
|
import { LuChevronDown } from "react-icons/lu";
|
|
476
|
-
import { jsx as
|
|
495
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
477
496
|
var wrapGap3 = {
|
|
478
497
|
lg: "gap-2",
|
|
479
498
|
md: "gap-1",
|
|
@@ -500,93 +519,93 @@ var chevronPos = {
|
|
|
500
519
|
var Select = forwardRef3(function Select2({ label, description, error, hint, size = "md", options, placeholder, className, disabled, id, ...props }, ref) {
|
|
501
520
|
const hasError = !!error;
|
|
502
521
|
const cp = chevronPos[size];
|
|
503
|
-
return /* @__PURE__ */
|
|
504
|
-
label && /* @__PURE__ */
|
|
522
|
+
return /* @__PURE__ */ jsxs8("div", { className: clsx10("flex flex-col", wrapGap3[size], className), children: [
|
|
523
|
+
label && /* @__PURE__ */ jsx9(
|
|
505
524
|
"label",
|
|
506
525
|
{
|
|
507
526
|
htmlFor: id,
|
|
508
|
-
className:
|
|
527
|
+
className: clsx10(labelText3[size], disabled ? "text-disabled" : "text-default"),
|
|
509
528
|
children: label
|
|
510
529
|
}
|
|
511
530
|
),
|
|
512
|
-
description && /* @__PURE__ */
|
|
513
|
-
/* @__PURE__ */
|
|
514
|
-
/* @__PURE__ */
|
|
531
|
+
description && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText3[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
|
|
532
|
+
/* @__PURE__ */ jsxs8("div", { className: "relative flex items-center", children: [
|
|
533
|
+
/* @__PURE__ */ jsxs8(
|
|
515
534
|
"select",
|
|
516
535
|
{
|
|
517
536
|
ref,
|
|
518
537
|
id,
|
|
519
538
|
disabled,
|
|
520
|
-
className:
|
|
539
|
+
className: clsx10(
|
|
521
540
|
"w-full appearance-none rounded-lg border outline-none transition-colors pt-0.5",
|
|
522
|
-
"bg-
|
|
541
|
+
"bg-default text-default",
|
|
523
542
|
selectBase[size],
|
|
524
|
-
disabled ? "cursor-not-allowed bg-
|
|
543
|
+
disabled ? "cursor-not-allowed bg-disabled border-disabled text-disabled" : hasError ? "border-danger-secondary focus:border-danger-secondary focus:ring-1 focus:ring-danger-secondary" : "border-default focus:border-brand-tertiary focus:ring-1 focus:ring-brand-tertiary"
|
|
525
544
|
),
|
|
526
545
|
...props,
|
|
527
546
|
children: [
|
|
528
|
-
placeholder && /* @__PURE__ */
|
|
529
|
-
options.map((opt) => /* @__PURE__ */
|
|
547
|
+
placeholder && /* @__PURE__ */ jsx9("option", { value: "", disabled: true, children: placeholder }),
|
|
548
|
+
options.map((opt) => /* @__PURE__ */ jsx9("option", { value: opt.value, children: opt.label }, opt.value))
|
|
530
549
|
]
|
|
531
550
|
}
|
|
532
551
|
),
|
|
533
|
-
/* @__PURE__ */
|
|
552
|
+
/* @__PURE__ */ jsx9(
|
|
534
553
|
"span",
|
|
535
554
|
{
|
|
536
|
-
className:
|
|
555
|
+
className: clsx10(
|
|
537
556
|
"pointer-events-none absolute",
|
|
538
557
|
cp.right,
|
|
539
558
|
cp.size,
|
|
540
559
|
"flex items-center justify-center",
|
|
541
560
|
disabled ? "text-icon-disabled" : "text-icon-default-secondary"
|
|
542
561
|
),
|
|
543
|
-
children: /* @__PURE__ */
|
|
562
|
+
children: /* @__PURE__ */ jsx9(LuChevronDown, { className: "size-full" })
|
|
544
563
|
}
|
|
545
564
|
)
|
|
546
565
|
] }),
|
|
547
|
-
hasError && /* @__PURE__ */
|
|
548
|
-
!hasError && hint && /* @__PURE__ */
|
|
566
|
+
hasError && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText3[size], "text-danger"), children: error }),
|
|
567
|
+
!hasError && hint && /* @__PURE__ */ jsx9("p", { className: clsx10(labelText3[size], "text-default-secondary"), children: hint })
|
|
549
568
|
] });
|
|
550
569
|
});
|
|
551
570
|
|
|
552
571
|
// src/components/stepper.tsx
|
|
553
|
-
import
|
|
572
|
+
import clsx11 from "clsx";
|
|
554
573
|
import { LuCheck, LuChevronRight } from "react-icons/lu";
|
|
555
|
-
import { jsx as
|
|
574
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
556
575
|
function StepIndicator({ status }) {
|
|
557
576
|
if (status === "complete") {
|
|
558
|
-
return /* @__PURE__ */
|
|
577
|
+
return /* @__PURE__ */ jsx10("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand text-white", children: /* @__PURE__ */ jsx10(LuCheck, { size: 11, "aria-hidden": true }) });
|
|
559
578
|
}
|
|
560
579
|
if (status === "active") {
|
|
561
|
-
return /* @__PURE__ */
|
|
580
|
+
return /* @__PURE__ */ jsx10("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-background-brand", children: /* @__PURE__ */ jsx10("span", { className: "size-2.5 rounded-full bg-brand" }) });
|
|
562
581
|
}
|
|
563
|
-
return /* @__PURE__ */
|
|
582
|
+
return /* @__PURE__ */ jsx10("span", { className: "size-5 shrink-0 rounded-full border-2 border-disabled", "aria-hidden": "true" });
|
|
564
583
|
}
|
|
565
584
|
function ChevronSeparator() {
|
|
566
|
-
return /* @__PURE__ */
|
|
585
|
+
return /* @__PURE__ */ jsx10(LuChevronRight, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
|
|
567
586
|
}
|
|
568
587
|
var labelClass = {
|
|
569
|
-
complete: "text-
|
|
570
|
-
active: "text-
|
|
571
|
-
upcoming: "text-
|
|
588
|
+
complete: "text-brand font-semibold",
|
|
589
|
+
active: "text-brand font-semibold",
|
|
590
|
+
upcoming: "text-disabled font-regular"
|
|
572
591
|
};
|
|
573
592
|
function Stepper({ steps, className }) {
|
|
574
|
-
return /* @__PURE__ */
|
|
593
|
+
return /* @__PURE__ */ jsx10(
|
|
575
594
|
"ol",
|
|
576
595
|
{
|
|
577
|
-
className:
|
|
596
|
+
className: clsx11("flex items-center overflow-x-auto", className),
|
|
578
597
|
"aria-label": "Progress",
|
|
579
|
-
children: steps.map((step, i) => /* @__PURE__ */
|
|
598
|
+
children: steps.map((step, i) => /* @__PURE__ */ jsxs9(
|
|
580
599
|
"li",
|
|
581
600
|
{
|
|
582
601
|
className: "flex items-center",
|
|
583
602
|
"aria-current": step.status === "active" ? "step" : void 0,
|
|
584
603
|
children: [
|
|
585
|
-
/* @__PURE__ */
|
|
586
|
-
/* @__PURE__ */
|
|
587
|
-
/* @__PURE__ */
|
|
604
|
+
/* @__PURE__ */ jsxs9("span", { className: "flex items-center gap-1.5", children: [
|
|
605
|
+
/* @__PURE__ */ jsx10(StepIndicator, { status: step.status }),
|
|
606
|
+
/* @__PURE__ */ jsx10("span", { className: clsx11("text-body-xs whitespace-nowrap", labelClass[step.status]), children: step.label })
|
|
588
607
|
] }),
|
|
589
|
-
i < steps.length - 1 && /* @__PURE__ */
|
|
608
|
+
i < steps.length - 1 && /* @__PURE__ */ jsx10(ChevronSeparator, {})
|
|
590
609
|
]
|
|
591
610
|
},
|
|
592
611
|
i
|
|
@@ -596,8 +615,8 @@ function Stepper({ steps, className }) {
|
|
|
596
615
|
}
|
|
597
616
|
|
|
598
617
|
// src/components/multiselect-card.tsx
|
|
599
|
-
import
|
|
600
|
-
import { jsx as
|
|
618
|
+
import clsx12 from "clsx";
|
|
619
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
601
620
|
function MultiSelectCard({
|
|
602
621
|
icon,
|
|
603
622
|
title,
|
|
@@ -606,32 +625,32 @@ function MultiSelectCard({
|
|
|
606
625
|
onToggle,
|
|
607
626
|
className
|
|
608
627
|
}) {
|
|
609
|
-
return /* @__PURE__ */
|
|
628
|
+
return /* @__PURE__ */ jsxs10(
|
|
610
629
|
"button",
|
|
611
630
|
{
|
|
612
631
|
type: "button",
|
|
613
632
|
role: "checkbox",
|
|
614
633
|
"aria-checked": selected,
|
|
615
634
|
onClick: onToggle,
|
|
616
|
-
className:
|
|
635
|
+
className: clsx12(
|
|
617
636
|
"relative w-full rounded-2xl border-2 p-4 text-left transition-all",
|
|
618
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
619
|
-
selected ? "border-
|
|
637
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
638
|
+
selected ? "border-brand bg-brand-tertiary" : "border-default bg-default hover:border-default-secondary",
|
|
620
639
|
className
|
|
621
640
|
),
|
|
622
641
|
children: [
|
|
623
|
-
/* @__PURE__ */
|
|
624
|
-
/* @__PURE__ */
|
|
642
|
+
/* @__PURE__ */ jsxs10("div", { className: "flex items-start justify-between gap-2", children: [
|
|
643
|
+
/* @__PURE__ */ jsx11(
|
|
625
644
|
"span",
|
|
626
645
|
{
|
|
627
|
-
className:
|
|
646
|
+
className: clsx12(
|
|
628
647
|
"flex size-10 shrink-0 items-center justify-center rounded-xl",
|
|
629
|
-
selected ? "bg-
|
|
648
|
+
selected ? "bg-brand" : "bg-brand-tertiary"
|
|
630
649
|
),
|
|
631
|
-
children: /* @__PURE__ */
|
|
650
|
+
children: /* @__PURE__ */ jsx11("span", { className: clsx12("size-5", selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
|
|
632
651
|
}
|
|
633
652
|
),
|
|
634
|
-
selected ? /* @__PURE__ */
|
|
653
|
+
selected ? /* @__PURE__ */ jsx11("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand", children: /* @__PURE__ */ jsx11("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx11(
|
|
635
654
|
"path",
|
|
636
655
|
{
|
|
637
656
|
d: "M1 4L3.9 7L10 1",
|
|
@@ -640,26 +659,26 @@ function MultiSelectCard({
|
|
|
640
659
|
strokeLinecap: "round",
|
|
641
660
|
strokeLinejoin: "round"
|
|
642
661
|
}
|
|
643
|
-
) }) }) : /* @__PURE__ */
|
|
662
|
+
) }) }) : /* @__PURE__ */ jsx11(
|
|
644
663
|
"span",
|
|
645
664
|
{
|
|
646
|
-
className: "size-5 shrink-0 rounded-full border-2 border-
|
|
665
|
+
className: "size-5 shrink-0 rounded-full border-2 border-default",
|
|
647
666
|
"aria-hidden": "true"
|
|
648
667
|
}
|
|
649
668
|
)
|
|
650
669
|
] }),
|
|
651
|
-
/* @__PURE__ */
|
|
652
|
-
/* @__PURE__ */
|
|
670
|
+
/* @__PURE__ */ jsxs10("div", { className: "mt-3", children: [
|
|
671
|
+
/* @__PURE__ */ jsx11(
|
|
653
672
|
"p",
|
|
654
673
|
{
|
|
655
|
-
className:
|
|
674
|
+
className: clsx12(
|
|
656
675
|
"text-body-sm font-semibold",
|
|
657
|
-
selected ? "text-
|
|
676
|
+
selected ? "text-brand" : "text-default"
|
|
658
677
|
),
|
|
659
678
|
children: title
|
|
660
679
|
}
|
|
661
680
|
),
|
|
662
|
-
description && /* @__PURE__ */
|
|
681
|
+
description && /* @__PURE__ */ jsx11("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: description })
|
|
663
682
|
] })
|
|
664
683
|
]
|
|
665
684
|
}
|
|
@@ -667,8 +686,8 @@ function MultiSelectCard({
|
|
|
667
686
|
}
|
|
668
687
|
|
|
669
688
|
// src/components/data-table.tsx
|
|
670
|
-
import
|
|
671
|
-
import { jsx as
|
|
689
|
+
import clsx13 from "clsx";
|
|
690
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
672
691
|
function DataTable({
|
|
673
692
|
columns,
|
|
674
693
|
rows,
|
|
@@ -676,25 +695,25 @@ function DataTable({
|
|
|
676
695
|
className,
|
|
677
696
|
onRowClick
|
|
678
697
|
}) {
|
|
679
|
-
return /* @__PURE__ */
|
|
698
|
+
return /* @__PURE__ */ jsxs11(
|
|
680
699
|
"div",
|
|
681
700
|
{
|
|
682
|
-
className:
|
|
683
|
-
"overflow-hidden rounded-xl border border-
|
|
701
|
+
className: clsx13(
|
|
702
|
+
"overflow-hidden rounded-xl border border-default bg-default",
|
|
684
703
|
className
|
|
685
704
|
),
|
|
686
705
|
children: [
|
|
687
|
-
/* @__PURE__ */
|
|
688
|
-
/* @__PURE__ */
|
|
706
|
+
/* @__PURE__ */ jsx12("div", { className: "flex items-center bg-default-secondary px-4 py-3", children: columns.map((col) => /* @__PURE__ */ jsx12("div", { className: clsx13("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: /* @__PURE__ */ jsx12("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: col.header }) }, col.key)) }),
|
|
707
|
+
/* @__PURE__ */ jsx12("div", { children: rows.map((row, i) => /* @__PURE__ */ jsx12(
|
|
689
708
|
"div",
|
|
690
709
|
{
|
|
691
|
-
className:
|
|
692
|
-
"flex items-center px-4 py-[14px] transition-colors hover:bg-
|
|
710
|
+
className: clsx13(
|
|
711
|
+
"flex items-center px-4 py-[14px] transition-colors hover:bg-default-secondary/50",
|
|
693
712
|
i > 0 && "border-t border-[#ececec]",
|
|
694
713
|
onRowClick && "cursor-pointer"
|
|
695
714
|
),
|
|
696
715
|
onClick: onRowClick ? () => onRowClick(row) : void 0,
|
|
697
|
-
children: columns.map((col) => /* @__PURE__ */
|
|
716
|
+
children: columns.map((col) => /* @__PURE__ */ jsx12("div", { className: clsx13("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: col.render(row) }, col.key))
|
|
698
717
|
},
|
|
699
718
|
getRowKey(row, i)
|
|
700
719
|
)) })
|
|
@@ -706,28 +725,28 @@ function TableCellLeadText({
|
|
|
706
725
|
primary,
|
|
707
726
|
secondary
|
|
708
727
|
}) {
|
|
709
|
-
return /* @__PURE__ */
|
|
710
|
-
/* @__PURE__ */
|
|
711
|
-
secondary && /* @__PURE__ */
|
|
728
|
+
return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-0.5", children: [
|
|
729
|
+
/* @__PURE__ */ jsx12("span", { className: "text-body-sm font-medium text-default leading-snug", children: primary }),
|
|
730
|
+
secondary && /* @__PURE__ */ jsx12("span", { className: "text-body-xs font-normal text-default-secondary leading-tight", children: secondary })
|
|
712
731
|
] });
|
|
713
732
|
}
|
|
714
733
|
function TableCellText({
|
|
715
734
|
children,
|
|
716
735
|
muted = true
|
|
717
736
|
}) {
|
|
718
|
-
return /* @__PURE__ */
|
|
737
|
+
return /* @__PURE__ */ jsx12(
|
|
719
738
|
"span",
|
|
720
739
|
{
|
|
721
|
-
className:
|
|
740
|
+
className: clsx13(
|
|
722
741
|
"text-body-xs font-normal leading-snug whitespace-nowrap",
|
|
723
|
-
muted ? "text-
|
|
742
|
+
muted ? "text-default-secondary" : "text-default"
|
|
724
743
|
),
|
|
725
744
|
children
|
|
726
745
|
}
|
|
727
746
|
);
|
|
728
747
|
}
|
|
729
748
|
function TableCellBadge({ label }) {
|
|
730
|
-
return /* @__PURE__ */
|
|
749
|
+
return /* @__PURE__ */ jsx12("span", { className: "inline-flex items-center rounded-md border border-default bg-default-secondary px-2 py-0.5 text-body-tiny font-medium text-default-secondary whitespace-nowrap", children: label });
|
|
731
750
|
}
|
|
732
751
|
function TableCellStatusPill({
|
|
733
752
|
label,
|
|
@@ -735,13 +754,13 @@ function TableCellStatusPill({
|
|
|
735
754
|
backgroundColor,
|
|
736
755
|
textColor
|
|
737
756
|
}) {
|
|
738
|
-
return /* @__PURE__ */
|
|
757
|
+
return /* @__PURE__ */ jsxs11(
|
|
739
758
|
"span",
|
|
740
759
|
{
|
|
741
760
|
className: "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-body-xs font-medium leading-tight whitespace-nowrap",
|
|
742
761
|
style: { backgroundColor, color: textColor },
|
|
743
762
|
children: [
|
|
744
|
-
/* @__PURE__ */
|
|
763
|
+
/* @__PURE__ */ jsx12("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
|
|
745
764
|
label
|
|
746
765
|
]
|
|
747
766
|
}
|
|
@@ -753,15 +772,15 @@ function TableCellProgress({
|
|
|
753
772
|
}) {
|
|
754
773
|
const color = barColor ?? "#0c2d58";
|
|
755
774
|
const clamped = Math.min(100, Math.max(0, percent));
|
|
756
|
-
return /* @__PURE__ */
|
|
757
|
-
/* @__PURE__ */
|
|
775
|
+
return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
|
|
776
|
+
/* @__PURE__ */ jsx12("div", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-default-secondary", children: /* @__PURE__ */ jsx12(
|
|
758
777
|
"div",
|
|
759
778
|
{
|
|
760
779
|
className: "h-full rounded-full transition-all",
|
|
761
780
|
style: { width: `${clamped}%`, backgroundColor: color }
|
|
762
781
|
}
|
|
763
782
|
) }),
|
|
764
|
-
/* @__PURE__ */
|
|
783
|
+
/* @__PURE__ */ jsxs11("span", { className: "text-body-tiny text-default-secondary leading-none", children: [
|
|
765
784
|
percent,
|
|
766
785
|
"%"
|
|
767
786
|
] })
|
|
@@ -769,32 +788,32 @@ function TableCellProgress({
|
|
|
769
788
|
}
|
|
770
789
|
|
|
771
790
|
// src/components/stat-tile.tsx
|
|
772
|
-
import
|
|
773
|
-
import { jsx as
|
|
791
|
+
import clsx14 from "clsx";
|
|
792
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
774
793
|
function StatTile({ label, value, dotColor, className }) {
|
|
775
|
-
return /* @__PURE__ */
|
|
794
|
+
return /* @__PURE__ */ jsxs12(
|
|
776
795
|
"div",
|
|
777
796
|
{
|
|
778
|
-
className:
|
|
779
|
-
"flex flex-col gap-2 rounded-xl border border-
|
|
797
|
+
className: clsx14(
|
|
798
|
+
"flex flex-col gap-2 rounded-xl border border-default bg-default p-4",
|
|
780
799
|
className
|
|
781
800
|
),
|
|
782
801
|
children: [
|
|
783
|
-
/* @__PURE__ */
|
|
784
|
-
dotColor && /* @__PURE__ */
|
|
785
|
-
/* @__PURE__ */
|
|
802
|
+
/* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1.5", children: [
|
|
803
|
+
dotColor && /* @__PURE__ */ jsx13("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
|
|
804
|
+
/* @__PURE__ */ jsx13("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: label })
|
|
786
805
|
] }),
|
|
787
|
-
/* @__PURE__ */
|
|
806
|
+
/* @__PURE__ */ jsx13("span", { className: "text-heading font-semibold text-default leading-none", children: value })
|
|
788
807
|
]
|
|
789
808
|
}
|
|
790
809
|
);
|
|
791
810
|
}
|
|
792
811
|
|
|
793
812
|
// src/components/toggle.tsx
|
|
794
|
-
import
|
|
795
|
-
import { jsx as
|
|
813
|
+
import clsx15 from "clsx";
|
|
814
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
796
815
|
function Toggle({ checked, onChange, label, disabled = false }) {
|
|
797
|
-
return /* @__PURE__ */
|
|
816
|
+
return /* @__PURE__ */ jsxs13(
|
|
798
817
|
"button",
|
|
799
818
|
{
|
|
800
819
|
type: "button",
|
|
@@ -802,23 +821,23 @@ function Toggle({ checked, onChange, label, disabled = false }) {
|
|
|
802
821
|
"aria-checked": checked,
|
|
803
822
|
disabled,
|
|
804
823
|
onClick: () => onChange(!checked),
|
|
805
|
-
className:
|
|
824
|
+
className: clsx15(
|
|
806
825
|
"flex items-center gap-2",
|
|
807
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
826
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
808
827
|
disabled && "cursor-not-allowed opacity-50"
|
|
809
828
|
),
|
|
810
829
|
children: [
|
|
811
|
-
/* @__PURE__ */
|
|
830
|
+
/* @__PURE__ */ jsx14(
|
|
812
831
|
"span",
|
|
813
832
|
{
|
|
814
|
-
className:
|
|
833
|
+
className: clsx15(
|
|
815
834
|
"relative inline-flex h-6 w-10 shrink-0 rounded-full transition-colors",
|
|
816
|
-
checked ? "bg-
|
|
835
|
+
checked ? "bg-brand" : "border border-default bg-neutral-tertiary"
|
|
817
836
|
),
|
|
818
|
-
children: /* @__PURE__ */
|
|
837
|
+
children: /* @__PURE__ */ jsx14(
|
|
819
838
|
"span",
|
|
820
839
|
{
|
|
821
|
-
className:
|
|
840
|
+
className: clsx15(
|
|
822
841
|
"absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-sm transition-transform",
|
|
823
842
|
checked ? "translate-x-4" : "translate-x-0"
|
|
824
843
|
)
|
|
@@ -826,7 +845,7 @@ function Toggle({ checked, onChange, label, disabled = false }) {
|
|
|
826
845
|
)
|
|
827
846
|
}
|
|
828
847
|
),
|
|
829
|
-
label && /* @__PURE__ */
|
|
848
|
+
label && /* @__PURE__ */ jsx14("span", { className: "text-body-xs text-default", children: label })
|
|
830
849
|
]
|
|
831
850
|
}
|
|
832
851
|
);
|
|
@@ -834,14 +853,14 @@ function Toggle({ checked, onChange, label, disabled = false }) {
|
|
|
834
853
|
|
|
835
854
|
// src/components/file-drop-zone.tsx
|
|
836
855
|
import { useRef, useState } from "react";
|
|
837
|
-
import
|
|
856
|
+
import clsx16 from "clsx";
|
|
838
857
|
import { LuUpload } from "react-icons/lu";
|
|
839
|
-
import { Fragment, jsx as
|
|
858
|
+
import { Fragment, jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
840
859
|
function FileDropZone({ className }) {
|
|
841
860
|
const inputRef = useRef(null);
|
|
842
861
|
const [isDragging, setIsDragging] = useState(false);
|
|
843
|
-
return /* @__PURE__ */
|
|
844
|
-
/* @__PURE__ */
|
|
862
|
+
return /* @__PURE__ */ jsxs14(Fragment, { children: [
|
|
863
|
+
/* @__PURE__ */ jsx15(
|
|
845
864
|
"input",
|
|
846
865
|
{
|
|
847
866
|
ref: inputRef,
|
|
@@ -851,7 +870,7 @@ function FileDropZone({ className }) {
|
|
|
851
870
|
tabIndex: -1
|
|
852
871
|
}
|
|
853
872
|
),
|
|
854
|
-
/* @__PURE__ */
|
|
873
|
+
/* @__PURE__ */ jsxs14(
|
|
855
874
|
"div",
|
|
856
875
|
{
|
|
857
876
|
role: "button",
|
|
@@ -871,15 +890,15 @@ function FileDropZone({ className }) {
|
|
|
871
890
|
e.preventDefault();
|
|
872
891
|
setIsDragging(false);
|
|
873
892
|
},
|
|
874
|
-
className:
|
|
875
|
-
"flex flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed py-4 px-4 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
876
|
-
isDragging ? "border-
|
|
893
|
+
className: clsx16(
|
|
894
|
+
"flex flex-col items-center justify-center gap-1 rounded-lg border-2 border-dashed py-4 px-4 cursor-pointer transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
895
|
+
isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary",
|
|
877
896
|
className
|
|
878
897
|
),
|
|
879
898
|
children: [
|
|
880
|
-
/* @__PURE__ */
|
|
881
|
-
/* @__PURE__ */
|
|
882
|
-
/* @__PURE__ */
|
|
899
|
+
/* @__PURE__ */ jsx15("span", { className: isDragging ? "text-brand" : "text-default-secondary", children: /* @__PURE__ */ jsx15(LuUpload, { size: 20 }) }),
|
|
900
|
+
/* @__PURE__ */ jsx15("span", { className: "text-body-sm font-medium text-default", children: "Upload file" }),
|
|
901
|
+
/* @__PURE__ */ jsx15("span", { className: "text-body-xs text-default-secondary text-center", children: "Drag & drop or browse \xB7 PDF, JPG, PNG \xB7 up to 10 MB" })
|
|
883
902
|
]
|
|
884
903
|
}
|
|
885
904
|
)
|
|
@@ -887,18 +906,18 @@ function FileDropZone({ className }) {
|
|
|
887
906
|
}
|
|
888
907
|
|
|
889
908
|
// src/components/form-card.tsx
|
|
890
|
-
import
|
|
909
|
+
import clsx17 from "clsx";
|
|
891
910
|
import { LuArrowLeft, LuArrowRight } from "react-icons/lu";
|
|
892
|
-
import { jsx as
|
|
911
|
+
import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
893
912
|
function FormCard({
|
|
894
913
|
children,
|
|
895
914
|
className
|
|
896
915
|
}) {
|
|
897
|
-
return /* @__PURE__ */
|
|
916
|
+
return /* @__PURE__ */ jsx16(
|
|
898
917
|
"div",
|
|
899
918
|
{
|
|
900
|
-
className:
|
|
901
|
-
"overflow-hidden rounded-xl border border-
|
|
919
|
+
className: clsx17(
|
|
920
|
+
"overflow-hidden rounded-xl border border-default bg-default",
|
|
902
921
|
className
|
|
903
922
|
),
|
|
904
923
|
children
|
|
@@ -906,9 +925,9 @@ function FormCard({
|
|
|
906
925
|
);
|
|
907
926
|
}
|
|
908
927
|
function FormCardHeader({ title, subtitle }) {
|
|
909
|
-
return /* @__PURE__ */
|
|
910
|
-
/* @__PURE__ */
|
|
911
|
-
subtitle && /* @__PURE__ */
|
|
928
|
+
return /* @__PURE__ */ jsxs15("div", { className: "border-b border-default px-7 py-6", children: [
|
|
929
|
+
/* @__PURE__ */ jsx16("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
|
|
930
|
+
subtitle && /* @__PURE__ */ jsx16("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
|
|
912
931
|
] });
|
|
913
932
|
}
|
|
914
933
|
function FormCardFooter({
|
|
@@ -918,27 +937,27 @@ function FormCardFooter({
|
|
|
918
937
|
continueLabel = "Continue",
|
|
919
938
|
backDisabled = false
|
|
920
939
|
}) {
|
|
921
|
-
return /* @__PURE__ */
|
|
922
|
-
/* @__PURE__ */
|
|
923
|
-
/* @__PURE__ */
|
|
924
|
-
!backDisabled && /* @__PURE__ */
|
|
925
|
-
/* @__PURE__ */
|
|
940
|
+
return /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between border-t border-default px-7 py-5", children: [
|
|
941
|
+
/* @__PURE__ */ jsx16(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, children: "Save as draft" }),
|
|
942
|
+
/* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
|
|
943
|
+
!backDisabled && /* @__PURE__ */ jsx16(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ jsx16(LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
|
|
944
|
+
/* @__PURE__ */ jsx16(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ jsx16(LuArrowRight, { size: 16 }), onClick: onContinue, children: continueLabel })
|
|
926
945
|
] })
|
|
927
946
|
] });
|
|
928
947
|
}
|
|
929
948
|
|
|
930
949
|
// src/components/document-row.tsx
|
|
931
|
-
import
|
|
932
|
-
import { jsx as
|
|
950
|
+
import clsx18 from "clsx";
|
|
951
|
+
import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
933
952
|
var STATUS_CONFIG = {
|
|
934
953
|
uploaded: { label: "\u2713 Uploaded", style: "bg-[#e6f4ea] text-[#1f7a3d]" },
|
|
935
954
|
"under-review": { label: "\u25CF Under review", style: "bg-[#fbe6cf] text-[#9a6206]" },
|
|
936
955
|
processing: { label: "\u25CF Processing", style: "bg-[#e9eff7] text-[#0c2d58]" },
|
|
937
956
|
missing: { label: "Missing", style: "bg-[#fee2e2] text-[#b91c1c]" },
|
|
938
|
-
"not-provided": { label: "Not provided", style: "bg-
|
|
957
|
+
"not-provided": { label: "Not provided", style: "bg-default-secondary text-default-secondary" }
|
|
939
958
|
};
|
|
940
959
|
function FileTypeBadge({ type }) {
|
|
941
|
-
return /* @__PURE__ */
|
|
960
|
+
return /* @__PURE__ */ jsx17("div", { className: "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-md bg-brand-tertiary", children: /* @__PURE__ */ jsx17("span", { className: "text-body-tiny font-semibold text-brand", children: type }) });
|
|
942
961
|
}
|
|
943
962
|
function DocumentRow({
|
|
944
963
|
title,
|
|
@@ -951,16 +970,16 @@ function DocumentRow({
|
|
|
951
970
|
}) {
|
|
952
971
|
const hasFile = (status === "uploaded" || status === "under-review" || status === "processing") && !!fileName;
|
|
953
972
|
const cfg = STATUS_CONFIG[status];
|
|
954
|
-
return /* @__PURE__ */
|
|
955
|
-
/* @__PURE__ */
|
|
956
|
-
/* @__PURE__ */
|
|
957
|
-
/* @__PURE__ */
|
|
958
|
-
/* @__PURE__ */
|
|
973
|
+
return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-3 py-4", children: [
|
|
974
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between gap-2", children: [
|
|
975
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 min-w-0", children: [
|
|
976
|
+
/* @__PURE__ */ jsx17("span", { className: "text-body-sm font-semibold text-default truncate", children: title }),
|
|
977
|
+
/* @__PURE__ */ jsx17("span", { className: "shrink-0 rounded-md border border-default bg-default-secondary px-2 py-0.5 text-body-tiny font-medium text-default-secondary", children: required ? "Required" : "Optional" })
|
|
959
978
|
] }),
|
|
960
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsx17(
|
|
961
980
|
"span",
|
|
962
981
|
{
|
|
963
|
-
className:
|
|
982
|
+
className: clsx18(
|
|
964
983
|
"shrink-0 rounded-full px-2.5 py-0.5 text-body-tiny font-medium whitespace-nowrap",
|
|
965
984
|
cfg.style
|
|
966
985
|
),
|
|
@@ -968,70 +987,70 @@ function DocumentRow({
|
|
|
968
987
|
}
|
|
969
988
|
)
|
|
970
989
|
] }),
|
|
971
|
-
/* @__PURE__ */
|
|
972
|
-
hasFile ? /* @__PURE__ */
|
|
973
|
-
/* @__PURE__ */
|
|
974
|
-
/* @__PURE__ */
|
|
975
|
-
/* @__PURE__ */
|
|
976
|
-
fileSize && /* @__PURE__ */
|
|
990
|
+
/* @__PURE__ */ jsx17("p", { className: "text-body-xs text-default-secondary", children: description }),
|
|
991
|
+
hasFile ? /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5", children: [
|
|
992
|
+
/* @__PURE__ */ jsx17(FileTypeBadge, { type: fileType }),
|
|
993
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
994
|
+
/* @__PURE__ */ jsx17("span", { className: "truncate text-body-sm font-medium text-default", children: fileName }),
|
|
995
|
+
fileSize && /* @__PURE__ */ jsx17("span", { className: "text-body-xs text-default-secondary", children: fileSize })
|
|
977
996
|
] }),
|
|
978
|
-
/* @__PURE__ */
|
|
979
|
-
/* @__PURE__ */
|
|
997
|
+
/* @__PURE__ */ jsxs16("div", { className: "flex shrink-0 items-center gap-4", children: [
|
|
998
|
+
/* @__PURE__ */ jsx17(
|
|
980
999
|
"button",
|
|
981
1000
|
{
|
|
982
1001
|
type: "button",
|
|
983
|
-
className: "text-body-xs font-medium text-
|
|
1002
|
+
className: "text-body-xs font-medium text-brand hover:underline",
|
|
984
1003
|
children: "Replace"
|
|
985
1004
|
}
|
|
986
1005
|
),
|
|
987
|
-
/* @__PURE__ */
|
|
1006
|
+
/* @__PURE__ */ jsx17(
|
|
988
1007
|
"button",
|
|
989
1008
|
{
|
|
990
1009
|
type: "button",
|
|
991
|
-
className: "text-body-xs font-medium text-
|
|
1010
|
+
className: "text-body-xs font-medium text-danger hover:underline",
|
|
992
1011
|
children: "Remove"
|
|
993
1012
|
}
|
|
994
1013
|
)
|
|
995
1014
|
] })
|
|
996
|
-
] }) : /* @__PURE__ */
|
|
1015
|
+
] }) : /* @__PURE__ */ jsx17(FileDropZone, {})
|
|
997
1016
|
] });
|
|
998
1017
|
}
|
|
999
1018
|
|
|
1000
1019
|
// src/components/modal.tsx
|
|
1001
|
-
import
|
|
1020
|
+
import clsx19 from "clsx";
|
|
1002
1021
|
import { LuX } from "react-icons/lu";
|
|
1003
|
-
import { Fragment as Fragment2, jsx as
|
|
1022
|
+
import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1004
1023
|
function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth = "max-w-[540px]" }) {
|
|
1005
1024
|
if (!isOpen) return null;
|
|
1006
|
-
return /* @__PURE__ */
|
|
1025
|
+
return /* @__PURE__ */ jsx18(
|
|
1007
1026
|
"div",
|
|
1008
1027
|
{
|
|
1009
1028
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
|
|
1010
1029
|
onClick: (e) => {
|
|
1011
1030
|
if (e.target === e.currentTarget) onClose();
|
|
1012
1031
|
},
|
|
1013
|
-
children: /* @__PURE__ */
|
|
1014
|
-
/* @__PURE__ */
|
|
1015
|
-
/* @__PURE__ */
|
|
1016
|
-
/* @__PURE__ */
|
|
1017
|
-
subtitle && /* @__PURE__ */
|
|
1032
|
+
children: /* @__PURE__ */ jsxs17("div", { className: clsx19("w-full mx-4 rounded-2xl bg-white shadow-xl", maxWidth), children: [
|
|
1033
|
+
/* @__PURE__ */ jsxs17("div", { className: "flex items-start justify-between px-6 py-5", children: [
|
|
1034
|
+
/* @__PURE__ */ jsxs17("div", { children: [
|
|
1035
|
+
/* @__PURE__ */ jsx18("h2", { className: "text-heading-sm font-semibold text-default", children: title }),
|
|
1036
|
+
subtitle && /* @__PURE__ */ jsx18("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: subtitle })
|
|
1018
1037
|
] }),
|
|
1019
|
-
/* @__PURE__ */
|
|
1038
|
+
/* @__PURE__ */ jsx18(
|
|
1020
1039
|
IconButton,
|
|
1021
1040
|
{
|
|
1022
1041
|
variant: "subtle",
|
|
1023
1042
|
size: "sm",
|
|
1024
1043
|
"aria-label": "Close dialog",
|
|
1025
|
-
|
|
1026
|
-
|
|
1044
|
+
onClick: onClose,
|
|
1045
|
+
children: /* @__PURE__ */ jsx18(LuX, { size: 16 })
|
|
1027
1046
|
}
|
|
1028
1047
|
)
|
|
1029
1048
|
] }),
|
|
1030
|
-
/* @__PURE__ */
|
|
1031
|
-
/* @__PURE__ */
|
|
1032
|
-
footer && /* @__PURE__ */
|
|
1033
|
-
/* @__PURE__ */
|
|
1034
|
-
/* @__PURE__ */
|
|
1049
|
+
/* @__PURE__ */ jsx18("hr", { className: "border-default" }),
|
|
1050
|
+
/* @__PURE__ */ jsx18("div", { className: "px-6 py-5", children }),
|
|
1051
|
+
footer && /* @__PURE__ */ jsxs17(Fragment2, { children: [
|
|
1052
|
+
/* @__PURE__ */ jsx18("hr", { className: "border-default" }),
|
|
1053
|
+
/* @__PURE__ */ jsx18("div", { className: "flex items-center justify-end gap-2 px-6 py-4", children: footer })
|
|
1035
1054
|
] })
|
|
1036
1055
|
] })
|
|
1037
1056
|
}
|
|
@@ -1039,8 +1058,8 @@ function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth =
|
|
|
1039
1058
|
}
|
|
1040
1059
|
|
|
1041
1060
|
// src/components/role-badge.tsx
|
|
1042
|
-
import
|
|
1043
|
-
import { jsx as
|
|
1061
|
+
import clsx20 from "clsx";
|
|
1062
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
1044
1063
|
var ROLE_COLORS = {
|
|
1045
1064
|
"Super Admin": { bg: "#e9eff7", text: "#0c2d58" },
|
|
1046
1065
|
"Admin": { bg: "#e9eff7", text: "#0c2d58" },
|
|
@@ -1056,10 +1075,10 @@ var ROLE_COLORS = {
|
|
|
1056
1075
|
var FALLBACK = { bg: "#f5f5f5", text: "#757575" };
|
|
1057
1076
|
function RoleBadge({ role, size = "sm" }) {
|
|
1058
1077
|
const colors = ROLE_COLORS[role] ?? FALLBACK;
|
|
1059
|
-
return /* @__PURE__ */
|
|
1078
|
+
return /* @__PURE__ */ jsx19(
|
|
1060
1079
|
"span",
|
|
1061
1080
|
{
|
|
1062
|
-
className:
|
|
1081
|
+
className: clsx20(
|
|
1063
1082
|
"inline-flex items-center rounded-full font-medium whitespace-nowrap",
|
|
1064
1083
|
size === "sm" ? "px-2 py-0.5 text-body-tiny" : "px-3 py-1 text-body-xs"
|
|
1065
1084
|
),
|
|
@@ -1072,7 +1091,7 @@ function RoleBadge({ role, size = "sm" }) {
|
|
|
1072
1091
|
// src/components/role-combo-box.tsx
|
|
1073
1092
|
import { useEffect, useRef as useRef2, useState as useState2 } from "react";
|
|
1074
1093
|
import { LuChevronDown as LuChevronDown2 } from "react-icons/lu";
|
|
1075
|
-
import { Fragment as Fragment3, jsx as
|
|
1094
|
+
import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1076
1095
|
var ROLE_COMBO_OPTIONS = [
|
|
1077
1096
|
{ role: "Reviewer", description: "Reviews onboarding requests" },
|
|
1078
1097
|
{ role: "Admin", description: "Full org control" },
|
|
@@ -1111,21 +1130,21 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1111
1130
|
const otherOptions = options.filter(
|
|
1112
1131
|
(o) => o.role !== value && o.role.toLowerCase().includes(query.toLowerCase())
|
|
1113
1132
|
);
|
|
1114
|
-
return /* @__PURE__ */
|
|
1115
|
-
/* @__PURE__ */
|
|
1133
|
+
return /* @__PURE__ */ jsxs18("div", { className: "relative", ref: containerRef, children: [
|
|
1134
|
+
/* @__PURE__ */ jsxs18(
|
|
1116
1135
|
"div",
|
|
1117
1136
|
{
|
|
1118
1137
|
role: "combobox",
|
|
1119
1138
|
"aria-expanded": open,
|
|
1120
1139
|
"aria-haspopup": "listbox",
|
|
1121
1140
|
onClick: openDropdown,
|
|
1122
|
-
className: `flex h-11 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] pl-2.5 pr-3 transition-colors ${open ? "border-blue-500" : "border-
|
|
1141
|
+
className: `flex h-11 cursor-pointer items-center gap-2 rounded-lg border-[1.5px] pl-2.5 pr-3 transition-colors ${open ? "border-blue-500" : "border-default hover:border-brand-tertiary"}`,
|
|
1123
1142
|
children: [
|
|
1124
|
-
/* @__PURE__ */
|
|
1125
|
-
/* @__PURE__ */
|
|
1126
|
-
value === "User" && !open && /* @__PURE__ */
|
|
1127
|
-
open && /* @__PURE__ */
|
|
1128
|
-
/* @__PURE__ */
|
|
1143
|
+
/* @__PURE__ */ jsxs18("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
|
|
1144
|
+
/* @__PURE__ */ jsx20(RoleBadge, { role: value, size: "sm" }),
|
|
1145
|
+
value === "User" && !open && /* @__PURE__ */ jsx20("span", { className: "rounded border border-default bg-default-secondary px-1.5 py-0.5 text-body-tiny font-medium text-default-secondary", children: "DEFAULT" }),
|
|
1146
|
+
open && /* @__PURE__ */ jsxs18(Fragment3, { children: [
|
|
1147
|
+
/* @__PURE__ */ jsx20(
|
|
1129
1148
|
"input",
|
|
1130
1149
|
{
|
|
1131
1150
|
ref: inputRef,
|
|
@@ -1133,24 +1152,24 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1133
1152
|
value: query,
|
|
1134
1153
|
onChange: (e) => setQuery(e.target.value),
|
|
1135
1154
|
onClick: (e) => e.stopPropagation(),
|
|
1136
|
-
className: "min-w-0 flex-1 bg-transparent text-body-xs text-
|
|
1155
|
+
className: "min-w-0 flex-1 bg-transparent text-body-xs text-default outline-none",
|
|
1137
1156
|
"aria-label": "Search roles"
|
|
1138
1157
|
}
|
|
1139
1158
|
),
|
|
1140
|
-
/* @__PURE__ */
|
|
1159
|
+
/* @__PURE__ */ jsx20("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-text-default", "aria-hidden": true })
|
|
1141
1160
|
] })
|
|
1142
1161
|
] }),
|
|
1143
|
-
/* @__PURE__ */
|
|
1162
|
+
/* @__PURE__ */ jsx20("span", { className: "shrink-0 text-default-secondary", children: /* @__PURE__ */ jsx20(LuChevronDown2, { size: 14 }) })
|
|
1144
1163
|
]
|
|
1145
1164
|
}
|
|
1146
1165
|
),
|
|
1147
|
-
open && /* @__PURE__ */
|
|
1166
|
+
open && /* @__PURE__ */ jsxs18(
|
|
1148
1167
|
"div",
|
|
1149
1168
|
{
|
|
1150
1169
|
role: "listbox",
|
|
1151
|
-
className: "absolute left-0 right-0 top-full z-20 mt-1 flex max-h-64 flex-col gap-0.5 overflow-y-auto rounded-xl border border-
|
|
1170
|
+
className: "absolute left-0 right-0 top-full z-20 mt-1 flex max-h-64 flex-col gap-0.5 overflow-y-auto rounded-xl border border-default bg-white p-1.5 shadow-lg",
|
|
1152
1171
|
children: [
|
|
1153
|
-
selectedEntry && /* @__PURE__ */
|
|
1172
|
+
selectedEntry && /* @__PURE__ */ jsxs18(
|
|
1154
1173
|
"div",
|
|
1155
1174
|
{
|
|
1156
1175
|
role: "option",
|
|
@@ -1158,31 +1177,31 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1158
1177
|
className: "flex cursor-pointer items-center gap-2.5 rounded-md bg-blue-50 px-2.5 py-2",
|
|
1159
1178
|
onClick: () => select(selectedEntry.role),
|
|
1160
1179
|
children: [
|
|
1161
|
-
/* @__PURE__ */
|
|
1162
|
-
/* @__PURE__ */
|
|
1163
|
-
/* @__PURE__ */
|
|
1180
|
+
/* @__PURE__ */ jsx20(RoleBadge, { role: selectedEntry.role, size: "sm" }),
|
|
1181
|
+
/* @__PURE__ */ jsx20("span", { className: "flex-1 text-body-xs text-default-secondary", children: selectedEntry.description }),
|
|
1182
|
+
/* @__PURE__ */ jsx20("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
|
|
1164
1183
|
]
|
|
1165
1184
|
}
|
|
1166
1185
|
),
|
|
1167
|
-
/* @__PURE__ */
|
|
1168
|
-
otherOptions.length > 0 && /* @__PURE__ */
|
|
1169
|
-
/* @__PURE__ */
|
|
1170
|
-
otherOptions.map((opt) => /* @__PURE__ */
|
|
1186
|
+
/* @__PURE__ */ jsx20("div", { className: "h-px bg-border-default" }),
|
|
1187
|
+
otherOptions.length > 0 && /* @__PURE__ */ jsxs18(Fragment3, { children: [
|
|
1188
|
+
/* @__PURE__ */ jsx20("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ jsx20("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: "Other roles" }) }),
|
|
1189
|
+
otherOptions.map((opt) => /* @__PURE__ */ jsxs18(
|
|
1171
1190
|
"div",
|
|
1172
1191
|
{
|
|
1173
1192
|
role: "option",
|
|
1174
1193
|
"aria-selected": false,
|
|
1175
|
-
className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-
|
|
1194
|
+
className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-default-secondary",
|
|
1176
1195
|
onClick: () => select(opt.role),
|
|
1177
1196
|
children: [
|
|
1178
|
-
/* @__PURE__ */
|
|
1179
|
-
/* @__PURE__ */
|
|
1197
|
+
/* @__PURE__ */ jsx20(RoleBadge, { role: opt.role, size: "sm" }),
|
|
1198
|
+
/* @__PURE__ */ jsx20("span", { className: "text-body-xs text-default-secondary", children: opt.description })
|
|
1180
1199
|
]
|
|
1181
1200
|
},
|
|
1182
1201
|
opt.role
|
|
1183
1202
|
))
|
|
1184
1203
|
] }),
|
|
1185
|
-
otherOptions.length === 0 && query && /* @__PURE__ */
|
|
1204
|
+
otherOptions.length === 0 && query && /* @__PURE__ */ jsxs18("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: [
|
|
1186
1205
|
'No roles match "',
|
|
1187
1206
|
query,
|
|
1188
1207
|
'"'
|
|
@@ -1194,12 +1213,12 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1194
1213
|
}
|
|
1195
1214
|
|
|
1196
1215
|
// src/index.tsx
|
|
1197
|
-
import { jsx as
|
|
1216
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1198
1217
|
function Panel({
|
|
1199
1218
|
children,
|
|
1200
1219
|
className
|
|
1201
1220
|
}) {
|
|
1202
|
-
return /* @__PURE__ */
|
|
1221
|
+
return /* @__PURE__ */ jsx21("section", { className: clsx21("rounded-3xl border border-white/70 bg-white/90 p-6 shadow-panel backdrop-blur", className), children });
|
|
1203
1222
|
}
|
|
1204
1223
|
function MetricCard({
|
|
1205
1224
|
label,
|
|
@@ -1207,14 +1226,14 @@ function MetricCard({
|
|
|
1207
1226
|
tone = "default"
|
|
1208
1227
|
}) {
|
|
1209
1228
|
const tones = {
|
|
1210
|
-
default: "from-white to-slate-50 text-
|
|
1211
|
-
signal: "from-
|
|
1212
|
-
ember: "from-amber-50 to-orange-50 text-
|
|
1213
|
-
moss: "from-emerald-50 to-lime-50 text-
|
|
1229
|
+
default: "from-white to-slate-50 text-default",
|
|
1230
|
+
signal: "from-brand-tertiary to-cyan-50 text-brand",
|
|
1231
|
+
ember: "from-amber-50 to-orange-50 text-danger",
|
|
1232
|
+
moss: "from-emerald-50 to-lime-50 text-positive"
|
|
1214
1233
|
};
|
|
1215
|
-
return /* @__PURE__ */
|
|
1216
|
-
/* @__PURE__ */
|
|
1217
|
-
/* @__PURE__ */
|
|
1234
|
+
return /* @__PURE__ */ jsxs19(Panel, { className: clsx21("bg-gradient-to-br", tones[tone]), children: [
|
|
1235
|
+
/* @__PURE__ */ jsx21("p", { className: "text-sm uppercase tracking-[0.2em] text-slate-500", children: label }),
|
|
1236
|
+
/* @__PURE__ */ jsx21("p", { className: "mt-3 text-3xl font-semibold", children: value })
|
|
1218
1237
|
] });
|
|
1219
1238
|
}
|
|
1220
1239
|
function SeverityBadge({ severity }) {
|
|
@@ -1224,7 +1243,7 @@ function SeverityBadge({ severity }) {
|
|
|
1224
1243
|
medium: "bg-amber-100 text-amber-700",
|
|
1225
1244
|
low: "bg-slate-100 text-slate-700"
|
|
1226
1245
|
};
|
|
1227
|
-
return /* @__PURE__ */
|
|
1246
|
+
return /* @__PURE__ */ jsx21("span", { className: clsx21("inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide", styles[severity ?? "low"]), children: severity ?? "unknown" });
|
|
1228
1247
|
}
|
|
1229
1248
|
function SentimentBadge({ sentiment }) {
|
|
1230
1249
|
const styles = {
|
|
@@ -1233,21 +1252,22 @@ function SentimentBadge({ sentiment }) {
|
|
|
1233
1252
|
negative: "bg-rose-100 text-rose-700",
|
|
1234
1253
|
concerning: "bg-amber-100 text-amber-700"
|
|
1235
1254
|
};
|
|
1236
|
-
return /* @__PURE__ */
|
|
1255
|
+
return /* @__PURE__ */ jsx21("span", { className: clsx21("inline-flex rounded-full px-3 py-1 text-xs font-semibold capitalize", styles[sentiment ?? "neutral"] ?? styles.neutral), children: sentiment ?? "unknown" });
|
|
1237
1256
|
}
|
|
1238
1257
|
function SectionHeading({
|
|
1239
1258
|
eyebrow,
|
|
1240
1259
|
title,
|
|
1241
1260
|
detail
|
|
1242
1261
|
}) {
|
|
1243
|
-
return /* @__PURE__ */
|
|
1244
|
-
/* @__PURE__ */
|
|
1245
|
-
/* @__PURE__ */
|
|
1246
|
-
detail ? /* @__PURE__ */
|
|
1262
|
+
return /* @__PURE__ */ jsxs19("div", { children: [
|
|
1263
|
+
/* @__PURE__ */ jsx21("p", { className: "text-xs uppercase tracking-[0.25em] text-brand", children: eyebrow }),
|
|
1264
|
+
/* @__PURE__ */ jsx21("h2", { className: "mt-2 text-2xl font-semibold text-default", children: title }),
|
|
1265
|
+
detail ? /* @__PURE__ */ jsx21("p", { className: "mt-2 max-w-2xl text-sm text-slate-600", children: detail }) : null
|
|
1247
1266
|
] });
|
|
1248
1267
|
}
|
|
1249
1268
|
export {
|
|
1250
1269
|
Avatar,
|
|
1270
|
+
AvatarBlock,
|
|
1251
1271
|
AvatarGroup,
|
|
1252
1272
|
Button,
|
|
1253
1273
|
ButtonGroup,
|