@geomak/ui 6.4.0 → 6.6.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 +321 -196
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +70 -1
- package/dist/index.d.ts +70 -1
- package/dist/index.js +135 -12
- package/dist/index.js.map +1 -1
- package/dist/styles.css +33 -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 React15 = 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 React15__default = /*#__PURE__*/_interopDefault(React15);
|
|
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] = React15.useState(null);
|
|
218
|
+
React15.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 = React15.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 = React15.createContext(null);
|
|
964
964
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
965
|
+
const ctx = React15.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] = React15.useState(defaultValue);
|
|
988
988
|
const current = isControlled ? value : internal;
|
|
989
989
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
990
|
+
const indicatorId = React15.useId();
|
|
991
|
+
const select = React15.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 = React15.useRef(/* @__PURE__ */ new Map());
|
|
996
|
+
const orderRef = React15.useRef(0);
|
|
997
|
+
const [, bump] = React15.useState(0);
|
|
998
|
+
const registerTab = React15.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 = React15.useCallback((val) => {
|
|
1004
1004
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1005
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1006
|
+
const getTabs = React15.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 = React15.useRef(null);
|
|
1027
|
+
const [edges, setEdges] = React15.useState({ start: false, end: false });
|
|
1028
1028
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1029
|
+
React15.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 = React15.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
|
+
React15.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] = React15.useState(false);
|
|
1119
|
+
const wrapRef = React15.useRef(null);
|
|
1120
|
+
const timer = React15.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
|
+
React15.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
|
+
React15.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 = React15.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 } = React15.useContext(AccordionCtx);
|
|
1467
1467
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1468
1468
|
AccordionPrimitive__namespace.Item,
|
|
1469
1469
|
{
|
|
@@ -1522,7 +1522,7 @@ function Breadcrumbs({
|
|
|
1522
1522
|
className = "",
|
|
1523
1523
|
style
|
|
1524
1524
|
}) {
|
|
1525
|
-
const [expanded, setExpanded] =
|
|
1525
|
+
const [expanded, setExpanded] = React15.useState(false);
|
|
1526
1526
|
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1527
1527
|
const visible = [];
|
|
1528
1528
|
if (shouldCollapse) {
|
|
@@ -1550,7 +1550,130 @@ function Breadcrumbs({
|
|
|
1550
1550
|
] }, entry === "ellipsis" ? "ellipsis" : entry.index);
|
|
1551
1551
|
}) }) });
|
|
1552
1552
|
}
|
|
1553
|
-
var
|
|
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 SIZE3 = {
|
|
1656
|
+
sm: "h-5 min-w-[20px] px-1.5 text-[11px]",
|
|
1657
|
+
md: "h-6 min-w-[24px] px-2 text-xs"
|
|
1658
|
+
};
|
|
1659
|
+
var cap = "inline-flex items-center justify-center rounded-md border border-border border-b-2 bg-surface-raised font-medium text-foreground-secondary leading-none select-none font-sans shadow-sm";
|
|
1660
|
+
function Kbd({
|
|
1661
|
+
children,
|
|
1662
|
+
keys,
|
|
1663
|
+
separator = "+",
|
|
1664
|
+
size = "md",
|
|
1665
|
+
className = "",
|
|
1666
|
+
style
|
|
1667
|
+
}) {
|
|
1668
|
+
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(React15__default.default.Fragment, { children: [
|
|
1670
|
+
i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
|
|
1671
|
+
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
|
|
1672
|
+
] }, `${k}-${i}`)) });
|
|
1673
|
+
}
|
|
1674
|
+
return /* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size], className].filter(Boolean).join(" "), style, children });
|
|
1675
|
+
}
|
|
1676
|
+
var NotificationContext = React15.createContext({
|
|
1554
1677
|
open: () => void 0,
|
|
1555
1678
|
close: () => void 0
|
|
1556
1679
|
});
|
|
@@ -1608,26 +1731,26 @@ function NotificationItem({
|
|
|
1608
1731
|
onClose,
|
|
1609
1732
|
reduced
|
|
1610
1733
|
}) {
|
|
1611
|
-
const [paused, setPaused] =
|
|
1734
|
+
const [paused, setPaused] = React15.useState(false);
|
|
1612
1735
|
const duration = n.duration ?? 4e3;
|
|
1613
1736
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
1614
1737
|
const showProgress = !reduced && isAutoDismissing;
|
|
1615
|
-
const timerRef =
|
|
1616
|
-
const startTimeRef =
|
|
1617
|
-
const remainingRef =
|
|
1618
|
-
const clearTimer =
|
|
1738
|
+
const timerRef = React15.useRef(null);
|
|
1739
|
+
const startTimeRef = React15.useRef(0);
|
|
1740
|
+
const remainingRef = React15.useRef(duration);
|
|
1741
|
+
const clearTimer = React15.useCallback(() => {
|
|
1619
1742
|
if (timerRef.current !== null) {
|
|
1620
1743
|
clearTimeout(timerRef.current);
|
|
1621
1744
|
timerRef.current = null;
|
|
1622
1745
|
}
|
|
1623
1746
|
}, []);
|
|
1624
|
-
const scheduleDismiss =
|
|
1747
|
+
const scheduleDismiss = React15.useCallback((ms) => {
|
|
1625
1748
|
clearTimer();
|
|
1626
1749
|
if (!isAutoDismissing) return;
|
|
1627
1750
|
startTimeRef.current = Date.now();
|
|
1628
1751
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
1629
1752
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
1630
|
-
|
|
1753
|
+
React15.useEffect(() => {
|
|
1631
1754
|
if (paused || !isAutoDismissing) return;
|
|
1632
1755
|
scheduleDismiss(remainingRef.current);
|
|
1633
1756
|
return clearTimer;
|
|
@@ -1710,15 +1833,15 @@ function NotificationProvider({
|
|
|
1710
1833
|
children,
|
|
1711
1834
|
position = "top-right"
|
|
1712
1835
|
}) {
|
|
1713
|
-
const [notifications, setNotifications] =
|
|
1836
|
+
const [notifications, setNotifications] = React15.useState([]);
|
|
1714
1837
|
const reduced = framerMotion.useReducedMotion();
|
|
1715
|
-
const open =
|
|
1838
|
+
const open = React15.useCallback((payload) => {
|
|
1716
1839
|
setNotifications((prev) => [
|
|
1717
1840
|
...prev,
|
|
1718
1841
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
1719
1842
|
]);
|
|
1720
1843
|
}, []);
|
|
1721
|
-
const close =
|
|
1844
|
+
const close = React15.useCallback((id) => {
|
|
1722
1845
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
1723
1846
|
}, []);
|
|
1724
1847
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -1747,7 +1870,7 @@ function NotificationProvider({
|
|
|
1747
1870
|
] });
|
|
1748
1871
|
}
|
|
1749
1872
|
function useNotification() {
|
|
1750
|
-
const { open } =
|
|
1873
|
+
const { open } = React15.useContext(NotificationContext);
|
|
1751
1874
|
return {
|
|
1752
1875
|
info: (props) => open({ type: "info", ...props }),
|
|
1753
1876
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -1864,10 +1987,10 @@ function FadingBase({
|
|
|
1864
1987
|
isMounted = false,
|
|
1865
1988
|
children
|
|
1866
1989
|
}) {
|
|
1867
|
-
const [shouldRender, setShouldRender] =
|
|
1868
|
-
const [visible, setVisible] =
|
|
1869
|
-
const timerRef =
|
|
1870
|
-
|
|
1990
|
+
const [shouldRender, setShouldRender] = React15.useState(isMounted);
|
|
1991
|
+
const [visible, setVisible] = React15.useState(false);
|
|
1992
|
+
const timerRef = React15.useRef(null);
|
|
1993
|
+
React15.useEffect(() => {
|
|
1871
1994
|
if (isMounted) {
|
|
1872
1995
|
setShouldRender(true);
|
|
1873
1996
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -1965,8 +2088,8 @@ function ScalableContainer({
|
|
|
1965
2088
|
togglePosition = "top-right",
|
|
1966
2089
|
className = ""
|
|
1967
2090
|
}) {
|
|
1968
|
-
const containerRef =
|
|
1969
|
-
const [internalScaled, setInternalScaled] =
|
|
2091
|
+
const containerRef = React15.useRef(null);
|
|
2092
|
+
const [internalScaled, setInternalScaled] = React15.useState(false);
|
|
1970
2093
|
const isScaled = expanded ?? internalScaled;
|
|
1971
2094
|
const reduced = framerMotion.useReducedMotion();
|
|
1972
2095
|
const onToggle = () => {
|
|
@@ -2104,17 +2227,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2104
2227
|
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)) });
|
|
2105
2228
|
}
|
|
2106
2229
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2107
|
-
const [activeIndex, setActiveIndex] =
|
|
2108
|
-
const [indexPool, setIndexPool] =
|
|
2109
|
-
const cardRefs =
|
|
2110
|
-
const getIndexes =
|
|
2230
|
+
const [activeIndex, setActiveIndex] = React15.useState(0);
|
|
2231
|
+
const [indexPool, setIndexPool] = React15.useState([]);
|
|
2232
|
+
const cardRefs = React15.useRef([]);
|
|
2233
|
+
const getIndexes = React15.useMemo(() => {
|
|
2111
2234
|
let nextIndex = activeIndex + 1;
|
|
2112
2235
|
let previousIndex = activeIndex - 1;
|
|
2113
2236
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2114
2237
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2115
2238
|
return { previousIndex, nextIndex };
|
|
2116
2239
|
}, [activeIndex, items.length]);
|
|
2117
|
-
|
|
2240
|
+
React15.useEffect(() => {
|
|
2118
2241
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2119
2242
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2120
2243
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2287,8 +2410,8 @@ function writeDismissed(key) {
|
|
|
2287
2410
|
}
|
|
2288
2411
|
}
|
|
2289
2412
|
function useTargetBbox(ref) {
|
|
2290
|
-
const [bbox, setBbox] =
|
|
2291
|
-
|
|
2413
|
+
const [bbox, setBbox] = React15.useState(null);
|
|
2414
|
+
React15.useLayoutEffect(() => {
|
|
2292
2415
|
const el = ref?.current;
|
|
2293
2416
|
if (!el) {
|
|
2294
2417
|
setBbox(null);
|
|
@@ -2318,7 +2441,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2318
2441
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2319
2442
|
}
|
|
2320
2443
|
function useFocusTrap(containerRef, active) {
|
|
2321
|
-
|
|
2444
|
+
React15.useEffect(() => {
|
|
2322
2445
|
if (!active) return;
|
|
2323
2446
|
const el = containerRef.current;
|
|
2324
2447
|
if (!el) return;
|
|
@@ -2357,16 +2480,16 @@ function Wizard({
|
|
|
2357
2480
|
onComplete,
|
|
2358
2481
|
onSkip
|
|
2359
2482
|
}) {
|
|
2360
|
-
const tooltipRef =
|
|
2361
|
-
const tooltipTitleId =
|
|
2362
|
-
const tooltipBodyId =
|
|
2483
|
+
const tooltipRef = React15.useRef(null);
|
|
2484
|
+
const tooltipTitleId = React15.useId();
|
|
2485
|
+
const tooltipBodyId = React15.useId();
|
|
2363
2486
|
const reduced = framerMotion.useReducedMotion();
|
|
2364
|
-
const [open, setOpen] =
|
|
2365
|
-
const [activeIndex, setActiveIndex] =
|
|
2487
|
+
const [open, setOpen] = React15.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2488
|
+
const [activeIndex, setActiveIndex] = React15.useState(0);
|
|
2366
2489
|
const step = steps[activeIndex];
|
|
2367
2490
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2368
2491
|
useFocusTrap(tooltipRef, open);
|
|
2369
|
-
|
|
2492
|
+
React15.useEffect(() => {
|
|
2370
2493
|
if (!open || !dismissible) return;
|
|
2371
2494
|
const onKey = (e) => {
|
|
2372
2495
|
if (e.key === "Escape") {
|
|
@@ -2377,12 +2500,12 @@ function Wizard({
|
|
|
2377
2500
|
document.addEventListener("keydown", onKey);
|
|
2378
2501
|
return () => document.removeEventListener("keydown", onKey);
|
|
2379
2502
|
}, [open, dismissible]);
|
|
2380
|
-
const handleSkip =
|
|
2503
|
+
const handleSkip = React15.useCallback(() => {
|
|
2381
2504
|
writeDismissed(storageKey);
|
|
2382
2505
|
setOpen(false);
|
|
2383
2506
|
onSkip?.();
|
|
2384
2507
|
}, [storageKey, onSkip]);
|
|
2385
|
-
const handleComplete =
|
|
2508
|
+
const handleComplete = React15.useCallback(() => {
|
|
2386
2509
|
writeDismissed(storageKey);
|
|
2387
2510
|
setOpen(false);
|
|
2388
2511
|
onComplete?.();
|
|
@@ -2653,7 +2776,7 @@ function Field({
|
|
|
2653
2776
|
);
|
|
2654
2777
|
}
|
|
2655
2778
|
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" }) });
|
|
2656
|
-
var SearchInput =
|
|
2779
|
+
var SearchInput = React15__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
2657
2780
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2658
2781
|
"div",
|
|
2659
2782
|
{
|
|
@@ -2707,11 +2830,11 @@ function MultiTagRow({
|
|
|
2707
2830
|
labelFor,
|
|
2708
2831
|
onRemove
|
|
2709
2832
|
}) {
|
|
2710
|
-
const wrapRef =
|
|
2711
|
-
const measureRef =
|
|
2712
|
-
const [visibleCount, setVisibleCount] =
|
|
2833
|
+
const wrapRef = React15.useRef(null);
|
|
2834
|
+
const measureRef = React15.useRef(null);
|
|
2835
|
+
const [visibleCount, setVisibleCount] = React15.useState(values.length);
|
|
2713
2836
|
const key = values.map(String).join("|");
|
|
2714
|
-
|
|
2837
|
+
React15.useLayoutEffect(() => {
|
|
2715
2838
|
const wrap = wrapRef.current;
|
|
2716
2839
|
const measure = measureRef.current;
|
|
2717
2840
|
if (!wrap || !measure) return;
|
|
@@ -2805,16 +2928,16 @@ function Dropdown({
|
|
|
2805
2928
|
size = "md",
|
|
2806
2929
|
className = ""
|
|
2807
2930
|
}) {
|
|
2808
|
-
const [open, setOpen] =
|
|
2809
|
-
const [selectedItems, setSelectedItems] =
|
|
2810
|
-
const [searchTerm, setSearchTerm] =
|
|
2811
|
-
const [innerItems, setInnerItems] =
|
|
2812
|
-
const errorId =
|
|
2931
|
+
const [open, setOpen] = React15.useState(false);
|
|
2932
|
+
const [selectedItems, setSelectedItems] = React15.useState([]);
|
|
2933
|
+
const [searchTerm, setSearchTerm] = React15.useState("");
|
|
2934
|
+
const [innerItems, setInnerItems] = React15.useState([]);
|
|
2935
|
+
const errorId = React15.useId();
|
|
2813
2936
|
const hasError = errorMessage != null;
|
|
2814
|
-
|
|
2937
|
+
React15.useEffect(() => {
|
|
2815
2938
|
setInnerItems(items);
|
|
2816
2939
|
}, [items]);
|
|
2817
|
-
|
|
2940
|
+
React15.useEffect(() => {
|
|
2818
2941
|
if (isMultiselect && Array.isArray(value)) {
|
|
2819
2942
|
setSelectedItems(value);
|
|
2820
2943
|
}
|
|
@@ -3139,7 +3262,7 @@ function TableBody({
|
|
|
3139
3262
|
expandRow,
|
|
3140
3263
|
getRowKey
|
|
3141
3264
|
}) {
|
|
3142
|
-
const [expanded, setExpanded] =
|
|
3265
|
+
const [expanded, setExpanded] = React15.useState(() => /* @__PURE__ */ new Set());
|
|
3143
3266
|
const reduced = framerMotion.useReducedMotion();
|
|
3144
3267
|
const toggleRow = (rowKey) => {
|
|
3145
3268
|
setExpanded((prev) => {
|
|
@@ -3154,7 +3277,7 @@ function TableBody({
|
|
|
3154
3277
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3155
3278
|
const rowKey = getRowKey(row, i);
|
|
3156
3279
|
const isExpanded = expanded.has(rowKey);
|
|
3157
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3280
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React15__default.default.Fragment, { children: [
|
|
3158
3281
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3159
3282
|
"tr",
|
|
3160
3283
|
{
|
|
@@ -3210,9 +3333,9 @@ function Pagination({
|
|
|
3210
3333
|
const matchedOption = picker.find(
|
|
3211
3334
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3212
3335
|
);
|
|
3213
|
-
const [perPageKey, setPerPageKey] =
|
|
3336
|
+
const [perPageKey, setPerPageKey] = React15.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3214
3337
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3215
|
-
|
|
3338
|
+
React15.useEffect(() => {
|
|
3216
3339
|
if (serverSide && options.perPage != null) {
|
|
3217
3340
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3218
3341
|
if (next) setPerPageKey(next.key);
|
|
@@ -3276,14 +3399,14 @@ function Table({
|
|
|
3276
3399
|
className = "",
|
|
3277
3400
|
style
|
|
3278
3401
|
}) {
|
|
3279
|
-
const searchRef =
|
|
3280
|
-
const [searchTerm, setSearchTerm] =
|
|
3281
|
-
const [perPage, setPerPage] =
|
|
3402
|
+
const searchRef = React15.useRef(null);
|
|
3403
|
+
const [searchTerm, setSearchTerm] = React15.useState("");
|
|
3404
|
+
const [perPage, setPerPage] = React15.useState(
|
|
3282
3405
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3283
3406
|
);
|
|
3284
|
-
const [activePage, setActivePage] =
|
|
3407
|
+
const [activePage, setActivePage] = React15.useState(0);
|
|
3285
3408
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3286
|
-
const filteredRows =
|
|
3409
|
+
const filteredRows = React15.useMemo(() => {
|
|
3287
3410
|
if (isServerSide || !searchTerm) return rows;
|
|
3288
3411
|
const term = searchTerm.toLowerCase();
|
|
3289
3412
|
return rows.filter(
|
|
@@ -3292,29 +3415,29 @@ function Table({
|
|
|
3292
3415
|
)
|
|
3293
3416
|
);
|
|
3294
3417
|
}, [rows, searchTerm, isServerSide]);
|
|
3295
|
-
const datasets =
|
|
3418
|
+
const datasets = React15.useMemo(() => {
|
|
3296
3419
|
if (isServerSide) return [rows];
|
|
3297
3420
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3298
3421
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3299
|
-
const MAX_PAGE =
|
|
3422
|
+
const MAX_PAGE = React15.useMemo(() => {
|
|
3300
3423
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3301
3424
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3302
3425
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3303
3426
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3304
3427
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3305
|
-
const currentPageRows =
|
|
3428
|
+
const currentPageRows = React15.useMemo(() => {
|
|
3306
3429
|
if (isServerSide) return rows;
|
|
3307
3430
|
return datasets[activePage] ?? [];
|
|
3308
3431
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3309
|
-
|
|
3432
|
+
React15.useEffect(() => {
|
|
3310
3433
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3311
3434
|
setPerPage(pagination.perPage);
|
|
3312
3435
|
}
|
|
3313
3436
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3314
|
-
|
|
3437
|
+
React15.useEffect(() => {
|
|
3315
3438
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3316
3439
|
}, [isServerSide, pagination.perPage]);
|
|
3317
|
-
|
|
3440
|
+
React15.useEffect(() => {
|
|
3318
3441
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3319
3442
|
setActivePage(pagination.page - 1);
|
|
3320
3443
|
}, [isServerSide, pagination.page]);
|
|
@@ -3398,7 +3521,7 @@ function TableSkeletonBody({
|
|
|
3398
3521
|
)) });
|
|
3399
3522
|
}
|
|
3400
3523
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3401
|
-
const id =
|
|
3524
|
+
const id = React15.useId();
|
|
3402
3525
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3403
3526
|
SwitchPrimitive__namespace.Root,
|
|
3404
3527
|
{
|
|
@@ -3582,7 +3705,7 @@ function Sidebar({
|
|
|
3582
3705
|
}
|
|
3583
3706
|
) });
|
|
3584
3707
|
}
|
|
3585
|
-
var MegaMenuContext =
|
|
3708
|
+
var MegaMenuContext = React15.createContext({ align: "start" });
|
|
3586
3709
|
function MegaMenu({
|
|
3587
3710
|
children,
|
|
3588
3711
|
align = "start",
|
|
@@ -3613,7 +3736,7 @@ function MegaMenu({
|
|
|
3613
3736
|
}
|
|
3614
3737
|
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";
|
|
3615
3738
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
3616
|
-
const { align } =
|
|
3739
|
+
const { align } = React15.useContext(MegaMenuContext);
|
|
3617
3740
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
3618
3741
|
if (!children) {
|
|
3619
3742
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -3698,8 +3821,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
3698
3821
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
3699
3822
|
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 });
|
|
3700
3823
|
}
|
|
3701
|
-
var elementsOfType = (children, type) =>
|
|
3702
|
-
(c) =>
|
|
3824
|
+
var elementsOfType = (children, type) => React15__default.default.Children.toArray(children).filter(
|
|
3825
|
+
(c) => React15__default.default.isValidElement(c) && c.type === type
|
|
3703
3826
|
);
|
|
3704
3827
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
3705
3828
|
"svg",
|
|
@@ -3736,9 +3859,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
3736
3859
|
);
|
|
3737
3860
|
}
|
|
3738
3861
|
function MobilePanel({ panel, onNavigate }) {
|
|
3739
|
-
const nodes =
|
|
3862
|
+
const nodes = React15__default.default.Children.toArray(panel.props.children);
|
|
3740
3863
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
3741
|
-
if (!
|
|
3864
|
+
if (!React15__default.default.isValidElement(node)) return null;
|
|
3742
3865
|
const el = node;
|
|
3743
3866
|
if (el.type === MegaMenuSection) {
|
|
3744
3867
|
const { title, children } = el.props;
|
|
@@ -3757,8 +3880,8 @@ function MegaMenuMobile({
|
|
|
3757
3880
|
children,
|
|
3758
3881
|
label
|
|
3759
3882
|
}) {
|
|
3760
|
-
const [open, setOpen] =
|
|
3761
|
-
const [expanded, setExpanded] =
|
|
3883
|
+
const [open, setOpen] = React15.useState(false);
|
|
3884
|
+
const [expanded, setExpanded] = React15.useState(null);
|
|
3762
3885
|
const items = elementsOfType(children, MegaMenuItem);
|
|
3763
3886
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
3764
3887
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3831,17 +3954,17 @@ function AppShell({
|
|
|
3831
3954
|
children,
|
|
3832
3955
|
className = ""
|
|
3833
3956
|
}) {
|
|
3834
|
-
const [expanded, setExpanded] =
|
|
3835
|
-
const [isMobile, setIsMobile] =
|
|
3836
|
-
const [mobileOpen, setMobileOpen] =
|
|
3837
|
-
|
|
3957
|
+
const [expanded, setExpanded] = React15.useState(sidebarDefaultExpanded);
|
|
3958
|
+
const [isMobile, setIsMobile] = React15.useState(false);
|
|
3959
|
+
const [mobileOpen, setMobileOpen] = React15.useState(false);
|
|
3960
|
+
React15.useEffect(() => {
|
|
3838
3961
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
3839
3962
|
const update = (e) => setIsMobile(e.matches);
|
|
3840
3963
|
update(mq);
|
|
3841
3964
|
mq.addEventListener("change", update);
|
|
3842
3965
|
return () => mq.removeEventListener("change", update);
|
|
3843
3966
|
}, []);
|
|
3844
|
-
|
|
3967
|
+
React15.useEffect(() => {
|
|
3845
3968
|
if (!isMobile) setMobileOpen(false);
|
|
3846
3969
|
}, [isMobile]);
|
|
3847
3970
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4031,10 +4154,10 @@ function ThemeProvider({
|
|
|
4031
4154
|
className = "",
|
|
4032
4155
|
style
|
|
4033
4156
|
}) {
|
|
4034
|
-
const id =
|
|
4157
|
+
const id = React15__default.default.useId().replace(/:/g, "");
|
|
4035
4158
|
const scopeClass = `geo-th-${id}`;
|
|
4036
|
-
const divRef =
|
|
4037
|
-
|
|
4159
|
+
const divRef = React15.useRef(null);
|
|
4160
|
+
React15.useEffect(() => {
|
|
4038
4161
|
const el = divRef.current;
|
|
4039
4162
|
if (!el) return;
|
|
4040
4163
|
if (colorScheme === "auto") return;
|
|
@@ -4049,8 +4172,8 @@ function ThemeProvider({
|
|
|
4049
4172
|
}
|
|
4050
4173
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4051
4174
|
}, [colorScheme]);
|
|
4052
|
-
const lightVars =
|
|
4053
|
-
const darkVarStr =
|
|
4175
|
+
const lightVars = React15.useMemo(() => toCssVars(theme), [theme]);
|
|
4176
|
+
const darkVarStr = React15.useMemo(() => {
|
|
4054
4177
|
if (!darkTheme) return "";
|
|
4055
4178
|
const dvars = toCssVars(darkTheme);
|
|
4056
4179
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4090,7 +4213,7 @@ function TextInput({
|
|
|
4090
4213
|
prefix,
|
|
4091
4214
|
suffix
|
|
4092
4215
|
}) {
|
|
4093
|
-
const errorId =
|
|
4216
|
+
const errorId = React15.useId();
|
|
4094
4217
|
const hasError = errorMessage != null;
|
|
4095
4218
|
const hasAdornment = prefix != null || suffix != null;
|
|
4096
4219
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4160,7 +4283,7 @@ function NumberInput({
|
|
|
4160
4283
|
readOnly = false,
|
|
4161
4284
|
precision
|
|
4162
4285
|
}) {
|
|
4163
|
-
const errorId =
|
|
4286
|
+
const errorId = React15.useId();
|
|
4164
4287
|
const hasError = errorMessage != null;
|
|
4165
4288
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4166
4289
|
const round = (n) => {
|
|
@@ -4291,8 +4414,8 @@ function Password({
|
|
|
4291
4414
|
showIcon,
|
|
4292
4415
|
hideIcon
|
|
4293
4416
|
}) {
|
|
4294
|
-
const [visible, setVisible] =
|
|
4295
|
-
const errorId =
|
|
4417
|
+
const [visible, setVisible] = React15.useState(false);
|
|
4418
|
+
const errorId = React15.useId();
|
|
4296
4419
|
const hasError = errorMessage != null;
|
|
4297
4420
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4298
4421
|
Field,
|
|
@@ -4365,7 +4488,7 @@ function Checkbox({
|
|
|
4365
4488
|
}) {
|
|
4366
4489
|
const isChecked = checked ?? value ?? false;
|
|
4367
4490
|
const labelFirst = labelPosition === "left";
|
|
4368
|
-
const errorId =
|
|
4491
|
+
const errorId = React15.useId();
|
|
4369
4492
|
const hasError = errorMessage != null;
|
|
4370
4493
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4371
4494
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4473,8 +4596,8 @@ function RadioGroup({
|
|
|
4473
4596
|
className,
|
|
4474
4597
|
errorMessage
|
|
4475
4598
|
}) {
|
|
4476
|
-
const errorId =
|
|
4477
|
-
const groupId =
|
|
4599
|
+
const errorId = React15.useId();
|
|
4600
|
+
const groupId = React15.useId();
|
|
4478
4601
|
const hasError = errorMessage != null;
|
|
4479
4602
|
const labelFirst = labelPosition === "left";
|
|
4480
4603
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4574,11 +4697,11 @@ function Switch({
|
|
|
4574
4697
|
disabled,
|
|
4575
4698
|
errorMessage
|
|
4576
4699
|
}) {
|
|
4577
|
-
const id =
|
|
4578
|
-
const errorId =
|
|
4700
|
+
const id = React15.useId();
|
|
4701
|
+
const errorId = React15.useId();
|
|
4579
4702
|
const hasError = errorMessage != null;
|
|
4580
4703
|
const isControlled = checked !== void 0;
|
|
4581
|
-
const [internal, setInternal] =
|
|
4704
|
+
const [internal, setInternal] = React15.useState(defaultChecked);
|
|
4582
4705
|
const isOn = isControlled ? checked : internal;
|
|
4583
4706
|
const handle = (c) => {
|
|
4584
4707
|
if (!isControlled) setInternal(c);
|
|
@@ -4651,19 +4774,19 @@ function AutoComplete({
|
|
|
4651
4774
|
required,
|
|
4652
4775
|
htmlFor
|
|
4653
4776
|
}) {
|
|
4654
|
-
const errorId =
|
|
4777
|
+
const errorId = React15.useId();
|
|
4655
4778
|
const hasError = errorMessage != null;
|
|
4656
|
-
const [term, setTerm] =
|
|
4657
|
-
const [open, setOpen] =
|
|
4658
|
-
const [asyncItems, setAsyncItems] =
|
|
4659
|
-
const [loading, setLoading] =
|
|
4779
|
+
const [term, setTerm] = React15.useState("");
|
|
4780
|
+
const [open, setOpen] = React15.useState(false);
|
|
4781
|
+
const [asyncItems, setAsyncItems] = React15.useState([]);
|
|
4782
|
+
const [loading, setLoading] = React15.useState(false);
|
|
4660
4783
|
const isAsync = typeof onSearch === "function";
|
|
4661
|
-
const debounceRef =
|
|
4662
|
-
const requestIdRef =
|
|
4784
|
+
const debounceRef = React15.useRef(null);
|
|
4785
|
+
const requestIdRef = React15.useRef(0);
|
|
4663
4786
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
4664
4787
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
4665
4788
|
) : [];
|
|
4666
|
-
|
|
4789
|
+
React15.useEffect(() => {
|
|
4667
4790
|
if (!isAsync) return;
|
|
4668
4791
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
4669
4792
|
if (!term.trim()) {
|
|
@@ -4819,15 +4942,15 @@ function TreeSelect({
|
|
|
4819
4942
|
defaultExpandedKeys = [],
|
|
4820
4943
|
size = "md"
|
|
4821
4944
|
}) {
|
|
4822
|
-
const errorId =
|
|
4945
|
+
const errorId = React15.useId();
|
|
4823
4946
|
const hasError = errorMessage != null;
|
|
4824
|
-
const [open, setOpen] =
|
|
4825
|
-
const [expanded, setExpanded] =
|
|
4826
|
-
const [activeIndex, setActiveIndex] =
|
|
4827
|
-
const listRef =
|
|
4828
|
-
const visible =
|
|
4829
|
-
const didSyncOnOpenRef =
|
|
4830
|
-
|
|
4947
|
+
const [open, setOpen] = React15.useState(false);
|
|
4948
|
+
const [expanded, setExpanded] = React15.useState(() => new Set(defaultExpandedKeys));
|
|
4949
|
+
const [activeIndex, setActiveIndex] = React15.useState(0);
|
|
4950
|
+
const listRef = React15.useRef(null);
|
|
4951
|
+
const visible = React15.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
4952
|
+
const didSyncOnOpenRef = React15.useRef(false);
|
|
4953
|
+
React15.useEffect(() => {
|
|
4831
4954
|
if (!open) {
|
|
4832
4955
|
didSyncOnOpenRef.current = false;
|
|
4833
4956
|
return;
|
|
@@ -4837,7 +4960,7 @@ function TreeSelect({
|
|
|
4837
4960
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
4838
4961
|
didSyncOnOpenRef.current = true;
|
|
4839
4962
|
}, [open, value]);
|
|
4840
|
-
const selectedNode =
|
|
4963
|
+
const selectedNode = React15.useMemo(
|
|
4841
4964
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
4842
4965
|
[items, value]
|
|
4843
4966
|
);
|
|
@@ -5068,11 +5191,11 @@ function FileInput({
|
|
|
5068
5191
|
required,
|
|
5069
5192
|
icon
|
|
5070
5193
|
}) {
|
|
5071
|
-
const inputRef =
|
|
5072
|
-
const errorId =
|
|
5073
|
-
const [files, setFiles] =
|
|
5074
|
-
const [dragging, setDragging] =
|
|
5075
|
-
const [sizeError, setSizeError] =
|
|
5194
|
+
const inputRef = React15.useRef(null);
|
|
5195
|
+
const errorId = React15.useId();
|
|
5196
|
+
const [files, setFiles] = React15.useState([]);
|
|
5197
|
+
const [dragging, setDragging] = React15.useState(false);
|
|
5198
|
+
const [sizeError, setSizeError] = React15.useState(null);
|
|
5076
5199
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5077
5200
|
const openPicker = () => {
|
|
5078
5201
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5263,30 +5386,30 @@ function DatePicker({
|
|
|
5263
5386
|
size = "md",
|
|
5264
5387
|
className = ""
|
|
5265
5388
|
}) {
|
|
5266
|
-
const errorId =
|
|
5389
|
+
const errorId = React15.useId();
|
|
5267
5390
|
const hasError = errorMessage != null;
|
|
5268
|
-
const [open, setOpen] =
|
|
5269
|
-
const [viewMonth, setViewMonth] =
|
|
5270
|
-
const [focusDate, setFocusDate] =
|
|
5271
|
-
const [view, setView] =
|
|
5272
|
-
const gridRef =
|
|
5273
|
-
|
|
5391
|
+
const [open, setOpen] = React15.useState(false);
|
|
5392
|
+
const [viewMonth, setViewMonth] = React15.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5393
|
+
const [focusDate, setFocusDate] = React15.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5394
|
+
const [view, setView] = React15.useState("days");
|
|
5395
|
+
const gridRef = React15.useRef(null);
|
|
5396
|
+
React15.useEffect(() => {
|
|
5274
5397
|
if (!open) return;
|
|
5275
5398
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5276
5399
|
setViewMonth(startOfMonth(target));
|
|
5277
5400
|
setFocusDate(target);
|
|
5278
5401
|
setView("days");
|
|
5279
5402
|
}, [open, value]);
|
|
5280
|
-
|
|
5403
|
+
React15.useEffect(() => {
|
|
5281
5404
|
if (!open) return;
|
|
5282
5405
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5283
5406
|
cell?.focus();
|
|
5284
5407
|
}, [open, focusDate]);
|
|
5285
|
-
const weekdays =
|
|
5408
|
+
const weekdays = React15.useMemo(() => {
|
|
5286
5409
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5287
5410
|
return ordered;
|
|
5288
5411
|
}, [weekStartsOn]);
|
|
5289
|
-
const grid =
|
|
5412
|
+
const grid = React15.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5290
5413
|
const isDisabled = (d) => {
|
|
5291
5414
|
if (min && d < min) return true;
|
|
5292
5415
|
if (max && d > max) return true;
|
|
@@ -5576,10 +5699,10 @@ function TextArea({
|
|
|
5576
5699
|
style,
|
|
5577
5700
|
inputStyle
|
|
5578
5701
|
}) {
|
|
5579
|
-
const errorId =
|
|
5702
|
+
const errorId = React15.useId();
|
|
5580
5703
|
const hasError = errorMessage != null;
|
|
5581
|
-
const ref =
|
|
5582
|
-
|
|
5704
|
+
const ref = React15.useRef(null);
|
|
5705
|
+
React15.useLayoutEffect(() => {
|
|
5583
5706
|
if (!autoGrow) return;
|
|
5584
5707
|
const el = ref.current;
|
|
5585
5708
|
if (!el) return;
|
|
@@ -5626,7 +5749,7 @@ function TextArea({
|
|
|
5626
5749
|
}
|
|
5627
5750
|
);
|
|
5628
5751
|
}
|
|
5629
|
-
var
|
|
5752
|
+
var SIZE4 = {
|
|
5630
5753
|
sm: { h: "h-control-sm", text: "text-xs", pad: "px-2.5" },
|
|
5631
5754
|
md: { h: "h-control-md", text: "text-sm", pad: "px-3.5" },
|
|
5632
5755
|
lg: { h: "h-control-lg", text: "text-sm", pad: "px-4" }
|
|
@@ -5648,12 +5771,12 @@ function SegmentedControl({
|
|
|
5648
5771
|
errorMessage,
|
|
5649
5772
|
"aria-label": ariaLabel
|
|
5650
5773
|
}) {
|
|
5651
|
-
const sz =
|
|
5652
|
-
const groupId =
|
|
5653
|
-
const errorId =
|
|
5774
|
+
const sz = SIZE4[size];
|
|
5775
|
+
const groupId = React15.useId();
|
|
5776
|
+
const errorId = React15.useId();
|
|
5654
5777
|
const hasError = errorMessage != null;
|
|
5655
5778
|
const isControlled = value !== void 0;
|
|
5656
|
-
const [internal, setInternal] =
|
|
5779
|
+
const [internal, setInternal] = React15.useState(defaultValue);
|
|
5657
5780
|
const current = isControlled ? value : internal;
|
|
5658
5781
|
const handle = (v) => {
|
|
5659
5782
|
if (!v) return;
|
|
@@ -5747,14 +5870,14 @@ function Slider({
|
|
|
5747
5870
|
name,
|
|
5748
5871
|
htmlFor
|
|
5749
5872
|
}) {
|
|
5750
|
-
const errorId =
|
|
5873
|
+
const errorId = React15.useId();
|
|
5751
5874
|
const hasError = errorMessage != null;
|
|
5752
5875
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
5753
|
-
const [internal, setInternal] =
|
|
5876
|
+
const [internal, setInternal] = React15.useState(
|
|
5754
5877
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
5755
5878
|
);
|
|
5756
5879
|
const current = toArray(value) ?? internal;
|
|
5757
|
-
const [dragging, setDragging] =
|
|
5880
|
+
const [dragging, setDragging] = React15.useState(false);
|
|
5758
5881
|
const emit = (arr) => {
|
|
5759
5882
|
setInternal(arr);
|
|
5760
5883
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -5849,11 +5972,11 @@ function TagsInput({
|
|
|
5849
5972
|
validate,
|
|
5850
5973
|
separators = ["Enter", ","]
|
|
5851
5974
|
}) {
|
|
5852
|
-
const errorId =
|
|
5853
|
-
const inputRef =
|
|
5854
|
-
const [internal, setInternal] =
|
|
5855
|
-
const [draft, setDraft] =
|
|
5856
|
-
const [localError, setLocalError] =
|
|
5975
|
+
const errorId = React15.useId();
|
|
5976
|
+
const inputRef = React15.useRef(null);
|
|
5977
|
+
const [internal, setInternal] = React15.useState(defaultValue ?? []);
|
|
5978
|
+
const [draft, setDraft] = React15.useState("");
|
|
5979
|
+
const [localError, setLocalError] = React15.useState(null);
|
|
5857
5980
|
const tags = value ?? internal;
|
|
5858
5981
|
const hasError = errorMessage != null || localError != null;
|
|
5859
5982
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -5984,9 +6107,9 @@ function OtpInput({
|
|
|
5984
6107
|
className,
|
|
5985
6108
|
groupAfter
|
|
5986
6109
|
}) {
|
|
5987
|
-
const errorId =
|
|
6110
|
+
const errorId = React15.useId();
|
|
5988
6111
|
const hasError = errorMessage != null;
|
|
5989
|
-
const refs =
|
|
6112
|
+
const refs = React15.useRef([]);
|
|
5990
6113
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
5991
6114
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
5992
6115
|
const emit = (next) => {
|
|
@@ -6035,7 +6158,7 @@ function OtpInput({
|
|
|
6035
6158
|
emit(valid.join(""));
|
|
6036
6159
|
focusBox(valid.length);
|
|
6037
6160
|
};
|
|
6038
|
-
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(
|
|
6161
|
+
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(React15__default.default.Fragment, { children: [
|
|
6039
6162
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6040
6163
|
"input",
|
|
6041
6164
|
{
|
|
@@ -6093,9 +6216,9 @@ function Rating({
|
|
|
6093
6216
|
className,
|
|
6094
6217
|
required
|
|
6095
6218
|
}) {
|
|
6096
|
-
const errorId =
|
|
6097
|
-
const [internal, setInternal] =
|
|
6098
|
-
const [hover, setHover] =
|
|
6219
|
+
const errorId = React15.useId();
|
|
6220
|
+
const [internal, setInternal] = React15.useState(defaultValue);
|
|
6221
|
+
const [hover, setHover] = React15.useState(null);
|
|
6099
6222
|
const current = value ?? internal;
|
|
6100
6223
|
const display2 = hover ?? current;
|
|
6101
6224
|
const interactive = !readOnly && !disabled;
|
|
@@ -6218,9 +6341,9 @@ function TimePicker({
|
|
|
6218
6341
|
required,
|
|
6219
6342
|
style
|
|
6220
6343
|
}) {
|
|
6221
|
-
const errorId =
|
|
6344
|
+
const errorId = React15.useId();
|
|
6222
6345
|
const hasError = errorMessage != null;
|
|
6223
|
-
const [open, setOpen] =
|
|
6346
|
+
const [open, setOpen] = React15.useState(false);
|
|
6224
6347
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6225
6348
|
const update = (next) => {
|
|
6226
6349
|
const merged = { ...parsed, ...next };
|
|
@@ -6344,13 +6467,13 @@ function DateRangePicker({
|
|
|
6344
6467
|
required,
|
|
6345
6468
|
style
|
|
6346
6469
|
}) {
|
|
6347
|
-
const errorId =
|
|
6470
|
+
const errorId = React15.useId();
|
|
6348
6471
|
const hasError = errorMessage != null;
|
|
6349
|
-
const [open, setOpen] =
|
|
6350
|
-
const [leftMonth, setLeftMonth] =
|
|
6351
|
-
const [pendingStart, setPendingStart] =
|
|
6352
|
-
const [hoverDate, setHoverDate] =
|
|
6353
|
-
const weekdays =
|
|
6472
|
+
const [open, setOpen] = React15.useState(false);
|
|
6473
|
+
const [leftMonth, setLeftMonth] = React15.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
6474
|
+
const [pendingStart, setPendingStart] = React15.useState(null);
|
|
6475
|
+
const [hoverDate, setHoverDate] = React15.useState(null);
|
|
6476
|
+
const weekdays = React15.useMemo(
|
|
6354
6477
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6355
6478
|
[weekStartsOn]
|
|
6356
6479
|
);
|
|
@@ -6526,10 +6649,10 @@ function ColorPicker({
|
|
|
6526
6649
|
required,
|
|
6527
6650
|
placeholder = "Pick a colour\u2026"
|
|
6528
6651
|
}) {
|
|
6529
|
-
const errorId =
|
|
6652
|
+
const errorId = React15.useId();
|
|
6530
6653
|
const hasError = errorMessage != null;
|
|
6531
|
-
const [open, setOpen] =
|
|
6532
|
-
const [draft, setDraft] =
|
|
6654
|
+
const [open, setOpen] = React15.useState(false);
|
|
6655
|
+
const [draft, setDraft] = React15.useState(value);
|
|
6533
6656
|
const valid = HEX_RE.test(value);
|
|
6534
6657
|
const pick = (hex) => {
|
|
6535
6658
|
onChange?.(hex);
|
|
@@ -6916,11 +7039,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
6916
7039
|
|
|
6917
7040
|
// src/form/useForm.ts
|
|
6918
7041
|
function useForm(options = {}) {
|
|
6919
|
-
const ref =
|
|
7042
|
+
const ref = React15.useRef(null);
|
|
6920
7043
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
6921
7044
|
const store = ref.current;
|
|
6922
|
-
|
|
6923
|
-
const make =
|
|
7045
|
+
React15.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7046
|
+
const make = React15.useCallback(
|
|
6924
7047
|
(kind) => (name, rules) => {
|
|
6925
7048
|
if (rules !== void 0) store.setRule(name, rules);
|
|
6926
7049
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -6949,9 +7072,9 @@ function useForm(options = {}) {
|
|
|
6949
7072
|
fieldTarget: make("target")
|
|
6950
7073
|
};
|
|
6951
7074
|
}
|
|
6952
|
-
var FormContext =
|
|
7075
|
+
var FormContext = React15.createContext(null);
|
|
6953
7076
|
function useFormStore() {
|
|
6954
|
-
const store =
|
|
7077
|
+
const store = React15.useContext(FormContext);
|
|
6955
7078
|
if (!store) {
|
|
6956
7079
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
6957
7080
|
}
|
|
@@ -6965,8 +7088,8 @@ function Form({
|
|
|
6965
7088
|
children,
|
|
6966
7089
|
...rest
|
|
6967
7090
|
}) {
|
|
6968
|
-
const ref =
|
|
6969
|
-
const bypass =
|
|
7091
|
+
const ref = React15.useRef(null);
|
|
7092
|
+
const bypass = React15.useRef(false);
|
|
6970
7093
|
const handleSubmit = async (e) => {
|
|
6971
7094
|
if (bypass.current) {
|
|
6972
7095
|
bypass.current = false;
|
|
@@ -7018,12 +7141,12 @@ function useFormField(name, options = {}) {
|
|
|
7018
7141
|
const store = useFormStore();
|
|
7019
7142
|
const { kind = "value", rules } = options;
|
|
7020
7143
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7021
|
-
|
|
7144
|
+
React15.useEffect(() => {
|
|
7022
7145
|
return () => {
|
|
7023
7146
|
if (rules !== void 0) store.removeRule(name);
|
|
7024
7147
|
};
|
|
7025
7148
|
}, [store, name]);
|
|
7026
|
-
const snap =
|
|
7149
|
+
const snap = React15.useSyncExternalStore(
|
|
7027
7150
|
store.subscribe,
|
|
7028
7151
|
() => store.getFieldSnapshot(name)
|
|
7029
7152
|
);
|
|
@@ -7035,7 +7158,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7035
7158
|
}
|
|
7036
7159
|
function useFieldArray(name) {
|
|
7037
7160
|
const store = useFormStore();
|
|
7038
|
-
|
|
7161
|
+
React15.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7039
7162
|
const arr = store.getValue(name) ?? [];
|
|
7040
7163
|
const keys = store.getKeys(name);
|
|
7041
7164
|
return {
|
|
@@ -7158,7 +7281,7 @@ function CreditCardForm({
|
|
|
7158
7281
|
className = "",
|
|
7159
7282
|
style
|
|
7160
7283
|
}) {
|
|
7161
|
-
const initial =
|
|
7284
|
+
const initial = React15.useRef({
|
|
7162
7285
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7163
7286
|
name: defaultValue?.name ?? "",
|
|
7164
7287
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7167,7 +7290,7 @@ function CreditCardForm({
|
|
|
7167
7290
|
const form = useForm({ initialValues: initial });
|
|
7168
7291
|
const numberStr = String(form.values.number ?? "");
|
|
7169
7292
|
const brand = detectBrand(numberStr);
|
|
7170
|
-
|
|
7293
|
+
React15.useEffect(() => {
|
|
7171
7294
|
onChange?.(toCard(form.values));
|
|
7172
7295
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7173
7296
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7269,6 +7392,7 @@ exports.Accordion = Accordion_default;
|
|
|
7269
7392
|
exports.AppShell = AppShell;
|
|
7270
7393
|
exports.AutoComplete = AutoComplete;
|
|
7271
7394
|
exports.Avatar = Avatar;
|
|
7395
|
+
exports.Badge = Badge;
|
|
7272
7396
|
exports.Box = Box;
|
|
7273
7397
|
exports.Breadcrumbs = Breadcrumbs;
|
|
7274
7398
|
exports.Button = Button;
|
|
@@ -7297,6 +7421,7 @@ exports.Grid = Grid2;
|
|
|
7297
7421
|
exports.GridCard = GridCard;
|
|
7298
7422
|
exports.Icon = icons_default;
|
|
7299
7423
|
exports.IconButton = IconButton;
|
|
7424
|
+
exports.Kbd = Kbd;
|
|
7300
7425
|
exports.List = List2;
|
|
7301
7426
|
exports.LoadingSpinner = LoadingSpinner;
|
|
7302
7427
|
exports.MegaMenu = MegaMenu_default;
|