@geomak/ui 6.13.0 → 6.15.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-GKXP6OJJ.js → chunk-I2P4JJDB.js} +10 -5
- package/dist/chunk-I2P4JJDB.js.map +1 -0
- package/dist/{chunk-255PCZIW.cjs → chunk-OAV4TA4B.cjs} +10 -5
- package/dist/chunk-OAV4TA4B.cjs.map +1 -0
- package/dist/{index-CvyV3YPI.d.cts → index-5FQ64bx1.d.cts} +3 -0
- package/dist/{index-CvyV3YPI.d.ts → index-5FQ64bx1.d.ts} +3 -0
- package/dist/index.cjs +310 -263
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +11 -18
- package/dist/index.d.ts +11 -18
- package/dist/index.js +107 -60
- package/dist/index.js.map +1 -1
- package/dist/styles.css +14 -0
- package/dist/tokens/index.cjs +4 -4
- package/dist/tokens/index.d.cts +1 -1
- package/dist/tokens/index.d.ts +1 -1
- package/dist/tokens/index.js +1 -1
- package/package.json +1 -1
- package/dist/chunk-255PCZIW.cjs.map +0 -1
- package/dist/chunk-GKXP6OJJ.js.map +0 -1
package/dist/index.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkOAV4TA4B_cjs = require('./chunk-OAV4TA4B.cjs');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var React20 = require('react');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
7
7
|
var AvatarPrimitive = require('@radix-ui/react-avatar');
|
|
8
8
|
var Dialog = require('@radix-ui/react-dialog');
|
|
@@ -39,7 +39,7 @@ function _interopNamespace(e) {
|
|
|
39
39
|
return Object.freeze(n);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
var
|
|
42
|
+
var React20__default = /*#__PURE__*/_interopDefault(React20);
|
|
43
43
|
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
|
|
44
44
|
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
45
45
|
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
|
|
@@ -214,8 +214,8 @@ Icon.Copy = Copy;
|
|
|
214
214
|
Icon.CircleStack = CircleStack;
|
|
215
215
|
var icons_default = Icon;
|
|
216
216
|
function Portal({ children, target }) {
|
|
217
|
-
const [resolved, setResolved] =
|
|
218
|
-
|
|
217
|
+
const [resolved, setResolved] = React20.useState(null);
|
|
218
|
+
React20.useEffect(() => {
|
|
219
219
|
if (target === null) {
|
|
220
220
|
setResolved(null);
|
|
221
221
|
return;
|
|
@@ -648,7 +648,7 @@ function IconButton({
|
|
|
648
648
|
className = "",
|
|
649
649
|
style
|
|
650
650
|
}) {
|
|
651
|
-
const colorScheme =
|
|
651
|
+
const colorScheme = React20.useMemo(() => {
|
|
652
652
|
if (type === "primary") {
|
|
653
653
|
return "bg-accent text-accent-fg hover:bg-accent-hover";
|
|
654
654
|
}
|
|
@@ -685,8 +685,6 @@ var VARIANT_CLASSES = {
|
|
|
685
685
|
"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2"
|
|
686
686
|
].join(" "),
|
|
687
687
|
ghost: [
|
|
688
|
-
// Semantic tokens handle both light and dark modes — no `dark:`
|
|
689
|
-
// variants needed.
|
|
690
688
|
"bg-transparent text-foreground-secondary",
|
|
691
689
|
"hover:bg-surface-raised hover:text-foreground",
|
|
692
690
|
"active:bg-surface",
|
|
@@ -699,6 +697,27 @@ var VARIANT_CLASSES = {
|
|
|
699
697
|
"active:opacity-100",
|
|
700
698
|
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
701
699
|
"focus-visible:ring-2 focus-visible:ring-status-error focus-visible:ring-offset-2"
|
|
700
|
+
].join(" "),
|
|
701
|
+
warning: [
|
|
702
|
+
"bg-status-warning text-white",
|
|
703
|
+
"hover:opacity-90",
|
|
704
|
+
"active:opacity-100",
|
|
705
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
706
|
+
"focus-visible:ring-2 focus-visible:ring-status-warning focus-visible:ring-offset-2"
|
|
707
|
+
].join(" "),
|
|
708
|
+
success: [
|
|
709
|
+
"bg-status-success text-white",
|
|
710
|
+
"hover:opacity-90",
|
|
711
|
+
"active:opacity-100",
|
|
712
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
713
|
+
"focus-visible:ring-2 focus-visible:ring-status-success focus-visible:ring-offset-2"
|
|
714
|
+
].join(" "),
|
|
715
|
+
info: [
|
|
716
|
+
"bg-status-info text-white",
|
|
717
|
+
"hover:opacity-90",
|
|
718
|
+
"active:opacity-100",
|
|
719
|
+
"disabled:opacity-50 disabled:cursor-not-allowed",
|
|
720
|
+
"focus-visible:ring-2 focus-visible:ring-status-info focus-visible:ring-offset-2"
|
|
702
721
|
].join(" ")
|
|
703
722
|
};
|
|
704
723
|
var SIZE_CLASSES = {
|
|
@@ -706,7 +725,7 @@ var SIZE_CLASSES = {
|
|
|
706
725
|
md: "h-9 px-4 text-sm gap-1.5 rounded-lg",
|
|
707
726
|
lg: "h-11 px-5 text-sm gap-2 rounded-xl"
|
|
708
727
|
};
|
|
709
|
-
|
|
728
|
+
var Button = React20__default.default.forwardRef(function Button2({
|
|
710
729
|
content,
|
|
711
730
|
variant = "primary",
|
|
712
731
|
size = "md",
|
|
@@ -716,17 +735,21 @@ function Button({
|
|
|
716
735
|
style,
|
|
717
736
|
icon,
|
|
718
737
|
onClick,
|
|
719
|
-
className = ""
|
|
720
|
-
|
|
738
|
+
className = "",
|
|
739
|
+
type: _deprecated,
|
|
740
|
+
// consume deprecated prop — do not spread to DOM
|
|
741
|
+
...rest
|
|
742
|
+
}, ref) {
|
|
721
743
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
722
744
|
"button",
|
|
723
745
|
{
|
|
746
|
+
...rest,
|
|
747
|
+
ref,
|
|
724
748
|
onClick,
|
|
725
749
|
disabled: disabled || loading,
|
|
726
750
|
type: buttonType,
|
|
727
751
|
style,
|
|
728
752
|
className: [
|
|
729
|
-
// Base — layout, transitions, focus reset
|
|
730
753
|
"inline-flex items-center justify-center font-medium",
|
|
731
754
|
"outline-none transition-colors duration-150 select-none",
|
|
732
755
|
"whitespace-nowrap",
|
|
@@ -756,7 +779,9 @@ function Button({
|
|
|
756
779
|
]
|
|
757
780
|
}
|
|
758
781
|
);
|
|
759
|
-
}
|
|
782
|
+
});
|
|
783
|
+
Button.displayName = "Button";
|
|
784
|
+
var Button_default = Button;
|
|
760
785
|
function Modal({
|
|
761
786
|
width,
|
|
762
787
|
size,
|
|
@@ -779,7 +804,7 @@ function Modal({
|
|
|
779
804
|
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
780
805
|
framerMotion.motion.div,
|
|
781
806
|
{
|
|
782
|
-
className: "fixed inset-0 bg-
|
|
807
|
+
className: "fixed inset-0 bg-backdrop z-overlay",
|
|
783
808
|
initial: { opacity: 0 },
|
|
784
809
|
animate: { opacity: 1 },
|
|
785
810
|
exit: { opacity: 0 },
|
|
@@ -819,7 +844,7 @@ function Modal({
|
|
|
819
844
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-1 overflow-y-auto p-5 ${hasFooter ? "" : "pb-5"}`, children }),
|
|
820
845
|
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-shrink-0 items-center justify-end gap-3 border-t border-border px-5 py-3", children: [
|
|
821
846
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
822
|
-
|
|
847
|
+
Button_default,
|
|
823
848
|
{
|
|
824
849
|
style: { width: 90 },
|
|
825
850
|
content: cancelText,
|
|
@@ -827,7 +852,7 @@ function Modal({
|
|
|
827
852
|
}
|
|
828
853
|
),
|
|
829
854
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
830
|
-
|
|
855
|
+
Button_default,
|
|
831
856
|
{
|
|
832
857
|
style: { width: 90 },
|
|
833
858
|
content: okText,
|
|
@@ -863,7 +888,7 @@ function Drawer({
|
|
|
863
888
|
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: isOpen && /* @__PURE__ */ jsxRuntime.jsx(Dialog__namespace.Overlay, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
864
889
|
framerMotion.motion.div,
|
|
865
890
|
{
|
|
866
|
-
className: "fixed inset-0 bg-
|
|
891
|
+
className: "fixed inset-0 bg-backdrop z-overlay",
|
|
867
892
|
initial: { opacity: 0 },
|
|
868
893
|
animate: { opacity: 1 },
|
|
869
894
|
exit: { opacity: 0 },
|
|
@@ -901,8 +926,8 @@ function Drawer({
|
|
|
901
926
|
] }),
|
|
902
927
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto p-5", children }),
|
|
903
928
|
hasFooter && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-shrink-0 items-center gap-3 border-t border-border px-5 py-3 ${isRight ? "justify-start" : "justify-end"}`, children: [
|
|
904
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
905
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
929
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button_default, { style: { width: 90 }, content: cancelText, onClick: onCancel }),
|
|
930
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button_default, { style: { width: 90 }, content: okText, onClick: onOk })
|
|
906
931
|
] })
|
|
907
932
|
]
|
|
908
933
|
}
|
|
@@ -960,9 +985,9 @@ function Tooltip({
|
|
|
960
985
|
] }) });
|
|
961
986
|
}
|
|
962
987
|
var TooltipProvider = TooltipPrimitive__namespace.Provider;
|
|
963
|
-
var TabsContext =
|
|
988
|
+
var TabsContext = React20.createContext(null);
|
|
964
989
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
990
|
+
const ctx = React20.useContext(TabsContext);
|
|
966
991
|
if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
|
|
967
992
|
return ctx;
|
|
968
993
|
}
|
|
@@ -984,26 +1009,26 @@ function Tabs({
|
|
|
984
1009
|
children
|
|
985
1010
|
}) {
|
|
986
1011
|
const isControlled = value !== void 0;
|
|
987
|
-
const [internal, setInternal] =
|
|
1012
|
+
const [internal, setInternal] = React20.useState(defaultValue);
|
|
988
1013
|
const current = isControlled ? value : internal;
|
|
989
1014
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
1015
|
+
const indicatorId = React20.useId();
|
|
1016
|
+
const select = React20.useCallback((next) => {
|
|
992
1017
|
if (!isControlled) setInternal(next);
|
|
993
1018
|
onValueChange?.(next);
|
|
994
1019
|
}, [isControlled, onValueChange]);
|
|
995
|
-
const registry =
|
|
996
|
-
const orderRef =
|
|
997
|
-
const [, bump] =
|
|
998
|
-
const registerTab =
|
|
1020
|
+
const registry = React20.useRef(/* @__PURE__ */ new Map());
|
|
1021
|
+
const orderRef = React20.useRef(0);
|
|
1022
|
+
const [, bump] = React20.useState(0);
|
|
1023
|
+
const registerTab = React20.useCallback((val, meta) => {
|
|
999
1024
|
const existing = registry.current.get(val);
|
|
1000
1025
|
registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
|
|
1001
1026
|
if (!existing) bump((v) => v + 1);
|
|
1002
1027
|
}, []);
|
|
1003
|
-
const unregisterTab =
|
|
1028
|
+
const unregisterTab = React20.useCallback((val) => {
|
|
1004
1029
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1030
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1031
|
+
const getTabs = React20.useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
|
|
1007
1032
|
return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1008
1033
|
TabsPrimitive__namespace.Root,
|
|
1009
1034
|
{
|
|
@@ -1023,10 +1048,10 @@ function Tabs({
|
|
|
1023
1048
|
function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
1024
1049
|
const { variant, orientation, reduced, value } = useTabsContext();
|
|
1025
1050
|
const horizontal = orientation === "horizontal";
|
|
1026
|
-
const scrollRef =
|
|
1027
|
-
const [edges, setEdges] =
|
|
1051
|
+
const scrollRef = React20.useRef(null);
|
|
1052
|
+
const [edges, setEdges] = React20.useState({ start: false, end: false });
|
|
1028
1053
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1054
|
+
React20.useLayoutEffect(() => {
|
|
1030
1055
|
const el = scrollRef.current;
|
|
1031
1056
|
if (!el || !scrollable) return;
|
|
1032
1057
|
const update = () => {
|
|
@@ -1051,13 +1076,13 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
|
1051
1076
|
ro.disconnect();
|
|
1052
1077
|
};
|
|
1053
1078
|
}, [horizontal, scrollable, children]);
|
|
1054
|
-
const nudge =
|
|
1079
|
+
const nudge = React20.useCallback((dir) => {
|
|
1055
1080
|
const el = scrollRef.current;
|
|
1056
1081
|
if (!el) return;
|
|
1057
1082
|
const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
|
|
1058
1083
|
el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
|
|
1059
1084
|
}, [horizontal, reduced]);
|
|
1060
|
-
|
|
1085
|
+
React20.useLayoutEffect(() => {
|
|
1061
1086
|
const el = scrollRef.current;
|
|
1062
1087
|
if (!el || !scrollable) return;
|
|
1063
1088
|
const active = el.querySelector("[role=tab][data-state=active]");
|
|
@@ -1115,9 +1140,9 @@ function Chevron({ side, orientation, onClick }) {
|
|
|
1115
1140
|
function OverflowMenu() {
|
|
1116
1141
|
const { getTabs, value, select, orientation } = useTabsContext();
|
|
1117
1142
|
const horizontal = orientation === "horizontal";
|
|
1118
|
-
const [open, setOpen] =
|
|
1119
|
-
const wrapRef =
|
|
1120
|
-
const timer =
|
|
1143
|
+
const [open, setOpen] = React20.useState(false);
|
|
1144
|
+
const wrapRef = React20.useRef(null);
|
|
1145
|
+
const timer = React20.useRef(null);
|
|
1121
1146
|
const openNow = () => {
|
|
1122
1147
|
if (timer.current) clearTimeout(timer.current);
|
|
1123
1148
|
setOpen(true);
|
|
@@ -1125,7 +1150,7 @@ function OverflowMenu() {
|
|
|
1125
1150
|
const closeSoon = () => {
|
|
1126
1151
|
timer.current = setTimeout(() => setOpen(false), 160);
|
|
1127
1152
|
};
|
|
1128
|
-
|
|
1153
|
+
React20.useLayoutEffect(() => {
|
|
1129
1154
|
if (!open) return;
|
|
1130
1155
|
const onDoc = (e) => {
|
|
1131
1156
|
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
|
|
@@ -1206,7 +1231,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
|
|
|
1206
1231
|
const isActive = active === value;
|
|
1207
1232
|
const horizontal = orientation === "horizontal";
|
|
1208
1233
|
const sz = SIZE[size];
|
|
1209
|
-
|
|
1234
|
+
React20.useLayoutEffect(() => {
|
|
1210
1235
|
registerTab(value, { label: children, icon, disabled });
|
|
1211
1236
|
return () => unregisterTab(value);
|
|
1212
1237
|
}, [value, children, icon, disabled, registerTab, unregisterTab]);
|
|
@@ -1404,7 +1429,7 @@ function Tree({
|
|
|
1404
1429
|
item.key
|
|
1405
1430
|
)) });
|
|
1406
1431
|
}
|
|
1407
|
-
var AccordionCtx =
|
|
1432
|
+
var AccordionCtx = React20.createContext({ variant: "separated" });
|
|
1408
1433
|
function Accordion2({
|
|
1409
1434
|
children,
|
|
1410
1435
|
type = "single",
|
|
@@ -1463,7 +1488,7 @@ var Chevron2 = /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
1463
1488
|
}
|
|
1464
1489
|
);
|
|
1465
1490
|
function AccordionItem({ value, title, icon, children, disabled, className = "" }) {
|
|
1466
|
-
const { variant } =
|
|
1491
|
+
const { variant } = React20.useContext(AccordionCtx);
|
|
1467
1492
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1468
1493
|
AccordionPrimitive__namespace.Item,
|
|
1469
1494
|
{
|
|
@@ -1522,7 +1547,7 @@ function Breadcrumbs({
|
|
|
1522
1547
|
className = "",
|
|
1523
1548
|
style
|
|
1524
1549
|
}) {
|
|
1525
|
-
const [expanded, setExpanded] =
|
|
1550
|
+
const [expanded, setExpanded] = React20.useState(false);
|
|
1526
1551
|
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1527
1552
|
const visible = [];
|
|
1528
1553
|
if (shouldCollapse) {
|
|
@@ -1666,7 +1691,7 @@ function Kbd({
|
|
|
1666
1691
|
style
|
|
1667
1692
|
}) {
|
|
1668
1693
|
if (keys && keys.length > 0) {
|
|
1669
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1694
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: ["inline-flex items-center gap-1", className].filter(Boolean).join(" "), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React20__default.default.Fragment, { children: [
|
|
1670
1695
|
i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
|
|
1671
1696
|
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
|
|
1672
1697
|
] }, `${k}-${i}`)) });
|
|
@@ -1739,13 +1764,13 @@ function CardCarousel({
|
|
|
1739
1764
|
className = "",
|
|
1740
1765
|
style
|
|
1741
1766
|
}) {
|
|
1742
|
-
const scrollerRef =
|
|
1743
|
-
const slides =
|
|
1744
|
-
const [active, setActive] =
|
|
1745
|
-
const [atStart, setAtStart] =
|
|
1746
|
-
const [atEnd, setAtEnd] =
|
|
1767
|
+
const scrollerRef = React20.useRef(null);
|
|
1768
|
+
const slides = React20__default.default.Children.toArray(children);
|
|
1769
|
+
const [active, setActive] = React20.useState(0);
|
|
1770
|
+
const [atStart, setAtStart] = React20.useState(true);
|
|
1771
|
+
const [atEnd, setAtEnd] = React20.useState(false);
|
|
1747
1772
|
const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
|
|
1748
|
-
const update =
|
|
1773
|
+
const update = React20.useCallback(() => {
|
|
1749
1774
|
const el = scrollerRef.current;
|
|
1750
1775
|
if (!el) return;
|
|
1751
1776
|
el.clientWidth;
|
|
@@ -1755,7 +1780,7 @@ function CardCarousel({
|
|
|
1755
1780
|
const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
|
|
1756
1781
|
setActive(Math.round(el.scrollLeft / slideW));
|
|
1757
1782
|
}, [gap]);
|
|
1758
|
-
|
|
1783
|
+
React20.useEffect(() => {
|
|
1759
1784
|
update();
|
|
1760
1785
|
const el = scrollerRef.current;
|
|
1761
1786
|
if (!el) return;
|
|
@@ -1888,7 +1913,7 @@ function FAB({
|
|
|
1888
1913
|
className = "",
|
|
1889
1914
|
style
|
|
1890
1915
|
}) {
|
|
1891
|
-
const [open, setOpen] =
|
|
1916
|
+
const [open, setOpen] = React20.useState(false);
|
|
1892
1917
|
const reduced = framerMotion.useReducedMotion();
|
|
1893
1918
|
const hasDial = !!actions && actions.length > 0;
|
|
1894
1919
|
const bottom = position.startsWith("bottom");
|
|
@@ -1959,6 +1984,22 @@ function FAB({
|
|
|
1959
1984
|
}
|
|
1960
1985
|
);
|
|
1961
1986
|
}
|
|
1987
|
+
var ICON_COLOR = {
|
|
1988
|
+
default: "text-foreground-muted",
|
|
1989
|
+
info: "text-status-info",
|
|
1990
|
+
warning: "text-status-warning",
|
|
1991
|
+
error: "text-status-error",
|
|
1992
|
+
danger: "text-status-error",
|
|
1993
|
+
success: "text-status-success"
|
|
1994
|
+
};
|
|
1995
|
+
var CONFIRM_VARIANT = {
|
|
1996
|
+
default: "primary",
|
|
1997
|
+
info: "info",
|
|
1998
|
+
warning: "warning",
|
|
1999
|
+
error: "danger",
|
|
2000
|
+
danger: "danger",
|
|
2001
|
+
success: "success"
|
|
2002
|
+
};
|
|
1962
2003
|
function PopConfirm({
|
|
1963
2004
|
children,
|
|
1964
2005
|
title,
|
|
@@ -1974,8 +2015,8 @@ function PopConfirm({
|
|
|
1974
2015
|
onOpenChange,
|
|
1975
2016
|
className = ""
|
|
1976
2017
|
}) {
|
|
1977
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
1978
|
-
const [loading, setLoading] =
|
|
2018
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React20.useState(false);
|
|
2019
|
+
const [loading, setLoading] = React20.useState(false);
|
|
1979
2020
|
const isOpen = open ?? uncontrolledOpen;
|
|
1980
2021
|
const setOpen = (next) => {
|
|
1981
2022
|
onOpenChange?.(next);
|
|
@@ -2002,33 +2043,39 @@ function PopConfirm({
|
|
|
2002
2043
|
side,
|
|
2003
2044
|
sideOffset: 8,
|
|
2004
2045
|
collisionPadding: 12,
|
|
2005
|
-
className: [
|
|
2006
|
-
"z-[400] w-64 rounded-lg border border-border bg-surface p-3.5 shadow-lg",
|
|
2007
|
-
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
2008
|
-
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
2009
|
-
className
|
|
2010
|
-
].filter(Boolean).join(" "),
|
|
2046
|
+
className: ["z-[400] focus:outline-none", className].filter(Boolean).join(" "),
|
|
2011
2047
|
children: [
|
|
2012
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2048
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2049
|
+
framerMotion.motion.div,
|
|
2050
|
+
{
|
|
2051
|
+
initial: { opacity: 0, scale: 0.95 },
|
|
2052
|
+
animate: { opacity: 1, scale: 1 },
|
|
2053
|
+
transition: { duration: 0.12, ease: [0.16, 1, 0.3, 1] },
|
|
2054
|
+
className: "w-64 rounded-lg border border-border bg-surface p-3.5 shadow-lg",
|
|
2055
|
+
children: [
|
|
2056
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5", children: [
|
|
2057
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center ${ICON_COLOR[tone]}`, children: icon }),
|
|
2058
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
2059
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
|
|
2060
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-foreground-secondary leading-snug", children: description })
|
|
2061
|
+
] })
|
|
2062
|
+
] }),
|
|
2063
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
|
|
2064
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button_default, { content: cancelText, size: "sm", variant: "ghost", onClick: handleCancel }),
|
|
2065
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2066
|
+
Button_default,
|
|
2067
|
+
{
|
|
2068
|
+
content: confirmText,
|
|
2069
|
+
size: "sm",
|
|
2070
|
+
variant: CONFIRM_VARIANT[tone],
|
|
2071
|
+
loading,
|
|
2072
|
+
onClick: handleConfirm
|
|
2073
|
+
}
|
|
2074
|
+
)
|
|
2075
|
+
] })
|
|
2076
|
+
]
|
|
2077
|
+
}
|
|
2078
|
+
),
|
|
2032
2079
|
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-surface" })
|
|
2033
2080
|
]
|
|
2034
2081
|
}
|
|
@@ -2065,16 +2112,16 @@ function Calendar2({
|
|
|
2065
2112
|
className = "",
|
|
2066
2113
|
style
|
|
2067
2114
|
}) {
|
|
2068
|
-
const today =
|
|
2069
|
-
const [internalMonth, setInternalMonth] =
|
|
2115
|
+
const today = React20.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
|
|
2116
|
+
const [internalMonth, setInternalMonth] = React20.useState(() => month ?? defaultMonth ?? value ?? today);
|
|
2070
2117
|
const visible = month ?? internalMonth;
|
|
2071
2118
|
const setMonth = (next) => {
|
|
2072
2119
|
onMonthChange?.(next);
|
|
2073
2120
|
if (month === void 0) setInternalMonth(next);
|
|
2074
2121
|
};
|
|
2075
|
-
const grid =
|
|
2076
|
-
const weekdays =
|
|
2077
|
-
const eventsByDay =
|
|
2122
|
+
const grid = React20.useMemo(() => buildGrid(visible, weekStartsOn), [visible, weekStartsOn]);
|
|
2123
|
+
const weekdays = React20.useMemo(() => Array.from({ length: 7 }, (_, i) => WEEKDAYS[(i + weekStartsOn) % 7]), [weekStartsOn]);
|
|
2124
|
+
const eventsByDay = React20.useMemo(() => {
|
|
2078
2125
|
const map = /* @__PURE__ */ new Map();
|
|
2079
2126
|
for (const ev of events ?? []) {
|
|
2080
2127
|
const key = startOfDay(ev.date).toDateString();
|
|
@@ -2229,7 +2276,7 @@ function Cart({
|
|
|
2229
2276
|
] })
|
|
2230
2277
|
] });
|
|
2231
2278
|
}
|
|
2232
|
-
var NotificationContext =
|
|
2279
|
+
var NotificationContext = React20.createContext({
|
|
2233
2280
|
open: () => void 0,
|
|
2234
2281
|
close: () => void 0
|
|
2235
2282
|
});
|
|
@@ -2287,26 +2334,26 @@ function NotificationItem({
|
|
|
2287
2334
|
onClose,
|
|
2288
2335
|
reduced
|
|
2289
2336
|
}) {
|
|
2290
|
-
const [paused, setPaused] =
|
|
2337
|
+
const [paused, setPaused] = React20.useState(false);
|
|
2291
2338
|
const duration = n.duration ?? 4e3;
|
|
2292
2339
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
2293
2340
|
const showProgress = !reduced && isAutoDismissing;
|
|
2294
|
-
const timerRef =
|
|
2295
|
-
const startTimeRef =
|
|
2296
|
-
const remainingRef =
|
|
2297
|
-
const clearTimer =
|
|
2341
|
+
const timerRef = React20.useRef(null);
|
|
2342
|
+
const startTimeRef = React20.useRef(0);
|
|
2343
|
+
const remainingRef = React20.useRef(duration);
|
|
2344
|
+
const clearTimer = React20.useCallback(() => {
|
|
2298
2345
|
if (timerRef.current !== null) {
|
|
2299
2346
|
clearTimeout(timerRef.current);
|
|
2300
2347
|
timerRef.current = null;
|
|
2301
2348
|
}
|
|
2302
2349
|
}, []);
|
|
2303
|
-
const scheduleDismiss =
|
|
2350
|
+
const scheduleDismiss = React20.useCallback((ms) => {
|
|
2304
2351
|
clearTimer();
|
|
2305
2352
|
if (!isAutoDismissing) return;
|
|
2306
2353
|
startTimeRef.current = Date.now();
|
|
2307
2354
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
2308
2355
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
2309
|
-
|
|
2356
|
+
React20.useEffect(() => {
|
|
2310
2357
|
if (paused || !isAutoDismissing) return;
|
|
2311
2358
|
scheduleDismiss(remainingRef.current);
|
|
2312
2359
|
return clearTimer;
|
|
@@ -2389,15 +2436,15 @@ function NotificationProvider({
|
|
|
2389
2436
|
children,
|
|
2390
2437
|
position = "top-right"
|
|
2391
2438
|
}) {
|
|
2392
|
-
const [notifications, setNotifications] =
|
|
2439
|
+
const [notifications, setNotifications] = React20.useState([]);
|
|
2393
2440
|
const reduced = framerMotion.useReducedMotion();
|
|
2394
|
-
const open =
|
|
2441
|
+
const open = React20.useCallback((payload) => {
|
|
2395
2442
|
setNotifications((prev) => [
|
|
2396
2443
|
...prev,
|
|
2397
2444
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
2398
2445
|
]);
|
|
2399
2446
|
}, []);
|
|
2400
|
-
const close =
|
|
2447
|
+
const close = React20.useCallback((id) => {
|
|
2401
2448
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
2402
2449
|
}, []);
|
|
2403
2450
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -2426,7 +2473,7 @@ function NotificationProvider({
|
|
|
2426
2473
|
] });
|
|
2427
2474
|
}
|
|
2428
2475
|
function useNotification() {
|
|
2429
|
-
const { open } =
|
|
2476
|
+
const { open } = React20.useContext(NotificationContext);
|
|
2430
2477
|
return {
|
|
2431
2478
|
info: (props) => open({ type: "info", ...props }),
|
|
2432
2479
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -2543,10 +2590,10 @@ function FadingBase({
|
|
|
2543
2590
|
isMounted = false,
|
|
2544
2591
|
children
|
|
2545
2592
|
}) {
|
|
2546
|
-
const [shouldRender, setShouldRender] =
|
|
2547
|
-
const [visible, setVisible] =
|
|
2548
|
-
const timerRef =
|
|
2549
|
-
|
|
2593
|
+
const [shouldRender, setShouldRender] = React20.useState(isMounted);
|
|
2594
|
+
const [visible, setVisible] = React20.useState(false);
|
|
2595
|
+
const timerRef = React20.useRef(null);
|
|
2596
|
+
React20.useEffect(() => {
|
|
2550
2597
|
if (isMounted) {
|
|
2551
2598
|
setShouldRender(true);
|
|
2552
2599
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -2644,8 +2691,8 @@ function ScalableContainer({
|
|
|
2644
2691
|
togglePosition = "top-right",
|
|
2645
2692
|
className = ""
|
|
2646
2693
|
}) {
|
|
2647
|
-
const containerRef =
|
|
2648
|
-
const [internalScaled, setInternalScaled] =
|
|
2694
|
+
const containerRef = React20.useRef(null);
|
|
2695
|
+
const [internalScaled, setInternalScaled] = React20.useState(false);
|
|
2649
2696
|
const isScaled = expanded ?? internalScaled;
|
|
2650
2697
|
const reduced = framerMotion.useReducedMotion();
|
|
2651
2698
|
const onToggle = () => {
|
|
@@ -2717,7 +2764,7 @@ function GridCard({ item, buttonText = "Open Application", onOpen, className = "
|
|
|
2717
2764
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1/4 flex items-center justify-center", children: typeof item.cover === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.cover, alt: "Grid Card Cover" }) : item.cover }),
|
|
2718
2765
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-prussian-blue text-sm dark:text-white text-center h-1/4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: item.description }) }),
|
|
2719
2766
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2720
|
-
|
|
2767
|
+
Button_default,
|
|
2721
2768
|
{
|
|
2722
2769
|
disabled: !item.enabled,
|
|
2723
2770
|
style: { width: "max-content", padding: "0 8px", margin: "0" },
|
|
@@ -2755,7 +2802,7 @@ function OpaqueGridCard({
|
|
|
2755
2802
|
}
|
|
2756
2803
|
),
|
|
2757
2804
|
/* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2758
|
-
|
|
2805
|
+
Button_default,
|
|
2759
2806
|
{
|
|
2760
2807
|
style: {
|
|
2761
2808
|
width: "max-content",
|
|
@@ -2783,17 +2830,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2783
2830
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap gap-2 ${className}`.trim(), children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(GridCard, { item, buttonText, onOpen }, item.key)) });
|
|
2784
2831
|
}
|
|
2785
2832
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2786
|
-
const [activeIndex, setActiveIndex] =
|
|
2787
|
-
const [indexPool, setIndexPool] =
|
|
2788
|
-
const cardRefs =
|
|
2789
|
-
const getIndexes =
|
|
2833
|
+
const [activeIndex, setActiveIndex] = React20.useState(0);
|
|
2834
|
+
const [indexPool, setIndexPool] = React20.useState([]);
|
|
2835
|
+
const cardRefs = React20.useRef([]);
|
|
2836
|
+
const getIndexes = React20.useMemo(() => {
|
|
2790
2837
|
let nextIndex = activeIndex + 1;
|
|
2791
2838
|
let previousIndex = activeIndex - 1;
|
|
2792
2839
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2793
2840
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2794
2841
|
return { previousIndex, nextIndex };
|
|
2795
2842
|
}, [activeIndex, items.length]);
|
|
2796
|
-
|
|
2843
|
+
React20.useEffect(() => {
|
|
2797
2844
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2798
2845
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2799
2846
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2827,7 +2874,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
|
2827
2874
|
onClick: previousApp,
|
|
2828
2875
|
"aria-label": "Previous",
|
|
2829
2876
|
className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence rotate-180",
|
|
2830
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke:
|
|
2877
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
2831
2878
|
}
|
|
2832
2879
|
),
|
|
2833
2880
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: indexPool.map((index, id) => {
|
|
@@ -2864,7 +2911,7 @@ function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
|
2864
2911
|
onClick: nextApp,
|
|
2865
2912
|
"aria-label": "Next",
|
|
2866
2913
|
className: "cursor-pointer rounded-lg transition-all duration-300 hover:bg-ice-dark dark:hover:bg-independence",
|
|
2867
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke:
|
|
2914
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: chunkOAV4TA4B_cjs.colors_default.PALETTE["prussian-blue"], strokeWidth: 2, className: "h-10 w-10 dark:stroke-white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
2868
2915
|
}
|
|
2869
2916
|
)
|
|
2870
2917
|
] }) });
|
|
@@ -2966,8 +3013,8 @@ function writeDismissed(key) {
|
|
|
2966
3013
|
}
|
|
2967
3014
|
}
|
|
2968
3015
|
function useTargetBbox(ref) {
|
|
2969
|
-
const [bbox, setBbox] =
|
|
2970
|
-
|
|
3016
|
+
const [bbox, setBbox] = React20.useState(null);
|
|
3017
|
+
React20.useLayoutEffect(() => {
|
|
2971
3018
|
const el = ref?.current;
|
|
2972
3019
|
if (!el) {
|
|
2973
3020
|
setBbox(null);
|
|
@@ -2997,7 +3044,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2997
3044
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2998
3045
|
}
|
|
2999
3046
|
function useFocusTrap(containerRef, active) {
|
|
3000
|
-
|
|
3047
|
+
React20.useEffect(() => {
|
|
3001
3048
|
if (!active) return;
|
|
3002
3049
|
const el = containerRef.current;
|
|
3003
3050
|
if (!el) return;
|
|
@@ -3036,16 +3083,16 @@ function Wizard({
|
|
|
3036
3083
|
onComplete,
|
|
3037
3084
|
onSkip
|
|
3038
3085
|
}) {
|
|
3039
|
-
const tooltipRef =
|
|
3040
|
-
const tooltipTitleId =
|
|
3041
|
-
const tooltipBodyId =
|
|
3086
|
+
const tooltipRef = React20.useRef(null);
|
|
3087
|
+
const tooltipTitleId = React20.useId();
|
|
3088
|
+
const tooltipBodyId = React20.useId();
|
|
3042
3089
|
const reduced = framerMotion.useReducedMotion();
|
|
3043
|
-
const [open, setOpen] =
|
|
3044
|
-
const [activeIndex, setActiveIndex] =
|
|
3090
|
+
const [open, setOpen] = React20.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
3091
|
+
const [activeIndex, setActiveIndex] = React20.useState(0);
|
|
3045
3092
|
const step = steps[activeIndex];
|
|
3046
3093
|
const bbox = useTargetBbox(step?.stepRef);
|
|
3047
3094
|
useFocusTrap(tooltipRef, open);
|
|
3048
|
-
|
|
3095
|
+
React20.useEffect(() => {
|
|
3049
3096
|
if (!open || !dismissible) return;
|
|
3050
3097
|
const onKey = (e) => {
|
|
3051
3098
|
if (e.key === "Escape") {
|
|
@@ -3056,12 +3103,12 @@ function Wizard({
|
|
|
3056
3103
|
document.addEventListener("keydown", onKey);
|
|
3057
3104
|
return () => document.removeEventListener("keydown", onKey);
|
|
3058
3105
|
}, [open, dismissible]);
|
|
3059
|
-
const handleSkip =
|
|
3106
|
+
const handleSkip = React20.useCallback(() => {
|
|
3060
3107
|
writeDismissed(storageKey);
|
|
3061
3108
|
setOpen(false);
|
|
3062
3109
|
onSkip?.();
|
|
3063
3110
|
}, [storageKey, onSkip]);
|
|
3064
|
-
const handleComplete =
|
|
3111
|
+
const handleComplete = React20.useCallback(() => {
|
|
3065
3112
|
writeDismissed(storageKey);
|
|
3066
3113
|
setOpen(false);
|
|
3067
3114
|
onComplete?.();
|
|
@@ -3169,7 +3216,7 @@ function Wizard({
|
|
|
3169
3216
|
] }),
|
|
3170
3217
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
3171
3218
|
dismissible && !isLast && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3172
|
-
|
|
3219
|
+
Button_default,
|
|
3173
3220
|
{
|
|
3174
3221
|
variant: "ghost",
|
|
3175
3222
|
size: "sm",
|
|
@@ -3178,7 +3225,7 @@ function Wizard({
|
|
|
3178
3225
|
}
|
|
3179
3226
|
),
|
|
3180
3227
|
activeIndex > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
3181
|
-
|
|
3228
|
+
Button_default,
|
|
3182
3229
|
{
|
|
3183
3230
|
variant: "secondary",
|
|
3184
3231
|
size: "sm",
|
|
@@ -3187,7 +3234,7 @@ function Wizard({
|
|
|
3187
3234
|
}
|
|
3188
3235
|
),
|
|
3189
3236
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3190
|
-
|
|
3237
|
+
Button_default,
|
|
3191
3238
|
{
|
|
3192
3239
|
size: "sm",
|
|
3193
3240
|
content: isLast ? "Done" : "Next",
|
|
@@ -3332,7 +3379,7 @@ function Field({
|
|
|
3332
3379
|
);
|
|
3333
3380
|
}
|
|
3334
3381
|
var SearchIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
|
|
3335
|
-
var SearchInput =
|
|
3382
|
+
var SearchInput = React20__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
3336
3383
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3337
3384
|
"div",
|
|
3338
3385
|
{
|
|
@@ -3386,11 +3433,11 @@ function MultiTagRow({
|
|
|
3386
3433
|
labelFor,
|
|
3387
3434
|
onRemove
|
|
3388
3435
|
}) {
|
|
3389
|
-
const wrapRef =
|
|
3390
|
-
const measureRef =
|
|
3391
|
-
const [visibleCount, setVisibleCount] =
|
|
3436
|
+
const wrapRef = React20.useRef(null);
|
|
3437
|
+
const measureRef = React20.useRef(null);
|
|
3438
|
+
const [visibleCount, setVisibleCount] = React20.useState(values.length);
|
|
3392
3439
|
const key = values.map(String).join("|");
|
|
3393
|
-
|
|
3440
|
+
React20.useLayoutEffect(() => {
|
|
3394
3441
|
const wrap = wrapRef.current;
|
|
3395
3442
|
const measure = measureRef.current;
|
|
3396
3443
|
if (!wrap || !measure) return;
|
|
@@ -3484,16 +3531,16 @@ function Dropdown({
|
|
|
3484
3531
|
size = "md",
|
|
3485
3532
|
className = ""
|
|
3486
3533
|
}) {
|
|
3487
|
-
const [open, setOpen] =
|
|
3488
|
-
const [selectedItems, setSelectedItems] =
|
|
3489
|
-
const [searchTerm, setSearchTerm] =
|
|
3490
|
-
const [innerItems, setInnerItems] =
|
|
3491
|
-
const errorId =
|
|
3534
|
+
const [open, setOpen] = React20.useState(false);
|
|
3535
|
+
const [selectedItems, setSelectedItems] = React20.useState([]);
|
|
3536
|
+
const [searchTerm, setSearchTerm] = React20.useState("");
|
|
3537
|
+
const [innerItems, setInnerItems] = React20.useState([]);
|
|
3538
|
+
const errorId = React20.useId();
|
|
3492
3539
|
const hasError = errorMessage != null;
|
|
3493
|
-
|
|
3540
|
+
React20.useEffect(() => {
|
|
3494
3541
|
setInnerItems(items);
|
|
3495
3542
|
}, [items]);
|
|
3496
|
-
|
|
3543
|
+
React20.useEffect(() => {
|
|
3497
3544
|
if (isMultiselect && Array.isArray(value)) {
|
|
3498
3545
|
setSelectedItems(value);
|
|
3499
3546
|
}
|
|
@@ -3818,7 +3865,7 @@ function TableBody({
|
|
|
3818
3865
|
expandRow,
|
|
3819
3866
|
getRowKey
|
|
3820
3867
|
}) {
|
|
3821
|
-
const [expanded, setExpanded] =
|
|
3868
|
+
const [expanded, setExpanded] = React20.useState(() => /* @__PURE__ */ new Set());
|
|
3822
3869
|
const reduced = framerMotion.useReducedMotion();
|
|
3823
3870
|
const toggleRow = (rowKey) => {
|
|
3824
3871
|
setExpanded((prev) => {
|
|
@@ -3833,7 +3880,7 @@ function TableBody({
|
|
|
3833
3880
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3834
3881
|
const rowKey = getRowKey(row, i);
|
|
3835
3882
|
const isExpanded = expanded.has(rowKey);
|
|
3836
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3883
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React20__default.default.Fragment, { children: [
|
|
3837
3884
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3838
3885
|
"tr",
|
|
3839
3886
|
{
|
|
@@ -3889,9 +3936,9 @@ function Pagination({
|
|
|
3889
3936
|
const matchedOption = picker.find(
|
|
3890
3937
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3891
3938
|
);
|
|
3892
|
-
const [perPageKey, setPerPageKey] =
|
|
3939
|
+
const [perPageKey, setPerPageKey] = React20.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3893
3940
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3894
|
-
|
|
3941
|
+
React20.useEffect(() => {
|
|
3895
3942
|
if (serverSide && options.perPage != null) {
|
|
3896
3943
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3897
3944
|
if (next) setPerPageKey(next.key);
|
|
@@ -3955,14 +4002,14 @@ function Table({
|
|
|
3955
4002
|
className = "",
|
|
3956
4003
|
style
|
|
3957
4004
|
}) {
|
|
3958
|
-
const searchRef =
|
|
3959
|
-
const [searchTerm, setSearchTerm] =
|
|
3960
|
-
const [perPage, setPerPage] =
|
|
4005
|
+
const searchRef = React20.useRef(null);
|
|
4006
|
+
const [searchTerm, setSearchTerm] = React20.useState("");
|
|
4007
|
+
const [perPage, setPerPage] = React20.useState(
|
|
3961
4008
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3962
4009
|
);
|
|
3963
|
-
const [activePage, setActivePage] =
|
|
4010
|
+
const [activePage, setActivePage] = React20.useState(0);
|
|
3964
4011
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3965
|
-
const filteredRows =
|
|
4012
|
+
const filteredRows = React20.useMemo(() => {
|
|
3966
4013
|
if (isServerSide || !searchTerm) return rows;
|
|
3967
4014
|
const term = searchTerm.toLowerCase();
|
|
3968
4015
|
return rows.filter(
|
|
@@ -3971,29 +4018,29 @@ function Table({
|
|
|
3971
4018
|
)
|
|
3972
4019
|
);
|
|
3973
4020
|
}, [rows, searchTerm, isServerSide]);
|
|
3974
|
-
const datasets =
|
|
4021
|
+
const datasets = React20.useMemo(() => {
|
|
3975
4022
|
if (isServerSide) return [rows];
|
|
3976
4023
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3977
4024
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3978
|
-
const MAX_PAGE =
|
|
4025
|
+
const MAX_PAGE = React20.useMemo(() => {
|
|
3979
4026
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3980
4027
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3981
4028
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3982
4029
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3983
4030
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3984
|
-
const currentPageRows =
|
|
4031
|
+
const currentPageRows = React20.useMemo(() => {
|
|
3985
4032
|
if (isServerSide) return rows;
|
|
3986
4033
|
return datasets[activePage] ?? [];
|
|
3987
4034
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3988
|
-
|
|
4035
|
+
React20.useEffect(() => {
|
|
3989
4036
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3990
4037
|
setPerPage(pagination.perPage);
|
|
3991
4038
|
}
|
|
3992
4039
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3993
|
-
|
|
4040
|
+
React20.useEffect(() => {
|
|
3994
4041
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3995
4042
|
}, [isServerSide, pagination.perPage]);
|
|
3996
|
-
|
|
4043
|
+
React20.useEffect(() => {
|
|
3997
4044
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3998
4045
|
setActivePage(pagination.page - 1);
|
|
3999
4046
|
}, [isServerSide, pagination.page]);
|
|
@@ -4077,7 +4124,7 @@ function TableSkeletonBody({
|
|
|
4077
4124
|
)) });
|
|
4078
4125
|
}
|
|
4079
4126
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
4080
|
-
const id =
|
|
4127
|
+
const id = React20.useId();
|
|
4081
4128
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
4082
4129
|
SwitchPrimitive__namespace.Root,
|
|
4083
4130
|
{
|
|
@@ -4261,7 +4308,7 @@ function Sidebar({
|
|
|
4261
4308
|
}
|
|
4262
4309
|
) });
|
|
4263
4310
|
}
|
|
4264
|
-
var MegaMenuContext =
|
|
4311
|
+
var MegaMenuContext = React20.createContext({ align: "start" });
|
|
4265
4312
|
function MegaMenu({
|
|
4266
4313
|
children,
|
|
4267
4314
|
align = "start",
|
|
@@ -4292,7 +4339,7 @@ function MegaMenu({
|
|
|
4292
4339
|
}
|
|
4293
4340
|
var TOP_ITEM = "group/top inline-flex items-center gap-1.5 h-10 px-3 rounded-md text-sm font-medium select-none text-foreground-secondary hover:text-foreground hover:bg-surface-raised data-[state=open]:text-accent data-[active]:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
|
|
4294
4341
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
4295
|
-
const { align } =
|
|
4342
|
+
const { align } = React20.useContext(MegaMenuContext);
|
|
4296
4343
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
4297
4344
|
if (!children) {
|
|
4298
4345
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -4377,8 +4424,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
4377
4424
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
4378
4425
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
|
|
4379
4426
|
}
|
|
4380
|
-
var elementsOfType = (children, type) =>
|
|
4381
|
-
(c) =>
|
|
4427
|
+
var elementsOfType = (children, type) => React20__default.default.Children.toArray(children).filter(
|
|
4428
|
+
(c) => React20__default.default.isValidElement(c) && c.type === type
|
|
4382
4429
|
);
|
|
4383
4430
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4384
4431
|
"svg",
|
|
@@ -4415,9 +4462,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
4415
4462
|
);
|
|
4416
4463
|
}
|
|
4417
4464
|
function MobilePanel({ panel, onNavigate }) {
|
|
4418
|
-
const nodes =
|
|
4465
|
+
const nodes = React20__default.default.Children.toArray(panel.props.children);
|
|
4419
4466
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
4420
|
-
if (!
|
|
4467
|
+
if (!React20__default.default.isValidElement(node)) return null;
|
|
4421
4468
|
const el = node;
|
|
4422
4469
|
if (el.type === MegaMenuSection) {
|
|
4423
4470
|
const { title, children } = el.props;
|
|
@@ -4436,8 +4483,8 @@ function MegaMenuMobile({
|
|
|
4436
4483
|
children,
|
|
4437
4484
|
label
|
|
4438
4485
|
}) {
|
|
4439
|
-
const [open, setOpen] =
|
|
4440
|
-
const [expanded, setExpanded] =
|
|
4486
|
+
const [open, setOpen] = React20.useState(false);
|
|
4487
|
+
const [expanded, setExpanded] = React20.useState(null);
|
|
4441
4488
|
const items = elementsOfType(children, MegaMenuItem);
|
|
4442
4489
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
4443
4490
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4510,17 +4557,17 @@ function AppShell({
|
|
|
4510
4557
|
children,
|
|
4511
4558
|
className = ""
|
|
4512
4559
|
}) {
|
|
4513
|
-
const [expanded, setExpanded] =
|
|
4514
|
-
const [isMobile, setIsMobile] =
|
|
4515
|
-
const [mobileOpen, setMobileOpen] =
|
|
4516
|
-
|
|
4560
|
+
const [expanded, setExpanded] = React20.useState(sidebarDefaultExpanded);
|
|
4561
|
+
const [isMobile, setIsMobile] = React20.useState(false);
|
|
4562
|
+
const [mobileOpen, setMobileOpen] = React20.useState(false);
|
|
4563
|
+
React20.useEffect(() => {
|
|
4517
4564
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
4518
4565
|
const update = (e) => setIsMobile(e.matches);
|
|
4519
4566
|
update(mq);
|
|
4520
4567
|
mq.addEventListener("change", update);
|
|
4521
4568
|
return () => mq.removeEventListener("change", update);
|
|
4522
4569
|
}, []);
|
|
4523
|
-
|
|
4570
|
+
React20.useEffect(() => {
|
|
4524
4571
|
if (!isMobile) setMobileOpen(false);
|
|
4525
4572
|
}, [isMobile]);
|
|
4526
4573
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4710,10 +4757,10 @@ function ThemeProvider({
|
|
|
4710
4757
|
className = "",
|
|
4711
4758
|
style
|
|
4712
4759
|
}) {
|
|
4713
|
-
const id =
|
|
4760
|
+
const id = React20__default.default.useId().replace(/:/g, "");
|
|
4714
4761
|
const scopeClass = `geo-th-${id}`;
|
|
4715
|
-
const divRef =
|
|
4716
|
-
|
|
4762
|
+
const divRef = React20.useRef(null);
|
|
4763
|
+
React20.useEffect(() => {
|
|
4717
4764
|
const el = divRef.current;
|
|
4718
4765
|
if (!el) return;
|
|
4719
4766
|
if (colorScheme === "auto") return;
|
|
@@ -4728,8 +4775,8 @@ function ThemeProvider({
|
|
|
4728
4775
|
}
|
|
4729
4776
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4730
4777
|
}, [colorScheme]);
|
|
4731
|
-
const lightVars =
|
|
4732
|
-
const darkVarStr =
|
|
4778
|
+
const lightVars = React20.useMemo(() => toCssVars(theme), [theme]);
|
|
4779
|
+
const darkVarStr = React20.useMemo(() => {
|
|
4733
4780
|
if (!darkTheme) return "";
|
|
4734
4781
|
const dvars = toCssVars(darkTheme);
|
|
4735
4782
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4769,7 +4816,7 @@ function TextInput({
|
|
|
4769
4816
|
prefix,
|
|
4770
4817
|
suffix
|
|
4771
4818
|
}) {
|
|
4772
|
-
const errorId =
|
|
4819
|
+
const errorId = React20.useId();
|
|
4773
4820
|
const hasError = errorMessage != null;
|
|
4774
4821
|
const hasAdornment = prefix != null || suffix != null;
|
|
4775
4822
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4839,7 +4886,7 @@ function NumberInput({
|
|
|
4839
4886
|
readOnly = false,
|
|
4840
4887
|
precision
|
|
4841
4888
|
}) {
|
|
4842
|
-
const errorId =
|
|
4889
|
+
const errorId = React20.useId();
|
|
4843
4890
|
const hasError = errorMessage != null;
|
|
4844
4891
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4845
4892
|
const round = (n) => {
|
|
@@ -4970,8 +5017,8 @@ function Password({
|
|
|
4970
5017
|
showIcon,
|
|
4971
5018
|
hideIcon
|
|
4972
5019
|
}) {
|
|
4973
|
-
const [visible, setVisible] =
|
|
4974
|
-
const errorId =
|
|
5020
|
+
const [visible, setVisible] = React20.useState(false);
|
|
5021
|
+
const errorId = React20.useId();
|
|
4975
5022
|
const hasError = errorMessage != null;
|
|
4976
5023
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4977
5024
|
Field,
|
|
@@ -5044,7 +5091,7 @@ function Checkbox({
|
|
|
5044
5091
|
}) {
|
|
5045
5092
|
const isChecked = checked ?? value ?? false;
|
|
5046
5093
|
const labelFirst = labelPosition === "left";
|
|
5047
|
-
const errorId =
|
|
5094
|
+
const errorId = React20.useId();
|
|
5048
5095
|
const hasError = errorMessage != null;
|
|
5049
5096
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
5050
5097
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -5152,8 +5199,8 @@ function RadioGroup({
|
|
|
5152
5199
|
className,
|
|
5153
5200
|
errorMessage
|
|
5154
5201
|
}) {
|
|
5155
|
-
const errorId =
|
|
5156
|
-
const groupId =
|
|
5202
|
+
const errorId = React20.useId();
|
|
5203
|
+
const groupId = React20.useId();
|
|
5157
5204
|
const hasError = errorMessage != null;
|
|
5158
5205
|
const labelFirst = labelPosition === "left";
|
|
5159
5206
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5253,11 +5300,11 @@ function Switch({
|
|
|
5253
5300
|
disabled,
|
|
5254
5301
|
errorMessage
|
|
5255
5302
|
}) {
|
|
5256
|
-
const id =
|
|
5257
|
-
const errorId =
|
|
5303
|
+
const id = React20.useId();
|
|
5304
|
+
const errorId = React20.useId();
|
|
5258
5305
|
const hasError = errorMessage != null;
|
|
5259
5306
|
const isControlled = checked !== void 0;
|
|
5260
|
-
const [internal, setInternal] =
|
|
5307
|
+
const [internal, setInternal] = React20.useState(defaultChecked);
|
|
5261
5308
|
const isOn = isControlled ? checked : internal;
|
|
5262
5309
|
const handle = (c) => {
|
|
5263
5310
|
if (!isControlled) setInternal(c);
|
|
@@ -5330,19 +5377,19 @@ function AutoComplete({
|
|
|
5330
5377
|
required,
|
|
5331
5378
|
htmlFor
|
|
5332
5379
|
}) {
|
|
5333
|
-
const errorId =
|
|
5380
|
+
const errorId = React20.useId();
|
|
5334
5381
|
const hasError = errorMessage != null;
|
|
5335
|
-
const [term, setTerm] =
|
|
5336
|
-
const [open, setOpen] =
|
|
5337
|
-
const [asyncItems, setAsyncItems] =
|
|
5338
|
-
const [loading, setLoading] =
|
|
5382
|
+
const [term, setTerm] = React20.useState("");
|
|
5383
|
+
const [open, setOpen] = React20.useState(false);
|
|
5384
|
+
const [asyncItems, setAsyncItems] = React20.useState([]);
|
|
5385
|
+
const [loading, setLoading] = React20.useState(false);
|
|
5339
5386
|
const isAsync = typeof onSearch === "function";
|
|
5340
|
-
const debounceRef =
|
|
5341
|
-
const requestIdRef =
|
|
5387
|
+
const debounceRef = React20.useRef(null);
|
|
5388
|
+
const requestIdRef = React20.useRef(0);
|
|
5342
5389
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
5343
5390
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
5344
5391
|
) : [];
|
|
5345
|
-
|
|
5392
|
+
React20.useEffect(() => {
|
|
5346
5393
|
if (!isAsync) return;
|
|
5347
5394
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5348
5395
|
if (!term.trim()) {
|
|
@@ -5498,15 +5545,15 @@ function TreeSelect({
|
|
|
5498
5545
|
defaultExpandedKeys = [],
|
|
5499
5546
|
size = "md"
|
|
5500
5547
|
}) {
|
|
5501
|
-
const errorId =
|
|
5548
|
+
const errorId = React20.useId();
|
|
5502
5549
|
const hasError = errorMessage != null;
|
|
5503
|
-
const [open, setOpen] =
|
|
5504
|
-
const [expanded, setExpanded] =
|
|
5505
|
-
const [activeIndex, setActiveIndex] =
|
|
5506
|
-
const listRef =
|
|
5507
|
-
const visible =
|
|
5508
|
-
const didSyncOnOpenRef =
|
|
5509
|
-
|
|
5550
|
+
const [open, setOpen] = React20.useState(false);
|
|
5551
|
+
const [expanded, setExpanded] = React20.useState(() => new Set(defaultExpandedKeys));
|
|
5552
|
+
const [activeIndex, setActiveIndex] = React20.useState(0);
|
|
5553
|
+
const listRef = React20.useRef(null);
|
|
5554
|
+
const visible = React20.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
5555
|
+
const didSyncOnOpenRef = React20.useRef(false);
|
|
5556
|
+
React20.useEffect(() => {
|
|
5510
5557
|
if (!open) {
|
|
5511
5558
|
didSyncOnOpenRef.current = false;
|
|
5512
5559
|
return;
|
|
@@ -5516,7 +5563,7 @@ function TreeSelect({
|
|
|
5516
5563
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
5517
5564
|
didSyncOnOpenRef.current = true;
|
|
5518
5565
|
}, [open, value]);
|
|
5519
|
-
const selectedNode =
|
|
5566
|
+
const selectedNode = React20.useMemo(
|
|
5520
5567
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
5521
5568
|
[items, value]
|
|
5522
5569
|
);
|
|
@@ -5747,11 +5794,11 @@ function FileInput({
|
|
|
5747
5794
|
required,
|
|
5748
5795
|
icon
|
|
5749
5796
|
}) {
|
|
5750
|
-
const inputRef =
|
|
5751
|
-
const errorId =
|
|
5752
|
-
const [files, setFiles] =
|
|
5753
|
-
const [dragging, setDragging] =
|
|
5754
|
-
const [sizeError, setSizeError] =
|
|
5797
|
+
const inputRef = React20.useRef(null);
|
|
5798
|
+
const errorId = React20.useId();
|
|
5799
|
+
const [files, setFiles] = React20.useState([]);
|
|
5800
|
+
const [dragging, setDragging] = React20.useState(false);
|
|
5801
|
+
const [sizeError, setSizeError] = React20.useState(null);
|
|
5755
5802
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5756
5803
|
const openPicker = () => {
|
|
5757
5804
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5942,30 +5989,30 @@ function DatePicker({
|
|
|
5942
5989
|
size = "md",
|
|
5943
5990
|
className = ""
|
|
5944
5991
|
}) {
|
|
5945
|
-
const errorId =
|
|
5992
|
+
const errorId = React20.useId();
|
|
5946
5993
|
const hasError = errorMessage != null;
|
|
5947
|
-
const [open, setOpen] =
|
|
5948
|
-
const [viewMonth, setViewMonth] =
|
|
5949
|
-
const [focusDate, setFocusDate] =
|
|
5950
|
-
const [view, setView] =
|
|
5951
|
-
const gridRef =
|
|
5952
|
-
|
|
5994
|
+
const [open, setOpen] = React20.useState(false);
|
|
5995
|
+
const [viewMonth, setViewMonth] = React20.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5996
|
+
const [focusDate, setFocusDate] = React20.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5997
|
+
const [view, setView] = React20.useState("days");
|
|
5998
|
+
const gridRef = React20.useRef(null);
|
|
5999
|
+
React20.useEffect(() => {
|
|
5953
6000
|
if (!open) return;
|
|
5954
6001
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5955
6002
|
setViewMonth(startOfMonth(target));
|
|
5956
6003
|
setFocusDate(target);
|
|
5957
6004
|
setView("days");
|
|
5958
6005
|
}, [open, value]);
|
|
5959
|
-
|
|
6006
|
+
React20.useEffect(() => {
|
|
5960
6007
|
if (!open) return;
|
|
5961
6008
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat2(focusDate)}"]`);
|
|
5962
6009
|
cell?.focus();
|
|
5963
6010
|
}, [open, focusDate]);
|
|
5964
|
-
const weekdays =
|
|
6011
|
+
const weekdays = React20.useMemo(() => {
|
|
5965
6012
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5966
6013
|
return ordered;
|
|
5967
6014
|
}, [weekStartsOn]);
|
|
5968
|
-
const grid =
|
|
6015
|
+
const grid = React20.useMemo(() => buildGrid2(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5969
6016
|
const isDisabled = (d) => {
|
|
5970
6017
|
if (min && d < min) return true;
|
|
5971
6018
|
if (max && d > max) return true;
|
|
@@ -6255,10 +6302,10 @@ function TextArea({
|
|
|
6255
6302
|
style,
|
|
6256
6303
|
inputStyle
|
|
6257
6304
|
}) {
|
|
6258
|
-
const errorId =
|
|
6305
|
+
const errorId = React20.useId();
|
|
6259
6306
|
const hasError = errorMessage != null;
|
|
6260
|
-
const ref =
|
|
6261
|
-
|
|
6307
|
+
const ref = React20.useRef(null);
|
|
6308
|
+
React20.useLayoutEffect(() => {
|
|
6262
6309
|
if (!autoGrow) return;
|
|
6263
6310
|
const el = ref.current;
|
|
6264
6311
|
if (!el) return;
|
|
@@ -6328,11 +6375,11 @@ function SegmentedControl({
|
|
|
6328
6375
|
"aria-label": ariaLabel
|
|
6329
6376
|
}) {
|
|
6330
6377
|
const sz = SIZE5[size];
|
|
6331
|
-
const groupId =
|
|
6332
|
-
const errorId =
|
|
6378
|
+
const groupId = React20.useId();
|
|
6379
|
+
const errorId = React20.useId();
|
|
6333
6380
|
const hasError = errorMessage != null;
|
|
6334
6381
|
const isControlled = value !== void 0;
|
|
6335
|
-
const [internal, setInternal] =
|
|
6382
|
+
const [internal, setInternal] = React20.useState(defaultValue);
|
|
6336
6383
|
const current = isControlled ? value : internal;
|
|
6337
6384
|
const handle = (v) => {
|
|
6338
6385
|
if (!v) return;
|
|
@@ -6426,14 +6473,14 @@ function Slider({
|
|
|
6426
6473
|
name,
|
|
6427
6474
|
htmlFor
|
|
6428
6475
|
}) {
|
|
6429
|
-
const errorId =
|
|
6476
|
+
const errorId = React20.useId();
|
|
6430
6477
|
const hasError = errorMessage != null;
|
|
6431
6478
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
6432
|
-
const [internal, setInternal] =
|
|
6479
|
+
const [internal, setInternal] = React20.useState(
|
|
6433
6480
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
6434
6481
|
);
|
|
6435
6482
|
const current = toArray(value) ?? internal;
|
|
6436
|
-
const [dragging, setDragging] =
|
|
6483
|
+
const [dragging, setDragging] = React20.useState(false);
|
|
6437
6484
|
const emit = (arr) => {
|
|
6438
6485
|
setInternal(arr);
|
|
6439
6486
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -6528,11 +6575,11 @@ function TagsInput({
|
|
|
6528
6575
|
validate,
|
|
6529
6576
|
separators = ["Enter", ","]
|
|
6530
6577
|
}) {
|
|
6531
|
-
const errorId =
|
|
6532
|
-
const inputRef =
|
|
6533
|
-
const [internal, setInternal] =
|
|
6534
|
-
const [draft, setDraft] =
|
|
6535
|
-
const [localError, setLocalError] =
|
|
6578
|
+
const errorId = React20.useId();
|
|
6579
|
+
const inputRef = React20.useRef(null);
|
|
6580
|
+
const [internal, setInternal] = React20.useState(defaultValue ?? []);
|
|
6581
|
+
const [draft, setDraft] = React20.useState("");
|
|
6582
|
+
const [localError, setLocalError] = React20.useState(null);
|
|
6536
6583
|
const tags = value ?? internal;
|
|
6537
6584
|
const hasError = errorMessage != null || localError != null;
|
|
6538
6585
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -6663,9 +6710,9 @@ function OtpInput({
|
|
|
6663
6710
|
className,
|
|
6664
6711
|
groupAfter
|
|
6665
6712
|
}) {
|
|
6666
|
-
const errorId =
|
|
6713
|
+
const errorId = React20.useId();
|
|
6667
6714
|
const hasError = errorMessage != null;
|
|
6668
|
-
const refs =
|
|
6715
|
+
const refs = React20.useRef([]);
|
|
6669
6716
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
6670
6717
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
6671
6718
|
const emit = (next) => {
|
|
@@ -6714,7 +6761,7 @@ function OtpInput({
|
|
|
6714
6761
|
emit(valid.join(""));
|
|
6715
6762
|
focusBox(valid.length);
|
|
6716
6763
|
};
|
|
6717
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
6764
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React20__default.default.Fragment, { children: [
|
|
6718
6765
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6719
6766
|
"input",
|
|
6720
6767
|
{
|
|
@@ -6772,9 +6819,9 @@ function Rating({
|
|
|
6772
6819
|
className,
|
|
6773
6820
|
required
|
|
6774
6821
|
}) {
|
|
6775
|
-
const errorId =
|
|
6776
|
-
const [internal, setInternal] =
|
|
6777
|
-
const [hover, setHover] =
|
|
6822
|
+
const errorId = React20.useId();
|
|
6823
|
+
const [internal, setInternal] = React20.useState(defaultValue);
|
|
6824
|
+
const [hover, setHover] = React20.useState(null);
|
|
6778
6825
|
const current = value ?? internal;
|
|
6779
6826
|
const display2 = hover ?? current;
|
|
6780
6827
|
const interactive = !readOnly && !disabled;
|
|
@@ -6897,9 +6944,9 @@ function TimePicker({
|
|
|
6897
6944
|
required,
|
|
6898
6945
|
style
|
|
6899
6946
|
}) {
|
|
6900
|
-
const errorId =
|
|
6947
|
+
const errorId = React20.useId();
|
|
6901
6948
|
const hasError = errorMessage != null;
|
|
6902
|
-
const [open, setOpen] =
|
|
6949
|
+
const [open, setOpen] = React20.useState(false);
|
|
6903
6950
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6904
6951
|
const update = (next) => {
|
|
6905
6952
|
const merged = { ...parsed, ...next };
|
|
@@ -7023,13 +7070,13 @@ function DateRangePicker({
|
|
|
7023
7070
|
required,
|
|
7024
7071
|
style
|
|
7025
7072
|
}) {
|
|
7026
|
-
const errorId =
|
|
7073
|
+
const errorId = React20.useId();
|
|
7027
7074
|
const hasError = errorMessage != null;
|
|
7028
|
-
const [open, setOpen] =
|
|
7029
|
-
const [leftMonth, setLeftMonth] =
|
|
7030
|
-
const [pendingStart, setPendingStart] =
|
|
7031
|
-
const [hoverDate, setHoverDate] =
|
|
7032
|
-
const weekdays =
|
|
7075
|
+
const [open, setOpen] = React20.useState(false);
|
|
7076
|
+
const [leftMonth, setLeftMonth] = React20.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
7077
|
+
const [pendingStart, setPendingStart] = React20.useState(null);
|
|
7078
|
+
const [hoverDate, setHoverDate] = React20.useState(null);
|
|
7079
|
+
const weekdays = React20.useMemo(
|
|
7033
7080
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
7034
7081
|
[weekStartsOn]
|
|
7035
7082
|
);
|
|
@@ -7205,10 +7252,10 @@ function ColorPicker({
|
|
|
7205
7252
|
required,
|
|
7206
7253
|
placeholder = "Pick a colour\u2026"
|
|
7207
7254
|
}) {
|
|
7208
|
-
const errorId =
|
|
7255
|
+
const errorId = React20.useId();
|
|
7209
7256
|
const hasError = errorMessage != null;
|
|
7210
|
-
const [open, setOpen] =
|
|
7211
|
-
const [draft, setDraft] =
|
|
7257
|
+
const [open, setOpen] = React20.useState(false);
|
|
7258
|
+
const [draft, setDraft] = React20.useState(value);
|
|
7212
7259
|
const valid = HEX_RE.test(value);
|
|
7213
7260
|
const pick = (hex) => {
|
|
7214
7261
|
onChange?.(hex);
|
|
@@ -7595,11 +7642,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
7595
7642
|
|
|
7596
7643
|
// src/form/useForm.ts
|
|
7597
7644
|
function useForm(options = {}) {
|
|
7598
|
-
const ref =
|
|
7645
|
+
const ref = React20.useRef(null);
|
|
7599
7646
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
7600
7647
|
const store = ref.current;
|
|
7601
|
-
|
|
7602
|
-
const make =
|
|
7648
|
+
React20.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7649
|
+
const make = React20.useCallback(
|
|
7603
7650
|
(kind) => (name, rules) => {
|
|
7604
7651
|
if (rules !== void 0) store.setRule(name, rules);
|
|
7605
7652
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -7628,9 +7675,9 @@ function useForm(options = {}) {
|
|
|
7628
7675
|
fieldTarget: make("target")
|
|
7629
7676
|
};
|
|
7630
7677
|
}
|
|
7631
|
-
var FormContext =
|
|
7678
|
+
var FormContext = React20.createContext(null);
|
|
7632
7679
|
function useFormStore() {
|
|
7633
|
-
const store =
|
|
7680
|
+
const store = React20.useContext(FormContext);
|
|
7634
7681
|
if (!store) {
|
|
7635
7682
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
7636
7683
|
}
|
|
@@ -7644,8 +7691,8 @@ function Form({
|
|
|
7644
7691
|
children,
|
|
7645
7692
|
...rest
|
|
7646
7693
|
}) {
|
|
7647
|
-
const ref =
|
|
7648
|
-
const bypass =
|
|
7694
|
+
const ref = React20.useRef(null);
|
|
7695
|
+
const bypass = React20.useRef(false);
|
|
7649
7696
|
const handleSubmit = async (e) => {
|
|
7650
7697
|
if (bypass.current) {
|
|
7651
7698
|
bypass.current = false;
|
|
@@ -7697,12 +7744,12 @@ function useFormField(name, options = {}) {
|
|
|
7697
7744
|
const store = useFormStore();
|
|
7698
7745
|
const { kind = "value", rules } = options;
|
|
7699
7746
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7700
|
-
|
|
7747
|
+
React20.useEffect(() => {
|
|
7701
7748
|
return () => {
|
|
7702
7749
|
if (rules !== void 0) store.removeRule(name);
|
|
7703
7750
|
};
|
|
7704
7751
|
}, [store, name]);
|
|
7705
|
-
const snap =
|
|
7752
|
+
const snap = React20.useSyncExternalStore(
|
|
7706
7753
|
store.subscribe,
|
|
7707
7754
|
() => store.getFieldSnapshot(name)
|
|
7708
7755
|
);
|
|
@@ -7714,7 +7761,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7714
7761
|
}
|
|
7715
7762
|
function useFieldArray(name) {
|
|
7716
7763
|
const store = useFormStore();
|
|
7717
|
-
|
|
7764
|
+
React20.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7718
7765
|
const arr = store.getValue(name) ?? [];
|
|
7719
7766
|
const keys = store.getKeys(name);
|
|
7720
7767
|
return {
|
|
@@ -7837,7 +7884,7 @@ function CreditCardForm({
|
|
|
7837
7884
|
className = "",
|
|
7838
7885
|
style
|
|
7839
7886
|
}) {
|
|
7840
|
-
const initial =
|
|
7887
|
+
const initial = React20.useRef({
|
|
7841
7888
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7842
7889
|
name: defaultValue?.name ?? "",
|
|
7843
7890
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7846,7 +7893,7 @@ function CreditCardForm({
|
|
|
7846
7893
|
const form = useForm({ initialValues: initial });
|
|
7847
7894
|
const numberStr = String(form.values.number ?? "");
|
|
7848
7895
|
const brand = detectBrand(numberStr);
|
|
7849
|
-
|
|
7896
|
+
React20.useEffect(() => {
|
|
7850
7897
|
onChange?.(toCard(form.values));
|
|
7851
7898
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7852
7899
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7922,7 +7969,7 @@ function CreditCardForm({
|
|
|
7922
7969
|
}
|
|
7923
7970
|
) })
|
|
7924
7971
|
] }),
|
|
7925
|
-
!hideSubmit && /* @__PURE__ */ jsxRuntime.jsx(
|
|
7972
|
+
!hideSubmit && /* @__PURE__ */ jsxRuntime.jsx(Button_default, { content: submitLabel, buttonType: "submit", variant: "primary", disabled })
|
|
7926
7973
|
]
|
|
7927
7974
|
}
|
|
7928
7975
|
);
|
|
@@ -7930,19 +7977,19 @@ function CreditCardForm({
|
|
|
7930
7977
|
|
|
7931
7978
|
Object.defineProperty(exports, "COLORS", {
|
|
7932
7979
|
enumerable: true,
|
|
7933
|
-
get: function () { return
|
|
7980
|
+
get: function () { return chunkOAV4TA4B_cjs.colors_default; }
|
|
7934
7981
|
});
|
|
7935
7982
|
Object.defineProperty(exports, "palette", {
|
|
7936
7983
|
enumerable: true,
|
|
7937
|
-
get: function () { return
|
|
7984
|
+
get: function () { return chunkOAV4TA4B_cjs.PALETTE; }
|
|
7938
7985
|
});
|
|
7939
7986
|
Object.defineProperty(exports, "semanticTokens", {
|
|
7940
7987
|
enumerable: true,
|
|
7941
|
-
get: function () { return
|
|
7988
|
+
get: function () { return chunkOAV4TA4B_cjs.semanticTokens; }
|
|
7942
7989
|
});
|
|
7943
7990
|
Object.defineProperty(exports, "vars", {
|
|
7944
7991
|
enumerable: true,
|
|
7945
|
-
get: function () { return
|
|
7992
|
+
get: function () { return chunkOAV4TA4B_cjs.vars; }
|
|
7946
7993
|
});
|
|
7947
7994
|
exports.Accordion = Accordion_default;
|
|
7948
7995
|
exports.AppShell = AppShell;
|
|
@@ -7951,7 +7998,7 @@ exports.Avatar = Avatar;
|
|
|
7951
7998
|
exports.Badge = Badge;
|
|
7952
7999
|
exports.Box = Box;
|
|
7953
8000
|
exports.Breadcrumbs = Breadcrumbs;
|
|
7954
|
-
exports.Button =
|
|
8001
|
+
exports.Button = Button_default;
|
|
7955
8002
|
exports.CARD_BRANDS = CARD_BRANDS;
|
|
7956
8003
|
exports.Calendar = Calendar2;
|
|
7957
8004
|
exports.Card = Card_default;
|