@platned/ui 0.1.2 → 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.cjs
CHANGED
|
@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var src_exports = {};
|
|
32
32
|
__export(src_exports, {
|
|
33
33
|
Avatar: () => Avatar,
|
|
34
|
+
AvatarBlock: () => AvatarBlock,
|
|
34
35
|
AvatarGroup: () => AvatarGroup,
|
|
35
36
|
Button: () => Button,
|
|
36
37
|
ButtonGroup: () => ButtonGroup,
|
|
@@ -65,36 +66,39 @@ __export(src_exports, {
|
|
|
65
66
|
Toggle: () => Toggle
|
|
66
67
|
});
|
|
67
68
|
module.exports = __toCommonJS(src_exports);
|
|
68
|
-
var
|
|
69
|
+
var import_clsx21 = __toESM(require("clsx"), 1);
|
|
69
70
|
|
|
70
71
|
// src/components/button.tsx
|
|
71
72
|
var import_clsx = __toESM(require("clsx"), 1);
|
|
72
73
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
73
74
|
var variantStyles = {
|
|
74
75
|
primary: (0, import_clsx.default)(
|
|
75
|
-
"bg-
|
|
76
|
-
"hover:bg-
|
|
77
|
-
"disabled:bg-
|
|
76
|
+
"bg-brand border border-brand text-brand-on-brand",
|
|
77
|
+
"hover:bg-brand-hover",
|
|
78
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
78
79
|
),
|
|
79
80
|
neutral: (0, import_clsx.default)(
|
|
80
|
-
"bg-
|
|
81
|
-
"hover:bg-
|
|
82
|
-
"disabled:bg-
|
|
81
|
+
"bg-default border border-default text-default",
|
|
82
|
+
"hover:bg-default-hover hover:text-brand",
|
|
83
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
83
84
|
),
|
|
84
85
|
subtle: (0, import_clsx.default)(
|
|
85
|
-
|
|
86
|
-
"
|
|
87
|
-
"
|
|
86
|
+
// border-transparent holds space so hover border doesn't shift layout
|
|
87
|
+
"bg-transparent border border-transparent text-neutral",
|
|
88
|
+
"hover:border-default hover:text-brand",
|
|
89
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
88
90
|
),
|
|
89
91
|
danger: (0, import_clsx.default)(
|
|
90
|
-
"bg-
|
|
91
|
-
|
|
92
|
-
"
|
|
92
|
+
"bg-danger border border-danger-secondary text-danger-on-danger",
|
|
93
|
+
// border shifts from danger-secondary → danger-default on hover (Figma spec)
|
|
94
|
+
"hover:bg-danger-hover hover:border-danger",
|
|
95
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
93
96
|
),
|
|
94
97
|
"danger-subtle": (0, import_clsx.default)(
|
|
95
|
-
|
|
96
|
-
"
|
|
97
|
-
"
|
|
98
|
+
// border-transparent base avoids layout shift when hover border appears
|
|
99
|
+
"bg-transparent border border-transparent text-danger",
|
|
100
|
+
"hover:bg-danger-tertiary-hover hover:border-danger",
|
|
101
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
98
102
|
)
|
|
99
103
|
};
|
|
100
104
|
var sizeStyles = {
|
|
@@ -116,7 +120,7 @@ function Button({
|
|
|
116
120
|
{
|
|
117
121
|
className: (0, import_clsx.default)(
|
|
118
122
|
"inline-flex items-center justify-center whitespace-nowrap transition-colors",
|
|
119
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
123
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
120
124
|
"disabled:cursor-not-allowed",
|
|
121
125
|
variantStyles[variant],
|
|
122
126
|
sizeStyles[size],
|
|
@@ -137,20 +141,23 @@ var import_clsx2 = __toESM(require("clsx"), 1);
|
|
|
137
141
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
138
142
|
var variantStyles2 = {
|
|
139
143
|
primary: (0, import_clsx2.default)(
|
|
140
|
-
"bg-
|
|
141
|
-
"hover:bg-
|
|
142
|
-
"disabled:bg-
|
|
144
|
+
"bg-brand border border-brand text-brand-on-brand",
|
|
145
|
+
"hover:bg-brand-hover",
|
|
146
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
143
147
|
),
|
|
144
148
|
// Neutral uses secondary background (light gray) for visual weight without a text label
|
|
145
149
|
neutral: (0, import_clsx2.default)(
|
|
146
|
-
"bg-
|
|
147
|
-
|
|
148
|
-
"
|
|
150
|
+
"bg-default-secondary border border-default text-default",
|
|
151
|
+
// icon turns brand blue on hover (Figma spec)
|
|
152
|
+
"hover:bg-default-secondary-hover hover:text-brand",
|
|
153
|
+
"disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
149
154
|
),
|
|
150
155
|
subtle: (0, import_clsx2.default)(
|
|
151
|
-
"bg-transparent text-
|
|
152
|
-
|
|
153
|
-
"
|
|
156
|
+
"bg-transparent text-neutral",
|
|
157
|
+
// hover uses background-default-default-hover (#f5f5f5), icon turns brand blue (Figma spec)
|
|
158
|
+
"hover:bg-default-hover hover:text-brand",
|
|
159
|
+
// disabled needs explicit border since there is no base border
|
|
160
|
+
"disabled:bg-disabled disabled:border disabled:border-disabled disabled:text-disabled-on-disabled"
|
|
154
161
|
)
|
|
155
162
|
};
|
|
156
163
|
var sizeStyles2 = {
|
|
@@ -161,7 +168,7 @@ var sizeStyles2 = {
|
|
|
161
168
|
function IconButton({
|
|
162
169
|
variant = "primary",
|
|
163
170
|
size = "md",
|
|
164
|
-
|
|
171
|
+
children,
|
|
165
172
|
className,
|
|
166
173
|
...props
|
|
167
174
|
}) {
|
|
@@ -170,14 +177,14 @@ function IconButton({
|
|
|
170
177
|
{
|
|
171
178
|
className: (0, import_clsx2.default)(
|
|
172
179
|
"inline-flex shrink-0 items-center justify-center transition-colors",
|
|
173
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
180
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
174
181
|
"disabled:cursor-not-allowed",
|
|
175
182
|
variantStyles2[variant],
|
|
176
183
|
sizeStyles2[size],
|
|
177
184
|
className
|
|
178
185
|
),
|
|
179
186
|
...props,
|
|
180
|
-
children
|
|
187
|
+
children
|
|
181
188
|
}
|
|
182
189
|
);
|
|
183
190
|
}
|
|
@@ -186,28 +193,28 @@ function IconButton({
|
|
|
186
193
|
var import_clsx3 = __toESM(require("clsx"), 1);
|
|
187
194
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
188
195
|
var containerStyles = {
|
|
189
|
-
primary: "bg-
|
|
190
|
-
neutral: "bg-
|
|
191
|
-
filter: "bg-
|
|
196
|
+
primary: "bg-neutral-tertiary p-1 rounded-2xl",
|
|
197
|
+
neutral: "bg-neutral-tertiary p-1 rounded-2xl",
|
|
198
|
+
filter: "bg-default border border-default p-1 rounded-xl"
|
|
192
199
|
};
|
|
193
200
|
var selectedStyles = {
|
|
194
201
|
primary: (0, import_clsx3.default)(
|
|
195
|
-
"bg-
|
|
196
|
-
"hover:bg-
|
|
202
|
+
"bg-brand border border-brand text-brand-on-brand",
|
|
203
|
+
"hover:bg-brand-hover"
|
|
197
204
|
),
|
|
198
205
|
neutral: (0, import_clsx3.default)(
|
|
199
|
-
"bg-
|
|
200
|
-
"hover:bg-
|
|
206
|
+
"bg-default border border-default text-default",
|
|
207
|
+
"hover:bg-default-hover"
|
|
201
208
|
),
|
|
202
209
|
filter: (0, import_clsx3.default)(
|
|
203
|
-
"bg-
|
|
204
|
-
"hover:bg-
|
|
210
|
+
"bg-brand text-brand-on-brand",
|
|
211
|
+
"hover:bg-brand-hover"
|
|
205
212
|
)
|
|
206
213
|
};
|
|
207
214
|
var unselectedStyles = {
|
|
208
|
-
primary: (0, import_clsx3.default)("bg-transparent text-
|
|
209
|
-
neutral: (0, import_clsx3.default)("bg-transparent text-
|
|
210
|
-
filter: (0, import_clsx3.default)("text-
|
|
215
|
+
primary: (0, import_clsx3.default)("bg-transparent text-neutral", "hover:bg-neutral-tertiary-hover"),
|
|
216
|
+
neutral: (0, import_clsx3.default)("bg-transparent text-neutral", "hover:bg-neutral-tertiary-hover"),
|
|
217
|
+
filter: (0, import_clsx3.default)("text-default-secondary", "hover:text-default")
|
|
211
218
|
};
|
|
212
219
|
var itemSizeStyles = {
|
|
213
220
|
lg: "h-12 px-3 gap-1 rounded-2xl text-body font-semibold [&_svg]:size-5",
|
|
@@ -258,8 +265,8 @@ function ButtonGroup({
|
|
|
258
265
|
onClick: () => onChange(item.value),
|
|
259
266
|
className: (0, import_clsx3.default)(
|
|
260
267
|
"inline-flex items-center justify-center whitespace-nowrap transition-colors",
|
|
261
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
262
|
-
"disabled:cursor-not-allowed disabled:text-
|
|
268
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
269
|
+
"disabled:cursor-not-allowed disabled:text-disabled",
|
|
263
270
|
(isJustify || isStack) && "w-full",
|
|
264
271
|
itemSizeStyles[size],
|
|
265
272
|
isSelected ? selectedStyles[variant] : unselectedStyles[variant]
|
|
@@ -292,16 +299,16 @@ var initialTextStyles = {
|
|
|
292
299
|
md: "text-body-xs font-semibold",
|
|
293
300
|
sm: "text-body-tiny font-semibold"
|
|
294
301
|
};
|
|
295
|
-
|
|
296
|
-
circle
|
|
297
|
-
|
|
298
|
-
}
|
|
302
|
+
function getShapeClass(shape, size) {
|
|
303
|
+
if (shape === "circle") return "rounded-full";
|
|
304
|
+
return size === "sm" ? "rounded" : "rounded-lg";
|
|
305
|
+
}
|
|
299
306
|
function Avatar(props) {
|
|
300
307
|
const { size = "lg", shape = "circle", className } = props;
|
|
301
308
|
const base = (0, import_clsx4.default)(
|
|
302
309
|
"shrink-0 overflow-hidden",
|
|
303
310
|
sizeStyles3[size],
|
|
304
|
-
|
|
311
|
+
getShapeClass(shape, size),
|
|
305
312
|
className
|
|
306
313
|
);
|
|
307
314
|
if (props.type === "image") {
|
|
@@ -325,7 +332,7 @@ function Avatar(props) {
|
|
|
325
332
|
"span",
|
|
326
333
|
{
|
|
327
334
|
className: (0, import_clsx4.default)(
|
|
328
|
-
"select-none leading-none text-
|
|
335
|
+
"select-none leading-none text-brand-on-brand",
|
|
329
336
|
initialTextStyles[size]
|
|
330
337
|
),
|
|
331
338
|
children: props.initial.charAt(0).toUpperCase()
|
|
@@ -360,7 +367,7 @@ function AvatarGroup({
|
|
|
360
367
|
className: (0, import_clsx5.default)(
|
|
361
368
|
"flex items-center justify-center",
|
|
362
369
|
"min-w-6 h-6 px-1 rounded-lg",
|
|
363
|
-
"bg-
|
|
370
|
+
"bg-default-secondary text-default-secondary text-body-sm",
|
|
364
371
|
spacing === "overlap" && "drop-shadow-sm"
|
|
365
372
|
),
|
|
366
373
|
children: [
|
|
@@ -374,9 +381,22 @@ function AvatarGroup({
|
|
|
374
381
|
);
|
|
375
382
|
}
|
|
376
383
|
|
|
377
|
-
// src/components/
|
|
384
|
+
// src/components/avatar-block.tsx
|
|
378
385
|
var import_clsx6 = __toESM(require("clsx"), 1);
|
|
379
386
|
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
387
|
+
function AvatarBlock({ children, title, description, className }) {
|
|
388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_clsx6.default)("flex items-start gap-3", className), children: [
|
|
389
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "shrink-0", children }),
|
|
390
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
|
|
391
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-body font-semibold leading-[1.4] text-default-secondary", children: title }),
|
|
392
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-body leading-[1.4] text-default-tertiary", children: description })
|
|
393
|
+
] })
|
|
394
|
+
] });
|
|
395
|
+
}
|
|
396
|
+
|
|
397
|
+
// src/components/nav-item.tsx
|
|
398
|
+
var import_clsx7 = __toESM(require("clsx"), 1);
|
|
399
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
380
400
|
function NavItem({
|
|
381
401
|
icon,
|
|
382
402
|
label,
|
|
@@ -385,22 +405,22 @@ function NavItem({
|
|
|
385
405
|
collapsed = false,
|
|
386
406
|
className
|
|
387
407
|
}) {
|
|
388
|
-
return /* @__PURE__ */ (0,
|
|
408
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
389
409
|
"span",
|
|
390
410
|
{
|
|
391
|
-
className: (0,
|
|
411
|
+
className: (0, import_clsx7.default)(
|
|
392
412
|
"relative flex h-11 w-full items-center gap-3 rounded-xl px-3.5 py-2.5 transition-colors",
|
|
393
413
|
collapsed && "justify-center",
|
|
394
|
-
isActive ? "bg-
|
|
395
|
-
"border border-
|
|
396
|
-
"hover:bg-
|
|
414
|
+
isActive ? "bg-brand text-brand-on-brand" : [
|
|
415
|
+
"border border-default bg-default text-default-secondary",
|
|
416
|
+
"hover:bg-brand-tertiary-hover hover:border-brand-tertiary hover:text-brand"
|
|
397
417
|
],
|
|
398
418
|
className
|
|
399
419
|
),
|
|
400
420
|
children: [
|
|
401
|
-
icon !== void 0 && /* @__PURE__ */ (0,
|
|
402
|
-
!collapsed && /* @__PURE__ */ (0,
|
|
403
|
-
indicator && /* @__PURE__ */ (0,
|
|
421
|
+
icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
|
|
422
|
+
!collapsed && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "flex-1 min-w-0 truncate text-body-sm font-regular leading-snug", children: label }),
|
|
423
|
+
indicator && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
|
|
404
424
|
]
|
|
405
425
|
}
|
|
406
426
|
);
|
|
@@ -408,8 +428,8 @@ function NavItem({
|
|
|
408
428
|
|
|
409
429
|
// src/components/input.tsx
|
|
410
430
|
var import_react = require("react");
|
|
411
|
-
var
|
|
412
|
-
var
|
|
431
|
+
var import_clsx8 = __toESM(require("clsx"), 1);
|
|
432
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
413
433
|
var wrapGap = {
|
|
414
434
|
lg: "gap-2",
|
|
415
435
|
// 8px
|
|
@@ -446,47 +466,47 @@ var iconWrap = {
|
|
|
446
466
|
var Input = (0, import_react.forwardRef)(function Input2({ label, description, error, hint, size = "md", leadingIcon, trailingIcon, className, disabled, id, ...props }, ref) {
|
|
447
467
|
const hasError = !!error;
|
|
448
468
|
const iw = iconWrap[size];
|
|
449
|
-
return /* @__PURE__ */ (0,
|
|
450
|
-
label && /* @__PURE__ */ (0,
|
|
469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: (0, import_clsx8.default)("flex flex-col", wrapGap[size], className), children: [
|
|
470
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
451
471
|
"label",
|
|
452
472
|
{
|
|
453
473
|
htmlFor: id,
|
|
454
|
-
className: (0,
|
|
474
|
+
className: (0, import_clsx8.default)(labelText[size], disabled ? "text-disabled" : "text-default"),
|
|
455
475
|
children: label
|
|
456
476
|
}
|
|
457
477
|
),
|
|
458
|
-
description && /* @__PURE__ */ (0,
|
|
459
|
-
/* @__PURE__ */ (0,
|
|
460
|
-
leadingIcon && /* @__PURE__ */ (0,
|
|
461
|
-
/* @__PURE__ */ (0,
|
|
478
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
|
|
479
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex items-center", children: [
|
|
480
|
+
leadingIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_clsx8.default)("pointer-events-none absolute", iw.left, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: leadingIcon }),
|
|
481
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
|
|
462
482
|
"input",
|
|
463
483
|
{
|
|
464
484
|
ref,
|
|
465
485
|
id,
|
|
466
486
|
disabled,
|
|
467
|
-
className: (0,
|
|
487
|
+
className: (0, import_clsx8.default)(
|
|
468
488
|
"w-full rounded-lg border outline-none transition-colors",
|
|
469
|
-
"bg-
|
|
470
|
-
"placeholder:text-
|
|
489
|
+
"bg-default text-default",
|
|
490
|
+
"placeholder:text-default-tertiary",
|
|
471
491
|
inputBase[size],
|
|
472
492
|
leadingIcon && leadingPad[size],
|
|
473
493
|
trailingIcon && trailingPad[size],
|
|
474
|
-
disabled ? "cursor-not-allowed bg-
|
|
494
|
+
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"
|
|
475
495
|
),
|
|
476
496
|
...props
|
|
477
497
|
}
|
|
478
498
|
),
|
|
479
|
-
trailingIcon && /* @__PURE__ */ (0,
|
|
499
|
+
trailingIcon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: (0, import_clsx8.default)("pointer-events-none absolute", iw.right, iw.size, "flex items-center justify-center text-icon-default-secondary"), children: trailingIcon })
|
|
480
500
|
] }),
|
|
481
|
-
hasError && /* @__PURE__ */ (0,
|
|
482
|
-
!hasError && hint && /* @__PURE__ */ (0,
|
|
501
|
+
hasError && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText[size], "text-danger"), children: error }),
|
|
502
|
+
!hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: (0, import_clsx8.default)(labelText[size], "text-default-secondary"), children: hint })
|
|
483
503
|
] });
|
|
484
504
|
});
|
|
485
505
|
|
|
486
506
|
// src/components/textarea.tsx
|
|
487
507
|
var import_react2 = require("react");
|
|
488
|
-
var
|
|
489
|
-
var
|
|
508
|
+
var import_clsx9 = __toESM(require("clsx"), 1);
|
|
509
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
490
510
|
var wrapGap2 = {
|
|
491
511
|
lg: "gap-2",
|
|
492
512
|
md: "gap-1",
|
|
@@ -504,42 +524,42 @@ var textareaBase = {
|
|
|
504
524
|
};
|
|
505
525
|
var Textarea = (0, import_react2.forwardRef)(function Textarea2({ label, description, error, hint, size = "md", className, disabled, id, ...props }, ref) {
|
|
506
526
|
const hasError = !!error;
|
|
507
|
-
return /* @__PURE__ */ (0,
|
|
508
|
-
label && /* @__PURE__ */ (0,
|
|
527
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: (0, import_clsx9.default)("flex flex-col", wrapGap2[size], className), children: [
|
|
528
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
509
529
|
"label",
|
|
510
530
|
{
|
|
511
531
|
htmlFor: id,
|
|
512
|
-
className: (0,
|
|
532
|
+
className: (0, import_clsx9.default)(labelText2[size], disabled ? "text-disabled" : "text-default"),
|
|
513
533
|
children: label
|
|
514
534
|
}
|
|
515
535
|
),
|
|
516
|
-
description && /* @__PURE__ */ (0,
|
|
517
|
-
/* @__PURE__ */ (0,
|
|
536
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText2[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
|
|
537
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
518
538
|
"textarea",
|
|
519
539
|
{
|
|
520
540
|
ref,
|
|
521
541
|
id,
|
|
522
542
|
disabled,
|
|
523
|
-
className: (0,
|
|
543
|
+
className: (0, import_clsx9.default)(
|
|
524
544
|
"w-full rounded-lg border outline-none transition-colors resize-y",
|
|
525
|
-
"bg-
|
|
526
|
-
"placeholder:text-
|
|
545
|
+
"bg-default text-default",
|
|
546
|
+
"placeholder:text-default-tertiary",
|
|
527
547
|
textareaBase[size],
|
|
528
|
-
disabled ? "cursor-not-allowed bg-
|
|
548
|
+
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"
|
|
529
549
|
),
|
|
530
550
|
...props
|
|
531
551
|
}
|
|
532
552
|
),
|
|
533
|
-
hasError && /* @__PURE__ */ (0,
|
|
534
|
-
!hasError && hint && /* @__PURE__ */ (0,
|
|
553
|
+
hasError && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText2[size], "text-danger"), children: error }),
|
|
554
|
+
!hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: (0, import_clsx9.default)(labelText2[size], "text-default-secondary"), children: hint })
|
|
535
555
|
] });
|
|
536
556
|
});
|
|
537
557
|
|
|
538
558
|
// src/components/select.tsx
|
|
539
559
|
var import_react3 = require("react");
|
|
540
|
-
var
|
|
560
|
+
var import_clsx10 = __toESM(require("clsx"), 1);
|
|
541
561
|
var import_lu = require("react-icons/lu");
|
|
542
|
-
var
|
|
562
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
543
563
|
var wrapGap3 = {
|
|
544
564
|
lg: "gap-2",
|
|
545
565
|
md: "gap-1",
|
|
@@ -566,93 +586,93 @@ var chevronPos = {
|
|
|
566
586
|
var Select = (0, import_react3.forwardRef)(function Select2({ label, description, error, hint, size = "md", options, placeholder, className, disabled, id, ...props }, ref) {
|
|
567
587
|
const hasError = !!error;
|
|
568
588
|
const cp = chevronPos[size];
|
|
569
|
-
return /* @__PURE__ */ (0,
|
|
570
|
-
label && /* @__PURE__ */ (0,
|
|
589
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: (0, import_clsx10.default)("flex flex-col", wrapGap3[size], className), children: [
|
|
590
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
571
591
|
"label",
|
|
572
592
|
{
|
|
573
593
|
htmlFor: id,
|
|
574
|
-
className: (0,
|
|
594
|
+
className: (0, import_clsx10.default)(labelText3[size], disabled ? "text-disabled" : "text-default"),
|
|
575
595
|
children: label
|
|
576
596
|
}
|
|
577
597
|
),
|
|
578
|
-
description && /* @__PURE__ */ (0,
|
|
579
|
-
/* @__PURE__ */ (0,
|
|
580
|
-
/* @__PURE__ */ (0,
|
|
598
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_clsx10.default)(labelText3[size], disabled ? "text-disabled" : "text-default-secondary"), children: description }),
|
|
599
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative flex items-center", children: [
|
|
600
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
|
|
581
601
|
"select",
|
|
582
602
|
{
|
|
583
603
|
ref,
|
|
584
604
|
id,
|
|
585
605
|
disabled,
|
|
586
|
-
className: (0,
|
|
606
|
+
className: (0, import_clsx10.default)(
|
|
587
607
|
"w-full appearance-none rounded-lg border outline-none transition-colors pt-0.5",
|
|
588
|
-
"bg-
|
|
608
|
+
"bg-default text-default",
|
|
589
609
|
selectBase[size],
|
|
590
|
-
disabled ? "cursor-not-allowed bg-
|
|
610
|
+
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"
|
|
591
611
|
),
|
|
592
612
|
...props,
|
|
593
613
|
children: [
|
|
594
|
-
placeholder && /* @__PURE__ */ (0,
|
|
595
|
-
options.map((opt) => /* @__PURE__ */ (0,
|
|
614
|
+
placeholder && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: "", disabled: true, children: placeholder }),
|
|
615
|
+
options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
|
|
596
616
|
]
|
|
597
617
|
}
|
|
598
618
|
),
|
|
599
|
-
/* @__PURE__ */ (0,
|
|
619
|
+
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
|
|
600
620
|
"span",
|
|
601
621
|
{
|
|
602
|
-
className: (0,
|
|
622
|
+
className: (0, import_clsx10.default)(
|
|
603
623
|
"pointer-events-none absolute",
|
|
604
624
|
cp.right,
|
|
605
625
|
cp.size,
|
|
606
626
|
"flex items-center justify-center",
|
|
607
627
|
disabled ? "text-icon-disabled" : "text-icon-default-secondary"
|
|
608
628
|
),
|
|
609
|
-
children: /* @__PURE__ */ (0,
|
|
629
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu.LuChevronDown, { className: "size-full" })
|
|
610
630
|
}
|
|
611
631
|
)
|
|
612
632
|
] }),
|
|
613
|
-
hasError && /* @__PURE__ */ (0,
|
|
614
|
-
!hasError && hint && /* @__PURE__ */ (0,
|
|
633
|
+
hasError && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_clsx10.default)(labelText3[size], "text-danger"), children: error }),
|
|
634
|
+
!hasError && hint && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: (0, import_clsx10.default)(labelText3[size], "text-default-secondary"), children: hint })
|
|
615
635
|
] });
|
|
616
636
|
});
|
|
617
637
|
|
|
618
638
|
// src/components/stepper.tsx
|
|
619
|
-
var
|
|
639
|
+
var import_clsx11 = __toESM(require("clsx"), 1);
|
|
620
640
|
var import_lu2 = require("react-icons/lu");
|
|
621
|
-
var
|
|
641
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
622
642
|
function StepIndicator({ status }) {
|
|
623
643
|
if (status === "complete") {
|
|
624
|
-
return /* @__PURE__ */ (0,
|
|
644
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand text-white", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lu2.LuCheck, { size: 11, "aria-hidden": true }) });
|
|
625
645
|
}
|
|
626
646
|
if (status === "active") {
|
|
627
|
-
return /* @__PURE__ */ (0,
|
|
647
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-background-brand", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "size-2.5 rounded-full bg-brand" }) });
|
|
628
648
|
}
|
|
629
|
-
return /* @__PURE__ */ (0,
|
|
649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "size-5 shrink-0 rounded-full border-2 border-disabled", "aria-hidden": "true" });
|
|
630
650
|
}
|
|
631
651
|
function ChevronSeparator() {
|
|
632
|
-
return /* @__PURE__ */ (0,
|
|
652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lu2.LuChevronRight, { className: "mx-1 size-4 shrink-0 text-default-tertiary", "aria-hidden": true });
|
|
633
653
|
}
|
|
634
654
|
var labelClass = {
|
|
635
|
-
complete: "text-
|
|
636
|
-
active: "text-
|
|
637
|
-
upcoming: "text-
|
|
655
|
+
complete: "text-brand font-semibold",
|
|
656
|
+
active: "text-brand font-semibold",
|
|
657
|
+
upcoming: "text-disabled font-regular"
|
|
638
658
|
};
|
|
639
659
|
function Stepper({ steps, className }) {
|
|
640
|
-
return /* @__PURE__ */ (0,
|
|
660
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
641
661
|
"ol",
|
|
642
662
|
{
|
|
643
|
-
className: (0,
|
|
663
|
+
className: (0, import_clsx11.default)("flex items-center overflow-x-auto", className),
|
|
644
664
|
"aria-label": "Progress",
|
|
645
|
-
children: steps.map((step, i) => /* @__PURE__ */ (0,
|
|
665
|
+
children: steps.map((step, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
|
|
646
666
|
"li",
|
|
647
667
|
{
|
|
648
668
|
className: "flex items-center",
|
|
649
669
|
"aria-current": step.status === "active" ? "step" : void 0,
|
|
650
670
|
children: [
|
|
651
|
-
/* @__PURE__ */ (0,
|
|
652
|
-
/* @__PURE__ */ (0,
|
|
653
|
-
/* @__PURE__ */ (0,
|
|
671
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex items-center gap-1.5", children: [
|
|
672
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(StepIndicator, { status: step.status }),
|
|
673
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: (0, import_clsx11.default)("text-body-xs whitespace-nowrap", labelClass[step.status]), children: step.label })
|
|
654
674
|
] }),
|
|
655
|
-
i < steps.length - 1 && /* @__PURE__ */ (0,
|
|
675
|
+
i < steps.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronSeparator, {})
|
|
656
676
|
]
|
|
657
677
|
},
|
|
658
678
|
i
|
|
@@ -662,8 +682,8 @@ function Stepper({ steps, className }) {
|
|
|
662
682
|
}
|
|
663
683
|
|
|
664
684
|
// src/components/multiselect-card.tsx
|
|
665
|
-
var
|
|
666
|
-
var
|
|
685
|
+
var import_clsx12 = __toESM(require("clsx"), 1);
|
|
686
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
667
687
|
function MultiSelectCard({
|
|
668
688
|
icon,
|
|
669
689
|
title,
|
|
@@ -672,32 +692,32 @@ function MultiSelectCard({
|
|
|
672
692
|
onToggle,
|
|
673
693
|
className
|
|
674
694
|
}) {
|
|
675
|
-
return /* @__PURE__ */ (0,
|
|
695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
|
|
676
696
|
"button",
|
|
677
697
|
{
|
|
678
698
|
type: "button",
|
|
679
699
|
role: "checkbox",
|
|
680
700
|
"aria-checked": selected,
|
|
681
701
|
onClick: onToggle,
|
|
682
|
-
className: (0,
|
|
702
|
+
className: (0, import_clsx12.default)(
|
|
683
703
|
"relative w-full rounded-2xl border-2 p-4 text-left transition-all",
|
|
684
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
685
|
-
selected ? "border-
|
|
704
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
705
|
+
selected ? "border-brand bg-brand-tertiary" : "border-default bg-default hover:border-default-secondary",
|
|
686
706
|
className
|
|
687
707
|
),
|
|
688
708
|
children: [
|
|
689
|
-
/* @__PURE__ */ (0,
|
|
690
|
-
/* @__PURE__ */ (0,
|
|
709
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
|
|
710
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
691
711
|
"span",
|
|
692
712
|
{
|
|
693
|
-
className: (0,
|
|
713
|
+
className: (0, import_clsx12.default)(
|
|
694
714
|
"flex size-10 shrink-0 items-center justify-center rounded-xl",
|
|
695
|
-
selected ? "bg-
|
|
715
|
+
selected ? "bg-brand" : "bg-brand-tertiary"
|
|
696
716
|
),
|
|
697
|
-
children: /* @__PURE__ */ (0,
|
|
717
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: (0, import_clsx12.default)("size-5", selected ? "text-icon-brand-on-brand" : "text-icon-brand"), children: icon })
|
|
698
718
|
}
|
|
699
719
|
),
|
|
700
|
-
selected ? /* @__PURE__ */ (0,
|
|
720
|
+
selected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex size-5 shrink-0 items-center justify-center rounded-full bg-brand", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "11", height: "8", viewBox: "0 0 11 8", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
701
721
|
"path",
|
|
702
722
|
{
|
|
703
723
|
d: "M1 4L3.9 7L10 1",
|
|
@@ -706,26 +726,26 @@ function MultiSelectCard({
|
|
|
706
726
|
strokeLinecap: "round",
|
|
707
727
|
strokeLinejoin: "round"
|
|
708
728
|
}
|
|
709
|
-
) }) }) : /* @__PURE__ */ (0,
|
|
729
|
+
) }) }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
710
730
|
"span",
|
|
711
731
|
{
|
|
712
|
-
className: "size-5 shrink-0 rounded-full border-2 border-
|
|
732
|
+
className: "size-5 shrink-0 rounded-full border-2 border-default",
|
|
713
733
|
"aria-hidden": "true"
|
|
714
734
|
}
|
|
715
735
|
)
|
|
716
736
|
] }),
|
|
717
|
-
/* @__PURE__ */ (0,
|
|
718
|
-
/* @__PURE__ */ (0,
|
|
737
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "mt-3", children: [
|
|
738
|
+
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
719
739
|
"p",
|
|
720
740
|
{
|
|
721
|
-
className: (0,
|
|
741
|
+
className: (0, import_clsx12.default)(
|
|
722
742
|
"text-body-sm font-semibold",
|
|
723
|
-
selected ? "text-
|
|
743
|
+
selected ? "text-brand" : "text-default"
|
|
724
744
|
),
|
|
725
745
|
children: title
|
|
726
746
|
}
|
|
727
747
|
),
|
|
728
|
-
description && /* @__PURE__ */ (0,
|
|
748
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: description })
|
|
729
749
|
] })
|
|
730
750
|
]
|
|
731
751
|
}
|
|
@@ -733,8 +753,8 @@ function MultiSelectCard({
|
|
|
733
753
|
}
|
|
734
754
|
|
|
735
755
|
// src/components/data-table.tsx
|
|
736
|
-
var
|
|
737
|
-
var
|
|
756
|
+
var import_clsx13 = __toESM(require("clsx"), 1);
|
|
757
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
738
758
|
function DataTable({
|
|
739
759
|
columns,
|
|
740
760
|
rows,
|
|
@@ -742,25 +762,25 @@ function DataTable({
|
|
|
742
762
|
className,
|
|
743
763
|
onRowClick
|
|
744
764
|
}) {
|
|
745
|
-
return /* @__PURE__ */ (0,
|
|
765
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
746
766
|
"div",
|
|
747
767
|
{
|
|
748
|
-
className: (0,
|
|
749
|
-
"overflow-hidden rounded-xl border border-
|
|
768
|
+
className: (0, import_clsx13.default)(
|
|
769
|
+
"overflow-hidden rounded-xl border border-default bg-default",
|
|
750
770
|
className
|
|
751
771
|
),
|
|
752
772
|
children: [
|
|
753
|
-
/* @__PURE__ */ (0,
|
|
754
|
-
/* @__PURE__ */ (0,
|
|
773
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex items-center bg-default-secondary px-4 py-3", children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_clsx13.default)("overflow-hidden", col.grow ? "flex-1 min-w-0" : "shrink-0"), style: col.grow ? { minWidth: col.width } : { width: col.width }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: col.header }) }, col.key)) }),
|
|
774
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: rows.map((row, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
755
775
|
"div",
|
|
756
776
|
{
|
|
757
|
-
className: (0,
|
|
758
|
-
"flex items-center px-4 py-[14px] transition-colors hover:bg-
|
|
777
|
+
className: (0, import_clsx13.default)(
|
|
778
|
+
"flex items-center px-4 py-[14px] transition-colors hover:bg-default-secondary/50",
|
|
759
779
|
i > 0 && "border-t border-[#ececec]",
|
|
760
780
|
onRowClick && "cursor-pointer"
|
|
761
781
|
),
|
|
762
782
|
onClick: onRowClick ? () => onRowClick(row) : void 0,
|
|
763
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
783
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: (0, import_clsx13.default)("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))
|
|
764
784
|
},
|
|
765
785
|
getRowKey(row, i)
|
|
766
786
|
)) })
|
|
@@ -772,28 +792,28 @@ function TableCellLeadText({
|
|
|
772
792
|
primary,
|
|
773
793
|
secondary
|
|
774
794
|
}) {
|
|
775
|
-
return /* @__PURE__ */ (0,
|
|
776
|
-
/* @__PURE__ */ (0,
|
|
777
|
-
secondary && /* @__PURE__ */ (0,
|
|
795
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
|
|
796
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-body-sm font-medium text-default leading-snug", children: primary }),
|
|
797
|
+
secondary && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-body-xs font-normal text-default-secondary leading-tight", children: secondary })
|
|
778
798
|
] });
|
|
779
799
|
}
|
|
780
800
|
function TableCellText({
|
|
781
801
|
children,
|
|
782
802
|
muted = true
|
|
783
803
|
}) {
|
|
784
|
-
return /* @__PURE__ */ (0,
|
|
804
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
785
805
|
"span",
|
|
786
806
|
{
|
|
787
|
-
className: (0,
|
|
807
|
+
className: (0, import_clsx13.default)(
|
|
788
808
|
"text-body-xs font-normal leading-snug whitespace-nowrap",
|
|
789
|
-
muted ? "text-
|
|
809
|
+
muted ? "text-default-secondary" : "text-default"
|
|
790
810
|
),
|
|
791
811
|
children
|
|
792
812
|
}
|
|
793
813
|
);
|
|
794
814
|
}
|
|
795
815
|
function TableCellBadge({ label }) {
|
|
796
|
-
return /* @__PURE__ */ (0,
|
|
816
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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 });
|
|
797
817
|
}
|
|
798
818
|
function TableCellStatusPill({
|
|
799
819
|
label,
|
|
@@ -801,13 +821,13 @@ function TableCellStatusPill({
|
|
|
801
821
|
backgroundColor,
|
|
802
822
|
textColor
|
|
803
823
|
}) {
|
|
804
|
-
return /* @__PURE__ */ (0,
|
|
824
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
|
|
805
825
|
"span",
|
|
806
826
|
{
|
|
807
827
|
className: "inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-body-xs font-medium leading-tight whitespace-nowrap",
|
|
808
828
|
style: { backgroundColor, color: textColor },
|
|
809
829
|
children: [
|
|
810
|
-
/* @__PURE__ */ (0,
|
|
830
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "size-1.5 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
|
|
811
831
|
label
|
|
812
832
|
]
|
|
813
833
|
}
|
|
@@ -819,15 +839,15 @@ function TableCellProgress({
|
|
|
819
839
|
}) {
|
|
820
840
|
const color = barColor ?? "#0c2d58";
|
|
821
841
|
const clamped = Math.min(100, Math.max(0, percent));
|
|
822
|
-
return /* @__PURE__ */ (0,
|
|
823
|
-
/* @__PURE__ */ (0,
|
|
842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
843
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "h-1.5 w-16 overflow-hidden rounded-full bg-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
|
|
824
844
|
"div",
|
|
825
845
|
{
|
|
826
846
|
className: "h-full rounded-full transition-all",
|
|
827
847
|
style: { width: `${clamped}%`, backgroundColor: color }
|
|
828
848
|
}
|
|
829
849
|
) }),
|
|
830
|
-
/* @__PURE__ */ (0,
|
|
850
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "text-body-tiny text-default-secondary leading-none", children: [
|
|
831
851
|
percent,
|
|
832
852
|
"%"
|
|
833
853
|
] })
|
|
@@ -835,32 +855,32 @@ function TableCellProgress({
|
|
|
835
855
|
}
|
|
836
856
|
|
|
837
857
|
// src/components/stat-tile.tsx
|
|
838
|
-
var
|
|
839
|
-
var
|
|
858
|
+
var import_clsx14 = __toESM(require("clsx"), 1);
|
|
859
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
840
860
|
function StatTile({ label, value, dotColor, className }) {
|
|
841
|
-
return /* @__PURE__ */ (0,
|
|
861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
842
862
|
"div",
|
|
843
863
|
{
|
|
844
|
-
className: (0,
|
|
845
|
-
"flex flex-col gap-2 rounded-xl border border-
|
|
864
|
+
className: (0, import_clsx14.default)(
|
|
865
|
+
"flex flex-col gap-2 rounded-xl border border-default bg-default p-4",
|
|
846
866
|
className
|
|
847
867
|
),
|
|
848
868
|
children: [
|
|
849
|
-
/* @__PURE__ */ (0,
|
|
850
|
-
dotColor && /* @__PURE__ */ (0,
|
|
851
|
-
/* @__PURE__ */ (0,
|
|
869
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-1.5", children: [
|
|
870
|
+
dotColor && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "size-2 shrink-0 rounded-full", style: { backgroundColor: dotColor } }),
|
|
871
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-body-xs font-medium text-default-secondary whitespace-nowrap", children: label })
|
|
852
872
|
] }),
|
|
853
|
-
/* @__PURE__ */ (0,
|
|
873
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-heading font-semibold text-default leading-none", children: value })
|
|
854
874
|
]
|
|
855
875
|
}
|
|
856
876
|
);
|
|
857
877
|
}
|
|
858
878
|
|
|
859
879
|
// src/components/toggle.tsx
|
|
860
|
-
var
|
|
861
|
-
var
|
|
880
|
+
var import_clsx15 = __toESM(require("clsx"), 1);
|
|
881
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
862
882
|
function Toggle({ checked, onChange, label, disabled = false }) {
|
|
863
|
-
return /* @__PURE__ */ (0,
|
|
883
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
|
|
864
884
|
"button",
|
|
865
885
|
{
|
|
866
886
|
type: "button",
|
|
@@ -868,23 +888,23 @@ function Toggle({ checked, onChange, label, disabled = false }) {
|
|
|
868
888
|
"aria-checked": checked,
|
|
869
889
|
disabled,
|
|
870
890
|
onClick: () => onChange(!checked),
|
|
871
|
-
className: (0,
|
|
891
|
+
className: (0, import_clsx15.default)(
|
|
872
892
|
"flex items-center gap-2",
|
|
873
|
-
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-
|
|
893
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1",
|
|
874
894
|
disabled && "cursor-not-allowed opacity-50"
|
|
875
895
|
),
|
|
876
896
|
children: [
|
|
877
|
-
/* @__PURE__ */ (0,
|
|
897
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
878
898
|
"span",
|
|
879
899
|
{
|
|
880
|
-
className: (0,
|
|
900
|
+
className: (0, import_clsx15.default)(
|
|
881
901
|
"relative inline-flex h-6 w-10 shrink-0 rounded-full transition-colors",
|
|
882
|
-
checked ? "bg-
|
|
902
|
+
checked ? "bg-brand" : "border border-default bg-neutral-tertiary"
|
|
883
903
|
),
|
|
884
|
-
children: /* @__PURE__ */ (0,
|
|
904
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
|
|
885
905
|
"span",
|
|
886
906
|
{
|
|
887
|
-
className: (0,
|
|
907
|
+
className: (0, import_clsx15.default)(
|
|
888
908
|
"absolute left-0.5 top-0.5 size-5 rounded-full bg-white shadow-sm transition-transform",
|
|
889
909
|
checked ? "translate-x-4" : "translate-x-0"
|
|
890
910
|
)
|
|
@@ -892,7 +912,7 @@ function Toggle({ checked, onChange, label, disabled = false }) {
|
|
|
892
912
|
)
|
|
893
913
|
}
|
|
894
914
|
),
|
|
895
|
-
label && /* @__PURE__ */ (0,
|
|
915
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-body-xs text-default", children: label })
|
|
896
916
|
]
|
|
897
917
|
}
|
|
898
918
|
);
|
|
@@ -900,14 +920,14 @@ function Toggle({ checked, onChange, label, disabled = false }) {
|
|
|
900
920
|
|
|
901
921
|
// src/components/file-drop-zone.tsx
|
|
902
922
|
var import_react4 = require("react");
|
|
903
|
-
var
|
|
923
|
+
var import_clsx16 = __toESM(require("clsx"), 1);
|
|
904
924
|
var import_lu3 = require("react-icons/lu");
|
|
905
|
-
var
|
|
925
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
906
926
|
function FileDropZone({ className }) {
|
|
907
927
|
const inputRef = (0, import_react4.useRef)(null);
|
|
908
928
|
const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
|
|
909
|
-
return /* @__PURE__ */ (0,
|
|
910
|
-
/* @__PURE__ */ (0,
|
|
929
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
|
|
930
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
|
|
911
931
|
"input",
|
|
912
932
|
{
|
|
913
933
|
ref: inputRef,
|
|
@@ -917,7 +937,7 @@ function FileDropZone({ className }) {
|
|
|
917
937
|
tabIndex: -1
|
|
918
938
|
}
|
|
919
939
|
),
|
|
920
|
-
/* @__PURE__ */ (0,
|
|
940
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
|
|
921
941
|
"div",
|
|
922
942
|
{
|
|
923
943
|
role: "button",
|
|
@@ -937,15 +957,15 @@ function FileDropZone({ className }) {
|
|
|
937
957
|
e.preventDefault();
|
|
938
958
|
setIsDragging(false);
|
|
939
959
|
},
|
|
940
|
-
className: (0,
|
|
941
|
-
"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-
|
|
942
|
-
isDragging ? "border-
|
|
960
|
+
className: (0, import_clsx16.default)(
|
|
961
|
+
"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",
|
|
962
|
+
isDragging ? "border-brand bg-brand-tertiary" : "border-default bg-default-secondary hover:border-brand hover:bg-brand-tertiary",
|
|
943
963
|
className
|
|
944
964
|
),
|
|
945
965
|
children: [
|
|
946
|
-
/* @__PURE__ */ (0,
|
|
947
|
-
/* @__PURE__ */ (0,
|
|
948
|
-
/* @__PURE__ */ (0,
|
|
966
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: isDragging ? "text-brand" : "text-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lu3.LuUpload, { size: 20 }) }),
|
|
967
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-body-sm font-medium text-default", children: "Upload file" }),
|
|
968
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-body-xs text-default-secondary text-center", children: "Drag & drop or browse \xB7 PDF, JPG, PNG \xB7 up to 10 MB" })
|
|
949
969
|
]
|
|
950
970
|
}
|
|
951
971
|
)
|
|
@@ -953,18 +973,18 @@ function FileDropZone({ className }) {
|
|
|
953
973
|
}
|
|
954
974
|
|
|
955
975
|
// src/components/form-card.tsx
|
|
956
|
-
var
|
|
976
|
+
var import_clsx17 = __toESM(require("clsx"), 1);
|
|
957
977
|
var import_lu4 = require("react-icons/lu");
|
|
958
|
-
var
|
|
978
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
959
979
|
function FormCard({
|
|
960
980
|
children,
|
|
961
981
|
className
|
|
962
982
|
}) {
|
|
963
|
-
return /* @__PURE__ */ (0,
|
|
983
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
|
|
964
984
|
"div",
|
|
965
985
|
{
|
|
966
|
-
className: (0,
|
|
967
|
-
"overflow-hidden rounded-xl border border-
|
|
986
|
+
className: (0, import_clsx17.default)(
|
|
987
|
+
"overflow-hidden rounded-xl border border-default bg-default",
|
|
968
988
|
className
|
|
969
989
|
),
|
|
970
990
|
children
|
|
@@ -972,9 +992,9 @@ function FormCard({
|
|
|
972
992
|
);
|
|
973
993
|
}
|
|
974
994
|
function FormCardHeader({ title, subtitle }) {
|
|
975
|
-
return /* @__PURE__ */ (0,
|
|
976
|
-
/* @__PURE__ */ (0,
|
|
977
|
-
subtitle && /* @__PURE__ */ (0,
|
|
995
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "border-b border-default px-7 py-6", children: [
|
|
996
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-heading-sm font-semibold text-default leading-snug", children: title }),
|
|
997
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "mt-1 text-body-xs text-default-secondary", children: subtitle })
|
|
978
998
|
] });
|
|
979
999
|
}
|
|
980
1000
|
function FormCardFooter({
|
|
@@ -984,27 +1004,27 @@ function FormCardFooter({
|
|
|
984
1004
|
continueLabel = "Continue",
|
|
985
1005
|
backDisabled = false
|
|
986
1006
|
}) {
|
|
987
|
-
return /* @__PURE__ */ (0,
|
|
988
|
-
/* @__PURE__ */ (0,
|
|
989
|
-
/* @__PURE__ */ (0,
|
|
990
|
-
!backDisabled && /* @__PURE__ */ (0,
|
|
991
|
-
/* @__PURE__ */ (0,
|
|
1007
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between border-t border-default px-7 py-5", children: [
|
|
1008
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "neutral", size: "md", onClick: onSaveDraft, children: "Save as draft" }),
|
|
1009
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
1010
|
+
!backDisabled && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "neutral", size: "md", leadingIcon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lu4.LuArrowLeft, { size: 16 }), onClick: onBack, children: "Back" }),
|
|
1011
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button, { variant: "primary", size: "md", trailingIcon: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_lu4.LuArrowRight, { size: 16 }), onClick: onContinue, children: continueLabel })
|
|
992
1012
|
] })
|
|
993
1013
|
] });
|
|
994
1014
|
}
|
|
995
1015
|
|
|
996
1016
|
// src/components/document-row.tsx
|
|
997
|
-
var
|
|
998
|
-
var
|
|
1017
|
+
var import_clsx18 = __toESM(require("clsx"), 1);
|
|
1018
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
999
1019
|
var STATUS_CONFIG = {
|
|
1000
1020
|
uploaded: { label: "\u2713 Uploaded", style: "bg-[#e6f4ea] text-[#1f7a3d]" },
|
|
1001
1021
|
"under-review": { label: "\u25CF Under review", style: "bg-[#fbe6cf] text-[#9a6206]" },
|
|
1002
1022
|
processing: { label: "\u25CF Processing", style: "bg-[#e9eff7] text-[#0c2d58]" },
|
|
1003
1023
|
missing: { label: "Missing", style: "bg-[#fee2e2] text-[#b91c1c]" },
|
|
1004
|
-
"not-provided": { label: "Not provided", style: "bg-
|
|
1024
|
+
"not-provided": { label: "Not provided", style: "bg-default-secondary text-default-secondary" }
|
|
1005
1025
|
};
|
|
1006
1026
|
function FileTypeBadge({ type }) {
|
|
1007
|
-
return /* @__PURE__ */ (0,
|
|
1027
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-md bg-brand-tertiary", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-tiny font-semibold text-brand", children: type }) });
|
|
1008
1028
|
}
|
|
1009
1029
|
function DocumentRow({
|
|
1010
1030
|
title,
|
|
@@ -1017,16 +1037,16 @@ function DocumentRow({
|
|
|
1017
1037
|
}) {
|
|
1018
1038
|
const hasFile = (status === "uploaded" || status === "under-review" || status === "processing") && !!fileName;
|
|
1019
1039
|
const cfg = STATUS_CONFIG[status];
|
|
1020
|
-
return /* @__PURE__ */ (0,
|
|
1021
|
-
/* @__PURE__ */ (0,
|
|
1022
|
-
/* @__PURE__ */ (0,
|
|
1023
|
-
/* @__PURE__ */ (0,
|
|
1024
|
-
/* @__PURE__ */ (0,
|
|
1040
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col gap-3 py-4", children: [
|
|
1041
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
|
|
1042
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
|
|
1043
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-sm font-semibold text-default truncate", children: title }),
|
|
1044
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("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" })
|
|
1025
1045
|
] }),
|
|
1026
|
-
/* @__PURE__ */ (0,
|
|
1046
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1027
1047
|
"span",
|
|
1028
1048
|
{
|
|
1029
|
-
className: (0,
|
|
1049
|
+
className: (0, import_clsx18.default)(
|
|
1030
1050
|
"shrink-0 rounded-full px-2.5 py-0.5 text-body-tiny font-medium whitespace-nowrap",
|
|
1031
1051
|
cfg.style
|
|
1032
1052
|
),
|
|
@@ -1034,70 +1054,70 @@ function DocumentRow({
|
|
|
1034
1054
|
}
|
|
1035
1055
|
)
|
|
1036
1056
|
] }),
|
|
1037
|
-
/* @__PURE__ */ (0,
|
|
1038
|
-
hasFile ? /* @__PURE__ */ (0,
|
|
1039
|
-
/* @__PURE__ */ (0,
|
|
1040
|
-
/* @__PURE__ */ (0,
|
|
1041
|
-
/* @__PURE__ */ (0,
|
|
1042
|
-
fileSize && /* @__PURE__ */ (0,
|
|
1057
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-body-xs text-default-secondary", children: description }),
|
|
1058
|
+
hasFile ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-3 rounded-lg border border-default bg-default px-3 py-2.5", children: [
|
|
1059
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FileTypeBadge, { type: fileType }),
|
|
1060
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
|
|
1061
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate text-body-sm font-medium text-default", children: fileName }),
|
|
1062
|
+
fileSize && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-body-xs text-default-secondary", children: fileSize })
|
|
1043
1063
|
] }),
|
|
1044
|
-
/* @__PURE__ */ (0,
|
|
1045
|
-
/* @__PURE__ */ (0,
|
|
1064
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex shrink-0 items-center gap-4", children: [
|
|
1065
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1046
1066
|
"button",
|
|
1047
1067
|
{
|
|
1048
1068
|
type: "button",
|
|
1049
|
-
className: "text-body-xs font-medium text-
|
|
1069
|
+
className: "text-body-xs font-medium text-brand hover:underline",
|
|
1050
1070
|
children: "Replace"
|
|
1051
1071
|
}
|
|
1052
1072
|
),
|
|
1053
|
-
/* @__PURE__ */ (0,
|
|
1073
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1054
1074
|
"button",
|
|
1055
1075
|
{
|
|
1056
1076
|
type: "button",
|
|
1057
|
-
className: "text-body-xs font-medium text-
|
|
1077
|
+
className: "text-body-xs font-medium text-danger hover:underline",
|
|
1058
1078
|
children: "Remove"
|
|
1059
1079
|
}
|
|
1060
1080
|
)
|
|
1061
1081
|
] })
|
|
1062
|
-
] }) : /* @__PURE__ */ (0,
|
|
1082
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FileDropZone, {})
|
|
1063
1083
|
] });
|
|
1064
1084
|
}
|
|
1065
1085
|
|
|
1066
1086
|
// src/components/modal.tsx
|
|
1067
|
-
var
|
|
1087
|
+
var import_clsx19 = __toESM(require("clsx"), 1);
|
|
1068
1088
|
var import_lu5 = require("react-icons/lu");
|
|
1069
|
-
var
|
|
1089
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1070
1090
|
function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth = "max-w-[540px]" }) {
|
|
1071
1091
|
if (!isOpen) return null;
|
|
1072
|
-
return /* @__PURE__ */ (0,
|
|
1092
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1073
1093
|
"div",
|
|
1074
1094
|
{
|
|
1075
1095
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-black/80",
|
|
1076
1096
|
onClick: (e) => {
|
|
1077
1097
|
if (e.target === e.currentTarget) onClose();
|
|
1078
1098
|
},
|
|
1079
|
-
children: /* @__PURE__ */ (0,
|
|
1080
|
-
/* @__PURE__ */ (0,
|
|
1081
|
-
/* @__PURE__ */ (0,
|
|
1082
|
-
/* @__PURE__ */ (0,
|
|
1083
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1099
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_clsx19.default)("w-full mx-4 rounded-2xl bg-white shadow-xl", maxWidth), children: [
|
|
1100
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-start justify-between px-6 py-5", children: [
|
|
1101
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
|
|
1102
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-heading-sm font-semibold text-default", children: title }),
|
|
1103
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "mt-0.5 text-body-xs text-default-secondary", children: subtitle })
|
|
1084
1104
|
] }),
|
|
1085
|
-
/* @__PURE__ */ (0,
|
|
1105
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1086
1106
|
IconButton,
|
|
1087
1107
|
{
|
|
1088
1108
|
variant: "subtle",
|
|
1089
1109
|
size: "sm",
|
|
1090
1110
|
"aria-label": "Close dialog",
|
|
1091
|
-
|
|
1092
|
-
|
|
1111
|
+
onClick: onClose,
|
|
1112
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lu5.LuX, { size: 16 })
|
|
1093
1113
|
}
|
|
1094
1114
|
)
|
|
1095
1115
|
] }),
|
|
1096
|
-
/* @__PURE__ */ (0,
|
|
1097
|
-
/* @__PURE__ */ (0,
|
|
1098
|
-
footer && /* @__PURE__ */ (0,
|
|
1099
|
-
/* @__PURE__ */ (0,
|
|
1100
|
-
/* @__PURE__ */ (0,
|
|
1116
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("hr", { className: "border-default" }),
|
|
1117
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "px-6 py-5", children }),
|
|
1118
|
+
footer && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
|
|
1119
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("hr", { className: "border-default" }),
|
|
1120
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex items-center justify-end gap-2 px-6 py-4", children: footer })
|
|
1101
1121
|
] })
|
|
1102
1122
|
] })
|
|
1103
1123
|
}
|
|
@@ -1105,8 +1125,8 @@ function Modal({ isOpen, onClose, title, subtitle, children, footer, maxWidth =
|
|
|
1105
1125
|
}
|
|
1106
1126
|
|
|
1107
1127
|
// src/components/role-badge.tsx
|
|
1108
|
-
var
|
|
1109
|
-
var
|
|
1128
|
+
var import_clsx20 = __toESM(require("clsx"), 1);
|
|
1129
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1110
1130
|
var ROLE_COLORS = {
|
|
1111
1131
|
"Super Admin": { bg: "#e9eff7", text: "#0c2d58" },
|
|
1112
1132
|
"Admin": { bg: "#e9eff7", text: "#0c2d58" },
|
|
@@ -1122,10 +1142,10 @@ var ROLE_COLORS = {
|
|
|
1122
1142
|
var FALLBACK = { bg: "#f5f5f5", text: "#757575" };
|
|
1123
1143
|
function RoleBadge({ role, size = "sm" }) {
|
|
1124
1144
|
const colors = ROLE_COLORS[role] ?? FALLBACK;
|
|
1125
|
-
return /* @__PURE__ */ (0,
|
|
1145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1126
1146
|
"span",
|
|
1127
1147
|
{
|
|
1128
|
-
className: (0,
|
|
1148
|
+
className: (0, import_clsx20.default)(
|
|
1129
1149
|
"inline-flex items-center rounded-full font-medium whitespace-nowrap",
|
|
1130
1150
|
size === "sm" ? "px-2 py-0.5 text-body-tiny" : "px-3 py-1 text-body-xs"
|
|
1131
1151
|
),
|
|
@@ -1138,7 +1158,7 @@ function RoleBadge({ role, size = "sm" }) {
|
|
|
1138
1158
|
// src/components/role-combo-box.tsx
|
|
1139
1159
|
var import_react5 = require("react");
|
|
1140
1160
|
var import_lu6 = require("react-icons/lu");
|
|
1141
|
-
var
|
|
1161
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1142
1162
|
var ROLE_COMBO_OPTIONS = [
|
|
1143
1163
|
{ role: "Reviewer", description: "Reviews onboarding requests" },
|
|
1144
1164
|
{ role: "Admin", description: "Full org control" },
|
|
@@ -1177,21 +1197,21 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1177
1197
|
const otherOptions = options.filter(
|
|
1178
1198
|
(o) => o.role !== value && o.role.toLowerCase().includes(query.toLowerCase())
|
|
1179
1199
|
);
|
|
1180
|
-
return /* @__PURE__ */ (0,
|
|
1181
|
-
/* @__PURE__ */ (0,
|
|
1200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "relative", ref: containerRef, children: [
|
|
1201
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1182
1202
|
"div",
|
|
1183
1203
|
{
|
|
1184
1204
|
role: "combobox",
|
|
1185
1205
|
"aria-expanded": open,
|
|
1186
1206
|
"aria-haspopup": "listbox",
|
|
1187
1207
|
onClick: openDropdown,
|
|
1188
|
-
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-
|
|
1208
|
+
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"}`,
|
|
1189
1209
|
children: [
|
|
1190
|
-
/* @__PURE__ */ (0,
|
|
1191
|
-
/* @__PURE__ */ (0,
|
|
1192
|
-
value === "User" && !open && /* @__PURE__ */ (0,
|
|
1193
|
-
open && /* @__PURE__ */ (0,
|
|
1194
|
-
/* @__PURE__ */ (0,
|
|
1210
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-1 min-w-0 items-center gap-1.5 overflow-hidden", children: [
|
|
1211
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RoleBadge, { role: value, size: "sm" }),
|
|
1212
|
+
value === "User" && !open && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("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" }),
|
|
1213
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
1214
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1195
1215
|
"input",
|
|
1196
1216
|
{
|
|
1197
1217
|
ref: inputRef,
|
|
@@ -1199,24 +1219,24 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1199
1219
|
value: query,
|
|
1200
1220
|
onChange: (e) => setQuery(e.target.value),
|
|
1201
1221
|
onClick: (e) => e.stopPropagation(),
|
|
1202
|
-
className: "min-w-0 flex-1 bg-transparent text-body-xs text-
|
|
1222
|
+
className: "min-w-0 flex-1 bg-transparent text-body-xs text-default outline-none",
|
|
1203
1223
|
"aria-label": "Search roles"
|
|
1204
1224
|
}
|
|
1205
1225
|
),
|
|
1206
|
-
/* @__PURE__ */ (0,
|
|
1226
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "mx-0.5 h-[18px] w-px shrink-0 bg-text-default", "aria-hidden": true })
|
|
1207
1227
|
] })
|
|
1208
1228
|
] }),
|
|
1209
|
-
/* @__PURE__ */ (0,
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "shrink-0 text-default-secondary", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lu6.LuChevronDown, { size: 14 }) })
|
|
1210
1230
|
]
|
|
1211
1231
|
}
|
|
1212
1232
|
),
|
|
1213
|
-
open && /* @__PURE__ */ (0,
|
|
1233
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1214
1234
|
"div",
|
|
1215
1235
|
{
|
|
1216
1236
|
role: "listbox",
|
|
1217
|
-
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-
|
|
1237
|
+
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",
|
|
1218
1238
|
children: [
|
|
1219
|
-
selectedEntry && /* @__PURE__ */ (0,
|
|
1239
|
+
selectedEntry && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1220
1240
|
"div",
|
|
1221
1241
|
{
|
|
1222
1242
|
role: "option",
|
|
@@ -1224,31 +1244,31 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1224
1244
|
className: "flex cursor-pointer items-center gap-2.5 rounded-md bg-blue-50 px-2.5 py-2",
|
|
1225
1245
|
onClick: () => select(selectedEntry.role),
|
|
1226
1246
|
children: [
|
|
1227
|
-
/* @__PURE__ */ (0,
|
|
1228
|
-
/* @__PURE__ */ (0,
|
|
1229
|
-
/* @__PURE__ */ (0,
|
|
1247
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RoleBadge, { role: selectedEntry.role, size: "sm" }),
|
|
1248
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "flex-1 text-body-xs text-default-secondary", children: selectedEntry.description }),
|
|
1249
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "shrink-0 text-sm font-bold text-blue-600", children: "\u2713" })
|
|
1230
1250
|
]
|
|
1231
1251
|
}
|
|
1232
1252
|
),
|
|
1233
|
-
/* @__PURE__ */ (0,
|
|
1234
|
-
otherOptions.length > 0 && /* @__PURE__ */ (0,
|
|
1235
|
-
/* @__PURE__ */ (0,
|
|
1236
|
-
otherOptions.map((opt) => /* @__PURE__ */ (0,
|
|
1253
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "h-px bg-border-default" }),
|
|
1254
|
+
otherOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
|
|
1255
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "px-2.5 pb-1 pt-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-body-tiny font-semibold uppercase tracking-wide text-default-secondary", children: "Other roles" }) }),
|
|
1256
|
+
otherOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
1237
1257
|
"div",
|
|
1238
1258
|
{
|
|
1239
1259
|
role: "option",
|
|
1240
1260
|
"aria-selected": false,
|
|
1241
|
-
className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-
|
|
1261
|
+
className: "flex cursor-pointer items-center gap-2.5 rounded-md px-2.5 py-2 hover:bg-default-secondary",
|
|
1242
1262
|
onClick: () => select(opt.role),
|
|
1243
1263
|
children: [
|
|
1244
|
-
/* @__PURE__ */ (0,
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1264
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RoleBadge, { role: opt.role, size: "sm" }),
|
|
1265
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-body-xs text-default-secondary", children: opt.description })
|
|
1246
1266
|
]
|
|
1247
1267
|
},
|
|
1248
1268
|
opt.role
|
|
1249
1269
|
))
|
|
1250
1270
|
] }),
|
|
1251
|
-
otherOptions.length === 0 && query && /* @__PURE__ */ (0,
|
|
1271
|
+
otherOptions.length === 0 && query && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("p", { className: "px-2.5 py-2 text-body-xs text-default-secondary", children: [
|
|
1252
1272
|
'No roles match "',
|
|
1253
1273
|
query,
|
|
1254
1274
|
'"'
|
|
@@ -1260,12 +1280,12 @@ function RoleComboBox({ value, onChange, options = ROLE_COMBO_OPTIONS }) {
|
|
|
1260
1280
|
}
|
|
1261
1281
|
|
|
1262
1282
|
// src/index.tsx
|
|
1263
|
-
var
|
|
1283
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1264
1284
|
function Panel({
|
|
1265
1285
|
children,
|
|
1266
1286
|
className
|
|
1267
1287
|
}) {
|
|
1268
|
-
return /* @__PURE__ */ (0,
|
|
1288
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("section", { className: (0, import_clsx21.default)("rounded-3xl border border-white/70 bg-white/90 p-6 shadow-panel backdrop-blur", className), children });
|
|
1269
1289
|
}
|
|
1270
1290
|
function MetricCard({
|
|
1271
1291
|
label,
|
|
@@ -1273,14 +1293,14 @@ function MetricCard({
|
|
|
1273
1293
|
tone = "default"
|
|
1274
1294
|
}) {
|
|
1275
1295
|
const tones = {
|
|
1276
|
-
default: "from-white to-slate-50 text-
|
|
1277
|
-
signal: "from-
|
|
1278
|
-
ember: "from-amber-50 to-orange-50 text-
|
|
1279
|
-
moss: "from-emerald-50 to-lime-50 text-
|
|
1296
|
+
default: "from-white to-slate-50 text-default",
|
|
1297
|
+
signal: "from-brand-tertiary to-cyan-50 text-brand",
|
|
1298
|
+
ember: "from-amber-50 to-orange-50 text-danger",
|
|
1299
|
+
moss: "from-emerald-50 to-lime-50 text-positive"
|
|
1280
1300
|
};
|
|
1281
|
-
return /* @__PURE__ */ (0,
|
|
1282
|
-
/* @__PURE__ */ (0,
|
|
1283
|
-
/* @__PURE__ */ (0,
|
|
1301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Panel, { className: (0, import_clsx21.default)("bg-gradient-to-br", tones[tone]), children: [
|
|
1302
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm uppercase tracking-[0.2em] text-slate-500", children: label }),
|
|
1303
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-3 text-3xl font-semibold", children: value })
|
|
1284
1304
|
] });
|
|
1285
1305
|
}
|
|
1286
1306
|
function SeverityBadge({ severity }) {
|
|
@@ -1290,7 +1310,7 @@ function SeverityBadge({ severity }) {
|
|
|
1290
1310
|
medium: "bg-amber-100 text-amber-700",
|
|
1291
1311
|
low: "bg-slate-100 text-slate-700"
|
|
1292
1312
|
};
|
|
1293
|
-
return /* @__PURE__ */ (0,
|
|
1313
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx21.default)("inline-flex rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide", styles[severity ?? "low"]), children: severity ?? "unknown" });
|
|
1294
1314
|
}
|
|
1295
1315
|
function SentimentBadge({ sentiment }) {
|
|
1296
1316
|
const styles = {
|
|
@@ -1299,22 +1319,23 @@ function SentimentBadge({ sentiment }) {
|
|
|
1299
1319
|
negative: "bg-rose-100 text-rose-700",
|
|
1300
1320
|
concerning: "bg-amber-100 text-amber-700"
|
|
1301
1321
|
};
|
|
1302
|
-
return /* @__PURE__ */ (0,
|
|
1322
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: (0, import_clsx21.default)("inline-flex rounded-full px-3 py-1 text-xs font-semibold capitalize", styles[sentiment ?? "neutral"] ?? styles.neutral), children: sentiment ?? "unknown" });
|
|
1303
1323
|
}
|
|
1304
1324
|
function SectionHeading({
|
|
1305
1325
|
eyebrow,
|
|
1306
1326
|
title,
|
|
1307
1327
|
detail
|
|
1308
1328
|
}) {
|
|
1309
|
-
return /* @__PURE__ */ (0,
|
|
1310
|
-
/* @__PURE__ */ (0,
|
|
1311
|
-
/* @__PURE__ */ (0,
|
|
1312
|
-
detail ? /* @__PURE__ */ (0,
|
|
1329
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
|
|
1330
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs uppercase tracking-[0.25em] text-brand", children: eyebrow }),
|
|
1331
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h2", { className: "mt-2 text-2xl font-semibold text-default", children: title }),
|
|
1332
|
+
detail ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "mt-2 max-w-2xl text-sm text-slate-600", children: detail }) : null
|
|
1313
1333
|
] });
|
|
1314
1334
|
}
|
|
1315
1335
|
// Annotate the CommonJS export names for ESM import in node:
|
|
1316
1336
|
0 && (module.exports = {
|
|
1317
1337
|
Avatar,
|
|
1338
|
+
AvatarBlock,
|
|
1318
1339
|
AvatarGroup,
|
|
1319
1340
|
Button,
|
|
1320
1341
|
ButtonGroup,
|