@geomak/ui 6.3.0 → 6.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +350 -195
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +87 -1
- package/dist/index.d.ts +87 -1
- package/dist/index.js +165 -12
- package/dist/index.js.map +1 -1
- package/dist/styles.css +31 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
var chunk255PCZIW_cjs = require('./chunk-255PCZIW.cjs');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
|
-
var
|
|
5
|
+
var React14 = 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 React14__default = /*#__PURE__*/_interopDefault(React14);
|
|
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] = React14.useState(null);
|
|
218
|
+
React14.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 = React14.useMemo(() => {
|
|
652
652
|
if (type === "primary") {
|
|
653
653
|
return "bg-accent text-accent-fg hover:bg-accent-hover";
|
|
654
654
|
}
|
|
@@ -960,9 +960,9 @@ function Tooltip({
|
|
|
960
960
|
] }) });
|
|
961
961
|
}
|
|
962
962
|
var TooltipProvider = TooltipPrimitive__namespace.Provider;
|
|
963
|
-
var TabsContext =
|
|
963
|
+
var TabsContext = React14.createContext(null);
|
|
964
964
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
965
|
+
const ctx = React14.useContext(TabsContext);
|
|
966
966
|
if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
|
|
967
967
|
return ctx;
|
|
968
968
|
}
|
|
@@ -984,26 +984,26 @@ function Tabs({
|
|
|
984
984
|
children
|
|
985
985
|
}) {
|
|
986
986
|
const isControlled = value !== void 0;
|
|
987
|
-
const [internal, setInternal] =
|
|
987
|
+
const [internal, setInternal] = React14.useState(defaultValue);
|
|
988
988
|
const current = isControlled ? value : internal;
|
|
989
989
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
990
|
+
const indicatorId = React14.useId();
|
|
991
|
+
const select = React14.useCallback((next) => {
|
|
992
992
|
if (!isControlled) setInternal(next);
|
|
993
993
|
onValueChange?.(next);
|
|
994
994
|
}, [isControlled, onValueChange]);
|
|
995
|
-
const registry =
|
|
996
|
-
const orderRef =
|
|
997
|
-
const [, bump] =
|
|
998
|
-
const registerTab =
|
|
995
|
+
const registry = React14.useRef(/* @__PURE__ */ new Map());
|
|
996
|
+
const orderRef = React14.useRef(0);
|
|
997
|
+
const [, bump] = React14.useState(0);
|
|
998
|
+
const registerTab = React14.useCallback((val, meta) => {
|
|
999
999
|
const existing = registry.current.get(val);
|
|
1000
1000
|
registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
|
|
1001
1001
|
if (!existing) bump((v) => v + 1);
|
|
1002
1002
|
}, []);
|
|
1003
|
-
const unregisterTab =
|
|
1003
|
+
const unregisterTab = React14.useCallback((val) => {
|
|
1004
1004
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1005
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1006
|
+
const getTabs = React14.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
1007
|
return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1008
1008
|
TabsPrimitive__namespace.Root,
|
|
1009
1009
|
{
|
|
@@ -1023,10 +1023,10 @@ function Tabs({
|
|
|
1023
1023
|
function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
1024
1024
|
const { variant, orientation, reduced, value } = useTabsContext();
|
|
1025
1025
|
const horizontal = orientation === "horizontal";
|
|
1026
|
-
const scrollRef =
|
|
1027
|
-
const [edges, setEdges] =
|
|
1026
|
+
const scrollRef = React14.useRef(null);
|
|
1027
|
+
const [edges, setEdges] = React14.useState({ start: false, end: false });
|
|
1028
1028
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1029
|
+
React14.useLayoutEffect(() => {
|
|
1030
1030
|
const el = scrollRef.current;
|
|
1031
1031
|
if (!el || !scrollable) return;
|
|
1032
1032
|
const update = () => {
|
|
@@ -1051,13 +1051,13 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
|
1051
1051
|
ro.disconnect();
|
|
1052
1052
|
};
|
|
1053
1053
|
}, [horizontal, scrollable, children]);
|
|
1054
|
-
const nudge =
|
|
1054
|
+
const nudge = React14.useCallback((dir) => {
|
|
1055
1055
|
const el = scrollRef.current;
|
|
1056
1056
|
if (!el) return;
|
|
1057
1057
|
const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
|
|
1058
1058
|
el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
|
|
1059
1059
|
}, [horizontal, reduced]);
|
|
1060
|
-
|
|
1060
|
+
React14.useLayoutEffect(() => {
|
|
1061
1061
|
const el = scrollRef.current;
|
|
1062
1062
|
if (!el || !scrollable) return;
|
|
1063
1063
|
const active = el.querySelector("[role=tab][data-state=active]");
|
|
@@ -1115,9 +1115,9 @@ function Chevron({ side, orientation, onClick }) {
|
|
|
1115
1115
|
function OverflowMenu() {
|
|
1116
1116
|
const { getTabs, value, select, orientation } = useTabsContext();
|
|
1117
1117
|
const horizontal = orientation === "horizontal";
|
|
1118
|
-
const [open, setOpen] =
|
|
1119
|
-
const wrapRef =
|
|
1120
|
-
const timer =
|
|
1118
|
+
const [open, setOpen] = React14.useState(false);
|
|
1119
|
+
const wrapRef = React14.useRef(null);
|
|
1120
|
+
const timer = React14.useRef(null);
|
|
1121
1121
|
const openNow = () => {
|
|
1122
1122
|
if (timer.current) clearTimeout(timer.current);
|
|
1123
1123
|
setOpen(true);
|
|
@@ -1125,7 +1125,7 @@ function OverflowMenu() {
|
|
|
1125
1125
|
const closeSoon = () => {
|
|
1126
1126
|
timer.current = setTimeout(() => setOpen(false), 160);
|
|
1127
1127
|
};
|
|
1128
|
-
|
|
1128
|
+
React14.useLayoutEffect(() => {
|
|
1129
1129
|
if (!open) return;
|
|
1130
1130
|
const onDoc = (e) => {
|
|
1131
1131
|
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
|
|
@@ -1206,7 +1206,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
|
|
|
1206
1206
|
const isActive = active === value;
|
|
1207
1207
|
const horizontal = orientation === "horizontal";
|
|
1208
1208
|
const sz = SIZE[size];
|
|
1209
|
-
|
|
1209
|
+
React14.useLayoutEffect(() => {
|
|
1210
1210
|
registerTab(value, { label: children, icon, disabled });
|
|
1211
1211
|
return () => unregisterTab(value);
|
|
1212
1212
|
}, [value, children, icon, disabled, registerTab, unregisterTab]);
|
|
@@ -1404,7 +1404,7 @@ function Tree({
|
|
|
1404
1404
|
item.key
|
|
1405
1405
|
)) });
|
|
1406
1406
|
}
|
|
1407
|
-
var AccordionCtx =
|
|
1407
|
+
var AccordionCtx = React14.createContext({ variant: "separated" });
|
|
1408
1408
|
function Accordion2({
|
|
1409
1409
|
children,
|
|
1410
1410
|
type = "single",
|
|
@@ -1463,7 +1463,7 @@ var Chevron2 = /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
1463
1463
|
}
|
|
1464
1464
|
);
|
|
1465
1465
|
function AccordionItem({ value, title, icon, children, disabled, className = "" }) {
|
|
1466
|
-
const { variant } =
|
|
1466
|
+
const { variant } = React14.useContext(AccordionCtx);
|
|
1467
1467
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1468
1468
|
AccordionPrimitive__namespace.Item,
|
|
1469
1469
|
{
|
|
@@ -1499,7 +1499,160 @@ function AccordionItem({ value, title, icon, children, disabled, className = ""
|
|
|
1499
1499
|
}
|
|
1500
1500
|
Accordion2.Item = AccordionItem;
|
|
1501
1501
|
var Accordion_default = Accordion2;
|
|
1502
|
-
var
|
|
1502
|
+
var DefaultSeparator = /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-3.5 w-3.5 text-foreground-muted", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
|
|
1503
|
+
var crumbBase = "inline-flex items-center gap-1.5 rounded px-1 -mx-1 text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
|
|
1504
|
+
function Crumb({ item, current }) {
|
|
1505
|
+
const inner = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1506
|
+
item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: item.icon }),
|
|
1507
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
|
|
1508
|
+
] });
|
|
1509
|
+
if (current) {
|
|
1510
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": "page", className: `${crumbBase} font-medium text-foreground max-w-[16rem]`, children: inner });
|
|
1511
|
+
}
|
|
1512
|
+
if (item.href || item.onClick) {
|
|
1513
|
+
return /* @__PURE__ */ jsxRuntime.jsx("a", { href: item.href, onClick: item.onClick, className: `${crumbBase} text-foreground-secondary hover:text-foreground max-w-[12rem]`, children: inner });
|
|
1514
|
+
}
|
|
1515
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${crumbBase} text-foreground-secondary max-w-[12rem]`, children: inner });
|
|
1516
|
+
}
|
|
1517
|
+
function Breadcrumbs({
|
|
1518
|
+
items,
|
|
1519
|
+
separator = DefaultSeparator,
|
|
1520
|
+
maxItems = 0,
|
|
1521
|
+
"aria-label": ariaLabel = "Breadcrumb",
|
|
1522
|
+
className = "",
|
|
1523
|
+
style
|
|
1524
|
+
}) {
|
|
1525
|
+
const [expanded, setExpanded] = React14.useState(false);
|
|
1526
|
+
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1527
|
+
const visible = [];
|
|
1528
|
+
if (shouldCollapse) {
|
|
1529
|
+
const tailCount = Math.max(1, maxItems - 1);
|
|
1530
|
+
visible.push({ item: items[0], index: 0 });
|
|
1531
|
+
visible.push("ellipsis");
|
|
1532
|
+
for (let i = items.length - tailCount; i < items.length; i++) visible.push({ item: items[i], index: i });
|
|
1533
|
+
} else {
|
|
1534
|
+
items.forEach((item, index) => visible.push({ item, index }));
|
|
1535
|
+
}
|
|
1536
|
+
return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": ariaLabel, className: ["min-w-0", className].filter(Boolean).join(" "), style, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 flex-nowrap min-w-0", children: visible.map((entry, i) => {
|
|
1537
|
+
const isLast = i === visible.length - 1;
|
|
1538
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5 min-w-0", children: [
|
|
1539
|
+
entry === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1540
|
+
"button",
|
|
1541
|
+
{
|
|
1542
|
+
type: "button",
|
|
1543
|
+
onClick: () => setExpanded(true),
|
|
1544
|
+
"aria-label": "Show hidden breadcrumbs",
|
|
1545
|
+
className: "inline-flex h-6 items-center rounded px-1.5 text-sm text-foreground-secondary hover:bg-surface-raised hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
1546
|
+
children: "\u2026"
|
|
1547
|
+
}
|
|
1548
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(Crumb, { item: entry.item, current: entry.index === items.length - 1 }),
|
|
1549
|
+
!isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0", children: separator })
|
|
1550
|
+
] }, entry === "ellipsis" ? "ellipsis" : entry.index);
|
|
1551
|
+
}) }) });
|
|
1552
|
+
}
|
|
1553
|
+
var TONE = {
|
|
1554
|
+
neutral: {
|
|
1555
|
+
solid: "bg-foreground-secondary text-background",
|
|
1556
|
+
soft: "bg-surface-raised text-foreground-secondary",
|
|
1557
|
+
outline: "border border-border text-foreground-secondary",
|
|
1558
|
+
dot: "bg-foreground-secondary"
|
|
1559
|
+
},
|
|
1560
|
+
accent: {
|
|
1561
|
+
solid: "bg-accent text-accent-fg",
|
|
1562
|
+
soft: "bg-accent/10 text-accent",
|
|
1563
|
+
outline: "border border-accent text-accent",
|
|
1564
|
+
dot: "bg-accent"
|
|
1565
|
+
},
|
|
1566
|
+
success: {
|
|
1567
|
+
solid: "bg-status-success text-white",
|
|
1568
|
+
soft: "bg-status-success/12 text-status-success",
|
|
1569
|
+
outline: "border border-status-success text-status-success",
|
|
1570
|
+
dot: "bg-status-success"
|
|
1571
|
+
},
|
|
1572
|
+
warning: {
|
|
1573
|
+
solid: "bg-status-warning text-white",
|
|
1574
|
+
soft: "bg-status-warning/15 text-status-warning",
|
|
1575
|
+
outline: "border border-status-warning text-status-warning",
|
|
1576
|
+
dot: "bg-status-warning"
|
|
1577
|
+
},
|
|
1578
|
+
error: {
|
|
1579
|
+
solid: "bg-status-error text-white",
|
|
1580
|
+
soft: "bg-status-error/12 text-status-error",
|
|
1581
|
+
outline: "border border-status-error text-status-error",
|
|
1582
|
+
dot: "bg-status-error"
|
|
1583
|
+
},
|
|
1584
|
+
info: {
|
|
1585
|
+
solid: "bg-status-info text-white",
|
|
1586
|
+
soft: "bg-status-info/12 text-status-info",
|
|
1587
|
+
outline: "border border-status-info text-status-info",
|
|
1588
|
+
dot: "bg-status-info"
|
|
1589
|
+
}
|
|
1590
|
+
};
|
|
1591
|
+
var SIZE2 = {
|
|
1592
|
+
sm: "h-[18px] px-1.5 text-[11px] gap-1 rounded-full",
|
|
1593
|
+
md: "h-5 px-2 text-xs gap-1 rounded-full"
|
|
1594
|
+
};
|
|
1595
|
+
function Badge({
|
|
1596
|
+
children,
|
|
1597
|
+
tone = "neutral",
|
|
1598
|
+
variant = "soft",
|
|
1599
|
+
size = "md",
|
|
1600
|
+
icon,
|
|
1601
|
+
count,
|
|
1602
|
+
max = 99,
|
|
1603
|
+
dot = false,
|
|
1604
|
+
showZero = false,
|
|
1605
|
+
className = "",
|
|
1606
|
+
style
|
|
1607
|
+
}) {
|
|
1608
|
+
const isIndicator = dot || count != null;
|
|
1609
|
+
const hidden = !dot && count != null && count === 0 && !showZero;
|
|
1610
|
+
const display2 = count != null && count > max ? `${max}+` : count;
|
|
1611
|
+
if (!isIndicator) {
|
|
1612
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1613
|
+
"span",
|
|
1614
|
+
{
|
|
1615
|
+
className: [
|
|
1616
|
+
"inline-flex items-center font-medium select-none whitespace-nowrap leading-none",
|
|
1617
|
+
SIZE2[size],
|
|
1618
|
+
TONE[tone][variant],
|
|
1619
|
+
className
|
|
1620
|
+
].filter(Boolean).join(" "),
|
|
1621
|
+
style,
|
|
1622
|
+
children: [
|
|
1623
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-3.5 w-3.5 items-center justify-center", children: icon }),
|
|
1624
|
+
children
|
|
1625
|
+
]
|
|
1626
|
+
}
|
|
1627
|
+
);
|
|
1628
|
+
}
|
|
1629
|
+
const indicator = dot ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
1630
|
+
"span",
|
|
1631
|
+
{
|
|
1632
|
+
className: ["inline-block rounded-full", size === "sm" ? "h-2 w-2" : "h-2.5 w-2.5", TONE[tone].dot, className].filter(Boolean).join(" "),
|
|
1633
|
+
style: children ? void 0 : style,
|
|
1634
|
+
"aria-hidden": children ? true : void 0
|
|
1635
|
+
}
|
|
1636
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
1637
|
+
"span",
|
|
1638
|
+
{
|
|
1639
|
+
className: [
|
|
1640
|
+
"inline-flex items-center justify-center rounded-full font-semibold leading-none tabular-nums",
|
|
1641
|
+
size === "sm" ? "h-4 min-w-4 px-1 text-[10px]" : "h-[18px] min-w-[18px] px-1.5 text-[11px]",
|
|
1642
|
+
TONE[tone].solid,
|
|
1643
|
+
className
|
|
1644
|
+
].filter(Boolean).join(" "),
|
|
1645
|
+
style: children ? void 0 : style,
|
|
1646
|
+
children: display2
|
|
1647
|
+
}
|
|
1648
|
+
);
|
|
1649
|
+
if (!children) return hidden ? null : indicator;
|
|
1650
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex", style, children: [
|
|
1651
|
+
children,
|
|
1652
|
+
!hidden && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -top-1 -right-1 flex", children: indicator })
|
|
1653
|
+
] });
|
|
1654
|
+
}
|
|
1655
|
+
var NotificationContext = React14.createContext({
|
|
1503
1656
|
open: () => void 0,
|
|
1504
1657
|
close: () => void 0
|
|
1505
1658
|
});
|
|
@@ -1557,26 +1710,26 @@ function NotificationItem({
|
|
|
1557
1710
|
onClose,
|
|
1558
1711
|
reduced
|
|
1559
1712
|
}) {
|
|
1560
|
-
const [paused, setPaused] =
|
|
1713
|
+
const [paused, setPaused] = React14.useState(false);
|
|
1561
1714
|
const duration = n.duration ?? 4e3;
|
|
1562
1715
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
1563
1716
|
const showProgress = !reduced && isAutoDismissing;
|
|
1564
|
-
const timerRef =
|
|
1565
|
-
const startTimeRef =
|
|
1566
|
-
const remainingRef =
|
|
1567
|
-
const clearTimer =
|
|
1717
|
+
const timerRef = React14.useRef(null);
|
|
1718
|
+
const startTimeRef = React14.useRef(0);
|
|
1719
|
+
const remainingRef = React14.useRef(duration);
|
|
1720
|
+
const clearTimer = React14.useCallback(() => {
|
|
1568
1721
|
if (timerRef.current !== null) {
|
|
1569
1722
|
clearTimeout(timerRef.current);
|
|
1570
1723
|
timerRef.current = null;
|
|
1571
1724
|
}
|
|
1572
1725
|
}, []);
|
|
1573
|
-
const scheduleDismiss =
|
|
1726
|
+
const scheduleDismiss = React14.useCallback((ms) => {
|
|
1574
1727
|
clearTimer();
|
|
1575
1728
|
if (!isAutoDismissing) return;
|
|
1576
1729
|
startTimeRef.current = Date.now();
|
|
1577
1730
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
1578
1731
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
1579
|
-
|
|
1732
|
+
React14.useEffect(() => {
|
|
1580
1733
|
if (paused || !isAutoDismissing) return;
|
|
1581
1734
|
scheduleDismiss(remainingRef.current);
|
|
1582
1735
|
return clearTimer;
|
|
@@ -1659,15 +1812,15 @@ function NotificationProvider({
|
|
|
1659
1812
|
children,
|
|
1660
1813
|
position = "top-right"
|
|
1661
1814
|
}) {
|
|
1662
|
-
const [notifications, setNotifications] =
|
|
1815
|
+
const [notifications, setNotifications] = React14.useState([]);
|
|
1663
1816
|
const reduced = framerMotion.useReducedMotion();
|
|
1664
|
-
const open =
|
|
1817
|
+
const open = React14.useCallback((payload) => {
|
|
1665
1818
|
setNotifications((prev) => [
|
|
1666
1819
|
...prev,
|
|
1667
1820
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
1668
1821
|
]);
|
|
1669
1822
|
}, []);
|
|
1670
|
-
const close =
|
|
1823
|
+
const close = React14.useCallback((id) => {
|
|
1671
1824
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
1672
1825
|
}, []);
|
|
1673
1826
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -1696,7 +1849,7 @@ function NotificationProvider({
|
|
|
1696
1849
|
] });
|
|
1697
1850
|
}
|
|
1698
1851
|
function useNotification() {
|
|
1699
|
-
const { open } =
|
|
1852
|
+
const { open } = React14.useContext(NotificationContext);
|
|
1700
1853
|
return {
|
|
1701
1854
|
info: (props) => open({ type: "info", ...props }),
|
|
1702
1855
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -1813,10 +1966,10 @@ function FadingBase({
|
|
|
1813
1966
|
isMounted = false,
|
|
1814
1967
|
children
|
|
1815
1968
|
}) {
|
|
1816
|
-
const [shouldRender, setShouldRender] =
|
|
1817
|
-
const [visible, setVisible] =
|
|
1818
|
-
const timerRef =
|
|
1819
|
-
|
|
1969
|
+
const [shouldRender, setShouldRender] = React14.useState(isMounted);
|
|
1970
|
+
const [visible, setVisible] = React14.useState(false);
|
|
1971
|
+
const timerRef = React14.useRef(null);
|
|
1972
|
+
React14.useEffect(() => {
|
|
1820
1973
|
if (isMounted) {
|
|
1821
1974
|
setShouldRender(true);
|
|
1822
1975
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -1914,8 +2067,8 @@ function ScalableContainer({
|
|
|
1914
2067
|
togglePosition = "top-right",
|
|
1915
2068
|
className = ""
|
|
1916
2069
|
}) {
|
|
1917
|
-
const containerRef =
|
|
1918
|
-
const [internalScaled, setInternalScaled] =
|
|
2070
|
+
const containerRef = React14.useRef(null);
|
|
2071
|
+
const [internalScaled, setInternalScaled] = React14.useState(false);
|
|
1919
2072
|
const isScaled = expanded ?? internalScaled;
|
|
1920
2073
|
const reduced = framerMotion.useReducedMotion();
|
|
1921
2074
|
const onToggle = () => {
|
|
@@ -2053,17 +2206,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2053
2206
|
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)) });
|
|
2054
2207
|
}
|
|
2055
2208
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2056
|
-
const [activeIndex, setActiveIndex] =
|
|
2057
|
-
const [indexPool, setIndexPool] =
|
|
2058
|
-
const cardRefs =
|
|
2059
|
-
const getIndexes =
|
|
2209
|
+
const [activeIndex, setActiveIndex] = React14.useState(0);
|
|
2210
|
+
const [indexPool, setIndexPool] = React14.useState([]);
|
|
2211
|
+
const cardRefs = React14.useRef([]);
|
|
2212
|
+
const getIndexes = React14.useMemo(() => {
|
|
2060
2213
|
let nextIndex = activeIndex + 1;
|
|
2061
2214
|
let previousIndex = activeIndex - 1;
|
|
2062
2215
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2063
2216
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2064
2217
|
return { previousIndex, nextIndex };
|
|
2065
2218
|
}, [activeIndex, items.length]);
|
|
2066
|
-
|
|
2219
|
+
React14.useEffect(() => {
|
|
2067
2220
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2068
2221
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2069
2222
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2236,8 +2389,8 @@ function writeDismissed(key) {
|
|
|
2236
2389
|
}
|
|
2237
2390
|
}
|
|
2238
2391
|
function useTargetBbox(ref) {
|
|
2239
|
-
const [bbox, setBbox] =
|
|
2240
|
-
|
|
2392
|
+
const [bbox, setBbox] = React14.useState(null);
|
|
2393
|
+
React14.useLayoutEffect(() => {
|
|
2241
2394
|
const el = ref?.current;
|
|
2242
2395
|
if (!el) {
|
|
2243
2396
|
setBbox(null);
|
|
@@ -2267,7 +2420,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2267
2420
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2268
2421
|
}
|
|
2269
2422
|
function useFocusTrap(containerRef, active) {
|
|
2270
|
-
|
|
2423
|
+
React14.useEffect(() => {
|
|
2271
2424
|
if (!active) return;
|
|
2272
2425
|
const el = containerRef.current;
|
|
2273
2426
|
if (!el) return;
|
|
@@ -2306,16 +2459,16 @@ function Wizard({
|
|
|
2306
2459
|
onComplete,
|
|
2307
2460
|
onSkip
|
|
2308
2461
|
}) {
|
|
2309
|
-
const tooltipRef =
|
|
2310
|
-
const tooltipTitleId =
|
|
2311
|
-
const tooltipBodyId =
|
|
2462
|
+
const tooltipRef = React14.useRef(null);
|
|
2463
|
+
const tooltipTitleId = React14.useId();
|
|
2464
|
+
const tooltipBodyId = React14.useId();
|
|
2312
2465
|
const reduced = framerMotion.useReducedMotion();
|
|
2313
|
-
const [open, setOpen] =
|
|
2314
|
-
const [activeIndex, setActiveIndex] =
|
|
2466
|
+
const [open, setOpen] = React14.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2467
|
+
const [activeIndex, setActiveIndex] = React14.useState(0);
|
|
2315
2468
|
const step = steps[activeIndex];
|
|
2316
2469
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2317
2470
|
useFocusTrap(tooltipRef, open);
|
|
2318
|
-
|
|
2471
|
+
React14.useEffect(() => {
|
|
2319
2472
|
if (!open || !dismissible) return;
|
|
2320
2473
|
const onKey = (e) => {
|
|
2321
2474
|
if (e.key === "Escape") {
|
|
@@ -2326,12 +2479,12 @@ function Wizard({
|
|
|
2326
2479
|
document.addEventListener("keydown", onKey);
|
|
2327
2480
|
return () => document.removeEventListener("keydown", onKey);
|
|
2328
2481
|
}, [open, dismissible]);
|
|
2329
|
-
const handleSkip =
|
|
2482
|
+
const handleSkip = React14.useCallback(() => {
|
|
2330
2483
|
writeDismissed(storageKey);
|
|
2331
2484
|
setOpen(false);
|
|
2332
2485
|
onSkip?.();
|
|
2333
2486
|
}, [storageKey, onSkip]);
|
|
2334
|
-
const handleComplete =
|
|
2487
|
+
const handleComplete = React14.useCallback(() => {
|
|
2335
2488
|
writeDismissed(storageKey);
|
|
2336
2489
|
setOpen(false);
|
|
2337
2490
|
onComplete?.();
|
|
@@ -2602,7 +2755,7 @@ function Field({
|
|
|
2602
2755
|
);
|
|
2603
2756
|
}
|
|
2604
2757
|
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" }) });
|
|
2605
|
-
var SearchInput =
|
|
2758
|
+
var SearchInput = React14__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
2606
2759
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2607
2760
|
"div",
|
|
2608
2761
|
{
|
|
@@ -2656,11 +2809,11 @@ function MultiTagRow({
|
|
|
2656
2809
|
labelFor,
|
|
2657
2810
|
onRemove
|
|
2658
2811
|
}) {
|
|
2659
|
-
const wrapRef =
|
|
2660
|
-
const measureRef =
|
|
2661
|
-
const [visibleCount, setVisibleCount] =
|
|
2812
|
+
const wrapRef = React14.useRef(null);
|
|
2813
|
+
const measureRef = React14.useRef(null);
|
|
2814
|
+
const [visibleCount, setVisibleCount] = React14.useState(values.length);
|
|
2662
2815
|
const key = values.map(String).join("|");
|
|
2663
|
-
|
|
2816
|
+
React14.useLayoutEffect(() => {
|
|
2664
2817
|
const wrap = wrapRef.current;
|
|
2665
2818
|
const measure = measureRef.current;
|
|
2666
2819
|
if (!wrap || !measure) return;
|
|
@@ -2754,16 +2907,16 @@ function Dropdown({
|
|
|
2754
2907
|
size = "md",
|
|
2755
2908
|
className = ""
|
|
2756
2909
|
}) {
|
|
2757
|
-
const [open, setOpen] =
|
|
2758
|
-
const [selectedItems, setSelectedItems] =
|
|
2759
|
-
const [searchTerm, setSearchTerm] =
|
|
2760
|
-
const [innerItems, setInnerItems] =
|
|
2761
|
-
const errorId =
|
|
2910
|
+
const [open, setOpen] = React14.useState(false);
|
|
2911
|
+
const [selectedItems, setSelectedItems] = React14.useState([]);
|
|
2912
|
+
const [searchTerm, setSearchTerm] = React14.useState("");
|
|
2913
|
+
const [innerItems, setInnerItems] = React14.useState([]);
|
|
2914
|
+
const errorId = React14.useId();
|
|
2762
2915
|
const hasError = errorMessage != null;
|
|
2763
|
-
|
|
2916
|
+
React14.useEffect(() => {
|
|
2764
2917
|
setInnerItems(items);
|
|
2765
2918
|
}, [items]);
|
|
2766
|
-
|
|
2919
|
+
React14.useEffect(() => {
|
|
2767
2920
|
if (isMultiselect && Array.isArray(value)) {
|
|
2768
2921
|
setSelectedItems(value);
|
|
2769
2922
|
}
|
|
@@ -3088,7 +3241,7 @@ function TableBody({
|
|
|
3088
3241
|
expandRow,
|
|
3089
3242
|
getRowKey
|
|
3090
3243
|
}) {
|
|
3091
|
-
const [expanded, setExpanded] =
|
|
3244
|
+
const [expanded, setExpanded] = React14.useState(() => /* @__PURE__ */ new Set());
|
|
3092
3245
|
const reduced = framerMotion.useReducedMotion();
|
|
3093
3246
|
const toggleRow = (rowKey) => {
|
|
3094
3247
|
setExpanded((prev) => {
|
|
@@ -3103,7 +3256,7 @@ function TableBody({
|
|
|
3103
3256
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3104
3257
|
const rowKey = getRowKey(row, i);
|
|
3105
3258
|
const isExpanded = expanded.has(rowKey);
|
|
3106
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3259
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React14__default.default.Fragment, { children: [
|
|
3107
3260
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3108
3261
|
"tr",
|
|
3109
3262
|
{
|
|
@@ -3159,9 +3312,9 @@ function Pagination({
|
|
|
3159
3312
|
const matchedOption = picker.find(
|
|
3160
3313
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3161
3314
|
);
|
|
3162
|
-
const [perPageKey, setPerPageKey] =
|
|
3315
|
+
const [perPageKey, setPerPageKey] = React14.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3163
3316
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3164
|
-
|
|
3317
|
+
React14.useEffect(() => {
|
|
3165
3318
|
if (serverSide && options.perPage != null) {
|
|
3166
3319
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3167
3320
|
if (next) setPerPageKey(next.key);
|
|
@@ -3225,14 +3378,14 @@ function Table({
|
|
|
3225
3378
|
className = "",
|
|
3226
3379
|
style
|
|
3227
3380
|
}) {
|
|
3228
|
-
const searchRef =
|
|
3229
|
-
const [searchTerm, setSearchTerm] =
|
|
3230
|
-
const [perPage, setPerPage] =
|
|
3381
|
+
const searchRef = React14.useRef(null);
|
|
3382
|
+
const [searchTerm, setSearchTerm] = React14.useState("");
|
|
3383
|
+
const [perPage, setPerPage] = React14.useState(
|
|
3231
3384
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3232
3385
|
);
|
|
3233
|
-
const [activePage, setActivePage] =
|
|
3386
|
+
const [activePage, setActivePage] = React14.useState(0);
|
|
3234
3387
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3235
|
-
const filteredRows =
|
|
3388
|
+
const filteredRows = React14.useMemo(() => {
|
|
3236
3389
|
if (isServerSide || !searchTerm) return rows;
|
|
3237
3390
|
const term = searchTerm.toLowerCase();
|
|
3238
3391
|
return rows.filter(
|
|
@@ -3241,29 +3394,29 @@ function Table({
|
|
|
3241
3394
|
)
|
|
3242
3395
|
);
|
|
3243
3396
|
}, [rows, searchTerm, isServerSide]);
|
|
3244
|
-
const datasets =
|
|
3397
|
+
const datasets = React14.useMemo(() => {
|
|
3245
3398
|
if (isServerSide) return [rows];
|
|
3246
3399
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3247
3400
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3248
|
-
const MAX_PAGE =
|
|
3401
|
+
const MAX_PAGE = React14.useMemo(() => {
|
|
3249
3402
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3250
3403
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3251
3404
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3252
3405
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3253
3406
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3254
|
-
const currentPageRows =
|
|
3407
|
+
const currentPageRows = React14.useMemo(() => {
|
|
3255
3408
|
if (isServerSide) return rows;
|
|
3256
3409
|
return datasets[activePage] ?? [];
|
|
3257
3410
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3258
|
-
|
|
3411
|
+
React14.useEffect(() => {
|
|
3259
3412
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3260
3413
|
setPerPage(pagination.perPage);
|
|
3261
3414
|
}
|
|
3262
3415
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3263
|
-
|
|
3416
|
+
React14.useEffect(() => {
|
|
3264
3417
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3265
3418
|
}, [isServerSide, pagination.perPage]);
|
|
3266
|
-
|
|
3419
|
+
React14.useEffect(() => {
|
|
3267
3420
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3268
3421
|
setActivePage(pagination.page - 1);
|
|
3269
3422
|
}, [isServerSide, pagination.page]);
|
|
@@ -3347,7 +3500,7 @@ function TableSkeletonBody({
|
|
|
3347
3500
|
)) });
|
|
3348
3501
|
}
|
|
3349
3502
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3350
|
-
const id =
|
|
3503
|
+
const id = React14.useId();
|
|
3351
3504
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3352
3505
|
SwitchPrimitive__namespace.Root,
|
|
3353
3506
|
{
|
|
@@ -3531,7 +3684,7 @@ function Sidebar({
|
|
|
3531
3684
|
}
|
|
3532
3685
|
) });
|
|
3533
3686
|
}
|
|
3534
|
-
var MegaMenuContext =
|
|
3687
|
+
var MegaMenuContext = React14.createContext({ align: "start" });
|
|
3535
3688
|
function MegaMenu({
|
|
3536
3689
|
children,
|
|
3537
3690
|
align = "start",
|
|
@@ -3562,7 +3715,7 @@ function MegaMenu({
|
|
|
3562
3715
|
}
|
|
3563
3716
|
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";
|
|
3564
3717
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
3565
|
-
const { align } =
|
|
3718
|
+
const { align } = React14.useContext(MegaMenuContext);
|
|
3566
3719
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
3567
3720
|
if (!children) {
|
|
3568
3721
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -3647,8 +3800,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
3647
3800
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
3648
3801
|
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 });
|
|
3649
3802
|
}
|
|
3650
|
-
var elementsOfType = (children, type) =>
|
|
3651
|
-
(c) =>
|
|
3803
|
+
var elementsOfType = (children, type) => React14__default.default.Children.toArray(children).filter(
|
|
3804
|
+
(c) => React14__default.default.isValidElement(c) && c.type === type
|
|
3652
3805
|
);
|
|
3653
3806
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
3654
3807
|
"svg",
|
|
@@ -3685,9 +3838,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
3685
3838
|
);
|
|
3686
3839
|
}
|
|
3687
3840
|
function MobilePanel({ panel, onNavigate }) {
|
|
3688
|
-
const nodes =
|
|
3841
|
+
const nodes = React14__default.default.Children.toArray(panel.props.children);
|
|
3689
3842
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
3690
|
-
if (!
|
|
3843
|
+
if (!React14__default.default.isValidElement(node)) return null;
|
|
3691
3844
|
const el = node;
|
|
3692
3845
|
if (el.type === MegaMenuSection) {
|
|
3693
3846
|
const { title, children } = el.props;
|
|
@@ -3706,8 +3859,8 @@ function MegaMenuMobile({
|
|
|
3706
3859
|
children,
|
|
3707
3860
|
label
|
|
3708
3861
|
}) {
|
|
3709
|
-
const [open, setOpen] =
|
|
3710
|
-
const [expanded, setExpanded] =
|
|
3862
|
+
const [open, setOpen] = React14.useState(false);
|
|
3863
|
+
const [expanded, setExpanded] = React14.useState(null);
|
|
3711
3864
|
const items = elementsOfType(children, MegaMenuItem);
|
|
3712
3865
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
3713
3866
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3780,17 +3933,17 @@ function AppShell({
|
|
|
3780
3933
|
children,
|
|
3781
3934
|
className = ""
|
|
3782
3935
|
}) {
|
|
3783
|
-
const [expanded, setExpanded] =
|
|
3784
|
-
const [isMobile, setIsMobile] =
|
|
3785
|
-
const [mobileOpen, setMobileOpen] =
|
|
3786
|
-
|
|
3936
|
+
const [expanded, setExpanded] = React14.useState(sidebarDefaultExpanded);
|
|
3937
|
+
const [isMobile, setIsMobile] = React14.useState(false);
|
|
3938
|
+
const [mobileOpen, setMobileOpen] = React14.useState(false);
|
|
3939
|
+
React14.useEffect(() => {
|
|
3787
3940
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
3788
3941
|
const update = (e) => setIsMobile(e.matches);
|
|
3789
3942
|
update(mq);
|
|
3790
3943
|
mq.addEventListener("change", update);
|
|
3791
3944
|
return () => mq.removeEventListener("change", update);
|
|
3792
3945
|
}, []);
|
|
3793
|
-
|
|
3946
|
+
React14.useEffect(() => {
|
|
3794
3947
|
if (!isMobile) setMobileOpen(false);
|
|
3795
3948
|
}, [isMobile]);
|
|
3796
3949
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -3980,10 +4133,10 @@ function ThemeProvider({
|
|
|
3980
4133
|
className = "",
|
|
3981
4134
|
style
|
|
3982
4135
|
}) {
|
|
3983
|
-
const id =
|
|
4136
|
+
const id = React14__default.default.useId().replace(/:/g, "");
|
|
3984
4137
|
const scopeClass = `geo-th-${id}`;
|
|
3985
|
-
const divRef =
|
|
3986
|
-
|
|
4138
|
+
const divRef = React14.useRef(null);
|
|
4139
|
+
React14.useEffect(() => {
|
|
3987
4140
|
const el = divRef.current;
|
|
3988
4141
|
if (!el) return;
|
|
3989
4142
|
if (colorScheme === "auto") return;
|
|
@@ -3998,8 +4151,8 @@ function ThemeProvider({
|
|
|
3998
4151
|
}
|
|
3999
4152
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4000
4153
|
}, [colorScheme]);
|
|
4001
|
-
const lightVars =
|
|
4002
|
-
const darkVarStr =
|
|
4154
|
+
const lightVars = React14.useMemo(() => toCssVars(theme), [theme]);
|
|
4155
|
+
const darkVarStr = React14.useMemo(() => {
|
|
4003
4156
|
if (!darkTheme) return "";
|
|
4004
4157
|
const dvars = toCssVars(darkTheme);
|
|
4005
4158
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4039,7 +4192,7 @@ function TextInput({
|
|
|
4039
4192
|
prefix,
|
|
4040
4193
|
suffix
|
|
4041
4194
|
}) {
|
|
4042
|
-
const errorId =
|
|
4195
|
+
const errorId = React14.useId();
|
|
4043
4196
|
const hasError = errorMessage != null;
|
|
4044
4197
|
const hasAdornment = prefix != null || suffix != null;
|
|
4045
4198
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4109,7 +4262,7 @@ function NumberInput({
|
|
|
4109
4262
|
readOnly = false,
|
|
4110
4263
|
precision
|
|
4111
4264
|
}) {
|
|
4112
|
-
const errorId =
|
|
4265
|
+
const errorId = React14.useId();
|
|
4113
4266
|
const hasError = errorMessage != null;
|
|
4114
4267
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4115
4268
|
const round = (n) => {
|
|
@@ -4240,8 +4393,8 @@ function Password({
|
|
|
4240
4393
|
showIcon,
|
|
4241
4394
|
hideIcon
|
|
4242
4395
|
}) {
|
|
4243
|
-
const [visible, setVisible] =
|
|
4244
|
-
const errorId =
|
|
4396
|
+
const [visible, setVisible] = React14.useState(false);
|
|
4397
|
+
const errorId = React14.useId();
|
|
4245
4398
|
const hasError = errorMessage != null;
|
|
4246
4399
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4247
4400
|
Field,
|
|
@@ -4314,7 +4467,7 @@ function Checkbox({
|
|
|
4314
4467
|
}) {
|
|
4315
4468
|
const isChecked = checked ?? value ?? false;
|
|
4316
4469
|
const labelFirst = labelPosition === "left";
|
|
4317
|
-
const errorId =
|
|
4470
|
+
const errorId = React14.useId();
|
|
4318
4471
|
const hasError = errorMessage != null;
|
|
4319
4472
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4320
4473
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4422,8 +4575,8 @@ function RadioGroup({
|
|
|
4422
4575
|
className,
|
|
4423
4576
|
errorMessage
|
|
4424
4577
|
}) {
|
|
4425
|
-
const errorId =
|
|
4426
|
-
const groupId =
|
|
4578
|
+
const errorId = React14.useId();
|
|
4579
|
+
const groupId = React14.useId();
|
|
4427
4580
|
const hasError = errorMessage != null;
|
|
4428
4581
|
const labelFirst = labelPosition === "left";
|
|
4429
4582
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4523,11 +4676,11 @@ function Switch({
|
|
|
4523
4676
|
disabled,
|
|
4524
4677
|
errorMessage
|
|
4525
4678
|
}) {
|
|
4526
|
-
const id =
|
|
4527
|
-
const errorId =
|
|
4679
|
+
const id = React14.useId();
|
|
4680
|
+
const errorId = React14.useId();
|
|
4528
4681
|
const hasError = errorMessage != null;
|
|
4529
4682
|
const isControlled = checked !== void 0;
|
|
4530
|
-
const [internal, setInternal] =
|
|
4683
|
+
const [internal, setInternal] = React14.useState(defaultChecked);
|
|
4531
4684
|
const isOn = isControlled ? checked : internal;
|
|
4532
4685
|
const handle = (c) => {
|
|
4533
4686
|
if (!isControlled) setInternal(c);
|
|
@@ -4600,19 +4753,19 @@ function AutoComplete({
|
|
|
4600
4753
|
required,
|
|
4601
4754
|
htmlFor
|
|
4602
4755
|
}) {
|
|
4603
|
-
const errorId =
|
|
4756
|
+
const errorId = React14.useId();
|
|
4604
4757
|
const hasError = errorMessage != null;
|
|
4605
|
-
const [term, setTerm] =
|
|
4606
|
-
const [open, setOpen] =
|
|
4607
|
-
const [asyncItems, setAsyncItems] =
|
|
4608
|
-
const [loading, setLoading] =
|
|
4758
|
+
const [term, setTerm] = React14.useState("");
|
|
4759
|
+
const [open, setOpen] = React14.useState(false);
|
|
4760
|
+
const [asyncItems, setAsyncItems] = React14.useState([]);
|
|
4761
|
+
const [loading, setLoading] = React14.useState(false);
|
|
4609
4762
|
const isAsync = typeof onSearch === "function";
|
|
4610
|
-
const debounceRef =
|
|
4611
|
-
const requestIdRef =
|
|
4763
|
+
const debounceRef = React14.useRef(null);
|
|
4764
|
+
const requestIdRef = React14.useRef(0);
|
|
4612
4765
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
4613
4766
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
4614
4767
|
) : [];
|
|
4615
|
-
|
|
4768
|
+
React14.useEffect(() => {
|
|
4616
4769
|
if (!isAsync) return;
|
|
4617
4770
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
4618
4771
|
if (!term.trim()) {
|
|
@@ -4768,15 +4921,15 @@ function TreeSelect({
|
|
|
4768
4921
|
defaultExpandedKeys = [],
|
|
4769
4922
|
size = "md"
|
|
4770
4923
|
}) {
|
|
4771
|
-
const errorId =
|
|
4924
|
+
const errorId = React14.useId();
|
|
4772
4925
|
const hasError = errorMessage != null;
|
|
4773
|
-
const [open, setOpen] =
|
|
4774
|
-
const [expanded, setExpanded] =
|
|
4775
|
-
const [activeIndex, setActiveIndex] =
|
|
4776
|
-
const listRef =
|
|
4777
|
-
const visible =
|
|
4778
|
-
const didSyncOnOpenRef =
|
|
4779
|
-
|
|
4926
|
+
const [open, setOpen] = React14.useState(false);
|
|
4927
|
+
const [expanded, setExpanded] = React14.useState(() => new Set(defaultExpandedKeys));
|
|
4928
|
+
const [activeIndex, setActiveIndex] = React14.useState(0);
|
|
4929
|
+
const listRef = React14.useRef(null);
|
|
4930
|
+
const visible = React14.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
4931
|
+
const didSyncOnOpenRef = React14.useRef(false);
|
|
4932
|
+
React14.useEffect(() => {
|
|
4780
4933
|
if (!open) {
|
|
4781
4934
|
didSyncOnOpenRef.current = false;
|
|
4782
4935
|
return;
|
|
@@ -4786,7 +4939,7 @@ function TreeSelect({
|
|
|
4786
4939
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
4787
4940
|
didSyncOnOpenRef.current = true;
|
|
4788
4941
|
}, [open, value]);
|
|
4789
|
-
const selectedNode =
|
|
4942
|
+
const selectedNode = React14.useMemo(
|
|
4790
4943
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
4791
4944
|
[items, value]
|
|
4792
4945
|
);
|
|
@@ -5017,11 +5170,11 @@ function FileInput({
|
|
|
5017
5170
|
required,
|
|
5018
5171
|
icon
|
|
5019
5172
|
}) {
|
|
5020
|
-
const inputRef =
|
|
5021
|
-
const errorId =
|
|
5022
|
-
const [files, setFiles] =
|
|
5023
|
-
const [dragging, setDragging] =
|
|
5024
|
-
const [sizeError, setSizeError] =
|
|
5173
|
+
const inputRef = React14.useRef(null);
|
|
5174
|
+
const errorId = React14.useId();
|
|
5175
|
+
const [files, setFiles] = React14.useState([]);
|
|
5176
|
+
const [dragging, setDragging] = React14.useState(false);
|
|
5177
|
+
const [sizeError, setSizeError] = React14.useState(null);
|
|
5025
5178
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5026
5179
|
const openPicker = () => {
|
|
5027
5180
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5212,30 +5365,30 @@ function DatePicker({
|
|
|
5212
5365
|
size = "md",
|
|
5213
5366
|
className = ""
|
|
5214
5367
|
}) {
|
|
5215
|
-
const errorId =
|
|
5368
|
+
const errorId = React14.useId();
|
|
5216
5369
|
const hasError = errorMessage != null;
|
|
5217
|
-
const [open, setOpen] =
|
|
5218
|
-
const [viewMonth, setViewMonth] =
|
|
5219
|
-
const [focusDate, setFocusDate] =
|
|
5220
|
-
const [view, setView] =
|
|
5221
|
-
const gridRef =
|
|
5222
|
-
|
|
5370
|
+
const [open, setOpen] = React14.useState(false);
|
|
5371
|
+
const [viewMonth, setViewMonth] = React14.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5372
|
+
const [focusDate, setFocusDate] = React14.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5373
|
+
const [view, setView] = React14.useState("days");
|
|
5374
|
+
const gridRef = React14.useRef(null);
|
|
5375
|
+
React14.useEffect(() => {
|
|
5223
5376
|
if (!open) return;
|
|
5224
5377
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5225
5378
|
setViewMonth(startOfMonth(target));
|
|
5226
5379
|
setFocusDate(target);
|
|
5227
5380
|
setView("days");
|
|
5228
5381
|
}, [open, value]);
|
|
5229
|
-
|
|
5382
|
+
React14.useEffect(() => {
|
|
5230
5383
|
if (!open) return;
|
|
5231
5384
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5232
5385
|
cell?.focus();
|
|
5233
5386
|
}, [open, focusDate]);
|
|
5234
|
-
const weekdays =
|
|
5387
|
+
const weekdays = React14.useMemo(() => {
|
|
5235
5388
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5236
5389
|
return ordered;
|
|
5237
5390
|
}, [weekStartsOn]);
|
|
5238
|
-
const grid =
|
|
5391
|
+
const grid = React14.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5239
5392
|
const isDisabled = (d) => {
|
|
5240
5393
|
if (min && d < min) return true;
|
|
5241
5394
|
if (max && d > max) return true;
|
|
@@ -5525,10 +5678,10 @@ function TextArea({
|
|
|
5525
5678
|
style,
|
|
5526
5679
|
inputStyle
|
|
5527
5680
|
}) {
|
|
5528
|
-
const errorId =
|
|
5681
|
+
const errorId = React14.useId();
|
|
5529
5682
|
const hasError = errorMessage != null;
|
|
5530
|
-
const ref =
|
|
5531
|
-
|
|
5683
|
+
const ref = React14.useRef(null);
|
|
5684
|
+
React14.useLayoutEffect(() => {
|
|
5532
5685
|
if (!autoGrow) return;
|
|
5533
5686
|
const el = ref.current;
|
|
5534
5687
|
if (!el) return;
|
|
@@ -5575,7 +5728,7 @@ function TextArea({
|
|
|
5575
5728
|
}
|
|
5576
5729
|
);
|
|
5577
5730
|
}
|
|
5578
|
-
var
|
|
5731
|
+
var SIZE3 = {
|
|
5579
5732
|
sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
|
|
5580
5733
|
md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
|
|
5581
5734
|
lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
|
|
@@ -5597,12 +5750,12 @@ function SegmentedControl({
|
|
|
5597
5750
|
errorMessage,
|
|
5598
5751
|
"aria-label": ariaLabel
|
|
5599
5752
|
}) {
|
|
5600
|
-
const sz =
|
|
5601
|
-
const groupId =
|
|
5602
|
-
const errorId =
|
|
5753
|
+
const sz = SIZE3[size];
|
|
5754
|
+
const groupId = React14.useId();
|
|
5755
|
+
const errorId = React14.useId();
|
|
5603
5756
|
const hasError = errorMessage != null;
|
|
5604
5757
|
const isControlled = value !== void 0;
|
|
5605
|
-
const [internal, setInternal] =
|
|
5758
|
+
const [internal, setInternal] = React14.useState(defaultValue);
|
|
5606
5759
|
const current = isControlled ? value : internal;
|
|
5607
5760
|
const handle = (v) => {
|
|
5608
5761
|
if (!v) return;
|
|
@@ -5696,14 +5849,14 @@ function Slider({
|
|
|
5696
5849
|
name,
|
|
5697
5850
|
htmlFor
|
|
5698
5851
|
}) {
|
|
5699
|
-
const errorId =
|
|
5852
|
+
const errorId = React14.useId();
|
|
5700
5853
|
const hasError = errorMessage != null;
|
|
5701
5854
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
5702
|
-
const [internal, setInternal] =
|
|
5855
|
+
const [internal, setInternal] = React14.useState(
|
|
5703
5856
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
5704
5857
|
);
|
|
5705
5858
|
const current = toArray(value) ?? internal;
|
|
5706
|
-
const [dragging, setDragging] =
|
|
5859
|
+
const [dragging, setDragging] = React14.useState(false);
|
|
5707
5860
|
const emit = (arr) => {
|
|
5708
5861
|
setInternal(arr);
|
|
5709
5862
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -5798,11 +5951,11 @@ function TagsInput({
|
|
|
5798
5951
|
validate,
|
|
5799
5952
|
separators = ["Enter", ","]
|
|
5800
5953
|
}) {
|
|
5801
|
-
const errorId =
|
|
5802
|
-
const inputRef =
|
|
5803
|
-
const [internal, setInternal] =
|
|
5804
|
-
const [draft, setDraft] =
|
|
5805
|
-
const [localError, setLocalError] =
|
|
5954
|
+
const errorId = React14.useId();
|
|
5955
|
+
const inputRef = React14.useRef(null);
|
|
5956
|
+
const [internal, setInternal] = React14.useState(defaultValue ?? []);
|
|
5957
|
+
const [draft, setDraft] = React14.useState("");
|
|
5958
|
+
const [localError, setLocalError] = React14.useState(null);
|
|
5806
5959
|
const tags = value ?? internal;
|
|
5807
5960
|
const hasError = errorMessage != null || localError != null;
|
|
5808
5961
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -5933,9 +6086,9 @@ function OtpInput({
|
|
|
5933
6086
|
className,
|
|
5934
6087
|
groupAfter
|
|
5935
6088
|
}) {
|
|
5936
|
-
const errorId =
|
|
6089
|
+
const errorId = React14.useId();
|
|
5937
6090
|
const hasError = errorMessage != null;
|
|
5938
|
-
const refs =
|
|
6091
|
+
const refs = React14.useRef([]);
|
|
5939
6092
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
5940
6093
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
5941
6094
|
const emit = (next) => {
|
|
@@ -5984,7 +6137,7 @@ function OtpInput({
|
|
|
5984
6137
|
emit(valid.join(""));
|
|
5985
6138
|
focusBox(valid.length);
|
|
5986
6139
|
};
|
|
5987
|
-
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(
|
|
6140
|
+
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(React14__default.default.Fragment, { children: [
|
|
5988
6141
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
5989
6142
|
"input",
|
|
5990
6143
|
{
|
|
@@ -6042,9 +6195,9 @@ function Rating({
|
|
|
6042
6195
|
className,
|
|
6043
6196
|
required
|
|
6044
6197
|
}) {
|
|
6045
|
-
const errorId =
|
|
6046
|
-
const [internal, setInternal] =
|
|
6047
|
-
const [hover, setHover] =
|
|
6198
|
+
const errorId = React14.useId();
|
|
6199
|
+
const [internal, setInternal] = React14.useState(defaultValue);
|
|
6200
|
+
const [hover, setHover] = React14.useState(null);
|
|
6048
6201
|
const current = value ?? internal;
|
|
6049
6202
|
const display2 = hover ?? current;
|
|
6050
6203
|
const interactive = !readOnly && !disabled;
|
|
@@ -6167,9 +6320,9 @@ function TimePicker({
|
|
|
6167
6320
|
required,
|
|
6168
6321
|
style
|
|
6169
6322
|
}) {
|
|
6170
|
-
const errorId =
|
|
6323
|
+
const errorId = React14.useId();
|
|
6171
6324
|
const hasError = errorMessage != null;
|
|
6172
|
-
const [open, setOpen] =
|
|
6325
|
+
const [open, setOpen] = React14.useState(false);
|
|
6173
6326
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6174
6327
|
const update = (next) => {
|
|
6175
6328
|
const merged = { ...parsed, ...next };
|
|
@@ -6293,13 +6446,13 @@ function DateRangePicker({
|
|
|
6293
6446
|
required,
|
|
6294
6447
|
style
|
|
6295
6448
|
}) {
|
|
6296
|
-
const errorId =
|
|
6449
|
+
const errorId = React14.useId();
|
|
6297
6450
|
const hasError = errorMessage != null;
|
|
6298
|
-
const [open, setOpen] =
|
|
6299
|
-
const [leftMonth, setLeftMonth] =
|
|
6300
|
-
const [pendingStart, setPendingStart] =
|
|
6301
|
-
const [hoverDate, setHoverDate] =
|
|
6302
|
-
const weekdays =
|
|
6451
|
+
const [open, setOpen] = React14.useState(false);
|
|
6452
|
+
const [leftMonth, setLeftMonth] = React14.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
6453
|
+
const [pendingStart, setPendingStart] = React14.useState(null);
|
|
6454
|
+
const [hoverDate, setHoverDate] = React14.useState(null);
|
|
6455
|
+
const weekdays = React14.useMemo(
|
|
6303
6456
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6304
6457
|
[weekStartsOn]
|
|
6305
6458
|
);
|
|
@@ -6475,10 +6628,10 @@ function ColorPicker({
|
|
|
6475
6628
|
required,
|
|
6476
6629
|
placeholder = "Pick a colour\u2026"
|
|
6477
6630
|
}) {
|
|
6478
|
-
const errorId =
|
|
6631
|
+
const errorId = React14.useId();
|
|
6479
6632
|
const hasError = errorMessage != null;
|
|
6480
|
-
const [open, setOpen] =
|
|
6481
|
-
const [draft, setDraft] =
|
|
6633
|
+
const [open, setOpen] = React14.useState(false);
|
|
6634
|
+
const [draft, setDraft] = React14.useState(value);
|
|
6482
6635
|
const valid = HEX_RE.test(value);
|
|
6483
6636
|
const pick = (hex) => {
|
|
6484
6637
|
onChange?.(hex);
|
|
@@ -6865,11 +7018,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
6865
7018
|
|
|
6866
7019
|
// src/form/useForm.ts
|
|
6867
7020
|
function useForm(options = {}) {
|
|
6868
|
-
const ref =
|
|
7021
|
+
const ref = React14.useRef(null);
|
|
6869
7022
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
6870
7023
|
const store = ref.current;
|
|
6871
|
-
|
|
6872
|
-
const make =
|
|
7024
|
+
React14.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7025
|
+
const make = React14.useCallback(
|
|
6873
7026
|
(kind) => (name, rules) => {
|
|
6874
7027
|
if (rules !== void 0) store.setRule(name, rules);
|
|
6875
7028
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -6898,9 +7051,9 @@ function useForm(options = {}) {
|
|
|
6898
7051
|
fieldTarget: make("target")
|
|
6899
7052
|
};
|
|
6900
7053
|
}
|
|
6901
|
-
var FormContext =
|
|
7054
|
+
var FormContext = React14.createContext(null);
|
|
6902
7055
|
function useFormStore() {
|
|
6903
|
-
const store =
|
|
7056
|
+
const store = React14.useContext(FormContext);
|
|
6904
7057
|
if (!store) {
|
|
6905
7058
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
6906
7059
|
}
|
|
@@ -6914,8 +7067,8 @@ function Form({
|
|
|
6914
7067
|
children,
|
|
6915
7068
|
...rest
|
|
6916
7069
|
}) {
|
|
6917
|
-
const ref =
|
|
6918
|
-
const bypass =
|
|
7070
|
+
const ref = React14.useRef(null);
|
|
7071
|
+
const bypass = React14.useRef(false);
|
|
6919
7072
|
const handleSubmit = async (e) => {
|
|
6920
7073
|
if (bypass.current) {
|
|
6921
7074
|
bypass.current = false;
|
|
@@ -6967,12 +7120,12 @@ function useFormField(name, options = {}) {
|
|
|
6967
7120
|
const store = useFormStore();
|
|
6968
7121
|
const { kind = "value", rules } = options;
|
|
6969
7122
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
6970
|
-
|
|
7123
|
+
React14.useEffect(() => {
|
|
6971
7124
|
return () => {
|
|
6972
7125
|
if (rules !== void 0) store.removeRule(name);
|
|
6973
7126
|
};
|
|
6974
7127
|
}, [store, name]);
|
|
6975
|
-
const snap =
|
|
7128
|
+
const snap = React14.useSyncExternalStore(
|
|
6976
7129
|
store.subscribe,
|
|
6977
7130
|
() => store.getFieldSnapshot(name)
|
|
6978
7131
|
);
|
|
@@ -6984,7 +7137,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
6984
7137
|
}
|
|
6985
7138
|
function useFieldArray(name) {
|
|
6986
7139
|
const store = useFormStore();
|
|
6987
|
-
|
|
7140
|
+
React14.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
6988
7141
|
const arr = store.getValue(name) ?? [];
|
|
6989
7142
|
const keys = store.getKeys(name);
|
|
6990
7143
|
return {
|
|
@@ -7107,7 +7260,7 @@ function CreditCardForm({
|
|
|
7107
7260
|
className = "",
|
|
7108
7261
|
style
|
|
7109
7262
|
}) {
|
|
7110
|
-
const initial =
|
|
7263
|
+
const initial = React14.useRef({
|
|
7111
7264
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7112
7265
|
name: defaultValue?.name ?? "",
|
|
7113
7266
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7116,7 +7269,7 @@ function CreditCardForm({
|
|
|
7116
7269
|
const form = useForm({ initialValues: initial });
|
|
7117
7270
|
const numberStr = String(form.values.number ?? "");
|
|
7118
7271
|
const brand = detectBrand(numberStr);
|
|
7119
|
-
|
|
7272
|
+
React14.useEffect(() => {
|
|
7120
7273
|
onChange?.(toCard(form.values));
|
|
7121
7274
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7122
7275
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7218,7 +7371,9 @@ exports.Accordion = Accordion_default;
|
|
|
7218
7371
|
exports.AppShell = AppShell;
|
|
7219
7372
|
exports.AutoComplete = AutoComplete;
|
|
7220
7373
|
exports.Avatar = Avatar;
|
|
7374
|
+
exports.Badge = Badge;
|
|
7221
7375
|
exports.Box = Box;
|
|
7376
|
+
exports.Breadcrumbs = Breadcrumbs;
|
|
7222
7377
|
exports.Button = Button;
|
|
7223
7378
|
exports.CARD_BRANDS = CARD_BRANDS;
|
|
7224
7379
|
exports.Catalog = Catalog;
|