@geomak/ui 7.2.2 → 7.3.1
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 +391 -326
- 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 +103 -38
- package/dist/index.js.map +1 -1
- package/dist/styles.css +12 -0
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
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');
|
|
9
|
-
var
|
|
9
|
+
var DropdownMenu2 = require('@radix-ui/react-dropdown-menu');
|
|
10
10
|
var Dialog = require('@radix-ui/react-dialog');
|
|
11
11
|
var framerMotion = require('framer-motion');
|
|
12
12
|
var TooltipPrimitive = require('@radix-ui/react-tooltip');
|
|
@@ -41,9 +41,9 @@ 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
|
-
var
|
|
46
|
+
var DropdownMenu2__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu2);
|
|
47
47
|
var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
|
|
48
48
|
var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
|
|
49
49
|
var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
|
|
@@ -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",
|
|
@@ -673,8 +673,8 @@ function MenuButton({
|
|
|
673
673
|
side = "bottom",
|
|
674
674
|
className = ""
|
|
675
675
|
}) {
|
|
676
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
677
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
676
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { children: [
|
|
677
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
678
678
|
Button_default,
|
|
679
679
|
{
|
|
680
680
|
variant,
|
|
@@ -688,8 +688,8 @@ function MenuButton({
|
|
|
688
688
|
] })
|
|
689
689
|
}
|
|
690
690
|
) }),
|
|
691
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
692
|
-
|
|
691
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
692
|
+
DropdownMenu2__namespace.Content,
|
|
693
693
|
{
|
|
694
694
|
align,
|
|
695
695
|
side,
|
|
@@ -700,10 +700,10 @@ 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(
|
|
704
|
-
item.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(
|
|
703
|
+
children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(React30__default.default.Fragment, { children: [
|
|
704
|
+
item.separatorBefore && /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Separator, { className: "my-1 h-px bg-border" }),
|
|
705
705
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
706
|
-
|
|
706
|
+
DropdownMenu2__namespace.Item,
|
|
707
707
|
{
|
|
708
708
|
disabled: item.disabled,
|
|
709
709
|
onSelect: () => item.onSelect?.(),
|
|
@@ -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)");
|
|
@@ -1703,7 +1703,7 @@ function Stepper({
|
|
|
1703
1703
|
const vertical = orientation === "vertical" || forcedVertical;
|
|
1704
1704
|
const s = SIZES[size];
|
|
1705
1705
|
const stateOf = (i) => i < current ? "completed" : i === current ? status : "pending";
|
|
1706
|
-
const
|
|
1706
|
+
const Label2 = ({ step, state, align }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: align === "center" ? "mt-2 text-center" : "pt-0.5", children: [
|
|
1707
1707
|
/* @__PURE__ */ jsxRuntime.jsx("div", { className: `font-medium leading-tight ${s.title} ${state === "pending" ? "text-foreground-muted" : "text-foreground"}`, children: step.title }),
|
|
1708
1708
|
step.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mt-0.5 leading-snug text-foreground-muted ${s.desc}`, children: step.description })
|
|
1709
1709
|
] });
|
|
@@ -1718,7 +1718,7 @@ function Stepper({
|
|
|
1718
1718
|
stepButton(i, /* @__PURE__ */ jsxRuntime.jsx(Indicator, { state, index: i, step, sizeKey: size })),
|
|
1719
1719
|
!last && /* @__PURE__ */ jsxRuntime.jsx(VConnector, { filled: i < current, reduced })
|
|
1720
1720
|
] }),
|
|
1721
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsxRuntime.jsx(
|
|
1721
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: last ? "" : "pb-6", children: stepButton(i, /* @__PURE__ */ jsxRuntime.jsx(Label2, { step, state, align: "left" })) })
|
|
1722
1722
|
] }, step.key);
|
|
1723
1723
|
}) });
|
|
1724
1724
|
}
|
|
@@ -1737,7 +1737,7 @@ function Stepper({
|
|
|
1737
1737
|
) }),
|
|
1738
1738
|
stepButton(i, /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
|
|
1739
1739
|
/* @__PURE__ */ jsxRuntime.jsx(Indicator, { state, index: i, step, sizeKey: size }),
|
|
1740
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1740
|
+
/* @__PURE__ */ jsxRuntime.jsx(Label2, { step, state, align: "center" })
|
|
1741
1741
|
] }))
|
|
1742
1742
|
] }, step.key);
|
|
1743
1743
|
}) });
|
|
@@ -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
|
{
|
|
@@ -5889,41 +5889,106 @@ function TopBar({
|
|
|
5889
5889
|
}
|
|
5890
5890
|
);
|
|
5891
5891
|
}
|
|
5892
|
+
function hasActiveDescendant(item) {
|
|
5893
|
+
return !!item.items?.some((c) => c.isActive || hasActiveDescendant(c));
|
|
5894
|
+
}
|
|
5895
|
+
var FLYOUT_PANEL = "z-[400] min-w-[11rem] rounded-lg border border-border bg-surface p-1 shadow-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95";
|
|
5896
|
+
function FlyoutItems({ items }) {
|
|
5897
|
+
return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child) => {
|
|
5898
|
+
const cls = [
|
|
5899
|
+
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm outline-none cursor-pointer select-none transition-colors",
|
|
5900
|
+
child.isActive ? "text-accent data-[highlighted]:bg-accent/10" : "text-foreground data-[highlighted]:bg-surface-raised"
|
|
5901
|
+
].join(" ");
|
|
5902
|
+
const label = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5903
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: child.label }),
|
|
5904
|
+
child.badge !== void 0 && child.badge > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 min-w-4 items-center justify-center rounded-full bg-status-error px-1 text-[9px] font-bold leading-none text-white", children: child.badge > 99 ? "99+" : child.badge })
|
|
5905
|
+
] });
|
|
5906
|
+
if (child.items?.length) {
|
|
5907
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Sub, { children: [
|
|
5908
|
+
/* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.SubTrigger, { className: cls, children: [
|
|
5909
|
+
label,
|
|
5910
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-3.5 w-3.5 flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 6 6 6-6 6" }) })
|
|
5911
|
+
] }),
|
|
5912
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.SubContent, { sideOffset: 6, collisionPadding: 8, className: FLYOUT_PANEL, children: /* @__PURE__ */ jsxRuntime.jsx(FlyoutItems, { items: child.items }) }) })
|
|
5913
|
+
] }, child.key);
|
|
5914
|
+
}
|
|
5915
|
+
return /* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Item, { onSelect: () => child.onClick?.(), className: cls, children: label }, child.key);
|
|
5916
|
+
}) });
|
|
5917
|
+
}
|
|
5892
5918
|
function NavItem({
|
|
5893
5919
|
item,
|
|
5894
|
-
isExpanded
|
|
5920
|
+
isExpanded,
|
|
5921
|
+
depth = 0
|
|
5895
5922
|
}) {
|
|
5923
|
+
const hasChildren = !!(item.items && item.items.length);
|
|
5924
|
+
const [open, setOpen] = React30.useState(item.defaultOpen ?? (hasChildren && hasActiveDescendant(item)));
|
|
5925
|
+
const handleClick = () => {
|
|
5926
|
+
if (hasChildren && isExpanded) setOpen((o) => !o);
|
|
5927
|
+
item.onClick?.();
|
|
5928
|
+
};
|
|
5896
5929
|
const btn = /* @__PURE__ */ jsxRuntime.jsxs(
|
|
5897
5930
|
"button",
|
|
5898
5931
|
{
|
|
5899
5932
|
type: "button",
|
|
5900
|
-
onClick:
|
|
5933
|
+
onClick: handleClick,
|
|
5934
|
+
"aria-label": !isExpanded && typeof item.label === "string" ? item.label : void 0,
|
|
5935
|
+
"aria-expanded": hasChildren && isExpanded ? open : void 0,
|
|
5936
|
+
style: isExpanded && depth > 0 ? { paddingLeft: 10 + depth * 18 } : void 0,
|
|
5901
5937
|
className: [
|
|
5902
5938
|
"group relative flex w-full items-center gap-2.5 rounded-md",
|
|
5903
5939
|
"px-2.5 py-2 transition-colors duration-100",
|
|
5904
5940
|
"focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-inset",
|
|
5905
|
-
item.isActive ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
|
|
5941
|
+
item.isActive || !isExpanded && hasActiveDescendant(item) ? "bg-accent/10 text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"
|
|
5906
5942
|
].join(" "),
|
|
5907
5943
|
children: [
|
|
5908
5944
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex h-5 w-5 flex-shrink-0 items-center justify-center", children: [
|
|
5909
|
-
item.icon,
|
|
5945
|
+
item.icon ?? (depth > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-current opacity-50" }) : null),
|
|
5910
5946
|
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
5947
|
] }),
|
|
5912
|
-
isExpanded && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5913
|
-
|
|
5948
|
+
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 }),
|
|
5949
|
+
isExpanded && hasChildren && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5950
|
+
"svg",
|
|
5914
5951
|
{
|
|
5915
|
-
|
|
5916
|
-
|
|
5917
|
-
|
|
5918
|
-
|
|
5952
|
+
viewBox: "0 0 24 24",
|
|
5953
|
+
fill: "none",
|
|
5954
|
+
stroke: "currentColor",
|
|
5955
|
+
strokeWidth: 2,
|
|
5956
|
+
"aria-hidden": "true",
|
|
5957
|
+
className: `h-4 w-4 flex-shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`,
|
|
5958
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m6 9 6 6 6-6" })
|
|
5919
5959
|
}
|
|
5920
5960
|
),
|
|
5921
|
-
item.isActive && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
|
|
5961
|
+
item.isActive && depth === 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-y-0 left-0 w-[3px] rounded-r-full bg-accent" })
|
|
5922
5962
|
]
|
|
5923
5963
|
}
|
|
5924
5964
|
);
|
|
5925
|
-
if (isExpanded)
|
|
5926
|
-
|
|
5965
|
+
if (!isExpanded) {
|
|
5966
|
+
if (hasChildren) {
|
|
5967
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Root, { children: [
|
|
5968
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Trigger, { asChild: true, children: btn }),
|
|
5969
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2__namespace.Content, { side: "right", align: "start", sideOffset: 8, collisionPadding: 8, className: FLYOUT_PANEL, children: [
|
|
5970
|
+
/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu2__namespace.Label, { className: "px-2.5 pb-1 pt-1.5 text-xs font-semibold text-foreground-muted", children: item.label }),
|
|
5971
|
+
/* @__PURE__ */ jsxRuntime.jsx(FlyoutItems, { items: item.items })
|
|
5972
|
+
] }) })
|
|
5973
|
+
] });
|
|
5974
|
+
}
|
|
5975
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { title: item.label, placement: "right", delayDuration: 200, children: btn });
|
|
5976
|
+
}
|
|
5977
|
+
if (!hasChildren) return btn;
|
|
5978
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
5979
|
+
btn,
|
|
5980
|
+
/* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsxRuntime.jsx(
|
|
5981
|
+
framerMotion.motion.div,
|
|
5982
|
+
{
|
|
5983
|
+
initial: { height: 0, opacity: 0 },
|
|
5984
|
+
animate: { height: "auto", opacity: 1 },
|
|
5985
|
+
exit: { height: 0, opacity: 0 },
|
|
5986
|
+
transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] },
|
|
5987
|
+
style: { overflow: "hidden" },
|
|
5988
|
+
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)) })
|
|
5989
|
+
}
|
|
5990
|
+
) })
|
|
5991
|
+
] });
|
|
5927
5992
|
}
|
|
5928
5993
|
function Sidebar({
|
|
5929
5994
|
sections,
|
|
@@ -6002,7 +6067,7 @@ function Sidebar({
|
|
|
6002
6067
|
}
|
|
6003
6068
|
) });
|
|
6004
6069
|
}
|
|
6005
|
-
var MegaMenuContext =
|
|
6070
|
+
var MegaMenuContext = React30.createContext({ align: "start" });
|
|
6006
6071
|
function MegaMenu({
|
|
6007
6072
|
children,
|
|
6008
6073
|
align = "start",
|
|
@@ -6033,7 +6098,7 @@ function MegaMenu({
|
|
|
6033
6098
|
}
|
|
6034
6099
|
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
6100
|
function MegaMenuItem({ label, icon, href, children, className = "" }) {
|
|
6036
|
-
const { align } =
|
|
6101
|
+
const { align } = React30.useContext(MegaMenuContext);
|
|
6037
6102
|
const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
|
|
6038
6103
|
if (!children) {
|
|
6039
6104
|
return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: cx(TOP_ITEM, className), children: [
|
|
@@ -6118,8 +6183,8 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
|
|
|
6118
6183
|
function MegaMenuFeatured({ children, className = "" }) {
|
|
6119
6184
|
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
6185
|
}
|
|
6121
|
-
var elementsOfType = (children, type) =>
|
|
6122
|
-
(c) =>
|
|
6186
|
+
var elementsOfType = (children, type) => React30__default.default.Children.toArray(children).filter(
|
|
6187
|
+
(c) => React30__default.default.isValidElement(c) && c.type === type
|
|
6123
6188
|
);
|
|
6124
6189
|
var MOBILE_CHEVRON = /* @__PURE__ */ jsxRuntime.jsx(
|
|
6125
6190
|
"svg",
|
|
@@ -6156,9 +6221,9 @@ function MobileLinkRow({ link, onNavigate }) {
|
|
|
6156
6221
|
);
|
|
6157
6222
|
}
|
|
6158
6223
|
function MobilePanel({ panel, onNavigate }) {
|
|
6159
|
-
const nodes =
|
|
6224
|
+
const nodes = React30__default.default.Children.toArray(panel.props.children);
|
|
6160
6225
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
|
|
6161
|
-
if (!
|
|
6226
|
+
if (!React30__default.default.isValidElement(node)) return null;
|
|
6162
6227
|
const el = node;
|
|
6163
6228
|
if (el.type === MegaMenuSection) {
|
|
6164
6229
|
const { title, children } = el.props;
|
|
@@ -6177,8 +6242,8 @@ function MegaMenuMobile({
|
|
|
6177
6242
|
children,
|
|
6178
6243
|
label
|
|
6179
6244
|
}) {
|
|
6180
|
-
const [open, setOpen] =
|
|
6181
|
-
const [expanded, setExpanded] =
|
|
6245
|
+
const [open, setOpen] = React30.useState(false);
|
|
6246
|
+
const [expanded, setExpanded] = React30.useState(null);
|
|
6182
6247
|
const items = elementsOfType(children, MegaMenuItem);
|
|
6183
6248
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden w-full", children: [
|
|
6184
6249
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -6251,17 +6316,17 @@ function AppShell({
|
|
|
6251
6316
|
children,
|
|
6252
6317
|
className = ""
|
|
6253
6318
|
}) {
|
|
6254
|
-
const [expanded, setExpanded] =
|
|
6255
|
-
const [isMobile, setIsMobile] =
|
|
6256
|
-
const [mobileOpen, setMobileOpen] =
|
|
6257
|
-
|
|
6319
|
+
const [expanded, setExpanded] = React30.useState(sidebarDefaultExpanded);
|
|
6320
|
+
const [isMobile, setIsMobile] = React30.useState(false);
|
|
6321
|
+
const [mobileOpen, setMobileOpen] = React30.useState(false);
|
|
6322
|
+
React30.useEffect(() => {
|
|
6258
6323
|
const mq = window.matchMedia("(max-width: 767px)");
|
|
6259
6324
|
const update = (e) => setIsMobile(e.matches);
|
|
6260
6325
|
update(mq);
|
|
6261
6326
|
mq.addEventListener("change", update);
|
|
6262
6327
|
return () => mq.removeEventListener("change", update);
|
|
6263
6328
|
}, []);
|
|
6264
|
-
|
|
6329
|
+
React30.useEffect(() => {
|
|
6265
6330
|
if (!isMobile) setMobileOpen(false);
|
|
6266
6331
|
}, [isMobile]);
|
|
6267
6332
|
const hasSidebar = sidebarSections.length > 0;
|
|
@@ -6388,7 +6453,7 @@ function SecureLayout({
|
|
|
6388
6453
|
className = ""
|
|
6389
6454
|
}) {
|
|
6390
6455
|
const reduced = framerMotion.useReducedMotion();
|
|
6391
|
-
const cbs =
|
|
6456
|
+
const cbs = React30.useRef({ canAccess, onGranted, onDeny });
|
|
6392
6457
|
cbs.current = { canAccess, onGranted, onDeny };
|
|
6393
6458
|
const rolesKey = JSON.stringify(roles);
|
|
6394
6459
|
const requiredRolesKey = JSON.stringify(requiredRoles);
|
|
@@ -6403,10 +6468,10 @@ function SecureLayout({
|
|
|
6403
6468
|
if (requiredPermissions?.length && !has(permissions, requiredPermissions, requireAllPermissions)) return false;
|
|
6404
6469
|
return true;
|
|
6405
6470
|
};
|
|
6406
|
-
const [state, setState] =
|
|
6471
|
+
const [state, setState] = React30.useState(
|
|
6407
6472
|
() => !passesSync() ? "denied" : canAccess ? "checking" : "granted"
|
|
6408
6473
|
);
|
|
6409
|
-
|
|
6474
|
+
React30.useEffect(() => {
|
|
6410
6475
|
let cancelled = false;
|
|
6411
6476
|
const { canAccess: check, onGranted: granted, onDeny: deny } = cbs.current;
|
|
6412
6477
|
const finish = (ok) => {
|
|
@@ -6567,10 +6632,10 @@ function ThemeProvider({
|
|
|
6567
6632
|
className = "",
|
|
6568
6633
|
style
|
|
6569
6634
|
}) {
|
|
6570
|
-
const id =
|
|
6635
|
+
const id = React30__default.default.useId().replace(/:/g, "");
|
|
6571
6636
|
const scopeClass = `geo-th-${id}`;
|
|
6572
|
-
const divRef =
|
|
6573
|
-
|
|
6637
|
+
const divRef = React30.useRef(null);
|
|
6638
|
+
React30.useEffect(() => {
|
|
6574
6639
|
const el = divRef.current;
|
|
6575
6640
|
if (!el) return;
|
|
6576
6641
|
if (colorScheme === "auto") return;
|
|
@@ -6585,8 +6650,8 @@ function ThemeProvider({
|
|
|
6585
6650
|
}
|
|
6586
6651
|
el.classList.toggle("dark", colorScheme === "dark");
|
|
6587
6652
|
}, [colorScheme]);
|
|
6588
|
-
const lightVars =
|
|
6589
|
-
const darkVarStr =
|
|
6653
|
+
const lightVars = React30.useMemo(() => toCssVars(theme), [theme]);
|
|
6654
|
+
const darkVarStr = React30.useMemo(() => {
|
|
6590
6655
|
if (!darkTheme) return "";
|
|
6591
6656
|
const dvars = toCssVars(darkTheme);
|
|
6592
6657
|
if (!Object.keys(dvars).length) return "";
|
|
@@ -6628,7 +6693,7 @@ function NumberInput({
|
|
|
6628
6693
|
readOnly = false,
|
|
6629
6694
|
precision
|
|
6630
6695
|
}) {
|
|
6631
|
-
const errorId =
|
|
6696
|
+
const errorId = React30.useId();
|
|
6632
6697
|
const hasError = errorMessage != null;
|
|
6633
6698
|
const inferredPrecision = precision ?? (Number.isInteger(step) ? 0 : String(step).split(".")[1]?.length ?? 0);
|
|
6634
6699
|
const round = (n) => {
|
|
@@ -6759,8 +6824,8 @@ function Password({
|
|
|
6759
6824
|
showIcon,
|
|
6760
6825
|
hideIcon
|
|
6761
6826
|
}) {
|
|
6762
|
-
const [visible, setVisible] =
|
|
6763
|
-
const errorId =
|
|
6827
|
+
const [visible, setVisible] = React30.useState(false);
|
|
6828
|
+
const errorId = React30.useId();
|
|
6764
6829
|
const hasError = errorMessage != null;
|
|
6765
6830
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6766
6831
|
Field,
|
|
@@ -6860,7 +6925,7 @@ function PasswordStrength({
|
|
|
6860
6925
|
className = "",
|
|
6861
6926
|
style
|
|
6862
6927
|
}) {
|
|
6863
|
-
const { score, label } =
|
|
6928
|
+
const { score, label } = React30.useMemo(() => scorer(value), [scorer, value]);
|
|
6864
6929
|
const showMatch = confirmValue != null && (value.length > 0 || confirmValue.length > 0);
|
|
6865
6930
|
const matches = value.length > 0 && value === confirmValue;
|
|
6866
6931
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx("flex flex-col gap-2", className), style, "aria-live": "polite", children: [
|
|
@@ -6919,8 +6984,8 @@ function RadioTile({
|
|
|
6919
6984
|
errorMessage,
|
|
6920
6985
|
className
|
|
6921
6986
|
}) {
|
|
6922
|
-
const groupId =
|
|
6923
|
-
const errorId =
|
|
6987
|
+
const groupId = React30.useId();
|
|
6988
|
+
const errorId = React30.useId();
|
|
6924
6989
|
const hasError = errorMessage != null;
|
|
6925
6990
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
6926
6991
|
Field,
|
|
@@ -6995,7 +7060,7 @@ function Checkbox({
|
|
|
6995
7060
|
}) {
|
|
6996
7061
|
const isChecked = checked ?? value ?? false;
|
|
6997
7062
|
const labelFirst = labelPosition === "left";
|
|
6998
|
-
const errorId =
|
|
7063
|
+
const errorId = React30.useId();
|
|
6999
7064
|
const hasError = errorMessage != null;
|
|
7000
7065
|
const box = /* @__PURE__ */ jsxRuntime.jsx(
|
|
7001
7066
|
CheckboxPrimitive__namespace.Root,
|
|
@@ -7103,8 +7168,8 @@ function RadioGroup({
|
|
|
7103
7168
|
className,
|
|
7104
7169
|
errorMessage
|
|
7105
7170
|
}) {
|
|
7106
|
-
const errorId =
|
|
7107
|
-
const groupId =
|
|
7171
|
+
const errorId = React30.useId();
|
|
7172
|
+
const groupId = React30.useId();
|
|
7108
7173
|
const hasError = errorMessage != null;
|
|
7109
7174
|
const labelFirst = labelPosition === "left";
|
|
7110
7175
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -7204,11 +7269,11 @@ function Switch({
|
|
|
7204
7269
|
disabled,
|
|
7205
7270
|
errorMessage
|
|
7206
7271
|
}) {
|
|
7207
|
-
const id =
|
|
7208
|
-
const errorId =
|
|
7272
|
+
const id = React30.useId();
|
|
7273
|
+
const errorId = React30.useId();
|
|
7209
7274
|
const hasError = errorMessage != null;
|
|
7210
7275
|
const isControlled = checked !== void 0;
|
|
7211
|
-
const [internal, setInternal] =
|
|
7276
|
+
const [internal, setInternal] = React30.useState(defaultChecked);
|
|
7212
7277
|
const isOn = isControlled ? checked : internal;
|
|
7213
7278
|
const handle = (c) => {
|
|
7214
7279
|
if (!isControlled) setInternal(c);
|
|
@@ -7284,11 +7349,11 @@ function MultiTagRow({
|
|
|
7284
7349
|
labelFor,
|
|
7285
7350
|
onRemove
|
|
7286
7351
|
}) {
|
|
7287
|
-
const wrapRef =
|
|
7288
|
-
const measureRef =
|
|
7289
|
-
const [visibleCount, setVisibleCount] =
|
|
7352
|
+
const wrapRef = React30.useRef(null);
|
|
7353
|
+
const measureRef = React30.useRef(null);
|
|
7354
|
+
const [visibleCount, setVisibleCount] = React30.useState(values.length);
|
|
7290
7355
|
const key = values.map(String).join("|");
|
|
7291
|
-
|
|
7356
|
+
React30.useLayoutEffect(() => {
|
|
7292
7357
|
const wrap = wrapRef.current;
|
|
7293
7358
|
const measure = measureRef.current;
|
|
7294
7359
|
if (!wrap || !measure) return;
|
|
@@ -7382,16 +7447,16 @@ function Dropdown({
|
|
|
7382
7447
|
size = "md",
|
|
7383
7448
|
className = ""
|
|
7384
7449
|
}) {
|
|
7385
|
-
const [open, setOpen] =
|
|
7386
|
-
const [selectedItems, setSelectedItems] =
|
|
7387
|
-
const [searchTerm, setSearchTerm] =
|
|
7388
|
-
const [innerItems, setInnerItems] =
|
|
7389
|
-
const errorId =
|
|
7450
|
+
const [open, setOpen] = React30.useState(false);
|
|
7451
|
+
const [selectedItems, setSelectedItems] = React30.useState([]);
|
|
7452
|
+
const [searchTerm, setSearchTerm] = React30.useState("");
|
|
7453
|
+
const [innerItems, setInnerItems] = React30.useState([]);
|
|
7454
|
+
const errorId = React30.useId();
|
|
7390
7455
|
const hasError = errorMessage != null;
|
|
7391
|
-
|
|
7456
|
+
React30.useEffect(() => {
|
|
7392
7457
|
setInnerItems(items);
|
|
7393
7458
|
}, [items]);
|
|
7394
|
-
|
|
7459
|
+
React30.useEffect(() => {
|
|
7395
7460
|
if (isMultiselect && Array.isArray(value)) {
|
|
7396
7461
|
setSelectedItems(value);
|
|
7397
7462
|
}
|
|
@@ -7583,19 +7648,19 @@ function AutoComplete({
|
|
|
7583
7648
|
required,
|
|
7584
7649
|
htmlFor
|
|
7585
7650
|
}) {
|
|
7586
|
-
const errorId =
|
|
7651
|
+
const errorId = React30.useId();
|
|
7587
7652
|
const hasError = errorMessage != null;
|
|
7588
|
-
const [term, setTerm] =
|
|
7589
|
-
const [open, setOpen] =
|
|
7590
|
-
const [asyncItems, setAsyncItems] =
|
|
7591
|
-
const [loading, setLoading] =
|
|
7653
|
+
const [term, setTerm] = React30.useState("");
|
|
7654
|
+
const [open, setOpen] = React30.useState(false);
|
|
7655
|
+
const [asyncItems, setAsyncItems] = React30.useState([]);
|
|
7656
|
+
const [loading, setLoading] = React30.useState(false);
|
|
7592
7657
|
const isAsync = typeof onSearch === "function";
|
|
7593
|
-
const debounceRef =
|
|
7594
|
-
const requestIdRef =
|
|
7658
|
+
const debounceRef = React30.useRef(null);
|
|
7659
|
+
const requestIdRef = React30.useRef(0);
|
|
7595
7660
|
const staticFiltered = isAsync || !items ? [] : term.trim() ? items.filter(
|
|
7596
7661
|
({ key, label: label2 }) => label2.toLowerCase().includes(term.toLowerCase()) || key.toLowerCase().includes(term.toLowerCase())
|
|
7597
7662
|
) : [];
|
|
7598
|
-
|
|
7663
|
+
React30.useEffect(() => {
|
|
7599
7664
|
if (!isAsync) return;
|
|
7600
7665
|
if (debounceRef.current) clearTimeout(debounceRef.current);
|
|
7601
7666
|
if (!term.trim()) {
|
|
@@ -7751,15 +7816,15 @@ function TreeSelect({
|
|
|
7751
7816
|
defaultExpandedKeys = [],
|
|
7752
7817
|
size = "md"
|
|
7753
7818
|
}) {
|
|
7754
|
-
const errorId =
|
|
7819
|
+
const errorId = React30.useId();
|
|
7755
7820
|
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
|
-
|
|
7821
|
+
const [open, setOpen] = React30.useState(false);
|
|
7822
|
+
const [expanded, setExpanded] = React30.useState(() => new Set(defaultExpandedKeys));
|
|
7823
|
+
const [activeIndex, setActiveIndex] = React30.useState(0);
|
|
7824
|
+
const listRef = React30.useRef(null);
|
|
7825
|
+
const visible = React30.useMemo(() => flattenVisible(items, expanded), [items, expanded]);
|
|
7826
|
+
const didSyncOnOpenRef = React30.useRef(false);
|
|
7827
|
+
React30.useEffect(() => {
|
|
7763
7828
|
if (!open) {
|
|
7764
7829
|
didSyncOnOpenRef.current = false;
|
|
7765
7830
|
return;
|
|
@@ -7769,7 +7834,7 @@ function TreeSelect({
|
|
|
7769
7834
|
setActiveIndex(selectedIdx >= 0 ? selectedIdx : 0);
|
|
7770
7835
|
didSyncOnOpenRef.current = true;
|
|
7771
7836
|
}, [open, value]);
|
|
7772
|
-
const selectedNode =
|
|
7837
|
+
const selectedNode = React30.useMemo(
|
|
7773
7838
|
() => value != null ? findNodeByKey(items, value) : null,
|
|
7774
7839
|
[items, value]
|
|
7775
7840
|
);
|
|
@@ -8000,11 +8065,11 @@ function FileInput({
|
|
|
8000
8065
|
required,
|
|
8001
8066
|
icon
|
|
8002
8067
|
}) {
|
|
8003
|
-
const inputRef =
|
|
8004
|
-
const errorId =
|
|
8005
|
-
const [files, setFiles] =
|
|
8006
|
-
const [dragging, setDragging] =
|
|
8007
|
-
const [sizeError, setSizeError] =
|
|
8068
|
+
const inputRef = React30.useRef(null);
|
|
8069
|
+
const errorId = React30.useId();
|
|
8070
|
+
const [files, setFiles] = React30.useState([]);
|
|
8071
|
+
const [dragging, setDragging] = React30.useState(false);
|
|
8072
|
+
const [sizeError, setSizeError] = React30.useState(null);
|
|
8008
8073
|
const effectiveError = errorMessage ?? sizeError ?? void 0;
|
|
8009
8074
|
const openPicker = () => {
|
|
8010
8075
|
if (!disabled) inputRef.current?.click();
|
|
@@ -8195,30 +8260,30 @@ function DatePicker({
|
|
|
8195
8260
|
size = "md",
|
|
8196
8261
|
className = ""
|
|
8197
8262
|
}) {
|
|
8198
|
-
const errorId =
|
|
8263
|
+
const errorId = React30.useId();
|
|
8199
8264
|
const hasError = errorMessage != null;
|
|
8200
|
-
const [open, setOpen] =
|
|
8201
|
-
const [viewMonth, setViewMonth] =
|
|
8202
|
-
const [focusDate, setFocusDate] =
|
|
8203
|
-
const [view, setView] =
|
|
8204
|
-
const gridRef =
|
|
8205
|
-
|
|
8265
|
+
const [open, setOpen] = React30.useState(false);
|
|
8266
|
+
const [viewMonth, setViewMonth] = React30.useState(() => startOfMonth2(value ?? /* @__PURE__ */ new Date()));
|
|
8267
|
+
const [focusDate, setFocusDate] = React30.useState(() => value ?? /* @__PURE__ */ new Date());
|
|
8268
|
+
const [view, setView] = React30.useState("days");
|
|
8269
|
+
const gridRef = React30.useRef(null);
|
|
8270
|
+
React30.useEffect(() => {
|
|
8206
8271
|
if (!open) return;
|
|
8207
8272
|
const target = value ?? /* @__PURE__ */ new Date();
|
|
8208
8273
|
setViewMonth(startOfMonth2(target));
|
|
8209
8274
|
setFocusDate(target);
|
|
8210
8275
|
setView("days");
|
|
8211
8276
|
}, [open, value]);
|
|
8212
|
-
|
|
8277
|
+
React30.useEffect(() => {
|
|
8213
8278
|
if (!open) return;
|
|
8214
8279
|
const cell = gridRef.current?.querySelector(`[data-day="${defaultFormat3(focusDate)}"]`);
|
|
8215
8280
|
cell?.focus();
|
|
8216
8281
|
}, [open, focusDate]);
|
|
8217
|
-
const weekdays =
|
|
8282
|
+
const weekdays = React30.useMemo(() => {
|
|
8218
8283
|
const ordered = WEEKDAY_SHORT.slice(weekStartsOn).concat(WEEKDAY_SHORT.slice(0, weekStartsOn));
|
|
8219
8284
|
return ordered;
|
|
8220
8285
|
}, [weekStartsOn]);
|
|
8221
|
-
const grid =
|
|
8286
|
+
const grid = React30.useMemo(() => buildGrid(viewMonth, weekStartsOn), [viewMonth, weekStartsOn]);
|
|
8222
8287
|
const isDisabled = (d) => {
|
|
8223
8288
|
if (min && d < min) return true;
|
|
8224
8289
|
if (max && d > max) return true;
|
|
@@ -8508,10 +8573,10 @@ function TextArea({
|
|
|
8508
8573
|
style,
|
|
8509
8574
|
inputStyle
|
|
8510
8575
|
}) {
|
|
8511
|
-
const errorId =
|
|
8576
|
+
const errorId = React30.useId();
|
|
8512
8577
|
const hasError = errorMessage != null;
|
|
8513
|
-
const ref =
|
|
8514
|
-
|
|
8578
|
+
const ref = React30.useRef(null);
|
|
8579
|
+
React30.useLayoutEffect(() => {
|
|
8515
8580
|
if (!autoGrow) return;
|
|
8516
8581
|
const el = ref.current;
|
|
8517
8582
|
if (!el) return;
|
|
@@ -8583,14 +8648,14 @@ function Slider({
|
|
|
8583
8648
|
name,
|
|
8584
8649
|
htmlFor
|
|
8585
8650
|
}) {
|
|
8586
|
-
const errorId =
|
|
8651
|
+
const errorId = React30.useId();
|
|
8587
8652
|
const hasError = errorMessage != null;
|
|
8588
8653
|
const isRange = Array.isArray(value ?? defaultValue);
|
|
8589
|
-
const [internal, setInternal] =
|
|
8654
|
+
const [internal, setInternal] = React30.useState(
|
|
8590
8655
|
() => toArray(value) ?? toArray(defaultValue) ?? [min]
|
|
8591
8656
|
);
|
|
8592
8657
|
const current = toArray(value) ?? internal;
|
|
8593
|
-
const [dragging, setDragging] =
|
|
8658
|
+
const [dragging, setDragging] = React30.useState(false);
|
|
8594
8659
|
const emit = (arr) => {
|
|
8595
8660
|
setInternal(arr);
|
|
8596
8661
|
const next = isRange ? [arr[0], arr[1]] : arr[0];
|
|
@@ -8685,11 +8750,11 @@ function TagsInput({
|
|
|
8685
8750
|
validate,
|
|
8686
8751
|
separators = ["Enter", ","]
|
|
8687
8752
|
}) {
|
|
8688
|
-
const errorId =
|
|
8689
|
-
const inputRef =
|
|
8690
|
-
const [internal, setInternal] =
|
|
8691
|
-
const [draft, setDraft] =
|
|
8692
|
-
const [localError, setLocalError] =
|
|
8753
|
+
const errorId = React30.useId();
|
|
8754
|
+
const inputRef = React30.useRef(null);
|
|
8755
|
+
const [internal, setInternal] = React30.useState(defaultValue ?? []);
|
|
8756
|
+
const [draft, setDraft] = React30.useState("");
|
|
8757
|
+
const [localError, setLocalError] = React30.useState(null);
|
|
8693
8758
|
const tags = value ?? internal;
|
|
8694
8759
|
const hasError = errorMessage != null || localError != null;
|
|
8695
8760
|
const errorText = errorMessage ?? localError ?? void 0;
|
|
@@ -8820,9 +8885,9 @@ function OtpInput({
|
|
|
8820
8885
|
className,
|
|
8821
8886
|
groupAfter
|
|
8822
8887
|
}) {
|
|
8823
|
-
const errorId =
|
|
8888
|
+
const errorId = React30.useId();
|
|
8824
8889
|
const hasError = errorMessage != null;
|
|
8825
|
-
const refs =
|
|
8890
|
+
const refs = React30.useRef([]);
|
|
8826
8891
|
const chars = Array.from({ length }, (_, i) => value[i] ?? "");
|
|
8827
8892
|
const pattern = mode === "numeric" ? /[0-9]/ : /[a-zA-Z0-9]/;
|
|
8828
8893
|
const emit = (next) => {
|
|
@@ -8871,7 +8936,7 @@ function OtpInput({
|
|
|
8871
8936
|
emit(valid.join(""));
|
|
8872
8937
|
focusBox(valid.length);
|
|
8873
8938
|
};
|
|
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(
|
|
8939
|
+
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
8940
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
8876
8941
|
"input",
|
|
8877
8942
|
{
|
|
@@ -8929,9 +8994,9 @@ function Rating({
|
|
|
8929
8994
|
className,
|
|
8930
8995
|
required
|
|
8931
8996
|
}) {
|
|
8932
|
-
const errorId =
|
|
8933
|
-
const [internal, setInternal] =
|
|
8934
|
-
const [hover, setHover] =
|
|
8997
|
+
const errorId = React30.useId();
|
|
8998
|
+
const [internal, setInternal] = React30.useState(defaultValue);
|
|
8999
|
+
const [hover, setHover] = React30.useState(null);
|
|
8935
9000
|
const current = value ?? internal;
|
|
8936
9001
|
const display2 = hover ?? current;
|
|
8937
9002
|
const interactive = !readOnly && !disabled;
|
|
@@ -9054,9 +9119,9 @@ function TimePicker({
|
|
|
9054
9119
|
required,
|
|
9055
9120
|
style
|
|
9056
9121
|
}) {
|
|
9057
|
-
const errorId =
|
|
9122
|
+
const errorId = React30.useId();
|
|
9058
9123
|
const hasError = errorMessage != null;
|
|
9059
|
-
const [open, setOpen] =
|
|
9124
|
+
const [open, setOpen] = React30.useState(false);
|
|
9060
9125
|
const parsed = parse(value) ?? { h: 0, m: 0, s: 0 };
|
|
9061
9126
|
const update = (next) => {
|
|
9062
9127
|
const merged = { ...parsed, ...next };
|
|
@@ -9180,13 +9245,13 @@ function DateRangePicker({
|
|
|
9180
9245
|
required,
|
|
9181
9246
|
style
|
|
9182
9247
|
}) {
|
|
9183
|
-
const errorId =
|
|
9248
|
+
const errorId = React30.useId();
|
|
9184
9249
|
const hasError = errorMessage != null;
|
|
9185
|
-
const [open, setOpen] =
|
|
9186
|
-
const [leftMonth, setLeftMonth] =
|
|
9187
|
-
const [pendingStart, setPendingStart] =
|
|
9188
|
-
const [hoverDate, setHoverDate] =
|
|
9189
|
-
const weekdays =
|
|
9250
|
+
const [open, setOpen] = React30.useState(false);
|
|
9251
|
+
const [leftMonth, setLeftMonth] = React30.useState(() => startOfMonth3(value.start ?? /* @__PURE__ */ new Date()));
|
|
9252
|
+
const [pendingStart, setPendingStart] = React30.useState(null);
|
|
9253
|
+
const [hoverDate, setHoverDate] = React30.useState(null);
|
|
9254
|
+
const weekdays = React30.useMemo(
|
|
9190
9255
|
() => WEEKDAY.slice(weekStartsOn).concat(WEEKDAY.slice(0, weekStartsOn)),
|
|
9191
9256
|
[weekStartsOn]
|
|
9192
9257
|
);
|
|
@@ -9362,10 +9427,10 @@ function ColorPicker({
|
|
|
9362
9427
|
required,
|
|
9363
9428
|
placeholder = "Pick a colour\u2026"
|
|
9364
9429
|
}) {
|
|
9365
|
-
const errorId =
|
|
9430
|
+
const errorId = React30.useId();
|
|
9366
9431
|
const hasError = errorMessage != null;
|
|
9367
|
-
const [open, setOpen] =
|
|
9368
|
-
const [draft, setDraft] =
|
|
9432
|
+
const [open, setOpen] = React30.useState(false);
|
|
9433
|
+
const [draft, setDraft] = React30.useState(value);
|
|
9369
9434
|
const valid = HEX_RE.test(value);
|
|
9370
9435
|
const pick = (hex) => {
|
|
9371
9436
|
onChange?.(hex);
|
|
@@ -9452,7 +9517,7 @@ function ColorPicker({
|
|
|
9452
9517
|
}
|
|
9453
9518
|
var CUSTOM_EVENT = "oxy-local-storage";
|
|
9454
9519
|
function useLocalStorage(key, initialValue) {
|
|
9455
|
-
const read =
|
|
9520
|
+
const read = React30.useCallback(() => {
|
|
9456
9521
|
if (typeof window === "undefined") return initialValue;
|
|
9457
9522
|
try {
|
|
9458
9523
|
const item = window.localStorage.getItem(key);
|
|
@@ -9461,8 +9526,8 @@ function useLocalStorage(key, initialValue) {
|
|
|
9461
9526
|
return initialValue;
|
|
9462
9527
|
}
|
|
9463
9528
|
}, [key]);
|
|
9464
|
-
const [stored, setStored] =
|
|
9465
|
-
const setValue =
|
|
9529
|
+
const [stored, setStored] = React30.useState(read);
|
|
9530
|
+
const setValue = React30.useCallback((value) => {
|
|
9466
9531
|
setStored((prev) => {
|
|
9467
9532
|
const next = value instanceof Function ? value(prev) : value;
|
|
9468
9533
|
try {
|
|
@@ -9475,7 +9540,7 @@ function useLocalStorage(key, initialValue) {
|
|
|
9475
9540
|
return next;
|
|
9476
9541
|
});
|
|
9477
9542
|
}, [key]);
|
|
9478
|
-
const remove =
|
|
9543
|
+
const remove = React30.useCallback(() => {
|
|
9479
9544
|
try {
|
|
9480
9545
|
if (typeof window !== "undefined") {
|
|
9481
9546
|
window.localStorage.removeItem(key);
|
|
@@ -9485,10 +9550,10 @@ function useLocalStorage(key, initialValue) {
|
|
|
9485
9550
|
}
|
|
9486
9551
|
setStored(initialValue);
|
|
9487
9552
|
}, [key]);
|
|
9488
|
-
|
|
9553
|
+
React30.useEffect(() => {
|
|
9489
9554
|
setStored(read());
|
|
9490
9555
|
}, [key, read]);
|
|
9491
|
-
|
|
9556
|
+
React30.useEffect(() => {
|
|
9492
9557
|
if (typeof window === "undefined") return;
|
|
9493
9558
|
const onStorage = (e) => {
|
|
9494
9559
|
if (e.key === null || e.key === key) setStored(read());
|
|
@@ -9507,8 +9572,8 @@ function useLocalStorage(key, initialValue) {
|
|
|
9507
9572
|
}
|
|
9508
9573
|
function useMediaQuery(query) {
|
|
9509
9574
|
const get = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
|
|
9510
|
-
const [matches, setMatches] =
|
|
9511
|
-
|
|
9575
|
+
const [matches, setMatches] = React30.useState(get);
|
|
9576
|
+
React30.useEffect(() => {
|
|
9512
9577
|
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
|
|
9513
9578
|
const mql = window.matchMedia(query);
|
|
9514
9579
|
const onChange = () => setMatches(mql.matches);
|
|
@@ -9539,8 +9604,8 @@ function decodeSegment(seg) {
|
|
|
9539
9604
|
}
|
|
9540
9605
|
}
|
|
9541
9606
|
function useJwt(token) {
|
|
9542
|
-
const [, tick] =
|
|
9543
|
-
const decoded =
|
|
9607
|
+
const [, tick] = React30.useState(0);
|
|
9608
|
+
const decoded = React30.useMemo(() => {
|
|
9544
9609
|
if (!token) return { payload: null, header: null, exp: null };
|
|
9545
9610
|
const [h, p] = token.split(".");
|
|
9546
9611
|
const header = decodeSegment(h);
|
|
@@ -9548,7 +9613,7 @@ function useJwt(token) {
|
|
|
9548
9613
|
const exp = payload && typeof payload.exp === "number" ? payload.exp : null;
|
|
9549
9614
|
return { payload, header, exp };
|
|
9550
9615
|
}, [token]);
|
|
9551
|
-
|
|
9616
|
+
React30.useEffect(() => {
|
|
9552
9617
|
if (decoded.exp == null) return;
|
|
9553
9618
|
const ms = decoded.exp * 1e3 - Date.now();
|
|
9554
9619
|
if (ms <= 0) return;
|
|
@@ -9722,13 +9787,13 @@ function SlideShow({
|
|
|
9722
9787
|
style
|
|
9723
9788
|
}) {
|
|
9724
9789
|
const reduced = framerMotion.useReducedMotion();
|
|
9725
|
-
const [index, setIndex] =
|
|
9726
|
-
const [paused, setPaused] =
|
|
9790
|
+
const [index, setIndex] = React30.useState(0);
|
|
9791
|
+
const [paused, setPaused] = React30.useState(false);
|
|
9727
9792
|
const count = slides.length;
|
|
9728
9793
|
const idx = count ? (index % count + count) % count : 0;
|
|
9729
|
-
const go =
|
|
9730
|
-
const timer =
|
|
9731
|
-
|
|
9794
|
+
const go = React30.useCallback((d) => setIndex((i) => i + d), []);
|
|
9795
|
+
const timer = React30.useRef(null);
|
|
9796
|
+
React30.useEffect(() => {
|
|
9732
9797
|
if (!autoPlay || paused || count <= 1) return;
|
|
9733
9798
|
timer.current = setInterval(() => setIndex((i) => i + 1), interval);
|
|
9734
9799
|
return () => {
|
|
@@ -9804,7 +9869,7 @@ function Video({
|
|
|
9804
9869
|
className = "",
|
|
9805
9870
|
style
|
|
9806
9871
|
}) {
|
|
9807
|
-
const [playing, setPlaying] =
|
|
9872
|
+
const [playing, setPlaying] = React30.useState(autoPlay);
|
|
9808
9873
|
const frame = cx("relative w-full overflow-hidden bg-backdrop", framed ? "rounded-2xl border border-border shadow-sm" : "", className);
|
|
9809
9874
|
const ratio = aspect.replace("/", " / ");
|
|
9810
9875
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: frame, style: { aspectRatio: ratio, ...style }, children: embedUrl ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -9859,7 +9924,7 @@ function Parallax({
|
|
|
9859
9924
|
style
|
|
9860
9925
|
}) {
|
|
9861
9926
|
const reduced = framerMotion.useReducedMotion();
|
|
9862
|
-
const ref =
|
|
9927
|
+
const ref = React30.useRef(null);
|
|
9863
9928
|
const { scrollYProgress } = framerMotion.useScroll({ target: ref, offset: ["start end", "end start"] });
|
|
9864
9929
|
const shift = Math.max(0, Math.min(1, speed)) * 100;
|
|
9865
9930
|
const y = framerMotion.useTransform(scrollYProgress, [0, 1], reduced ? ["0%", "0%"] : [`-${shift / 2}%`, `${shift / 2}%`]);
|
|
@@ -9927,7 +9992,7 @@ function Blog({
|
|
|
9927
9992
|
post.tag != null && !post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { tone: "accent", variant: "soft", size: "sm", children: post.tag }) }),
|
|
9928
9993
|
/* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold leading-snug text-foreground transition-colors group-hover:text-accent", children: post.title }),
|
|
9929
9994
|
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(
|
|
9995
|
+
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
9996
|
j > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }),
|
|
9932
9997
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: m })
|
|
9933
9998
|
] }, j)) })
|
|
@@ -10056,8 +10121,8 @@ function LeadCapture({
|
|
|
10056
10121
|
className = "",
|
|
10057
10122
|
style
|
|
10058
10123
|
}) {
|
|
10059
|
-
const [email, setEmail] =
|
|
10060
|
-
const [done, setDone] =
|
|
10124
|
+
const [email, setEmail] = React30.useState("");
|
|
10125
|
+
const [done, setDone] = React30.useState(false);
|
|
10061
10126
|
const submit = (e) => {
|
|
10062
10127
|
e.preventDefault();
|
|
10063
10128
|
const value = email.trim();
|