@mediaradar/design-components 0.19.0 → 0.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +204 -129
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +91 -1
- package/dist/index.d.ts +91 -1
- package/dist/index.js +194 -120
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -64,6 +64,7 @@ __export(index_exports, {
|
|
|
64
64
|
StackedColumnPlaceholder: () => StackedColumnPlaceholder,
|
|
65
65
|
TablePagination: () => TablePagination,
|
|
66
66
|
Tag: () => Tag,
|
|
67
|
+
Toast: () => Toast,
|
|
67
68
|
Toggle: () => Toggle,
|
|
68
69
|
Tooltip: () => Tooltip,
|
|
69
70
|
WorkspaceAvatar: () => WorkspaceAvatar,
|
|
@@ -3348,10 +3349,83 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
3348
3349
|
);
|
|
3349
3350
|
}
|
|
3350
3351
|
|
|
3351
|
-
// src/
|
|
3352
|
+
// src/Toast.tsx
|
|
3353
|
+
var import_react15 = require("react");
|
|
3354
|
+
var import_react_dom6 = require("react-dom");
|
|
3355
|
+
var import_lucide_react20 = require("lucide-react");
|
|
3352
3356
|
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
3357
|
+
var ICON = {
|
|
3358
|
+
neutral: null,
|
|
3359
|
+
success: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react20.Check, { size: 15, className: "shrink-0", "aria-hidden": "true" }),
|
|
3360
|
+
warning: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react20.AlertTriangle, { size: 15, className: "shrink-0", "aria-hidden": "true" })
|
|
3361
|
+
};
|
|
3362
|
+
function Toast({ message, action, onClose, tone = "neutral", duration, className }) {
|
|
3363
|
+
const ms = duration ?? (action ? 1e4 : 5e3);
|
|
3364
|
+
const [paused, setPaused] = (0, import_react15.useState)(false);
|
|
3365
|
+
const closed = (0, import_react15.useRef)(false);
|
|
3366
|
+
(0, import_react15.useEffect)(() => {
|
|
3367
|
+
if (paused) return;
|
|
3368
|
+
const t = window.setTimeout(() => {
|
|
3369
|
+
if (closed.current) return;
|
|
3370
|
+
closed.current = true;
|
|
3371
|
+
onClose();
|
|
3372
|
+
}, ms);
|
|
3373
|
+
return () => window.clearTimeout(t);
|
|
3374
|
+
}, [message, ms, paused]);
|
|
3375
|
+
return (0, import_react_dom6.createPortal)(
|
|
3376
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
3377
|
+
"div",
|
|
3378
|
+
{
|
|
3379
|
+
role: "status",
|
|
3380
|
+
"aria-live": "polite",
|
|
3381
|
+
onMouseEnter: () => setPaused(true),
|
|
3382
|
+
onMouseLeave: () => setPaused(false),
|
|
3383
|
+
onFocusCapture: () => setPaused(true),
|
|
3384
|
+
onBlurCapture: () => setPaused(false),
|
|
3385
|
+
className: cn(
|
|
3386
|
+
"fixed bottom-6 left-1/2 z-toast flex max-w-[92vw] -translate-x-1/2 items-center gap-2.5",
|
|
3387
|
+
"rounded-control bg-inverseSurface py-2.5 pl-4 pr-2.5 text-sm font-medium text-text-inverse shadow-overlay",
|
|
3388
|
+
className
|
|
3389
|
+
),
|
|
3390
|
+
children: [
|
|
3391
|
+
ICON[tone] && // The inverse pair, not text-success / text-warning: those are tuned
|
|
3392
|
+
// for the page, and on the toast's flipped surface amber drops to 2:1.
|
|
3393
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3394
|
+
"span",
|
|
3395
|
+
{
|
|
3396
|
+
className: cn(
|
|
3397
|
+
"flex",
|
|
3398
|
+
tone === "success" ? "text-text-inverseSuccess" : "text-text-inverseWarning"
|
|
3399
|
+
),
|
|
3400
|
+
children: ICON[tone]
|
|
3401
|
+
}
|
|
3402
|
+
),
|
|
3403
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "min-w-0", children: message }),
|
|
3404
|
+
action && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
3405
|
+
"button",
|
|
3406
|
+
{
|
|
3407
|
+
type: "button",
|
|
3408
|
+
onClick: () => {
|
|
3409
|
+
if (!closed.current) {
|
|
3410
|
+
closed.current = true;
|
|
3411
|
+
action.onClick();
|
|
3412
|
+
}
|
|
3413
|
+
},
|
|
3414
|
+
className: "shrink-0 rounded-control px-2.5 py-1 text-sm font-semibold text-text-inverse underline-offset-2 transition-colors duration-(--mr-motion-duration-interactive) ease-interactive hover:bg-text-inverse/15 hover:underline focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
3415
|
+
children: action.label
|
|
3416
|
+
}
|
|
3417
|
+
)
|
|
3418
|
+
]
|
|
3419
|
+
}
|
|
3420
|
+
),
|
|
3421
|
+
document.body
|
|
3422
|
+
);
|
|
3423
|
+
}
|
|
3424
|
+
|
|
3425
|
+
// src/Tag.tsx
|
|
3426
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
3353
3427
|
function Tag({ children, className }) {
|
|
3354
|
-
return /* @__PURE__ */ (0,
|
|
3428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3355
3429
|
"span",
|
|
3356
3430
|
{
|
|
3357
3431
|
className: cn(
|
|
@@ -3370,8 +3444,8 @@ function Tag({ children, className }) {
|
|
|
3370
3444
|
}
|
|
3371
3445
|
|
|
3372
3446
|
// src/TablePagination.tsx
|
|
3373
|
-
var
|
|
3374
|
-
var
|
|
3447
|
+
var import_lucide_react21 = require("lucide-react");
|
|
3448
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3375
3449
|
function TablePagination({
|
|
3376
3450
|
page,
|
|
3377
3451
|
perPage,
|
|
@@ -3392,10 +3466,10 @@ function TablePagination({
|
|
|
3392
3466
|
btn,
|
|
3393
3467
|
"text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
|
|
3394
3468
|
);
|
|
3395
|
-
return /* @__PURE__ */ (0,
|
|
3396
|
-
/* @__PURE__ */ (0,
|
|
3397
|
-
/* @__PURE__ */ (0,
|
|
3398
|
-
/* @__PURE__ */ (0,
|
|
3469
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), "data-testid": testIdPrefix, children: [
|
|
3470
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
|
|
3471
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "relative", children: [
|
|
3472
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3399
3473
|
"select",
|
|
3400
3474
|
{
|
|
3401
3475
|
value: perPage,
|
|
@@ -3403,11 +3477,11 @@ function TablePagination({
|
|
|
3403
3477
|
"aria-label": "Items per page",
|
|
3404
3478
|
"data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
|
|
3405
3479
|
className: "appearance-none rounded-control border border-border-strong bg-input py-1 pl-2.5 pr-7 text-[13px] font-medium text-text-primary focus:outline focus:outline-2 focus:outline-border-focus",
|
|
3406
|
-
children: perPageOptions.map((n) => /* @__PURE__ */ (0,
|
|
3480
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: n, children: n }, n))
|
|
3407
3481
|
}
|
|
3408
3482
|
),
|
|
3409
|
-
/* @__PURE__ */ (0,
|
|
3410
|
-
|
|
3483
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3484
|
+
import_lucide_react21.ChevronDown,
|
|
3411
3485
|
{
|
|
3412
3486
|
size: 13,
|
|
3413
3487
|
"aria-hidden": "true",
|
|
@@ -3417,8 +3491,8 @@ function TablePagination({
|
|
|
3417
3491
|
] }),
|
|
3418
3492
|
"items per page"
|
|
3419
3493
|
] }),
|
|
3420
|
-
/* @__PURE__ */ (0,
|
|
3421
|
-
/* @__PURE__ */ (0,
|
|
3494
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
|
|
3495
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3422
3496
|
"button",
|
|
3423
3497
|
{
|
|
3424
3498
|
type: "button",
|
|
@@ -3427,10 +3501,10 @@ function TablePagination({
|
|
|
3427
3501
|
"aria-label": "First page",
|
|
3428
3502
|
"data-testid": testIdPrefix && `${testIdPrefix}-first`,
|
|
3429
3503
|
className: stepBtn,
|
|
3430
|
-
children: /* @__PURE__ */ (0,
|
|
3504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3431
3505
|
}
|
|
3432
3506
|
),
|
|
3433
|
-
/* @__PURE__ */ (0,
|
|
3507
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3434
3508
|
"button",
|
|
3435
3509
|
{
|
|
3436
3510
|
type: "button",
|
|
@@ -3439,11 +3513,11 @@ function TablePagination({
|
|
|
3439
3513
|
"aria-label": "Previous page",
|
|
3440
3514
|
"data-testid": testIdPrefix && `${testIdPrefix}-prev`,
|
|
3441
3515
|
className: stepBtn,
|
|
3442
|
-
children: /* @__PURE__ */ (0,
|
|
3516
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronLeft, { size: 16, "aria-hidden": "true" })
|
|
3443
3517
|
}
|
|
3444
3518
|
),
|
|
3445
3519
|
pageWindow(current, totalPages).map(
|
|
3446
|
-
(p) => typeof p === "string" ? /* @__PURE__ */ (0,
|
|
3520
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3447
3521
|
"button",
|
|
3448
3522
|
{
|
|
3449
3523
|
type: "button",
|
|
@@ -3459,7 +3533,7 @@ function TablePagination({
|
|
|
3459
3533
|
p
|
|
3460
3534
|
)
|
|
3461
3535
|
),
|
|
3462
|
-
/* @__PURE__ */ (0,
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3463
3537
|
"button",
|
|
3464
3538
|
{
|
|
3465
3539
|
type: "button",
|
|
@@ -3468,10 +3542,10 @@ function TablePagination({
|
|
|
3468
3542
|
"aria-label": "Next page",
|
|
3469
3543
|
"data-testid": testIdPrefix && `${testIdPrefix}-next`,
|
|
3470
3544
|
className: stepBtn,
|
|
3471
|
-
children: /* @__PURE__ */ (0,
|
|
3545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronRight, { size: 16, "aria-hidden": "true" })
|
|
3472
3546
|
}
|
|
3473
3547
|
),
|
|
3474
|
-
/* @__PURE__ */ (0,
|
|
3548
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3475
3549
|
"button",
|
|
3476
3550
|
{
|
|
3477
3551
|
type: "button",
|
|
@@ -3480,11 +3554,11 @@ function TablePagination({
|
|
|
3480
3554
|
"aria-label": "Last page",
|
|
3481
3555
|
"data-testid": testIdPrefix && `${testIdPrefix}-last`,
|
|
3482
3556
|
className: stepBtn,
|
|
3483
|
-
children: /* @__PURE__ */ (0,
|
|
3557
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3484
3558
|
}
|
|
3485
3559
|
)
|
|
3486
3560
|
] }),
|
|
3487
|
-
/* @__PURE__ */ (0,
|
|
3561
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
|
|
3488
3562
|
rangeStart.toLocaleString(),
|
|
3489
3563
|
" \u2013 ",
|
|
3490
3564
|
rangeEnd.toLocaleString(),
|
|
@@ -3497,9 +3571,9 @@ function TablePagination({
|
|
|
3497
3571
|
}
|
|
3498
3572
|
|
|
3499
3573
|
// src/DateRangePicker.tsx
|
|
3500
|
-
var
|
|
3501
|
-
var
|
|
3502
|
-
var
|
|
3574
|
+
var import_react16 = require("react");
|
|
3575
|
+
var import_lucide_react22 = require("lucide-react");
|
|
3576
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3503
3577
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3504
3578
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3505
3579
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3535,7 +3609,7 @@ function spanLabel(label, today) {
|
|
|
3535
3609
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3536
3610
|
}
|
|
3537
3611
|
function MiniSelect({ value, onChange, options }) {
|
|
3538
|
-
return /* @__PURE__ */ (0,
|
|
3612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3539
3613
|
"select",
|
|
3540
3614
|
{
|
|
3541
3615
|
value: String(value),
|
|
@@ -3544,7 +3618,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3544
3618
|
if (opt) onChange(opt.value);
|
|
3545
3619
|
},
|
|
3546
3620
|
className: "rounded-control border border-border-strong bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
|
|
3547
|
-
children: options.map((o) => /* @__PURE__ */ (0,
|
|
3621
|
+
children: options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("option", { value: String(o.value), children: o.label }, String(o.value)))
|
|
3548
3622
|
}
|
|
3549
3623
|
);
|
|
3550
3624
|
}
|
|
@@ -3559,19 +3633,19 @@ function DateRangePicker({
|
|
|
3559
3633
|
today,
|
|
3560
3634
|
years
|
|
3561
3635
|
}) {
|
|
3562
|
-
const end = (0,
|
|
3636
|
+
const end = (0, import_react16.useMemo)(() => today ?? startOfToday(), [today]);
|
|
3563
3637
|
const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
|
|
3564
|
-
const [open, setOpen] = (0,
|
|
3565
|
-
const [value, setValue] = (0,
|
|
3566
|
-
const [draft, setDraft] = (0,
|
|
3567
|
-
const ref = (0,
|
|
3568
|
-
const [fromMo, setFromMo] = (0,
|
|
3569
|
-
const [fromYr, setFromYr] = (0,
|
|
3570
|
-
const [toMo, setToMo] = (0,
|
|
3571
|
-
const [toYr, setToYr] = (0,
|
|
3572
|
-
const [fromQ, setFromQ] = (0,
|
|
3573
|
-
const [toQ, setToQ] = (0,
|
|
3574
|
-
(0,
|
|
3638
|
+
const [open, setOpen] = (0, import_react16.useState)(false);
|
|
3639
|
+
const [value, setValue] = (0, import_react16.useState)(defaultValue);
|
|
3640
|
+
const [draft, setDraft] = (0, import_react16.useState)(defaultValue);
|
|
3641
|
+
const ref = (0, import_react16.useRef)(null);
|
|
3642
|
+
const [fromMo, setFromMo] = (0, import_react16.useState)(end.getMonth());
|
|
3643
|
+
const [fromYr, setFromYr] = (0, import_react16.useState)(end.getFullYear() - 1);
|
|
3644
|
+
const [toMo, setToMo] = (0, import_react16.useState)(end.getMonth());
|
|
3645
|
+
const [toYr, setToYr] = (0, import_react16.useState)(end.getFullYear());
|
|
3646
|
+
const [fromQ, setFromQ] = (0, import_react16.useState)(Math.floor(end.getMonth() / 3));
|
|
3647
|
+
const [toQ, setToQ] = (0, import_react16.useState)(Math.floor(end.getMonth() / 3));
|
|
3648
|
+
(0, import_react16.useEffect)(() => {
|
|
3575
3649
|
const [s, e] = resolveRange(value, end);
|
|
3576
3650
|
onRangeChange?.(s, e);
|
|
3577
3651
|
}, [value]);
|
|
@@ -3579,7 +3653,7 @@ function DateRangePicker({
|
|
|
3579
3653
|
if (!open) setDraft(value);
|
|
3580
3654
|
setOpen((o) => !o);
|
|
3581
3655
|
};
|
|
3582
|
-
(0,
|
|
3656
|
+
(0, import_react16.useEffect)(() => {
|
|
3583
3657
|
if (!open) return;
|
|
3584
3658
|
const onDown = (e) => {
|
|
3585
3659
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
@@ -3605,8 +3679,8 @@ function DateRangePicker({
|
|
|
3605
3679
|
if (showFooter) setDraft(label);
|
|
3606
3680
|
else commit(label);
|
|
3607
3681
|
};
|
|
3608
|
-
return /* @__PURE__ */ (0,
|
|
3609
|
-
/* @__PURE__ */ (0,
|
|
3682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", ref, children: [
|
|
3683
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3610
3684
|
"button",
|
|
3611
3685
|
{
|
|
3612
3686
|
type: "button",
|
|
@@ -3615,16 +3689,16 @@ function DateRangePicker({
|
|
|
3615
3689
|
"aria-haspopup": "listbox",
|
|
3616
3690
|
className: chipTriggerClass(),
|
|
3617
3691
|
children: [
|
|
3618
|
-
/* @__PURE__ */ (0,
|
|
3619
|
-
/* @__PURE__ */ (0,
|
|
3620
|
-
/* @__PURE__ */ (0,
|
|
3692
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3693
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-control-caption text-text-tertiary", children: spanLabel(value, end) }),
|
|
3694
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
3621
3695
|
] }),
|
|
3622
|
-
/* @__PURE__ */ (0,
|
|
3696
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react22.ChevronDown, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
|
|
3623
3697
|
]
|
|
3624
3698
|
}
|
|
3625
3699
|
),
|
|
3626
|
-
open && /* @__PURE__ */ (0,
|
|
3627
|
-
presets.map((p) => /* @__PURE__ */ (0,
|
|
3700
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("absolute top-[calc(100%+8px)] z-30 w-[280px] overflow-hidden rounded-card border border-border-default bg-surface py-1 shadow-overlay", align === "right" ? "right-0" : "left-0"), children: [
|
|
3701
|
+
presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3628
3702
|
"button",
|
|
3629
3703
|
{
|
|
3630
3704
|
type: "button",
|
|
@@ -3634,26 +3708,26 @@ function DateRangePicker({
|
|
|
3634
3708
|
},
|
|
3635
3709
|
p
|
|
3636
3710
|
)),
|
|
3637
|
-
/* @__PURE__ */ (0,
|
|
3638
|
-
/* @__PURE__ */ (0,
|
|
3639
|
-
/* @__PURE__ */ (0,
|
|
3640
|
-
/* @__PURE__ */ (0,
|
|
3711
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
|
|
3712
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
|
|
3713
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "mt-2 flex flex-col gap-2", children: [
|
|
3714
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3641
3715
|
"From",
|
|
3642
|
-
/* @__PURE__ */ (0,
|
|
3643
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3644
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3645
|
-
/* @__PURE__ */ (0,
|
|
3716
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex gap-1", children: [
|
|
3717
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3718
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3719
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3646
3720
|
] })
|
|
3647
3721
|
] }),
|
|
3648
|
-
/* @__PURE__ */ (0,
|
|
3722
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3649
3723
|
"To",
|
|
3650
|
-
/* @__PURE__ */ (0,
|
|
3651
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3652
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3653
|
-
/* @__PURE__ */ (0,
|
|
3724
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex gap-1", children: [
|
|
3725
|
+
granularity === "month" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3726
|
+
granularity === "quarter" && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3727
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3654
3728
|
] })
|
|
3655
3729
|
] }),
|
|
3656
|
-
/* @__PURE__ */ (0,
|
|
3730
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3657
3731
|
"button",
|
|
3658
3732
|
{
|
|
3659
3733
|
type: "button",
|
|
@@ -3665,15 +3739,15 @@ function DateRangePicker({
|
|
|
3665
3739
|
)
|
|
3666
3740
|
] })
|
|
3667
3741
|
] }),
|
|
3668
|
-
showFooter && /* @__PURE__ */ (0,
|
|
3742
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3669
3743
|
] })
|
|
3670
3744
|
] });
|
|
3671
3745
|
}
|
|
3672
3746
|
|
|
3673
3747
|
// src/MultiSelectFilter.tsx
|
|
3674
|
-
var
|
|
3675
|
-
var
|
|
3676
|
-
var
|
|
3748
|
+
var import_react17 = require("react");
|
|
3749
|
+
var import_lucide_react23 = require("lucide-react");
|
|
3750
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3677
3751
|
function MultiSelectFilter({
|
|
3678
3752
|
caption,
|
|
3679
3753
|
options = [],
|
|
@@ -3697,11 +3771,11 @@ function MultiSelectFilter({
|
|
|
3697
3771
|
}) {
|
|
3698
3772
|
const groupLeaves = (g) => g.children.length ? g.children : [{ id: g.id, label: g.label }];
|
|
3699
3773
|
const leafOptions = groups ? groups.flatMap(groupLeaves) : options;
|
|
3700
|
-
const [open, setOpen] = (0,
|
|
3701
|
-
const [q, setQ] = (0,
|
|
3702
|
-
const [draft, setDraft] = (0,
|
|
3703
|
-
const ref = (0,
|
|
3704
|
-
const close = (0,
|
|
3774
|
+
const [open, setOpen] = (0, import_react17.useState)(false);
|
|
3775
|
+
const [q, setQ] = (0, import_react17.useState)("");
|
|
3776
|
+
const [draft, setDraft] = (0, import_react17.useState)(selected);
|
|
3777
|
+
const ref = (0, import_react17.useRef)(null);
|
|
3778
|
+
const close = (0, import_react17.useCallback)(() => {
|
|
3705
3779
|
setOpen(false);
|
|
3706
3780
|
setQ("");
|
|
3707
3781
|
if (showFooter) return;
|
|
@@ -3718,7 +3792,7 @@ function MultiSelectFilter({
|
|
|
3718
3792
|
setOpen(false);
|
|
3719
3793
|
setQ("");
|
|
3720
3794
|
};
|
|
3721
|
-
(0,
|
|
3795
|
+
(0, import_react17.useEffect)(() => {
|
|
3722
3796
|
if (!open) return;
|
|
3723
3797
|
const onKey = (e) => e.key === "Escape" && close();
|
|
3724
3798
|
const onClick = (e) => {
|
|
@@ -3764,8 +3838,8 @@ function MultiSelectFilter({
|
|
|
3764
3838
|
const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
|
|
3765
3839
|
return kids.length ? { ...g, children: kids } : null;
|
|
3766
3840
|
}).filter((g) => g !== null) : [];
|
|
3767
|
-
return /* @__PURE__ */ (0,
|
|
3768
|
-
/* @__PURE__ */ (0,
|
|
3841
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
|
|
3842
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3769
3843
|
"button",
|
|
3770
3844
|
{
|
|
3771
3845
|
type: "button",
|
|
@@ -3773,9 +3847,9 @@ function MultiSelectFilter({
|
|
|
3773
3847
|
"aria-expanded": open,
|
|
3774
3848
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3775
3849
|
children: [
|
|
3776
|
-
/* @__PURE__ */ (0,
|
|
3777
|
-
/* @__PURE__ */ (0,
|
|
3778
|
-
|
|
3850
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChipContent, { caption, value, icon }),
|
|
3851
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3852
|
+
import_lucide_react23.ChevronDown,
|
|
3779
3853
|
{
|
|
3780
3854
|
size: 14,
|
|
3781
3855
|
"aria-hidden": "true",
|
|
@@ -3785,7 +3859,7 @@ function MultiSelectFilter({
|
|
|
3785
3859
|
]
|
|
3786
3860
|
}
|
|
3787
3861
|
),
|
|
3788
|
-
open && /* @__PURE__ */ (0,
|
|
3862
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3789
3863
|
"div",
|
|
3790
3864
|
{
|
|
3791
3865
|
className: cn(
|
|
@@ -3796,9 +3870,9 @@ function MultiSelectFilter({
|
|
|
3796
3870
|
role: "dialog",
|
|
3797
3871
|
"aria-label": caption,
|
|
3798
3872
|
children: [
|
|
3799
|
-
searchable && /* @__PURE__ */ (0,
|
|
3800
|
-
/* @__PURE__ */ (0,
|
|
3801
|
-
/* @__PURE__ */ (0,
|
|
3873
|
+
searchable && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5", children: [
|
|
3874
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Search, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
3875
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3802
3876
|
"input",
|
|
3803
3877
|
{
|
|
3804
3878
|
type: "text",
|
|
@@ -3808,37 +3882,37 @@ function MultiSelectFilter({
|
|
|
3808
3882
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3809
3883
|
}
|
|
3810
3884
|
),
|
|
3811
|
-
q && /* @__PURE__ */ (0,
|
|
3885
|
+
q && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.X, { size: 13 }) })
|
|
3812
3886
|
] }) }),
|
|
3813
|
-
/* @__PURE__ */ (0,
|
|
3887
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3814
3888
|
groups ? visibleGroups.map((g) => {
|
|
3815
3889
|
const state = groupState(g);
|
|
3816
|
-
return /* @__PURE__ */ (0,
|
|
3817
|
-
/* @__PURE__ */ (0,
|
|
3890
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
|
|
3891
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3818
3892
|
"button",
|
|
3819
3893
|
{
|
|
3820
3894
|
type: "button",
|
|
3821
3895
|
onClick: () => toggleGroup(g),
|
|
3822
3896
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3823
3897
|
children: [
|
|
3824
|
-
/* @__PURE__ */ (0,
|
|
3825
|
-
/* @__PURE__ */ (0,
|
|
3826
|
-
counts && /* @__PURE__ */ (0,
|
|
3898
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TriCheck, { state }),
|
|
3899
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
|
|
3900
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionCount, { n: countFor(g.id) })
|
|
3827
3901
|
]
|
|
3828
3902
|
}
|
|
3829
3903
|
),
|
|
3830
3904
|
g.children.map((c) => {
|
|
3831
3905
|
const checked = draft.includes(c.id);
|
|
3832
|
-
return /* @__PURE__ */ (0,
|
|
3906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3833
3907
|
"button",
|
|
3834
3908
|
{
|
|
3835
3909
|
type: "button",
|
|
3836
3910
|
onClick: () => toggle(c.id),
|
|
3837
3911
|
className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
|
|
3838
3912
|
children: [
|
|
3839
|
-
/* @__PURE__ */ (0,
|
|
3840
|
-
/* @__PURE__ */ (0,
|
|
3841
|
-
counts && /* @__PURE__ */ (0,
|
|
3913
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TriCheck, { state: checked ? "all" : "none" }),
|
|
3914
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
|
|
3915
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionCount, { n: countFor(c.id) })
|
|
3842
3916
|
]
|
|
3843
3917
|
},
|
|
3844
3918
|
c.id
|
|
@@ -3847,33 +3921,33 @@ function MultiSelectFilter({
|
|
|
3847
3921
|
] }, g.id);
|
|
3848
3922
|
}) : items.map((o) => {
|
|
3849
3923
|
const checked = draft.includes(o.id);
|
|
3850
|
-
return /* @__PURE__ */ (0,
|
|
3924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3851
3925
|
"button",
|
|
3852
3926
|
{
|
|
3853
3927
|
type: "button",
|
|
3854
3928
|
onClick: () => toggle(o.id),
|
|
3855
3929
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3856
3930
|
children: [
|
|
3857
|
-
/* @__PURE__ */ (0,
|
|
3931
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3858
3932
|
"span",
|
|
3859
3933
|
{
|
|
3860
3934
|
className: cn(
|
|
3861
3935
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3862
3936
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3863
3937
|
),
|
|
3864
|
-
children: checked && /* @__PURE__ */ (0,
|
|
3938
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Check, { size: 13, strokeWidth: 3 })
|
|
3865
3939
|
}
|
|
3866
3940
|
),
|
|
3867
|
-
/* @__PURE__ */ (0,
|
|
3868
|
-
counts && /* @__PURE__ */ (0,
|
|
3941
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
|
|
3942
|
+
counts && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(OptionCount, { n: countFor(o.id) })
|
|
3869
3943
|
]
|
|
3870
3944
|
},
|
|
3871
3945
|
o.id
|
|
3872
3946
|
);
|
|
3873
3947
|
}),
|
|
3874
|
-
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0,
|
|
3948
|
+
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
|
|
3875
3949
|
] }),
|
|
3876
|
-
showFooter ? /* @__PURE__ */ (0,
|
|
3950
|
+
showFooter ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3877
3951
|
"button",
|
|
3878
3952
|
{
|
|
3879
3953
|
type: "button",
|
|
@@ -3892,7 +3966,7 @@ function MultiSelectFilter({
|
|
|
3892
3966
|
}
|
|
3893
3967
|
function TriCheck({ state }) {
|
|
3894
3968
|
const filled = state !== "none";
|
|
3895
|
-
return /* @__PURE__ */ (0,
|
|
3969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3896
3970
|
"span",
|
|
3897
3971
|
{
|
|
3898
3972
|
className: cn(
|
|
@@ -3900,14 +3974,14 @@ function TriCheck({ state }) {
|
|
|
3900
3974
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3901
3975
|
),
|
|
3902
3976
|
children: [
|
|
3903
|
-
state === "all" && /* @__PURE__ */ (0,
|
|
3904
|
-
state === "some" && /* @__PURE__ */ (0,
|
|
3977
|
+
state === "all" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Check, { size: 13, strokeWidth: 3 }),
|
|
3978
|
+
state === "some" && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Minus, { size: 13, strokeWidth: 3 })
|
|
3905
3979
|
]
|
|
3906
3980
|
}
|
|
3907
3981
|
);
|
|
3908
3982
|
}
|
|
3909
3983
|
function OptionCount({ n }) {
|
|
3910
|
-
return /* @__PURE__ */ (0,
|
|
3984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
|
|
3911
3985
|
"(",
|
|
3912
3986
|
n.toLocaleString(),
|
|
3913
3987
|
")"
|
|
@@ -3915,7 +3989,7 @@ function OptionCount({ n }) {
|
|
|
3915
3989
|
}
|
|
3916
3990
|
|
|
3917
3991
|
// src/Toggle.tsx
|
|
3918
|
-
var
|
|
3992
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3919
3993
|
var SIZES2 = {
|
|
3920
3994
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3921
3995
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
@@ -3923,7 +3997,7 @@ var SIZES2 = {
|
|
|
3923
3997
|
var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
|
|
3924
3998
|
function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
|
|
3925
3999
|
const s = SIZES2[size];
|
|
3926
|
-
return /* @__PURE__ */ (0,
|
|
4000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3927
4001
|
"button",
|
|
3928
4002
|
{
|
|
3929
4003
|
type: "button",
|
|
@@ -3941,7 +4015,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
|
|
|
3941
4015
|
disabled && "cursor-not-allowed opacity-50",
|
|
3942
4016
|
className
|
|
3943
4017
|
),
|
|
3944
|
-
children: /* @__PURE__ */ (0,
|
|
4018
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3945
4019
|
"span",
|
|
3946
4020
|
{
|
|
3947
4021
|
className: cn(
|
|
@@ -3956,22 +4030,22 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
|
|
|
3956
4030
|
}
|
|
3957
4031
|
|
|
3958
4032
|
// src/AISpark.tsx
|
|
3959
|
-
var
|
|
3960
|
-
var
|
|
3961
|
-
var
|
|
4033
|
+
var import_react18 = require("react");
|
|
4034
|
+
var import_lucide_react24 = require("lucide-react");
|
|
4035
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3962
4036
|
function AISpark({ size = 16, className }) {
|
|
3963
|
-
const id = (0,
|
|
3964
|
-
return /* @__PURE__ */ (0,
|
|
3965
|
-
/* @__PURE__ */ (0,
|
|
3966
|
-
/* @__PURE__ */ (0,
|
|
3967
|
-
/* @__PURE__ */ (0,
|
|
4037
|
+
const id = (0, import_react18.useId)();
|
|
4038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
4039
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
4040
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
|
|
4041
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
|
|
3968
4042
|
] }) }) }),
|
|
3969
|
-
/* @__PURE__ */ (0,
|
|
4043
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react24.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3970
4044
|
] });
|
|
3971
4045
|
}
|
|
3972
4046
|
|
|
3973
4047
|
// src/Freshness.tsx
|
|
3974
|
-
var
|
|
4048
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3975
4049
|
var dotColor = {
|
|
3976
4050
|
fresh: "bg-status-success",
|
|
3977
4051
|
recent: "bg-status-warning",
|
|
@@ -3983,7 +4057,7 @@ var srLabel = {
|
|
|
3983
4057
|
stale: "Older than a day"
|
|
3984
4058
|
};
|
|
3985
4059
|
function Freshness({ level }) {
|
|
3986
|
-
return /* @__PURE__ */ (0,
|
|
4060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3987
4061
|
"span",
|
|
3988
4062
|
{
|
|
3989
4063
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3994,26 +4068,26 @@ function Freshness({ level }) {
|
|
|
3994
4068
|
}
|
|
3995
4069
|
|
|
3996
4070
|
// src/SectionHeading.tsx
|
|
3997
|
-
var
|
|
4071
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3998
4072
|
function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
|
|
3999
|
-
return /* @__PURE__ */ (0,
|
|
4000
|
-
/* @__PURE__ */ (0,
|
|
4001
|
-
/* @__PURE__ */ (0,
|
|
4002
|
-
description && /* @__PURE__ */ (0,
|
|
4073
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cn("flex flex-wrap items-end justify-between gap-x-4 gap-y-2", className), children: [
|
|
4074
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "min-w-0", children: [
|
|
4075
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tag2, { id, className: "text-base font-semibold text-text-primary", children: title }),
|
|
4076
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "mt-0.5 text-dense text-text-secondary", children: description })
|
|
4003
4077
|
] }),
|
|
4004
|
-
actions && /* @__PURE__ */ (0,
|
|
4078
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
|
|
4005
4079
|
] });
|
|
4006
4080
|
}
|
|
4007
4081
|
|
|
4008
4082
|
// src/PageHeader.tsx
|
|
4009
|
-
var
|
|
4083
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
4010
4084
|
function PageHeader({ title, description, actions, className }) {
|
|
4011
|
-
return /* @__PURE__ */ (0,
|
|
4012
|
-
/* @__PURE__ */ (0,
|
|
4013
|
-
/* @__PURE__ */ (0,
|
|
4014
|
-
description && /* @__PURE__ */ (0,
|
|
4085
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("header", { className: cn("flex flex-wrap items-center justify-between gap-x-6 gap-y-3", className), children: [
|
|
4086
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "min-w-0", children: [
|
|
4087
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("h1", { className: "text-xl font-semibold tracking-tight text-text-primary", children: title }),
|
|
4088
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "mt-0.5 max-w-2xl text-sm text-text-secondary", children: description })
|
|
4015
4089
|
] }),
|
|
4016
|
-
actions && /* @__PURE__ */ (0,
|
|
4090
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
|
|
4017
4091
|
] });
|
|
4018
4092
|
}
|
|
4019
4093
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -4061,6 +4135,7 @@ function PageHeader({ title, description, actions, className }) {
|
|
|
4061
4135
|
StackedColumnPlaceholder,
|
|
4062
4136
|
TablePagination,
|
|
4063
4137
|
Tag,
|
|
4138
|
+
Toast,
|
|
4064
4139
|
Toggle,
|
|
4065
4140
|
Tooltip,
|
|
4066
4141
|
WorkspaceAvatar,
|