@geomak/ui 6.9.0 → 6.11.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 +419 -222
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +85 -1
- package/dist/index.d.ts +85 -1
- package/dist/index.js +226 -31
- package/dist/index.js.map +1 -1
- package/dist/styles.css +15 -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 React19 = 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');
|
|
@@ -10,8 +10,8 @@ var framerMotion = require('framer-motion');
|
|
|
10
10
|
var TooltipPrimitive = require('@radix-ui/react-tooltip');
|
|
11
11
|
var TabsPrimitive = require('@radix-ui/react-tabs');
|
|
12
12
|
var AccordionPrimitive = require('@radix-ui/react-accordion');
|
|
13
|
-
var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
|
|
14
13
|
var Popover = require('@radix-ui/react-popover');
|
|
14
|
+
var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
|
|
15
15
|
var SwitchPrimitive = require('@radix-ui/react-switch');
|
|
16
16
|
var NavigationMenu = require('@radix-ui/react-navigation-menu');
|
|
17
17
|
var CheckboxPrimitive = require('@radix-ui/react-checkbox');
|
|
@@ -39,14 +39,14 @@ function _interopNamespace(e) {
|
|
|
39
39
|
return Object.freeze(n);
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
var
|
|
42
|
+
var React19__default = /*#__PURE__*/_interopDefault(React19);
|
|
43
43
|
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
|
|
44
44
|
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
45
45
|
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
|
|
46
46
|
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
|
|
47
47
|
var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
|
|
48
|
-
var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
|
|
49
48
|
var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
|
|
49
|
+
var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
|
|
50
50
|
var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
|
|
51
51
|
var NavigationMenu__namespace = /*#__PURE__*/_interopNamespace(NavigationMenu);
|
|
52
52
|
var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
|
|
@@ -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] = React19.useState(null);
|
|
218
|
+
React19.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 = React19.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 = React19.createContext(null);
|
|
964
964
|
function useTabsContext() {
|
|
965
|
-
const ctx =
|
|
965
|
+
const ctx = React19.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] = React19.useState(defaultValue);
|
|
988
988
|
const current = isControlled ? value : internal;
|
|
989
989
|
const reduced = !!framerMotion.useReducedMotion();
|
|
990
|
-
const indicatorId =
|
|
991
|
-
const select =
|
|
990
|
+
const indicatorId = React19.useId();
|
|
991
|
+
const select = React19.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 = React19.useRef(/* @__PURE__ */ new Map());
|
|
996
|
+
const orderRef = React19.useRef(0);
|
|
997
|
+
const [, bump] = React19.useState(0);
|
|
998
|
+
const registerTab = React19.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 = React19.useCallback((val) => {
|
|
1004
1004
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
1005
1005
|
}, []);
|
|
1006
|
-
const getTabs =
|
|
1006
|
+
const getTabs = React19.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 = React19.useRef(null);
|
|
1027
|
+
const [edges, setEdges] = React19.useState({ start: false, end: false });
|
|
1028
1028
|
const scrollable = variant !== "segmented";
|
|
1029
|
-
|
|
1029
|
+
React19.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 = React19.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
|
+
React19.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] = React19.useState(false);
|
|
1119
|
+
const wrapRef = React19.useRef(null);
|
|
1120
|
+
const timer = React19.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
|
+
React19.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
|
+
React19.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 = React19.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 } = React19.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] = React19.useState(false);
|
|
1526
1526
|
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1527
1527
|
const visible = [];
|
|
1528
1528
|
if (shouldCollapse) {
|
|
@@ -1666,7 +1666,7 @@ function Kbd({
|
|
|
1666
1666
|
style
|
|
1667
1667
|
}) {
|
|
1668
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(
|
|
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(React19__default.default.Fragment, { children: [
|
|
1670
1670
|
i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
|
|
1671
1671
|
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
|
|
1672
1672
|
] }, `${k}-${i}`)) });
|
|
@@ -1739,13 +1739,13 @@ function CardCarousel({
|
|
|
1739
1739
|
className = "",
|
|
1740
1740
|
style
|
|
1741
1741
|
}) {
|
|
1742
|
-
const scrollerRef =
|
|
1743
|
-
const slides =
|
|
1744
|
-
const [active, setActive] =
|
|
1745
|
-
const [atStart, setAtStart] =
|
|
1746
|
-
const [atEnd, setAtEnd] =
|
|
1742
|
+
const scrollerRef = React19.useRef(null);
|
|
1743
|
+
const slides = React19__default.default.Children.toArray(children);
|
|
1744
|
+
const [active, setActive] = React19.useState(0);
|
|
1745
|
+
const [atStart, setAtStart] = React19.useState(true);
|
|
1746
|
+
const [atEnd, setAtEnd] = React19.useState(false);
|
|
1747
1747
|
const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
|
|
1748
|
-
const update =
|
|
1748
|
+
const update = React19.useCallback(() => {
|
|
1749
1749
|
const el = scrollerRef.current;
|
|
1750
1750
|
if (!el) return;
|
|
1751
1751
|
el.clientWidth;
|
|
@@ -1755,7 +1755,7 @@ function CardCarousel({
|
|
|
1755
1755
|
const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
|
|
1756
1756
|
setActive(Math.round(el.scrollLeft / slideW));
|
|
1757
1757
|
}, [gap]);
|
|
1758
|
-
|
|
1758
|
+
React19.useEffect(() => {
|
|
1759
1759
|
update();
|
|
1760
1760
|
const el = scrollerRef.current;
|
|
1761
1761
|
if (!el) return;
|
|
@@ -1888,7 +1888,7 @@ function FAB({
|
|
|
1888
1888
|
className = "",
|
|
1889
1889
|
style
|
|
1890
1890
|
}) {
|
|
1891
|
-
const [open, setOpen] =
|
|
1891
|
+
const [open, setOpen] = React19.useState(false);
|
|
1892
1892
|
const reduced = framerMotion.useReducedMotion();
|
|
1893
1893
|
const hasDial = !!actions && actions.length > 0;
|
|
1894
1894
|
const bottom = position.startsWith("bottom");
|
|
@@ -1959,7 +1959,202 @@ function FAB({
|
|
|
1959
1959
|
}
|
|
1960
1960
|
);
|
|
1961
1961
|
}
|
|
1962
|
-
|
|
1962
|
+
function PopConfirm({
|
|
1963
|
+
children,
|
|
1964
|
+
title,
|
|
1965
|
+
description,
|
|
1966
|
+
onConfirm,
|
|
1967
|
+
onCancel,
|
|
1968
|
+
confirmText = "Confirm",
|
|
1969
|
+
cancelText = "Cancel",
|
|
1970
|
+
tone = "default",
|
|
1971
|
+
icon,
|
|
1972
|
+
side = "top",
|
|
1973
|
+
open,
|
|
1974
|
+
onOpenChange,
|
|
1975
|
+
className = ""
|
|
1976
|
+
}) {
|
|
1977
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React19.useState(false);
|
|
1978
|
+
const [loading, setLoading] = React19.useState(false);
|
|
1979
|
+
const isOpen = open ?? uncontrolledOpen;
|
|
1980
|
+
const setOpen = (next) => {
|
|
1981
|
+
onOpenChange?.(next);
|
|
1982
|
+
if (open === void 0) setUncontrolledOpen(next);
|
|
1983
|
+
};
|
|
1984
|
+
const handleConfirm = async () => {
|
|
1985
|
+
try {
|
|
1986
|
+
setLoading(true);
|
|
1987
|
+
await onConfirm?.();
|
|
1988
|
+
setOpen(false);
|
|
1989
|
+
} finally {
|
|
1990
|
+
setLoading(false);
|
|
1991
|
+
}
|
|
1992
|
+
};
|
|
1993
|
+
const handleCancel = () => {
|
|
1994
|
+
onCancel?.();
|
|
1995
|
+
setOpen(false);
|
|
1996
|
+
};
|
|
1997
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: isOpen, onOpenChange: (o) => o ? setOpen(true) : handleCancel(), children: [
|
|
1998
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Trigger, { asChild: true, children }),
|
|
1999
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2000
|
+
Popover__namespace.Content,
|
|
2001
|
+
{
|
|
2002
|
+
side,
|
|
2003
|
+
sideOffset: 8,
|
|
2004
|
+
collisionPadding: 12,
|
|
2005
|
+
className: [
|
|
2006
|
+
"z-[400] w-64 rounded-lg border border-border bg-surface p-3.5 shadow-lg",
|
|
2007
|
+
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
2008
|
+
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
|
|
2009
|
+
className
|
|
2010
|
+
].filter(Boolean).join(" "),
|
|
2011
|
+
children: [
|
|
2012
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2.5", children: [
|
|
2013
|
+
icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `mt-0.5 flex h-5 w-5 flex-shrink-0 items-center justify-center ${tone === "danger" ? "text-status-error" : "text-status-warning"}`, children: icon }),
|
|
2014
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
|
|
2015
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-foreground", children: title }),
|
|
2016
|
+
description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-xs text-foreground-secondary leading-snug", children: description })
|
|
2017
|
+
] })
|
|
2018
|
+
] }),
|
|
2019
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 flex justify-end gap-2", children: [
|
|
2020
|
+
/* @__PURE__ */ jsxRuntime.jsx(Button, { content: cancelText, size: "sm", variant: "ghost", onClick: handleCancel }),
|
|
2021
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2022
|
+
Button,
|
|
2023
|
+
{
|
|
2024
|
+
content: confirmText,
|
|
2025
|
+
size: "sm",
|
|
2026
|
+
variant: tone === "danger" ? "danger" : "primary",
|
|
2027
|
+
loading,
|
|
2028
|
+
onClick: handleConfirm
|
|
2029
|
+
}
|
|
2030
|
+
)
|
|
2031
|
+
] }),
|
|
2032
|
+
/* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Arrow, { className: "fill-surface" })
|
|
2033
|
+
]
|
|
2034
|
+
}
|
|
2035
|
+
) })
|
|
2036
|
+
] });
|
|
2037
|
+
}
|
|
2038
|
+
var WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
2039
|
+
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
2040
|
+
var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
2041
|
+
var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
2042
|
+
var addMonths = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
|
|
2043
|
+
function buildGrid(month, weekStartsOn) {
|
|
2044
|
+
const first = new Date(month.getFullYear(), month.getMonth(), 1);
|
|
2045
|
+
const offset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
2046
|
+
const start = new Date(first);
|
|
2047
|
+
start.setDate(first.getDate() - offset);
|
|
2048
|
+
return Array.from({ length: 42 }, (_, i) => {
|
|
2049
|
+
const d = new Date(start);
|
|
2050
|
+
d.setDate(start.getDate() + i);
|
|
2051
|
+
return d;
|
|
2052
|
+
});
|
|
2053
|
+
}
|
|
2054
|
+
var NavIcon = ({ dir }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: dir === "left" ? "M15 19l-7-7 7-7" : "M9 5l7 7-7 7" }) });
|
|
2055
|
+
function Calendar2({
|
|
2056
|
+
value,
|
|
2057
|
+
onChange,
|
|
2058
|
+
month,
|
|
2059
|
+
defaultMonth,
|
|
2060
|
+
onMonthChange,
|
|
2061
|
+
events,
|
|
2062
|
+
min,
|
|
2063
|
+
max,
|
|
2064
|
+
weekStartsOn = 0,
|
|
2065
|
+
className = "",
|
|
2066
|
+
style
|
|
2067
|
+
}) {
|
|
2068
|
+
const today = React19.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
|
|
2069
|
+
const [internalMonth, setInternalMonth] = React19.useState(() => month ?? defaultMonth ?? value ?? today);
|
|
2070
|
+
const visible = month ?? internalMonth;
|
|
2071
|
+
const setMonth = (next) => {
|
|
2072
|
+
onMonthChange?.(next);
|
|
2073
|
+
if (month === void 0) setInternalMonth(next);
|
|
2074
|
+
};
|
|
2075
|
+
const grid = React19.useMemo(() => buildGrid(visible, weekStartsOn), [visible, weekStartsOn]);
|
|
2076
|
+
const weekdays = React19.useMemo(() => Array.from({ length: 7 }, (_, i) => WEEKDAYS[(i + weekStartsOn) % 7]), [weekStartsOn]);
|
|
2077
|
+
const eventsByDay = React19.useMemo(() => {
|
|
2078
|
+
const map = /* @__PURE__ */ new Map();
|
|
2079
|
+
for (const ev of events ?? []) {
|
|
2080
|
+
const key = startOfDay(ev.date).toDateString();
|
|
2081
|
+
const arr = map.get(key) ?? [];
|
|
2082
|
+
arr.push(ev);
|
|
2083
|
+
map.set(key, arr);
|
|
2084
|
+
}
|
|
2085
|
+
return map;
|
|
2086
|
+
}, [events]);
|
|
2087
|
+
const disabled = (d) => min && d < startOfDay(min) || max && d > startOfDay(max);
|
|
2088
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["inline-block rounded-lg border border-border bg-surface p-3 select-none", className].filter(Boolean).join(" "), style, children: [
|
|
2089
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between px-1", children: [
|
|
2090
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2091
|
+
"button",
|
|
2092
|
+
{
|
|
2093
|
+
type: "button",
|
|
2094
|
+
"aria-label": "Previous month",
|
|
2095
|
+
onClick: () => setMonth(addMonths(visible, -1)),
|
|
2096
|
+
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground-secondary hover:bg-surface-raised hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
2097
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(NavIcon, { dir: "left" })
|
|
2098
|
+
}
|
|
2099
|
+
),
|
|
2100
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-foreground", "aria-live": "polite", children: [
|
|
2101
|
+
MONTHS[visible.getMonth()],
|
|
2102
|
+
" ",
|
|
2103
|
+
visible.getFullYear()
|
|
2104
|
+
] }),
|
|
2105
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2106
|
+
"button",
|
|
2107
|
+
{
|
|
2108
|
+
type: "button",
|
|
2109
|
+
"aria-label": "Next month",
|
|
2110
|
+
onClick: () => setMonth(addMonths(visible, 1)),
|
|
2111
|
+
className: "flex h-7 w-7 items-center justify-center rounded-md text-foreground-secondary hover:bg-surface-raised hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
2112
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(NavIcon, { dir: "right" })
|
|
2113
|
+
}
|
|
2114
|
+
)
|
|
2115
|
+
] }),
|
|
2116
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 mb-1", children: weekdays.map((w) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center text-[11px] font-medium uppercase tracking-wide text-foreground-muted py-1", children: w }, w)) }),
|
|
2117
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 gap-0.5", role: "grid", children: grid.map((d, i) => {
|
|
2118
|
+
const inMonth = d.getMonth() === visible.getMonth();
|
|
2119
|
+
const isSelected = value != null && sameDay(d, value);
|
|
2120
|
+
const isToday = sameDay(d, today);
|
|
2121
|
+
const isDisabled = disabled(d);
|
|
2122
|
+
const dayEvents = eventsByDay.get(d.toDateString()) ?? [];
|
|
2123
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2124
|
+
"button",
|
|
2125
|
+
{
|
|
2126
|
+
type: "button",
|
|
2127
|
+
role: "gridcell",
|
|
2128
|
+
"aria-selected": isSelected,
|
|
2129
|
+
"aria-current": isToday ? "date" : void 0,
|
|
2130
|
+
disabled: isDisabled,
|
|
2131
|
+
onClick: () => onChange?.(startOfDay(d)),
|
|
2132
|
+
className: [
|
|
2133
|
+
"relative flex h-9 w-9 flex-col items-center justify-center rounded-md text-sm transition-colors",
|
|
2134
|
+
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
2135
|
+
isSelected ? "bg-accent text-accent-fg font-semibold" : inMonth ? "text-foreground hover:bg-surface-raised" : "text-foreground-muted hover:bg-surface-raised",
|
|
2136
|
+
isDisabled ? "opacity-40 cursor-not-allowed hover:bg-transparent" : "",
|
|
2137
|
+
!isSelected && isToday ? "ring-1 ring-inset ring-accent/60" : ""
|
|
2138
|
+
].filter(Boolean).join(" "),
|
|
2139
|
+
children: [
|
|
2140
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "leading-none", children: d.getDate() }),
|
|
2141
|
+
dayEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-1 flex gap-0.5", children: dayEvents.slice(0, 3).map((ev, j) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2142
|
+
"span",
|
|
2143
|
+
{
|
|
2144
|
+
title: ev.label,
|
|
2145
|
+
className: "h-1 w-1 rounded-full",
|
|
2146
|
+
style: { backgroundColor: ev.color ?? (isSelected ? "var(--color-accent-fg)" : "var(--color-accent)") }
|
|
2147
|
+
},
|
|
2148
|
+
j
|
|
2149
|
+
)) })
|
|
2150
|
+
]
|
|
2151
|
+
},
|
|
2152
|
+
i
|
|
2153
|
+
);
|
|
2154
|
+
}) })
|
|
2155
|
+
] });
|
|
2156
|
+
}
|
|
2157
|
+
var NotificationContext = React19.createContext({
|
|
1963
2158
|
open: () => void 0,
|
|
1964
2159
|
close: () => void 0
|
|
1965
2160
|
});
|
|
@@ -2017,26 +2212,26 @@ function NotificationItem({
|
|
|
2017
2212
|
onClose,
|
|
2018
2213
|
reduced
|
|
2019
2214
|
}) {
|
|
2020
|
-
const [paused, setPaused] =
|
|
2215
|
+
const [paused, setPaused] = React19.useState(false);
|
|
2021
2216
|
const duration = n.duration ?? 4e3;
|
|
2022
2217
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
2023
2218
|
const showProgress = !reduced && isAutoDismissing;
|
|
2024
|
-
const timerRef =
|
|
2025
|
-
const startTimeRef =
|
|
2026
|
-
const remainingRef =
|
|
2027
|
-
const clearTimer =
|
|
2219
|
+
const timerRef = React19.useRef(null);
|
|
2220
|
+
const startTimeRef = React19.useRef(0);
|
|
2221
|
+
const remainingRef = React19.useRef(duration);
|
|
2222
|
+
const clearTimer = React19.useCallback(() => {
|
|
2028
2223
|
if (timerRef.current !== null) {
|
|
2029
2224
|
clearTimeout(timerRef.current);
|
|
2030
2225
|
timerRef.current = null;
|
|
2031
2226
|
}
|
|
2032
2227
|
}, []);
|
|
2033
|
-
const scheduleDismiss =
|
|
2228
|
+
const scheduleDismiss = React19.useCallback((ms) => {
|
|
2034
2229
|
clearTimer();
|
|
2035
2230
|
if (!isAutoDismissing) return;
|
|
2036
2231
|
startTimeRef.current = Date.now();
|
|
2037
2232
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
2038
2233
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
2039
|
-
|
|
2234
|
+
React19.useEffect(() => {
|
|
2040
2235
|
if (paused || !isAutoDismissing) return;
|
|
2041
2236
|
scheduleDismiss(remainingRef.current);
|
|
2042
2237
|
return clearTimer;
|
|
@@ -2119,15 +2314,15 @@ function NotificationProvider({
|
|
|
2119
2314
|
children,
|
|
2120
2315
|
position = "top-right"
|
|
2121
2316
|
}) {
|
|
2122
|
-
const [notifications, setNotifications] =
|
|
2317
|
+
const [notifications, setNotifications] = React19.useState([]);
|
|
2123
2318
|
const reduced = framerMotion.useReducedMotion();
|
|
2124
|
-
const open =
|
|
2319
|
+
const open = React19.useCallback((payload) => {
|
|
2125
2320
|
setNotifications((prev) => [
|
|
2126
2321
|
...prev,
|
|
2127
2322
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
2128
2323
|
]);
|
|
2129
2324
|
}, []);
|
|
2130
|
-
const close =
|
|
2325
|
+
const close = React19.useCallback((id) => {
|
|
2131
2326
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
2132
2327
|
}, []);
|
|
2133
2328
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -2156,7 +2351,7 @@ function NotificationProvider({
|
|
|
2156
2351
|
] });
|
|
2157
2352
|
}
|
|
2158
2353
|
function useNotification() {
|
|
2159
|
-
const { open } =
|
|
2354
|
+
const { open } = React19.useContext(NotificationContext);
|
|
2160
2355
|
return {
|
|
2161
2356
|
info: (props) => open({ type: "info", ...props }),
|
|
2162
2357
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -2273,10 +2468,10 @@ function FadingBase({
|
|
|
2273
2468
|
isMounted = false,
|
|
2274
2469
|
children
|
|
2275
2470
|
}) {
|
|
2276
|
-
const [shouldRender, setShouldRender] =
|
|
2277
|
-
const [visible, setVisible] =
|
|
2278
|
-
const timerRef =
|
|
2279
|
-
|
|
2471
|
+
const [shouldRender, setShouldRender] = React19.useState(isMounted);
|
|
2472
|
+
const [visible, setVisible] = React19.useState(false);
|
|
2473
|
+
const timerRef = React19.useRef(null);
|
|
2474
|
+
React19.useEffect(() => {
|
|
2280
2475
|
if (isMounted) {
|
|
2281
2476
|
setShouldRender(true);
|
|
2282
2477
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -2374,8 +2569,8 @@ function ScalableContainer({
|
|
|
2374
2569
|
togglePosition = "top-right",
|
|
2375
2570
|
className = ""
|
|
2376
2571
|
}) {
|
|
2377
|
-
const containerRef =
|
|
2378
|
-
const [internalScaled, setInternalScaled] =
|
|
2572
|
+
const containerRef = React19.useRef(null);
|
|
2573
|
+
const [internalScaled, setInternalScaled] = React19.useState(false);
|
|
2379
2574
|
const isScaled = expanded ?? internalScaled;
|
|
2380
2575
|
const reduced = framerMotion.useReducedMotion();
|
|
2381
2576
|
const onToggle = () => {
|
|
@@ -2513,17 +2708,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2513
2708
|
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)) });
|
|
2514
2709
|
}
|
|
2515
2710
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2516
|
-
const [activeIndex, setActiveIndex] =
|
|
2517
|
-
const [indexPool, setIndexPool] =
|
|
2518
|
-
const cardRefs =
|
|
2519
|
-
const getIndexes =
|
|
2711
|
+
const [activeIndex, setActiveIndex] = React19.useState(0);
|
|
2712
|
+
const [indexPool, setIndexPool] = React19.useState([]);
|
|
2713
|
+
const cardRefs = React19.useRef([]);
|
|
2714
|
+
const getIndexes = React19.useMemo(() => {
|
|
2520
2715
|
let nextIndex = activeIndex + 1;
|
|
2521
2716
|
let previousIndex = activeIndex - 1;
|
|
2522
2717
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2523
2718
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2524
2719
|
return { previousIndex, nextIndex };
|
|
2525
2720
|
}, [activeIndex, items.length]);
|
|
2526
|
-
|
|
2721
|
+
React19.useEffect(() => {
|
|
2527
2722
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2528
2723
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2529
2724
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2696,8 +2891,8 @@ function writeDismissed(key) {
|
|
|
2696
2891
|
}
|
|
2697
2892
|
}
|
|
2698
2893
|
function useTargetBbox(ref) {
|
|
2699
|
-
const [bbox, setBbox] =
|
|
2700
|
-
|
|
2894
|
+
const [bbox, setBbox] = React19.useState(null);
|
|
2895
|
+
React19.useLayoutEffect(() => {
|
|
2701
2896
|
const el = ref?.current;
|
|
2702
2897
|
if (!el) {
|
|
2703
2898
|
setBbox(null);
|
|
@@ -2727,7 +2922,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2727
2922
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2728
2923
|
}
|
|
2729
2924
|
function useFocusTrap(containerRef, active) {
|
|
2730
|
-
|
|
2925
|
+
React19.useEffect(() => {
|
|
2731
2926
|
if (!active) return;
|
|
2732
2927
|
const el = containerRef.current;
|
|
2733
2928
|
if (!el) return;
|
|
@@ -2766,16 +2961,16 @@ function Wizard({
|
|
|
2766
2961
|
onComplete,
|
|
2767
2962
|
onSkip
|
|
2768
2963
|
}) {
|
|
2769
|
-
const tooltipRef =
|
|
2770
|
-
const tooltipTitleId =
|
|
2771
|
-
const tooltipBodyId =
|
|
2964
|
+
const tooltipRef = React19.useRef(null);
|
|
2965
|
+
const tooltipTitleId = React19.useId();
|
|
2966
|
+
const tooltipBodyId = React19.useId();
|
|
2772
2967
|
const reduced = framerMotion.useReducedMotion();
|
|
2773
|
-
const [open, setOpen] =
|
|
2774
|
-
const [activeIndex, setActiveIndex] =
|
|
2968
|
+
const [open, setOpen] = React19.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2969
|
+
const [activeIndex, setActiveIndex] = React19.useState(0);
|
|
2775
2970
|
const step = steps[activeIndex];
|
|
2776
2971
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2777
2972
|
useFocusTrap(tooltipRef, open);
|
|
2778
|
-
|
|
2973
|
+
React19.useEffect(() => {
|
|
2779
2974
|
if (!open || !dismissible) return;
|
|
2780
2975
|
const onKey = (e) => {
|
|
2781
2976
|
if (e.key === "Escape") {
|
|
@@ -2786,12 +2981,12 @@ function Wizard({
|
|
|
2786
2981
|
document.addEventListener("keydown", onKey);
|
|
2787
2982
|
return () => document.removeEventListener("keydown", onKey);
|
|
2788
2983
|
}, [open, dismissible]);
|
|
2789
|
-
const handleSkip =
|
|
2984
|
+
const handleSkip = React19.useCallback(() => {
|
|
2790
2985
|
writeDismissed(storageKey);
|
|
2791
2986
|
setOpen(false);
|
|
2792
2987
|
onSkip?.();
|
|
2793
2988
|
}, [storageKey, onSkip]);
|
|
2794
|
-
const handleComplete =
|
|
2989
|
+
const handleComplete = React19.useCallback(() => {
|
|
2795
2990
|
writeDismissed(storageKey);
|
|
2796
2991
|
setOpen(false);
|
|
2797
2992
|
onComplete?.();
|
|
@@ -3062,7 +3257,7 @@ function Field({
|
|
|
3062
3257
|
);
|
|
3063
3258
|
}
|
|
3064
3259
|
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" }) });
|
|
3065
|
-
var SearchInput =
|
|
3260
|
+
var SearchInput = React19__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
3066
3261
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3067
3262
|
"div",
|
|
3068
3263
|
{
|
|
@@ -3116,11 +3311,11 @@ function MultiTagRow({
|
|
|
3116
3311
|
labelFor,
|
|
3117
3312
|
onRemove
|
|
3118
3313
|
}) {
|
|
3119
|
-
const wrapRef =
|
|
3120
|
-
const measureRef =
|
|
3121
|
-
const [visibleCount, setVisibleCount] =
|
|
3314
|
+
const wrapRef = React19.useRef(null);
|
|
3315
|
+
const measureRef = React19.useRef(null);
|
|
3316
|
+
const [visibleCount, setVisibleCount] = React19.useState(values.length);
|
|
3122
3317
|
const key = values.map(String).join("|");
|
|
3123
|
-
|
|
3318
|
+
React19.useLayoutEffect(() => {
|
|
3124
3319
|
const wrap = wrapRef.current;
|
|
3125
3320
|
const measure = measureRef.current;
|
|
3126
3321
|
if (!wrap || !measure) return;
|
|
@@ -3214,16 +3409,16 @@ function Dropdown({
|
|
|
3214
3409
|
size = "md",
|
|
3215
3410
|
className = ""
|
|
3216
3411
|
}) {
|
|
3217
|
-
const [open, setOpen] =
|
|
3218
|
-
const [selectedItems, setSelectedItems] =
|
|
3219
|
-
const [searchTerm, setSearchTerm] =
|
|
3220
|
-
const [innerItems, setInnerItems] =
|
|
3221
|
-
const errorId =
|
|
3412
|
+
const [open, setOpen] = React19.useState(false);
|
|
3413
|
+
const [selectedItems, setSelectedItems] = React19.useState([]);
|
|
3414
|
+
const [searchTerm, setSearchTerm] = React19.useState("");
|
|
3415
|
+
const [innerItems, setInnerItems] = React19.useState([]);
|
|
3416
|
+
const errorId = React19.useId();
|
|
3222
3417
|
const hasError = errorMessage != null;
|
|
3223
|
-
|
|
3418
|
+
React19.useEffect(() => {
|
|
3224
3419
|
setInnerItems(items);
|
|
3225
3420
|
}, [items]);
|
|
3226
|
-
|
|
3421
|
+
React19.useEffect(() => {
|
|
3227
3422
|
if (isMultiselect && Array.isArray(value)) {
|
|
3228
3423
|
setSelectedItems(value);
|
|
3229
3424
|
}
|
|
@@ -3548,7 +3743,7 @@ function TableBody({
|
|
|
3548
3743
|
expandRow,
|
|
3549
3744
|
getRowKey
|
|
3550
3745
|
}) {
|
|
3551
|
-
const [expanded, setExpanded] =
|
|
3746
|
+
const [expanded, setExpanded] = React19.useState(() => /* @__PURE__ */ new Set());
|
|
3552
3747
|
const reduced = framerMotion.useReducedMotion();
|
|
3553
3748
|
const toggleRow = (rowKey) => {
|
|
3554
3749
|
setExpanded((prev) => {
|
|
@@ -3563,7 +3758,7 @@ function TableBody({
|
|
|
3563
3758
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3564
3759
|
const rowKey = getRowKey(row, i);
|
|
3565
3760
|
const isExpanded = expanded.has(rowKey);
|
|
3566
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3761
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React19__default.default.Fragment, { children: [
|
|
3567
3762
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3568
3763
|
"tr",
|
|
3569
3764
|
{
|
|
@@ -3619,9 +3814,9 @@ function Pagination({
|
|
|
3619
3814
|
const matchedOption = picker.find(
|
|
3620
3815
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3621
3816
|
);
|
|
3622
|
-
const [perPageKey, setPerPageKey] =
|
|
3817
|
+
const [perPageKey, setPerPageKey] = React19.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3623
3818
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3624
|
-
|
|
3819
|
+
React19.useEffect(() => {
|
|
3625
3820
|
if (serverSide && options.perPage != null) {
|
|
3626
3821
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3627
3822
|
if (next) setPerPageKey(next.key);
|
|
@@ -3685,14 +3880,14 @@ function Table({
|
|
|
3685
3880
|
className = "",
|
|
3686
3881
|
style
|
|
3687
3882
|
}) {
|
|
3688
|
-
const searchRef =
|
|
3689
|
-
const [searchTerm, setSearchTerm] =
|
|
3690
|
-
const [perPage, setPerPage] =
|
|
3883
|
+
const searchRef = React19.useRef(null);
|
|
3884
|
+
const [searchTerm, setSearchTerm] = React19.useState("");
|
|
3885
|
+
const [perPage, setPerPage] = React19.useState(
|
|
3691
3886
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3692
3887
|
);
|
|
3693
|
-
const [activePage, setActivePage] =
|
|
3888
|
+
const [activePage, setActivePage] = React19.useState(0);
|
|
3694
3889
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3695
|
-
const filteredRows =
|
|
3890
|
+
const filteredRows = React19.useMemo(() => {
|
|
3696
3891
|
if (isServerSide || !searchTerm) return rows;
|
|
3697
3892
|
const term = searchTerm.toLowerCase();
|
|
3698
3893
|
return rows.filter(
|
|
@@ -3701,29 +3896,29 @@ function Table({
|
|
|
3701
3896
|
)
|
|
3702
3897
|
);
|
|
3703
3898
|
}, [rows, searchTerm, isServerSide]);
|
|
3704
|
-
const datasets =
|
|
3899
|
+
const datasets = React19.useMemo(() => {
|
|
3705
3900
|
if (isServerSide) return [rows];
|
|
3706
3901
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3707
3902
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3708
|
-
const MAX_PAGE =
|
|
3903
|
+
const MAX_PAGE = React19.useMemo(() => {
|
|
3709
3904
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3710
3905
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3711
3906
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3712
3907
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3713
3908
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3714
|
-
const currentPageRows =
|
|
3909
|
+
const currentPageRows = React19.useMemo(() => {
|
|
3715
3910
|
if (isServerSide) return rows;
|
|
3716
3911
|
return datasets[activePage] ?? [];
|
|
3717
3912
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3718
|
-
|
|
3913
|
+
React19.useEffect(() => {
|
|
3719
3914
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3720
3915
|
setPerPage(pagination.perPage);
|
|
3721
3916
|
}
|
|
3722
3917
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3723
|
-
|
|
3918
|
+
React19.useEffect(() => {
|
|
3724
3919
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3725
3920
|
}, [isServerSide, pagination.perPage]);
|
|
3726
|
-
|
|
3921
|
+
React19.useEffect(() => {
|
|
3727
3922
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3728
3923
|
setActivePage(pagination.page - 1);
|
|
3729
3924
|
}, [isServerSide, pagination.page]);
|
|
@@ -3807,7 +4002,7 @@ function TableSkeletonBody({
|
|
|
3807
4002
|
)) });
|
|
3808
4003
|
}
|
|
3809
4004
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3810
|
-
const id =
|
|
4005
|
+
const id = React19.useId();
|
|
3811
4006
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3812
4007
|
SwitchPrimitive__namespace.Root,
|
|
3813
4008
|
{
|
|
@@ -3991,7 +4186,7 @@ function Sidebar({
|
|
|
3991
4186
|
}
|
|
3992
4187
|
) });
|
|
3993
4188
|
}
|
|
3994
|
-
var MegaMenuContext =
|
|
4189
|
+
var MegaMenuContext = React19.createContext({ align: "start" });
|
|
3995
4190
|
function MegaMenu({
|
|
3996
4191
|
children,
|
|
3997
4192
|
align = "start",
|
|
@@ -4022,7 +4217,7 @@ function MegaMenu({
|
|
|
4022
4217
|
}
|
|
4023
4218
|
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";
|
|
4024
4219
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
4025
|
-
const { align } =
|
|
4220
|
+
const { align } = React19.useContext(MegaMenuContext);
|
|
4026
4221
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
4027
4222
|
if (!children) {
|
|
4028
4223
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -4107,8 +4302,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
4107
4302
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
4108
4303
|
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 });
|
|
4109
4304
|
}
|
|
4110
|
-
var elementsOfType = (children, type) =>
|
|
4111
|
-
(c) =>
|
|
4305
|
+
var elementsOfType = (children, type) => React19__default.default.Children.toArray(children).filter(
|
|
4306
|
+
(c) => React19__default.default.isValidElement(c) && c.type === type
|
|
4112
4307
|
);
|
|
4113
4308
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4114
4309
|
"svg",
|
|
@@ -4145,9 +4340,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
4145
4340
|
);
|
|
4146
4341
|
}
|
|
4147
4342
|
function MobilePanel({ panel, onNavigate }) {
|
|
4148
|
-
const nodes =
|
|
4343
|
+
const nodes = React19__default.default.Children.toArray(panel.props.children);
|
|
4149
4344
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
4150
|
-
if (!
|
|
4345
|
+
if (!React19__default.default.isValidElement(node)) return null;
|
|
4151
4346
|
const el = node;
|
|
4152
4347
|
if (el.type === MegaMenuSection) {
|
|
4153
4348
|
const { title, children } = el.props;
|
|
@@ -4166,8 +4361,8 @@ function MegaMenuMobile({
|
|
|
4166
4361
|
children,
|
|
4167
4362
|
label
|
|
4168
4363
|
}) {
|
|
4169
|
-
const [open, setOpen] =
|
|
4170
|
-
const [expanded, setExpanded] =
|
|
4364
|
+
const [open, setOpen] = React19.useState(false);
|
|
4365
|
+
const [expanded, setExpanded] = React19.useState(null);
|
|
4171
4366
|
const items = elementsOfType(children, MegaMenuItem);
|
|
4172
4367
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
4173
4368
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4240,17 +4435,17 @@ function AppShell({
|
|
|
4240
4435
|
children,
|
|
4241
4436
|
className = ""
|
|
4242
4437
|
}) {
|
|
4243
|
-
const [expanded, setExpanded] =
|
|
4244
|
-
const [isMobile, setIsMobile] =
|
|
4245
|
-
const [mobileOpen, setMobileOpen] =
|
|
4246
|
-
|
|
4438
|
+
const [expanded, setExpanded] = React19.useState(sidebarDefaultExpanded);
|
|
4439
|
+
const [isMobile, setIsMobile] = React19.useState(false);
|
|
4440
|
+
const [mobileOpen, setMobileOpen] = React19.useState(false);
|
|
4441
|
+
React19.useEffect(() => {
|
|
4247
4442
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
4248
4443
|
const update = (e) => setIsMobile(e.matches);
|
|
4249
4444
|
update(mq);
|
|
4250
4445
|
mq.addEventListener("change", update);
|
|
4251
4446
|
return () => mq.removeEventListener("change", update);
|
|
4252
4447
|
}, []);
|
|
4253
|
-
|
|
4448
|
+
React19.useEffect(() => {
|
|
4254
4449
|
if (!isMobile) setMobileOpen(false);
|
|
4255
4450
|
}, [isMobile]);
|
|
4256
4451
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4440,10 +4635,10 @@ function ThemeProvider({
|
|
|
4440
4635
|
className = "",
|
|
4441
4636
|
style
|
|
4442
4637
|
}) {
|
|
4443
|
-
const id =
|
|
4638
|
+
const id = React19__default.default.useId().replace(/:/g, "");
|
|
4444
4639
|
const scopeClass = `geo-th-${id}`;
|
|
4445
|
-
const divRef =
|
|
4446
|
-
|
|
4640
|
+
const divRef = React19.useRef(null);
|
|
4641
|
+
React19.useEffect(() => {
|
|
4447
4642
|
const el = divRef.current;
|
|
4448
4643
|
if (!el) return;
|
|
4449
4644
|
if (colorScheme === "auto") return;
|
|
@@ -4458,8 +4653,8 @@ function ThemeProvider({
|
|
|
4458
4653
|
}
|
|
4459
4654
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4460
4655
|
}, [colorScheme]);
|
|
4461
|
-
const lightVars =
|
|
4462
|
-
const darkVarStr =
|
|
4656
|
+
const lightVars = React19.useMemo(() => toCssVars(theme), [theme]);
|
|
4657
|
+
const darkVarStr = React19.useMemo(() => {
|
|
4463
4658
|
if (!darkTheme) return "";
|
|
4464
4659
|
const dvars = toCssVars(darkTheme);
|
|
4465
4660
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4499,7 +4694,7 @@ function TextInput({
|
|
|
4499
4694
|
prefix,
|
|
4500
4695
|
suffix
|
|
4501
4696
|
}) {
|
|
4502
|
-
const errorId =
|
|
4697
|
+
const errorId = React19.useId();
|
|
4503
4698
|
const hasError = errorMessage != null;
|
|
4504
4699
|
const hasAdornment = prefix != null || suffix != null;
|
|
4505
4700
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4569,7 +4764,7 @@ function NumberInput({
|
|
|
4569
4764
|
readOnly = false,
|
|
4570
4765
|
precision
|
|
4571
4766
|
}) {
|
|
4572
|
-
const errorId =
|
|
4767
|
+
const errorId = React19.useId();
|
|
4573
4768
|
const hasError = errorMessage != null;
|
|
4574
4769
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4575
4770
|
const round = (n) => {
|
|
@@ -4700,8 +4895,8 @@ function Password({
|
|
|
4700
4895
|
showIcon,
|
|
4701
4896
|
hideIcon
|
|
4702
4897
|
}) {
|
|
4703
|
-
const [visible, setVisible] =
|
|
4704
|
-
const errorId =
|
|
4898
|
+
const [visible, setVisible] = React19.useState(false);
|
|
4899
|
+
const errorId = React19.useId();
|
|
4705
4900
|
const hasError = errorMessage != null;
|
|
4706
4901
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4707
4902
|
Field,
|
|
@@ -4774,7 +4969,7 @@ function Checkbox({
|
|
|
4774
4969
|
}) {
|
|
4775
4970
|
const isChecked = checked ?? value ?? false;
|
|
4776
4971
|
const labelFirst = labelPosition === "left";
|
|
4777
|
-
const errorId =
|
|
4972
|
+
const errorId = React19.useId();
|
|
4778
4973
|
const hasError = errorMessage != null;
|
|
4779
4974
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4780
4975
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4882,8 +5077,8 @@ function RadioGroup({
|
|
|
4882
5077
|
className,
|
|
4883
5078
|
errorMessage
|
|
4884
5079
|
}) {
|
|
4885
|
-
const errorId =
|
|
4886
|
-
const groupId =
|
|
5080
|
+
const errorId = React19.useId();
|
|
5081
|
+
const groupId = React19.useId();
|
|
4887
5082
|
const hasError = errorMessage != null;
|
|
4888
5083
|
const labelFirst = labelPosition === "left";
|
|
4889
5084
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4983,11 +5178,11 @@ function Switch({
|
|
|
4983
5178
|
disabled,
|
|
4984
5179
|
errorMessage
|
|
4985
5180
|
}) {
|
|
4986
|
-
const id =
|
|
4987
|
-
const errorId =
|
|
5181
|
+
const id = React19.useId();
|
|
5182
|
+
const errorId = React19.useId();
|
|
4988
5183
|
const hasError = errorMessage != null;
|
|
4989
5184
|
const isControlled = checked !== void 0;
|
|
4990
|
-
const [internal, setInternal] =
|
|
5185
|
+
const [internal, setInternal] = React19.useState(defaultChecked);
|
|
4991
5186
|
const isOn = isControlled ? checked : internal;
|
|
4992
5187
|
const handle = (c) => {
|
|
4993
5188
|
if (!isControlled) setInternal(c);
|
|
@@ -5060,19 +5255,19 @@ function AutoComplete({
|
|
|
5060
5255
|
required,
|
|
5061
5256
|
htmlFor
|
|
5062
5257
|
}) {
|
|
5063
|
-
const errorId =
|
|
5258
|
+
const errorId = React19.useId();
|
|
5064
5259
|
const hasError = errorMessage != null;
|
|
5065
|
-
const [term, setTerm] =
|
|
5066
|
-
const [open, setOpen] =
|
|
5067
|
-
const [asyncItems, setAsyncItems] =
|
|
5068
|
-
const [loading, setLoading] =
|
|
5260
|
+
const [term, setTerm] = React19.useState("");
|
|
5261
|
+
const [open, setOpen] = React19.useState(false);
|
|
5262
|
+
const [asyncItems, setAsyncItems] = React19.useState([]);
|
|
5263
|
+
const [loading, setLoading] = React19.useState(false);
|
|
5069
5264
|
const isAsync = typeof onSearch === "function";
|
|
5070
|
-
const debounceRef =
|
|
5071
|
-
const requestIdRef =
|
|
5265
|
+
const debounceRef = React19.useRef(null);
|
|
5266
|
+
const requestIdRef = React19.useRef(0);
|
|
5072
5267
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
5073
5268
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
5074
5269
|
) : [];
|
|
5075
|
-
|
|
5270
|
+
React19.useEffect(() => {
|
|
5076
5271
|
if (!isAsync) return;
|
|
5077
5272
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5078
5273
|
if (!term.trim()) {
|
|
@@ -5228,15 +5423,15 @@ function TreeSelect({
|
|
|
5228
5423
|
defaultExpandedKeys = [],
|
|
5229
5424
|
size = "md"
|
|
5230
5425
|
}) {
|
|
5231
|
-
const errorId =
|
|
5426
|
+
const errorId = React19.useId();
|
|
5232
5427
|
const hasError = errorMessage != null;
|
|
5233
|
-
const [open, setOpen] =
|
|
5234
|
-
const [expanded, setExpanded] =
|
|
5235
|
-
const [activeIndex, setActiveIndex] =
|
|
5236
|
-
const listRef =
|
|
5237
|
-
const visible =
|
|
5238
|
-
const didSyncOnOpenRef =
|
|
5239
|
-
|
|
5428
|
+
const [open, setOpen] = React19.useState(false);
|
|
5429
|
+
const [expanded, setExpanded] = React19.useState(() => new Set(defaultExpandedKeys));
|
|
5430
|
+
const [activeIndex, setActiveIndex] = React19.useState(0);
|
|
5431
|
+
const listRef = React19.useRef(null);
|
|
5432
|
+
const visible = React19.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
5433
|
+
const didSyncOnOpenRef = React19.useRef(false);
|
|
5434
|
+
React19.useEffect(() => {
|
|
5240
5435
|
if (!open) {
|
|
5241
5436
|
didSyncOnOpenRef.current = false;
|
|
5242
5437
|
return;
|
|
@@ -5246,7 +5441,7 @@ function TreeSelect({
|
|
|
5246
5441
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
5247
5442
|
didSyncOnOpenRef.current = true;
|
|
5248
5443
|
}, [open, value]);
|
|
5249
|
-
const selectedNode =
|
|
5444
|
+
const selectedNode = React19.useMemo(
|
|
5250
5445
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
5251
5446
|
[items, value]
|
|
5252
5447
|
);
|
|
@@ -5477,11 +5672,11 @@ function FileInput({
|
|
|
5477
5672
|
required,
|
|
5478
5673
|
icon
|
|
5479
5674
|
}) {
|
|
5480
|
-
const inputRef =
|
|
5481
|
-
const errorId =
|
|
5482
|
-
const [files, setFiles] =
|
|
5483
|
-
const [dragging, setDragging] =
|
|
5484
|
-
const [sizeError, setSizeError] =
|
|
5675
|
+
const inputRef = React19.useRef(null);
|
|
5676
|
+
const errorId = React19.useId();
|
|
5677
|
+
const [files, setFiles] = React19.useState([]);
|
|
5678
|
+
const [dragging, setDragging] = React19.useState(false);
|
|
5679
|
+
const [sizeError, setSizeError] = React19.useState(null);
|
|
5485
5680
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5486
5681
|
const openPicker = () => {
|
|
5487
5682
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5627,7 +5822,7 @@ function addDays(d, n) {
|
|
|
5627
5822
|
c.setDate(c.getDate() + n);
|
|
5628
5823
|
return c;
|
|
5629
5824
|
}
|
|
5630
|
-
function
|
|
5825
|
+
function addMonths2(d, n) {
|
|
5631
5826
|
const c = new Date(d);
|
|
5632
5827
|
c.setMonth(c.getMonth() + n);
|
|
5633
5828
|
return c;
|
|
@@ -5638,7 +5833,7 @@ function defaultFormat(d) {
|
|
|
5638
5833
|
const day = d.getDate().toString().padStart(2, "0");
|
|
5639
5834
|
return `${y}-${m}-${day}`;
|
|
5640
5835
|
}
|
|
5641
|
-
function
|
|
5836
|
+
function buildGrid2(viewMonth, weekStartsOn) {
|
|
5642
5837
|
const first = startOfMonth(viewMonth);
|
|
5643
5838
|
const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
5644
5839
|
const gridStart = addDays(first, -startOffset);
|
|
@@ -5672,30 +5867,30 @@ function DatePicker({
|
|
|
5672
5867
|
size = "md",
|
|
5673
5868
|
className = ""
|
|
5674
5869
|
}) {
|
|
5675
|
-
const errorId =
|
|
5870
|
+
const errorId = React19.useId();
|
|
5676
5871
|
const hasError = errorMessage != null;
|
|
5677
|
-
const [open, setOpen] =
|
|
5678
|
-
const [viewMonth, setViewMonth] =
|
|
5679
|
-
const [focusDate, setFocusDate] =
|
|
5680
|
-
const [view, setView] =
|
|
5681
|
-
const gridRef =
|
|
5682
|
-
|
|
5872
|
+
const [open, setOpen] = React19.useState(false);
|
|
5873
|
+
const [viewMonth, setViewMonth] = React19.useState(() => startOfMonth(value ?? /* @__PURE__ */ new Date()));
|
|
5874
|
+
const [focusDate, setFocusDate] = React19.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
5875
|
+
const [view, setView] = React19.useState("days");
|
|
5876
|
+
const gridRef = React19.useRef(null);
|
|
5877
|
+
React19.useEffect(() => {
|
|
5683
5878
|
if (!open) return;
|
|
5684
5879
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5685
5880
|
setViewMonth(startOfMonth(target));
|
|
5686
5881
|
setFocusDate(target);
|
|
5687
5882
|
setView("days");
|
|
5688
5883
|
}, [open, value]);
|
|
5689
|
-
|
|
5884
|
+
React19.useEffect(() => {
|
|
5690
5885
|
if (!open) return;
|
|
5691
5886
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5692
5887
|
cell?.focus();
|
|
5693
5888
|
}, [open, focusDate]);
|
|
5694
|
-
const weekdays =
|
|
5889
|
+
const weekdays = React19.useMemo(() => {
|
|
5695
5890
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5696
5891
|
return ordered;
|
|
5697
5892
|
}, [weekStartsOn]);
|
|
5698
|
-
const grid =
|
|
5893
|
+
const grid = React19.useMemo(() => buildGrid2(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5699
5894
|
const isDisabled = (d) => {
|
|
5700
5895
|
if (min && d < min) return true;
|
|
5701
5896
|
if (max && d > max) return true;
|
|
@@ -5726,14 +5921,14 @@ function DatePicker({
|
|
|
5726
5921
|
next(7);
|
|
5727
5922
|
} else if (e.key === "PageUp") {
|
|
5728
5923
|
e.preventDefault();
|
|
5729
|
-
const nm =
|
|
5924
|
+
const nm = addMonths2(viewMonth, -1);
|
|
5730
5925
|
setViewMonth(nm);
|
|
5731
|
-
setFocusDate((d) =>
|
|
5926
|
+
setFocusDate((d) => addMonths2(d, -1));
|
|
5732
5927
|
} else if (e.key === "PageDown") {
|
|
5733
5928
|
e.preventDefault();
|
|
5734
|
-
const nm =
|
|
5929
|
+
const nm = addMonths2(viewMonth, 1);
|
|
5735
5930
|
setViewMonth(nm);
|
|
5736
|
-
setFocusDate((d) =>
|
|
5931
|
+
setFocusDate((d) => addMonths2(d, 1));
|
|
5737
5932
|
} else if (e.key === "Home") {
|
|
5738
5933
|
e.preventDefault();
|
|
5739
5934
|
const dow = (focusDate.getDay() - weekStartsOn + 7) % 7;
|
|
@@ -5798,7 +5993,7 @@ function DatePicker({
|
|
|
5798
5993
|
{
|
|
5799
5994
|
type: "button",
|
|
5800
5995
|
onClick: () => {
|
|
5801
|
-
if (view === "days") setViewMonth(
|
|
5996
|
+
if (view === "days") setViewMonth(addMonths2(viewMonth, -1));
|
|
5802
5997
|
else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() - 1, viewMonth.getMonth(), 1));
|
|
5803
5998
|
else setViewMonth(new Date(viewMonth.getFullYear() - 10, viewMonth.getMonth(), 1));
|
|
5804
5999
|
},
|
|
@@ -5833,7 +6028,7 @@ function DatePicker({
|
|
|
5833
6028
|
{
|
|
5834
6029
|
type: "button",
|
|
5835
6030
|
onClick: () => {
|
|
5836
|
-
if (view === "days") setViewMonth(
|
|
6031
|
+
if (view === "days") setViewMonth(addMonths2(viewMonth, 1));
|
|
5837
6032
|
else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() + 1, viewMonth.getMonth(), 1));
|
|
5838
6033
|
else setViewMonth(new Date(viewMonth.getFullYear() + 10, viewMonth.getMonth(), 1));
|
|
5839
6034
|
},
|
|
@@ -5985,10 +6180,10 @@ function TextArea({
|
|
|
5985
6180
|
style,
|
|
5986
6181
|
inputStyle
|
|
5987
6182
|
}) {
|
|
5988
|
-
const errorId =
|
|
6183
|
+
const errorId = React19.useId();
|
|
5989
6184
|
const hasError = errorMessage != null;
|
|
5990
|
-
const ref =
|
|
5991
|
-
|
|
6185
|
+
const ref = React19.useRef(null);
|
|
6186
|
+
React19.useLayoutEffect(() => {
|
|
5992
6187
|
if (!autoGrow) return;
|
|
5993
6188
|
const el = ref.current;
|
|
5994
6189
|
if (!el) return;
|
|
@@ -6058,11 +6253,11 @@ function SegmentedControl({
|
|
|
6058
6253
|
"aria-label": ariaLabel
|
|
6059
6254
|
}) {
|
|
6060
6255
|
const sz = SIZE5[size];
|
|
6061
|
-
const groupId =
|
|
6062
|
-
const errorId =
|
|
6256
|
+
const groupId = React19.useId();
|
|
6257
|
+
const errorId = React19.useId();
|
|
6063
6258
|
const hasError = errorMessage != null;
|
|
6064
6259
|
const isControlled = value !== void 0;
|
|
6065
|
-
const [internal, setInternal] =
|
|
6260
|
+
const [internal, setInternal] = React19.useState(defaultValue);
|
|
6066
6261
|
const current = isControlled ? value : internal;
|
|
6067
6262
|
const handle = (v) => {
|
|
6068
6263
|
if (!v) return;
|
|
@@ -6156,14 +6351,14 @@ function Slider({
|
|
|
6156
6351
|
name,
|
|
6157
6352
|
htmlFor
|
|
6158
6353
|
}) {
|
|
6159
|
-
const errorId =
|
|
6354
|
+
const errorId = React19.useId();
|
|
6160
6355
|
const hasError = errorMessage != null;
|
|
6161
6356
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
6162
|
-
const [internal, setInternal] =
|
|
6357
|
+
const [internal, setInternal] = React19.useState(
|
|
6163
6358
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
6164
6359
|
);
|
|
6165
6360
|
const current = toArray(value) ?? internal;
|
|
6166
|
-
const [dragging, setDragging] =
|
|
6361
|
+
const [dragging, setDragging] = React19.useState(false);
|
|
6167
6362
|
const emit = (arr) => {
|
|
6168
6363
|
setInternal(arr);
|
|
6169
6364
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -6258,11 +6453,11 @@ function TagsInput({
|
|
|
6258
6453
|
validate,
|
|
6259
6454
|
separators = ["Enter", ","]
|
|
6260
6455
|
}) {
|
|
6261
|
-
const errorId =
|
|
6262
|
-
const inputRef =
|
|
6263
|
-
const [internal, setInternal] =
|
|
6264
|
-
const [draft, setDraft] =
|
|
6265
|
-
const [localError, setLocalError] =
|
|
6456
|
+
const errorId = React19.useId();
|
|
6457
|
+
const inputRef = React19.useRef(null);
|
|
6458
|
+
const [internal, setInternal] = React19.useState(defaultValue ?? []);
|
|
6459
|
+
const [draft, setDraft] = React19.useState("");
|
|
6460
|
+
const [localError, setLocalError] = React19.useState(null);
|
|
6266
6461
|
const tags = value ?? internal;
|
|
6267
6462
|
const hasError = errorMessage != null || localError != null;
|
|
6268
6463
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -6393,9 +6588,9 @@ function OtpInput({
|
|
|
6393
6588
|
className,
|
|
6394
6589
|
groupAfter
|
|
6395
6590
|
}) {
|
|
6396
|
-
const errorId =
|
|
6591
|
+
const errorId = React19.useId();
|
|
6397
6592
|
const hasError = errorMessage != null;
|
|
6398
|
-
const refs =
|
|
6593
|
+
const refs = React19.useRef([]);
|
|
6399
6594
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
6400
6595
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
6401
6596
|
const emit = (next) => {
|
|
@@ -6444,7 +6639,7 @@ function OtpInput({
|
|
|
6444
6639
|
emit(valid.join(""));
|
|
6445
6640
|
focusBox(valid.length);
|
|
6446
6641
|
};
|
|
6447
|
-
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(
|
|
6642
|
+
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(React19__default.default.Fragment, { children: [
|
|
6448
6643
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6449
6644
|
"input",
|
|
6450
6645
|
{
|
|
@@ -6502,9 +6697,9 @@ function Rating({
|
|
|
6502
6697
|
className,
|
|
6503
6698
|
required
|
|
6504
6699
|
}) {
|
|
6505
|
-
const errorId =
|
|
6506
|
-
const [internal, setInternal] =
|
|
6507
|
-
const [hover, setHover] =
|
|
6700
|
+
const errorId = React19.useId();
|
|
6701
|
+
const [internal, setInternal] = React19.useState(defaultValue);
|
|
6702
|
+
const [hover, setHover] = React19.useState(null);
|
|
6508
6703
|
const current = value ?? internal;
|
|
6509
6704
|
const display2 = hover ?? current;
|
|
6510
6705
|
const interactive = !readOnly && !disabled;
|
|
@@ -6627,9 +6822,9 @@ function TimePicker({
|
|
|
6627
6822
|
required,
|
|
6628
6823
|
style
|
|
6629
6824
|
}) {
|
|
6630
|
-
const errorId =
|
|
6825
|
+
const errorId = React19.useId();
|
|
6631
6826
|
const hasError = errorMessage != null;
|
|
6632
|
-
const [open, setOpen] =
|
|
6827
|
+
const [open, setOpen] = React19.useState(false);
|
|
6633
6828
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6634
6829
|
const update = (next) => {
|
|
6635
6830
|
const merged = { ...parsed, ...next };
|
|
@@ -6715,16 +6910,16 @@ function TimePicker({
|
|
|
6715
6910
|
var MONTH_NAMES2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
6716
6911
|
var WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
6717
6912
|
var startOfMonth2 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
|
|
6718
|
-
var
|
|
6913
|
+
var addMonths3 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
|
|
6719
6914
|
var addDays2 = (d, n) => {
|
|
6720
6915
|
const c = new Date(d);
|
|
6721
6916
|
c.setDate(c.getDate() + n);
|
|
6722
6917
|
return c;
|
|
6723
6918
|
};
|
|
6724
6919
|
var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
6725
|
-
var
|
|
6920
|
+
var startOfDay2 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
6726
6921
|
var defaultFmt = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
|
|
6727
|
-
function
|
|
6922
|
+
function buildGrid3(viewMonth, weekStartsOn) {
|
|
6728
6923
|
const first = startOfMonth2(viewMonth);
|
|
6729
6924
|
const offset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
6730
6925
|
const gridStart = addDays2(first, -offset);
|
|
@@ -6753,23 +6948,23 @@ function DateRangePicker({
|
|
|
6753
6948
|
required,
|
|
6754
6949
|
style
|
|
6755
6950
|
}) {
|
|
6756
|
-
const errorId =
|
|
6951
|
+
const errorId = React19.useId();
|
|
6757
6952
|
const hasError = errorMessage != null;
|
|
6758
|
-
const [open, setOpen] =
|
|
6759
|
-
const [leftMonth, setLeftMonth] =
|
|
6760
|
-
const [pendingStart, setPendingStart] =
|
|
6761
|
-
const [hoverDate, setHoverDate] =
|
|
6762
|
-
const weekdays =
|
|
6953
|
+
const [open, setOpen] = React19.useState(false);
|
|
6954
|
+
const [leftMonth, setLeftMonth] = React19.useState(() => startOfMonth2(value.start ?? /* @__PURE__ */ new Date()));
|
|
6955
|
+
const [pendingStart, setPendingStart] = React19.useState(null);
|
|
6956
|
+
const [hoverDate, setHoverDate] = React19.useState(null);
|
|
6957
|
+
const weekdays = React19.useMemo(
|
|
6763
6958
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6764
6959
|
[weekStartsOn]
|
|
6765
6960
|
);
|
|
6766
|
-
const isDisabled = (d) => min && d <
|
|
6961
|
+
const isDisabled = (d) => min && d < startOfDay2(min) || max && d > startOfDay2(max);
|
|
6767
6962
|
const effective = pendingStart ? { start: pendingStart, end: hoverDate } : value;
|
|
6768
6963
|
const inRange = (d) => {
|
|
6769
6964
|
const { start, end } = effective;
|
|
6770
6965
|
if (!start || !end) return false;
|
|
6771
6966
|
const [a, b] = start <= end ? [start, end] : [end, start];
|
|
6772
|
-
return d >=
|
|
6967
|
+
return d >= startOfDay2(a) && d <= startOfDay2(b);
|
|
6773
6968
|
};
|
|
6774
6969
|
const onDayClick = (d) => {
|
|
6775
6970
|
if (isDisabled(d)) return;
|
|
@@ -6787,7 +6982,7 @@ function DateRangePicker({
|
|
|
6787
6982
|
};
|
|
6788
6983
|
const triggerText = value.start && value.end ? `${format(value.start)} \u2013 ${format(value.end)}` : value.start ? `${format(value.start)} \u2013 \u2026` : "";
|
|
6789
6984
|
const renderMonth = (viewMonth) => {
|
|
6790
|
-
const cells =
|
|
6985
|
+
const cells = buildGrid3(viewMonth, weekStartsOn);
|
|
6791
6986
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
6792
6987
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-center mb-2 select-none", children: [
|
|
6793
6988
|
MONTH_NAMES2[viewMonth.getMonth()],
|
|
@@ -6876,7 +7071,7 @@ function DateRangePicker({
|
|
|
6876
7071
|
"button",
|
|
6877
7072
|
{
|
|
6878
7073
|
type: "button",
|
|
6879
|
-
onClick: () => setLeftMonth(
|
|
7074
|
+
onClick: () => setLeftMonth(addMonths3(leftMonth, -1)),
|
|
6880
7075
|
"aria-label": "Previous month",
|
|
6881
7076
|
className: "absolute -top-1 left-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
6882
7077
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) })
|
|
@@ -6889,13 +7084,13 @@ function DateRangePicker({
|
|
|
6889
7084
|
"button",
|
|
6890
7085
|
{
|
|
6891
7086
|
type: "button",
|
|
6892
|
-
onClick: () => setLeftMonth(
|
|
7087
|
+
onClick: () => setLeftMonth(addMonths3(leftMonth, 1)),
|
|
6893
7088
|
"aria-label": "Next month",
|
|
6894
7089
|
className: "absolute -top-1 right-0 w-7 h-7 inline-flex items-center justify-center rounded-md hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
|
|
6895
7090
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "w-4 h-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
|
|
6896
7091
|
}
|
|
6897
7092
|
),
|
|
6898
|
-
renderMonth(
|
|
7093
|
+
renderMonth(addMonths3(leftMonth, 1))
|
|
6899
7094
|
] })
|
|
6900
7095
|
] })
|
|
6901
7096
|
]
|
|
@@ -6935,10 +7130,10 @@ function ColorPicker({
|
|
|
6935
7130
|
required,
|
|
6936
7131
|
placeholder = "Pick a colour\u2026"
|
|
6937
7132
|
}) {
|
|
6938
|
-
const errorId =
|
|
7133
|
+
const errorId = React19.useId();
|
|
6939
7134
|
const hasError = errorMessage != null;
|
|
6940
|
-
const [open, setOpen] =
|
|
6941
|
-
const [draft, setDraft] =
|
|
7135
|
+
const [open, setOpen] = React19.useState(false);
|
|
7136
|
+
const [draft, setDraft] = React19.useState(value);
|
|
6942
7137
|
const valid = HEX_RE.test(value);
|
|
6943
7138
|
const pick = (hex) => {
|
|
6944
7139
|
onChange?.(hex);
|
|
@@ -7325,11 +7520,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
7325
7520
|
|
|
7326
7521
|
// src/form/useForm.ts
|
|
7327
7522
|
function useForm(options = {}) {
|
|
7328
|
-
const ref =
|
|
7523
|
+
const ref = React19.useRef(null);
|
|
7329
7524
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
7330
7525
|
const store = ref.current;
|
|
7331
|
-
|
|
7332
|
-
const make =
|
|
7526
|
+
React19.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7527
|
+
const make = React19.useCallback(
|
|
7333
7528
|
(kind) => (name, rules) => {
|
|
7334
7529
|
if (rules !== void 0) store.setRule(name, rules);
|
|
7335
7530
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -7358,9 +7553,9 @@ function useForm(options = {}) {
|
|
|
7358
7553
|
fieldTarget: make("target")
|
|
7359
7554
|
};
|
|
7360
7555
|
}
|
|
7361
|
-
var FormContext =
|
|
7556
|
+
var FormContext = React19.createContext(null);
|
|
7362
7557
|
function useFormStore() {
|
|
7363
|
-
const store =
|
|
7558
|
+
const store = React19.useContext(FormContext);
|
|
7364
7559
|
if (!store) {
|
|
7365
7560
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
7366
7561
|
}
|
|
@@ -7374,8 +7569,8 @@ function Form({
|
|
|
7374
7569
|
children,
|
|
7375
7570
|
...rest
|
|
7376
7571
|
}) {
|
|
7377
|
-
const ref =
|
|
7378
|
-
const bypass =
|
|
7572
|
+
const ref = React19.useRef(null);
|
|
7573
|
+
const bypass = React19.useRef(false);
|
|
7379
7574
|
const handleSubmit = async (e) => {
|
|
7380
7575
|
if (bypass.current) {
|
|
7381
7576
|
bypass.current = false;
|
|
@@ -7427,12 +7622,12 @@ function useFormField(name, options = {}) {
|
|
|
7427
7622
|
const store = useFormStore();
|
|
7428
7623
|
const { kind = "value", rules } = options;
|
|
7429
7624
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7430
|
-
|
|
7625
|
+
React19.useEffect(() => {
|
|
7431
7626
|
return () => {
|
|
7432
7627
|
if (rules !== void 0) store.removeRule(name);
|
|
7433
7628
|
};
|
|
7434
7629
|
}, [store, name]);
|
|
7435
|
-
const snap =
|
|
7630
|
+
const snap = React19.useSyncExternalStore(
|
|
7436
7631
|
store.subscribe,
|
|
7437
7632
|
() => store.getFieldSnapshot(name)
|
|
7438
7633
|
);
|
|
@@ -7444,7 +7639,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7444
7639
|
}
|
|
7445
7640
|
function useFieldArray(name) {
|
|
7446
7641
|
const store = useFormStore();
|
|
7447
|
-
|
|
7642
|
+
React19.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7448
7643
|
const arr = store.getValue(name) ?? [];
|
|
7449
7644
|
const keys = store.getKeys(name);
|
|
7450
7645
|
return {
|
|
@@ -7567,7 +7762,7 @@ function CreditCardForm({
|
|
|
7567
7762
|
className = "",
|
|
7568
7763
|
style
|
|
7569
7764
|
}) {
|
|
7570
|
-
const initial =
|
|
7765
|
+
const initial = React19.useRef({
|
|
7571
7766
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7572
7767
|
name: defaultValue?.name ?? "",
|
|
7573
7768
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7576,7 +7771,7 @@ function CreditCardForm({
|
|
|
7576
7771
|
const form = useForm({ initialValues: initial });
|
|
7577
7772
|
const numberStr = String(form.values.number ?? "");
|
|
7578
7773
|
const brand = detectBrand(numberStr);
|
|
7579
|
-
|
|
7774
|
+
React19.useEffect(() => {
|
|
7580
7775
|
onChange?.(toCard(form.values));
|
|
7581
7776
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7582
7777
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7683,6 +7878,7 @@ exports.Box = Box;
|
|
|
7683
7878
|
exports.Breadcrumbs = Breadcrumbs;
|
|
7684
7879
|
exports.Button = Button;
|
|
7685
7880
|
exports.CARD_BRANDS = CARD_BRANDS;
|
|
7881
|
+
exports.Calendar = Calendar2;
|
|
7686
7882
|
exports.Card = Card_default;
|
|
7687
7883
|
exports.CardCarousel = CardCarousel;
|
|
7688
7884
|
exports.Catalog = Catalog;
|
|
@@ -7720,6 +7916,7 @@ exports.NumberInput = NumberInput;
|
|
|
7720
7916
|
exports.OpaqueGridCard = OpaqueGridCard;
|
|
7721
7917
|
exports.OtpInput = OtpInput;
|
|
7722
7918
|
exports.Password = Password;
|
|
7919
|
+
exports.PopConfirm = PopConfirm;
|
|
7723
7920
|
exports.Portal = Portal;
|
|
7724
7921
|
exports.RadioGroup = RadioGroup;
|
|
7725
7922
|
exports.Rating = Rating;
|