@geomak/ui 6.10.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 +342 -222
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +43 -1
- package/dist/index.d.ts +43 -1
- package/dist/index.js +149 -30
- package/dist/index.js.map +1 -1
- package/dist/styles.css +6 -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');
|
|
@@ -39,7 +39,7 @@ 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);
|
|
@@ -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");
|
|
@@ -1974,8 +1974,8 @@ function PopConfirm({
|
|
|
1974
1974
|
onOpenChange,
|
|
1975
1975
|
className = ""
|
|
1976
1976
|
}) {
|
|
1977
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
1978
|
-
const [loading, setLoading] =
|
|
1977
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React19.useState(false);
|
|
1978
|
+
const [loading, setLoading] = React19.useState(false);
|
|
1979
1979
|
const isOpen = open ?? uncontrolledOpen;
|
|
1980
1980
|
const setOpen = (next) => {
|
|
1981
1981
|
onOpenChange?.(next);
|
|
@@ -2035,7 +2035,126 @@ function PopConfirm({
|
|
|
2035
2035
|
) })
|
|
2036
2036
|
] });
|
|
2037
2037
|
}
|
|
2038
|
-
var
|
|
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({
|
|
2039
2158
|
open: () => void 0,
|
|
2040
2159
|
close: () => void 0
|
|
2041
2160
|
});
|
|
@@ -2093,26 +2212,26 @@ function NotificationItem({
|
|
|
2093
2212
|
onClose,
|
|
2094
2213
|
reduced
|
|
2095
2214
|
}) {
|
|
2096
|
-
const [paused, setPaused] =
|
|
2215
|
+
const [paused, setPaused] = React19.useState(false);
|
|
2097
2216
|
const duration = n.duration ?? 4e3;
|
|
2098
2217
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
2099
2218
|
const showProgress = !reduced && isAutoDismissing;
|
|
2100
|
-
const timerRef =
|
|
2101
|
-
const startTimeRef =
|
|
2102
|
-
const remainingRef =
|
|
2103
|
-
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(() => {
|
|
2104
2223
|
if (timerRef.current !== null) {
|
|
2105
2224
|
clearTimeout(timerRef.current);
|
|
2106
2225
|
timerRef.current = null;
|
|
2107
2226
|
}
|
|
2108
2227
|
}, []);
|
|
2109
|
-
const scheduleDismiss =
|
|
2228
|
+
const scheduleDismiss = React19.useCallback((ms) => {
|
|
2110
2229
|
clearTimer();
|
|
2111
2230
|
if (!isAutoDismissing) return;
|
|
2112
2231
|
startTimeRef.current = Date.now();
|
|
2113
2232
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
2114
2233
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
2115
|
-
|
|
2234
|
+
React19.useEffect(() => {
|
|
2116
2235
|
if (paused || !isAutoDismissing) return;
|
|
2117
2236
|
scheduleDismiss(remainingRef.current);
|
|
2118
2237
|
return clearTimer;
|
|
@@ -2195,15 +2314,15 @@ function NotificationProvider({
|
|
|
2195
2314
|
children,
|
|
2196
2315
|
position = "top-right"
|
|
2197
2316
|
}) {
|
|
2198
|
-
const [notifications, setNotifications] =
|
|
2317
|
+
const [notifications, setNotifications] = React19.useState([]);
|
|
2199
2318
|
const reduced = framerMotion.useReducedMotion();
|
|
2200
|
-
const open =
|
|
2319
|
+
const open = React19.useCallback((payload) => {
|
|
2201
2320
|
setNotifications((prev) => [
|
|
2202
2321
|
...prev,
|
|
2203
2322
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
2204
2323
|
]);
|
|
2205
2324
|
}, []);
|
|
2206
|
-
const close =
|
|
2325
|
+
const close = React19.useCallback((id) => {
|
|
2207
2326
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
2208
2327
|
}, []);
|
|
2209
2328
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -2232,7 +2351,7 @@ function NotificationProvider({
|
|
|
2232
2351
|
] });
|
|
2233
2352
|
}
|
|
2234
2353
|
function useNotification() {
|
|
2235
|
-
const { open } =
|
|
2354
|
+
const { open } = React19.useContext(NotificationContext);
|
|
2236
2355
|
return {
|
|
2237
2356
|
info: (props) => open({ type: "info", ...props }),
|
|
2238
2357
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -2349,10 +2468,10 @@ function FadingBase({
|
|
|
2349
2468
|
isMounted = false,
|
|
2350
2469
|
children
|
|
2351
2470
|
}) {
|
|
2352
|
-
const [shouldRender, setShouldRender] =
|
|
2353
|
-
const [visible, setVisible] =
|
|
2354
|
-
const timerRef =
|
|
2355
|
-
|
|
2471
|
+
const [shouldRender, setShouldRender] = React19.useState(isMounted);
|
|
2472
|
+
const [visible, setVisible] = React19.useState(false);
|
|
2473
|
+
const timerRef = React19.useRef(null);
|
|
2474
|
+
React19.useEffect(() => {
|
|
2356
2475
|
if (isMounted) {
|
|
2357
2476
|
setShouldRender(true);
|
|
2358
2477
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -2450,8 +2569,8 @@ function ScalableContainer({
|
|
|
2450
2569
|
togglePosition = "top-right",
|
|
2451
2570
|
className = ""
|
|
2452
2571
|
}) {
|
|
2453
|
-
const containerRef =
|
|
2454
|
-
const [internalScaled, setInternalScaled] =
|
|
2572
|
+
const containerRef = React19.useRef(null);
|
|
2573
|
+
const [internalScaled, setInternalScaled] = React19.useState(false);
|
|
2455
2574
|
const isScaled = expanded ?? internalScaled;
|
|
2456
2575
|
const reduced = framerMotion.useReducedMotion();
|
|
2457
2576
|
const onToggle = () => {
|
|
@@ -2589,17 +2708,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
2589
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)) });
|
|
2590
2709
|
}
|
|
2591
2710
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
2592
|
-
const [activeIndex, setActiveIndex] =
|
|
2593
|
-
const [indexPool, setIndexPool] =
|
|
2594
|
-
const cardRefs =
|
|
2595
|
-
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(() => {
|
|
2596
2715
|
let nextIndex = activeIndex + 1;
|
|
2597
2716
|
let previousIndex = activeIndex - 1;
|
|
2598
2717
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
2599
2718
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
2600
2719
|
return { previousIndex, nextIndex };
|
|
2601
2720
|
}, [activeIndex, items.length]);
|
|
2602
|
-
|
|
2721
|
+
React19.useEffect(() => {
|
|
2603
2722
|
const { nextIndex, previousIndex } = getIndexes;
|
|
2604
2723
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
2605
2724
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -2772,8 +2891,8 @@ function writeDismissed(key) {
|
|
|
2772
2891
|
}
|
|
2773
2892
|
}
|
|
2774
2893
|
function useTargetBbox(ref) {
|
|
2775
|
-
const [bbox, setBbox] =
|
|
2776
|
-
|
|
2894
|
+
const [bbox, setBbox] = React19.useState(null);
|
|
2895
|
+
React19.useLayoutEffect(() => {
|
|
2777
2896
|
const el = ref?.current;
|
|
2778
2897
|
if (!el) {
|
|
2779
2898
|
setBbox(null);
|
|
@@ -2803,7 +2922,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
2803
2922
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
2804
2923
|
}
|
|
2805
2924
|
function useFocusTrap(containerRef, active) {
|
|
2806
|
-
|
|
2925
|
+
React19.useEffect(() => {
|
|
2807
2926
|
if (!active) return;
|
|
2808
2927
|
const el = containerRef.current;
|
|
2809
2928
|
if (!el) return;
|
|
@@ -2842,16 +2961,16 @@ function Wizard({
|
|
|
2842
2961
|
onComplete,
|
|
2843
2962
|
onSkip
|
|
2844
2963
|
}) {
|
|
2845
|
-
const tooltipRef =
|
|
2846
|
-
const tooltipTitleId =
|
|
2847
|
-
const tooltipBodyId =
|
|
2964
|
+
const tooltipRef = React19.useRef(null);
|
|
2965
|
+
const tooltipTitleId = React19.useId();
|
|
2966
|
+
const tooltipBodyId = React19.useId();
|
|
2848
2967
|
const reduced = framerMotion.useReducedMotion();
|
|
2849
|
-
const [open, setOpen] =
|
|
2850
|
-
const [activeIndex, setActiveIndex] =
|
|
2968
|
+
const [open, setOpen] = React19.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
2969
|
+
const [activeIndex, setActiveIndex] = React19.useState(0);
|
|
2851
2970
|
const step = steps[activeIndex];
|
|
2852
2971
|
const bbox = useTargetBbox(step?.stepRef);
|
|
2853
2972
|
useFocusTrap(tooltipRef, open);
|
|
2854
|
-
|
|
2973
|
+
React19.useEffect(() => {
|
|
2855
2974
|
if (!open || !dismissible) return;
|
|
2856
2975
|
const onKey = (e) => {
|
|
2857
2976
|
if (e.key === "Escape") {
|
|
@@ -2862,12 +2981,12 @@ function Wizard({
|
|
|
2862
2981
|
document.addEventListener("keydown", onKey);
|
|
2863
2982
|
return () => document.removeEventListener("keydown", onKey);
|
|
2864
2983
|
}, [open, dismissible]);
|
|
2865
|
-
const handleSkip =
|
|
2984
|
+
const handleSkip = React19.useCallback(() => {
|
|
2866
2985
|
writeDismissed(storageKey);
|
|
2867
2986
|
setOpen(false);
|
|
2868
2987
|
onSkip?.();
|
|
2869
2988
|
}, [storageKey, onSkip]);
|
|
2870
|
-
const handleComplete =
|
|
2989
|
+
const handleComplete = React19.useCallback(() => {
|
|
2871
2990
|
writeDismissed(storageKey);
|
|
2872
2991
|
setOpen(false);
|
|
2873
2992
|
onComplete?.();
|
|
@@ -3138,7 +3257,7 @@ function Field({
|
|
|
3138
3257
|
);
|
|
3139
3258
|
}
|
|
3140
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" }) });
|
|
3141
|
-
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) {
|
|
3142
3261
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3143
3262
|
"div",
|
|
3144
3263
|
{
|
|
@@ -3192,11 +3311,11 @@ function MultiTagRow({
|
|
|
3192
3311
|
labelFor,
|
|
3193
3312
|
onRemove
|
|
3194
3313
|
}) {
|
|
3195
|
-
const wrapRef =
|
|
3196
|
-
const measureRef =
|
|
3197
|
-
const [visibleCount, setVisibleCount] =
|
|
3314
|
+
const wrapRef = React19.useRef(null);
|
|
3315
|
+
const measureRef = React19.useRef(null);
|
|
3316
|
+
const [visibleCount, setVisibleCount] = React19.useState(values.length);
|
|
3198
3317
|
const key = values.map(String).join("|");
|
|
3199
|
-
|
|
3318
|
+
React19.useLayoutEffect(() => {
|
|
3200
3319
|
const wrap = wrapRef.current;
|
|
3201
3320
|
const measure = measureRef.current;
|
|
3202
3321
|
if (!wrap || !measure) return;
|
|
@@ -3290,16 +3409,16 @@ function Dropdown({
|
|
|
3290
3409
|
size = "md",
|
|
3291
3410
|
className = ""
|
|
3292
3411
|
}) {
|
|
3293
|
-
const [open, setOpen] =
|
|
3294
|
-
const [selectedItems, setSelectedItems] =
|
|
3295
|
-
const [searchTerm, setSearchTerm] =
|
|
3296
|
-
const [innerItems, setInnerItems] =
|
|
3297
|
-
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();
|
|
3298
3417
|
const hasError = errorMessage != null;
|
|
3299
|
-
|
|
3418
|
+
React19.useEffect(() => {
|
|
3300
3419
|
setInnerItems(items);
|
|
3301
3420
|
}, [items]);
|
|
3302
|
-
|
|
3421
|
+
React19.useEffect(() => {
|
|
3303
3422
|
if (isMultiselect && Array.isArray(value)) {
|
|
3304
3423
|
setSelectedItems(value);
|
|
3305
3424
|
}
|
|
@@ -3624,7 +3743,7 @@ function TableBody({
|
|
|
3624
3743
|
expandRow,
|
|
3625
3744
|
getRowKey
|
|
3626
3745
|
}) {
|
|
3627
|
-
const [expanded, setExpanded] =
|
|
3746
|
+
const [expanded, setExpanded] = React19.useState(() => /* @__PURE__ */ new Set());
|
|
3628
3747
|
const reduced = framerMotion.useReducedMotion();
|
|
3629
3748
|
const toggleRow = (rowKey) => {
|
|
3630
3749
|
setExpanded((prev) => {
|
|
@@ -3639,7 +3758,7 @@ function TableBody({
|
|
|
3639
3758
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
3640
3759
|
const rowKey = getRowKey(row, i);
|
|
3641
3760
|
const isExpanded = expanded.has(rowKey);
|
|
3642
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3761
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React19__default.default.Fragment, { children: [
|
|
3643
3762
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3644
3763
|
"tr",
|
|
3645
3764
|
{
|
|
@@ -3695,9 +3814,9 @@ function Pagination({
|
|
|
3695
3814
|
const matchedOption = picker.find(
|
|
3696
3815
|
(o) => o.label === options.perPage || o.value === options.perPage
|
|
3697
3816
|
);
|
|
3698
|
-
const [perPageKey, setPerPageKey] =
|
|
3817
|
+
const [perPageKey, setPerPageKey] = React19.useState(() => matchedOption?.key ?? picker[0]?.key);
|
|
3699
3818
|
const displayPerPageKey = serverSide ? matchedOption?.key ?? perPageKey : perPageKey;
|
|
3700
|
-
|
|
3819
|
+
React19.useEffect(() => {
|
|
3701
3820
|
if (serverSide && options.perPage != null) {
|
|
3702
3821
|
const next = picker.find((o) => o.label === options.perPage || o.value === options.perPage);
|
|
3703
3822
|
if (next) setPerPageKey(next.key);
|
|
@@ -3761,14 +3880,14 @@ function Table({
|
|
|
3761
3880
|
className = "",
|
|
3762
3881
|
style
|
|
3763
3882
|
}) {
|
|
3764
|
-
const searchRef =
|
|
3765
|
-
const [searchTerm, setSearchTerm] =
|
|
3766
|
-
const [perPage, setPerPage] =
|
|
3883
|
+
const searchRef = React19.useRef(null);
|
|
3884
|
+
const [searchTerm, setSearchTerm] = React19.useState("");
|
|
3885
|
+
const [perPage, setPerPage] = React19.useState(
|
|
3767
3886
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
3768
3887
|
);
|
|
3769
|
-
const [activePage, setActivePage] =
|
|
3888
|
+
const [activePage, setActivePage] = React19.useState(0);
|
|
3770
3889
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
3771
|
-
const filteredRows =
|
|
3890
|
+
const filteredRows = React19.useMemo(() => {
|
|
3772
3891
|
if (isServerSide || !searchTerm) return rows;
|
|
3773
3892
|
const term = searchTerm.toLowerCase();
|
|
3774
3893
|
return rows.filter(
|
|
@@ -3777,29 +3896,29 @@ function Table({
|
|
|
3777
3896
|
)
|
|
3778
3897
|
);
|
|
3779
3898
|
}, [rows, searchTerm, isServerSide]);
|
|
3780
|
-
const datasets =
|
|
3899
|
+
const datasets = React19.useMemo(() => {
|
|
3781
3900
|
if (isServerSide) return [rows];
|
|
3782
3901
|
return createDatasets(filteredRows, pagination.enabled ? perPage : null);
|
|
3783
3902
|
}, [filteredRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
3784
|
-
const MAX_PAGE =
|
|
3903
|
+
const MAX_PAGE = React19.useMemo(() => {
|
|
3785
3904
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
3786
3905
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
3787
3906
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
3788
3907
|
return datasets.length ? datasets.length - 1 : 0;
|
|
3789
3908
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
3790
|
-
const currentPageRows =
|
|
3909
|
+
const currentPageRows = React19.useMemo(() => {
|
|
3791
3910
|
if (isServerSide) return rows;
|
|
3792
3911
|
return datasets[activePage] ?? [];
|
|
3793
3912
|
}, [isServerSide, rows, datasets, activePage]);
|
|
3794
|
-
|
|
3913
|
+
React19.useEffect(() => {
|
|
3795
3914
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
3796
3915
|
setPerPage(pagination.perPage);
|
|
3797
3916
|
}
|
|
3798
3917
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
3799
|
-
|
|
3918
|
+
React19.useEffect(() => {
|
|
3800
3919
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
3801
3920
|
}, [isServerSide, pagination.perPage]);
|
|
3802
|
-
|
|
3921
|
+
React19.useEffect(() => {
|
|
3803
3922
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
3804
3923
|
setActivePage(pagination.page - 1);
|
|
3805
3924
|
}, [isServerSide, pagination.page]);
|
|
@@ -3883,7 +4002,7 @@ function TableSkeletonBody({
|
|
|
3883
4002
|
)) });
|
|
3884
4003
|
}
|
|
3885
4004
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
3886
|
-
const id =
|
|
4005
|
+
const id = React19.useId();
|
|
3887
4006
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3888
4007
|
SwitchPrimitive__namespace.Root,
|
|
3889
4008
|
{
|
|
@@ -4067,7 +4186,7 @@ function Sidebar({
|
|
|
4067
4186
|
}
|
|
4068
4187
|
) });
|
|
4069
4188
|
}
|
|
4070
|
-
var MegaMenuContext =
|
|
4189
|
+
var MegaMenuContext = React19.createContext({ align: "start" });
|
|
4071
4190
|
function MegaMenu({
|
|
4072
4191
|
children,
|
|
4073
4192
|
align = "start",
|
|
@@ -4098,7 +4217,7 @@ function MegaMenu({
|
|
|
4098
4217
|
}
|
|
4099
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";
|
|
4100
4219
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
4101
|
-
const { align } =
|
|
4220
|
+
const { align } = React19.useContext(MegaMenuContext);
|
|
4102
4221
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
4103
4222
|
if (!children) {
|
|
4104
4223
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
|
|
@@ -4183,8 +4302,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
4183
4302
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
4184
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 });
|
|
4185
4304
|
}
|
|
4186
|
-
var elementsOfType = (children, type) =>
|
|
4187
|
-
(c) =>
|
|
4305
|
+
var elementsOfType = (children, type) => React19__default.default.Children.toArray(children).filter(
|
|
4306
|
+
(c) => React19__default.default.isValidElement(c) && c.type === type
|
|
4188
4307
|
);
|
|
4189
4308
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4190
4309
|
"svg",
|
|
@@ -4221,9 +4340,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
4221
4340
|
);
|
|
4222
4341
|
}
|
|
4223
4342
|
function MobilePanel({ panel, onNavigate }) {
|
|
4224
|
-
const nodes =
|
|
4343
|
+
const nodes = React19__default.default.Children.toArray(panel.props.children);
|
|
4225
4344
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
4226
|
-
if (!
|
|
4345
|
+
if (!React19__default.default.isValidElement(node)) return null;
|
|
4227
4346
|
const el = node;
|
|
4228
4347
|
if (el.type === MegaMenuSection) {
|
|
4229
4348
|
const { title, children } = el.props;
|
|
@@ -4242,8 +4361,8 @@ function MegaMenuMobile({
|
|
|
4242
4361
|
children,
|
|
4243
4362
|
label
|
|
4244
4363
|
}) {
|
|
4245
|
-
const [open, setOpen] =
|
|
4246
|
-
const [expanded, setExpanded] =
|
|
4364
|
+
const [open, setOpen] = React19.useState(false);
|
|
4365
|
+
const [expanded, setExpanded] = React19.useState(null);
|
|
4247
4366
|
const items = elementsOfType(children, MegaMenuItem);
|
|
4248
4367
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
4249
4368
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4316,17 +4435,17 @@ function AppShell({
|
|
|
4316
4435
|
children,
|
|
4317
4436
|
className = ""
|
|
4318
4437
|
}) {
|
|
4319
|
-
const [expanded, setExpanded] =
|
|
4320
|
-
const [isMobile, setIsMobile] =
|
|
4321
|
-
const [mobileOpen, setMobileOpen] =
|
|
4322
|
-
|
|
4438
|
+
const [expanded, setExpanded] = React19.useState(sidebarDefaultExpanded);
|
|
4439
|
+
const [isMobile, setIsMobile] = React19.useState(false);
|
|
4440
|
+
const [mobileOpen, setMobileOpen] = React19.useState(false);
|
|
4441
|
+
React19.useEffect(() => {
|
|
4323
4442
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
4324
4443
|
const update = (e) => setIsMobile(e.matches);
|
|
4325
4444
|
update(mq);
|
|
4326
4445
|
mq.addEventListener("change", update);
|
|
4327
4446
|
return () => mq.removeEventListener("change", update);
|
|
4328
4447
|
}, []);
|
|
4329
|
-
|
|
4448
|
+
React19.useEffect(() => {
|
|
4330
4449
|
if (!isMobile) setMobileOpen(false);
|
|
4331
4450
|
}, [isMobile]);
|
|
4332
4451
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -4516,10 +4635,10 @@ function ThemeProvider({
|
|
|
4516
4635
|
className = "",
|
|
4517
4636
|
style
|
|
4518
4637
|
}) {
|
|
4519
|
-
const id =
|
|
4638
|
+
const id = React19__default.default.useId().replace(/:/g, "");
|
|
4520
4639
|
const scopeClass = `geo-th-${id}`;
|
|
4521
|
-
const divRef =
|
|
4522
|
-
|
|
4640
|
+
const divRef = React19.useRef(null);
|
|
4641
|
+
React19.useEffect(() => {
|
|
4523
4642
|
const el = divRef.current;
|
|
4524
4643
|
if (!el) return;
|
|
4525
4644
|
if (colorScheme === "auto") return;
|
|
@@ -4534,8 +4653,8 @@ function ThemeProvider({
|
|
|
4534
4653
|
}
|
|
4535
4654
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
4536
4655
|
}, [colorScheme]);
|
|
4537
|
-
const lightVars =
|
|
4538
|
-
const darkVarStr =
|
|
4656
|
+
const lightVars = React19.useMemo(() => toCssVars(theme), [theme]);
|
|
4657
|
+
const darkVarStr = React19.useMemo(() => {
|
|
4539
4658
|
if (!darkTheme) return "";
|
|
4540
4659
|
const dvars = toCssVars(darkTheme);
|
|
4541
4660
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -4575,7 +4694,7 @@ function TextInput({
|
|
|
4575
4694
|
prefix,
|
|
4576
4695
|
suffix
|
|
4577
4696
|
}) {
|
|
4578
|
-
const errorId =
|
|
4697
|
+
const errorId = React19.useId();
|
|
4579
4698
|
const hasError = errorMessage != null;
|
|
4580
4699
|
const hasAdornment = prefix != null || suffix != null;
|
|
4581
4700
|
const input = /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4645,7 +4764,7 @@ function NumberInput({
|
|
|
4645
4764
|
readOnly = false,
|
|
4646
4765
|
precision
|
|
4647
4766
|
}) {
|
|
4648
|
-
const errorId =
|
|
4767
|
+
const errorId = React19.useId();
|
|
4649
4768
|
const hasError = errorMessage != null;
|
|
4650
4769
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
4651
4770
|
const round = (n) => {
|
|
@@ -4776,8 +4895,8 @@ function Password({
|
|
|
4776
4895
|
showIcon,
|
|
4777
4896
|
hideIcon
|
|
4778
4897
|
}) {
|
|
4779
|
-
const [visible, setVisible] =
|
|
4780
|
-
const errorId =
|
|
4898
|
+
const [visible, setVisible] = React19.useState(false);
|
|
4899
|
+
const errorId = React19.useId();
|
|
4781
4900
|
const hasError = errorMessage != null;
|
|
4782
4901
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
4783
4902
|
Field,
|
|
@@ -4850,7 +4969,7 @@ function Checkbox({
|
|
|
4850
4969
|
}) {
|
|
4851
4970
|
const isChecked = checked ?? value ?? false;
|
|
4852
4971
|
const labelFirst = labelPosition === "left";
|
|
4853
|
-
const errorId =
|
|
4972
|
+
const errorId = React19.useId();
|
|
4854
4973
|
const hasError = errorMessage != null;
|
|
4855
4974
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
4856
4975
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -4958,8 +5077,8 @@ function RadioGroup({
|
|
|
4958
5077
|
className,
|
|
4959
5078
|
errorMessage
|
|
4960
5079
|
}) {
|
|
4961
|
-
const errorId =
|
|
4962
|
-
const groupId =
|
|
5080
|
+
const errorId = React19.useId();
|
|
5081
|
+
const groupId = React19.useId();
|
|
4963
5082
|
const hasError = errorMessage != null;
|
|
4964
5083
|
const labelFirst = labelPosition === "left";
|
|
4965
5084
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5059,11 +5178,11 @@ function Switch({
|
|
|
5059
5178
|
disabled,
|
|
5060
5179
|
errorMessage
|
|
5061
5180
|
}) {
|
|
5062
|
-
const id =
|
|
5063
|
-
const errorId =
|
|
5181
|
+
const id = React19.useId();
|
|
5182
|
+
const errorId = React19.useId();
|
|
5064
5183
|
const hasError = errorMessage != null;
|
|
5065
5184
|
const isControlled = checked !== void 0;
|
|
5066
|
-
const [internal, setInternal] =
|
|
5185
|
+
const [internal, setInternal] = React19.useState(defaultChecked);
|
|
5067
5186
|
const isOn = isControlled ? checked : internal;
|
|
5068
5187
|
const handle = (c) => {
|
|
5069
5188
|
if (!isControlled) setInternal(c);
|
|
@@ -5136,19 +5255,19 @@ function AutoComplete({
|
|
|
5136
5255
|
required,
|
|
5137
5256
|
htmlFor
|
|
5138
5257
|
}) {
|
|
5139
|
-
const errorId =
|
|
5258
|
+
const errorId = React19.useId();
|
|
5140
5259
|
const hasError = errorMessage != null;
|
|
5141
|
-
const [term, setTerm] =
|
|
5142
|
-
const [open, setOpen] =
|
|
5143
|
-
const [asyncItems, setAsyncItems] =
|
|
5144
|
-
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);
|
|
5145
5264
|
const isAsync = typeof onSearch === "function";
|
|
5146
|
-
const debounceRef =
|
|
5147
|
-
const requestIdRef =
|
|
5265
|
+
const debounceRef = React19.useRef(null);
|
|
5266
|
+
const requestIdRef = React19.useRef(0);
|
|
5148
5267
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
5149
5268
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
5150
5269
|
) : [];
|
|
5151
|
-
|
|
5270
|
+
React19.useEffect(() => {
|
|
5152
5271
|
if (!isAsync) return;
|
|
5153
5272
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
5154
5273
|
if (!term.trim()) {
|
|
@@ -5304,15 +5423,15 @@ function TreeSelect({
|
|
|
5304
5423
|
defaultExpandedKeys = [],
|
|
5305
5424
|
size = "md"
|
|
5306
5425
|
}) {
|
|
5307
|
-
const errorId =
|
|
5426
|
+
const errorId = React19.useId();
|
|
5308
5427
|
const hasError = errorMessage != null;
|
|
5309
|
-
const [open, setOpen] =
|
|
5310
|
-
const [expanded, setExpanded] =
|
|
5311
|
-
const [activeIndex, setActiveIndex] =
|
|
5312
|
-
const listRef =
|
|
5313
|
-
const visible =
|
|
5314
|
-
const didSyncOnOpenRef =
|
|
5315
|
-
|
|
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(() => {
|
|
5316
5435
|
if (!open) {
|
|
5317
5436
|
didSyncOnOpenRef.current = false;
|
|
5318
5437
|
return;
|
|
@@ -5322,7 +5441,7 @@ function TreeSelect({
|
|
|
5322
5441
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
5323
5442
|
didSyncOnOpenRef.current = true;
|
|
5324
5443
|
}, [open, value]);
|
|
5325
|
-
const selectedNode =
|
|
5444
|
+
const selectedNode = React19.useMemo(
|
|
5326
5445
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
5327
5446
|
[items, value]
|
|
5328
5447
|
);
|
|
@@ -5553,11 +5672,11 @@ function FileInput({
|
|
|
5553
5672
|
required,
|
|
5554
5673
|
icon
|
|
5555
5674
|
}) {
|
|
5556
|
-
const inputRef =
|
|
5557
|
-
const errorId =
|
|
5558
|
-
const [files, setFiles] =
|
|
5559
|
-
const [dragging, setDragging] =
|
|
5560
|
-
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);
|
|
5561
5680
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
5562
5681
|
const openPicker = () => {
|
|
5563
5682
|
if (!disabled) inputRef.current?.click();
|
|
@@ -5703,7 +5822,7 @@ function addDays(d, n) {
|
|
|
5703
5822
|
c.setDate(c.getDate() + n);
|
|
5704
5823
|
return c;
|
|
5705
5824
|
}
|
|
5706
|
-
function
|
|
5825
|
+
function addMonths2(d, n) {
|
|
5707
5826
|
const c = new Date(d);
|
|
5708
5827
|
c.setMonth(c.getMonth() + n);
|
|
5709
5828
|
return c;
|
|
@@ -5714,7 +5833,7 @@ function defaultFormat(d) {
|
|
|
5714
5833
|
const day = d.getDate().toString().padStart(2, "0");
|
|
5715
5834
|
return `${y}-${m}-${day}`;
|
|
5716
5835
|
}
|
|
5717
|
-
function
|
|
5836
|
+
function buildGrid2(viewMonth, weekStartsOn) {
|
|
5718
5837
|
const first = startOfMonth(viewMonth);
|
|
5719
5838
|
const startOffset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
5720
5839
|
const gridStart = addDays(first, -startOffset);
|
|
@@ -5748,30 +5867,30 @@ function DatePicker({
|
|
|
5748
5867
|
size = "md",
|
|
5749
5868
|
className = ""
|
|
5750
5869
|
}) {
|
|
5751
|
-
const errorId =
|
|
5870
|
+
const errorId = React19.useId();
|
|
5752
5871
|
const hasError = errorMessage != null;
|
|
5753
|
-
const [open, setOpen] =
|
|
5754
|
-
const [viewMonth, setViewMonth] =
|
|
5755
|
-
const [focusDate, setFocusDate] =
|
|
5756
|
-
const [view, setView] =
|
|
5757
|
-
const gridRef =
|
|
5758
|
-
|
|
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(() => {
|
|
5759
5878
|
if (!open) return;
|
|
5760
5879
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
5761
5880
|
setViewMonth(startOfMonth(target));
|
|
5762
5881
|
setFocusDate(target);
|
|
5763
5882
|
setView("days");
|
|
5764
5883
|
}, [open, value]);
|
|
5765
|
-
|
|
5884
|
+
React19.useEffect(() => {
|
|
5766
5885
|
if (!open) return;
|
|
5767
5886
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat(focusDate)}"]`);
|
|
5768
5887
|
cell?.focus();
|
|
5769
5888
|
}, [open, focusDate]);
|
|
5770
|
-
const weekdays =
|
|
5889
|
+
const weekdays = React19.useMemo(() => {
|
|
5771
5890
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
5772
5891
|
return ordered;
|
|
5773
5892
|
}, [weekStartsOn]);
|
|
5774
|
-
const grid =
|
|
5893
|
+
const grid = React19.useMemo(() => buildGrid2(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
5775
5894
|
const isDisabled = (d) => {
|
|
5776
5895
|
if (min && d < min) return true;
|
|
5777
5896
|
if (max && d > max) return true;
|
|
@@ -5802,14 +5921,14 @@ function DatePicker({
|
|
|
5802
5921
|
next(7);
|
|
5803
5922
|
} else if (e.key === "PageUp") {
|
|
5804
5923
|
e.preventDefault();
|
|
5805
|
-
const nm =
|
|
5924
|
+
const nm = addMonths2(viewMonth, -1);
|
|
5806
5925
|
setViewMonth(nm);
|
|
5807
|
-
setFocusDate((d) =>
|
|
5926
|
+
setFocusDate((d) => addMonths2(d, -1));
|
|
5808
5927
|
} else if (e.key === "PageDown") {
|
|
5809
5928
|
e.preventDefault();
|
|
5810
|
-
const nm =
|
|
5929
|
+
const nm = addMonths2(viewMonth, 1);
|
|
5811
5930
|
setViewMonth(nm);
|
|
5812
|
-
setFocusDate((d) =>
|
|
5931
|
+
setFocusDate((d) => addMonths2(d, 1));
|
|
5813
5932
|
} else if (e.key === "Home") {
|
|
5814
5933
|
e.preventDefault();
|
|
5815
5934
|
const dow = (focusDate.getDay() - weekStartsOn + 7) % 7;
|
|
@@ -5874,7 +5993,7 @@ function DatePicker({
|
|
|
5874
5993
|
{
|
|
5875
5994
|
type: "button",
|
|
5876
5995
|
onClick: () => {
|
|
5877
|
-
if (view === "days") setViewMonth(
|
|
5996
|
+
if (view === "days") setViewMonth(addMonths2(viewMonth, -1));
|
|
5878
5997
|
else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() - 1, viewMonth.getMonth(), 1));
|
|
5879
5998
|
else setViewMonth(new Date(viewMonth.getFullYear() - 10, viewMonth.getMonth(), 1));
|
|
5880
5999
|
},
|
|
@@ -5909,7 +6028,7 @@ function DatePicker({
|
|
|
5909
6028
|
{
|
|
5910
6029
|
type: "button",
|
|
5911
6030
|
onClick: () => {
|
|
5912
|
-
if (view === "days") setViewMonth(
|
|
6031
|
+
if (view === "days") setViewMonth(addMonths2(viewMonth, 1));
|
|
5913
6032
|
else if (view === "months") setViewMonth(new Date(viewMonth.getFullYear() + 1, viewMonth.getMonth(), 1));
|
|
5914
6033
|
else setViewMonth(new Date(viewMonth.getFullYear() + 10, viewMonth.getMonth(), 1));
|
|
5915
6034
|
},
|
|
@@ -6061,10 +6180,10 @@ function TextArea({
|
|
|
6061
6180
|
style,
|
|
6062
6181
|
inputStyle
|
|
6063
6182
|
}) {
|
|
6064
|
-
const errorId =
|
|
6183
|
+
const errorId = React19.useId();
|
|
6065
6184
|
const hasError = errorMessage != null;
|
|
6066
|
-
const ref =
|
|
6067
|
-
|
|
6185
|
+
const ref = React19.useRef(null);
|
|
6186
|
+
React19.useLayoutEffect(() => {
|
|
6068
6187
|
if (!autoGrow) return;
|
|
6069
6188
|
const el = ref.current;
|
|
6070
6189
|
if (!el) return;
|
|
@@ -6134,11 +6253,11 @@ function SegmentedControl({
|
|
|
6134
6253
|
"aria-label": ariaLabel
|
|
6135
6254
|
}) {
|
|
6136
6255
|
const sz = SIZE5[size];
|
|
6137
|
-
const groupId =
|
|
6138
|
-
const errorId =
|
|
6256
|
+
const groupId = React19.useId();
|
|
6257
|
+
const errorId = React19.useId();
|
|
6139
6258
|
const hasError = errorMessage != null;
|
|
6140
6259
|
const isControlled = value !== void 0;
|
|
6141
|
-
const [internal, setInternal] =
|
|
6260
|
+
const [internal, setInternal] = React19.useState(defaultValue);
|
|
6142
6261
|
const current = isControlled ? value : internal;
|
|
6143
6262
|
const handle = (v) => {
|
|
6144
6263
|
if (!v) return;
|
|
@@ -6232,14 +6351,14 @@ function Slider({
|
|
|
6232
6351
|
name,
|
|
6233
6352
|
htmlFor
|
|
6234
6353
|
}) {
|
|
6235
|
-
const errorId =
|
|
6354
|
+
const errorId = React19.useId();
|
|
6236
6355
|
const hasError = errorMessage != null;
|
|
6237
6356
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
6238
|
-
const [internal, setInternal] =
|
|
6357
|
+
const [internal, setInternal] = React19.useState(
|
|
6239
6358
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
6240
6359
|
);
|
|
6241
6360
|
const current = toArray(value) ?? internal;
|
|
6242
|
-
const [dragging, setDragging] =
|
|
6361
|
+
const [dragging, setDragging] = React19.useState(false);
|
|
6243
6362
|
const emit = (arr) => {
|
|
6244
6363
|
setInternal(arr);
|
|
6245
6364
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -6334,11 +6453,11 @@ function TagsInput({
|
|
|
6334
6453
|
validate,
|
|
6335
6454
|
separators = ["Enter", ","]
|
|
6336
6455
|
}) {
|
|
6337
|
-
const errorId =
|
|
6338
|
-
const inputRef =
|
|
6339
|
-
const [internal, setInternal] =
|
|
6340
|
-
const [draft, setDraft] =
|
|
6341
|
-
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);
|
|
6342
6461
|
const tags = value ?? internal;
|
|
6343
6462
|
const hasError = errorMessage != null || localError != null;
|
|
6344
6463
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -6469,9 +6588,9 @@ function OtpInput({
|
|
|
6469
6588
|
className,
|
|
6470
6589
|
groupAfter
|
|
6471
6590
|
}) {
|
|
6472
|
-
const errorId =
|
|
6591
|
+
const errorId = React19.useId();
|
|
6473
6592
|
const hasError = errorMessage != null;
|
|
6474
|
-
const refs =
|
|
6593
|
+
const refs = React19.useRef([]);
|
|
6475
6594
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
6476
6595
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
6477
6596
|
const emit = (next) => {
|
|
@@ -6520,7 +6639,7 @@ function OtpInput({
|
|
|
6520
6639
|
emit(valid.join(""));
|
|
6521
6640
|
focusBox(valid.length);
|
|
6522
6641
|
};
|
|
6523
|
-
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: [
|
|
6524
6643
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
6525
6644
|
"input",
|
|
6526
6645
|
{
|
|
@@ -6578,9 +6697,9 @@ function Rating({
|
|
|
6578
6697
|
className,
|
|
6579
6698
|
required
|
|
6580
6699
|
}) {
|
|
6581
|
-
const errorId =
|
|
6582
|
-
const [internal, setInternal] =
|
|
6583
|
-
const [hover, setHover] =
|
|
6700
|
+
const errorId = React19.useId();
|
|
6701
|
+
const [internal, setInternal] = React19.useState(defaultValue);
|
|
6702
|
+
const [hover, setHover] = React19.useState(null);
|
|
6584
6703
|
const current = value ?? internal;
|
|
6585
6704
|
const display2 = hover ?? current;
|
|
6586
6705
|
const interactive = !readOnly && !disabled;
|
|
@@ -6703,9 +6822,9 @@ function TimePicker({
|
|
|
6703
6822
|
required,
|
|
6704
6823
|
style
|
|
6705
6824
|
}) {
|
|
6706
|
-
const errorId =
|
|
6825
|
+
const errorId = React19.useId();
|
|
6707
6826
|
const hasError = errorMessage != null;
|
|
6708
|
-
const [open, setOpen] =
|
|
6827
|
+
const [open, setOpen] = React19.useState(false);
|
|
6709
6828
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
6710
6829
|
const update = (next) => {
|
|
6711
6830
|
const merged = { ...parsed, ...next };
|
|
@@ -6791,16 +6910,16 @@ function TimePicker({
|
|
|
6791
6910
|
var MONTH_NAMES2 = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
|
|
6792
6911
|
var WEEKDAY = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
6793
6912
|
var startOfMonth2 = (d) => new Date(d.getFullYear(), d.getMonth(), 1);
|
|
6794
|
-
var
|
|
6913
|
+
var addMonths3 = (d, n) => new Date(d.getFullYear(), d.getMonth() + n, 1);
|
|
6795
6914
|
var addDays2 = (d, n) => {
|
|
6796
6915
|
const c = new Date(d);
|
|
6797
6916
|
c.setDate(c.getDate() + n);
|
|
6798
6917
|
return c;
|
|
6799
6918
|
};
|
|
6800
6919
|
var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
|
|
6801
|
-
var
|
|
6920
|
+
var startOfDay2 = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
|
6802
6921
|
var defaultFmt = (d) => `${d.getFullYear()}-${`${d.getMonth() + 1}`.padStart(2, "0")}-${`${d.getDate()}`.padStart(2, "0")}`;
|
|
6803
|
-
function
|
|
6922
|
+
function buildGrid3(viewMonth, weekStartsOn) {
|
|
6804
6923
|
const first = startOfMonth2(viewMonth);
|
|
6805
6924
|
const offset = (first.getDay() - weekStartsOn + 7) % 7;
|
|
6806
6925
|
const gridStart = addDays2(first, -offset);
|
|
@@ -6829,23 +6948,23 @@ function DateRangePicker({
|
|
|
6829
6948
|
required,
|
|
6830
6949
|
style
|
|
6831
6950
|
}) {
|
|
6832
|
-
const errorId =
|
|
6951
|
+
const errorId = React19.useId();
|
|
6833
6952
|
const hasError = errorMessage != null;
|
|
6834
|
-
const [open, setOpen] =
|
|
6835
|
-
const [leftMonth, setLeftMonth] =
|
|
6836
|
-
const [pendingStart, setPendingStart] =
|
|
6837
|
-
const [hoverDate, setHoverDate] =
|
|
6838
|
-
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(
|
|
6839
6958
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
6840
6959
|
[weekStartsOn]
|
|
6841
6960
|
);
|
|
6842
|
-
const isDisabled = (d) => min && d <
|
|
6961
|
+
const isDisabled = (d) => min && d < startOfDay2(min) || max && d > startOfDay2(max);
|
|
6843
6962
|
const effective = pendingStart ? { start: pendingStart, end: hoverDate } : value;
|
|
6844
6963
|
const inRange = (d) => {
|
|
6845
6964
|
const { start, end } = effective;
|
|
6846
6965
|
if (!start || !end) return false;
|
|
6847
6966
|
const [a, b] = start <= end ? [start, end] : [end, start];
|
|
6848
|
-
return d >=
|
|
6967
|
+
return d >= startOfDay2(a) && d <= startOfDay2(b);
|
|
6849
6968
|
};
|
|
6850
6969
|
const onDayClick = (d) => {
|
|
6851
6970
|
if (isDisabled(d)) return;
|
|
@@ -6863,7 +6982,7 @@ function DateRangePicker({
|
|
|
6863
6982
|
};
|
|
6864
6983
|
const triggerText = value.start && value.end ? `${format(value.start)} \u2013 ${format(value.end)}` : value.start ? `${format(value.start)} \u2013 \u2026` : "";
|
|
6865
6984
|
const renderMonth = (viewMonth) => {
|
|
6866
|
-
const cells =
|
|
6985
|
+
const cells = buildGrid3(viewMonth, weekStartsOn);
|
|
6867
6986
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
6868
6987
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm font-semibold text-center mb-2 select-none", children: [
|
|
6869
6988
|
MONTH_NAMES2[viewMonth.getMonth()],
|
|
@@ -6952,7 +7071,7 @@ function DateRangePicker({
|
|
|
6952
7071
|
"button",
|
|
6953
7072
|
{
|
|
6954
7073
|
type: "button",
|
|
6955
|
-
onClick: () => setLeftMonth(
|
|
7074
|
+
onClick: () => setLeftMonth(addMonths3(leftMonth, -1)),
|
|
6956
7075
|
"aria-label": "Previous month",
|
|
6957
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",
|
|
6958
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" }) })
|
|
@@ -6965,13 +7084,13 @@ function DateRangePicker({
|
|
|
6965
7084
|
"button",
|
|
6966
7085
|
{
|
|
6967
7086
|
type: "button",
|
|
6968
|
-
onClick: () => setLeftMonth(
|
|
7087
|
+
onClick: () => setLeftMonth(addMonths3(leftMonth, 1)),
|
|
6969
7088
|
"aria-label": "Next month",
|
|
6970
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",
|
|
6971
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" }) })
|
|
6972
7091
|
}
|
|
6973
7092
|
),
|
|
6974
|
-
renderMonth(
|
|
7093
|
+
renderMonth(addMonths3(leftMonth, 1))
|
|
6975
7094
|
] })
|
|
6976
7095
|
] })
|
|
6977
7096
|
]
|
|
@@ -7011,10 +7130,10 @@ function ColorPicker({
|
|
|
7011
7130
|
required,
|
|
7012
7131
|
placeholder = "Pick a colour\u2026"
|
|
7013
7132
|
}) {
|
|
7014
|
-
const errorId =
|
|
7133
|
+
const errorId = React19.useId();
|
|
7015
7134
|
const hasError = errorMessage != null;
|
|
7016
|
-
const [open, setOpen] =
|
|
7017
|
-
const [draft, setDraft] =
|
|
7135
|
+
const [open, setOpen] = React19.useState(false);
|
|
7136
|
+
const [draft, setDraft] = React19.useState(value);
|
|
7018
7137
|
const valid = HEX_RE.test(value);
|
|
7019
7138
|
const pick = (hex) => {
|
|
7020
7139
|
onChange?.(hex);
|
|
@@ -7401,11 +7520,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
7401
7520
|
|
|
7402
7521
|
// src/form/useForm.ts
|
|
7403
7522
|
function useForm(options = {}) {
|
|
7404
|
-
const ref =
|
|
7523
|
+
const ref = React19.useRef(null);
|
|
7405
7524
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
7406
7525
|
const store = ref.current;
|
|
7407
|
-
|
|
7408
|
-
const make =
|
|
7526
|
+
React19.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7527
|
+
const make = React19.useCallback(
|
|
7409
7528
|
(kind) => (name, rules) => {
|
|
7410
7529
|
if (rules !== void 0) store.setRule(name, rules);
|
|
7411
7530
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -7434,9 +7553,9 @@ function useForm(options = {}) {
|
|
|
7434
7553
|
fieldTarget: make("target")
|
|
7435
7554
|
};
|
|
7436
7555
|
}
|
|
7437
|
-
var FormContext =
|
|
7556
|
+
var FormContext = React19.createContext(null);
|
|
7438
7557
|
function useFormStore() {
|
|
7439
|
-
const store =
|
|
7558
|
+
const store = React19.useContext(FormContext);
|
|
7440
7559
|
if (!store) {
|
|
7441
7560
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
7442
7561
|
}
|
|
@@ -7450,8 +7569,8 @@ function Form({
|
|
|
7450
7569
|
children,
|
|
7451
7570
|
...rest
|
|
7452
7571
|
}) {
|
|
7453
|
-
const ref =
|
|
7454
|
-
const bypass =
|
|
7572
|
+
const ref = React19.useRef(null);
|
|
7573
|
+
const bypass = React19.useRef(false);
|
|
7455
7574
|
const handleSubmit = async (e) => {
|
|
7456
7575
|
if (bypass.current) {
|
|
7457
7576
|
bypass.current = false;
|
|
@@ -7503,12 +7622,12 @@ function useFormField(name, options = {}) {
|
|
|
7503
7622
|
const store = useFormStore();
|
|
7504
7623
|
const { kind = "value", rules } = options;
|
|
7505
7624
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
7506
|
-
|
|
7625
|
+
React19.useEffect(() => {
|
|
7507
7626
|
return () => {
|
|
7508
7627
|
if (rules !== void 0) store.removeRule(name);
|
|
7509
7628
|
};
|
|
7510
7629
|
}, [store, name]);
|
|
7511
|
-
const snap =
|
|
7630
|
+
const snap = React19.useSyncExternalStore(
|
|
7512
7631
|
store.subscribe,
|
|
7513
7632
|
() => store.getFieldSnapshot(name)
|
|
7514
7633
|
);
|
|
@@ -7520,7 +7639,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
7520
7639
|
}
|
|
7521
7640
|
function useFieldArray(name) {
|
|
7522
7641
|
const store = useFormStore();
|
|
7523
|
-
|
|
7642
|
+
React19.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
7524
7643
|
const arr = store.getValue(name) ?? [];
|
|
7525
7644
|
const keys = store.getKeys(name);
|
|
7526
7645
|
return {
|
|
@@ -7643,7 +7762,7 @@ function CreditCardForm({
|
|
|
7643
7762
|
className = "",
|
|
7644
7763
|
style
|
|
7645
7764
|
}) {
|
|
7646
|
-
const initial =
|
|
7765
|
+
const initial = React19.useRef({
|
|
7647
7766
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
7648
7767
|
name: defaultValue?.name ?? "",
|
|
7649
7768
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -7652,7 +7771,7 @@ function CreditCardForm({
|
|
|
7652
7771
|
const form = useForm({ initialValues: initial });
|
|
7653
7772
|
const numberStr = String(form.values.number ?? "");
|
|
7654
7773
|
const brand = detectBrand(numberStr);
|
|
7655
|
-
|
|
7774
|
+
React19.useEffect(() => {
|
|
7656
7775
|
onChange?.(toCard(form.values));
|
|
7657
7776
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
7658
7777
|
const numberBind = form.fieldNative("number", {
|
|
@@ -7759,6 +7878,7 @@ exports.Box = Box;
|
|
|
7759
7878
|
exports.Breadcrumbs = Breadcrumbs;
|
|
7760
7879
|
exports.Button = Button;
|
|
7761
7880
|
exports.CARD_BRANDS = CARD_BRANDS;
|
|
7881
|
+
exports.Calendar = Calendar2;
|
|
7762
7882
|
exports.Card = Card_default;
|
|
7763
7883
|
exports.CardCarousel = CardCarousel;
|
|
7764
7884
|
exports.Catalog = Catalog;
|