@geomak/ui 7.2.2 → 7.3.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 +343 -314
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +9 -1
- package/dist/index.d.ts +9 -1
- package/dist/index.js +56 -27
- 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 chunk4V4U2W7K_cjs = require('./chunk-4V4U2W7K.cjs');
|
|
4
4
|
var chunkOAV4TA4B_cjs = require('./chunk-OAV4TA4B.cjs');
|
|
5
|
-
var
|
|
5
|
+
var React30 = require('react');
|
|
6
6
|
var reactDom = require('react-dom');
|
|
7
7
|
var jsxRuntime = require('react/jsx-runtime');
|
|
8
8
|
var AvatarPrimitive = require('@radix-ui/react-avatar');
|
|
@@ -41,7 +41,7 @@ function _interopNamespace(e) {
|
|
|
41
41
|
return Object.freeze(n);
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
var
|
|
44
|
+
var React30__default = /*#__PURE__*/_interopDefault(React30);
|
|
45
45
|
var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
|
|
46
46
|
var DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
|
|
47
47
|
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
@@ -67,8 +67,8 @@ function cx(...values) {
|
|
|
67
67
|
return out;
|
|
68
68
|
}
|
|
69
69
|
function Portal({ children, target }) {
|
|
70
|
-
const [resolved, setResolved] =
|
|
71
|
-
|
|
70
|
+
const [resolved, setResolved] = React30.useState(null);
|
|
71
|
+
React30.useEffect(() => {
|
|
72
72
|
if (target === null) {
|
|
73
73
|
setResolved(null);
|
|
74
74
|
return;
|
|
@@ -502,7 +502,7 @@ function IconButton({
|
|
|
502
502
|
className = "",
|
|
503
503
|
style
|
|
504
504
|
}) {
|
|
505
|
-
const colorScheme =
|
|
505
|
+
const colorScheme = React30.useMemo(() => {
|
|
506
506
|
if (type === "primary") {
|
|
507
507
|
return "bg-accent text-accent-fg hover:bg-accent-hover";
|
|
508
508
|
}
|
|
@@ -592,7 +592,7 @@ var SIZE_CLASSES = {
|
|
|
592
592
|
md: "h-9 px-4 text-sm gap-1.5 rounded-lg",
|
|
593
593
|
lg: "h-11 px-5 text-sm gap-2 rounded-xl"
|
|
594
594
|
};
|
|
595
|
-
var Button =
|
|
595
|
+
var Button = React30__default.default.forwardRef(function Button2({
|
|
596
596
|
content,
|
|
597
597
|
variant = "primary",
|
|
598
598
|
size = "md",
|
|
@@ -700,7 +700,7 @@ function MenuButton({
|
|
|
700
700
|
"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
|
|
701
701
|
"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
|
|
702
702
|
].join(" "),
|
|
703
|
-
children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
703
|
+
children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
|
|
704
704
|
item.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu__namespace.Separator, { className: "my-1 h-px bg-border" }),
|
|
705
705
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
706
706
|
DropdownMenu__namespace.Item,
|
|
@@ -943,9 +943,9 @@ function Tooltip({
|
|
|
943
943
|
] }) });
|
|
944
944
|
}
|
|
945
945
|
var TooltipProvider = TooltipPrimitive__namespace.Provider;
|
|
946
|
-
var TabsContext =
|
|
946
|
+
var TabsContext = React30.createContext(null);
|
|
947
947
|
function useTabsContext() {
|
|
948
|
-
const ctx =
|
|
948
|
+
const ctx = React30.useContext(TabsContext);
|
|
949
949
|
if (!ctx) throw new Error("Tabs.List / Tabs.Trigger / Tabs.Panel must be rendered inside <Tabs>.");
|
|
950
950
|
return ctx;
|
|
951
951
|
}
|
|
@@ -967,26 +967,26 @@ function Tabs({
|
|
|
967
967
|
children
|
|
968
968
|
}) {
|
|
969
969
|
const isControlled = value !== void 0;
|
|
970
|
-
const [internal, setInternal] =
|
|
970
|
+
const [internal, setInternal] = React30.useState(defaultValue);
|
|
971
971
|
const current = isControlled ? value : internal;
|
|
972
972
|
const reduced = !!framerMotion.useReducedMotion();
|
|
973
|
-
const indicatorId =
|
|
974
|
-
const select =
|
|
973
|
+
const indicatorId = React30.useId();
|
|
974
|
+
const select = React30.useCallback((next) => {
|
|
975
975
|
if (!isControlled) setInternal(next);
|
|
976
976
|
onChange?.(next);
|
|
977
977
|
}, [isControlled, onChange]);
|
|
978
|
-
const registry =
|
|
979
|
-
const orderRef =
|
|
980
|
-
const [, bump] =
|
|
981
|
-
const registerTab =
|
|
978
|
+
const registry = React30.useRef(/* @__PURE__ */ new Map());
|
|
979
|
+
const orderRef = React30.useRef(0);
|
|
980
|
+
const [, bump] = React30.useState(0);
|
|
981
|
+
const registerTab = React30.useCallback((val, meta) => {
|
|
982
982
|
const existing = registry.current.get(val);
|
|
983
983
|
registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
|
|
984
984
|
if (!existing) bump((v) => v + 1);
|
|
985
985
|
}, []);
|
|
986
|
-
const unregisterTab =
|
|
986
|
+
const unregisterTab = React30.useCallback((val) => {
|
|
987
987
|
if (registry.current.delete(val)) bump((v) => v + 1);
|
|
988
988
|
}, []);
|
|
989
|
-
const getTabs =
|
|
989
|
+
const getTabs = React30.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 })), []);
|
|
990
990
|
return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
991
991
|
TabsPrimitive__namespace.Root,
|
|
992
992
|
{
|
|
@@ -1006,10 +1006,10 @@ function Tabs({
|
|
|
1006
1006
|
function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
1007
1007
|
const { variant, orientation, reduced, value } = useTabsContext();
|
|
1008
1008
|
const horizontal = orientation === "horizontal";
|
|
1009
|
-
const scrollRef =
|
|
1010
|
-
const [edges, setEdges] =
|
|
1009
|
+
const scrollRef = React30.useRef(null);
|
|
1010
|
+
const [edges, setEdges] = React30.useState({ start: false, end: false });
|
|
1011
1011
|
const scrollable = variant !== "segmented";
|
|
1012
|
-
|
|
1012
|
+
React30.useLayoutEffect(() => {
|
|
1013
1013
|
const el = scrollRef.current;
|
|
1014
1014
|
if (!el || !scrollable) return;
|
|
1015
1015
|
const update = () => {
|
|
@@ -1034,13 +1034,13 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
|
|
|
1034
1034
|
ro.disconnect();
|
|
1035
1035
|
};
|
|
1036
1036
|
}, [horizontal, scrollable, children]);
|
|
1037
|
-
const nudge =
|
|
1037
|
+
const nudge = React30.useCallback((dir) => {
|
|
1038
1038
|
const el = scrollRef.current;
|
|
1039
1039
|
if (!el) return;
|
|
1040
1040
|
const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
|
|
1041
1041
|
el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
|
|
1042
1042
|
}, [horizontal, reduced]);
|
|
1043
|
-
|
|
1043
|
+
React30.useLayoutEffect(() => {
|
|
1044
1044
|
const el = scrollRef.current;
|
|
1045
1045
|
if (!el || !scrollable) return;
|
|
1046
1046
|
const active = el.querySelector("[role=tab][data-state=active]");
|
|
@@ -1098,9 +1098,9 @@ function Chevron2({ side, orientation, onClick }) {
|
|
|
1098
1098
|
function OverflowMenu() {
|
|
1099
1099
|
const { getTabs, value, select, orientation } = useTabsContext();
|
|
1100
1100
|
const horizontal = orientation === "horizontal";
|
|
1101
|
-
const [open, setOpen] =
|
|
1102
|
-
const wrapRef =
|
|
1103
|
-
const timer =
|
|
1101
|
+
const [open, setOpen] = React30.useState(false);
|
|
1102
|
+
const wrapRef = React30.useRef(null);
|
|
1103
|
+
const timer = React30.useRef(null);
|
|
1104
1104
|
const openNow = () => {
|
|
1105
1105
|
if (timer.current) clearTimeout(timer.current);
|
|
1106
1106
|
setOpen(true);
|
|
@@ -1108,7 +1108,7 @@ function OverflowMenu() {
|
|
|
1108
1108
|
const closeSoon = () => {
|
|
1109
1109
|
timer.current = setTimeout(() => setOpen(false), 160);
|
|
1110
1110
|
};
|
|
1111
|
-
|
|
1111
|
+
React30.useLayoutEffect(() => {
|
|
1112
1112
|
if (!open) return;
|
|
1113
1113
|
const onDoc = (e) => {
|
|
1114
1114
|
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
|
|
@@ -1189,7 +1189,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
|
|
|
1189
1189
|
const isActive = active === value;
|
|
1190
1190
|
const horizontal = orientation === "horizontal";
|
|
1191
1191
|
const sz = SIZE[size];
|
|
1192
|
-
|
|
1192
|
+
React30.useLayoutEffect(() => {
|
|
1193
1193
|
registerTab(value, { label: children, icon, disabled });
|
|
1194
1194
|
return () => unregisterTab(value);
|
|
1195
1195
|
}, [value, children, icon, disabled, registerTab, unregisterTab]);
|
|
@@ -1387,7 +1387,7 @@ function Tree({
|
|
|
1387
1387
|
item.key
|
|
1388
1388
|
)) });
|
|
1389
1389
|
}
|
|
1390
|
-
var AccordionCtx =
|
|
1390
|
+
var AccordionCtx = React30.createContext({ variant: "separated" });
|
|
1391
1391
|
function Accordion2({
|
|
1392
1392
|
children,
|
|
1393
1393
|
type = "single",
|
|
@@ -1446,7 +1446,7 @@ var Chevron3 = /* @__PURE__ */ jsxRuntime.jsx(
|
|
|
1446
1446
|
}
|
|
1447
1447
|
);
|
|
1448
1448
|
function AccordionItem({ value, title, icon, children, disabled, className = "" }) {
|
|
1449
|
-
const { variant } =
|
|
1449
|
+
const { variant } = React30.useContext(AccordionCtx);
|
|
1450
1450
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1451
1451
|
AccordionPrimitive__namespace.Item,
|
|
1452
1452
|
{
|
|
@@ -1505,7 +1505,7 @@ function Breadcrumbs({
|
|
|
1505
1505
|
className = "",
|
|
1506
1506
|
style
|
|
1507
1507
|
}) {
|
|
1508
|
-
const [expanded, setExpanded] =
|
|
1508
|
+
const [expanded, setExpanded] = React30.useState(false);
|
|
1509
1509
|
const shouldCollapse = maxItems > 0 && items.length > maxItems && !expanded;
|
|
1510
1510
|
const visible = [];
|
|
1511
1511
|
if (shouldCollapse) {
|
|
@@ -1689,8 +1689,8 @@ function Stepper({
|
|
|
1689
1689
|
className = ""
|
|
1690
1690
|
}) {
|
|
1691
1691
|
const reduced = framerMotion.useReducedMotion();
|
|
1692
|
-
const [forcedVertical, setForcedVertical] =
|
|
1693
|
-
|
|
1692
|
+
const [forcedVertical, setForcedVertical] = React30.useState(false);
|
|
1693
|
+
React30.useEffect(() => {
|
|
1694
1694
|
if (!responsive || orientation === "vertical") return;
|
|
1695
1695
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
|
|
1696
1696
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
@@ -1799,7 +1799,7 @@ function Kbd({
|
|
|
1799
1799
|
style
|
|
1800
1800
|
}) {
|
|
1801
1801
|
if (keys && keys.length > 0) {
|
|
1802
|
-
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1802
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cx("inline-flex items-center gap-1", className), style, children: keys.map((k, i) => /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
|
|
1803
1803
|
i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-xs select-none", children: separator }),
|
|
1804
1804
|
/* @__PURE__ */ jsxRuntime.jsx("kbd", { className: [cap, SIZE3[size]].join(" "), children: k })
|
|
1805
1805
|
] }, `${k}-${i}`)) });
|
|
@@ -1890,13 +1890,13 @@ function FlatCarousel({
|
|
|
1890
1890
|
className = "",
|
|
1891
1891
|
style
|
|
1892
1892
|
}) {
|
|
1893
|
-
const scrollerRef =
|
|
1894
|
-
const slides =
|
|
1895
|
-
const [active, setActive] =
|
|
1896
|
-
const [atStart, setAtStart] =
|
|
1897
|
-
const [atEnd, setAtEnd] =
|
|
1893
|
+
const scrollerRef = React30.useRef(null);
|
|
1894
|
+
const slides = React30__default.default.Children.toArray(children);
|
|
1895
|
+
const [active, setActive] = React30.useState(0);
|
|
1896
|
+
const [atStart, setAtStart] = React30.useState(true);
|
|
1897
|
+
const [atEnd, setAtEnd] = React30.useState(false);
|
|
1898
1898
|
const width = typeof itemWidth === "number" ? `${itemWidth}px` : itemWidth;
|
|
1899
|
-
const update =
|
|
1899
|
+
const update = React30.useCallback(() => {
|
|
1900
1900
|
const el = scrollerRef.current;
|
|
1901
1901
|
if (!el) return;
|
|
1902
1902
|
setAtStart(el.scrollLeft <= 1);
|
|
@@ -1905,7 +1905,7 @@ function FlatCarousel({
|
|
|
1905
1905
|
const slideW = first ? first.getBoundingClientRect().width + gap : el.clientWidth;
|
|
1906
1906
|
setActive(Math.round(el.scrollLeft / slideW));
|
|
1907
1907
|
}, [gap]);
|
|
1908
|
-
|
|
1908
|
+
React30.useEffect(() => {
|
|
1909
1909
|
update();
|
|
1910
1910
|
const el = scrollerRef.current;
|
|
1911
1911
|
if (!el) return;
|
|
@@ -1946,9 +1946,9 @@ function RotatingCarousel({
|
|
|
1946
1946
|
className = "",
|
|
1947
1947
|
style
|
|
1948
1948
|
}) {
|
|
1949
|
-
const slides =
|
|
1949
|
+
const slides = React30__default.default.Children.toArray(children);
|
|
1950
1950
|
const count = slides.length;
|
|
1951
|
-
const [active, setActive] =
|
|
1951
|
+
const [active, setActive] = React30.useState(0);
|
|
1952
1952
|
const reduced = framerMotion.useReducedMotion();
|
|
1953
1953
|
const wrap = (n) => count > 0 ? (n % count + count) % count : 0;
|
|
1954
1954
|
const idx = wrap(active);
|
|
@@ -2186,13 +2186,13 @@ function Chat({
|
|
|
2186
2186
|
className = "",
|
|
2187
2187
|
style
|
|
2188
2188
|
}) {
|
|
2189
|
-
const listRef =
|
|
2190
|
-
const atBottomRef =
|
|
2191
|
-
const [showJump, setShowJump] =
|
|
2192
|
-
const [draft, setDraft] =
|
|
2189
|
+
const listRef = React30.useRef(null);
|
|
2190
|
+
const atBottomRef = React30.useRef(true);
|
|
2191
|
+
const [showJump, setShowJump] = React30.useState(false);
|
|
2192
|
+
const [draft, setDraft] = React30.useState("");
|
|
2193
2193
|
const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
|
|
2194
2194
|
const isTyping = typingNames.length > 0;
|
|
2195
|
-
const scrollToBottom =
|
|
2195
|
+
const scrollToBottom = React30.useCallback((smooth = true) => {
|
|
2196
2196
|
const el = listRef.current;
|
|
2197
2197
|
if (!el) return;
|
|
2198
2198
|
if (typeof el.scrollTo === "function") el.scrollTo({ top: el.scrollHeight, behavior: smooth ? "smooth" : "auto" });
|
|
@@ -2205,10 +2205,10 @@ function Chat({
|
|
|
2205
2205
|
atBottomRef.current = near;
|
|
2206
2206
|
setShowJump(!near);
|
|
2207
2207
|
};
|
|
2208
|
-
|
|
2208
|
+
React30.useEffect(() => {
|
|
2209
2209
|
if (atBottomRef.current) scrollToBottom(messages.length > 0);
|
|
2210
2210
|
}, [messages.length, isTyping]);
|
|
2211
|
-
|
|
2211
|
+
React30.useEffect(() => {
|
|
2212
2212
|
scrollToBottom(false);
|
|
2213
2213
|
}, [scrollToBottom]);
|
|
2214
2214
|
const send = () => {
|
|
@@ -2398,7 +2398,7 @@ function FAB({
|
|
|
2398
2398
|
className = "",
|
|
2399
2399
|
style
|
|
2400
2400
|
}) {
|
|
2401
|
-
const [open, setOpen] =
|
|
2401
|
+
const [open, setOpen] = React30.useState(false);
|
|
2402
2402
|
const reduced = framerMotion.useReducedMotion();
|
|
2403
2403
|
const hasDial = !!actions && actions.length > 0;
|
|
2404
2404
|
const bottom = position.startsWith("bottom");
|
|
@@ -2500,8 +2500,8 @@ function PopConfirm({
|
|
|
2500
2500
|
onOpenChange,
|
|
2501
2501
|
className = ""
|
|
2502
2502
|
}) {
|
|
2503
|
-
const [uncontrolledOpen, setUncontrolledOpen] =
|
|
2504
|
-
const [loading, setLoading] =
|
|
2503
|
+
const [uncontrolledOpen, setUncontrolledOpen] = React30.useState(false);
|
|
2504
|
+
const [loading, setLoading] = React30.useState(false);
|
|
2505
2505
|
const isOpen = open ?? uncontrolledOpen;
|
|
2506
2506
|
const setOpen = (next) => {
|
|
2507
2507
|
onOpenChange?.(next);
|
|
@@ -2588,16 +2588,16 @@ function LogoutTimer({
|
|
|
2588
2588
|
logoutLabel = "Sign out now"
|
|
2589
2589
|
}) {
|
|
2590
2590
|
const reduced = framerMotion.useReducedMotion();
|
|
2591
|
-
const [warning, setWarning] =
|
|
2592
|
-
const [remaining, setRemaining] =
|
|
2593
|
-
const idleTimer =
|
|
2594
|
-
const tick =
|
|
2595
|
-
const deadline =
|
|
2596
|
-
const warningRef =
|
|
2597
|
-
const lastReset =
|
|
2598
|
-
const cbs =
|
|
2591
|
+
const [warning, setWarning] = React30.useState(false);
|
|
2592
|
+
const [remaining, setRemaining] = React30.useState(countdown);
|
|
2593
|
+
const idleTimer = React30.useRef(null);
|
|
2594
|
+
const tick = React30.useRef(null);
|
|
2595
|
+
const deadline = React30.useRef(0);
|
|
2596
|
+
const warningRef = React30.useRef(false);
|
|
2597
|
+
const lastReset = React30.useRef(0);
|
|
2598
|
+
const cbs = React30.useRef({ onLogout, onContinue, onWarning });
|
|
2599
2599
|
cbs.current = { onLogout, onContinue, onWarning };
|
|
2600
|
-
const clearTimers =
|
|
2600
|
+
const clearTimers = React30.useCallback(() => {
|
|
2601
2601
|
if (idleTimer.current) {
|
|
2602
2602
|
clearTimeout(idleTimer.current);
|
|
2603
2603
|
idleTimer.current = null;
|
|
@@ -2607,13 +2607,13 @@ function LogoutTimer({
|
|
|
2607
2607
|
tick.current = null;
|
|
2608
2608
|
}
|
|
2609
2609
|
}, []);
|
|
2610
|
-
const logout =
|
|
2610
|
+
const logout = React30.useCallback(() => {
|
|
2611
2611
|
clearTimers();
|
|
2612
2612
|
warningRef.current = false;
|
|
2613
2613
|
setWarning(false);
|
|
2614
2614
|
cbs.current.onLogout();
|
|
2615
2615
|
}, [clearTimers]);
|
|
2616
|
-
const startIdle =
|
|
2616
|
+
const startIdle = React30.useCallback(() => {
|
|
2617
2617
|
if (idleTimer.current) clearTimeout(idleTimer.current);
|
|
2618
2618
|
idleTimer.current = setTimeout(() => {
|
|
2619
2619
|
warningRef.current = true;
|
|
@@ -2628,7 +2628,7 @@ function LogoutTimer({
|
|
|
2628
2628
|
}, 250);
|
|
2629
2629
|
}, timeout);
|
|
2630
2630
|
}, [timeout, countdown, logout]);
|
|
2631
|
-
const stay =
|
|
2631
|
+
const stay = React30.useCallback(() => {
|
|
2632
2632
|
if (tick.current) {
|
|
2633
2633
|
clearInterval(tick.current);
|
|
2634
2634
|
tick.current = null;
|
|
@@ -2638,7 +2638,7 @@ function LogoutTimer({
|
|
|
2638
2638
|
cbs.current.onContinue?.();
|
|
2639
2639
|
startIdle();
|
|
2640
2640
|
}, [startIdle]);
|
|
2641
|
-
|
|
2641
|
+
React30.useEffect(() => {
|
|
2642
2642
|
if (!enabled) {
|
|
2643
2643
|
clearTimers();
|
|
2644
2644
|
warningRef.current = false;
|
|
@@ -2703,11 +2703,11 @@ function SegmentedControl({
|
|
|
2703
2703
|
"aria-label": ariaLabel
|
|
2704
2704
|
}) {
|
|
2705
2705
|
const sz = SIZE5[size];
|
|
2706
|
-
const groupId =
|
|
2707
|
-
const errorId =
|
|
2706
|
+
const groupId = React30.useId();
|
|
2707
|
+
const errorId = React30.useId();
|
|
2708
2708
|
const hasError = errorMessage != null;
|
|
2709
2709
|
const isControlled = value !== void 0;
|
|
2710
|
-
const [internal, setInternal] =
|
|
2710
|
+
const [internal, setInternal] = React30.useState(defaultValue);
|
|
2711
2711
|
const current = isControlled ? value : internal;
|
|
2712
2712
|
const handle = (v) => {
|
|
2713
2713
|
if (!v) return;
|
|
@@ -2868,22 +2868,22 @@ function Scheduler({
|
|
|
2868
2868
|
style
|
|
2869
2869
|
}) {
|
|
2870
2870
|
const reduced = framerMotion.useReducedMotion();
|
|
2871
|
-
const [view, setView] =
|
|
2872
|
-
const [cursor, setCursor] =
|
|
2873
|
-
const [loaded, setLoaded] =
|
|
2874
|
-
const [loading, setLoading] =
|
|
2875
|
-
const [error, setError] =
|
|
2876
|
-
const [reloadKey, setReloadKey] =
|
|
2877
|
-
const [dir, setDir] =
|
|
2878
|
-
const cbRef =
|
|
2871
|
+
const [view, setView] = React30.useState(defaultView);
|
|
2872
|
+
const [cursor, setCursor] = React30.useState(() => defaultDate ?? /* @__PURE__ */ new Date());
|
|
2873
|
+
const [loaded, setLoaded] = React30.useState([]);
|
|
2874
|
+
const [loading, setLoading] = React30.useState(false);
|
|
2875
|
+
const [error, setError] = React30.useState(null);
|
|
2876
|
+
const [reloadKey, setReloadKey] = React30.useState(0);
|
|
2877
|
+
const [dir, setDir] = React30.useState(0);
|
|
2878
|
+
const cbRef = React30.useRef({ loadEvents, onError });
|
|
2879
2879
|
cbRef.current = { loadEvents, onError };
|
|
2880
|
-
const range =
|
|
2880
|
+
const range = React30.useMemo(
|
|
2881
2881
|
() => view === "month" ? monthRange(cursor) : weekRange(cursor, weekStartsOn),
|
|
2882
2882
|
[view, cursor, weekStartsOn]
|
|
2883
2883
|
);
|
|
2884
2884
|
const fromKey = range.from.getTime();
|
|
2885
2885
|
const toKey = range.to.getTime();
|
|
2886
|
-
|
|
2886
|
+
React30.useEffect(() => {
|
|
2887
2887
|
const { loadEvents: loader, onError: onErr } = cbRef.current;
|
|
2888
2888
|
if (!loader) return;
|
|
2889
2889
|
let cancelled = false;
|
|
@@ -2903,16 +2903,16 @@ function Scheduler({
|
|
|
2903
2903
|
cancelled = true;
|
|
2904
2904
|
};
|
|
2905
2905
|
}, [fromKey, toKey, view, reloadKey]);
|
|
2906
|
-
const retry =
|
|
2907
|
-
const events =
|
|
2906
|
+
const retry = React30.useCallback(() => setReloadKey((k) => k + 1), []);
|
|
2907
|
+
const events = React30.useMemo(
|
|
2908
2908
|
() => (controlledEvents ?? loaded).map(normalize),
|
|
2909
2909
|
[controlledEvents, loaded]
|
|
2910
2910
|
);
|
|
2911
|
-
const go =
|
|
2911
|
+
const go = React30.useCallback((delta) => {
|
|
2912
2912
|
setDir(delta);
|
|
2913
2913
|
setCursor((c) => view === "month" ? addMonths(c, delta) : addDays(c, delta * 7));
|
|
2914
2914
|
}, [view]);
|
|
2915
|
-
const goToday =
|
|
2915
|
+
const goToday = React30.useCallback(() => {
|
|
2916
2916
|
setDir(0);
|
|
2917
2917
|
setCursor(/* @__PURE__ */ new Date());
|
|
2918
2918
|
}, []);
|
|
@@ -3022,9 +3022,9 @@ function SchedulerError({ onRetry }) {
|
|
|
3022
3022
|
] });
|
|
3023
3023
|
}
|
|
3024
3024
|
function MonthYearPicker({ label, cursor, onPick }) {
|
|
3025
|
-
const [open, setOpen] =
|
|
3026
|
-
const [viewYear, setViewYear] =
|
|
3027
|
-
|
|
3025
|
+
const [open, setOpen] = React30.useState(false);
|
|
3026
|
+
const [viewYear, setViewYear] = React30.useState(cursor.getFullYear());
|
|
3027
|
+
React30.useEffect(() => {
|
|
3028
3028
|
if (open) setViewYear(cursor.getFullYear());
|
|
3029
3029
|
}, [open, cursor]);
|
|
3030
3030
|
return /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open, onOpenChange: setOpen, children: [
|
|
@@ -3098,8 +3098,8 @@ function MonthView({
|
|
|
3098
3098
|
onSelectSlot,
|
|
3099
3099
|
onSelectEvent
|
|
3100
3100
|
}) {
|
|
3101
|
-
const grid =
|
|
3102
|
-
const eventsByDay =
|
|
3101
|
+
const grid = React30.useMemo(() => buildMonthGrid(cursor, weekStartsOn), [cursor, weekStartsOn]);
|
|
3102
|
+
const eventsByDay = React30.useMemo(() => bucketByDay(events), [events]);
|
|
3103
3103
|
const labels = weekdayLabels(weekStartsOn);
|
|
3104
3104
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col", children: [
|
|
3105
3105
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 border-b border-border", children: labels.map((l) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1.5 text-center text-[11px] font-medium uppercase tracking-wide text-foreground-muted", children: l }, l)) }),
|
|
@@ -3173,12 +3173,12 @@ function WeekView({
|
|
|
3173
3173
|
onSelectSlot,
|
|
3174
3174
|
onSelectEvent
|
|
3175
3175
|
}) {
|
|
3176
|
-
const days =
|
|
3177
|
-
const eventsByDay =
|
|
3178
|
-
const labels =
|
|
3176
|
+
const days = React30.useMemo(() => getWeekDays(cursor, weekStartsOn), [cursor, weekStartsOn]);
|
|
3177
|
+
const eventsByDay = React30.useMemo(() => bucketByDay(events), [events]);
|
|
3178
|
+
const labels = React30.useMemo(() => weekdayLabels(weekStartsOn), [weekStartsOn]);
|
|
3179
3179
|
const dow = (d) => labels[(d.getDay() - weekStartsOn + 7) % 7];
|
|
3180
3180
|
const [startHour, endHour] = dayHours;
|
|
3181
|
-
const hours =
|
|
3181
|
+
const hours = React30.useMemo(
|
|
3182
3182
|
() => Array.from({ length: endHour - startHour }, (_, i) => startHour + i),
|
|
3183
3183
|
[startHour, endHour]
|
|
3184
3184
|
);
|
|
@@ -3369,17 +3369,17 @@ function Cart({
|
|
|
3369
3369
|
] })
|
|
3370
3370
|
] });
|
|
3371
3371
|
}
|
|
3372
|
-
var CartContext =
|
|
3372
|
+
var CartContext = React30.createContext(null);
|
|
3373
3373
|
var clampQty = (qty, max) => {
|
|
3374
3374
|
const lower = Math.max(1, Math.round(qty));
|
|
3375
3375
|
return max != null ? Math.min(lower, max) : lower;
|
|
3376
3376
|
};
|
|
3377
3377
|
function CartProvider({ children, initialItems = [], onChange }) {
|
|
3378
|
-
const [items, setItems] =
|
|
3379
|
-
|
|
3378
|
+
const [items, setItems] = React30.useState(initialItems);
|
|
3379
|
+
React30.useEffect(() => {
|
|
3380
3380
|
onChange?.(items);
|
|
3381
3381
|
}, [items]);
|
|
3382
|
-
const addToCart =
|
|
3382
|
+
const addToCart = React30.useCallback((item, quantity) => {
|
|
3383
3383
|
const addQty = quantity ?? item.quantity ?? 1;
|
|
3384
3384
|
setItems((prev) => {
|
|
3385
3385
|
const existing = prev.find((it) => it.id === item.id);
|
|
@@ -3392,29 +3392,29 @@ function CartProvider({ children, initialItems = [], onChange }) {
|
|
|
3392
3392
|
return [...prev, { ...rest, quantity: clampQty(addQty, item.max) }];
|
|
3393
3393
|
});
|
|
3394
3394
|
}, []);
|
|
3395
|
-
const removeFromCart =
|
|
3395
|
+
const removeFromCart = React30.useCallback((id) => {
|
|
3396
3396
|
setItems((prev) => prev.filter((it) => it.id !== id));
|
|
3397
3397
|
}, []);
|
|
3398
|
-
const updateQuantity =
|
|
3398
|
+
const updateQuantity = React30.useCallback((id, quantity) => {
|
|
3399
3399
|
setItems(
|
|
3400
3400
|
(prev) => prev.map((it) => it.id === id ? { ...it, quantity: clampQty(quantity, it.max) } : it)
|
|
3401
3401
|
);
|
|
3402
3402
|
}, []);
|
|
3403
|
-
const clearCart =
|
|
3404
|
-
const isInCart =
|
|
3405
|
-
const getItemCount =
|
|
3406
|
-
const getCartTotal =
|
|
3403
|
+
const clearCart = React30.useCallback(() => setItems([]), []);
|
|
3404
|
+
const isInCart = React30.useCallback((id) => items.some((it) => it.id === id), [items]);
|
|
3405
|
+
const getItemCount = React30.useCallback(() => items.reduce((sum, it) => sum + it.quantity, 0), [items]);
|
|
3406
|
+
const getCartTotal = React30.useCallback(
|
|
3407
3407
|
() => items.reduce((sum, it) => sum + it.price * it.quantity, 0),
|
|
3408
3408
|
[items]
|
|
3409
3409
|
);
|
|
3410
|
-
const value =
|
|
3410
|
+
const value = React30.useMemo(
|
|
3411
3411
|
() => ({ items, addToCart, removeFromCart, updateQuantity, clearCart, isInCart, getItemCount, getCartTotal }),
|
|
3412
3412
|
[items, addToCart, removeFromCart, updateQuantity, clearCart, isInCart, getItemCount, getCartTotal]
|
|
3413
3413
|
);
|
|
3414
3414
|
return /* @__PURE__ */ jsxRuntime.jsx(CartContext.Provider, { value, children });
|
|
3415
3415
|
}
|
|
3416
3416
|
function useCart() {
|
|
3417
|
-
const ctx =
|
|
3417
|
+
const ctx = React30.useContext(CartContext);
|
|
3418
3418
|
if (!ctx) {
|
|
3419
3419
|
throw new Error("useCart must be used within a <CartProvider>.");
|
|
3420
3420
|
}
|
|
@@ -3748,11 +3748,11 @@ function buildBindings(store, name, kind, snap) {
|
|
|
3748
3748
|
|
|
3749
3749
|
// src/form/useForm.ts
|
|
3750
3750
|
function useForm(options = {}) {
|
|
3751
|
-
const ref =
|
|
3751
|
+
const ref = React30.useRef(null);
|
|
3752
3752
|
if (ref.current === null) ref.current = new FormStore(options);
|
|
3753
3753
|
const store = ref.current;
|
|
3754
|
-
|
|
3755
|
-
const make =
|
|
3754
|
+
React30.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
3755
|
+
const make = React30.useCallback(
|
|
3756
3756
|
(kind) => (name, rules) => {
|
|
3757
3757
|
if (rules !== void 0) store.setRule(name, rules);
|
|
3758
3758
|
return buildBindings(store, name, kind, store.getFieldSnapshot(name));
|
|
@@ -3781,9 +3781,9 @@ function useForm(options = {}) {
|
|
|
3781
3781
|
fieldTarget: make("target")
|
|
3782
3782
|
};
|
|
3783
3783
|
}
|
|
3784
|
-
var FormContext =
|
|
3784
|
+
var FormContext = React30.createContext(null);
|
|
3785
3785
|
function useFormStore() {
|
|
3786
|
-
const store =
|
|
3786
|
+
const store = React30.useContext(FormContext);
|
|
3787
3787
|
if (!store) {
|
|
3788
3788
|
throw new Error("useFormStore must be used within a <Form>. Did you forget to wrap your fields?");
|
|
3789
3789
|
}
|
|
@@ -3797,8 +3797,8 @@ function Form({
|
|
|
3797
3797
|
children,
|
|
3798
3798
|
...rest
|
|
3799
3799
|
}) {
|
|
3800
|
-
const ref =
|
|
3801
|
-
const bypass =
|
|
3800
|
+
const ref = React30.useRef(null);
|
|
3801
|
+
const bypass = React30.useRef(false);
|
|
3802
3802
|
const handleSubmit = async (e) => {
|
|
3803
3803
|
if (bypass.current) {
|
|
3804
3804
|
bypass.current = false;
|
|
@@ -3850,12 +3850,12 @@ function useFormField(name, options = {}) {
|
|
|
3850
3850
|
const store = useFormStore();
|
|
3851
3851
|
const { kind = "value", rules } = options;
|
|
3852
3852
|
if (rules !== void 0 && store.getRule(name) !== rules) store.setRule(name, rules);
|
|
3853
|
-
|
|
3853
|
+
React30.useEffect(() => {
|
|
3854
3854
|
return () => {
|
|
3855
3855
|
if (rules !== void 0) store.removeRule(name);
|
|
3856
3856
|
};
|
|
3857
3857
|
}, [store, name]);
|
|
3858
|
-
const snap =
|
|
3858
|
+
const snap = React30.useSyncExternalStore(
|
|
3859
3859
|
store.subscribe,
|
|
3860
3860
|
() => store.getFieldSnapshot(name)
|
|
3861
3861
|
);
|
|
@@ -3867,7 +3867,7 @@ function FormField({ name, kind, rules, children }) {
|
|
|
3867
3867
|
}
|
|
3868
3868
|
function useFieldArray(name) {
|
|
3869
3869
|
const store = useFormStore();
|
|
3870
|
-
|
|
3870
|
+
React30.useSyncExternalStore(store.subscribe, store.getRootSnapshot, store.getRootSnapshot);
|
|
3871
3871
|
const arr = store.getValue(name) ?? [];
|
|
3872
3872
|
const keys = store.getKeys(name);
|
|
3873
3873
|
return {
|
|
@@ -3900,7 +3900,7 @@ function TextInput({
|
|
|
3900
3900
|
suffix,
|
|
3901
3901
|
id
|
|
3902
3902
|
}) {
|
|
3903
|
-
const errorId =
|
|
3903
|
+
const errorId = React30.useId();
|
|
3904
3904
|
const hasError = errorMessage != null;
|
|
3905
3905
|
const hasAdornment = prefix != null || suffix != null;
|
|
3906
3906
|
const inputId = htmlFor ?? id;
|
|
@@ -4061,7 +4061,7 @@ function CreditCardForm({
|
|
|
4061
4061
|
className = "",
|
|
4062
4062
|
style
|
|
4063
4063
|
}) {
|
|
4064
|
-
const initial =
|
|
4064
|
+
const initial = React30.useRef({
|
|
4065
4065
|
number: formatCardNumber(defaultValue?.number ?? ""),
|
|
4066
4066
|
name: defaultValue?.name ?? "",
|
|
4067
4067
|
expiry: formatExpiry(defaultValue?.expiry ?? ""),
|
|
@@ -4070,7 +4070,7 @@ function CreditCardForm({
|
|
|
4070
4070
|
const form = useForm({ initialValues: initial });
|
|
4071
4071
|
const numberStr = String(form.values.number ?? "");
|
|
4072
4072
|
const brand = detectBrand(numberStr);
|
|
4073
|
-
|
|
4073
|
+
React30.useEffect(() => {
|
|
4074
4074
|
onChange?.(toCard(form.values));
|
|
4075
4075
|
}, [form.values.number, form.values.name, form.values.expiry, form.values.cvv]);
|
|
4076
4076
|
const numberBind = form.fieldNative("number", {
|
|
@@ -4193,7 +4193,7 @@ function Checkout({
|
|
|
4193
4193
|
] })
|
|
4194
4194
|
] });
|
|
4195
4195
|
}
|
|
4196
|
-
var NotificationContext =
|
|
4196
|
+
var NotificationContext = React30.createContext({
|
|
4197
4197
|
open: () => void 0,
|
|
4198
4198
|
close: () => void 0
|
|
4199
4199
|
});
|
|
@@ -4251,26 +4251,26 @@ function NotificationItem({
|
|
|
4251
4251
|
onClose,
|
|
4252
4252
|
reduced
|
|
4253
4253
|
}) {
|
|
4254
|
-
const [paused, setPaused] =
|
|
4254
|
+
const [paused, setPaused] = React30.useState(false);
|
|
4255
4255
|
const duration = n.duration ?? 4e3;
|
|
4256
4256
|
const isAutoDismissing = isFinite(duration) && duration > 0;
|
|
4257
4257
|
const showProgress = !reduced && isAutoDismissing;
|
|
4258
|
-
const timerRef =
|
|
4259
|
-
const startTimeRef =
|
|
4260
|
-
const remainingRef =
|
|
4261
|
-
const clearTimer =
|
|
4258
|
+
const timerRef = React30.useRef(null);
|
|
4259
|
+
const startTimeRef = React30.useRef(0);
|
|
4260
|
+
const remainingRef = React30.useRef(duration);
|
|
4261
|
+
const clearTimer = React30.useCallback(() => {
|
|
4262
4262
|
if (timerRef.current !== null) {
|
|
4263
4263
|
clearTimeout(timerRef.current);
|
|
4264
4264
|
timerRef.current = null;
|
|
4265
4265
|
}
|
|
4266
4266
|
}, []);
|
|
4267
|
-
const scheduleDismiss =
|
|
4267
|
+
const scheduleDismiss = React30.useCallback((ms) => {
|
|
4268
4268
|
clearTimer();
|
|
4269
4269
|
if (!isAutoDismissing) return;
|
|
4270
4270
|
startTimeRef.current = Date.now();
|
|
4271
4271
|
timerRef.current = setTimeout(() => onClose(n.id), ms);
|
|
4272
4272
|
}, [clearTimer, isAutoDismissing, n.id, onClose]);
|
|
4273
|
-
|
|
4273
|
+
React30.useEffect(() => {
|
|
4274
4274
|
if (paused || !isAutoDismissing) return;
|
|
4275
4275
|
scheduleDismiss(remainingRef.current);
|
|
4276
4276
|
return clearTimer;
|
|
@@ -4353,15 +4353,15 @@ function NotificationProvider({
|
|
|
4353
4353
|
children,
|
|
4354
4354
|
position = "top-right"
|
|
4355
4355
|
}) {
|
|
4356
|
-
const [notifications, setNotifications] =
|
|
4356
|
+
const [notifications, setNotifications] = React30.useState([]);
|
|
4357
4357
|
const reduced = framerMotion.useReducedMotion();
|
|
4358
|
-
const open =
|
|
4358
|
+
const open = React30.useCallback((payload) => {
|
|
4359
4359
|
setNotifications((prev) => [
|
|
4360
4360
|
...prev,
|
|
4361
4361
|
{ duration: 4e3, ...payload, id: Date.now() + Math.random() }
|
|
4362
4362
|
]);
|
|
4363
4363
|
}, []);
|
|
4364
|
-
const close =
|
|
4364
|
+
const close = React30.useCallback((id) => {
|
|
4365
4365
|
setNotifications((prev) => prev.filter((n) => n.id !== id));
|
|
4366
4366
|
}, []);
|
|
4367
4367
|
return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
|
|
@@ -4390,7 +4390,7 @@ function NotificationProvider({
|
|
|
4390
4390
|
] });
|
|
4391
4391
|
}
|
|
4392
4392
|
function useNotification() {
|
|
4393
|
-
const { open } =
|
|
4393
|
+
const { open } = React30.useContext(NotificationContext);
|
|
4394
4394
|
return {
|
|
4395
4395
|
info: (props) => open({ type: "info", ...props }),
|
|
4396
4396
|
success: (props) => open({ type: "success", ...props }),
|
|
@@ -4507,10 +4507,10 @@ function FadingBase({
|
|
|
4507
4507
|
isMounted = false,
|
|
4508
4508
|
children
|
|
4509
4509
|
}) {
|
|
4510
|
-
const [shouldRender, setShouldRender] =
|
|
4511
|
-
const [visible, setVisible] =
|
|
4512
|
-
const timerRef =
|
|
4513
|
-
|
|
4510
|
+
const [shouldRender, setShouldRender] = React30.useState(isMounted);
|
|
4511
|
+
const [visible, setVisible] = React30.useState(false);
|
|
4512
|
+
const timerRef = React30.useRef(null);
|
|
4513
|
+
React30.useEffect(() => {
|
|
4514
4514
|
if (isMounted) {
|
|
4515
4515
|
setShouldRender(true);
|
|
4516
4516
|
const rafId = requestAnimationFrame(() => setVisible(true));
|
|
@@ -4608,8 +4608,8 @@ function ScalableContainer({
|
|
|
4608
4608
|
togglePosition = "top-right",
|
|
4609
4609
|
className = ""
|
|
4610
4610
|
}) {
|
|
4611
|
-
const containerRef =
|
|
4612
|
-
const [internalScaled, setInternalScaled] =
|
|
4611
|
+
const containerRef = React30.useRef(null);
|
|
4612
|
+
const [internalScaled, setInternalScaled] = React30.useState(false);
|
|
4613
4613
|
const isScaled = expanded ?? internalScaled;
|
|
4614
4614
|
const reduced = framerMotion.useReducedMotion();
|
|
4615
4615
|
const onToggle = () => {
|
|
@@ -4747,17 +4747,17 @@ function CatalogGrid({ items, buttonText, onOpen, className = "" }) {
|
|
|
4747
4747
|
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)) });
|
|
4748
4748
|
}
|
|
4749
4749
|
function CatalogCarousel({ items, buttonText, onOpen, className = "" }) {
|
|
4750
|
-
const [activeIndex, setActiveIndex] =
|
|
4751
|
-
const [indexPool, setIndexPool] =
|
|
4752
|
-
const cardRefs =
|
|
4753
|
-
const getIndexes =
|
|
4750
|
+
const [activeIndex, setActiveIndex] = React30.useState(0);
|
|
4751
|
+
const [indexPool, setIndexPool] = React30.useState([]);
|
|
4752
|
+
const cardRefs = React30.useRef([]);
|
|
4753
|
+
const getIndexes = React30.useMemo(() => {
|
|
4754
4754
|
let nextIndex = activeIndex + 1;
|
|
4755
4755
|
let previousIndex = activeIndex - 1;
|
|
4756
4756
|
if (activeIndex === 0) previousIndex = items.length - 1;
|
|
4757
4757
|
if (activeIndex === items.length - 1) nextIndex = 0;
|
|
4758
4758
|
return { previousIndex, nextIndex };
|
|
4759
4759
|
}, [activeIndex, items.length]);
|
|
4760
|
-
|
|
4760
|
+
React30.useEffect(() => {
|
|
4761
4761
|
const { nextIndex, previousIndex } = getIndexes;
|
|
4762
4762
|
let indexes = [previousIndex, activeIndex, nextIndex];
|
|
4763
4763
|
if (activeIndex !== 0 && activeIndex !== items.length - 1) {
|
|
@@ -4930,8 +4930,8 @@ function writeDismissed(key) {
|
|
|
4930
4930
|
}
|
|
4931
4931
|
}
|
|
4932
4932
|
function useTargetBbox(ref) {
|
|
4933
|
-
const [bbox, setBbox] =
|
|
4934
|
-
|
|
4933
|
+
const [bbox, setBbox] = React30.useState(null);
|
|
4934
|
+
React30.useLayoutEffect(() => {
|
|
4935
4935
|
const el = ref?.current;
|
|
4936
4936
|
if (!el) {
|
|
4937
4937
|
setBbox(null);
|
|
@@ -4961,7 +4961,7 @@ function tooltipStyleFor(bbox, placement) {
|
|
|
4961
4961
|
return { left: bbox.left + bbox.width / 2, top: bbox.top - TOOLTIP_GAP, transform: "translate(-50%, -100%)", width: TOOLTIP_WIDTH };
|
|
4962
4962
|
}
|
|
4963
4963
|
function useFocusTrap(containerRef, active) {
|
|
4964
|
-
|
|
4964
|
+
React30.useEffect(() => {
|
|
4965
4965
|
if (!active) return;
|
|
4966
4966
|
const el = containerRef.current;
|
|
4967
4967
|
if (!el) return;
|
|
@@ -5000,16 +5000,16 @@ function Wizard({
|
|
|
5000
5000
|
onComplete,
|
|
5001
5001
|
onSkip
|
|
5002
5002
|
}) {
|
|
5003
|
-
const tooltipRef =
|
|
5004
|
-
const tooltipTitleId =
|
|
5005
|
-
const tooltipBodyId =
|
|
5003
|
+
const tooltipRef = React30.useRef(null);
|
|
5004
|
+
const tooltipTitleId = React30.useId();
|
|
5005
|
+
const tooltipBodyId = React30.useId();
|
|
5006
5006
|
const reduced = framerMotion.useReducedMotion();
|
|
5007
|
-
const [open, setOpen] =
|
|
5008
|
-
const [activeIndex, setActiveIndex] =
|
|
5007
|
+
const [open, setOpen] = React30.useState(() => steps.length > 0 && !readDismissed(storageKey));
|
|
5008
|
+
const [activeIndex, setActiveIndex] = React30.useState(0);
|
|
5009
5009
|
const step = steps[activeIndex];
|
|
5010
5010
|
const bbox = useTargetBbox(step?.stepRef);
|
|
5011
5011
|
useFocusTrap(tooltipRef, open);
|
|
5012
|
-
|
|
5012
|
+
React30.useEffect(() => {
|
|
5013
5013
|
if (!open || !dismissible) return;
|
|
5014
5014
|
const onKey = (e) => {
|
|
5015
5015
|
if (e.key === "Escape") {
|
|
@@ -5020,12 +5020,12 @@ function Wizard({
|
|
|
5020
5020
|
document.addEventListener("keydown", onKey);
|
|
5021
5021
|
return () => document.removeEventListener("keydown", onKey);
|
|
5022
5022
|
}, [open, dismissible]);
|
|
5023
|
-
const handleSkip =
|
|
5023
|
+
const handleSkip = React30.useCallback(() => {
|
|
5024
5024
|
writeDismissed(storageKey);
|
|
5025
5025
|
setOpen(false);
|
|
5026
5026
|
onSkip?.();
|
|
5027
5027
|
}, [storageKey, onSkip]);
|
|
5028
|
-
const handleComplete =
|
|
5028
|
+
const handleComplete = React30.useCallback(() => {
|
|
5029
5029
|
writeDismissed(storageKey);
|
|
5030
5030
|
setOpen(false);
|
|
5031
5031
|
onComplete?.();
|
|
@@ -5168,7 +5168,7 @@ function Wizard({
|
|
|
5168
5168
|
] });
|
|
5169
5169
|
}
|
|
5170
5170
|
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" }) });
|
|
5171
|
-
var SearchInput =
|
|
5171
|
+
var SearchInput = React30__default.default.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
|
|
5172
5172
|
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5173
5173
|
"div",
|
|
5174
5174
|
{
|
|
@@ -5403,7 +5403,7 @@ function EditableCell({
|
|
|
5403
5403
|
rowIndex,
|
|
5404
5404
|
onCellEdit
|
|
5405
5405
|
}) {
|
|
5406
|
-
const [editing, setEditing] =
|
|
5406
|
+
const [editing, setEditing] = React30.useState(false);
|
|
5407
5407
|
const value = row[col.keyBind];
|
|
5408
5408
|
const commit = (next) => {
|
|
5409
5409
|
setEditing(false);
|
|
@@ -5451,7 +5451,7 @@ function TableBody({
|
|
|
5451
5451
|
getRowKey,
|
|
5452
5452
|
onCellEdit
|
|
5453
5453
|
}) {
|
|
5454
|
-
const [expanded, setExpanded] =
|
|
5454
|
+
const [expanded, setExpanded] = React30.useState(() => /* @__PURE__ */ new Set());
|
|
5455
5455
|
const reduced = framerMotion.useReducedMotion();
|
|
5456
5456
|
const toggleRow = (rowKey) => {
|
|
5457
5457
|
setExpanded((prev) => {
|
|
@@ -5466,7 +5466,7 @@ function TableBody({
|
|
|
5466
5466
|
return /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, i) => {
|
|
5467
5467
|
const rowKey = getRowKey(row, i);
|
|
5468
5468
|
const isExpanded = expanded.has(rowKey);
|
|
5469
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5469
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
|
|
5470
5470
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
5471
5471
|
"tr",
|
|
5472
5472
|
{
|
|
@@ -5578,13 +5578,13 @@ function Table({
|
|
|
5578
5578
|
className = "",
|
|
5579
5579
|
style
|
|
5580
5580
|
}) {
|
|
5581
|
-
const searchRef =
|
|
5582
|
-
const [searchTerm, setSearchTerm] =
|
|
5583
|
-
const [perPage, setPerPage] =
|
|
5581
|
+
const searchRef = React30.useRef(null);
|
|
5582
|
+
const [searchTerm, setSearchTerm] = React30.useState("");
|
|
5583
|
+
const [perPage, setPerPage] = React30.useState(
|
|
5584
5584
|
typeof pagination.perPage === "number" ? pagination.perPage : 15
|
|
5585
5585
|
);
|
|
5586
|
-
const [activePage, setActivePage] =
|
|
5587
|
-
const [sortState, setSortState] =
|
|
5586
|
+
const [activePage, setActivePage] = React30.useState(0);
|
|
5587
|
+
const [sortState, setSortState] = React30.useState(defaultSort);
|
|
5588
5588
|
const isServerSide = !!(pagination.enabled && pagination.serverSide);
|
|
5589
5589
|
const handleSort = (col) => {
|
|
5590
5590
|
const key = col.keyBind;
|
|
@@ -5596,8 +5596,8 @@ function Table({
|
|
|
5596
5596
|
onSortChange?.(next);
|
|
5597
5597
|
};
|
|
5598
5598
|
const debounceMs = search?.debounceMs ?? 0;
|
|
5599
|
-
const [debouncedTerm, setDebouncedTerm] =
|
|
5600
|
-
|
|
5599
|
+
const [debouncedTerm, setDebouncedTerm] = React30.useState("");
|
|
5600
|
+
React30.useEffect(() => {
|
|
5601
5601
|
if (debounceMs <= 0) {
|
|
5602
5602
|
setDebouncedTerm(searchTerm);
|
|
5603
5603
|
return;
|
|
@@ -5606,7 +5606,7 @@ function Table({
|
|
|
5606
5606
|
return () => clearTimeout(t);
|
|
5607
5607
|
}, [searchTerm, debounceMs]);
|
|
5608
5608
|
const term = debounceMs > 0 ? debouncedTerm : searchTerm;
|
|
5609
|
-
const filteredRows =
|
|
5609
|
+
const filteredRows = React30.useMemo(() => {
|
|
5610
5610
|
if (isServerSide || !term) return rows;
|
|
5611
5611
|
if (search?.predicate) return rows.filter((row) => search.predicate(row, term));
|
|
5612
5612
|
const cs = !!search?.caseSensitive;
|
|
@@ -5620,7 +5620,7 @@ function Table({
|
|
|
5620
5620
|
};
|
|
5621
5621
|
return rows.filter((row) => keys ? keys.some((k) => test(row[k])) : Object.values(row).some(test));
|
|
5622
5622
|
}, [rows, term, isServerSide, search?.predicate, search?.caseSensitive, search?.matchMode, search?.keys]);
|
|
5623
|
-
const sortedRows =
|
|
5623
|
+
const sortedRows = React30.useMemo(() => {
|
|
5624
5624
|
if (isServerSide || !sortState) return filteredRows;
|
|
5625
5625
|
const col = columns.find((c) => c.keyBind === sortState.key);
|
|
5626
5626
|
const accessor = col?.sortAccessor ?? ((r) => r[sortState.key]);
|
|
@@ -5628,29 +5628,29 @@ function Table({
|
|
|
5628
5628
|
if (sortState.direction === "desc") out.reverse();
|
|
5629
5629
|
return out;
|
|
5630
5630
|
}, [filteredRows, sortState, isServerSide, columns]);
|
|
5631
|
-
const datasets =
|
|
5631
|
+
const datasets = React30.useMemo(() => {
|
|
5632
5632
|
if (isServerSide) return [rows];
|
|
5633
5633
|
return createDatasets(sortedRows, pagination.enabled ? perPage : null);
|
|
5634
5634
|
}, [sortedRows, perPage, pagination.enabled, isServerSide, rows]);
|
|
5635
|
-
const MAX_PAGE =
|
|
5635
|
+
const MAX_PAGE = React30.useMemo(() => {
|
|
5636
5636
|
if (isServerSide && typeof pagination.maxPage === "number") return Math.max(0, pagination.maxPage);
|
|
5637
5637
|
if (isServerSide && typeof pagination.totalCount === "number")
|
|
5638
5638
|
return Math.max(0, Math.ceil(pagination.totalCount / perPage) - 1);
|
|
5639
5639
|
return datasets.length ? datasets.length - 1 : 0;
|
|
5640
5640
|
}, [isServerSide, pagination.maxPage, pagination.totalCount, perPage, datasets.length]);
|
|
5641
|
-
const currentPageRows =
|
|
5641
|
+
const currentPageRows = React30.useMemo(() => {
|
|
5642
5642
|
if (isServerSide) return rows;
|
|
5643
5643
|
return datasets[activePage] ?? [];
|
|
5644
5644
|
}, [isServerSide, rows, datasets, activePage]);
|
|
5645
|
-
|
|
5645
|
+
React30.useEffect(() => {
|
|
5646
5646
|
if (pagination.enabled && !isServerSide && typeof pagination.perPage === "number") {
|
|
5647
5647
|
setPerPage(pagination.perPage);
|
|
5648
5648
|
}
|
|
5649
5649
|
}, [pagination.enabled, pagination.perPage, isServerSide]);
|
|
5650
|
-
|
|
5650
|
+
React30.useEffect(() => {
|
|
5651
5651
|
if (isServerSide && typeof pagination.perPage === "number") setPerPage(pagination.perPage);
|
|
5652
5652
|
}, [isServerSide, pagination.perPage]);
|
|
5653
|
-
|
|
5653
|
+
React30.useEffect(() => {
|
|
5654
5654
|
if (isServerSide && typeof pagination.page === "number" && pagination.page >= 1)
|
|
5655
5655
|
setActivePage(pagination.page - 1);
|
|
5656
5656
|
}, [isServerSide, pagination.page]);
|
|
@@ -5739,7 +5739,7 @@ function TableSkeletonBody({
|
|
|
5739
5739
|
i
|
|
5740
5740
|
)) });
|
|
5741
5741
|
}
|
|
5742
|
-
var useIsoLayoutEffect = typeof window !== "undefined" ?
|
|
5742
|
+
var useIsoLayoutEffect = typeof window !== "undefined" ? React30.useLayoutEffect : React30.useEffect;
|
|
5743
5743
|
function VirtualList({
|
|
5744
5744
|
items,
|
|
5745
5745
|
rowHeight,
|
|
@@ -5756,10 +5756,10 @@ function VirtualList({
|
|
|
5756
5756
|
className = "",
|
|
5757
5757
|
style
|
|
5758
5758
|
}) {
|
|
5759
|
-
const scrollRef =
|
|
5760
|
-
const [scrollTop, setScrollTop] =
|
|
5761
|
-
const [viewport, setViewport] =
|
|
5762
|
-
const [term, setTerm] =
|
|
5759
|
+
const scrollRef = React30.useRef(null);
|
|
5760
|
+
const [scrollTop, setScrollTop] = React30.useState(0);
|
|
5761
|
+
const [viewport, setViewport] = React30.useState(typeof height === "number" ? height : 400);
|
|
5762
|
+
const [term, setTerm] = React30.useState("");
|
|
5763
5763
|
useIsoLayoutEffect(() => {
|
|
5764
5764
|
const el = scrollRef.current;
|
|
5765
5765
|
if (!el) return;
|
|
@@ -5770,7 +5770,7 @@ function VirtualList({
|
|
|
5770
5770
|
ro.observe(el);
|
|
5771
5771
|
return () => ro.disconnect();
|
|
5772
5772
|
}, []);
|
|
5773
|
-
const filtered =
|
|
5773
|
+
const filtered = React30.useMemo(() => {
|
|
5774
5774
|
if (!searchable || !term) return items;
|
|
5775
5775
|
if (filter) return items.filter((it) => filter(it, term));
|
|
5776
5776
|
const needle = term.toLowerCase();
|
|
@@ -5818,7 +5818,7 @@ function VirtualList({
|
|
|
5818
5818
|
] });
|
|
5819
5819
|
}
|
|
5820
5820
|
function ThemeSwitch({ checked, onChange, label = "Toggle dark mode", className = "" }) {
|
|
5821
|
-
const id =
|
|
5821
|
+
const id = React30.useId();
|
|
5822
5822
|
return /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, className: `flex items-center gap-2 cursor-pointer select-none ${className}`.trim(), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
5823
5823
|
SwitchPrimitive__namespace.Root,
|
|
5824
5824
|
{
|
|
@@ -5891,13 +5891,22 @@ function TopBar({
|
|
|
5891
5891
|
}
|
|
5892
5892
|
function NavItem({
|
|
5893
5893
|
item,
|
|
5894
|
-
isExpanded
|
|
5894
|
+
isExpanded,
|
|
5895
|
+
depth = 0
|
|
5895
5896
|
}) {
|
|
5897
|
+
const hasChildren = !!(item.items && item.items.length);
|
|
5898
|
+
const [open, setOpen] = React30.useState(item.defaultOpen ?? (hasChildren && !!item.items?.some((c) => c.isActive)));
|
|
5899
|
+
const handleClick = () => {
|
|
5900
|
+
if (hasChildren && isExpanded) setOpen((o) => !o);
|
|
5901
|
+
item.onClick?.();
|
|
5902
|
+
};
|
|
5896
5903
|
const btn = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5897
5904
|
"button",
|
|
5898
5905
|
{
|
|
5899
5906
|
type: "button",
|
|
5900
|
-
onClick:
|
|
5907
|
+
onClick: handleClick,
|
|
5908
|
+
"aria-expanded": hasChildren && isExpanded ? open : void 0,
|
|
5909
|
+
style: isExpanded && depth > 0 ? { paddingLeft: 10 + depth * 18 } : void 0,
|
|
5901
5910
|
className: [
|
|
5902
5911
|
"group relative flex w-full items-center gap-2.5 rounded-md",
|
|
5903
5912
|
"px-2.5 py-2 transition-colors duration-100",
|
|
@@ -5906,24 +5915,44 @@ function NavItem({
|
|
|
5906
5915
|
].join(" "),
|
|
5907
5916
|
children: [
|
|
5908
5917
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center", children: [
|
|
5909
|
-
item.icon,
|
|
5918
|
+
item.icon ?? (depth > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current opacity-50" }) : null),
|
|
5910
5919
|
item.badge !== void 0 && item.badge > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute -right-1 -top-1 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-status-error text-[9px] font-bold text-white leading-none", children: item.badge > 99 ? "99+" : item.badge })
|
|
5911
5920
|
] }),
|
|
5912
|
-
isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5913
|
-
|
|
5921
|
+
isExpanded && /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.span, { initial: false, animate: { opacity: 1 }, className: "flex-1 truncate text-left text-sm font-medium", children: item.label }),
|
|
5922
|
+
isExpanded && hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5923
|
+
"svg",
|
|
5914
5924
|
{
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
|
|
5918
|
-
|
|
5925
|
+
viewBox: "0 0 24 24",
|
|
5926
|
+
fill: "none",
|
|
5927
|
+
stroke: "currentColor",
|
|
5928
|
+
strokeWidth: 2,
|
|
5929
|
+
"aria-hidden": "true",
|
|
5930
|
+
className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`,
|
|
5931
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" })
|
|
5919
5932
|
}
|
|
5920
5933
|
),
|
|
5921
|
-
item.isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
|
|
5934
|
+
item.isActive && depth === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
|
|
5922
5935
|
]
|
|
5923
5936
|
}
|
|
5924
5937
|
);
|
|
5925
|
-
if (isExpanded)
|
|
5926
|
-
|
|
5938
|
+
if (!isExpanded) {
|
|
5939
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
|
|
5940
|
+
}
|
|
5941
|
+
if (!hasChildren) return btn;
|
|
5942
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5943
|
+
btn,
|
|
5944
|
+
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5945
|
+
framerMotion.motion.div,
|
|
5946
|
+
{
|
|
5947
|
+
initial: { height: 0, opacity: 0 },
|
|
5948
|
+
animate: { height: "auto", opacity: 1 },
|
|
5949
|
+
exit: { height: 0, opacity: 0 },
|
|
5950
|
+
transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
|
|
5951
|
+
style: { overflow: "hidden" },
|
|
5952
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex flex-col gap-0.5", children: item.items.map((child) => /* @__PURE__ */ jsxRuntime.jsx(NavItem, { item: child, isExpanded, depth: depth + 1 }, child.key)) })
|
|
5953
|
+
}
|
|
5954
|
+
) })
|
|
5955
|
+
] });
|
|
5927
5956
|
}
|
|
5928
5957
|
function Sidebar({
|
|
5929
5958
|
sections,
|
|
@@ -6002,7 +6031,7 @@ function Sidebar({
|
|
|
6002
6031
|
}
|
|
6003
6032
|
) });
|
|
6004
6033
|
}
|
|
6005
|
-
var MegaMenuContext =
|
|
6034
|
+
var MegaMenuContext = React30.createContext({ align: "start" });
|
|
6006
6035
|
function MegaMenu({
|
|
6007
6036
|
children,
|
|
6008
6037
|
align = "start",
|
|
@@ -6033,7 +6062,7 @@ function MegaMenu({
|
|
|
6033
6062
|
}
|
|
6034
6063
|
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";
|
|
6035
6064
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
6036
|
-
const { align } =
|
|
6065
|
+
const { align } = React30.useContext(MegaMenuContext);
|
|
6037
6066
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
6038
6067
|
if (!children) {
|
|
6039
6068
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: cx(TOP_ITEM, className), children: [
|
|
@@ -6118,8 +6147,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
6118
6147
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
6119
6148
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx("min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className), children });
|
|
6120
6149
|
}
|
|
6121
|
-
var elementsOfType = (children, type) =>
|
|
6122
|
-
(c) =>
|
|
6150
|
+
var elementsOfType = (children, type) => React30__default.default.Children.toArray(children).filter(
|
|
6151
|
+
(c) => React30__default.default.isValidElement(c) && c.type === type
|
|
6123
6152
|
);
|
|
6124
6153
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
6125
6154
|
"svg",
|
|
@@ -6156,9 +6185,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
6156
6185
|
);
|
|
6157
6186
|
}
|
|
6158
6187
|
function MobilePanel({ panel, onNavigate }) {
|
|
6159
|
-
const nodes =
|
|
6188
|
+
const nodes = React30__default.default.Children.toArray(panel.props.children);
|
|
6160
6189
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
6161
|
-
if (!
|
|
6190
|
+
if (!React30__default.default.isValidElement(node)) return null;
|
|
6162
6191
|
const el = node;
|
|
6163
6192
|
if (el.type === MegaMenuSection) {
|
|
6164
6193
|
const { title, children } = el.props;
|
|
@@ -6177,8 +6206,8 @@ function MegaMenuMobile({
|
|
|
6177
6206
|
children,
|
|
6178
6207
|
label
|
|
6179
6208
|
}) {
|
|
6180
|
-
const [open, setOpen] =
|
|
6181
|
-
const [expanded, setExpanded] =
|
|
6209
|
+
const [open, setOpen] = React30.useState(false);
|
|
6210
|
+
const [expanded, setExpanded] = React30.useState(null);
|
|
6182
6211
|
const items = elementsOfType(children, MegaMenuItem);
|
|
6183
6212
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
6184
6213
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -6251,17 +6280,17 @@ function AppShell({
|
|
|
6251
6280
|
children,
|
|
6252
6281
|
className = ""
|
|
6253
6282
|
}) {
|
|
6254
|
-
const [expanded, setExpanded] =
|
|
6255
|
-
const [isMobile, setIsMobile] =
|
|
6256
|
-
const [mobileOpen, setMobileOpen] =
|
|
6257
|
-
|
|
6283
|
+
const [expanded, setExpanded] = React30.useState(sidebarDefaultExpanded);
|
|
6284
|
+
const [isMobile, setIsMobile] = React30.useState(false);
|
|
6285
|
+
const [mobileOpen, setMobileOpen] = React30.useState(false);
|
|
6286
|
+
React30.useEffect(() => {
|
|
6258
6287
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
6259
6288
|
const update = (e) => setIsMobile(e.matches);
|
|
6260
6289
|
update(mq);
|
|
6261
6290
|
mq.addEventListener("change", update);
|
|
6262
6291
|
return () => mq.removeEventListener("change", update);
|
|
6263
6292
|
}, []);
|
|
6264
|
-
|
|
6293
|
+
React30.useEffect(() => {
|
|
6265
6294
|
if (!isMobile) setMobileOpen(false);
|
|
6266
6295
|
}, [isMobile]);
|
|
6267
6296
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -6388,7 +6417,7 @@ function SecureLayout({
|
|
|
6388
6417
|
className = ""
|
|
6389
6418
|
}) {
|
|
6390
6419
|
const reduced = framerMotion.useReducedMotion();
|
|
6391
|
-
const cbs =
|
|
6420
|
+
const cbs = React30.useRef({ canAccess, onGranted, onDeny });
|
|
6392
6421
|
cbs.current = { canAccess, onGranted, onDeny };
|
|
6393
6422
|
const rolesKey = JSON.stringify(roles);
|
|
6394
6423
|
const requiredRolesKey = JSON.stringify(requiredRoles);
|
|
@@ -6403,10 +6432,10 @@ function SecureLayout({
|
|
|
6403
6432
|
if (requiredPermissions?.length && !has(permissions, requiredPermissions, requireAllPermissions)) return false;
|
|
6404
6433
|
return true;
|
|
6405
6434
|
};
|
|
6406
|
-
const [state, setState] =
|
|
6435
|
+
const [state, setState] = React30.useState(
|
|
6407
6436
|
() => !passesSync() ? "denied" : canAccess ? "checking" : "granted"
|
|
6408
6437
|
);
|
|
6409
|
-
|
|
6438
|
+
React30.useEffect(() => {
|
|
6410
6439
|
let cancelled = false;
|
|
6411
6440
|
const { canAccess: check, onGranted: granted, onDeny: deny } = cbs.current;
|
|
6412
6441
|
const finish = (ok) => {
|
|
@@ -6567,10 +6596,10 @@ function ThemeProvider({
|
|
|
6567
6596
|
className = "",
|
|
6568
6597
|
style
|
|
6569
6598
|
}) {
|
|
6570
|
-
const id =
|
|
6599
|
+
const id = React30__default.default.useId().replace(/:/g, "");
|
|
6571
6600
|
const scopeClass = `geo-th-${id}`;
|
|
6572
|
-
const divRef =
|
|
6573
|
-
|
|
6601
|
+
const divRef = React30.useRef(null);
|
|
6602
|
+
React30.useEffect(() => {
|
|
6574
6603
|
const el = divRef.current;
|
|
6575
6604
|
if (!el) return;
|
|
6576
6605
|
if (colorScheme === "auto") return;
|
|
@@ -6585,8 +6614,8 @@ function ThemeProvider({
|
|
|
6585
6614
|
}
|
|
6586
6615
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
6587
6616
|
}, [colorScheme]);
|
|
6588
|
-
const lightVars =
|
|
6589
|
-
const darkVarStr =
|
|
6617
|
+
const lightVars = React30.useMemo(() => toCssVars(theme), [theme]);
|
|
6618
|
+
const darkVarStr = React30.useMemo(() => {
|
|
6590
6619
|
if (!darkTheme) return "";
|
|
6591
6620
|
const dvars = toCssVars(darkTheme);
|
|
6592
6621
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -6628,7 +6657,7 @@ function NumberInput({
|
|
|
6628
6657
|
readOnly = false,
|
|
6629
6658
|
precision
|
|
6630
6659
|
}) {
|
|
6631
|
-
const errorId =
|
|
6660
|
+
const errorId = React30.useId();
|
|
6632
6661
|
const hasError = errorMessage != null;
|
|
6633
6662
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
6634
6663
|
const round = (n) => {
|
|
@@ -6759,8 +6788,8 @@ function Password({
|
|
|
6759
6788
|
showIcon,
|
|
6760
6789
|
hideIcon
|
|
6761
6790
|
}) {
|
|
6762
|
-
const [visible, setVisible] =
|
|
6763
|
-
const errorId =
|
|
6791
|
+
const [visible, setVisible] = React30.useState(false);
|
|
6792
|
+
const errorId = React30.useId();
|
|
6764
6793
|
const hasError = errorMessage != null;
|
|
6765
6794
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6766
6795
|
Field,
|
|
@@ -6860,7 +6889,7 @@ function PasswordStrength({
|
|
|
6860
6889
|
className = "",
|
|
6861
6890
|
style
|
|
6862
6891
|
}) {
|
|
6863
|
-
const { score, label } =
|
|
6892
|
+
const { score, label } = React30.useMemo(() => scorer(value), [scorer, value]);
|
|
6864
6893
|
const showMatch = confirmValue != null && (value.length > 0 || confirmValue.length > 0);
|
|
6865
6894
|
const matches = value.length > 0 && value === confirmValue;
|
|
6866
6895
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col gap-2", className), style, "aria-live": "polite", children: [
|
|
@@ -6919,8 +6948,8 @@ function RadioTile({
|
|
|
6919
6948
|
errorMessage,
|
|
6920
6949
|
className
|
|
6921
6950
|
}) {
|
|
6922
|
-
const groupId =
|
|
6923
|
-
const errorId =
|
|
6951
|
+
const groupId = React30.useId();
|
|
6952
|
+
const errorId = React30.useId();
|
|
6924
6953
|
const hasError = errorMessage != null;
|
|
6925
6954
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6926
6955
|
Field,
|
|
@@ -6995,7 +7024,7 @@ function Checkbox({
|
|
|
6995
7024
|
}) {
|
|
6996
7025
|
const isChecked = checked ?? value ?? false;
|
|
6997
7026
|
const labelFirst = labelPosition === "left";
|
|
6998
|
-
const errorId =
|
|
7027
|
+
const errorId = React30.useId();
|
|
6999
7028
|
const hasError = errorMessage != null;
|
|
7000
7029
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
7001
7030
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -7103,8 +7132,8 @@ function RadioGroup({
|
|
|
7103
7132
|
className,
|
|
7104
7133
|
errorMessage
|
|
7105
7134
|
}) {
|
|
7106
|
-
const errorId =
|
|
7107
|
-
const groupId =
|
|
7135
|
+
const errorId = React30.useId();
|
|
7136
|
+
const groupId = React30.useId();
|
|
7108
7137
|
const hasError = errorMessage != null;
|
|
7109
7138
|
const labelFirst = labelPosition === "left";
|
|
7110
7139
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7204,11 +7233,11 @@ function Switch({
|
|
|
7204
7233
|
disabled,
|
|
7205
7234
|
errorMessage
|
|
7206
7235
|
}) {
|
|
7207
|
-
const id =
|
|
7208
|
-
const errorId =
|
|
7236
|
+
const id = React30.useId();
|
|
7237
|
+
const errorId = React30.useId();
|
|
7209
7238
|
const hasError = errorMessage != null;
|
|
7210
7239
|
const isControlled = checked !== void 0;
|
|
7211
|
-
const [internal, setInternal] =
|
|
7240
|
+
const [internal, setInternal] = React30.useState(defaultChecked);
|
|
7212
7241
|
const isOn = isControlled ? checked : internal;
|
|
7213
7242
|
const handle = (c) => {
|
|
7214
7243
|
if (!isControlled) setInternal(c);
|
|
@@ -7284,11 +7313,11 @@ function MultiTagRow({
|
|
|
7284
7313
|
labelFor,
|
|
7285
7314
|
onRemove
|
|
7286
7315
|
}) {
|
|
7287
|
-
const wrapRef =
|
|
7288
|
-
const measureRef =
|
|
7289
|
-
const [visibleCount, setVisibleCount] =
|
|
7316
|
+
const wrapRef = React30.useRef(null);
|
|
7317
|
+
const measureRef = React30.useRef(null);
|
|
7318
|
+
const [visibleCount, setVisibleCount] = React30.useState(values.length);
|
|
7290
7319
|
const key = values.map(String).join("|");
|
|
7291
|
-
|
|
7320
|
+
React30.useLayoutEffect(() => {
|
|
7292
7321
|
const wrap = wrapRef.current;
|
|
7293
7322
|
const measure = measureRef.current;
|
|
7294
7323
|
if (!wrap || !measure) return;
|
|
@@ -7382,16 +7411,16 @@ function Dropdown({
|
|
|
7382
7411
|
size = "md",
|
|
7383
7412
|
className = ""
|
|
7384
7413
|
}) {
|
|
7385
|
-
const [open, setOpen] =
|
|
7386
|
-
const [selectedItems, setSelectedItems] =
|
|
7387
|
-
const [searchTerm, setSearchTerm] =
|
|
7388
|
-
const [innerItems, setInnerItems] =
|
|
7389
|
-
const errorId =
|
|
7414
|
+
const [open, setOpen] = React30.useState(false);
|
|
7415
|
+
const [selectedItems, setSelectedItems] = React30.useState([]);
|
|
7416
|
+
const [searchTerm, setSearchTerm] = React30.useState("");
|
|
7417
|
+
const [innerItems, setInnerItems] = React30.useState([]);
|
|
7418
|
+
const errorId = React30.useId();
|
|
7390
7419
|
const hasError = errorMessage != null;
|
|
7391
|
-
|
|
7420
|
+
React30.useEffect(() => {
|
|
7392
7421
|
setInnerItems(items);
|
|
7393
7422
|
}, [items]);
|
|
7394
|
-
|
|
7423
|
+
React30.useEffect(() => {
|
|
7395
7424
|
if (isMultiselect && Array.isArray(value)) {
|
|
7396
7425
|
setSelectedItems(value);
|
|
7397
7426
|
}
|
|
@@ -7583,19 +7612,19 @@ function AutoComplete({
|
|
|
7583
7612
|
required,
|
|
7584
7613
|
htmlFor
|
|
7585
7614
|
}) {
|
|
7586
|
-
const errorId =
|
|
7615
|
+
const errorId = React30.useId();
|
|
7587
7616
|
const hasError = errorMessage != null;
|
|
7588
|
-
const [term, setTerm] =
|
|
7589
|
-
const [open, setOpen] =
|
|
7590
|
-
const [asyncItems, setAsyncItems] =
|
|
7591
|
-
const [loading, setLoading] =
|
|
7617
|
+
const [term, setTerm] = React30.useState("");
|
|
7618
|
+
const [open, setOpen] = React30.useState(false);
|
|
7619
|
+
const [asyncItems, setAsyncItems] = React30.useState([]);
|
|
7620
|
+
const [loading, setLoading] = React30.useState(false);
|
|
7592
7621
|
const isAsync = typeof onSearch === "function";
|
|
7593
|
-
const debounceRef =
|
|
7594
|
-
const requestIdRef =
|
|
7622
|
+
const debounceRef = React30.useRef(null);
|
|
7623
|
+
const requestIdRef = React30.useRef(0);
|
|
7595
7624
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
7596
7625
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
7597
7626
|
) : [];
|
|
7598
|
-
|
|
7627
|
+
React30.useEffect(() => {
|
|
7599
7628
|
if (!isAsync) return;
|
|
7600
7629
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
7601
7630
|
if (!term.trim()) {
|
|
@@ -7751,15 +7780,15 @@ function TreeSelect({
|
|
|
7751
7780
|
defaultExpandedKeys = [],
|
|
7752
7781
|
size = "md"
|
|
7753
7782
|
}) {
|
|
7754
|
-
const errorId =
|
|
7783
|
+
const errorId = React30.useId();
|
|
7755
7784
|
const hasError = errorMessage != null;
|
|
7756
|
-
const [open, setOpen] =
|
|
7757
|
-
const [expanded, setExpanded] =
|
|
7758
|
-
const [activeIndex, setActiveIndex] =
|
|
7759
|
-
const listRef =
|
|
7760
|
-
const visible =
|
|
7761
|
-
const didSyncOnOpenRef =
|
|
7762
|
-
|
|
7785
|
+
const [open, setOpen] = React30.useState(false);
|
|
7786
|
+
const [expanded, setExpanded] = React30.useState(() => new Set(defaultExpandedKeys));
|
|
7787
|
+
const [activeIndex, setActiveIndex] = React30.useState(0);
|
|
7788
|
+
const listRef = React30.useRef(null);
|
|
7789
|
+
const visible = React30.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
7790
|
+
const didSyncOnOpenRef = React30.useRef(false);
|
|
7791
|
+
React30.useEffect(() => {
|
|
7763
7792
|
if (!open) {
|
|
7764
7793
|
didSyncOnOpenRef.current = false;
|
|
7765
7794
|
return;
|
|
@@ -7769,7 +7798,7 @@ function TreeSelect({
|
|
|
7769
7798
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
7770
7799
|
didSyncOnOpenRef.current = true;
|
|
7771
7800
|
}, [open, value]);
|
|
7772
|
-
const selectedNode =
|
|
7801
|
+
const selectedNode = React30.useMemo(
|
|
7773
7802
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
7774
7803
|
[items, value]
|
|
7775
7804
|
);
|
|
@@ -8000,11 +8029,11 @@ function FileInput({
|
|
|
8000
8029
|
required,
|
|
8001
8030
|
icon
|
|
8002
8031
|
}) {
|
|
8003
|
-
const inputRef =
|
|
8004
|
-
const errorId =
|
|
8005
|
-
const [files, setFiles] =
|
|
8006
|
-
const [dragging, setDragging] =
|
|
8007
|
-
const [sizeError, setSizeError] =
|
|
8032
|
+
const inputRef = React30.useRef(null);
|
|
8033
|
+
const errorId = React30.useId();
|
|
8034
|
+
const [files, setFiles] = React30.useState([]);
|
|
8035
|
+
const [dragging, setDragging] = React30.useState(false);
|
|
8036
|
+
const [sizeError, setSizeError] = React30.useState(null);
|
|
8008
8037
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
8009
8038
|
const openPicker = () => {
|
|
8010
8039
|
if (!disabled) inputRef.current?.click();
|
|
@@ -8195,30 +8224,30 @@ function DatePicker({
|
|
|
8195
8224
|
size = "md",
|
|
8196
8225
|
className = ""
|
|
8197
8226
|
}) {
|
|
8198
|
-
const errorId =
|
|
8227
|
+
const errorId = React30.useId();
|
|
8199
8228
|
const hasError = errorMessage != null;
|
|
8200
|
-
const [open, setOpen] =
|
|
8201
|
-
const [viewMonth, setViewMonth] =
|
|
8202
|
-
const [focusDate, setFocusDate] =
|
|
8203
|
-
const [view, setView] =
|
|
8204
|
-
const gridRef =
|
|
8205
|
-
|
|
8229
|
+
const [open, setOpen] = React30.useState(false);
|
|
8230
|
+
const [viewMonth, setViewMonth] = React30.useState(() => startOfMonth2(value ?? /* @__PURE__ */ new Date()));
|
|
8231
|
+
const [focusDate, setFocusDate] = React30.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
8232
|
+
const [view, setView] = React30.useState("days");
|
|
8233
|
+
const gridRef = React30.useRef(null);
|
|
8234
|
+
React30.useEffect(() => {
|
|
8206
8235
|
if (!open) return;
|
|
8207
8236
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
8208
8237
|
setViewMonth(startOfMonth2(target));
|
|
8209
8238
|
setFocusDate(target);
|
|
8210
8239
|
setView("days");
|
|
8211
8240
|
}, [open, value]);
|
|
8212
|
-
|
|
8241
|
+
React30.useEffect(() => {
|
|
8213
8242
|
if (!open) return;
|
|
8214
8243
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat3(focusDate)}"]`);
|
|
8215
8244
|
cell?.focus();
|
|
8216
8245
|
}, [open, focusDate]);
|
|
8217
|
-
const weekdays =
|
|
8246
|
+
const weekdays = React30.useMemo(() => {
|
|
8218
8247
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
8219
8248
|
return ordered;
|
|
8220
8249
|
}, [weekStartsOn]);
|
|
8221
|
-
const grid =
|
|
8250
|
+
const grid = React30.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
8222
8251
|
const isDisabled = (d) => {
|
|
8223
8252
|
if (min && d < min) return true;
|
|
8224
8253
|
if (max && d > max) return true;
|
|
@@ -8508,10 +8537,10 @@ function TextArea({
|
|
|
8508
8537
|
style,
|
|
8509
8538
|
inputStyle
|
|
8510
8539
|
}) {
|
|
8511
|
-
const errorId =
|
|
8540
|
+
const errorId = React30.useId();
|
|
8512
8541
|
const hasError = errorMessage != null;
|
|
8513
|
-
const ref =
|
|
8514
|
-
|
|
8542
|
+
const ref = React30.useRef(null);
|
|
8543
|
+
React30.useLayoutEffect(() => {
|
|
8515
8544
|
if (!autoGrow) return;
|
|
8516
8545
|
const el = ref.current;
|
|
8517
8546
|
if (!el) return;
|
|
@@ -8583,14 +8612,14 @@ function Slider({
|
|
|
8583
8612
|
name,
|
|
8584
8613
|
htmlFor
|
|
8585
8614
|
}) {
|
|
8586
|
-
const errorId =
|
|
8615
|
+
const errorId = React30.useId();
|
|
8587
8616
|
const hasError = errorMessage != null;
|
|
8588
8617
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
8589
|
-
const [internal, setInternal] =
|
|
8618
|
+
const [internal, setInternal] = React30.useState(
|
|
8590
8619
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
8591
8620
|
);
|
|
8592
8621
|
const current = toArray(value) ?? internal;
|
|
8593
|
-
const [dragging, setDragging] =
|
|
8622
|
+
const [dragging, setDragging] = React30.useState(false);
|
|
8594
8623
|
const emit = (arr) => {
|
|
8595
8624
|
setInternal(arr);
|
|
8596
8625
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -8685,11 +8714,11 @@ function TagsInput({
|
|
|
8685
8714
|
validate,
|
|
8686
8715
|
separators = ["Enter", ","]
|
|
8687
8716
|
}) {
|
|
8688
|
-
const errorId =
|
|
8689
|
-
const inputRef =
|
|
8690
|
-
const [internal, setInternal] =
|
|
8691
|
-
const [draft, setDraft] =
|
|
8692
|
-
const [localError, setLocalError] =
|
|
8717
|
+
const errorId = React30.useId();
|
|
8718
|
+
const inputRef = React30.useRef(null);
|
|
8719
|
+
const [internal, setInternal] = React30.useState(defaultValue ?? []);
|
|
8720
|
+
const [draft, setDraft] = React30.useState("");
|
|
8721
|
+
const [localError, setLocalError] = React30.useState(null);
|
|
8693
8722
|
const tags = value ?? internal;
|
|
8694
8723
|
const hasError = errorMessage != null || localError != null;
|
|
8695
8724
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -8820,9 +8849,9 @@ function OtpInput({
|
|
|
8820
8849
|
className,
|
|
8821
8850
|
groupAfter
|
|
8822
8851
|
}) {
|
|
8823
|
-
const errorId =
|
|
8852
|
+
const errorId = React30.useId();
|
|
8824
8853
|
const hasError = errorMessage != null;
|
|
8825
|
-
const refs =
|
|
8854
|
+
const refs = React30.useRef([]);
|
|
8826
8855
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
8827
8856
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
8828
8857
|
const emit = (next) => {
|
|
@@ -8871,7 +8900,7 @@ function OtpInput({
|
|
|
8871
8900
|
emit(valid.join(""));
|
|
8872
8901
|
focusBox(valid.length);
|
|
8873
8902
|
};
|
|
8874
|
-
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
8903
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
|
|
8875
8904
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8876
8905
|
"input",
|
|
8877
8906
|
{
|
|
@@ -8929,9 +8958,9 @@ function Rating({
|
|
|
8929
8958
|
className,
|
|
8930
8959
|
required
|
|
8931
8960
|
}) {
|
|
8932
|
-
const errorId =
|
|
8933
|
-
const [internal, setInternal] =
|
|
8934
|
-
const [hover, setHover] =
|
|
8961
|
+
const errorId = React30.useId();
|
|
8962
|
+
const [internal, setInternal] = React30.useState(defaultValue);
|
|
8963
|
+
const [hover, setHover] = React30.useState(null);
|
|
8935
8964
|
const current = value ?? internal;
|
|
8936
8965
|
const display2 = hover ?? current;
|
|
8937
8966
|
const interactive = !readOnly && !disabled;
|
|
@@ -9054,9 +9083,9 @@ function TimePicker({
|
|
|
9054
9083
|
required,
|
|
9055
9084
|
style
|
|
9056
9085
|
}) {
|
|
9057
|
-
const errorId =
|
|
9086
|
+
const errorId = React30.useId();
|
|
9058
9087
|
const hasError = errorMessage != null;
|
|
9059
|
-
const [open, setOpen] =
|
|
9088
|
+
const [open, setOpen] = React30.useState(false);
|
|
9060
9089
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
9061
9090
|
const update = (next) => {
|
|
9062
9091
|
const merged = { ...parsed, ...next };
|
|
@@ -9180,13 +9209,13 @@ function DateRangePicker({
|
|
|
9180
9209
|
required,
|
|
9181
9210
|
style
|
|
9182
9211
|
}) {
|
|
9183
|
-
const errorId =
|
|
9212
|
+
const errorId = React30.useId();
|
|
9184
9213
|
const hasError = errorMessage != null;
|
|
9185
|
-
const [open, setOpen] =
|
|
9186
|
-
const [leftMonth, setLeftMonth] =
|
|
9187
|
-
const [pendingStart, setPendingStart] =
|
|
9188
|
-
const [hoverDate, setHoverDate] =
|
|
9189
|
-
const weekdays =
|
|
9214
|
+
const [open, setOpen] = React30.useState(false);
|
|
9215
|
+
const [leftMonth, setLeftMonth] = React30.useState(() => startOfMonth3(value.start ?? /* @__PURE__ */ new Date()));
|
|
9216
|
+
const [pendingStart, setPendingStart] = React30.useState(null);
|
|
9217
|
+
const [hoverDate, setHoverDate] = React30.useState(null);
|
|
9218
|
+
const weekdays = React30.useMemo(
|
|
9190
9219
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
9191
9220
|
[weekStartsOn]
|
|
9192
9221
|
);
|
|
@@ -9362,10 +9391,10 @@ function ColorPicker({
|
|
|
9362
9391
|
required,
|
|
9363
9392
|
placeholder = "Pick a colour\u2026"
|
|
9364
9393
|
}) {
|
|
9365
|
-
const errorId =
|
|
9394
|
+
const errorId = React30.useId();
|
|
9366
9395
|
const hasError = errorMessage != null;
|
|
9367
|
-
const [open, setOpen] =
|
|
9368
|
-
const [draft, setDraft] =
|
|
9396
|
+
const [open, setOpen] = React30.useState(false);
|
|
9397
|
+
const [draft, setDraft] = React30.useState(value);
|
|
9369
9398
|
const valid = HEX_RE.test(value);
|
|
9370
9399
|
const pick = (hex) => {
|
|
9371
9400
|
onChange?.(hex);
|
|
@@ -9452,7 +9481,7 @@ function ColorPicker({
|
|
|
9452
9481
|
}
|
|
9453
9482
|
var CUSTOM_EVENT = "oxy-local-storage";
|
|
9454
9483
|
function useLocalStorage(key, initialValue) {
|
|
9455
|
-
const read =
|
|
9484
|
+
const read = React30.useCallback(() => {
|
|
9456
9485
|
if (typeof window === "undefined") return initialValue;
|
|
9457
9486
|
try {
|
|
9458
9487
|
const item = window.localStorage.getItem(key);
|
|
@@ -9461,8 +9490,8 @@ function useLocalStorage(key, initialValue) {
|
|
|
9461
9490
|
return initialValue;
|
|
9462
9491
|
}
|
|
9463
9492
|
}, [key]);
|
|
9464
|
-
const [stored, setStored] =
|
|
9465
|
-
const setValue =
|
|
9493
|
+
const [stored, setStored] = React30.useState(read);
|
|
9494
|
+
const setValue = React30.useCallback((value) => {
|
|
9466
9495
|
setStored((prev) => {
|
|
9467
9496
|
const next = value instanceof Function ? value(prev) : value;
|
|
9468
9497
|
try {
|
|
@@ -9475,7 +9504,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
9475
9504
|
return next;
|
|
9476
9505
|
});
|
|
9477
9506
|
}, [key]);
|
|
9478
|
-
const remove =
|
|
9507
|
+
const remove = React30.useCallback(() => {
|
|
9479
9508
|
try {
|
|
9480
9509
|
if (typeof window !== "undefined") {
|
|
9481
9510
|
window.localStorage.removeItem(key);
|
|
@@ -9485,10 +9514,10 @@ function useLocalStorage(key, initialValue) {
|
|
|
9485
9514
|
}
|
|
9486
9515
|
setStored(initialValue);
|
|
9487
9516
|
}, [key]);
|
|
9488
|
-
|
|
9517
|
+
React30.useEffect(() => {
|
|
9489
9518
|
setStored(read());
|
|
9490
9519
|
}, [key, read]);
|
|
9491
|
-
|
|
9520
|
+
React30.useEffect(() => {
|
|
9492
9521
|
if (typeof window === "undefined") return;
|
|
9493
9522
|
const onStorage = (e) => {
|
|
9494
9523
|
if (e.key === null || e.key === key) setStored(read());
|
|
@@ -9507,8 +9536,8 @@ function useLocalStorage(key, initialValue) {
|
|
|
9507
9536
|
}
|
|
9508
9537
|
function useMediaQuery(query) {
|
|
9509
9538
|
const get = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
|
|
9510
|
-
const [matches, setMatches] =
|
|
9511
|
-
|
|
9539
|
+
const [matches, setMatches] = React30.useState(get);
|
|
9540
|
+
React30.useEffect(() => {
|
|
9512
9541
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
|
|
9513
9542
|
const mql = window.matchMedia(query);
|
|
9514
9543
|
const onChange = () => setMatches(mql.matches);
|
|
@@ -9539,8 +9568,8 @@ function decodeSegment(seg) {
|
|
|
9539
9568
|
}
|
|
9540
9569
|
}
|
|
9541
9570
|
function useJwt(token) {
|
|
9542
|
-
const [, tick] =
|
|
9543
|
-
const decoded =
|
|
9571
|
+
const [, tick] = React30.useState(0);
|
|
9572
|
+
const decoded = React30.useMemo(() => {
|
|
9544
9573
|
if (!token) return { payload: null, header: null, exp: null };
|
|
9545
9574
|
const [h, p] = token.split(".");
|
|
9546
9575
|
const header = decodeSegment(h);
|
|
@@ -9548,7 +9577,7 @@ function useJwt(token) {
|
|
|
9548
9577
|
const exp = payload && typeof payload.exp === "number" ? payload.exp : null;
|
|
9549
9578
|
return { payload, header, exp };
|
|
9550
9579
|
}, [token]);
|
|
9551
|
-
|
|
9580
|
+
React30.useEffect(() => {
|
|
9552
9581
|
if (decoded.exp == null) return;
|
|
9553
9582
|
const ms = decoded.exp * 1e3 - Date.now();
|
|
9554
9583
|
if (ms <= 0) return;
|
|
@@ -9722,13 +9751,13 @@ function SlideShow({
|
|
|
9722
9751
|
style
|
|
9723
9752
|
}) {
|
|
9724
9753
|
const reduced = framerMotion.useReducedMotion();
|
|
9725
|
-
const [index, setIndex] =
|
|
9726
|
-
const [paused, setPaused] =
|
|
9754
|
+
const [index, setIndex] = React30.useState(0);
|
|
9755
|
+
const [paused, setPaused] = React30.useState(false);
|
|
9727
9756
|
const count = slides.length;
|
|
9728
9757
|
const idx = count ? (index % count + count) % count : 0;
|
|
9729
|
-
const go =
|
|
9730
|
-
const timer =
|
|
9731
|
-
|
|
9758
|
+
const go = React30.useCallback((d) => setIndex((i) => i + d), []);
|
|
9759
|
+
const timer = React30.useRef(null);
|
|
9760
|
+
React30.useEffect(() => {
|
|
9732
9761
|
if (!autoPlay || paused || count <= 1) return;
|
|
9733
9762
|
timer.current = setInterval(() => setIndex((i) => i + 1), interval);
|
|
9734
9763
|
return () => {
|
|
@@ -9804,7 +9833,7 @@ function Video({
|
|
|
9804
9833
|
className = "",
|
|
9805
9834
|
style
|
|
9806
9835
|
}) {
|
|
9807
|
-
const [playing, setPlaying] =
|
|
9836
|
+
const [playing, setPlaying] = React30.useState(autoPlay);
|
|
9808
9837
|
const frame = cx("relative w-full overflow-hidden bg-backdrop", framed ? "rounded-2xl border border-border shadow-sm" : "", className);
|
|
9809
9838
|
const ratio = aspect.replace("/", " / ");
|
|
9810
9839
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: frame, style: { aspectRatio: ratio, ...style }, children: embedUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -9859,7 +9888,7 @@ function Parallax({
|
|
|
9859
9888
|
style
|
|
9860
9889
|
}) {
|
|
9861
9890
|
const reduced = framerMotion.useReducedMotion();
|
|
9862
|
-
const ref =
|
|
9891
|
+
const ref = React30.useRef(null);
|
|
9863
9892
|
const { scrollYProgress } = framerMotion.useScroll({ target: ref, offset: ["start end", "end start"] });
|
|
9864
9893
|
const shift = Math.max(0, Math.min(1, speed)) * 100;
|
|
9865
9894
|
const y = framerMotion.useTransform(scrollYProgress, [0, 1], reduced ? ["0%", "0%"] : [`-${shift / 2}%`, `${shift / 2}%`]);
|
|
@@ -9927,7 +9956,7 @@ function Blog({
|
|
|
9927
9956
|
post.tag != null && !post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
|
|
9928
9957
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
|
|
9929
9958
|
post.excerpt != null && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "line-clamp-3 text-sm leading-relaxed text-foreground-secondary", children: post.excerpt }),
|
|
9930
|
-
meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
9959
|
+
meta.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto flex flex-wrap items-center gap-x-2 gap-y-1 pt-3 text-xs text-foreground-muted", children: meta.map((m, j) => /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
|
|
9931
9960
|
j > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }),
|
|
9932
9961
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: m })
|
|
9933
9962
|
] }, j)) })
|
|
@@ -10056,8 +10085,8 @@ function LeadCapture({
|
|
|
10056
10085
|
className = "",
|
|
10057
10086
|
style
|
|
10058
10087
|
}) {
|
|
10059
|
-
const [email, setEmail] =
|
|
10060
|
-
const [done, setDone] =
|
|
10088
|
+
const [email, setEmail] = React30.useState("");
|
|
10089
|
+
const [done, setDone] = React30.useState(false);
|
|
10061
10090
|
const submit = (e) => {
|
|
10062
10091
|
e.preventDefault();
|
|
10063
10092
|
const value = email.trim();
|