@mediaradar/design-components 0.18.8 → 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 +230 -118
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +193 -2
- package/dist/index.d.ts +193 -2
- package/dist/index.js +225 -116
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -48,11 +48,13 @@ __export(index_exports, {
|
|
|
48
48
|
NameListModal: () => NameListModal,
|
|
49
49
|
NoResultsEmptyState: () => NoResultsEmptyState,
|
|
50
50
|
PRIMARY_ACTION_CLASS: () => PRIMARY_ACTION_CLASS,
|
|
51
|
+
PageHeader: () => PageHeader,
|
|
51
52
|
Pager: () => Pager,
|
|
52
53
|
PieChartPlaceholder: () => PieChartPlaceholder,
|
|
53
54
|
PublisherBreakdownList: () => PublisherBreakdownList,
|
|
54
55
|
QUIET_ACTION_CLASS: () => QUIET_ACTION_CLASS,
|
|
55
56
|
SearchBar: () => SearchBar,
|
|
57
|
+
SectionHeading: () => SectionHeading,
|
|
56
58
|
SectionRail: () => SectionRail,
|
|
57
59
|
SelectAllVisible: () => SelectAllVisible,
|
|
58
60
|
SelectFilter: () => SelectFilter,
|
|
@@ -62,6 +64,7 @@ __export(index_exports, {
|
|
|
62
64
|
StackedColumnPlaceholder: () => StackedColumnPlaceholder,
|
|
63
65
|
TablePagination: () => TablePagination,
|
|
64
66
|
Tag: () => Tag,
|
|
67
|
+
Toast: () => Toast,
|
|
65
68
|
Toggle: () => Toggle,
|
|
66
69
|
Tooltip: () => Tooltip,
|
|
67
70
|
WorkspaceAvatar: () => WorkspaceAvatar,
|
|
@@ -783,6 +786,7 @@ function DateRangeFilter({
|
|
|
783
786
|
value: controlledValue,
|
|
784
787
|
range: controlledRange,
|
|
785
788
|
align = "left",
|
|
789
|
+
placement = "below",
|
|
786
790
|
onChange,
|
|
787
791
|
onRangeChange,
|
|
788
792
|
showDates = false,
|
|
@@ -867,6 +871,13 @@ function DateRangeFilter({
|
|
|
867
871
|
onRangeChange?.(s, e);
|
|
868
872
|
setOpen(false);
|
|
869
873
|
};
|
|
874
|
+
const popRef = (0, import_react3.useRef)(null);
|
|
875
|
+
const [flipBelow, setFlipBelow] = (0, import_react3.useState)(false);
|
|
876
|
+
(0, import_react3.useLayoutEffect)(() => {
|
|
877
|
+
if (!open || placement !== "above" || !ref.current || !popRef.current) return;
|
|
878
|
+
setFlipBelow(ref.current.getBoundingClientRect().top < popRef.current.offsetHeight + 16);
|
|
879
|
+
}, [open, placement]);
|
|
880
|
+
const above = placement === "above" && !flipBelow;
|
|
870
881
|
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", ref, children: [
|
|
871
882
|
/* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
|
|
872
883
|
"button",
|
|
@@ -890,7 +901,8 @@ function DateRangeFilter({
|
|
|
890
901
|
"div",
|
|
891
902
|
{
|
|
892
903
|
"data-testid": testIdPrefix && `${testIdPrefix}-popover`,
|
|
893
|
-
|
|
904
|
+
ref: popRef,
|
|
905
|
+
className: `absolute z-30 flex overflow-hidden rounded-card border border-border-default bg-surface shadow-overlay ${placement === "right" ? "bottom-0 left-full ml-2" : `${above ? "bottom-full mb-2" : "top-[calc(100%+8px)]"} ${align === "right" ? "right-0" : "left-0"}`}`,
|
|
894
906
|
role: "dialog",
|
|
895
907
|
"aria-label": "Select date range",
|
|
896
908
|
children: [
|
|
@@ -3337,10 +3349,83 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
3337
3349
|
);
|
|
3338
3350
|
}
|
|
3339
3351
|
|
|
3340
|
-
// 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");
|
|
3341
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");
|
|
3342
3427
|
function Tag({ children, className }) {
|
|
3343
|
-
return /* @__PURE__ */ (0,
|
|
3428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
3344
3429
|
"span",
|
|
3345
3430
|
{
|
|
3346
3431
|
className: cn(
|
|
@@ -3359,8 +3444,8 @@ function Tag({ children, className }) {
|
|
|
3359
3444
|
}
|
|
3360
3445
|
|
|
3361
3446
|
// src/TablePagination.tsx
|
|
3362
|
-
var
|
|
3363
|
-
var
|
|
3447
|
+
var import_lucide_react21 = require("lucide-react");
|
|
3448
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
3364
3449
|
function TablePagination({
|
|
3365
3450
|
page,
|
|
3366
3451
|
perPage,
|
|
@@ -3381,10 +3466,10 @@ function TablePagination({
|
|
|
3381
3466
|
btn,
|
|
3382
3467
|
"text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
|
|
3383
3468
|
);
|
|
3384
|
-
return /* @__PURE__ */ (0,
|
|
3385
|
-
/* @__PURE__ */ (0,
|
|
3386
|
-
/* @__PURE__ */ (0,
|
|
3387
|
-
/* @__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)(
|
|
3388
3473
|
"select",
|
|
3389
3474
|
{
|
|
3390
3475
|
value: perPage,
|
|
@@ -3392,11 +3477,11 @@ function TablePagination({
|
|
|
3392
3477
|
"aria-label": "Items per page",
|
|
3393
3478
|
"data-testid": testIdPrefix && `${testIdPrefix}-per-page`,
|
|
3394
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",
|
|
3395
|
-
children: perPageOptions.map((n) => /* @__PURE__ */ (0,
|
|
3480
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("option", { value: n, children: n }, n))
|
|
3396
3481
|
}
|
|
3397
3482
|
),
|
|
3398
|
-
/* @__PURE__ */ (0,
|
|
3399
|
-
|
|
3483
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3484
|
+
import_lucide_react21.ChevronDown,
|
|
3400
3485
|
{
|
|
3401
3486
|
size: 13,
|
|
3402
3487
|
"aria-hidden": "true",
|
|
@@ -3406,8 +3491,8 @@ function TablePagination({
|
|
|
3406
3491
|
] }),
|
|
3407
3492
|
"items per page"
|
|
3408
3493
|
] }),
|
|
3409
|
-
/* @__PURE__ */ (0,
|
|
3410
|
-
/* @__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)(
|
|
3411
3496
|
"button",
|
|
3412
3497
|
{
|
|
3413
3498
|
type: "button",
|
|
@@ -3416,10 +3501,10 @@ function TablePagination({
|
|
|
3416
3501
|
"aria-label": "First page",
|
|
3417
3502
|
"data-testid": testIdPrefix && `${testIdPrefix}-first`,
|
|
3418
3503
|
className: stepBtn,
|
|
3419
|
-
children: /* @__PURE__ */ (0,
|
|
3504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3420
3505
|
}
|
|
3421
3506
|
),
|
|
3422
|
-
/* @__PURE__ */ (0,
|
|
3507
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3423
3508
|
"button",
|
|
3424
3509
|
{
|
|
3425
3510
|
type: "button",
|
|
@@ -3428,11 +3513,11 @@ function TablePagination({
|
|
|
3428
3513
|
"aria-label": "Previous page",
|
|
3429
3514
|
"data-testid": testIdPrefix && `${testIdPrefix}-prev`,
|
|
3430
3515
|
className: stepBtn,
|
|
3431
|
-
children: /* @__PURE__ */ (0,
|
|
3516
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronLeft, { size: 16, "aria-hidden": "true" })
|
|
3432
3517
|
}
|
|
3433
3518
|
),
|
|
3434
3519
|
pageWindow(current, totalPages).map(
|
|
3435
|
-
(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)(
|
|
3436
3521
|
"button",
|
|
3437
3522
|
{
|
|
3438
3523
|
type: "button",
|
|
@@ -3448,7 +3533,7 @@ function TablePagination({
|
|
|
3448
3533
|
p
|
|
3449
3534
|
)
|
|
3450
3535
|
),
|
|
3451
|
-
/* @__PURE__ */ (0,
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3452
3537
|
"button",
|
|
3453
3538
|
{
|
|
3454
3539
|
type: "button",
|
|
@@ -3457,10 +3542,10 @@ function TablePagination({
|
|
|
3457
3542
|
"aria-label": "Next page",
|
|
3458
3543
|
"data-testid": testIdPrefix && `${testIdPrefix}-next`,
|
|
3459
3544
|
className: stepBtn,
|
|
3460
|
-
children: /* @__PURE__ */ (0,
|
|
3545
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronRight, { size: 16, "aria-hidden": "true" })
|
|
3461
3546
|
}
|
|
3462
3547
|
),
|
|
3463
|
-
/* @__PURE__ */ (0,
|
|
3548
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
3464
3549
|
"button",
|
|
3465
3550
|
{
|
|
3466
3551
|
type: "button",
|
|
@@ -3469,11 +3554,11 @@ function TablePagination({
|
|
|
3469
3554
|
"aria-label": "Last page",
|
|
3470
3555
|
"data-testid": testIdPrefix && `${testIdPrefix}-last`,
|
|
3471
3556
|
className: stepBtn,
|
|
3472
|
-
children: /* @__PURE__ */ (0,
|
|
3557
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react21.ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3473
3558
|
}
|
|
3474
3559
|
)
|
|
3475
3560
|
] }),
|
|
3476
|
-
/* @__PURE__ */ (0,
|
|
3561
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
|
|
3477
3562
|
rangeStart.toLocaleString(),
|
|
3478
3563
|
" \u2013 ",
|
|
3479
3564
|
rangeEnd.toLocaleString(),
|
|
@@ -3486,9 +3571,9 @@ function TablePagination({
|
|
|
3486
3571
|
}
|
|
3487
3572
|
|
|
3488
3573
|
// src/DateRangePicker.tsx
|
|
3489
|
-
var
|
|
3490
|
-
var
|
|
3491
|
-
var
|
|
3574
|
+
var import_react16 = require("react");
|
|
3575
|
+
var import_lucide_react22 = require("lucide-react");
|
|
3576
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
3492
3577
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3493
3578
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3494
3579
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3524,7 +3609,7 @@ function spanLabel(label, today) {
|
|
|
3524
3609
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3525
3610
|
}
|
|
3526
3611
|
function MiniSelect({ value, onChange, options }) {
|
|
3527
|
-
return /* @__PURE__ */ (0,
|
|
3612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3528
3613
|
"select",
|
|
3529
3614
|
{
|
|
3530
3615
|
value: String(value),
|
|
@@ -3533,7 +3618,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3533
3618
|
if (opt) onChange(opt.value);
|
|
3534
3619
|
},
|
|
3535
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",
|
|
3536
|
-
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)))
|
|
3537
3622
|
}
|
|
3538
3623
|
);
|
|
3539
3624
|
}
|
|
@@ -3548,19 +3633,19 @@ function DateRangePicker({
|
|
|
3548
3633
|
today,
|
|
3549
3634
|
years
|
|
3550
3635
|
}) {
|
|
3551
|
-
const end = (0,
|
|
3636
|
+
const end = (0, import_react16.useMemo)(() => today ?? startOfToday(), [today]);
|
|
3552
3637
|
const yearOptions = years ?? [3, 2, 1, 0].map((n) => end.getFullYear() - n);
|
|
3553
|
-
const [open, setOpen] = (0,
|
|
3554
|
-
const [value, setValue] = (0,
|
|
3555
|
-
const [draft, setDraft] = (0,
|
|
3556
|
-
const ref = (0,
|
|
3557
|
-
const [fromMo, setFromMo] = (0,
|
|
3558
|
-
const [fromYr, setFromYr] = (0,
|
|
3559
|
-
const [toMo, setToMo] = (0,
|
|
3560
|
-
const [toYr, setToYr] = (0,
|
|
3561
|
-
const [fromQ, setFromQ] = (0,
|
|
3562
|
-
const [toQ, setToQ] = (0,
|
|
3563
|
-
(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)(() => {
|
|
3564
3649
|
const [s, e] = resolveRange(value, end);
|
|
3565
3650
|
onRangeChange?.(s, e);
|
|
3566
3651
|
}, [value]);
|
|
@@ -3568,7 +3653,7 @@ function DateRangePicker({
|
|
|
3568
3653
|
if (!open) setDraft(value);
|
|
3569
3654
|
setOpen((o) => !o);
|
|
3570
3655
|
};
|
|
3571
|
-
(0,
|
|
3656
|
+
(0, import_react16.useEffect)(() => {
|
|
3572
3657
|
if (!open) return;
|
|
3573
3658
|
const onDown = (e) => {
|
|
3574
3659
|
if (ref.current && !ref.current.contains(e.target)) setOpen(false);
|
|
@@ -3594,8 +3679,8 @@ function DateRangePicker({
|
|
|
3594
3679
|
if (showFooter) setDraft(label);
|
|
3595
3680
|
else commit(label);
|
|
3596
3681
|
};
|
|
3597
|
-
return /* @__PURE__ */ (0,
|
|
3598
|
-
/* @__PURE__ */ (0,
|
|
3682
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", ref, children: [
|
|
3683
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
3599
3684
|
"button",
|
|
3600
3685
|
{
|
|
3601
3686
|
type: "button",
|
|
@@ -3604,16 +3689,16 @@ function DateRangePicker({
|
|
|
3604
3689
|
"aria-haspopup": "listbox",
|
|
3605
3690
|
className: chipTriggerClass(),
|
|
3606
3691
|
children: [
|
|
3607
|
-
/* @__PURE__ */ (0,
|
|
3608
|
-
/* @__PURE__ */ (0,
|
|
3609
|
-
/* @__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 })
|
|
3610
3695
|
] }),
|
|
3611
|
-
/* @__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") })
|
|
3612
3697
|
]
|
|
3613
3698
|
}
|
|
3614
3699
|
),
|
|
3615
|
-
open && /* @__PURE__ */ (0,
|
|
3616
|
-
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)(
|
|
3617
3702
|
"button",
|
|
3618
3703
|
{
|
|
3619
3704
|
type: "button",
|
|
@@ -3623,26 +3708,26 @@ function DateRangePicker({
|
|
|
3623
3708
|
},
|
|
3624
3709
|
p
|
|
3625
3710
|
)),
|
|
3626
|
-
/* @__PURE__ */ (0,
|
|
3627
|
-
/* @__PURE__ */ (0,
|
|
3628
|
-
/* @__PURE__ */ (0,
|
|
3629
|
-
/* @__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: [
|
|
3630
3715
|
"From",
|
|
3631
|
-
/* @__PURE__ */ (0,
|
|
3632
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3633
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3634
|
-
/* @__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 })) })
|
|
3635
3720
|
] })
|
|
3636
3721
|
] }),
|
|
3637
|
-
/* @__PURE__ */ (0,
|
|
3722
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3638
3723
|
"To",
|
|
3639
|
-
/* @__PURE__ */ (0,
|
|
3640
|
-
granularity === "month" && /* @__PURE__ */ (0,
|
|
3641
|
-
granularity === "quarter" && /* @__PURE__ */ (0,
|
|
3642
|
-
/* @__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 })) })
|
|
3643
3728
|
] })
|
|
3644
3729
|
] }),
|
|
3645
|
-
/* @__PURE__ */ (0,
|
|
3730
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
3646
3731
|
"button",
|
|
3647
3732
|
{
|
|
3648
3733
|
type: "button",
|
|
@@ -3654,15 +3739,15 @@ function DateRangePicker({
|
|
|
3654
3739
|
)
|
|
3655
3740
|
] })
|
|
3656
3741
|
] }),
|
|
3657
|
-
showFooter && /* @__PURE__ */ (0,
|
|
3742
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3658
3743
|
] })
|
|
3659
3744
|
] });
|
|
3660
3745
|
}
|
|
3661
3746
|
|
|
3662
3747
|
// src/MultiSelectFilter.tsx
|
|
3663
|
-
var
|
|
3664
|
-
var
|
|
3665
|
-
var
|
|
3748
|
+
var import_react17 = require("react");
|
|
3749
|
+
var import_lucide_react23 = require("lucide-react");
|
|
3750
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
3666
3751
|
function MultiSelectFilter({
|
|
3667
3752
|
caption,
|
|
3668
3753
|
options = [],
|
|
@@ -3686,11 +3771,11 @@ function MultiSelectFilter({
|
|
|
3686
3771
|
}) {
|
|
3687
3772
|
const groupLeaves = (g) => g.children.length ? g.children : [{ id: g.id, label: g.label }];
|
|
3688
3773
|
const leafOptions = groups ? groups.flatMap(groupLeaves) : options;
|
|
3689
|
-
const [open, setOpen] = (0,
|
|
3690
|
-
const [q, setQ] = (0,
|
|
3691
|
-
const [draft, setDraft] = (0,
|
|
3692
|
-
const ref = (0,
|
|
3693
|
-
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)(() => {
|
|
3694
3779
|
setOpen(false);
|
|
3695
3780
|
setQ("");
|
|
3696
3781
|
if (showFooter) return;
|
|
@@ -3707,7 +3792,7 @@ function MultiSelectFilter({
|
|
|
3707
3792
|
setOpen(false);
|
|
3708
3793
|
setQ("");
|
|
3709
3794
|
};
|
|
3710
|
-
(0,
|
|
3795
|
+
(0, import_react17.useEffect)(() => {
|
|
3711
3796
|
if (!open) return;
|
|
3712
3797
|
const onKey = (e) => e.key === "Escape" && close();
|
|
3713
3798
|
const onClick = (e) => {
|
|
@@ -3753,8 +3838,8 @@ function MultiSelectFilter({
|
|
|
3753
3838
|
const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
|
|
3754
3839
|
return kids.length ? { ...g, children: kids } : null;
|
|
3755
3840
|
}).filter((g) => g !== null) : [];
|
|
3756
|
-
return /* @__PURE__ */ (0,
|
|
3757
|
-
/* @__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)(
|
|
3758
3843
|
"button",
|
|
3759
3844
|
{
|
|
3760
3845
|
type: "button",
|
|
@@ -3762,9 +3847,9 @@ function MultiSelectFilter({
|
|
|
3762
3847
|
"aria-expanded": open,
|
|
3763
3848
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3764
3849
|
children: [
|
|
3765
|
-
/* @__PURE__ */ (0,
|
|
3766
|
-
/* @__PURE__ */ (0,
|
|
3767
|
-
|
|
3850
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ChipContent, { caption, value, icon }),
|
|
3851
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3852
|
+
import_lucide_react23.ChevronDown,
|
|
3768
3853
|
{
|
|
3769
3854
|
size: 14,
|
|
3770
3855
|
"aria-hidden": "true",
|
|
@@ -3774,7 +3859,7 @@ function MultiSelectFilter({
|
|
|
3774
3859
|
]
|
|
3775
3860
|
}
|
|
3776
3861
|
),
|
|
3777
|
-
open && /* @__PURE__ */ (0,
|
|
3862
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3778
3863
|
"div",
|
|
3779
3864
|
{
|
|
3780
3865
|
className: cn(
|
|
@@ -3785,9 +3870,9 @@ function MultiSelectFilter({
|
|
|
3785
3870
|
role: "dialog",
|
|
3786
3871
|
"aria-label": caption,
|
|
3787
3872
|
children: [
|
|
3788
|
-
searchable && /* @__PURE__ */ (0,
|
|
3789
|
-
/* @__PURE__ */ (0,
|
|
3790
|
-
/* @__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)(
|
|
3791
3876
|
"input",
|
|
3792
3877
|
{
|
|
3793
3878
|
type: "text",
|
|
@@ -3797,37 +3882,37 @@ function MultiSelectFilter({
|
|
|
3797
3882
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3798
3883
|
}
|
|
3799
3884
|
),
|
|
3800
|
-
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 }) })
|
|
3801
3886
|
] }) }),
|
|
3802
|
-
/* @__PURE__ */ (0,
|
|
3887
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3803
3888
|
groups ? visibleGroups.map((g) => {
|
|
3804
3889
|
const state = groupState(g);
|
|
3805
|
-
return /* @__PURE__ */ (0,
|
|
3806
|
-
/* @__PURE__ */ (0,
|
|
3890
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
|
|
3891
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3807
3892
|
"button",
|
|
3808
3893
|
{
|
|
3809
3894
|
type: "button",
|
|
3810
3895
|
onClick: () => toggleGroup(g),
|
|
3811
3896
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3812
3897
|
children: [
|
|
3813
|
-
/* @__PURE__ */ (0,
|
|
3814
|
-
/* @__PURE__ */ (0,
|
|
3815
|
-
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) })
|
|
3816
3901
|
]
|
|
3817
3902
|
}
|
|
3818
3903
|
),
|
|
3819
3904
|
g.children.map((c) => {
|
|
3820
3905
|
const checked = draft.includes(c.id);
|
|
3821
|
-
return /* @__PURE__ */ (0,
|
|
3906
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3822
3907
|
"button",
|
|
3823
3908
|
{
|
|
3824
3909
|
type: "button",
|
|
3825
3910
|
onClick: () => toggle(c.id),
|
|
3826
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",
|
|
3827
3912
|
children: [
|
|
3828
|
-
/* @__PURE__ */ (0,
|
|
3829
|
-
/* @__PURE__ */ (0,
|
|
3830
|
-
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) })
|
|
3831
3916
|
]
|
|
3832
3917
|
},
|
|
3833
3918
|
c.id
|
|
@@ -3836,33 +3921,33 @@ function MultiSelectFilter({
|
|
|
3836
3921
|
] }, g.id);
|
|
3837
3922
|
}) : items.map((o) => {
|
|
3838
3923
|
const checked = draft.includes(o.id);
|
|
3839
|
-
return /* @__PURE__ */ (0,
|
|
3924
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3840
3925
|
"button",
|
|
3841
3926
|
{
|
|
3842
3927
|
type: "button",
|
|
3843
3928
|
onClick: () => toggle(o.id),
|
|
3844
3929
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3845
3930
|
children: [
|
|
3846
|
-
/* @__PURE__ */ (0,
|
|
3931
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
3847
3932
|
"span",
|
|
3848
3933
|
{
|
|
3849
3934
|
className: cn(
|
|
3850
3935
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3851
3936
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3852
3937
|
),
|
|
3853
|
-
children: checked && /* @__PURE__ */ (0,
|
|
3938
|
+
children: checked && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react23.Check, { size: 13, strokeWidth: 3 })
|
|
3854
3939
|
}
|
|
3855
3940
|
),
|
|
3856
|
-
/* @__PURE__ */ (0,
|
|
3857
|
-
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) })
|
|
3858
3943
|
]
|
|
3859
3944
|
},
|
|
3860
3945
|
o.id
|
|
3861
3946
|
);
|
|
3862
3947
|
}),
|
|
3863
|
-
(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." })
|
|
3864
3949
|
] }),
|
|
3865
|
-
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)(
|
|
3866
3951
|
"button",
|
|
3867
3952
|
{
|
|
3868
3953
|
type: "button",
|
|
@@ -3881,7 +3966,7 @@ function MultiSelectFilter({
|
|
|
3881
3966
|
}
|
|
3882
3967
|
function TriCheck({ state }) {
|
|
3883
3968
|
const filled = state !== "none";
|
|
3884
|
-
return /* @__PURE__ */ (0,
|
|
3969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
3885
3970
|
"span",
|
|
3886
3971
|
{
|
|
3887
3972
|
className: cn(
|
|
@@ -3889,14 +3974,14 @@ function TriCheck({ state }) {
|
|
|
3889
3974
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3890
3975
|
),
|
|
3891
3976
|
children: [
|
|
3892
|
-
state === "all" && /* @__PURE__ */ (0,
|
|
3893
|
-
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 })
|
|
3894
3979
|
]
|
|
3895
3980
|
}
|
|
3896
3981
|
);
|
|
3897
3982
|
}
|
|
3898
3983
|
function OptionCount({ n }) {
|
|
3899
|
-
return /* @__PURE__ */ (0,
|
|
3984
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
|
|
3900
3985
|
"(",
|
|
3901
3986
|
n.toLocaleString(),
|
|
3902
3987
|
")"
|
|
@@ -3904,7 +3989,7 @@ function OptionCount({ n }) {
|
|
|
3904
3989
|
}
|
|
3905
3990
|
|
|
3906
3991
|
// src/Toggle.tsx
|
|
3907
|
-
var
|
|
3992
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
3908
3993
|
var SIZES2 = {
|
|
3909
3994
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3910
3995
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
@@ -3912,7 +3997,7 @@ var SIZES2 = {
|
|
|
3912
3997
|
var OFF_TRACK = "color-mix(in srgb, var(--mr-color-border-interactive) 70%, var(--mr-color-text-secondary))";
|
|
3913
3998
|
function Toggle({ checked, onChange, label, size = "md", disabled, className, testIdPrefix }) {
|
|
3914
3999
|
const s = SIZES2[size];
|
|
3915
|
-
return /* @__PURE__ */ (0,
|
|
4000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3916
4001
|
"button",
|
|
3917
4002
|
{
|
|
3918
4003
|
type: "button",
|
|
@@ -3930,7 +4015,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
|
|
|
3930
4015
|
disabled && "cursor-not-allowed opacity-50",
|
|
3931
4016
|
className
|
|
3932
4017
|
),
|
|
3933
|
-
children: /* @__PURE__ */ (0,
|
|
4018
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
3934
4019
|
"span",
|
|
3935
4020
|
{
|
|
3936
4021
|
className: cn(
|
|
@@ -3945,22 +4030,22 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className, te
|
|
|
3945
4030
|
}
|
|
3946
4031
|
|
|
3947
4032
|
// src/AISpark.tsx
|
|
3948
|
-
var
|
|
3949
|
-
var
|
|
3950
|
-
var
|
|
4033
|
+
var import_react18 = require("react");
|
|
4034
|
+
var import_lucide_react24 = require("lucide-react");
|
|
4035
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
3951
4036
|
function AISpark({ size = 16, className }) {
|
|
3952
|
-
const id = (0,
|
|
3953
|
-
return /* @__PURE__ */ (0,
|
|
3954
|
-
/* @__PURE__ */ (0,
|
|
3955
|
-
/* @__PURE__ */ (0,
|
|
3956
|
-
/* @__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]" })
|
|
3957
4042
|
] }) }) }),
|
|
3958
|
-
/* @__PURE__ */ (0,
|
|
4043
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react24.Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3959
4044
|
] });
|
|
3960
4045
|
}
|
|
3961
4046
|
|
|
3962
4047
|
// src/Freshness.tsx
|
|
3963
|
-
var
|
|
4048
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3964
4049
|
var dotColor = {
|
|
3965
4050
|
fresh: "bg-status-success",
|
|
3966
4051
|
recent: "bg-status-warning",
|
|
@@ -3972,7 +4057,7 @@ var srLabel = {
|
|
|
3972
4057
|
stale: "Older than a day"
|
|
3973
4058
|
};
|
|
3974
4059
|
function Freshness({ level }) {
|
|
3975
|
-
return /* @__PURE__ */ (0,
|
|
4060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3976
4061
|
"span",
|
|
3977
4062
|
{
|
|
3978
4063
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3981,6 +4066,30 @@ function Freshness({ level }) {
|
|
|
3981
4066
|
}
|
|
3982
4067
|
);
|
|
3983
4068
|
}
|
|
4069
|
+
|
|
4070
|
+
// src/SectionHeading.tsx
|
|
4071
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
4072
|
+
function SectionHeading({ title, description, actions, as: Tag2 = "h2", id, className }) {
|
|
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 })
|
|
4077
|
+
] }),
|
|
4078
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
|
|
4079
|
+
] });
|
|
4080
|
+
}
|
|
4081
|
+
|
|
4082
|
+
// src/PageHeader.tsx
|
|
4083
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
4084
|
+
function PageHeader({ title, description, actions, className }) {
|
|
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 })
|
|
4089
|
+
] }),
|
|
4090
|
+
actions && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions })
|
|
4091
|
+
] });
|
|
4092
|
+
}
|
|
3984
4093
|
// Annotate the CommonJS export names for ESM import in node:
|
|
3985
4094
|
0 && (module.exports = {
|
|
3986
4095
|
AISpark,
|
|
@@ -4010,11 +4119,13 @@ function Freshness({ level }) {
|
|
|
4010
4119
|
NameListModal,
|
|
4011
4120
|
NoResultsEmptyState,
|
|
4012
4121
|
PRIMARY_ACTION_CLASS,
|
|
4122
|
+
PageHeader,
|
|
4013
4123
|
Pager,
|
|
4014
4124
|
PieChartPlaceholder,
|
|
4015
4125
|
PublisherBreakdownList,
|
|
4016
4126
|
QUIET_ACTION_CLASS,
|
|
4017
4127
|
SearchBar,
|
|
4128
|
+
SectionHeading,
|
|
4018
4129
|
SectionRail,
|
|
4019
4130
|
SelectAllVisible,
|
|
4020
4131
|
SelectFilter,
|
|
@@ -4024,6 +4135,7 @@ function Freshness({ level }) {
|
|
|
4024
4135
|
StackedColumnPlaceholder,
|
|
4025
4136
|
TablePagination,
|
|
4026
4137
|
Tag,
|
|
4138
|
+
Toast,
|
|
4027
4139
|
Toggle,
|
|
4028
4140
|
Tooltip,
|
|
4029
4141
|
WorkspaceAvatar,
|