@mediaradar/design-components 0.15.0 → 0.16.1
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 +542 -478
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +114 -20
- package/dist/index.d.ts +114 -20
- package/dist/index.js +514 -451
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -479,9 +479,33 @@ function Badge({ tone = "neutral", kind = "label", dot = false, children, classN
|
|
|
479
479
|
);
|
|
480
480
|
}
|
|
481
481
|
|
|
482
|
+
// src/Delta.tsx
|
|
483
|
+
import { ArrowDownRight, ArrowUpRight } from "lucide-react";
|
|
484
|
+
import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
485
|
+
function Delta({ value, suffix = "%", arrow = false, period, className }) {
|
|
486
|
+
const up = value >= 0;
|
|
487
|
+
return /* @__PURE__ */ jsxs5(
|
|
488
|
+
"span",
|
|
489
|
+
{
|
|
490
|
+
className: cn(
|
|
491
|
+
"inline-flex items-center gap-0.5 font-medium tabular-nums",
|
|
492
|
+
up ? "text-text-success" : "text-text-danger",
|
|
493
|
+
className
|
|
494
|
+
),
|
|
495
|
+
children: [
|
|
496
|
+
arrow && (up ? /* @__PURE__ */ jsx5(ArrowUpRight, { size: 13, "aria-hidden": "true" }) : /* @__PURE__ */ jsx5(ArrowDownRight, { size: 13, "aria-hidden": "true" })),
|
|
497
|
+
up ? "+" : "\u2212",
|
|
498
|
+
Math.abs(value).toFixed(1),
|
|
499
|
+
suffix,
|
|
500
|
+
period && /* @__PURE__ */ jsx5("span", { className: "ml-0.5", children: period })
|
|
501
|
+
]
|
|
502
|
+
}
|
|
503
|
+
);
|
|
504
|
+
}
|
|
505
|
+
|
|
482
506
|
// src/CheckBox.tsx
|
|
483
507
|
import { Check as Check2, Minus } from "lucide-react";
|
|
484
|
-
import { jsx as
|
|
508
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
485
509
|
function boxClass(on, disabled) {
|
|
486
510
|
return cn(
|
|
487
511
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
@@ -490,8 +514,8 @@ function boxClass(on, disabled) {
|
|
|
490
514
|
);
|
|
491
515
|
}
|
|
492
516
|
function Glyph({ checked, indeterminate }) {
|
|
493
|
-
if (indeterminate) return /* @__PURE__ */
|
|
494
|
-
return checked ? /* @__PURE__ */
|
|
517
|
+
if (indeterminate) return /* @__PURE__ */ jsx6(Minus, { size: 13, strokeWidth: 3 });
|
|
518
|
+
return checked ? /* @__PURE__ */ jsx6(Check2, { size: 13, strokeWidth: 3 }) : null;
|
|
495
519
|
}
|
|
496
520
|
function CheckBox({
|
|
497
521
|
checked,
|
|
@@ -505,7 +529,7 @@ function CheckBox({
|
|
|
505
529
|
className
|
|
506
530
|
}) {
|
|
507
531
|
const on = checked || !!indeterminate;
|
|
508
|
-
return /* @__PURE__ */
|
|
532
|
+
return /* @__PURE__ */ jsx6(
|
|
509
533
|
"button",
|
|
510
534
|
{
|
|
511
535
|
type: "button",
|
|
@@ -529,18 +553,18 @@ function CheckBox({
|
|
|
529
553
|
disabled && "hover:border-border-interactive",
|
|
530
554
|
className
|
|
531
555
|
),
|
|
532
|
-
children: /* @__PURE__ */
|
|
556
|
+
children: /* @__PURE__ */ jsx6(Glyph, { checked, indeterminate })
|
|
533
557
|
}
|
|
534
558
|
);
|
|
535
559
|
}
|
|
536
560
|
function CheckBoxBox({ checked, indeterminate, disabled, className }) {
|
|
537
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ jsx6("span", { "aria-hidden": "true", className: cn(boxClass(checked || !!indeterminate, disabled), className), children: /* @__PURE__ */ jsx6(Glyph, { checked, indeterminate }) });
|
|
538
562
|
}
|
|
539
563
|
|
|
540
564
|
// src/DateRangeFilter.tsx
|
|
541
565
|
import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef3, useState as useState3 } from "react";
|
|
542
566
|
import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight } from "lucide-react";
|
|
543
|
-
import { jsx as
|
|
567
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
544
568
|
var DEFAULT_SHORTCUTS = [
|
|
545
569
|
"Year to date",
|
|
546
570
|
"Rolling 3 months",
|
|
@@ -746,8 +770,8 @@ function DateRangeFilter({
|
|
|
746
770
|
onRangeChange?.(s, e);
|
|
747
771
|
setOpen(false);
|
|
748
772
|
};
|
|
749
|
-
return /* @__PURE__ */
|
|
750
|
-
/* @__PURE__ */
|
|
773
|
+
return /* @__PURE__ */ jsxs6("div", { className: "relative", ref, children: [
|
|
774
|
+
/* @__PURE__ */ jsxs6(
|
|
751
775
|
"button",
|
|
752
776
|
{
|
|
753
777
|
type: "button",
|
|
@@ -756,16 +780,16 @@ function DateRangeFilter({
|
|
|
756
780
|
"aria-expanded": open,
|
|
757
781
|
className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
758
782
|
children: [
|
|
759
|
-
icon && /* @__PURE__ */
|
|
760
|
-
/* @__PURE__ */
|
|
761
|
-
/* @__PURE__ */
|
|
762
|
-
/* @__PURE__ */
|
|
783
|
+
icon && /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
784
|
+
/* @__PURE__ */ jsxs6("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
785
|
+
/* @__PURE__ */ jsx7("span", { className: showDates ? "text-[11px] text-text-tertiary" : "text-[10px] uppercase tracking-wide text-text-tertiary", children: showDates ? displayDatesLine : caption }),
|
|
786
|
+
/* @__PURE__ */ jsx7("span", { className: "text-[12px] font-medium text-text-primary", children: displayValue })
|
|
763
787
|
] }),
|
|
764
|
-
/* @__PURE__ */
|
|
788
|
+
/* @__PURE__ */ jsx7(ChevronDown2, { size: 14, "aria-hidden": "true", className: `shrink-0 text-text-secondary transition-transform ${open ? "rotate-180" : ""}` })
|
|
765
789
|
]
|
|
766
790
|
}
|
|
767
791
|
),
|
|
768
|
-
open && /* @__PURE__ */
|
|
792
|
+
open && /* @__PURE__ */ jsxs6(
|
|
769
793
|
"div",
|
|
770
794
|
{
|
|
771
795
|
"data-testid": testIdPrefix && `${testIdPrefix}-popover`,
|
|
@@ -773,7 +797,7 @@ function DateRangeFilter({
|
|
|
773
797
|
role: "dialog",
|
|
774
798
|
"aria-label": "Select date range",
|
|
775
799
|
children: [
|
|
776
|
-
/* @__PURE__ */
|
|
800
|
+
/* @__PURE__ */ jsx7("div", { className: "flex w-44 shrink-0 flex-col gap-0.5 border-r border-border-default p-2", children: SHORTCUTS.map((s) => /* @__PURE__ */ jsx7(
|
|
777
801
|
"button",
|
|
778
802
|
{
|
|
779
803
|
type: "button",
|
|
@@ -784,28 +808,28 @@ function DateRangeFilter({
|
|
|
784
808
|
},
|
|
785
809
|
s
|
|
786
810
|
)) }),
|
|
787
|
-
/* @__PURE__ */
|
|
788
|
-
/* @__PURE__ */
|
|
789
|
-
/* @__PURE__ */
|
|
790
|
-
/* @__PURE__ */
|
|
791
|
-
/* @__PURE__ */
|
|
811
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex flex-col p-4", children: [
|
|
812
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex items-end gap-3", children: [
|
|
813
|
+
/* @__PURE__ */ jsx7(Field, { label: "Start Date", value: start ? fmt(start) : "\u2014" }),
|
|
814
|
+
/* @__PURE__ */ jsx7("span", { className: "pb-2.5 text-text-tertiary", children: "\u2014" }),
|
|
815
|
+
/* @__PURE__ */ jsx7(Field, { label: "End Date", value: end ? fmt(end) : start ? fmt(start) : "\u2014" })
|
|
792
816
|
] }),
|
|
793
|
-
/* @__PURE__ */
|
|
794
|
-
/* @__PURE__ */
|
|
817
|
+
/* @__PURE__ */ jsx7("div", { className: "my-4 border-t border-border-default" }),
|
|
818
|
+
/* @__PURE__ */ jsx7("div", { className: "flex gap-8", children: [0, 1].map((offset) => {
|
|
795
819
|
const m = addMonths(leftMonth, offset);
|
|
796
820
|
const grid = monthGrid(m.getFullYear(), m.getMonth());
|
|
797
|
-
return /* @__PURE__ */
|
|
798
|
-
/* @__PURE__ */
|
|
799
|
-
offset === 0 ? /* @__PURE__ */
|
|
800
|
-
/* @__PURE__ */
|
|
821
|
+
return /* @__PURE__ */ jsxs6("div", { className: "w-[252px]", children: [
|
|
822
|
+
/* @__PURE__ */ jsxs6("div", { className: "mb-2 flex items-center justify-between", children: [
|
|
823
|
+
offset === 0 ? /* @__PURE__ */ jsx7(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, -1)), "aria-label": "Previous month", children: /* @__PURE__ */ jsx7(ChevronLeft, { size: 16 }) }) : /* @__PURE__ */ jsx7("span", { className: "h-7 w-7" }),
|
|
824
|
+
/* @__PURE__ */ jsxs6("span", { className: "text-[15px] font-semibold text-text-primary", children: [
|
|
801
825
|
MONTHS[m.getMonth()],
|
|
802
826
|
" ",
|
|
803
827
|
m.getFullYear()
|
|
804
828
|
] }),
|
|
805
|
-
offset === 1 ? /* @__PURE__ */
|
|
829
|
+
offset === 1 ? /* @__PURE__ */ jsx7(NavBtn, { onClick: () => setLeftMonth(addMonths(leftMonth, 1)), "aria-label": "Next month", children: /* @__PURE__ */ jsx7(ChevronRight, { size: 16 }) }) : /* @__PURE__ */ jsx7("span", { className: "h-7 w-7" })
|
|
806
830
|
] }),
|
|
807
|
-
/* @__PURE__ */
|
|
808
|
-
WEEKDAYS.map((w) => /* @__PURE__ */
|
|
831
|
+
/* @__PURE__ */ jsxs6("div", { className: "grid grid-cols-7", children: [
|
|
832
|
+
WEEKDAYS.map((w) => /* @__PURE__ */ jsx7("div", { className: "flex h-8 items-center justify-center text-[12px] font-semibold text-text-secondary", children: w }, w)),
|
|
809
833
|
grid.map((d, i) => {
|
|
810
834
|
const inMonth = d.getMonth() === m.getMonth();
|
|
811
835
|
const hasRange = !!(start && end);
|
|
@@ -820,9 +844,9 @@ function DateRangeFilter({
|
|
|
820
844
|
else if (end && isEnd) band = "left-0 right-1/2";
|
|
821
845
|
else band = "left-0 right-0";
|
|
822
846
|
}
|
|
823
|
-
return /* @__PURE__ */
|
|
824
|
-
band && /* @__PURE__ */
|
|
825
|
-
/* @__PURE__ */
|
|
847
|
+
return /* @__PURE__ */ jsxs6("button", { type: "button", onClick: () => pickDay(d), className: "relative flex h-9 items-center justify-center", children: [
|
|
848
|
+
band && /* @__PURE__ */ jsx7("span", { className: `absolute inset-y-[3px] bg-ai-tint ${band}`, "aria-hidden": "true" }),
|
|
849
|
+
/* @__PURE__ */ jsx7(
|
|
826
850
|
"span",
|
|
827
851
|
{
|
|
828
852
|
className: `relative z-10 flex h-8 w-8 items-center justify-center rounded-full text-[13px] tabular-nums ${endpoint ? "bg-brand-primaryAction font-semibold text-white" : inMonth ? "text-text-primary hover:bg-subtle" : "text-text-tertiary"}`,
|
|
@@ -834,9 +858,9 @@ function DateRangeFilter({
|
|
|
834
858
|
] })
|
|
835
859
|
] }, offset);
|
|
836
860
|
}) }),
|
|
837
|
-
/* @__PURE__ */
|
|
838
|
-
/* @__PURE__ */
|
|
839
|
-
/* @__PURE__ */
|
|
861
|
+
/* @__PURE__ */ jsxs6("div", { className: "mt-4 flex justify-end gap-2", children: [
|
|
862
|
+
/* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-cancel`, onClick: () => setOpen(false), className: "rounded-control border border-border-default bg-surface px-5 py-2 text-[13px] font-semibold text-text-primary transition-colors hover:bg-subtle", children: "Cancel" }),
|
|
863
|
+
/* @__PURE__ */ jsx7("button", { type: "button", "data-testid": testIdPrefix && `${testIdPrefix}-apply`, onClick: apply, className: "rounded-control bg-brand-primaryAction px-5 py-2 text-[13px] font-semibold text-white transition-[filter] hover:brightness-110", children: "Apply" })
|
|
840
864
|
] })
|
|
841
865
|
] })
|
|
842
866
|
]
|
|
@@ -845,19 +869,19 @@ function DateRangeFilter({
|
|
|
845
869
|
] });
|
|
846
870
|
}
|
|
847
871
|
function Field({ label, value }) {
|
|
848
|
-
return /* @__PURE__ */
|
|
849
|
-
/* @__PURE__ */
|
|
850
|
-
/* @__PURE__ */
|
|
872
|
+
return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1.5", children: [
|
|
873
|
+
/* @__PURE__ */ jsx7("span", { className: "text-[12px] font-medium text-text-secondary", children: label }),
|
|
874
|
+
/* @__PURE__ */ jsx7("div", { className: "flex h-10 min-w-[140px] items-center rounded-control border border-border-default bg-input px-3 text-[14px] font-medium text-text-primary", children: value })
|
|
851
875
|
] });
|
|
852
876
|
}
|
|
853
877
|
function NavBtn({ children, onClick, ...rest }) {
|
|
854
|
-
return /* @__PURE__ */
|
|
878
|
+
return /* @__PURE__ */ jsx7("button", { type: "button", onClick, className: "flex h-7 w-7 items-center justify-center rounded-full text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary", ...rest, children });
|
|
855
879
|
}
|
|
856
880
|
|
|
857
881
|
// src/SearchBar.tsx
|
|
858
882
|
import { useEffect as useEffect4, useRef as useRef4, useState as useState4 } from "react";
|
|
859
883
|
import { AlertCircle, Check as Check3, ChevronDown as ChevronDown3, Search as Search3 } from "lucide-react";
|
|
860
|
-
import { Fragment as Fragment3, jsx as
|
|
884
|
+
import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
861
885
|
var DEFAULT_SEARCH_MATCH = { mode: "anyWord", wordJoin: "Or" };
|
|
862
886
|
var MODE_LABEL = {
|
|
863
887
|
anyWord: "Any Word",
|
|
@@ -894,7 +918,7 @@ function SearchBar({
|
|
|
894
918
|
};
|
|
895
919
|
}, [open]);
|
|
896
920
|
const showMatch = variant === "filterable" && matchValue;
|
|
897
|
-
return /* @__PURE__ */
|
|
921
|
+
return /* @__PURE__ */ jsxs7(
|
|
898
922
|
"div",
|
|
899
923
|
{
|
|
900
924
|
className: cx2(
|
|
@@ -902,9 +926,9 @@ function SearchBar({
|
|
|
902
926
|
className
|
|
903
927
|
),
|
|
904
928
|
children: [
|
|
905
|
-
/* @__PURE__ */
|
|
906
|
-
/* @__PURE__ */
|
|
907
|
-
/* @__PURE__ */
|
|
929
|
+
/* @__PURE__ */ jsxs7("label", { className: "flex min-w-0 flex-1 items-center gap-2 px-2.5", children: [
|
|
930
|
+
/* @__PURE__ */ jsx8(Search3, { size: 15, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
931
|
+
/* @__PURE__ */ jsx8(
|
|
908
932
|
"input",
|
|
909
933
|
{
|
|
910
934
|
type: "text",
|
|
@@ -928,8 +952,8 @@ function SearchBar({
|
|
|
928
952
|
// token package (insights-studio-prototype's own src/index.css;
|
|
929
953
|
// mr-clientapps' own tailwind.config.ts `colors.border.DEFAULT`) --
|
|
930
954
|
// an alias this shared component can't rely on existing.
|
|
931
|
-
/* @__PURE__ */
|
|
932
|
-
/* @__PURE__ */
|
|
955
|
+
/* @__PURE__ */ jsxs7("div", { className: "relative shrink-0 border-l border-border-default", ref, children: [
|
|
956
|
+
/* @__PURE__ */ jsxs7(
|
|
933
957
|
"button",
|
|
934
958
|
{
|
|
935
959
|
type: "button",
|
|
@@ -940,7 +964,7 @@ function SearchBar({
|
|
|
940
964
|
className: "flex h-full items-center gap-1 px-2.5 text-[13px] font-medium text-text-primary transition-colors hover:bg-subtle",
|
|
941
965
|
children: [
|
|
942
966
|
matchValue.mode === "anyWord" ? `${MODE_LABEL.anyWord} (${matchValue.wordJoin})` : MODE_LABEL[matchValue.mode],
|
|
943
|
-
/* @__PURE__ */
|
|
967
|
+
/* @__PURE__ */ jsx8(
|
|
944
968
|
ChevronDown3,
|
|
945
969
|
{
|
|
946
970
|
size: 14,
|
|
@@ -951,25 +975,25 @@ function SearchBar({
|
|
|
951
975
|
]
|
|
952
976
|
}
|
|
953
977
|
),
|
|
954
|
-
open && /* @__PURE__ */
|
|
978
|
+
open && /* @__PURE__ */ jsx8(
|
|
955
979
|
"div",
|
|
956
980
|
{
|
|
957
981
|
role: "dialog",
|
|
958
982
|
"aria-label": "Search match type",
|
|
959
983
|
"data-testid": testIdPrefix && `${testIdPrefix}-mode-popover`,
|
|
960
984
|
className: "absolute right-0 top-[calc(100%+8px)] z-50 w-[400px] rounded-card border border-border-default bg-surface p-3 shadow-overlay",
|
|
961
|
-
children: /* @__PURE__ */
|
|
962
|
-
/* @__PURE__ */
|
|
985
|
+
children: /* @__PURE__ */ jsxs7("div", { role: "radiogroup", "aria-label": "Search match type", className: "flex flex-col", children: [
|
|
986
|
+
/* @__PURE__ */ jsx8(
|
|
963
987
|
ModeRow,
|
|
964
988
|
{
|
|
965
989
|
title: "Any Word Text Search",
|
|
966
990
|
selected: matchValue.mode === "anyWord",
|
|
967
991
|
onSelect: () => onMatchChange?.({ mode: "anyWord", wordJoin: matchValue.wordJoin }),
|
|
968
992
|
testId: testIdPrefix && `${testIdPrefix}-mode-anyWord`,
|
|
969
|
-
description: /* @__PURE__ */
|
|
993
|
+
description: /* @__PURE__ */ jsx8(Fragment3, { children: "Find creatives that contain your keyword(s) using an \u201COr\u201D (match any) or \u201CAnd\u201D (match all) conditional in any order." }),
|
|
970
994
|
infoText: "The Or/And choice applies only when Any Word is the active search mode.",
|
|
971
|
-
extra: /* @__PURE__ */
|
|
972
|
-
/* @__PURE__ */
|
|
995
|
+
extra: /* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-3", children: [
|
|
996
|
+
/* @__PURE__ */ jsx8(
|
|
973
997
|
RadioOption,
|
|
974
998
|
{
|
|
975
999
|
label: "Or",
|
|
@@ -978,7 +1002,7 @@ function SearchBar({
|
|
|
978
1002
|
testId: testIdPrefix && `${testIdPrefix}-word-join-or`
|
|
979
1003
|
}
|
|
980
1004
|
),
|
|
981
|
-
/* @__PURE__ */
|
|
1005
|
+
/* @__PURE__ */ jsx8(
|
|
982
1006
|
RadioOption,
|
|
983
1007
|
{
|
|
984
1008
|
label: "And",
|
|
@@ -990,8 +1014,8 @@ function SearchBar({
|
|
|
990
1014
|
] })
|
|
991
1015
|
}
|
|
992
1016
|
),
|
|
993
|
-
/* @__PURE__ */
|
|
994
|
-
/* @__PURE__ */
|
|
1017
|
+
/* @__PURE__ */ jsx8(Divider, {}),
|
|
1018
|
+
/* @__PURE__ */ jsx8(
|
|
995
1019
|
ModeRow,
|
|
996
1020
|
{
|
|
997
1021
|
title: "Exact Match Text Search",
|
|
@@ -1002,8 +1026,8 @@ function SearchBar({
|
|
|
1002
1026
|
infoText: "Keywords are matched as a single contiguous phrase, in the order you typed them."
|
|
1003
1027
|
}
|
|
1004
1028
|
),
|
|
1005
|
-
/* @__PURE__ */
|
|
1006
|
-
/* @__PURE__ */
|
|
1029
|
+
/* @__PURE__ */ jsx8(Divider, {}),
|
|
1030
|
+
/* @__PURE__ */ jsx8(
|
|
1007
1031
|
ModeRow,
|
|
1008
1032
|
{
|
|
1009
1033
|
title: "Contextual Search",
|
|
@@ -1015,8 +1039,8 @@ function SearchBar({
|
|
|
1015
1039
|
infoText: "Uses semantic matching, so results can include related terms even when the exact keyword isn't present."
|
|
1016
1040
|
}
|
|
1017
1041
|
),
|
|
1018
|
-
/* @__PURE__ */
|
|
1019
|
-
/* @__PURE__ */
|
|
1042
|
+
/* @__PURE__ */ jsx8(Divider, {}),
|
|
1043
|
+
/* @__PURE__ */ jsx8(
|
|
1020
1044
|
ModeRow,
|
|
1021
1045
|
{
|
|
1022
1046
|
title: "Ad Code Search",
|
|
@@ -1036,7 +1060,7 @@ function SearchBar({
|
|
|
1036
1060
|
);
|
|
1037
1061
|
}
|
|
1038
1062
|
function Divider() {
|
|
1039
|
-
return /* @__PURE__ */
|
|
1063
|
+
return /* @__PURE__ */ jsx8("div", { className: "my-2.5 border-t border-border-default", "aria-hidden": "true" });
|
|
1040
1064
|
}
|
|
1041
1065
|
function ModeRow({
|
|
1042
1066
|
title,
|
|
@@ -1048,7 +1072,7 @@ function ModeRow({
|
|
|
1048
1072
|
onSelect,
|
|
1049
1073
|
testId
|
|
1050
1074
|
}) {
|
|
1051
|
-
return /* @__PURE__ */
|
|
1075
|
+
return /* @__PURE__ */ jsxs7(
|
|
1052
1076
|
"div",
|
|
1053
1077
|
{
|
|
1054
1078
|
role: "radio",
|
|
@@ -1064,18 +1088,18 @@ function ModeRow({
|
|
|
1064
1088
|
},
|
|
1065
1089
|
className: "flex cursor-pointer flex-col items-stretch gap-1 rounded-control p-1.5 text-left transition-colors hover:bg-subtle focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
1066
1090
|
children: [
|
|
1067
|
-
/* @__PURE__ */
|
|
1068
|
-
/* @__PURE__ */
|
|
1069
|
-
/* @__PURE__ */
|
|
1070
|
-
/* @__PURE__ */
|
|
1071
|
-
/* @__PURE__ */
|
|
1091
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between gap-2", children: [
|
|
1092
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-3", children: [
|
|
1093
|
+
/* @__PURE__ */ jsxs7("span", { className: "flex items-center gap-1", children: [
|
|
1094
|
+
/* @__PURE__ */ jsx8("span", { className: "text-[14px] font-semibold text-text-primary", children: title }),
|
|
1095
|
+
/* @__PURE__ */ jsx8(RowInfoTip, { text: infoText })
|
|
1072
1096
|
] }),
|
|
1073
|
-
badge && /* @__PURE__ */
|
|
1097
|
+
badge && /* @__PURE__ */ jsx8("span", { className: "rounded-full bg-subtle px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-text-secondary", children: badge }),
|
|
1074
1098
|
extra
|
|
1075
1099
|
] }),
|
|
1076
|
-
selected && /* @__PURE__ */
|
|
1100
|
+
selected && /* @__PURE__ */ jsx8(Check3, { size: 16, strokeWidth: 2.5, "aria-hidden": "true", className: "shrink-0 text-brand-primaryAction" })
|
|
1077
1101
|
] }),
|
|
1078
|
-
/* @__PURE__ */
|
|
1102
|
+
/* @__PURE__ */ jsx8("span", { className: "block text-[12.5px] leading-snug text-text-secondary", children: description })
|
|
1079
1103
|
]
|
|
1080
1104
|
}
|
|
1081
1105
|
);
|
|
@@ -1086,7 +1110,7 @@ function RadioOption({
|
|
|
1086
1110
|
onSelect,
|
|
1087
1111
|
testId
|
|
1088
1112
|
}) {
|
|
1089
|
-
return /* @__PURE__ */
|
|
1113
|
+
return /* @__PURE__ */ jsxs7(
|
|
1090
1114
|
"button",
|
|
1091
1115
|
{
|
|
1092
1116
|
type: "button",
|
|
@@ -1099,14 +1123,14 @@ function RadioOption({
|
|
|
1099
1123
|
"aria-checked": checked,
|
|
1100
1124
|
className: "flex items-center gap-1.5 text-[13px] font-medium text-text-primary",
|
|
1101
1125
|
children: [
|
|
1102
|
-
/* @__PURE__ */
|
|
1126
|
+
/* @__PURE__ */ jsx8(
|
|
1103
1127
|
"span",
|
|
1104
1128
|
{
|
|
1105
1129
|
className: cx2(
|
|
1106
1130
|
"flex h-4 w-4 shrink-0 items-center justify-center rounded-full border-2 transition-colors",
|
|
1107
1131
|
checked ? "border-brand-primaryAction" : "border-border-interactive"
|
|
1108
1132
|
),
|
|
1109
|
-
children: checked && /* @__PURE__ */
|
|
1133
|
+
children: checked && /* @__PURE__ */ jsx8("span", { className: "h-2 w-2 rounded-full bg-brand-primaryAction" })
|
|
1110
1134
|
}
|
|
1111
1135
|
),
|
|
1112
1136
|
label
|
|
@@ -1125,8 +1149,8 @@ function RowInfoTip({ text }) {
|
|
|
1125
1149
|
window.addEventListener("mousedown", onDown);
|
|
1126
1150
|
return () => window.removeEventListener("mousedown", onDown);
|
|
1127
1151
|
}, [open]);
|
|
1128
|
-
return /* @__PURE__ */
|
|
1129
|
-
/* @__PURE__ */
|
|
1152
|
+
return /* @__PURE__ */ jsxs7("span", { className: "relative inline-flex shrink-0 items-center", ref, children: [
|
|
1153
|
+
/* @__PURE__ */ jsx8(
|
|
1130
1154
|
"button",
|
|
1131
1155
|
{
|
|
1132
1156
|
type: "button",
|
|
@@ -1137,10 +1161,10 @@ function RowInfoTip({ text }) {
|
|
|
1137
1161
|
"aria-label": "More information",
|
|
1138
1162
|
"aria-expanded": open,
|
|
1139
1163
|
className: "inline-flex text-text-tertiary transition-colors hover:text-text-primary",
|
|
1140
|
-
children: /* @__PURE__ */
|
|
1164
|
+
children: /* @__PURE__ */ jsx8(AlertCircle, { size: 13, "aria-hidden": "true" })
|
|
1141
1165
|
}
|
|
1142
1166
|
),
|
|
1143
|
-
open && /* @__PURE__ */
|
|
1167
|
+
open && /* @__PURE__ */ jsx8(
|
|
1144
1168
|
"span",
|
|
1145
1169
|
{
|
|
1146
1170
|
role: "tooltip",
|
|
@@ -1154,7 +1178,7 @@ function RowInfoTip({ text }) {
|
|
|
1154
1178
|
// src/SectionRail.tsx
|
|
1155
1179
|
import { useRef as useRef5 } from "react";
|
|
1156
1180
|
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
|
|
1157
|
-
import { jsx as
|
|
1181
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
1158
1182
|
function SectionRail({
|
|
1159
1183
|
title,
|
|
1160
1184
|
titleSerif,
|
|
@@ -1167,20 +1191,20 @@ function SectionRail({
|
|
|
1167
1191
|
const scroll = (direction) => {
|
|
1168
1192
|
scrollRef.current?.scrollBy({ left: direction * 320, behavior: "smooth" });
|
|
1169
1193
|
};
|
|
1170
|
-
return /* @__PURE__ */
|
|
1171
|
-
/* @__PURE__ */
|
|
1172
|
-
/* @__PURE__ */
|
|
1173
|
-
/* @__PURE__ */
|
|
1194
|
+
return /* @__PURE__ */ jsxs8("section", { className: "flex flex-col gap-4", children: [
|
|
1195
|
+
/* @__PURE__ */ jsxs8("header", { className: "flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between", children: [
|
|
1196
|
+
/* @__PURE__ */ jsxs8("div", { children: [
|
|
1197
|
+
/* @__PURE__ */ jsx9(
|
|
1174
1198
|
"h2",
|
|
1175
1199
|
{
|
|
1176
1200
|
className: titleSerif ? "font-serif text-2xl font-normal tracking-tight text-text-primary sm:text-[28px]" : "text-xl font-medium tracking-tight text-text-primary sm:text-2xl",
|
|
1177
1201
|
children: title
|
|
1178
1202
|
}
|
|
1179
1203
|
),
|
|
1180
|
-
/* @__PURE__ */
|
|
1204
|
+
/* @__PURE__ */ jsx9("p", { className: "mt-1 text-sm text-text-secondary", children: subtitle })
|
|
1181
1205
|
] }),
|
|
1182
|
-
/* @__PURE__ */
|
|
1183
|
-
viewAllLabel && viewAllHref && /* @__PURE__ */
|
|
1206
|
+
/* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
1207
|
+
viewAllLabel && viewAllHref && /* @__PURE__ */ jsxs8(
|
|
1184
1208
|
"a",
|
|
1185
1209
|
{
|
|
1186
1210
|
href: viewAllHref,
|
|
@@ -1191,29 +1215,29 @@ function SectionRail({
|
|
|
1191
1215
|
]
|
|
1192
1216
|
}
|
|
1193
1217
|
),
|
|
1194
|
-
/* @__PURE__ */
|
|
1218
|
+
/* @__PURE__ */ jsx9(
|
|
1195
1219
|
"button",
|
|
1196
1220
|
{
|
|
1197
1221
|
type: "button",
|
|
1198
1222
|
onClick: () => scroll(-1),
|
|
1199
1223
|
"aria-label": "Previous",
|
|
1200
1224
|
className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
|
|
1201
|
-
children: /* @__PURE__ */
|
|
1225
|
+
children: /* @__PURE__ */ jsx9(ChevronLeft2, { size: 16 })
|
|
1202
1226
|
}
|
|
1203
1227
|
),
|
|
1204
|
-
/* @__PURE__ */
|
|
1228
|
+
/* @__PURE__ */ jsx9(
|
|
1205
1229
|
"button",
|
|
1206
1230
|
{
|
|
1207
1231
|
type: "button",
|
|
1208
1232
|
onClick: () => scroll(1),
|
|
1209
1233
|
"aria-label": "Next",
|
|
1210
1234
|
className: "hidden h-10 w-10 items-center justify-center rounded-control border border-border-default text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary sm:flex lg:hidden",
|
|
1211
|
-
children: /* @__PURE__ */
|
|
1235
|
+
children: /* @__PURE__ */ jsx9(ChevronRight2, { size: 16 })
|
|
1212
1236
|
}
|
|
1213
1237
|
)
|
|
1214
1238
|
] })
|
|
1215
1239
|
] }),
|
|
1216
|
-
/* @__PURE__ */
|
|
1240
|
+
/* @__PURE__ */ jsx9(
|
|
1217
1241
|
"div",
|
|
1218
1242
|
{
|
|
1219
1243
|
ref: scrollRef,
|
|
@@ -1227,7 +1251,7 @@ function SectionRail({
|
|
|
1227
1251
|
// src/DataScopeFilter.tsx
|
|
1228
1252
|
import { useEffect as useEffect5, useRef as useRef6, useState as useState5 } from "react";
|
|
1229
1253
|
import { Check as Check4, ChevronDown as ChevronDown4 } from "lucide-react";
|
|
1230
|
-
import { jsx as
|
|
1254
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
1231
1255
|
var FINAL_ONLY_TEXT = "Trims time periods to data that has finalized across the selected media formats. Some formats (e.g. Network TV and Cinema) finalize later, so the most recent periods may still change. Turn on for stable, report-ready numbers.";
|
|
1232
1256
|
function cx3(...classes) {
|
|
1233
1257
|
return classes.filter(Boolean).join(" ");
|
|
@@ -1253,8 +1277,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1253
1277
|
onChange(v);
|
|
1254
1278
|
setOpen(false);
|
|
1255
1279
|
};
|
|
1256
|
-
return /* @__PURE__ */
|
|
1257
|
-
/* @__PURE__ */
|
|
1280
|
+
return /* @__PURE__ */ jsxs9("div", { className: "relative", ref, children: [
|
|
1281
|
+
/* @__PURE__ */ jsxs9(
|
|
1258
1282
|
"button",
|
|
1259
1283
|
{
|
|
1260
1284
|
type: "button",
|
|
@@ -1263,11 +1287,11 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1263
1287
|
"aria-haspopup": "listbox",
|
|
1264
1288
|
className: "flex h-11 items-center gap-2 rounded-control border border-border-strong bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
1265
1289
|
children: [
|
|
1266
|
-
/* @__PURE__ */
|
|
1267
|
-
/* @__PURE__ */
|
|
1268
|
-
/* @__PURE__ */
|
|
1290
|
+
/* @__PURE__ */ jsxs9("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1291
|
+
/* @__PURE__ */ jsx10("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: "Data" }),
|
|
1292
|
+
/* @__PURE__ */ jsx10("span", { className: "text-[12px] font-medium text-text-primary", children: display })
|
|
1269
1293
|
] }),
|
|
1270
|
-
/* @__PURE__ */
|
|
1294
|
+
/* @__PURE__ */ jsx10(
|
|
1271
1295
|
ChevronDown4,
|
|
1272
1296
|
{
|
|
1273
1297
|
size: 14,
|
|
@@ -1278,7 +1302,7 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1278
1302
|
]
|
|
1279
1303
|
}
|
|
1280
1304
|
),
|
|
1281
|
-
open && /* @__PURE__ */
|
|
1305
|
+
open && /* @__PURE__ */ jsxs9(
|
|
1282
1306
|
"div",
|
|
1283
1307
|
{
|
|
1284
1308
|
role: "listbox",
|
|
@@ -1288,8 +1312,8 @@ function DataScopeFilter({ value, onChange, align = "right" }) {
|
|
|
1288
1312
|
align === "right" ? "right-0" : "left-0"
|
|
1289
1313
|
),
|
|
1290
1314
|
children: [
|
|
1291
|
-
/* @__PURE__ */
|
|
1292
|
-
/* @__PURE__ */
|
|
1315
|
+
/* @__PURE__ */ jsx10(Option, { label: "All", selected: !value, onClick: () => choose(false) }),
|
|
1316
|
+
/* @__PURE__ */ jsx10(Option, { label: "Final only", selected: value, onClick: () => choose(true), hint: FINAL_ONLY_TEXT })
|
|
1293
1317
|
]
|
|
1294
1318
|
}
|
|
1295
1319
|
)
|
|
@@ -1301,7 +1325,7 @@ function Option({
|
|
|
1301
1325
|
onClick,
|
|
1302
1326
|
hint
|
|
1303
1327
|
}) {
|
|
1304
|
-
const option = /* @__PURE__ */
|
|
1328
|
+
const option = /* @__PURE__ */ jsxs9(
|
|
1305
1329
|
"button",
|
|
1306
1330
|
{
|
|
1307
1331
|
type: "button",
|
|
@@ -1314,15 +1338,15 @@ function Option({
|
|
|
1314
1338
|
selected ? "font-semibold text-text-primary" : "text-text-secondary"
|
|
1315
1339
|
),
|
|
1316
1340
|
children: [
|
|
1317
|
-
/* @__PURE__ */
|
|
1341
|
+
/* @__PURE__ */ jsx10(Check4, { size: 14, "aria-hidden": "true", className: cx3("shrink-0 text-brand-primaryAction", !selected && "invisible") }),
|
|
1318
1342
|
label
|
|
1319
1343
|
]
|
|
1320
1344
|
}
|
|
1321
1345
|
);
|
|
1322
1346
|
if (!hint) return option;
|
|
1323
|
-
return /* @__PURE__ */
|
|
1347
|
+
return /* @__PURE__ */ jsxs9("div", { className: "flex items-center pr-2.5", children: [
|
|
1324
1348
|
option,
|
|
1325
|
-
/* @__PURE__ */
|
|
1349
|
+
/* @__PURE__ */ jsx10(InfoTip, { text: hint, trigger: "hover", label: `About ${label}` })
|
|
1326
1350
|
] });
|
|
1327
1351
|
}
|
|
1328
1352
|
|
|
@@ -1330,7 +1354,7 @@ function Option({
|
|
|
1330
1354
|
import { useCallback as useCallback2, useEffect as useEffect6, useLayoutEffect, useRef as useRef7, useState as useState6 } from "react";
|
|
1331
1355
|
import { createPortal as createPortal2 } from "react-dom";
|
|
1332
1356
|
import { Check as Check5, ChevronDown as ChevronDown5 } from "lucide-react";
|
|
1333
|
-
import { jsx as
|
|
1357
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
1334
1358
|
function cx4(...classes) {
|
|
1335
1359
|
return classes.filter(Boolean).join(" ");
|
|
1336
1360
|
}
|
|
@@ -1380,8 +1404,8 @@ function SelectFilter({
|
|
|
1380
1404
|
window.removeEventListener("scroll", reposition, true);
|
|
1381
1405
|
};
|
|
1382
1406
|
}, [open, close, reposition]);
|
|
1383
|
-
return /* @__PURE__ */
|
|
1384
|
-
/* @__PURE__ */
|
|
1407
|
+
return /* @__PURE__ */ jsxs10("div", { className: cx4("relative", fullWidth && "w-full"), ref, children: [
|
|
1408
|
+
/* @__PURE__ */ jsxs10(
|
|
1385
1409
|
"button",
|
|
1386
1410
|
{
|
|
1387
1411
|
type: "button",
|
|
@@ -1395,11 +1419,11 @@ function SelectFilter({
|
|
|
1395
1419
|
className
|
|
1396
1420
|
),
|
|
1397
1421
|
children: [
|
|
1398
|
-
/* @__PURE__ */
|
|
1399
|
-
/* @__PURE__ */
|
|
1400
|
-
/* @__PURE__ */
|
|
1422
|
+
/* @__PURE__ */ jsxs10("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
1423
|
+
/* @__PURE__ */ jsx11("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
1424
|
+
/* @__PURE__ */ jsx11("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
1401
1425
|
] }),
|
|
1402
|
-
/* @__PURE__ */
|
|
1426
|
+
/* @__PURE__ */ jsx11(
|
|
1403
1427
|
ChevronDown5,
|
|
1404
1428
|
{
|
|
1405
1429
|
size: 14,
|
|
@@ -1411,7 +1435,7 @@ function SelectFilter({
|
|
|
1411
1435
|
}
|
|
1412
1436
|
),
|
|
1413
1437
|
open && pos && createPortal2(
|
|
1414
|
-
/* @__PURE__ */
|
|
1438
|
+
/* @__PURE__ */ jsx11(
|
|
1415
1439
|
"div",
|
|
1416
1440
|
{
|
|
1417
1441
|
ref: popoverRef,
|
|
@@ -1423,9 +1447,9 @@ function SelectFilter({
|
|
|
1423
1447
|
),
|
|
1424
1448
|
role: "listbox",
|
|
1425
1449
|
"aria-label": caption,
|
|
1426
|
-
children: /* @__PURE__ */
|
|
1450
|
+
children: /* @__PURE__ */ jsx11("div", { className: "max-h-[280px] overflow-y-auto p-1", children: options.map((o) => {
|
|
1427
1451
|
const selected = o === value;
|
|
1428
|
-
return /* @__PURE__ */
|
|
1452
|
+
return /* @__PURE__ */ jsxs10(
|
|
1429
1453
|
"button",
|
|
1430
1454
|
{
|
|
1431
1455
|
type: "button",
|
|
@@ -1438,8 +1462,8 @@ function SelectFilter({
|
|
|
1438
1462
|
},
|
|
1439
1463
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
1440
1464
|
children: [
|
|
1441
|
-
/* @__PURE__ */
|
|
1442
|
-
/* @__PURE__ */
|
|
1465
|
+
/* @__PURE__ */ jsx11("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center text-brand-primaryAction", children: selected && /* @__PURE__ */ jsx11(Check5, { size: 15, strokeWidth: 3 }) }),
|
|
1466
|
+
/* @__PURE__ */ jsx11(
|
|
1443
1467
|
"span",
|
|
1444
1468
|
{
|
|
1445
1469
|
className: cx4("flex-1 text-[14px]", selected ? "font-semibold text-text-primary" : "text-text-primary"),
|
|
@@ -1460,9 +1484,9 @@ function SelectFilter({
|
|
|
1460
1484
|
|
|
1461
1485
|
// src/Card.tsx
|
|
1462
1486
|
import { forwardRef } from "react";
|
|
1463
|
-
import { jsx as
|
|
1487
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
1464
1488
|
var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, className, children, ...rest }, ref) {
|
|
1465
|
-
return /* @__PURE__ */
|
|
1489
|
+
return /* @__PURE__ */ jsx12(
|
|
1466
1490
|
"article",
|
|
1467
1491
|
{
|
|
1468
1492
|
ref,
|
|
@@ -1473,15 +1497,15 @@ var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, clas
|
|
|
1473
1497
|
className
|
|
1474
1498
|
].filter(Boolean).join(" "),
|
|
1475
1499
|
...rest,
|
|
1476
|
-
children: title ? /* @__PURE__ */
|
|
1477
|
-
/* @__PURE__ */
|
|
1478
|
-
/* @__PURE__ */
|
|
1479
|
-
/* @__PURE__ */
|
|
1480
|
-
subtitle && /* @__PURE__ */
|
|
1500
|
+
children: title ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-1 flex-col p-card-padding", children: [
|
|
1501
|
+
/* @__PURE__ */ jsxs11("div", { className: "flex items-start justify-between gap-2", children: [
|
|
1502
|
+
/* @__PURE__ */ jsxs11("div", { children: [
|
|
1503
|
+
/* @__PURE__ */ jsx12("h3", { className: "text-[15px] font-semibold leading-snug text-text-primary", children: title }),
|
|
1504
|
+
subtitle && /* @__PURE__ */ jsx12("p", { className: "mt-0.5 text-[12px] leading-snug text-text-tertiary", children: subtitle })
|
|
1481
1505
|
] }),
|
|
1482
|
-
action && /* @__PURE__ */
|
|
1506
|
+
action && /* @__PURE__ */ jsx12("div", { className: "shrink-0 text-text-tertiary", children: action })
|
|
1483
1507
|
] }),
|
|
1484
|
-
/* @__PURE__ */
|
|
1508
|
+
/* @__PURE__ */ jsx12("div", { className: "mt-4 flex flex-1 flex-col", children })
|
|
1485
1509
|
] }) : children
|
|
1486
1510
|
}
|
|
1487
1511
|
);
|
|
@@ -1489,7 +1513,7 @@ var Card = forwardRef(function Card2({ staticCard, title, subtitle, action, clas
|
|
|
1489
1513
|
|
|
1490
1514
|
// src/NoResultsEmptyState.tsx
|
|
1491
1515
|
import { FilterX } from "lucide-react";
|
|
1492
|
-
import { jsx as
|
|
1516
|
+
import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
1493
1517
|
var NO_RESULTS_TITLE = "No results match your filters";
|
|
1494
1518
|
var NO_RESULTS_BODY = "Your filters may be too narrow, conflict with each other, or have no activity in this period.";
|
|
1495
1519
|
function noResultsBody(workspaceName) {
|
|
@@ -1511,12 +1535,12 @@ function NoResultsEmptyState({
|
|
|
1511
1535
|
const showClear = hasFilters !== false && Boolean(onClearFilters);
|
|
1512
1536
|
const showEdit = Boolean(onEditFilters);
|
|
1513
1537
|
const hasActions = showClear || showEdit || Boolean(actions && actions.length > 0);
|
|
1514
|
-
return /* @__PURE__ */
|
|
1515
|
-
/* @__PURE__ */
|
|
1516
|
-
/* @__PURE__ */
|
|
1517
|
-
/* @__PURE__ */
|
|
1518
|
-
hasActions && /* @__PURE__ */
|
|
1519
|
-
showClear && /* @__PURE__ */
|
|
1538
|
+
return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-center justify-center gap-3 text-center", "data-testid": testIdPrefix, children: [
|
|
1539
|
+
/* @__PURE__ */ jsx13("span", { className: "flex h-11 w-11 items-center justify-center rounded-full bg-subtle text-text-tertiary", children: /* @__PURE__ */ jsx13(FilterX, { size: 20, "aria-hidden": "true" }) }),
|
|
1540
|
+
/* @__PURE__ */ jsx13("h2", { className: "text-base font-semibold text-text-primary", children: title }),
|
|
1541
|
+
/* @__PURE__ */ jsx13("p", { className: "max-w-[420px] text-[13px] leading-relaxed text-text-secondary", children: bodyText }),
|
|
1542
|
+
hasActions && /* @__PURE__ */ jsxs12("div", { className: "mt-1 flex flex-col items-center gap-3", children: [
|
|
1543
|
+
showClear && /* @__PURE__ */ jsx13(
|
|
1520
1544
|
"button",
|
|
1521
1545
|
{
|
|
1522
1546
|
type: "button",
|
|
@@ -1526,7 +1550,7 @@ function NoResultsEmptyState({
|
|
|
1526
1550
|
children: "Clear all filters"
|
|
1527
1551
|
}
|
|
1528
1552
|
),
|
|
1529
|
-
showEdit && /* @__PURE__ */
|
|
1553
|
+
showEdit && /* @__PURE__ */ jsx13(
|
|
1530
1554
|
"button",
|
|
1531
1555
|
{
|
|
1532
1556
|
type: "button",
|
|
@@ -1536,7 +1560,7 @@ function NoResultsEmptyState({
|
|
|
1536
1560
|
children: "Edit filters"
|
|
1537
1561
|
}
|
|
1538
1562
|
),
|
|
1539
|
-
actions?.map((action, i) => /* @__PURE__ */
|
|
1563
|
+
actions?.map((action, i) => /* @__PURE__ */ jsx13(
|
|
1540
1564
|
"button",
|
|
1541
1565
|
{
|
|
1542
1566
|
type: "button",
|
|
@@ -1553,12 +1577,12 @@ function NoResultsEmptyState({
|
|
|
1553
1577
|
// src/WorkspaceSelectedCard.tsx
|
|
1554
1578
|
import { useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
|
|
1555
1579
|
import { ChevronDown as ChevronDown6, X as X2 } from "lucide-react";
|
|
1556
|
-
import { jsx as
|
|
1580
|
+
import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1557
1581
|
function cx5(...parts) {
|
|
1558
1582
|
return parts.filter(Boolean).join(" ");
|
|
1559
1583
|
}
|
|
1560
1584
|
function WorkspaceSelectedCard({ groups, testIdPrefix }) {
|
|
1561
|
-
return /* @__PURE__ */
|
|
1585
|
+
return /* @__PURE__ */ jsx14("aside", { className: "sticky top-4 flex min-w-0 flex-col gap-4 self-start rounded-card border border-border-default bg-surface px-5 pb-5 pt-4 shadow-raised sm:px-6 sm:pb-6", children: /* @__PURE__ */ jsx14("div", { className: "flex flex-col divide-y divide-border-default", children: groups.map((g) => /* @__PURE__ */ jsx14(SummaryGroupItem, { group: g, testIdPrefix }, g.id)) }) });
|
|
1562
1586
|
}
|
|
1563
1587
|
function SummaryGroupItem({
|
|
1564
1588
|
group,
|
|
@@ -1575,8 +1599,8 @@ function SummaryGroupItem({
|
|
|
1575
1599
|
else if (expandCount === 0) setOpen(false);
|
|
1576
1600
|
wasEmpty.current = expandCount === 0;
|
|
1577
1601
|
}, [expandCount]);
|
|
1578
|
-
return /* @__PURE__ */
|
|
1579
|
-
/* @__PURE__ */
|
|
1602
|
+
return /* @__PURE__ */ jsxs13("div", { className: nested ? "" : "py-3 first:pt-0 last:pb-0", children: [
|
|
1603
|
+
/* @__PURE__ */ jsxs13(
|
|
1580
1604
|
"button",
|
|
1581
1605
|
{
|
|
1582
1606
|
type: "button",
|
|
@@ -1585,7 +1609,7 @@ function SummaryGroupItem({
|
|
|
1585
1609
|
"data-testid": testIdPrefix && `${testIdPrefix}-group-${group.id}`,
|
|
1586
1610
|
className: "flex w-full min-w-0 items-center gap-2 text-left",
|
|
1587
1611
|
children: [
|
|
1588
|
-
/* @__PURE__ */
|
|
1612
|
+
/* @__PURE__ */ jsx14(
|
|
1589
1613
|
ChevronDown6,
|
|
1590
1614
|
{
|
|
1591
1615
|
size: 14,
|
|
@@ -1593,37 +1617,37 @@ function SummaryGroupItem({
|
|
|
1593
1617
|
className: cx5("shrink-0 text-text-secondary transition-transform", !open && "-rotate-90")
|
|
1594
1618
|
}
|
|
1595
1619
|
),
|
|
1596
|
-
/* @__PURE__ */
|
|
1597
|
-
/* @__PURE__ */
|
|
1620
|
+
/* @__PURE__ */ jsx14("span", { className: cx5("truncate font-semibold text-text-primary", nested ? "text-[12px]" : "text-[13px]"), children: group.label }),
|
|
1621
|
+
/* @__PURE__ */ jsx14("span", { className: "shrink-0 rounded-full bg-subtle px-1.5 py-0.5 text-[11px] font-semibold text-text-secondary", children: ownCount })
|
|
1598
1622
|
]
|
|
1599
1623
|
}
|
|
1600
1624
|
),
|
|
1601
|
-
open && /* @__PURE__ */
|
|
1602
|
-
ownCount > 0 && /* @__PURE__ */
|
|
1603
|
-
group.items.map((item) => /* @__PURE__ */
|
|
1625
|
+
open && /* @__PURE__ */ jsx14("div", { className: "pt-2.5", children: ownCount === 0 && subCount === 0 ? /* @__PURE__ */ jsx14("p", { className: "text-[12px] text-text-secondary", children: "Nothing selected." }) : /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-2.5", children: [
|
|
1626
|
+
ownCount > 0 && /* @__PURE__ */ jsxs13("div", { className: "flex flex-col gap-1.5", children: [
|
|
1627
|
+
group.items.map((item) => /* @__PURE__ */ jsxs13(
|
|
1604
1628
|
"div",
|
|
1605
1629
|
{
|
|
1606
1630
|
className: "flex items-center justify-between gap-2 rounded-control border border-border-default bg-canvas px-2 py-1",
|
|
1607
1631
|
children: [
|
|
1608
|
-
/* @__PURE__ */
|
|
1609
|
-
/* @__PURE__ */
|
|
1610
|
-
item.meta && /* @__PURE__ */
|
|
1632
|
+
/* @__PURE__ */ jsxs13("span", { className: "min-w-0 flex-1", children: [
|
|
1633
|
+
/* @__PURE__ */ jsx14("span", { className: "block truncate text-[12px] text-text-primary", children: item.name }),
|
|
1634
|
+
item.meta && /* @__PURE__ */ jsx14("span", { className: "block truncate text-[11px] text-text-secondary", children: item.meta })
|
|
1611
1635
|
] }),
|
|
1612
|
-
/* @__PURE__ */
|
|
1636
|
+
/* @__PURE__ */ jsx14(
|
|
1613
1637
|
"button",
|
|
1614
1638
|
{
|
|
1615
1639
|
type: "button",
|
|
1616
1640
|
"aria-label": `Remove ${item.name}`,
|
|
1617
1641
|
onClick: () => group.onRemove(item.id),
|
|
1618
1642
|
className: "flex h-5 w-5 shrink-0 items-center justify-center rounded-control text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
1619
|
-
children: /* @__PURE__ */
|
|
1643
|
+
children: /* @__PURE__ */ jsx14(X2, { size: 12, "aria-hidden": "true" })
|
|
1620
1644
|
}
|
|
1621
1645
|
)
|
|
1622
1646
|
]
|
|
1623
1647
|
},
|
|
1624
1648
|
item.id
|
|
1625
1649
|
)),
|
|
1626
|
-
/* @__PURE__ */
|
|
1650
|
+
/* @__PURE__ */ jsx14(
|
|
1627
1651
|
"button",
|
|
1628
1652
|
{
|
|
1629
1653
|
type: "button",
|
|
@@ -1634,13 +1658,13 @@ function SummaryGroupItem({
|
|
|
1634
1658
|
}
|
|
1635
1659
|
)
|
|
1636
1660
|
] }),
|
|
1637
|
-
group.subGroups?.map((sg) => /* @__PURE__ */
|
|
1661
|
+
group.subGroups?.map((sg) => /* @__PURE__ */ jsx14(SummaryGroupItem, { group: sg, nested: true, testIdPrefix }, sg.id))
|
|
1638
1662
|
] }) })
|
|
1639
1663
|
] });
|
|
1640
1664
|
}
|
|
1641
1665
|
|
|
1642
1666
|
// src/chart-placeholder-shared.tsx
|
|
1643
|
-
import { jsx as
|
|
1667
|
+
import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1644
1668
|
var GRID_ROWS = [0, 25, 50, 75, 100];
|
|
1645
1669
|
var Y_TICK_WIDTHS = [26, 30, 30, 26, 20];
|
|
1646
1670
|
var Y_AXIS_W = 48;
|
|
@@ -1652,9 +1676,9 @@ function AxisFrame({
|
|
|
1652
1676
|
children
|
|
1653
1677
|
}) {
|
|
1654
1678
|
const gutter = xTicks > 0 ? X_AXIS_H : 0;
|
|
1655
|
-
return /* @__PURE__ */
|
|
1656
|
-
/* @__PURE__ */
|
|
1657
|
-
GRID_ROWS.map((pct) => /* @__PURE__ */
|
|
1679
|
+
return /* @__PURE__ */ jsx15("div", { className: "w-full", style: { height }, role: "presentation", "aria-hidden": "true", children: /* @__PURE__ */ jsxs14("div", { className: "relative h-full w-full", children: [
|
|
1680
|
+
/* @__PURE__ */ jsxs14("div", { className: "absolute inset-y-0 right-0", style: { left: Y_AXIS_W, bottom: gutter }, children: [
|
|
1681
|
+
GRID_ROWS.map((pct) => /* @__PURE__ */ jsx15(
|
|
1658
1682
|
"div",
|
|
1659
1683
|
{
|
|
1660
1684
|
className: "absolute inset-x-0 border-t border-dashed",
|
|
@@ -1662,9 +1686,9 @@ function AxisFrame({
|
|
|
1662
1686
|
},
|
|
1663
1687
|
pct
|
|
1664
1688
|
)),
|
|
1665
|
-
/* @__PURE__ */
|
|
1689
|
+
/* @__PURE__ */ jsx15("div", { className: "absolute inset-0", children })
|
|
1666
1690
|
] }),
|
|
1667
|
-
/* @__PURE__ */
|
|
1691
|
+
/* @__PURE__ */ jsx15("div", { className: "absolute left-0 top-0", style: { width: Y_AXIS_W, bottom: gutter }, children: GRID_ROWS.map((pct, i) => /* @__PURE__ */ jsx15(
|
|
1668
1692
|
"div",
|
|
1669
1693
|
{
|
|
1670
1694
|
className: "absolute right-2 h-2 -translate-y-1/2 rounded-xs bg-subtle",
|
|
@@ -1672,27 +1696,27 @@ function AxisFrame({
|
|
|
1672
1696
|
},
|
|
1673
1697
|
pct
|
|
1674
1698
|
)) }),
|
|
1675
|
-
xTicks > 0 && /* @__PURE__ */
|
|
1699
|
+
xTicks > 0 && /* @__PURE__ */ jsx15(
|
|
1676
1700
|
"div",
|
|
1677
1701
|
{
|
|
1678
1702
|
className: "absolute bottom-0 right-0 flex items-center",
|
|
1679
1703
|
style: { left: Y_AXIS_W, height: X_AXIS_H },
|
|
1680
|
-
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */
|
|
1704
|
+
children: Array.from({ length: xTicks }, (_, i) => /* @__PURE__ */ jsx15("div", { className: "flex flex-1 justify-center", children: /* @__PURE__ */ jsx15("div", { className: "h-2 w-full max-w-[26px] rounded-xs bg-subtle" }) }, i))
|
|
1681
1705
|
}
|
|
1682
1706
|
)
|
|
1683
1707
|
] }) });
|
|
1684
1708
|
}
|
|
1685
1709
|
function BlankLegend({ rows, reverse = false }) {
|
|
1686
|
-
return /* @__PURE__ */
|
|
1710
|
+
return /* @__PURE__ */ jsx15(
|
|
1687
1711
|
"ul",
|
|
1688
1712
|
{
|
|
1689
1713
|
className: `flex flex-1 justify-center gap-1.5 ${reverse ? "flex-col-reverse" : "flex-col"}`,
|
|
1690
1714
|
role: "presentation",
|
|
1691
1715
|
"aria-hidden": "true",
|
|
1692
|
-
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */
|
|
1693
|
-
/* @__PURE__ */
|
|
1694
|
-
/* @__PURE__ */
|
|
1695
|
-
/* @__PURE__ */
|
|
1716
|
+
children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ jsxs14("li", { className: "flex items-center justify-between gap-2", children: [
|
|
1717
|
+
/* @__PURE__ */ jsxs14("span", { className: "flex items-center gap-1.5", children: [
|
|
1718
|
+
/* @__PURE__ */ jsx15("span", { className: "h-2.5 w-2.5 rounded-xs bg-subtle" }),
|
|
1719
|
+
/* @__PURE__ */ jsx15(
|
|
1696
1720
|
"span",
|
|
1697
1721
|
{
|
|
1698
1722
|
className: "h-2 rounded-xs bg-subtle",
|
|
@@ -1700,21 +1724,21 @@ function BlankLegend({ rows, reverse = false }) {
|
|
|
1700
1724
|
}
|
|
1701
1725
|
)
|
|
1702
1726
|
] }),
|
|
1703
|
-
/* @__PURE__ */
|
|
1727
|
+
/* @__PURE__ */ jsx15("span", { className: "h-2 w-6 rounded-xs bg-subtle" })
|
|
1704
1728
|
] }, i))
|
|
1705
1729
|
}
|
|
1706
1730
|
);
|
|
1707
1731
|
}
|
|
1708
1732
|
|
|
1709
1733
|
// src/BarChartPlaceholder.tsx
|
|
1710
|
-
import { jsx as
|
|
1734
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
1711
1735
|
var BAR_PROFILE = [92, 86, 76, 65, 57, 40, 30, 24, 18, 13];
|
|
1712
1736
|
function BarChartPlaceholder({ height = 220 }) {
|
|
1713
|
-
return /* @__PURE__ */
|
|
1737
|
+
return /* @__PURE__ */ jsx16(AxisFrame, { height, xTicks: BAR_PROFILE.length, children: /* @__PURE__ */ jsx16("div", { className: "flex h-full w-full items-end gap-2", children: BAR_PROFILE.map((pct, i) => /* @__PURE__ */ jsx16("div", { className: "flex-1 rounded-t-[3px] bg-subtle", style: { height: `${pct}%` } }, i)) }) });
|
|
1714
1738
|
}
|
|
1715
1739
|
|
|
1716
1740
|
// src/LineChartPlaceholder.tsx
|
|
1717
|
-
import { jsx as
|
|
1741
|
+
import { jsx as jsx17, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1718
1742
|
var LINE_SERIES = [
|
|
1719
1743
|
[58, 52, 55, 41, 45, 33, 36, 25, 28, 17],
|
|
1720
1744
|
[74, 71, 66, 68, 59, 61, 54, 56, 48, 45],
|
|
@@ -1724,26 +1748,26 @@ var LINE_SERIES = [
|
|
|
1724
1748
|
var LINE_FORECAST_FROM = 7;
|
|
1725
1749
|
function LineChartPlaceholder({ height = 280 }) {
|
|
1726
1750
|
const toPath = (pts, from, to) => pts.slice(from, to).map((y, i) => `${(i + from) / (pts.length - 1) * 100},${y}`).join(" ");
|
|
1727
|
-
return /* @__PURE__ */
|
|
1728
|
-
/* @__PURE__ */
|
|
1729
|
-
/* @__PURE__ */
|
|
1751
|
+
return /* @__PURE__ */ jsxs15(AxisFrame, { height, xTicks: LINE_SERIES[0].length, children: [
|
|
1752
|
+
/* @__PURE__ */ jsx17("svg", { viewBox: "0 0 100 100", preserveAspectRatio: "none", className: "absolute inset-0 h-full w-full", children: LINE_SERIES.map((pts, s) => /* @__PURE__ */ jsxs15("g", { children: [
|
|
1753
|
+
/* @__PURE__ */ jsx17(
|
|
1730
1754
|
"polyline",
|
|
1731
1755
|
{
|
|
1732
1756
|
points: toPath(pts, 0, LINE_FORECAST_FROM + 1),
|
|
1733
1757
|
fill: "none",
|
|
1734
|
-
stroke: "var(--mr-color-
|
|
1758
|
+
stroke: "var(--mr-color-subtle)",
|
|
1735
1759
|
strokeWidth: "2",
|
|
1736
1760
|
vectorEffect: "non-scaling-stroke",
|
|
1737
1761
|
strokeLinecap: "round",
|
|
1738
1762
|
strokeLinejoin: "round"
|
|
1739
1763
|
}
|
|
1740
1764
|
),
|
|
1741
|
-
/* @__PURE__ */
|
|
1765
|
+
/* @__PURE__ */ jsx17(
|
|
1742
1766
|
"polyline",
|
|
1743
1767
|
{
|
|
1744
1768
|
points: toPath(pts, LINE_FORECAST_FROM, pts.length),
|
|
1745
1769
|
fill: "none",
|
|
1746
|
-
stroke: "var(--mr-color-
|
|
1770
|
+
stroke: "var(--mr-color-subtle)",
|
|
1747
1771
|
strokeWidth: "2",
|
|
1748
1772
|
strokeDasharray: "5 4",
|
|
1749
1773
|
vectorEffect: "non-scaling-stroke",
|
|
@@ -1753,14 +1777,14 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1753
1777
|
)
|
|
1754
1778
|
] }, s)) }),
|
|
1755
1779
|
LINE_SERIES.map(
|
|
1756
|
-
(pts, s) => pts.map((y, i) => /* @__PURE__ */
|
|
1780
|
+
(pts, s) => pts.map((y, i) => /* @__PURE__ */ jsx17(
|
|
1757
1781
|
"div",
|
|
1758
1782
|
{
|
|
1759
1783
|
className: "absolute h-1.5 w-1.5 -translate-x-1/2 -translate-y-1/2 rounded-full",
|
|
1760
1784
|
style: {
|
|
1761
1785
|
left: `${i / (pts.length - 1) * 100}%`,
|
|
1762
1786
|
top: `${y}%`,
|
|
1763
|
-
backgroundColor: "var(--mr-color-
|
|
1787
|
+
backgroundColor: "var(--mr-color-subtle)"
|
|
1764
1788
|
}
|
|
1765
1789
|
},
|
|
1766
1790
|
`${s}-${i}`
|
|
@@ -1770,35 +1794,35 @@ function LineChartPlaceholder({ height = 280 }) {
|
|
|
1770
1794
|
}
|
|
1771
1795
|
|
|
1772
1796
|
// src/PieChartPlaceholder.tsx
|
|
1773
|
-
import { jsx as
|
|
1797
|
+
import { jsx as jsx18, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1774
1798
|
var PIE_SEAMS = [0, 115, 180, 230, 262, 288, 310, 332];
|
|
1775
1799
|
function PieChartPlaceholder({ height = 220, legendRows = 8 }) {
|
|
1776
1800
|
const r = 45;
|
|
1777
|
-
return /* @__PURE__ */
|
|
1778
|
-
/* @__PURE__ */
|
|
1779
|
-
/* @__PURE__ */
|
|
1801
|
+
return /* @__PURE__ */ jsxs16("div", { className: "flex w-full items-center gap-3", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1802
|
+
/* @__PURE__ */ jsx18("div", { className: "flex h-full items-center justify-center", style: { width: "60%" }, children: /* @__PURE__ */ jsxs16("svg", { viewBox: "0 0 100 100", className: "h-full", style: { aspectRatio: "1 / 1" }, children: [
|
|
1803
|
+
/* @__PURE__ */ jsx18("circle", { cx: "50", cy: "50", r, fill: "var(--mr-color-subtle)" }),
|
|
1780
1804
|
PIE_SEAMS.map((deg) => {
|
|
1781
1805
|
const rad = (deg - 90) * Math.PI / 180;
|
|
1782
|
-
return /* @__PURE__ */
|
|
1806
|
+
return /* @__PURE__ */ jsx18(
|
|
1783
1807
|
"line",
|
|
1784
1808
|
{
|
|
1785
1809
|
x1: "50",
|
|
1786
1810
|
y1: "50",
|
|
1787
1811
|
x2: 50 + r * Math.cos(rad),
|
|
1788
1812
|
y2: 50 + r * Math.sin(rad),
|
|
1789
|
-
stroke: "var(--mr-color-
|
|
1813
|
+
stroke: "var(--mr-color-surface)",
|
|
1790
1814
|
strokeWidth: "1"
|
|
1791
1815
|
},
|
|
1792
1816
|
deg
|
|
1793
1817
|
);
|
|
1794
1818
|
})
|
|
1795
1819
|
] }) }),
|
|
1796
|
-
/* @__PURE__ */
|
|
1820
|
+
/* @__PURE__ */ jsx18(BlankLegend, { rows: legendRows })
|
|
1797
1821
|
] });
|
|
1798
1822
|
}
|
|
1799
1823
|
|
|
1800
1824
|
// src/StackedColumnPlaceholder.tsx
|
|
1801
|
-
import { jsx as
|
|
1825
|
+
import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1802
1826
|
var COLUMN_WEIGHTS = [20, 30, 15, 35, 24, 12, 28, 18];
|
|
1803
1827
|
function columnBands(count) {
|
|
1804
1828
|
const weights = Array.from({ length: count }, (_, i) => COLUMN_WEIGHTS[i % COLUMN_WEIGHTS.length]);
|
|
@@ -1811,28 +1835,28 @@ function StackedColumnPlaceholder({
|
|
|
1811
1835
|
legendRows = 4,
|
|
1812
1836
|
axis = false
|
|
1813
1837
|
}) {
|
|
1814
|
-
const column = /* @__PURE__ */
|
|
1838
|
+
const column = /* @__PURE__ */ jsx19("div", { className: "flex h-full flex-col overflow-hidden rounded-control bg-subtle", style: { width }, children: columnBands(legendRows).map((pct, i) => /* @__PURE__ */ jsx19(
|
|
1815
1839
|
"div",
|
|
1816
1840
|
{
|
|
1817
1841
|
style: {
|
|
1818
1842
|
height: `${pct}%`,
|
|
1819
|
-
/*
|
|
1820
|
-
|
|
1821
|
-
borderTop: i === 0 ? void 0 : "1px solid var(--mr-color-
|
|
1843
|
+
/* A gap in the card's color, not a border tone: border-default
|
|
1844
|
+
disappears on the subtle fill, border-strong reads darker. */
|
|
1845
|
+
borderTop: i === 0 ? void 0 : "1px solid var(--mr-color-surface)"
|
|
1822
1846
|
}
|
|
1823
1847
|
},
|
|
1824
1848
|
i
|
|
1825
1849
|
)) });
|
|
1826
|
-
return /* @__PURE__ */
|
|
1827
|
-
axis ? /* @__PURE__ */
|
|
1828
|
-
/* @__PURE__ */
|
|
1850
|
+
return /* @__PURE__ */ jsxs17("div", { className: "flex w-full gap-4", style: { height }, role: "presentation", "aria-hidden": "true", children: [
|
|
1851
|
+
axis ? /* @__PURE__ */ jsx19("div", { style: { width: "55%" }, children: /* @__PURE__ */ jsx19(AxisFrame, { height, xTicks: 0, children: /* @__PURE__ */ jsx19("div", { className: "flex h-full items-stretch justify-center", children: column }) }) }) : /* @__PURE__ */ jsx19("div", { className: "flex items-stretch py-1", children: column }),
|
|
1852
|
+
/* @__PURE__ */ jsx19(BlankLegend, { rows: legendRows, reverse: !axis })
|
|
1829
1853
|
] });
|
|
1830
1854
|
}
|
|
1831
1855
|
|
|
1832
1856
|
// src/Tooltip.tsx
|
|
1833
1857
|
import { useEffect as useEffect8, useId, useLayoutEffect as useLayoutEffect2, useRef as useRef9, useState as useState8 } from "react";
|
|
1834
1858
|
import { createPortal as createPortal3 } from "react-dom";
|
|
1835
|
-
import { jsx as
|
|
1859
|
+
import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1836
1860
|
function cx6(...parts) {
|
|
1837
1861
|
return parts.filter(Boolean).join(" ");
|
|
1838
1862
|
}
|
|
@@ -2002,7 +2026,7 @@ function Tooltip({
|
|
|
2002
2026
|
}
|
|
2003
2027
|
}
|
|
2004
2028
|
const floating = anchor != null && typeof document !== "undefined" ? createPortal3(
|
|
2005
|
-
/* @__PURE__ */
|
|
2029
|
+
/* @__PURE__ */ jsx20(
|
|
2006
2030
|
"span",
|
|
2007
2031
|
{
|
|
2008
2032
|
ref: boxRef,
|
|
@@ -2033,7 +2057,7 @@ function Tooltip({
|
|
|
2033
2057
|
document.body
|
|
2034
2058
|
) : null;
|
|
2035
2059
|
if (anchorRef) return floating;
|
|
2036
|
-
return /* @__PURE__ */
|
|
2060
|
+
return /* @__PURE__ */ jsxs18(
|
|
2037
2061
|
"span",
|
|
2038
2062
|
{
|
|
2039
2063
|
ref,
|
|
@@ -2052,26 +2076,26 @@ function Tooltip({
|
|
|
2052
2076
|
}
|
|
2053
2077
|
|
|
2054
2078
|
// src/AdvertiserNoResults.tsx
|
|
2055
|
-
import { jsx as
|
|
2079
|
+
import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
2056
2080
|
function AdvertiserNoResults({
|
|
2057
2081
|
query,
|
|
2058
2082
|
hint = "Try checking your spelling or searching for a broader brand name."
|
|
2059
2083
|
}) {
|
|
2060
|
-
return /* @__PURE__ */
|
|
2061
|
-
/* @__PURE__ */
|
|
2084
|
+
return /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center gap-1.5 px-4 py-8 text-center", children: [
|
|
2085
|
+
/* @__PURE__ */ jsxs19("p", { className: "text-[13px] font-medium text-text-primary", children: [
|
|
2062
2086
|
"No results found for \u201C",
|
|
2063
2087
|
query,
|
|
2064
2088
|
"\u201D"
|
|
2065
2089
|
] }),
|
|
2066
|
-
/* @__PURE__ */
|
|
2090
|
+
/* @__PURE__ */ jsx21("p", { className: "text-[12px] leading-snug text-text-tertiary", children: hint })
|
|
2067
2091
|
] });
|
|
2068
2092
|
}
|
|
2069
2093
|
|
|
2070
2094
|
// src/SelectAllVisible.tsx
|
|
2071
2095
|
import { ListChecks as ListChecks2 } from "lucide-react";
|
|
2072
|
-
import { jsx as
|
|
2096
|
+
import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
2073
2097
|
function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
2074
|
-
return /* @__PURE__ */
|
|
2098
|
+
return /* @__PURE__ */ jsxs20(
|
|
2075
2099
|
"button",
|
|
2076
2100
|
{
|
|
2077
2101
|
type: "button",
|
|
@@ -2079,7 +2103,7 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2079
2103
|
onClick: onToggle,
|
|
2080
2104
|
className: "flex w-full items-center gap-2 rounded-control px-2 py-1.5 text-left text-[12px] font-semibold text-text-link transition-colors hover:bg-subtle",
|
|
2081
2105
|
children: [
|
|
2082
|
-
/* @__PURE__ */
|
|
2106
|
+
/* @__PURE__ */ jsx22(ListChecks2, { size: 14, "aria-hidden": "true" }),
|
|
2083
2107
|
allSelected ? `Deselect ${count} visible` : `Select all ${count} visible`
|
|
2084
2108
|
]
|
|
2085
2109
|
}
|
|
@@ -2088,14 +2112,14 @@ function SelectAllVisible({ count, allSelected, onToggle, testIdPrefix }) {
|
|
|
2088
2112
|
|
|
2089
2113
|
// src/SelectedSection.tsx
|
|
2090
2114
|
import { ChevronDown as ChevronDown7 } from "lucide-react";
|
|
2091
|
-
import { jsx as
|
|
2115
|
+
import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
2092
2116
|
function cx7(...parts) {
|
|
2093
2117
|
return parts.filter(Boolean).join(" ");
|
|
2094
2118
|
}
|
|
2095
2119
|
function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
2096
2120
|
if (count === 0) return null;
|
|
2097
|
-
return /* @__PURE__ */
|
|
2098
|
-
/* @__PURE__ */
|
|
2121
|
+
return /* @__PURE__ */ jsxs21("div", { className: "flex flex-col", children: [
|
|
2122
|
+
/* @__PURE__ */ jsxs21(
|
|
2099
2123
|
"button",
|
|
2100
2124
|
{
|
|
2101
2125
|
type: "button",
|
|
@@ -2104,14 +2128,14 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
2104
2128
|
"aria-expanded": open,
|
|
2105
2129
|
className: "flex w-full items-center gap-1.5 rounded-control px-2 py-1 text-left text-[11px] font-semibold uppercase tracking-wide text-text-tertiary transition-colors hover:text-text-primary",
|
|
2106
2130
|
children: [
|
|
2107
|
-
/* @__PURE__ */
|
|
2131
|
+
/* @__PURE__ */ jsx23(ChevronDown7, { size: 13, "aria-hidden": "true", className: cx7("transition-transform", !open && "-rotate-90") }),
|
|
2108
2132
|
"Selected (",
|
|
2109
2133
|
count,
|
|
2110
2134
|
")"
|
|
2111
2135
|
]
|
|
2112
2136
|
}
|
|
2113
2137
|
),
|
|
2114
|
-
open && /* @__PURE__ */
|
|
2138
|
+
open && /* @__PURE__ */ jsx23("div", { className: "flex flex-col gap-0.5", children })
|
|
2115
2139
|
] });
|
|
2116
2140
|
}
|
|
2117
2141
|
|
|
@@ -2119,7 +2143,7 @@ function SelectedSection({ count, open, onToggle, children, testIdPrefix }) {
|
|
|
2119
2143
|
import { useCallback as useCallback3, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef10, useState as useState9 } from "react";
|
|
2120
2144
|
import { createPortal as createPortal4 } from "react-dom";
|
|
2121
2145
|
import { Search as Search4, Plus, Info as Info2, ChevronRight as ChevronRight3, ChevronDown as ChevronDown8, Check as Check6, List, Loader2 } from "lucide-react";
|
|
2122
|
-
import { Fragment as Fragment4, jsx as
|
|
2146
|
+
import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2123
2147
|
function cx8(...parts) {
|
|
2124
2148
|
return parts.filter(Boolean).join(" ");
|
|
2125
2149
|
}
|
|
@@ -2214,17 +2238,17 @@ function SelectionPicker({
|
|
|
2214
2238
|
}
|
|
2215
2239
|
};
|
|
2216
2240
|
const rowGridCols = showInfoColumn ? "grid-cols-[36px_1fr_44px]" : "grid-cols-[36px_1fr]";
|
|
2217
|
-
return /* @__PURE__ */
|
|
2218
|
-
helper && /* @__PURE__ */
|
|
2219
|
-
/* @__PURE__ */
|
|
2220
|
-
/* @__PURE__ */
|
|
2241
|
+
return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-4", children: [
|
|
2242
|
+
helper && /* @__PURE__ */ jsxs22(Fragment4, { children: [
|
|
2243
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[13px] text-text-secondary", children: helper }),
|
|
2244
|
+
/* @__PURE__ */ jsx24("hr", { className: "-mx-5 -mt-2 border-border-default sm:-mx-6" })
|
|
2221
2245
|
] }),
|
|
2222
|
-
hasAccountLists && /* @__PURE__ */
|
|
2246
|
+
hasAccountLists && /* @__PURE__ */ jsx24("div", { className: "inline-flex gap-0.5 self-start rounded-control border border-border-default bg-canvas p-0.5", children: [
|
|
2223
2247
|
{ id: "search", label: "Search", icon: Search4 },
|
|
2224
2248
|
{ id: "lists", label: "Account lists", icon: List }
|
|
2225
2249
|
].map((t) => {
|
|
2226
2250
|
const on = source === t.id;
|
|
2227
|
-
return /* @__PURE__ */
|
|
2251
|
+
return /* @__PURE__ */ jsxs22(
|
|
2228
2252
|
"button",
|
|
2229
2253
|
{
|
|
2230
2254
|
type: "button",
|
|
@@ -2235,18 +2259,18 @@ function SelectionPicker({
|
|
|
2235
2259
|
on ? "bg-surface text-text-primary shadow-raised" : "text-text-secondary hover:text-text-primary"
|
|
2236
2260
|
),
|
|
2237
2261
|
children: [
|
|
2238
|
-
/* @__PURE__ */
|
|
2262
|
+
/* @__PURE__ */ jsx24(t.icon, { size: 14, "aria-hidden": "true" }),
|
|
2239
2263
|
t.label
|
|
2240
2264
|
]
|
|
2241
2265
|
},
|
|
2242
2266
|
t.id
|
|
2243
2267
|
);
|
|
2244
2268
|
}) }),
|
|
2245
|
-
source === "search" && /* @__PURE__ */
|
|
2246
|
-
/* @__PURE__ */
|
|
2247
|
-
/* @__PURE__ */
|
|
2248
|
-
/* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2269
|
+
source === "search" && /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2270
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
2271
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex h-9 min-w-[200px] flex-1 items-center gap-2 rounded-control border border-border-default bg-input px-3", children: [
|
|
2272
|
+
/* @__PURE__ */ jsx24(Search4, { size: 15, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
2273
|
+
/* @__PURE__ */ jsx24(
|
|
2250
2274
|
"input",
|
|
2251
2275
|
{
|
|
2252
2276
|
value: query,
|
|
@@ -2262,7 +2286,7 @@ function SelectionPicker({
|
|
|
2262
2286
|
}
|
|
2263
2287
|
)
|
|
2264
2288
|
] }),
|
|
2265
|
-
filters.map((f) => /* @__PURE__ */
|
|
2289
|
+
filters.map((f) => /* @__PURE__ */ jsx24(
|
|
2266
2290
|
FilterDropdown,
|
|
2267
2291
|
{
|
|
2268
2292
|
filter: f,
|
|
@@ -2274,14 +2298,14 @@ function SelectionPicker({
|
|
|
2274
2298
|
)),
|
|
2275
2299
|
toolbarExtra
|
|
2276
2300
|
] }),
|
|
2277
|
-
!hasSearched ? /* @__PURE__ */
|
|
2278
|
-
/* @__PURE__ */
|
|
2279
|
-
/* @__PURE__ */
|
|
2280
|
-
/* @__PURE__ */
|
|
2281
|
-
/* @__PURE__ */
|
|
2301
|
+
!hasSearched ? /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2302
|
+
/* @__PURE__ */ jsx24("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ jsx24(Search4, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2303
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
|
|
2304
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[14px] font-semibold text-text-primary", children: "Search to get started" }),
|
|
2305
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[13px] text-text-tertiary", children: "Use the search or filters above to find and add options." })
|
|
2282
2306
|
] })
|
|
2283
|
-
] }) : /* @__PURE__ */
|
|
2284
|
-
/* @__PURE__ */
|
|
2307
|
+
] }) : /* @__PURE__ */ jsxs22("div", { className: "overflow-hidden rounded-control border border-border-default", children: [
|
|
2308
|
+
/* @__PURE__ */ jsxs22(
|
|
2285
2309
|
"div",
|
|
2286
2310
|
{
|
|
2287
2311
|
className: cx8(
|
|
@@ -2289,7 +2313,7 @@ function SelectionPicker({
|
|
|
2289
2313
|
rowGridCols
|
|
2290
2314
|
),
|
|
2291
2315
|
children: [
|
|
2292
|
-
/* @__PURE__ */
|
|
2316
|
+
/* @__PURE__ */ jsx24(
|
|
2293
2317
|
CheckBox,
|
|
2294
2318
|
{
|
|
2295
2319
|
checked: allSelected,
|
|
@@ -2300,18 +2324,18 @@ function SelectionPicker({
|
|
|
2300
2324
|
testId: testIdPrefix && `${testIdPrefix}-select-all`
|
|
2301
2325
|
}
|
|
2302
2326
|
),
|
|
2303
|
-
/* @__PURE__ */
|
|
2304
|
-
showInfoColumn && /* @__PURE__ */
|
|
2327
|
+
/* @__PURE__ */ jsx24("div", { className: cx8("grid gap-2", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ jsx24("span", { className: c.className, children: c.header }, c.key)) }),
|
|
2328
|
+
showInfoColumn && /* @__PURE__ */ jsx24("span", { className: "text-right", children: "Info" })
|
|
2305
2329
|
]
|
|
2306
2330
|
}
|
|
2307
2331
|
),
|
|
2308
|
-
/* @__PURE__ */
|
|
2332
|
+
/* @__PURE__ */ jsx24("div", { className: "max-h-[360px] overflow-y-auto", children: loading ? /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center py-6", role: "status", "aria-label": "Loading", children: /* @__PURE__ */ jsx24(Loader2, { size: 18, className: "animate-spin text-text-tertiary", "aria-hidden": "true" }) }) : error ? /* @__PURE__ */ jsx24("p", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: errorMessage }) : rows.length === 0 ? /* @__PURE__ */ jsx24("div", { className: "px-3 py-8 text-center text-[13px] text-text-tertiary", children: "No matches. Try a different search or filter." }) : rows.map((row) => {
|
|
2309
2333
|
const isSel = selectedIds.has(row.id);
|
|
2310
2334
|
const isLocked = lockedIds?.has(row.id) ?? false;
|
|
2311
2335
|
const kids = getChildren?.(row);
|
|
2312
2336
|
const isOpen = expanded.has(row.id);
|
|
2313
|
-
return /* @__PURE__ */
|
|
2314
|
-
/* @__PURE__ */
|
|
2337
|
+
return /* @__PURE__ */ jsxs22("div", { className: "border-t border-border-default/60 first:border-t-0", children: [
|
|
2338
|
+
/* @__PURE__ */ jsxs22(
|
|
2315
2339
|
"div",
|
|
2316
2340
|
{
|
|
2317
2341
|
onClick: isLocked ? void 0 : () => toggleRow(row),
|
|
@@ -2323,7 +2347,7 @@ function SelectionPicker({
|
|
|
2323
2347
|
!isLocked && isSel && "opacity-60"
|
|
2324
2348
|
),
|
|
2325
2349
|
children: [
|
|
2326
|
-
isLocked ? /* @__PURE__ */
|
|
2350
|
+
isLocked ? /* @__PURE__ */ jsx24("span", { "aria-hidden": "true" }) : /* @__PURE__ */ jsx24(
|
|
2327
2351
|
CheckBox,
|
|
2328
2352
|
{
|
|
2329
2353
|
checked: isSel,
|
|
@@ -2332,8 +2356,8 @@ function SelectionPicker({
|
|
|
2332
2356
|
testId: testIdPrefix && `${testIdPrefix}-row-${slug4(row.id)}`
|
|
2333
2357
|
}
|
|
2334
2358
|
),
|
|
2335
|
-
/* @__PURE__ */
|
|
2336
|
-
showInfoColumn && /* @__PURE__ */
|
|
2359
|
+
/* @__PURE__ */ jsx24("div", { className: cx8("grid gap-2 text-[13px] text-text-primary", gridForColumns(columns)), children: columns.map((c) => /* @__PURE__ */ jsx24("span", { className: cx8("truncate", c.className), children: c.render(row) }, c.key)) }),
|
|
2360
|
+
showInfoColumn && /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-end", children: kids && kids.length > 0 ? /* @__PURE__ */ jsx24(
|
|
2337
2361
|
"button",
|
|
2338
2362
|
{
|
|
2339
2363
|
type: "button",
|
|
@@ -2347,28 +2371,28 @@ function SelectionPicker({
|
|
|
2347
2371
|
});
|
|
2348
2372
|
},
|
|
2349
2373
|
className: "flex h-7 w-7 items-center justify-center rounded-control text-text-secondary hover:bg-canvas hover:text-text-primary",
|
|
2350
|
-
children: /* @__PURE__ */
|
|
2374
|
+
children: /* @__PURE__ */ jsx24(ChevronRight3, { size: 15, className: cx8("transition-transform", isOpen && "rotate-90") })
|
|
2351
2375
|
}
|
|
2352
|
-
) : /* @__PURE__ */
|
|
2376
|
+
) : /* @__PURE__ */ jsx24(
|
|
2353
2377
|
"span",
|
|
2354
2378
|
{
|
|
2355
2379
|
className: "flex h-7 w-7 items-center justify-center text-text-tertiary",
|
|
2356
2380
|
title: "No additional details",
|
|
2357
|
-
children: /* @__PURE__ */
|
|
2381
|
+
children: /* @__PURE__ */ jsx24(Info2, { size: 14 })
|
|
2358
2382
|
}
|
|
2359
2383
|
) })
|
|
2360
2384
|
]
|
|
2361
2385
|
}
|
|
2362
2386
|
),
|
|
2363
|
-
isOpen && kids && /* @__PURE__ */
|
|
2387
|
+
isOpen && kids && /* @__PURE__ */ jsx24("div", { className: "bg-canvas/60 pb-1.5 pl-10 pr-3", children: kids.map((kid) => {
|
|
2364
2388
|
const kidSel = selectedIds.has(kid.id);
|
|
2365
|
-
return /* @__PURE__ */
|
|
2389
|
+
return /* @__PURE__ */ jsxs22(
|
|
2366
2390
|
"div",
|
|
2367
2391
|
{
|
|
2368
2392
|
className: "flex items-center justify-between gap-2 border-t border-border-default/40 py-2 first:border-t-0",
|
|
2369
2393
|
children: [
|
|
2370
|
-
/* @__PURE__ */
|
|
2371
|
-
/* @__PURE__ */
|
|
2394
|
+
/* @__PURE__ */ jsx24("span", { className: "truncate text-[13px] text-text-secondary", children: kid.name }),
|
|
2395
|
+
/* @__PURE__ */ jsxs22(
|
|
2372
2396
|
"button",
|
|
2373
2397
|
{
|
|
2374
2398
|
type: "button",
|
|
@@ -2379,7 +2403,7 @@ function SelectionPicker({
|
|
|
2379
2403
|
kidSel ? "text-text-tertiary" : "text-text-link hover:bg-subtle"
|
|
2380
2404
|
),
|
|
2381
2405
|
children: [
|
|
2382
|
-
kidSel ? /* @__PURE__ */
|
|
2406
|
+
kidSel ? /* @__PURE__ */ jsx24(Check6, { size: 13 }) : /* @__PURE__ */ jsx24(Plus, { size: 13 }),
|
|
2383
2407
|
kidSel ? "Added" : "Add"
|
|
2384
2408
|
]
|
|
2385
2409
|
}
|
|
@@ -2391,7 +2415,7 @@ function SelectionPicker({
|
|
|
2391
2415
|
}) })
|
|
2392
2416
|
] }, row.id);
|
|
2393
2417
|
}) }),
|
|
2394
|
-
!loading && !error && hasMore && /* @__PURE__ */
|
|
2418
|
+
!loading && !error && hasMore && /* @__PURE__ */ jsxs22(
|
|
2395
2419
|
"button",
|
|
2396
2420
|
{
|
|
2397
2421
|
type: "button",
|
|
@@ -2400,19 +2424,19 @@ function SelectionPicker({
|
|
|
2400
2424
|
"data-testid": testIdPrefix && `${testIdPrefix}-load-more`,
|
|
2401
2425
|
className: "flex w-full items-center justify-center gap-2 border-t border-border-default px-2 py-1.5 text-[13px] text-brand-primaryAction transition-colors hover:bg-subtle disabled:opacity-50",
|
|
2402
2426
|
children: [
|
|
2403
|
-
loadingMore ? /* @__PURE__ */
|
|
2427
|
+
loadingMore ? /* @__PURE__ */ jsx24(Loader2, { size: 13, className: "animate-spin", "aria-hidden": "true" }) : null,
|
|
2404
2428
|
loadingMore ? "Loading\u2026" : "Load more"
|
|
2405
2429
|
]
|
|
2406
2430
|
}
|
|
2407
2431
|
)
|
|
2408
2432
|
] })
|
|
2409
2433
|
] }),
|
|
2410
|
-
source === "lists" && /* @__PURE__ */
|
|
2411
|
-
/* @__PURE__ */
|
|
2412
|
-
accountLists && accountLists.length > 0 ? /* @__PURE__ */
|
|
2413
|
-
/* @__PURE__ */
|
|
2434
|
+
source === "lists" && /* @__PURE__ */ jsxs22("div", { className: "flex min-w-0 flex-col gap-3", children: [
|
|
2435
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[13px] text-text-secondary", children: "Select an account list to add all of its accounts at once. Your workspace stays in sync as the list is updated." }),
|
|
2436
|
+
accountLists && accountLists.length > 0 ? /* @__PURE__ */ jsxs22(Fragment4, { children: [
|
|
2437
|
+
/* @__PURE__ */ jsx24(ScrollFade, { className: "flex max-h-[396px] flex-col gap-2 overflow-y-auto pr-0.5", children: accountLists.map((list) => {
|
|
2414
2438
|
const on = (selectedListIds ?? []).includes(list.id);
|
|
2415
|
-
return /* @__PURE__ */
|
|
2439
|
+
return /* @__PURE__ */ jsxs22(
|
|
2416
2440
|
"button",
|
|
2417
2441
|
{
|
|
2418
2442
|
type: "button",
|
|
@@ -2424,19 +2448,19 @@ function SelectionPicker({
|
|
|
2424
2448
|
on ? "border-brand-primaryAction bg-brand-primarySoft" : "border-border-default bg-surface hover:bg-subtle"
|
|
2425
2449
|
),
|
|
2426
2450
|
children: [
|
|
2427
|
-
/* @__PURE__ */
|
|
2451
|
+
/* @__PURE__ */ jsx24(
|
|
2428
2452
|
"span",
|
|
2429
2453
|
{
|
|
2430
2454
|
className: cx8(
|
|
2431
2455
|
"flex h-5 w-5 shrink-0 items-center justify-center rounded-full",
|
|
2432
2456
|
on ? "text-brand-primaryAction" : "text-text-secondary"
|
|
2433
2457
|
),
|
|
2434
|
-
children: on ? /* @__PURE__ */
|
|
2458
|
+
children: on ? /* @__PURE__ */ jsx24(Check6, { size: 16 }) : /* @__PURE__ */ jsx24(Plus, { size: 16 })
|
|
2435
2459
|
}
|
|
2436
2460
|
),
|
|
2437
|
-
/* @__PURE__ */
|
|
2438
|
-
/* @__PURE__ */
|
|
2439
|
-
/* @__PURE__ */
|
|
2461
|
+
/* @__PURE__ */ jsxs22("span", { className: "min-w-0 flex-1", children: [
|
|
2462
|
+
/* @__PURE__ */ jsx24("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ jsx24("span", { className: "truncate text-[14px] font-medium text-text-primary", children: list.name }) }),
|
|
2463
|
+
/* @__PURE__ */ jsxs22("span", { className: "block truncate text-[12px] text-text-secondary", children: [
|
|
2440
2464
|
list.count,
|
|
2441
2465
|
" accounts \xB7 ",
|
|
2442
2466
|
list.entityTypes.join(", "),
|
|
@@ -2444,13 +2468,13 @@ function SelectionPicker({
|
|
|
2444
2468
|
formatListDate(list.updatedAt)
|
|
2445
2469
|
] })
|
|
2446
2470
|
] }),
|
|
2447
|
-
/* @__PURE__ */
|
|
2471
|
+
/* @__PURE__ */ jsx24("span", { className: cx8("shrink-0 text-[12px] font-medium", on ? "text-brand-primaryAction" : "text-text-secondary"), children: on ? "Added" : "Add" })
|
|
2448
2472
|
]
|
|
2449
2473
|
},
|
|
2450
2474
|
list.id
|
|
2451
2475
|
);
|
|
2452
2476
|
}) }),
|
|
2453
|
-
/* @__PURE__ */
|
|
2477
|
+
/* @__PURE__ */ jsxs22(
|
|
2454
2478
|
"p",
|
|
2455
2479
|
{
|
|
2456
2480
|
className: "border-t border-border-default pt-2 text-right text-[12px] font-medium text-text-tertiary",
|
|
@@ -2462,11 +2486,11 @@ function SelectionPicker({
|
|
|
2462
2486
|
]
|
|
2463
2487
|
}
|
|
2464
2488
|
)
|
|
2465
|
-
] }) : /* @__PURE__ */
|
|
2466
|
-
/* @__PURE__ */
|
|
2467
|
-
/* @__PURE__ */
|
|
2468
|
-
/* @__PURE__ */
|
|
2469
|
-
/* @__PURE__ */
|
|
2489
|
+
] }) : /* @__PURE__ */ jsxs22("div", { className: "flex flex-col items-center gap-3 rounded-card border border-dashed border-border-default py-10 text-center", children: [
|
|
2490
|
+
/* @__PURE__ */ jsx24("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-subtle", children: /* @__PURE__ */ jsx24(List, { size: 20, className: "text-text-tertiary", "aria-hidden": "true" }) }),
|
|
2491
|
+
/* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
|
|
2492
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[14px] font-semibold text-text-primary", children: "No account lists yet" }),
|
|
2493
|
+
/* @__PURE__ */ jsx24("p", { className: "text-[13px] text-text-tertiary", children: "Account lists set up for you will appear here." })
|
|
2470
2494
|
] })
|
|
2471
2495
|
] })
|
|
2472
2496
|
] })
|
|
@@ -2498,7 +2522,7 @@ function ScrollFade({ className, children }) {
|
|
|
2498
2522
|
[sync]
|
|
2499
2523
|
);
|
|
2500
2524
|
const mask = edges.top || edges.bottom ? `linear-gradient(to bottom, transparent 0, #000 ${edges.top ? EDGE_FADE : 0}px, #000 calc(100% - ${edges.bottom ? EDGE_FADE : 0}px), transparent 100%)` : void 0;
|
|
2501
|
-
return /* @__PURE__ */
|
|
2525
|
+
return /* @__PURE__ */ jsx24("div", { ref: attach, onScroll: sync, className, style: { maskImage: mask, WebkitMaskImage: mask }, children });
|
|
2502
2526
|
}
|
|
2503
2527
|
function formatListDate(iso) {
|
|
2504
2528
|
try {
|
|
@@ -2548,8 +2572,8 @@ function FilterDropdown({
|
|
|
2548
2572
|
const count = active.size;
|
|
2549
2573
|
const label = count === 0 ? filter.label : count === 1 ? [...active][0] : "Multiple";
|
|
2550
2574
|
const filterSlug = slug4(filter.label);
|
|
2551
|
-
return /* @__PURE__ */
|
|
2552
|
-
/* @__PURE__ */
|
|
2575
|
+
return /* @__PURE__ */ jsxs22("div", { className: "relative", children: [
|
|
2576
|
+
/* @__PURE__ */ jsxs22(
|
|
2553
2577
|
"button",
|
|
2554
2578
|
{
|
|
2555
2579
|
ref: btnRef,
|
|
@@ -2561,12 +2585,12 @@ function FilterDropdown({
|
|
|
2561
2585
|
className: "inline-flex h-9 items-center gap-1.5 whitespace-nowrap rounded-control border border-border-default bg-input px-3 text-[13px] font-medium text-text-secondary transition-colors hover:bg-subtle",
|
|
2562
2586
|
children: [
|
|
2563
2587
|
label,
|
|
2564
|
-
/* @__PURE__ */
|
|
2588
|
+
/* @__PURE__ */ jsx24(ChevronDown8, { size: 13, "aria-hidden": "true", className: cx8("transition-transform", open && "rotate-180") })
|
|
2565
2589
|
]
|
|
2566
2590
|
}
|
|
2567
2591
|
),
|
|
2568
2592
|
open && pos && createPortal4(
|
|
2569
|
-
/* @__PURE__ */
|
|
2593
|
+
/* @__PURE__ */ jsxs22(
|
|
2570
2594
|
"div",
|
|
2571
2595
|
{
|
|
2572
2596
|
ref: menuRef,
|
|
@@ -2575,9 +2599,9 @@ function FilterDropdown({
|
|
|
2575
2599
|
style: { top: pos.top, left: pos.left },
|
|
2576
2600
|
className: "fixed z-[80] min-w-[220px] rounded-card border border-border-default bg-surface p-2 shadow-overlay",
|
|
2577
2601
|
children: [
|
|
2578
|
-
searchable && /* @__PURE__ */
|
|
2579
|
-
/* @__PURE__ */
|
|
2580
|
-
/* @__PURE__ */
|
|
2602
|
+
searchable && /* @__PURE__ */ jsxs22("div", { className: "mb-1.5 flex h-8 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
2603
|
+
/* @__PURE__ */ jsx24(Search4, { size: 14, className: "shrink-0 text-text-secondary", "aria-hidden": "true" }),
|
|
2604
|
+
/* @__PURE__ */ jsx24(
|
|
2581
2605
|
"input",
|
|
2582
2606
|
{
|
|
2583
2607
|
autoFocus: true,
|
|
@@ -2588,14 +2612,14 @@ function FilterDropdown({
|
|
|
2588
2612
|
}
|
|
2589
2613
|
)
|
|
2590
2614
|
] }),
|
|
2591
|
-
/* @__PURE__ */
|
|
2615
|
+
/* @__PURE__ */ jsx24("div", { className: cx8("flex flex-col gap-0.5", searchable && "max-h-[240px] overflow-y-auto"), children: shownOptions.length === 0 ? /* @__PURE__ */ jsx24("p", { className: "px-2 py-3 text-center text-[12px] text-text-secondary", children: "No matches." }) : shownOptions.map((opt) => {
|
|
2592
2616
|
const on = active.has(opt);
|
|
2593
|
-
return /* @__PURE__ */
|
|
2617
|
+
return /* @__PURE__ */ jsxs22(
|
|
2594
2618
|
"label",
|
|
2595
2619
|
{
|
|
2596
2620
|
className: "flex cursor-pointer items-center gap-2 rounded-control px-2 py-1.5 text-[13px] text-text-primary hover:bg-subtle",
|
|
2597
2621
|
children: [
|
|
2598
|
-
/* @__PURE__ */
|
|
2622
|
+
/* @__PURE__ */ jsx24(
|
|
2599
2623
|
CheckBox,
|
|
2600
2624
|
{
|
|
2601
2625
|
checked: on,
|
|
@@ -2626,7 +2650,7 @@ function gridForColumns(columns) {
|
|
|
2626
2650
|
|
|
2627
2651
|
// src/PublisherBreakdownList.tsx
|
|
2628
2652
|
import { useState as useState10 } from "react";
|
|
2629
|
-
import { jsx as
|
|
2653
|
+
import { jsx as jsx25, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2630
2654
|
function cx9(...parts) {
|
|
2631
2655
|
return parts.filter(Boolean).join(" ");
|
|
2632
2656
|
}
|
|
@@ -2641,7 +2665,7 @@ function initials(name) {
|
|
|
2641
2665
|
return name.replace(/[^a-zA-Z0-9]/g, "").slice(0, 2).toUpperCase();
|
|
2642
2666
|
}
|
|
2643
2667
|
function Monogram({ name, size = 28 }) {
|
|
2644
|
-
return /* @__PURE__ */
|
|
2668
|
+
return /* @__PURE__ */ jsx25(
|
|
2645
2669
|
"span",
|
|
2646
2670
|
{
|
|
2647
2671
|
"aria-hidden": "true",
|
|
@@ -2652,12 +2676,12 @@ function Monogram({ name, size = 28 }) {
|
|
|
2652
2676
|
);
|
|
2653
2677
|
}
|
|
2654
2678
|
function BreakdownTag({ children }) {
|
|
2655
|
-
return /* @__PURE__ */
|
|
2679
|
+
return /* @__PURE__ */ jsx25("span", { className: "inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-[11px] font-medium text-text-secondary", children });
|
|
2656
2680
|
}
|
|
2657
2681
|
function DelayedTip({ label, children }) {
|
|
2658
|
-
return /* @__PURE__ */
|
|
2682
|
+
return /* @__PURE__ */ jsxs23("span", { className: "group/dt relative inline-flex", tabIndex: 0, "aria-label": label, children: [
|
|
2659
2683
|
children,
|
|
2660
|
-
/* @__PURE__ */
|
|
2684
|
+
/* @__PURE__ */ jsx25(
|
|
2661
2685
|
"span",
|
|
2662
2686
|
{
|
|
2663
2687
|
role: "tooltip",
|
|
@@ -2671,22 +2695,22 @@ var COL_CURRENT = 76;
|
|
|
2671
2695
|
var COL_PREVIOUS = 76;
|
|
2672
2696
|
var COL_YOY = 44;
|
|
2673
2697
|
function MetricListHeader({ className }) {
|
|
2674
|
-
return /* @__PURE__ */
|
|
2675
|
-
/* @__PURE__ */
|
|
2676
|
-
/* @__PURE__ */
|
|
2677
|
-
/* @__PURE__ */
|
|
2678
|
-
/* @__PURE__ */
|
|
2679
|
-
/* @__PURE__ */
|
|
2698
|
+
return /* @__PURE__ */ jsxs23("div", { className: cx9("flex items-baseline gap-2 pb-2", className), children: [
|
|
2699
|
+
/* @__PURE__ */ jsx25("span", { className: "flex-1" }),
|
|
2700
|
+
/* @__PURE__ */ jsxs23("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2701
|
+
/* @__PURE__ */ jsx25("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_CURRENT }, children: "Current" }),
|
|
2702
|
+
/* @__PURE__ */ jsx25(DelayedTip, { label: "Spend during the same time period one year ago.", children: /* @__PURE__ */ jsx25("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_PREVIOUS }, children: "Previous" }) }),
|
|
2703
|
+
/* @__PURE__ */ jsx25(DelayedTip, { label: "Percent change from this time period vs. the same time one year ago.", children: /* @__PURE__ */ jsx25("span", { className: "text-right text-[11px] font-medium text-text-tertiary", style: { width: COL_YOY }, children: "YoY" }) })
|
|
2680
2704
|
] })
|
|
2681
2705
|
] });
|
|
2682
2706
|
}
|
|
2683
2707
|
function MetricCells({ spendN, yoy }) {
|
|
2684
2708
|
const prior = priorYearAmt(spendN, yoy);
|
|
2685
2709
|
const up = yoy !== "NEW" && yoy >= 0;
|
|
2686
|
-
return /* @__PURE__ */
|
|
2687
|
-
/* @__PURE__ */
|
|
2688
|
-
/* @__PURE__ */
|
|
2689
|
-
/* @__PURE__ */
|
|
2710
|
+
return /* @__PURE__ */ jsxs23("span", { className: "flex shrink-0 items-center gap-2 pr-1.5", children: [
|
|
2711
|
+
/* @__PURE__ */ jsx25("span", { className: "text-right text-[12px] font-bold tabular-nums text-text-primary", style: { width: COL_CURRENT }, children: fmtM(spendN) }),
|
|
2712
|
+
/* @__PURE__ */ jsx25("span", { className: "text-right text-[12px] font-normal tabular-nums text-text-primary", style: { width: COL_PREVIOUS }, children: prior ?? "\u2014" }),
|
|
2713
|
+
/* @__PURE__ */ jsx25("span", { className: "flex justify-end", style: { width: COL_YOY }, children: yoy === "NEW" ? /* @__PURE__ */ jsx25("span", { className: "rounded-full bg-status-warning/15 px-1.5 text-[10px] font-semibold text-text-warning", children: "NEW" }) : /* @__PURE__ */ jsxs23("span", { className: cx9("text-right text-[12px] font-semibold tabular-nums", up ? "text-text-success" : "text-text-danger"), children: [
|
|
2690
2714
|
up ? "+" : "\u2212",
|
|
2691
2715
|
Math.abs(yoy),
|
|
2692
2716
|
"%"
|
|
@@ -2697,35 +2721,35 @@ function PublisherBreakdownList({ rows, defaultVisibleCount = 10, padded = true,
|
|
|
2697
2721
|
const [showAll, setShowAll] = useState10(false);
|
|
2698
2722
|
const visible = showAll ? rows : rows.slice(0, defaultVisibleCount);
|
|
2699
2723
|
const rowPad = padded ? "px-5" : "";
|
|
2700
|
-
return /* @__PURE__ */
|
|
2701
|
-
/* @__PURE__ */
|
|
2702
|
-
/* @__PURE__ */
|
|
2703
|
-
visible.map((p) => /* @__PURE__ */
|
|
2704
|
-
/* @__PURE__ */
|
|
2705
|
-
renderLogo ? renderLogo(p) : /* @__PURE__ */
|
|
2706
|
-
/* @__PURE__ */
|
|
2707
|
-
/* @__PURE__ */
|
|
2708
|
-
/* @__PURE__ */
|
|
2709
|
-
p.tags.map((t) => /* @__PURE__ */
|
|
2724
|
+
return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col", children: [
|
|
2725
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-col", children: [
|
|
2726
|
+
/* @__PURE__ */ jsx25(MetricListHeader, { className: rowPad }),
|
|
2727
|
+
visible.map((p) => /* @__PURE__ */ jsxs23("div", { className: cx9("flex items-center justify-between gap-3 border-t border-border-default/60 py-2.5 first:border-t-0", rowPad), children: [
|
|
2728
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex min-w-0 items-center gap-2.5", children: [
|
|
2729
|
+
renderLogo ? renderLogo(p) : /* @__PURE__ */ jsx25(Monogram, { name: p.brand, size: 28 }),
|
|
2730
|
+
/* @__PURE__ */ jsxs23("div", { className: "min-w-0", children: [
|
|
2731
|
+
/* @__PURE__ */ jsxs23("div", { className: "flex flex-wrap items-center gap-1.5", children: [
|
|
2732
|
+
/* @__PURE__ */ jsx25("span", { className: "text-[14px] font-semibold text-text-primary", children: p.brand }),
|
|
2733
|
+
p.tags.map((t) => /* @__PURE__ */ jsx25(BreakdownTag, { children: t }, t))
|
|
2710
2734
|
] }),
|
|
2711
|
-
/* @__PURE__ */
|
|
2735
|
+
/* @__PURE__ */ jsx25("div", { className: "truncate text-[11.5px] text-text-tertiary", children: p.owner })
|
|
2712
2736
|
] })
|
|
2713
2737
|
] }),
|
|
2714
|
-
/* @__PURE__ */
|
|
2738
|
+
/* @__PURE__ */ jsx25(MetricCells, { spendN: p.spendN, yoy: p.yoy })
|
|
2715
2739
|
] }, p.brand))
|
|
2716
2740
|
] }),
|
|
2717
|
-
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */
|
|
2718
|
-
/* @__PURE__ */
|
|
2741
|
+
rows.length > defaultVisibleCount && (viewAllHref ? /* @__PURE__ */ jsx25("div", { className: cx9("border-t border-border-default py-3", rowPad), children: /* @__PURE__ */ jsx25("a", { href: viewAllHref, className: "text-[12px] font-semibold text-text-link hover:underline", children: "See all publishers" }) }) : /* @__PURE__ */ jsxs23("div", { className: cx9("flex items-center gap-2 border-t border-border-default py-3 text-[12px] text-text-tertiary", rowPad), children: [
|
|
2742
|
+
/* @__PURE__ */ jsxs23("span", { children: [
|
|
2719
2743
|
"Showing ",
|
|
2720
2744
|
visible.length,
|
|
2721
2745
|
" of ",
|
|
2722
2746
|
rows.length
|
|
2723
2747
|
] }),
|
|
2724
|
-
!showAll ? /* @__PURE__ */
|
|
2748
|
+
!showAll ? /* @__PURE__ */ jsxs23("button", { type: "button", onClick: () => setShowAll(true), className: "font-semibold text-text-link hover:underline", children: [
|
|
2725
2749
|
"See all (",
|
|
2726
2750
|
rows.length - defaultVisibleCount,
|
|
2727
2751
|
" more)"
|
|
2728
|
-
] }) : /* @__PURE__ */
|
|
2752
|
+
] }) : /* @__PURE__ */ jsx25("button", { type: "button", onClick: () => setShowAll(false), className: "font-semibold text-text-link hover:underline", children: "Show less" })
|
|
2729
2753
|
] }))
|
|
2730
2754
|
] });
|
|
2731
2755
|
}
|
|
@@ -2735,44 +2759,76 @@ import { forwardRef as forwardRef2 } from "react";
|
|
|
2735
2759
|
import { Slot } from "@radix-ui/react-slot";
|
|
2736
2760
|
import { cva } from "class-variance-authority";
|
|
2737
2761
|
import { Loader2 as Loader22 } from "lucide-react";
|
|
2738
|
-
import { jsx as
|
|
2762
|
+
import { jsx as jsx26, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2739
2763
|
var buttonVariants = cva(
|
|
2740
|
-
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control
|
|
2764
|
+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-control transition-all duration-(--mr-motion-duration-interactive) ease-interactive disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-hidden focus-visible:ring-0",
|
|
2741
2765
|
{
|
|
2742
2766
|
variants: {
|
|
2743
2767
|
variant: {
|
|
2744
2768
|
primary: "bg-brand-primaryAction text-brand-onprimary hover:brightness-110",
|
|
2745
|
-
|
|
2769
|
+
// border-strong, not border-interactive. The interactive token is #6b6358
|
|
2770
|
+
// -- 5.9:1 against the surface, nearly as dark as body text -- which is
|
|
2771
|
+
// right for an input the eye must find in a form, and far too heavy for
|
|
2772
|
+
// a button sitting beside other buttons. It reads heaviest on icon-only,
|
|
2773
|
+
// where there is least fill inside the line to balance it.
|
|
2774
|
+
secondary: "bg-surface text-text-primary border border-border-strong hover:bg-subtle hover:border-border-interactive",
|
|
2746
2775
|
ghost: "text-text-primary hover:bg-subtle",
|
|
2747
2776
|
danger: "bg-status-danger text-status-onstatus hover:brightness-110",
|
|
2777
|
+
// Quiet destructive: neutral at rest, red only on hover. This is what
|
|
2778
|
+
// the product actually reaches for -- nearly every hand-rolled
|
|
2779
|
+
// destructive control is an icon that reddens on hover, while filled
|
|
2780
|
+
// `danger` is right only for the confirm button in a dialog the user
|
|
2781
|
+
// already opened.
|
|
2782
|
+
dangerGhost: "text-text-secondary hover:bg-subtle hover:text-text-danger",
|
|
2748
2783
|
link: "text-text-link underline-offset-4 hover:underline px-0"
|
|
2749
2784
|
},
|
|
2785
|
+
// Type scales with the box. One size across all three left xs cramped --
|
|
2786
|
+
// 14px inside a 24px box leaves five pixels above and below, so the label
|
|
2787
|
+
// fills the button instead of sitting in it.
|
|
2750
2788
|
size: {
|
|
2789
|
+
xs: "h-6 px-2 text-xs",
|
|
2751
2790
|
sm: "h-8 px-3 text-sm",
|
|
2752
|
-
md: "h-10 px-4 text-sm"
|
|
2753
|
-
|
|
2754
|
-
|
|
2791
|
+
md: "h-10 px-4 text-sm"
|
|
2792
|
+
},
|
|
2793
|
+
// Shape is orthogonal to size. As a fourth SIZE, `icon` could only ever
|
|
2794
|
+
// be one dimension, so an icon button never lined up with the labelled
|
|
2795
|
+
// buttons beside it in a toolbar. As a shape it squares the box at
|
|
2796
|
+
// whichever height you picked.
|
|
2797
|
+
iconOnly: {
|
|
2798
|
+
true: "p-0",
|
|
2799
|
+
false: ""
|
|
2755
2800
|
}
|
|
2756
2801
|
},
|
|
2802
|
+
compoundVariants: [
|
|
2803
|
+
{ size: "xs", iconOnly: true, class: "w-6" },
|
|
2804
|
+
{ size: "sm", iconOnly: true, class: "w-8" },
|
|
2805
|
+
{ size: "md", iconOnly: true, class: "w-10" },
|
|
2806
|
+
// A boxed button is a target you aim at, so its label carries the weight
|
|
2807
|
+
// of one. `link` sits inline in a sentence, where semibold reads as
|
|
2808
|
+
// emphasis on the words rather than as a control.
|
|
2809
|
+
{ variant: ["primary", "secondary", "ghost", "danger", "dangerGhost"], class: "font-semibold" },
|
|
2810
|
+
{ variant: "link", class: "font-medium h-auto p-0" }
|
|
2811
|
+
],
|
|
2757
2812
|
defaultVariants: {
|
|
2758
2813
|
variant: "primary",
|
|
2759
|
-
size: "md"
|
|
2814
|
+
size: "md",
|
|
2815
|
+
iconOnly: false
|
|
2760
2816
|
}
|
|
2761
2817
|
}
|
|
2762
2818
|
);
|
|
2763
2819
|
var Button = forwardRef2(
|
|
2764
|
-
({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2820
|
+
({ className, variant, size, iconOnly, asChild = false, loading = false, disabled, children, ...props }, ref) => {
|
|
2765
2821
|
const shared = {
|
|
2766
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
2822
|
+
className: cn(buttonVariants({ variant, size, iconOnly, className })),
|
|
2767
2823
|
disabled: disabled || loading,
|
|
2768
2824
|
"aria-busy": loading || void 0,
|
|
2769
2825
|
...props
|
|
2770
2826
|
};
|
|
2771
2827
|
if (asChild) {
|
|
2772
|
-
return /* @__PURE__ */
|
|
2828
|
+
return /* @__PURE__ */ jsx26(Slot, { ref, ...shared, children });
|
|
2773
2829
|
}
|
|
2774
|
-
return /* @__PURE__ */
|
|
2775
|
-
loading && /* @__PURE__ */
|
|
2830
|
+
return /* @__PURE__ */ jsxs24("button", { ref, ...shared, children: [
|
|
2831
|
+
loading && /* @__PURE__ */ jsx26(Loader22, { className: "size-4 shrink-0 animate-spin", "aria-hidden": "true" }),
|
|
2776
2832
|
children
|
|
2777
2833
|
] });
|
|
2778
2834
|
}
|
|
@@ -2780,14 +2836,14 @@ var Button = forwardRef2(
|
|
|
2780
2836
|
Button.displayName = "Button";
|
|
2781
2837
|
|
|
2782
2838
|
// src/FilterDropdownFooter.tsx
|
|
2783
|
-
import { jsx as
|
|
2839
|
+
import { jsx as jsx27, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2784
2840
|
function FilterDropdownFooter({
|
|
2785
2841
|
onClear,
|
|
2786
2842
|
onApply,
|
|
2787
2843
|
clearLabel = "Clear all",
|
|
2788
2844
|
applyLabel = "Apply"
|
|
2789
2845
|
}) {
|
|
2790
|
-
return /* @__PURE__ */
|
|
2846
|
+
return /* @__PURE__ */ jsxs25(
|
|
2791
2847
|
"div",
|
|
2792
2848
|
{
|
|
2793
2849
|
className: cn(
|
|
@@ -2795,8 +2851,8 @@ function FilterDropdownFooter({
|
|
|
2795
2851
|
onClear ? "justify-between" : "justify-end"
|
|
2796
2852
|
),
|
|
2797
2853
|
children: [
|
|
2798
|
-
onClear && /* @__PURE__ */
|
|
2799
|
-
/* @__PURE__ */
|
|
2854
|
+
onClear && /* @__PURE__ */ jsx27(Button, { type: "button", variant: "ghost", size: "sm", onClick: onClear, children: clearLabel }),
|
|
2855
|
+
/* @__PURE__ */ jsx27(Button, { type: "button", variant: "primary", size: "sm", onClick: onApply, children: applyLabel })
|
|
2800
2856
|
]
|
|
2801
2857
|
}
|
|
2802
2858
|
);
|
|
@@ -2805,7 +2861,7 @@ function FilterDropdownFooter({
|
|
|
2805
2861
|
// src/NameListModal.tsx
|
|
2806
2862
|
import { useEffect as useEffect10, useState as useState11 } from "react";
|
|
2807
2863
|
import { createPortal as createPortal5 } from "react-dom";
|
|
2808
|
-
import { jsx as
|
|
2864
|
+
import { jsx as jsx28, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2809
2865
|
function NameListModal({
|
|
2810
2866
|
title,
|
|
2811
2867
|
initialName,
|
|
@@ -2830,12 +2886,12 @@ function NameListModal({
|
|
|
2830
2886
|
// bg-scrim, not a literal: design-tokens gained a scrim token in 2.5.0.
|
|
2831
2887
|
// No in-data-[theme=dark] override needed any more -- the token redefines
|
|
2832
2888
|
// itself under that attribute in dark.css, so one class covers both themes.
|
|
2833
|
-
/* @__PURE__ */
|
|
2889
|
+
/* @__PURE__ */ jsx28(
|
|
2834
2890
|
"div",
|
|
2835
2891
|
{
|
|
2836
2892
|
className: "fixed inset-0 z-70 flex items-center justify-center bg-scrim px-4",
|
|
2837
2893
|
onMouseDown: (e) => e.target === e.currentTarget && onCancel(),
|
|
2838
|
-
children: /* @__PURE__ */
|
|
2894
|
+
children: /* @__PURE__ */ jsxs26(
|
|
2839
2895
|
"div",
|
|
2840
2896
|
{
|
|
2841
2897
|
role: "dialog",
|
|
@@ -2843,10 +2899,10 @@ function NameListModal({
|
|
|
2843
2899
|
"aria-label": title,
|
|
2844
2900
|
className: "w-full max-w-[420px] rounded-card border border-border-default bg-surface p-5 shadow-overlay",
|
|
2845
2901
|
children: [
|
|
2846
|
-
/* @__PURE__ */
|
|
2847
|
-
/* @__PURE__ */
|
|
2848
|
-
/* @__PURE__ */
|
|
2849
|
-
/* @__PURE__ */
|
|
2902
|
+
/* @__PURE__ */ jsx28("h2", { className: "text-[16px] font-semibold text-text-primary", children: title }),
|
|
2903
|
+
/* @__PURE__ */ jsxs26("div", { className: "mt-4 flex flex-col gap-1.5", children: [
|
|
2904
|
+
/* @__PURE__ */ jsx28("label", { htmlFor: "account-list-name", className: "text-[12px] font-medium text-text-secondary", children: fieldLabel }),
|
|
2905
|
+
/* @__PURE__ */ jsx28(
|
|
2850
2906
|
"input",
|
|
2851
2907
|
{
|
|
2852
2908
|
id: "account-list-name",
|
|
@@ -2858,13 +2914,13 @@ function NameListModal({
|
|
|
2858
2914
|
}
|
|
2859
2915
|
)
|
|
2860
2916
|
] }),
|
|
2861
|
-
options && options.length > 0 && /* @__PURE__ */
|
|
2862
|
-
/* @__PURE__ */
|
|
2917
|
+
options && options.length > 0 && /* @__PURE__ */ jsx28("div", { className: "mt-4 flex flex-col gap-2.5", children: options.map((o) => /* @__PURE__ */ jsxs26("label", { className: "flex cursor-pointer items-center gap-2.5 text-[13px] text-text-primary", children: [
|
|
2918
|
+
/* @__PURE__ */ jsx28(CheckBox, { checked: !!checked[o.key], onChange: () => toggle(o.key), ariaLabel: o.label }),
|
|
2863
2919
|
o.label
|
|
2864
2920
|
] }, o.key)) }),
|
|
2865
|
-
/* @__PURE__ */
|
|
2866
|
-
/* @__PURE__ */
|
|
2867
|
-
/* @__PURE__ */
|
|
2921
|
+
/* @__PURE__ */ jsxs26("div", { className: "mt-5 flex items-center justify-end gap-2", children: [
|
|
2922
|
+
/* @__PURE__ */ jsx28(Button, { variant: "secondary", onClick: onCancel, children: "Cancel" }),
|
|
2923
|
+
/* @__PURE__ */ jsx28(Button, { disabled: !name.trim(), onClick: () => onSubmit(name.trim(), checked), children: submitLabel })
|
|
2868
2924
|
] })
|
|
2869
2925
|
]
|
|
2870
2926
|
}
|
|
@@ -2876,7 +2932,7 @@ function NameListModal({
|
|
|
2876
2932
|
}
|
|
2877
2933
|
|
|
2878
2934
|
// src/ChipTrigger.tsx
|
|
2879
|
-
import { jsx as
|
|
2935
|
+
import { jsx as jsx29, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2880
2936
|
function chipTriggerClass(variant = "box") {
|
|
2881
2937
|
return cn(
|
|
2882
2938
|
"flex h-11 items-center gap-2 rounded-control border bg-input px-2.5 text-text-secondary transition-colors hover:bg-subtle hover:text-text-primary focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-border-focus",
|
|
@@ -2887,13 +2943,13 @@ function chipTriggerClass(variant = "box") {
|
|
|
2887
2943
|
);
|
|
2888
2944
|
}
|
|
2889
2945
|
function ChipContent({ caption, value, icon }) {
|
|
2890
|
-
const stack = /* @__PURE__ */
|
|
2891
|
-
/* @__PURE__ */
|
|
2892
|
-
/* @__PURE__ */
|
|
2946
|
+
const stack = /* @__PURE__ */ jsxs27("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
2947
|
+
/* @__PURE__ */ jsx29("span", { className: "text-[10px] uppercase tracking-wide text-text-tertiary", children: caption }),
|
|
2948
|
+
/* @__PURE__ */ jsx29("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
2893
2949
|
] });
|
|
2894
2950
|
if (icon) {
|
|
2895
|
-
return /* @__PURE__ */
|
|
2896
|
-
/* @__PURE__ */
|
|
2951
|
+
return /* @__PURE__ */ jsxs27("span", { className: "flex items-center gap-2", children: [
|
|
2952
|
+
/* @__PURE__ */ jsx29("span", { className: "shrink-0 text-text-tertiary", children: icon }),
|
|
2897
2953
|
stack
|
|
2898
2954
|
] });
|
|
2899
2955
|
}
|
|
@@ -2902,11 +2958,11 @@ function ChipContent({ caption, value, icon }) {
|
|
|
2902
2958
|
|
|
2903
2959
|
// src/FilterChipBar.tsx
|
|
2904
2960
|
import { CircleSlash, X as X3 } from "lucide-react";
|
|
2905
|
-
import { jsx as
|
|
2961
|
+
import { jsx as jsx30, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2906
2962
|
function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
2907
2963
|
if (chips.length === 0) return null;
|
|
2908
|
-
return /* @__PURE__ */
|
|
2909
|
-
chips.map((c) => /* @__PURE__ */
|
|
2964
|
+
return /* @__PURE__ */ jsxs28("div", { className: "flex flex-wrap items-center gap-1.5 border-t border-border-default pt-2.5", children: [
|
|
2965
|
+
chips.map((c) => /* @__PURE__ */ jsx30(
|
|
2910
2966
|
Chip,
|
|
2911
2967
|
{
|
|
2912
2968
|
label: c.label,
|
|
@@ -2916,7 +2972,7 @@ function FilterChipBar({ chips, onRemove, onClearAll, parkedKeys }) {
|
|
|
2916
2972
|
},
|
|
2917
2973
|
c.key
|
|
2918
2974
|
)),
|
|
2919
|
-
/* @__PURE__ */
|
|
2975
|
+
/* @__PURE__ */ jsx30("button", { type: "button", onClick: onClearAll, className: "ml-1 text-[12px] font-medium text-text-link hover:underline", children: "Clear all" })
|
|
2920
2976
|
] });
|
|
2921
2977
|
}
|
|
2922
2978
|
function Chip({
|
|
@@ -2925,8 +2981,8 @@ function Chip({
|
|
|
2925
2981
|
parked,
|
|
2926
2982
|
onRemove
|
|
2927
2983
|
}) {
|
|
2928
|
-
return /* @__PURE__ */
|
|
2929
|
-
/* @__PURE__ */
|
|
2984
|
+
return /* @__PURE__ */ jsxs28("span", { className: "group relative inline-flex", children: [
|
|
2985
|
+
/* @__PURE__ */ jsxs28(
|
|
2930
2986
|
"span",
|
|
2931
2987
|
{
|
|
2932
2988
|
className: cn(
|
|
@@ -2938,22 +2994,22 @@ function Chip({
|
|
|
2938
2994
|
) : "bg-subtle text-text-secondary ring-transparent group-hover:bg-border-default group-hover:text-text-primary group-hover:ring-border-interactive"
|
|
2939
2995
|
),
|
|
2940
2996
|
children: [
|
|
2941
|
-
parked && /* @__PURE__ */
|
|
2997
|
+
parked && /* @__PURE__ */ jsx30(CircleSlash, { size: 11, "aria-hidden": "true", className: "shrink-0 text-text-tertiary" }),
|
|
2942
2998
|
label,
|
|
2943
|
-
/* @__PURE__ */
|
|
2999
|
+
/* @__PURE__ */ jsx30(
|
|
2944
3000
|
"button",
|
|
2945
3001
|
{
|
|
2946
3002
|
type: "button",
|
|
2947
3003
|
onClick: onRemove,
|
|
2948
3004
|
"aria-label": `Remove ${groupLabel}: ${label}`,
|
|
2949
3005
|
className: "text-text-tertiary transition-colors hover:text-text-primary",
|
|
2950
|
-
children: /* @__PURE__ */
|
|
3006
|
+
children: /* @__PURE__ */ jsx30(X3, { size: 12 })
|
|
2951
3007
|
}
|
|
2952
3008
|
)
|
|
2953
3009
|
]
|
|
2954
3010
|
}
|
|
2955
3011
|
),
|
|
2956
|
-
/* @__PURE__ */
|
|
3012
|
+
/* @__PURE__ */ jsx30(
|
|
2957
3013
|
"span",
|
|
2958
3014
|
{
|
|
2959
3015
|
role: "tooltip",
|
|
@@ -2966,10 +3022,10 @@ function Chip({
|
|
|
2966
3022
|
|
|
2967
3023
|
// src/SortButton.tsx
|
|
2968
3024
|
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
|
|
2969
|
-
import { jsx as
|
|
3025
|
+
import { jsx as jsx31, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2970
3026
|
function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
2971
3027
|
const active = !disabled && sort.key === sortKey;
|
|
2972
|
-
return /* @__PURE__ */
|
|
3028
|
+
return /* @__PURE__ */ jsxs29(
|
|
2973
3029
|
"button",
|
|
2974
3030
|
{
|
|
2975
3031
|
type: "button",
|
|
@@ -2997,7 +3053,7 @@ function SortButton({ label, sortKey, sort, onSort, disabled = false }) {
|
|
|
2997
3053
|
),
|
|
2998
3054
|
children: [
|
|
2999
3055
|
label,
|
|
3000
|
-
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */
|
|
3056
|
+
!disabled && (active ? sort.dir === "asc" ? /* @__PURE__ */ jsx31(ArrowUp, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx31(ArrowDown, { size: 12, className: "shrink-0 text-brand-primaryAction" }) : /* @__PURE__ */ jsx31(
|
|
3001
3057
|
ArrowUpDown,
|
|
3002
3058
|
{
|
|
3003
3059
|
size: 12,
|
|
@@ -3021,7 +3077,7 @@ function sortProp(sort) {
|
|
|
3021
3077
|
|
|
3022
3078
|
// src/Pager.tsx
|
|
3023
3079
|
import { ChevronLeft as ChevronLeft3, ChevronRight as ChevronRight4 } from "lucide-react";
|
|
3024
|
-
import { jsx as
|
|
3080
|
+
import { jsx as jsx32, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
3025
3081
|
function pageWindow(current, total) {
|
|
3026
3082
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
3027
3083
|
const keep = /* @__PURE__ */ new Set([1, total, current, current - 1, current + 1]);
|
|
@@ -3037,8 +3093,8 @@ function pageWindow(current, total) {
|
|
|
3037
3093
|
}
|
|
3038
3094
|
function Pager({ page, totalPages, onPage }) {
|
|
3039
3095
|
const btn = "flex h-8 min-w-8 items-center justify-center rounded-control px-2 text-[13px] transition-colors";
|
|
3040
|
-
return /* @__PURE__ */
|
|
3041
|
-
/* @__PURE__ */
|
|
3096
|
+
return /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1", children: [
|
|
3097
|
+
/* @__PURE__ */ jsx32(
|
|
3042
3098
|
"button",
|
|
3043
3099
|
{
|
|
3044
3100
|
type: "button",
|
|
@@ -3046,11 +3102,11 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3046
3102
|
disabled: page === 1,
|
|
3047
3103
|
"aria-label": "Previous page",
|
|
3048
3104
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
3049
|
-
children: /* @__PURE__ */
|
|
3105
|
+
children: /* @__PURE__ */ jsx32(ChevronLeft3, { size: 16 })
|
|
3050
3106
|
}
|
|
3051
3107
|
),
|
|
3052
3108
|
pageWindow(page, totalPages).map(
|
|
3053
|
-
(p) => typeof p === "string" ? /* @__PURE__ */
|
|
3109
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ jsx32("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx32(
|
|
3054
3110
|
"button",
|
|
3055
3111
|
{
|
|
3056
3112
|
type: "button",
|
|
@@ -3065,7 +3121,7 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3065
3121
|
p
|
|
3066
3122
|
)
|
|
3067
3123
|
),
|
|
3068
|
-
/* @__PURE__ */
|
|
3124
|
+
/* @__PURE__ */ jsx32(
|
|
3069
3125
|
"button",
|
|
3070
3126
|
{
|
|
3071
3127
|
type: "button",
|
|
@@ -3073,14 +3129,14 @@ function Pager({ page, totalPages, onPage }) {
|
|
|
3073
3129
|
disabled: page === totalPages,
|
|
3074
3130
|
"aria-label": "Next page",
|
|
3075
3131
|
className: cn(btn, "text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"),
|
|
3076
|
-
children: /* @__PURE__ */
|
|
3132
|
+
children: /* @__PURE__ */ jsx32(ChevronRight4, { size: 16 })
|
|
3077
3133
|
}
|
|
3078
3134
|
)
|
|
3079
3135
|
] });
|
|
3080
3136
|
}
|
|
3081
3137
|
|
|
3082
3138
|
// src/WorkspaceAvatar.tsx
|
|
3083
|
-
import { jsx as
|
|
3139
|
+
import { jsx as jsx33 } from "react/jsx-runtime";
|
|
3084
3140
|
function workspaceInitials(name) {
|
|
3085
3141
|
const words = name.trim().split(/\s+/).filter(Boolean);
|
|
3086
3142
|
if (words.length === 0) return "\xB7";
|
|
@@ -3096,7 +3152,7 @@ var SIZES = {
|
|
|
3096
3152
|
lg: "h-11 w-11 text-[15px]"
|
|
3097
3153
|
};
|
|
3098
3154
|
function WorkspaceAvatar({ name, size = "md" }) {
|
|
3099
|
-
return /* @__PURE__ */
|
|
3155
|
+
return /* @__PURE__ */ jsx33(
|
|
3100
3156
|
"span",
|
|
3101
3157
|
{
|
|
3102
3158
|
"aria-hidden": "true",
|
|
@@ -3110,13 +3166,19 @@ function WorkspaceAvatar({ name, size = "md" }) {
|
|
|
3110
3166
|
}
|
|
3111
3167
|
|
|
3112
3168
|
// src/Tag.tsx
|
|
3113
|
-
import { jsx as
|
|
3169
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
3114
3170
|
function Tag({ children, className }) {
|
|
3115
|
-
return /* @__PURE__ */
|
|
3171
|
+
return /* @__PURE__ */ jsx34(
|
|
3116
3172
|
"span",
|
|
3117
3173
|
{
|
|
3118
3174
|
className: cn(
|
|
3119
|
-
|
|
3175
|
+
// text-micro and tertiary ink. The component used to sit at 11px in
|
|
3176
|
+
// secondary -- a step darker than the ten hand-rolled copies the audit
|
|
3177
|
+
// found, which had independently drifted to tertiary. Ten people
|
|
3178
|
+
// reaching for "quieter" is worth more than the component's original
|
|
3179
|
+
// guess: a tag names what a row IS, which is background to the row
|
|
3180
|
+
// itself rather than part of it.
|
|
3181
|
+
"inline-flex items-center whitespace-nowrap rounded-full bg-subtle px-2 py-0.5 text-micro font-medium text-text-tertiary",
|
|
3120
3182
|
className
|
|
3121
3183
|
),
|
|
3122
3184
|
children
|
|
@@ -3126,7 +3188,7 @@ function Tag({ children, className }) {
|
|
|
3126
3188
|
|
|
3127
3189
|
// src/TablePagination.tsx
|
|
3128
3190
|
import { ChevronDown as ChevronDown9, ChevronFirst, ChevronLast, ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight5 } from "lucide-react";
|
|
3129
|
-
import { jsx as
|
|
3191
|
+
import { jsx as jsx35, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3130
3192
|
function TablePagination({
|
|
3131
3193
|
page,
|
|
3132
3194
|
perPage,
|
|
@@ -3146,20 +3208,20 @@ function TablePagination({
|
|
|
3146
3208
|
btn,
|
|
3147
3209
|
"text-text-secondary hover:bg-subtle hover:text-text-primary disabled:pointer-events-none disabled:opacity-30"
|
|
3148
3210
|
);
|
|
3149
|
-
return /* @__PURE__ */
|
|
3150
|
-
/* @__PURE__ */
|
|
3151
|
-
/* @__PURE__ */
|
|
3152
|
-
/* @__PURE__ */
|
|
3211
|
+
return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-wrap items-center justify-between gap-x-4 gap-y-2", className), children: [
|
|
3212
|
+
/* @__PURE__ */ jsxs31("label", { className: "flex items-center gap-2 text-[13px] text-text-secondary", children: [
|
|
3213
|
+
/* @__PURE__ */ jsxs31("span", { className: "relative", children: [
|
|
3214
|
+
/* @__PURE__ */ jsx35(
|
|
3153
3215
|
"select",
|
|
3154
3216
|
{
|
|
3155
3217
|
value: perPage,
|
|
3156
3218
|
onChange: (e) => onPerPageChange(Number(e.target.value)),
|
|
3157
3219
|
"aria-label": "Items per page",
|
|
3158
3220
|
className: "appearance-none rounded-control border border-border-default 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",
|
|
3159
|
-
children: perPageOptions.map((n) => /* @__PURE__ */
|
|
3221
|
+
children: perPageOptions.map((n) => /* @__PURE__ */ jsx35("option", { value: n, children: n }, n))
|
|
3160
3222
|
}
|
|
3161
3223
|
),
|
|
3162
|
-
/* @__PURE__ */
|
|
3224
|
+
/* @__PURE__ */ jsx35(
|
|
3163
3225
|
ChevronDown9,
|
|
3164
3226
|
{
|
|
3165
3227
|
size: 13,
|
|
@@ -3170,8 +3232,8 @@ function TablePagination({
|
|
|
3170
3232
|
] }),
|
|
3171
3233
|
"items per page"
|
|
3172
3234
|
] }),
|
|
3173
|
-
/* @__PURE__ */
|
|
3174
|
-
/* @__PURE__ */
|
|
3235
|
+
/* @__PURE__ */ jsxs31("nav", { className: "flex items-center gap-1", "aria-label": "Pagination", children: [
|
|
3236
|
+
/* @__PURE__ */ jsx35(
|
|
3175
3237
|
"button",
|
|
3176
3238
|
{
|
|
3177
3239
|
type: "button",
|
|
@@ -3179,10 +3241,10 @@ function TablePagination({
|
|
|
3179
3241
|
disabled: current === 1,
|
|
3180
3242
|
"aria-label": "First page",
|
|
3181
3243
|
className: stepBtn,
|
|
3182
|
-
children: /* @__PURE__ */
|
|
3244
|
+
children: /* @__PURE__ */ jsx35(ChevronFirst, { size: 16, "aria-hidden": "true" })
|
|
3183
3245
|
}
|
|
3184
3246
|
),
|
|
3185
|
-
/* @__PURE__ */
|
|
3247
|
+
/* @__PURE__ */ jsx35(
|
|
3186
3248
|
"button",
|
|
3187
3249
|
{
|
|
3188
3250
|
type: "button",
|
|
@@ -3190,11 +3252,11 @@ function TablePagination({
|
|
|
3190
3252
|
disabled: current === 1,
|
|
3191
3253
|
"aria-label": "Previous page",
|
|
3192
3254
|
className: stepBtn,
|
|
3193
|
-
children: /* @__PURE__ */
|
|
3255
|
+
children: /* @__PURE__ */ jsx35(ChevronLeft4, { size: 16, "aria-hidden": "true" })
|
|
3194
3256
|
}
|
|
3195
3257
|
),
|
|
3196
3258
|
pageWindow(current, totalPages).map(
|
|
3197
|
-
(p) => typeof p === "string" ? /* @__PURE__ */
|
|
3259
|
+
(p) => typeof p === "string" ? /* @__PURE__ */ jsx35("span", { className: "px-1 text-[13px] text-text-tertiary", children: "\u2026" }, p) : /* @__PURE__ */ jsx35(
|
|
3198
3260
|
"button",
|
|
3199
3261
|
{
|
|
3200
3262
|
type: "button",
|
|
@@ -3209,7 +3271,7 @@ function TablePagination({
|
|
|
3209
3271
|
p
|
|
3210
3272
|
)
|
|
3211
3273
|
),
|
|
3212
|
-
/* @__PURE__ */
|
|
3274
|
+
/* @__PURE__ */ jsx35(
|
|
3213
3275
|
"button",
|
|
3214
3276
|
{
|
|
3215
3277
|
type: "button",
|
|
@@ -3217,10 +3279,10 @@ function TablePagination({
|
|
|
3217
3279
|
disabled: current === totalPages,
|
|
3218
3280
|
"aria-label": "Next page",
|
|
3219
3281
|
className: stepBtn,
|
|
3220
|
-
children: /* @__PURE__ */
|
|
3282
|
+
children: /* @__PURE__ */ jsx35(ChevronRight5, { size: 16, "aria-hidden": "true" })
|
|
3221
3283
|
}
|
|
3222
3284
|
),
|
|
3223
|
-
/* @__PURE__ */
|
|
3285
|
+
/* @__PURE__ */ jsx35(
|
|
3224
3286
|
"button",
|
|
3225
3287
|
{
|
|
3226
3288
|
type: "button",
|
|
@@ -3228,11 +3290,11 @@ function TablePagination({
|
|
|
3228
3290
|
disabled: current === totalPages,
|
|
3229
3291
|
"aria-label": "Last page",
|
|
3230
3292
|
className: stepBtn,
|
|
3231
|
-
children: /* @__PURE__ */
|
|
3293
|
+
children: /* @__PURE__ */ jsx35(ChevronLast, { size: 16, "aria-hidden": "true" })
|
|
3232
3294
|
}
|
|
3233
3295
|
)
|
|
3234
3296
|
] }),
|
|
3235
|
-
/* @__PURE__ */
|
|
3297
|
+
/* @__PURE__ */ jsxs31("span", { className: "text-[13px] text-text-tertiary tabular-nums", children: [
|
|
3236
3298
|
rangeStart.toLocaleString(),
|
|
3237
3299
|
" \u2013 ",
|
|
3238
3300
|
rangeEnd.toLocaleString(),
|
|
@@ -3247,7 +3309,7 @@ function TablePagination({
|
|
|
3247
3309
|
// src/DateRangePicker.tsx
|
|
3248
3310
|
import { useEffect as useEffect11, useMemo as useMemo4, useRef as useRef11, useState as useState12 } from "react";
|
|
3249
3311
|
import { ChevronDown as ChevronDown10 } from "lucide-react";
|
|
3250
|
-
import { jsx as
|
|
3312
|
+
import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3251
3313
|
var MONTH_ABBR = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
3252
3314
|
var QUARTER_ABBR = ["Q1", "Q2", "Q3", "Q4"];
|
|
3253
3315
|
var PRESETS = ["Rolling 3 months", "Rolling 6 months", "Rolling 12 months"];
|
|
@@ -3283,7 +3345,7 @@ function spanLabel(label, today) {
|
|
|
3283
3345
|
return `${fmtDate(s)} \u2013 ${fmtDate(e)}`;
|
|
3284
3346
|
}
|
|
3285
3347
|
function MiniSelect({ value, onChange, options }) {
|
|
3286
|
-
return /* @__PURE__ */
|
|
3348
|
+
return /* @__PURE__ */ jsx36(
|
|
3287
3349
|
"select",
|
|
3288
3350
|
{
|
|
3289
3351
|
value: String(value),
|
|
@@ -3292,7 +3354,7 @@ function MiniSelect({ value, onChange, options }) {
|
|
|
3292
3354
|
if (opt) onChange(opt.value);
|
|
3293
3355
|
},
|
|
3294
3356
|
className: "rounded-control border border-border-default bg-input px-1.5 py-1 text-[12px] text-text-primary outline-hidden focus:border-border-focus",
|
|
3295
|
-
children: options.map((o) => /* @__PURE__ */
|
|
3357
|
+
children: options.map((o) => /* @__PURE__ */ jsx36("option", { value: String(o.value), children: o.label }, String(o.value)))
|
|
3296
3358
|
}
|
|
3297
3359
|
);
|
|
3298
3360
|
}
|
|
@@ -3353,8 +3415,8 @@ function DateRangePicker({
|
|
|
3353
3415
|
if (showFooter) setDraft(label);
|
|
3354
3416
|
else commit(label);
|
|
3355
3417
|
};
|
|
3356
|
-
return /* @__PURE__ */
|
|
3357
|
-
/* @__PURE__ */
|
|
3418
|
+
return /* @__PURE__ */ jsxs32("div", { className: "relative", ref, children: [
|
|
3419
|
+
/* @__PURE__ */ jsxs32(
|
|
3358
3420
|
"button",
|
|
3359
3421
|
{
|
|
3360
3422
|
type: "button",
|
|
@@ -3363,16 +3425,16 @@ function DateRangePicker({
|
|
|
3363
3425
|
"aria-haspopup": "listbox",
|
|
3364
3426
|
className: chipTriggerClass(),
|
|
3365
3427
|
children: [
|
|
3366
|
-
/* @__PURE__ */
|
|
3367
|
-
/* @__PURE__ */
|
|
3368
|
-
/* @__PURE__ */
|
|
3428
|
+
/* @__PURE__ */ jsxs32("span", { className: "flex flex-col gap-1 text-left leading-none", children: [
|
|
3429
|
+
/* @__PURE__ */ jsx36("span", { className: "text-[10px] text-text-tertiary", children: spanLabel(value, end) }),
|
|
3430
|
+
/* @__PURE__ */ jsx36("span", { className: "text-[12px] font-medium text-text-primary", children: value })
|
|
3369
3431
|
] }),
|
|
3370
|
-
/* @__PURE__ */
|
|
3432
|
+
/* @__PURE__ */ jsx36(ChevronDown10, { size: 14, "aria-hidden": "true", className: cn("shrink-0 text-text-secondary transition-transform", open && "rotate-180") })
|
|
3371
3433
|
]
|
|
3372
3434
|
}
|
|
3373
3435
|
),
|
|
3374
|
-
open && /* @__PURE__ */
|
|
3375
|
-
presets.map((p) => /* @__PURE__ */
|
|
3436
|
+
open && /* @__PURE__ */ jsxs32("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: [
|
|
3437
|
+
presets.map((p) => /* @__PURE__ */ jsx36(
|
|
3376
3438
|
"button",
|
|
3377
3439
|
{
|
|
3378
3440
|
type: "button",
|
|
@@ -3382,26 +3444,26 @@ function DateRangePicker({
|
|
|
3382
3444
|
},
|
|
3383
3445
|
p
|
|
3384
3446
|
)),
|
|
3385
|
-
/* @__PURE__ */
|
|
3386
|
-
/* @__PURE__ */
|
|
3387
|
-
/* @__PURE__ */
|
|
3388
|
-
/* @__PURE__ */
|
|
3447
|
+
/* @__PURE__ */ jsxs32("div", { className: "mt-1 border-t border-border-default px-3 pb-2 pt-2", children: [
|
|
3448
|
+
/* @__PURE__ */ jsx36("div", { className: "text-[13px] font-semibold text-text-primary", children: "Custom Range" }),
|
|
3449
|
+
/* @__PURE__ */ jsxs32("div", { className: "mt-2 flex flex-col gap-2", children: [
|
|
3450
|
+
/* @__PURE__ */ jsxs32("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3389
3451
|
"From",
|
|
3390
|
-
/* @__PURE__ */
|
|
3391
|
-
granularity === "month" && /* @__PURE__ */
|
|
3392
|
-
granularity === "quarter" && /* @__PURE__ */
|
|
3393
|
-
/* @__PURE__ */
|
|
3452
|
+
/* @__PURE__ */ jsxs32("span", { className: "flex gap-1", children: [
|
|
3453
|
+
granularity === "month" && /* @__PURE__ */ jsx36(MiniSelect, { value: fromMo, onChange: setFromMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3454
|
+
granularity === "quarter" && /* @__PURE__ */ jsx36(MiniSelect, { value: fromQ, onChange: setFromQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3455
|
+
/* @__PURE__ */ jsx36(MiniSelect, { value: fromYr, onChange: setFromYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3394
3456
|
] })
|
|
3395
3457
|
] }),
|
|
3396
|
-
/* @__PURE__ */
|
|
3458
|
+
/* @__PURE__ */ jsxs32("label", { className: "flex items-center justify-between gap-2 text-[12px] text-text-secondary", children: [
|
|
3397
3459
|
"To",
|
|
3398
|
-
/* @__PURE__ */
|
|
3399
|
-
granularity === "month" && /* @__PURE__ */
|
|
3400
|
-
granularity === "quarter" && /* @__PURE__ */
|
|
3401
|
-
/* @__PURE__ */
|
|
3460
|
+
/* @__PURE__ */ jsxs32("span", { className: "flex gap-1", children: [
|
|
3461
|
+
granularity === "month" && /* @__PURE__ */ jsx36(MiniSelect, { value: toMo, onChange: setToMo, options: MONTH_ABBR.map((mm, i) => ({ label: mm, value: i })) }),
|
|
3462
|
+
granularity === "quarter" && /* @__PURE__ */ jsx36(MiniSelect, { value: toQ, onChange: setToQ, options: QUARTER_ABBR.map((qq, i) => ({ label: qq, value: i })) }),
|
|
3463
|
+
/* @__PURE__ */ jsx36(MiniSelect, { value: toYr, onChange: setToYr, options: yearOptions.map((y) => ({ label: String(y), value: y })) })
|
|
3402
3464
|
] })
|
|
3403
3465
|
] }),
|
|
3404
|
-
/* @__PURE__ */
|
|
3466
|
+
/* @__PURE__ */ jsx36(
|
|
3405
3467
|
"button",
|
|
3406
3468
|
{
|
|
3407
3469
|
type: "button",
|
|
@@ -3413,7 +3475,7 @@ function DateRangePicker({
|
|
|
3413
3475
|
)
|
|
3414
3476
|
] })
|
|
3415
3477
|
] }),
|
|
3416
|
-
showFooter && /* @__PURE__ */
|
|
3478
|
+
showFooter && /* @__PURE__ */ jsx36(FilterDropdownFooter, { onApply: () => commit(draft) })
|
|
3417
3479
|
] })
|
|
3418
3480
|
] });
|
|
3419
3481
|
}
|
|
@@ -3421,7 +3483,7 @@ function DateRangePicker({
|
|
|
3421
3483
|
// src/MultiSelectFilter.tsx
|
|
3422
3484
|
import { useCallback as useCallback4, useEffect as useEffect12, useRef as useRef12, useState as useState13 } from "react";
|
|
3423
3485
|
import { ChevronDown as ChevronDown11, Check as Check7, Minus as Minus2, Search as Search5, X as X4 } from "lucide-react";
|
|
3424
|
-
import { jsx as
|
|
3486
|
+
import { jsx as jsx37, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3425
3487
|
function MultiSelectFilter({
|
|
3426
3488
|
caption,
|
|
3427
3489
|
options = [],
|
|
@@ -3512,8 +3574,8 @@ function MultiSelectFilter({
|
|
|
3512
3574
|
const kids = live.filter((c) => c.label.toLowerCase().includes(ql));
|
|
3513
3575
|
return kids.length ? { ...g, children: kids } : null;
|
|
3514
3576
|
}).filter((g) => g !== null) : [];
|
|
3515
|
-
return /* @__PURE__ */
|
|
3516
|
-
/* @__PURE__ */
|
|
3577
|
+
return /* @__PURE__ */ jsxs33("div", { className: cn("relative", fullWidth && "w-full"), ref, children: [
|
|
3578
|
+
/* @__PURE__ */ jsxs33(
|
|
3517
3579
|
"button",
|
|
3518
3580
|
{
|
|
3519
3581
|
type: "button",
|
|
@@ -3521,8 +3583,8 @@ function MultiSelectFilter({
|
|
|
3521
3583
|
"aria-expanded": open,
|
|
3522
3584
|
className: cn(chipTriggerClass(variant), fullWidth && "w-full justify-between"),
|
|
3523
3585
|
children: [
|
|
3524
|
-
/* @__PURE__ */
|
|
3525
|
-
/* @__PURE__ */
|
|
3586
|
+
/* @__PURE__ */ jsx37(ChipContent, { caption, value, icon }),
|
|
3587
|
+
/* @__PURE__ */ jsx37(
|
|
3526
3588
|
ChevronDown11,
|
|
3527
3589
|
{
|
|
3528
3590
|
size: 14,
|
|
@@ -3533,7 +3595,7 @@ function MultiSelectFilter({
|
|
|
3533
3595
|
]
|
|
3534
3596
|
}
|
|
3535
3597
|
),
|
|
3536
|
-
open && /* @__PURE__ */
|
|
3598
|
+
open && /* @__PURE__ */ jsxs33(
|
|
3537
3599
|
"div",
|
|
3538
3600
|
{
|
|
3539
3601
|
className: cn(
|
|
@@ -3544,9 +3606,9 @@ function MultiSelectFilter({
|
|
|
3544
3606
|
role: "dialog",
|
|
3545
3607
|
"aria-label": caption,
|
|
3546
3608
|
children: [
|
|
3547
|
-
searchable && /* @__PURE__ */
|
|
3548
|
-
/* @__PURE__ */
|
|
3549
|
-
/* @__PURE__ */
|
|
3609
|
+
searchable && /* @__PURE__ */ jsx37("div", { className: "border-b border-border-default p-2", children: /* @__PURE__ */ jsxs33("div", { className: "flex h-9 items-center gap-2 rounded-control border border-border-default bg-input px-2.5", children: [
|
|
3610
|
+
/* @__PURE__ */ jsx37(Search5, { size: 14, className: "text-text-secondary", "aria-hidden": "true" }),
|
|
3611
|
+
/* @__PURE__ */ jsx37(
|
|
3550
3612
|
"input",
|
|
3551
3613
|
{
|
|
3552
3614
|
type: "text",
|
|
@@ -3556,37 +3618,37 @@ function MultiSelectFilter({
|
|
|
3556
3618
|
className: "h-full flex-1 bg-transparent text-[13px] outline-hidden placeholder:text-text-tertiary"
|
|
3557
3619
|
}
|
|
3558
3620
|
),
|
|
3559
|
-
q && /* @__PURE__ */
|
|
3621
|
+
q && /* @__PURE__ */ jsx37("button", { type: "button", onClick: () => setQ(""), "aria-label": "Clear search", className: "text-text-tertiary hover:text-text-primary", children: /* @__PURE__ */ jsx37(X4, { size: 13 }) })
|
|
3560
3622
|
] }) }),
|
|
3561
|
-
/* @__PURE__ */
|
|
3623
|
+
/* @__PURE__ */ jsxs33("div", { className: "max-h-[280px] overflow-y-auto p-1", children: [
|
|
3562
3624
|
groups ? visibleGroups.map((g) => {
|
|
3563
3625
|
const state = groupState(g);
|
|
3564
|
-
return /* @__PURE__ */
|
|
3565
|
-
/* @__PURE__ */
|
|
3626
|
+
return /* @__PURE__ */ jsxs33("div", { children: [
|
|
3627
|
+
/* @__PURE__ */ jsxs33(
|
|
3566
3628
|
"button",
|
|
3567
3629
|
{
|
|
3568
3630
|
type: "button",
|
|
3569
3631
|
onClick: () => toggleGroup(g),
|
|
3570
3632
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3571
3633
|
children: [
|
|
3572
|
-
/* @__PURE__ */
|
|
3573
|
-
/* @__PURE__ */
|
|
3574
|
-
counts && /* @__PURE__ */
|
|
3634
|
+
/* @__PURE__ */ jsx37(TriCheck, { state }),
|
|
3635
|
+
/* @__PURE__ */ jsx37("span", { className: cn("flex-1 text-[14px] text-text-primary", !plainParent && "font-semibold"), children: g.label }),
|
|
3636
|
+
counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(g.id) })
|
|
3575
3637
|
]
|
|
3576
3638
|
}
|
|
3577
3639
|
),
|
|
3578
3640
|
g.children.map((c) => {
|
|
3579
3641
|
const checked = draft.includes(c.id);
|
|
3580
|
-
return /* @__PURE__ */
|
|
3642
|
+
return /* @__PURE__ */ jsxs33(
|
|
3581
3643
|
"button",
|
|
3582
3644
|
{
|
|
3583
3645
|
type: "button",
|
|
3584
3646
|
onClick: () => toggle(c.id),
|
|
3585
3647
|
className: "flex w-full items-center gap-2.5 rounded-control py-2 pl-9 pr-2 text-left transition-colors hover:bg-subtle",
|
|
3586
3648
|
children: [
|
|
3587
|
-
/* @__PURE__ */
|
|
3588
|
-
/* @__PURE__ */
|
|
3589
|
-
counts && /* @__PURE__ */
|
|
3649
|
+
/* @__PURE__ */ jsx37(TriCheck, { state: checked ? "all" : "none" }),
|
|
3650
|
+
/* @__PURE__ */ jsx37("span", { className: "flex-1 text-[14px] text-text-primary", children: c.label }),
|
|
3651
|
+
counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(c.id) })
|
|
3590
3652
|
]
|
|
3591
3653
|
},
|
|
3592
3654
|
c.id
|
|
@@ -3595,33 +3657,33 @@ function MultiSelectFilter({
|
|
|
3595
3657
|
] }, g.id);
|
|
3596
3658
|
}) : items.map((o) => {
|
|
3597
3659
|
const checked = draft.includes(o.id);
|
|
3598
|
-
return /* @__PURE__ */
|
|
3660
|
+
return /* @__PURE__ */ jsxs33(
|
|
3599
3661
|
"button",
|
|
3600
3662
|
{
|
|
3601
3663
|
type: "button",
|
|
3602
3664
|
onClick: () => toggle(o.id),
|
|
3603
3665
|
className: "flex w-full items-center gap-2.5 rounded-control px-2 py-2 text-left transition-colors hover:bg-subtle",
|
|
3604
3666
|
children: [
|
|
3605
|
-
/* @__PURE__ */
|
|
3667
|
+
/* @__PURE__ */ jsx37(
|
|
3606
3668
|
"span",
|
|
3607
3669
|
{
|
|
3608
3670
|
className: cn(
|
|
3609
3671
|
"flex h-[18px] w-[18px] shrink-0 items-center justify-center rounded-[5px] border transition-colors",
|
|
3610
3672
|
checked ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3611
3673
|
),
|
|
3612
|
-
children: checked && /* @__PURE__ */
|
|
3674
|
+
children: checked && /* @__PURE__ */ jsx37(Check7, { size: 13, strokeWidth: 3 })
|
|
3613
3675
|
}
|
|
3614
3676
|
),
|
|
3615
|
-
/* @__PURE__ */
|
|
3616
|
-
counts && /* @__PURE__ */
|
|
3677
|
+
/* @__PURE__ */ jsx37("span", { className: "flex-1 text-[14px] text-text-primary", children: o.label }),
|
|
3678
|
+
counts && /* @__PURE__ */ jsx37(OptionCount, { n: countFor(o.id) })
|
|
3617
3679
|
]
|
|
3618
3680
|
},
|
|
3619
3681
|
o.id
|
|
3620
3682
|
);
|
|
3621
3683
|
}),
|
|
3622
|
-
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */
|
|
3684
|
+
(groups && !visibleGroups.length || !groups && !items.length) && /* @__PURE__ */ jsx37("div", { className: "py-6 text-center text-[13px] text-text-tertiary", children: "No matches." })
|
|
3623
3685
|
] }),
|
|
3624
|
-
showFooter ? /* @__PURE__ */
|
|
3686
|
+
showFooter ? /* @__PURE__ */ jsx37(FilterDropdownFooter, { onClear: () => setDraft(clearValue), onApply: apply }) : min === 0 && draft.length > 0 && /* @__PURE__ */ jsx37("div", { className: "border-t border-border-default p-2", children: /* @__PURE__ */ jsxs33(
|
|
3625
3687
|
"button",
|
|
3626
3688
|
{
|
|
3627
3689
|
type: "button",
|
|
@@ -3640,7 +3702,7 @@ function MultiSelectFilter({
|
|
|
3640
3702
|
}
|
|
3641
3703
|
function TriCheck({ state }) {
|
|
3642
3704
|
const filled = state !== "none";
|
|
3643
|
-
return /* @__PURE__ */
|
|
3705
|
+
return /* @__PURE__ */ jsxs33(
|
|
3644
3706
|
"span",
|
|
3645
3707
|
{
|
|
3646
3708
|
className: cn(
|
|
@@ -3648,14 +3710,14 @@ function TriCheck({ state }) {
|
|
|
3648
3710
|
filled ? "border-transparent bg-brand-primaryAction text-brand-onprimary" : "border-border-interactive bg-input"
|
|
3649
3711
|
),
|
|
3650
3712
|
children: [
|
|
3651
|
-
state === "all" && /* @__PURE__ */
|
|
3652
|
-
state === "some" && /* @__PURE__ */
|
|
3713
|
+
state === "all" && /* @__PURE__ */ jsx37(Check7, { size: 13, strokeWidth: 3 }),
|
|
3714
|
+
state === "some" && /* @__PURE__ */ jsx37(Minus2, { size: 13, strokeWidth: 3 })
|
|
3653
3715
|
]
|
|
3654
3716
|
}
|
|
3655
3717
|
);
|
|
3656
3718
|
}
|
|
3657
3719
|
function OptionCount({ n }) {
|
|
3658
|
-
return /* @__PURE__ */
|
|
3720
|
+
return /* @__PURE__ */ jsxs33("span", { className: "shrink-0 text-[12px] tabular-nums text-text-tertiary", children: [
|
|
3659
3721
|
"(",
|
|
3660
3722
|
n.toLocaleString(),
|
|
3661
3723
|
")"
|
|
@@ -3663,14 +3725,14 @@ function OptionCount({ n }) {
|
|
|
3663
3725
|
}
|
|
3664
3726
|
|
|
3665
3727
|
// src/Toggle.tsx
|
|
3666
|
-
import { jsx as
|
|
3728
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
3667
3729
|
var SIZES2 = {
|
|
3668
3730
|
sm: { track: "h-5 w-9", knob: "h-4 w-4", on: "translate-x-[18px]" },
|
|
3669
3731
|
md: { track: "h-6 w-11", knob: "h-5 w-5", on: "translate-x-[22px]" }
|
|
3670
3732
|
};
|
|
3671
3733
|
function Toggle({ checked, onChange, label, size = "md", disabled, className }) {
|
|
3672
3734
|
const s = SIZES2[size];
|
|
3673
|
-
return /* @__PURE__ */
|
|
3735
|
+
return /* @__PURE__ */ jsx38(
|
|
3674
3736
|
"button",
|
|
3675
3737
|
{
|
|
3676
3738
|
type: "button",
|
|
@@ -3686,7 +3748,7 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3686
3748
|
disabled && "cursor-not-allowed opacity-50",
|
|
3687
3749
|
className
|
|
3688
3750
|
),
|
|
3689
|
-
children: /* @__PURE__ */
|
|
3751
|
+
children: /* @__PURE__ */ jsx38(
|
|
3690
3752
|
"span",
|
|
3691
3753
|
{
|
|
3692
3754
|
className: cn(
|
|
@@ -3703,20 +3765,20 @@ function Toggle({ checked, onChange, label, size = "md", disabled, className })
|
|
|
3703
3765
|
// src/AISpark.tsx
|
|
3704
3766
|
import { useId as useId2 } from "react";
|
|
3705
3767
|
import { Sparkles } from "lucide-react";
|
|
3706
|
-
import { Fragment as Fragment5, jsx as
|
|
3768
|
+
import { Fragment as Fragment5, jsx as jsx39, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3707
3769
|
function AISpark({ size = 16, className }) {
|
|
3708
3770
|
const id = useId2();
|
|
3709
|
-
return /* @__PURE__ */
|
|
3710
|
-
/* @__PURE__ */
|
|
3711
|
-
/* @__PURE__ */
|
|
3712
|
-
/* @__PURE__ */
|
|
3771
|
+
return /* @__PURE__ */ jsxs34(Fragment5, { children: [
|
|
3772
|
+
/* @__PURE__ */ jsx39("svg", { width: "0", height: "0", "aria-hidden": "true", style: { position: "absolute" }, children: /* @__PURE__ */ jsx39("defs", { children: /* @__PURE__ */ jsxs34("linearGradient", { id, x1: "0", y1: "0", x2: "1", y2: "1", children: [
|
|
3773
|
+
/* @__PURE__ */ jsx39("stop", { offset: "0%", stopColor: "var(--mr-color-brand-primary)" }),
|
|
3774
|
+
/* @__PURE__ */ jsx39("stop", { offset: "100%", className: "[stop-color:#9474ff] in-data-[theme=dark]:[stop-color:#a488ff]" })
|
|
3713
3775
|
] }) }) }),
|
|
3714
|
-
/* @__PURE__ */
|
|
3776
|
+
/* @__PURE__ */ jsx39(Sparkles, { size, stroke: `url(#${id})`, className, "aria-hidden": "true" })
|
|
3715
3777
|
] });
|
|
3716
3778
|
}
|
|
3717
3779
|
|
|
3718
3780
|
// src/Freshness.tsx
|
|
3719
|
-
import { jsx as
|
|
3781
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
3720
3782
|
var dotColor = {
|
|
3721
3783
|
fresh: "bg-status-success",
|
|
3722
3784
|
recent: "bg-status-warning",
|
|
@@ -3728,7 +3790,7 @@ var srLabel = {
|
|
|
3728
3790
|
stale: "Older than a day"
|
|
3729
3791
|
};
|
|
3730
3792
|
function Freshness({ level }) {
|
|
3731
|
-
return /* @__PURE__ */
|
|
3793
|
+
return /* @__PURE__ */ jsx40(
|
|
3732
3794
|
"span",
|
|
3733
3795
|
{
|
|
3734
3796
|
className: cn("inline-block h-1.5 w-1.5 shrink-0 rounded-full", dotColor[level]),
|
|
@@ -3753,6 +3815,7 @@ export {
|
|
|
3753
3815
|
DataScopeFilter,
|
|
3754
3816
|
DateRangeFilter,
|
|
3755
3817
|
DateRangePicker,
|
|
3818
|
+
Delta,
|
|
3756
3819
|
FilterChipBar,
|
|
3757
3820
|
FilterDropdownFooter,
|
|
3758
3821
|
Freshness,
|