@morze/ui 0.2.12 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +171 -11
- package/dist/form/index.cjs +128 -0
- package/dist/form/index.cjs.map +1 -0
- package/dist/form/index.d.cts +58 -0
- package/dist/form/index.d.ts +58 -0
- package/dist/form/index.js +99 -0
- package/dist/form/index.js.map +1 -0
- package/dist/index.cjs +1652 -168
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +346 -8
- package/dist/index.d.ts +346 -8
- package/dist/index.js +1583 -169
- package/dist/index.js.map +1 -1
- package/dist/label-Bf37KoRc.d.cts +6 -0
- package/dist/label-Bf37KoRc.d.ts +6 -0
- package/dist/locales/en.cjs +10 -1
- package/dist/locales/en.cjs.map +1 -1
- package/dist/locales/en.d.cts +4 -2
- package/dist/locales/en.d.ts +4 -2
- package/dist/locales/en.js +10 -2
- package/dist/locales/en.js.map +1 -1
- package/dist/locales/ru.cjs +10 -1
- package/dist/locales/ru.cjs.map +1 -1
- package/dist/locales/ru.d.cts +4 -2
- package/dist/locales/ru.d.ts +4 -2
- package/dist/locales/ru.js +10 -2
- package/dist/locales/ru.js.map +1 -1
- package/dist/morze-ui.css +1 -1
- package/dist/types-B3pfG-Kz.d.cts +164 -0
- package/dist/types-B3pfG-Kz.d.ts +164 -0
- package/package.json +15 -3
- package/dist/types-B8jz2FF9.d.cts +0 -75
- package/dist/types-B8jz2FF9.d.ts +0 -75
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
'use strict';
|
|
3
3
|
|
|
4
4
|
var clsx = require('clsx');
|
|
5
|
-
var
|
|
5
|
+
var React48 = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
7
7
|
var classVarianceAuthority = require('class-variance-authority');
|
|
8
8
|
var radixUi = require('radix-ui');
|
|
@@ -25,13 +25,13 @@ function _interopNamespace(e) {
|
|
|
25
25
|
return Object.freeze(n);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var React48__namespace = /*#__PURE__*/_interopNamespace(React48);
|
|
29
29
|
|
|
30
30
|
// src/lib/utils.ts
|
|
31
31
|
function cn(...inputs) {
|
|
32
32
|
return clsx.clsx(inputs);
|
|
33
33
|
}
|
|
34
|
-
var ThemeContext =
|
|
34
|
+
var ThemeContext = React48__namespace.createContext(null);
|
|
35
35
|
function readStored(key) {
|
|
36
36
|
if (!key || typeof window === "undefined") return null;
|
|
37
37
|
try {
|
|
@@ -59,15 +59,15 @@ function MorzeThemeProvider({
|
|
|
59
59
|
target = "html",
|
|
60
60
|
className
|
|
61
61
|
}) {
|
|
62
|
-
const [theme, setThemeState] =
|
|
63
|
-
const [resolved, setResolved] =
|
|
62
|
+
const [theme, setThemeState] = React48__namespace.useState(defaultTheme);
|
|
63
|
+
const [resolved, setResolved] = React48__namespace.useState(
|
|
64
64
|
defaultTheme === "system" ? "dark" : defaultTheme
|
|
65
65
|
);
|
|
66
|
-
|
|
66
|
+
React48__namespace.useEffect(() => {
|
|
67
67
|
const stored = readStored(storageKey);
|
|
68
68
|
if (stored) setThemeState(stored);
|
|
69
69
|
}, [storageKey]);
|
|
70
|
-
|
|
70
|
+
React48__namespace.useEffect(() => {
|
|
71
71
|
if (theme !== "system") {
|
|
72
72
|
setResolved(theme);
|
|
73
73
|
return;
|
|
@@ -78,18 +78,18 @@ function MorzeThemeProvider({
|
|
|
78
78
|
mql.addEventListener("change", onChange);
|
|
79
79
|
return () => mql.removeEventListener("change", onChange);
|
|
80
80
|
}, [theme]);
|
|
81
|
-
|
|
81
|
+
React48__namespace.useEffect(() => {
|
|
82
82
|
if (target !== "html" || typeof document === "undefined") return;
|
|
83
83
|
document.documentElement.setAttribute("data-mz-theme", resolved);
|
|
84
84
|
}, [resolved, target]);
|
|
85
|
-
const setTheme =
|
|
85
|
+
const setTheme = React48__namespace.useCallback(
|
|
86
86
|
(next) => {
|
|
87
87
|
setThemeState(next);
|
|
88
88
|
writeStored(storageKey, next);
|
|
89
89
|
},
|
|
90
90
|
[storageKey]
|
|
91
91
|
);
|
|
92
|
-
const value =
|
|
92
|
+
const value = React48__namespace.useMemo(
|
|
93
93
|
() => ({ theme, resolvedTheme: resolved, setTheme }),
|
|
94
94
|
[theme, resolved, setTheme]
|
|
95
95
|
);
|
|
@@ -104,7 +104,7 @@ function MorzeThemeProvider({
|
|
|
104
104
|
) });
|
|
105
105
|
}
|
|
106
106
|
function useMorzeTheme() {
|
|
107
|
-
const context =
|
|
107
|
+
const context = React48__namespace.useContext(ThemeContext);
|
|
108
108
|
if (!context) {
|
|
109
109
|
throw new Error("useMorzeTheme must be used inside <MorzeThemeProvider>");
|
|
110
110
|
}
|
|
@@ -137,6 +137,13 @@ var ChevronDownIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6
|
|
|
137
137
|
var ChevronUpIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" }));
|
|
138
138
|
var ChevronRightIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }));
|
|
139
139
|
var DotIcon = icon(/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4", fill: "currentColor" }));
|
|
140
|
+
var EllipsisIcon = icon(
|
|
141
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
142
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
143
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" }),
|
|
144
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "12", r: "1.5", fill: "currentColor", stroke: "none" })
|
|
145
|
+
] })
|
|
146
|
+
);
|
|
140
147
|
var SpinnerIcon = icon(
|
|
141
148
|
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
142
149
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9", opacity: "0.25" }),
|
|
@@ -257,8 +264,8 @@ function Button({
|
|
|
257
264
|
] });
|
|
258
265
|
let content;
|
|
259
266
|
if (asChild) {
|
|
260
|
-
const child =
|
|
261
|
-
content =
|
|
267
|
+
const child = React48__namespace.Children.only(children);
|
|
268
|
+
content = React48__namespace.cloneElement(child, void 0, decorate(child.props.children));
|
|
262
269
|
} else {
|
|
263
270
|
content = decorate(children);
|
|
264
271
|
}
|
|
@@ -348,7 +355,7 @@ function Toggle({
|
|
|
348
355
|
}
|
|
349
356
|
);
|
|
350
357
|
}
|
|
351
|
-
var ToggleGroupContext =
|
|
358
|
+
var ToggleGroupContext = React48__namespace.createContext({
|
|
352
359
|
size: "md",
|
|
353
360
|
variant: "default"
|
|
354
361
|
});
|
|
@@ -389,7 +396,7 @@ function ToggleGroupItem({
|
|
|
389
396
|
size,
|
|
390
397
|
...props
|
|
391
398
|
}) {
|
|
392
|
-
const context =
|
|
399
|
+
const context = React48__namespace.useContext(ToggleGroupContext);
|
|
393
400
|
const resolvedVariant = variant ?? context.variant;
|
|
394
401
|
const resolvedSize = size ?? context.size;
|
|
395
402
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -492,7 +499,7 @@ function Slider({
|
|
|
492
499
|
tone,
|
|
493
500
|
...props
|
|
494
501
|
}) {
|
|
495
|
-
const values =
|
|
502
|
+
const values = React48__namespace.useMemo(
|
|
496
503
|
() => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min],
|
|
497
504
|
[value, defaultValue, min]
|
|
498
505
|
);
|
|
@@ -691,13 +698,192 @@ function SelectScrollDownButton({
|
|
|
691
698
|
}
|
|
692
699
|
);
|
|
693
700
|
}
|
|
701
|
+
function DropdownMenu({ ...props }) {
|
|
702
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Root, { "data-slot": "dropdown-menu", ...props });
|
|
703
|
+
}
|
|
704
|
+
function DropdownMenuPortal({ ...props }) {
|
|
705
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
706
|
+
}
|
|
707
|
+
function DropdownMenuTrigger({
|
|
708
|
+
...props
|
|
709
|
+
}) {
|
|
710
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
|
|
711
|
+
}
|
|
712
|
+
function DropdownMenuContent({
|
|
713
|
+
className,
|
|
714
|
+
sideOffset = 6,
|
|
715
|
+
...props
|
|
716
|
+
}) {
|
|
717
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
718
|
+
radixUi.DropdownMenu.Content,
|
|
719
|
+
{
|
|
720
|
+
"data-slot": "dropdown-menu-content",
|
|
721
|
+
sideOffset,
|
|
722
|
+
className: cn("mz-panel mz-menu-content", className),
|
|
723
|
+
...props
|
|
724
|
+
}
|
|
725
|
+
) });
|
|
726
|
+
}
|
|
727
|
+
function DropdownMenuGroup({ ...props }) {
|
|
728
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
729
|
+
}
|
|
730
|
+
function DropdownMenuItem({
|
|
731
|
+
className,
|
|
732
|
+
inset,
|
|
733
|
+
variant = "default",
|
|
734
|
+
...props
|
|
735
|
+
}) {
|
|
736
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
737
|
+
radixUi.DropdownMenu.Item,
|
|
738
|
+
{
|
|
739
|
+
"data-slot": "dropdown-menu-item",
|
|
740
|
+
"data-inset": inset,
|
|
741
|
+
"data-variant": variant,
|
|
742
|
+
className: cn(
|
|
743
|
+
"mz-item",
|
|
744
|
+
inset ? "mz-item--inset" : "mz-item--plain",
|
|
745
|
+
variant === "destructive" && "mz-item--destructive",
|
|
746
|
+
className
|
|
747
|
+
),
|
|
748
|
+
...props
|
|
749
|
+
}
|
|
750
|
+
);
|
|
751
|
+
}
|
|
752
|
+
function DropdownMenuCheckboxItem({
|
|
753
|
+
className,
|
|
754
|
+
children,
|
|
755
|
+
checked,
|
|
756
|
+
...props
|
|
757
|
+
}) {
|
|
758
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
759
|
+
radixUi.DropdownMenu.CheckboxItem,
|
|
760
|
+
{
|
|
761
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
762
|
+
className: cn("mz-item", className),
|
|
763
|
+
checked,
|
|
764
|
+
...props,
|
|
765
|
+
children: [
|
|
766
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }) }),
|
|
767
|
+
children
|
|
768
|
+
]
|
|
769
|
+
}
|
|
770
|
+
);
|
|
771
|
+
}
|
|
772
|
+
function DropdownMenuRadioGroup({
|
|
773
|
+
...props
|
|
774
|
+
}) {
|
|
775
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
|
|
776
|
+
}
|
|
777
|
+
function DropdownMenuRadioItem({
|
|
778
|
+
className,
|
|
779
|
+
children,
|
|
780
|
+
...props
|
|
781
|
+
}) {
|
|
782
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
783
|
+
radixUi.DropdownMenu.RadioItem,
|
|
784
|
+
{
|
|
785
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
786
|
+
className: cn("mz-item", className),
|
|
787
|
+
...props,
|
|
788
|
+
children: [
|
|
789
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(DotIcon, {}) }) }),
|
|
790
|
+
children
|
|
791
|
+
]
|
|
792
|
+
}
|
|
793
|
+
);
|
|
794
|
+
}
|
|
795
|
+
function DropdownMenuLabel({
|
|
796
|
+
className,
|
|
797
|
+
inset,
|
|
798
|
+
...props
|
|
799
|
+
}) {
|
|
800
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
801
|
+
radixUi.DropdownMenu.Label,
|
|
802
|
+
{
|
|
803
|
+
"data-slot": "dropdown-menu-label",
|
|
804
|
+
"data-inset": inset,
|
|
805
|
+
className: cn("mz-menu-label", inset && "mz-menu-label--inset", className),
|
|
806
|
+
...props
|
|
807
|
+
}
|
|
808
|
+
);
|
|
809
|
+
}
|
|
810
|
+
function DropdownMenuSeparator({
|
|
811
|
+
className,
|
|
812
|
+
...props
|
|
813
|
+
}) {
|
|
814
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
815
|
+
radixUi.DropdownMenu.Separator,
|
|
816
|
+
{
|
|
817
|
+
"data-slot": "dropdown-menu-separator",
|
|
818
|
+
className: cn("mz-menu-separator", className),
|
|
819
|
+
...props
|
|
820
|
+
}
|
|
821
|
+
);
|
|
822
|
+
}
|
|
823
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
824
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
825
|
+
"span",
|
|
826
|
+
{
|
|
827
|
+
"data-slot": "dropdown-menu-shortcut",
|
|
828
|
+
className: cn("mz-menu-shortcut", className),
|
|
829
|
+
...props
|
|
830
|
+
}
|
|
831
|
+
);
|
|
832
|
+
}
|
|
833
|
+
function DropdownMenuSub({ ...props }) {
|
|
834
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Sub, { "data-slot": "dropdown-menu-sub", ...props });
|
|
835
|
+
}
|
|
836
|
+
function DropdownMenuSubTrigger({
|
|
837
|
+
className,
|
|
838
|
+
inset,
|
|
839
|
+
children,
|
|
840
|
+
...props
|
|
841
|
+
}) {
|
|
842
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
843
|
+
radixUi.DropdownMenu.SubTrigger,
|
|
844
|
+
{
|
|
845
|
+
"data-slot": "dropdown-menu-sub-trigger",
|
|
846
|
+
"data-inset": inset,
|
|
847
|
+
className: cn(
|
|
848
|
+
"mz-item mz-menu-sub-trigger",
|
|
849
|
+
inset ? "mz-item--inset" : "mz-item--plain",
|
|
850
|
+
className
|
|
851
|
+
),
|
|
852
|
+
...props,
|
|
853
|
+
children: [
|
|
854
|
+
children,
|
|
855
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "mz-menu-sub-trigger__icon" })
|
|
856
|
+
]
|
|
857
|
+
}
|
|
858
|
+
);
|
|
859
|
+
}
|
|
860
|
+
function DropdownMenuSubContent({
|
|
861
|
+
className,
|
|
862
|
+
...props
|
|
863
|
+
}) {
|
|
864
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
865
|
+
radixUi.DropdownMenu.SubContent,
|
|
866
|
+
{
|
|
867
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
868
|
+
className: cn("mz-panel mz-menu-content", className),
|
|
869
|
+
...props
|
|
870
|
+
}
|
|
871
|
+
);
|
|
872
|
+
}
|
|
694
873
|
function Tabs({ className, ...props }) {
|
|
695
874
|
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tabs.Root, { "data-slot": "tabs", className: cn("mz-tabs", className), ...props });
|
|
696
875
|
}
|
|
697
|
-
function TabsList({
|
|
876
|
+
function TabsList({ overflow = "wrap", overflowLabel, ...props }) {
|
|
877
|
+
if (overflow === "menu") {
|
|
878
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TabsListWithMenu, { overflowLabel, ...props });
|
|
879
|
+
}
|
|
880
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PlainTabsList, { overflow, ...props });
|
|
881
|
+
}
|
|
882
|
+
function PlainTabsList({
|
|
698
883
|
className,
|
|
699
884
|
variant = "default",
|
|
700
885
|
tone,
|
|
886
|
+
overflow = "wrap",
|
|
701
887
|
...props
|
|
702
888
|
}) {
|
|
703
889
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -706,11 +892,146 @@ function TabsList({
|
|
|
706
892
|
"data-slot": "tabs-list",
|
|
707
893
|
"data-variant": variant,
|
|
708
894
|
"data-tone": tone,
|
|
709
|
-
|
|
895
|
+
"data-overflow": overflow,
|
|
896
|
+
className: cn(
|
|
897
|
+
"mz-tabs-list",
|
|
898
|
+
variant === "line" && "mz-tabs-list--line",
|
|
899
|
+
overflow === "scroll" && "mz-tabs-list--scroll",
|
|
900
|
+
className
|
|
901
|
+
),
|
|
710
902
|
...props
|
|
711
903
|
}
|
|
712
904
|
);
|
|
713
905
|
}
|
|
906
|
+
function TabsListWithMenu({
|
|
907
|
+
className,
|
|
908
|
+
variant = "default",
|
|
909
|
+
tone,
|
|
910
|
+
overflowLabel = "More",
|
|
911
|
+
children,
|
|
912
|
+
...props
|
|
913
|
+
}) {
|
|
914
|
+
const items = React48__namespace.useMemo(
|
|
915
|
+
() => React48__namespace.Children.toArray(children).filter(React48__namespace.isValidElement),
|
|
916
|
+
[children]
|
|
917
|
+
);
|
|
918
|
+
const containerRef = React48__namespace.useRef(null);
|
|
919
|
+
const triggerRefs = React48__namespace.useRef([]);
|
|
920
|
+
const mirrorRefs = React48__namespace.useRef([]);
|
|
921
|
+
const [containerWidth, setContainerWidth] = React48__namespace.useState(0);
|
|
922
|
+
const [widths, setWidths] = React48__namespace.useState([]);
|
|
923
|
+
React48__namespace.useEffect(() => {
|
|
924
|
+
const el = containerRef.current;
|
|
925
|
+
if (!el) return;
|
|
926
|
+
setContainerWidth(el.getBoundingClientRect().width);
|
|
927
|
+
const observer = new ResizeObserver((entries) => {
|
|
928
|
+
const entry = entries[0];
|
|
929
|
+
if (entry) setContainerWidth(entry.contentRect.width);
|
|
930
|
+
});
|
|
931
|
+
observer.observe(el);
|
|
932
|
+
return () => observer.disconnect();
|
|
933
|
+
}, []);
|
|
934
|
+
React48__namespace.useLayoutEffect(() => {
|
|
935
|
+
const measured = mirrorRefs.current.map((el) => el ? Math.ceil(el.getBoundingClientRect().width) : 0);
|
|
936
|
+
setWidths(
|
|
937
|
+
(prev) => prev.length === measured.length && prev.every((w, i) => w === measured[i]) ? prev : measured
|
|
938
|
+
);
|
|
939
|
+
}, [items]);
|
|
940
|
+
const visibleCount = React48__namespace.useMemo(() => {
|
|
941
|
+
if (!containerWidth || widths.length !== items.length) return items.length;
|
|
942
|
+
const total = widths.reduce((sum, w) => sum + w, 0);
|
|
943
|
+
if (total <= containerWidth) return items.length;
|
|
944
|
+
let used = 0;
|
|
945
|
+
let count = 0;
|
|
946
|
+
for (const width of widths) {
|
|
947
|
+
if (used + width + OVERFLOW_BUTTON_WIDTH > containerWidth) break;
|
|
948
|
+
used += width;
|
|
949
|
+
count++;
|
|
950
|
+
}
|
|
951
|
+
return count;
|
|
952
|
+
}, [containerWidth, widths, items.length]);
|
|
953
|
+
const hidden = items.slice(visibleCount);
|
|
954
|
+
const activeIsHidden = hidden.some(
|
|
955
|
+
(_, i) => triggerRefs.current[visibleCount + i]?.dataset.state === "active"
|
|
956
|
+
);
|
|
957
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "mz-tabs-list-wrap", children: [
|
|
958
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-tabs-list__mirror", "aria-hidden": "true", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
959
|
+
"span",
|
|
960
|
+
{
|
|
961
|
+
className: "mz-tabs-trigger",
|
|
962
|
+
ref: (el) => {
|
|
963
|
+
mirrorRefs.current[i] = el;
|
|
964
|
+
},
|
|
965
|
+
children: item.props.children
|
|
966
|
+
},
|
|
967
|
+
i
|
|
968
|
+
)) }),
|
|
969
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
970
|
+
radixUi.Tabs.List,
|
|
971
|
+
{
|
|
972
|
+
"data-slot": "tabs-list",
|
|
973
|
+
"data-variant": variant,
|
|
974
|
+
"data-tone": tone,
|
|
975
|
+
"data-overflow": "menu",
|
|
976
|
+
className: cn(
|
|
977
|
+
"mz-tabs-list mz-tabs-list--menu",
|
|
978
|
+
variant === "line" && "mz-tabs-list--line",
|
|
979
|
+
className
|
|
980
|
+
),
|
|
981
|
+
...props,
|
|
982
|
+
children: [
|
|
983
|
+
items.map(
|
|
984
|
+
(item, i) => React48__namespace.cloneElement(item, {
|
|
985
|
+
key: i,
|
|
986
|
+
ref: (el) => {
|
|
987
|
+
triggerRefs.current[i] = el;
|
|
988
|
+
},
|
|
989
|
+
style: {
|
|
990
|
+
...item.props.style ?? {},
|
|
991
|
+
...i >= visibleCount ? { display: "none" } : null
|
|
992
|
+
}
|
|
993
|
+
})
|
|
994
|
+
),
|
|
995
|
+
hidden.length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { children: [
|
|
996
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
997
|
+
"button",
|
|
998
|
+
{
|
|
999
|
+
type: "button",
|
|
1000
|
+
"data-slot": "tabs-overflow-trigger",
|
|
1001
|
+
"data-active": activeIsHidden || void 0,
|
|
1002
|
+
className: "mz-tabs-trigger mz-tabs-overflow mz-focusable",
|
|
1003
|
+
"aria-label": `${overflowLabel} (${hidden.length})`,
|
|
1004
|
+
children: [
|
|
1005
|
+
/* @__PURE__ */ jsxRuntime.jsx(EllipsisIcon, { className: "mz-tabs-overflow__icon" }),
|
|
1006
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "mz-tabs-overflow__label", children: [
|
|
1007
|
+
overflowLabel,
|
|
1008
|
+
" (",
|
|
1009
|
+
hidden.length,
|
|
1010
|
+
")"
|
|
1011
|
+
] }),
|
|
1012
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "mz-tabs-overflow__caret" })
|
|
1013
|
+
]
|
|
1014
|
+
}
|
|
1015
|
+
) }),
|
|
1016
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", children: hidden.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1017
|
+
DropdownMenuItem,
|
|
1018
|
+
{
|
|
1019
|
+
onSelect: () => {
|
|
1020
|
+
triggerRefs.current[visibleCount + i]?.dispatchEvent(
|
|
1021
|
+
new MouseEvent("mousedown", { bubbles: true, cancelable: true, button: 0 })
|
|
1022
|
+
);
|
|
1023
|
+
},
|
|
1024
|
+
children: item.props.children
|
|
1025
|
+
},
|
|
1026
|
+
i
|
|
1027
|
+
)) })
|
|
1028
|
+
] }) : null
|
|
1029
|
+
]
|
|
1030
|
+
}
|
|
1031
|
+
)
|
|
1032
|
+
] });
|
|
1033
|
+
}
|
|
1034
|
+
var OVERFLOW_BUTTON_WIDTH = 116;
|
|
714
1035
|
function TabsTrigger({ className, ...props }) {
|
|
715
1036
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
716
1037
|
radixUi.Tabs.Trigger,
|
|
@@ -1101,45 +1422,393 @@ function PopoverDescription({ className, ...props }) {
|
|
|
1101
1422
|
}
|
|
1102
1423
|
);
|
|
1103
1424
|
}
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { "data-slot": "dropdown-menu-portal", ...props });
|
|
1109
|
-
}
|
|
1110
|
-
function DropdownMenuTrigger({
|
|
1425
|
+
var TooltipProviderPresence = React48__namespace.createContext(false);
|
|
1426
|
+
function TooltipProvider({
|
|
1427
|
+
delayDuration = 200,
|
|
1428
|
+
children,
|
|
1111
1429
|
...props
|
|
1112
1430
|
}) {
|
|
1113
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1431
|
+
return /* @__PURE__ */ jsxRuntime.jsx(TooltipProviderPresence.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1432
|
+
radixUi.Tooltip.Provider,
|
|
1433
|
+
{
|
|
1434
|
+
"data-slot": "tooltip-provider",
|
|
1435
|
+
delayDuration,
|
|
1436
|
+
...props,
|
|
1437
|
+
children
|
|
1438
|
+
}
|
|
1439
|
+
) });
|
|
1114
1440
|
}
|
|
1115
|
-
function
|
|
1441
|
+
function Tooltip({ ...props }) {
|
|
1442
|
+
const hasProvider = React48__namespace.useContext(TooltipProviderPresence);
|
|
1443
|
+
const root = /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Root, { "data-slot": "tooltip", ...props });
|
|
1444
|
+
return hasProvider ? root : /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: root });
|
|
1445
|
+
}
|
|
1446
|
+
function TooltipTrigger({ ...props }) {
|
|
1447
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
1448
|
+
}
|
|
1449
|
+
function TooltipContent({
|
|
1116
1450
|
className,
|
|
1117
1451
|
sideOffset = 6,
|
|
1452
|
+
children,
|
|
1118
1453
|
...props
|
|
1119
1454
|
}) {
|
|
1120
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.
|
|
1121
|
-
radixUi.
|
|
1455
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1456
|
+
radixUi.Tooltip.Content,
|
|
1122
1457
|
{
|
|
1123
|
-
"data-slot": "
|
|
1458
|
+
"data-slot": "tooltip-content",
|
|
1124
1459
|
sideOffset,
|
|
1125
|
-
className: cn("mz-
|
|
1126
|
-
...props
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
}
|
|
1130
|
-
|
|
1131
|
-
|
|
1460
|
+
className: cn("mz-tooltip-content", className),
|
|
1461
|
+
...props,
|
|
1462
|
+
children: [
|
|
1463
|
+
children,
|
|
1464
|
+
/* @__PURE__ */ jsxRuntime.jsx(radixUi.Tooltip.Arrow, { className: "mz-tooltip-arrow", width: 10, height: 5 })
|
|
1465
|
+
]
|
|
1466
|
+
}
|
|
1467
|
+
) });
|
|
1132
1468
|
}
|
|
1133
|
-
function
|
|
1469
|
+
function AlertDialog({ ...props }) {
|
|
1470
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Root, { "data-slot": "alert-dialog", ...props });
|
|
1471
|
+
}
|
|
1472
|
+
function AlertDialogTrigger({
|
|
1473
|
+
...props
|
|
1474
|
+
}) {
|
|
1475
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Trigger, { "data-slot": "alert-dialog-trigger", ...props });
|
|
1476
|
+
}
|
|
1477
|
+
function AlertDialogPortal({ ...props }) {
|
|
1478
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.AlertDialog.Portal, { "data-slot": "alert-dialog-portal", ...props });
|
|
1479
|
+
}
|
|
1480
|
+
function AlertDialogOverlay({
|
|
1481
|
+
className,
|
|
1482
|
+
...props
|
|
1483
|
+
}) {
|
|
1484
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1485
|
+
radixUi.AlertDialog.Overlay,
|
|
1486
|
+
{
|
|
1487
|
+
"data-slot": "alert-dialog-overlay",
|
|
1488
|
+
className: cn("mz-dialog-overlay", className),
|
|
1489
|
+
...props
|
|
1490
|
+
}
|
|
1491
|
+
);
|
|
1492
|
+
}
|
|
1493
|
+
function AlertDialogContent({
|
|
1494
|
+
className,
|
|
1495
|
+
...props
|
|
1496
|
+
}) {
|
|
1497
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPortal, { children: [
|
|
1498
|
+
/* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
|
|
1499
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1500
|
+
radixUi.AlertDialog.Content,
|
|
1501
|
+
{
|
|
1502
|
+
"data-slot": "alert-dialog-content",
|
|
1503
|
+
className: cn("mz-panel mz-dialog-content mz-alert-dialog-content", className),
|
|
1504
|
+
...props
|
|
1505
|
+
}
|
|
1506
|
+
)
|
|
1507
|
+
] });
|
|
1508
|
+
}
|
|
1509
|
+
function AlertDialogHeader({ className, ...props }) {
|
|
1510
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "alert-dialog-header", className: cn("mz-dialog-header", className), ...props });
|
|
1511
|
+
}
|
|
1512
|
+
function AlertDialogFooter({ className, ...props }) {
|
|
1513
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "alert-dialog-footer", className: cn("mz-dialog-footer", className), ...props });
|
|
1514
|
+
}
|
|
1515
|
+
function AlertDialogTitle({
|
|
1516
|
+
className,
|
|
1517
|
+
...props
|
|
1518
|
+
}) {
|
|
1519
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1520
|
+
radixUi.AlertDialog.Title,
|
|
1521
|
+
{
|
|
1522
|
+
"data-slot": "alert-dialog-title",
|
|
1523
|
+
className: cn("mz-dialog-title", className),
|
|
1524
|
+
...props
|
|
1525
|
+
}
|
|
1526
|
+
);
|
|
1527
|
+
}
|
|
1528
|
+
function AlertDialogDescription({
|
|
1529
|
+
className,
|
|
1530
|
+
...props
|
|
1531
|
+
}) {
|
|
1532
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1533
|
+
radixUi.AlertDialog.Description,
|
|
1534
|
+
{
|
|
1535
|
+
"data-slot": "alert-dialog-description",
|
|
1536
|
+
className: cn("mz-dialog-description", className),
|
|
1537
|
+
...props
|
|
1538
|
+
}
|
|
1539
|
+
);
|
|
1540
|
+
}
|
|
1541
|
+
function AlertDialogAction({
|
|
1542
|
+
className,
|
|
1543
|
+
variant = "primary",
|
|
1544
|
+
size = "md",
|
|
1545
|
+
tone,
|
|
1546
|
+
...props
|
|
1547
|
+
}) {
|
|
1548
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1549
|
+
radixUi.AlertDialog.Action,
|
|
1550
|
+
{
|
|
1551
|
+
"data-slot": "alert-dialog-action",
|
|
1552
|
+
"data-variant": variant,
|
|
1553
|
+
"data-size": size,
|
|
1554
|
+
"data-tone": tone,
|
|
1555
|
+
className: cn(buttonVariants({ variant, size }), className),
|
|
1556
|
+
...props
|
|
1557
|
+
}
|
|
1558
|
+
);
|
|
1559
|
+
}
|
|
1560
|
+
function AlertDialogCancel({
|
|
1561
|
+
className,
|
|
1562
|
+
variant = "outline",
|
|
1563
|
+
size = "md",
|
|
1564
|
+
tone,
|
|
1565
|
+
...props
|
|
1566
|
+
}) {
|
|
1567
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1568
|
+
radixUi.AlertDialog.Cancel,
|
|
1569
|
+
{
|
|
1570
|
+
"data-slot": "alert-dialog-cancel",
|
|
1571
|
+
"data-variant": variant,
|
|
1572
|
+
"data-size": size,
|
|
1573
|
+
"data-tone": tone,
|
|
1574
|
+
className: cn(buttonVariants({ variant, size }), className),
|
|
1575
|
+
...props
|
|
1576
|
+
}
|
|
1577
|
+
);
|
|
1578
|
+
}
|
|
1579
|
+
function Breadcrumb({ className, ...props }) {
|
|
1580
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1581
|
+
"nav",
|
|
1582
|
+
{
|
|
1583
|
+
"data-slot": "breadcrumb",
|
|
1584
|
+
"aria-label": "breadcrumb",
|
|
1585
|
+
className: cn("mz-breadcrumb", className),
|
|
1586
|
+
...props
|
|
1587
|
+
}
|
|
1588
|
+
);
|
|
1589
|
+
}
|
|
1590
|
+
function BreadcrumbList({ className, ...props }) {
|
|
1591
|
+
return /* @__PURE__ */ jsxRuntime.jsx("ol", { "data-slot": "breadcrumb-list", className: cn("mz-breadcrumb__list", className), ...props });
|
|
1592
|
+
}
|
|
1593
|
+
function BreadcrumbItem({ className, ...props }) {
|
|
1594
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", { "data-slot": "breadcrumb-item", className: cn("mz-breadcrumb__item", className), ...props });
|
|
1595
|
+
}
|
|
1596
|
+
function BreadcrumbLink({
|
|
1597
|
+
className,
|
|
1598
|
+
asChild = false,
|
|
1599
|
+
...props
|
|
1600
|
+
}) {
|
|
1601
|
+
const Comp = asChild ? radixUi.Slot.Root : "a";
|
|
1602
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1603
|
+
Comp,
|
|
1604
|
+
{
|
|
1605
|
+
"data-slot": "breadcrumb-link",
|
|
1606
|
+
className: cn("mz-breadcrumb__link mz-focusable", className),
|
|
1607
|
+
...props
|
|
1608
|
+
}
|
|
1609
|
+
);
|
|
1610
|
+
}
|
|
1611
|
+
function BreadcrumbPage({ className, ...props }) {
|
|
1612
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1613
|
+
"span",
|
|
1614
|
+
{
|
|
1615
|
+
"data-slot": "breadcrumb-page",
|
|
1616
|
+
role: "link",
|
|
1617
|
+
"aria-disabled": "true",
|
|
1618
|
+
"aria-current": "page",
|
|
1619
|
+
className: cn("mz-breadcrumb__page", className),
|
|
1620
|
+
...props
|
|
1621
|
+
}
|
|
1622
|
+
);
|
|
1623
|
+
}
|
|
1624
|
+
function BreadcrumbSeparator({ children, className, ...props }) {
|
|
1625
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1626
|
+
"li",
|
|
1627
|
+
{
|
|
1628
|
+
"data-slot": "breadcrumb-separator",
|
|
1629
|
+
role: "presentation",
|
|
1630
|
+
"aria-hidden": "true",
|
|
1631
|
+
className: cn("mz-breadcrumb__separator", className),
|
|
1632
|
+
...props,
|
|
1633
|
+
children: children ?? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
|
|
1634
|
+
}
|
|
1635
|
+
);
|
|
1636
|
+
}
|
|
1637
|
+
function BreadcrumbEllipsis({
|
|
1638
|
+
className,
|
|
1639
|
+
label = "More",
|
|
1640
|
+
...props
|
|
1641
|
+
}) {
|
|
1642
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1643
|
+
"span",
|
|
1644
|
+
{
|
|
1645
|
+
"data-slot": "breadcrumb-ellipsis",
|
|
1646
|
+
role: "presentation",
|
|
1647
|
+
className: cn("mz-breadcrumb__ellipsis", className),
|
|
1648
|
+
...props,
|
|
1649
|
+
children: [
|
|
1650
|
+
/* @__PURE__ */ jsxRuntime.jsx(EllipsisIcon, {}),
|
|
1651
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-sr-only", children: label })
|
|
1652
|
+
]
|
|
1653
|
+
}
|
|
1654
|
+
);
|
|
1655
|
+
}
|
|
1656
|
+
function Table({
|
|
1657
|
+
className,
|
|
1658
|
+
containerClassName,
|
|
1659
|
+
containerRef,
|
|
1660
|
+
...props
|
|
1661
|
+
}) {
|
|
1662
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1663
|
+
"div",
|
|
1664
|
+
{
|
|
1665
|
+
ref: containerRef,
|
|
1666
|
+
"data-slot": "table-container",
|
|
1667
|
+
className: cn("mz-table-wrap", containerClassName),
|
|
1668
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("table", { "data-slot": "table", className: cn("mz-table", className), ...props })
|
|
1669
|
+
}
|
|
1670
|
+
);
|
|
1671
|
+
}
|
|
1672
|
+
function TableHeader({ className, ...props }) {
|
|
1673
|
+
return /* @__PURE__ */ jsxRuntime.jsx("thead", { "data-slot": "table-header", className: cn("mz-table__head", className), ...props });
|
|
1674
|
+
}
|
|
1675
|
+
function TableBody({ className, ...props }) {
|
|
1676
|
+
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { "data-slot": "table-body", className: cn("mz-table__body", className), ...props });
|
|
1677
|
+
}
|
|
1678
|
+
function TableFooter({ className, ...props }) {
|
|
1679
|
+
return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { "data-slot": "table-footer", className: cn("mz-table__foot", className), ...props });
|
|
1680
|
+
}
|
|
1681
|
+
function TableRow({ className, ...props }) {
|
|
1682
|
+
return /* @__PURE__ */ jsxRuntime.jsx("tr", { "data-slot": "table-row", className: cn("mz-table__row", className), ...props });
|
|
1683
|
+
}
|
|
1684
|
+
function TableHead({ className, ...props }) {
|
|
1685
|
+
return /* @__PURE__ */ jsxRuntime.jsx("th", { "data-slot": "table-head", className: cn("mz-table__th", className), ...props });
|
|
1686
|
+
}
|
|
1687
|
+
function TableCell({ className, ...props }) {
|
|
1688
|
+
return /* @__PURE__ */ jsxRuntime.jsx("td", { "data-slot": "table-cell", className: cn("mz-table__td", className), ...props });
|
|
1689
|
+
}
|
|
1690
|
+
function TableCaption({ className, ...props }) {
|
|
1691
|
+
return /* @__PURE__ */ jsxRuntime.jsx("caption", { "data-slot": "table-caption", className: cn("mz-table__caption", className), ...props });
|
|
1692
|
+
}
|
|
1693
|
+
function ScrollArea({
|
|
1694
|
+
className,
|
|
1695
|
+
children,
|
|
1696
|
+
viewportClassName,
|
|
1697
|
+
viewportRef,
|
|
1698
|
+
...props
|
|
1699
|
+
}) {
|
|
1700
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1701
|
+
radixUi.ScrollArea.Root,
|
|
1702
|
+
{
|
|
1703
|
+
"data-slot": "scroll-area",
|
|
1704
|
+
className: cn("mz-scroll-area", className),
|
|
1705
|
+
...props,
|
|
1706
|
+
children: [
|
|
1707
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1708
|
+
radixUi.ScrollArea.Viewport,
|
|
1709
|
+
{
|
|
1710
|
+
"data-slot": "scroll-area-viewport",
|
|
1711
|
+
ref: viewportRef,
|
|
1712
|
+
className: cn("mz-scroll-area__viewport mz-focusable", viewportClassName),
|
|
1713
|
+
children
|
|
1714
|
+
}
|
|
1715
|
+
),
|
|
1716
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
|
|
1717
|
+
/* @__PURE__ */ jsxRuntime.jsx(radixUi.ScrollArea.Corner, { className: "mz-scroll-area__corner" })
|
|
1718
|
+
]
|
|
1719
|
+
}
|
|
1720
|
+
);
|
|
1721
|
+
}
|
|
1722
|
+
function ScrollBar({
|
|
1723
|
+
className,
|
|
1724
|
+
orientation = "vertical",
|
|
1725
|
+
...props
|
|
1726
|
+
}) {
|
|
1727
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1728
|
+
radixUi.ScrollArea.ScrollAreaScrollbar,
|
|
1729
|
+
{
|
|
1730
|
+
"data-slot": "scroll-area-scrollbar",
|
|
1731
|
+
orientation,
|
|
1732
|
+
className: cn(
|
|
1733
|
+
"mz-scrollbar",
|
|
1734
|
+
orientation === "horizontal" && "mz-scrollbar--horizontal",
|
|
1735
|
+
className
|
|
1736
|
+
),
|
|
1737
|
+
...props,
|
|
1738
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1739
|
+
radixUi.ScrollArea.ScrollAreaThumb,
|
|
1740
|
+
{
|
|
1741
|
+
"data-slot": "scroll-area-thumb",
|
|
1742
|
+
className: "mz-scrollbar__thumb"
|
|
1743
|
+
}
|
|
1744
|
+
)
|
|
1745
|
+
}
|
|
1746
|
+
);
|
|
1747
|
+
}
|
|
1748
|
+
function Menubar({ className, ...props }) {
|
|
1749
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1750
|
+
radixUi.Menubar.Root,
|
|
1751
|
+
{
|
|
1752
|
+
"data-slot": "menubar",
|
|
1753
|
+
className: cn("mz-menubar", className),
|
|
1754
|
+
...props
|
|
1755
|
+
}
|
|
1756
|
+
);
|
|
1757
|
+
}
|
|
1758
|
+
function MenubarMenu({ ...props }) {
|
|
1759
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.Menu, { "data-slot": "menubar-menu", ...props });
|
|
1760
|
+
}
|
|
1761
|
+
function MenubarGroup({ ...props }) {
|
|
1762
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.Group, { "data-slot": "menubar-group", ...props });
|
|
1763
|
+
}
|
|
1764
|
+
function MenubarPortal({ ...props }) {
|
|
1765
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.Portal, { "data-slot": "menubar-portal", ...props });
|
|
1766
|
+
}
|
|
1767
|
+
function MenubarRadioGroup({ ...props }) {
|
|
1768
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.RadioGroup, { "data-slot": "menubar-radio-group", ...props });
|
|
1769
|
+
}
|
|
1770
|
+
function MenubarTrigger({
|
|
1771
|
+
className,
|
|
1772
|
+
...props
|
|
1773
|
+
}) {
|
|
1774
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1775
|
+
radixUi.Menubar.Trigger,
|
|
1776
|
+
{
|
|
1777
|
+
"data-slot": "menubar-trigger",
|
|
1778
|
+
className: cn("mz-menubar__trigger mz-focusable", className),
|
|
1779
|
+
...props
|
|
1780
|
+
}
|
|
1781
|
+
);
|
|
1782
|
+
}
|
|
1783
|
+
function MenubarContent({
|
|
1784
|
+
className,
|
|
1785
|
+
align = "start",
|
|
1786
|
+
alignOffset = -4,
|
|
1787
|
+
sideOffset = 8,
|
|
1788
|
+
...props
|
|
1789
|
+
}) {
|
|
1790
|
+
return /* @__PURE__ */ jsxRuntime.jsx(MenubarPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1791
|
+
radixUi.Menubar.Content,
|
|
1792
|
+
{
|
|
1793
|
+
"data-slot": "menubar-content",
|
|
1794
|
+
align,
|
|
1795
|
+
alignOffset,
|
|
1796
|
+
sideOffset,
|
|
1797
|
+
className: cn("mz-panel mz-menu-content", className),
|
|
1798
|
+
...props
|
|
1799
|
+
}
|
|
1800
|
+
) });
|
|
1801
|
+
}
|
|
1802
|
+
function MenubarItem({
|
|
1134
1803
|
className,
|
|
1135
1804
|
inset,
|
|
1136
1805
|
variant = "default",
|
|
1137
1806
|
...props
|
|
1138
1807
|
}) {
|
|
1139
1808
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1140
|
-
radixUi.
|
|
1809
|
+
radixUi.Menubar.Item,
|
|
1141
1810
|
{
|
|
1142
|
-
"data-slot": "
|
|
1811
|
+
"data-slot": "menubar-item",
|
|
1143
1812
|
"data-inset": inset,
|
|
1144
1813
|
"data-variant": variant,
|
|
1145
1814
|
className: cn(
|
|
@@ -1152,100 +1821,88 @@ function DropdownMenuItem({
|
|
|
1152
1821
|
}
|
|
1153
1822
|
);
|
|
1154
1823
|
}
|
|
1155
|
-
function
|
|
1824
|
+
function MenubarCheckboxItem({
|
|
1156
1825
|
className,
|
|
1157
1826
|
children,
|
|
1158
1827
|
checked,
|
|
1159
1828
|
...props
|
|
1160
1829
|
}) {
|
|
1161
1830
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1162
|
-
radixUi.
|
|
1831
|
+
radixUi.Menubar.CheckboxItem,
|
|
1163
1832
|
{
|
|
1164
|
-
"data-slot": "
|
|
1833
|
+
"data-slot": "menubar-checkbox-item",
|
|
1165
1834
|
className: cn("mz-item", className),
|
|
1166
1835
|
checked,
|
|
1167
1836
|
...props,
|
|
1168
1837
|
children: [
|
|
1169
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.
|
|
1838
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, {}) }) }),
|
|
1170
1839
|
children
|
|
1171
1840
|
]
|
|
1172
1841
|
}
|
|
1173
1842
|
);
|
|
1174
1843
|
}
|
|
1175
|
-
function
|
|
1176
|
-
...props
|
|
1177
|
-
}) {
|
|
1178
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
|
|
1179
|
-
}
|
|
1180
|
-
function DropdownMenuRadioItem({
|
|
1844
|
+
function MenubarRadioItem({
|
|
1181
1845
|
className,
|
|
1182
1846
|
children,
|
|
1183
1847
|
...props
|
|
1184
1848
|
}) {
|
|
1185
1849
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1186
|
-
radixUi.
|
|
1850
|
+
radixUi.Menubar.RadioItem,
|
|
1187
1851
|
{
|
|
1188
|
-
"data-slot": "
|
|
1852
|
+
"data-slot": "menubar-radio-item",
|
|
1189
1853
|
className: cn("mz-item", className),
|
|
1190
1854
|
...props,
|
|
1191
1855
|
children: [
|
|
1192
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.
|
|
1856
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-item__indicator", children: /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.ItemIndicator, { children: /* @__PURE__ */ jsxRuntime.jsx(DotIcon, {}) }) }),
|
|
1193
1857
|
children
|
|
1194
1858
|
]
|
|
1195
1859
|
}
|
|
1196
1860
|
);
|
|
1197
1861
|
}
|
|
1198
|
-
function
|
|
1862
|
+
function MenubarLabel({
|
|
1199
1863
|
className,
|
|
1200
1864
|
inset,
|
|
1201
1865
|
...props
|
|
1202
1866
|
}) {
|
|
1203
1867
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1204
|
-
radixUi.
|
|
1868
|
+
radixUi.Menubar.Label,
|
|
1205
1869
|
{
|
|
1206
|
-
"data-slot": "
|
|
1870
|
+
"data-slot": "menubar-label",
|
|
1207
1871
|
"data-inset": inset,
|
|
1208
1872
|
className: cn("mz-menu-label", inset && "mz-menu-label--inset", className),
|
|
1209
1873
|
...props
|
|
1210
1874
|
}
|
|
1211
1875
|
);
|
|
1212
1876
|
}
|
|
1213
|
-
function
|
|
1877
|
+
function MenubarSeparator({
|
|
1214
1878
|
className,
|
|
1215
1879
|
...props
|
|
1216
1880
|
}) {
|
|
1217
1881
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1218
|
-
radixUi.
|
|
1882
|
+
radixUi.Menubar.Separator,
|
|
1219
1883
|
{
|
|
1220
|
-
"data-slot": "
|
|
1884
|
+
"data-slot": "menubar-separator",
|
|
1221
1885
|
className: cn("mz-menu-separator", className),
|
|
1222
1886
|
...props
|
|
1223
1887
|
}
|
|
1224
1888
|
);
|
|
1225
1889
|
}
|
|
1226
|
-
function
|
|
1227
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1228
|
-
"span",
|
|
1229
|
-
{
|
|
1230
|
-
"data-slot": "dropdown-menu-shortcut",
|
|
1231
|
-
className: cn("mz-menu-shortcut", className),
|
|
1232
|
-
...props
|
|
1233
|
-
}
|
|
1234
|
-
);
|
|
1890
|
+
function MenubarShortcut({ className, ...props }) {
|
|
1891
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "menubar-shortcut", className: cn("mz-menu-shortcut", className), ...props });
|
|
1235
1892
|
}
|
|
1236
|
-
function
|
|
1237
|
-
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.
|
|
1893
|
+
function MenubarSub({ ...props }) {
|
|
1894
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Menubar.Sub, { "data-slot": "menubar-sub", ...props });
|
|
1238
1895
|
}
|
|
1239
|
-
function
|
|
1896
|
+
function MenubarSubTrigger({
|
|
1240
1897
|
className,
|
|
1241
1898
|
inset,
|
|
1242
1899
|
children,
|
|
1243
1900
|
...props
|
|
1244
1901
|
}) {
|
|
1245
1902
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1246
|
-
radixUi.
|
|
1903
|
+
radixUi.Menubar.SubTrigger,
|
|
1247
1904
|
{
|
|
1248
|
-
"data-slot": "
|
|
1905
|
+
"data-slot": "menubar-sub-trigger",
|
|
1249
1906
|
"data-inset": inset,
|
|
1250
1907
|
className: cn(
|
|
1251
1908
|
"mz-item mz-menu-sub-trigger",
|
|
@@ -1260,63 +1917,820 @@ function DropdownMenuSubTrigger({
|
|
|
1260
1917
|
}
|
|
1261
1918
|
);
|
|
1262
1919
|
}
|
|
1263
|
-
function
|
|
1920
|
+
function MenubarSubContent({
|
|
1264
1921
|
className,
|
|
1265
1922
|
...props
|
|
1266
1923
|
}) {
|
|
1267
1924
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1268
|
-
radixUi.
|
|
1925
|
+
radixUi.Menubar.SubContent,
|
|
1269
1926
|
{
|
|
1270
|
-
"data-slot": "
|
|
1927
|
+
"data-slot": "menubar-sub-content",
|
|
1271
1928
|
className: cn("mz-panel mz-menu-content", className),
|
|
1272
1929
|
...props
|
|
1273
1930
|
}
|
|
1274
1931
|
);
|
|
1275
1932
|
}
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
delayDuration = 200,
|
|
1933
|
+
function NavigationMenu({
|
|
1934
|
+
className,
|
|
1279
1935
|
children,
|
|
1936
|
+
viewport = true,
|
|
1280
1937
|
...props
|
|
1281
1938
|
}) {
|
|
1282
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
1283
|
-
radixUi.
|
|
1939
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1940
|
+
radixUi.NavigationMenu.Root,
|
|
1284
1941
|
{
|
|
1285
|
-
"data-slot": "
|
|
1286
|
-
|
|
1942
|
+
"data-slot": "navigation-menu",
|
|
1943
|
+
"data-viewport": viewport,
|
|
1944
|
+
className: cn("mz-navmenu", className),
|
|
1287
1945
|
...props,
|
|
1288
|
-
children
|
|
1946
|
+
children: [
|
|
1947
|
+
children,
|
|
1948
|
+
viewport ? /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuViewport, {}) : null
|
|
1949
|
+
]
|
|
1289
1950
|
}
|
|
1290
|
-
)
|
|
1951
|
+
);
|
|
1291
1952
|
}
|
|
1292
|
-
function
|
|
1293
|
-
|
|
1294
|
-
|
|
1295
|
-
|
|
1953
|
+
function NavigationMenuList({
|
|
1954
|
+
className,
|
|
1955
|
+
...props
|
|
1956
|
+
}) {
|
|
1957
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1958
|
+
radixUi.NavigationMenu.List,
|
|
1959
|
+
{
|
|
1960
|
+
"data-slot": "navigation-menu-list",
|
|
1961
|
+
className: cn("mz-navmenu__list", className),
|
|
1962
|
+
...props
|
|
1963
|
+
}
|
|
1964
|
+
);
|
|
1296
1965
|
}
|
|
1297
|
-
function
|
|
1298
|
-
|
|
1966
|
+
function NavigationMenuItem({
|
|
1967
|
+
className,
|
|
1968
|
+
...props
|
|
1969
|
+
}) {
|
|
1970
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1971
|
+
radixUi.NavigationMenu.Item,
|
|
1972
|
+
{
|
|
1973
|
+
"data-slot": "navigation-menu-item",
|
|
1974
|
+
className: cn("mz-navmenu__item", className),
|
|
1975
|
+
...props
|
|
1976
|
+
}
|
|
1977
|
+
);
|
|
1299
1978
|
}
|
|
1300
|
-
|
|
1979
|
+
var navigationMenuTriggerStyle = classVarianceAuthority.cva("mz-navmenu__trigger mz-focusable");
|
|
1980
|
+
function NavigationMenuTrigger({
|
|
1301
1981
|
className,
|
|
1302
|
-
sideOffset = 6,
|
|
1303
1982
|
children,
|
|
1304
1983
|
...props
|
|
1305
1984
|
}) {
|
|
1306
|
-
return /* @__PURE__ */ jsxRuntime.
|
|
1307
|
-
radixUi.
|
|
1985
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1986
|
+
radixUi.NavigationMenu.Trigger,
|
|
1308
1987
|
{
|
|
1309
|
-
"data-slot": "
|
|
1310
|
-
|
|
1311
|
-
className: cn("mz-tooltip-content", className),
|
|
1988
|
+
"data-slot": "navigation-menu-trigger",
|
|
1989
|
+
className: cn(navigationMenuTriggerStyle(), className),
|
|
1312
1990
|
...props,
|
|
1313
1991
|
children: [
|
|
1314
1992
|
children,
|
|
1315
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1993
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, { className: "mz-navmenu__trigger-icon", "aria-hidden": "true" })
|
|
1994
|
+
]
|
|
1995
|
+
}
|
|
1996
|
+
);
|
|
1997
|
+
}
|
|
1998
|
+
function NavigationMenuContent({
|
|
1999
|
+
className,
|
|
2000
|
+
...props
|
|
2001
|
+
}) {
|
|
2002
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2003
|
+
radixUi.NavigationMenu.Content,
|
|
2004
|
+
{
|
|
2005
|
+
"data-slot": "navigation-menu-content",
|
|
2006
|
+
className: cn("mz-navmenu__content", className),
|
|
2007
|
+
...props
|
|
2008
|
+
}
|
|
2009
|
+
);
|
|
2010
|
+
}
|
|
2011
|
+
function NavigationMenuViewport({
|
|
2012
|
+
className,
|
|
2013
|
+
...props
|
|
2014
|
+
}) {
|
|
2015
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-navmenu__viewport-wrap", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2016
|
+
radixUi.NavigationMenu.Viewport,
|
|
2017
|
+
{
|
|
2018
|
+
"data-slot": "navigation-menu-viewport",
|
|
2019
|
+
className: cn("mz-panel mz-navmenu__viewport", className),
|
|
2020
|
+
...props
|
|
2021
|
+
}
|
|
2022
|
+
) });
|
|
2023
|
+
}
|
|
2024
|
+
function NavigationMenuLink({
|
|
2025
|
+
className,
|
|
2026
|
+
...props
|
|
2027
|
+
}) {
|
|
2028
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2029
|
+
radixUi.NavigationMenu.Link,
|
|
2030
|
+
{
|
|
2031
|
+
"data-slot": "navigation-menu-link",
|
|
2032
|
+
className: cn("mz-navmenu__link mz-focusable", className),
|
|
2033
|
+
...props
|
|
2034
|
+
}
|
|
2035
|
+
);
|
|
2036
|
+
}
|
|
2037
|
+
function NavigationMenuIndicator({
|
|
2038
|
+
className,
|
|
2039
|
+
...props
|
|
2040
|
+
}) {
|
|
2041
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2042
|
+
radixUi.NavigationMenu.Indicator,
|
|
2043
|
+
{
|
|
2044
|
+
"data-slot": "navigation-menu-indicator",
|
|
2045
|
+
className: cn("mz-navmenu__indicator", className),
|
|
2046
|
+
...props,
|
|
2047
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-navmenu__arrow" })
|
|
2048
|
+
}
|
|
2049
|
+
);
|
|
2050
|
+
}
|
|
2051
|
+
var queue = [];
|
|
2052
|
+
var listeners = /* @__PURE__ */ new Set();
|
|
2053
|
+
var counter = 0;
|
|
2054
|
+
function emit() {
|
|
2055
|
+
for (const listener of listeners) listener();
|
|
2056
|
+
}
|
|
2057
|
+
function subscribe(listener) {
|
|
2058
|
+
listeners.add(listener);
|
|
2059
|
+
return () => {
|
|
2060
|
+
listeners.delete(listener);
|
|
2061
|
+
};
|
|
2062
|
+
}
|
|
2063
|
+
var getSnapshot = () => queue;
|
|
2064
|
+
var emptyQueue = [];
|
|
2065
|
+
var getServerSnapshot = () => emptyQueue;
|
|
2066
|
+
function dismissToast(id) {
|
|
2067
|
+
const next = queue.filter((t) => t.id !== id);
|
|
2068
|
+
if (next.length === queue.length) return;
|
|
2069
|
+
queue = next;
|
|
2070
|
+
emit();
|
|
2071
|
+
}
|
|
2072
|
+
function toast(options) {
|
|
2073
|
+
const id = `mz-toast-${++counter}`;
|
|
2074
|
+
queue = [...queue, { ...options, id }].slice(-3);
|
|
2075
|
+
emit();
|
|
2076
|
+
return {
|
|
2077
|
+
id,
|
|
2078
|
+
dismiss: () => dismissToast(id),
|
|
2079
|
+
update: (next) => {
|
|
2080
|
+
queue = queue.map((t) => t.id === id ? { ...t, ...next, id } : t);
|
|
2081
|
+
emit();
|
|
2082
|
+
}
|
|
2083
|
+
};
|
|
2084
|
+
}
|
|
2085
|
+
function dismiss(id) {
|
|
2086
|
+
if (id) return dismissToast(id);
|
|
2087
|
+
if (queue.length === 0) return;
|
|
2088
|
+
queue = [];
|
|
2089
|
+
emit();
|
|
2090
|
+
}
|
|
2091
|
+
function useToast() {
|
|
2092
|
+
const toasts = React48__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
2093
|
+
return { toasts, toast, dismiss };
|
|
2094
|
+
}
|
|
2095
|
+
function ToastProvider({ ...props }) {
|
|
2096
|
+
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Toast.Provider, { ...props });
|
|
2097
|
+
}
|
|
2098
|
+
function ToastViewport({
|
|
2099
|
+
className,
|
|
2100
|
+
...props
|
|
2101
|
+
}) {
|
|
2102
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2103
|
+
radixUi.Toast.Viewport,
|
|
2104
|
+
{
|
|
2105
|
+
"data-slot": "toast-viewport",
|
|
2106
|
+
className: cn("mz-toast-viewport", className),
|
|
2107
|
+
...props
|
|
2108
|
+
}
|
|
2109
|
+
);
|
|
2110
|
+
}
|
|
2111
|
+
function Toast({
|
|
2112
|
+
className,
|
|
2113
|
+
tone,
|
|
2114
|
+
...props
|
|
2115
|
+
}) {
|
|
2116
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2117
|
+
radixUi.Toast.Root,
|
|
2118
|
+
{
|
|
2119
|
+
"data-slot": "toast",
|
|
2120
|
+
"data-tone": tone,
|
|
2121
|
+
className: cn("mz-panel mz-toast", className),
|
|
2122
|
+
...props
|
|
2123
|
+
}
|
|
2124
|
+
);
|
|
2125
|
+
}
|
|
2126
|
+
function ToastTitle({ className, ...props }) {
|
|
2127
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2128
|
+
radixUi.Toast.Title,
|
|
2129
|
+
{
|
|
2130
|
+
"data-slot": "toast-title",
|
|
2131
|
+
className: cn("mz-toast__title", className),
|
|
2132
|
+
...props
|
|
2133
|
+
}
|
|
2134
|
+
);
|
|
2135
|
+
}
|
|
2136
|
+
function ToastDescription({
|
|
2137
|
+
className,
|
|
2138
|
+
...props
|
|
2139
|
+
}) {
|
|
2140
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2141
|
+
radixUi.Toast.Description,
|
|
2142
|
+
{
|
|
2143
|
+
"data-slot": "toast-description",
|
|
2144
|
+
className: cn("mz-toast__description", className),
|
|
2145
|
+
...props
|
|
2146
|
+
}
|
|
2147
|
+
);
|
|
2148
|
+
}
|
|
2149
|
+
function ToastAction({ className, ...props }) {
|
|
2150
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2151
|
+
radixUi.Toast.Action,
|
|
2152
|
+
{
|
|
2153
|
+
"data-slot": "toast-action",
|
|
2154
|
+
className: cn("mz-toast__action mz-focusable", className),
|
|
2155
|
+
...props
|
|
2156
|
+
}
|
|
2157
|
+
);
|
|
2158
|
+
}
|
|
2159
|
+
function ToastClose({
|
|
2160
|
+
className,
|
|
2161
|
+
label = "Close",
|
|
2162
|
+
...props
|
|
2163
|
+
}) {
|
|
2164
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2165
|
+
radixUi.Toast.Close,
|
|
2166
|
+
{
|
|
2167
|
+
"data-slot": "toast-close",
|
|
2168
|
+
className: cn("mz-toast__close mz-focusable", className),
|
|
2169
|
+
...props,
|
|
2170
|
+
children: [
|
|
2171
|
+
/* @__PURE__ */ jsxRuntime.jsx(XIcon, {}),
|
|
2172
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-sr-only", children: label })
|
|
2173
|
+
]
|
|
2174
|
+
}
|
|
2175
|
+
);
|
|
2176
|
+
}
|
|
2177
|
+
function Toaster({
|
|
2178
|
+
duration = 5e3,
|
|
2179
|
+
position = "bottom-right",
|
|
2180
|
+
closeLabel = "Close",
|
|
2181
|
+
hotkey,
|
|
2182
|
+
className
|
|
2183
|
+
}) {
|
|
2184
|
+
const toasts = React48__namespace.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
|
|
2185
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ToastProvider, { duration, swipeDirection: "right", ...hotkey ? { hotkey } : {}, children: [
|
|
2186
|
+
toasts.map(({ id, title, description, tone, action, duration: own, onOpenChange }) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2187
|
+
Toast,
|
|
2188
|
+
{
|
|
2189
|
+
tone,
|
|
2190
|
+
duration: own === Infinity ? 1e3 * 60 * 60 * 24 : own,
|
|
2191
|
+
onOpenChange: (open) => {
|
|
2192
|
+
onOpenChange?.(open);
|
|
2193
|
+
if (!open) dismissToast(id);
|
|
2194
|
+
},
|
|
2195
|
+
children: [
|
|
2196
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-toast__body", children: [
|
|
2197
|
+
title ? /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }) : null,
|
|
2198
|
+
description ? /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description }) : null
|
|
2199
|
+
] }),
|
|
2200
|
+
action,
|
|
2201
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToastClose, { label: closeLabel })
|
|
2202
|
+
]
|
|
2203
|
+
},
|
|
2204
|
+
id
|
|
2205
|
+
)),
|
|
2206
|
+
/* @__PURE__ */ jsxRuntime.jsx(ToastViewport, { className: cn(`mz-toast-viewport--${position}`, className) })
|
|
2207
|
+
] });
|
|
2208
|
+
}
|
|
2209
|
+
|
|
2210
|
+
// src/lib/date.ts
|
|
2211
|
+
function startOfDay(date) {
|
|
2212
|
+
const d = new Date(date);
|
|
2213
|
+
d.setHours(0, 0, 0, 0);
|
|
2214
|
+
return d;
|
|
2215
|
+
}
|
|
2216
|
+
function isSameDay(a, b) {
|
|
2217
|
+
if (!a || !b) return false;
|
|
2218
|
+
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
2219
|
+
}
|
|
2220
|
+
function isSameMonth(a, b) {
|
|
2221
|
+
return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
|
|
2222
|
+
}
|
|
2223
|
+
function startOfMonth(date) {
|
|
2224
|
+
return new Date(date.getFullYear(), date.getMonth(), 1);
|
|
2225
|
+
}
|
|
2226
|
+
function addDays(date, amount) {
|
|
2227
|
+
const d = new Date(date);
|
|
2228
|
+
d.setDate(d.getDate() + amount);
|
|
2229
|
+
return d;
|
|
2230
|
+
}
|
|
2231
|
+
function addMonths(date, amount) {
|
|
2232
|
+
const target = new Date(date.getFullYear(), date.getMonth() + amount, 1);
|
|
2233
|
+
const lastDay = new Date(target.getFullYear(), target.getMonth() + 1, 0).getDate();
|
|
2234
|
+
target.setDate(Math.min(date.getDate(), lastDay));
|
|
2235
|
+
return target;
|
|
2236
|
+
}
|
|
2237
|
+
function differenceInMonths(a, b) {
|
|
2238
|
+
return (a.getFullYear() - b.getFullYear()) * 12 + (a.getMonth() - b.getMonth());
|
|
2239
|
+
}
|
|
2240
|
+
function isBefore(a, b) {
|
|
2241
|
+
return startOfDay(a).getTime() < startOfDay(b).getTime();
|
|
2242
|
+
}
|
|
2243
|
+
function isAfter(a, b) {
|
|
2244
|
+
return startOfDay(a).getTime() > startOfDay(b).getTime();
|
|
2245
|
+
}
|
|
2246
|
+
function isWithin(date, from, to) {
|
|
2247
|
+
const t = startOfDay(date).getTime();
|
|
2248
|
+
return t >= startOfDay(from).getTime() && t <= startOfDay(to).getTime();
|
|
2249
|
+
}
|
|
2250
|
+
var SUNDAY_FIRST = /^(en-US|en-CA|en-AU|en-PH|en-ZA|ja|ko|zh|he|ar|pt-BR)\b/i;
|
|
2251
|
+
function localeWeekStart(locale) {
|
|
2252
|
+
if (!locale) return 1;
|
|
2253
|
+
try {
|
|
2254
|
+
const info = new Intl.Locale(locale).getWeekInfo?.();
|
|
2255
|
+
if (info) return info.firstDay % 7;
|
|
2256
|
+
} catch {
|
|
2257
|
+
}
|
|
2258
|
+
return SUNDAY_FIRST.test(locale) ? 0 : 1;
|
|
2259
|
+
}
|
|
2260
|
+
function monthGrid(month, weekStartsOn) {
|
|
2261
|
+
const first = startOfMonth(month);
|
|
2262
|
+
const lead = (first.getDay() - weekStartsOn + 7) % 7;
|
|
2263
|
+
const start = addDays(first, -lead);
|
|
2264
|
+
return Array.from({ length: 42 }, (_, i) => addDays(start, i));
|
|
2265
|
+
}
|
|
2266
|
+
function isoWeek(date) {
|
|
2267
|
+
const d = startOfDay(date);
|
|
2268
|
+
d.setDate(d.getDate() + 3 - (d.getDay() + 6) % 7);
|
|
2269
|
+
const firstThursday = new Date(d.getFullYear(), 0, 4);
|
|
2270
|
+
firstThursday.setDate(firstThursday.getDate() + 3 - (firstThursday.getDay() + 6) % 7);
|
|
2271
|
+
return 1 + Math.round((d.getTime() - firstThursday.getTime()) / (7 * 864e5));
|
|
2272
|
+
}
|
|
2273
|
+
var defaultLabels = {
|
|
2274
|
+
previousMonth: "Previous month",
|
|
2275
|
+
nextMonth: "Next month",
|
|
2276
|
+
month: "Month",
|
|
2277
|
+
year: "Year",
|
|
2278
|
+
weekNumber: "Week"
|
|
2279
|
+
};
|
|
2280
|
+
function matches(date, matcher) {
|
|
2281
|
+
if (!matcher) return false;
|
|
2282
|
+
if (typeof matcher === "function") return matcher(date);
|
|
2283
|
+
if (matcher instanceof Date) return isSameDay(date, matcher);
|
|
2284
|
+
if (Array.isArray(matcher)) return matcher.some((d) => isSameDay(date, d));
|
|
2285
|
+
if ("from" in matcher && matcher.from && matcher.to) return isWithin(date, matcher.from, matcher.to);
|
|
2286
|
+
const bounds = matcher;
|
|
2287
|
+
if (bounds.before && isBefore(date, bounds.before)) return true;
|
|
2288
|
+
if (bounds.after && isAfter(date, bounds.after)) return true;
|
|
2289
|
+
return false;
|
|
2290
|
+
}
|
|
2291
|
+
function Calendar({
|
|
2292
|
+
month: monthProp,
|
|
2293
|
+
defaultMonth,
|
|
2294
|
+
onMonthChange,
|
|
2295
|
+
numberOfMonths = 1,
|
|
2296
|
+
locale,
|
|
2297
|
+
weekStartsOn,
|
|
2298
|
+
disabled,
|
|
2299
|
+
fromDate,
|
|
2300
|
+
toDate,
|
|
2301
|
+
showOutsideDays = true,
|
|
2302
|
+
showWeekNumbers = false,
|
|
2303
|
+
captionLayout = "label",
|
|
2304
|
+
fromYear,
|
|
2305
|
+
toYear,
|
|
2306
|
+
today: todayProp,
|
|
2307
|
+
labels: labelsProp,
|
|
2308
|
+
className,
|
|
2309
|
+
id,
|
|
2310
|
+
...selection
|
|
2311
|
+
}) {
|
|
2312
|
+
const labels = { ...defaultLabels, ...labelsProp };
|
|
2313
|
+
const today = React48__namespace.useMemo(() => startOfDay(todayProp ?? /* @__PURE__ */ new Date()), [todayProp]);
|
|
2314
|
+
const firstDayOfWeek = weekStartsOn ?? localeWeekStart(locale);
|
|
2315
|
+
const initialMonth = React48__namespace.useMemo(
|
|
2316
|
+
() => startOfMonth(monthProp ?? defaultMonth ?? selectedAnchor(selection) ?? today),
|
|
2317
|
+
// Only the mount value matters; afterwards the month is state or a prop.
|
|
2318
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
2319
|
+
[]
|
|
2320
|
+
);
|
|
2321
|
+
const [monthState, setMonthState] = React48__namespace.useState(initialMonth);
|
|
2322
|
+
const month = monthProp ? startOfMonth(monthProp) : monthState;
|
|
2323
|
+
const goToMonth = React48__namespace.useCallback(
|
|
2324
|
+
(next) => {
|
|
2325
|
+
const clamped = clampMonth(next, fromDate, toDate);
|
|
2326
|
+
if (!monthProp) setMonthState(clamped);
|
|
2327
|
+
onMonthChange?.(clamped);
|
|
2328
|
+
},
|
|
2329
|
+
[fromDate, toDate, monthProp, onMonthChange]
|
|
2330
|
+
);
|
|
2331
|
+
const monthCount = Math.max(1, numberOfMonths);
|
|
2332
|
+
const months = React48__namespace.useMemo(
|
|
2333
|
+
() => Array.from({ length: monthCount }, (_, i) => addMonths(month, i)),
|
|
2334
|
+
[month, monthCount]
|
|
2335
|
+
);
|
|
2336
|
+
const leadMonth = month;
|
|
2337
|
+
const lastMonth = addMonths(month, monthCount - 1);
|
|
2338
|
+
const canGoBack = !fromDate || differenceInMonths(month, startOfMonth(fromDate)) > 0;
|
|
2339
|
+
const canGoForward = !toDate || differenceInMonths(startOfMonth(toDate), lastMonth) > 0;
|
|
2340
|
+
const isDisabled = React48__namespace.useCallback(
|
|
2341
|
+
(date) => {
|
|
2342
|
+
if (fromDate && isBefore(date, fromDate)) return true;
|
|
2343
|
+
if (toDate && isAfter(date, toDate)) return true;
|
|
2344
|
+
return matches(date, disabled);
|
|
2345
|
+
},
|
|
2346
|
+
[disabled, fromDate, toDate]
|
|
2347
|
+
);
|
|
2348
|
+
const [previewDay, setPreviewDay] = React48__namespace.useState();
|
|
2349
|
+
const handleSelect = (date) => {
|
|
2350
|
+
if (isDisabled(date)) return;
|
|
2351
|
+
if (selection.mode === "multiple") {
|
|
2352
|
+
const current = selection.selected ?? [];
|
|
2353
|
+
const next = current.some((d) => isSameDay(d, date)) ? current.filter((d) => !isSameDay(d, date)) : [...current, date];
|
|
2354
|
+
selection.onSelect?.(next);
|
|
2355
|
+
return;
|
|
2356
|
+
}
|
|
2357
|
+
if (selection.mode === "range") {
|
|
2358
|
+
const current = selection.selected;
|
|
2359
|
+
if (current?.from && !current.to) {
|
|
2360
|
+
const [from, to] = isBefore(date, current.from) ? [date, current.from] : [current.from, date];
|
|
2361
|
+
selection.onSelect?.({ from, to });
|
|
2362
|
+
setPreviewDay(void 0);
|
|
2363
|
+
} else {
|
|
2364
|
+
selection.onSelect?.({ from: date, to: void 0 });
|
|
2365
|
+
}
|
|
2366
|
+
return;
|
|
2367
|
+
}
|
|
2368
|
+
const single = selection;
|
|
2369
|
+
const isSame = isSameDay(single.selected, date);
|
|
2370
|
+
single.onSelect?.(isSame && !single.required ? void 0 : date);
|
|
2371
|
+
};
|
|
2372
|
+
const selectionStateOf = (date) => {
|
|
2373
|
+
if (selection.mode === "multiple") {
|
|
2374
|
+
return { selected: (selection.selected ?? []).some((d) => isSameDay(d, date)) };
|
|
2375
|
+
}
|
|
2376
|
+
if (selection.mode === "range") {
|
|
2377
|
+
const { from, to } = selection.selected ?? {};
|
|
2378
|
+
const tentative = Boolean(from && !to && previewDay);
|
|
2379
|
+
const other = to ?? (tentative ? previewDay : void 0);
|
|
2380
|
+
const [start, end] = from && other && isBefore(other, from) ? [other, from] : [from, other];
|
|
2381
|
+
const isStart = isSameDay(date, start);
|
|
2382
|
+
const isEnd = Boolean(end) && isSameDay(date, end);
|
|
2383
|
+
const inside = Boolean(start && end) && !isStart && !isEnd && isWithin(date, start, end);
|
|
2384
|
+
return {
|
|
2385
|
+
// Only a committed end reads as selected; the hovered one is a preview.
|
|
2386
|
+
selected: isSameDay(date, from) || isSameDay(date, to),
|
|
2387
|
+
rangeStart: isStart,
|
|
2388
|
+
rangeEnd: isEnd,
|
|
2389
|
+
rangeMiddle: inside,
|
|
2390
|
+
preview: tentative && (inside || (isStart || isEnd) && !isSameDay(date, from))
|
|
2391
|
+
};
|
|
2392
|
+
}
|
|
2393
|
+
return { selected: isSameDay(selection.selected, date) };
|
|
2394
|
+
};
|
|
2395
|
+
const rootRef = React48__namespace.useRef(null);
|
|
2396
|
+
const [focusedDay, setFocusedDay] = React48__namespace.useState();
|
|
2397
|
+
const tabbableDay = React48__namespace.useMemo(() => {
|
|
2398
|
+
const candidates = [focusedDay, selectedAnchor(selection), today].filter(Boolean);
|
|
2399
|
+
const visible = candidates.find((d) => months.some((m) => isSameMonth(m, d)));
|
|
2400
|
+
return visible ?? startOfMonth(leadMonth);
|
|
2401
|
+
}, [focusedDay, selection, today, months, leadMonth]);
|
|
2402
|
+
React48__namespace.useEffect(() => {
|
|
2403
|
+
if (!focusedDay || !rootRef.current) return;
|
|
2404
|
+
if (!rootRef.current.contains(document.activeElement)) return;
|
|
2405
|
+
const target = rootRef.current.querySelector(
|
|
2406
|
+
`[data-day="${dayKey(focusedDay)}"]`
|
|
2407
|
+
);
|
|
2408
|
+
target?.focus();
|
|
2409
|
+
}, [focusedDay, month]);
|
|
2410
|
+
const moveFocus = (from, delta) => {
|
|
2411
|
+
const next = addDays(from, delta);
|
|
2412
|
+
setFocusedDay(next);
|
|
2413
|
+
if (!months.some((m) => isSameMonth(m, next))) {
|
|
2414
|
+
goToMonth(isBefore(next, leadMonth) ? next : addMonths(next, -(monthCount - 1)));
|
|
2415
|
+
}
|
|
2416
|
+
};
|
|
2417
|
+
const onKeyDown = (event, date) => {
|
|
2418
|
+
const step = {
|
|
2419
|
+
ArrowLeft: -1,
|
|
2420
|
+
ArrowRight: 1,
|
|
2421
|
+
ArrowUp: -7,
|
|
2422
|
+
ArrowDown: 7
|
|
2423
|
+
};
|
|
2424
|
+
const delta = step[event.key];
|
|
2425
|
+
if (delta !== void 0) {
|
|
2426
|
+
event.preventDefault();
|
|
2427
|
+
moveFocus(date, delta);
|
|
2428
|
+
return;
|
|
2429
|
+
}
|
|
2430
|
+
if (event.key === "Home" || event.key === "End") {
|
|
2431
|
+
event.preventDefault();
|
|
2432
|
+
const offset = (date.getDay() - firstDayOfWeek + 7) % 7;
|
|
2433
|
+
moveFocus(date, event.key === "Home" ? -offset : 6 - offset);
|
|
2434
|
+
return;
|
|
2435
|
+
}
|
|
2436
|
+
if (event.key === "PageUp" || event.key === "PageDown") {
|
|
2437
|
+
event.preventDefault();
|
|
2438
|
+
const next = addMonths(date, event.key === "PageUp" ? -1 : 1);
|
|
2439
|
+
setFocusedDay(next);
|
|
2440
|
+
goToMonth(next);
|
|
2441
|
+
}
|
|
2442
|
+
};
|
|
2443
|
+
const fmt = React48__namespace.useMemo(
|
|
2444
|
+
() => ({
|
|
2445
|
+
caption: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }),
|
|
2446
|
+
monthName: new Intl.DateTimeFormat(locale, { month: "long" }),
|
|
2447
|
+
weekday: new Intl.DateTimeFormat(locale, { weekday: "short" }),
|
|
2448
|
+
weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long" }),
|
|
2449
|
+
day: new Intl.DateTimeFormat(locale, {
|
|
2450
|
+
weekday: "long",
|
|
2451
|
+
day: "numeric",
|
|
2452
|
+
month: "long",
|
|
2453
|
+
year: "numeric"
|
|
2454
|
+
})
|
|
2455
|
+
}),
|
|
2456
|
+
[locale]
|
|
2457
|
+
);
|
|
2458
|
+
const weekdays = React48__namespace.useMemo(() => {
|
|
2459
|
+
const sunday = new Date(2021, 7, 1);
|
|
2460
|
+
return Array.from({ length: 7 }, (_, i) => addDays(sunday, (firstDayOfWeek + i) % 7));
|
|
2461
|
+
}, [firstDayOfWeek]);
|
|
2462
|
+
const years = React48__namespace.useMemo(() => {
|
|
2463
|
+
const start = fromYear ?? (fromDate ? fromDate.getFullYear() : today.getFullYear() - 10);
|
|
2464
|
+
const end = toYear ?? (toDate ? toDate.getFullYear() : today.getFullYear() + 10);
|
|
2465
|
+
return Array.from({ length: Math.max(1, end - start + 1) }, (_, i) => start + i);
|
|
2466
|
+
}, [fromYear, toYear, fromDate, toDate, today]);
|
|
2467
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2468
|
+
"div",
|
|
2469
|
+
{
|
|
2470
|
+
ref: rootRef,
|
|
2471
|
+
id,
|
|
2472
|
+
"data-slot": "calendar",
|
|
2473
|
+
className: cn("mz-calendar", className),
|
|
2474
|
+
onMouseLeave: () => setPreviewDay(void 0),
|
|
2475
|
+
children: [
|
|
2476
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-calendar__nav", children: [
|
|
2477
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2478
|
+
"button",
|
|
2479
|
+
{
|
|
2480
|
+
type: "button",
|
|
2481
|
+
"data-slot": "calendar-previous",
|
|
2482
|
+
className: "mz-calendar__nav-button mz-focusable",
|
|
2483
|
+
"aria-label": labels.previousMonth,
|
|
2484
|
+
disabled: !canGoBack,
|
|
2485
|
+
onClick: () => goToMonth(addMonths(month, -1)),
|
|
2486
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
|
|
2487
|
+
}
|
|
2488
|
+
),
|
|
2489
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2490
|
+
"button",
|
|
2491
|
+
{
|
|
2492
|
+
type: "button",
|
|
2493
|
+
"data-slot": "calendar-next",
|
|
2494
|
+
className: "mz-calendar__nav-button mz-focusable",
|
|
2495
|
+
"aria-label": labels.nextMonth,
|
|
2496
|
+
disabled: !canGoForward,
|
|
2497
|
+
onClick: () => goToMonth(addMonths(month, 1)),
|
|
2498
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
|
|
2499
|
+
}
|
|
2500
|
+
)
|
|
2501
|
+
] }),
|
|
2502
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-calendar__months", children: months.map((displayed, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-calendar__month", children: [
|
|
2503
|
+
captionLayout === "dropdown" && index === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-calendar__caption mz-calendar__caption--dropdown", children: [
|
|
2504
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2505
|
+
"select",
|
|
2506
|
+
{
|
|
2507
|
+
className: "mz-calendar__dropdown mz-focusable",
|
|
2508
|
+
"aria-label": labels.month,
|
|
2509
|
+
value: displayed.getMonth(),
|
|
2510
|
+
onChange: (e) => goToMonth(new Date(displayed.getFullYear(), Number(e.target.value), 1)),
|
|
2511
|
+
children: Array.from({ length: 12 }, (_, m) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: m, children: fmt.monthName.format(new Date(2021, m, 1)) }, m))
|
|
2512
|
+
}
|
|
2513
|
+
),
|
|
2514
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2515
|
+
"select",
|
|
2516
|
+
{
|
|
2517
|
+
className: "mz-calendar__dropdown mz-focusable",
|
|
2518
|
+
"aria-label": labels.year,
|
|
2519
|
+
value: displayed.getFullYear(),
|
|
2520
|
+
onChange: (e) => goToMonth(new Date(Number(e.target.value), displayed.getMonth(), 1)),
|
|
2521
|
+
children: years.map((y) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: y, children: y }, y))
|
|
2522
|
+
}
|
|
2523
|
+
)
|
|
2524
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-calendar__caption", "aria-live": "polite", children: fmt.caption.format(displayed) }),
|
|
2525
|
+
/* @__PURE__ */ jsxRuntime.jsxs("table", { className: "mz-calendar__grid", role: "grid", children: [
|
|
2526
|
+
/* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "mz-calendar__weekdays", children: [
|
|
2527
|
+
showWeekNumbers ? /* @__PURE__ */ jsxRuntime.jsx("th", { scope: "col", className: "mz-calendar__weeknum-head", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-sr-only", children: labels.weekNumber }) }) : null,
|
|
2528
|
+
weekdays.map((d) => /* @__PURE__ */ jsxRuntime.jsxs("th", { scope: "col", className: "mz-calendar__weekday", children: [
|
|
2529
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: fmt.weekday.format(d) }),
|
|
2530
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-sr-only", children: fmt.weekdayLong.format(d) })
|
|
2531
|
+
] }, d.getDay()))
|
|
2532
|
+
] }) }),
|
|
2533
|
+
/* @__PURE__ */ jsxRuntime.jsx("tbody", { children: chunk(monthGrid(displayed, firstDayOfWeek), 7).map((week, weekIndex) => {
|
|
2534
|
+
const weekStart = week[0];
|
|
2535
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "mz-calendar__week", children: [
|
|
2536
|
+
showWeekNumbers && weekStart ? /* @__PURE__ */ jsxRuntime.jsx("td", { className: "mz-calendar__weeknum", children: isoWeek(weekStart) }) : null,
|
|
2537
|
+
week.map((date) => {
|
|
2538
|
+
const outside = !isSameMonth(date, displayed);
|
|
2539
|
+
const state = selectionStateOf(date);
|
|
2540
|
+
const dayDisabled = isDisabled(date);
|
|
2541
|
+
if (outside && !showOutsideDays) {
|
|
2542
|
+
return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "mz-calendar__cell" }, date.getTime());
|
|
2543
|
+
}
|
|
2544
|
+
return /* @__PURE__ */ jsxRuntime.jsx("td", { className: "mz-calendar__cell", role: "gridcell", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2545
|
+
"button",
|
|
2546
|
+
{
|
|
2547
|
+
type: "button",
|
|
2548
|
+
"data-slot": "calendar-day",
|
|
2549
|
+
"data-day": dayKey(date),
|
|
2550
|
+
"data-outside": outside || void 0,
|
|
2551
|
+
"data-today": isSameDay(date, today) || void 0,
|
|
2552
|
+
"data-selected": state.selected || void 0,
|
|
2553
|
+
"data-range-start": state.rangeStart || void 0,
|
|
2554
|
+
"data-range-end": state.rangeEnd || void 0,
|
|
2555
|
+
"data-range-middle": state.rangeMiddle || void 0,
|
|
2556
|
+
"data-preview": state.preview || void 0,
|
|
2557
|
+
className: "mz-calendar__day mz-focusable",
|
|
2558
|
+
tabIndex: isSameDay(date, tabbableDay) ? 0 : -1,
|
|
2559
|
+
"aria-selected": state.selected || void 0,
|
|
2560
|
+
"aria-label": fmt.day.format(date),
|
|
2561
|
+
disabled: dayDisabled,
|
|
2562
|
+
onClick: () => handleSelect(date),
|
|
2563
|
+
onFocus: () => setFocusedDay(date),
|
|
2564
|
+
onMouseEnter: () => setPreviewDay(date),
|
|
2565
|
+
onKeyDown: (e) => onKeyDown(e, date),
|
|
2566
|
+
children: date.getDate()
|
|
2567
|
+
}
|
|
2568
|
+
) }, date.getTime());
|
|
2569
|
+
})
|
|
2570
|
+
] }, weekStart ? weekStart.getTime() : weekIndex);
|
|
2571
|
+
}) })
|
|
2572
|
+
] })
|
|
2573
|
+
] }, displayed.getTime())) })
|
|
2574
|
+
]
|
|
2575
|
+
}
|
|
2576
|
+
);
|
|
2577
|
+
}
|
|
2578
|
+
function dayKey(date) {
|
|
2579
|
+
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
|
|
2580
|
+
}
|
|
2581
|
+
function chunk(items, size) {
|
|
2582
|
+
const out = [];
|
|
2583
|
+
for (let i = 0; i < items.length; i += size) out.push(items.slice(i, i + size));
|
|
2584
|
+
return out;
|
|
2585
|
+
}
|
|
2586
|
+
function selectedAnchor(selection) {
|
|
2587
|
+
if (selection.mode === "multiple") return selection.selected?.[0];
|
|
2588
|
+
if (selection.mode === "range") return selection.selected?.from;
|
|
2589
|
+
return selection.selected;
|
|
2590
|
+
}
|
|
2591
|
+
function clampMonth(month, fromDate, toDate) {
|
|
2592
|
+
const m = startOfMonth(month);
|
|
2593
|
+
if (fromDate && differenceInMonths(m, startOfMonth(fromDate)) < 0) return startOfMonth(fromDate);
|
|
2594
|
+
if (toDate && differenceInMonths(m, startOfMonth(toDate)) > 0) return startOfMonth(toDate);
|
|
2595
|
+
return m;
|
|
2596
|
+
}
|
|
2597
|
+
var ChartContext = React48__namespace.createContext(null);
|
|
2598
|
+
function useChart() {
|
|
2599
|
+
const context = React48__namespace.useContext(ChartContext);
|
|
2600
|
+
if (!context) throw new Error("useChart must be used inside a <ChartContainer>");
|
|
2601
|
+
return context;
|
|
2602
|
+
}
|
|
2603
|
+
function ChartStyle({ id, config }) {
|
|
2604
|
+
const entries = Object.entries(config).filter(([, item]) => item.theme || item.color);
|
|
2605
|
+
if (entries.length === 0) return null;
|
|
2606
|
+
const block = (theme) => entries.map(([key, item]) => {
|
|
2607
|
+
const color = item.theme ? item.theme[theme] : item.color;
|
|
2608
|
+
return color && isSafeColor(color) ? ` --color-${cssIdent(key)}: ${color};` : null;
|
|
2609
|
+
}).filter(Boolean).join("\n");
|
|
2610
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2611
|
+
"style",
|
|
2612
|
+
{
|
|
2613
|
+
dangerouslySetInnerHTML: {
|
|
2614
|
+
__html: [
|
|
2615
|
+
`[data-chart='${id}'] {
|
|
2616
|
+
${block("light")}
|
|
2617
|
+
}`,
|
|
2618
|
+
`[data-mz-theme='dark'] [data-chart='${id}'],`,
|
|
2619
|
+
`.mz-theme-dark [data-chart='${id}'],`,
|
|
2620
|
+
`.dark [data-chart='${id}'] {
|
|
2621
|
+
${block("dark")}
|
|
2622
|
+
}`
|
|
2623
|
+
].join("\n")
|
|
2624
|
+
}
|
|
2625
|
+
}
|
|
2626
|
+
);
|
|
2627
|
+
}
|
|
2628
|
+
function ChartContainer({
|
|
2629
|
+
id,
|
|
2630
|
+
className,
|
|
2631
|
+
children,
|
|
2632
|
+
config,
|
|
2633
|
+
...props
|
|
2634
|
+
}) {
|
|
2635
|
+
const uid = React48__namespace.useId();
|
|
2636
|
+
const chartId = `mz-chart-${(id ?? uid).replace(/:/g, "")}`;
|
|
2637
|
+
return /* @__PURE__ */ jsxRuntime.jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2638
|
+
"div",
|
|
2639
|
+
{
|
|
2640
|
+
"data-slot": "chart",
|
|
2641
|
+
"data-chart": chartId,
|
|
2642
|
+
className: cn("mz-chart", className),
|
|
2643
|
+
...props,
|
|
2644
|
+
children: [
|
|
2645
|
+
/* @__PURE__ */ jsxRuntime.jsx(ChartStyle, { id: chartId, config }),
|
|
2646
|
+
children
|
|
1316
2647
|
]
|
|
1317
2648
|
}
|
|
1318
2649
|
) });
|
|
1319
2650
|
}
|
|
2651
|
+
function configKeyOf(item, explicitKey, fallback) {
|
|
2652
|
+
if (!explicitKey) return fallback;
|
|
2653
|
+
const fromItem = item[explicitKey];
|
|
2654
|
+
if (typeof fromItem === "string") return fromItem;
|
|
2655
|
+
const fromDatum = item.payload?.[explicitKey];
|
|
2656
|
+
if (typeof fromDatum === "string") return fromDatum;
|
|
2657
|
+
return explicitKey;
|
|
2658
|
+
}
|
|
2659
|
+
function ChartTooltipContent({
|
|
2660
|
+
active,
|
|
2661
|
+
payload = [],
|
|
2662
|
+
label,
|
|
2663
|
+
labelFormatter,
|
|
2664
|
+
formatter,
|
|
2665
|
+
hideLabel = false,
|
|
2666
|
+
hideIndicator = false,
|
|
2667
|
+
indicator = "dot",
|
|
2668
|
+
nameKey,
|
|
2669
|
+
labelKey,
|
|
2670
|
+
className
|
|
2671
|
+
}) {
|
|
2672
|
+
const { config } = useChart();
|
|
2673
|
+
if (!active || payload.length === 0) return null;
|
|
2674
|
+
const first = payload[0];
|
|
2675
|
+
const labelled = labelKey && first ? config[configKeyOf(first, labelKey, labelKey)]?.label : void 0;
|
|
2676
|
+
const rawLabel = labelled ?? (typeof label === "string" ? config[label]?.label ?? label : label);
|
|
2677
|
+
const heading = labelFormatter ? labelFormatter(rawLabel, payload) : rawLabel;
|
|
2678
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "chart-tooltip", className: cn("mz-panel mz-chart__tooltip", className), children: [
|
|
2679
|
+
!hideLabel && heading != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-chart__tooltip-label", children: heading }) : null,
|
|
2680
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "mz-chart__tooltip-items", children: payload.map((item, index) => {
|
|
2681
|
+
const key = configKeyOf(item, nameKey, String(item.dataKey ?? item.name ?? index));
|
|
2682
|
+
const series = config[key];
|
|
2683
|
+
const color = item.color ?? item.fill ?? `var(--color-${cssIdent(key)})`;
|
|
2684
|
+
const name = series?.label ?? item.name ?? key;
|
|
2685
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-chart__tooltip-item", children: [
|
|
2686
|
+
!hideIndicator ? series?.icon ? /* @__PURE__ */ jsxRuntime.jsx(series.icon, { className: "mz-chart__tooltip-icon" }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
2687
|
+
"span",
|
|
2688
|
+
{
|
|
2689
|
+
className: cn("mz-chart__swatch", `mz-chart__swatch--${indicator}`),
|
|
2690
|
+
style: { "--mz-chart-color": color }
|
|
2691
|
+
}
|
|
2692
|
+
) : null,
|
|
2693
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-chart__tooltip-name", children: name }),
|
|
2694
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "mz-chart__tooltip-value", children: formatter ? formatter(item.value, name, item) : item.value })
|
|
2695
|
+
] }, key + index);
|
|
2696
|
+
}) })
|
|
2697
|
+
] });
|
|
2698
|
+
}
|
|
2699
|
+
function ChartLegendContent({
|
|
2700
|
+
payload = [],
|
|
2701
|
+
hideIcon = false,
|
|
2702
|
+
nameKey,
|
|
2703
|
+
className
|
|
2704
|
+
}) {
|
|
2705
|
+
const { config } = useChart();
|
|
2706
|
+
if (payload.length === 0) return null;
|
|
2707
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "chart-legend", className: cn("mz-chart__legend", className), children: payload.map((item, index) => {
|
|
2708
|
+
const key = configKeyOf(item, nameKey, String(item.dataKey ?? item.name ?? index));
|
|
2709
|
+
const series = config[key];
|
|
2710
|
+
const color = item.color ?? item.fill ?? `var(--color-${cssIdent(key)})`;
|
|
2711
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mz-chart__legend-item", children: [
|
|
2712
|
+
!hideIcon ? series?.icon ? /* @__PURE__ */ jsxRuntime.jsx(series.icon, { className: "mz-chart__tooltip-icon" }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
2713
|
+
"span",
|
|
2714
|
+
{
|
|
2715
|
+
className: "mz-chart__swatch mz-chart__swatch--dot",
|
|
2716
|
+
style: { "--mz-chart-color": color }
|
|
2717
|
+
}
|
|
2718
|
+
) : null,
|
|
2719
|
+
series?.label ?? item.name ?? key
|
|
2720
|
+
] }, key + index);
|
|
2721
|
+
}) });
|
|
2722
|
+
}
|
|
2723
|
+
function cssIdent(key) {
|
|
2724
|
+
return key.replace(/[^a-zA-Z0-9_-]/g, "-");
|
|
2725
|
+
}
|
|
2726
|
+
function isSafeColor(value) {
|
|
2727
|
+
if (value.length > 128) return false;
|
|
2728
|
+
if (/[;{}<>\\]/.test(value)) return false;
|
|
2729
|
+
if (/url\s*\(|expression\s*\(|@import/i.test(value)) return false;
|
|
2730
|
+
return /^(#[0-9a-f]{3,8}|(rgb|rgba|hsl|hsla|oklch|oklab|lab|lch|color|color-mix|var)\s*\(.*\)|[a-z-]+)$/i.test(
|
|
2731
|
+
value.trim()
|
|
2732
|
+
);
|
|
2733
|
+
}
|
|
1320
2734
|
function Sheet({ ...props }) {
|
|
1321
2735
|
return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "sheet", ...props });
|
|
1322
2736
|
}
|
|
@@ -1397,8 +2811,8 @@ function SheetDescription({
|
|
|
1397
2811
|
);
|
|
1398
2812
|
}
|
|
1399
2813
|
function useIsMobile(breakpoint = 768) {
|
|
1400
|
-
const [isMobile, setIsMobile] =
|
|
1401
|
-
|
|
2814
|
+
const [isMobile, setIsMobile] = React48__namespace.useState(false);
|
|
2815
|
+
React48__namespace.useEffect(() => {
|
|
1402
2816
|
const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
|
|
1403
2817
|
const update = () => setIsMobile(query.matches);
|
|
1404
2818
|
update();
|
|
@@ -1409,9 +2823,9 @@ function useIsMobile(breakpoint = 768) {
|
|
|
1409
2823
|
}
|
|
1410
2824
|
var STORAGE_KEY = "morze-ui-sidebar";
|
|
1411
2825
|
var SHORTCUT = "b";
|
|
1412
|
-
var SidebarContext =
|
|
2826
|
+
var SidebarContext = React48__namespace.createContext(null);
|
|
1413
2827
|
function useSidebar() {
|
|
1414
|
-
const context =
|
|
2828
|
+
const context = React48__namespace.useContext(SidebarContext);
|
|
1415
2829
|
if (!context) throw new Error("useSidebar must be used inside <SidebarProvider>");
|
|
1416
2830
|
return context;
|
|
1417
2831
|
}
|
|
@@ -1436,14 +2850,14 @@ function SidebarProvider({
|
|
|
1436
2850
|
...props
|
|
1437
2851
|
}) {
|
|
1438
2852
|
const isMobile = useIsMobile(mobileBreakpoint);
|
|
1439
|
-
const [openMobile, setOpenMobile] =
|
|
1440
|
-
const [internalOpen, setInternalOpen] =
|
|
1441
|
-
|
|
2853
|
+
const [openMobile, setOpenMobile] = React48__namespace.useState(false);
|
|
2854
|
+
const [internalOpen, setInternalOpen] = React48__namespace.useState(defaultOpen);
|
|
2855
|
+
React48__namespace.useEffect(() => {
|
|
1442
2856
|
const stored = readStored2(storageKey);
|
|
1443
2857
|
if (stored !== null) setInternalOpen(stored);
|
|
1444
2858
|
}, [storageKey]);
|
|
1445
2859
|
const open = openProp ?? internalOpen;
|
|
1446
|
-
const setOpen =
|
|
2860
|
+
const setOpen = React48__namespace.useCallback(
|
|
1447
2861
|
(next) => {
|
|
1448
2862
|
if (openProp === void 0) setInternalOpen(next);
|
|
1449
2863
|
onOpenChange?.(next);
|
|
@@ -1455,11 +2869,11 @@ function SidebarProvider({
|
|
|
1455
2869
|
},
|
|
1456
2870
|
[openProp, onOpenChange, storageKey]
|
|
1457
2871
|
);
|
|
1458
|
-
const toggleSidebar =
|
|
2872
|
+
const toggleSidebar = React48__namespace.useCallback(() => {
|
|
1459
2873
|
if (isMobile) setOpenMobile((current) => !current);
|
|
1460
2874
|
else setOpen(!open);
|
|
1461
2875
|
}, [isMobile, open, setOpen]);
|
|
1462
|
-
|
|
2876
|
+
React48__namespace.useEffect(() => {
|
|
1463
2877
|
const onKeyDown = (event) => {
|
|
1464
2878
|
if (event.key.toLowerCase() !== SHORTCUT || !(event.metaKey || event.ctrlKey)) return;
|
|
1465
2879
|
event.preventDefault();
|
|
@@ -1468,7 +2882,7 @@ function SidebarProvider({
|
|
|
1468
2882
|
window.addEventListener("keydown", onKeyDown);
|
|
1469
2883
|
return () => window.removeEventListener("keydown", onKeyDown);
|
|
1470
2884
|
}, [toggleSidebar]);
|
|
1471
|
-
const value =
|
|
2885
|
+
const value = React48__namespace.useMemo(
|
|
1472
2886
|
() => ({
|
|
1473
2887
|
state: open ? "expanded" : "collapsed",
|
|
1474
2888
|
open,
|
|
@@ -1694,7 +3108,7 @@ function SidebarMenuSkeleton({
|
|
|
1694
3108
|
showIcon = false,
|
|
1695
3109
|
...props
|
|
1696
3110
|
}) {
|
|
1697
|
-
const width =
|
|
3111
|
+
const width = React48__namespace.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
|
|
1698
3112
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1699
3113
|
"div",
|
|
1700
3114
|
{
|
|
@@ -1739,9 +3153,9 @@ function CellEditor({
|
|
|
1739
3153
|
onDone
|
|
1740
3154
|
}) {
|
|
1741
3155
|
const initial = def.value(row);
|
|
1742
|
-
const [value, setValue] =
|
|
1743
|
-
const [saving, setSaving] =
|
|
1744
|
-
const [error, setError] =
|
|
3156
|
+
const [value, setValue] = React48__namespace.useState(initial);
|
|
3157
|
+
const [saving, setSaving] = React48__namespace.useState(false);
|
|
3158
|
+
const [error, setError] = React48__namespace.useState(null);
|
|
1745
3159
|
const commit = async () => {
|
|
1746
3160
|
if (value === initial) return onDone();
|
|
1747
3161
|
setSaving(true);
|
|
@@ -1915,9 +3329,9 @@ function parseSort(raw) {
|
|
|
1915
3329
|
}
|
|
1916
3330
|
function ColumnFilter({ columnLabel, def, value, onApply, labels: labelsProp }) {
|
|
1917
3331
|
const labels = resolveLabels(labelsProp);
|
|
1918
|
-
const [open, setOpen] =
|
|
1919
|
-
const [draft, setDraft] =
|
|
1920
|
-
|
|
3332
|
+
const [open, setOpen] = React48__namespace.useState(false);
|
|
3333
|
+
const [draft, setDraft] = React48__namespace.useState(value);
|
|
3334
|
+
React48__namespace.useEffect(() => {
|
|
1921
3335
|
if (open) setDraft(value);
|
|
1922
3336
|
}, [open, value]);
|
|
1923
3337
|
const active = isFilterActive(value);
|
|
@@ -2125,9 +3539,9 @@ function ColumnManager({
|
|
|
2125
3539
|
labels: labelsProp
|
|
2126
3540
|
}) {
|
|
2127
3541
|
const labels = resolveLabels(labelsProp);
|
|
2128
|
-
const [dragging, setDragging] =
|
|
2129
|
-
const [dropTarget, setDropTarget] =
|
|
2130
|
-
const entries =
|
|
3542
|
+
const [dragging, setDragging] = React48__namespace.useState(null);
|
|
3543
|
+
const [dropTarget, setDropTarget] = React48__namespace.useState(null);
|
|
3544
|
+
const entries = React48__namespace.useMemo(() => {
|
|
2131
3545
|
const byId = new Map(columns.map((c, index) => [c.id, { column: c, declaredIndex: index }]));
|
|
2132
3546
|
const ordered = layout.order.map((id) => byId.get(id)).filter((e) => Boolean(e));
|
|
2133
3547
|
const side = (id) => layout.pinned[id];
|
|
@@ -2361,9 +3775,9 @@ function DataTablePagination({
|
|
|
2361
3775
|
}
|
|
2362
3776
|
function useColumnResize(options) {
|
|
2363
3777
|
const { rootRef, widthOf, minWidthOf, onCommit } = options;
|
|
2364
|
-
const [resizing, setResizing] =
|
|
3778
|
+
const [resizing, setResizing] = React48__namespace.useState(null);
|
|
2365
3779
|
const varName = (id) => `--mz-dt-w-${cssSafe(id)}`;
|
|
2366
|
-
const start =
|
|
3780
|
+
const start = React48__namespace.useCallback(
|
|
2367
3781
|
(event, id) => {
|
|
2368
3782
|
if (event.button !== 0) return;
|
|
2369
3783
|
event.preventDefault();
|
|
@@ -2395,7 +3809,7 @@ function useColumnResize(options) {
|
|
|
2395
3809
|
},
|
|
2396
3810
|
[rootRef, widthOf, minWidthOf, onCommit]
|
|
2397
3811
|
);
|
|
2398
|
-
const autoFit =
|
|
3812
|
+
const autoFit = React48__namespace.useCallback(
|
|
2399
3813
|
(id) => {
|
|
2400
3814
|
const root = rootRef.current;
|
|
2401
3815
|
if (!root) return;
|
|
@@ -2412,7 +3826,7 @@ function useColumnResize(options) {
|
|
|
2412
3826
|
},
|
|
2413
3827
|
[rootRef, minWidthOf, onCommit]
|
|
2414
3828
|
);
|
|
2415
|
-
const onKeyDown =
|
|
3829
|
+
const onKeyDown = React48__namespace.useCallback(
|
|
2416
3830
|
(event, id) => {
|
|
2417
3831
|
const step = event.shiftKey ? 32 : 8;
|
|
2418
3832
|
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
|
|
@@ -2455,7 +3869,7 @@ function useColumnLayout({
|
|
|
2455
3869
|
layout: controlled,
|
|
2456
3870
|
onLayoutChange
|
|
2457
3871
|
}) {
|
|
2458
|
-
const baseline =
|
|
3872
|
+
const baseline = React48__namespace.useMemo(
|
|
2459
3873
|
() => ({
|
|
2460
3874
|
order: columns.map((c) => c.id),
|
|
2461
3875
|
hidden: [],
|
|
@@ -2467,27 +3881,27 @@ function useColumnLayout({
|
|
|
2467
3881
|
}),
|
|
2468
3882
|
[columns]
|
|
2469
3883
|
);
|
|
2470
|
-
const [internal, setInternal] =
|
|
2471
|
-
|
|
3884
|
+
const [internal, setInternal] = React48__namespace.useState(baseline);
|
|
3885
|
+
React48__namespace.useEffect(() => {
|
|
2472
3886
|
const stored = readStored3(persistKey);
|
|
2473
3887
|
if (stored) setInternal((current) => merge(current, stored, baseline));
|
|
2474
3888
|
}, [persistKey]);
|
|
2475
|
-
|
|
3889
|
+
React48__namespace.useEffect(() => {
|
|
2476
3890
|
setInternal((current) => merge(baseline, current, baseline));
|
|
2477
3891
|
}, [baseline]);
|
|
2478
|
-
const layout =
|
|
3892
|
+
const layout = React48__namespace.useMemo(
|
|
2479
3893
|
() => controlled ? merge(baseline, controlled, baseline) : internal,
|
|
2480
3894
|
[controlled, internal, baseline]
|
|
2481
3895
|
);
|
|
2482
|
-
const onLayoutChangeRef =
|
|
2483
|
-
|
|
3896
|
+
const onLayoutChangeRef = React48__namespace.useRef(onLayoutChange);
|
|
3897
|
+
React48__namespace.useEffect(() => {
|
|
2484
3898
|
onLayoutChangeRef.current = onLayoutChange;
|
|
2485
3899
|
});
|
|
2486
|
-
const internalRef =
|
|
2487
|
-
|
|
3900
|
+
const internalRef = React48__namespace.useRef(internal);
|
|
3901
|
+
React48__namespace.useEffect(() => {
|
|
2488
3902
|
internalRef.current = internal;
|
|
2489
3903
|
}, [internal]);
|
|
2490
|
-
const update =
|
|
3904
|
+
const update = React48__namespace.useCallback(
|
|
2491
3905
|
(patch, options) => {
|
|
2492
3906
|
const base = controlled ? merge(baseline, controlled, baseline) : internalRef.current;
|
|
2493
3907
|
const next = patch(base);
|
|
@@ -2501,11 +3915,11 @@ function useColumnLayout({
|
|
|
2501
3915
|
},
|
|
2502
3916
|
[controlled, baseline, persistKey]
|
|
2503
3917
|
);
|
|
2504
|
-
const byId =
|
|
3918
|
+
const byId = React48__namespace.useMemo(
|
|
2505
3919
|
() => new Map(columns.map((c) => [c.id, c])),
|
|
2506
3920
|
[columns]
|
|
2507
3921
|
);
|
|
2508
|
-
const visible =
|
|
3922
|
+
const visible = React48__namespace.useMemo(() => {
|
|
2509
3923
|
const ordered = layout.order.map((id) => byId.get(id)).filter((c) => Boolean(c) && !layout.hidden.includes(c.id));
|
|
2510
3924
|
const side = (id) => layout.pinned[id];
|
|
2511
3925
|
return [
|
|
@@ -2514,15 +3928,15 @@ function useColumnLayout({
|
|
|
2514
3928
|
...ordered.filter((c) => side(c.id) === "right")
|
|
2515
3929
|
];
|
|
2516
3930
|
}, [layout, byId]);
|
|
2517
|
-
const widthOf =
|
|
3931
|
+
const widthOf = React48__namespace.useCallback(
|
|
2518
3932
|
(id) => layout.widths[id] ?? byId.get(id)?.width ?? DEFAULT_WIDTH,
|
|
2519
3933
|
[layout.widths, byId]
|
|
2520
3934
|
);
|
|
2521
|
-
const minWidthOf =
|
|
3935
|
+
const minWidthOf = React48__namespace.useCallback(
|
|
2522
3936
|
(id) => byId.get(id)?.minWidth ?? DEFAULT_MIN,
|
|
2523
3937
|
[byId]
|
|
2524
3938
|
);
|
|
2525
|
-
const fitTo =
|
|
3939
|
+
const fitTo = React48__namespace.useCallback(
|
|
2526
3940
|
(available) => update(
|
|
2527
3941
|
(current) => {
|
|
2528
3942
|
const shown = current.order.map((id) => byId.get(id)).filter((c) => Boolean(c) && !current.hidden.includes(c.id));
|
|
@@ -2635,8 +4049,8 @@ function merge(base, patch, fallback) {
|
|
|
2635
4049
|
}
|
|
2636
4050
|
function useRowSelection(options) {
|
|
2637
4051
|
const { value, onChange, pageKeys } = options;
|
|
2638
|
-
const anchor =
|
|
2639
|
-
const selected =
|
|
4052
|
+
const anchor = React48__namespace.useRef(null);
|
|
4053
|
+
const selected = React48__namespace.useMemo(() => new Set(value.keys), [value.keys]);
|
|
2640
4054
|
const setKeys = (keys, allMatching = false) => onChange({ keys, allMatching });
|
|
2641
4055
|
const toggle = (key, event) => {
|
|
2642
4056
|
if (event?.shiftKey && anchor.current) {
|
|
@@ -2721,11 +4135,11 @@ function DataTable({
|
|
|
2721
4135
|
className
|
|
2722
4136
|
}) {
|
|
2723
4137
|
const labels = resolveLabels(labelsProp);
|
|
2724
|
-
const rootRef =
|
|
2725
|
-
const scrollerRef =
|
|
2726
|
-
const [scrolled, setScrolled] =
|
|
2727
|
-
const [expanded, setExpanded] =
|
|
2728
|
-
const [editing, setEditing] =
|
|
4138
|
+
const rootRef = React48__namespace.useRef(null);
|
|
4139
|
+
const scrollerRef = React48__namespace.useRef(null);
|
|
4140
|
+
const [scrolled, setScrolled] = React48__namespace.useState({ left: false, right: false });
|
|
4141
|
+
const [expanded, setExpanded] = React48__namespace.useState(/* @__PURE__ */ new Set());
|
|
4142
|
+
const [editing, setEditing] = React48__namespace.useState(null);
|
|
2729
4143
|
const {
|
|
2730
4144
|
layout,
|
|
2731
4145
|
visible,
|
|
@@ -2740,17 +4154,17 @@ function DataTable({
|
|
|
2740
4154
|
} = useColumnLayout({ columns, persistKey, layout: controlledLayout, onLayoutChange });
|
|
2741
4155
|
const resize = useColumnResize({ rootRef, widthOf, minWidthOf, onCommit: setWidth });
|
|
2742
4156
|
const selectable = Boolean(selection && onSelectionChange);
|
|
2743
|
-
const pageKeys =
|
|
4157
|
+
const pageKeys = React48__namespace.useMemo(() => data.map(rowKey), [data, rowKey]);
|
|
2744
4158
|
const rows = useRowSelection({
|
|
2745
4159
|
value: selection ?? { keys: [], allMatching: false },
|
|
2746
4160
|
onChange: onSelectionChange ?? (() => {
|
|
2747
4161
|
}),
|
|
2748
4162
|
pageKeys
|
|
2749
4163
|
});
|
|
2750
|
-
const recentFits =
|
|
4164
|
+
const recentFits = React48__namespace.useRef([]);
|
|
2751
4165
|
const hiddenKey = layout.hidden.join("\0");
|
|
2752
4166
|
const orderKey = layout.order.join("\0");
|
|
2753
|
-
|
|
4167
|
+
React48__namespace.useEffect(() => {
|
|
2754
4168
|
const scroller = scrollerRef.current;
|
|
2755
4169
|
if (!scroller || !autoFit) return;
|
|
2756
4170
|
const controls = (selectable ? SELECT_WIDTH : 0) + (renderExpanded ? EXPAND_WIDTH : 0);
|
|
@@ -2769,7 +4183,7 @@ function DataTable({
|
|
|
2769
4183
|
observer.observe(scroller);
|
|
2770
4184
|
return () => observer.disconnect();
|
|
2771
4185
|
}, [autoFit, fitTo, selectable, renderExpanded, hiddenKey, orderKey]);
|
|
2772
|
-
|
|
4186
|
+
React48__namespace.useEffect(() => {
|
|
2773
4187
|
const scroller = scrollerRef.current;
|
|
2774
4188
|
if (!scroller) return;
|
|
2775
4189
|
const update = () => {
|
|
@@ -2789,12 +4203,12 @@ function DataTable({
|
|
|
2789
4203
|
observer.disconnect();
|
|
2790
4204
|
};
|
|
2791
4205
|
}, [visible.length, data.length]);
|
|
2792
|
-
const moreRef =
|
|
2793
|
-
const onLoadMoreRef =
|
|
2794
|
-
|
|
4206
|
+
const moreRef = React48__namespace.useRef(null);
|
|
4207
|
+
const onLoadMoreRef = React48__namespace.useRef(onLoadMore);
|
|
4208
|
+
React48__namespace.useEffect(() => {
|
|
2795
4209
|
onLoadMoreRef.current = onLoadMore;
|
|
2796
4210
|
});
|
|
2797
|
-
const askedAt =
|
|
4211
|
+
const askedAt = React48__namespace.useRef(-1);
|
|
2798
4212
|
const canLoadMore = Boolean(onLoadMore) && (hasMore ?? (total === void 0 || data.length < total));
|
|
2799
4213
|
const showLoadMore = canLoadMore && !error && data.length > 0;
|
|
2800
4214
|
const showPager = pagination ?? !onLoadMore;
|
|
@@ -2803,7 +4217,7 @@ function DataTable({
|
|
|
2803
4217
|
askedAt.current = data.length;
|
|
2804
4218
|
onLoadMoreRef.current?.();
|
|
2805
4219
|
};
|
|
2806
|
-
|
|
4220
|
+
React48__namespace.useEffect(() => {
|
|
2807
4221
|
const sentinel = moreRef.current;
|
|
2808
4222
|
const scroller = scrollerRef.current;
|
|
2809
4223
|
if (!sentinel || !scroller || !showLoadMore || !autoLoadMore || loading) return;
|
|
@@ -2817,7 +4231,7 @@ function DataTable({
|
|
|
2817
4231
|
observer.observe(sentinel);
|
|
2818
4232
|
return () => observer.disconnect();
|
|
2819
4233
|
}, [showLoadMore, autoLoadMore, loading, data.length]);
|
|
2820
|
-
const offsets =
|
|
4234
|
+
const offsets = React48__namespace.useMemo(() => {
|
|
2821
4235
|
const result = /* @__PURE__ */ new Map();
|
|
2822
4236
|
let leftParts = selectable ? [`${SELECT_WIDTH}px`] : [];
|
|
2823
4237
|
if (renderExpanded) leftParts = [...leftParts, `${EXPAND_WIDTH}px`];
|
|
@@ -2834,7 +4248,7 @@ function DataTable({
|
|
|
2834
4248
|
}
|
|
2835
4249
|
return result;
|
|
2836
4250
|
}, [visible, layout.pinned, widthOf, selectable, renderExpanded]);
|
|
2837
|
-
const widthVars =
|
|
4251
|
+
const widthVars = React48__namespace.useMemo(() => {
|
|
2838
4252
|
const style = {};
|
|
2839
4253
|
for (const column of visible) {
|
|
2840
4254
|
style[`--mz-dt-w-${cssSafe(column.id)}`] = `${widthOf(column.id)}px`;
|
|
@@ -2848,7 +4262,7 @@ function DataTable({
|
|
|
2848
4262
|
const pinEdgeOf = (id) => id === lastLeftPinned ? "left" : id === firstRightPinned ? "right" : void 0;
|
|
2849
4263
|
const controlPinEdge = leftPinned.length === 0 ? "left" : void 0;
|
|
2850
4264
|
const chips = activeFilters(query.filters);
|
|
2851
|
-
const columnById =
|
|
4265
|
+
const columnById = React48__namespace.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
|
|
2852
4266
|
const labelOf = (id) => {
|
|
2853
4267
|
const column = columnById.get(id);
|
|
2854
4268
|
return column?.label ?? (typeof column?.header === "string" ? column.header : id);
|
|
@@ -3075,7 +4489,7 @@ function DataTable({
|
|
|
3075
4489
|
const context = { rowIndex };
|
|
3076
4490
|
const hostClass = rowClassName?.(row, context);
|
|
3077
4491
|
const hostProps = rowProps?.(row, context);
|
|
3078
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4492
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React48__namespace.Fragment, { children: [
|
|
3079
4493
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3080
4494
|
"tr",
|
|
3081
4495
|
{
|
|
@@ -3264,13 +4678,13 @@ function useTableQuery({
|
|
|
3264
4678
|
urlKey = null,
|
|
3265
4679
|
history = "replace"
|
|
3266
4680
|
} = {}) {
|
|
3267
|
-
const base =
|
|
3268
|
-
const [query, setQuery] =
|
|
3269
|
-
|
|
4681
|
+
const base = React48__namespace.useMemo(() => ({ ...emptyQuery, ...initial }), [initial]);
|
|
4682
|
+
const [query, setQuery] = React48__namespace.useState(base);
|
|
4683
|
+
React48__namespace.useEffect(() => {
|
|
3270
4684
|
if (urlKey === null || typeof window === "undefined") return;
|
|
3271
4685
|
setQuery(decode(urlKey, base));
|
|
3272
4686
|
}, [urlKey]);
|
|
3273
|
-
|
|
4687
|
+
React48__namespace.useEffect(() => {
|
|
3274
4688
|
if (urlKey === null || typeof window === "undefined") return;
|
|
3275
4689
|
const params = encode(query, urlKey);
|
|
3276
4690
|
const search = params.toString();
|
|
@@ -3278,13 +4692,13 @@ function useTableQuery({
|
|
|
3278
4692
|
if (next === `${window.location.pathname}${window.location.search}${window.location.hash}`) return;
|
|
3279
4693
|
window.history[history === "push" ? "pushState" : "replaceState"](null, "", next);
|
|
3280
4694
|
}, [query, urlKey, history]);
|
|
3281
|
-
|
|
4695
|
+
React48__namespace.useEffect(() => {
|
|
3282
4696
|
if (urlKey === null || typeof window === "undefined") return;
|
|
3283
4697
|
const onPop = () => setQuery(decode(urlKey, base));
|
|
3284
4698
|
window.addEventListener("popstate", onPop);
|
|
3285
4699
|
return () => window.removeEventListener("popstate", onPop);
|
|
3286
4700
|
}, [urlKey, base]);
|
|
3287
|
-
const reset =
|
|
4701
|
+
const reset = React48__namespace.useCallback(() => setQuery(base), [base]);
|
|
3288
4702
|
return { query, setQuery, reset };
|
|
3289
4703
|
}
|
|
3290
4704
|
function useSavedViews({
|
|
@@ -3292,8 +4706,8 @@ function useSavedViews({
|
|
|
3292
4706
|
views: controlled,
|
|
3293
4707
|
onViewsChange
|
|
3294
4708
|
} = {}) {
|
|
3295
|
-
const [internal, setInternal] =
|
|
3296
|
-
|
|
4709
|
+
const [internal, setInternal] = React48__namespace.useState([]);
|
|
4710
|
+
React48__namespace.useEffect(() => {
|
|
3297
4711
|
if (!storageKey || typeof window === "undefined") return;
|
|
3298
4712
|
try {
|
|
3299
4713
|
const raw = window.localStorage.getItem(storageKey);
|
|
@@ -3302,7 +4716,7 @@ function useSavedViews({
|
|
|
3302
4716
|
}
|
|
3303
4717
|
}, [storageKey]);
|
|
3304
4718
|
const views = controlled ?? internal;
|
|
3305
|
-
const persist =
|
|
4719
|
+
const persist = React48__namespace.useCallback(
|
|
3306
4720
|
(next) => {
|
|
3307
4721
|
setInternal(next);
|
|
3308
4722
|
onViewsChange?.(next);
|
|
@@ -3327,13 +4741,32 @@ exports.AccordionItem = AccordionItem;
|
|
|
3327
4741
|
exports.AccordionTrigger = AccordionTrigger;
|
|
3328
4742
|
exports.Alert = Alert;
|
|
3329
4743
|
exports.AlertDescription = AlertDescription;
|
|
4744
|
+
exports.AlertDialog = AlertDialog;
|
|
4745
|
+
exports.AlertDialogAction = AlertDialogAction;
|
|
4746
|
+
exports.AlertDialogCancel = AlertDialogCancel;
|
|
4747
|
+
exports.AlertDialogContent = AlertDialogContent;
|
|
4748
|
+
exports.AlertDialogDescription = AlertDialogDescription;
|
|
4749
|
+
exports.AlertDialogFooter = AlertDialogFooter;
|
|
4750
|
+
exports.AlertDialogHeader = AlertDialogHeader;
|
|
4751
|
+
exports.AlertDialogOverlay = AlertDialogOverlay;
|
|
4752
|
+
exports.AlertDialogPortal = AlertDialogPortal;
|
|
4753
|
+
exports.AlertDialogTitle = AlertDialogTitle;
|
|
4754
|
+
exports.AlertDialogTrigger = AlertDialogTrigger;
|
|
3330
4755
|
exports.AlertTitle = AlertTitle;
|
|
3331
4756
|
exports.Avatar = Avatar;
|
|
3332
4757
|
exports.AvatarFallback = AvatarFallback;
|
|
3333
4758
|
exports.AvatarGroup = AvatarGroup;
|
|
3334
4759
|
exports.AvatarImage = AvatarImage;
|
|
3335
4760
|
exports.Badge = Badge;
|
|
4761
|
+
exports.Breadcrumb = Breadcrumb;
|
|
4762
|
+
exports.BreadcrumbEllipsis = BreadcrumbEllipsis;
|
|
4763
|
+
exports.BreadcrumbItem = BreadcrumbItem;
|
|
4764
|
+
exports.BreadcrumbLink = BreadcrumbLink;
|
|
4765
|
+
exports.BreadcrumbList = BreadcrumbList;
|
|
4766
|
+
exports.BreadcrumbPage = BreadcrumbPage;
|
|
4767
|
+
exports.BreadcrumbSeparator = BreadcrumbSeparator;
|
|
3336
4768
|
exports.Button = Button;
|
|
4769
|
+
exports.Calendar = Calendar;
|
|
3337
4770
|
exports.Card = Card;
|
|
3338
4771
|
exports.CardAction = CardAction;
|
|
3339
4772
|
exports.CardContent = CardContent;
|
|
@@ -3341,6 +4774,10 @@ exports.CardDescription = CardDescription;
|
|
|
3341
4774
|
exports.CardFooter = CardFooter;
|
|
3342
4775
|
exports.CardHeader = CardHeader;
|
|
3343
4776
|
exports.CardTitle = CardTitle;
|
|
4777
|
+
exports.ChartContainer = ChartContainer;
|
|
4778
|
+
exports.ChartLegendContent = ChartLegendContent;
|
|
4779
|
+
exports.ChartStyle = ChartStyle;
|
|
4780
|
+
exports.ChartTooltipContent = ChartTooltipContent;
|
|
3344
4781
|
exports.Checkbox = Checkbox;
|
|
3345
4782
|
exports.ColumnFilter = ColumnFilter;
|
|
3346
4783
|
exports.ColumnManager = ColumnManager;
|
|
@@ -3377,7 +4814,31 @@ exports.FieldHint = FieldHint;
|
|
|
3377
4814
|
exports.FilterChip = FilterChip;
|
|
3378
4815
|
exports.Input = Input;
|
|
3379
4816
|
exports.Label = Label;
|
|
4817
|
+
exports.Menubar = Menubar;
|
|
4818
|
+
exports.MenubarCheckboxItem = MenubarCheckboxItem;
|
|
4819
|
+
exports.MenubarContent = MenubarContent;
|
|
4820
|
+
exports.MenubarGroup = MenubarGroup;
|
|
4821
|
+
exports.MenubarItem = MenubarItem;
|
|
4822
|
+
exports.MenubarLabel = MenubarLabel;
|
|
4823
|
+
exports.MenubarMenu = MenubarMenu;
|
|
4824
|
+
exports.MenubarPortal = MenubarPortal;
|
|
4825
|
+
exports.MenubarRadioGroup = MenubarRadioGroup;
|
|
4826
|
+
exports.MenubarRadioItem = MenubarRadioItem;
|
|
4827
|
+
exports.MenubarSeparator = MenubarSeparator;
|
|
4828
|
+
exports.MenubarShortcut = MenubarShortcut;
|
|
4829
|
+
exports.MenubarSub = MenubarSub;
|
|
4830
|
+
exports.MenubarSubContent = MenubarSubContent;
|
|
4831
|
+
exports.MenubarSubTrigger = MenubarSubTrigger;
|
|
4832
|
+
exports.MenubarTrigger = MenubarTrigger;
|
|
3380
4833
|
exports.MorzeThemeProvider = MorzeThemeProvider;
|
|
4834
|
+
exports.NavigationMenu = NavigationMenu;
|
|
4835
|
+
exports.NavigationMenuContent = NavigationMenuContent;
|
|
4836
|
+
exports.NavigationMenuIndicator = NavigationMenuIndicator;
|
|
4837
|
+
exports.NavigationMenuItem = NavigationMenuItem;
|
|
4838
|
+
exports.NavigationMenuLink = NavigationMenuLink;
|
|
4839
|
+
exports.NavigationMenuList = NavigationMenuList;
|
|
4840
|
+
exports.NavigationMenuTrigger = NavigationMenuTrigger;
|
|
4841
|
+
exports.NavigationMenuViewport = NavigationMenuViewport;
|
|
3381
4842
|
exports.Popover = Popover;
|
|
3382
4843
|
exports.PopoverAnchor = PopoverAnchor;
|
|
3383
4844
|
exports.PopoverContent = PopoverContent;
|
|
@@ -3388,6 +4849,8 @@ exports.PopoverTrigger = PopoverTrigger;
|
|
|
3388
4849
|
exports.Progress = Progress;
|
|
3389
4850
|
exports.RadioGroup = RadioGroup;
|
|
3390
4851
|
exports.RadioGroupItem = RadioGroupItem;
|
|
4852
|
+
exports.ScrollArea = ScrollArea;
|
|
4853
|
+
exports.ScrollBar = ScrollBar;
|
|
3391
4854
|
exports.Select = Select;
|
|
3392
4855
|
exports.SelectContent = SelectContent;
|
|
3393
4856
|
exports.SelectGroup = SelectGroup;
|
|
@@ -3437,11 +4900,27 @@ exports.Skeleton = Skeleton;
|
|
|
3437
4900
|
exports.Slider = Slider;
|
|
3438
4901
|
exports.Spinner = Spinner;
|
|
3439
4902
|
exports.Switch = Switch;
|
|
4903
|
+
exports.Table = Table;
|
|
4904
|
+
exports.TableBody = TableBody;
|
|
4905
|
+
exports.TableCaption = TableCaption;
|
|
4906
|
+
exports.TableCell = TableCell;
|
|
4907
|
+
exports.TableFooter = TableFooter;
|
|
4908
|
+
exports.TableHead = TableHead;
|
|
4909
|
+
exports.TableHeader = TableHeader;
|
|
4910
|
+
exports.TableRow = TableRow;
|
|
3440
4911
|
exports.Tabs = Tabs;
|
|
3441
4912
|
exports.TabsContent = TabsContent;
|
|
3442
4913
|
exports.TabsList = TabsList;
|
|
3443
4914
|
exports.TabsTrigger = TabsTrigger;
|
|
3444
4915
|
exports.Textarea = Textarea;
|
|
4916
|
+
exports.Toast = Toast;
|
|
4917
|
+
exports.ToastAction = ToastAction;
|
|
4918
|
+
exports.ToastClose = ToastClose;
|
|
4919
|
+
exports.ToastDescription = ToastDescription;
|
|
4920
|
+
exports.ToastProvider = ToastProvider;
|
|
4921
|
+
exports.ToastTitle = ToastTitle;
|
|
4922
|
+
exports.ToastViewport = ToastViewport;
|
|
4923
|
+
exports.Toaster = Toaster;
|
|
3445
4924
|
exports.Toggle = Toggle;
|
|
3446
4925
|
exports.ToggleGroup = ToggleGroup;
|
|
3447
4926
|
exports.ToggleGroupItem = ToggleGroupItem;
|
|
@@ -3454,16 +4933,20 @@ exports.badgeVariants = badgeVariants;
|
|
|
3454
4933
|
exports.buttonVariants = buttonVariants;
|
|
3455
4934
|
exports.cn = cn;
|
|
3456
4935
|
exports.defaultDataTableLabels = defaultDataTableLabels;
|
|
4936
|
+
exports.dismiss = dismiss;
|
|
3457
4937
|
exports.emptyQuery = emptyQuery;
|
|
3458
4938
|
exports.isFilterActive = isFilterActive;
|
|
4939
|
+
exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
|
|
3459
4940
|
exports.pageCount = pageCount;
|
|
3460
4941
|
exports.parseSort = parseSort;
|
|
3461
4942
|
exports.resolveLabels = resolveLabels;
|
|
3462
4943
|
exports.serializeSort = serializeSort;
|
|
3463
4944
|
exports.setFilter = setFilter;
|
|
3464
4945
|
exports.sortStateOf = sortStateOf;
|
|
4946
|
+
exports.toast = toast;
|
|
3465
4947
|
exports.toggleSort = toggleSort;
|
|
3466
4948
|
exports.toggleVariants = toggleVariants;
|
|
4949
|
+
exports.useChart = useChart;
|
|
3467
4950
|
exports.useColumnLayout = useColumnLayout;
|
|
3468
4951
|
exports.useIsMobile = useIsMobile;
|
|
3469
4952
|
exports.useMorzeTheme = useMorzeTheme;
|
|
@@ -3471,5 +4954,6 @@ exports.useRowSelection = useRowSelection;
|
|
|
3471
4954
|
exports.useSavedViews = useSavedViews;
|
|
3472
4955
|
exports.useSidebar = useSidebar;
|
|
3473
4956
|
exports.useTableQuery = useTableQuery;
|
|
4957
|
+
exports.useToast = useToast;
|
|
3474
4958
|
//# sourceMappingURL=index.cjs.map
|
|
3475
4959
|
//# sourceMappingURL=index.cjs.map
|