@luxfi/ui 7.2.0 → 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/bank.d.cts +2 -2
- package/dist/bank.d.ts +2 -2
- package/dist/index.cjs +295 -281
- package/dist/index.d.cts +4 -3
- package/dist/index.d.ts +4 -3
- package/dist/index.js +295 -281
- package/dist/provider.cjs +40 -52
- package/dist/provider.d.cts +9 -4
- package/dist/provider.d.ts +9 -4
- package/dist/provider.js +20 -35
- package/package.json +6 -6
- package/src/index.ts +1 -2
- package/src/provider.tsx +29 -6
package/dist/index.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { styled, View, Text, createGui } from '@hanzogui/core';
|
|
3
|
+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
4
|
+
import * as React30 from 'react';
|
|
5
|
+
import React30__default from 'react';
|
|
6
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
7
|
import { clsx } from 'clsx';
|
|
3
8
|
import { twMerge } from 'tailwind-merge';
|
|
4
9
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
5
|
-
import * as React29 from 'react';
|
|
6
|
-
import React29__default from 'react';
|
|
7
|
-
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
|
-
import { styled, View, Text } from '@hanzogui/core';
|
|
9
10
|
import * as RadixAvatar from '@radix-ui/react-avatar';
|
|
10
11
|
import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
|
|
11
12
|
import { useClickAway, useDebounce } from '@uidotdev/usehooks';
|
|
@@ -26,12 +27,28 @@ import * as RadixSwitch from '@radix-ui/react-switch';
|
|
|
26
27
|
import * as RadixTabs from '@radix-ui/react-tabs';
|
|
27
28
|
import { toast, Toaster as Toaster$1 } from 'sonner';
|
|
28
29
|
|
|
29
|
-
// src/
|
|
30
|
+
// src/provider.tsx
|
|
31
|
+
var _guiInitialized = false;
|
|
32
|
+
function ensureGui() {
|
|
33
|
+
if (_guiInitialized) return;
|
|
34
|
+
if (typeof window === "undefined") return;
|
|
35
|
+
createGui({ settings: { autocompleteSpecificTokens: "except-special" } });
|
|
36
|
+
_guiInitialized = true;
|
|
37
|
+
}
|
|
38
|
+
var defaultQueryClient = new QueryClient({
|
|
39
|
+
defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
|
|
40
|
+
});
|
|
41
|
+
var AppProvider = ({ children, queryClient }) => {
|
|
42
|
+
React30__default.useEffect(() => {
|
|
43
|
+
ensureGui();
|
|
44
|
+
}, []);
|
|
45
|
+
return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children });
|
|
46
|
+
};
|
|
30
47
|
function cn(...inputs) {
|
|
31
48
|
return twMerge(clsx(inputs));
|
|
32
49
|
}
|
|
33
50
|
var IndicatorIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
34
|
-
var AccordionRoot =
|
|
51
|
+
var AccordionRoot = React30.forwardRef(
|
|
35
52
|
function AccordionRoot2(props, ref) {
|
|
36
53
|
const {
|
|
37
54
|
multiple: _multiple,
|
|
@@ -50,7 +67,7 @@ var AccordionRoot = React29.forwardRef(
|
|
|
50
67
|
borderRadius: _borderRadius,
|
|
51
68
|
...rest
|
|
52
69
|
} = props;
|
|
53
|
-
const handleValueChange =
|
|
70
|
+
const handleValueChange = React30.useCallback(
|
|
54
71
|
(next) => {
|
|
55
72
|
onValueChange?.({ value: next });
|
|
56
73
|
},
|
|
@@ -78,7 +95,7 @@ var AccordionRoot = React29.forwardRef(
|
|
|
78
95
|
);
|
|
79
96
|
}
|
|
80
97
|
);
|
|
81
|
-
var AccordionItem =
|
|
98
|
+
var AccordionItem = React30.forwardRef(
|
|
82
99
|
function AccordionItem2(props, ref) {
|
|
83
100
|
const { className, as: _as, _first, _last, display: _display, ...rest } = props;
|
|
84
101
|
return /* @__PURE__ */ jsx(
|
|
@@ -94,7 +111,7 @@ var AccordionItem = React29.forwardRef(
|
|
|
94
111
|
);
|
|
95
112
|
}
|
|
96
113
|
);
|
|
97
|
-
var AccordionItemTrigger =
|
|
114
|
+
var AccordionItemTrigger = React30.forwardRef(function AccordionItemTrigger2(props, ref) {
|
|
98
115
|
const {
|
|
99
116
|
children,
|
|
100
117
|
indicatorPlacement: indicatorPlacementProp,
|
|
@@ -159,7 +176,7 @@ var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(pro
|
|
|
159
176
|
}
|
|
160
177
|
) }) });
|
|
161
178
|
});
|
|
162
|
-
var AccordionItemContent =
|
|
179
|
+
var AccordionItemContent = React30.forwardRef(function AccordionItemContent2(props, ref) {
|
|
163
180
|
const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
|
|
164
181
|
return /* @__PURE__ */ jsx(
|
|
165
182
|
AccordionPrimitive.Content,
|
|
@@ -177,11 +194,11 @@ var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(pro
|
|
|
177
194
|
);
|
|
178
195
|
});
|
|
179
196
|
function useAccordion(items) {
|
|
180
|
-
const [value, setValue] =
|
|
181
|
-
const onValueChange =
|
|
197
|
+
const [value, setValue] = React30.useState([]);
|
|
198
|
+
const onValueChange = React30.useCallback(({ value: value2 }) => {
|
|
182
199
|
setValue(value2);
|
|
183
200
|
}, []);
|
|
184
|
-
const scrollToItemFromUrl =
|
|
201
|
+
const scrollToItemFromUrl = React30.useCallback(() => {
|
|
185
202
|
const hash = window.location.hash.replace("#", "");
|
|
186
203
|
if (!hash) {
|
|
187
204
|
return;
|
|
@@ -195,7 +212,7 @@ function useAccordion(items) {
|
|
|
195
212
|
setValue([itemToScroll.id]);
|
|
196
213
|
}
|
|
197
214
|
}, [items]);
|
|
198
|
-
return
|
|
215
|
+
return React30.useMemo(() => {
|
|
199
216
|
return {
|
|
200
217
|
value,
|
|
201
218
|
onValueChange,
|
|
@@ -238,7 +255,7 @@ var CLOSE_BUTTON_CLASSES = [
|
|
|
238
255
|
"hover:text-[var(--hover-color,currentColor)]",
|
|
239
256
|
"disabled:opacity-40"
|
|
240
257
|
].join(" ");
|
|
241
|
-
var CloseButton =
|
|
258
|
+
var CloseButton = React30.forwardRef(function CloseButton2(props, ref) {
|
|
242
259
|
const { variant: _variant, size: _size, className, children, ...rest } = props;
|
|
243
260
|
return /* @__PURE__ */ jsx(
|
|
244
261
|
CloseButtonFrame,
|
|
@@ -385,7 +402,7 @@ var SKELETON_CLASSES = [
|
|
|
385
402
|
"bg-[length:200%_100%]"
|
|
386
403
|
].join(" ");
|
|
387
404
|
var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
|
|
388
|
-
var Skeleton =
|
|
405
|
+
var Skeleton = React30.forwardRef(
|
|
389
406
|
function Skeleton2(props, ref) {
|
|
390
407
|
const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
|
|
391
408
|
const shimStyle = shimToStyle(props);
|
|
@@ -394,10 +411,10 @@ var Skeleton = React29.forwardRef(
|
|
|
394
411
|
const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
|
|
395
412
|
const htmlRest = stripShims(allRest);
|
|
396
413
|
if (!loading) {
|
|
397
|
-
if (asChild &&
|
|
414
|
+
if (asChild && React30.isValidElement(children)) return children;
|
|
398
415
|
return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
|
|
399
416
|
}
|
|
400
|
-
if (asChild &&
|
|
417
|
+
if (asChild && React30.isValidElement(children)) {
|
|
401
418
|
return /* @__PURE__ */ jsx(
|
|
402
419
|
Component,
|
|
403
420
|
{
|
|
@@ -423,7 +440,7 @@ var Skeleton = React29.forwardRef(
|
|
|
423
440
|
);
|
|
424
441
|
}
|
|
425
442
|
);
|
|
426
|
-
var SkeletonCircle =
|
|
443
|
+
var SkeletonCircle = React30.forwardRef(
|
|
427
444
|
function SkeletonCircle2(props, ref) {
|
|
428
445
|
const { size = 40, loading = true, className, ...rest } = props;
|
|
429
446
|
const dimension = typeof size === "number" ? `${size}px` : size;
|
|
@@ -439,7 +456,7 @@ var SkeletonCircle = React29.forwardRef(
|
|
|
439
456
|
);
|
|
440
457
|
}
|
|
441
458
|
);
|
|
442
|
-
var SkeletonText =
|
|
459
|
+
var SkeletonText = React30.forwardRef(
|
|
443
460
|
function SkeletonText2(props, ref) {
|
|
444
461
|
const { noOfLines = 3, loading = true, className, ...rest } = props;
|
|
445
462
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
|
|
@@ -469,7 +486,7 @@ var INDICATOR_SIZE_CLASSES = {
|
|
|
469
486
|
sm: "w-5 h-5 my-0",
|
|
470
487
|
md: "w-5 h-5 my-[2px]"
|
|
471
488
|
};
|
|
472
|
-
var Alert =
|
|
489
|
+
var Alert = React30.forwardRef(
|
|
473
490
|
function Alert2(props, ref) {
|
|
474
491
|
const {
|
|
475
492
|
title,
|
|
@@ -494,7 +511,7 @@ var Alert = React29.forwardRef(
|
|
|
494
511
|
if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
|
|
495
512
|
if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
|
|
496
513
|
const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
|
|
497
|
-
const [isOpen, setIsOpen] =
|
|
514
|
+
const [isOpen, setIsOpen] = React30.useState(true);
|
|
498
515
|
const resolvedSize = size ?? "md";
|
|
499
516
|
const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon2, { className: "w-5 h-5" });
|
|
500
517
|
const iconElement = (() => {
|
|
@@ -509,7 +526,7 @@ var Alert = React29.forwardRef(
|
|
|
509
526
|
INDICATOR_SIZE_CLASSES[resolvedSize]
|
|
510
527
|
), children: icon || defaultIcon });
|
|
511
528
|
})();
|
|
512
|
-
const handleClose =
|
|
529
|
+
const handleClose = React30.useCallback(() => {
|
|
513
530
|
setIsOpen(false);
|
|
514
531
|
onClose?.();
|
|
515
532
|
}, [onClose]);
|
|
@@ -585,11 +602,11 @@ var VARIANT_CLASSES = {
|
|
|
585
602
|
};
|
|
586
603
|
var DEFAULT_SIZE = "md";
|
|
587
604
|
var DEFAULT_VARIANT = "subtle";
|
|
588
|
-
var AvatarGroupContext =
|
|
605
|
+
var AvatarGroupContext = React30.createContext({});
|
|
589
606
|
function useAvatarGroupContext() {
|
|
590
|
-
return
|
|
607
|
+
return React30.useContext(AvatarGroupContext);
|
|
591
608
|
}
|
|
592
|
-
var Avatar =
|
|
609
|
+
var Avatar = React30.forwardRef(
|
|
593
610
|
function Avatar2(props, ref) {
|
|
594
611
|
const group = useAvatarGroupContext();
|
|
595
612
|
const {
|
|
@@ -639,7 +656,7 @@ var Avatar = React29.forwardRef(
|
|
|
639
656
|
);
|
|
640
657
|
}
|
|
641
658
|
);
|
|
642
|
-
var AvatarFallback =
|
|
659
|
+
var AvatarFallback = React30.forwardRef(
|
|
643
660
|
function AvatarFallback2(props, ref) {
|
|
644
661
|
const { name, icon, children, className, ...rest } = props;
|
|
645
662
|
return /* @__PURE__ */ jsxs(
|
|
@@ -666,10 +683,10 @@ function getInitials(name) {
|
|
|
666
683
|
const lastName = names.length > 1 ? names[names.length - 1] : "";
|
|
667
684
|
return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
|
|
668
685
|
}
|
|
669
|
-
var AvatarGroup =
|
|
686
|
+
var AvatarGroup = React30.forwardRef(
|
|
670
687
|
function AvatarGroup2(props, ref) {
|
|
671
688
|
const { size, variant, borderless, className, ...rest } = props;
|
|
672
|
-
const contextValue =
|
|
689
|
+
const contextValue = React30.useMemo(
|
|
673
690
|
() => ({ size, variant, borderless }),
|
|
674
691
|
[size, variant, borderless]
|
|
675
692
|
);
|
|
@@ -685,11 +702,11 @@ var AvatarGroup = React29.forwardRef(
|
|
|
685
702
|
);
|
|
686
703
|
var LG_BREAKPOINT = 1024;
|
|
687
704
|
function useIsMobile() {
|
|
688
|
-
const [isMobile, setIsMobile] =
|
|
705
|
+
const [isMobile, setIsMobile] = React30.useState(() => {
|
|
689
706
|
if (typeof window === "undefined") return false;
|
|
690
707
|
return window.innerWidth < LG_BREAKPOINT;
|
|
691
708
|
});
|
|
692
|
-
|
|
709
|
+
React30.useEffect(() => {
|
|
693
710
|
const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
|
|
694
711
|
const handler = (e) => setIsMobile(e.matches);
|
|
695
712
|
setIsMobile(mql.matches);
|
|
@@ -702,7 +719,7 @@ function mapPlacement(p) {
|
|
|
702
719
|
if (!p) return void 0;
|
|
703
720
|
return p;
|
|
704
721
|
}
|
|
705
|
-
var Tooltip =
|
|
722
|
+
var Tooltip = React30.forwardRef(
|
|
706
723
|
function Tooltip2(props, ref) {
|
|
707
724
|
const {
|
|
708
725
|
showArrow: showArrowProp,
|
|
@@ -721,28 +738,28 @@ var Tooltip = React29.forwardRef(
|
|
|
721
738
|
interactive,
|
|
722
739
|
positioning
|
|
723
740
|
} = props;
|
|
724
|
-
const [open, setOpen] =
|
|
725
|
-
const timeoutRef =
|
|
741
|
+
const [open, setOpen] = React30.useState(defaultOpen);
|
|
742
|
+
const timeoutRef = React30.useRef(null);
|
|
726
743
|
const isMobile = useIsMobile();
|
|
727
|
-
const handleOpenChange =
|
|
744
|
+
const handleOpenChange = React30.useCallback((nextOpen) => {
|
|
728
745
|
setOpen(nextOpen);
|
|
729
746
|
onOpenChange?.({ open: nextOpen });
|
|
730
747
|
}, [onOpenChange]);
|
|
731
|
-
const handleOpenChangeManual =
|
|
748
|
+
const handleOpenChangeManual = React30.useCallback((nextOpen) => {
|
|
732
749
|
timeoutRef.current && window.clearTimeout(timeoutRef.current);
|
|
733
750
|
timeoutRef.current = window.setTimeout(() => {
|
|
734
751
|
setOpen(nextOpen);
|
|
735
752
|
onOpenChange?.({ open: nextOpen });
|
|
736
753
|
}, nextOpen ? openDelay : closeDelay);
|
|
737
754
|
}, [closeDelay, openDelay, onOpenChange]);
|
|
738
|
-
const handleClickAway =
|
|
755
|
+
const handleClickAway = React30.useCallback(() => {
|
|
739
756
|
handleOpenChangeManual(false);
|
|
740
757
|
}, [handleOpenChangeManual]);
|
|
741
758
|
const triggerRef = useClickAway(handleClickAway);
|
|
742
|
-
const handleTriggerClick =
|
|
759
|
+
const handleTriggerClick = React30.useCallback(() => {
|
|
743
760
|
handleOpenChangeManual(!open);
|
|
744
761
|
}, [handleOpenChangeManual, open]);
|
|
745
|
-
const handleContentClick =
|
|
762
|
+
const handleContentClick = React30.useCallback((event) => {
|
|
746
763
|
event.stopPropagation();
|
|
747
764
|
if (interactive) {
|
|
748
765
|
const closestLink = event.target?.closest("a");
|
|
@@ -751,7 +768,7 @@ var Tooltip = React29.forwardRef(
|
|
|
751
768
|
}
|
|
752
769
|
}
|
|
753
770
|
}, [interactive, handleOpenChangeManual]);
|
|
754
|
-
|
|
771
|
+
React30.useEffect(() => {
|
|
755
772
|
return () => {
|
|
756
773
|
if (timeoutRef.current) {
|
|
757
774
|
clearTimeout(timeoutRef.current);
|
|
@@ -853,7 +870,7 @@ var COLOR_PALETTE_CLASSES = {
|
|
|
853
870
|
bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
|
|
854
871
|
};
|
|
855
872
|
var S2 = 4;
|
|
856
|
-
var Badge =
|
|
873
|
+
var Badge = React30__default.forwardRef(
|
|
857
874
|
function Badge2(props, ref) {
|
|
858
875
|
const {
|
|
859
876
|
loading,
|
|
@@ -1102,7 +1119,7 @@ function buildShimStyle(props) {
|
|
|
1102
1119
|
if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
|
|
1103
1120
|
return Object.keys(s).length > 0 ? s : void 0;
|
|
1104
1121
|
}
|
|
1105
|
-
var Button =
|
|
1122
|
+
var Button = React30.forwardRef(
|
|
1106
1123
|
function Button2(props, ref) {
|
|
1107
1124
|
const {
|
|
1108
1125
|
className,
|
|
@@ -1204,7 +1221,7 @@ function buttonVariants(opts) {
|
|
|
1204
1221
|
const s = opts?.size ?? "md";
|
|
1205
1222
|
return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
|
|
1206
1223
|
}
|
|
1207
|
-
var ButtonGroup =
|
|
1224
|
+
var ButtonGroup = React30.forwardRef(
|
|
1208
1225
|
function ButtonGroup2(props, ref) {
|
|
1209
1226
|
const { className, ...rest } = props;
|
|
1210
1227
|
return /* @__PURE__ */ jsx(
|
|
@@ -1218,7 +1235,7 @@ var ButtonGroup = React29.forwardRef(
|
|
|
1218
1235
|
);
|
|
1219
1236
|
}
|
|
1220
1237
|
);
|
|
1221
|
-
var ButtonGroupRadio =
|
|
1238
|
+
var ButtonGroupRadio = React30.forwardRef(
|
|
1222
1239
|
function ButtonGroupRadio2(props, ref) {
|
|
1223
1240
|
const {
|
|
1224
1241
|
children,
|
|
@@ -1230,24 +1247,24 @@ var ButtonGroupRadio = React29.forwardRef(
|
|
|
1230
1247
|
className,
|
|
1231
1248
|
...rest
|
|
1232
1249
|
} = props;
|
|
1233
|
-
const firstChildValue =
|
|
1250
|
+
const firstChildValue = React30.useMemo(() => {
|
|
1234
1251
|
const firstChild = Array.isArray(children) ? children[0] : void 0;
|
|
1235
1252
|
return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
|
|
1236
1253
|
}, [children]);
|
|
1237
|
-
const [value, setValue] =
|
|
1238
|
-
const handleItemClick =
|
|
1254
|
+
const [value, setValue] = React30.useState(defaultValue ?? firstChildValue);
|
|
1255
|
+
const handleItemClick = React30.useCallback((event) => {
|
|
1239
1256
|
const v = event.currentTarget.value;
|
|
1240
1257
|
setValue(v);
|
|
1241
1258
|
onChange?.(v);
|
|
1242
1259
|
}, [onChange]);
|
|
1243
|
-
const clonedChildren =
|
|
1244
|
-
return
|
|
1260
|
+
const clonedChildren = React30.Children.map(children, (child) => {
|
|
1261
|
+
return React30.cloneElement(child, {
|
|
1245
1262
|
onClick: handleItemClick,
|
|
1246
1263
|
selected: value === child.props.value,
|
|
1247
1264
|
variant
|
|
1248
1265
|
});
|
|
1249
1266
|
});
|
|
1250
|
-
const childrenLength =
|
|
1267
|
+
const childrenLength = React30.Children.count(children);
|
|
1251
1268
|
return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
|
|
1252
1269
|
"div",
|
|
1253
1270
|
{
|
|
@@ -1267,11 +1284,11 @@ var ButtonGroupRadio = React29.forwardRef(
|
|
|
1267
1284
|
);
|
|
1268
1285
|
var NOOP = () => {
|
|
1269
1286
|
};
|
|
1270
|
-
var CheckboxGroupContext =
|
|
1287
|
+
var CheckboxGroupContext = React30.createContext(null);
|
|
1271
1288
|
function useCheckboxGroupContext() {
|
|
1272
|
-
return
|
|
1289
|
+
return React30.useContext(CheckboxGroupContext);
|
|
1273
1290
|
}
|
|
1274
|
-
var CheckboxGroupBase =
|
|
1291
|
+
var CheckboxGroupBase = React30.forwardRef(
|
|
1275
1292
|
function CheckboxGroup(props, ref) {
|
|
1276
1293
|
const {
|
|
1277
1294
|
children,
|
|
@@ -1283,10 +1300,10 @@ var CheckboxGroupBase = React29.forwardRef(
|
|
|
1283
1300
|
className,
|
|
1284
1301
|
...rest
|
|
1285
1302
|
} = props;
|
|
1286
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
1303
|
+
const [uncontrolledValue, setUncontrolledValue] = React30.useState(defaultValue ?? []);
|
|
1287
1304
|
const isControlled = controlledValue !== void 0;
|
|
1288
1305
|
const value = isControlled ? controlledValue : uncontrolledValue;
|
|
1289
|
-
const toggle =
|
|
1306
|
+
const toggle = React30.useCallback(
|
|
1290
1307
|
(itemValue) => {
|
|
1291
1308
|
const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
|
|
1292
1309
|
if (!isControlled) {
|
|
@@ -1296,12 +1313,12 @@ var CheckboxGroupBase = React29.forwardRef(
|
|
|
1296
1313
|
},
|
|
1297
1314
|
[value, isControlled, onValueChange]
|
|
1298
1315
|
);
|
|
1299
|
-
|
|
1316
|
+
React30.useEffect(() => {
|
|
1300
1317
|
if (isControlled) {
|
|
1301
1318
|
setUncontrolledValue(controlledValue);
|
|
1302
1319
|
}
|
|
1303
1320
|
}, [isControlled, controlledValue]);
|
|
1304
|
-
const ctx =
|
|
1321
|
+
const ctx = React30.useMemo(() => ({ value, toggle }), [value, toggle]);
|
|
1305
1322
|
return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
1306
1323
|
"div",
|
|
1307
1324
|
{
|
|
@@ -1359,7 +1376,7 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
|
|
|
1359
1376
|
children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
|
|
1360
1377
|
}
|
|
1361
1378
|
);
|
|
1362
|
-
var CheckboxBase =
|
|
1379
|
+
var CheckboxBase = React30.forwardRef(
|
|
1363
1380
|
function Checkbox(props, ref) {
|
|
1364
1381
|
const {
|
|
1365
1382
|
icon,
|
|
@@ -1380,8 +1397,8 @@ var CheckboxBase = React29.forwardRef(
|
|
|
1380
1397
|
...rest
|
|
1381
1398
|
} = props;
|
|
1382
1399
|
const group = useCheckboxGroupContext();
|
|
1383
|
-
const hiddenInputRef =
|
|
1384
|
-
const setHiddenInputRef =
|
|
1400
|
+
const hiddenInputRef = React30.useRef(null);
|
|
1401
|
+
const setHiddenInputRef = React30.useCallback(
|
|
1385
1402
|
(node) => {
|
|
1386
1403
|
hiddenInputRef.current = node;
|
|
1387
1404
|
if (typeof ref === "function") {
|
|
@@ -1394,7 +1411,7 @@ var CheckboxBase = React29.forwardRef(
|
|
|
1394
1411
|
);
|
|
1395
1412
|
const isInGroup = group !== null && value !== void 0;
|
|
1396
1413
|
const groupChecked = isInGroup ? group.value.includes(value) : void 0;
|
|
1397
|
-
const [internalChecked, setInternalChecked] =
|
|
1414
|
+
const [internalChecked, setInternalChecked] = React30.useState(
|
|
1398
1415
|
defaultChecked ?? false
|
|
1399
1416
|
);
|
|
1400
1417
|
const isControlled = checkedProp !== void 0 || isInGroup;
|
|
@@ -1406,7 +1423,7 @@ var CheckboxBase = React29.forwardRef(
|
|
|
1406
1423
|
} else {
|
|
1407
1424
|
checkedState = internalChecked;
|
|
1408
1425
|
}
|
|
1409
|
-
const handleCheckedChange =
|
|
1426
|
+
const handleCheckedChange = React30.useCallback(
|
|
1410
1427
|
(nextChecked) => {
|
|
1411
1428
|
if (readOnly) return;
|
|
1412
1429
|
if (!isControlled) {
|
|
@@ -1570,7 +1587,7 @@ function resolveSpacing(v) {
|
|
|
1570
1587
|
}
|
|
1571
1588
|
return void 0;
|
|
1572
1589
|
}
|
|
1573
|
-
var Link =
|
|
1590
|
+
var Link = React30__default.forwardRef(
|
|
1574
1591
|
function Link2(props, ref) {
|
|
1575
1592
|
const {
|
|
1576
1593
|
external,
|
|
@@ -1659,7 +1676,7 @@ var Link = React29__default.forwardRef(
|
|
|
1659
1676
|
) });
|
|
1660
1677
|
}
|
|
1661
1678
|
);
|
|
1662
|
-
var LinkBox =
|
|
1679
|
+
var LinkBox = React30__default.forwardRef(
|
|
1663
1680
|
function LinkBox2(props, ref) {
|
|
1664
1681
|
const { className, ...rest } = props;
|
|
1665
1682
|
return /* @__PURE__ */ jsx(
|
|
@@ -1672,7 +1689,7 @@ var LinkBox = React29__default.forwardRef(
|
|
|
1672
1689
|
);
|
|
1673
1690
|
}
|
|
1674
1691
|
);
|
|
1675
|
-
var LinkOverlay =
|
|
1692
|
+
var LinkOverlay = React30__default.forwardRef(
|
|
1676
1693
|
function LinkOverlay2(props, ref) {
|
|
1677
1694
|
const {
|
|
1678
1695
|
children,
|
|
@@ -1753,8 +1770,8 @@ var LinkOverlay = React29__default.forwardRef(
|
|
|
1753
1770
|
}
|
|
1754
1771
|
);
|
|
1755
1772
|
function useUpdateEffect(effect, deps) {
|
|
1756
|
-
const isFirstMount =
|
|
1757
|
-
|
|
1773
|
+
const isFirstMount = React30__default.useRef(true);
|
|
1774
|
+
React30__default.useEffect(() => {
|
|
1758
1775
|
if (isFirstMount.current) {
|
|
1759
1776
|
isFirstMount.current = false;
|
|
1760
1777
|
return;
|
|
@@ -1771,8 +1788,8 @@ function scrollToElement(id) {
|
|
|
1771
1788
|
var CUT_ID = "CollapsibleDetails";
|
|
1772
1789
|
var CollapsibleDetails = (props) => {
|
|
1773
1790
|
const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
|
|
1774
|
-
const [isExpanded, setIsExpanded] =
|
|
1775
|
-
const handleClick =
|
|
1791
|
+
const [isExpanded, setIsExpanded] = React30__default.useState(isExpandedProp);
|
|
1792
|
+
const handleClick = React30__default.useCallback((event) => {
|
|
1776
1793
|
setIsExpanded((flag) => !flag);
|
|
1777
1794
|
if (!noScroll) {
|
|
1778
1795
|
scrollToElement(id);
|
|
@@ -1803,11 +1820,11 @@ var CollapsibleDetails = (props) => {
|
|
|
1803
1820
|
var CollapsibleList = (props) => {
|
|
1804
1821
|
const CUT_LENGTH = 3;
|
|
1805
1822
|
const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
|
|
1806
|
-
const [isExpanded, setIsExpanded] =
|
|
1807
|
-
|
|
1823
|
+
const [isExpanded, setIsExpanded] = React30__default.useState(defaultExpanded);
|
|
1824
|
+
React30__default.useEffect(() => {
|
|
1808
1825
|
setIsExpanded(defaultExpanded);
|
|
1809
1826
|
}, [defaultExpanded]);
|
|
1810
|
-
const handleToggle =
|
|
1827
|
+
const handleToggle = React30__default.useCallback(() => {
|
|
1811
1828
|
setIsExpanded((flag) => !flag);
|
|
1812
1829
|
}, []);
|
|
1813
1830
|
const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
|
|
@@ -1824,10 +1841,10 @@ var CollapsibleList = (props) => {
|
|
|
1824
1841
|
) })
|
|
1825
1842
|
] }) });
|
|
1826
1843
|
};
|
|
1827
|
-
var ColorModeContext =
|
|
1844
|
+
var ColorModeContext = React30.createContext(void 0);
|
|
1828
1845
|
function ColorModeProvider(props) {
|
|
1829
1846
|
const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
|
|
1830
|
-
const [internalMode, setInternalMode] =
|
|
1847
|
+
const [internalMode, setInternalMode] = React30.useState(() => {
|
|
1831
1848
|
if (controlledValue === "dark" || controlledValue === "light") {
|
|
1832
1849
|
return controlledValue;
|
|
1833
1850
|
}
|
|
@@ -1837,7 +1854,7 @@ function ColorModeProvider(props) {
|
|
|
1837
1854
|
return defaultTheme === "dark" ? "dark" : "light";
|
|
1838
1855
|
});
|
|
1839
1856
|
const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
|
|
1840
|
-
const setColorMode =
|
|
1857
|
+
const setColorMode = React30.useCallback((mode) => {
|
|
1841
1858
|
const resolved = mode === "dark" ? "dark" : "light";
|
|
1842
1859
|
setInternalMode(resolved);
|
|
1843
1860
|
onValueChange?.(resolved);
|
|
@@ -1846,19 +1863,19 @@ function ColorModeProvider(props) {
|
|
|
1846
1863
|
document.documentElement.classList.toggle("light", resolved === "light");
|
|
1847
1864
|
}
|
|
1848
1865
|
}, [onValueChange]);
|
|
1849
|
-
const toggleColorMode =
|
|
1866
|
+
const toggleColorMode = React30.useCallback(() => {
|
|
1850
1867
|
setColorMode(colorMode === "dark" ? "light" : "dark");
|
|
1851
1868
|
}, [colorMode, setColorMode]);
|
|
1852
|
-
const ctx =
|
|
1869
|
+
const ctx = React30.useMemo(
|
|
1853
1870
|
() => ({ colorMode, setColorMode, toggleColorMode }),
|
|
1854
1871
|
[colorMode, setColorMode, toggleColorMode]
|
|
1855
1872
|
);
|
|
1856
1873
|
return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: ctx, children });
|
|
1857
1874
|
}
|
|
1858
1875
|
function useColorMode() {
|
|
1859
|
-
const ctx =
|
|
1876
|
+
const ctx = React30.useContext(ColorModeContext);
|
|
1860
1877
|
if (!ctx) {
|
|
1861
|
-
const [mode, setMode] =
|
|
1878
|
+
const [mode, setMode] = React30.useState(() => {
|
|
1862
1879
|
if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
|
|
1863
1880
|
return "dark";
|
|
1864
1881
|
}
|
|
@@ -1902,9 +1919,9 @@ function BackToButton({ onClick }) {
|
|
|
1902
1919
|
}
|
|
1903
1920
|
);
|
|
1904
1921
|
}
|
|
1905
|
-
var DialogSizeContext =
|
|
1922
|
+
var DialogSizeContext = React30.createContext({ size: "md" });
|
|
1906
1923
|
function useDialogSizeContext() {
|
|
1907
|
-
return
|
|
1924
|
+
return React30.useContext(DialogSizeContext);
|
|
1908
1925
|
}
|
|
1909
1926
|
var CONTENT_SIZE_MAP = {
|
|
1910
1927
|
sm: "max-w-[400px]",
|
|
@@ -1936,13 +1953,13 @@ var DialogRoot = ({
|
|
|
1936
1953
|
modal = true
|
|
1937
1954
|
// motionPreset is intentionally unused -- kept for API compat
|
|
1938
1955
|
}) => {
|
|
1939
|
-
const handleOpenChange =
|
|
1956
|
+
const handleOpenChange = React30.useCallback(
|
|
1940
1957
|
(nextOpen) => {
|
|
1941
1958
|
onOpenChange?.({ open: nextOpen });
|
|
1942
1959
|
},
|
|
1943
1960
|
[onOpenChange]
|
|
1944
1961
|
);
|
|
1945
|
-
const ctx =
|
|
1962
|
+
const ctx = React30.useMemo(() => ({ size }), [size]);
|
|
1946
1963
|
return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
1947
1964
|
Dialog,
|
|
1948
1965
|
{
|
|
@@ -1954,7 +1971,7 @@ var DialogRoot = ({
|
|
|
1954
1971
|
}
|
|
1955
1972
|
) });
|
|
1956
1973
|
};
|
|
1957
|
-
var DialogContent =
|
|
1974
|
+
var DialogContent = React30.forwardRef(function DialogContent2(props, ref) {
|
|
1958
1975
|
const {
|
|
1959
1976
|
children,
|
|
1960
1977
|
portalled: _portalled = true,
|
|
@@ -2011,11 +2028,11 @@ var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
|
|
|
2011
2028
|
)
|
|
2012
2029
|
] });
|
|
2013
2030
|
});
|
|
2014
|
-
var DialogCloseTrigger =
|
|
2031
|
+
var DialogCloseTrigger = React30.forwardRef(function DialogCloseTrigger2(props, ref) {
|
|
2015
2032
|
const { className, ...rest } = props;
|
|
2016
2033
|
return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
|
|
2017
2034
|
});
|
|
2018
|
-
var DialogHeader =
|
|
2035
|
+
var DialogHeader = React30.forwardRef(function DialogHeader2(props, ref) {
|
|
2019
2036
|
const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
|
|
2020
2037
|
const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
|
|
2021
2038
|
return /* @__PURE__ */ jsxs(
|
|
@@ -2045,7 +2062,7 @@ var DialogHeader = React29.forwardRef(function DialogHeader2(props, ref) {
|
|
|
2045
2062
|
}
|
|
2046
2063
|
);
|
|
2047
2064
|
});
|
|
2048
|
-
var DialogBody =
|
|
2065
|
+
var DialogBody = React30.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
|
|
2049
2066
|
const bodyStyle = {
|
|
2050
2067
|
...styleProp,
|
|
2051
2068
|
...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
|
|
@@ -2062,7 +2079,7 @@ var DialogBody = React29.forwardRef(function DialogBody2({ className, pt, displa
|
|
|
2062
2079
|
}
|
|
2063
2080
|
);
|
|
2064
2081
|
});
|
|
2065
|
-
var DialogFooter =
|
|
2082
|
+
var DialogFooter = React30.forwardRef(function DialogFooter2({ className, ...props }, ref) {
|
|
2066
2083
|
return /* @__PURE__ */ jsx(
|
|
2067
2084
|
"div",
|
|
2068
2085
|
{
|
|
@@ -2077,8 +2094,8 @@ var DialogTitle = Dialog.Title;
|
|
|
2077
2094
|
var DialogDescription = Dialog.Description;
|
|
2078
2095
|
var DialogTrigger = Dialog.Trigger;
|
|
2079
2096
|
var DialogActionTrigger = Dialog.Close;
|
|
2080
|
-
var DrawerPlacementContext =
|
|
2081
|
-
var DrawerSizeContext =
|
|
2097
|
+
var DrawerPlacementContext = React30.createContext("right");
|
|
2098
|
+
var DrawerSizeContext = React30.createContext("md");
|
|
2082
2099
|
var DrawerRoot = (props) => {
|
|
2083
2100
|
const {
|
|
2084
2101
|
children,
|
|
@@ -2089,7 +2106,7 @@ var DrawerRoot = (props) => {
|
|
|
2089
2106
|
modal = true,
|
|
2090
2107
|
size = "md"
|
|
2091
2108
|
} = props;
|
|
2092
|
-
const handleOpenChange =
|
|
2109
|
+
const handleOpenChange = React30.useCallback((nextOpen) => {
|
|
2093
2110
|
onOpenChange?.({ open: nextOpen });
|
|
2094
2111
|
}, [onOpenChange]);
|
|
2095
2112
|
return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
|
|
@@ -2131,11 +2148,11 @@ var SIZE_CLASSES6 = {
|
|
|
2131
2148
|
top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
|
|
2132
2149
|
bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
|
|
2133
2150
|
};
|
|
2134
|
-
var DrawerContent =
|
|
2151
|
+
var DrawerContent = React30.forwardRef(
|
|
2135
2152
|
function DrawerContent2(props, ref) {
|
|
2136
2153
|
const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
|
|
2137
|
-
const placement =
|
|
2138
|
-
const size =
|
|
2154
|
+
const placement = React30.useContext(DrawerPlacementContext);
|
|
2155
|
+
const size = React30.useContext(DrawerSizeContext);
|
|
2139
2156
|
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2140
2157
|
backdrop && /* @__PURE__ */ jsx(
|
|
2141
2158
|
RadixDialog.Overlay,
|
|
@@ -2168,7 +2185,7 @@ var DrawerContent = React29.forwardRef(
|
|
|
2168
2185
|
return content;
|
|
2169
2186
|
}
|
|
2170
2187
|
);
|
|
2171
|
-
var DrawerCloseTrigger =
|
|
2188
|
+
var DrawerCloseTrigger = React30.forwardRef(function DrawerCloseTrigger2(props, ref) {
|
|
2172
2189
|
return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
2173
2190
|
CloseButton,
|
|
2174
2191
|
{
|
|
@@ -2182,17 +2199,17 @@ var DrawerTrigger = (props) => {
|
|
|
2182
2199
|
const { asChild = true, ...rest } = props;
|
|
2183
2200
|
return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
|
|
2184
2201
|
};
|
|
2185
|
-
var DrawerHeader =
|
|
2202
|
+
var DrawerHeader = React30.forwardRef(
|
|
2186
2203
|
function DrawerHeader2({ className, ...props }, ref) {
|
|
2187
2204
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
|
|
2188
2205
|
}
|
|
2189
2206
|
);
|
|
2190
|
-
var DrawerBody =
|
|
2207
|
+
var DrawerBody = React30.forwardRef(
|
|
2191
2208
|
function DrawerBody2({ className, ...props }, ref) {
|
|
2192
2209
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
|
|
2193
2210
|
}
|
|
2194
2211
|
);
|
|
2195
|
-
var DrawerFooter =
|
|
2212
|
+
var DrawerFooter = React30.forwardRef(
|
|
2196
2213
|
function DrawerFooter2({ className, ...props }, ref) {
|
|
2197
2214
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
|
|
2198
2215
|
}
|
|
@@ -2205,7 +2222,7 @@ function upperFirst(str) {
|
|
|
2205
2222
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
2206
2223
|
}
|
|
2207
2224
|
var ICONS = {};
|
|
2208
|
-
var EmptyState =
|
|
2225
|
+
var EmptyState = React30.forwardRef(
|
|
2209
2226
|
function EmptyState2(props, ref) {
|
|
2210
2227
|
const { title, description, term, type = "query", icon, children, className, ...rest } = props;
|
|
2211
2228
|
const titleContent = (() => {
|
|
@@ -2265,7 +2282,7 @@ function getComponentDisplayName(type) {
|
|
|
2265
2282
|
if ("displayName" in type) return type.displayName;
|
|
2266
2283
|
return void 0;
|
|
2267
2284
|
}
|
|
2268
|
-
var Field =
|
|
2285
|
+
var Field = React30.forwardRef(
|
|
2269
2286
|
function Field2(props, ref) {
|
|
2270
2287
|
const {
|
|
2271
2288
|
label,
|
|
@@ -2317,14 +2334,14 @@ var Field = React29.forwardRef(
|
|
|
2317
2334
|
}
|
|
2318
2335
|
);
|
|
2319
2336
|
const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
|
|
2320
|
-
const child2 =
|
|
2337
|
+
const child2 = React30.Children.only(children);
|
|
2321
2338
|
const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
|
|
2322
2339
|
if (isInputGroup) {
|
|
2323
|
-
const inputElement2 =
|
|
2324
|
-
|
|
2340
|
+
const inputElement2 = React30.cloneElement(
|
|
2341
|
+
React30.Children.only(child2.props.children),
|
|
2325
2342
|
injectedProps2
|
|
2326
2343
|
);
|
|
2327
|
-
const groupInputElement =
|
|
2344
|
+
const groupInputElement = React30.cloneElement(
|
|
2328
2345
|
child2,
|
|
2329
2346
|
{},
|
|
2330
2347
|
inputElement2,
|
|
@@ -2347,7 +2364,7 @@ var Field = React29.forwardRef(
|
|
|
2347
2364
|
}
|
|
2348
2365
|
);
|
|
2349
2366
|
}
|
|
2350
|
-
const inputElement =
|
|
2367
|
+
const inputElement = React30.cloneElement(child2, injectedProps2);
|
|
2351
2368
|
return /* @__PURE__ */ jsxs(
|
|
2352
2369
|
"div",
|
|
2353
2370
|
{
|
|
@@ -2369,8 +2386,8 @@ var Field = React29.forwardRef(
|
|
|
2369
2386
|
const injectedProps = {
|
|
2370
2387
|
size
|
|
2371
2388
|
};
|
|
2372
|
-
const child =
|
|
2373
|
-
const clonedChild =
|
|
2389
|
+
const child = React30.Children.only(children);
|
|
2390
|
+
const clonedChild = React30.cloneElement(child, injectedProps);
|
|
2374
2391
|
return /* @__PURE__ */ jsxs(
|
|
2375
2392
|
"div",
|
|
2376
2393
|
{
|
|
@@ -2413,7 +2430,7 @@ var LEVEL_CLASSES = {
|
|
|
2413
2430
|
"3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
|
|
2414
2431
|
};
|
|
2415
2432
|
var BASE_CLASSES4 = "font-heading text-heading";
|
|
2416
|
-
var Heading =
|
|
2433
|
+
var Heading = React30__default.forwardRef(
|
|
2417
2434
|
function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
|
|
2418
2435
|
const Tag3 = level ? LEVEL_TAG[level] : "h2";
|
|
2419
2436
|
const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
|
|
@@ -2499,7 +2516,7 @@ var ICON_SIZE_CLASSES = {
|
|
|
2499
2516
|
md: "[&_svg]:size-5"
|
|
2500
2517
|
};
|
|
2501
2518
|
var SP2 = 4;
|
|
2502
|
-
var IconButton =
|
|
2519
|
+
var IconButton = React30.forwardRef(
|
|
2503
2520
|
function IconButton2(props, ref) {
|
|
2504
2521
|
const {
|
|
2505
2522
|
size,
|
|
@@ -2550,7 +2567,7 @@ var IconButton = React29.forwardRef(
|
|
|
2550
2567
|
ref,
|
|
2551
2568
|
size,
|
|
2552
2569
|
disabled: !loadingSkeleton && (loading || disabled) || void 0,
|
|
2553
|
-
render: _as ?
|
|
2570
|
+
render: _as ? React30.createElement(_as) : void 0,
|
|
2554
2571
|
className: combinedClassName,
|
|
2555
2572
|
style: mergedStyle,
|
|
2556
2573
|
...expanded ? { "data-expanded": true } : {},
|
|
@@ -2721,31 +2738,31 @@ function extractStyleProps(props) {
|
|
|
2721
2738
|
}
|
|
2722
2739
|
return { styleProps, rest };
|
|
2723
2740
|
}
|
|
2724
|
-
var Image2 =
|
|
2741
|
+
var Image2 = React30__default.forwardRef(
|
|
2725
2742
|
function Image3(props, ref) {
|
|
2726
2743
|
const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, alt, className, style: styleProp, ...allRest } = props;
|
|
2727
2744
|
const { styleProps, rest: extraProps } = extractStyleProps(allRest);
|
|
2728
|
-
const [loading, setLoading] =
|
|
2729
|
-
const [error, setError] =
|
|
2730
|
-
const handleLoadError =
|
|
2745
|
+
const [loading, setLoading] = React30__default.useState(true);
|
|
2746
|
+
const [error, setError] = React30__default.useState(false);
|
|
2747
|
+
const handleLoadError = React30__default.useCallback((event) => {
|
|
2731
2748
|
setError(true);
|
|
2732
2749
|
setLoading(false);
|
|
2733
2750
|
onError?.(event);
|
|
2734
2751
|
}, [onError]);
|
|
2735
|
-
const handleLoadSuccess =
|
|
2752
|
+
const handleLoadSuccess = React30__default.useCallback((event) => {
|
|
2736
2753
|
setLoading(false);
|
|
2737
2754
|
onLoad?.(event);
|
|
2738
2755
|
}, [onLoad]);
|
|
2739
2756
|
const passthroughProps = allRest;
|
|
2740
2757
|
if (!src && fallback) {
|
|
2741
|
-
if (
|
|
2742
|
-
return
|
|
2758
|
+
if (React30__default.isValidElement(fallback)) {
|
|
2759
|
+
return React30__default.cloneElement(fallback, passthroughProps);
|
|
2743
2760
|
}
|
|
2744
2761
|
return fallback;
|
|
2745
2762
|
}
|
|
2746
2763
|
if (error) {
|
|
2747
|
-
if (
|
|
2748
|
-
return
|
|
2764
|
+
if (React30__default.isValidElement(fallback)) {
|
|
2765
|
+
return React30__default.cloneElement(fallback, passthroughProps);
|
|
2749
2766
|
}
|
|
2750
2767
|
return fallback;
|
|
2751
2768
|
}
|
|
@@ -2801,7 +2818,7 @@ var INPUT_VARIANT_CLASSES = {
|
|
|
2801
2818
|
filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
|
|
2802
2819
|
unstyled: "border-0 bg-transparent p-0 h-auto"
|
|
2803
2820
|
};
|
|
2804
|
-
var Input =
|
|
2821
|
+
var Input = React30__default.forwardRef(
|
|
2805
2822
|
({ size = "md", variant = "outline", className, ...rest }, ref) => {
|
|
2806
2823
|
return /* @__PURE__ */ jsx(
|
|
2807
2824
|
"input",
|
|
@@ -2819,7 +2836,7 @@ function getComponentDisplayName2(type) {
|
|
|
2819
2836
|
if ("displayName" in type) return type.displayName;
|
|
2820
2837
|
return void 0;
|
|
2821
2838
|
}
|
|
2822
|
-
var InputGroup =
|
|
2839
|
+
var InputGroup = React30.forwardRef(
|
|
2823
2840
|
function InputGroup2(props, ref) {
|
|
2824
2841
|
const {
|
|
2825
2842
|
startElement,
|
|
@@ -2832,11 +2849,11 @@ var InputGroup = React29.forwardRef(
|
|
|
2832
2849
|
className,
|
|
2833
2850
|
...rest
|
|
2834
2851
|
} = props;
|
|
2835
|
-
const startElementRef =
|
|
2836
|
-
const endElementRef =
|
|
2837
|
-
const groupRef =
|
|
2838
|
-
const [inlinePaddings, setInlinePaddings] =
|
|
2839
|
-
const calculateInlinePaddings =
|
|
2852
|
+
const startElementRef = React30.useRef(null);
|
|
2853
|
+
const endElementRef = React30.useRef(null);
|
|
2854
|
+
const groupRef = React30.useRef(null);
|
|
2855
|
+
const [inlinePaddings, setInlinePaddings] = React30.useState();
|
|
2856
|
+
const calculateInlinePaddings = React30.useCallback(() => {
|
|
2840
2857
|
const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
|
|
2841
2858
|
const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
|
|
2842
2859
|
setInlinePaddings({
|
|
@@ -2844,7 +2861,7 @@ var InputGroup = React29.forwardRef(
|
|
|
2844
2861
|
end: endWidth
|
|
2845
2862
|
});
|
|
2846
2863
|
}, []);
|
|
2847
|
-
|
|
2864
|
+
React30.useEffect(() => {
|
|
2848
2865
|
if (!groupRef.current) return;
|
|
2849
2866
|
let timeoutId;
|
|
2850
2867
|
const intersectionObserver = new IntersectionObserver(
|
|
@@ -2864,7 +2881,7 @@ var InputGroup = React29.forwardRef(
|
|
|
2864
2881
|
}
|
|
2865
2882
|
};
|
|
2866
2883
|
}, [calculateInlinePaddings]);
|
|
2867
|
-
|
|
2884
|
+
React30.useEffect(() => {
|
|
2868
2885
|
calculateInlinePaddings();
|
|
2869
2886
|
const resizeHandler = debounce(calculateInlinePaddings, 300);
|
|
2870
2887
|
const resizeObserver = new ResizeObserver(resizeHandler);
|
|
@@ -2875,7 +2892,7 @@ var InputGroup = React29.forwardRef(
|
|
|
2875
2892
|
resizeObserver.disconnect();
|
|
2876
2893
|
};
|
|
2877
2894
|
}, [calculateInlinePaddings]);
|
|
2878
|
-
const combinedRef =
|
|
2895
|
+
const combinedRef = React30.useCallback((node) => {
|
|
2879
2896
|
groupRef.current = node;
|
|
2880
2897
|
if (typeof ref === "function") {
|
|
2881
2898
|
ref(node);
|
|
@@ -2904,11 +2921,11 @@ var InputGroup = React29.forwardRef(
|
|
|
2904
2921
|
children: startElement
|
|
2905
2922
|
}
|
|
2906
2923
|
),
|
|
2907
|
-
|
|
2924
|
+
React30.Children.map(children, (child) => {
|
|
2908
2925
|
if (getComponentDisplayName2(child.type) !== "FieldInput") {
|
|
2909
2926
|
return child;
|
|
2910
2927
|
}
|
|
2911
|
-
return
|
|
2928
|
+
return React30.cloneElement(child, {
|
|
2912
2929
|
...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
|
|
2913
2930
|
...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
|
|
2914
2931
|
// hide input value and placeholder for the first render
|
|
@@ -2949,7 +2966,7 @@ function parsePlacement(placement) {
|
|
|
2949
2966
|
}
|
|
2950
2967
|
return { side, align };
|
|
2951
2968
|
}
|
|
2952
|
-
var PositioningContext =
|
|
2969
|
+
var PositioningContext = React30.createContext({
|
|
2953
2970
|
side: "bottom",
|
|
2954
2971
|
align: "start",
|
|
2955
2972
|
sideOffset: 4,
|
|
@@ -2979,13 +2996,13 @@ var MenuRoot = (props) => {
|
|
|
2979
2996
|
}
|
|
2980
2997
|
};
|
|
2981
2998
|
const { side, align } = parsePlacement(mergedPositioning.placement);
|
|
2982
|
-
const positioningValue =
|
|
2999
|
+
const positioningValue = React30.useMemo(() => ({
|
|
2983
3000
|
side,
|
|
2984
3001
|
align,
|
|
2985
3002
|
sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
|
|
2986
3003
|
alignOffset: mergedPositioning.offset?.crossAxis ?? 0
|
|
2987
3004
|
}), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
|
|
2988
|
-
const handleOpenChange =
|
|
3005
|
+
const handleOpenChange = React30.useCallback((isOpen) => {
|
|
2989
3006
|
onOpenChange?.({ open: isOpen });
|
|
2990
3007
|
}, [onOpenChange]);
|
|
2991
3008
|
return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
|
|
@@ -2999,13 +3016,13 @@ var MenuRoot = (props) => {
|
|
|
2999
3016
|
}
|
|
3000
3017
|
) });
|
|
3001
3018
|
};
|
|
3002
|
-
var MenuTrigger =
|
|
3019
|
+
var MenuTrigger = React30.forwardRef(function MenuTrigger2(props, ref) {
|
|
3003
3020
|
const { asChild = false, ...rest } = props;
|
|
3004
3021
|
return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
|
|
3005
3022
|
});
|
|
3006
|
-
var MenuContent =
|
|
3023
|
+
var MenuContent = React30.forwardRef(function MenuContent2(props, ref) {
|
|
3007
3024
|
const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
|
|
3008
|
-
const positioning =
|
|
3025
|
+
const positioning = React30.useContext(PositioningContext);
|
|
3009
3026
|
const mergedStyle = {
|
|
3010
3027
|
...style,
|
|
3011
3028
|
...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
|
|
@@ -3040,7 +3057,7 @@ var MenuContent = React29.forwardRef(function MenuContent2(props, ref) {
|
|
|
3040
3057
|
}
|
|
3041
3058
|
return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
|
|
3042
3059
|
});
|
|
3043
|
-
var MenuItem =
|
|
3060
|
+
var MenuItem = React30.forwardRef(function MenuItem2(props, ref) {
|
|
3044
3061
|
const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
|
|
3045
3062
|
return /* @__PURE__ */ jsx(
|
|
3046
3063
|
DropdownMenu.Item,
|
|
@@ -3062,11 +3079,11 @@ var MenuItem = React29.forwardRef(function MenuItem2(props, ref) {
|
|
|
3062
3079
|
}
|
|
3063
3080
|
);
|
|
3064
3081
|
});
|
|
3065
|
-
var MenuItemText =
|
|
3082
|
+
var MenuItemText = React30.forwardRef(function MenuItemText2(props, ref) {
|
|
3066
3083
|
const { className, ...rest } = props;
|
|
3067
3084
|
return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
|
|
3068
3085
|
});
|
|
3069
|
-
|
|
3086
|
+
React30.forwardRef(function MenuItemCommand2(props, ref) {
|
|
3070
3087
|
const { className, ...rest } = props;
|
|
3071
3088
|
return /* @__PURE__ */ jsx(
|
|
3072
3089
|
"span",
|
|
@@ -3077,7 +3094,7 @@ React29.forwardRef(function MenuItemCommand2(props, ref) {
|
|
|
3077
3094
|
}
|
|
3078
3095
|
);
|
|
3079
3096
|
});
|
|
3080
|
-
var MenuSeparator =
|
|
3097
|
+
var MenuSeparator = React30.forwardRef(function MenuSeparator2(props, ref) {
|
|
3081
3098
|
const { className, ...rest } = props;
|
|
3082
3099
|
return /* @__PURE__ */ jsx(
|
|
3083
3100
|
DropdownMenu.Separator,
|
|
@@ -3088,14 +3105,14 @@ var MenuSeparator = React29.forwardRef(function MenuSeparator2(props, ref) {
|
|
|
3088
3105
|
}
|
|
3089
3106
|
);
|
|
3090
3107
|
});
|
|
3091
|
-
var MenuItemGroup =
|
|
3108
|
+
var MenuItemGroup = React30.forwardRef(function MenuItemGroup2(props, ref) {
|
|
3092
3109
|
const { title, children, className, ...rest } = props;
|
|
3093
3110
|
return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
|
|
3094
3111
|
title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
|
|
3095
3112
|
children
|
|
3096
3113
|
] });
|
|
3097
3114
|
});
|
|
3098
|
-
var MenuArrow =
|
|
3115
|
+
var MenuArrow = React30.forwardRef(function MenuArrow2(props, ref) {
|
|
3099
3116
|
const { className, ...rest } = props;
|
|
3100
3117
|
return /* @__PURE__ */ jsx(
|
|
3101
3118
|
DropdownMenu.Arrow,
|
|
@@ -3106,7 +3123,7 @@ var MenuArrow = React29.forwardRef(function MenuArrow2(props, ref) {
|
|
|
3106
3123
|
}
|
|
3107
3124
|
);
|
|
3108
3125
|
});
|
|
3109
|
-
var MenuCheckboxItem =
|
|
3126
|
+
var MenuCheckboxItem = React30.forwardRef(function MenuCheckboxItem2(props, ref) {
|
|
3110
3127
|
const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
|
|
3111
3128
|
return /* @__PURE__ */ jsxs(
|
|
3112
3129
|
DropdownMenu.CheckboxItem,
|
|
@@ -3130,7 +3147,7 @@ var MenuCheckboxItem = React29.forwardRef(function MenuCheckboxItem2(props, ref)
|
|
|
3130
3147
|
}
|
|
3131
3148
|
);
|
|
3132
3149
|
});
|
|
3133
|
-
var MenuRadioItemGroup =
|
|
3150
|
+
var MenuRadioItemGroup = React30.forwardRef(function MenuRadioItemGroup2(props, ref) {
|
|
3134
3151
|
const { value, onValueChange, ...rest } = props;
|
|
3135
3152
|
return /* @__PURE__ */ jsx(
|
|
3136
3153
|
DropdownMenu.RadioGroup,
|
|
@@ -3142,7 +3159,7 @@ var MenuRadioItemGroup = React29.forwardRef(function MenuRadioItemGroup2(props,
|
|
|
3142
3159
|
}
|
|
3143
3160
|
);
|
|
3144
3161
|
});
|
|
3145
|
-
var MenuRadioItem =
|
|
3162
|
+
var MenuRadioItem = React30.forwardRef(function MenuRadioItem2(props, ref) {
|
|
3146
3163
|
const { className, children, value, onClick, ...rest } = props;
|
|
3147
3164
|
const { value: _v, ...radixRest } = rest;
|
|
3148
3165
|
return /* @__PURE__ */ jsxs(
|
|
@@ -3165,11 +3182,11 @@ var MenuRadioItem = React29.forwardRef(function MenuRadioItem2(props, ref) {
|
|
|
3165
3182
|
}
|
|
3166
3183
|
);
|
|
3167
3184
|
});
|
|
3168
|
-
|
|
3185
|
+
React30.forwardRef(function MenuContextTrigger2(props, ref) {
|
|
3169
3186
|
const { asChild: _asChild, ...rest } = props;
|
|
3170
3187
|
return /* @__PURE__ */ jsx("span", { ref, ...rest });
|
|
3171
3188
|
});
|
|
3172
|
-
var MenuTriggerItem =
|
|
3189
|
+
var MenuTriggerItem = React30.forwardRef(function MenuTriggerItem2(props, ref) {
|
|
3173
3190
|
const { startIcon, children, className, ...rest } = props;
|
|
3174
3191
|
return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
|
|
3175
3192
|
DropdownMenu.SubTrigger,
|
|
@@ -3204,7 +3221,7 @@ var INPUT_BASE2 = [
|
|
|
3204
3221
|
].join(" ");
|
|
3205
3222
|
var INPUT_FILLED = "border-[var(--color-input-border)]";
|
|
3206
3223
|
var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
|
|
3207
|
-
var PinInput =
|
|
3224
|
+
var PinInput = React30.forwardRef(
|
|
3208
3225
|
function PinInput2(props, ref) {
|
|
3209
3226
|
const {
|
|
3210
3227
|
count = 6,
|
|
@@ -3222,12 +3239,12 @@ var PinInput = React29.forwardRef(
|
|
|
3222
3239
|
bgColor,
|
|
3223
3240
|
className
|
|
3224
3241
|
} = props;
|
|
3225
|
-
const inputRefs =
|
|
3226
|
-
const values =
|
|
3242
|
+
const inputRefs = React30.useRef([]);
|
|
3243
|
+
const values = React30.useMemo(
|
|
3227
3244
|
() => controlledValue ?? Array.from({ length: count }).fill(""),
|
|
3228
3245
|
[controlledValue, count]
|
|
3229
3246
|
);
|
|
3230
|
-
const updateValue =
|
|
3247
|
+
const updateValue = React30.useCallback((index, char) => {
|
|
3231
3248
|
const next = [...values];
|
|
3232
3249
|
next[index] = char;
|
|
3233
3250
|
onValueChange?.({ value: next });
|
|
@@ -3235,11 +3252,11 @@ var PinInput = React29.forwardRef(
|
|
|
3235
3252
|
onValueComplete?.({ value: next });
|
|
3236
3253
|
}
|
|
3237
3254
|
}, [values, onValueChange, onValueComplete]);
|
|
3238
|
-
const focusInput =
|
|
3255
|
+
const focusInput = React30.useCallback((index) => {
|
|
3239
3256
|
const clamped = Math.max(0, Math.min(index, count - 1));
|
|
3240
3257
|
inputRefs.current[clamped]?.focus();
|
|
3241
3258
|
}, [count]);
|
|
3242
|
-
const handleInput =
|
|
3259
|
+
const handleInput = React30.useCallback((index, e) => {
|
|
3243
3260
|
const target = e.currentTarget;
|
|
3244
3261
|
const char = target.value.slice(-1);
|
|
3245
3262
|
updateValue(index, char);
|
|
@@ -3247,7 +3264,7 @@ var PinInput = React29.forwardRef(
|
|
|
3247
3264
|
focusInput(index + 1);
|
|
3248
3265
|
}
|
|
3249
3266
|
}, [count, updateValue, focusInput]);
|
|
3250
|
-
const handleKeyDown =
|
|
3267
|
+
const handleKeyDown = React30.useCallback((index, e) => {
|
|
3251
3268
|
if (e.key === "Backspace") {
|
|
3252
3269
|
if (values[index]) {
|
|
3253
3270
|
updateValue(index, "");
|
|
@@ -3264,7 +3281,7 @@ var PinInput = React29.forwardRef(
|
|
|
3264
3281
|
e.preventDefault();
|
|
3265
3282
|
}
|
|
3266
3283
|
}, [count, values, updateValue, focusInput]);
|
|
3267
|
-
const handlePaste =
|
|
3284
|
+
const handlePaste = React30.useCallback((e) => {
|
|
3268
3285
|
e.preventDefault();
|
|
3269
3286
|
const pasted = e.clipboardData.getData("text/plain").trim();
|
|
3270
3287
|
if (!pasted) {
|
|
@@ -3281,18 +3298,18 @@ var PinInput = React29.forwardRef(
|
|
|
3281
3298
|
}
|
|
3282
3299
|
focusInput(Math.min(chars.length, count - 1));
|
|
3283
3300
|
}, [count, values, onValueChange, onValueComplete, focusInput]);
|
|
3284
|
-
const handleFocus =
|
|
3301
|
+
const handleFocus = React30.useCallback((e) => {
|
|
3285
3302
|
e.currentTarget.select();
|
|
3286
3303
|
}, []);
|
|
3287
|
-
const handleNoop =
|
|
3304
|
+
const handleNoop = React30.useCallback(() => {
|
|
3288
3305
|
}, []);
|
|
3289
|
-
const setInputRef =
|
|
3306
|
+
const setInputRef = React30.useCallback((index) => (el) => {
|
|
3290
3307
|
inputRefs.current[index] = el;
|
|
3291
3308
|
}, []);
|
|
3292
|
-
const onInputAtIndex =
|
|
3309
|
+
const onInputAtIndex = React30.useCallback((index) => (e) => {
|
|
3293
3310
|
handleInput(index, e);
|
|
3294
3311
|
}, [handleInput]);
|
|
3295
|
-
const onKeyDownAtIndex =
|
|
3312
|
+
const onKeyDownAtIndex = React30.useCallback((index) => (e) => {
|
|
3296
3313
|
handleKeyDown(index, e);
|
|
3297
3314
|
}, [handleKeyDown]);
|
|
3298
3315
|
const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
|
|
@@ -3353,7 +3370,7 @@ function parsePlacement2(placement) {
|
|
|
3353
3370
|
}
|
|
3354
3371
|
return { side, align };
|
|
3355
3372
|
}
|
|
3356
|
-
var PositioningContext2 =
|
|
3373
|
+
var PositioningContext2 = React30.createContext({
|
|
3357
3374
|
side: "bottom",
|
|
3358
3375
|
align: "start",
|
|
3359
3376
|
sideOffset: 4,
|
|
@@ -3387,7 +3404,7 @@ var PopoverRoot = (props) => {
|
|
|
3387
3404
|
}
|
|
3388
3405
|
};
|
|
3389
3406
|
const { side, align } = parsePlacement2(mergedPositioning.placement);
|
|
3390
|
-
const positioningValue =
|
|
3407
|
+
const positioningValue = React30.useMemo(() => ({
|
|
3391
3408
|
side,
|
|
3392
3409
|
align,
|
|
3393
3410
|
sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
|
|
@@ -3404,7 +3421,7 @@ var PopoverRoot = (props) => {
|
|
|
3404
3421
|
autoFocus,
|
|
3405
3422
|
closeOnInteractOutside
|
|
3406
3423
|
]);
|
|
3407
|
-
const handleOpenChange =
|
|
3424
|
+
const handleOpenChange = React30.useCallback((isOpen) => {
|
|
3408
3425
|
onOpenChange?.({ open: isOpen });
|
|
3409
3426
|
}, [onOpenChange]);
|
|
3410
3427
|
const placement = mergedPositioning.placement ?? "bottom-start";
|
|
@@ -3422,11 +3439,11 @@ var PopoverRoot = (props) => {
|
|
|
3422
3439
|
}
|
|
3423
3440
|
) });
|
|
3424
3441
|
};
|
|
3425
|
-
var PopoverTrigger =
|
|
3442
|
+
var PopoverTrigger = React30.forwardRef(function PopoverTrigger2(props, ref) {
|
|
3426
3443
|
const { asChild = true, ...rest } = props;
|
|
3427
3444
|
return /* @__PURE__ */ jsx(Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
|
|
3428
3445
|
});
|
|
3429
|
-
var PopoverContent =
|
|
3446
|
+
var PopoverContent = React30.forwardRef(function PopoverContent2(props, ref) {
|
|
3430
3447
|
const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
|
|
3431
3448
|
const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
|
|
3432
3449
|
const contentStyle = {
|
|
@@ -3457,7 +3474,7 @@ var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
|
|
|
3457
3474
|
}
|
|
3458
3475
|
);
|
|
3459
3476
|
});
|
|
3460
|
-
var PopoverArrow =
|
|
3477
|
+
var PopoverArrow = React30.forwardRef(function PopoverArrow2(props, ref) {
|
|
3461
3478
|
const { className, ...rest } = props;
|
|
3462
3479
|
return /* @__PURE__ */ jsx(
|
|
3463
3480
|
Popover.Arrow,
|
|
@@ -3469,7 +3486,7 @@ var PopoverArrow = React29.forwardRef(function PopoverArrow2(props, ref) {
|
|
|
3469
3486
|
}
|
|
3470
3487
|
);
|
|
3471
3488
|
});
|
|
3472
|
-
var PopoverCloseTrigger =
|
|
3489
|
+
var PopoverCloseTrigger = React30.forwardRef(function PopoverCloseTrigger2(props, ref) {
|
|
3473
3490
|
const { className, ...rest } = props;
|
|
3474
3491
|
return /* @__PURE__ */ jsx(
|
|
3475
3492
|
Popover.Close,
|
|
@@ -3483,14 +3500,14 @@ var PopoverCloseTrigger = React29.forwardRef(function PopoverCloseTrigger2(props
|
|
|
3483
3500
|
}
|
|
3484
3501
|
);
|
|
3485
3502
|
});
|
|
3486
|
-
var PopoverCloseTriggerWrapper =
|
|
3503
|
+
var PopoverCloseTriggerWrapper = React30.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
|
|
3487
3504
|
const { disabled, children, ...rest } = props;
|
|
3488
3505
|
if (disabled) {
|
|
3489
3506
|
return children;
|
|
3490
3507
|
}
|
|
3491
3508
|
return /* @__PURE__ */ jsx(Popover.Close, { ref, ...rest, asChild: true, children });
|
|
3492
3509
|
});
|
|
3493
|
-
var PopoverBody =
|
|
3510
|
+
var PopoverBody = React30.forwardRef(function PopoverBody2(props, ref) {
|
|
3494
3511
|
const {
|
|
3495
3512
|
className,
|
|
3496
3513
|
style: styleProp,
|
|
@@ -3528,7 +3545,7 @@ var PopoverBody = React29.forwardRef(function PopoverBody2(props, ref) {
|
|
|
3528
3545
|
}
|
|
3529
3546
|
);
|
|
3530
3547
|
});
|
|
3531
|
-
var PopoverHeader =
|
|
3548
|
+
var PopoverHeader = React30.forwardRef(function PopoverHeader2(props, ref) {
|
|
3532
3549
|
const { className, ...rest } = props;
|
|
3533
3550
|
return /* @__PURE__ */ jsx(
|
|
3534
3551
|
"div",
|
|
@@ -3539,7 +3556,7 @@ var PopoverHeader = React29.forwardRef(function PopoverHeader2(props, ref) {
|
|
|
3539
3556
|
}
|
|
3540
3557
|
);
|
|
3541
3558
|
});
|
|
3542
|
-
var PopoverFooter =
|
|
3559
|
+
var PopoverFooter = React30.forwardRef(function PopoverFooter2(props, ref) {
|
|
3543
3560
|
const { className, ...rest } = props;
|
|
3544
3561
|
return /* @__PURE__ */ jsx(
|
|
3545
3562
|
"div",
|
|
@@ -3550,7 +3567,7 @@ var PopoverFooter = React29.forwardRef(function PopoverFooter2(props, ref) {
|
|
|
3550
3567
|
}
|
|
3551
3568
|
);
|
|
3552
3569
|
});
|
|
3553
|
-
var PopoverTitle =
|
|
3570
|
+
var PopoverTitle = React30.forwardRef(function PopoverTitle2(props, ref) {
|
|
3554
3571
|
const { className, ...rest } = props;
|
|
3555
3572
|
return /* @__PURE__ */ jsx(
|
|
3556
3573
|
"h3",
|
|
@@ -3561,7 +3578,7 @@ var PopoverTitle = React29.forwardRef(function PopoverTitle2(props, ref) {
|
|
|
3561
3578
|
}
|
|
3562
3579
|
);
|
|
3563
3580
|
});
|
|
3564
|
-
var PopoverDescription =
|
|
3581
|
+
var PopoverDescription = React30.forwardRef(function PopoverDescription2(props, ref) {
|
|
3565
3582
|
const { className, ...rest } = props;
|
|
3566
3583
|
return /* @__PURE__ */ jsx(
|
|
3567
3584
|
"p",
|
|
@@ -3583,7 +3600,7 @@ function normalizeValue(value, min, max) {
|
|
|
3583
3600
|
if (max <= min) return 0;
|
|
3584
3601
|
return Math.round((value - min) / (max - min) * 100);
|
|
3585
3602
|
}
|
|
3586
|
-
var Progress =
|
|
3603
|
+
var Progress = React30.forwardRef(
|
|
3587
3604
|
function Progress2(props, ref) {
|
|
3588
3605
|
const {
|
|
3589
3606
|
value,
|
|
@@ -3660,12 +3677,12 @@ var SIZE_MAP = {
|
|
|
3660
3677
|
lg: { size: 48, thickness: 7, textClass: "text-sm" },
|
|
3661
3678
|
xl: { size: 64, thickness: 8, textClass: "text-sm" }
|
|
3662
3679
|
};
|
|
3663
|
-
var Ctx =
|
|
3680
|
+
var Ctx = React30.createContext({
|
|
3664
3681
|
value: 0,
|
|
3665
3682
|
size: "md",
|
|
3666
3683
|
colorPalette: "blue"
|
|
3667
3684
|
});
|
|
3668
|
-
var ProgressCircleRoot =
|
|
3685
|
+
var ProgressCircleRoot = React30.forwardRef(function ProgressCircleRoot2(props, ref) {
|
|
3669
3686
|
const {
|
|
3670
3687
|
value = 0,
|
|
3671
3688
|
size = "md",
|
|
@@ -3674,7 +3691,7 @@ var ProgressCircleRoot = React29.forwardRef(function ProgressCircleRoot2(props,
|
|
|
3674
3691
|
children,
|
|
3675
3692
|
...rest
|
|
3676
3693
|
} = props;
|
|
3677
|
-
const ctx =
|
|
3694
|
+
const ctx = React30.useMemo(
|
|
3678
3695
|
() => ({ value: value ?? null, size, colorPalette }),
|
|
3679
3696
|
[value, size, colorPalette]
|
|
3680
3697
|
);
|
|
@@ -3692,9 +3709,9 @@ var ProgressCircleRoot = React29.forwardRef(function ProgressCircleRoot2(props,
|
|
|
3692
3709
|
}
|
|
3693
3710
|
) });
|
|
3694
3711
|
});
|
|
3695
|
-
var ProgressCircleRing =
|
|
3712
|
+
var ProgressCircleRing = React30.forwardRef(function ProgressCircleRing2(props, ref) {
|
|
3696
3713
|
const { trackColor, cap, color, className, ...rest } = props;
|
|
3697
|
-
const { value, size: sizeKey } =
|
|
3714
|
+
const { value, size: sizeKey } = React30.useContext(Ctx);
|
|
3698
3715
|
const { size, thickness } = SIZE_MAP[sizeKey];
|
|
3699
3716
|
const radius = size / 2 - thickness / 2;
|
|
3700
3717
|
const circumference = 2 * Math.PI * radius;
|
|
@@ -3749,9 +3766,9 @@ var ProgressCircleRing = React29.forwardRef(function ProgressCircleRing2(props,
|
|
|
3749
3766
|
}
|
|
3750
3767
|
);
|
|
3751
3768
|
});
|
|
3752
|
-
var ProgressCircleValueText =
|
|
3769
|
+
var ProgressCircleValueText = React30.forwardRef(function ProgressCircleValueText2(props, ref) {
|
|
3753
3770
|
const { className, children, ...rest } = props;
|
|
3754
|
-
const { value, size: sizeKey } =
|
|
3771
|
+
const { value, size: sizeKey } = React30.useContext(Ctx);
|
|
3755
3772
|
const { textClass } = SIZE_MAP[sizeKey];
|
|
3756
3773
|
return /* @__PURE__ */ jsx(
|
|
3757
3774
|
"div",
|
|
@@ -3795,8 +3812,8 @@ var SIZE_CLASSES8 = {
|
|
|
3795
3812
|
label: "text-base"
|
|
3796
3813
|
}
|
|
3797
3814
|
};
|
|
3798
|
-
var RadioSizeContext =
|
|
3799
|
-
var RadioGroupBase =
|
|
3815
|
+
var RadioSizeContext = React30.createContext("md");
|
|
3816
|
+
var RadioGroupBase = React30.forwardRef(
|
|
3800
3817
|
function RadioGroup2(props, ref) {
|
|
3801
3818
|
const {
|
|
3802
3819
|
children,
|
|
@@ -3813,7 +3830,7 @@ var RadioGroupBase = React29.forwardRef(
|
|
|
3813
3830
|
className,
|
|
3814
3831
|
...rest
|
|
3815
3832
|
} = props;
|
|
3816
|
-
const handleValueChange =
|
|
3833
|
+
const handleValueChange = React30.useCallback(
|
|
3817
3834
|
(nextValue) => {
|
|
3818
3835
|
if (readOnly) return;
|
|
3819
3836
|
onValueChange?.({ value: nextValue });
|
|
@@ -3846,10 +3863,10 @@ var RadioGroupBase = React29.forwardRef(
|
|
|
3846
3863
|
var RadioGroup3 = RadioGroupBase;
|
|
3847
3864
|
var NOOP2 = () => {
|
|
3848
3865
|
};
|
|
3849
|
-
var RadioBase =
|
|
3866
|
+
var RadioBase = React30.forwardRef(
|
|
3850
3867
|
function Radio(props, ref) {
|
|
3851
3868
|
const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
|
|
3852
|
-
const size =
|
|
3869
|
+
const size = React30.useContext(RadioSizeContext);
|
|
3853
3870
|
const sizeClasses2 = SIZE_CLASSES8[size];
|
|
3854
3871
|
return /* @__PURE__ */ jsxs(
|
|
3855
3872
|
"label",
|
|
@@ -3911,23 +3928,23 @@ var RadioBase = React29.forwardRef(
|
|
|
3911
3928
|
var Radio2 = RadioBase;
|
|
3912
3929
|
var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
|
|
3913
3930
|
var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
|
|
3914
|
-
var Rating =
|
|
3931
|
+
var Rating = React30.forwardRef(
|
|
3915
3932
|
function Rating2(props, ref) {
|
|
3916
3933
|
const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
|
|
3917
|
-
const [value, setValue] =
|
|
3918
|
-
const [hoveredIndex, setHoveredIndex] =
|
|
3934
|
+
const [value, setValue] = React30.useState(defaultValue);
|
|
3935
|
+
const [hoveredIndex, setHoveredIndex] = React30.useState(-1);
|
|
3919
3936
|
const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
|
|
3920
3937
|
const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
|
|
3921
|
-
const handleClick =
|
|
3938
|
+
const handleClick = React30.useCallback((index) => () => {
|
|
3922
3939
|
if (readOnly) return;
|
|
3923
3940
|
setValue(index);
|
|
3924
3941
|
onValueChange?.({ value: index });
|
|
3925
3942
|
}, [readOnly, onValueChange]);
|
|
3926
|
-
const handleMouseEnter =
|
|
3943
|
+
const handleMouseEnter = React30.useCallback((index) => () => {
|
|
3927
3944
|
if (readOnly) return;
|
|
3928
3945
|
setHoveredIndex(index);
|
|
3929
3946
|
}, [readOnly]);
|
|
3930
|
-
const handleMouseLeave =
|
|
3947
|
+
const handleMouseLeave = React30.useCallback(() => {
|
|
3931
3948
|
setHoveredIndex(-1);
|
|
3932
3949
|
}, []);
|
|
3933
3950
|
return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
|
|
@@ -3961,8 +3978,8 @@ function createListCollection(config) {
|
|
|
3961
3978
|
var ArrowIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
3962
3979
|
var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M16.667 5L7.5 14.167 3.333 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
|
|
3963
3980
|
function FilterInput({ placeholder, initialValue = "", onChange }) {
|
|
3964
|
-
const [value, setValue] =
|
|
3965
|
-
const handleChange =
|
|
3981
|
+
const [value, setValue] = React30.useState(initialValue);
|
|
3982
|
+
const handleChange = React30.useCallback((e) => {
|
|
3966
3983
|
setValue(e.target.value);
|
|
3967
3984
|
onChange?.(e.target.value);
|
|
3968
3985
|
}, [onChange]);
|
|
@@ -3981,15 +3998,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
|
|
|
3981
3998
|
}
|
|
3982
3999
|
);
|
|
3983
4000
|
}
|
|
3984
|
-
var SelectInternalContext =
|
|
4001
|
+
var SelectInternalContext = React30.createContext(null);
|
|
3985
4002
|
function useSelectInternalContext() {
|
|
3986
|
-
const ctx =
|
|
4003
|
+
const ctx = React30.useContext(SelectInternalContext);
|
|
3987
4004
|
if (!ctx) {
|
|
3988
4005
|
throw new Error("Select compound components must be rendered inside <SelectRoot>");
|
|
3989
4006
|
}
|
|
3990
4007
|
return ctx;
|
|
3991
4008
|
}
|
|
3992
|
-
var SelectRoot =
|
|
4009
|
+
var SelectRoot = React30.forwardRef(
|
|
3993
4010
|
function SelectRoot2(props, ref) {
|
|
3994
4011
|
const {
|
|
3995
4012
|
children,
|
|
@@ -4020,21 +4037,21 @@ var SelectRoot = React29.forwardRef(
|
|
|
4020
4037
|
hideFrom: _hideFrom
|
|
4021
4038
|
} = props;
|
|
4022
4039
|
const collection = collectionProp ?? createListCollection({ items: [] });
|
|
4023
|
-
const [internalValue, setInternalValue] =
|
|
4040
|
+
const [internalValue, setInternalValue] = React30.useState(defaultValueArr ?? []);
|
|
4024
4041
|
const currentValue = valueProp ?? internalValue;
|
|
4025
|
-
const selectedItems =
|
|
4042
|
+
const selectedItems = React30.useMemo(() => {
|
|
4026
4043
|
return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
|
|
4027
4044
|
}, [currentValue, collection.items]);
|
|
4028
|
-
const [open, setOpen] =
|
|
4045
|
+
const [open, setOpen] = React30.useState(defaultOpen ?? false);
|
|
4029
4046
|
const isOpen = openProp ?? open;
|
|
4030
|
-
const handleOpenChange =
|
|
4047
|
+
const handleOpenChange = React30.useCallback((nextOpen) => {
|
|
4031
4048
|
setOpen(nextOpen);
|
|
4032
4049
|
onOpenChange?.(nextOpen);
|
|
4033
4050
|
if (!nextOpen) {
|
|
4034
4051
|
onInteractOutside?.();
|
|
4035
4052
|
}
|
|
4036
4053
|
}, [onOpenChange, onInteractOutside]);
|
|
4037
|
-
const handleRadixValueChange =
|
|
4054
|
+
const handleRadixValueChange = React30.useCallback((radixValue) => {
|
|
4038
4055
|
const nextArr = [radixValue];
|
|
4039
4056
|
if (!valueProp) {
|
|
4040
4057
|
setInternalValue(nextArr);
|
|
@@ -4042,7 +4059,7 @@ var SelectRoot = React29.forwardRef(
|
|
|
4042
4059
|
const items = collection.items.filter((item) => nextArr.includes(item.value));
|
|
4043
4060
|
onValueChangeProp?.({ value: nextArr, items });
|
|
4044
4061
|
}, [valueProp, collection.items, onValueChangeProp]);
|
|
4045
|
-
const ctxValue =
|
|
4062
|
+
const ctxValue = React30.useMemo(() => ({
|
|
4046
4063
|
value: currentValue,
|
|
4047
4064
|
selectedItems,
|
|
4048
4065
|
collection,
|
|
@@ -4062,7 +4079,7 @@ var SelectRoot = React29.forwardRef(
|
|
|
4062
4079
|
if (typeof v === "string") return v;
|
|
4063
4080
|
return v.base ?? v.lg ?? Object.values(v)[0];
|
|
4064
4081
|
};
|
|
4065
|
-
const inlineStyle =
|
|
4082
|
+
const inlineStyle = React30.useMemo(() => {
|
|
4066
4083
|
const s = { ...style };
|
|
4067
4084
|
const rw = resolveVal(w);
|
|
4068
4085
|
if (rw) s.width = rw;
|
|
@@ -4100,7 +4117,7 @@ var SelectRoot = React29.forwardRef(
|
|
|
4100
4117
|
) });
|
|
4101
4118
|
}
|
|
4102
4119
|
);
|
|
4103
|
-
var SelectControl =
|
|
4120
|
+
var SelectControl = React30.forwardRef(
|
|
4104
4121
|
function SelectControl2(props, ref) {
|
|
4105
4122
|
const { children, noIndicator, triggerProps, loading, defaultValue } = props;
|
|
4106
4123
|
const ctx = useSelectInternalContext();
|
|
@@ -4137,11 +4154,11 @@ var SelectControl = React29.forwardRef(
|
|
|
4137
4154
|
return trigger;
|
|
4138
4155
|
}
|
|
4139
4156
|
);
|
|
4140
|
-
var SelectClearTrigger =
|
|
4157
|
+
var SelectClearTrigger = React30.forwardRef(
|
|
4141
4158
|
function SelectClearTrigger2(props, ref) {
|
|
4142
4159
|
const { className, ...rest } = props;
|
|
4143
4160
|
const ctx = useSelectInternalContext();
|
|
4144
|
-
const handleClick =
|
|
4161
|
+
const handleClick = React30.useCallback(() => {
|
|
4145
4162
|
ctx.onValueChange({ value: [], items: [] });
|
|
4146
4163
|
}, [ctx]);
|
|
4147
4164
|
return /* @__PURE__ */ jsx(
|
|
@@ -4158,7 +4175,7 @@ var SelectClearTrigger = React29.forwardRef(
|
|
|
4158
4175
|
);
|
|
4159
4176
|
}
|
|
4160
4177
|
);
|
|
4161
|
-
var SelectContent =
|
|
4178
|
+
var SelectContent = React30.forwardRef(
|
|
4162
4179
|
function SelectContent2(props, ref) {
|
|
4163
4180
|
const { portalled = true, portalRef, children, className, ...rest } = props;
|
|
4164
4181
|
const content = /* @__PURE__ */ jsx(
|
|
@@ -4185,7 +4202,7 @@ var SelectContent = React29.forwardRef(
|
|
|
4185
4202
|
return content;
|
|
4186
4203
|
}
|
|
4187
4204
|
);
|
|
4188
|
-
var SelectItem =
|
|
4205
|
+
var SelectItem = React30.forwardRef(
|
|
4189
4206
|
function SelectItem2(props, ref) {
|
|
4190
4207
|
const { item, children, className, ...rest } = props;
|
|
4191
4208
|
return /* @__PURE__ */ jsxs(
|
|
@@ -4213,7 +4230,7 @@ var SelectItem = React29.forwardRef(
|
|
|
4213
4230
|
);
|
|
4214
4231
|
}
|
|
4215
4232
|
);
|
|
4216
|
-
var SelectValueText =
|
|
4233
|
+
var SelectValueText = React30.forwardRef(
|
|
4217
4234
|
function SelectValueText2(props, ref) {
|
|
4218
4235
|
const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
|
|
4219
4236
|
const ctx = useSelectInternalContext();
|
|
@@ -4269,7 +4286,7 @@ var SelectValueText = React29.forwardRef(
|
|
|
4269
4286
|
);
|
|
4270
4287
|
}
|
|
4271
4288
|
);
|
|
4272
|
-
var SelectItemGroup =
|
|
4289
|
+
var SelectItemGroup = React30.forwardRef(
|
|
4273
4290
|
function SelectItemGroup2(props, ref) {
|
|
4274
4291
|
const { children, label, className, ...rest } = props;
|
|
4275
4292
|
return /* @__PURE__ */ jsxs(RadixSelect.Group, { ref, className: cn("py-1", className), ...rest, children: [
|
|
@@ -4280,7 +4297,7 @@ var SelectItemGroup = React29.forwardRef(
|
|
|
4280
4297
|
);
|
|
4281
4298
|
var SelectLabel = RadixSelect.Label;
|
|
4282
4299
|
var SelectItemText = RadixSelect.ItemText;
|
|
4283
|
-
var Select =
|
|
4300
|
+
var Select = React30.forwardRef((props, ref) => {
|
|
4284
4301
|
const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
|
|
4285
4302
|
return /* @__PURE__ */ jsxs(
|
|
4286
4303
|
SelectRoot,
|
|
@@ -4302,7 +4319,7 @@ var Select = React29.forwardRef((props, ref) => {
|
|
|
4302
4319
|
) }),
|
|
4303
4320
|
/* @__PURE__ */ jsxs(SelectContent, { portalled, ...contentProps, children: [
|
|
4304
4321
|
contentHeader,
|
|
4305
|
-
collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(
|
|
4322
|
+
collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React30.Fragment, { children: [
|
|
4306
4323
|
/* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
|
|
4307
4324
|
item.afterElement
|
|
4308
4325
|
] }, item.value))
|
|
@@ -4311,19 +4328,19 @@ var Select = React29.forwardRef((props, ref) => {
|
|
|
4311
4328
|
}
|
|
4312
4329
|
);
|
|
4313
4330
|
});
|
|
4314
|
-
var SelectAsync =
|
|
4331
|
+
var SelectAsync = React30.forwardRef((props, ref) => {
|
|
4315
4332
|
const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
|
|
4316
|
-
const [collection, setCollection] =
|
|
4317
|
-
const [inputValue, setInputValue] =
|
|
4318
|
-
const [value, setValue] =
|
|
4333
|
+
const [collection, setCollection] = React30.useState(createListCollection({ items: [] }));
|
|
4334
|
+
const [inputValue, setInputValue] = React30.useState("");
|
|
4335
|
+
const [value, setValue] = React30.useState([]);
|
|
4319
4336
|
const debouncedInputValue = useDebounce(inputValue, 300);
|
|
4320
|
-
|
|
4337
|
+
React30.useEffect(() => {
|
|
4321
4338
|
loadOptions(debouncedInputValue, value).then(setCollection);
|
|
4322
4339
|
}, [debouncedInputValue, loadOptions, value]);
|
|
4323
|
-
const handleFilterChange =
|
|
4340
|
+
const handleFilterChange = React30.useCallback((val) => {
|
|
4324
4341
|
setInputValue(val);
|
|
4325
4342
|
}, []);
|
|
4326
|
-
const handleValueChange =
|
|
4343
|
+
const handleValueChange = React30.useCallback(({ value: v, items }) => {
|
|
4327
4344
|
setValue(v);
|
|
4328
4345
|
onValueChange?.({ value: v, items });
|
|
4329
4346
|
}, [onValueChange]);
|
|
@@ -4382,7 +4399,7 @@ var VERTICAL_SIZE_CLASSES = {
|
|
|
4382
4399
|
md: "border-l-2",
|
|
4383
4400
|
lg: "border-l-[3px]"
|
|
4384
4401
|
};
|
|
4385
|
-
var Separator2 =
|
|
4402
|
+
var Separator2 = React30__default.forwardRef(
|
|
4386
4403
|
function Separator3({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
|
|
4387
4404
|
const isVertical = orientation === "vertical";
|
|
4388
4405
|
return /* @__PURE__ */ jsx(
|
|
@@ -4406,7 +4423,7 @@ var Separator2 = React29__default.forwardRef(
|
|
|
4406
4423
|
);
|
|
4407
4424
|
var THUMB_SIZE = 20;
|
|
4408
4425
|
var TRACK_HEIGHT = 6;
|
|
4409
|
-
var Slider =
|
|
4426
|
+
var Slider = React30.forwardRef(
|
|
4410
4427
|
function Slider2(props, ref) {
|
|
4411
4428
|
const {
|
|
4412
4429
|
marks: marksProp,
|
|
@@ -4525,7 +4542,7 @@ var SIZE_CLASSES9 = {
|
|
|
4525
4542
|
label: "text-base"
|
|
4526
4543
|
}
|
|
4527
4544
|
};
|
|
4528
|
-
var SwitchBase =
|
|
4545
|
+
var SwitchBase = React30.forwardRef(
|
|
4529
4546
|
function Switch(props, ref) {
|
|
4530
4547
|
const {
|
|
4531
4548
|
inputProps,
|
|
@@ -4544,10 +4561,10 @@ var SwitchBase = React29.forwardRef(
|
|
|
4544
4561
|
className,
|
|
4545
4562
|
...rest
|
|
4546
4563
|
} = props;
|
|
4547
|
-
const [internalChecked, setInternalChecked] =
|
|
4564
|
+
const [internalChecked, setInternalChecked] = React30.useState(defaultChecked ?? false);
|
|
4548
4565
|
const isControlled = checkedProp !== void 0;
|
|
4549
4566
|
const checkedState = isControlled ? checkedProp : internalChecked;
|
|
4550
|
-
const handleCheckedChange =
|
|
4567
|
+
const handleCheckedChange = React30.useCallback(
|
|
4551
4568
|
(nextChecked) => {
|
|
4552
4569
|
if (!isControlled) {
|
|
4553
4570
|
setInternalChecked(nextChecked);
|
|
@@ -4812,7 +4829,7 @@ function resolveResponsive(value) {
|
|
|
4812
4829
|
}
|
|
4813
4830
|
return void 0;
|
|
4814
4831
|
}
|
|
4815
|
-
var TableRoot =
|
|
4832
|
+
var TableRoot = React30.forwardRef(
|
|
4816
4833
|
function TableRoot2(props, ref) {
|
|
4817
4834
|
const { className, style: styleProp, children, ...other } = props;
|
|
4818
4835
|
const rawMinW = other.minWidth ?? other.minW;
|
|
@@ -4835,7 +4852,7 @@ var TableRoot = React29.forwardRef(
|
|
|
4835
4852
|
);
|
|
4836
4853
|
}
|
|
4837
4854
|
);
|
|
4838
|
-
var TableHeader =
|
|
4855
|
+
var TableHeader = React30.forwardRef(
|
|
4839
4856
|
function TableHeader2(props, ref) {
|
|
4840
4857
|
const { className, style: styleProp, children, ...other } = props;
|
|
4841
4858
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4852,7 +4869,7 @@ var TableHeader = React29.forwardRef(
|
|
|
4852
4869
|
);
|
|
4853
4870
|
}
|
|
4854
4871
|
);
|
|
4855
|
-
var TableBody =
|
|
4872
|
+
var TableBody = React30.forwardRef(
|
|
4856
4873
|
function TableBody2(props, ref) {
|
|
4857
4874
|
const { className, style: styleProp, children, ...other } = props;
|
|
4858
4875
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4869,7 +4886,7 @@ var TableBody = React29.forwardRef(
|
|
|
4869
4886
|
);
|
|
4870
4887
|
}
|
|
4871
4888
|
);
|
|
4872
|
-
var TableRow =
|
|
4889
|
+
var TableRow = React30.forwardRef(
|
|
4873
4890
|
function TableRow2(props, ref) {
|
|
4874
4891
|
const { className, style: styleProp, children, ...other } = props;
|
|
4875
4892
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4886,7 +4903,7 @@ var TableRow = React29.forwardRef(
|
|
|
4886
4903
|
);
|
|
4887
4904
|
}
|
|
4888
4905
|
);
|
|
4889
|
-
var TableCell =
|
|
4906
|
+
var TableCell = React30.forwardRef(
|
|
4890
4907
|
function TableCell2(props, ref) {
|
|
4891
4908
|
const { isNumeric, className, style: styleProp, children, ...other } = props;
|
|
4892
4909
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4907,7 +4924,7 @@ var TableCell = React29.forwardRef(
|
|
|
4907
4924
|
);
|
|
4908
4925
|
}
|
|
4909
4926
|
);
|
|
4910
|
-
var TableColumnHeader =
|
|
4927
|
+
var TableColumnHeader = React30.forwardRef(
|
|
4911
4928
|
function TableColumnHeader2(props, ref) {
|
|
4912
4929
|
const { isNumeric, className, style: styleProp, children, ...other } = props;
|
|
4913
4930
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4934,7 +4951,7 @@ var TableColumnHeader = React29.forwardRef(
|
|
|
4934
4951
|
);
|
|
4935
4952
|
var TableColumnHeaderSortable = (props) => {
|
|
4936
4953
|
const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
|
|
4937
|
-
const handleSortToggle =
|
|
4954
|
+
const handleSortToggle = React30.useCallback(() => {
|
|
4938
4955
|
onSortToggle(sortField);
|
|
4939
4956
|
}, [onSortToggle, sortField]);
|
|
4940
4957
|
const isActive = sortValue.includes(sortField);
|
|
@@ -4960,16 +4977,16 @@ var TableColumnHeaderSortable = (props) => {
|
|
|
4960
4977
|
var ACTION_BAR_SHADOW = "0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)";
|
|
4961
4978
|
var TableHeaderSticky = (props) => {
|
|
4962
4979
|
const { top, children, className, style: styleProp, ...rest } = props;
|
|
4963
|
-
const ref =
|
|
4964
|
-
const [isStuck, setIsStuck] =
|
|
4965
|
-
const handleScroll =
|
|
4980
|
+
const ref = React30.useRef(null);
|
|
4981
|
+
const [isStuck, setIsStuck] = React30.useState(false);
|
|
4982
|
+
const handleScroll = React30.useCallback(() => {
|
|
4966
4983
|
if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
|
|
4967
4984
|
setIsStuck(true);
|
|
4968
4985
|
} else {
|
|
4969
4986
|
setIsStuck(false);
|
|
4970
4987
|
}
|
|
4971
4988
|
}, [top]);
|
|
4972
|
-
|
|
4989
|
+
React30.useEffect(() => {
|
|
4973
4990
|
const throttledHandleScroll = throttle(handleScroll, 300);
|
|
4974
4991
|
window.addEventListener("scroll", throttledHandleScroll);
|
|
4975
4992
|
return () => {
|
|
@@ -4991,7 +5008,7 @@ var TableHeaderSticky = (props) => {
|
|
|
4991
5008
|
}
|
|
4992
5009
|
);
|
|
4993
5010
|
};
|
|
4994
|
-
var TableCaption =
|
|
5011
|
+
var TableCaption = React30.forwardRef(
|
|
4995
5012
|
function TableCaption2(props, ref) {
|
|
4996
5013
|
const { className, style: styleProp, children, ...other } = props;
|
|
4997
5014
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -5008,7 +5025,7 @@ var TableCaption = React29.forwardRef(
|
|
|
5008
5025
|
);
|
|
5009
5026
|
}
|
|
5010
5027
|
);
|
|
5011
|
-
var TableFooter =
|
|
5028
|
+
var TableFooter = React30.forwardRef(
|
|
5012
5029
|
function TableFooter2(props, ref) {
|
|
5013
5030
|
const { className, style: styleProp, children, ...other } = props;
|
|
5014
5031
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -5025,7 +5042,7 @@ var TableFooter = React29.forwardRef(
|
|
|
5025
5042
|
);
|
|
5026
5043
|
}
|
|
5027
5044
|
);
|
|
5028
|
-
var TableScrollWrapper =
|
|
5045
|
+
var TableScrollWrapper = React30.forwardRef(
|
|
5029
5046
|
function TableScrollWrapper2(props, ref) {
|
|
5030
5047
|
const { className, children, ...rest } = props;
|
|
5031
5048
|
return /* @__PURE__ */ jsx(
|
|
@@ -5044,7 +5061,7 @@ var ROOT_SIZE_CLASSES = {
|
|
|
5044
5061
|
md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
|
|
5045
5062
|
free: ""
|
|
5046
5063
|
};
|
|
5047
|
-
var TabsRoot =
|
|
5064
|
+
var TabsRoot = React30.forwardRef(
|
|
5048
5065
|
function TabsRoot2(props, ref) {
|
|
5049
5066
|
const {
|
|
5050
5067
|
variant = "solid",
|
|
@@ -5056,7 +5073,7 @@ var TabsRoot = React29.forwardRef(
|
|
|
5056
5073
|
className,
|
|
5057
5074
|
...rest
|
|
5058
5075
|
} = props;
|
|
5059
|
-
const handleValueChange =
|
|
5076
|
+
const handleValueChange = React30.useCallback(
|
|
5060
5077
|
(value) => {
|
|
5061
5078
|
if (!onValueChange) return;
|
|
5062
5079
|
onValueChange({ value });
|
|
@@ -5081,7 +5098,7 @@ var TabsRoot = React29.forwardRef(
|
|
|
5081
5098
|
);
|
|
5082
5099
|
}
|
|
5083
5100
|
);
|
|
5084
|
-
var TabsList =
|
|
5101
|
+
var TabsList = React30.forwardRef(
|
|
5085
5102
|
function TabsList2(props, ref) {
|
|
5086
5103
|
const {
|
|
5087
5104
|
className,
|
|
@@ -5135,7 +5152,7 @@ var TRIGGER_VARIANT_CLASSES = {
|
|
|
5135
5152
|
segmented: "bg-transparent text-text-primary border-2 border-solid border-selected-control-bg hover:text-hover data-[state=active]:text-selected-control-text data-[state=active]:bg-selected-control-bg data-[state=active]:border-selected-control-bg data-[state=active]:hover:text-selected-control-text",
|
|
5136
5153
|
unstyled: ""
|
|
5137
5154
|
};
|
|
5138
|
-
var TabsTrigger =
|
|
5155
|
+
var TabsTrigger = React30.forwardRef(
|
|
5139
5156
|
function TabsTrigger2(props, ref) {
|
|
5140
5157
|
const {
|
|
5141
5158
|
className,
|
|
@@ -5155,7 +5172,7 @@ var TabsTrigger = React29.forwardRef(
|
|
|
5155
5172
|
visibility: _visibility,
|
|
5156
5173
|
...rest
|
|
5157
5174
|
} = props;
|
|
5158
|
-
const internalRef =
|
|
5175
|
+
const internalRef = React30.useRef(null);
|
|
5159
5176
|
const mergedRef = useMergedRef(ref, internalRef);
|
|
5160
5177
|
const { variant, size, fitted } = useTabsContext(internalRef);
|
|
5161
5178
|
return /* @__PURE__ */ jsx(
|
|
@@ -5175,7 +5192,7 @@ var TabsTrigger = React29.forwardRef(
|
|
|
5175
5192
|
);
|
|
5176
5193
|
}
|
|
5177
5194
|
);
|
|
5178
|
-
var TabsContent =
|
|
5195
|
+
var TabsContent = React30.forwardRef(
|
|
5179
5196
|
function TabsContent2(props, ref) {
|
|
5180
5197
|
const { className, padding: _padding, ...rest } = props;
|
|
5181
5198
|
return /* @__PURE__ */ jsx(
|
|
@@ -5209,8 +5226,8 @@ var TabsCounter = ({ count }) => {
|
|
|
5209
5226
|
);
|
|
5210
5227
|
};
|
|
5211
5228
|
function useTabsContext(triggerRef) {
|
|
5212
|
-
const [ctx, setCtx] =
|
|
5213
|
-
|
|
5229
|
+
const [ctx, setCtx] = React30.useState({ variant: "solid", size: "md", fitted: false });
|
|
5230
|
+
React30.useEffect(() => {
|
|
5214
5231
|
const el = triggerRef.current;
|
|
5215
5232
|
if (!el) return;
|
|
5216
5233
|
const root = el.closest("[data-variant]");
|
|
@@ -5224,7 +5241,7 @@ function useTabsContext(triggerRef) {
|
|
|
5224
5241
|
return ctx;
|
|
5225
5242
|
}
|
|
5226
5243
|
function useMergedRef(...refs) {
|
|
5227
|
-
return
|
|
5244
|
+
return React30.useCallback(
|
|
5228
5245
|
(instance) => {
|
|
5229
5246
|
for (const ref of refs) {
|
|
5230
5247
|
if (!ref) continue;
|
|
@@ -5262,7 +5279,7 @@ var TAG_SELECTED_CLASSES = [
|
|
|
5262
5279
|
"hover:opacity-76"
|
|
5263
5280
|
].join(" ");
|
|
5264
5281
|
var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
|
|
5265
|
-
var Tag =
|
|
5282
|
+
var Tag = React30.forwardRef(
|
|
5266
5283
|
function Tag2(props, ref) {
|
|
5267
5284
|
const {
|
|
5268
5285
|
variant,
|
|
@@ -5349,7 +5366,7 @@ var TEXTAREA_VARIANT_CLASSES = {
|
|
|
5349
5366
|
filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
|
|
5350
5367
|
unstyled: "border-0 bg-transparent p-0"
|
|
5351
5368
|
};
|
|
5352
|
-
var Textarea =
|
|
5369
|
+
var Textarea = React30__default.forwardRef(
|
|
5353
5370
|
({ size = "md", variant = "outline", className, ...rest }, ref) => {
|
|
5354
5371
|
return /* @__PURE__ */ jsx(
|
|
5355
5372
|
"textarea",
|
|
@@ -5452,9 +5469,6 @@ var Toaster = () => {
|
|
|
5452
5469
|
}
|
|
5453
5470
|
);
|
|
5454
5471
|
};
|
|
5455
|
-
function Provider(props) {
|
|
5456
|
-
return /* @__PURE__ */ jsx(ColorModeProvider, { ...props });
|
|
5457
|
-
}
|
|
5458
5472
|
function fmt(n, decimals = 2) {
|
|
5459
5473
|
if (n === void 0 || n === null) return "-";
|
|
5460
5474
|
return n.toFixed(decimals);
|
|
@@ -5488,7 +5502,7 @@ function QuoteCell({ value, highlight, align = "right", onClick, className }) {
|
|
|
5488
5502
|
}
|
|
5489
5503
|
var CALL_HEADERS = ["Bid", "Ask", "Last", "Vol", "OI", "IV", "Delta"];
|
|
5490
5504
|
var PUT_HEADERS = ["Delta", "IV", "OI", "Vol", "Last", "Ask", "Bid"];
|
|
5491
|
-
var OptionChain =
|
|
5505
|
+
var OptionChain = React30.forwardRef(
|
|
5492
5506
|
function OptionChain2(props, ref) {
|
|
5493
5507
|
const {
|
|
5494
5508
|
symbol: _symbol,
|
|
@@ -5499,7 +5513,7 @@ var OptionChain = React29.forwardRef(
|
|
|
5499
5513
|
className,
|
|
5500
5514
|
...rest
|
|
5501
5515
|
} = props;
|
|
5502
|
-
const handleClick =
|
|
5516
|
+
const handleClick = React30.useCallback(
|
|
5503
5517
|
(quote, type, strike) => {
|
|
5504
5518
|
if (!quote || !onSelectContract) return;
|
|
5505
5519
|
onSelectContract({
|
|
@@ -5679,7 +5693,7 @@ function GreekItem({ def, value, compact }) {
|
|
|
5679
5693
|
}
|
|
5680
5694
|
);
|
|
5681
5695
|
}
|
|
5682
|
-
var GreeksDisplay =
|
|
5696
|
+
var GreeksDisplay = React30.forwardRef(
|
|
5683
5697
|
function GreeksDisplay2(props, ref) {
|
|
5684
5698
|
const {
|
|
5685
5699
|
delta,
|
|
@@ -5910,7 +5924,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
|
|
|
5910
5924
|
)
|
|
5911
5925
|
] });
|
|
5912
5926
|
}
|
|
5913
|
-
var StrategyBuilder =
|
|
5927
|
+
var StrategyBuilder = React30.forwardRef(
|
|
5914
5928
|
function StrategyBuilder2(props, ref) {
|
|
5915
5929
|
const {
|
|
5916
5930
|
underlying,
|
|
@@ -5922,12 +5936,12 @@ var StrategyBuilder = React29.forwardRef(
|
|
|
5922
5936
|
...rest
|
|
5923
5937
|
} = props;
|
|
5924
5938
|
const defaultExp = expirations[0] ?? "";
|
|
5925
|
-
const [strategyType, setStrategyType] =
|
|
5926
|
-
const [legs, setLegs] =
|
|
5939
|
+
const [strategyType, setStrategyType] = React30.useState("bull_call_spread");
|
|
5940
|
+
const [legs, setLegs] = React30.useState(() => {
|
|
5927
5941
|
const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
|
|
5928
5942
|
return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
|
|
5929
5943
|
});
|
|
5930
|
-
const handleStrategyChange =
|
|
5944
|
+
const handleStrategyChange = React30.useCallback(
|
|
5931
5945
|
(e) => {
|
|
5932
5946
|
const type = e.target.value;
|
|
5933
5947
|
setStrategyType(type);
|
|
@@ -5938,7 +5952,7 @@ var StrategyBuilder = React29.forwardRef(
|
|
|
5938
5952
|
},
|
|
5939
5953
|
[strikes, spotPrice, defaultExp]
|
|
5940
5954
|
);
|
|
5941
|
-
const handleLegChange =
|
|
5955
|
+
const handleLegChange = React30.useCallback(
|
|
5942
5956
|
(index, leg) => {
|
|
5943
5957
|
setLegs((prev) => {
|
|
5944
5958
|
const next = [...prev];
|
|
@@ -5948,13 +5962,13 @@ var StrategyBuilder = React29.forwardRef(
|
|
|
5948
5962
|
},
|
|
5949
5963
|
[]
|
|
5950
5964
|
);
|
|
5951
|
-
const handleLegRemove =
|
|
5965
|
+
const handleLegRemove = React30.useCallback(
|
|
5952
5966
|
(index) => {
|
|
5953
5967
|
setLegs((prev) => prev.filter((_, i) => i !== index));
|
|
5954
5968
|
},
|
|
5955
5969
|
[]
|
|
5956
5970
|
);
|
|
5957
|
-
const handleAddLeg =
|
|
5971
|
+
const handleAddLeg = React30.useCallback(() => {
|
|
5958
5972
|
if (legs.length >= 4) return;
|
|
5959
5973
|
const atm = findATM(strikes, spotPrice);
|
|
5960
5974
|
setLegs((prev) => [
|
|
@@ -5962,14 +5976,14 @@ var StrategyBuilder = React29.forwardRef(
|
|
|
5962
5976
|
{ action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
|
|
5963
5977
|
]);
|
|
5964
5978
|
}, [legs.length, strikes, spotPrice, defaultExp]);
|
|
5965
|
-
const netPremium =
|
|
5979
|
+
const netPremium = React30.useMemo(() => {
|
|
5966
5980
|
return legs.reduce((sum, leg) => {
|
|
5967
5981
|
if (leg.premium === void 0) return sum;
|
|
5968
5982
|
const sign = leg.action === "buy" ? -1 : 1;
|
|
5969
5983
|
return sum + sign * leg.premium * leg.quantity;
|
|
5970
5984
|
}, 0);
|
|
5971
5985
|
}, [legs]);
|
|
5972
|
-
const handleSubmit =
|
|
5986
|
+
const handleSubmit = React30.useCallback(() => {
|
|
5973
5987
|
if (!onSubmit || legs.length === 0) return;
|
|
5974
5988
|
onSubmit({
|
|
5975
5989
|
type: strategyType,
|
|
@@ -6090,7 +6104,7 @@ function buildPath(points, vb, width, height) {
|
|
|
6090
6104
|
return parts.join(" ");
|
|
6091
6105
|
}
|
|
6092
6106
|
var LEG_COLORS = ["#6366f1", "#f59e0b", "#ec4899", "#06b6d4"];
|
|
6093
|
-
var PnlDiagram =
|
|
6107
|
+
var PnlDiagram = React30.forwardRef(
|
|
6094
6108
|
function PnlDiagram2(props, ref) {
|
|
6095
6109
|
const {
|
|
6096
6110
|
legs,
|
|
@@ -6099,10 +6113,10 @@ var PnlDiagram = React29.forwardRef(
|
|
|
6099
6113
|
className,
|
|
6100
6114
|
...rest
|
|
6101
6115
|
} = props;
|
|
6102
|
-
const containerRef =
|
|
6103
|
-
const [hoverX, setHoverX] =
|
|
6104
|
-
const [dims, setDims] =
|
|
6105
|
-
|
|
6116
|
+
const containerRef = React30.useRef(null);
|
|
6117
|
+
const [hoverX, setHoverX] = React30.useState(null);
|
|
6118
|
+
const [dims, setDims] = React30.useState({ width: 600, height: 240 });
|
|
6119
|
+
React30.useEffect(() => {
|
|
6106
6120
|
const el = containerRef.current;
|
|
6107
6121
|
if (!el) return;
|
|
6108
6122
|
const observer = new ResizeObserver((entries) => {
|
|
@@ -6125,7 +6139,7 @@ var PnlDiagram = React29.forwardRef(
|
|
|
6125
6139
|
const xMax = maxStrike + range * 0.3;
|
|
6126
6140
|
const SAMPLES = 200;
|
|
6127
6141
|
const step = (xMax - xMin) / SAMPLES;
|
|
6128
|
-
const combinedPoints =
|
|
6142
|
+
const combinedPoints = React30.useMemo(() => {
|
|
6129
6143
|
const pts = [];
|
|
6130
6144
|
for (let i = 0; i <= SAMPLES; i++) {
|
|
6131
6145
|
const price = xMin + i * step;
|
|
@@ -6133,7 +6147,7 @@ var PnlDiagram = React29.forwardRef(
|
|
|
6133
6147
|
}
|
|
6134
6148
|
return pts;
|
|
6135
6149
|
}, [legs, multiplier, xMin, step]);
|
|
6136
|
-
const legPointSets =
|
|
6150
|
+
const legPointSets = React30.useMemo(() => {
|
|
6137
6151
|
return legs.map((leg) => {
|
|
6138
6152
|
const pts = [];
|
|
6139
6153
|
for (let i = 0; i <= SAMPLES; i++) {
|
|
@@ -6154,7 +6168,7 @@ var PnlDiagram = React29.forwardRef(
|
|
|
6154
6168
|
const chartH = height - PADDING.top - PADDING.bottom;
|
|
6155
6169
|
const scaleX = (x) => PADDING.left + (x - vb.xMin) / (vb.xMax - vb.xMin) * chartW;
|
|
6156
6170
|
const scaleY = (y) => PADDING.top + chartH - (y - vb.yMin) / (vb.yMax - vb.yMin) * chartH;
|
|
6157
|
-
const breakevens =
|
|
6171
|
+
const breakevens = React30.useMemo(() => {
|
|
6158
6172
|
const pts = [];
|
|
6159
6173
|
for (let i = 1; i < combinedPoints.length; i++) {
|
|
6160
6174
|
const prev = combinedPoints[i - 1];
|
|
@@ -6171,7 +6185,7 @@ var PnlDiagram = React29.forwardRef(
|
|
|
6171
6185
|
const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
|
|
6172
6186
|
const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
|
|
6173
6187
|
const zeroY = scaleY(0);
|
|
6174
|
-
const handleMouseMove =
|
|
6188
|
+
const handleMouseMove = React30.useCallback(
|
|
6175
6189
|
(e) => {
|
|
6176
6190
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
6177
6191
|
const mouseX = e.clientX - rect.left;
|
|
@@ -6184,7 +6198,7 @@ var PnlDiagram = React29.forwardRef(
|
|
|
6184
6198
|
},
|
|
6185
6199
|
[vb.xMin, vb.xMax, chartW]
|
|
6186
6200
|
);
|
|
6187
|
-
const handleMouseLeave =
|
|
6201
|
+
const handleMouseLeave = React30.useCallback(() => setHoverX(null), []);
|
|
6188
6202
|
const hoverPnl = hoverX !== null ? calcTotalPnl(legs, hoverX, multiplier) : null;
|
|
6189
6203
|
buildPath(
|
|
6190
6204
|
combinedPoints.map((p) => ({ x: scaleX(p.x), y: scaleY(p.y) })).map((p) => ({ x: p.x - PADDING.left, y: p.y - PADDING.top })),
|
|
@@ -6488,7 +6502,7 @@ function formatDate(date) {
|
|
|
6488
6502
|
const d = new Date(date);
|
|
6489
6503
|
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
6490
6504
|
}
|
|
6491
|
-
var OptionPositionCard =
|
|
6505
|
+
var OptionPositionCard = React30.forwardRef(
|
|
6492
6506
|
function OptionPositionCard2(props, ref) {
|
|
6493
6507
|
const {
|
|
6494
6508
|
position,
|
|
@@ -6650,7 +6664,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
|
|
|
6650
6664
|
}
|
|
6651
6665
|
);
|
|
6652
6666
|
}
|
|
6653
|
-
var ExpirationSelector =
|
|
6667
|
+
var ExpirationSelector = React30.forwardRef(
|
|
6654
6668
|
function ExpirationSelector2(props, ref) {
|
|
6655
6669
|
const {
|
|
6656
6670
|
expirations,
|
|
@@ -6660,8 +6674,8 @@ var ExpirationSelector = React29.forwardRef(
|
|
|
6660
6674
|
className,
|
|
6661
6675
|
...rest
|
|
6662
6676
|
} = props;
|
|
6663
|
-
const scrollRef =
|
|
6664
|
-
|
|
6677
|
+
const scrollRef = React30.useRef(null);
|
|
6678
|
+
React30.useEffect(() => {
|
|
6665
6679
|
const container = scrollRef.current;
|
|
6666
6680
|
if (!container) return;
|
|
6667
6681
|
const selectedEl = container.querySelector('[data-selected="true"]');
|
|
@@ -6973,4 +6987,4 @@ var BankPage = styled(View, {
|
|
|
6973
6987
|
padding: 16
|
|
6974
6988
|
});
|
|
6975
6989
|
|
|
6976
|
-
export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText,
|
|
6990
|
+
export { AccordionItem, AccordionItemContent, AccordionItemTrigger, AccordionRoot, Alert, AppProvider, Avatar, AvatarGroup, Badge, BankAlert, BankAlertText, BankButton, BankButtonText, BankCard, BankDivider, BankField, BankHeading, BankInput, BankPage, BankPinBox, BankText, Button, ButtonGroup, ButtonGroupRadio, Checkbox2 as Checkbox, CheckboxGroup2 as CheckboxGroup, CloseButton, CollapsibleDetails, CollapsibleList, ColorModeProvider, DialogActionTrigger, DialogBackdrop, DialogBody, DialogCloseTrigger, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogRoot, DialogTitle, DialogTrigger, DrawerActionTrigger, DrawerBody, DrawerCloseTrigger, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerRoot, DrawerTitle, DrawerTrigger, EmptyState, ExpirationSelector, Field, GreeksDisplay, Heading, IconButton, Image2 as Image, Input, InputGroup, Link, LinkBox, LinkExternalIcon, LinkOverlay, MenuArrow, MenuCheckboxItem, MenuContent, MenuItem, MenuItemGroup, MenuItemText, MenuRadioItem, MenuRadioItemGroup, MenuRoot, MenuSeparator, MenuTrigger, MenuTriggerItem, OptionChain, OptionPositionCard, PinInput, PnlDiagram, PopoverArrow, PopoverBody, PopoverCloseTrigger, PopoverCloseTriggerWrapper, PopoverContent, PopoverDescription, PopoverFooter, PopoverHeader, PopoverRoot, PopoverTitle, PopoverTrigger, Progress, ProgressCircleRing, ProgressCircleRoot, ProgressCircleValueText, Radio2 as Radio, RadioGroup3 as RadioGroup, Rating, Select, SelectAsync, SelectClearTrigger, SelectContent, SelectControl, SelectItem, SelectItemGroup, SelectItemText, SelectLabel, SelectRoot, SelectValueText, Separator2 as Separator, Skeleton, SkeletonCircle, SkeletonText, Slider, StrategyBuilder, Switch2 as Switch, TableBody, TableCaption, TableCell, TableColumnHeader, TableColumnHeaderSortable, TableFooter, TableHeader, TableHeaderSticky, TableRoot, TableRow, TableScrollWrapper, TabsContent, TabsCounter, TabsList, TabsRoot, TabsTrigger, Tag, Textarea, Toaster, Tooltip, bankColors, buttonVariants, cn, createListCollection, toaster, useAccordion, useColorMode, useColorModeValue };
|