@tensor_1/react 2.14.2 → 2.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -0
- package/dist/ChartCore-Do6gRBN3.d.cts +44 -0
- package/dist/chart-preset.cjs +41 -9
- package/dist/chart-preset.d.cts +2 -2
- package/dist/chart-preset.d.ts +1 -1
- package/dist/chart-preset.js +4 -1
- package/dist/chart.cjs +41 -9
- package/dist/chart.d.cts +2 -2
- package/dist/chart.d.ts +1 -1
- package/dist/chart.js +4 -1
- package/dist/combobox-model.d.ts +9 -0
- package/dist/combobox-model.js +10 -0
- package/dist/components/AsyncOperationStatus.d.ts +16 -0
- package/dist/components/AsyncOperationStatus.js +24 -0
- package/dist/components/Breadcrumbs.d.ts +18 -0
- package/dist/components/Breadcrumbs.js +14 -0
- package/dist/components/Card.d.ts +11 -2
- package/dist/components/Card.js +16 -1
- package/dist/components/Chart.d.ts +1 -1
- package/dist/components/Chart.js +4 -1
- package/dist/components/ChartCore.d.ts +24 -3
- package/dist/components/ChartCore.js +38 -9
- package/dist/components/CollapsibleSection.d.ts +11 -0
- package/dist/components/CollapsibleSection.js +17 -0
- package/dist/components/Combobox.d.ts +19 -0
- package/dist/components/Combobox.js +120 -0
- package/dist/components/DetailPage.d.ts +33 -0
- package/dist/components/DetailPage.js +19 -0
- package/dist/components/Dialogs.d.ts +35 -0
- package/dist/components/Dialogs.js +55 -0
- package/dist/components/Flow.d.ts +26 -0
- package/dist/components/Flow.js +48 -0
- package/dist/components/Modal.d.ts +3 -1
- package/dist/components/Modal.js +6 -4
- package/dist/components/Pipeline.d.ts +25 -0
- package/dist/components/Pipeline.js +65 -0
- package/dist/components/RelatedLinks.d.ts +16 -0
- package/dist/components/RelatedLinks.js +14 -0
- package/dist/components/RelativeTime.d.ts +23 -0
- package/dist/components/RelativeTime.js +40 -0
- package/dist/components/Sidebar.d.ts +7 -2
- package/dist/components/Sidebar.js +27 -9
- package/dist/components/States.d.ts +23 -4
- package/dist/components/States.js +28 -6
- package/dist/components/TableControls.d.ts +77 -0
- package/dist/components/TableControls.js +61 -0
- package/dist/components/ToggleRow.d.ts +14 -0
- package/dist/components/ToggleRow.js +16 -0
- package/dist/index.cjs +1392 -786
- package/dist/index.d.cts +323 -8
- package/dist/index.d.ts +16 -2
- package/dist/index.js +40 -2
- package/dist/relative-time-clock.d.ts +4 -0
- package/dist/relative-time-clock.js +33 -0
- package/dist/relative-time-model.d.ts +9 -0
- package/dist/relative-time-model.js +16 -0
- package/package.json +1 -1
- package/dist/ChartCore-Bt1C84ty.d.cts +0 -22
package/dist/index.cjs
CHANGED
|
@@ -22,19 +22,24 @@ var src_exports = {};
|
|
|
22
22
|
__export(src_exports, {
|
|
23
23
|
Alert: () => Alert,
|
|
24
24
|
AppShell: () => AppShell,
|
|
25
|
+
AsyncOperationStatus: () => AsyncOperationStatus,
|
|
25
26
|
Avatar: () => Avatar,
|
|
26
27
|
AvatarGroup: () => AvatarGroup,
|
|
27
28
|
BrandProfileEditor: () => BrandProfileEditor,
|
|
28
29
|
BrandProfiles: () => BrandProfiles,
|
|
30
|
+
Breadcrumbs: () => Breadcrumbs,
|
|
29
31
|
BuilderCanvas: () => BuilderCanvas,
|
|
30
32
|
BulkBar: () => BulkBar,
|
|
31
33
|
Button: () => Button,
|
|
32
34
|
ButtonGroup: () => ButtonGroup,
|
|
33
35
|
Card: () => Card,
|
|
36
|
+
CardLink: () => CardLink,
|
|
34
37
|
CellStrong: () => CellStrong,
|
|
35
38
|
CellSub: () => CellSub,
|
|
36
39
|
Checkbox: () => Checkbox,
|
|
40
|
+
CollapsibleSection: () => CollapsibleSection,
|
|
37
41
|
ColorPicker: () => ColorPicker,
|
|
42
|
+
Combobox: () => Combobox,
|
|
38
43
|
CommandGroup: () => CommandGroup,
|
|
39
44
|
CommandItem: () => CommandItem,
|
|
40
45
|
CommandPalette: () => CommandPalette,
|
|
@@ -42,12 +47,14 @@ __export(src_exports, {
|
|
|
42
47
|
Comments: () => Comments,
|
|
43
48
|
Composer: () => Composer,
|
|
44
49
|
ComposerBar: () => ComposerBar,
|
|
50
|
+
ConfirmDialog: () => ConfirmDialog,
|
|
45
51
|
ContentList: () => ContentList,
|
|
46
52
|
ContentListItem: () => ContentListItem,
|
|
47
53
|
DateRangePicker: () => DateRangePicker,
|
|
48
54
|
DescriptionItem: () => DescriptionItem,
|
|
49
55
|
DescriptionList: () => DescriptionList,
|
|
50
56
|
DetailLayout: () => DetailLayout,
|
|
57
|
+
DetailPage: () => DetailPage,
|
|
51
58
|
DiffViewer: () => DiffViewer,
|
|
52
59
|
Drawer: () => Drawer,
|
|
53
60
|
EmptyState: () => EmptyState,
|
|
@@ -58,6 +65,11 @@ __export(src_exports, {
|
|
|
58
65
|
FeaturedRundownItem: () => FeaturedRundownItem,
|
|
59
66
|
FeaturedStage: () => FeaturedStage,
|
|
60
67
|
Field: () => Field,
|
|
68
|
+
FilterPopover: () => FilterPopover,
|
|
69
|
+
FilteredEmptyState: () => FilteredEmptyState,
|
|
70
|
+
Flow: () => Flow,
|
|
71
|
+
FlowNode: () => FlowNode,
|
|
72
|
+
ForbiddenState: () => ForbiddenState,
|
|
61
73
|
Highlighted: () => Highlighted,
|
|
62
74
|
Inbox: () => Inbox,
|
|
63
75
|
InboxDetail: () => InboxDetail,
|
|
@@ -82,22 +94,29 @@ __export(src_exports, {
|
|
|
82
94
|
NavGroup: () => NavGroup,
|
|
83
95
|
NavItem: () => NavItem,
|
|
84
96
|
NewsLead: () => NewsLead,
|
|
97
|
+
NotFoundState: () => NotFoundState,
|
|
85
98
|
Note: () => Note,
|
|
86
99
|
NoticeQueue: () => NoticeQueue,
|
|
87
100
|
PageHeader: () => PageHeader,
|
|
88
101
|
PageIntro: () => PageIntro,
|
|
89
102
|
Pagination: () => Pagination,
|
|
90
103
|
Peek: () => Peek,
|
|
104
|
+
Pipeline: () => Pipeline,
|
|
105
|
+
PipelineStage: () => PipelineStage,
|
|
91
106
|
Popover: () => Popover,
|
|
92
107
|
Progress: () => Progress,
|
|
108
|
+
PromptDialog: () => PromptDialog,
|
|
93
109
|
Prose: () => Prose,
|
|
94
110
|
Radio: () => Radio,
|
|
95
111
|
RadioGroup: () => RadioGroup,
|
|
112
|
+
RelatedLinks: () => RelatedLinks,
|
|
96
113
|
RelationshipGraph: () => RelationshipGraph,
|
|
114
|
+
RelativeTime: () => RelativeTime,
|
|
97
115
|
ResourceGrid: () => ResourceGrid,
|
|
98
116
|
RowAction: () => RowAction,
|
|
99
117
|
RowActions: () => RowActions,
|
|
100
118
|
RuleBuilder: () => RuleBuilder,
|
|
119
|
+
SavedViewMenu: () => SavedViewMenu,
|
|
101
120
|
SchedulingCalendar: () => SchedulingCalendar,
|
|
102
121
|
SectionHead: () => SectionHead,
|
|
103
122
|
Segmented: () => Segmented,
|
|
@@ -125,10 +144,12 @@ __export(src_exports, {
|
|
|
125
144
|
TimelineItem: () => TimelineItem,
|
|
126
145
|
Toast: () => Toast,
|
|
127
146
|
Toaster: () => Toaster,
|
|
147
|
+
ToggleRow: () => ToggleRow,
|
|
128
148
|
Tooltip: () => Tooltip,
|
|
129
149
|
Tr: () => Tr,
|
|
130
150
|
Tree: () => Tree,
|
|
131
151
|
UserChip: () => UserChip,
|
|
152
|
+
ViewMenu: () => ViewMenu,
|
|
132
153
|
addCalendarDays: () => addCalendarDays,
|
|
133
154
|
addCalendarMonths: () => addCalendarMonths,
|
|
134
155
|
appendRuleNode: () => appendRuleNode,
|
|
@@ -143,6 +164,7 @@ __export(src_exports, {
|
|
|
143
164
|
contrastRatio: () => contrastRatio,
|
|
144
165
|
cx: () => cx,
|
|
145
166
|
enumerateDateSpan: () => enumerateDateSpan,
|
|
167
|
+
filterComboboxOptions: () => filterComboboxOptions,
|
|
146
168
|
findRuleNodeDepth: () => findRuleNodeDepth,
|
|
147
169
|
flattenTree: () => flattenTree,
|
|
148
170
|
hexToRgb: () => hexToRgb,
|
|
@@ -161,9 +183,11 @@ __export(src_exports, {
|
|
|
161
183
|
multiSort: () => multiSort,
|
|
162
184
|
nextSortDir: () => nextSortDir,
|
|
163
185
|
normalizeHex: () => normalizeHex,
|
|
186
|
+
parseDateValue: () => parseDateValue,
|
|
164
187
|
parseMetricValue: () => parseMetricValue,
|
|
165
188
|
parseView: () => parseView,
|
|
166
189
|
relationshipNeighbors: () => relationshipNeighbors,
|
|
190
|
+
relativeTimeValue: () => relativeTimeValue,
|
|
167
191
|
removeRuleNode: () => removeRuleNode,
|
|
168
192
|
reorder: () => reorder,
|
|
169
193
|
restoreBrandProfile: () => restoreBrandProfile,
|
|
@@ -761,11 +785,138 @@ function InputGroup({ children, leadingIcon, trailingIcon, className }) {
|
|
|
761
785
|
);
|
|
762
786
|
}
|
|
763
787
|
|
|
764
|
-
// src/components/
|
|
788
|
+
// src/components/Combobox.tsx
|
|
765
789
|
var import_react7 = require("react");
|
|
790
|
+
|
|
791
|
+
// src/combobox-model.ts
|
|
792
|
+
function filterComboboxOptions(options, query) {
|
|
793
|
+
const needle = query.trim().toLocaleLowerCase();
|
|
794
|
+
if (!needle) return [...options];
|
|
795
|
+
return options.filter(
|
|
796
|
+
(option) => [option.label, option.value, ...option.keywords ?? []].some((part) => part.toLocaleLowerCase().includes(needle))
|
|
797
|
+
);
|
|
798
|
+
}
|
|
799
|
+
|
|
800
|
+
// src/components/Combobox.tsx
|
|
766
801
|
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
767
|
-
|
|
768
|
-
|
|
802
|
+
function Combobox({
|
|
803
|
+
options,
|
|
804
|
+
value,
|
|
805
|
+
defaultValue,
|
|
806
|
+
onValueChange,
|
|
807
|
+
label,
|
|
808
|
+
placeholder,
|
|
809
|
+
emptyLabel,
|
|
810
|
+
name,
|
|
811
|
+
disabled,
|
|
812
|
+
className,
|
|
813
|
+
...props
|
|
814
|
+
}) {
|
|
815
|
+
const generatedId = (0, import_react7.useId)();
|
|
816
|
+
const listboxId = `${generatedId}-listbox`;
|
|
817
|
+
const rootRef = (0, import_react7.useRef)(null);
|
|
818
|
+
const [internalValue, setInternalValue] = (0, import_react7.useState)(defaultValue ?? "");
|
|
819
|
+
const selectedValue = value ?? internalValue;
|
|
820
|
+
const selected = options.find((option) => option.value === selectedValue);
|
|
821
|
+
const [query, setQuery] = (0, import_react7.useState)(selected?.label ?? "");
|
|
822
|
+
const [open, setOpen] = (0, import_react7.useState)(false);
|
|
823
|
+
const [activeIndex, setActiveIndex] = (0, import_react7.useState)(0);
|
|
824
|
+
const filtered = (0, import_react7.useMemo)(() => filterComboboxOptions(options, open ? query : ""), [open, options, query]);
|
|
825
|
+
const activeOption = filtered[activeIndex];
|
|
826
|
+
(0, import_react7.useEffect)(() => {
|
|
827
|
+
if (!open) setQuery(options.find((option) => option.value === selectedValue)?.label ?? "");
|
|
828
|
+
}, [open, options, selectedValue]);
|
|
829
|
+
const select = (option) => {
|
|
830
|
+
if (option.disabled) return;
|
|
831
|
+
if (value == null) setInternalValue(option.value);
|
|
832
|
+
setQuery(option.label);
|
|
833
|
+
setOpen(false);
|
|
834
|
+
onValueChange?.(option.value, option);
|
|
835
|
+
};
|
|
836
|
+
const move = (step) => {
|
|
837
|
+
if (!filtered.length) return;
|
|
838
|
+
let next = activeIndex;
|
|
839
|
+
for (let attempts = 0; attempts < filtered.length; attempts += 1) {
|
|
840
|
+
next = (next + step + filtered.length) % filtered.length;
|
|
841
|
+
if (!filtered[next]?.disabled) break;
|
|
842
|
+
}
|
|
843
|
+
setActiveIndex(next);
|
|
844
|
+
};
|
|
845
|
+
const handleKeyDown = (event) => {
|
|
846
|
+
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
|
|
847
|
+
event.preventDefault();
|
|
848
|
+
if (!open) setOpen(true);
|
|
849
|
+
else move(event.key === "ArrowDown" ? 1 : -1);
|
|
850
|
+
} else if (event.key === "Enter" && open && activeOption) {
|
|
851
|
+
event.preventDefault();
|
|
852
|
+
select(activeOption);
|
|
853
|
+
} else if (event.key === "Escape") {
|
|
854
|
+
setOpen(false);
|
|
855
|
+
setQuery(selected?.label ?? "");
|
|
856
|
+
}
|
|
857
|
+
};
|
|
858
|
+
const handleBlur = (event) => {
|
|
859
|
+
if (!rootRef.current?.contains(event.relatedTarget)) {
|
|
860
|
+
setOpen(false);
|
|
861
|
+
setQuery(options.find((option) => option.value === selectedValue)?.label ?? "");
|
|
862
|
+
}
|
|
863
|
+
};
|
|
864
|
+
const handleChange = (event) => {
|
|
865
|
+
setQuery(event.target.value);
|
|
866
|
+
setActiveIndex(0);
|
|
867
|
+
setOpen(true);
|
|
868
|
+
};
|
|
869
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { ref: rootRef, className: cx("uix-combobox", className), onBlur: handleBlur, ...props, children: [
|
|
870
|
+
name && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { type: "hidden", name, value: selectedValue }),
|
|
871
|
+
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
872
|
+
"input",
|
|
873
|
+
{
|
|
874
|
+
className: "uix-input",
|
|
875
|
+
role: "combobox",
|
|
876
|
+
"aria-label": label,
|
|
877
|
+
"aria-autocomplete": "list",
|
|
878
|
+
"aria-expanded": open,
|
|
879
|
+
"aria-controls": listboxId,
|
|
880
|
+
"aria-activedescendant": open && activeOption ? `${listboxId}-${activeIndex}` : void 0,
|
|
881
|
+
value: query,
|
|
882
|
+
placeholder,
|
|
883
|
+
disabled,
|
|
884
|
+
onChange: handleChange,
|
|
885
|
+
onFocus: () => {
|
|
886
|
+
setQuery("");
|
|
887
|
+
setOpen(true);
|
|
888
|
+
setActiveIndex(Math.max(0, options.findIndex((option) => option.value === selectedValue)));
|
|
889
|
+
},
|
|
890
|
+
onKeyDown: handleKeyDown
|
|
891
|
+
}
|
|
892
|
+
),
|
|
893
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("ul", { id: listboxId, className: "uix-listbox uix-combobox__listbox", role: "listbox", children: [
|
|
894
|
+
filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("li", { className: "uix-listbox__empty", children: emptyLabel }),
|
|
895
|
+
filtered.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
896
|
+
"li",
|
|
897
|
+
{
|
|
898
|
+
id: `${listboxId}-${index}`,
|
|
899
|
+
className: "uix-listbox__option",
|
|
900
|
+
role: "option",
|
|
901
|
+
"aria-selected": option.value === selectedValue,
|
|
902
|
+
"aria-disabled": option.disabled || void 0,
|
|
903
|
+
"data-active": index === activeIndex || void 0,
|
|
904
|
+
onMouseDown: (event) => event.preventDefault(),
|
|
905
|
+
onMouseEnter: () => setActiveIndex(index),
|
|
906
|
+
onClick: () => select(option),
|
|
907
|
+
children: option.label
|
|
908
|
+
},
|
|
909
|
+
option.value
|
|
910
|
+
))
|
|
911
|
+
] })
|
|
912
|
+
] });
|
|
913
|
+
}
|
|
914
|
+
|
|
915
|
+
// src/components/Textarea.tsx
|
|
916
|
+
var import_react8 = require("react");
|
|
917
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
918
|
+
var Textarea = (0, import_react8.forwardRef)(
|
|
919
|
+
({ invalid, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
769
920
|
"textarea",
|
|
770
921
|
{
|
|
771
922
|
ref,
|
|
@@ -778,10 +929,10 @@ var Textarea = (0, import_react7.forwardRef)(
|
|
|
778
929
|
Textarea.displayName = "Textarea";
|
|
779
930
|
|
|
780
931
|
// src/components/Select.tsx
|
|
781
|
-
var
|
|
782
|
-
var
|
|
783
|
-
var Select = (0,
|
|
784
|
-
({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
932
|
+
var import_react9 = require("react");
|
|
933
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
934
|
+
var Select = (0, import_react9.forwardRef)(
|
|
935
|
+
({ size = "md", className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
785
936
|
"select",
|
|
786
937
|
{
|
|
787
938
|
ref,
|
|
@@ -793,19 +944,19 @@ var Select = (0, import_react8.forwardRef)(
|
|
|
793
944
|
Select.displayName = "Select";
|
|
794
945
|
|
|
795
946
|
// src/components/Checkbox.tsx
|
|
796
|
-
var
|
|
797
|
-
var
|
|
798
|
-
var CheckIcon = () => /* @__PURE__ */ (0,
|
|
799
|
-
var IndeterminateIcon = () => /* @__PURE__ */ (0,
|
|
800
|
-
var Checkbox = (0,
|
|
947
|
+
var import_react10 = require("react");
|
|
948
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
949
|
+
var CheckIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "1.5,6 4.5,9 10.5,3" }) });
|
|
950
|
+
var IndeterminateIcon = () => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { viewBox: "0 0 12 12", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("rect", { x: "2", y: "5", width: "8", height: "2", rx: "1", fill: "currentColor" }) });
|
|
951
|
+
var Checkbox = (0, import_react10.forwardRef)(
|
|
801
952
|
({ label, indeterminate, className, ...props }, forwardedRef) => {
|
|
802
|
-
const innerRef = (0,
|
|
803
|
-
(0,
|
|
953
|
+
const innerRef = (0, import_react10.useRef)(null);
|
|
954
|
+
(0, import_react10.useEffect)(() => {
|
|
804
955
|
const el = innerRef.current;
|
|
805
956
|
if (el) el.indeterminate = !!indeterminate;
|
|
806
957
|
}, [indeterminate]);
|
|
807
|
-
return /* @__PURE__ */ (0,
|
|
808
|
-
/* @__PURE__ */ (0,
|
|
958
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: cx("uix-checkbox", className), children: [
|
|
959
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
809
960
|
"input",
|
|
810
961
|
{
|
|
811
962
|
type: "checkbox",
|
|
@@ -817,7 +968,7 @@ var Checkbox = (0, import_react9.forwardRef)(
|
|
|
817
968
|
...props
|
|
818
969
|
}
|
|
819
970
|
),
|
|
820
|
-
/* @__PURE__ */ (0,
|
|
971
|
+
/* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "uix-checkbox__box", children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IndeterminateIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, {}) }),
|
|
821
972
|
label
|
|
822
973
|
] });
|
|
823
974
|
}
|
|
@@ -825,93 +976,144 @@ var Checkbox = (0, import_react9.forwardRef)(
|
|
|
825
976
|
Checkbox.displayName = "Checkbox";
|
|
826
977
|
|
|
827
978
|
// src/components/Radio.tsx
|
|
828
|
-
var
|
|
829
|
-
var
|
|
830
|
-
var Radio = (0,
|
|
831
|
-
({ label, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
832
|
-
/* @__PURE__ */ (0,
|
|
833
|
-
/* @__PURE__ */ (0,
|
|
979
|
+
var import_react11 = require("react");
|
|
980
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
981
|
+
var Radio = (0, import_react11.forwardRef)(
|
|
982
|
+
({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: cx("uix-radio", className), children: [
|
|
983
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("input", { type: "radio", ref, ...props }),
|
|
984
|
+
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "uix-radio__dot" }),
|
|
834
985
|
label
|
|
835
986
|
] })
|
|
836
987
|
);
|
|
837
988
|
Radio.displayName = "Radio";
|
|
838
989
|
function RadioGroup({ children, className }) {
|
|
839
|
-
return /* @__PURE__ */ (0,
|
|
990
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: cx("uix-radio-group", className), children });
|
|
840
991
|
}
|
|
841
992
|
|
|
842
993
|
// src/components/Switch.tsx
|
|
843
|
-
var
|
|
844
|
-
var
|
|
845
|
-
var Switch = (0,
|
|
846
|
-
({ label, className, ...props }, ref) => /* @__PURE__ */ (0,
|
|
847
|
-
/* @__PURE__ */ (0,
|
|
848
|
-
/* @__PURE__ */ (0,
|
|
994
|
+
var import_react12 = require("react");
|
|
995
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
996
|
+
var Switch = (0, import_react12.forwardRef)(
|
|
997
|
+
({ label, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: cx("uix-switch", className), children: [
|
|
998
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { type: "checkbox", role: "switch", ref, ...props }),
|
|
999
|
+
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "uix-switch__track" }),
|
|
849
1000
|
label
|
|
850
1001
|
] })
|
|
851
1002
|
);
|
|
852
1003
|
Switch.displayName = "Switch";
|
|
853
1004
|
|
|
854
1005
|
// src/components/Field.tsx
|
|
855
|
-
var
|
|
856
|
-
var
|
|
1006
|
+
var import_react13 = require("react");
|
|
1007
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
857
1008
|
function Field({ label, hint, error, success, required, children, className, htmlFor }) {
|
|
858
|
-
const uid = (0,
|
|
1009
|
+
const uid = (0, import_react13.useId)();
|
|
859
1010
|
const msgId = `${uid}-msg`;
|
|
860
1011
|
const describedBy = error || success || hint ? msgId : void 0;
|
|
861
|
-
const control = (0,
|
|
1012
|
+
const control = (0, import_react13.isValidElement)(children) ? (0, import_react13.cloneElement)(children, {
|
|
862
1013
|
"aria-describedby": [children.props["aria-describedby"], describedBy].filter(Boolean).join(" ") || void 0,
|
|
863
1014
|
"aria-invalid": error ? true : children.props["aria-invalid"]
|
|
864
1015
|
}) : children;
|
|
865
|
-
return /* @__PURE__ */ (0,
|
|
866
|
-
label && /* @__PURE__ */ (0,
|
|
1016
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: cx("uix-field", className), children: [
|
|
1017
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("label", { className: "uix-field__label", htmlFor, "data-required": required || void 0, children: label }),
|
|
867
1018
|
control,
|
|
868
|
-
/* @__PURE__ */ (0,
|
|
1019
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "uix-field__msg", id: msgId, children: error ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__error", role: "alert", children: error }) : success ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__success", children: success }) : hint ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "uix-field__hint", children: hint }) : null })
|
|
869
1020
|
] });
|
|
870
1021
|
}
|
|
871
1022
|
|
|
872
1023
|
// src/components/Modal.tsx
|
|
873
|
-
var
|
|
874
|
-
var
|
|
875
|
-
|
|
1024
|
+
var import_react14 = require("react");
|
|
1025
|
+
var import_jsx_runtime10 = require("react/jsx-runtime");
|
|
1026
|
+
var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
|
|
1027
|
+
function Modal({ open, onClose, title, children, footer, className, style, closeLabel = "Close dialog", role = "dialog" }) {
|
|
876
1028
|
const ref = useDialog(open);
|
|
877
|
-
|
|
878
|
-
|
|
879
|
-
|
|
880
|
-
|
|
1029
|
+
const titleId = (0, import_react14.useId)();
|
|
1030
|
+
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("dialog", { ref, className: cx("uix-dialog", className), style, onClose, role, "aria-labelledby": title != null ? titleId : void 0, children: [
|
|
1031
|
+
(title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uix-dialog__header", children: [
|
|
1032
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { id: titleId, className: "uix-dialog__title", children: title }),
|
|
1033
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", className: "uix-dialog__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CloseIcon, {}) })
|
|
881
1034
|
] }),
|
|
882
|
-
children != null && /* @__PURE__ */ (0,
|
|
883
|
-
footer != null && /* @__PURE__ */ (0,
|
|
1035
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uix-dialog__body", children }),
|
|
1036
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uix-dialog__footer", children: footer })
|
|
884
1037
|
] });
|
|
885
1038
|
}
|
|
886
1039
|
|
|
1040
|
+
// src/components/Dialogs.tsx
|
|
1041
|
+
var import_react15 = require("react");
|
|
1042
|
+
var import_jsx_runtime11 = require("react/jsx-runtime");
|
|
1043
|
+
function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive }) {
|
|
1044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
|
|
1045
|
+
Modal,
|
|
1046
|
+
{
|
|
1047
|
+
open,
|
|
1048
|
+
onClose: onCancel,
|
|
1049
|
+
title,
|
|
1050
|
+
closeLabel,
|
|
1051
|
+
role: "alertdialog",
|
|
1052
|
+
footer: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
|
|
1053
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
|
|
1054
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { type: "button", variant: destructive ? "danger" : "primary", onClick: () => void onConfirm(), loading: pending, children: confirmLabel })
|
|
1055
|
+
] }),
|
|
1056
|
+
children: description
|
|
1057
|
+
}
|
|
1058
|
+
);
|
|
1059
|
+
}
|
|
1060
|
+
function PromptDialog({ open, title, description, inputLabel, defaultValue = "", placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }) {
|
|
1061
|
+
const inputId = (0, import_react15.useId)();
|
|
1062
|
+
const errorId = `${inputId}-error`;
|
|
1063
|
+
const [value, setValue] = (0, import_react15.useState)(defaultValue);
|
|
1064
|
+
const [error, setError] = (0, import_react15.useState)();
|
|
1065
|
+
(0, import_react15.useEffect)(() => {
|
|
1066
|
+
if (open) {
|
|
1067
|
+
setValue(defaultValue);
|
|
1068
|
+
setError(void 0);
|
|
1069
|
+
}
|
|
1070
|
+
}, [defaultValue, open]);
|
|
1071
|
+
const handleSubmit = (event) => {
|
|
1072
|
+
event.preventDefault();
|
|
1073
|
+
const issue = validate?.(value);
|
|
1074
|
+
setError(issue);
|
|
1075
|
+
if (issue == null) void onSubmit(value);
|
|
1076
|
+
};
|
|
1077
|
+
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Modal, { open, onClose: onCancel, title, closeLabel, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("form", { className: "uix-prompt", onSubmit: handleSubmit, children: [
|
|
1078
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: description }),
|
|
1079
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)("label", { className: "uix-label", htmlFor: inputId, children: inputLabel }),
|
|
1080
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Input, { id: inputId, value, placeholder, "aria-describedby": error ? errorId : void 0, invalid: error != null, onChange: (event) => setValue(event.currentTarget.value), autoFocus: true }),
|
|
1081
|
+
error != null && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
|
|
1082
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
|
|
1083
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
|
|
1084
|
+
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Button, { type: "submit", variant: "primary", loading: pending, children: submitLabel })
|
|
1085
|
+
] })
|
|
1086
|
+
] }) });
|
|
1087
|
+
}
|
|
1088
|
+
|
|
887
1089
|
// src/components/Drawer.tsx
|
|
888
|
-
var
|
|
889
|
-
var CloseIcon2 = () => /* @__PURE__ */ (0,
|
|
1090
|
+
var import_jsx_runtime12 = require("react/jsx-runtime");
|
|
1091
|
+
var CloseIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
|
|
890
1092
|
function Drawer({ open, onClose, title, children, footer, className }) {
|
|
891
1093
|
const ref = useDialog(open);
|
|
892
|
-
return /* @__PURE__ */ (0,
|
|
893
|
-
(title != null || onClose) && /* @__PURE__ */ (0,
|
|
894
|
-
title && /* @__PURE__ */ (0,
|
|
895
|
-
onClose && /* @__PURE__ */ (0,
|
|
1094
|
+
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("dialog", { ref, className: cx("uix-drawer", className), onClose, children: [
|
|
1095
|
+
(title != null || onClose) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "uix-drawer__header", children: [
|
|
1096
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { fontWeight: 600, fontSize: "var(--uix-text-h3)" }, children: title }),
|
|
1097
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
896
1098
|
"button",
|
|
897
1099
|
{
|
|
898
1100
|
style: { marginLeft: "auto", border: 0, background: "transparent", color: "var(--uix-text-muted)", cursor: "pointer", width: 30, height: 30, display: "grid", placeItems: "center", borderRadius: "var(--uix-radius-sm)" },
|
|
899
1101
|
onClick: onClose,
|
|
900
1102
|
"aria-label": "Close drawer",
|
|
901
|
-
children: /* @__PURE__ */ (0,
|
|
1103
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon2, {})
|
|
902
1104
|
}
|
|
903
1105
|
)
|
|
904
1106
|
] }),
|
|
905
|
-
children != null && /* @__PURE__ */ (0,
|
|
906
|
-
footer != null && /* @__PURE__ */ (0,
|
|
1107
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uix-drawer__body", children }),
|
|
1108
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "uix-drawer__footer", children: footer })
|
|
907
1109
|
] });
|
|
908
1110
|
}
|
|
909
1111
|
|
|
910
1112
|
// src/components/Peek.tsx
|
|
911
|
-
var
|
|
912
|
-
var CloseIcon3 = () => /* @__PURE__ */ (0,
|
|
913
|
-
var ChevronUp = () => /* @__PURE__ */ (0,
|
|
914
|
-
var ChevronDown = () => /* @__PURE__ */ (0,
|
|
1113
|
+
var import_jsx_runtime13 = require("react/jsx-runtime");
|
|
1114
|
+
var CloseIcon3 = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 4l8 8M12 4l-8 8" }) });
|
|
1115
|
+
var ChevronUp = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M2 8l4-4 4 4" }) });
|
|
1116
|
+
var ChevronDown = () => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
915
1117
|
function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hint, className }) {
|
|
916
1118
|
const ref = useDialog(open);
|
|
917
1119
|
const hasNav = onNavPrev != null || onNavNext != null;
|
|
@@ -922,109 +1124,190 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
|
|
|
922
1124
|
const outside = e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom;
|
|
923
1125
|
if (outside) onClose();
|
|
924
1126
|
};
|
|
925
|
-
return /* @__PURE__ */ (0,
|
|
926
|
-
/* @__PURE__ */ (0,
|
|
927
|
-
hasNav && /* @__PURE__ */ (0,
|
|
928
|
-
/* @__PURE__ */ (0,
|
|
929
|
-
/* @__PURE__ */ (0,
|
|
1127
|
+
return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("dialog", { ref, className: cx("uix-peek", className), onClose, onClick: onBackdropClick, children: [
|
|
1128
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uix-peek__header", children: [
|
|
1129
|
+
hasNav && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uix-peek__nav", children: [
|
|
1130
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__navbtn", onClick: onNavPrev, disabled: !onNavPrev, "aria-label": "Previous record", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronUp, {}) }),
|
|
1131
|
+
/* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__navbtn", onClick: onNavNext, disabled: !onNavNext, "aria-label": "Next record", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronDown, {}) })
|
|
930
1132
|
] }),
|
|
931
|
-
title && /* @__PURE__ */ (0,
|
|
932
|
-
hint && /* @__PURE__ */ (0,
|
|
933
|
-
onClose && /* @__PURE__ */ (0,
|
|
1133
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uix-peek__title", children: title }),
|
|
1134
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "uix-peek__hint", children: hint }),
|
|
1135
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "uix-peek__close", onClick: onClose, "aria-label": "Close preview", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon3, {}) })
|
|
934
1136
|
] }),
|
|
935
|
-
children != null && /* @__PURE__ */ (0,
|
|
936
|
-
footer != null && /* @__PURE__ */ (0,
|
|
1137
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uix-peek__body", children }),
|
|
1138
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "uix-peek__footer", children: footer })
|
|
937
1139
|
] });
|
|
938
1140
|
}
|
|
939
1141
|
|
|
940
1142
|
// src/components/Card.tsx
|
|
941
|
-
var
|
|
1143
|
+
var import_jsx_runtime14 = require("react/jsx-runtime");
|
|
942
1144
|
function Card({ title, subtitle, headerAction, footer, children, className, ...props }) {
|
|
943
1145
|
const hasHeader = title != null || subtitle != null || headerAction != null;
|
|
944
|
-
return /* @__PURE__ */ (0,
|
|
945
|
-
hasHeader && /* @__PURE__ */ (0,
|
|
946
|
-
/* @__PURE__ */ (0,
|
|
947
|
-
title && /* @__PURE__ */ (0,
|
|
948
|
-
subtitle && /* @__PURE__ */ (0,
|
|
1146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: cx("uix-card", className), ...props, children: [
|
|
1147
|
+
hasHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "uix-card__header", children: [
|
|
1148
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { flex: 1 }, children: [
|
|
1149
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__title", children: title }),
|
|
1150
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__subtitle", children: subtitle })
|
|
949
1151
|
] }),
|
|
950
1152
|
headerAction
|
|
951
1153
|
] }),
|
|
952
|
-
children != null && /* @__PURE__ */ (0,
|
|
953
|
-
footer != null && /* @__PURE__ */ (0,
|
|
1154
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__body", children }),
|
|
1155
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__footer", children: footer })
|
|
1156
|
+
] });
|
|
1157
|
+
}
|
|
1158
|
+
function CardLink({ title, subtitle, headerAction, footer, children, className, ...props }) {
|
|
1159
|
+
const hasHeader = title != null || subtitle != null || headerAction != null;
|
|
1160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("a", { className: cx("uix-card", "uix-card--interactive", className), ...props, children: [
|
|
1161
|
+
hasHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "uix-card__header", children: [
|
|
1162
|
+
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { style: { flex: 1 }, children: [
|
|
1163
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__title", children: title }),
|
|
1164
|
+
subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__subtitle", children: subtitle })
|
|
1165
|
+
] }),
|
|
1166
|
+
headerAction
|
|
1167
|
+
] }),
|
|
1168
|
+
children != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__body", children }),
|
|
1169
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "uix-card__footer", children: footer })
|
|
954
1170
|
] });
|
|
955
1171
|
}
|
|
956
1172
|
|
|
1173
|
+
// src/components/Breadcrumbs.tsx
|
|
1174
|
+
var import_react16 = require("react");
|
|
1175
|
+
var import_jsx_runtime15 = require("react/jsx-runtime");
|
|
1176
|
+
function Breadcrumbs({ items, label, separator = "/", className, ...props }) {
|
|
1177
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("nav", { "aria-label": label, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("ol", { className: "uix-breadcrumbs", children: items.map((item, index) => {
|
|
1178
|
+
const current = item.current ?? index === items.length - 1;
|
|
1179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react16.Fragment, { children: [
|
|
1180
|
+
index > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { className: "uix-breadcrumbs__sep", "aria-hidden": "true", children: separator }),
|
|
1181
|
+
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("li", { children: item.href && !current ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("a", { href: item.href, children: item.label }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { "aria-current": current ? "page" : void 0, children: item.label }) })
|
|
1182
|
+
] }, item.id ?? `${item.href ?? "current"}-${index}`);
|
|
1183
|
+
}) }) });
|
|
1184
|
+
}
|
|
1185
|
+
|
|
957
1186
|
// src/components/PageHeader.tsx
|
|
958
|
-
var
|
|
1187
|
+
var import_jsx_runtime16 = require("react/jsx-runtime");
|
|
959
1188
|
function PageHeader({ eyebrow, title, subtitle, actions, className, ...props }) {
|
|
960
|
-
return /* @__PURE__ */ (0,
|
|
961
|
-
/* @__PURE__ */ (0,
|
|
962
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
963
|
-
/* @__PURE__ */ (0,
|
|
964
|
-
subtitle != null && /* @__PURE__ */ (0,
|
|
1189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("header", { className: cx("uix-page-header", className), ...props, children: [
|
|
1190
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uix-page-header__titles", children: [
|
|
1191
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
|
|
1192
|
+
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", { className: "uix-page-header__title", children: title }),
|
|
1193
|
+
subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "uix-page-header__subtitle", children: subtitle })
|
|
965
1194
|
] }),
|
|
966
|
-
actions != null && /* @__PURE__ */ (0,
|
|
1195
|
+
actions != null && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uix-page-header__actions", children: actions })
|
|
967
1196
|
] });
|
|
968
1197
|
}
|
|
969
1198
|
|
|
970
1199
|
// src/components/DetailLayout.tsx
|
|
971
|
-
var
|
|
1200
|
+
var import_jsx_runtime17 = require("react/jsx-runtime");
|
|
972
1201
|
function DetailLayout({ side, children, className, ...props }) {
|
|
973
|
-
return /* @__PURE__ */ (0,
|
|
974
|
-
/* @__PURE__ */ (0,
|
|
975
|
-
side != null && /* @__PURE__ */ (0,
|
|
1202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: cx("uix-detail", className), ...props, children: [
|
|
1203
|
+
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uix-detail__main", children }),
|
|
1204
|
+
side != null && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "uix-detail__side", children: side })
|
|
1205
|
+
] });
|
|
1206
|
+
}
|
|
1207
|
+
|
|
1208
|
+
// src/components/DetailPage.tsx
|
|
1209
|
+
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1210
|
+
function DetailPage({ back, eyebrow, title, subtitle, actions, tabs, metrics, side, children, tabsLabel, className, ...props }) {
|
|
1211
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("section", { className: cx("uix-detail-page", className), ...props, children: [
|
|
1212
|
+
back && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "uix-link uix-link--quiet uix-detail-page__back", href: back.href, children: back.label }),
|
|
1213
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(PageHeader, { eyebrow, title, subtitle, actions }),
|
|
1214
|
+
metrics && metrics.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("dl", { className: "uix-detail-page__metrics", children: metrics.map((metric) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { children: [
|
|
1215
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("dt", { children: metric.label }),
|
|
1216
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("dd", { children: metric.value })
|
|
1217
|
+
] }, metric.id)) }),
|
|
1218
|
+
tabs && tabs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("nav", { className: "uix-tabs", "aria-label": tabsLabel, children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { className: "uix-tab", "aria-current": tab.active ? "page" : void 0, href: tab.href, children: tab.label }, tab.id)) }),
|
|
1219
|
+
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DetailLayout, { side, children })
|
|
1220
|
+
] });
|
|
1221
|
+
}
|
|
1222
|
+
|
|
1223
|
+
// src/components/RelatedLinks.tsx
|
|
1224
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1225
|
+
function RelatedLinks({ title, items, className, ...props }) {
|
|
1226
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("section", { className: cx("uix-related-links", className), ...props, children: [
|
|
1227
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "uix-related-links__title", children: title }),
|
|
1228
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ul", { className: "uix-related-links__list", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("li", { children: [
|
|
1229
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("a", { className: "uix-link uix-link--quiet", href: item.href, children: item.label }),
|
|
1230
|
+
item.meta != null && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: item.meta })
|
|
1231
|
+
] }, item.id)) })
|
|
1232
|
+
] });
|
|
1233
|
+
}
|
|
1234
|
+
|
|
1235
|
+
// src/components/ToggleRow.tsx
|
|
1236
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1237
|
+
function ToggleRow({ label, description, checked, onCheckedChange, disabled, accessibleLabel, className, ...props }) {
|
|
1238
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: cx("uix-toggle-row", className), ...props, children: [
|
|
1239
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uix-toggle-row__copy", children: [
|
|
1240
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-toggle-row__label", children: label }),
|
|
1241
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uix-toggle-row__description", children: description })
|
|
1242
|
+
] }),
|
|
1243
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Switch, { checked, disabled, "aria-label": accessibleLabel, onChange: (event) => onCheckedChange(event.currentTarget.checked) })
|
|
1244
|
+
] });
|
|
1245
|
+
}
|
|
1246
|
+
|
|
1247
|
+
// src/components/CollapsibleSection.tsx
|
|
1248
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1249
|
+
function CollapsibleSection({ title, summary, children, className, ...props }) {
|
|
1250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: cx("uix-collapsible", className), ...props, children: [
|
|
1251
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { className: "uix-collapsible__summary", children: [
|
|
1252
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { children: [
|
|
1253
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uix-collapsible__title", children: title }),
|
|
1254
|
+
summary != null && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uix-collapsible__meta", children: summary })
|
|
1255
|
+
] }),
|
|
1256
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: "\u2304" })
|
|
1257
|
+
] }),
|
|
1258
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "uix-collapsible__body", children })
|
|
976
1259
|
] });
|
|
977
1260
|
}
|
|
978
1261
|
|
|
979
1262
|
// src/components/List.tsx
|
|
980
|
-
var
|
|
1263
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
981
1264
|
function List({ children, className, ...props }) {
|
|
982
|
-
return /* @__PURE__ */ (0,
|
|
1265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("uix-list", className), ...props, children });
|
|
983
1266
|
}
|
|
984
1267
|
function ListItem({ title, meta, trail, leading, children, className, ...props }) {
|
|
985
1268
|
const hasTitleBlock = title != null || meta != null;
|
|
986
|
-
return /* @__PURE__ */ (0,
|
|
1269
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx("uix-list__item", className), ...props, children: [
|
|
987
1270
|
leading,
|
|
988
|
-
hasTitleBlock && /* @__PURE__ */ (0,
|
|
989
|
-
title != null && /* @__PURE__ */ (0,
|
|
990
|
-
meta != null && /* @__PURE__ */ (0,
|
|
1271
|
+
hasTitleBlock && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { minWidth: 0 }, children: [
|
|
1272
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-list__title", children: title }),
|
|
1273
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-list__meta", children: meta })
|
|
991
1274
|
] }),
|
|
992
1275
|
children,
|
|
993
|
-
trail != null && /* @__PURE__ */ (0,
|
|
1276
|
+
trail != null && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "uix-list__trail", children: trail })
|
|
994
1277
|
] });
|
|
995
1278
|
}
|
|
996
1279
|
|
|
997
1280
|
// src/components/DescriptionList.tsx
|
|
998
|
-
var
|
|
999
|
-
var
|
|
1281
|
+
var import_react17 = require("react");
|
|
1282
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1000
1283
|
function DescriptionList({ items, children, className, ...props }) {
|
|
1001
|
-
return /* @__PURE__ */ (0,
|
|
1002
|
-
items?.map((item, i) => /* @__PURE__ */ (0,
|
|
1003
|
-
/* @__PURE__ */ (0,
|
|
1004
|
-
/* @__PURE__ */ (0,
|
|
1284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("dl", { className: cx("uix-dl", className), ...props, children: [
|
|
1285
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react17.Fragment, { children: [
|
|
1286
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("dt", { children: item.term }),
|
|
1287
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("dd", { children: item.description })
|
|
1005
1288
|
] }, item.id ?? i)),
|
|
1006
1289
|
children
|
|
1007
1290
|
] });
|
|
1008
1291
|
}
|
|
1009
1292
|
function DescriptionItem({ term, children }) {
|
|
1010
|
-
return /* @__PURE__ */ (0,
|
|
1011
|
-
/* @__PURE__ */ (0,
|
|
1012
|
-
/* @__PURE__ */ (0,
|
|
1293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_jsx_runtime23.Fragment, { children: [
|
|
1294
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("dt", { children: term }),
|
|
1295
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)("dd", { children })
|
|
1013
1296
|
] });
|
|
1014
1297
|
}
|
|
1015
1298
|
|
|
1016
1299
|
// src/components/Tabs.tsx
|
|
1017
|
-
var
|
|
1018
|
-
var
|
|
1019
|
-
var TabsCtx = (0,
|
|
1300
|
+
var import_react18 = require("react");
|
|
1301
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1302
|
+
var TabsCtx = (0, import_react18.createContext)({});
|
|
1020
1303
|
function Tabs({ variant = "line", value, onChange, children, className }) {
|
|
1021
|
-
const contextValue = (0,
|
|
1022
|
-
return /* @__PURE__ */ (0,
|
|
1304
|
+
const contextValue = (0, import_react18.useMemo)(() => ({ value, onChange }), [value, onChange]);
|
|
1305
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { role: "tablist", className: cx("uix-tabs", `uix-tabs--${variant}`, className), children }) });
|
|
1023
1306
|
}
|
|
1024
1307
|
function Tab({ value, children, disabled, className, onClick, ...props }) {
|
|
1025
|
-
const ctx = (0,
|
|
1308
|
+
const ctx = (0, import_react18.useContext)(TabsCtx);
|
|
1026
1309
|
const selected = ctx.value === value;
|
|
1027
|
-
return /* @__PURE__ */ (0,
|
|
1310
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1028
1311
|
"button",
|
|
1029
1312
|
{
|
|
1030
1313
|
role: "tab",
|
|
@@ -1042,8 +1325,8 @@ function Tab({ value, children, disabled, className, onClick, ...props }) {
|
|
|
1042
1325
|
}
|
|
1043
1326
|
|
|
1044
1327
|
// src/components/AppShell.tsx
|
|
1045
|
-
var
|
|
1046
|
-
var
|
|
1328
|
+
var import_react19 = require("react");
|
|
1329
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
1047
1330
|
function AppShell({
|
|
1048
1331
|
nav,
|
|
1049
1332
|
collapsed,
|
|
@@ -1057,7 +1340,7 @@ function AppShell({
|
|
|
1057
1340
|
...props
|
|
1058
1341
|
}) {
|
|
1059
1342
|
const navState = nav ?? (collapsed ? "rail" : "full");
|
|
1060
|
-
(0,
|
|
1343
|
+
(0, import_react19.useEffect)(() => {
|
|
1061
1344
|
if (!focus || !onExitFocus) return;
|
|
1062
1345
|
const onKey = (e) => {
|
|
1063
1346
|
if (e.key === "Escape") onExitFocus();
|
|
@@ -1065,7 +1348,7 @@ function AppShell({
|
|
|
1065
1348
|
document.addEventListener("keydown", onKey);
|
|
1066
1349
|
return () => document.removeEventListener("keydown", onKey);
|
|
1067
1350
|
}, [focus, onExitFocus]);
|
|
1068
|
-
return /* @__PURE__ */ (0,
|
|
1351
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
|
|
1069
1352
|
"div",
|
|
1070
1353
|
{
|
|
1071
1354
|
className: cx("uix-shell", className),
|
|
@@ -1074,100 +1357,118 @@ function AppShell({
|
|
|
1074
1357
|
"data-focus": focus || void 0,
|
|
1075
1358
|
...props,
|
|
1076
1359
|
children: [
|
|
1077
|
-
sidebar && /* @__PURE__ */ (0,
|
|
1078
|
-
topbar && /* @__PURE__ */ (0,
|
|
1079
|
-
/* @__PURE__ */ (0,
|
|
1080
|
-
focus && onExitFocus && /* @__PURE__ */ (0,
|
|
1360
|
+
sidebar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-shell__sidebar", children: sidebar }),
|
|
1361
|
+
topbar && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-shell__topbar", children: topbar }),
|
|
1362
|
+
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)("main", { className: cx("uix-shell__main", mainBleed && "uix-shell__main--bleed"), children }),
|
|
1363
|
+
focus && onExitFocus && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "uix-shell__focus-exit", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: onExitFocus, children: "Esc \xB7 Exit focus" }) })
|
|
1081
1364
|
]
|
|
1082
1365
|
}
|
|
1083
1366
|
);
|
|
1084
1367
|
}
|
|
1085
1368
|
|
|
1086
1369
|
// src/components/Sidebar.tsx
|
|
1087
|
-
var
|
|
1088
|
-
var
|
|
1089
|
-
var ChevronIcon = () => /* @__PURE__ */ (0,
|
|
1090
|
-
function Sidebar({ collapsed, onToggle, brand, toggleIcon, children, className, ...props }) {
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
/* @__PURE__ */ (0,
|
|
1097
|
-
/* @__PURE__ */ (0,
|
|
1370
|
+
var import_react20 = require("react");
|
|
1371
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
1372
|
+
var ChevronIcon = () => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("svg", { className: "uix-navgroup__chevron", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
1373
|
+
function Sidebar({ collapsed, nav, onToggle, brand, toggleIcon, children, expandLabel = "Expand sidebar", collapseLabel = "Collapse sidebar", className, ...props }) {
|
|
1374
|
+
const isCollapsed = collapsed ?? nav === "rail";
|
|
1375
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("nav", { className: cx("uix-sidebar", className), "data-collapsed": isCollapsed || void 0, "data-nav": nav, ...props, children: [
|
|
1376
|
+
(brand != null || onToggle) && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "uix-sidebar__head", children: [
|
|
1377
|
+
brand && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "uix-sidebar__brand", children: brand }),
|
|
1378
|
+
onToggle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: "uix-sidebar__toggle", onClick: onToggle, "aria-label": isCollapsed ? expandLabel : collapseLabel, children: toggleIcon ?? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: [
|
|
1379
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "4", width: "12", height: "1.5", rx: ".75" }),
|
|
1380
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "8.25", width: "8", height: "1.5", rx: ".75" }),
|
|
1381
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { x: "3", y: "12.5", width: "12", height: "1.5", rx: ".75" })
|
|
1098
1382
|
] }) })
|
|
1099
1383
|
] }),
|
|
1100
1384
|
children
|
|
1101
1385
|
] });
|
|
1102
1386
|
}
|
|
1103
1387
|
function SidebarSection({ label, children }) {
|
|
1104
|
-
return /* @__PURE__ */ (0,
|
|
1105
|
-
label && /* @__PURE__ */ (0,
|
|
1388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
|
|
1389
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "uix-sidebar__eyebrow", children: label }),
|
|
1106
1390
|
children
|
|
1107
1391
|
] });
|
|
1108
1392
|
}
|
|
1109
1393
|
function NavItem({ icon, badge, active, as: Tag = "a", children, className, ...props }) {
|
|
1110
1394
|
if (Tag === "button") {
|
|
1111
1395
|
const { href: _href, ...btnProps } = props;
|
|
1112
|
-
return /* @__PURE__ */ (0,
|
|
1396
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1113
1397
|
"button",
|
|
1114
1398
|
{
|
|
1399
|
+
type: "button",
|
|
1115
1400
|
className: cx("uix-navitem", className),
|
|
1116
1401
|
"aria-current": active ? "page" : void 0,
|
|
1117
1402
|
...btnProps,
|
|
1118
1403
|
children: [
|
|
1119
|
-
icon && /* @__PURE__ */ (0,
|
|
1120
|
-
/* @__PURE__ */ (0,
|
|
1121
|
-
badge != null && /* @__PURE__ */ (0,
|
|
1404
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
|
|
1405
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__label", children }),
|
|
1406
|
+
badge != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__badge", children: badge })
|
|
1122
1407
|
]
|
|
1123
1408
|
}
|
|
1124
1409
|
);
|
|
1125
1410
|
}
|
|
1126
|
-
return /* @__PURE__ */ (0,
|
|
1411
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1127
1412
|
"a",
|
|
1128
1413
|
{
|
|
1129
1414
|
className: cx("uix-navitem", className),
|
|
1130
1415
|
"aria-current": active ? "page" : void 0,
|
|
1131
1416
|
...props,
|
|
1132
1417
|
children: [
|
|
1133
|
-
icon && /* @__PURE__ */ (0,
|
|
1134
|
-
/* @__PURE__ */ (0,
|
|
1135
|
-
badge != null && /* @__PURE__ */ (0,
|
|
1418
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
|
|
1419
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__label", children }),
|
|
1420
|
+
badge != null && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__badge", children: badge })
|
|
1136
1421
|
]
|
|
1137
1422
|
}
|
|
1138
1423
|
);
|
|
1139
1424
|
}
|
|
1140
|
-
function NavGroup({ icon, label, children, defaultExpanded = true }) {
|
|
1141
|
-
const [
|
|
1142
|
-
|
|
1143
|
-
|
|
1425
|
+
function NavGroup({ icon, label, children, defaultExpanded = true, expanded: controlledExpanded, onExpandedChange }) {
|
|
1426
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react20.useState)(defaultExpanded);
|
|
1427
|
+
const expanded = controlledExpanded ?? internalExpanded;
|
|
1428
|
+
const panelId = (0, import_react20.useId)();
|
|
1429
|
+
const triggerRef = (0, import_react20.useRef)(null);
|
|
1430
|
+
const panelRef = (0, import_react20.useRef)(null);
|
|
1431
|
+
(0, import_react20.useEffect)(() => {
|
|
1432
|
+
panelRef.current?.toggleAttribute("inert", !expanded);
|
|
1433
|
+
if (!expanded && panelRef.current?.contains(document.activeElement)) triggerRef.current?.focus();
|
|
1434
|
+
}, [expanded]);
|
|
1435
|
+
const setExpanded = (next) => {
|
|
1436
|
+
if (!next && panelRef.current?.contains(document.activeElement)) triggerRef.current?.focus();
|
|
1437
|
+
if (controlledExpanded == null) setInternalExpanded(next);
|
|
1438
|
+
onExpandedChange?.(next);
|
|
1439
|
+
};
|
|
1440
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "uix-navgroup", children: [
|
|
1441
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
|
|
1144
1442
|
"button",
|
|
1145
1443
|
{
|
|
1444
|
+
ref: triggerRef,
|
|
1445
|
+
type: "button",
|
|
1146
1446
|
className: "uix-navitem uix-navgroup__trigger",
|
|
1147
1447
|
"aria-expanded": expanded,
|
|
1148
|
-
|
|
1448
|
+
"aria-controls": panelId,
|
|
1449
|
+
onClick: () => setExpanded(!expanded),
|
|
1149
1450
|
children: [
|
|
1150
|
-
icon && /* @__PURE__ */ (0,
|
|
1151
|
-
/* @__PURE__ */ (0,
|
|
1152
|
-
/* @__PURE__ */ (0,
|
|
1451
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__icon", "aria-hidden": "true", children: icon }),
|
|
1452
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__label", children: label }),
|
|
1453
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronIcon, {})
|
|
1153
1454
|
]
|
|
1154
1455
|
}
|
|
1155
1456
|
),
|
|
1156
|
-
/* @__PURE__ */ (0,
|
|
1457
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: panelRef, id: panelId, className: "uix-navgroup__panel", "aria-hidden": !expanded, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children }) })
|
|
1157
1458
|
] });
|
|
1158
1459
|
}
|
|
1159
1460
|
function SubNavItem({ active, as: Tag = "a", children, className, ...props }) {
|
|
1160
1461
|
const cls = cx("uix-navitem uix-subitem", className);
|
|
1161
1462
|
if (Tag === "button") {
|
|
1162
1463
|
const { href: _href, ...btnProps } = props;
|
|
1163
|
-
return /* @__PURE__ */ (0,
|
|
1464
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("button", { type: "button", className: cls, "aria-current": active ? "page" : void 0, ...btnProps, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__label", children }) });
|
|
1164
1465
|
}
|
|
1165
|
-
return /* @__PURE__ */ (0,
|
|
1466
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("a", { className: cls, "aria-current": active ? "page" : void 0, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "uix-navitem__label", children }) });
|
|
1166
1467
|
}
|
|
1167
1468
|
|
|
1168
1469
|
// src/components/StarButton.tsx
|
|
1169
|
-
var
|
|
1170
|
-
var StarGlyph = () => /* @__PURE__ */ (0,
|
|
1470
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
1471
|
+
var StarGlyph = () => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1171
1472
|
"svg",
|
|
1172
1473
|
{
|
|
1173
1474
|
viewBox: "0 0 24 24",
|
|
@@ -1177,7 +1478,7 @@ var StarGlyph = () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
|
1177
1478
|
strokeLinecap: "round",
|
|
1178
1479
|
strokeLinejoin: "round",
|
|
1179
1480
|
"aria-hidden": "true",
|
|
1180
|
-
children: /* @__PURE__ */ (0,
|
|
1481
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("path", { d: "M11.5 2.7a.6.6 0 0 1 1 0l2.4 5 5.4.8a.6.6 0 0 1 .3 1l-3.9 3.8.9 5.4a.6.6 0 0 1-.8.6L12 17l-4.8 2.5a.6.6 0 0 1-.8-.6l.9-5.4L3.4 9.5a.6.6 0 0 1 .3-1l5.4-.8z" })
|
|
1181
1482
|
}
|
|
1182
1483
|
);
|
|
1183
1484
|
function StarButton({
|
|
@@ -1187,7 +1488,7 @@ function StarButton({
|
|
|
1187
1488
|
onToggle,
|
|
1188
1489
|
className
|
|
1189
1490
|
}) {
|
|
1190
|
-
return /* @__PURE__ */ (0,
|
|
1491
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
1191
1492
|
"button",
|
|
1192
1493
|
{
|
|
1193
1494
|
type: "button",
|
|
@@ -1200,15 +1501,15 @@ function StarButton({
|
|
|
1200
1501
|
e.stopPropagation();
|
|
1201
1502
|
onToggle(!pinned);
|
|
1202
1503
|
},
|
|
1203
|
-
children: /* @__PURE__ */ (0,
|
|
1504
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StarGlyph, {})
|
|
1204
1505
|
}
|
|
1205
1506
|
);
|
|
1206
1507
|
}
|
|
1207
1508
|
|
|
1208
1509
|
// src/components/NavFavourites.tsx
|
|
1209
|
-
var
|
|
1210
|
-
var
|
|
1211
|
-
var ChevronDownIcon = () => /* @__PURE__ */ (0,
|
|
1510
|
+
var import_react21 = require("react");
|
|
1511
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
1512
|
+
var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1212
1513
|
"svg",
|
|
1213
1514
|
{
|
|
1214
1515
|
width: "12",
|
|
@@ -1221,10 +1522,10 @@ var ChevronDownIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
|
1221
1522
|
strokeLinejoin: "round",
|
|
1222
1523
|
"aria-hidden": "true",
|
|
1223
1524
|
className: "uix-favourites__chevron",
|
|
1224
|
-
children: /* @__PURE__ */ (0,
|
|
1525
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "m6 9 6 6 6-6" })
|
|
1225
1526
|
}
|
|
1226
1527
|
);
|
|
1227
|
-
var ChevronRightIcon = () => /* @__PURE__ */ (0,
|
|
1528
|
+
var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1228
1529
|
"svg",
|
|
1229
1530
|
{
|
|
1230
1531
|
width: "12",
|
|
@@ -1237,10 +1538,10 @@ var ChevronRightIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
|
1237
1538
|
strokeLinejoin: "round",
|
|
1238
1539
|
"aria-hidden": "true",
|
|
1239
1540
|
className: "uix-favourites__chevron",
|
|
1240
|
-
children: /* @__PURE__ */ (0,
|
|
1541
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("path", { d: "m9 18 6-6-6-6" })
|
|
1241
1542
|
}
|
|
1242
1543
|
);
|
|
1243
|
-
var MoreIcon = () => /* @__PURE__ */ (0,
|
|
1544
|
+
var MoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1244
1545
|
"svg",
|
|
1245
1546
|
{
|
|
1246
1547
|
width: "14",
|
|
@@ -1253,9 +1554,9 @@ var MoreIcon = () => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
|
|
|
1253
1554
|
strokeLinejoin: "round",
|
|
1254
1555
|
"aria-hidden": "true",
|
|
1255
1556
|
children: [
|
|
1256
|
-
/* @__PURE__ */ (0,
|
|
1257
|
-
/* @__PURE__ */ (0,
|
|
1258
|
-
/* @__PURE__ */ (0,
|
|
1557
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
|
|
1558
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "5", r: "1" }),
|
|
1559
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("circle", { cx: "12", cy: "19", r: "1" })
|
|
1259
1560
|
]
|
|
1260
1561
|
}
|
|
1261
1562
|
);
|
|
@@ -1269,13 +1570,13 @@ function NavFavourites({
|
|
|
1269
1570
|
emptyReason,
|
|
1270
1571
|
className
|
|
1271
1572
|
}) {
|
|
1272
|
-
const regionId = (0,
|
|
1273
|
-
const headerRef = (0,
|
|
1274
|
-
const regionRef = (0,
|
|
1275
|
-
const focusAfterRef = (0,
|
|
1276
|
-
const triggerRefs = (0,
|
|
1277
|
-
const order = (0,
|
|
1278
|
-
(0,
|
|
1573
|
+
const regionId = (0, import_react21.useId)();
|
|
1574
|
+
const headerRef = (0, import_react21.useRef)(null);
|
|
1575
|
+
const regionRef = (0, import_react21.useRef)(null);
|
|
1576
|
+
const focusAfterRef = (0, import_react21.useRef)(null);
|
|
1577
|
+
const triggerRefs = (0, import_react21.useRef)(/* @__PURE__ */ new Map());
|
|
1578
|
+
const order = (0, import_react21.useMemo)(() => items.map((item) => item.id), [items]);
|
|
1579
|
+
(0, import_react21.useEffect)(() => {
|
|
1279
1580
|
const id = focusAfterRef.current;
|
|
1280
1581
|
if (!id) return;
|
|
1281
1582
|
focusAfterRef.current = null;
|
|
@@ -1292,7 +1593,7 @@ function NavFavourites({
|
|
|
1292
1593
|
}
|
|
1293
1594
|
onToggleCollapsed?.();
|
|
1294
1595
|
};
|
|
1295
|
-
const move = (0,
|
|
1596
|
+
const move = (0, import_react21.useCallback)((id, dir) => {
|
|
1296
1597
|
const idx = order.indexOf(id);
|
|
1297
1598
|
const next = idx + dir;
|
|
1298
1599
|
if (idx < 0 || next < 0 || next >= order.length) return;
|
|
@@ -1303,18 +1604,18 @@ function NavFavourites({
|
|
|
1303
1604
|
focusAfterRef.current = id;
|
|
1304
1605
|
onReorder(reordered);
|
|
1305
1606
|
}, [onReorder, order]);
|
|
1306
|
-
const remove = (0,
|
|
1607
|
+
const remove = (0, import_react21.useCallback)((id) => {
|
|
1307
1608
|
const idx = order.indexOf(id);
|
|
1308
1609
|
const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
|
|
1309
1610
|
focusAfterRef.current = neighbour;
|
|
1310
1611
|
onRemove(id);
|
|
1311
1612
|
}, [onRemove, order]);
|
|
1312
|
-
const registerTrigger = (0,
|
|
1613
|
+
const registerTrigger = (0, import_react21.useCallback)((id, element) => {
|
|
1313
1614
|
if (element) triggerRefs.current.set(id, element);
|
|
1314
1615
|
else triggerRefs.current.delete(id);
|
|
1315
1616
|
}, []);
|
|
1316
|
-
return /* @__PURE__ */ (0,
|
|
1317
|
-
/* @__PURE__ */ (0,
|
|
1617
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cx("uix-favourites", className), children: [
|
|
1618
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1318
1619
|
"button",
|
|
1319
1620
|
{
|
|
1320
1621
|
ref: headerRef,
|
|
@@ -1324,26 +1625,26 @@ function NavFavourites({
|
|
|
1324
1625
|
onClick: handleToggle,
|
|
1325
1626
|
className: "uix-favourites__heading uix-text-eyebrow",
|
|
1326
1627
|
children: [
|
|
1327
|
-
collapsed ? /* @__PURE__ */ (0,
|
|
1628
|
+
collapsed ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDownIcon, {}),
|
|
1328
1629
|
labels.heading
|
|
1329
1630
|
]
|
|
1330
1631
|
}
|
|
1331
1632
|
),
|
|
1332
|
-
/* @__PURE__ */ (0,
|
|
1633
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1333
1634
|
"ul",
|
|
1334
1635
|
{
|
|
1335
1636
|
ref: regionRef,
|
|
1336
1637
|
id: regionId,
|
|
1337
1638
|
hidden: collapsed,
|
|
1338
1639
|
className: "uix-favourites__list",
|
|
1339
|
-
children: items.length === 0 ? /* @__PURE__ */ (0,
|
|
1640
|
+
children: items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1340
1641
|
"li",
|
|
1341
1642
|
{
|
|
1342
1643
|
className: "uix-favourites__empty uix-text-meta",
|
|
1343
1644
|
"data-empty-reason": emptyReason,
|
|
1344
1645
|
children: labels.empty
|
|
1345
1646
|
}
|
|
1346
|
-
) : items.map((item, idx) => /* @__PURE__ */ (0,
|
|
1647
|
+
) : items.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1347
1648
|
FavouriteRow,
|
|
1348
1649
|
{
|
|
1349
1650
|
item,
|
|
@@ -1360,7 +1661,7 @@ function NavFavourites({
|
|
|
1360
1661
|
)
|
|
1361
1662
|
] });
|
|
1362
1663
|
}
|
|
1363
|
-
var FavouriteRow = (0,
|
|
1664
|
+
var FavouriteRow = (0, import_react21.memo)(function FavouriteRow2({
|
|
1364
1665
|
item,
|
|
1365
1666
|
isFirst,
|
|
1366
1667
|
isLast,
|
|
@@ -1369,17 +1670,17 @@ var FavouriteRow = (0, import_react17.memo)(function FavouriteRow2({
|
|
|
1369
1670
|
onRemove,
|
|
1370
1671
|
registerTrigger
|
|
1371
1672
|
}) {
|
|
1372
|
-
const [open, setOpen] = (0,
|
|
1373
|
-
const menuId = (0,
|
|
1374
|
-
const triggerRef = (0,
|
|
1375
|
-
const itemRefs = (0,
|
|
1673
|
+
const [open, setOpen] = (0, import_react21.useState)(false);
|
|
1674
|
+
const menuId = (0, import_react21.useId)();
|
|
1675
|
+
const triggerRef = (0, import_react21.useRef)(null);
|
|
1676
|
+
const itemRefs = (0, import_react21.useRef)([]);
|
|
1376
1677
|
const optionsTemplate = labels.options ?? "{label} favourite options";
|
|
1377
1678
|
const actions = [
|
|
1378
1679
|
...isFirst ? [] : [{ label: labels.moveUp, onSelect: () => onMove(item.id, -1) }],
|
|
1379
1680
|
...isLast ? [] : [{ label: labels.moveDown, onSelect: () => onMove(item.id, 1) }],
|
|
1380
1681
|
{ label: labels.remove.replace("{label}", item.label), onSelect: () => onRemove(item.id) }
|
|
1381
1682
|
];
|
|
1382
|
-
(0,
|
|
1683
|
+
(0, import_react21.useEffect)(() => {
|
|
1383
1684
|
if (open) itemRefs.current[0]?.focus();
|
|
1384
1685
|
}, [open]);
|
|
1385
1686
|
const closeAndReturnFocus = () => {
|
|
@@ -1414,14 +1715,14 @@ var FavouriteRow = (0, import_react17.memo)(function FavouriteRow2({
|
|
|
1414
1715
|
};
|
|
1415
1716
|
return (
|
|
1416
1717
|
// biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
|
|
1417
|
-
/* @__PURE__ */ (0,
|
|
1718
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
|
|
1418
1719
|
"li",
|
|
1419
1720
|
{
|
|
1420
1721
|
className: "uix-favourites__row",
|
|
1421
1722
|
onKeyDown: onRowKeyDown,
|
|
1422
1723
|
children: [
|
|
1423
|
-
/* @__PURE__ */ (0,
|
|
1424
|
-
/* @__PURE__ */ (0,
|
|
1724
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "uix-favourites__link", children: item.link }),
|
|
1725
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1425
1726
|
"button",
|
|
1426
1727
|
{
|
|
1427
1728
|
ref: (el) => {
|
|
@@ -1435,11 +1736,11 @@ var FavouriteRow = (0, import_react17.memo)(function FavouriteRow2({
|
|
|
1435
1736
|
"aria-label": optionsTemplate.replace("{label}", item.label),
|
|
1436
1737
|
onClick: () => setOpen((v) => !v),
|
|
1437
1738
|
className: "uix-favourites__menu-trigger",
|
|
1438
|
-
children: /* @__PURE__ */ (0,
|
|
1739
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MoreIcon, {})
|
|
1439
1740
|
}
|
|
1440
1741
|
),
|
|
1441
|
-
open ? /* @__PURE__ */ (0,
|
|
1442
|
-
/* @__PURE__ */ (0,
|
|
1742
|
+
open ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
|
|
1743
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1443
1744
|
"div",
|
|
1444
1745
|
{
|
|
1445
1746
|
"aria-hidden": "true",
|
|
@@ -1448,14 +1749,14 @@ var FavouriteRow = (0, import_react17.memo)(function FavouriteRow2({
|
|
|
1448
1749
|
className: "uix-favourites__backdrop"
|
|
1449
1750
|
}
|
|
1450
1751
|
),
|
|
1451
|
-
/* @__PURE__ */ (0,
|
|
1752
|
+
/* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1452
1753
|
"ul",
|
|
1453
1754
|
{
|
|
1454
1755
|
id: menuId,
|
|
1455
1756
|
role: "menu",
|
|
1456
1757
|
onKeyDown: onMenuKeyDown,
|
|
1457
1758
|
className: "uix-favourites__menu",
|
|
1458
|
-
children: actions.map((action, i) => /* @__PURE__ */ (0,
|
|
1759
|
+
children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
1459
1760
|
"button",
|
|
1460
1761
|
{
|
|
1461
1762
|
ref: (el) => {
|
|
@@ -1482,21 +1783,21 @@ var FavouriteRow = (0, import_react17.memo)(function FavouriteRow2({
|
|
|
1482
1783
|
});
|
|
1483
1784
|
|
|
1484
1785
|
// src/components/Alert.tsx
|
|
1485
|
-
var
|
|
1786
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
1486
1787
|
function Alert({ tone, title, icon, children, className, ...props }) {
|
|
1487
|
-
return /* @__PURE__ */ (0,
|
|
1488
|
-
icon && /* @__PURE__ */ (0,
|
|
1489
|
-
/* @__PURE__ */ (0,
|
|
1490
|
-
title && /* @__PURE__ */ (0,
|
|
1491
|
-
children && /* @__PURE__ */ (0,
|
|
1788
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cx("uix-alert", tone && tone !== "neutral" && `uix-alert--${tone}`, className), ...props, children: [
|
|
1789
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__icon", children: icon }),
|
|
1790
|
+
/* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
|
|
1791
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__title", children: title }),
|
|
1792
|
+
children && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uix-alert__body", children })
|
|
1492
1793
|
] })
|
|
1493
1794
|
] });
|
|
1494
1795
|
}
|
|
1495
1796
|
|
|
1496
1797
|
// src/components/Spinner.tsx
|
|
1497
|
-
var
|
|
1798
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
1498
1799
|
function Spinner({ size = "md", accent, className, ...props }) {
|
|
1499
|
-
return /* @__PURE__ */ (0,
|
|
1800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
1500
1801
|
"span",
|
|
1501
1802
|
{
|
|
1502
1803
|
className: cx("uix-spinner", accent && "uix-spinner--accent", size === "lg" && "uix-spinner--lg", className),
|
|
@@ -1508,10 +1809,10 @@ function Spinner({ size = "md", accent, className, ...props }) {
|
|
|
1508
1809
|
}
|
|
1509
1810
|
|
|
1510
1811
|
// src/components/Toast.tsx
|
|
1511
|
-
var
|
|
1812
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
1512
1813
|
function Toast({ title, message, tone, icon, onClose, leaving, className, ...props }) {
|
|
1513
1814
|
const assertive = tone === "danger";
|
|
1514
|
-
return /* @__PURE__ */ (0,
|
|
1815
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
|
|
1515
1816
|
"div",
|
|
1516
1817
|
{
|
|
1517
1818
|
className: cx("uix-toast", tone && `uix-toast--${tone}`, className),
|
|
@@ -1520,25 +1821,25 @@ function Toast({ title, message, tone, icon, onClose, leaving, className, ...pro
|
|
|
1520
1821
|
"aria-live": assertive ? "assertive" : "polite",
|
|
1521
1822
|
...props,
|
|
1522
1823
|
children: [
|
|
1523
|
-
icon && /* @__PURE__ */ (0,
|
|
1524
|
-
/* @__PURE__ */ (0,
|
|
1525
|
-
title && /* @__PURE__ */ (0,
|
|
1526
|
-
message && /* @__PURE__ */ (0,
|
|
1824
|
+
icon && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-toast__icon", "aria-hidden": "true", children: icon }),
|
|
1825
|
+
/* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "uix-toast__body", children: [
|
|
1826
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-toast__title", children: title }),
|
|
1827
|
+
message && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "uix-toast__msg", children: message })
|
|
1527
1828
|
] }),
|
|
1528
|
-
onClose && /* @__PURE__ */ (0,
|
|
1829
|
+
onClose && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { className: "uix-toast__close", onClick: onClose, "aria-label": "Dismiss", children: "\xD7" })
|
|
1529
1830
|
]
|
|
1530
1831
|
}
|
|
1531
1832
|
);
|
|
1532
1833
|
}
|
|
1533
1834
|
function Toaster({ children, className, ...props }) {
|
|
1534
|
-
return /* @__PURE__ */ (0,
|
|
1835
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: cx("uix-toaster", className), ...props, children });
|
|
1535
1836
|
}
|
|
1536
1837
|
|
|
1537
1838
|
// src/components/Table.tsx
|
|
1538
|
-
var
|
|
1539
|
-
var
|
|
1540
|
-
var TableWrap = (0,
|
|
1541
|
-
return /* @__PURE__ */ (0,
|
|
1839
|
+
var import_react22 = require("react");
|
|
1840
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
1841
|
+
var TableWrap = (0, import_react22.forwardRef)(function TableWrap2({ children, className, ...props }, ref) {
|
|
1842
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { ref, className: cx("uix-table-wrap", className), ...props, children });
|
|
1542
1843
|
});
|
|
1543
1844
|
function Table({
|
|
1544
1845
|
density = "standard",
|
|
@@ -1551,7 +1852,7 @@ function Table({
|
|
|
1551
1852
|
children,
|
|
1552
1853
|
...props
|
|
1553
1854
|
}) {
|
|
1554
|
-
return /* @__PURE__ */ (0,
|
|
1855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1555
1856
|
"table",
|
|
1556
1857
|
{
|
|
1557
1858
|
className: cx(
|
|
@@ -1570,7 +1871,7 @@ function Table({
|
|
|
1570
1871
|
);
|
|
1571
1872
|
}
|
|
1572
1873
|
function Th({ sortable, sortDirection, sortOrder, onSort, className, children, onClick, ...props }) {
|
|
1573
|
-
return /* @__PURE__ */ (0,
|
|
1874
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1574
1875
|
"th",
|
|
1575
1876
|
{
|
|
1576
1877
|
className,
|
|
@@ -1584,10 +1885,10 @@ function Th({ sortable, sortDirection, sortOrder, onSort, className, children, o
|
|
|
1584
1885
|
);
|
|
1585
1886
|
}
|
|
1586
1887
|
function Td({ pinned, className, children, ...props }) {
|
|
1587
|
-
return /* @__PURE__ */ (0,
|
|
1888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className, "data-pinned": pinned || void 0, ...props, children });
|
|
1588
1889
|
}
|
|
1589
1890
|
function Tr({ selected, pinned, className, children, ...props }) {
|
|
1590
|
-
return /* @__PURE__ */ (0,
|
|
1891
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1591
1892
|
"tr",
|
|
1592
1893
|
{
|
|
1593
1894
|
className,
|
|
@@ -1599,23 +1900,23 @@ function Tr({ selected, pinned, className, children, ...props }) {
|
|
|
1599
1900
|
);
|
|
1600
1901
|
}
|
|
1601
1902
|
function BulkBar({ count, children, className, ...props }) {
|
|
1602
|
-
return /* @__PURE__ */ (0,
|
|
1603
|
-
count != null && /* @__PURE__ */ (0,
|
|
1903
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx("uix-bulkbar", className), role: "toolbar", "aria-label": "Bulk actions", ...props, children: [
|
|
1904
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "uix-bulkbar__count", children: [
|
|
1604
1905
|
count,
|
|
1605
1906
|
" selected"
|
|
1606
1907
|
] }),
|
|
1607
|
-
/* @__PURE__ */ (0,
|
|
1908
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "uix-bulkbar__spacer" }),
|
|
1608
1909
|
children
|
|
1609
1910
|
] });
|
|
1610
1911
|
}
|
|
1611
1912
|
function RowActions({ children, className, ...props }) {
|
|
1612
|
-
return /* @__PURE__ */ (0,
|
|
1913
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("td", { className: cx("uix-table__actions", className), ...props, children });
|
|
1613
1914
|
}
|
|
1614
1915
|
function RowAction({ children, className, type = "button", ...props }) {
|
|
1615
|
-
return /* @__PURE__ */ (0,
|
|
1916
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { type, className: cx("uix-rowact", className), ...props, children });
|
|
1616
1917
|
}
|
|
1617
1918
|
function ExpandToggle({ expanded, className, type = "button", ...props }) {
|
|
1618
|
-
return /* @__PURE__ */ (0,
|
|
1919
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
1619
1920
|
"button",
|
|
1620
1921
|
{
|
|
1621
1922
|
type,
|
|
@@ -1623,27 +1924,27 @@ function ExpandToggle({ expanded, className, type = "button", ...props }) {
|
|
|
1623
1924
|
"aria-expanded": expanded,
|
|
1624
1925
|
"aria-label": expanded ? "Collapse row" : "Expand row",
|
|
1625
1926
|
...props,
|
|
1626
|
-
children: /* @__PURE__ */ (0,
|
|
1927
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M6 4l4 4-4 4" }) })
|
|
1627
1928
|
}
|
|
1628
1929
|
);
|
|
1629
1930
|
}
|
|
1630
1931
|
function CellStrong({ children, className, ...props }) {
|
|
1631
|
-
return /* @__PURE__ */ (0,
|
|
1932
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cx("uix-cell-strong", className), ...props, children });
|
|
1632
1933
|
}
|
|
1633
1934
|
function CellSub({ children, className, ...props }) {
|
|
1634
|
-
return /* @__PURE__ */ (0,
|
|
1935
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: cx("uix-cell-sub", className), ...props, children });
|
|
1635
1936
|
}
|
|
1636
1937
|
function Mark({ children, className, ...props }) {
|
|
1637
|
-
return /* @__PURE__ */ (0,
|
|
1938
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("mark", { className: cx("uix-mark", className), ...props, children });
|
|
1638
1939
|
}
|
|
1639
1940
|
function Highlighted({ text, query }) {
|
|
1640
|
-
return /* @__PURE__ */ (0,
|
|
1641
|
-
(seg, i) => seg.match ? /* @__PURE__ */ (0,
|
|
1941
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: highlightSegments(text, query).map(
|
|
1942
|
+
(seg, i) => seg.match ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("mark", { className: "uix-mark", children: seg.text }, i) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: seg.text }, i)
|
|
1642
1943
|
) });
|
|
1643
1944
|
}
|
|
1644
1945
|
|
|
1645
1946
|
// src/components/Pagination.tsx
|
|
1646
|
-
var
|
|
1947
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
1647
1948
|
function getPageNumbers(page, total) {
|
|
1648
1949
|
if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
|
|
1649
1950
|
const pages = [1];
|
|
@@ -1657,8 +1958,8 @@ function getPageNumbers(page, total) {
|
|
|
1657
1958
|
}
|
|
1658
1959
|
function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
1659
1960
|
const pages = getPageNumbers(page, pageCount);
|
|
1660
|
-
return /* @__PURE__ */ (0,
|
|
1661
|
-
/* @__PURE__ */ (0,
|
|
1961
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("nav", { "aria-label": "Pagination", className: cx("uix-pagination", className), ...props, children: [
|
|
1962
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1662
1963
|
"button",
|
|
1663
1964
|
{
|
|
1664
1965
|
className: "uix-pagination__btn",
|
|
@@ -1669,7 +1970,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
1669
1970
|
}
|
|
1670
1971
|
),
|
|
1671
1972
|
pages.map(
|
|
1672
|
-
(p, i) => p === "ellipsis" ? /* @__PURE__ */ (0,
|
|
1973
|
+
(p, i) => p === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1673
1974
|
"button",
|
|
1674
1975
|
{
|
|
1675
1976
|
className: "uix-pagination__btn",
|
|
@@ -1680,7 +1981,7 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
1680
1981
|
p
|
|
1681
1982
|
)
|
|
1682
1983
|
),
|
|
1683
|
-
/* @__PURE__ */ (0,
|
|
1984
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
1684
1985
|
"button",
|
|
1685
1986
|
{
|
|
1686
1987
|
className: "uix-pagination__btn",
|
|
@@ -1694,15 +1995,15 @@ function Pagination({ page, pageCount, onChange, className, ...props }) {
|
|
|
1694
1995
|
}
|
|
1695
1996
|
|
|
1696
1997
|
// src/components/StatusPill.tsx
|
|
1697
|
-
var
|
|
1998
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
1698
1999
|
function StatusPill({ tone = "neutral", treatment = "filled", dot, children, className, ...props }) {
|
|
1699
|
-
return /* @__PURE__ */ (0,
|
|
2000
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
1700
2001
|
"span",
|
|
1701
2002
|
{
|
|
1702
2003
|
className: cx("uix-pill", `uix-pill--${tone}`, treatment === "outline" && "uix-pill--outline", className),
|
|
1703
2004
|
...props,
|
|
1704
2005
|
children: [
|
|
1705
|
-
dot && /* @__PURE__ */ (0,
|
|
2006
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "uix-pill__dot", "aria-hidden": "true" }),
|
|
1706
2007
|
children
|
|
1707
2008
|
]
|
|
1708
2009
|
}
|
|
@@ -1710,10 +2011,10 @@ function StatusPill({ tone = "neutral", treatment = "filled", dot, children, cla
|
|
|
1710
2011
|
}
|
|
1711
2012
|
|
|
1712
2013
|
// src/components/Progress.tsx
|
|
1713
|
-
var
|
|
2014
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
1714
2015
|
function Progress({ value = 0, max = 100, indeterminate, className, ...props }) {
|
|
1715
2016
|
const pct = Math.max(0, Math.min(100, value / (max || 100) * 100));
|
|
1716
|
-
return /* @__PURE__ */ (0,
|
|
2017
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
1717
2018
|
"div",
|
|
1718
2019
|
{
|
|
1719
2020
|
role: "progressbar",
|
|
@@ -1722,16 +2023,16 @@ function Progress({ value = 0, max = 100, indeterminate, className, ...props })
|
|
|
1722
2023
|
"aria-valuenow": indeterminate ? void 0 : value,
|
|
1723
2024
|
className: cx("uix-progress", indeterminate && "uix-progress--indeterminate", className),
|
|
1724
2025
|
...props,
|
|
1725
|
-
children: /* @__PURE__ */ (0,
|
|
2026
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "uix-progress__bar", style: indeterminate ? void 0 : { width: `${pct}%` } })
|
|
1726
2027
|
}
|
|
1727
2028
|
);
|
|
1728
2029
|
}
|
|
1729
2030
|
|
|
1730
2031
|
// src/components/Meter.tsx
|
|
1731
|
-
var
|
|
2032
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
1732
2033
|
function Meter({ value = 0, tone, className, ...props }) {
|
|
1733
2034
|
const pct = Math.max(0, Math.min(100, value));
|
|
1734
|
-
return /* @__PURE__ */ (0,
|
|
2035
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1735
2036
|
"div",
|
|
1736
2037
|
{
|
|
1737
2038
|
role: "meter",
|
|
@@ -1740,7 +2041,7 @@ function Meter({ value = 0, tone, className, ...props }) {
|
|
|
1740
2041
|
"aria-valuemax": 100,
|
|
1741
2042
|
className: cx("uix-meter", className),
|
|
1742
2043
|
...props,
|
|
1743
|
-
children: /* @__PURE__ */ (0,
|
|
2044
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
1744
2045
|
"div",
|
|
1745
2046
|
{
|
|
1746
2047
|
className: "uix-meter__fill",
|
|
@@ -1753,29 +2054,29 @@ function Meter({ value = 0, tone, className, ...props }) {
|
|
|
1753
2054
|
}
|
|
1754
2055
|
|
|
1755
2056
|
// src/components/Stat.tsx
|
|
1756
|
-
var
|
|
2057
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
1757
2058
|
function Stat({ label, value, icon, meta, trend, className, ...props }) {
|
|
1758
|
-
return /* @__PURE__ */ (0,
|
|
1759
|
-
/* @__PURE__ */ (0,
|
|
1760
|
-
/* @__PURE__ */ (0,
|
|
2059
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cx("uix-stat", className), ...props, children: [
|
|
2060
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uix-stat__label", children: [
|
|
2061
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: label }),
|
|
1761
2062
|
icon
|
|
1762
2063
|
] }),
|
|
1763
|
-
/* @__PURE__ */ (0,
|
|
1764
|
-
(meta != null || trend != null) && /* @__PURE__ */ (0,
|
|
1765
|
-
trend != null && /* @__PURE__ */ (0,
|
|
2064
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uix-stat__value", children: value }),
|
|
2065
|
+
(meta != null || trend != null) && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uix-stat__meta", children: [
|
|
2066
|
+
trend != null && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: trend.label }),
|
|
1766
2067
|
meta
|
|
1767
2068
|
] })
|
|
1768
2069
|
] });
|
|
1769
2070
|
}
|
|
1770
2071
|
|
|
1771
2072
|
// src/components/Tooltip.tsx
|
|
1772
|
-
var
|
|
1773
|
-
var
|
|
2073
|
+
var import_react23 = require("react");
|
|
2074
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
1774
2075
|
function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
1775
|
-
const triggerRef = (0,
|
|
1776
|
-
const bubbleRef = (0,
|
|
1777
|
-
const [open, setOpen] = (0,
|
|
1778
|
-
const id = (0,
|
|
2076
|
+
const triggerRef = (0, import_react23.useRef)(null);
|
|
2077
|
+
const bubbleRef = (0, import_react23.useRef)(null);
|
|
2078
|
+
const [open, setOpen] = (0, import_react23.useState)(false);
|
|
2079
|
+
const id = (0, import_react23.useId)();
|
|
1779
2080
|
useAnchoredPosition(triggerRef, bubbleRef, { open, placement, offset: 6 });
|
|
1780
2081
|
const show = () => {
|
|
1781
2082
|
const b = bubbleRef.current;
|
|
@@ -1797,7 +2098,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
1797
2098
|
}
|
|
1798
2099
|
setOpen(false);
|
|
1799
2100
|
};
|
|
1800
|
-
(0,
|
|
2101
|
+
(0, import_react23.useEffect)(() => () => {
|
|
1801
2102
|
const b = bubbleRef.current;
|
|
1802
2103
|
if (b && b.matches(":popover-open")) {
|
|
1803
2104
|
try {
|
|
@@ -1807,7 +2108,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
1807
2108
|
}
|
|
1808
2109
|
}, []);
|
|
1809
2110
|
const bubbleAttr = { popover: "manual" };
|
|
1810
|
-
return /* @__PURE__ */ (0,
|
|
2111
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
1811
2112
|
"span",
|
|
1812
2113
|
{
|
|
1813
2114
|
ref: triggerRef,
|
|
@@ -1823,33 +2124,52 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
|
|
|
1823
2124
|
...props,
|
|
1824
2125
|
children: [
|
|
1825
2126
|
children,
|
|
1826
|
-
/* @__PURE__ */ (0,
|
|
2127
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { ref: bubbleRef, id, role: "tooltip", className: "uix-tooltip__bubble", ...bubbleAttr, children: label })
|
|
1827
2128
|
]
|
|
1828
2129
|
}
|
|
1829
2130
|
);
|
|
1830
2131
|
}
|
|
1831
2132
|
|
|
1832
2133
|
// src/components/States.tsx
|
|
1833
|
-
var
|
|
1834
|
-
function EmptyState({ icon, title, children, action, className, ...props }) {
|
|
1835
|
-
return /* @__PURE__ */ (0,
|
|
1836
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1837
|
-
title != null && /* @__PURE__ */ (0,
|
|
2134
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2135
|
+
function EmptyState({ icon, title, children, action, variant = "section", className, ...props }) {
|
|
2136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
|
|
2137
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__icon", children: icon }),
|
|
2138
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
1838
2139
|
children,
|
|
1839
2140
|
action
|
|
1840
2141
|
] });
|
|
1841
2142
|
}
|
|
1842
|
-
function ErrorState({ icon, title, detail, action, className, ...props }) {
|
|
1843
|
-
return /* @__PURE__ */ (0,
|
|
1844
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1845
|
-
title != null && /* @__PURE__ */ (0,
|
|
1846
|
-
detail != null && /* @__PURE__ */ (0,
|
|
2143
|
+
function ErrorState({ icon, title, detail, action, variant = "section", className, ...props }) {
|
|
2144
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-empty", "uix-empty--danger", `uix-empty--${variant}`, className), role: "alert", ...props, children: [
|
|
2145
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__icon uix-empty__icon--danger", children: icon }),
|
|
2146
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2147
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { children: detail }),
|
|
2148
|
+
action
|
|
2149
|
+
] });
|
|
2150
|
+
}
|
|
2151
|
+
function ForbiddenState({ icon, title, detail, action, variant = "section", className, ...props }) {
|
|
2152
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-empty", "uix-empty--warning", `uix-empty--${variant}`, className), ...props, children: [
|
|
2153
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__icon uix-empty__icon--warning", children: icon }),
|
|
2154
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2155
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { children: detail }),
|
|
1847
2156
|
action
|
|
1848
2157
|
] });
|
|
1849
2158
|
}
|
|
2159
|
+
function NotFoundState({ icon, title, detail, action, variant = "section", className, ...props }) {
|
|
2160
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("uix-empty", `uix-empty--${variant}`, className), ...props, children: [
|
|
2161
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__icon", children: icon }),
|
|
2162
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "uix-empty__title", children: title }),
|
|
2163
|
+
detail != null && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("p", { children: detail }),
|
|
2164
|
+
action
|
|
2165
|
+
] });
|
|
2166
|
+
}
|
|
2167
|
+
function FilteredEmptyState(props) {
|
|
2168
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(EmptyState, { "data-filtered": "true", ...props });
|
|
2169
|
+
}
|
|
1850
2170
|
function Skeleton({ variant = "block", width, height, className, style, ...props }) {
|
|
1851
2171
|
const dims = { width, height, ...style };
|
|
1852
|
-
return /* @__PURE__ */ (0,
|
|
2172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
1853
2173
|
"div",
|
|
1854
2174
|
{
|
|
1855
2175
|
className: cx(
|
|
@@ -1863,53 +2183,156 @@ function Skeleton({ variant = "block", width, height, className, style, ...props
|
|
|
1863
2183
|
}
|
|
1864
2184
|
);
|
|
1865
2185
|
}
|
|
1866
|
-
function LoadingState({ rows = 3, className, ...props }) {
|
|
1867
|
-
return /* @__PURE__ */ (0,
|
|
2186
|
+
function LoadingState({ rows = 3, density = "comfortable", label, className, ...props }) {
|
|
2187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("uix-stack", density === "compact" && "uix-stack--compact", className), role: "status", "aria-busy": "true", "aria-label": label, ...props, children: Array.from({ length: rows }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { variant: "text", width: `${92 - i % 3 * 14}%` }, i)) });
|
|
2188
|
+
}
|
|
2189
|
+
|
|
2190
|
+
// src/components/RelativeTime.tsx
|
|
2191
|
+
var import_react24 = require("react");
|
|
2192
|
+
|
|
2193
|
+
// src/relative-time-model.ts
|
|
2194
|
+
function parseDateValue(value) {
|
|
2195
|
+
const date = value instanceof Date ? new Date(value.getTime()) : new Date(value);
|
|
2196
|
+
return Number.isNaN(date.getTime()) ? null : date;
|
|
2197
|
+
}
|
|
2198
|
+
function relativeTimeValue(date, now) {
|
|
2199
|
+
const seconds = (date.getTime() - now.getTime()) / 1e3;
|
|
2200
|
+
const absolute = Math.abs(seconds);
|
|
2201
|
+
if (absolute < 60) return { value: Math.round(seconds), unit: "second" };
|
|
2202
|
+
if (absolute < 3600) return { value: Math.round(seconds / 60), unit: "minute" };
|
|
2203
|
+
if (absolute < 86400) return { value: Math.round(seconds / 3600), unit: "hour" };
|
|
2204
|
+
return { value: Math.round(seconds / 86400), unit: "day" };
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
// src/relative-time-clock.ts
|
|
2208
|
+
var clocks = /* @__PURE__ */ new Map();
|
|
2209
|
+
var getClock = (interval) => {
|
|
2210
|
+
let clock = clocks.get(interval);
|
|
2211
|
+
if (!clock) {
|
|
2212
|
+
clock = { now: Date.now(), listeners: /* @__PURE__ */ new Set() };
|
|
2213
|
+
clocks.set(interval, clock);
|
|
2214
|
+
}
|
|
2215
|
+
return clock;
|
|
2216
|
+
};
|
|
2217
|
+
var readRelativeClock = (interval) => getClock(interval).now;
|
|
2218
|
+
function subscribeRelativeClock(interval, listener) {
|
|
2219
|
+
if (interval <= 0 || typeof window === "undefined") return () => {
|
|
2220
|
+
};
|
|
2221
|
+
const clock = getClock(interval);
|
|
2222
|
+
clock.listeners.add(listener);
|
|
2223
|
+
if (!clock.timer) {
|
|
2224
|
+
clock.timer = window.setInterval(() => {
|
|
2225
|
+
clock.now = Date.now();
|
|
2226
|
+
clock.listeners.forEach((notify) => notify());
|
|
2227
|
+
}, interval);
|
|
2228
|
+
}
|
|
2229
|
+
return () => {
|
|
2230
|
+
clock.listeners.delete(listener);
|
|
2231
|
+
if (clock.listeners.size === 0 && clock.timer) {
|
|
2232
|
+
window.clearInterval(clock.timer);
|
|
2233
|
+
clock.timer = void 0;
|
|
2234
|
+
}
|
|
2235
|
+
};
|
|
2236
|
+
}
|
|
2237
|
+
|
|
2238
|
+
// src/components/RelativeTime.tsx
|
|
2239
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2240
|
+
function RelativeTime({
|
|
2241
|
+
value,
|
|
2242
|
+
now,
|
|
2243
|
+
locale,
|
|
2244
|
+
timeZone,
|
|
2245
|
+
numeric = "auto",
|
|
2246
|
+
invalidLabel = "\u2014",
|
|
2247
|
+
refreshInterval = 3e4,
|
|
2248
|
+
formatter,
|
|
2249
|
+
title,
|
|
2250
|
+
...props
|
|
2251
|
+
}) {
|
|
2252
|
+
const interval = refreshInterval === false ? 0 : Math.max(0, refreshInterval);
|
|
2253
|
+
const fixedNow = now == null ? void 0 : new Date(now).getTime();
|
|
2254
|
+
const subscribe = (0, import_react24.useCallback)((listener) => fixedNow == null ? subscribeRelativeClock(interval, listener) : () => {
|
|
2255
|
+
}, [fixedNow, interval]);
|
|
2256
|
+
const getSnapshot = (0, import_react24.useCallback)(() => fixedNow ?? readRelativeClock(interval), [fixedNow, interval]);
|
|
2257
|
+
const getServerSnapshot = (0, import_react24.useCallback)(() => fixedNow ?? Date.now(), [fixedNow]);
|
|
2258
|
+
const clock = (0, import_react24.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
|
|
2259
|
+
const date = (0, import_react24.useMemo)(() => parseDateValue(value), [value]);
|
|
2260
|
+
if (!date) return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("time", { "data-invalid": "true", suppressHydrationWarning: true, ...props, children: invalidLabel });
|
|
2261
|
+
const current = new Date(clock);
|
|
2262
|
+
const content = formatter ? formatter({ date, now: current, locale, timeZone }) : (() => {
|
|
2263
|
+
const relative = relativeTimeValue(date, current);
|
|
2264
|
+
if (relative.unit === "day" && Math.abs(relative.value) >= 7) {
|
|
2265
|
+
return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone }).format(date);
|
|
2266
|
+
}
|
|
2267
|
+
return new Intl.RelativeTimeFormat(locale, { numeric }).format(relative.value, relative.unit);
|
|
2268
|
+
})();
|
|
2269
|
+
const absolute = new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short", timeZone }).format(date);
|
|
2270
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("time", { dateTime: date.toISOString(), title: title ?? absolute, suppressHydrationWarning: true, ...props, children: content });
|
|
2271
|
+
}
|
|
2272
|
+
|
|
2273
|
+
// src/components/AsyncOperationStatus.tsx
|
|
2274
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
2275
|
+
var tones = {
|
|
2276
|
+
queued: "neutral",
|
|
2277
|
+
running: "info",
|
|
2278
|
+
complete: "success",
|
|
2279
|
+
failed: "danger"
|
|
2280
|
+
};
|
|
2281
|
+
function AsyncOperationStatus({ state, title, statusLabel, description, progress, progressLabel, action, className, ...props }) {
|
|
2282
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("uix-operation", className), role: state === "failed" ? "alert" : "status", "aria-live": "polite", ...props, children: [
|
|
2283
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uix-operation__head", children: [
|
|
2284
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("strong", { children: title }),
|
|
2285
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(StatusPill, { tone: tones[state], children: statusLabel })
|
|
2286
|
+
] }),
|
|
2287
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-operation__description", children: description }),
|
|
2288
|
+
progress != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Progress, { value: progress, "aria-label": progressLabel }),
|
|
2289
|
+
action != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uix-operation__action", children: action })
|
|
2290
|
+
] });
|
|
1868
2291
|
}
|
|
1869
2292
|
|
|
1870
2293
|
// src/components/Label.tsx
|
|
1871
|
-
var
|
|
2294
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
1872
2295
|
function Label({ color, dot, children, className, style, ...props }) {
|
|
1873
2296
|
const merged = color ? { "--label-color": color, ...style } : style;
|
|
1874
|
-
return /* @__PURE__ */ (0,
|
|
1875
|
-
dot && /* @__PURE__ */ (0,
|
|
2297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: cx("uix-label", className), style: merged, ...props, children: [
|
|
2298
|
+
dot && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "uix-label__dot", "aria-hidden": "true" }),
|
|
1876
2299
|
children
|
|
1877
2300
|
] });
|
|
1878
2301
|
}
|
|
1879
2302
|
|
|
1880
2303
|
// src/components/Avatar.tsx
|
|
1881
|
-
var
|
|
2304
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
1882
2305
|
function Avatar({ size = "md", src, alt, children, status, className, ...props }) {
|
|
1883
|
-
return /* @__PURE__ */ (0,
|
|
1884
|
-
src ? /* @__PURE__ */ (0,
|
|
1885
|
-
status && /* @__PURE__ */ (0,
|
|
2306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: cx("uix-avatar", size !== "md" && `uix-avatar--${size}`, className), ...props, children: [
|
|
2307
|
+
src ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src, alt: alt ?? "" }) : children,
|
|
2308
|
+
status && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-avatar__status" })
|
|
1886
2309
|
] });
|
|
1887
2310
|
}
|
|
1888
2311
|
function AvatarGroup({ children, className, ...props }) {
|
|
1889
|
-
return /* @__PURE__ */ (0,
|
|
2312
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: cx("uix-avatar-group", className), ...props, children });
|
|
1890
2313
|
}
|
|
1891
2314
|
function UserChip({ avatar, name, sub, className, children, ...props }) {
|
|
1892
|
-
return /* @__PURE__ */ (0,
|
|
2315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: cx("uix-user-chip", className), ...props, children: [
|
|
1893
2316
|
avatar,
|
|
1894
|
-
/* @__PURE__ */ (0,
|
|
1895
|
-
name != null && /* @__PURE__ */ (0,
|
|
1896
|
-
sub != null && /* @__PURE__ */ (0,
|
|
2317
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { children: [
|
|
2318
|
+
name != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-user-chip__name", children: name }),
|
|
2319
|
+
sub != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "uix-user-chip__sub", style: { display: "block" }, children: sub })
|
|
1897
2320
|
] }),
|
|
1898
2321
|
children
|
|
1899
2322
|
] });
|
|
1900
2323
|
}
|
|
1901
2324
|
|
|
1902
2325
|
// src/components/Comments.tsx
|
|
1903
|
-
var
|
|
2326
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
1904
2327
|
function Comments({ children, className, ...props }) {
|
|
1905
|
-
return /* @__PURE__ */ (0,
|
|
2328
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: cx("uix-comments", className), ...props, children });
|
|
1906
2329
|
}
|
|
1907
2330
|
function Comment({ avatar, author, meta, children, className, ...props }) {
|
|
1908
|
-
return /* @__PURE__ */ (0,
|
|
1909
|
-
avatar ?? /* @__PURE__ */ (0,
|
|
1910
|
-
/* @__PURE__ */ (0,
|
|
1911
|
-
(author != null || meta != null) && /* @__PURE__ */ (0,
|
|
1912
|
-
author != null && /* @__PURE__ */ (0,
|
|
2331
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: cx("uix-comment", className), ...props, children: [
|
|
2332
|
+
avatar ?? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { "aria-hidden": "true" }),
|
|
2333
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uix-comment__body", children: [
|
|
2334
|
+
(author != null || meta != null) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uix-comment__meta", children: [
|
|
2335
|
+
author != null && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "uix-comment__author", children: author }),
|
|
1913
2336
|
author != null && meta != null ? " \xB7 " : null,
|
|
1914
2337
|
meta
|
|
1915
2338
|
] }),
|
|
@@ -1919,21 +2342,21 @@ function Comment({ avatar, author, meta, children, className, ...props }) {
|
|
|
1919
2342
|
}
|
|
1920
2343
|
|
|
1921
2344
|
// src/components/Composer.tsx
|
|
1922
|
-
var
|
|
2345
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
1923
2346
|
function Composer({ children, className, ...props }) {
|
|
1924
|
-
return /* @__PURE__ */ (0,
|
|
2347
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("uix-composer", className), ...props, children });
|
|
1925
2348
|
}
|
|
1926
2349
|
function ComposerBar({ children, className, ...props }) {
|
|
1927
|
-
return /* @__PURE__ */ (0,
|
|
2350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("uix-composer__bar", className), ...props, children });
|
|
1928
2351
|
}
|
|
1929
2352
|
|
|
1930
2353
|
// src/components/Segmented.tsx
|
|
1931
|
-
var
|
|
1932
|
-
var
|
|
1933
|
-
var SegmentedCtx = (0,
|
|
2354
|
+
var import_react25 = require("react");
|
|
2355
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
2356
|
+
var SegmentedCtx = (0, import_react25.createContext)({});
|
|
1934
2357
|
function Segmented({ value, onChange, children, className, ...props }) {
|
|
1935
|
-
const contextValue = (0,
|
|
1936
|
-
return /* @__PURE__ */ (0,
|
|
2358
|
+
const contextValue = (0, import_react25.useMemo)(() => ({ value, onChange }), [value, onChange]);
|
|
2359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SegmentedCtx.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { role: "group", className: cx("uix-segmented", className), ...props, children }) });
|
|
1937
2360
|
}
|
|
1938
2361
|
function SegmentedOption({
|
|
1939
2362
|
value,
|
|
@@ -1942,9 +2365,9 @@ function SegmentedOption({
|
|
|
1942
2365
|
onClick,
|
|
1943
2366
|
...props
|
|
1944
2367
|
}) {
|
|
1945
|
-
const ctx = (0,
|
|
2368
|
+
const ctx = (0, import_react25.useContext)(SegmentedCtx);
|
|
1946
2369
|
const selected = ctx.value === value;
|
|
1947
|
-
return /* @__PURE__ */ (0,
|
|
2370
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
1948
2371
|
"button",
|
|
1949
2372
|
{
|
|
1950
2373
|
type: "button",
|
|
@@ -1960,39 +2383,198 @@ function SegmentedOption({
|
|
|
1960
2383
|
);
|
|
1961
2384
|
}
|
|
1962
2385
|
|
|
2386
|
+
// src/components/TableControls.tsx
|
|
2387
|
+
var import_react26 = require("react");
|
|
2388
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
2389
|
+
function ViewMenu({ density, densityLabel, densityOptions, onDensityChange, zebra, freeze, columns, columnsLabel, onColumnVisibilityChange }) {
|
|
2390
|
+
const densityLabelId = (0, import_react26.useId)();
|
|
2391
|
+
const zebraLabelId = (0, import_react26.useId)();
|
|
2392
|
+
const freezeLabelId = (0, import_react26.useId)();
|
|
2393
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu", children: [
|
|
2394
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu__group", children: [
|
|
2395
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { id: densityLabelId, className: "uix-view-menu__label", children: densityLabel }),
|
|
2396
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Segmented, { value: density, onChange: onDensityChange, "aria-labelledby": densityLabelId, children: densityOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(SegmentedOption, { value: option.value, children: option.label }, option.value)) })
|
|
2397
|
+
] }),
|
|
2398
|
+
(zebra || freeze) && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu__group", children: [
|
|
2399
|
+
zebra && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu__row", children: [
|
|
2400
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { id: zebraLabelId, children: zebra.label }),
|
|
2401
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Switch, { checked: zebra.checked, "aria-labelledby": zebraLabelId, onChange: (event) => zebra.onChange(event.currentTarget.checked) })
|
|
2402
|
+
] }),
|
|
2403
|
+
freeze && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu__row", children: [
|
|
2404
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { id: freezeLabelId, children: freeze.label }),
|
|
2405
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Switch, { checked: freeze.checked, "aria-labelledby": freezeLabelId, onChange: (event) => freeze.onChange(event.currentTarget.checked) })
|
|
2406
|
+
] })
|
|
2407
|
+
] }),
|
|
2408
|
+
columns && columns.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-view-menu__group", children: [
|
|
2409
|
+
columnsLabel != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uix-view-menu__label", children: columnsLabel }),
|
|
2410
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uix-view-menu__cols", children: columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Checkbox, { label: column.label, checked: column.visible, disabled: column.disabled, onChange: (event) => onColumnVisibilityChange?.(column.id, event.currentTarget.checked) }, column.id)) })
|
|
2411
|
+
] })
|
|
2412
|
+
] });
|
|
2413
|
+
}
|
|
2414
|
+
function FilterPopover({ label, type = "text", value, onValueChange, options, applyLabel, clearLabel, onApply, onClear, placeholder }) {
|
|
2415
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-filter-popover", children: [
|
|
2416
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "uix-label", children: [
|
|
2417
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: label }),
|
|
2418
|
+
type === "select" || type === "enum" || type === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("select", { className: "uix-select", value, onChange: (event) => onValueChange(event.currentTarget.value), children: options?.map((option) => /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: option.value, children: option.label }, option.value)) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Input, { type, value, placeholder, onChange: (event) => onValueChange(event.currentTarget.value) })
|
|
2419
|
+
] }),
|
|
2420
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uix-filter-popover__actions", children: [
|
|
2421
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { type: "button", onClick: onClear, children: clearLabel }),
|
|
2422
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { type: "button", variant: "primary", onClick: onApply, children: applyLabel })
|
|
2423
|
+
] })
|
|
2424
|
+
] });
|
|
2425
|
+
}
|
|
2426
|
+
function SavedViewMenu({ items, onSelect, onPinChange, pinLabel, unpinLabel, emptyLabel, actions, footer }) {
|
|
2427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("ul", { className: "uix-menu uix-saved-views", children: [
|
|
2428
|
+
items.length === 0 && emptyLabel != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { className: "uix-menu__label", children: emptyLabel }),
|
|
2429
|
+
items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("li", { className: "uix-saved-views__row", children: [
|
|
2430
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", className: "uix-menu__item", "data-active": item.active || void 0, onClick: () => onSelect(item.id), children: item.label }),
|
|
2431
|
+
onPinChange && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("button", { type: "button", className: "uix-saved-views__pin", "aria-label": item.pinned ? unpinLabel : pinLabel, "data-on": item.pinned || void 0, onClick: () => onPinChange(item.id, !item.pinned), children: "\u2605" }),
|
|
2432
|
+
actions?.(item)
|
|
2433
|
+
] }, item.id)),
|
|
2434
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("li", { className: "uix-saved-views__footer", children: footer })
|
|
2435
|
+
] });
|
|
2436
|
+
}
|
|
2437
|
+
|
|
1963
2438
|
// src/components/Timeline.tsx
|
|
1964
|
-
var
|
|
2439
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
1965
2440
|
function Timeline({ children, className, ...props }) {
|
|
1966
|
-
return /* @__PURE__ */ (0,
|
|
2441
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: cx("uix-timeline", className), ...props, children });
|
|
1967
2442
|
}
|
|
1968
2443
|
function TimelineItem({ node, meta, children, className, ...props }) {
|
|
1969
|
-
return /* @__PURE__ */ (0,
|
|
1970
|
-
/* @__PURE__ */ (0,
|
|
1971
|
-
node ?? /* @__PURE__ */ (0,
|
|
1972
|
-
/* @__PURE__ */ (0,
|
|
2444
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx("uix-timeline__item", className), ...props, children: [
|
|
2445
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uix-timeline__rail", children: [
|
|
2446
|
+
node ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "uix-timeline__node" }),
|
|
2447
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "uix-timeline__line" })
|
|
1973
2448
|
] }),
|
|
1974
|
-
/* @__PURE__ */ (0,
|
|
1975
|
-
meta != null && /* @__PURE__ */ (0,
|
|
2449
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uix-timeline__body", children: [
|
|
2450
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uix-timeline__meta", children: meta }),
|
|
1976
2451
|
children
|
|
1977
2452
|
] })
|
|
1978
2453
|
] });
|
|
1979
2454
|
}
|
|
1980
2455
|
|
|
2456
|
+
// src/components/Pipeline.tsx
|
|
2457
|
+
var import_react27 = require("react");
|
|
2458
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
2459
|
+
function Pipeline({ detailed = false, children, className, tabIndex, ...props }) {
|
|
2460
|
+
const stages = detailed ? import_react27.Children.map(children, (child) => (0, import_react27.isValidElement)(child) && child.type === PipelineStage ? (0, import_react27.cloneElement)(child, { detailed: child.props.detailed ?? true }) : child) : children;
|
|
2461
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2462
|
+
"ol",
|
|
2463
|
+
{
|
|
2464
|
+
className: cx("uix-pipeline", detailed && "uix-pipeline--detailed", className),
|
|
2465
|
+
tabIndex: tabIndex ?? (detailed ? 0 : void 0),
|
|
2466
|
+
...props,
|
|
2467
|
+
children: stages
|
|
2468
|
+
}
|
|
2469
|
+
);
|
|
2470
|
+
}
|
|
2471
|
+
var DEFAULT_STATE_LABELS = {
|
|
2472
|
+
pending: "Pending",
|
|
2473
|
+
waiting: "Waiting",
|
|
2474
|
+
active: "Active",
|
|
2475
|
+
current: "Current",
|
|
2476
|
+
running: "Running",
|
|
2477
|
+
done: "Done",
|
|
2478
|
+
complete: "Complete",
|
|
2479
|
+
blocked: "Blocked",
|
|
2480
|
+
failed: "Failed",
|
|
2481
|
+
error: "Error"
|
|
2482
|
+
};
|
|
2483
|
+
function PipelineStage({
|
|
2484
|
+
label,
|
|
2485
|
+
state = "pending",
|
|
2486
|
+
stateLabel: stateLabel2,
|
|
2487
|
+
description,
|
|
2488
|
+
meta,
|
|
2489
|
+
marker,
|
|
2490
|
+
detailed = false,
|
|
2491
|
+
current: currentProp,
|
|
2492
|
+
className,
|
|
2493
|
+
...props
|
|
2494
|
+
}) {
|
|
2495
|
+
const current = currentProp ?? (state === "active" || state === "current" || state === "running");
|
|
2496
|
+
const resolvedStateLabel = stateLabel2 ?? DEFAULT_STATE_LABELS[state];
|
|
2497
|
+
const showDetails = detailed || description != null || meta != null || marker != null;
|
|
2498
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
2499
|
+
"li",
|
|
2500
|
+
{
|
|
2501
|
+
className: cx("uix-pipeline__stage", className),
|
|
2502
|
+
"data-state": state,
|
|
2503
|
+
"aria-current": current ? "step" : void 0,
|
|
2504
|
+
...props,
|
|
2505
|
+
children: showDetails ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
|
|
2506
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "uix-pipeline__marker", "aria-hidden": "true", children: marker }),
|
|
2507
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "uix-pipeline__content", children: [
|
|
2508
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__eyebrow", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "uix-pipeline__state", children: resolvedStateLabel }) }),
|
|
2509
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__title", children: label }),
|
|
2510
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__description", children: description }),
|
|
2511
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "uix-pipeline__meta", children: meta })
|
|
2512
|
+
] })
|
|
2513
|
+
] }) : label
|
|
2514
|
+
}
|
|
2515
|
+
);
|
|
2516
|
+
}
|
|
2517
|
+
|
|
2518
|
+
// src/components/Flow.tsx
|
|
2519
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
2520
|
+
function Flow({ variant = "linear", panel = false, children, className, role = "group", ...props }) {
|
|
2521
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
2522
|
+
"div",
|
|
2523
|
+
{
|
|
2524
|
+
className: cx("uix-flow", `uix-flow--${variant}`, panel && "uix-flow--panel", className),
|
|
2525
|
+
role,
|
|
2526
|
+
...props,
|
|
2527
|
+
children
|
|
2528
|
+
}
|
|
2529
|
+
);
|
|
2530
|
+
}
|
|
2531
|
+
var FLOW_STATE_LABELS = {
|
|
2532
|
+
pending: "Pending",
|
|
2533
|
+
active: "Active",
|
|
2534
|
+
running: "Running",
|
|
2535
|
+
done: "Done",
|
|
2536
|
+
error: "Error"
|
|
2537
|
+
};
|
|
2538
|
+
function FlowNode({
|
|
2539
|
+
title,
|
|
2540
|
+
state = "pending",
|
|
2541
|
+
stateLabel: stateLabel2,
|
|
2542
|
+
eyebrow,
|
|
2543
|
+
meta,
|
|
2544
|
+
icon,
|
|
2545
|
+
footer,
|
|
2546
|
+
wide = false,
|
|
2547
|
+
className,
|
|
2548
|
+
...props
|
|
2549
|
+
}) {
|
|
2550
|
+
const resolvedStateLabel = stateLabel2 ?? FLOW_STATE_LABELS[state];
|
|
2551
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx("uix-node", `uix-node--${state}`, icon == null && "uix-node--no-icon", wide && "uix-node--wide", className), ...props, children: [
|
|
2552
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "uix-node__icon", "aria-hidden": "true", children: icon }),
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uix-node__body", children: [
|
|
2554
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__eyebrow", children: eyebrow }),
|
|
2555
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__title", children: title }),
|
|
2556
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__meta", children: meta }),
|
|
2557
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__status", children: resolvedStateLabel })
|
|
2558
|
+
] }),
|
|
2559
|
+
footer != null && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uix-node__footer", children: footer })
|
|
2560
|
+
] });
|
|
2561
|
+
}
|
|
2562
|
+
|
|
1981
2563
|
// src/components/Prose.tsx
|
|
1982
|
-
var
|
|
2564
|
+
var import_jsx_runtime51 = require("react/jsx-runtime");
|
|
1983
2565
|
function Prose({ children, className, ...props }) {
|
|
1984
|
-
return /* @__PURE__ */ (0,
|
|
2566
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: cx("uix-prose", className), ...props, children });
|
|
1985
2567
|
}
|
|
1986
2568
|
function Note({ tone, icon, children, className, ...props }) {
|
|
1987
|
-
return /* @__PURE__ */ (0,
|
|
1988
|
-
icon != null && /* @__PURE__ */ (0,
|
|
1989
|
-
/* @__PURE__ */ (0,
|
|
2569
|
+
return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: cx("uix-note", tone && `uix-note--${tone}`, className), ...props, children: [
|
|
2570
|
+
icon != null && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-note__icon", children: icon }),
|
|
2571
|
+
/* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "uix-note__body", children })
|
|
1990
2572
|
] });
|
|
1991
2573
|
}
|
|
1992
2574
|
|
|
1993
2575
|
// src/components/Popover.tsx
|
|
1994
|
-
var
|
|
1995
|
-
var
|
|
2576
|
+
var import_react28 = require("react");
|
|
2577
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
1996
2578
|
function Popover({
|
|
1997
2579
|
popover = "auto",
|
|
1998
2580
|
anchor,
|
|
@@ -2002,15 +2584,15 @@ function Popover({
|
|
|
2002
2584
|
children,
|
|
2003
2585
|
...props
|
|
2004
2586
|
}) {
|
|
2005
|
-
const ref = (0,
|
|
2006
|
-
const [open, setOpen] = (0,
|
|
2587
|
+
const ref = (0, import_react28.useRef)(null);
|
|
2588
|
+
const [open, setOpen] = (0, import_react28.useState)(false);
|
|
2007
2589
|
const popoverAttr = { popover };
|
|
2008
2590
|
const reposition = useAnchoredPosition(anchor ?? null, ref, {
|
|
2009
2591
|
open: open && !!anchor,
|
|
2010
2592
|
placement,
|
|
2011
2593
|
offset
|
|
2012
2594
|
});
|
|
2013
|
-
(0,
|
|
2595
|
+
(0, import_react28.useEffect)(() => {
|
|
2014
2596
|
const el = ref.current;
|
|
2015
2597
|
if (!el || !anchor) return;
|
|
2016
2598
|
const sync = () => {
|
|
@@ -2021,38 +2603,38 @@ function Popover({
|
|
|
2021
2603
|
el.addEventListener("toggle", sync);
|
|
2022
2604
|
return () => el.removeEventListener("toggle", sync);
|
|
2023
2605
|
}, [anchor, reposition]);
|
|
2024
|
-
return /* @__PURE__ */ (0,
|
|
2606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ref, className: cx("uix-popover", className), ...popoverAttr, ...props, children });
|
|
2025
2607
|
}
|
|
2026
2608
|
|
|
2027
2609
|
// src/components/CommandPalette.tsx
|
|
2028
|
-
var
|
|
2610
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
2029
2611
|
function CommandPalette({ inputProps, children, className, ...props }) {
|
|
2030
|
-
return /* @__PURE__ */ (0,
|
|
2031
|
-
/* @__PURE__ */ (0,
|
|
2032
|
-
/* @__PURE__ */ (0,
|
|
2612
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk", className), ...props, children: [
|
|
2613
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("input", { className: "uix-cmdk__input", ...inputProps }),
|
|
2614
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__list", children })
|
|
2033
2615
|
] });
|
|
2034
2616
|
}
|
|
2035
2617
|
function CommandGroup({ label, children }) {
|
|
2036
|
-
return /* @__PURE__ */ (0,
|
|
2037
|
-
label != null && /* @__PURE__ */ (0,
|
|
2618
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
|
|
2619
|
+
label != null && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uix-cmdk__group", children: label }),
|
|
2038
2620
|
children
|
|
2039
2621
|
] });
|
|
2040
2622
|
}
|
|
2041
2623
|
function CommandItem({ icon, shortcut, active, children, className, ...props }) {
|
|
2042
|
-
return /* @__PURE__ */ (0,
|
|
2624
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("uix-cmdk__item", className), "data-active": active || void 0, ...props, children: [
|
|
2043
2625
|
icon,
|
|
2044
|
-
/* @__PURE__ */ (0,
|
|
2626
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children }),
|
|
2045
2627
|
shortcut
|
|
2046
2628
|
] });
|
|
2047
2629
|
}
|
|
2048
2630
|
|
|
2049
2631
|
// src/components/Inbox.tsx
|
|
2050
|
-
var
|
|
2632
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
2051
2633
|
function Inbox({ children, className, ...props }) {
|
|
2052
|
-
return /* @__PURE__ */ (0,
|
|
2634
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox", className), ...props, children });
|
|
2053
2635
|
}
|
|
2054
2636
|
function InboxList({ children, className, ...props }) {
|
|
2055
|
-
return /* @__PURE__ */ (0,
|
|
2637
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox__list", className), role: "listbox", ...props, children });
|
|
2056
2638
|
}
|
|
2057
2639
|
function InboxItem({
|
|
2058
2640
|
subject,
|
|
@@ -2064,7 +2646,7 @@ function InboxItem({
|
|
|
2064
2646
|
className,
|
|
2065
2647
|
...props
|
|
2066
2648
|
}) {
|
|
2067
|
-
return /* @__PURE__ */ (0,
|
|
2649
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
2068
2650
|
"div",
|
|
2069
2651
|
{
|
|
2070
2652
|
role: "option",
|
|
@@ -2074,41 +2656,41 @@ function InboxItem({
|
|
|
2074
2656
|
...props,
|
|
2075
2657
|
children: [
|
|
2076
2658
|
leading,
|
|
2077
|
-
subject != null && /* @__PURE__ */ (0,
|
|
2078
|
-
preview != null && /* @__PURE__ */ (0,
|
|
2659
|
+
subject != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-inbox__subject", children: subject }),
|
|
2660
|
+
preview != null && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uix-inbox__preview", children: preview }),
|
|
2079
2661
|
children
|
|
2080
2662
|
]
|
|
2081
2663
|
}
|
|
2082
2664
|
);
|
|
2083
2665
|
}
|
|
2084
2666
|
function InboxDetail({ children, className, ...props }) {
|
|
2085
|
-
return /* @__PURE__ */ (0,
|
|
2667
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: cx("uix-inbox__detail", className), ...props, children });
|
|
2086
2668
|
}
|
|
2087
2669
|
|
|
2088
2670
|
// src/components/Kanban.tsx
|
|
2089
|
-
var
|
|
2671
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
2090
2672
|
function Kanban({ children, className, ...props }) {
|
|
2091
|
-
return /* @__PURE__ */ (0,
|
|
2673
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: cx("uix-kanban", className), ...props, children });
|
|
2092
2674
|
}
|
|
2093
2675
|
function KanbanColumn({ title, count, children, className, ...props }) {
|
|
2094
|
-
return /* @__PURE__ */ (0,
|
|
2095
|
-
(title != null || count != null) && /* @__PURE__ */ (0,
|
|
2676
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban__col", className), ...props, children: [
|
|
2677
|
+
(title != null || count != null) && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uix-kanban__head", children: [
|
|
2096
2678
|
title,
|
|
2097
|
-
count != null && /* @__PURE__ */ (0,
|
|
2679
|
+
count != null && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "uix-kanban__count", children: count })
|
|
2098
2680
|
] }),
|
|
2099
|
-
/* @__PURE__ */ (0,
|
|
2681
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__body", children })
|
|
2100
2682
|
] });
|
|
2101
2683
|
}
|
|
2102
2684
|
function KanbanCard({ title, meta, children, className, ...props }) {
|
|
2103
|
-
return /* @__PURE__ */ (0,
|
|
2104
|
-
title && /* @__PURE__ */ (0,
|
|
2105
|
-
meta && /* @__PURE__ */ (0,
|
|
2685
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("uix-kanban__card", className), ...props, children: [
|
|
2686
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-title", children: title }),
|
|
2687
|
+
meta && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uix-kanban__card-meta", children: meta }),
|
|
2106
2688
|
children
|
|
2107
2689
|
] });
|
|
2108
2690
|
}
|
|
2109
2691
|
|
|
2110
2692
|
// src/components/Tree.tsx
|
|
2111
|
-
var
|
|
2693
|
+
var import_react29 = require("react");
|
|
2112
2694
|
|
|
2113
2695
|
// src/tree-model.ts
|
|
2114
2696
|
function flattenTree(nodes, expanded, level = 1) {
|
|
@@ -2158,12 +2740,12 @@ function treeNav(flat, currentId, key) {
|
|
|
2158
2740
|
}
|
|
2159
2741
|
|
|
2160
2742
|
// src/components/Tree.tsx
|
|
2161
|
-
var
|
|
2162
|
-
var ChevronIcon2 = () => /* @__PURE__ */ (0,
|
|
2743
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
2744
|
+
var ChevronIcon2 = () => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("svg", { viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: "M2 4l4 4 4-4" }) });
|
|
2163
2745
|
function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle, onSelect, onFocusNode, level = 1 }) {
|
|
2164
2746
|
const hasChildren = Array.isArray(node.children) && node.children.length > 0;
|
|
2165
2747
|
const isExpanded = expanded.has(node.id);
|
|
2166
|
-
return /* @__PURE__ */ (0,
|
|
2748
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
2167
2749
|
"li",
|
|
2168
2750
|
{
|
|
2169
2751
|
role: "treeitem",
|
|
@@ -2183,12 +2765,12 @@ function TreeNode({ node, expanded, selected, selectable, tabbableId, onToggle,
|
|
|
2183
2765
|
onFocusNode(node.id);
|
|
2184
2766
|
},
|
|
2185
2767
|
children: [
|
|
2186
|
-
/* @__PURE__ */ (0,
|
|
2187
|
-
/* @__PURE__ */ (0,
|
|
2188
|
-
node.icon && /* @__PURE__ */ (0,
|
|
2189
|
-
/* @__PURE__ */ (0,
|
|
2768
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "uix-tree__row", children: [
|
|
2769
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__toggle", children: hasChildren && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronIcon2, {}) }),
|
|
2770
|
+
node.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": "true", children: node.icon }),
|
|
2771
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__label", children: node.label })
|
|
2190
2772
|
] }),
|
|
2191
|
-
hasChildren && isExpanded && /* @__PURE__ */ (0,
|
|
2773
|
+
hasChildren && isExpanded && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { role: "group", className: "uix-tree__group", children: node.children.map((child) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2192
2774
|
TreeNode,
|
|
2193
2775
|
{
|
|
2194
2776
|
node: child,
|
|
@@ -2220,12 +2802,12 @@ function Tree({
|
|
|
2220
2802
|
className,
|
|
2221
2803
|
...props
|
|
2222
2804
|
}) {
|
|
2223
|
-
const [internalExpanded, setInternalExpanded] = (0,
|
|
2805
|
+
const [internalExpanded, setInternalExpanded] = (0, import_react29.useState)(defaultExpanded ?? /* @__PURE__ */ new Set());
|
|
2224
2806
|
const expanded = controlledExpanded ?? internalExpanded;
|
|
2225
|
-
const rootRef = (0,
|
|
2226
|
-
const [focusedId, setFocusedId] = (0,
|
|
2807
|
+
const rootRef = (0, import_react29.useRef)(null);
|
|
2808
|
+
const [focusedId, setFocusedId] = (0, import_react29.useState)(void 0);
|
|
2227
2809
|
const selectable = selected !== void 0 || onSelect != null;
|
|
2228
|
-
const handleToggle = (0,
|
|
2810
|
+
const handleToggle = (0, import_react29.useCallback)((id) => {
|
|
2229
2811
|
if (!controlledExpanded) {
|
|
2230
2812
|
setInternalExpanded((prev) => {
|
|
2231
2813
|
const next = new Set(prev);
|
|
@@ -2236,11 +2818,11 @@ function Tree({
|
|
|
2236
2818
|
}
|
|
2237
2819
|
onToggle?.(id);
|
|
2238
2820
|
}, [controlledExpanded, onToggle]);
|
|
2239
|
-
const flat = (0,
|
|
2821
|
+
const flat = (0, import_react29.useMemo)(() => flattenTree(nodes, expanded), [nodes, expanded]);
|
|
2240
2822
|
const useVirtual = virtualize ?? shouldVirtualize(flat.length);
|
|
2241
2823
|
const tabbableId = focusedId ?? selected ?? nodes[0]?.id;
|
|
2242
2824
|
if (useVirtual) {
|
|
2243
|
-
return /* @__PURE__ */ (0,
|
|
2825
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2244
2826
|
VirtualTreeView,
|
|
2245
2827
|
{
|
|
2246
2828
|
flat,
|
|
@@ -2310,7 +2892,7 @@ function Tree({
|
|
|
2310
2892
|
break;
|
|
2311
2893
|
}
|
|
2312
2894
|
};
|
|
2313
|
-
return /* @__PURE__ */ (0,
|
|
2895
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("ul", { ref: rootRef, className: cx("uix-tree", className), role: "tree", onKeyDown, ...props, children: nodes.map((node) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2314
2896
|
TreeNode,
|
|
2315
2897
|
{
|
|
2316
2898
|
node,
|
|
@@ -2340,12 +2922,12 @@ function VirtualTreeView({
|
|
|
2340
2922
|
className,
|
|
2341
2923
|
...props
|
|
2342
2924
|
}) {
|
|
2343
|
-
const scrollRef = (0,
|
|
2344
|
-
const [scrollTop, setScrollTop] = (0,
|
|
2345
|
-
const pendingFocus = (0,
|
|
2925
|
+
const scrollRef = (0, import_react29.useRef)(null);
|
|
2926
|
+
const [scrollTop, setScrollTop] = (0, import_react29.useState)(0);
|
|
2927
|
+
const pendingFocus = (0, import_react29.useRef)(false);
|
|
2346
2928
|
const win = virtualWindow(scrollTop, maxHeight, rowHeight, flat.length);
|
|
2347
2929
|
const rows = flat.slice(win.start, win.end);
|
|
2348
|
-
(0,
|
|
2930
|
+
(0, import_react29.useEffect)(() => {
|
|
2349
2931
|
if (!pendingFocus.current || focusedId == null) return;
|
|
2350
2932
|
const el = scrollRef.current?.querySelector(`[role="treeitem"][data-id="${CSS.escape(focusedId)}"]`);
|
|
2351
2933
|
if (el) {
|
|
@@ -2382,7 +2964,7 @@ function VirtualTreeView({
|
|
|
2382
2964
|
}
|
|
2383
2965
|
if (act.focusId !== void 0) moveTo(act.focusId);
|
|
2384
2966
|
};
|
|
2385
|
-
return /* @__PURE__ */ (0,
|
|
2967
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
2386
2968
|
"ul",
|
|
2387
2969
|
{
|
|
2388
2970
|
ref: scrollRef,
|
|
@@ -2393,10 +2975,10 @@ function VirtualTreeView({
|
|
|
2393
2975
|
onKeyDown,
|
|
2394
2976
|
...props,
|
|
2395
2977
|
children: [
|
|
2396
|
-
win.padTop > 0 && /* @__PURE__ */ (0,
|
|
2978
|
+
win.padTop > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { "aria-hidden": "true", style: { height: win.padTop } }),
|
|
2397
2979
|
rows.map((f) => {
|
|
2398
2980
|
const rowStyle = { height: rowHeight, paddingLeft: `calc(${f.level - 1} * var(--uix-space-5))` };
|
|
2399
|
-
return /* @__PURE__ */ (0,
|
|
2981
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
2400
2982
|
"li",
|
|
2401
2983
|
{
|
|
2402
2984
|
role: "treeitem",
|
|
@@ -2417,23 +2999,23 @@ function VirtualTreeView({
|
|
|
2417
2999
|
onSelect?.(f.node.id);
|
|
2418
3000
|
setFocusedId(f.node.id);
|
|
2419
3001
|
},
|
|
2420
|
-
children: /* @__PURE__ */ (0,
|
|
2421
|
-
/* @__PURE__ */ (0,
|
|
2422
|
-
f.node.icon && /* @__PURE__ */ (0,
|
|
2423
|
-
/* @__PURE__ */ (0,
|
|
3002
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "uix-tree__row", style: rowStyle, children: [
|
|
3003
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__toggle", children: f.hasChildren && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChevronIcon2, {}) }),
|
|
3004
|
+
f.node.icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { "aria-hidden": "true", children: f.node.icon }),
|
|
3005
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "uix-tree__label", children: f.node.label })
|
|
2424
3006
|
] })
|
|
2425
3007
|
},
|
|
2426
3008
|
f.node.id
|
|
2427
3009
|
);
|
|
2428
3010
|
}),
|
|
2429
|
-
win.padBottom > 0 && /* @__PURE__ */ (0,
|
|
3011
|
+
win.padBottom > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("li", { "aria-hidden": "true", style: { height: win.padBottom } })
|
|
2430
3012
|
]
|
|
2431
3013
|
}
|
|
2432
3014
|
);
|
|
2433
3015
|
}
|
|
2434
3016
|
|
|
2435
3017
|
// src/components/EditorialHome.tsx
|
|
2436
|
-
var
|
|
3018
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
2437
3019
|
function PageIntro({
|
|
2438
3020
|
kicker,
|
|
2439
3021
|
title,
|
|
@@ -2446,39 +3028,39 @@ function PageIntro({
|
|
|
2446
3028
|
children,
|
|
2447
3029
|
...props
|
|
2448
3030
|
}) {
|
|
2449
|
-
return /* @__PURE__ */ (0,
|
|
2450
|
-
/* @__PURE__ */ (0,
|
|
2451
|
-
kicker != null && /* @__PURE__ */ (0,
|
|
2452
|
-
/* @__PURE__ */ (0,
|
|
2453
|
-
lede != null && /* @__PURE__ */ (0,
|
|
3031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { className: cx("uix-page-intro", className), ...props, children: [
|
|
3032
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3033
|
+
kicker != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-page-kicker", children: kicker }),
|
|
3034
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h1", { className: "uix-page-title", children: title }),
|
|
3035
|
+
lede != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-page-lede", children: lede })
|
|
2454
3036
|
] }),
|
|
2455
|
-
search != null && /* @__PURE__ */ (0,
|
|
2456
|
-
searchLabel != null && /* @__PURE__ */ (0,
|
|
3037
|
+
search != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3038
|
+
searchLabel != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-intro-search__label", children: searchLabel }),
|
|
2457
3039
|
search
|
|
2458
3040
|
] }),
|
|
2459
|
-
shortcuts != null && /* @__PURE__ */ (0,
|
|
3041
|
+
shortcuts != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-shortcut-grid", "aria-label": shortcutsLabel, children: shortcuts }),
|
|
2460
3042
|
children
|
|
2461
3043
|
] });
|
|
2462
3044
|
}
|
|
2463
3045
|
function SectionHead({ title, titleId, action, className, ...props }) {
|
|
2464
|
-
return /* @__PURE__ */ (0,
|
|
2465
|
-
/* @__PURE__ */ (0,
|
|
3046
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-section-head", className), ...props, children: [
|
|
3047
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "uix-section-title", id: titleId, children: title }),
|
|
2466
3048
|
action
|
|
2467
3049
|
] });
|
|
2468
3050
|
}
|
|
2469
3051
|
function NoticeQueue({ icon, title, summary, meta, position, actions, className, ...props }) {
|
|
2470
|
-
return /* @__PURE__ */ (0,
|
|
3052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("section", { className: cx("uix-notice", className), ...props, children: [
|
|
2471
3053
|
icon,
|
|
2472
|
-
/* @__PURE__ */ (0,
|
|
2473
|
-
/* @__PURE__ */ (0,
|
|
2474
|
-
title != null && /* @__PURE__ */ (0,
|
|
3054
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-notice__content", "aria-live": "polite", children: [
|
|
3055
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "uix-notice__copy", children: [
|
|
3056
|
+
title != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("strong", { children: title }),
|
|
2475
3057
|
title != null && summary != null && " ",
|
|
2476
3058
|
summary
|
|
2477
3059
|
] }),
|
|
2478
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3060
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-notice__meta", children: meta })
|
|
2479
3061
|
] }),
|
|
2480
|
-
(position != null || actions != null) && /* @__PURE__ */ (0,
|
|
2481
|
-
position != null && /* @__PURE__ */ (0,
|
|
3062
|
+
(position != null || actions != null) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-notice__actions", children: [
|
|
3063
|
+
position != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-notice__position", children: position }),
|
|
2482
3064
|
actions
|
|
2483
3065
|
] })
|
|
2484
3066
|
] });
|
|
@@ -2496,8 +3078,8 @@ function FeaturedStage({
|
|
|
2496
3078
|
className,
|
|
2497
3079
|
...props
|
|
2498
3080
|
}) {
|
|
2499
|
-
return /* @__PURE__ */ (0,
|
|
2500
|
-
/* @__PURE__ */ (0,
|
|
3081
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("article", { className: cx("uix-featured__stage", className), ...props, children: [
|
|
3082
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
2501
3083
|
"div",
|
|
2502
3084
|
{
|
|
2503
3085
|
className: "uix-featured__visual",
|
|
@@ -2507,32 +3089,32 @@ function FeaturedStage({
|
|
|
2507
3089
|
children: visual
|
|
2508
3090
|
}
|
|
2509
3091
|
),
|
|
2510
|
-
/* @__PURE__ */ (0,
|
|
2511
|
-
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0,
|
|
2512
|
-
ordinal != null && /* @__PURE__ */ (0,
|
|
3092
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-featured__content", "aria-live": "polite", children: [
|
|
3093
|
+
(eyebrow != null || ordinal != null) && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "uix-featured__eyebrow", children: [
|
|
3094
|
+
ordinal != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-featured__now", children: ordinal }),
|
|
2513
3095
|
eyebrow
|
|
2514
3096
|
] }),
|
|
2515
|
-
/* @__PURE__ */ (0,
|
|
2516
|
-
description != null && /* @__PURE__ */ (0,
|
|
2517
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3097
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "uix-featured__title", id: titleId, children: title }),
|
|
3098
|
+
description != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-featured__description", children: description }),
|
|
3099
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-featured__meta", children: meta }),
|
|
2518
3100
|
action
|
|
2519
3101
|
] })
|
|
2520
3102
|
] });
|
|
2521
3103
|
}
|
|
2522
3104
|
function FeaturedRundown({ eyebrow, title, titleId, meta, children, className, ...props }) {
|
|
2523
|
-
return /* @__PURE__ */ (0,
|
|
2524
|
-
/* @__PURE__ */ (0,
|
|
2525
|
-
/* @__PURE__ */ (0,
|
|
2526
|
-
eyebrow != null && /* @__PURE__ */ (0,
|
|
2527
|
-
/* @__PURE__ */ (0,
|
|
3105
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("aside", { className: cx("uix-rundown", className), ...props, children: [
|
|
3106
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-rundown__head", children: [
|
|
3107
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3108
|
+
eyebrow != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-rundown__eyebrow", children: eyebrow }),
|
|
3109
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h2", { className: "uix-rundown__title", id: titleId, children: title })
|
|
2528
3110
|
] }),
|
|
2529
3111
|
meta
|
|
2530
3112
|
] }),
|
|
2531
|
-
/* @__PURE__ */ (0,
|
|
3113
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uix-rundown__items", children })
|
|
2532
3114
|
] });
|
|
2533
3115
|
}
|
|
2534
3116
|
function FeaturedRundownItem({ number, topic, title, selected = false, className, ...props }) {
|
|
2535
|
-
return /* @__PURE__ */ (0,
|
|
3117
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
2536
3118
|
"button",
|
|
2537
3119
|
{
|
|
2538
3120
|
type: "button",
|
|
@@ -2541,63 +3123,63 @@ function FeaturedRundownItem({ number, topic, title, selected = false, className
|
|
|
2541
3123
|
"data-selected": selected ? "true" : "false",
|
|
2542
3124
|
...props,
|
|
2543
3125
|
children: [
|
|
2544
|
-
number != null && /* @__PURE__ */ (0,
|
|
2545
|
-
/* @__PURE__ */ (0,
|
|
2546
|
-
topic != null && /* @__PURE__ */ (0,
|
|
2547
|
-
/* @__PURE__ */ (0,
|
|
3126
|
+
number != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-rundown__number", children: number }),
|
|
3127
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { children: [
|
|
3128
|
+
topic != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-rundown__topic", children: topic }),
|
|
3129
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-rundown__item-title", children: title })
|
|
2548
3130
|
] })
|
|
2549
3131
|
]
|
|
2550
3132
|
}
|
|
2551
3133
|
);
|
|
2552
3134
|
}
|
|
2553
3135
|
function NewsLead({ meta, title, summary, className, ...props }) {
|
|
2554
|
-
return /* @__PURE__ */ (0,
|
|
2555
|
-
meta != null && /* @__PURE__ */ (0,
|
|
2556
|
-
/* @__PURE__ */ (0,
|
|
2557
|
-
summary != null && /* @__PURE__ */ (0,
|
|
3136
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("article", { className: cx("uix-news-lead", className), ...props, children: [
|
|
3137
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-news-lead__meta", children: meta }),
|
|
3138
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "uix-news-lead__title", children: title }),
|
|
3139
|
+
summary != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-news-lead__summary", children: summary })
|
|
2558
3140
|
] });
|
|
2559
3141
|
}
|
|
2560
3142
|
function ContentList({ children, className, ...props }) {
|
|
2561
|
-
return /* @__PURE__ */ (0,
|
|
3143
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("ul", { className: cx("uix-content-list", className), ...props, children });
|
|
2562
3144
|
}
|
|
2563
3145
|
function ContentListItem({ title, meta, trailing, className, ...props }) {
|
|
2564
|
-
return /* @__PURE__ */ (0,
|
|
2565
|
-
/* @__PURE__ */ (0,
|
|
2566
|
-
/* @__PURE__ */ (0,
|
|
2567
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3146
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("li", { className: cx("uix-content-list__item", className), ...props, children: [
|
|
3147
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3148
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-content-list__title", children: title }),
|
|
3149
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-content-list__meta", children: meta })
|
|
2568
3150
|
] }),
|
|
2569
3151
|
trailing
|
|
2570
3152
|
] });
|
|
2571
3153
|
}
|
|
2572
3154
|
function ResourceGrid({ children, className, ...props }) {
|
|
2573
|
-
return /* @__PURE__ */ (0,
|
|
3155
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cx("uix-resource-grid", className), ...props, children });
|
|
2574
3156
|
}
|
|
2575
3157
|
function StatLine({ items, children, className, ...props }) {
|
|
2576
|
-
return /* @__PURE__ */ (0,
|
|
2577
|
-
items?.map((item, i) => /* @__PURE__ */ (0,
|
|
2578
|
-
/* @__PURE__ */ (0,
|
|
2579
|
-
/* @__PURE__ */ (0,
|
|
3158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-stat-line", className), ...props, children: [
|
|
3159
|
+
items?.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-stat-line__item", children: [
|
|
3160
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-stat-line__value", children: item.value }),
|
|
3161
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-stat-line__label", children: item.label })
|
|
2580
3162
|
] }, item.id ?? i)),
|
|
2581
3163
|
children
|
|
2582
3164
|
] });
|
|
2583
3165
|
}
|
|
2584
3166
|
function EventRow({ month, day, title, meta, className, ...props }) {
|
|
2585
|
-
return /* @__PURE__ */ (0,
|
|
2586
|
-
/* @__PURE__ */ (0,
|
|
2587
|
-
/* @__PURE__ */ (0,
|
|
2588
|
-
/* @__PURE__ */ (0,
|
|
3167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-event-row", className), ...props, children: [
|
|
3168
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uix-event-date", children: [
|
|
3169
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-event-date__month", children: month }),
|
|
3170
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-event-date__day", children: day })
|
|
2589
3171
|
] }),
|
|
2590
|
-
/* @__PURE__ */ (0,
|
|
2591
|
-
/* @__PURE__ */ (0,
|
|
2592
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3172
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { children: [
|
|
3173
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-event-row__title", children: title }),
|
|
3174
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uix-event-row__meta", children: meta })
|
|
2593
3175
|
] })
|
|
2594
3176
|
] });
|
|
2595
3177
|
}
|
|
2596
3178
|
function StatusRow({ indicator, name, meta, className, ...props }) {
|
|
2597
|
-
return /* @__PURE__ */ (0,
|
|
3179
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("uix-status-row", className), ...props, children: [
|
|
2598
3180
|
indicator,
|
|
2599
|
-
/* @__PURE__ */ (0,
|
|
2600
|
-
meta != null && /* @__PURE__ */ (0,
|
|
3181
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-status-row__name", children: name }),
|
|
3182
|
+
meta != null && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "uix-list-meta", children: meta })
|
|
2601
3183
|
] });
|
|
2602
3184
|
}
|
|
2603
3185
|
|
|
@@ -2694,7 +3276,7 @@ function summarizeRule(value, labels = {}) {
|
|
|
2694
3276
|
}
|
|
2695
3277
|
|
|
2696
3278
|
// src/components/RuleBuilder.tsx
|
|
2697
|
-
var
|
|
3279
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
2698
3280
|
var ruleId = 0;
|
|
2699
3281
|
var nextId = (prefix) => `${prefix}-${Date.now().toString(36)}-${(++ruleId).toString(36)}`;
|
|
2700
3282
|
function defaultCondition(fields, operators) {
|
|
@@ -2710,21 +3292,21 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
2710
3292
|
combinator: "and",
|
|
2711
3293
|
conditions: [defaultCondition(fields, operators)]
|
|
2712
3294
|
}, maxDepth));
|
|
2713
|
-
return /* @__PURE__ */ (0,
|
|
2714
|
-
/* @__PURE__ */ (0,
|
|
2715
|
-
/* @__PURE__ */ (0,
|
|
2716
|
-
/* @__PURE__ */ (0,
|
|
3295
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("fieldset", { className: "uix-rule-builder__group", "data-depth": depth, children: [
|
|
3296
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("legend", { className: "uix-rule-builder__group-heading", children: [
|
|
3297
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: depth === 1 ? "When" : "Group" }),
|
|
3298
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { children: [
|
|
2717
3299
|
"Match",
|
|
2718
|
-
/* @__PURE__ */ (0,
|
|
2719
|
-
/* @__PURE__ */ (0,
|
|
2720
|
-
/* @__PURE__ */ (0,
|
|
3300
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("select", { className: "uix-select uix-select--sm", value: group.combinator, disabled, onChange: (event) => updateNode(group.id, (node) => ({ ...node, combinator: event.currentTarget.value })), children: [
|
|
3301
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: "and", children: "all (AND)" }),
|
|
3302
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: "or", children: "any (OR)" })
|
|
2721
3303
|
] })
|
|
2722
3304
|
] })
|
|
2723
3305
|
] }),
|
|
2724
|
-
/* @__PURE__ */ (0,
|
|
2725
|
-
/* @__PURE__ */ (0,
|
|
2726
|
-
/* @__PURE__ */ (0,
|
|
2727
|
-
] }, node.id) : /* @__PURE__ */ (0,
|
|
3306
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uix-rule-builder__rows", children: group.conditions.map((node, index) => isRuleGroup(node) ? /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__nested", children: [
|
|
3307
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RuleGroupEditor, { ...{ group: node, depth: depth + 1, root, fields, operators, maxDepth, disabled, onRootChange, labels } }),
|
|
3308
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RowControls, { label: "group", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
|
|
3309
|
+
] }, node.id) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
2728
3310
|
ConditionRow,
|
|
2729
3311
|
{
|
|
2730
3312
|
condition: node,
|
|
@@ -2732,13 +3314,13 @@ function RuleGroupEditor({ group, depth, root, fields, operators, maxDepth, disa
|
|
|
2732
3314
|
operators,
|
|
2733
3315
|
disabled,
|
|
2734
3316
|
onChange: (condition) => updateNode(node.id, () => condition),
|
|
2735
|
-
controls: /* @__PURE__ */ (0,
|
|
3317
|
+
controls: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RowControls, { label: "condition", first: index === 0, last: index === group.conditions.length - 1, disabled, onUp: () => onRootChange(moveRuleNode(root, node.id, -1)), onDown: () => onRootChange(moveRuleNode(root, node.id, 1)), onRemove: () => onRootChange(removeRuleNode(root, node.id)) })
|
|
2736
3318
|
},
|
|
2737
3319
|
node.id
|
|
2738
3320
|
)) }),
|
|
2739
|
-
/* @__PURE__ */ (0,
|
|
2740
|
-
/* @__PURE__ */ (0,
|
|
2741
|
-
/* @__PURE__ */ (0,
|
|
3321
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__add", children: [
|
|
3322
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: addCondition, disabled: disabled || fields.length === 0 || operators.length === 0, children: labels.addCondition }),
|
|
3323
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: addGroup, disabled: disabled || depth >= maxDepth, children: labels.addGroup })
|
|
2742
3324
|
] })
|
|
2743
3325
|
] });
|
|
2744
3326
|
}
|
|
@@ -2751,24 +3333,24 @@ function ConditionRow({ condition, fields, operators, disabled, onChange, contro
|
|
|
2751
3333
|
const nextOperator = operators.find((item) => nextField?.operators?.includes(item.id)) ?? availableOperators[0] ?? operators[0];
|
|
2752
3334
|
onChange({ ...condition, field: id, operator: nextOperator?.id ?? "" });
|
|
2753
3335
|
};
|
|
2754
|
-
return /* @__PURE__ */ (0,
|
|
2755
|
-
/* @__PURE__ */ (0,
|
|
2756
|
-
/* @__PURE__ */ (0,
|
|
2757
|
-
/* @__PURE__ */ (0,
|
|
3336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__condition", children: [
|
|
3337
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { children: [
|
|
3338
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-visually-hidden", children: "Field" }),
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("select", { className: "uix-select", value: condition.field, onChange: (event) => setField(event.currentTarget.value), disabled, children: fields.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
2758
3340
|
] }),
|
|
2759
|
-
/* @__PURE__ */ (0,
|
|
2760
|
-
/* @__PURE__ */ (0,
|
|
2761
|
-
/* @__PURE__ */ (0,
|
|
3341
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("label", { children: [
|
|
3342
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { className: "uix-visually-hidden", children: "Operator" }),
|
|
3343
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("select", { className: "uix-select", value: condition.operator, onChange: (event) => onChange({ ...condition, operator: event.currentTarget.value }), disabled, children: availableOperators.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: item.id, children: item.label }, item.id)) })
|
|
2762
3344
|
] }),
|
|
2763
|
-
operator?.requiresValue !== false && /* @__PURE__ */ (0,
|
|
3345
|
+
operator?.requiresValue !== false && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uix-rule-builder__value", children: field?.renderValueEditor?.({ condition, onChange: (value) => onChange({ ...condition, value }), disabled }) ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("input", { className: "uix-input", value: typeof condition.value === "string" || typeof condition.value === "number" ? condition.value : condition.value == null ? "" : JSON.stringify(condition.value), onChange: (event) => onChange({ ...condition, value: event.currentTarget.value }), disabled, "aria-label": `Value for ${field?.label ?? "condition"}` }) }),
|
|
2764
3346
|
controls
|
|
2765
3347
|
] });
|
|
2766
3348
|
}
|
|
2767
3349
|
function RowControls({ label, first, last, disabled, onUp, onDown, onRemove }) {
|
|
2768
|
-
return /* @__PURE__ */ (0,
|
|
2769
|
-
/* @__PURE__ */ (0,
|
|
2770
|
-
/* @__PURE__ */ (0,
|
|
2771
|
-
/* @__PURE__ */ (0,
|
|
3350
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("span", { className: "uix-rule-builder__row-actions", children: [
|
|
3351
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onUp, disabled: disabled || first, "aria-label": `Move ${label} up`, children: "Up" }),
|
|
3352
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onDown, disabled: disabled || last, "aria-label": `Move ${label} down`, children: "Down" }),
|
|
3353
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: onRemove, disabled, "aria-label": `Remove ${label}`, children: "Remove" })
|
|
2772
3354
|
] });
|
|
2773
3355
|
}
|
|
2774
3356
|
function RuleBuilder({
|
|
@@ -2789,9 +3371,9 @@ function RuleBuilder({
|
|
|
2789
3371
|
const fieldLabels = Object.fromEntries(fields.map((field) => [field.id, field.label]));
|
|
2790
3372
|
const operatorLabels = Object.fromEntries(operators.map((operator) => [operator.id, operator.label]));
|
|
2791
3373
|
const actionLabels = Object.fromEntries(actions.map((action) => [action.id, action.label]));
|
|
2792
|
-
if (readOnly) return /* @__PURE__ */ (0,
|
|
2793
|
-
/* @__PURE__ */ (0,
|
|
2794
|
-
issues.length > 0 && /* @__PURE__ */ (0,
|
|
3374
|
+
if (readOnly) return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: cx("uix-rule-builder uix-rule-builder--summary", className), "aria-label": "Rule summary", children: [
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { children: summarizeRule(value, { fields: fieldLabels, operators: operatorLabels, actions: actionLabels }) }),
|
|
3376
|
+
issues.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("p", { className: "uix-rule-builder__invalid", children: [
|
|
2795
3377
|
"Rule has ",
|
|
2796
3378
|
issues.length,
|
|
2797
3379
|
" validation issue",
|
|
@@ -2800,16 +3382,16 @@ function RuleBuilder({
|
|
|
2800
3382
|
] })
|
|
2801
3383
|
] });
|
|
2802
3384
|
const updateActions = (next) => onChange({ ...value, then: next });
|
|
2803
|
-
return /* @__PURE__ */ (0,
|
|
2804
|
-
/* @__PURE__ */ (0,
|
|
2805
|
-
/* @__PURE__ */ (0,
|
|
2806
|
-
/* @__PURE__ */ (0,
|
|
3385
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: cx("uix-rule-builder", className), "aria-label": "Rule builder", children: [
|
|
3386
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(RuleGroupEditor, { group: value.when, depth: 1, root: value.when, fields, operators, maxDepth, disabled: readOnly, onRootChange: (when) => onChange({ ...value, when }), labels: { addCondition: addConditionLabel, addGroup: addGroupLabel } }),
|
|
3387
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("fieldset", { className: "uix-rule-builder__actions", children: [
|
|
3388
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("legend", { children: "Then" }),
|
|
2807
3389
|
value.then.map((action, index) => {
|
|
2808
3390
|
const definition = actions.find((item) => item.id === action.type);
|
|
2809
|
-
return /* @__PURE__ */ (0,
|
|
2810
|
-
/* @__PURE__ */ (0,
|
|
3391
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uix-rule-builder__action", children: [
|
|
3392
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("select", { className: "uix-select", value: action.type, onChange: (event) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, type: event.currentTarget.value } : item)), "aria-label": "Action type", children: actions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("option", { value: item.id, children: item.label }, item.id)) }),
|
|
2811
3393
|
definition?.renderParameters?.(action, (parameters) => updateActions(value.then.map((item) => item.id === action.id ? { ...item, parameters } : item)), false),
|
|
2812
|
-
/* @__PURE__ */ (0,
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
2813
3395
|
RowControls,
|
|
2814
3396
|
{
|
|
2815
3397
|
label: "action",
|
|
@@ -2831,22 +3413,22 @@ function RuleBuilder({
|
|
|
2831
3413
|
)
|
|
2832
3414
|
] }, action.id);
|
|
2833
3415
|
}),
|
|
2834
|
-
/* @__PURE__ */ (0,
|
|
3416
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: actions.length === 0, onClick: () => updateActions([...value.then, { id: nextId("action"), type: actions[0]?.id ?? "", parameters: {} }]), children: addActionLabel })
|
|
2835
3417
|
] }),
|
|
2836
|
-
/* @__PURE__ */ (0,
|
|
2837
|
-
/* @__PURE__ */ (0,
|
|
3418
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uix-rule-builder__validation", "aria-live": "polite", children: issues.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Rule is valid." }) : /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
|
|
3419
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("strong", { children: [
|
|
2838
3420
|
issues.length,
|
|
2839
3421
|
" validation issue",
|
|
2840
3422
|
issues.length === 1 ? "" : "s"
|
|
2841
3423
|
] }),
|
|
2842
|
-
/* @__PURE__ */ (0,
|
|
3424
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("ul", { children: issues.map((issue, index) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("li", { children: issue.message }, `${issue.path}-${index}`)) })
|
|
2843
3425
|
] }) })
|
|
2844
3426
|
] });
|
|
2845
3427
|
}
|
|
2846
3428
|
|
|
2847
3429
|
// src/components/BuilderCanvas.tsx
|
|
2848
|
-
var
|
|
2849
|
-
var
|
|
3430
|
+
var import_react30 = require("react");
|
|
3431
|
+
var import_jsx_runtime59 = require("react/jsx-runtime");
|
|
2850
3432
|
function BuilderCanvas({
|
|
2851
3433
|
items,
|
|
2852
3434
|
onItemsChange,
|
|
@@ -2861,13 +3443,13 @@ function BuilderCanvas({
|
|
|
2861
3443
|
emptyMessage = "Add an item from the palette to begin.",
|
|
2862
3444
|
className
|
|
2863
3445
|
}) {
|
|
2864
|
-
const [internalSelectedId, setInternalSelectedId] = (0,
|
|
2865
|
-
const [draggedId, setDraggedId] = (0,
|
|
2866
|
-
const propertyHeadingRef = (0,
|
|
2867
|
-
const shouldFocusProperties = (0,
|
|
3446
|
+
const [internalSelectedId, setInternalSelectedId] = (0, import_react30.useState)();
|
|
3447
|
+
const [draggedId, setDraggedId] = (0, import_react30.useState)();
|
|
3448
|
+
const propertyHeadingRef = (0, import_react30.useRef)(null);
|
|
3449
|
+
const shouldFocusProperties = (0, import_react30.useRef)(false);
|
|
2868
3450
|
const selectedId = controlledSelectedId ?? internalSelectedId;
|
|
2869
3451
|
const selected = items.find((item) => item.id === selectedId);
|
|
2870
|
-
(0,
|
|
3452
|
+
(0, import_react30.useEffect)(() => {
|
|
2871
3453
|
if (shouldFocusProperties.current && selected) {
|
|
2872
3454
|
propertyHeadingRef.current?.focus();
|
|
2873
3455
|
shouldFocusProperties.current = false;
|
|
@@ -2901,27 +3483,27 @@ function BuilderCanvas({
|
|
|
2901
3483
|
if (from >= 0 && to >= 0) onItemsChange(reorder(items, from, to));
|
|
2902
3484
|
setDraggedId(void 0);
|
|
2903
3485
|
};
|
|
2904
|
-
return /* @__PURE__ */ (0,
|
|
2905
|
-
/* @__PURE__ */ (0,
|
|
2906
|
-
/* @__PURE__ */ (0,
|
|
2907
|
-
palette.length === 0 ? /* @__PURE__ */ (0,
|
|
2908
|
-
/* @__PURE__ */ (0,
|
|
2909
|
-
item.description && /* @__PURE__ */ (0,
|
|
2910
|
-
/* @__PURE__ */ (0,
|
|
3486
|
+
return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("section", { className: cx("uix-builder-canvas", className), "aria-label": "Builder canvas", children: [
|
|
3487
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("aside", { className: "uix-builder-canvas__palette", "aria-label": "Item palette", children: [
|
|
3488
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { children: "Palette" }),
|
|
3489
|
+
palette.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "No item types available." }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ul", { children: palette.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", onClick: () => add(item), children: [
|
|
3490
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("strong", { children: item.label }),
|
|
3491
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: item.description }),
|
|
3492
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { "aria-hidden": "true", children: "Add" })
|
|
2911
3493
|
] }) }, item.id)) })
|
|
2912
3494
|
] }),
|
|
2913
|
-
/* @__PURE__ */ (0,
|
|
2914
|
-
/* @__PURE__ */ (0,
|
|
2915
|
-
loading ? /* @__PURE__ */ (0,
|
|
2916
|
-
/* @__PURE__ */ (0,
|
|
2917
|
-
onRetry && /* @__PURE__ */ (0,
|
|
2918
|
-
] }) : items.length === 0 ? /* @__PURE__ */ (0,
|
|
2919
|
-
/* @__PURE__ */ (0,
|
|
2920
|
-
palette[0] && /* @__PURE__ */ (0,
|
|
3495
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-builder-canvas__workspace", children: [
|
|
3496
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { children: "Canvas" }),
|
|
3497
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uix-builder-canvas__state", role: "status", children: "Loading canvas\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-builder-canvas__state", role: "alert", children: [
|
|
3498
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: error }),
|
|
3499
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3500
|
+
] }) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uix-builder-canvas__state", children: [
|
|
3501
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: emptyMessage }),
|
|
3502
|
+
palette[0] && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: () => add(palette[0]), children: [
|
|
2921
3503
|
"Add ",
|
|
2922
3504
|
palette[0].label
|
|
2923
3505
|
] })
|
|
2924
|
-
] }) : /* @__PURE__ */ (0,
|
|
3506
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("ol", { className: "uix-builder-canvas__items", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
|
|
2925
3507
|
"li",
|
|
2926
3508
|
{
|
|
2927
3509
|
draggable: true,
|
|
@@ -2931,34 +3513,34 @@ function BuilderCanvas({
|
|
|
2931
3513
|
onDrop: (event) => drop(event, item.id),
|
|
2932
3514
|
className: cx("uix-builder-canvas__item", selectedId === item.id && "uix-builder-canvas__item--selected"),
|
|
2933
3515
|
children: [
|
|
2934
|
-
/* @__PURE__ */ (0,
|
|
2935
|
-
/* @__PURE__ */ (0,
|
|
2936
|
-
item.description && /* @__PURE__ */ (0,
|
|
3516
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", className: "uix-builder-canvas__item-main", "aria-pressed": selectedId === item.id, onClick: () => select(item.id), children: renderItem?.(item, selectedId === item.id) ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
|
|
3517
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("strong", { children: item.label }),
|
|
3518
|
+
item.description && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { children: item.description })
|
|
2937
3519
|
] }) }),
|
|
2938
|
-
/* @__PURE__ */ (0,
|
|
2939
|
-
/* @__PURE__ */ (0,
|
|
2940
|
-
/* @__PURE__ */ (0,
|
|
2941
|
-
/* @__PURE__ */ (0,
|
|
3520
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "uix-builder-canvas__item-actions", children: [
|
|
3521
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: () => move(item.id, -1), disabled: index === 0, "aria-label": `Move ${item.label} up`, children: "Up" }),
|
|
3522
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: () => move(item.id, 1), disabled: index === items.length - 1, "aria-label": `Move ${item.label} down`, children: "Down" }),
|
|
3523
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { type: "button", onClick: () => remove(item.id), "aria-label": `Remove ${item.label}`, children: "Remove" })
|
|
2942
3524
|
] })
|
|
2943
3525
|
]
|
|
2944
3526
|
},
|
|
2945
3527
|
item.id
|
|
2946
3528
|
)) })
|
|
2947
3529
|
] }),
|
|
2948
|
-
/* @__PURE__ */ (0,
|
|
2949
|
-
/* @__PURE__ */ (0,
|
|
2950
|
-
!selected ? /* @__PURE__ */ (0,
|
|
2951
|
-
/* @__PURE__ */ (0,
|
|
2952
|
-
/* @__PURE__ */ (0,
|
|
2953
|
-
/* @__PURE__ */ (0,
|
|
2954
|
-
/* @__PURE__ */ (0,
|
|
3530
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("aside", { className: "uix-builder-canvas__properties", "aria-label": "Item properties", children: [
|
|
3531
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("h3", { ref: propertyHeadingRef, tabIndex: -1, children: "Properties" }),
|
|
3532
|
+
!selected ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { children: "Select a canvas item to edit its properties." }) : renderProperties?.(selected, (updated) => onItemsChange(items.map((item) => item.id === updated.id ? updated : item))) ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("dl", { children: [
|
|
3533
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dt", { children: "Type" }),
|
|
3534
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dd", { children: selected.type }),
|
|
3535
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dt", { children: "Label" }),
|
|
3536
|
+
/* @__PURE__ */ (0, import_jsx_runtime59.jsx)("dd", { children: selected.label })
|
|
2955
3537
|
] })
|
|
2956
3538
|
] })
|
|
2957
3539
|
] });
|
|
2958
3540
|
}
|
|
2959
3541
|
|
|
2960
3542
|
// src/components/SchedulingCalendar.tsx
|
|
2961
|
-
var
|
|
3543
|
+
var import_react31 = require("react");
|
|
2962
3544
|
|
|
2963
3545
|
// src/calendar-model.ts
|
|
2964
3546
|
function fromDateKey(value) {
|
|
@@ -3039,7 +3621,7 @@ function isDateUnavailable(date, options) {
|
|
|
3039
3621
|
}
|
|
3040
3622
|
|
|
3041
3623
|
// src/components/SchedulingCalendar.tsx
|
|
3042
|
-
var
|
|
3624
|
+
var import_jsx_runtime60 = require("react/jsx-runtime");
|
|
3043
3625
|
var stateLabel = { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" };
|
|
3044
3626
|
var stateTone = (state) => state === "scheduled" ? "info" : state === "in-progress" ? "success" : "danger";
|
|
3045
3627
|
var dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
@@ -3061,19 +3643,19 @@ function SchedulingCalendar({
|
|
|
3061
3643
|
onRetry,
|
|
3062
3644
|
className
|
|
3063
3645
|
}) {
|
|
3064
|
-
const [internalView, setInternalView] = (0,
|
|
3646
|
+
const [internalView, setInternalView] = (0, import_react31.useState)("month");
|
|
3065
3647
|
const view = controlledView ?? internalView;
|
|
3066
|
-
const [activeDate, setActiveDate] = (0,
|
|
3067
|
-
const gridRef = (0,
|
|
3068
|
-
const visibleEntries = (0,
|
|
3069
|
-
const entrySpans = (0,
|
|
3070
|
-
const overlaySpans = (0,
|
|
3071
|
-
const monthDays = (0,
|
|
3648
|
+
const [activeDate, setActiveDate] = (0, import_react31.useState)(anchorDate);
|
|
3649
|
+
const gridRef = (0, import_react31.useRef)(null);
|
|
3650
|
+
const visibleEntries = (0, import_react31.useMemo)(() => entries.filter((entry) => filter?.(entry) ?? true), [entries, filter]);
|
|
3651
|
+
const entrySpans = (0, import_react31.useMemo)(() => new Map(visibleEntries.map((entry) => [entry.id, zonedDateSpan(entry.start, entry.end, timeZone)])), [visibleEntries, timeZone]);
|
|
3652
|
+
const overlaySpans = (0, import_react31.useMemo)(() => new Map(overlays.map((overlay) => [overlay.id, { start: overlay.start.slice(0, 10), end: overlay.end.slice(0, 10) }])), [overlays]);
|
|
3653
|
+
const monthDays = (0, import_react31.useMemo)(() => buildMonthGrid(startOfMonth(anchorDate)), [anchorDate]);
|
|
3072
3654
|
const weekday = ((/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)).getUTCDay() + 6) % 7;
|
|
3073
3655
|
const weekStart = addCalendarDays(anchorDate, -weekday);
|
|
3074
|
-
const weekDays = (0,
|
|
3075
|
-
const days = (0,
|
|
3076
|
-
(0,
|
|
3656
|
+
const weekDays = (0, import_react31.useMemo)(() => Array.from({ length: 7 }, (_, index) => addCalendarDays(weekStart, index)), [weekStart]);
|
|
3657
|
+
const days = (0, import_react31.useMemo)(() => view === "month" ? monthDays.map((day) => day.date) : weekDays, [view, monthDays, weekDays]);
|
|
3658
|
+
(0, import_react31.useEffect)(() => {
|
|
3077
3659
|
if (view !== "agenda" && !days.includes(activeDate)) setActiveDate(days[0]);
|
|
3078
3660
|
}, [activeDate, days, view]);
|
|
3079
3661
|
const setView = (next) => {
|
|
@@ -3107,58 +3689,58 @@ function SchedulingCalendar({
|
|
|
3107
3689
|
return date >= span.start && date <= span.end;
|
|
3108
3690
|
});
|
|
3109
3691
|
const formatInstant = (instant) => new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
|
|
3110
|
-
return /* @__PURE__ */ (0,
|
|
3111
|
-
/* @__PURE__ */ (0,
|
|
3112
|
-
/* @__PURE__ */ (0,
|
|
3113
|
-
/* @__PURE__ */ (0,
|
|
3114
|
-
/* @__PURE__ */ (0,
|
|
3692
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("section", { className: cx("uix-scheduling-calendar", className), "aria-label": `Scheduling calendar in ${timeZone}`, children: [
|
|
3693
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-scheduling-calendar__header", children: [
|
|
3694
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { children: [
|
|
3695
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(-1), disabled: !onAnchorDateChange, children: "Previous" }),
|
|
3696
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => movePeriod(1), disabled: !onAnchorDateChange, children: "Next" })
|
|
3115
3697
|
] }),
|
|
3116
|
-
/* @__PURE__ */ (0,
|
|
3117
|
-
/* @__PURE__ */ (0,
|
|
3698
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("strong", { children: view === "month" ? new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${anchorDate}T00:00:00Z`)) : `${dateLabel(weekStart, locale)} \u2013 ${dateLabel(weekDays[weekDays.length - 1], locale)}` }),
|
|
3699
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-segmented", role: "group", "aria-label": "Calendar view", children: ["month", "week", "agenda"].map((option) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { type: "button", className: "uix-segmented__option", "aria-pressed": view === option, "data-selected": view === option || void 0, onClick: () => setView(option), children: [
|
|
3118
3700
|
option[0].toUpperCase(),
|
|
3119
3701
|
option.slice(1)
|
|
3120
3702
|
] }, option)) })
|
|
3121
3703
|
] }),
|
|
3122
|
-
loading ? /* @__PURE__ */ (0,
|
|
3123
|
-
/* @__PURE__ */ (0,
|
|
3124
|
-
onRetry && /* @__PURE__ */ (0,
|
|
3125
|
-
] }) : view === "agenda" ? /* @__PURE__ */ (0,
|
|
3704
|
+
loading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__state", role: "status", children: "Loading schedule\u2026" }) : error ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-scheduling-calendar__state", role: "alert", children: [
|
|
3705
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { children: error }),
|
|
3706
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3707
|
+
] }) : view === "agenda" ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__agenda", role: "region", "aria-label": "Schedule agenda", children: visibleEntries.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { children: "No scheduled entries match the current filters." }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("ol", { children: [...visibleEntries].sort((a, b) => a.start.localeCompare(b.start)).map((entry) => {
|
|
3126
3708
|
const state = entry.state ?? "scheduled";
|
|
3127
|
-
return /* @__PURE__ */ (0,
|
|
3128
|
-
/* @__PURE__ */ (0,
|
|
3129
|
-
/* @__PURE__ */ (0,
|
|
3130
|
-
/* @__PURE__ */ (0,
|
|
3709
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { type: "button", onClick: () => onSelectEntry?.(entry), children: [
|
|
3710
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { children: [
|
|
3711
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("strong", { children: renderEntry?.(entry) ?? entry.title }),
|
|
3712
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { children: [
|
|
3131
3713
|
formatInstant(entry.start),
|
|
3132
3714
|
" \u2013 ",
|
|
3133
3715
|
formatInstant(entry.end)
|
|
3134
3716
|
] }),
|
|
3135
|
-
entry.meta && /* @__PURE__ */ (0,
|
|
3717
|
+
entry.meta && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: entry.meta })
|
|
3136
3718
|
] }),
|
|
3137
|
-
/* @__PURE__ */ (0,
|
|
3719
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StatusPill, { tone: stateTone(state), children: stateLabel[state] })
|
|
3138
3720
|
] }) }, entry.id);
|
|
3139
|
-
}) }) }) : /* @__PURE__ */ (0,
|
|
3721
|
+
}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { ref: gridRef, className: cx("uix-scheduling-calendar__grid", view === "week" && "uix-scheduling-calendar__grid--week"), role: "group", "aria-label": `${view} schedule`, children: days.map((date, index) => {
|
|
3140
3722
|
const dayEntries = entriesFor(date);
|
|
3141
3723
|
const dayOverlays = overlaysFor(date);
|
|
3142
|
-
return /* @__PURE__ */ (0,
|
|
3143
|
-
/* @__PURE__ */ (0,
|
|
3144
|
-
dayOverlays.map((overlay) => /* @__PURE__ */ (0,
|
|
3145
|
-
/* @__PURE__ */ (0,
|
|
3724
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "uix-scheduling-calendar__day", "data-outside": view === "month" && !monthDays[index].inMonth || void 0, children: [
|
|
3725
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { type: "button", className: "uix-scheduling-calendar__date", "data-calendar-date": date, tabIndex: activeDate === date ? 0 : -1, onFocus: () => setActiveDate(date), onKeyDown: (event) => onDayKeyDown(event, date), "aria-label": dateLabel(date, locale), children: Number(date.slice(-2)) }),
|
|
3726
|
+
dayOverlays.map((overlay) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "uix-scheduling-calendar__overlay", "data-kind": overlay.kind, children: overlay.label }, overlay.id)),
|
|
3727
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__entries", children: dayEntries.map((entry) => {
|
|
3146
3728
|
const span = entrySpans.get(entry.id);
|
|
3147
3729
|
const state = entry.state ?? "scheduled";
|
|
3148
|
-
return /* @__PURE__ */ (0,
|
|
3149
|
-
/* @__PURE__ */ (0,
|
|
3150
|
-
/* @__PURE__ */ (0,
|
|
3730
|
+
return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("button", { type: "button", className: "uix-scheduling-calendar__entry", "data-state": state, "data-range-start": date === span.start || void 0, "data-range-end": date === span.end || void 0, onClick: () => onSelectEntry?.(entry), "aria-label": `${entry.title}, ${stateLabel[state]}, ${formatInstant(entry.start)} to ${formatInstant(entry.end)}`, children: [
|
|
3731
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { children: renderEntry?.(entry) ?? entry.title }),
|
|
3732
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "uix-visually-hidden", children: stateLabel[state] })
|
|
3151
3733
|
] }, entry.id);
|
|
3152
3734
|
}) })
|
|
3153
3735
|
] }, date);
|
|
3154
3736
|
}) }),
|
|
3155
|
-
/* @__PURE__ */ (0,
|
|
3737
|
+
/* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "uix-scheduling-calendar__legend", "aria-label": "Schedule state legend", children: ["scheduled", "conflicted", "in-progress", "blackout-violation"].map((state) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { "data-state": state, children: stateLabel[state] }, state)) })
|
|
3156
3738
|
] });
|
|
3157
3739
|
}
|
|
3158
3740
|
|
|
3159
3741
|
// src/components/DateRangePicker.tsx
|
|
3160
|
-
var
|
|
3161
|
-
var
|
|
3742
|
+
var import_react32 = require("react");
|
|
3743
|
+
var import_jsx_runtime61 = require("react/jsx-runtime");
|
|
3162
3744
|
var monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
3163
3745
|
var dateLabel2 = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
|
|
3164
3746
|
function DateRangePicker({
|
|
@@ -3177,25 +3759,25 @@ function DateRangePicker({
|
|
|
3177
3759
|
disabled,
|
|
3178
3760
|
className
|
|
3179
3761
|
}) {
|
|
3180
|
-
const id = (0,
|
|
3181
|
-
const [internalMonth, setInternalMonth] = (0,
|
|
3762
|
+
const id = (0, import_react32.useId)();
|
|
3763
|
+
const [internalMonth, setInternalMonth] = (0, import_react32.useState)(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
|
|
3182
3764
|
const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);
|
|
3183
|
-
const [activeDate, setActiveDate] = (0,
|
|
3184
|
-
const rootRef = (0,
|
|
3185
|
-
const pendingFocus = (0,
|
|
3765
|
+
const [activeDate, setActiveDate] = (0, import_react32.useState)(value.end ?? value.start ?? visibleMonth);
|
|
3766
|
+
const rootRef = (0, import_react32.useRef)(null);
|
|
3767
|
+
const pendingFocus = (0, import_react32.useRef)(false);
|
|
3186
3768
|
const count = Math.max(1, Math.min(3, months));
|
|
3187
|
-
const calendars = (0,
|
|
3769
|
+
const calendars = (0, import_react32.useMemo)(() => Array.from({ length: count }, (_, index) => {
|
|
3188
3770
|
const month = startOfMonth(addCalendarMonths(visibleMonth, index));
|
|
3189
3771
|
return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
|
|
3190
3772
|
}), [visibleMonth, count]);
|
|
3191
3773
|
const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
|
|
3192
|
-
(0,
|
|
3774
|
+
(0, import_react32.useEffect)(() => {
|
|
3193
3775
|
const first = calendars[0]?.days[0]?.date;
|
|
3194
3776
|
const finalDays = calendars[calendars.length - 1]?.days;
|
|
3195
3777
|
const last = finalDays?.[finalDays.length - 1]?.date;
|
|
3196
3778
|
if (first && last && (activeDate < first || activeDate > last)) setActiveDate(first);
|
|
3197
3779
|
}, [activeDate, calendars]);
|
|
3198
|
-
(0,
|
|
3780
|
+
(0, import_react32.useEffect)(() => {
|
|
3199
3781
|
if (!pendingFocus.current) return;
|
|
3200
3782
|
rootRef.current?.querySelector(`[data-date="${activeDate}"]`)?.focus();
|
|
3201
3783
|
pendingFocus.current = false;
|
|
@@ -3233,23 +3815,23 @@ function DateRangePicker({
|
|
|
3233
3815
|
}
|
|
3234
3816
|
};
|
|
3235
3817
|
const announcement = !value.start ? "No date range selected." : !value.end ? `Start date ${dateLabel2(value.start, locale)} selected. Choose an end date.` : `${dateLabel2(value.start, locale)} to ${dateLabel2(value.end, locale)} selected.`;
|
|
3236
|
-
return /* @__PURE__ */ (0,
|
|
3237
|
-
/* @__PURE__ */ (0,
|
|
3238
|
-
/* @__PURE__ */ (0,
|
|
3239
|
-
/* @__PURE__ */ (0,
|
|
3240
|
-
/* @__PURE__ */ (0,
|
|
3241
|
-
/* @__PURE__ */ (0,
|
|
3818
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("section", { className: cx("uix-date-range-picker", rangeInvalid && "uix-date-range-picker--invalid", className), "aria-labelledby": `${id}-label`, children: [
|
|
3819
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-date-range-picker__header", children: [
|
|
3820
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h3", { id: `${id}-label`, children: label }),
|
|
3821
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
|
|
3822
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, -1)), "aria-label": "Show previous month", children: "Previous" }),
|
|
3823
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", onClick: () => setMonth(addCalendarMonths(visibleMonth, 1)), "aria-label": "Show next month", children: "Next" })
|
|
3242
3824
|
] })
|
|
3243
3825
|
] }),
|
|
3244
|
-
/* @__PURE__ */ (0,
|
|
3245
|
-
/* @__PURE__ */ (0,
|
|
3246
|
-
/* @__PURE__ */ (0,
|
|
3247
|
-
/* @__PURE__ */ (0,
|
|
3248
|
-
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0,
|
|
3826
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { ref: rootRef, className: "uix-date-range-picker__months", children: calendars.map(({ month, days }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-date-range-picker__month", children: [
|
|
3827
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("h4", { children: monthLabel(month, locale) }),
|
|
3828
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "uix-date-range-picker__weekdays", "aria-hidden": "true", children: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"].map((day) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { children: day }, day)) }),
|
|
3829
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "uix-date-range-picker__grid", role: "group", "aria-label": monthLabel(month, locale), children: [
|
|
3830
|
+
Array.from({ length: ((/* @__PURE__ */ new Date(`${month}T00:00:00Z`)).getUTCDay() + 6) % 7 }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { "aria-hidden": "true" }, `blank-${index}`)),
|
|
3249
3831
|
days.map((day) => {
|
|
3250
3832
|
const unavailable = disabled || isDateUnavailable(day.date, { min, max, isDisabled: isDateDisabled });
|
|
3251
3833
|
const edge = day.date === value.start ? "start" : day.date === value.end ? "end" : void 0;
|
|
3252
|
-
return /* @__PURE__ */ (0,
|
|
3834
|
+
return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
|
|
3253
3835
|
"button",
|
|
3254
3836
|
{
|
|
3255
3837
|
type: "button",
|
|
@@ -3270,13 +3852,13 @@ function DateRangePicker({
|
|
|
3270
3852
|
})
|
|
3271
3853
|
] })
|
|
3272
3854
|
] }, month)) }),
|
|
3273
|
-
/* @__PURE__ */ (0,
|
|
3274
|
-
rangeInvalid && /* @__PURE__ */ (0,
|
|
3855
|
+
/* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "uix-date-range-picker__selection", "aria-live": "polite", children: announcement }),
|
|
3856
|
+
rangeInvalid && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "uix-field__error", role: "alert", children: invalidMessage })
|
|
3275
3857
|
] });
|
|
3276
3858
|
}
|
|
3277
3859
|
|
|
3278
3860
|
// src/components/RelationshipGraph.tsx
|
|
3279
|
-
var
|
|
3861
|
+
var import_react33 = require("react");
|
|
3280
3862
|
|
|
3281
3863
|
// src/relationship-graph-model.ts
|
|
3282
3864
|
function boundRelationshipGraph(nodes, edges, maxNodes = 40) {
|
|
@@ -3343,7 +3925,7 @@ function traverseRelationshipNode(nodes, currentId, direction) {
|
|
|
3343
3925
|
}
|
|
3344
3926
|
|
|
3345
3927
|
// src/components/RelationshipGraph.tsx
|
|
3346
|
-
var
|
|
3928
|
+
var import_jsx_runtime62 = require("react/jsx-runtime");
|
|
3347
3929
|
var EMPTY_IDS = /* @__PURE__ */ new Set();
|
|
3348
3930
|
var EMPTY_LEGEND = [];
|
|
3349
3931
|
function RelationshipGraph({
|
|
@@ -3365,13 +3947,13 @@ function RelationshipGraph({
|
|
|
3365
3947
|
onRetry,
|
|
3366
3948
|
className
|
|
3367
3949
|
}) {
|
|
3368
|
-
const bounded = (0,
|
|
3369
|
-
const positioned = (0,
|
|
3370
|
-
const positionedById = (0,
|
|
3371
|
-
const [zoom, setZoom] = (0,
|
|
3372
|
-
const [pan, setPan] = (0,
|
|
3373
|
-
const [focusedId, setFocusedId] = (0,
|
|
3374
|
-
const svgRef = (0,
|
|
3950
|
+
const bounded = (0, import_react33.useMemo)(() => boundRelationshipGraph(nodes, edges, maxNodes), [nodes, edges, maxNodes]);
|
|
3951
|
+
const positioned = (0, import_react33.useMemo)(() => layoutRelationshipGraph(bounded.nodes, bounded.edges, selectedId), [bounded, selectedId]);
|
|
3952
|
+
const positionedById = (0, import_react33.useMemo)(() => new Map(positioned.map((node) => [node.id, node])), [positioned]);
|
|
3953
|
+
const [zoom, setZoom] = (0, import_react33.useState)(1);
|
|
3954
|
+
const [pan, setPan] = (0, import_react33.useState)({ x: 0, y: 0 });
|
|
3955
|
+
const [focusedId, setFocusedId] = (0, import_react33.useState)(selectedId ?? positioned[0]?.id);
|
|
3956
|
+
const svgRef = (0, import_react33.useRef)(null);
|
|
3375
3957
|
const select = (id) => {
|
|
3376
3958
|
const node = bounded.nodes.find((item) => item.id === id);
|
|
3377
3959
|
if (node) onSelect?.(node);
|
|
@@ -3394,44 +3976,44 @@ function RelationshipGraph({
|
|
|
3394
3976
|
setZoom(1);
|
|
3395
3977
|
setPan({ x: 0, y: 0 });
|
|
3396
3978
|
};
|
|
3397
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
3398
|
-
if (error) return /* @__PURE__ */ (0,
|
|
3399
|
-
/* @__PURE__ */ (0,
|
|
3400
|
-
onRetry && /* @__PURE__ */ (0,
|
|
3979
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "status", children: "Loading relationships\u2026" });
|
|
3980
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), role: "alert", children: [
|
|
3981
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: error }),
|
|
3982
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3401
3983
|
] });
|
|
3402
|
-
if (bounded.nodes.length === 0) return /* @__PURE__ */ (0,
|
|
3403
|
-
/* @__PURE__ */ (0,
|
|
3404
|
-
/* @__PURE__ */ (0,
|
|
3984
|
+
if (bounded.nodes.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("uix-relationship-graph uix-relationship-graph--state", className), children: [
|
|
3985
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "No relationships to display." }),
|
|
3986
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: "Adjust the neighborhood or filters to include a node." })
|
|
3405
3987
|
] });
|
|
3406
|
-
return /* @__PURE__ */ (0,
|
|
3407
|
-
/* @__PURE__ */ (0,
|
|
3408
|
-
/* @__PURE__ */ (0,
|
|
3409
|
-
/* @__PURE__ */ (0,
|
|
3410
|
-
/* @__PURE__ */ (0,
|
|
3411
|
-
/* @__PURE__ */ (0,
|
|
3412
|
-
/* @__PURE__ */ (0,
|
|
3413
|
-
/* @__PURE__ */ (0,
|
|
3414
|
-
/* @__PURE__ */ (0,
|
|
3415
|
-
/* @__PURE__ */ (0,
|
|
3988
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("section", { className: cx("uix-relationship-graph", `uix-relationship-graph--${density}`, className), "aria-label": "Relationship graph", children: [
|
|
3989
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__toolbar", "aria-label": "Graph view controls", children: [
|
|
3990
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x - 24 })), "aria-label": "Pan left", children: "Left" }),
|
|
3991
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y - 24 })), "aria-label": "Pan up", children: "Up" }),
|
|
3992
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, y: value.y + 24 })), "aria-label": "Pan down", children: "Down" }),
|
|
3993
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setPan((value) => ({ ...value, x: value.x + 24 })), "aria-label": "Pan right", children: "Right" }),
|
|
3994
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.min(2, Number((value + 0.2).toFixed(1)))), "aria-label": "Zoom in", children: "Zoom in" }),
|
|
3995
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => setZoom((value) => Math.max(0.5, Number((value - 0.2).toFixed(1)))), "aria-label": "Zoom out", children: "Zoom out" }),
|
|
3996
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: reset, children: "Reset view" }),
|
|
3997
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { "aria-live": "polite", children: [
|
|
3416
3998
|
"Zoom ",
|
|
3417
3999
|
Math.round(zoom * 100),
|
|
3418
4000
|
"%"
|
|
3419
4001
|
] })
|
|
3420
4002
|
] }),
|
|
3421
|
-
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0,
|
|
4003
|
+
bounded.omittedNodeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("p", { className: "uix-relationship-graph__bounded", role: "status", children: [
|
|
3422
4004
|
"Showing ",
|
|
3423
4005
|
bounded.nodes.length,
|
|
3424
4006
|
" nodes; ",
|
|
3425
4007
|
bounded.omittedNodeCount,
|
|
3426
4008
|
" outside this bounded neighborhood."
|
|
3427
4009
|
] }),
|
|
3428
|
-
/* @__PURE__ */ (0,
|
|
4010
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "uix-relationship-graph__visual", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("svg", { ref: svgRef, viewBox: "0 0 600 400", role: "group", "aria-label": `Graph with ${bounded.nodes.length} nodes and ${bounded.edges.length} relationships`, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("g", { transform: `translate(${pan.x} ${pan.y}) scale(${zoom})`, children: [
|
|
3429
4011
|
bounded.edges.map((edge) => {
|
|
3430
4012
|
const source = positionedById.get(edge.source);
|
|
3431
4013
|
const target = positionedById.get(edge.target);
|
|
3432
|
-
return /* @__PURE__ */ (0,
|
|
4014
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("line", { x1: source.x * 6, y1: source.y * 4, x2: target.x * 6, y2: target.y * 4, className: "uix-relationship-graph__edge", "data-highlighted": highlightedEdgeIds.has(edge.id) || void 0, "data-conflicted": conflictedEdgeIds.has(edge.id) || void 0, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("title", { children: edge.label ?? edge.type ?? "Relationship" }) }, edge.id);
|
|
3433
4015
|
}),
|
|
3434
|
-
positioned.map((node) => /* @__PURE__ */ (0,
|
|
4016
|
+
positioned.map((node) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
3435
4017
|
"g",
|
|
3436
4018
|
{
|
|
3437
4019
|
transform: `translate(${node.x * 6} ${node.y * 4})`,
|
|
@@ -3447,27 +4029,27 @@ function RelationshipGraph({
|
|
|
3447
4029
|
onKeyDown: (event) => onNodeKeyDown(event, node.id),
|
|
3448
4030
|
onClick: () => select(node.id),
|
|
3449
4031
|
children: [
|
|
3450
|
-
/* @__PURE__ */ (0,
|
|
3451
|
-
/* @__PURE__ */ (0,
|
|
4032
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("rect", { x: "-55", y: "-18", width: "110", height: "36", rx: "8" }),
|
|
4033
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("text", { textAnchor: "middle", dominantBaseline: "middle", children: node.label.length > 16 ? `${node.label.slice(0, 15)}\u2026` : node.label })
|
|
3452
4034
|
]
|
|
3453
4035
|
},
|
|
3454
4036
|
node.id
|
|
3455
4037
|
))
|
|
3456
4038
|
] }) }) }),
|
|
3457
|
-
legend.length > 0 && /* @__PURE__ */ (0,
|
|
3458
|
-
/* @__PURE__ */ (0,
|
|
3459
|
-
/* @__PURE__ */ (0,
|
|
3460
|
-
/* @__PURE__ */ (0,
|
|
4039
|
+
legend.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "uix-relationship-graph__legend", "aria-label": "Relationship types", children: legend.map((item) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("li", { "data-type": item.id, children: item.label }, item.id)) }),
|
|
4040
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "uix-relationship-graph__list", role: "region", "aria-label": "Accessible relationship list", children: [
|
|
4041
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("h3", { children: "Relationship list" }),
|
|
4042
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { children: bounded.nodes.map((node) => {
|
|
3461
4043
|
const neighbors = relationshipNeighbors(node.id, bounded.edges).map((id) => bounded.nodes.find((item) => item.id === id)?.label ?? id);
|
|
3462
|
-
return /* @__PURE__ */ (0,
|
|
3463
|
-
/* @__PURE__ */ (0,
|
|
3464
|
-
/* @__PURE__ */ (0,
|
|
3465
|
-
node.type && /* @__PURE__ */ (0,
|
|
3466
|
-
/* @__PURE__ */ (0,
|
|
4044
|
+
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { "data-selected": selectedId === node.id || void 0, children: [
|
|
4045
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("button", { type: "button", onClick: () => select(node.id), "aria-pressed": selectedId === node.id, children: [
|
|
4046
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("strong", { children: node.label }),
|
|
4047
|
+
node.type && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: node.type }),
|
|
4048
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { children: neighbors.length ? `Connected to ${neighbors.join(", ")}` : "No visible connections" })
|
|
3467
4049
|
] }),
|
|
3468
|
-
/* @__PURE__ */ (0,
|
|
3469
|
-
onExpandNeighbors && /* @__PURE__ */ (0,
|
|
3470
|
-
onOpenDetails && /* @__PURE__ */ (0,
|
|
4050
|
+
/* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "uix-relationship-graph__list-actions", children: [
|
|
4051
|
+
onExpandNeighbors && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onExpandNeighbors(node), children: "Expand neighbors" }),
|
|
4052
|
+
onOpenDetails && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("button", { type: "button", onClick: () => onOpenDetails(node), children: "Open details" })
|
|
3471
4053
|
] })
|
|
3472
4054
|
] }, node.id);
|
|
3473
4055
|
}) })
|
|
@@ -3476,8 +4058,8 @@ function RelationshipGraph({
|
|
|
3476
4058
|
}
|
|
3477
4059
|
|
|
3478
4060
|
// src/components/MatchReview.tsx
|
|
3479
|
-
var
|
|
3480
|
-
var
|
|
4061
|
+
var import_react34 = require("react");
|
|
4062
|
+
var import_jsx_runtime63 = require("react/jsx-runtime");
|
|
3481
4063
|
var valueText = (value) => value == null ? "\u2014" : typeof value === "string" ? value : JSON.stringify(value);
|
|
3482
4064
|
function MatchReview({
|
|
3483
4065
|
incoming,
|
|
@@ -3493,11 +4075,11 @@ function MatchReview({
|
|
|
3493
4075
|
onRetry,
|
|
3494
4076
|
className
|
|
3495
4077
|
}) {
|
|
3496
|
-
const [internalSelection, setInternalSelection] = (0,
|
|
3497
|
-
const [announcement, setAnnouncement] = (0,
|
|
3498
|
-
const [bulkPending, setBulkPending] = (0,
|
|
4078
|
+
const [internalSelection, setInternalSelection] = (0, import_react34.useState)(/* @__PURE__ */ new Set());
|
|
4079
|
+
const [announcement, setAnnouncement] = (0, import_react34.useState)("");
|
|
4080
|
+
const [bulkPending, setBulkPending] = (0, import_react34.useState)(false);
|
|
3499
4081
|
const selection = selectedIds ?? internalSelection;
|
|
3500
|
-
const pending = (0,
|
|
4082
|
+
const pending = (0, import_react34.useMemo)(() => candidates.filter((candidate) => candidate.status !== "resolved"), [candidates]);
|
|
3501
4083
|
const setSelection = (next) => {
|
|
3502
4084
|
if (selectedIds === void 0) setInternalSelection(next);
|
|
3503
4085
|
onSelectionChange?.(next);
|
|
@@ -3525,55 +4107,55 @@ function MatchReview({
|
|
|
3525
4107
|
setBulkPending(false);
|
|
3526
4108
|
}
|
|
3527
4109
|
};
|
|
3528
|
-
if (loading) return /* @__PURE__ */ (0,
|
|
3529
|
-
if (error) return /* @__PURE__ */ (0,
|
|
3530
|
-
/* @__PURE__ */ (0,
|
|
3531
|
-
onRetry && /* @__PURE__ */ (0,
|
|
4110
|
+
if (loading) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "status", children: "Loading match candidates\u2026" });
|
|
4111
|
+
if (error) return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), role: "alert", children: [
|
|
4112
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: error }),
|
|
4113
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: "Try again" })
|
|
3532
4114
|
] });
|
|
3533
|
-
if (candidates.length === 0) return /* @__PURE__ */ (0,
|
|
3534
|
-
/* @__PURE__ */ (0,
|
|
3535
|
-
/* @__PURE__ */ (0,
|
|
4115
|
+
if (candidates.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("uix-match-review uix-match-review--state", className), children: [
|
|
4116
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: "No candidate matches found." }),
|
|
4117
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { children: "Choose another record source or continue without a match." })
|
|
3536
4118
|
] });
|
|
3537
|
-
return /* @__PURE__ */ (0,
|
|
3538
|
-
/* @__PURE__ */ (0,
|
|
3539
|
-
/* @__PURE__ */ (0,
|
|
3540
|
-
/* @__PURE__ */ (0,
|
|
3541
|
-
/* @__PURE__ */ (0,
|
|
4119
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("section", { className: cx("uix-match-review", className), "aria-label": "Match review", children: [
|
|
4120
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-match-review__summary", children: [
|
|
4121
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
|
|
4122
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("strong", { children: incomingLabel }),
|
|
4123
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
|
|
3542
4124
|
pending.length,
|
|
3543
4125
|
" pending of ",
|
|
3544
4126
|
candidates.length
|
|
3545
4127
|
] })
|
|
3546
4128
|
] }),
|
|
3547
|
-
/* @__PURE__ */ (0,
|
|
3548
|
-
/* @__PURE__ */ (0,
|
|
4129
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__incoming", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
|
|
4130
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("b", { children: field.label }),
|
|
3549
4131
|
field.render?.(incoming[field.id], incoming) ?? valueText(incoming[field.id])
|
|
3550
4132
|
] }, field.id)) })
|
|
3551
4133
|
] }),
|
|
3552
|
-
onBulkDecision && /* @__PURE__ */ (0,
|
|
3553
|
-
/* @__PURE__ */ (0,
|
|
4134
|
+
onBulkDecision && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uix-match-review__bulk", "aria-label": "Bulk candidate actions", children: [
|
|
4135
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { children: [
|
|
3554
4136
|
selection.size,
|
|
3555
4137
|
" selected"
|
|
3556
4138
|
] }),
|
|
3557
|
-
/* @__PURE__ */ (0,
|
|
3558
|
-
/* @__PURE__ */ (0,
|
|
4139
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("accept"), children: bulkPending ? "Applying\u2026" : "Accept selected" }),
|
|
4140
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", disabled: selection.size === 0 || bulkPending, onClick: () => void runBulk("dismiss"), children: bulkPending ? "Applying\u2026" : "Dismiss selected" })
|
|
3559
4141
|
] }),
|
|
3560
|
-
/* @__PURE__ */ (0,
|
|
3561
|
-
/* @__PURE__ */ (0,
|
|
3562
|
-
/* @__PURE__ */ (0,
|
|
3563
|
-
/* @__PURE__ */ (0,
|
|
3564
|
-
/* @__PURE__ */ (0,
|
|
3565
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
3566
|
-
/* @__PURE__ */ (0,
|
|
3567
|
-
/* @__PURE__ */ (0,
|
|
4142
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__table-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("table", { className: "uix-table uix-match-review__table", children: [
|
|
4143
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("caption", { className: "uix-visually-hidden", children: "Candidate matches and available decisions" }),
|
|
4144
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("tr", { children: [
|
|
4145
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-visually-hidden", children: "Select" }) }),
|
|
4146
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Confidence" }),
|
|
4147
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: field.label }, field.id)),
|
|
4148
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Status" }),
|
|
4149
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("th", { scope: "col", children: "Actions" })
|
|
3568
4150
|
] }) }),
|
|
3569
|
-
/* @__PURE__ */ (0,
|
|
4151
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("tbody", { children: candidates.map((candidate) => {
|
|
3570
4152
|
const resolved = candidate.status === "resolved";
|
|
3571
|
-
return /* @__PURE__ */ (0,
|
|
3572
|
-
/* @__PURE__ */ (0,
|
|
3573
|
-
/* @__PURE__ */ (0,
|
|
3574
|
-
fields.map((field) => /* @__PURE__ */ (0,
|
|
3575
|
-
/* @__PURE__ */ (0,
|
|
3576
|
-
/* @__PURE__ */ (0,
|
|
4153
|
+
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("tr", { "data-status": candidate.status ?? "pending", children: [
|
|
4154
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("input", { type: "checkbox", checked: selection.has(candidate.id), onChange: () => toggle(candidate.id), "aria-label": `Select candidate ${candidate.id}` }) }),
|
|
4155
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "uix-match-review__confidence", children: candidate.confidence == null ? "Not scored" : `${Math.round(candidate.confidence * 100)}%` }) }),
|
|
4156
|
+
fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: field.render?.(candidate.record[field.id], candidate.record) ?? valueText(candidate.record[field.id]) }, field.id)),
|
|
4157
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(StatusPill, { tone: resolved ? "success" : "warning", children: resolved ? candidate.decision ?? "Resolved" : "Pending" }) }),
|
|
4158
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uix-match-review__actions", children: ["accept", "dismiss", "split", "pick-other"].map((action) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
3577
4159
|
"button",
|
|
3578
4160
|
{
|
|
3579
4161
|
type: "button",
|
|
@@ -3587,12 +4169,12 @@ function MatchReview({
|
|
|
3587
4169
|
] }, candidate.id);
|
|
3588
4170
|
}) })
|
|
3589
4171
|
] }) }),
|
|
3590
|
-
/* @__PURE__ */ (0,
|
|
4172
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
3591
4173
|
] });
|
|
3592
4174
|
}
|
|
3593
4175
|
|
|
3594
4176
|
// src/components/MetricInput.tsx
|
|
3595
|
-
var
|
|
4177
|
+
var import_react35 = require("react");
|
|
3596
4178
|
|
|
3597
4179
|
// src/metric-model.ts
|
|
3598
4180
|
function decimals(value) {
|
|
@@ -3617,7 +4199,7 @@ function parseMetricValue(value) {
|
|
|
3617
4199
|
}
|
|
3618
4200
|
|
|
3619
4201
|
// src/components/MetricInput.tsx
|
|
3620
|
-
var
|
|
4202
|
+
var import_jsx_runtime64 = require("react/jsx-runtime");
|
|
3621
4203
|
var defaultMetricFormat = (input) => input == null ? "" : String(input);
|
|
3622
4204
|
function MetricInput({
|
|
3623
4205
|
value,
|
|
@@ -3636,11 +4218,11 @@ function MetricInput({
|
|
|
3636
4218
|
className,
|
|
3637
4219
|
id: providedId
|
|
3638
4220
|
}) {
|
|
3639
|
-
const generatedId = (0,
|
|
4221
|
+
const generatedId = (0, import_react35.useId)();
|
|
3640
4222
|
const id = providedId ?? generatedId;
|
|
3641
4223
|
const errorId = `${id}-error`;
|
|
3642
|
-
const [text, setText] = (0,
|
|
3643
|
-
(0,
|
|
4224
|
+
const [text, setText] = (0, import_react35.useState)(() => format(value));
|
|
4225
|
+
(0, import_react35.useEffect)(() => setText(format(value)), [value, format]);
|
|
3644
4226
|
const commit = (input) => {
|
|
3645
4227
|
const parsed = parse(input);
|
|
3646
4228
|
if (input.trim() === "" || parsed !== null) {
|
|
@@ -3666,10 +4248,10 @@ function MetricInput({
|
|
|
3666
4248
|
const parsed = parse(event.currentTarget.value);
|
|
3667
4249
|
setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
|
|
3668
4250
|
};
|
|
3669
|
-
return /* @__PURE__ */ (0,
|
|
3670
|
-
/* @__PURE__ */ (0,
|
|
3671
|
-
/* @__PURE__ */ (0,
|
|
3672
|
-
/* @__PURE__ */ (0,
|
|
4251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
|
|
4252
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("label", { className: "uix-field__label", htmlFor: id, children: label }),
|
|
4253
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uix-metric-input__control", children: [
|
|
4254
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
3673
4255
|
Input,
|
|
3674
4256
|
{
|
|
3675
4257
|
id,
|
|
@@ -3688,22 +4270,22 @@ function MetricInput({
|
|
|
3688
4270
|
readOnly
|
|
3689
4271
|
}
|
|
3690
4272
|
),
|
|
3691
|
-
unit && /* @__PURE__ */ (0,
|
|
3692
|
-
/* @__PURE__ */ (0,
|
|
3693
|
-
/* @__PURE__ */ (0,
|
|
3694
|
-
/* @__PURE__ */ (0,
|
|
4273
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { className: "uix-metric-input__unit", "aria-hidden": "true", children: unit }),
|
|
4274
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-metric-input__steps", children: [
|
|
4275
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(1), disabled: disabled || readOnly, "aria-label": `Increase ${label}`, children: "+" }),
|
|
4276
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", { type: "button", className: "uix-metric-input__step", onClick: () => stepBy(-1), disabled: disabled || readOnly, "aria-label": `Decrease ${label}`, children: "\u2212" })
|
|
3695
4277
|
] })
|
|
3696
4278
|
] }),
|
|
3697
|
-
unit && /* @__PURE__ */ (0,
|
|
4279
|
+
unit && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uix-visually-hidden", children: [
|
|
3698
4280
|
"Unit: ",
|
|
3699
4281
|
unit
|
|
3700
4282
|
] }),
|
|
3701
|
-
invalid && errorMessage && /* @__PURE__ */ (0,
|
|
4283
|
+
invalid && errorMessage && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { id: errorId, className: "uix-field__error", children: errorMessage })
|
|
3702
4284
|
] });
|
|
3703
4285
|
}
|
|
3704
4286
|
|
|
3705
4287
|
// src/components/LicensePositionBar.tsx
|
|
3706
|
-
var
|
|
4288
|
+
var import_jsx_runtime65 = require("react/jsx-runtime");
|
|
3707
4289
|
var defaultCapacityFormat = (value) => new Intl.NumberFormat().format(value);
|
|
3708
4290
|
function LicensePositionBar({
|
|
3709
4291
|
consumed,
|
|
@@ -3724,18 +4306,18 @@ function LicensePositionBar({
|
|
|
3724
4306
|
const percent = safeEntitled === 0 ? safeConsumed > 0 ? 100 : 0 : safeConsumed / safeEntitled * 100;
|
|
3725
4307
|
const format = (value) => `${formatValue(value)}${unit ? ` ${unit}` : ""}`;
|
|
3726
4308
|
const summary = `${consumedLabel}: ${format(safeConsumed)}. ${entitledLabel}: ${format(safeEntitled)}. ${over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}`}.`;
|
|
3727
|
-
return /* @__PURE__ */ (0,
|
|
3728
|
-
/* @__PURE__ */ (0,
|
|
3729
|
-
/* @__PURE__ */ (0,
|
|
4309
|
+
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cx("uix-license-position", over > 0 && "uix-license-position--over", className), ...props, children: [
|
|
4310
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-license-position__header", children: [
|
|
4311
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "uix-license-position__value", children: [
|
|
3730
4312
|
format(safeConsumed),
|
|
3731
4313
|
" / ",
|
|
3732
4314
|
format(safeEntitled)
|
|
3733
4315
|
] }),
|
|
3734
|
-
/* @__PURE__ */ (0,
|
|
4316
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(StatusPill, { tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", children: over > 0 ? `${format(over)} ${overLabel}` : `${format(available)} ${availableLabel}` })
|
|
3735
4317
|
] }),
|
|
3736
|
-
/* @__PURE__ */ (0,
|
|
3737
|
-
/* @__PURE__ */ (0,
|
|
3738
|
-
over > 0 && /* @__PURE__ */ (0,
|
|
4318
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uix-license-position__track", children: [
|
|
4319
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Meter, { value: Math.min(100, percent), tone: over > 0 ? "danger" : percent >= 80 ? "warning" : "success", "aria-label": summary, "aria-valuetext": summary }),
|
|
4320
|
+
over > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
3739
4321
|
"span",
|
|
3740
4322
|
{
|
|
3741
4323
|
className: "uix-license-position__overflow",
|
|
@@ -3744,12 +4326,12 @@ function LicensePositionBar({
|
|
|
3744
4326
|
}
|
|
3745
4327
|
)
|
|
3746
4328
|
] }),
|
|
3747
|
-
/* @__PURE__ */ (0,
|
|
4329
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "uix-visually-hidden", children: summary })
|
|
3748
4330
|
] });
|
|
3749
4331
|
}
|
|
3750
4332
|
|
|
3751
4333
|
// src/components/BrandProfiles.tsx
|
|
3752
|
-
var
|
|
4334
|
+
var import_react37 = require("react");
|
|
3753
4335
|
|
|
3754
4336
|
// src/color-model.ts
|
|
3755
4337
|
var clamp2 = (value, min, max) => Math.min(max, Math.max(min, value));
|
|
@@ -3818,8 +4400,8 @@ function meetsContrast(background, foreground, minimum = 4.5) {
|
|
|
3818
4400
|
}
|
|
3819
4401
|
|
|
3820
4402
|
// src/components/ColorPicker.tsx
|
|
3821
|
-
var
|
|
3822
|
-
var
|
|
4403
|
+
var import_react36 = require("react");
|
|
4404
|
+
var import_jsx_runtime66 = require("react/jsx-runtime");
|
|
3823
4405
|
var EMPTY_COLORS = [];
|
|
3824
4406
|
function ColorPicker({
|
|
3825
4407
|
value,
|
|
@@ -3832,17 +4414,17 @@ function ColorPicker({
|
|
|
3832
4414
|
disabled,
|
|
3833
4415
|
className
|
|
3834
4416
|
}) {
|
|
3835
|
-
const id = (0,
|
|
3836
|
-
const triggerRef = (0,
|
|
3837
|
-
const dialogRef = (0,
|
|
3838
|
-
const [open, setOpen] = (0,
|
|
4417
|
+
const id = (0, import_react36.useId)();
|
|
4418
|
+
const triggerRef = (0, import_react36.useRef)(null);
|
|
4419
|
+
const dialogRef = (0, import_react36.useRef)(null);
|
|
4420
|
+
const [open, setOpen] = (0, import_react36.useState)(false);
|
|
3839
4421
|
const normalized = normalizeHex(value) ?? "#000000";
|
|
3840
|
-
const [hexText, setHexText] = (0,
|
|
3841
|
-
const hsv = (0,
|
|
4422
|
+
const [hexText, setHexText] = (0, import_react36.useState)(normalized);
|
|
4423
|
+
const hsv = (0, import_react36.useMemo)(() => rgbToHsv(hexToRgb(normalized)), [normalized]);
|
|
3842
4424
|
const ratio = contrastRatio(normalized, foreground) ?? 0;
|
|
3843
4425
|
const passes = ratio >= minimumContrast;
|
|
3844
|
-
(0,
|
|
3845
|
-
(0,
|
|
4426
|
+
(0, import_react36.useEffect)(() => setHexText(normalized), [normalized]);
|
|
4427
|
+
(0, import_react36.useEffect)(() => {
|
|
3846
4428
|
if (!open) return;
|
|
3847
4429
|
const dialog = dialogRef.current;
|
|
3848
4430
|
dialog?.querySelector("input,button")?.focus();
|
|
@@ -3885,8 +4467,8 @@ function ColorPicker({
|
|
|
3885
4467
|
if (next) onChange(next);
|
|
3886
4468
|
};
|
|
3887
4469
|
const sampleStyle = { backgroundColor: normalized };
|
|
3888
|
-
return /* @__PURE__ */ (0,
|
|
3889
|
-
/* @__PURE__ */ (0,
|
|
4470
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: cx("uix-color-picker", className), children: [
|
|
4471
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
3890
4472
|
"button",
|
|
3891
4473
|
{
|
|
3892
4474
|
ref: triggerRef,
|
|
@@ -3898,12 +4480,12 @@ function ColorPicker({
|
|
|
3898
4480
|
onClick: () => setOpen((current) => !current),
|
|
3899
4481
|
disabled,
|
|
3900
4482
|
children: [
|
|
3901
|
-
/* @__PURE__ */ (0,
|
|
3902
|
-
/* @__PURE__ */ (0,
|
|
4483
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "uix-color-picker__swatch", style: sampleStyle, "aria-hidden": "true" }),
|
|
4484
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: normalized })
|
|
3903
4485
|
]
|
|
3904
4486
|
}
|
|
3905
4487
|
),
|
|
3906
|
-
open && /* @__PURE__ */ (0,
|
|
4488
|
+
open && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
3907
4489
|
"div",
|
|
3908
4490
|
{
|
|
3909
4491
|
ref: dialogRef,
|
|
@@ -3914,57 +4496,57 @@ function ColorPicker({
|
|
|
3914
4496
|
className: "uix-color-picker__popover",
|
|
3915
4497
|
onKeyDown: onDialogKeyDown,
|
|
3916
4498
|
children: [
|
|
3917
|
-
/* @__PURE__ */ (0,
|
|
3918
|
-
/* @__PURE__ */ (0,
|
|
4499
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uix-color-picker__preview", style: sampleStyle, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { style: { color: foreground }, children: "Aa" }) }),
|
|
4500
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
3919
4501
|
"Hue ",
|
|
3920
|
-
/* @__PURE__ */ (0,
|
|
4502
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
|
|
3921
4503
|
Math.round(hsv.h),
|
|
3922
4504
|
"\xB0"
|
|
3923
4505
|
] }),
|
|
3924
|
-
/* @__PURE__ */ (0,
|
|
4506
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "359", value: Math.round(hsv.h), onChange: (event) => updateHsv({ h: Number(event.currentTarget.value) }) })
|
|
3925
4507
|
] }),
|
|
3926
|
-
/* @__PURE__ */ (0,
|
|
4508
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
3927
4509
|
"Saturation ",
|
|
3928
|
-
/* @__PURE__ */ (0,
|
|
4510
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
|
|
3929
4511
|
Math.round(hsv.s * 100),
|
|
3930
4512
|
"%"
|
|
3931
4513
|
] }),
|
|
3932
|
-
/* @__PURE__ */ (0,
|
|
4514
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.s * 100), onChange: (event) => updateHsv({ s: Number(event.currentTarget.value) / 100 }) })
|
|
3933
4515
|
] }),
|
|
3934
|
-
/* @__PURE__ */ (0,
|
|
4516
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__range", children: [
|
|
3935
4517
|
"Brightness ",
|
|
3936
|
-
/* @__PURE__ */ (0,
|
|
4518
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { children: [
|
|
3937
4519
|
Math.round(hsv.v * 100),
|
|
3938
4520
|
"%"
|
|
3939
4521
|
] }),
|
|
3940
|
-
/* @__PURE__ */ (0,
|
|
4522
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { type: "range", min: "0", max: "100", value: Math.round(hsv.v * 100), onChange: (event) => updateHsv({ v: Number(event.currentTarget.value) / 100 }) })
|
|
3941
4523
|
] }),
|
|
3942
|
-
/* @__PURE__ */ (0,
|
|
4524
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("label", { className: "uix-color-picker__hex", children: [
|
|
3943
4525
|
"Hex",
|
|
3944
|
-
/* @__PURE__ */ (0,
|
|
3945
|
-
/* @__PURE__ */ (0,
|
|
4526
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uix-color-picker__hex-row", children: [
|
|
4527
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("input", { className: "uix-input", value: hexText, onChange: (event) => setHexText(event.currentTarget.value), onBlur: commitHex, onKeyDown: (event) => {
|
|
3946
4528
|
if (event.key === "Enter") commitHex();
|
|
3947
4529
|
}, "aria-invalid": !normalizeHex(hexText) }),
|
|
3948
|
-
/* @__PURE__ */ (0,
|
|
4530
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", onClick: commitHex, disabled: !normalizeHex(hexText), children: "Set" })
|
|
3949
4531
|
] })
|
|
3950
4532
|
] }),
|
|
3951
|
-
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0,
|
|
3952
|
-
presets.length > 0 && /* @__PURE__ */ (0,
|
|
3953
|
-
/* @__PURE__ */ (0,
|
|
3954
|
-
/* @__PURE__ */ (0,
|
|
4533
|
+
(presets.length > 0 || recent.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uix-color-picker__palettes", children: [
|
|
4534
|
+
presets.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
|
|
4535
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("legend", { children: "Presets" }),
|
|
4536
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: presets.map((color) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use preset ${color}` }, color)) })
|
|
3955
4537
|
] }),
|
|
3956
|
-
recent.length > 0 && /* @__PURE__ */ (0,
|
|
3957
|
-
/* @__PURE__ */ (0,
|
|
3958
|
-
/* @__PURE__ */ (0,
|
|
4538
|
+
recent.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
|
|
4539
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("legend", { children: "Recent" }),
|
|
4540
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { children: recent.map((color) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-color-picker__preset", style: { backgroundColor: normalizeHex(color) ?? color }, onClick: () => choose(color), "aria-label": `Use recent color ${color}` }, color)) })
|
|
3959
4541
|
] })
|
|
3960
4542
|
] }),
|
|
3961
|
-
/* @__PURE__ */ (0,
|
|
4543
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("p", { className: cx("uix-color-picker__contrast", passes ? "uix-color-picker__contrast--pass" : "uix-color-picker__contrast--fail"), role: "status", "aria-live": "polite", children: [
|
|
3962
4544
|
"Contrast ",
|
|
3963
4545
|
ratio.toFixed(2),
|
|
3964
4546
|
":1 \u2014 ",
|
|
3965
4547
|
passes ? `passes WCAG AA (${minimumContrast}:1)` : `does not meet WCAG AA (${minimumContrast}:1)`
|
|
3966
4548
|
] }),
|
|
3967
|
-
/* @__PURE__ */ (0,
|
|
4549
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", onClick: close, children: "Done" })
|
|
3968
4550
|
]
|
|
3969
4551
|
}
|
|
3970
4552
|
)
|
|
@@ -3972,7 +4554,7 @@ function ColorPicker({
|
|
|
3972
4554
|
}
|
|
3973
4555
|
|
|
3974
4556
|
// src/components/BrandProfiles.tsx
|
|
3975
|
-
var
|
|
4557
|
+
var import_jsx_runtime67 = require("react/jsx-runtime");
|
|
3976
4558
|
var PROFILE_PROPERTIES = {
|
|
3977
4559
|
brand: "--uix-brand",
|
|
3978
4560
|
brandForeground: "--uix-brand-fg",
|
|
@@ -4041,7 +4623,7 @@ function BrandProfileEditor({
|
|
|
4041
4623
|
colorPresets = EMPTY_COLORS2,
|
|
4042
4624
|
className
|
|
4043
4625
|
}) {
|
|
4044
|
-
const [announcement, setAnnouncement] = (0,
|
|
4626
|
+
const [announcement, setAnnouncement] = (0, import_react37.useState)("");
|
|
4045
4627
|
const update = (patch) => onChange({ ...value, ...patch });
|
|
4046
4628
|
const apply = () => {
|
|
4047
4629
|
if (applyTarget !== null) applyBrandProfile(value, applyTarget);
|
|
@@ -4058,54 +4640,54 @@ function BrandProfileEditor({
|
|
|
4058
4640
|
...value.typography?.sans ? { "--uix-font-sans": value.typography.sans } : {},
|
|
4059
4641
|
...value.typography?.heading ? { "--uix-font-heading": value.typography.heading } : {}
|
|
4060
4642
|
};
|
|
4061
|
-
return /* @__PURE__ */ (0,
|
|
4062
|
-
/* @__PURE__ */ (0,
|
|
4063
|
-
profiles.length > 0 && /* @__PURE__ */ (0,
|
|
4643
|
+
return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("section", { className: cx("uix-brand-profiles", className), "aria-label": "Brand profile editor", children: [
|
|
4644
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__form", children: [
|
|
4645
|
+
profiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4064
4646
|
"Profile",
|
|
4065
|
-
/* @__PURE__ */ (0,
|
|
4647
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("select", { className: "uix-select", value: value.id, onChange: (event) => {
|
|
4066
4648
|
const selected = profiles.find((profile) => profile.id === event.currentTarget.value);
|
|
4067
4649
|
if (selected) onSelectProfile?.(selected);
|
|
4068
|
-
}, children: profiles.map((profile) => /* @__PURE__ */ (0,
|
|
4650
|
+
}, children: profiles.map((profile) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("option", { value: profile.id, children: profile.name }, profile.id)) })
|
|
4069
4651
|
] }),
|
|
4070
|
-
/* @__PURE__ */ (0,
|
|
4652
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4071
4653
|
"Name",
|
|
4072
|
-
/* @__PURE__ */ (0,
|
|
4654
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.name, onChange: (event) => update({ name: event.currentTarget.value }) })
|
|
4073
4655
|
] }),
|
|
4074
|
-
/* @__PURE__ */ (0,
|
|
4075
|
-
/* @__PURE__ */ (0,
|
|
4656
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__colors", children: [
|
|
4657
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { children: [
|
|
4076
4658
|
"Brand",
|
|
4077
|
-
/* @__PURE__ */ (0,
|
|
4659
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ColorPicker, { label: "Brand color", value: value.brand, foreground: value.brandForeground, presets: colorPresets, onChange: (brand) => update({ brand }) })
|
|
4078
4660
|
] }),
|
|
4079
|
-
/* @__PURE__ */ (0,
|
|
4661
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { children: [
|
|
4080
4662
|
"On brand",
|
|
4081
|
-
/* @__PURE__ */ (0,
|
|
4663
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ColorPicker, { label: "Brand foreground color", value: value.brandForeground, foreground: value.brand, presets: colorPresets, onChange: (brandForeground) => update({ brandForeground }) })
|
|
4082
4664
|
] })
|
|
4083
4665
|
] }),
|
|
4084
|
-
/* @__PURE__ */ (0,
|
|
4666
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4085
4667
|
"Body font",
|
|
4086
|
-
/* @__PURE__ */ (0,
|
|
4668
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.typography?.sans ?? "", onChange: (event) => update({ typography: { ...value.typography, sans: event.currentTarget.value || void 0 } }) })
|
|
4087
4669
|
] }),
|
|
4088
|
-
/* @__PURE__ */ (0,
|
|
4670
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-field__label", children: [
|
|
4089
4671
|
"Heading font",
|
|
4090
|
-
/* @__PURE__ */ (0,
|
|
4672
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { className: "uix-input", value: value.typography?.heading ?? "", onChange: (event) => update({ typography: { ...value.typography, heading: event.currentTarget.value || void 0 } }) })
|
|
4091
4673
|
] }),
|
|
4092
|
-
/* @__PURE__ */ (0,
|
|
4674
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("label", { className: "uix-file-upload uix-brand-profiles__upload", children: [
|
|
4093
4675
|
"Logo file",
|
|
4094
|
-
/* @__PURE__ */ (0,
|
|
4676
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("input", { type: "file", accept: "image/*", onChange: onFile })
|
|
4095
4677
|
] }),
|
|
4096
|
-
/* @__PURE__ */ (0,
|
|
4097
|
-
/* @__PURE__ */ (0,
|
|
4678
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", onClick: apply, children: "Apply profile" }),
|
|
4679
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-visually-hidden", "aria-live": "polite", children: announcement })
|
|
4098
4680
|
] }),
|
|
4099
|
-
/* @__PURE__ */ (0,
|
|
4100
|
-
/* @__PURE__ */ (0,
|
|
4101
|
-
value.logo ? /* @__PURE__ */ (0,
|
|
4102
|
-
/* @__PURE__ */ (0,
|
|
4681
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview", style: previewStyle, "aria-label": `Live preview of ${value.name}`, children: [
|
|
4682
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview-header", children: [
|
|
4683
|
+
value.logo ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("img", { src: value.logo.src, alt: value.logo.alt }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "uix-brand-profiles__logo-placeholder", children: "Logo" }),
|
|
4684
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("strong", { children: value.name || "Brand preview" })
|
|
4103
4685
|
] }),
|
|
4104
|
-
/* @__PURE__ */ (0,
|
|
4105
|
-
/* @__PURE__ */ (0,
|
|
4106
|
-
/* @__PURE__ */ (0,
|
|
4107
|
-
/* @__PURE__ */ (0,
|
|
4108
|
-
/* @__PURE__ */ (0,
|
|
4686
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uix-brand-profiles__preview-body", children: [
|
|
4687
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { children: "Readable, serializable branding" }),
|
|
4688
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("p", { children: "Accent, links, rings, and muted states continue through the existing UIx token chain." }),
|
|
4689
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary", children: "Primary action" }),
|
|
4690
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("a", { href: "#brand-profile-preview", children: "Preview link" })
|
|
4109
4691
|
] })
|
|
4110
4692
|
] })
|
|
4111
4693
|
] });
|
|
@@ -4113,7 +4695,7 @@ function BrandProfileEditor({
|
|
|
4113
4695
|
var BrandProfiles = BrandProfileEditor;
|
|
4114
4696
|
|
|
4115
4697
|
// src/components/DiffViewer.tsx
|
|
4116
|
-
var
|
|
4698
|
+
var import_react38 = require("react");
|
|
4117
4699
|
|
|
4118
4700
|
// src/diff-model.ts
|
|
4119
4701
|
function isJsonObject(value) {
|
|
@@ -4164,7 +4746,7 @@ function summarizeDiff(entries, resolutions = {}) {
|
|
|
4164
4746
|
}
|
|
4165
4747
|
|
|
4166
4748
|
// src/components/DiffViewer.tsx
|
|
4167
|
-
var
|
|
4749
|
+
var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
4168
4750
|
var GROUPS = [
|
|
4169
4751
|
{ kind: "conflicted", label: "Conflicted" },
|
|
4170
4752
|
{ kind: "changed", label: "Changed" },
|
|
@@ -4183,65 +4765,65 @@ function DiffViewer({
|
|
|
4183
4765
|
labels = DEFAULT_LABELS,
|
|
4184
4766
|
className
|
|
4185
4767
|
}) {
|
|
4186
|
-
const id = (0,
|
|
4187
|
-
const entries = (0,
|
|
4188
|
-
const [internalResolutions, setInternalResolutions] = (0,
|
|
4768
|
+
const id = (0, import_react38.useId)();
|
|
4769
|
+
const entries = (0, import_react38.useMemo)(() => providedEntries ?? buildThreeWayDiff(base, current, incoming), [providedEntries, base, current, incoming]);
|
|
4770
|
+
const [internalResolutions, setInternalResolutions] = (0, import_react38.useState)({});
|
|
4189
4771
|
const resolutions = controlledResolutions ?? internalResolutions;
|
|
4190
4772
|
const summary = summarizeDiff(entries, resolutions);
|
|
4191
4773
|
const resolve2 = (path, resolution) => {
|
|
4192
4774
|
if (controlledResolutions === void 0) setInternalResolutions((currentState) => ({ ...currentState, [path]: resolution }));
|
|
4193
4775
|
onResolutionChange?.(path, resolution);
|
|
4194
4776
|
};
|
|
4195
|
-
if (entries.length === 0) return /* @__PURE__ */ (0,
|
|
4196
|
-
/* @__PURE__ */ (0,
|
|
4197
|
-
/* @__PURE__ */ (0,
|
|
4777
|
+
if (entries.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: cx("uix-diff-viewer uix-diff-viewer--empty", className), "aria-label": "Configuration differences", children: [
|
|
4778
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { children: "No differences" }),
|
|
4779
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { children: "Base, current, and incoming values are aligned." })
|
|
4198
4780
|
] });
|
|
4199
|
-
return /* @__PURE__ */ (0,
|
|
4200
|
-
/* @__PURE__ */ (0,
|
|
4201
|
-
GROUPS.map((group) => /* @__PURE__ */ (0,
|
|
4202
|
-
/* @__PURE__ */ (0,
|
|
4781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: cx("uix-diff-viewer", className), "aria-label": "Configuration differences", children: [
|
|
4782
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-diff-viewer__summary", "aria-label": "Difference summary", children: [
|
|
4783
|
+
GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
|
|
4784
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary[group.kind] }),
|
|
4203
4785
|
" ",
|
|
4204
4786
|
group.label.toLowerCase()
|
|
4205
4787
|
] }, group.kind)),
|
|
4206
|
-
/* @__PURE__ */ (0,
|
|
4207
|
-
/* @__PURE__ */ (0,
|
|
4788
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
|
|
4789
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary.resolved }),
|
|
4208
4790
|
" resolved"
|
|
4209
4791
|
] }),
|
|
4210
|
-
/* @__PURE__ */ (0,
|
|
4211
|
-
/* @__PURE__ */ (0,
|
|
4792
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("span", { children: [
|
|
4793
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("b", { children: summary.pending }),
|
|
4212
4794
|
" pending"
|
|
4213
4795
|
] })
|
|
4214
4796
|
] }),
|
|
4215
4797
|
GROUPS.map((group) => {
|
|
4216
4798
|
const grouped = entries.filter((entry) => entry.kind === group.kind);
|
|
4217
4799
|
if (!grouped.length) return null;
|
|
4218
|
-
return /* @__PURE__ */ (0,
|
|
4219
|
-
/* @__PURE__ */ (0,
|
|
4800
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("section", { className: "uix-diff-viewer__group", "aria-labelledby": `${id}-${group.kind}`, children: [
|
|
4801
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("h3", { id: `${id}-${group.kind}`, children: [
|
|
4220
4802
|
group.label,
|
|
4221
4803
|
" ",
|
|
4222
|
-
/* @__PURE__ */ (0,
|
|
4804
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: grouped.length })
|
|
4223
4805
|
] }),
|
|
4224
4806
|
grouped.map((entry) => {
|
|
4225
4807
|
const resolution = resolutions[entry.path] ?? "pending";
|
|
4226
|
-
return /* @__PURE__ */ (0,
|
|
4227
|
-
/* @__PURE__ */ (0,
|
|
4228
|
-
/* @__PURE__ */ (0,
|
|
4229
|
-
/* @__PURE__ */ (0,
|
|
4808
|
+
return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("details", { className: "uix-diff-viewer__entry", "data-kind": entry.kind, open: entry.kind === "conflicted", children: [
|
|
4809
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("summary", { children: [
|
|
4810
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("code", { children: entry.path }),
|
|
4811
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)(StatusPill, { tone: resolution === "pending" ? "warning" : "success", children: resolution })
|
|
4230
4812
|
] }),
|
|
4231
|
-
/* @__PURE__ */ (0,
|
|
4232
|
-
/* @__PURE__ */ (0,
|
|
4233
|
-
/* @__PURE__ */ (0,
|
|
4813
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "uix-diff-viewer__versions", children: ["base", "current", "incoming"].map((version) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { role: "region", "aria-label": `${labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}`} value for ${entry.path}`, children: [
|
|
4814
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("strong", { children: labels[version] ?? `${version[0].toUpperCase()}${version.slice(1)}` }),
|
|
4815
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("pre", { children: renderValue(entry[version]) })
|
|
4234
4816
|
] }, version)) }),
|
|
4235
|
-
/* @__PURE__ */ (0,
|
|
4236
|
-
/* @__PURE__ */ (0,
|
|
4237
|
-
/* @__PURE__ */ (0,
|
|
4238
|
-
/* @__PURE__ */ (0,
|
|
4817
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "uix-diff-viewer__actions", "aria-label": `Resolve ${entry.path}`, children: [
|
|
4818
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--primary uix-btn--sm", "aria-pressed": resolution === "accept", onClick: () => resolve2(entry.path, "accept"), children: "Accept incoming" }),
|
|
4819
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--secondary uix-btn--sm", "aria-pressed": resolution === "skip", onClick: () => resolve2(entry.path, "skip"), children: "Keep current" }),
|
|
4820
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsx)("button", { type: "button", className: "uix-btn uix-btn--ghost uix-btn--sm", "aria-pressed": resolution === "pending", onClick: () => resolve2(entry.path, "pending"), children: "Mark pending" })
|
|
4239
4821
|
] })
|
|
4240
4822
|
] }, entry.path);
|
|
4241
4823
|
})
|
|
4242
4824
|
] }, group.kind);
|
|
4243
4825
|
}),
|
|
4244
|
-
/* @__PURE__ */ (0,
|
|
4826
|
+
/* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "uix-visually-hidden", "aria-live": "polite", children: [
|
|
4245
4827
|
summary.resolved,
|
|
4246
4828
|
" of ",
|
|
4247
4829
|
entries.length,
|
|
@@ -4253,19 +4835,24 @@ function DiffViewer({
|
|
|
4253
4835
|
0 && (module.exports = {
|
|
4254
4836
|
Alert,
|
|
4255
4837
|
AppShell,
|
|
4838
|
+
AsyncOperationStatus,
|
|
4256
4839
|
Avatar,
|
|
4257
4840
|
AvatarGroup,
|
|
4258
4841
|
BrandProfileEditor,
|
|
4259
4842
|
BrandProfiles,
|
|
4843
|
+
Breadcrumbs,
|
|
4260
4844
|
BuilderCanvas,
|
|
4261
4845
|
BulkBar,
|
|
4262
4846
|
Button,
|
|
4263
4847
|
ButtonGroup,
|
|
4264
4848
|
Card,
|
|
4849
|
+
CardLink,
|
|
4265
4850
|
CellStrong,
|
|
4266
4851
|
CellSub,
|
|
4267
4852
|
Checkbox,
|
|
4853
|
+
CollapsibleSection,
|
|
4268
4854
|
ColorPicker,
|
|
4855
|
+
Combobox,
|
|
4269
4856
|
CommandGroup,
|
|
4270
4857
|
CommandItem,
|
|
4271
4858
|
CommandPalette,
|
|
@@ -4273,12 +4860,14 @@ function DiffViewer({
|
|
|
4273
4860
|
Comments,
|
|
4274
4861
|
Composer,
|
|
4275
4862
|
ComposerBar,
|
|
4863
|
+
ConfirmDialog,
|
|
4276
4864
|
ContentList,
|
|
4277
4865
|
ContentListItem,
|
|
4278
4866
|
DateRangePicker,
|
|
4279
4867
|
DescriptionItem,
|
|
4280
4868
|
DescriptionList,
|
|
4281
4869
|
DetailLayout,
|
|
4870
|
+
DetailPage,
|
|
4282
4871
|
DiffViewer,
|
|
4283
4872
|
Drawer,
|
|
4284
4873
|
EmptyState,
|
|
@@ -4289,6 +4878,11 @@ function DiffViewer({
|
|
|
4289
4878
|
FeaturedRundownItem,
|
|
4290
4879
|
FeaturedStage,
|
|
4291
4880
|
Field,
|
|
4881
|
+
FilterPopover,
|
|
4882
|
+
FilteredEmptyState,
|
|
4883
|
+
Flow,
|
|
4884
|
+
FlowNode,
|
|
4885
|
+
ForbiddenState,
|
|
4292
4886
|
Highlighted,
|
|
4293
4887
|
Inbox,
|
|
4294
4888
|
InboxDetail,
|
|
@@ -4313,22 +4907,29 @@ function DiffViewer({
|
|
|
4313
4907
|
NavGroup,
|
|
4314
4908
|
NavItem,
|
|
4315
4909
|
NewsLead,
|
|
4910
|
+
NotFoundState,
|
|
4316
4911
|
Note,
|
|
4317
4912
|
NoticeQueue,
|
|
4318
4913
|
PageHeader,
|
|
4319
4914
|
PageIntro,
|
|
4320
4915
|
Pagination,
|
|
4321
4916
|
Peek,
|
|
4917
|
+
Pipeline,
|
|
4918
|
+
PipelineStage,
|
|
4322
4919
|
Popover,
|
|
4323
4920
|
Progress,
|
|
4921
|
+
PromptDialog,
|
|
4324
4922
|
Prose,
|
|
4325
4923
|
Radio,
|
|
4326
4924
|
RadioGroup,
|
|
4925
|
+
RelatedLinks,
|
|
4327
4926
|
RelationshipGraph,
|
|
4927
|
+
RelativeTime,
|
|
4328
4928
|
ResourceGrid,
|
|
4329
4929
|
RowAction,
|
|
4330
4930
|
RowActions,
|
|
4331
4931
|
RuleBuilder,
|
|
4932
|
+
SavedViewMenu,
|
|
4332
4933
|
SchedulingCalendar,
|
|
4333
4934
|
SectionHead,
|
|
4334
4935
|
Segmented,
|
|
@@ -4356,10 +4957,12 @@ function DiffViewer({
|
|
|
4356
4957
|
TimelineItem,
|
|
4357
4958
|
Toast,
|
|
4358
4959
|
Toaster,
|
|
4960
|
+
ToggleRow,
|
|
4359
4961
|
Tooltip,
|
|
4360
4962
|
Tr,
|
|
4361
4963
|
Tree,
|
|
4362
4964
|
UserChip,
|
|
4965
|
+
ViewMenu,
|
|
4363
4966
|
addCalendarDays,
|
|
4364
4967
|
addCalendarMonths,
|
|
4365
4968
|
appendRuleNode,
|
|
@@ -4374,6 +4977,7 @@ function DiffViewer({
|
|
|
4374
4977
|
contrastRatio,
|
|
4375
4978
|
cx,
|
|
4376
4979
|
enumerateDateSpan,
|
|
4980
|
+
filterComboboxOptions,
|
|
4377
4981
|
findRuleNodeDepth,
|
|
4378
4982
|
flattenTree,
|
|
4379
4983
|
hexToRgb,
|
|
@@ -4392,9 +4996,11 @@ function DiffViewer({
|
|
|
4392
4996
|
multiSort,
|
|
4393
4997
|
nextSortDir,
|
|
4394
4998
|
normalizeHex,
|
|
4999
|
+
parseDateValue,
|
|
4395
5000
|
parseMetricValue,
|
|
4396
5001
|
parseView,
|
|
4397
5002
|
relationshipNeighbors,
|
|
5003
|
+
relativeTimeValue,
|
|
4398
5004
|
removeRuleNode,
|
|
4399
5005
|
reorder,
|
|
4400
5006
|
restoreBrandProfile,
|