@luxfi/ui 7.3.1 → 7.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +275 -282
- package/dist/index.js +276 -283
- package/dist/provider.cjs +1 -13
- package/dist/provider.js +1 -9
- package/package.json +1 -1
- package/src/provider.tsx +4 -7
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { styled, View, Text
|
|
2
|
+
import { createGui, styled, View, Text } from '@hanzogui/core';
|
|
3
3
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
|
4
|
-
import * as React30 from 'react';
|
|
5
|
-
import React30__default from 'react';
|
|
6
4
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
5
|
import { clsx } from 'clsx';
|
|
8
6
|
import { twMerge } from 'tailwind-merge';
|
|
9
7
|
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
8
|
+
import * as React29 from 'react';
|
|
9
|
+
import React29__default from 'react';
|
|
10
10
|
import * as RadixAvatar from '@radix-ui/react-avatar';
|
|
11
11
|
import { TooltipGroup, Tooltip as Tooltip$1 } from '@hanzogui/tooltip';
|
|
12
12
|
import { useClickAway, useDebounce } from '@uidotdev/usehooks';
|
|
@@ -28,27 +28,20 @@ import * as RadixTabs from '@radix-ui/react-tabs';
|
|
|
28
28
|
import { toast, Toaster as Toaster$1 } from 'sonner';
|
|
29
29
|
|
|
30
30
|
// src/provider.tsx
|
|
31
|
-
|
|
32
|
-
function ensureGui() {
|
|
33
|
-
if (_guiInitialized) return;
|
|
34
|
-
if (typeof window === "undefined") return;
|
|
31
|
+
if (typeof window !== "undefined") {
|
|
35
32
|
createGui({ settings: { autocompleteSpecificTokens: "except-special" } });
|
|
36
|
-
_guiInitialized = true;
|
|
37
33
|
}
|
|
38
34
|
var defaultQueryClient = new QueryClient({
|
|
39
35
|
defaultOptions: { queries: { refetchOnWindowFocus: false, retry: 1, staleTime: 3e4 } }
|
|
40
36
|
});
|
|
41
37
|
var AppProvider = ({ children, queryClient }) => {
|
|
42
|
-
React30__default.useEffect(() => {
|
|
43
|
-
ensureGui();
|
|
44
|
-
}, []);
|
|
45
38
|
return /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient ?? defaultQueryClient, children });
|
|
46
39
|
};
|
|
47
40
|
function cn(...inputs) {
|
|
48
41
|
return twMerge(clsx(inputs));
|
|
49
42
|
}
|
|
50
43
|
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" }) });
|
|
51
|
-
var AccordionRoot =
|
|
44
|
+
var AccordionRoot = React29.forwardRef(
|
|
52
45
|
function AccordionRoot2(props, ref) {
|
|
53
46
|
const {
|
|
54
47
|
multiple: _multiple,
|
|
@@ -67,7 +60,7 @@ var AccordionRoot = React30.forwardRef(
|
|
|
67
60
|
borderRadius: _borderRadius,
|
|
68
61
|
...rest
|
|
69
62
|
} = props;
|
|
70
|
-
const handleValueChange =
|
|
63
|
+
const handleValueChange = React29.useCallback(
|
|
71
64
|
(next) => {
|
|
72
65
|
onValueChange?.({ value: next });
|
|
73
66
|
},
|
|
@@ -95,7 +88,7 @@ var AccordionRoot = React30.forwardRef(
|
|
|
95
88
|
);
|
|
96
89
|
}
|
|
97
90
|
);
|
|
98
|
-
var AccordionItem =
|
|
91
|
+
var AccordionItem = React29.forwardRef(
|
|
99
92
|
function AccordionItem2(props, ref) {
|
|
100
93
|
const { className, as: _as, _first, _last, display: _display, ...rest } = props;
|
|
101
94
|
return /* @__PURE__ */ jsx(
|
|
@@ -111,7 +104,7 @@ var AccordionItem = React30.forwardRef(
|
|
|
111
104
|
);
|
|
112
105
|
}
|
|
113
106
|
);
|
|
114
|
-
var AccordionItemTrigger =
|
|
107
|
+
var AccordionItemTrigger = React29.forwardRef(function AccordionItemTrigger2(props, ref) {
|
|
115
108
|
const {
|
|
116
109
|
children,
|
|
117
110
|
indicatorPlacement: indicatorPlacementProp,
|
|
@@ -176,7 +169,7 @@ var AccordionItemTrigger = React30.forwardRef(function AccordionItemTrigger2(pro
|
|
|
176
169
|
}
|
|
177
170
|
) }) });
|
|
178
171
|
});
|
|
179
|
-
var AccordionItemContent =
|
|
172
|
+
var AccordionItemContent = React29.forwardRef(function AccordionItemContent2(props, ref) {
|
|
180
173
|
const { className, children, pb: _pb, pr: _pr, pl: _pl, w: _w, display: _display, flexDir: _flexDir, rowGap: _rowGap, ...rest } = props;
|
|
181
174
|
return /* @__PURE__ */ jsx(
|
|
182
175
|
AccordionPrimitive.Content,
|
|
@@ -194,11 +187,11 @@ var AccordionItemContent = React30.forwardRef(function AccordionItemContent2(pro
|
|
|
194
187
|
);
|
|
195
188
|
});
|
|
196
189
|
function useAccordion(items) {
|
|
197
|
-
const [value, setValue] =
|
|
198
|
-
const onValueChange =
|
|
190
|
+
const [value, setValue] = React29.useState([]);
|
|
191
|
+
const onValueChange = React29.useCallback(({ value: value2 }) => {
|
|
199
192
|
setValue(value2);
|
|
200
193
|
}, []);
|
|
201
|
-
const scrollToItemFromUrl =
|
|
194
|
+
const scrollToItemFromUrl = React29.useCallback(() => {
|
|
202
195
|
const hash = window.location.hash.replace("#", "");
|
|
203
196
|
if (!hash) {
|
|
204
197
|
return;
|
|
@@ -212,7 +205,7 @@ function useAccordion(items) {
|
|
|
212
205
|
setValue([itemToScroll.id]);
|
|
213
206
|
}
|
|
214
207
|
}, [items]);
|
|
215
|
-
return
|
|
208
|
+
return React29.useMemo(() => {
|
|
216
209
|
return {
|
|
217
210
|
value,
|
|
218
211
|
onValueChange,
|
|
@@ -255,7 +248,7 @@ var CLOSE_BUTTON_CLASSES = [
|
|
|
255
248
|
"hover:text-[var(--hover-color,currentColor)]",
|
|
256
249
|
"disabled:opacity-40"
|
|
257
250
|
].join(" ");
|
|
258
|
-
var CloseButton =
|
|
251
|
+
var CloseButton = React29.forwardRef(function CloseButton2(props, ref) {
|
|
259
252
|
const { variant: _variant, size: _size, className, children, ...rest } = props;
|
|
260
253
|
return /* @__PURE__ */ jsx(
|
|
261
254
|
CloseButtonFrame,
|
|
@@ -402,7 +395,7 @@ var SKELETON_CLASSES = [
|
|
|
402
395
|
"bg-[length:200%_100%]"
|
|
403
396
|
].join(" ");
|
|
404
397
|
var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
|
|
405
|
-
var Skeleton =
|
|
398
|
+
var Skeleton = React29.forwardRef(
|
|
406
399
|
function Skeleton2(props, ref) {
|
|
407
400
|
const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
|
|
408
401
|
const shimStyle = shimToStyle(props);
|
|
@@ -411,10 +404,10 @@ var Skeleton = React30.forwardRef(
|
|
|
411
404
|
const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
|
|
412
405
|
const htmlRest = stripShims(allRest);
|
|
413
406
|
if (!loading) {
|
|
414
|
-
if (asChild &&
|
|
407
|
+
if (asChild && React29.isValidElement(children)) return children;
|
|
415
408
|
return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
|
|
416
409
|
}
|
|
417
|
-
if (asChild &&
|
|
410
|
+
if (asChild && React29.isValidElement(children)) {
|
|
418
411
|
return /* @__PURE__ */ jsx(
|
|
419
412
|
Component,
|
|
420
413
|
{
|
|
@@ -440,7 +433,7 @@ var Skeleton = React30.forwardRef(
|
|
|
440
433
|
);
|
|
441
434
|
}
|
|
442
435
|
);
|
|
443
|
-
var SkeletonCircle =
|
|
436
|
+
var SkeletonCircle = React29.forwardRef(
|
|
444
437
|
function SkeletonCircle2(props, ref) {
|
|
445
438
|
const { size = 40, loading = true, className, ...rest } = props;
|
|
446
439
|
const dimension = typeof size === "number" ? `${size}px` : size;
|
|
@@ -456,7 +449,7 @@ var SkeletonCircle = React30.forwardRef(
|
|
|
456
449
|
);
|
|
457
450
|
}
|
|
458
451
|
);
|
|
459
|
-
var SkeletonText =
|
|
452
|
+
var SkeletonText = React29.forwardRef(
|
|
460
453
|
function SkeletonText2(props, ref) {
|
|
461
454
|
const { noOfLines = 3, loading = true, className, ...rest } = props;
|
|
462
455
|
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(
|
|
@@ -486,7 +479,7 @@ var INDICATOR_SIZE_CLASSES = {
|
|
|
486
479
|
sm: "w-5 h-5 my-0",
|
|
487
480
|
md: "w-5 h-5 my-[2px]"
|
|
488
481
|
};
|
|
489
|
-
var Alert =
|
|
482
|
+
var Alert = React29.forwardRef(
|
|
490
483
|
function Alert2(props, ref) {
|
|
491
484
|
const {
|
|
492
485
|
title,
|
|
@@ -511,7 +504,7 @@ var Alert = React30.forwardRef(
|
|
|
511
504
|
if (_mb !== void 0) shimStyle.marginBottom = typeof _mb === "number" ? `${_mb * 4}px` : _mb;
|
|
512
505
|
if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * 4}px` : _mt;
|
|
513
506
|
const alertStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
|
|
514
|
-
const [isOpen, setIsOpen] =
|
|
507
|
+
const [isOpen, setIsOpen] = React29.useState(true);
|
|
515
508
|
const resolvedSize = size ?? "md";
|
|
516
509
|
const defaultIcon = /* @__PURE__ */ jsx(IndicatorIcon2, { className: "w-5 h-5" });
|
|
517
510
|
const iconElement = (() => {
|
|
@@ -526,7 +519,7 @@ var Alert = React30.forwardRef(
|
|
|
526
519
|
INDICATOR_SIZE_CLASSES[resolvedSize]
|
|
527
520
|
), children: icon || defaultIcon });
|
|
528
521
|
})();
|
|
529
|
-
const handleClose =
|
|
522
|
+
const handleClose = React29.useCallback(() => {
|
|
530
523
|
setIsOpen(false);
|
|
531
524
|
onClose?.();
|
|
532
525
|
}, [onClose]);
|
|
@@ -602,11 +595,11 @@ var VARIANT_CLASSES = {
|
|
|
602
595
|
};
|
|
603
596
|
var DEFAULT_SIZE = "md";
|
|
604
597
|
var DEFAULT_VARIANT = "subtle";
|
|
605
|
-
var AvatarGroupContext =
|
|
598
|
+
var AvatarGroupContext = React29.createContext({});
|
|
606
599
|
function useAvatarGroupContext() {
|
|
607
|
-
return
|
|
600
|
+
return React29.useContext(AvatarGroupContext);
|
|
608
601
|
}
|
|
609
|
-
var Avatar =
|
|
602
|
+
var Avatar = React29.forwardRef(
|
|
610
603
|
function Avatar2(props, ref) {
|
|
611
604
|
const group = useAvatarGroupContext();
|
|
612
605
|
const {
|
|
@@ -656,7 +649,7 @@ var Avatar = React30.forwardRef(
|
|
|
656
649
|
);
|
|
657
650
|
}
|
|
658
651
|
);
|
|
659
|
-
var AvatarFallback =
|
|
652
|
+
var AvatarFallback = React29.forwardRef(
|
|
660
653
|
function AvatarFallback2(props, ref) {
|
|
661
654
|
const { name, icon, children, className, ...rest } = props;
|
|
662
655
|
return /* @__PURE__ */ jsxs(
|
|
@@ -683,10 +676,10 @@ function getInitials(name) {
|
|
|
683
676
|
const lastName = names.length > 1 ? names[names.length - 1] : "";
|
|
684
677
|
return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
|
|
685
678
|
}
|
|
686
|
-
var AvatarGroup =
|
|
679
|
+
var AvatarGroup = React29.forwardRef(
|
|
687
680
|
function AvatarGroup2(props, ref) {
|
|
688
681
|
const { size, variant, borderless, className, ...rest } = props;
|
|
689
|
-
const contextValue =
|
|
682
|
+
const contextValue = React29.useMemo(
|
|
690
683
|
() => ({ size, variant, borderless }),
|
|
691
684
|
[size, variant, borderless]
|
|
692
685
|
);
|
|
@@ -702,11 +695,11 @@ var AvatarGroup = React30.forwardRef(
|
|
|
702
695
|
);
|
|
703
696
|
var LG_BREAKPOINT = 1024;
|
|
704
697
|
function useIsMobile() {
|
|
705
|
-
const [isMobile, setIsMobile] =
|
|
698
|
+
const [isMobile, setIsMobile] = React29.useState(() => {
|
|
706
699
|
if (typeof window === "undefined") return false;
|
|
707
700
|
return window.innerWidth < LG_BREAKPOINT;
|
|
708
701
|
});
|
|
709
|
-
|
|
702
|
+
React29.useEffect(() => {
|
|
710
703
|
const mql = window.matchMedia(`(max-width: ${LG_BREAKPOINT - 1}px)`);
|
|
711
704
|
const handler = (e) => setIsMobile(e.matches);
|
|
712
705
|
setIsMobile(mql.matches);
|
|
@@ -719,7 +712,7 @@ function mapPlacement(p) {
|
|
|
719
712
|
if (!p) return void 0;
|
|
720
713
|
return p;
|
|
721
714
|
}
|
|
722
|
-
var Tooltip =
|
|
715
|
+
var Tooltip = React29.forwardRef(
|
|
723
716
|
function Tooltip2(props, ref) {
|
|
724
717
|
const {
|
|
725
718
|
showArrow: showArrowProp,
|
|
@@ -738,28 +731,28 @@ var Tooltip = React30.forwardRef(
|
|
|
738
731
|
interactive,
|
|
739
732
|
positioning
|
|
740
733
|
} = props;
|
|
741
|
-
const [open, setOpen] =
|
|
742
|
-
const timeoutRef =
|
|
734
|
+
const [open, setOpen] = React29.useState(defaultOpen);
|
|
735
|
+
const timeoutRef = React29.useRef(null);
|
|
743
736
|
const isMobile = useIsMobile();
|
|
744
|
-
const handleOpenChange =
|
|
737
|
+
const handleOpenChange = React29.useCallback((nextOpen) => {
|
|
745
738
|
setOpen(nextOpen);
|
|
746
739
|
onOpenChange?.({ open: nextOpen });
|
|
747
740
|
}, [onOpenChange]);
|
|
748
|
-
const handleOpenChangeManual =
|
|
741
|
+
const handleOpenChangeManual = React29.useCallback((nextOpen) => {
|
|
749
742
|
timeoutRef.current && window.clearTimeout(timeoutRef.current);
|
|
750
743
|
timeoutRef.current = window.setTimeout(() => {
|
|
751
744
|
setOpen(nextOpen);
|
|
752
745
|
onOpenChange?.({ open: nextOpen });
|
|
753
746
|
}, nextOpen ? openDelay : closeDelay);
|
|
754
747
|
}, [closeDelay, openDelay, onOpenChange]);
|
|
755
|
-
const handleClickAway =
|
|
748
|
+
const handleClickAway = React29.useCallback(() => {
|
|
756
749
|
handleOpenChangeManual(false);
|
|
757
750
|
}, [handleOpenChangeManual]);
|
|
758
751
|
const triggerRef = useClickAway(handleClickAway);
|
|
759
|
-
const handleTriggerClick =
|
|
752
|
+
const handleTriggerClick = React29.useCallback(() => {
|
|
760
753
|
handleOpenChangeManual(!open);
|
|
761
754
|
}, [handleOpenChangeManual, open]);
|
|
762
|
-
const handleContentClick =
|
|
755
|
+
const handleContentClick = React29.useCallback((event) => {
|
|
763
756
|
event.stopPropagation();
|
|
764
757
|
if (interactive) {
|
|
765
758
|
const closestLink = event.target?.closest("a");
|
|
@@ -768,7 +761,7 @@ var Tooltip = React30.forwardRef(
|
|
|
768
761
|
}
|
|
769
762
|
}
|
|
770
763
|
}, [interactive, handleOpenChangeManual]);
|
|
771
|
-
|
|
764
|
+
React29.useEffect(() => {
|
|
772
765
|
return () => {
|
|
773
766
|
if (timeoutRef.current) {
|
|
774
767
|
clearTimeout(timeoutRef.current);
|
|
@@ -870,7 +863,7 @@ var COLOR_PALETTE_CLASSES = {
|
|
|
870
863
|
bright_pink: "bg-badge-bright-pink-bg text-badge-bright-pink-fg"
|
|
871
864
|
};
|
|
872
865
|
var S2 = 4;
|
|
873
|
-
var Badge =
|
|
866
|
+
var Badge = React29__default.forwardRef(
|
|
874
867
|
function Badge2(props, ref) {
|
|
875
868
|
const {
|
|
876
869
|
loading,
|
|
@@ -1119,7 +1112,7 @@ function buildShimStyle(props) {
|
|
|
1119
1112
|
if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
|
|
1120
1113
|
return Object.keys(s).length > 0 ? s : void 0;
|
|
1121
1114
|
}
|
|
1122
|
-
var Button =
|
|
1115
|
+
var Button = React29.forwardRef(
|
|
1123
1116
|
function Button2(props, ref) {
|
|
1124
1117
|
const {
|
|
1125
1118
|
className,
|
|
@@ -1221,7 +1214,7 @@ function buttonVariants(opts) {
|
|
|
1221
1214
|
const s = opts?.size ?? "md";
|
|
1222
1215
|
return [BASE_CLASSES2, VARIANT_CLASSES2[v] ?? "", SIZE_CLASSES4[s] ?? ""].filter(Boolean).join(" ");
|
|
1223
1216
|
}
|
|
1224
|
-
var ButtonGroup =
|
|
1217
|
+
var ButtonGroup = React29.forwardRef(
|
|
1225
1218
|
function ButtonGroup2(props, ref) {
|
|
1226
1219
|
const { className, ...rest } = props;
|
|
1227
1220
|
return /* @__PURE__ */ jsx(
|
|
@@ -1235,7 +1228,7 @@ var ButtonGroup = React30.forwardRef(
|
|
|
1235
1228
|
);
|
|
1236
1229
|
}
|
|
1237
1230
|
);
|
|
1238
|
-
var ButtonGroupRadio =
|
|
1231
|
+
var ButtonGroupRadio = React29.forwardRef(
|
|
1239
1232
|
function ButtonGroupRadio2(props, ref) {
|
|
1240
1233
|
const {
|
|
1241
1234
|
children,
|
|
@@ -1247,24 +1240,24 @@ var ButtonGroupRadio = React30.forwardRef(
|
|
|
1247
1240
|
className,
|
|
1248
1241
|
...rest
|
|
1249
1242
|
} = props;
|
|
1250
|
-
const firstChildValue =
|
|
1243
|
+
const firstChildValue = React29.useMemo(() => {
|
|
1251
1244
|
const firstChild = Array.isArray(children) ? children[0] : void 0;
|
|
1252
1245
|
return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
|
|
1253
1246
|
}, [children]);
|
|
1254
|
-
const [value, setValue] =
|
|
1255
|
-
const handleItemClick =
|
|
1247
|
+
const [value, setValue] = React29.useState(defaultValue ?? firstChildValue);
|
|
1248
|
+
const handleItemClick = React29.useCallback((event) => {
|
|
1256
1249
|
const v = event.currentTarget.value;
|
|
1257
1250
|
setValue(v);
|
|
1258
1251
|
onChange?.(v);
|
|
1259
1252
|
}, [onChange]);
|
|
1260
|
-
const clonedChildren =
|
|
1261
|
-
return
|
|
1253
|
+
const clonedChildren = React29.Children.map(children, (child) => {
|
|
1254
|
+
return React29.cloneElement(child, {
|
|
1262
1255
|
onClick: handleItemClick,
|
|
1263
1256
|
selected: value === child.props.value,
|
|
1264
1257
|
variant
|
|
1265
1258
|
});
|
|
1266
1259
|
});
|
|
1267
|
-
const childrenLength =
|
|
1260
|
+
const childrenLength = React29.Children.count(children);
|
|
1268
1261
|
return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
|
|
1269
1262
|
"div",
|
|
1270
1263
|
{
|
|
@@ -1284,11 +1277,11 @@ var ButtonGroupRadio = React30.forwardRef(
|
|
|
1284
1277
|
);
|
|
1285
1278
|
var NOOP = () => {
|
|
1286
1279
|
};
|
|
1287
|
-
var CheckboxGroupContext =
|
|
1280
|
+
var CheckboxGroupContext = React29.createContext(null);
|
|
1288
1281
|
function useCheckboxGroupContext() {
|
|
1289
|
-
return
|
|
1282
|
+
return React29.useContext(CheckboxGroupContext);
|
|
1290
1283
|
}
|
|
1291
|
-
var CheckboxGroupBase =
|
|
1284
|
+
var CheckboxGroupBase = React29.forwardRef(
|
|
1292
1285
|
function CheckboxGroup(props, ref) {
|
|
1293
1286
|
const {
|
|
1294
1287
|
children,
|
|
@@ -1300,10 +1293,10 @@ var CheckboxGroupBase = React30.forwardRef(
|
|
|
1300
1293
|
className,
|
|
1301
1294
|
...rest
|
|
1302
1295
|
} = props;
|
|
1303
|
-
const [uncontrolledValue, setUncontrolledValue] =
|
|
1296
|
+
const [uncontrolledValue, setUncontrolledValue] = React29.useState(defaultValue ?? []);
|
|
1304
1297
|
const isControlled = controlledValue !== void 0;
|
|
1305
1298
|
const value = isControlled ? controlledValue : uncontrolledValue;
|
|
1306
|
-
const toggle =
|
|
1299
|
+
const toggle = React29.useCallback(
|
|
1307
1300
|
(itemValue) => {
|
|
1308
1301
|
const next = value.includes(itemValue) ? value.filter((v) => v !== itemValue) : [...value, itemValue];
|
|
1309
1302
|
if (!isControlled) {
|
|
@@ -1313,12 +1306,12 @@ var CheckboxGroupBase = React30.forwardRef(
|
|
|
1313
1306
|
},
|
|
1314
1307
|
[value, isControlled, onValueChange]
|
|
1315
1308
|
);
|
|
1316
|
-
|
|
1309
|
+
React29.useEffect(() => {
|
|
1317
1310
|
if (isControlled) {
|
|
1318
1311
|
setUncontrolledValue(controlledValue);
|
|
1319
1312
|
}
|
|
1320
1313
|
}, [isControlled, controlledValue]);
|
|
1321
|
-
const ctx =
|
|
1314
|
+
const ctx = React29.useMemo(() => ({ value, toggle }), [value, toggle]);
|
|
1322
1315
|
return /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
1323
1316
|
"div",
|
|
1324
1317
|
{
|
|
@@ -1376,7 +1369,7 @@ var IndeterminateIcon = ({ className }) => /* @__PURE__ */ jsx(
|
|
|
1376
1369
|
children: /* @__PURE__ */ jsx("path", { d: "M0 0H12V2H0V0Z", fill: "currentColor" })
|
|
1377
1370
|
}
|
|
1378
1371
|
);
|
|
1379
|
-
var CheckboxBase =
|
|
1372
|
+
var CheckboxBase = React29.forwardRef(
|
|
1380
1373
|
function Checkbox(props, ref) {
|
|
1381
1374
|
const {
|
|
1382
1375
|
icon,
|
|
@@ -1397,8 +1390,8 @@ var CheckboxBase = React30.forwardRef(
|
|
|
1397
1390
|
...rest
|
|
1398
1391
|
} = props;
|
|
1399
1392
|
const group = useCheckboxGroupContext();
|
|
1400
|
-
const hiddenInputRef =
|
|
1401
|
-
const setHiddenInputRef =
|
|
1393
|
+
const hiddenInputRef = React29.useRef(null);
|
|
1394
|
+
const setHiddenInputRef = React29.useCallback(
|
|
1402
1395
|
(node) => {
|
|
1403
1396
|
hiddenInputRef.current = node;
|
|
1404
1397
|
if (typeof ref === "function") {
|
|
@@ -1411,7 +1404,7 @@ var CheckboxBase = React30.forwardRef(
|
|
|
1411
1404
|
);
|
|
1412
1405
|
const isInGroup = group !== null && value !== void 0;
|
|
1413
1406
|
const groupChecked = isInGroup ? group.value.includes(value) : void 0;
|
|
1414
|
-
const [internalChecked, setInternalChecked] =
|
|
1407
|
+
const [internalChecked, setInternalChecked] = React29.useState(
|
|
1415
1408
|
defaultChecked ?? false
|
|
1416
1409
|
);
|
|
1417
1410
|
const isControlled = checkedProp !== void 0 || isInGroup;
|
|
@@ -1423,7 +1416,7 @@ var CheckboxBase = React30.forwardRef(
|
|
|
1423
1416
|
} else {
|
|
1424
1417
|
checkedState = internalChecked;
|
|
1425
1418
|
}
|
|
1426
|
-
const handleCheckedChange =
|
|
1419
|
+
const handleCheckedChange = React29.useCallback(
|
|
1427
1420
|
(nextChecked) => {
|
|
1428
1421
|
if (readOnly) return;
|
|
1429
1422
|
if (!isControlled) {
|
|
@@ -1587,7 +1580,7 @@ function resolveSpacing(v) {
|
|
|
1587
1580
|
}
|
|
1588
1581
|
return void 0;
|
|
1589
1582
|
}
|
|
1590
|
-
var Link =
|
|
1583
|
+
var Link = React29__default.forwardRef(
|
|
1591
1584
|
function Link2(props, ref) {
|
|
1592
1585
|
const {
|
|
1593
1586
|
external,
|
|
@@ -1676,7 +1669,7 @@ var Link = React30__default.forwardRef(
|
|
|
1676
1669
|
) });
|
|
1677
1670
|
}
|
|
1678
1671
|
);
|
|
1679
|
-
var LinkBox =
|
|
1672
|
+
var LinkBox = React29__default.forwardRef(
|
|
1680
1673
|
function LinkBox2(props, ref) {
|
|
1681
1674
|
const { className, ...rest } = props;
|
|
1682
1675
|
return /* @__PURE__ */ jsx(
|
|
@@ -1689,7 +1682,7 @@ var LinkBox = React30__default.forwardRef(
|
|
|
1689
1682
|
);
|
|
1690
1683
|
}
|
|
1691
1684
|
);
|
|
1692
|
-
var LinkOverlay =
|
|
1685
|
+
var LinkOverlay = React29__default.forwardRef(
|
|
1693
1686
|
function LinkOverlay2(props, ref) {
|
|
1694
1687
|
const {
|
|
1695
1688
|
children,
|
|
@@ -1770,8 +1763,8 @@ var LinkOverlay = React30__default.forwardRef(
|
|
|
1770
1763
|
}
|
|
1771
1764
|
);
|
|
1772
1765
|
function useUpdateEffect(effect, deps) {
|
|
1773
|
-
const isFirstMount =
|
|
1774
|
-
|
|
1766
|
+
const isFirstMount = React29__default.useRef(true);
|
|
1767
|
+
React29__default.useEffect(() => {
|
|
1775
1768
|
if (isFirstMount.current) {
|
|
1776
1769
|
isFirstMount.current = false;
|
|
1777
1770
|
return;
|
|
@@ -1788,8 +1781,8 @@ function scrollToElement(id) {
|
|
|
1788
1781
|
var CUT_ID = "CollapsibleDetails";
|
|
1789
1782
|
var CollapsibleDetails = (props) => {
|
|
1790
1783
|
const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, noScroll, ...rest } = props;
|
|
1791
|
-
const [isExpanded, setIsExpanded] =
|
|
1792
|
-
const handleClick =
|
|
1784
|
+
const [isExpanded, setIsExpanded] = React29__default.useState(isExpandedProp);
|
|
1785
|
+
const handleClick = React29__default.useCallback((event) => {
|
|
1793
1786
|
setIsExpanded((flag) => !flag);
|
|
1794
1787
|
if (!noScroll) {
|
|
1795
1788
|
scrollToElement(id);
|
|
@@ -1820,11 +1813,11 @@ var CollapsibleDetails = (props) => {
|
|
|
1820
1813
|
var CollapsibleList = (props) => {
|
|
1821
1814
|
const CUT_LENGTH = 3;
|
|
1822
1815
|
const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, text: textProp, defaultExpanded = false, className, ...rest } = props;
|
|
1823
|
-
const [isExpanded, setIsExpanded] =
|
|
1824
|
-
|
|
1816
|
+
const [isExpanded, setIsExpanded] = React29__default.useState(defaultExpanded);
|
|
1817
|
+
React29__default.useEffect(() => {
|
|
1825
1818
|
setIsExpanded(defaultExpanded);
|
|
1826
1819
|
}, [defaultExpanded]);
|
|
1827
|
-
const handleToggle =
|
|
1820
|
+
const handleToggle = React29__default.useCallback(() => {
|
|
1828
1821
|
setIsExpanded((flag) => !flag);
|
|
1829
1822
|
}, []);
|
|
1830
1823
|
const text = isExpanded ? textProp?.[1] ?? "Hide" : textProp?.[0] ?? "Show all";
|
|
@@ -1841,10 +1834,10 @@ var CollapsibleList = (props) => {
|
|
|
1841
1834
|
) })
|
|
1842
1835
|
] }) });
|
|
1843
1836
|
};
|
|
1844
|
-
var ColorModeContext =
|
|
1837
|
+
var ColorModeContext = React29.createContext(void 0);
|
|
1845
1838
|
function ColorModeProvider(props) {
|
|
1846
1839
|
const { children, defaultTheme = "light", value: controlledValue, onValueChange } = props;
|
|
1847
|
-
const [internalMode, setInternalMode] =
|
|
1840
|
+
const [internalMode, setInternalMode] = React29.useState(() => {
|
|
1848
1841
|
if (controlledValue === "dark" || controlledValue === "light") {
|
|
1849
1842
|
return controlledValue;
|
|
1850
1843
|
}
|
|
@@ -1854,7 +1847,7 @@ function ColorModeProvider(props) {
|
|
|
1854
1847
|
return defaultTheme === "dark" ? "dark" : "light";
|
|
1855
1848
|
});
|
|
1856
1849
|
const colorMode = controlledValue === "dark" || controlledValue === "light" ? controlledValue : internalMode;
|
|
1857
|
-
const setColorMode =
|
|
1850
|
+
const setColorMode = React29.useCallback((mode) => {
|
|
1858
1851
|
const resolved = mode === "dark" ? "dark" : "light";
|
|
1859
1852
|
setInternalMode(resolved);
|
|
1860
1853
|
onValueChange?.(resolved);
|
|
@@ -1863,19 +1856,19 @@ function ColorModeProvider(props) {
|
|
|
1863
1856
|
document.documentElement.classList.toggle("light", resolved === "light");
|
|
1864
1857
|
}
|
|
1865
1858
|
}, [onValueChange]);
|
|
1866
|
-
const toggleColorMode =
|
|
1859
|
+
const toggleColorMode = React29.useCallback(() => {
|
|
1867
1860
|
setColorMode(colorMode === "dark" ? "light" : "dark");
|
|
1868
1861
|
}, [colorMode, setColorMode]);
|
|
1869
|
-
const ctx =
|
|
1862
|
+
const ctx = React29.useMemo(
|
|
1870
1863
|
() => ({ colorMode, setColorMode, toggleColorMode }),
|
|
1871
1864
|
[colorMode, setColorMode, toggleColorMode]
|
|
1872
1865
|
);
|
|
1873
1866
|
return /* @__PURE__ */ jsx(ColorModeContext.Provider, { value: ctx, children });
|
|
1874
1867
|
}
|
|
1875
1868
|
function useColorMode() {
|
|
1876
|
-
const ctx =
|
|
1869
|
+
const ctx = React29.useContext(ColorModeContext);
|
|
1877
1870
|
if (!ctx) {
|
|
1878
|
-
const [mode, setMode] =
|
|
1871
|
+
const [mode, setMode] = React29.useState(() => {
|
|
1879
1872
|
if (typeof document !== "undefined" && document.documentElement.classList.contains("dark")) {
|
|
1880
1873
|
return "dark";
|
|
1881
1874
|
}
|
|
@@ -1919,9 +1912,9 @@ function BackToButton({ onClick }) {
|
|
|
1919
1912
|
}
|
|
1920
1913
|
);
|
|
1921
1914
|
}
|
|
1922
|
-
var DialogSizeContext =
|
|
1915
|
+
var DialogSizeContext = React29.createContext({ size: "md" });
|
|
1923
1916
|
function useDialogSizeContext() {
|
|
1924
|
-
return
|
|
1917
|
+
return React29.useContext(DialogSizeContext);
|
|
1925
1918
|
}
|
|
1926
1919
|
var CONTENT_SIZE_MAP = {
|
|
1927
1920
|
sm: "max-w-[400px]",
|
|
@@ -1953,13 +1946,13 @@ var DialogRoot = ({
|
|
|
1953
1946
|
modal = true
|
|
1954
1947
|
// motionPreset is intentionally unused -- kept for API compat
|
|
1955
1948
|
}) => {
|
|
1956
|
-
const handleOpenChange =
|
|
1949
|
+
const handleOpenChange = React29.useCallback(
|
|
1957
1950
|
(nextOpen) => {
|
|
1958
1951
|
onOpenChange?.({ open: nextOpen });
|
|
1959
1952
|
},
|
|
1960
1953
|
[onOpenChange]
|
|
1961
1954
|
);
|
|
1962
|
-
const ctx =
|
|
1955
|
+
const ctx = React29.useMemo(() => ({ size }), [size]);
|
|
1963
1956
|
return /* @__PURE__ */ jsx(DialogSizeContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
1964
1957
|
Dialog,
|
|
1965
1958
|
{
|
|
@@ -1971,7 +1964,7 @@ var DialogRoot = ({
|
|
|
1971
1964
|
}
|
|
1972
1965
|
) });
|
|
1973
1966
|
};
|
|
1974
|
-
var DialogContent =
|
|
1967
|
+
var DialogContent = React29.forwardRef(function DialogContent2(props, ref) {
|
|
1975
1968
|
const {
|
|
1976
1969
|
children,
|
|
1977
1970
|
portalled: _portalled = true,
|
|
@@ -2028,11 +2021,11 @@ var DialogContent = React30.forwardRef(function DialogContent2(props, ref) {
|
|
|
2028
2021
|
)
|
|
2029
2022
|
] });
|
|
2030
2023
|
});
|
|
2031
|
-
var DialogCloseTrigger =
|
|
2024
|
+
var DialogCloseTrigger = React29.forwardRef(function DialogCloseTrigger2(props, ref) {
|
|
2032
2025
|
const { className, ...rest } = props;
|
|
2033
2026
|
return /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CloseButton, { ref, className, ...rest, children: props.children }) });
|
|
2034
2027
|
});
|
|
2035
|
-
var DialogHeader =
|
|
2028
|
+
var DialogHeader = React29.forwardRef(function DialogHeader2(props, ref) {
|
|
2036
2029
|
const { startElement: startElementProp, onBackToClick, className, children, ...rest } = props;
|
|
2037
2030
|
const startElement = startElementProp ?? (onBackToClick ? /* @__PURE__ */ jsx(BackToButton, { onClick: onBackToClick }) : void 0);
|
|
2038
2031
|
return /* @__PURE__ */ jsxs(
|
|
@@ -2062,7 +2055,7 @@ var DialogHeader = React30.forwardRef(function DialogHeader2(props, ref) {
|
|
|
2062
2055
|
}
|
|
2063
2056
|
);
|
|
2064
2057
|
});
|
|
2065
|
-
var DialogBody =
|
|
2058
|
+
var DialogBody = React29.forwardRef(function DialogBody2({ className, pt, display, flexDir, style: styleProp, ...props }, ref) {
|
|
2066
2059
|
const bodyStyle = {
|
|
2067
2060
|
...styleProp,
|
|
2068
2061
|
...pt !== void 0 ? { paddingTop: typeof pt === "number" ? `${pt * 4}px` : pt } : {},
|
|
@@ -2079,7 +2072,7 @@ var DialogBody = React30.forwardRef(function DialogBody2({ className, pt, displa
|
|
|
2079
2072
|
}
|
|
2080
2073
|
);
|
|
2081
2074
|
});
|
|
2082
|
-
var DialogFooter =
|
|
2075
|
+
var DialogFooter = React29.forwardRef(function DialogFooter2({ className, ...props }, ref) {
|
|
2083
2076
|
return /* @__PURE__ */ jsx(
|
|
2084
2077
|
"div",
|
|
2085
2078
|
{
|
|
@@ -2094,8 +2087,8 @@ var DialogTitle = Dialog.Title;
|
|
|
2094
2087
|
var DialogDescription = Dialog.Description;
|
|
2095
2088
|
var DialogTrigger = Dialog.Trigger;
|
|
2096
2089
|
var DialogActionTrigger = Dialog.Close;
|
|
2097
|
-
var DrawerPlacementContext =
|
|
2098
|
-
var DrawerSizeContext =
|
|
2090
|
+
var DrawerPlacementContext = React29.createContext("right");
|
|
2091
|
+
var DrawerSizeContext = React29.createContext("md");
|
|
2099
2092
|
var DrawerRoot = (props) => {
|
|
2100
2093
|
const {
|
|
2101
2094
|
children,
|
|
@@ -2106,7 +2099,7 @@ var DrawerRoot = (props) => {
|
|
|
2106
2099
|
modal = true,
|
|
2107
2100
|
size = "md"
|
|
2108
2101
|
} = props;
|
|
2109
|
-
const handleOpenChange =
|
|
2102
|
+
const handleOpenChange = React29.useCallback((nextOpen) => {
|
|
2110
2103
|
onOpenChange?.({ open: nextOpen });
|
|
2111
2104
|
}, [onOpenChange]);
|
|
2112
2105
|
return /* @__PURE__ */ jsx(DrawerPlacementContext.Provider, { value: placement, children: /* @__PURE__ */ jsx(DrawerSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx(
|
|
@@ -2148,11 +2141,11 @@ var SIZE_CLASSES6 = {
|
|
|
2148
2141
|
top: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" },
|
|
2149
2142
|
bottom: { xs: "h-40", sm: "h-60", md: "h-80", lg: "h-96", xl: "h-[480px]", full: "h-screen" }
|
|
2150
2143
|
};
|
|
2151
|
-
var DrawerContent =
|
|
2144
|
+
var DrawerContent = React29.forwardRef(
|
|
2152
2145
|
function DrawerContent2(props, ref) {
|
|
2153
2146
|
const { children, portalled = true, portalRef, offset: _offset, backdrop = true, className, ...rest } = props;
|
|
2154
|
-
const placement =
|
|
2155
|
-
const size =
|
|
2147
|
+
const placement = React29.useContext(DrawerPlacementContext);
|
|
2148
|
+
const size = React29.useContext(DrawerSizeContext);
|
|
2156
2149
|
const content = /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2157
2150
|
backdrop && /* @__PURE__ */ jsx(
|
|
2158
2151
|
RadixDialog.Overlay,
|
|
@@ -2185,7 +2178,7 @@ var DrawerContent = React30.forwardRef(
|
|
|
2185
2178
|
return content;
|
|
2186
2179
|
}
|
|
2187
2180
|
);
|
|
2188
|
-
var DrawerCloseTrigger =
|
|
2181
|
+
var DrawerCloseTrigger = React29.forwardRef(function DrawerCloseTrigger2(props, ref) {
|
|
2189
2182
|
return /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
|
|
2190
2183
|
CloseButton,
|
|
2191
2184
|
{
|
|
@@ -2199,17 +2192,17 @@ var DrawerTrigger = (props) => {
|
|
|
2199
2192
|
const { asChild = true, ...rest } = props;
|
|
2200
2193
|
return /* @__PURE__ */ jsx(RadixDialog.Trigger, { asChild, ...rest });
|
|
2201
2194
|
};
|
|
2202
|
-
var DrawerHeader =
|
|
2195
|
+
var DrawerHeader = React29.forwardRef(
|
|
2203
2196
|
function DrawerHeader2({ className, ...props }, ref) {
|
|
2204
2197
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-1.5 p-6 pb-0", className), ...props });
|
|
2205
2198
|
}
|
|
2206
2199
|
);
|
|
2207
|
-
var DrawerBody =
|
|
2200
|
+
var DrawerBody = React29.forwardRef(
|
|
2208
2201
|
function DrawerBody2({ className, ...props }, ref) {
|
|
2209
2202
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex-1 overflow-auto p-6", className), ...props });
|
|
2210
2203
|
}
|
|
2211
2204
|
);
|
|
2212
|
-
var DrawerFooter =
|
|
2205
|
+
var DrawerFooter = React29.forwardRef(
|
|
2213
2206
|
function DrawerFooter2({ className, ...props }, ref) {
|
|
2214
2207
|
return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center justify-end gap-2 p-6 pt-0", className), ...props });
|
|
2215
2208
|
}
|
|
@@ -2222,7 +2215,7 @@ function upperFirst(str) {
|
|
|
2222
2215
|
return str.charAt(0).toUpperCase() + str.slice(1);
|
|
2223
2216
|
}
|
|
2224
2217
|
var ICONS = {};
|
|
2225
|
-
var EmptyState =
|
|
2218
|
+
var EmptyState = React29.forwardRef(
|
|
2226
2219
|
function EmptyState2(props, ref) {
|
|
2227
2220
|
const { title, description, term, type = "query", icon, children, className, ...rest } = props;
|
|
2228
2221
|
const titleContent = (() => {
|
|
@@ -2282,7 +2275,7 @@ function getComponentDisplayName(type) {
|
|
|
2282
2275
|
if ("displayName" in type) return type.displayName;
|
|
2283
2276
|
return void 0;
|
|
2284
2277
|
}
|
|
2285
|
-
var Field =
|
|
2278
|
+
var Field = React29.forwardRef(
|
|
2286
2279
|
function Field2(props, ref) {
|
|
2287
2280
|
const {
|
|
2288
2281
|
label,
|
|
@@ -2334,14 +2327,14 @@ var Field = React30.forwardRef(
|
|
|
2334
2327
|
}
|
|
2335
2328
|
);
|
|
2336
2329
|
const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
|
|
2337
|
-
const child2 =
|
|
2330
|
+
const child2 = React29.Children.only(children);
|
|
2338
2331
|
const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
|
|
2339
2332
|
if (isInputGroup) {
|
|
2340
|
-
const inputElement2 =
|
|
2341
|
-
|
|
2333
|
+
const inputElement2 = React29.cloneElement(
|
|
2334
|
+
React29.Children.only(child2.props.children),
|
|
2342
2335
|
injectedProps2
|
|
2343
2336
|
);
|
|
2344
|
-
const groupInputElement =
|
|
2337
|
+
const groupInputElement = React29.cloneElement(
|
|
2345
2338
|
child2,
|
|
2346
2339
|
{},
|
|
2347
2340
|
inputElement2,
|
|
@@ -2364,7 +2357,7 @@ var Field = React30.forwardRef(
|
|
|
2364
2357
|
}
|
|
2365
2358
|
);
|
|
2366
2359
|
}
|
|
2367
|
-
const inputElement =
|
|
2360
|
+
const inputElement = React29.cloneElement(child2, injectedProps2);
|
|
2368
2361
|
return /* @__PURE__ */ jsxs(
|
|
2369
2362
|
"div",
|
|
2370
2363
|
{
|
|
@@ -2386,8 +2379,8 @@ var Field = React30.forwardRef(
|
|
|
2386
2379
|
const injectedProps = {
|
|
2387
2380
|
size
|
|
2388
2381
|
};
|
|
2389
|
-
const child =
|
|
2390
|
-
const clonedChild =
|
|
2382
|
+
const child = React29.Children.only(children);
|
|
2383
|
+
const clonedChild = React29.cloneElement(child, injectedProps);
|
|
2391
2384
|
return /* @__PURE__ */ jsxs(
|
|
2392
2385
|
"div",
|
|
2393
2386
|
{
|
|
@@ -2430,7 +2423,7 @@ var LEVEL_CLASSES = {
|
|
|
2430
2423
|
"3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
|
|
2431
2424
|
};
|
|
2432
2425
|
var BASE_CLASSES4 = "font-heading text-heading";
|
|
2433
|
-
var Heading =
|
|
2426
|
+
var Heading = React29__default.forwardRef(
|
|
2434
2427
|
function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
|
|
2435
2428
|
const Tag3 = level ? LEVEL_TAG[level] : "h2";
|
|
2436
2429
|
const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
|
|
@@ -2516,7 +2509,7 @@ var ICON_SIZE_CLASSES = {
|
|
|
2516
2509
|
md: "[&_svg]:size-5"
|
|
2517
2510
|
};
|
|
2518
2511
|
var SP2 = 4;
|
|
2519
|
-
var IconButton =
|
|
2512
|
+
var IconButton = React29.forwardRef(
|
|
2520
2513
|
function IconButton2(props, ref) {
|
|
2521
2514
|
const {
|
|
2522
2515
|
size,
|
|
@@ -2567,7 +2560,7 @@ var IconButton = React30.forwardRef(
|
|
|
2567
2560
|
ref,
|
|
2568
2561
|
size,
|
|
2569
2562
|
disabled: !loadingSkeleton && (loading || disabled) || void 0,
|
|
2570
|
-
render: _as ?
|
|
2563
|
+
render: _as ? React29.createElement(_as) : void 0,
|
|
2571
2564
|
className: combinedClassName,
|
|
2572
2565
|
style: mergedStyle,
|
|
2573
2566
|
...expanded ? { "data-expanded": true } : {},
|
|
@@ -2738,31 +2731,31 @@ function extractStyleProps(props) {
|
|
|
2738
2731
|
}
|
|
2739
2732
|
return { styleProps, rest };
|
|
2740
2733
|
}
|
|
2741
|
-
var Image2 =
|
|
2734
|
+
var Image2 = React29__default.forwardRef(
|
|
2742
2735
|
function Image3(props, ref) {
|
|
2743
2736
|
const { fallback, src, onLoad, onError, skeletonWidth, skeletonHeight, alt, className, style: styleProp, ...allRest } = props;
|
|
2744
2737
|
const { styleProps, rest: extraProps } = extractStyleProps(allRest);
|
|
2745
|
-
const [loading, setLoading] =
|
|
2746
|
-
const [error, setError] =
|
|
2747
|
-
const handleLoadError =
|
|
2738
|
+
const [loading, setLoading] = React29__default.useState(true);
|
|
2739
|
+
const [error, setError] = React29__default.useState(false);
|
|
2740
|
+
const handleLoadError = React29__default.useCallback((event) => {
|
|
2748
2741
|
setError(true);
|
|
2749
2742
|
setLoading(false);
|
|
2750
2743
|
onError?.(event);
|
|
2751
2744
|
}, [onError]);
|
|
2752
|
-
const handleLoadSuccess =
|
|
2745
|
+
const handleLoadSuccess = React29__default.useCallback((event) => {
|
|
2753
2746
|
setLoading(false);
|
|
2754
2747
|
onLoad?.(event);
|
|
2755
2748
|
}, [onLoad]);
|
|
2756
2749
|
const passthroughProps = allRest;
|
|
2757
2750
|
if (!src && fallback) {
|
|
2758
|
-
if (
|
|
2759
|
-
return
|
|
2751
|
+
if (React29__default.isValidElement(fallback)) {
|
|
2752
|
+
return React29__default.cloneElement(fallback, passthroughProps);
|
|
2760
2753
|
}
|
|
2761
2754
|
return fallback;
|
|
2762
2755
|
}
|
|
2763
2756
|
if (error) {
|
|
2764
|
-
if (
|
|
2765
|
-
return
|
|
2757
|
+
if (React29__default.isValidElement(fallback)) {
|
|
2758
|
+
return React29__default.cloneElement(fallback, passthroughProps);
|
|
2766
2759
|
}
|
|
2767
2760
|
return fallback;
|
|
2768
2761
|
}
|
|
@@ -2818,7 +2811,7 @@ var INPUT_VARIANT_CLASSES = {
|
|
|
2818
2811
|
filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
|
|
2819
2812
|
unstyled: "border-0 bg-transparent p-0 h-auto"
|
|
2820
2813
|
};
|
|
2821
|
-
var Input =
|
|
2814
|
+
var Input = React29__default.forwardRef(
|
|
2822
2815
|
({ size = "md", variant = "outline", className, ...rest }, ref) => {
|
|
2823
2816
|
return /* @__PURE__ */ jsx(
|
|
2824
2817
|
"input",
|
|
@@ -2836,7 +2829,7 @@ function getComponentDisplayName2(type) {
|
|
|
2836
2829
|
if ("displayName" in type) return type.displayName;
|
|
2837
2830
|
return void 0;
|
|
2838
2831
|
}
|
|
2839
|
-
var InputGroup =
|
|
2832
|
+
var InputGroup = React29.forwardRef(
|
|
2840
2833
|
function InputGroup2(props, ref) {
|
|
2841
2834
|
const {
|
|
2842
2835
|
startElement,
|
|
@@ -2849,11 +2842,11 @@ var InputGroup = React30.forwardRef(
|
|
|
2849
2842
|
className,
|
|
2850
2843
|
...rest
|
|
2851
2844
|
} = props;
|
|
2852
|
-
const startElementRef =
|
|
2853
|
-
const endElementRef =
|
|
2854
|
-
const groupRef =
|
|
2855
|
-
const [inlinePaddings, setInlinePaddings] =
|
|
2856
|
-
const calculateInlinePaddings =
|
|
2845
|
+
const startElementRef = React29.useRef(null);
|
|
2846
|
+
const endElementRef = React29.useRef(null);
|
|
2847
|
+
const groupRef = React29.useRef(null);
|
|
2848
|
+
const [inlinePaddings, setInlinePaddings] = React29.useState();
|
|
2849
|
+
const calculateInlinePaddings = React29.useCallback(() => {
|
|
2857
2850
|
const startWidth = startElementRef.current?.getBoundingClientRect().width ?? 0;
|
|
2858
2851
|
const endWidth = endElementRef.current?.getBoundingClientRect().width ?? 0;
|
|
2859
2852
|
setInlinePaddings({
|
|
@@ -2861,7 +2854,7 @@ var InputGroup = React30.forwardRef(
|
|
|
2861
2854
|
end: endWidth
|
|
2862
2855
|
});
|
|
2863
2856
|
}, []);
|
|
2864
|
-
|
|
2857
|
+
React29.useEffect(() => {
|
|
2865
2858
|
if (!groupRef.current) return;
|
|
2866
2859
|
let timeoutId;
|
|
2867
2860
|
const intersectionObserver = new IntersectionObserver(
|
|
@@ -2881,7 +2874,7 @@ var InputGroup = React30.forwardRef(
|
|
|
2881
2874
|
}
|
|
2882
2875
|
};
|
|
2883
2876
|
}, [calculateInlinePaddings]);
|
|
2884
|
-
|
|
2877
|
+
React29.useEffect(() => {
|
|
2885
2878
|
calculateInlinePaddings();
|
|
2886
2879
|
const resizeHandler = debounce(calculateInlinePaddings, 300);
|
|
2887
2880
|
const resizeObserver = new ResizeObserver(resizeHandler);
|
|
@@ -2892,7 +2885,7 @@ var InputGroup = React30.forwardRef(
|
|
|
2892
2885
|
resizeObserver.disconnect();
|
|
2893
2886
|
};
|
|
2894
2887
|
}, [calculateInlinePaddings]);
|
|
2895
|
-
const combinedRef =
|
|
2888
|
+
const combinedRef = React29.useCallback((node) => {
|
|
2896
2889
|
groupRef.current = node;
|
|
2897
2890
|
if (typeof ref === "function") {
|
|
2898
2891
|
ref(node);
|
|
@@ -2921,11 +2914,11 @@ var InputGroup = React30.forwardRef(
|
|
|
2921
2914
|
children: startElement
|
|
2922
2915
|
}
|
|
2923
2916
|
),
|
|
2924
|
-
|
|
2917
|
+
React29.Children.map(children, (child) => {
|
|
2925
2918
|
if (getComponentDisplayName2(child.type) !== "FieldInput") {
|
|
2926
2919
|
return child;
|
|
2927
2920
|
}
|
|
2928
|
-
return
|
|
2921
|
+
return React29.cloneElement(child, {
|
|
2929
2922
|
...startElement && { ps: startOffset ?? (inlinePaddings?.start ? `${inlinePaddings.start}px` : void 0) },
|
|
2930
2923
|
...endElement && { pe: endOffset ?? (inlinePaddings?.end ? `${inlinePaddings.end}px` : void 0) },
|
|
2931
2924
|
// hide input value and placeholder for the first render
|
|
@@ -2966,7 +2959,7 @@ function parsePlacement(placement) {
|
|
|
2966
2959
|
}
|
|
2967
2960
|
return { side, align };
|
|
2968
2961
|
}
|
|
2969
|
-
var PositioningContext =
|
|
2962
|
+
var PositioningContext = React29.createContext({
|
|
2970
2963
|
side: "bottom",
|
|
2971
2964
|
align: "start",
|
|
2972
2965
|
sideOffset: 4,
|
|
@@ -2996,13 +2989,13 @@ var MenuRoot = (props) => {
|
|
|
2996
2989
|
}
|
|
2997
2990
|
};
|
|
2998
2991
|
const { side, align } = parsePlacement(mergedPositioning.placement);
|
|
2999
|
-
const positioningValue =
|
|
2992
|
+
const positioningValue = React29.useMemo(() => ({
|
|
3000
2993
|
side,
|
|
3001
2994
|
align,
|
|
3002
2995
|
sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
|
|
3003
2996
|
alignOffset: mergedPositioning.offset?.crossAxis ?? 0
|
|
3004
2997
|
}), [side, align, mergedPositioning.offset?.mainAxis, mergedPositioning.offset?.crossAxis]);
|
|
3005
|
-
const handleOpenChange =
|
|
2998
|
+
const handleOpenChange = React29.useCallback((isOpen) => {
|
|
3006
2999
|
onOpenChange?.({ open: isOpen });
|
|
3007
3000
|
}, [onOpenChange]);
|
|
3008
3001
|
return /* @__PURE__ */ jsx(PositioningContext.Provider, { value: positioningValue, children: /* @__PURE__ */ jsx(
|
|
@@ -3016,13 +3009,13 @@ var MenuRoot = (props) => {
|
|
|
3016
3009
|
}
|
|
3017
3010
|
) });
|
|
3018
3011
|
};
|
|
3019
|
-
var MenuTrigger =
|
|
3012
|
+
var MenuTrigger = React29.forwardRef(function MenuTrigger2(props, ref) {
|
|
3020
3013
|
const { asChild = false, ...rest } = props;
|
|
3021
3014
|
return /* @__PURE__ */ jsx(DropdownMenu.Trigger, { asChild, ref, ...rest });
|
|
3022
3015
|
});
|
|
3023
|
-
var MenuContent =
|
|
3016
|
+
var MenuContent = React29.forwardRef(function MenuContent2(props, ref) {
|
|
3024
3017
|
const { portalled = true, portalRef, className, zIndex, minW, style, ...rest } = props;
|
|
3025
|
-
const positioning =
|
|
3018
|
+
const positioning = React29.useContext(PositioningContext);
|
|
3026
3019
|
const mergedStyle = {
|
|
3027
3020
|
...style,
|
|
3028
3021
|
...zIndex !== void 0 ? { zIndex: typeof zIndex === "string" ? `var(--z-index-${zIndex}, ${zIndex})` : zIndex } : {},
|
|
@@ -3057,7 +3050,7 @@ var MenuContent = React30.forwardRef(function MenuContent2(props, ref) {
|
|
|
3057
3050
|
}
|
|
3058
3051
|
return /* @__PURE__ */ jsx(DropdownMenu.Portal, { container: portalRef?.current ?? void 0, children: content });
|
|
3059
3052
|
});
|
|
3060
|
-
var MenuItem =
|
|
3053
|
+
var MenuItem = React29.forwardRef(function MenuItem2(props, ref) {
|
|
3061
3054
|
const { className, value: _value, asChild, closeOnSelect: _closeOnSelect, disabled, children, onClick, ...rest } = props;
|
|
3062
3055
|
return /* @__PURE__ */ jsx(
|
|
3063
3056
|
DropdownMenu.Item,
|
|
@@ -3079,11 +3072,11 @@ var MenuItem = React30.forwardRef(function MenuItem2(props, ref) {
|
|
|
3079
3072
|
}
|
|
3080
3073
|
);
|
|
3081
3074
|
});
|
|
3082
|
-
var MenuItemText =
|
|
3075
|
+
var MenuItemText = React29.forwardRef(function MenuItemText2(props, ref) {
|
|
3083
3076
|
const { className, ...rest } = props;
|
|
3084
3077
|
return /* @__PURE__ */ jsx("span", { ref, className: cn("flex-1", className), ...rest });
|
|
3085
3078
|
});
|
|
3086
|
-
|
|
3079
|
+
React29.forwardRef(function MenuItemCommand2(props, ref) {
|
|
3087
3080
|
const { className, ...rest } = props;
|
|
3088
3081
|
return /* @__PURE__ */ jsx(
|
|
3089
3082
|
"span",
|
|
@@ -3094,7 +3087,7 @@ React30.forwardRef(function MenuItemCommand2(props, ref) {
|
|
|
3094
3087
|
}
|
|
3095
3088
|
);
|
|
3096
3089
|
});
|
|
3097
|
-
var MenuSeparator =
|
|
3090
|
+
var MenuSeparator = React29.forwardRef(function MenuSeparator2(props, ref) {
|
|
3098
3091
|
const { className, ...rest } = props;
|
|
3099
3092
|
return /* @__PURE__ */ jsx(
|
|
3100
3093
|
DropdownMenu.Separator,
|
|
@@ -3105,14 +3098,14 @@ var MenuSeparator = React30.forwardRef(function MenuSeparator2(props, ref) {
|
|
|
3105
3098
|
}
|
|
3106
3099
|
);
|
|
3107
3100
|
});
|
|
3108
|
-
var MenuItemGroup =
|
|
3101
|
+
var MenuItemGroup = React29.forwardRef(function MenuItemGroup2(props, ref) {
|
|
3109
3102
|
const { title, children, className, ...rest } = props;
|
|
3110
3103
|
return /* @__PURE__ */ jsxs(DropdownMenu.Group, { ref, className, ...rest, children: [
|
|
3111
3104
|
title && /* @__PURE__ */ jsx(DropdownMenu.Label, { className: "px-2 py-1.5 text-xs font-semibold select-none opacity-60", children: title }),
|
|
3112
3105
|
children
|
|
3113
3106
|
] });
|
|
3114
3107
|
});
|
|
3115
|
-
var MenuArrow =
|
|
3108
|
+
var MenuArrow = React29.forwardRef(function MenuArrow2(props, ref) {
|
|
3116
3109
|
const { className, ...rest } = props;
|
|
3117
3110
|
return /* @__PURE__ */ jsx(
|
|
3118
3111
|
DropdownMenu.Arrow,
|
|
@@ -3123,7 +3116,7 @@ var MenuArrow = React30.forwardRef(function MenuArrow2(props, ref) {
|
|
|
3123
3116
|
}
|
|
3124
3117
|
);
|
|
3125
3118
|
});
|
|
3126
|
-
var MenuCheckboxItem =
|
|
3119
|
+
var MenuCheckboxItem = React29.forwardRef(function MenuCheckboxItem2(props, ref) {
|
|
3127
3120
|
const { className, children, checked, onCheckedChange, onClick, ...rest } = props;
|
|
3128
3121
|
return /* @__PURE__ */ jsxs(
|
|
3129
3122
|
DropdownMenu.CheckboxItem,
|
|
@@ -3147,7 +3140,7 @@ var MenuCheckboxItem = React30.forwardRef(function MenuCheckboxItem2(props, ref)
|
|
|
3147
3140
|
}
|
|
3148
3141
|
);
|
|
3149
3142
|
});
|
|
3150
|
-
var MenuRadioItemGroup =
|
|
3143
|
+
var MenuRadioItemGroup = React29.forwardRef(function MenuRadioItemGroup2(props, ref) {
|
|
3151
3144
|
const { value, onValueChange, ...rest } = props;
|
|
3152
3145
|
return /* @__PURE__ */ jsx(
|
|
3153
3146
|
DropdownMenu.RadioGroup,
|
|
@@ -3159,7 +3152,7 @@ var MenuRadioItemGroup = React30.forwardRef(function MenuRadioItemGroup2(props,
|
|
|
3159
3152
|
}
|
|
3160
3153
|
);
|
|
3161
3154
|
});
|
|
3162
|
-
var MenuRadioItem =
|
|
3155
|
+
var MenuRadioItem = React29.forwardRef(function MenuRadioItem2(props, ref) {
|
|
3163
3156
|
const { className, children, value, onClick, ...rest } = props;
|
|
3164
3157
|
const { value: _v, ...radixRest } = rest;
|
|
3165
3158
|
return /* @__PURE__ */ jsxs(
|
|
@@ -3182,11 +3175,11 @@ var MenuRadioItem = React30.forwardRef(function MenuRadioItem2(props, ref) {
|
|
|
3182
3175
|
}
|
|
3183
3176
|
);
|
|
3184
3177
|
});
|
|
3185
|
-
|
|
3178
|
+
React29.forwardRef(function MenuContextTrigger2(props, ref) {
|
|
3186
3179
|
const { asChild: _asChild, ...rest } = props;
|
|
3187
3180
|
return /* @__PURE__ */ jsx("span", { ref, ...rest });
|
|
3188
3181
|
});
|
|
3189
|
-
var MenuTriggerItem =
|
|
3182
|
+
var MenuTriggerItem = React29.forwardRef(function MenuTriggerItem2(props, ref) {
|
|
3190
3183
|
const { startIcon, children, className, ...rest } = props;
|
|
3191
3184
|
return /* @__PURE__ */ jsx(DropdownMenu.Sub, { children: /* @__PURE__ */ jsxs(
|
|
3192
3185
|
DropdownMenu.SubTrigger,
|
|
@@ -3221,7 +3214,7 @@ var INPUT_BASE2 = [
|
|
|
3221
3214
|
].join(" ");
|
|
3222
3215
|
var INPUT_FILLED = "border-[var(--color-input-border)]";
|
|
3223
3216
|
var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
|
|
3224
|
-
var PinInput =
|
|
3217
|
+
var PinInput = React29.forwardRef(
|
|
3225
3218
|
function PinInput2(props, ref) {
|
|
3226
3219
|
const {
|
|
3227
3220
|
count = 6,
|
|
@@ -3239,12 +3232,12 @@ var PinInput = React30.forwardRef(
|
|
|
3239
3232
|
bgColor,
|
|
3240
3233
|
className
|
|
3241
3234
|
} = props;
|
|
3242
|
-
const inputRefs =
|
|
3243
|
-
const values =
|
|
3235
|
+
const inputRefs = React29.useRef([]);
|
|
3236
|
+
const values = React29.useMemo(
|
|
3244
3237
|
() => controlledValue ?? Array.from({ length: count }).fill(""),
|
|
3245
3238
|
[controlledValue, count]
|
|
3246
3239
|
);
|
|
3247
|
-
const updateValue =
|
|
3240
|
+
const updateValue = React29.useCallback((index, char) => {
|
|
3248
3241
|
const next = [...values];
|
|
3249
3242
|
next[index] = char;
|
|
3250
3243
|
onValueChange?.({ value: next });
|
|
@@ -3252,11 +3245,11 @@ var PinInput = React30.forwardRef(
|
|
|
3252
3245
|
onValueComplete?.({ value: next });
|
|
3253
3246
|
}
|
|
3254
3247
|
}, [values, onValueChange, onValueComplete]);
|
|
3255
|
-
const focusInput =
|
|
3248
|
+
const focusInput = React29.useCallback((index) => {
|
|
3256
3249
|
const clamped = Math.max(0, Math.min(index, count - 1));
|
|
3257
3250
|
inputRefs.current[clamped]?.focus();
|
|
3258
3251
|
}, [count]);
|
|
3259
|
-
const handleInput =
|
|
3252
|
+
const handleInput = React29.useCallback((index, e) => {
|
|
3260
3253
|
const target = e.currentTarget;
|
|
3261
3254
|
const char = target.value.slice(-1);
|
|
3262
3255
|
updateValue(index, char);
|
|
@@ -3264,7 +3257,7 @@ var PinInput = React30.forwardRef(
|
|
|
3264
3257
|
focusInput(index + 1);
|
|
3265
3258
|
}
|
|
3266
3259
|
}, [count, updateValue, focusInput]);
|
|
3267
|
-
const handleKeyDown =
|
|
3260
|
+
const handleKeyDown = React29.useCallback((index, e) => {
|
|
3268
3261
|
if (e.key === "Backspace") {
|
|
3269
3262
|
if (values[index]) {
|
|
3270
3263
|
updateValue(index, "");
|
|
@@ -3281,7 +3274,7 @@ var PinInput = React30.forwardRef(
|
|
|
3281
3274
|
e.preventDefault();
|
|
3282
3275
|
}
|
|
3283
3276
|
}, [count, values, updateValue, focusInput]);
|
|
3284
|
-
const handlePaste =
|
|
3277
|
+
const handlePaste = React29.useCallback((e) => {
|
|
3285
3278
|
e.preventDefault();
|
|
3286
3279
|
const pasted = e.clipboardData.getData("text/plain").trim();
|
|
3287
3280
|
if (!pasted) {
|
|
@@ -3298,18 +3291,18 @@ var PinInput = React30.forwardRef(
|
|
|
3298
3291
|
}
|
|
3299
3292
|
focusInput(Math.min(chars.length, count - 1));
|
|
3300
3293
|
}, [count, values, onValueChange, onValueComplete, focusInput]);
|
|
3301
|
-
const handleFocus =
|
|
3294
|
+
const handleFocus = React29.useCallback((e) => {
|
|
3302
3295
|
e.currentTarget.select();
|
|
3303
3296
|
}, []);
|
|
3304
|
-
const handleNoop =
|
|
3297
|
+
const handleNoop = React29.useCallback(() => {
|
|
3305
3298
|
}, []);
|
|
3306
|
-
const setInputRef =
|
|
3299
|
+
const setInputRef = React29.useCallback((index) => (el) => {
|
|
3307
3300
|
inputRefs.current[index] = el;
|
|
3308
3301
|
}, []);
|
|
3309
|
-
const onInputAtIndex =
|
|
3302
|
+
const onInputAtIndex = React29.useCallback((index) => (e) => {
|
|
3310
3303
|
handleInput(index, e);
|
|
3311
3304
|
}, [handleInput]);
|
|
3312
|
-
const onKeyDownAtIndex =
|
|
3305
|
+
const onKeyDownAtIndex = React29.useCallback((index) => (e) => {
|
|
3313
3306
|
handleKeyDown(index, e);
|
|
3314
3307
|
}, [handleKeyDown]);
|
|
3315
3308
|
const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
|
|
@@ -3370,7 +3363,7 @@ function parsePlacement2(placement) {
|
|
|
3370
3363
|
}
|
|
3371
3364
|
return { side, align };
|
|
3372
3365
|
}
|
|
3373
|
-
var PositioningContext2 =
|
|
3366
|
+
var PositioningContext2 = React29.createContext({
|
|
3374
3367
|
side: "bottom",
|
|
3375
3368
|
align: "start",
|
|
3376
3369
|
sideOffset: 4,
|
|
@@ -3404,7 +3397,7 @@ var PopoverRoot = (props) => {
|
|
|
3404
3397
|
}
|
|
3405
3398
|
};
|
|
3406
3399
|
const { side, align } = parsePlacement2(mergedPositioning.placement);
|
|
3407
|
-
const positioningValue =
|
|
3400
|
+
const positioningValue = React29.useMemo(() => ({
|
|
3408
3401
|
side,
|
|
3409
3402
|
align,
|
|
3410
3403
|
sideOffset: mergedPositioning.offset?.mainAxis ?? 4,
|
|
@@ -3421,7 +3414,7 @@ var PopoverRoot = (props) => {
|
|
|
3421
3414
|
autoFocus,
|
|
3422
3415
|
closeOnInteractOutside
|
|
3423
3416
|
]);
|
|
3424
|
-
const handleOpenChange =
|
|
3417
|
+
const handleOpenChange = React29.useCallback((isOpen) => {
|
|
3425
3418
|
onOpenChange?.({ open: isOpen });
|
|
3426
3419
|
}, [onOpenChange]);
|
|
3427
3420
|
const placement = mergedPositioning.placement ?? "bottom-start";
|
|
@@ -3439,11 +3432,11 @@ var PopoverRoot = (props) => {
|
|
|
3439
3432
|
}
|
|
3440
3433
|
) });
|
|
3441
3434
|
};
|
|
3442
|
-
var PopoverTrigger =
|
|
3435
|
+
var PopoverTrigger = React29.forwardRef(function PopoverTrigger2(props, ref) {
|
|
3443
3436
|
const { asChild = true, ...rest } = props;
|
|
3444
3437
|
return /* @__PURE__ */ jsx(Popover.Trigger, { asChild: asChild ? "except-style" : void 0, ref, ...rest });
|
|
3445
3438
|
});
|
|
3446
|
-
var PopoverContent =
|
|
3439
|
+
var PopoverContent = React29.forwardRef(function PopoverContent2(props, ref) {
|
|
3447
3440
|
const { portalled = true, portalRef: _portalRef, className, w, minW, maxW, paddingTop, style: styleProp, ...rest } = props;
|
|
3448
3441
|
const resolvedW = typeof w === "object" ? w.base ?? w.lg : w;
|
|
3449
3442
|
const contentStyle = {
|
|
@@ -3474,7 +3467,7 @@ var PopoverContent = React30.forwardRef(function PopoverContent2(props, ref) {
|
|
|
3474
3467
|
}
|
|
3475
3468
|
);
|
|
3476
3469
|
});
|
|
3477
|
-
var PopoverArrow =
|
|
3470
|
+
var PopoverArrow = React29.forwardRef(function PopoverArrow2(props, ref) {
|
|
3478
3471
|
const { className, ...rest } = props;
|
|
3479
3472
|
return /* @__PURE__ */ jsx(
|
|
3480
3473
|
Popover.Arrow,
|
|
@@ -3486,7 +3479,7 @@ var PopoverArrow = React30.forwardRef(function PopoverArrow2(props, ref) {
|
|
|
3486
3479
|
}
|
|
3487
3480
|
);
|
|
3488
3481
|
});
|
|
3489
|
-
var PopoverCloseTrigger =
|
|
3482
|
+
var PopoverCloseTrigger = React29.forwardRef(function PopoverCloseTrigger2(props, ref) {
|
|
3490
3483
|
const { className, ...rest } = props;
|
|
3491
3484
|
return /* @__PURE__ */ jsx(
|
|
3492
3485
|
Popover.Close,
|
|
@@ -3500,14 +3493,14 @@ var PopoverCloseTrigger = React30.forwardRef(function PopoverCloseTrigger2(props
|
|
|
3500
3493
|
}
|
|
3501
3494
|
);
|
|
3502
3495
|
});
|
|
3503
|
-
var PopoverCloseTriggerWrapper =
|
|
3496
|
+
var PopoverCloseTriggerWrapper = React29.forwardRef(function PopoverCloseTriggerWrapper2(props, ref) {
|
|
3504
3497
|
const { disabled, children, ...rest } = props;
|
|
3505
3498
|
if (disabled) {
|
|
3506
3499
|
return children;
|
|
3507
3500
|
}
|
|
3508
3501
|
return /* @__PURE__ */ jsx(Popover.Close, { ref, ...rest, asChild: true, children });
|
|
3509
3502
|
});
|
|
3510
|
-
var PopoverBody =
|
|
3503
|
+
var PopoverBody = React29.forwardRef(function PopoverBody2(props, ref) {
|
|
3511
3504
|
const {
|
|
3512
3505
|
className,
|
|
3513
3506
|
style: styleProp,
|
|
@@ -3545,7 +3538,7 @@ var PopoverBody = React30.forwardRef(function PopoverBody2(props, ref) {
|
|
|
3545
3538
|
}
|
|
3546
3539
|
);
|
|
3547
3540
|
});
|
|
3548
|
-
var PopoverHeader =
|
|
3541
|
+
var PopoverHeader = React29.forwardRef(function PopoverHeader2(props, ref) {
|
|
3549
3542
|
const { className, ...rest } = props;
|
|
3550
3543
|
return /* @__PURE__ */ jsx(
|
|
3551
3544
|
"div",
|
|
@@ -3556,7 +3549,7 @@ var PopoverHeader = React30.forwardRef(function PopoverHeader2(props, ref) {
|
|
|
3556
3549
|
}
|
|
3557
3550
|
);
|
|
3558
3551
|
});
|
|
3559
|
-
var PopoverFooter =
|
|
3552
|
+
var PopoverFooter = React29.forwardRef(function PopoverFooter2(props, ref) {
|
|
3560
3553
|
const { className, ...rest } = props;
|
|
3561
3554
|
return /* @__PURE__ */ jsx(
|
|
3562
3555
|
"div",
|
|
@@ -3567,7 +3560,7 @@ var PopoverFooter = React30.forwardRef(function PopoverFooter2(props, ref) {
|
|
|
3567
3560
|
}
|
|
3568
3561
|
);
|
|
3569
3562
|
});
|
|
3570
|
-
var PopoverTitle =
|
|
3563
|
+
var PopoverTitle = React29.forwardRef(function PopoverTitle2(props, ref) {
|
|
3571
3564
|
const { className, ...rest } = props;
|
|
3572
3565
|
return /* @__PURE__ */ jsx(
|
|
3573
3566
|
"h3",
|
|
@@ -3578,7 +3571,7 @@ var PopoverTitle = React30.forwardRef(function PopoverTitle2(props, ref) {
|
|
|
3578
3571
|
}
|
|
3579
3572
|
);
|
|
3580
3573
|
});
|
|
3581
|
-
var PopoverDescription =
|
|
3574
|
+
var PopoverDescription = React29.forwardRef(function PopoverDescription2(props, ref) {
|
|
3582
3575
|
const { className, ...rest } = props;
|
|
3583
3576
|
return /* @__PURE__ */ jsx(
|
|
3584
3577
|
"p",
|
|
@@ -3600,7 +3593,7 @@ function normalizeValue(value, min, max) {
|
|
|
3600
3593
|
if (max <= min) return 0;
|
|
3601
3594
|
return Math.round((value - min) / (max - min) * 100);
|
|
3602
3595
|
}
|
|
3603
|
-
var Progress =
|
|
3596
|
+
var Progress = React29.forwardRef(
|
|
3604
3597
|
function Progress2(props, ref) {
|
|
3605
3598
|
const {
|
|
3606
3599
|
value,
|
|
@@ -3677,12 +3670,12 @@ var SIZE_MAP = {
|
|
|
3677
3670
|
lg: { size: 48, thickness: 7, textClass: "text-sm" },
|
|
3678
3671
|
xl: { size: 64, thickness: 8, textClass: "text-sm" }
|
|
3679
3672
|
};
|
|
3680
|
-
var Ctx =
|
|
3673
|
+
var Ctx = React29.createContext({
|
|
3681
3674
|
value: 0,
|
|
3682
3675
|
size: "md",
|
|
3683
3676
|
colorPalette: "blue"
|
|
3684
3677
|
});
|
|
3685
|
-
var ProgressCircleRoot =
|
|
3678
|
+
var ProgressCircleRoot = React29.forwardRef(function ProgressCircleRoot2(props, ref) {
|
|
3686
3679
|
const {
|
|
3687
3680
|
value = 0,
|
|
3688
3681
|
size = "md",
|
|
@@ -3691,7 +3684,7 @@ var ProgressCircleRoot = React30.forwardRef(function ProgressCircleRoot2(props,
|
|
|
3691
3684
|
children,
|
|
3692
3685
|
...rest
|
|
3693
3686
|
} = props;
|
|
3694
|
-
const ctx =
|
|
3687
|
+
const ctx = React29.useMemo(
|
|
3695
3688
|
() => ({ value: value ?? null, size, colorPalette }),
|
|
3696
3689
|
[value, size, colorPalette]
|
|
3697
3690
|
);
|
|
@@ -3709,9 +3702,9 @@ var ProgressCircleRoot = React30.forwardRef(function ProgressCircleRoot2(props,
|
|
|
3709
3702
|
}
|
|
3710
3703
|
) });
|
|
3711
3704
|
});
|
|
3712
|
-
var ProgressCircleRing =
|
|
3705
|
+
var ProgressCircleRing = React29.forwardRef(function ProgressCircleRing2(props, ref) {
|
|
3713
3706
|
const { trackColor, cap, color, className, ...rest } = props;
|
|
3714
|
-
const { value, size: sizeKey } =
|
|
3707
|
+
const { value, size: sizeKey } = React29.useContext(Ctx);
|
|
3715
3708
|
const { size, thickness } = SIZE_MAP[sizeKey];
|
|
3716
3709
|
const radius = size / 2 - thickness / 2;
|
|
3717
3710
|
const circumference = 2 * Math.PI * radius;
|
|
@@ -3766,9 +3759,9 @@ var ProgressCircleRing = React30.forwardRef(function ProgressCircleRing2(props,
|
|
|
3766
3759
|
}
|
|
3767
3760
|
);
|
|
3768
3761
|
});
|
|
3769
|
-
var ProgressCircleValueText =
|
|
3762
|
+
var ProgressCircleValueText = React29.forwardRef(function ProgressCircleValueText2(props, ref) {
|
|
3770
3763
|
const { className, children, ...rest } = props;
|
|
3771
|
-
const { value, size: sizeKey } =
|
|
3764
|
+
const { value, size: sizeKey } = React29.useContext(Ctx);
|
|
3772
3765
|
const { textClass } = SIZE_MAP[sizeKey];
|
|
3773
3766
|
return /* @__PURE__ */ jsx(
|
|
3774
3767
|
"div",
|
|
@@ -3812,8 +3805,8 @@ var SIZE_CLASSES8 = {
|
|
|
3812
3805
|
label: "text-base"
|
|
3813
3806
|
}
|
|
3814
3807
|
};
|
|
3815
|
-
var RadioSizeContext =
|
|
3816
|
-
var RadioGroupBase =
|
|
3808
|
+
var RadioSizeContext = React29.createContext("md");
|
|
3809
|
+
var RadioGroupBase = React29.forwardRef(
|
|
3817
3810
|
function RadioGroup2(props, ref) {
|
|
3818
3811
|
const {
|
|
3819
3812
|
children,
|
|
@@ -3830,7 +3823,7 @@ var RadioGroupBase = React30.forwardRef(
|
|
|
3830
3823
|
className,
|
|
3831
3824
|
...rest
|
|
3832
3825
|
} = props;
|
|
3833
|
-
const handleValueChange =
|
|
3826
|
+
const handleValueChange = React29.useCallback(
|
|
3834
3827
|
(nextValue) => {
|
|
3835
3828
|
if (readOnly) return;
|
|
3836
3829
|
onValueChange?.({ value: nextValue });
|
|
@@ -3863,10 +3856,10 @@ var RadioGroupBase = React30.forwardRef(
|
|
|
3863
3856
|
var RadioGroup3 = RadioGroupBase;
|
|
3864
3857
|
var NOOP2 = () => {
|
|
3865
3858
|
};
|
|
3866
|
-
var RadioBase =
|
|
3859
|
+
var RadioBase = React29.forwardRef(
|
|
3867
3860
|
function Radio(props, ref) {
|
|
3868
3861
|
const { children, inputProps, rootRef, value, disabled, className, ...rest } = props;
|
|
3869
|
-
const size =
|
|
3862
|
+
const size = React29.useContext(RadioSizeContext);
|
|
3870
3863
|
const sizeClasses2 = SIZE_CLASSES8[size];
|
|
3871
3864
|
return /* @__PURE__ */ jsxs(
|
|
3872
3865
|
"label",
|
|
@@ -3928,23 +3921,23 @@ var RadioBase = React30.forwardRef(
|
|
|
3928
3921
|
var Radio2 = RadioBase;
|
|
3929
3922
|
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" }) });
|
|
3930
3923
|
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" }) });
|
|
3931
|
-
var Rating =
|
|
3924
|
+
var Rating = React29.forwardRef(
|
|
3932
3925
|
function Rating2(props, ref) {
|
|
3933
3926
|
const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
|
|
3934
|
-
const [value, setValue] =
|
|
3935
|
-
const [hoveredIndex, setHoveredIndex] =
|
|
3927
|
+
const [value, setValue] = React29.useState(defaultValue);
|
|
3928
|
+
const [hoveredIndex, setHoveredIndex] = React29.useState(-1);
|
|
3936
3929
|
const highlightedIndex = hoveredIndex >= 0 && !readOnly ? hoveredIndex + 1 : value;
|
|
3937
3930
|
const label = Array.isArray(labelProp) ? labelProp[highlightedIndex - 1] : labelProp;
|
|
3938
|
-
const handleClick =
|
|
3931
|
+
const handleClick = React29.useCallback((index) => () => {
|
|
3939
3932
|
if (readOnly) return;
|
|
3940
3933
|
setValue(index);
|
|
3941
3934
|
onValueChange?.({ value: index });
|
|
3942
3935
|
}, [readOnly, onValueChange]);
|
|
3943
|
-
const handleMouseEnter =
|
|
3936
|
+
const handleMouseEnter = React29.useCallback((index) => () => {
|
|
3944
3937
|
if (readOnly) return;
|
|
3945
3938
|
setHoveredIndex(index);
|
|
3946
3939
|
}, [readOnly]);
|
|
3947
|
-
const handleMouseLeave =
|
|
3940
|
+
const handleMouseLeave = React29.useCallback(() => {
|
|
3948
3941
|
setHoveredIndex(-1);
|
|
3949
3942
|
}, []);
|
|
3950
3943
|
return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
|
|
@@ -3978,8 +3971,8 @@ function createListCollection(config) {
|
|
|
3978
3971
|
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" }) });
|
|
3979
3972
|
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" }) });
|
|
3980
3973
|
function FilterInput({ placeholder, initialValue = "", onChange }) {
|
|
3981
|
-
const [value, setValue] =
|
|
3982
|
-
const handleChange =
|
|
3974
|
+
const [value, setValue] = React29.useState(initialValue);
|
|
3975
|
+
const handleChange = React29.useCallback((e) => {
|
|
3983
3976
|
setValue(e.target.value);
|
|
3984
3977
|
onChange?.(e.target.value);
|
|
3985
3978
|
}, [onChange]);
|
|
@@ -3998,15 +3991,15 @@ function FilterInput({ placeholder, initialValue = "", onChange }) {
|
|
|
3998
3991
|
}
|
|
3999
3992
|
);
|
|
4000
3993
|
}
|
|
4001
|
-
var SelectInternalContext =
|
|
3994
|
+
var SelectInternalContext = React29.createContext(null);
|
|
4002
3995
|
function useSelectInternalContext() {
|
|
4003
|
-
const ctx =
|
|
3996
|
+
const ctx = React29.useContext(SelectInternalContext);
|
|
4004
3997
|
if (!ctx) {
|
|
4005
3998
|
throw new Error("Select compound components must be rendered inside <SelectRoot>");
|
|
4006
3999
|
}
|
|
4007
4000
|
return ctx;
|
|
4008
4001
|
}
|
|
4009
|
-
var SelectRoot =
|
|
4002
|
+
var SelectRoot = React29.forwardRef(
|
|
4010
4003
|
function SelectRoot2(props, ref) {
|
|
4011
4004
|
const {
|
|
4012
4005
|
children,
|
|
@@ -4037,21 +4030,21 @@ var SelectRoot = React30.forwardRef(
|
|
|
4037
4030
|
hideFrom: _hideFrom
|
|
4038
4031
|
} = props;
|
|
4039
4032
|
const collection = collectionProp ?? createListCollection({ items: [] });
|
|
4040
|
-
const [internalValue, setInternalValue] =
|
|
4033
|
+
const [internalValue, setInternalValue] = React29.useState(defaultValueArr ?? []);
|
|
4041
4034
|
const currentValue = valueProp ?? internalValue;
|
|
4042
|
-
const selectedItems =
|
|
4035
|
+
const selectedItems = React29.useMemo(() => {
|
|
4043
4036
|
return currentValue.map((v) => collection.items.find((item) => item.value === v)).filter(Boolean);
|
|
4044
4037
|
}, [currentValue, collection.items]);
|
|
4045
|
-
const [open, setOpen] =
|
|
4038
|
+
const [open, setOpen] = React29.useState(defaultOpen ?? false);
|
|
4046
4039
|
const isOpen = openProp ?? open;
|
|
4047
|
-
const handleOpenChange =
|
|
4040
|
+
const handleOpenChange = React29.useCallback((nextOpen) => {
|
|
4048
4041
|
setOpen(nextOpen);
|
|
4049
4042
|
onOpenChange?.(nextOpen);
|
|
4050
4043
|
if (!nextOpen) {
|
|
4051
4044
|
onInteractOutside?.();
|
|
4052
4045
|
}
|
|
4053
4046
|
}, [onOpenChange, onInteractOutside]);
|
|
4054
|
-
const handleRadixValueChange =
|
|
4047
|
+
const handleRadixValueChange = React29.useCallback((radixValue) => {
|
|
4055
4048
|
const nextArr = [radixValue];
|
|
4056
4049
|
if (!valueProp) {
|
|
4057
4050
|
setInternalValue(nextArr);
|
|
@@ -4059,7 +4052,7 @@ var SelectRoot = React30.forwardRef(
|
|
|
4059
4052
|
const items = collection.items.filter((item) => nextArr.includes(item.value));
|
|
4060
4053
|
onValueChangeProp?.({ value: nextArr, items });
|
|
4061
4054
|
}, [valueProp, collection.items, onValueChangeProp]);
|
|
4062
|
-
const ctxValue =
|
|
4055
|
+
const ctxValue = React29.useMemo(() => ({
|
|
4063
4056
|
value: currentValue,
|
|
4064
4057
|
selectedItems,
|
|
4065
4058
|
collection,
|
|
@@ -4079,7 +4072,7 @@ var SelectRoot = React30.forwardRef(
|
|
|
4079
4072
|
if (typeof v === "string") return v;
|
|
4080
4073
|
return v.base ?? v.lg ?? Object.values(v)[0];
|
|
4081
4074
|
};
|
|
4082
|
-
const inlineStyle =
|
|
4075
|
+
const inlineStyle = React29.useMemo(() => {
|
|
4083
4076
|
const s = { ...style };
|
|
4084
4077
|
const rw = resolveVal(w);
|
|
4085
4078
|
if (rw) s.width = rw;
|
|
@@ -4117,7 +4110,7 @@ var SelectRoot = React30.forwardRef(
|
|
|
4117
4110
|
) });
|
|
4118
4111
|
}
|
|
4119
4112
|
);
|
|
4120
|
-
var SelectControl =
|
|
4113
|
+
var SelectControl = React29.forwardRef(
|
|
4121
4114
|
function SelectControl2(props, ref) {
|
|
4122
4115
|
const { children, noIndicator, triggerProps, loading, defaultValue } = props;
|
|
4123
4116
|
const ctx = useSelectInternalContext();
|
|
@@ -4154,11 +4147,11 @@ var SelectControl = React30.forwardRef(
|
|
|
4154
4147
|
return trigger;
|
|
4155
4148
|
}
|
|
4156
4149
|
);
|
|
4157
|
-
var SelectClearTrigger =
|
|
4150
|
+
var SelectClearTrigger = React29.forwardRef(
|
|
4158
4151
|
function SelectClearTrigger2(props, ref) {
|
|
4159
4152
|
const { className, ...rest } = props;
|
|
4160
4153
|
const ctx = useSelectInternalContext();
|
|
4161
|
-
const handleClick =
|
|
4154
|
+
const handleClick = React29.useCallback(() => {
|
|
4162
4155
|
ctx.onValueChange({ value: [], items: [] });
|
|
4163
4156
|
}, [ctx]);
|
|
4164
4157
|
return /* @__PURE__ */ jsx(
|
|
@@ -4175,7 +4168,7 @@ var SelectClearTrigger = React30.forwardRef(
|
|
|
4175
4168
|
);
|
|
4176
4169
|
}
|
|
4177
4170
|
);
|
|
4178
|
-
var SelectContent =
|
|
4171
|
+
var SelectContent = React29.forwardRef(
|
|
4179
4172
|
function SelectContent2(props, ref) {
|
|
4180
4173
|
const { portalled = true, portalRef, children, className, ...rest } = props;
|
|
4181
4174
|
const content = /* @__PURE__ */ jsx(
|
|
@@ -4202,7 +4195,7 @@ var SelectContent = React30.forwardRef(
|
|
|
4202
4195
|
return content;
|
|
4203
4196
|
}
|
|
4204
4197
|
);
|
|
4205
|
-
var SelectItem =
|
|
4198
|
+
var SelectItem = React29.forwardRef(
|
|
4206
4199
|
function SelectItem2(props, ref) {
|
|
4207
4200
|
const { item, children, className, ...rest } = props;
|
|
4208
4201
|
return /* @__PURE__ */ jsxs(
|
|
@@ -4230,7 +4223,7 @@ var SelectItem = React30.forwardRef(
|
|
|
4230
4223
|
);
|
|
4231
4224
|
}
|
|
4232
4225
|
);
|
|
4233
|
-
var SelectValueText =
|
|
4226
|
+
var SelectValueText = React29.forwardRef(
|
|
4234
4227
|
function SelectValueText2(props, ref) {
|
|
4235
4228
|
const { children, size, required, invalid, errorText, mode, className, style, placeholder: placeholderProp, ...rest } = props;
|
|
4236
4229
|
const ctx = useSelectInternalContext();
|
|
@@ -4286,7 +4279,7 @@ var SelectValueText = React30.forwardRef(
|
|
|
4286
4279
|
);
|
|
4287
4280
|
}
|
|
4288
4281
|
);
|
|
4289
|
-
var SelectItemGroup =
|
|
4282
|
+
var SelectItemGroup = React29.forwardRef(
|
|
4290
4283
|
function SelectItemGroup2(props, ref) {
|
|
4291
4284
|
const { children, label, className, ...rest } = props;
|
|
4292
4285
|
return /* @__PURE__ */ jsxs(RadixSelect.Group, { ref, className: cn("py-1", className), ...rest, children: [
|
|
@@ -4297,7 +4290,7 @@ var SelectItemGroup = React30.forwardRef(
|
|
|
4297
4290
|
);
|
|
4298
4291
|
var SelectLabel = RadixSelect.Label;
|
|
4299
4292
|
var SelectItemText = RadixSelect.ItemText;
|
|
4300
|
-
var Select =
|
|
4293
|
+
var Select = React29.forwardRef((props, ref) => {
|
|
4301
4294
|
const { collection, placeholder, portalled = true, loading, errorText, contentProps, contentHeader, itemFilter, mode, ...rest } = props;
|
|
4302
4295
|
return /* @__PURE__ */ jsxs(
|
|
4303
4296
|
SelectRoot,
|
|
@@ -4319,7 +4312,7 @@ var Select = React30.forwardRef((props, ref) => {
|
|
|
4319
4312
|
) }),
|
|
4320
4313
|
/* @__PURE__ */ jsxs(SelectContent, { portalled, ...contentProps, children: [
|
|
4321
4314
|
contentHeader,
|
|
4322
|
-
collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(
|
|
4315
|
+
collection.items.filter(itemFilter ?? (() => true)).map((item) => /* @__PURE__ */ jsxs(React29.Fragment, { children: [
|
|
4323
4316
|
/* @__PURE__ */ jsx(SelectItem, { item, children: item.renderLabel ? item.renderLabel("item") : item.label }),
|
|
4324
4317
|
item.afterElement
|
|
4325
4318
|
] }, item.value))
|
|
@@ -4328,19 +4321,19 @@ var Select = React30.forwardRef((props, ref) => {
|
|
|
4328
4321
|
}
|
|
4329
4322
|
);
|
|
4330
4323
|
});
|
|
4331
|
-
var SelectAsync =
|
|
4324
|
+
var SelectAsync = React29.forwardRef((props, ref) => {
|
|
4332
4325
|
const { placeholder, portalled = true, loading, loadOptions, extraControls, onValueChange, errorText, mode, contentHeader, ...rest } = props;
|
|
4333
|
-
const [collection, setCollection] =
|
|
4334
|
-
const [inputValue, setInputValue] =
|
|
4335
|
-
const [value, setValue] =
|
|
4326
|
+
const [collection, setCollection] = React29.useState(createListCollection({ items: [] }));
|
|
4327
|
+
const [inputValue, setInputValue] = React29.useState("");
|
|
4328
|
+
const [value, setValue] = React29.useState([]);
|
|
4336
4329
|
const debouncedInputValue = useDebounce(inputValue, 300);
|
|
4337
|
-
|
|
4330
|
+
React29.useEffect(() => {
|
|
4338
4331
|
loadOptions(debouncedInputValue, value).then(setCollection);
|
|
4339
4332
|
}, [debouncedInputValue, loadOptions, value]);
|
|
4340
|
-
const handleFilterChange =
|
|
4333
|
+
const handleFilterChange = React29.useCallback((val) => {
|
|
4341
4334
|
setInputValue(val);
|
|
4342
4335
|
}, []);
|
|
4343
|
-
const handleValueChange =
|
|
4336
|
+
const handleValueChange = React29.useCallback(({ value: v, items }) => {
|
|
4344
4337
|
setValue(v);
|
|
4345
4338
|
onValueChange?.({ value: v, items });
|
|
4346
4339
|
}, [onValueChange]);
|
|
@@ -4399,7 +4392,7 @@ var VERTICAL_SIZE_CLASSES = {
|
|
|
4399
4392
|
md: "border-l-2",
|
|
4400
4393
|
lg: "border-l-[3px]"
|
|
4401
4394
|
};
|
|
4402
|
-
var Separator2 =
|
|
4395
|
+
var Separator2 = React29__default.forwardRef(
|
|
4403
4396
|
function Separator3({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
|
|
4404
4397
|
const isVertical = orientation === "vertical";
|
|
4405
4398
|
return /* @__PURE__ */ jsx(
|
|
@@ -4423,7 +4416,7 @@ var Separator2 = React30__default.forwardRef(
|
|
|
4423
4416
|
);
|
|
4424
4417
|
var THUMB_SIZE = 20;
|
|
4425
4418
|
var TRACK_HEIGHT = 6;
|
|
4426
|
-
var Slider =
|
|
4419
|
+
var Slider = React29.forwardRef(
|
|
4427
4420
|
function Slider2(props, ref) {
|
|
4428
4421
|
const {
|
|
4429
4422
|
marks: marksProp,
|
|
@@ -4542,7 +4535,7 @@ var SIZE_CLASSES9 = {
|
|
|
4542
4535
|
label: "text-base"
|
|
4543
4536
|
}
|
|
4544
4537
|
};
|
|
4545
|
-
var SwitchBase =
|
|
4538
|
+
var SwitchBase = React29.forwardRef(
|
|
4546
4539
|
function Switch(props, ref) {
|
|
4547
4540
|
const {
|
|
4548
4541
|
inputProps,
|
|
@@ -4561,10 +4554,10 @@ var SwitchBase = React30.forwardRef(
|
|
|
4561
4554
|
className,
|
|
4562
4555
|
...rest
|
|
4563
4556
|
} = props;
|
|
4564
|
-
const [internalChecked, setInternalChecked] =
|
|
4557
|
+
const [internalChecked, setInternalChecked] = React29.useState(defaultChecked ?? false);
|
|
4565
4558
|
const isControlled = checkedProp !== void 0;
|
|
4566
4559
|
const checkedState = isControlled ? checkedProp : internalChecked;
|
|
4567
|
-
const handleCheckedChange =
|
|
4560
|
+
const handleCheckedChange = React29.useCallback(
|
|
4568
4561
|
(nextChecked) => {
|
|
4569
4562
|
if (!isControlled) {
|
|
4570
4563
|
setInternalChecked(nextChecked);
|
|
@@ -4829,7 +4822,7 @@ function resolveResponsive(value) {
|
|
|
4829
4822
|
}
|
|
4830
4823
|
return void 0;
|
|
4831
4824
|
}
|
|
4832
|
-
var TableRoot =
|
|
4825
|
+
var TableRoot = React29.forwardRef(
|
|
4833
4826
|
function TableRoot2(props, ref) {
|
|
4834
4827
|
const { className, style: styleProp, children, ...other } = props;
|
|
4835
4828
|
const rawMinW = other.minWidth ?? other.minW;
|
|
@@ -4852,7 +4845,7 @@ var TableRoot = React30.forwardRef(
|
|
|
4852
4845
|
);
|
|
4853
4846
|
}
|
|
4854
4847
|
);
|
|
4855
|
-
var TableHeader =
|
|
4848
|
+
var TableHeader = React29.forwardRef(
|
|
4856
4849
|
function TableHeader2(props, ref) {
|
|
4857
4850
|
const { className, style: styleProp, children, ...other } = props;
|
|
4858
4851
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4869,7 +4862,7 @@ var TableHeader = React30.forwardRef(
|
|
|
4869
4862
|
);
|
|
4870
4863
|
}
|
|
4871
4864
|
);
|
|
4872
|
-
var TableBody =
|
|
4865
|
+
var TableBody = React29.forwardRef(
|
|
4873
4866
|
function TableBody2(props, ref) {
|
|
4874
4867
|
const { className, style: styleProp, children, ...other } = props;
|
|
4875
4868
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4886,7 +4879,7 @@ var TableBody = React30.forwardRef(
|
|
|
4886
4879
|
);
|
|
4887
4880
|
}
|
|
4888
4881
|
);
|
|
4889
|
-
var TableRow =
|
|
4882
|
+
var TableRow = React29.forwardRef(
|
|
4890
4883
|
function TableRow2(props, ref) {
|
|
4891
4884
|
const { className, style: styleProp, children, ...other } = props;
|
|
4892
4885
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4903,7 +4896,7 @@ var TableRow = React30.forwardRef(
|
|
|
4903
4896
|
);
|
|
4904
4897
|
}
|
|
4905
4898
|
);
|
|
4906
|
-
var TableCell =
|
|
4899
|
+
var TableCell = React29.forwardRef(
|
|
4907
4900
|
function TableCell2(props, ref) {
|
|
4908
4901
|
const { isNumeric, className, style: styleProp, children, ...other } = props;
|
|
4909
4902
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4924,7 +4917,7 @@ var TableCell = React30.forwardRef(
|
|
|
4924
4917
|
);
|
|
4925
4918
|
}
|
|
4926
4919
|
);
|
|
4927
|
-
var TableColumnHeader =
|
|
4920
|
+
var TableColumnHeader = React29.forwardRef(
|
|
4928
4921
|
function TableColumnHeader2(props, ref) {
|
|
4929
4922
|
const { isNumeric, className, style: styleProp, children, ...other } = props;
|
|
4930
4923
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -4951,7 +4944,7 @@ var TableColumnHeader = React30.forwardRef(
|
|
|
4951
4944
|
);
|
|
4952
4945
|
var TableColumnHeaderSortable = (props) => {
|
|
4953
4946
|
const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = "left", contentAfter, ...rest } = props;
|
|
4954
|
-
const handleSortToggle =
|
|
4947
|
+
const handleSortToggle = React29.useCallback(() => {
|
|
4955
4948
|
onSortToggle(sortField);
|
|
4956
4949
|
}, [onSortToggle, sortField]);
|
|
4957
4950
|
const isActive = sortValue.includes(sortField);
|
|
@@ -4977,16 +4970,16 @@ var TableColumnHeaderSortable = (props) => {
|
|
|
4977
4970
|
var ACTION_BAR_SHADOW = "0 4px 4px -4px rgb(0 0 0 / 10%), 0 2px 4px -4px rgb(0 0 0 / 6%)";
|
|
4978
4971
|
var TableHeaderSticky = (props) => {
|
|
4979
4972
|
const { top, children, className, style: styleProp, ...rest } = props;
|
|
4980
|
-
const ref =
|
|
4981
|
-
const [isStuck, setIsStuck] =
|
|
4982
|
-
const handleScroll =
|
|
4973
|
+
const ref = React29.useRef(null);
|
|
4974
|
+
const [isStuck, setIsStuck] = React29.useState(false);
|
|
4975
|
+
const handleScroll = React29.useCallback(() => {
|
|
4983
4976
|
if (Number(ref.current?.getBoundingClientRect().y) <= (Number(top) || 0)) {
|
|
4984
4977
|
setIsStuck(true);
|
|
4985
4978
|
} else {
|
|
4986
4979
|
setIsStuck(false);
|
|
4987
4980
|
}
|
|
4988
4981
|
}, [top]);
|
|
4989
|
-
|
|
4982
|
+
React29.useEffect(() => {
|
|
4990
4983
|
const throttledHandleScroll = throttle(handleScroll, 300);
|
|
4991
4984
|
window.addEventListener("scroll", throttledHandleScroll);
|
|
4992
4985
|
return () => {
|
|
@@ -5008,7 +5001,7 @@ var TableHeaderSticky = (props) => {
|
|
|
5008
5001
|
}
|
|
5009
5002
|
);
|
|
5010
5003
|
};
|
|
5011
|
-
var TableCaption =
|
|
5004
|
+
var TableCaption = React29.forwardRef(
|
|
5012
5005
|
function TableCaption2(props, ref) {
|
|
5013
5006
|
const { className, style: styleProp, children, ...other } = props;
|
|
5014
5007
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -5025,7 +5018,7 @@ var TableCaption = React30.forwardRef(
|
|
|
5025
5018
|
);
|
|
5026
5019
|
}
|
|
5027
5020
|
);
|
|
5028
|
-
var TableFooter =
|
|
5021
|
+
var TableFooter = React29.forwardRef(
|
|
5029
5022
|
function TableFooter2(props, ref) {
|
|
5030
5023
|
const { className, style: styleProp, children, ...other } = props;
|
|
5031
5024
|
const { style: extracted, rest } = extractStyles(other);
|
|
@@ -5042,7 +5035,7 @@ var TableFooter = React30.forwardRef(
|
|
|
5042
5035
|
);
|
|
5043
5036
|
}
|
|
5044
5037
|
);
|
|
5045
|
-
var TableScrollWrapper =
|
|
5038
|
+
var TableScrollWrapper = React29.forwardRef(
|
|
5046
5039
|
function TableScrollWrapper2(props, ref) {
|
|
5047
5040
|
const { className, children, ...rest } = props;
|
|
5048
5041
|
return /* @__PURE__ */ jsx(
|
|
@@ -5061,7 +5054,7 @@ var ROOT_SIZE_CLASSES = {
|
|
|
5061
5054
|
md: "[--tabs-height:2.5rem] [--tabs-content-padding:1.5rem]",
|
|
5062
5055
|
free: ""
|
|
5063
5056
|
};
|
|
5064
|
-
var TabsRoot =
|
|
5057
|
+
var TabsRoot = React29.forwardRef(
|
|
5065
5058
|
function TabsRoot2(props, ref) {
|
|
5066
5059
|
const {
|
|
5067
5060
|
variant = "solid",
|
|
@@ -5073,7 +5066,7 @@ var TabsRoot = React30.forwardRef(
|
|
|
5073
5066
|
className,
|
|
5074
5067
|
...rest
|
|
5075
5068
|
} = props;
|
|
5076
|
-
const handleValueChange =
|
|
5069
|
+
const handleValueChange = React29.useCallback(
|
|
5077
5070
|
(value) => {
|
|
5078
5071
|
if (!onValueChange) return;
|
|
5079
5072
|
onValueChange({ value });
|
|
@@ -5098,7 +5091,7 @@ var TabsRoot = React30.forwardRef(
|
|
|
5098
5091
|
);
|
|
5099
5092
|
}
|
|
5100
5093
|
);
|
|
5101
|
-
var TabsList =
|
|
5094
|
+
var TabsList = React29.forwardRef(
|
|
5102
5095
|
function TabsList2(props, ref) {
|
|
5103
5096
|
const {
|
|
5104
5097
|
className,
|
|
@@ -5152,7 +5145,7 @@ var TRIGGER_VARIANT_CLASSES = {
|
|
|
5152
5145
|
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",
|
|
5153
5146
|
unstyled: ""
|
|
5154
5147
|
};
|
|
5155
|
-
var TabsTrigger =
|
|
5148
|
+
var TabsTrigger = React29.forwardRef(
|
|
5156
5149
|
function TabsTrigger2(props, ref) {
|
|
5157
5150
|
const {
|
|
5158
5151
|
className,
|
|
@@ -5172,7 +5165,7 @@ var TabsTrigger = React30.forwardRef(
|
|
|
5172
5165
|
visibility: _visibility,
|
|
5173
5166
|
...rest
|
|
5174
5167
|
} = props;
|
|
5175
|
-
const internalRef =
|
|
5168
|
+
const internalRef = React29.useRef(null);
|
|
5176
5169
|
const mergedRef = useMergedRef(ref, internalRef);
|
|
5177
5170
|
const { variant, size, fitted } = useTabsContext(internalRef);
|
|
5178
5171
|
return /* @__PURE__ */ jsx(
|
|
@@ -5192,7 +5185,7 @@ var TabsTrigger = React30.forwardRef(
|
|
|
5192
5185
|
);
|
|
5193
5186
|
}
|
|
5194
5187
|
);
|
|
5195
|
-
var TabsContent =
|
|
5188
|
+
var TabsContent = React29.forwardRef(
|
|
5196
5189
|
function TabsContent2(props, ref) {
|
|
5197
5190
|
const { className, padding: _padding, ...rest } = props;
|
|
5198
5191
|
return /* @__PURE__ */ jsx(
|
|
@@ -5226,8 +5219,8 @@ var TabsCounter = ({ count }) => {
|
|
|
5226
5219
|
);
|
|
5227
5220
|
};
|
|
5228
5221
|
function useTabsContext(triggerRef) {
|
|
5229
|
-
const [ctx, setCtx] =
|
|
5230
|
-
|
|
5222
|
+
const [ctx, setCtx] = React29.useState({ variant: "solid", size: "md", fitted: false });
|
|
5223
|
+
React29.useEffect(() => {
|
|
5231
5224
|
const el = triggerRef.current;
|
|
5232
5225
|
if (!el) return;
|
|
5233
5226
|
const root = el.closest("[data-variant]");
|
|
@@ -5241,7 +5234,7 @@ function useTabsContext(triggerRef) {
|
|
|
5241
5234
|
return ctx;
|
|
5242
5235
|
}
|
|
5243
5236
|
function useMergedRef(...refs) {
|
|
5244
|
-
return
|
|
5237
|
+
return React29.useCallback(
|
|
5245
5238
|
(instance) => {
|
|
5246
5239
|
for (const ref of refs) {
|
|
5247
5240
|
if (!ref) continue;
|
|
@@ -5279,7 +5272,7 @@ var TAG_SELECTED_CLASSES = [
|
|
|
5279
5272
|
"hover:opacity-76"
|
|
5280
5273
|
].join(" ");
|
|
5281
5274
|
var TAG_DISABLED_CLASSES = "opacity-40 pointer-events-none cursor-not-allowed";
|
|
5282
|
-
var Tag =
|
|
5275
|
+
var Tag = React29.forwardRef(
|
|
5283
5276
|
function Tag2(props, ref) {
|
|
5284
5277
|
const {
|
|
5285
5278
|
variant,
|
|
@@ -5366,7 +5359,7 @@ var TEXTAREA_VARIANT_CLASSES = {
|
|
|
5366
5359
|
filled: "border-0 bg-[var(--color-input-filled-bg,theme(colors.gray.100))]",
|
|
5367
5360
|
unstyled: "border-0 bg-transparent p-0"
|
|
5368
5361
|
};
|
|
5369
|
-
var Textarea =
|
|
5362
|
+
var Textarea = React29__default.forwardRef(
|
|
5370
5363
|
({ size = "md", variant = "outline", className, ...rest }, ref) => {
|
|
5371
5364
|
return /* @__PURE__ */ jsx(
|
|
5372
5365
|
"textarea",
|
|
@@ -5502,7 +5495,7 @@ function QuoteCell({ value, highlight, align = "right", onClick, className }) {
|
|
|
5502
5495
|
}
|
|
5503
5496
|
var CALL_HEADERS = ["Bid", "Ask", "Last", "Vol", "OI", "IV", "Delta"];
|
|
5504
5497
|
var PUT_HEADERS = ["Delta", "IV", "OI", "Vol", "Last", "Ask", "Bid"];
|
|
5505
|
-
var OptionChain =
|
|
5498
|
+
var OptionChain = React29.forwardRef(
|
|
5506
5499
|
function OptionChain2(props, ref) {
|
|
5507
5500
|
const {
|
|
5508
5501
|
symbol: _symbol,
|
|
@@ -5513,7 +5506,7 @@ var OptionChain = React30.forwardRef(
|
|
|
5513
5506
|
className,
|
|
5514
5507
|
...rest
|
|
5515
5508
|
} = props;
|
|
5516
|
-
const handleClick =
|
|
5509
|
+
const handleClick = React29.useCallback(
|
|
5517
5510
|
(quote, type, strike) => {
|
|
5518
5511
|
if (!quote || !onSelectContract) return;
|
|
5519
5512
|
onSelectContract({
|
|
@@ -5693,7 +5686,7 @@ function GreekItem({ def, value, compact }) {
|
|
|
5693
5686
|
}
|
|
5694
5687
|
);
|
|
5695
5688
|
}
|
|
5696
|
-
var GreeksDisplay =
|
|
5689
|
+
var GreeksDisplay = React29.forwardRef(
|
|
5697
5690
|
function GreeksDisplay2(props, ref) {
|
|
5698
5691
|
const {
|
|
5699
5692
|
delta,
|
|
@@ -5924,7 +5917,7 @@ function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemov
|
|
|
5924
5917
|
)
|
|
5925
5918
|
] });
|
|
5926
5919
|
}
|
|
5927
|
-
var StrategyBuilder =
|
|
5920
|
+
var StrategyBuilder = React29.forwardRef(
|
|
5928
5921
|
function StrategyBuilder2(props, ref) {
|
|
5929
5922
|
const {
|
|
5930
5923
|
underlying,
|
|
@@ -5936,12 +5929,12 @@ var StrategyBuilder = React30.forwardRef(
|
|
|
5936
5929
|
...rest
|
|
5937
5930
|
} = props;
|
|
5938
5931
|
const defaultExp = expirations[0] ?? "";
|
|
5939
|
-
const [strategyType, setStrategyType] =
|
|
5940
|
-
const [legs, setLegs] =
|
|
5932
|
+
const [strategyType, setStrategyType] = React29.useState("bull_call_spread");
|
|
5933
|
+
const [legs, setLegs] = React29.useState(() => {
|
|
5941
5934
|
const preset = STRATEGY_PRESETS.find((p) => p.value === "bull_call_spread");
|
|
5942
5935
|
return preset ? preset.buildLegs(strikes, spotPrice, defaultExp) : [];
|
|
5943
5936
|
});
|
|
5944
|
-
const handleStrategyChange =
|
|
5937
|
+
const handleStrategyChange = React29.useCallback(
|
|
5945
5938
|
(e) => {
|
|
5946
5939
|
const type = e.target.value;
|
|
5947
5940
|
setStrategyType(type);
|
|
@@ -5952,7 +5945,7 @@ var StrategyBuilder = React30.forwardRef(
|
|
|
5952
5945
|
},
|
|
5953
5946
|
[strikes, spotPrice, defaultExp]
|
|
5954
5947
|
);
|
|
5955
|
-
const handleLegChange =
|
|
5948
|
+
const handleLegChange = React29.useCallback(
|
|
5956
5949
|
(index, leg) => {
|
|
5957
5950
|
setLegs((prev) => {
|
|
5958
5951
|
const next = [...prev];
|
|
@@ -5962,13 +5955,13 @@ var StrategyBuilder = React30.forwardRef(
|
|
|
5962
5955
|
},
|
|
5963
5956
|
[]
|
|
5964
5957
|
);
|
|
5965
|
-
const handleLegRemove =
|
|
5958
|
+
const handleLegRemove = React29.useCallback(
|
|
5966
5959
|
(index) => {
|
|
5967
5960
|
setLegs((prev) => prev.filter((_, i) => i !== index));
|
|
5968
5961
|
},
|
|
5969
5962
|
[]
|
|
5970
5963
|
);
|
|
5971
|
-
const handleAddLeg =
|
|
5964
|
+
const handleAddLeg = React29.useCallback(() => {
|
|
5972
5965
|
if (legs.length >= 4) return;
|
|
5973
5966
|
const atm = findATM(strikes, spotPrice);
|
|
5974
5967
|
setLegs((prev) => [
|
|
@@ -5976,14 +5969,14 @@ var StrategyBuilder = React30.forwardRef(
|
|
|
5976
5969
|
{ action: "buy", type: "call", strike: atm, expiration: defaultExp, quantity: 1 }
|
|
5977
5970
|
]);
|
|
5978
5971
|
}, [legs.length, strikes, spotPrice, defaultExp]);
|
|
5979
|
-
const netPremium =
|
|
5972
|
+
const netPremium = React29.useMemo(() => {
|
|
5980
5973
|
return legs.reduce((sum, leg) => {
|
|
5981
5974
|
if (leg.premium === void 0) return sum;
|
|
5982
5975
|
const sign = leg.action === "buy" ? -1 : 1;
|
|
5983
5976
|
return sum + sign * leg.premium * leg.quantity;
|
|
5984
5977
|
}, 0);
|
|
5985
5978
|
}, [legs]);
|
|
5986
|
-
const handleSubmit =
|
|
5979
|
+
const handleSubmit = React29.useCallback(() => {
|
|
5987
5980
|
if (!onSubmit || legs.length === 0) return;
|
|
5988
5981
|
onSubmit({
|
|
5989
5982
|
type: strategyType,
|
|
@@ -6104,7 +6097,7 @@ function buildPath(points, vb, width, height) {
|
|
|
6104
6097
|
return parts.join(" ");
|
|
6105
6098
|
}
|
|
6106
6099
|
var LEG_COLORS = ["#6366f1", "#f59e0b", "#ec4899", "#06b6d4"];
|
|
6107
|
-
var PnlDiagram =
|
|
6100
|
+
var PnlDiagram = React29.forwardRef(
|
|
6108
6101
|
function PnlDiagram2(props, ref) {
|
|
6109
6102
|
const {
|
|
6110
6103
|
legs,
|
|
@@ -6113,10 +6106,10 @@ var PnlDiagram = React30.forwardRef(
|
|
|
6113
6106
|
className,
|
|
6114
6107
|
...rest
|
|
6115
6108
|
} = props;
|
|
6116
|
-
const containerRef =
|
|
6117
|
-
const [hoverX, setHoverX] =
|
|
6118
|
-
const [dims, setDims] =
|
|
6119
|
-
|
|
6109
|
+
const containerRef = React29.useRef(null);
|
|
6110
|
+
const [hoverX, setHoverX] = React29.useState(null);
|
|
6111
|
+
const [dims, setDims] = React29.useState({ width: 600, height: 240 });
|
|
6112
|
+
React29.useEffect(() => {
|
|
6120
6113
|
const el = containerRef.current;
|
|
6121
6114
|
if (!el) return;
|
|
6122
6115
|
const observer = new ResizeObserver((entries) => {
|
|
@@ -6139,7 +6132,7 @@ var PnlDiagram = React30.forwardRef(
|
|
|
6139
6132
|
const xMax = maxStrike + range * 0.3;
|
|
6140
6133
|
const SAMPLES = 200;
|
|
6141
6134
|
const step = (xMax - xMin) / SAMPLES;
|
|
6142
|
-
const combinedPoints =
|
|
6135
|
+
const combinedPoints = React29.useMemo(() => {
|
|
6143
6136
|
const pts = [];
|
|
6144
6137
|
for (let i = 0; i <= SAMPLES; i++) {
|
|
6145
6138
|
const price = xMin + i * step;
|
|
@@ -6147,7 +6140,7 @@ var PnlDiagram = React30.forwardRef(
|
|
|
6147
6140
|
}
|
|
6148
6141
|
return pts;
|
|
6149
6142
|
}, [legs, multiplier, xMin, step]);
|
|
6150
|
-
const legPointSets =
|
|
6143
|
+
const legPointSets = React29.useMemo(() => {
|
|
6151
6144
|
return legs.map((leg) => {
|
|
6152
6145
|
const pts = [];
|
|
6153
6146
|
for (let i = 0; i <= SAMPLES; i++) {
|
|
@@ -6168,7 +6161,7 @@ var PnlDiagram = React30.forwardRef(
|
|
|
6168
6161
|
const chartH = height - PADDING.top - PADDING.bottom;
|
|
6169
6162
|
const scaleX = (x) => PADDING.left + (x - vb.xMin) / (vb.xMax - vb.xMin) * chartW;
|
|
6170
6163
|
const scaleY = (y) => PADDING.top + chartH - (y - vb.yMin) / (vb.yMax - vb.yMin) * chartH;
|
|
6171
|
-
const breakevens =
|
|
6164
|
+
const breakevens = React29.useMemo(() => {
|
|
6172
6165
|
const pts = [];
|
|
6173
6166
|
for (let i = 1; i < combinedPoints.length; i++) {
|
|
6174
6167
|
const prev = combinedPoints[i - 1];
|
|
@@ -6185,7 +6178,7 @@ var PnlDiagram = React30.forwardRef(
|
|
|
6185
6178
|
const maxGainPoint = combinedPoints.find((p) => p.y === maxGain);
|
|
6186
6179
|
const maxLossPoint = combinedPoints.find((p) => p.y === maxLoss);
|
|
6187
6180
|
const zeroY = scaleY(0);
|
|
6188
|
-
const handleMouseMove =
|
|
6181
|
+
const handleMouseMove = React29.useCallback(
|
|
6189
6182
|
(e) => {
|
|
6190
6183
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
6191
6184
|
const mouseX = e.clientX - rect.left;
|
|
@@ -6198,7 +6191,7 @@ var PnlDiagram = React30.forwardRef(
|
|
|
6198
6191
|
},
|
|
6199
6192
|
[vb.xMin, vb.xMax, chartW]
|
|
6200
6193
|
);
|
|
6201
|
-
const handleMouseLeave =
|
|
6194
|
+
const handleMouseLeave = React29.useCallback(() => setHoverX(null), []);
|
|
6202
6195
|
const hoverPnl = hoverX !== null ? calcTotalPnl(legs, hoverX, multiplier) : null;
|
|
6203
6196
|
buildPath(
|
|
6204
6197
|
combinedPoints.map((p) => ({ x: scaleX(p.x), y: scaleY(p.y) })).map((p) => ({ x: p.x - PADDING.left, y: p.y - PADDING.top })),
|
|
@@ -6502,7 +6495,7 @@ function formatDate(date) {
|
|
|
6502
6495
|
const d = new Date(date);
|
|
6503
6496
|
return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
6504
6497
|
}
|
|
6505
|
-
var OptionPositionCard =
|
|
6498
|
+
var OptionPositionCard = React29.forwardRef(
|
|
6506
6499
|
function OptionPositionCard2(props, ref) {
|
|
6507
6500
|
const {
|
|
6508
6501
|
position,
|
|
@@ -6664,7 +6657,7 @@ function ExpirationPill({ exp, isSelected, onClick }) {
|
|
|
6664
6657
|
}
|
|
6665
6658
|
);
|
|
6666
6659
|
}
|
|
6667
|
-
var ExpirationSelector =
|
|
6660
|
+
var ExpirationSelector = React29.forwardRef(
|
|
6668
6661
|
function ExpirationSelector2(props, ref) {
|
|
6669
6662
|
const {
|
|
6670
6663
|
expirations,
|
|
@@ -6674,8 +6667,8 @@ var ExpirationSelector = React30.forwardRef(
|
|
|
6674
6667
|
className,
|
|
6675
6668
|
...rest
|
|
6676
6669
|
} = props;
|
|
6677
|
-
const scrollRef =
|
|
6678
|
-
|
|
6670
|
+
const scrollRef = React29.useRef(null);
|
|
6671
|
+
React29.useEffect(() => {
|
|
6679
6672
|
const container = scrollRef.current;
|
|
6680
6673
|
if (!container) return;
|
|
6681
6674
|
const selectedEl = container.querySelector('[data-selected="true"]');
|