@dilipod/ui 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +71 -3
- package/dist/index.d.ts +71 -3
- package/dist/index.js +2209 -46
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +2196 -49
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/accordion.stories.tsx +66 -0
- package/src/components/accordion.tsx +58 -0
- package/src/components/input.stories.tsx +57 -0
- package/src/components/input.tsx +26 -0
- package/src/components/label.stories.tsx +39 -0
- package/src/components/label.tsx +27 -0
- package/src/components/logo.tsx +4 -4
- package/src/components/navigation-menu.stories.tsx +88 -0
- package/src/components/navigation-menu.tsx +130 -0
- package/src/components/separator.stories.tsx +50 -0
- package/src/components/separator.tsx +32 -0
- package/src/components/sheet.tsx +5 -0
- package/src/components/stat.tsx +4 -4
- package/src/components/textarea.stories.tsx +49 -0
- package/src/components/textarea.tsx +25 -0
- package/src/index.ts +33 -0
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React37 = require('react');
|
|
4
4
|
var reactSlot = require('@radix-ui/react-slot');
|
|
5
5
|
var classVarianceAuthority = require('class-variance-authority');
|
|
6
6
|
var clsx = require('clsx');
|
|
@@ -8,6 +8,7 @@ var tailwindMerge = require('tailwind-merge');
|
|
|
8
8
|
var jsxRuntime = require('react/jsx-runtime');
|
|
9
9
|
var SheetPrimitive = require('@radix-ui/react-dialog');
|
|
10
10
|
var react = require('@phosphor-icons/react');
|
|
11
|
+
var ReactDOM2 = require('react-dom');
|
|
11
12
|
|
|
12
13
|
function _interopNamespace(e) {
|
|
13
14
|
if (e && e.__esModule) return e;
|
|
@@ -27,8 +28,9 @@ function _interopNamespace(e) {
|
|
|
27
28
|
return Object.freeze(n);
|
|
28
29
|
}
|
|
29
30
|
|
|
30
|
-
var
|
|
31
|
+
var React37__namespace = /*#__PURE__*/_interopNamespace(React37);
|
|
31
32
|
var SheetPrimitive__namespace = /*#__PURE__*/_interopNamespace(SheetPrimitive);
|
|
33
|
+
var ReactDOM2__namespace = /*#__PURE__*/_interopNamespace(ReactDOM2);
|
|
32
34
|
|
|
33
35
|
// src/components/button.tsx
|
|
34
36
|
function cn(...inputs) {
|
|
@@ -60,7 +62,7 @@ var buttonVariants = classVarianceAuthority.cva(
|
|
|
60
62
|
}
|
|
61
63
|
}
|
|
62
64
|
);
|
|
63
|
-
var Button =
|
|
65
|
+
var Button = React37__namespace.forwardRef(
|
|
64
66
|
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
65
67
|
const Comp = asChild ? reactSlot.Slot : "button";
|
|
66
68
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -78,16 +80,19 @@ var Sheet = SheetPrimitive__namespace.Root;
|
|
|
78
80
|
var SheetTrigger = SheetPrimitive__namespace.Trigger;
|
|
79
81
|
var SheetClose = SheetPrimitive__namespace.Close;
|
|
80
82
|
var SheetPortal = SheetPrimitive__namespace.Portal;
|
|
81
|
-
var SheetOverlay =
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
className
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
83
|
+
var SheetOverlay = React37__namespace.forwardRef(({ className, ...props }, ref) => (
|
|
84
|
+
// @ts-ignore - Radix Dialog Overlay accepts className at runtime
|
|
85
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
86
|
+
SheetPrimitive__namespace.Overlay,
|
|
87
|
+
{
|
|
88
|
+
className: cn(
|
|
89
|
+
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
90
|
+
className
|
|
91
|
+
),
|
|
92
|
+
...props,
|
|
93
|
+
ref
|
|
94
|
+
}
|
|
95
|
+
)
|
|
91
96
|
));
|
|
92
97
|
SheetOverlay.displayName = SheetPrimitive__namespace.Overlay.displayName;
|
|
93
98
|
var sheetVariants = classVarianceAuthority.cva(
|
|
@@ -106,7 +111,7 @@ var sheetVariants = classVarianceAuthority.cva(
|
|
|
106
111
|
}
|
|
107
112
|
}
|
|
108
113
|
);
|
|
109
|
-
var SheetContent =
|
|
114
|
+
var SheetContent = React37__namespace.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
|
|
110
115
|
/* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
|
|
111
116
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
112
117
|
SheetPrimitive__namespace.Content,
|
|
@@ -153,22 +158,28 @@ var SheetFooter = ({
|
|
|
153
158
|
}
|
|
154
159
|
);
|
|
155
160
|
SheetFooter.displayName = "SheetFooter";
|
|
156
|
-
var SheetTitle =
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
161
|
+
var SheetTitle = React37__namespace.forwardRef(({ className, ...props }, ref) => (
|
|
162
|
+
// @ts-ignore - Radix Dialog Title accepts className at runtime
|
|
163
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
164
|
+
SheetPrimitive__namespace.Title,
|
|
165
|
+
{
|
|
166
|
+
ref,
|
|
167
|
+
className: cn("text-lg font-semibold text-[var(--black)]", className),
|
|
168
|
+
...props
|
|
169
|
+
}
|
|
170
|
+
)
|
|
163
171
|
));
|
|
164
172
|
SheetTitle.displayName = SheetPrimitive__namespace.Title.displayName;
|
|
165
|
-
var SheetDescription =
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
173
|
+
var SheetDescription = React37__namespace.forwardRef(({ className, ...props }, ref) => (
|
|
174
|
+
// @ts-ignore - Radix Dialog Description accepts className at runtime
|
|
175
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
176
|
+
SheetPrimitive__namespace.Description,
|
|
177
|
+
{
|
|
178
|
+
ref,
|
|
179
|
+
className: cn("text-sm text-gray-500", className),
|
|
180
|
+
...props
|
|
181
|
+
}
|
|
182
|
+
)
|
|
172
183
|
));
|
|
173
184
|
SheetDescription.displayName = SheetPrimitive__namespace.Description.displayName;
|
|
174
185
|
var sizes = {
|
|
@@ -179,7 +190,7 @@ var sizes = {
|
|
|
179
190
|
function Logo({
|
|
180
191
|
variant = "dark",
|
|
181
192
|
size = "md",
|
|
182
|
-
href,
|
|
193
|
+
href = "/",
|
|
183
194
|
className
|
|
184
195
|
}) {
|
|
185
196
|
const s = sizes[size];
|
|
@@ -230,8 +241,8 @@ function Logo({
|
|
|
230
241
|
]
|
|
231
242
|
}
|
|
232
243
|
);
|
|
233
|
-
if (href) {
|
|
234
|
-
return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: "inline-flex items-center group", children: svgContent });
|
|
244
|
+
if (href !== null) {
|
|
245
|
+
return /* @__PURE__ */ jsxRuntime.jsx("a", { href, "aria-label": "Go to homepage", className: "inline-flex items-center group", children: svgContent });
|
|
235
246
|
}
|
|
236
247
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center", children: svgContent });
|
|
237
248
|
}
|
|
@@ -259,7 +270,7 @@ var badgeVariants = classVarianceAuthority.cva(
|
|
|
259
270
|
}
|
|
260
271
|
}
|
|
261
272
|
);
|
|
262
|
-
var Badge =
|
|
273
|
+
var Badge = React37__namespace.forwardRef(
|
|
263
274
|
({ className, variant, size, pulse, pulseColor: pulseColorProp, children, ...props }, ref) => {
|
|
264
275
|
const pulseColorMap = {
|
|
265
276
|
default: "bg-gray-500",
|
|
@@ -304,7 +315,7 @@ var Badge = React4__namespace.forwardRef(
|
|
|
304
315
|
}
|
|
305
316
|
);
|
|
306
317
|
Badge.displayName = "Badge";
|
|
307
|
-
var Card =
|
|
318
|
+
var Card = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
308
319
|
"div",
|
|
309
320
|
{
|
|
310
321
|
ref,
|
|
@@ -316,7 +327,7 @@ var Card = React4__namespace.forwardRef(({ className, ...props }, ref) => /* @__
|
|
|
316
327
|
}
|
|
317
328
|
));
|
|
318
329
|
Card.displayName = "Card";
|
|
319
|
-
var CardHeader =
|
|
330
|
+
var CardHeader = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
320
331
|
"div",
|
|
321
332
|
{
|
|
322
333
|
ref,
|
|
@@ -325,7 +336,7 @@ var CardHeader = React4__namespace.forwardRef(({ className, ...props }, ref) =>
|
|
|
325
336
|
}
|
|
326
337
|
));
|
|
327
338
|
CardHeader.displayName = "CardHeader";
|
|
328
|
-
var CardTitle =
|
|
339
|
+
var CardTitle = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
329
340
|
"h3",
|
|
330
341
|
{
|
|
331
342
|
ref,
|
|
@@ -337,7 +348,7 @@ var CardTitle = React4__namespace.forwardRef(({ className, ...props }, ref) => /
|
|
|
337
348
|
}
|
|
338
349
|
));
|
|
339
350
|
CardTitle.displayName = "CardTitle";
|
|
340
|
-
var CardDescription =
|
|
351
|
+
var CardDescription = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
341
352
|
"p",
|
|
342
353
|
{
|
|
343
354
|
ref,
|
|
@@ -346,9 +357,9 @@ var CardDescription = React4__namespace.forwardRef(({ className, ...props }, ref
|
|
|
346
357
|
}
|
|
347
358
|
));
|
|
348
359
|
CardDescription.displayName = "CardDescription";
|
|
349
|
-
var CardContent =
|
|
360
|
+
var CardContent = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
|
|
350
361
|
CardContent.displayName = "CardContent";
|
|
351
|
-
var CardFooter =
|
|
362
|
+
var CardFooter = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
352
363
|
"div",
|
|
353
364
|
{
|
|
354
365
|
ref,
|
|
@@ -371,7 +382,7 @@ var progressVariants = classVarianceAuthority.cva("h-full rounded-full transitio
|
|
|
371
382
|
variant: "default"
|
|
372
383
|
}
|
|
373
384
|
});
|
|
374
|
-
var Progress =
|
|
385
|
+
var Progress = React37__namespace.forwardRef(
|
|
375
386
|
({ className, value, variant, showLabel, label = "Progress", size = "default", ...props }, ref) => {
|
|
376
387
|
const clampedValue = Math.min(100, Math.max(0, value));
|
|
377
388
|
const heightClass = {
|
|
@@ -437,7 +448,7 @@ var iconBoxVariants = classVarianceAuthority.cva(
|
|
|
437
448
|
}
|
|
438
449
|
}
|
|
439
450
|
);
|
|
440
|
-
var IconBox =
|
|
451
|
+
var IconBox = React37__namespace.forwardRef(
|
|
441
452
|
({ className, variant, size, rounded, children, ...props }, ref) => {
|
|
442
453
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
443
454
|
"div",
|
|
@@ -473,7 +484,7 @@ var tagVariants = classVarianceAuthority.cva(
|
|
|
473
484
|
}
|
|
474
485
|
}
|
|
475
486
|
);
|
|
476
|
-
var Tag =
|
|
487
|
+
var Tag = React37__namespace.forwardRef(
|
|
477
488
|
({ className, variant, size, icon, children, ...props }, ref) => {
|
|
478
489
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
479
490
|
"span",
|
|
@@ -510,8 +521,8 @@ var statVariants = classVarianceAuthority.cva("", {
|
|
|
510
521
|
var valueVariants = classVarianceAuthority.cva("font-bold", {
|
|
511
522
|
variants: {
|
|
512
523
|
size: {
|
|
513
|
-
sm: "text-
|
|
514
|
-
default: "text-
|
|
524
|
+
sm: "text-lg",
|
|
525
|
+
default: "text-2xl",
|
|
515
526
|
lg: "text-4xl md:text-5xl",
|
|
516
527
|
xl: "text-5xl md:text-6xl"
|
|
517
528
|
},
|
|
@@ -527,7 +538,7 @@ var valueVariants = classVarianceAuthority.cva("font-bold", {
|
|
|
527
538
|
color: "default"
|
|
528
539
|
}
|
|
529
540
|
});
|
|
530
|
-
var Stat =
|
|
541
|
+
var Stat = React37__namespace.forwardRef(
|
|
531
542
|
({
|
|
532
543
|
className,
|
|
533
544
|
variant,
|
|
@@ -551,10 +562,10 @@ var Stat = React4__namespace.forwardRef(
|
|
|
551
562
|
className: cn(statVariants({ variant, align }), className),
|
|
552
563
|
...props,
|
|
553
564
|
children: [
|
|
554
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-baseline gap-2", justifyClass), children: [
|
|
565
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-wrap lg:flex-nowrap items-baseline gap-x-2", justifyClass), children: [
|
|
555
566
|
/* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(valueVariants({ size: valueSize, color: valueColor })), children: value }),
|
|
556
567
|
suffix && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
|
|
557
|
-
"font-medium text-[var(--cyan)]",
|
|
568
|
+
"font-medium text-[var(--cyan)] shrink-0",
|
|
558
569
|
valueSize === "lg" || valueSize === "xl" ? "text-lg md:text-xl" : "text-base md:text-lg"
|
|
559
570
|
), children: suffix })
|
|
560
571
|
] }),
|
|
@@ -568,6 +579,2141 @@ var Stat = React4__namespace.forwardRef(
|
|
|
568
579
|
}
|
|
569
580
|
);
|
|
570
581
|
Stat.displayName = "Stat";
|
|
582
|
+
var Input = React37__namespace.forwardRef(
|
|
583
|
+
({ className, type, ...props }, ref) => {
|
|
584
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
585
|
+
"input",
|
|
586
|
+
{
|
|
587
|
+
type,
|
|
588
|
+
className: cn(
|
|
589
|
+
"flex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-[var(--black)] placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cyan)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors",
|
|
590
|
+
className
|
|
591
|
+
),
|
|
592
|
+
ref,
|
|
593
|
+
...props
|
|
594
|
+
}
|
|
595
|
+
);
|
|
596
|
+
}
|
|
597
|
+
);
|
|
598
|
+
Input.displayName = "Input";
|
|
599
|
+
var NODES = [
|
|
600
|
+
"a",
|
|
601
|
+
"button",
|
|
602
|
+
"div",
|
|
603
|
+
"form",
|
|
604
|
+
"h2",
|
|
605
|
+
"h3",
|
|
606
|
+
"img",
|
|
607
|
+
"input",
|
|
608
|
+
"label",
|
|
609
|
+
"li",
|
|
610
|
+
"nav",
|
|
611
|
+
"ol",
|
|
612
|
+
"p",
|
|
613
|
+
"select",
|
|
614
|
+
"span",
|
|
615
|
+
"svg",
|
|
616
|
+
"ul"
|
|
617
|
+
];
|
|
618
|
+
var Primitive = NODES.reduce((primitive, node) => {
|
|
619
|
+
const Slot2 = reactSlot.createSlot(`Primitive.${node}`);
|
|
620
|
+
const Node2 = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
621
|
+
const { asChild, ...primitiveProps } = props;
|
|
622
|
+
const Comp = asChild ? Slot2 : node;
|
|
623
|
+
if (typeof window !== "undefined") {
|
|
624
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
625
|
+
}
|
|
626
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
627
|
+
});
|
|
628
|
+
Node2.displayName = `Primitive.${node}`;
|
|
629
|
+
return { ...primitive, [node]: Node2 };
|
|
630
|
+
}, {});
|
|
631
|
+
var NAME = "Label";
|
|
632
|
+
var Label = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
633
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
634
|
+
Primitive.label,
|
|
635
|
+
{
|
|
636
|
+
...props,
|
|
637
|
+
ref: forwardedRef,
|
|
638
|
+
onMouseDown: (event) => {
|
|
639
|
+
const target = event.target;
|
|
640
|
+
if (target.closest("button, input, select, textarea")) return;
|
|
641
|
+
props.onMouseDown?.(event);
|
|
642
|
+
if (!event.defaultPrevented && event.detail > 1) event.preventDefault();
|
|
643
|
+
}
|
|
644
|
+
}
|
|
645
|
+
);
|
|
646
|
+
});
|
|
647
|
+
Label.displayName = NAME;
|
|
648
|
+
var Root2 = Label;
|
|
649
|
+
var labelVariants = classVarianceAuthority.cva(
|
|
650
|
+
"text-sm font-medium leading-none text-[var(--black)] peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
651
|
+
);
|
|
652
|
+
var Label2 = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
653
|
+
Root2,
|
|
654
|
+
{
|
|
655
|
+
ref,
|
|
656
|
+
className: cn(labelVariants(), className),
|
|
657
|
+
...props
|
|
658
|
+
}
|
|
659
|
+
));
|
|
660
|
+
Label2.displayName = Root2.displayName;
|
|
661
|
+
var Textarea = React37__namespace.forwardRef(
|
|
662
|
+
({ className, ...props }, ref) => {
|
|
663
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
664
|
+
"textarea",
|
|
665
|
+
{
|
|
666
|
+
className: cn(
|
|
667
|
+
"flex min-h-[80px] w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-base text-[var(--black)] ring-offset-background placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cyan)] focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-colors",
|
|
668
|
+
className
|
|
669
|
+
),
|
|
670
|
+
ref,
|
|
671
|
+
...props
|
|
672
|
+
}
|
|
673
|
+
);
|
|
674
|
+
}
|
|
675
|
+
);
|
|
676
|
+
Textarea.displayName = "Textarea";
|
|
677
|
+
function createContextScope(scopeName, createContextScopeDeps = []) {
|
|
678
|
+
let defaultContexts = [];
|
|
679
|
+
function createContext32(rootComponentName, defaultContext) {
|
|
680
|
+
const BaseContext = React37__namespace.createContext(defaultContext);
|
|
681
|
+
const index = defaultContexts.length;
|
|
682
|
+
defaultContexts = [...defaultContexts, defaultContext];
|
|
683
|
+
const Provider = (props) => {
|
|
684
|
+
const { scope, children, ...context } = props;
|
|
685
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
686
|
+
const value = React37__namespace.useMemo(() => context, Object.values(context));
|
|
687
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Context.Provider, { value, children });
|
|
688
|
+
};
|
|
689
|
+
Provider.displayName = rootComponentName + "Provider";
|
|
690
|
+
function useContext22(consumerName, scope) {
|
|
691
|
+
const Context = scope?.[scopeName]?.[index] || BaseContext;
|
|
692
|
+
const context = React37__namespace.useContext(Context);
|
|
693
|
+
if (context) return context;
|
|
694
|
+
if (defaultContext !== void 0) return defaultContext;
|
|
695
|
+
throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
|
|
696
|
+
}
|
|
697
|
+
return [Provider, useContext22];
|
|
698
|
+
}
|
|
699
|
+
const createScope = () => {
|
|
700
|
+
const scopeContexts = defaultContexts.map((defaultContext) => {
|
|
701
|
+
return React37__namespace.createContext(defaultContext);
|
|
702
|
+
});
|
|
703
|
+
return function useScope(scope) {
|
|
704
|
+
const contexts = scope?.[scopeName] || scopeContexts;
|
|
705
|
+
return React37__namespace.useMemo(
|
|
706
|
+
() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }),
|
|
707
|
+
[scope, contexts]
|
|
708
|
+
);
|
|
709
|
+
};
|
|
710
|
+
};
|
|
711
|
+
createScope.scopeName = scopeName;
|
|
712
|
+
return [createContext32, composeContextScopes(createScope, ...createContextScopeDeps)];
|
|
713
|
+
}
|
|
714
|
+
function composeContextScopes(...scopes) {
|
|
715
|
+
const baseScope = scopes[0];
|
|
716
|
+
if (scopes.length === 1) return baseScope;
|
|
717
|
+
const createScope = () => {
|
|
718
|
+
const scopeHooks = scopes.map((createScope2) => ({
|
|
719
|
+
useScope: createScope2(),
|
|
720
|
+
scopeName: createScope2.scopeName
|
|
721
|
+
}));
|
|
722
|
+
return function useComposedScopes(overrideScopes) {
|
|
723
|
+
const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
|
|
724
|
+
const scopeProps = useScope(overrideScopes);
|
|
725
|
+
const currentScope = scopeProps[`__scope${scopeName}`];
|
|
726
|
+
return { ...nextScopes2, ...currentScope };
|
|
727
|
+
}, {});
|
|
728
|
+
return React37__namespace.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
|
|
729
|
+
};
|
|
730
|
+
};
|
|
731
|
+
createScope.scopeName = baseScope.scopeName;
|
|
732
|
+
return createScope;
|
|
733
|
+
}
|
|
734
|
+
function setRef(ref, value) {
|
|
735
|
+
if (typeof ref === "function") {
|
|
736
|
+
return ref(value);
|
|
737
|
+
} else if (ref !== null && ref !== void 0) {
|
|
738
|
+
ref.current = value;
|
|
739
|
+
}
|
|
740
|
+
}
|
|
741
|
+
function composeRefs(...refs) {
|
|
742
|
+
return (node) => {
|
|
743
|
+
let hasCleanup = false;
|
|
744
|
+
const cleanups = refs.map((ref) => {
|
|
745
|
+
const cleanup = setRef(ref, node);
|
|
746
|
+
if (!hasCleanup && typeof cleanup == "function") {
|
|
747
|
+
hasCleanup = true;
|
|
748
|
+
}
|
|
749
|
+
return cleanup;
|
|
750
|
+
});
|
|
751
|
+
if (hasCleanup) {
|
|
752
|
+
return () => {
|
|
753
|
+
for (let i = 0; i < cleanups.length; i++) {
|
|
754
|
+
const cleanup = cleanups[i];
|
|
755
|
+
if (typeof cleanup == "function") {
|
|
756
|
+
cleanup();
|
|
757
|
+
} else {
|
|
758
|
+
setRef(refs[i], null);
|
|
759
|
+
}
|
|
760
|
+
}
|
|
761
|
+
};
|
|
762
|
+
}
|
|
763
|
+
};
|
|
764
|
+
}
|
|
765
|
+
function useComposedRefs(...refs) {
|
|
766
|
+
return React37__namespace.useCallback(composeRefs(...refs), refs);
|
|
767
|
+
}
|
|
768
|
+
function createCollection(name) {
|
|
769
|
+
const PROVIDER_NAME = name + "CollectionProvider";
|
|
770
|
+
const [createCollectionContext, createCollectionScope3] = createContextScope(PROVIDER_NAME);
|
|
771
|
+
const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(
|
|
772
|
+
PROVIDER_NAME,
|
|
773
|
+
{ collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
|
|
774
|
+
);
|
|
775
|
+
const CollectionProvider = (props) => {
|
|
776
|
+
const { scope, children } = props;
|
|
777
|
+
const ref = React37__namespace.default.useRef(null);
|
|
778
|
+
const itemMap = React37__namespace.default.useRef(/* @__PURE__ */ new Map()).current;
|
|
779
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CollectionProviderImpl, { scope, itemMap, collectionRef: ref, children });
|
|
780
|
+
};
|
|
781
|
+
CollectionProvider.displayName = PROVIDER_NAME;
|
|
782
|
+
const COLLECTION_SLOT_NAME = name + "CollectionSlot";
|
|
783
|
+
const CollectionSlotImpl = reactSlot.createSlot(COLLECTION_SLOT_NAME);
|
|
784
|
+
const CollectionSlot = React37__namespace.default.forwardRef(
|
|
785
|
+
(props, forwardedRef) => {
|
|
786
|
+
const { scope, children } = props;
|
|
787
|
+
const context = useCollectionContext(COLLECTION_SLOT_NAME, scope);
|
|
788
|
+
const composedRefs = useComposedRefs(forwardedRef, context.collectionRef);
|
|
789
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CollectionSlotImpl, { ref: composedRefs, children });
|
|
790
|
+
}
|
|
791
|
+
);
|
|
792
|
+
CollectionSlot.displayName = COLLECTION_SLOT_NAME;
|
|
793
|
+
const ITEM_SLOT_NAME = name + "CollectionItemSlot";
|
|
794
|
+
const ITEM_DATA_ATTR = "data-radix-collection-item";
|
|
795
|
+
const CollectionItemSlotImpl = reactSlot.createSlot(ITEM_SLOT_NAME);
|
|
796
|
+
const CollectionItemSlot = React37__namespace.default.forwardRef(
|
|
797
|
+
(props, forwardedRef) => {
|
|
798
|
+
const { scope, children, ...itemData } = props;
|
|
799
|
+
const ref = React37__namespace.default.useRef(null);
|
|
800
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
801
|
+
const context = useCollectionContext(ITEM_SLOT_NAME, scope);
|
|
802
|
+
React37__namespace.default.useEffect(() => {
|
|
803
|
+
context.itemMap.set(ref, { ref, ...itemData });
|
|
804
|
+
return () => void context.itemMap.delete(ref);
|
|
805
|
+
});
|
|
806
|
+
return /* @__PURE__ */ jsxRuntime.jsx(CollectionItemSlotImpl, { ...{ [ITEM_DATA_ATTR]: "" }, ref: composedRefs, children });
|
|
807
|
+
}
|
|
808
|
+
);
|
|
809
|
+
CollectionItemSlot.displayName = ITEM_SLOT_NAME;
|
|
810
|
+
function useCollection3(scope) {
|
|
811
|
+
const context = useCollectionContext(name + "CollectionConsumer", scope);
|
|
812
|
+
const getItems = React37__namespace.default.useCallback(() => {
|
|
813
|
+
const collectionNode = context.collectionRef.current;
|
|
814
|
+
if (!collectionNode) return [];
|
|
815
|
+
const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`));
|
|
816
|
+
const items = Array.from(context.itemMap.values());
|
|
817
|
+
const orderedItems = items.sort(
|
|
818
|
+
(a, b) => orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current)
|
|
819
|
+
);
|
|
820
|
+
return orderedItems;
|
|
821
|
+
}, [context.collectionRef, context.itemMap]);
|
|
822
|
+
return getItems;
|
|
823
|
+
}
|
|
824
|
+
return [
|
|
825
|
+
{ Provider: CollectionProvider, Slot: CollectionSlot, ItemSlot: CollectionItemSlot },
|
|
826
|
+
useCollection3,
|
|
827
|
+
createCollectionScope3
|
|
828
|
+
];
|
|
829
|
+
}
|
|
830
|
+
function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
|
|
831
|
+
return function handleEvent(event) {
|
|
832
|
+
originalEventHandler?.(event);
|
|
833
|
+
if (checkForDefaultPrevented === false || !event.defaultPrevented) {
|
|
834
|
+
return ourEventHandler?.(event);
|
|
835
|
+
}
|
|
836
|
+
};
|
|
837
|
+
}
|
|
838
|
+
var useLayoutEffect2 = globalThis?.document ? React37__namespace.useLayoutEffect : () => {
|
|
839
|
+
};
|
|
840
|
+
var useInsertionEffect = React37__namespace[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
|
|
841
|
+
function useControllableState({
|
|
842
|
+
prop,
|
|
843
|
+
defaultProp,
|
|
844
|
+
onChange = () => {
|
|
845
|
+
},
|
|
846
|
+
caller
|
|
847
|
+
}) {
|
|
848
|
+
const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
|
|
849
|
+
defaultProp,
|
|
850
|
+
onChange
|
|
851
|
+
});
|
|
852
|
+
const isControlled = prop !== void 0;
|
|
853
|
+
const value = isControlled ? prop : uncontrolledProp;
|
|
854
|
+
{
|
|
855
|
+
const isControlledRef = React37__namespace.useRef(prop !== void 0);
|
|
856
|
+
React37__namespace.useEffect(() => {
|
|
857
|
+
const wasControlled = isControlledRef.current;
|
|
858
|
+
if (wasControlled !== isControlled) {
|
|
859
|
+
const from = wasControlled ? "controlled" : "uncontrolled";
|
|
860
|
+
const to = isControlled ? "controlled" : "uncontrolled";
|
|
861
|
+
console.warn(
|
|
862
|
+
`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`
|
|
863
|
+
);
|
|
864
|
+
}
|
|
865
|
+
isControlledRef.current = isControlled;
|
|
866
|
+
}, [isControlled, caller]);
|
|
867
|
+
}
|
|
868
|
+
const setValue = React37__namespace.useCallback(
|
|
869
|
+
(nextValue) => {
|
|
870
|
+
if (isControlled) {
|
|
871
|
+
const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
|
|
872
|
+
if (value2 !== prop) {
|
|
873
|
+
onChangeRef.current?.(value2);
|
|
874
|
+
}
|
|
875
|
+
} else {
|
|
876
|
+
setUncontrolledProp(nextValue);
|
|
877
|
+
}
|
|
878
|
+
},
|
|
879
|
+
[isControlled, prop, setUncontrolledProp, onChangeRef]
|
|
880
|
+
);
|
|
881
|
+
return [value, setValue];
|
|
882
|
+
}
|
|
883
|
+
function useUncontrolledState({
|
|
884
|
+
defaultProp,
|
|
885
|
+
onChange
|
|
886
|
+
}) {
|
|
887
|
+
const [value, setValue] = React37__namespace.useState(defaultProp);
|
|
888
|
+
const prevValueRef = React37__namespace.useRef(value);
|
|
889
|
+
const onChangeRef = React37__namespace.useRef(onChange);
|
|
890
|
+
useInsertionEffect(() => {
|
|
891
|
+
onChangeRef.current = onChange;
|
|
892
|
+
}, [onChange]);
|
|
893
|
+
React37__namespace.useEffect(() => {
|
|
894
|
+
if (prevValueRef.current !== value) {
|
|
895
|
+
onChangeRef.current?.(value);
|
|
896
|
+
prevValueRef.current = value;
|
|
897
|
+
}
|
|
898
|
+
}, [value, prevValueRef]);
|
|
899
|
+
return [value, setValue, onChangeRef];
|
|
900
|
+
}
|
|
901
|
+
function isFunction(value) {
|
|
902
|
+
return typeof value === "function";
|
|
903
|
+
}
|
|
904
|
+
var NODES2 = [
|
|
905
|
+
"a",
|
|
906
|
+
"button",
|
|
907
|
+
"div",
|
|
908
|
+
"form",
|
|
909
|
+
"h2",
|
|
910
|
+
"h3",
|
|
911
|
+
"img",
|
|
912
|
+
"input",
|
|
913
|
+
"label",
|
|
914
|
+
"li",
|
|
915
|
+
"nav",
|
|
916
|
+
"ol",
|
|
917
|
+
"p",
|
|
918
|
+
"select",
|
|
919
|
+
"span",
|
|
920
|
+
"svg",
|
|
921
|
+
"ul"
|
|
922
|
+
];
|
|
923
|
+
var Primitive2 = NODES2.reduce((primitive, node) => {
|
|
924
|
+
const Slot2 = reactSlot.createSlot(`Primitive.${node}`);
|
|
925
|
+
const Node2 = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
926
|
+
const { asChild, ...primitiveProps } = props;
|
|
927
|
+
const Comp = asChild ? Slot2 : node;
|
|
928
|
+
if (typeof window !== "undefined") {
|
|
929
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
930
|
+
}
|
|
931
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
932
|
+
});
|
|
933
|
+
Node2.displayName = `Primitive.${node}`;
|
|
934
|
+
return { ...primitive, [node]: Node2 };
|
|
935
|
+
}, {});
|
|
936
|
+
function dispatchDiscreteCustomEvent(target, event) {
|
|
937
|
+
if (target) ReactDOM2__namespace.flushSync(() => target.dispatchEvent(event));
|
|
938
|
+
}
|
|
939
|
+
function useStateMachine(initialState, machine) {
|
|
940
|
+
return React37__namespace.useReducer((state, event) => {
|
|
941
|
+
const nextState = machine[state][event];
|
|
942
|
+
return nextState ?? state;
|
|
943
|
+
}, initialState);
|
|
944
|
+
}
|
|
945
|
+
var Presence = (props) => {
|
|
946
|
+
const { present, children } = props;
|
|
947
|
+
const presence = usePresence(present);
|
|
948
|
+
const child = typeof children === "function" ? children({ present: presence.isPresent }) : React37__namespace.Children.only(children);
|
|
949
|
+
const ref = useComposedRefs(presence.ref, getElementRef(child));
|
|
950
|
+
const forceMount = typeof children === "function";
|
|
951
|
+
return forceMount || presence.isPresent ? React37__namespace.cloneElement(child, { ref }) : null;
|
|
952
|
+
};
|
|
953
|
+
Presence.displayName = "Presence";
|
|
954
|
+
function usePresence(present) {
|
|
955
|
+
const [node, setNode] = React37__namespace.useState();
|
|
956
|
+
const stylesRef = React37__namespace.useRef(null);
|
|
957
|
+
const prevPresentRef = React37__namespace.useRef(present);
|
|
958
|
+
const prevAnimationNameRef = React37__namespace.useRef("none");
|
|
959
|
+
const initialState = present ? "mounted" : "unmounted";
|
|
960
|
+
const [state, send] = useStateMachine(initialState, {
|
|
961
|
+
mounted: {
|
|
962
|
+
UNMOUNT: "unmounted",
|
|
963
|
+
ANIMATION_OUT: "unmountSuspended"
|
|
964
|
+
},
|
|
965
|
+
unmountSuspended: {
|
|
966
|
+
MOUNT: "mounted",
|
|
967
|
+
ANIMATION_END: "unmounted"
|
|
968
|
+
},
|
|
969
|
+
unmounted: {
|
|
970
|
+
MOUNT: "mounted"
|
|
971
|
+
}
|
|
972
|
+
});
|
|
973
|
+
React37__namespace.useEffect(() => {
|
|
974
|
+
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
975
|
+
prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
|
|
976
|
+
}, [state]);
|
|
977
|
+
useLayoutEffect2(() => {
|
|
978
|
+
const styles = stylesRef.current;
|
|
979
|
+
const wasPresent = prevPresentRef.current;
|
|
980
|
+
const hasPresentChanged = wasPresent !== present;
|
|
981
|
+
if (hasPresentChanged) {
|
|
982
|
+
const prevAnimationName = prevAnimationNameRef.current;
|
|
983
|
+
const currentAnimationName = getAnimationName(styles);
|
|
984
|
+
if (present) {
|
|
985
|
+
send("MOUNT");
|
|
986
|
+
} else if (currentAnimationName === "none" || styles?.display === "none") {
|
|
987
|
+
send("UNMOUNT");
|
|
988
|
+
} else {
|
|
989
|
+
const isAnimating = prevAnimationName !== currentAnimationName;
|
|
990
|
+
if (wasPresent && isAnimating) {
|
|
991
|
+
send("ANIMATION_OUT");
|
|
992
|
+
} else {
|
|
993
|
+
send("UNMOUNT");
|
|
994
|
+
}
|
|
995
|
+
}
|
|
996
|
+
prevPresentRef.current = present;
|
|
997
|
+
}
|
|
998
|
+
}, [present, send]);
|
|
999
|
+
useLayoutEffect2(() => {
|
|
1000
|
+
if (node) {
|
|
1001
|
+
let timeoutId;
|
|
1002
|
+
const ownerWindow = node.ownerDocument.defaultView ?? window;
|
|
1003
|
+
const handleAnimationEnd = (event) => {
|
|
1004
|
+
const currentAnimationName = getAnimationName(stylesRef.current);
|
|
1005
|
+
const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
|
|
1006
|
+
if (event.target === node && isCurrentAnimation) {
|
|
1007
|
+
send("ANIMATION_END");
|
|
1008
|
+
if (!prevPresentRef.current) {
|
|
1009
|
+
const currentFillMode = node.style.animationFillMode;
|
|
1010
|
+
node.style.animationFillMode = "forwards";
|
|
1011
|
+
timeoutId = ownerWindow.setTimeout(() => {
|
|
1012
|
+
if (node.style.animationFillMode === "forwards") {
|
|
1013
|
+
node.style.animationFillMode = currentFillMode;
|
|
1014
|
+
}
|
|
1015
|
+
});
|
|
1016
|
+
}
|
|
1017
|
+
}
|
|
1018
|
+
};
|
|
1019
|
+
const handleAnimationStart = (event) => {
|
|
1020
|
+
if (event.target === node) {
|
|
1021
|
+
prevAnimationNameRef.current = getAnimationName(stylesRef.current);
|
|
1022
|
+
}
|
|
1023
|
+
};
|
|
1024
|
+
node.addEventListener("animationstart", handleAnimationStart);
|
|
1025
|
+
node.addEventListener("animationcancel", handleAnimationEnd);
|
|
1026
|
+
node.addEventListener("animationend", handleAnimationEnd);
|
|
1027
|
+
return () => {
|
|
1028
|
+
ownerWindow.clearTimeout(timeoutId);
|
|
1029
|
+
node.removeEventListener("animationstart", handleAnimationStart);
|
|
1030
|
+
node.removeEventListener("animationcancel", handleAnimationEnd);
|
|
1031
|
+
node.removeEventListener("animationend", handleAnimationEnd);
|
|
1032
|
+
};
|
|
1033
|
+
} else {
|
|
1034
|
+
send("ANIMATION_END");
|
|
1035
|
+
}
|
|
1036
|
+
}, [node, send]);
|
|
1037
|
+
return {
|
|
1038
|
+
isPresent: ["mounted", "unmountSuspended"].includes(state),
|
|
1039
|
+
ref: React37__namespace.useCallback((node2) => {
|
|
1040
|
+
stylesRef.current = node2 ? getComputedStyle(node2) : null;
|
|
1041
|
+
setNode(node2);
|
|
1042
|
+
}, [])
|
|
1043
|
+
};
|
|
1044
|
+
}
|
|
1045
|
+
function getAnimationName(styles) {
|
|
1046
|
+
return styles?.animationName || "none";
|
|
1047
|
+
}
|
|
1048
|
+
function getElementRef(element) {
|
|
1049
|
+
let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
|
|
1050
|
+
let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
1051
|
+
if (mayWarn) {
|
|
1052
|
+
return element.ref;
|
|
1053
|
+
}
|
|
1054
|
+
getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
|
|
1055
|
+
mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
|
|
1056
|
+
if (mayWarn) {
|
|
1057
|
+
return element.props.ref;
|
|
1058
|
+
}
|
|
1059
|
+
return element.props.ref || element.ref;
|
|
1060
|
+
}
|
|
1061
|
+
var useReactId = React37__namespace[" useId ".trim().toString()] || (() => void 0);
|
|
1062
|
+
var count = 0;
|
|
1063
|
+
function useId(deterministicId) {
|
|
1064
|
+
const [id, setId] = React37__namespace.useState(useReactId());
|
|
1065
|
+
useLayoutEffect2(() => {
|
|
1066
|
+
setId((reactId) => reactId ?? String(count++));
|
|
1067
|
+
}, [deterministicId]);
|
|
1068
|
+
return deterministicId || (id ? `radix-${id}` : "");
|
|
1069
|
+
}
|
|
1070
|
+
var COLLAPSIBLE_NAME = "Collapsible";
|
|
1071
|
+
var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
|
|
1072
|
+
var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
|
|
1073
|
+
var Collapsible = React37__namespace.forwardRef(
|
|
1074
|
+
(props, forwardedRef) => {
|
|
1075
|
+
const {
|
|
1076
|
+
__scopeCollapsible,
|
|
1077
|
+
open: openProp,
|
|
1078
|
+
defaultOpen,
|
|
1079
|
+
disabled,
|
|
1080
|
+
onOpenChange,
|
|
1081
|
+
...collapsibleProps
|
|
1082
|
+
} = props;
|
|
1083
|
+
const [open, setOpen] = useControllableState({
|
|
1084
|
+
prop: openProp,
|
|
1085
|
+
defaultProp: defaultOpen ?? false,
|
|
1086
|
+
onChange: onOpenChange,
|
|
1087
|
+
caller: COLLAPSIBLE_NAME
|
|
1088
|
+
});
|
|
1089
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1090
|
+
CollapsibleProvider,
|
|
1091
|
+
{
|
|
1092
|
+
scope: __scopeCollapsible,
|
|
1093
|
+
disabled,
|
|
1094
|
+
contentId: useId(),
|
|
1095
|
+
open,
|
|
1096
|
+
onOpenToggle: React37__namespace.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
1097
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1098
|
+
Primitive2.div,
|
|
1099
|
+
{
|
|
1100
|
+
"data-state": getState(open),
|
|
1101
|
+
"data-disabled": disabled ? "" : void 0,
|
|
1102
|
+
...collapsibleProps,
|
|
1103
|
+
ref: forwardedRef
|
|
1104
|
+
}
|
|
1105
|
+
)
|
|
1106
|
+
}
|
|
1107
|
+
);
|
|
1108
|
+
}
|
|
1109
|
+
);
|
|
1110
|
+
Collapsible.displayName = COLLAPSIBLE_NAME;
|
|
1111
|
+
var TRIGGER_NAME = "CollapsibleTrigger";
|
|
1112
|
+
var CollapsibleTrigger = React37__namespace.forwardRef(
|
|
1113
|
+
(props, forwardedRef) => {
|
|
1114
|
+
const { __scopeCollapsible, ...triggerProps } = props;
|
|
1115
|
+
const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
|
|
1116
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1117
|
+
Primitive2.button,
|
|
1118
|
+
{
|
|
1119
|
+
type: "button",
|
|
1120
|
+
"aria-controls": context.contentId,
|
|
1121
|
+
"aria-expanded": context.open || false,
|
|
1122
|
+
"data-state": getState(context.open),
|
|
1123
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
1124
|
+
disabled: context.disabled,
|
|
1125
|
+
...triggerProps,
|
|
1126
|
+
ref: forwardedRef,
|
|
1127
|
+
onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
1128
|
+
}
|
|
1129
|
+
);
|
|
1130
|
+
}
|
|
1131
|
+
);
|
|
1132
|
+
CollapsibleTrigger.displayName = TRIGGER_NAME;
|
|
1133
|
+
var CONTENT_NAME = "CollapsibleContent";
|
|
1134
|
+
var CollapsibleContent = React37__namespace.forwardRef(
|
|
1135
|
+
(props, forwardedRef) => {
|
|
1136
|
+
const { forceMount, ...contentProps } = props;
|
|
1137
|
+
const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
|
|
1138
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
|
|
1139
|
+
}
|
|
1140
|
+
);
|
|
1141
|
+
CollapsibleContent.displayName = CONTENT_NAME;
|
|
1142
|
+
var CollapsibleContentImpl = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
1143
|
+
const { __scopeCollapsible, present, children, ...contentProps } = props;
|
|
1144
|
+
const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
|
|
1145
|
+
const [isPresent, setIsPresent] = React37__namespace.useState(present);
|
|
1146
|
+
const ref = React37__namespace.useRef(null);
|
|
1147
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
1148
|
+
const heightRef = React37__namespace.useRef(0);
|
|
1149
|
+
const height = heightRef.current;
|
|
1150
|
+
const widthRef = React37__namespace.useRef(0);
|
|
1151
|
+
const width = widthRef.current;
|
|
1152
|
+
const isOpen = context.open || isPresent;
|
|
1153
|
+
const isMountAnimationPreventedRef = React37__namespace.useRef(isOpen);
|
|
1154
|
+
const originalStylesRef = React37__namespace.useRef(void 0);
|
|
1155
|
+
React37__namespace.useEffect(() => {
|
|
1156
|
+
const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
|
|
1157
|
+
return () => cancelAnimationFrame(rAF);
|
|
1158
|
+
}, []);
|
|
1159
|
+
useLayoutEffect2(() => {
|
|
1160
|
+
const node = ref.current;
|
|
1161
|
+
if (node) {
|
|
1162
|
+
originalStylesRef.current = originalStylesRef.current || {
|
|
1163
|
+
transitionDuration: node.style.transitionDuration,
|
|
1164
|
+
animationName: node.style.animationName
|
|
1165
|
+
};
|
|
1166
|
+
node.style.transitionDuration = "0s";
|
|
1167
|
+
node.style.animationName = "none";
|
|
1168
|
+
const rect = node.getBoundingClientRect();
|
|
1169
|
+
heightRef.current = rect.height;
|
|
1170
|
+
widthRef.current = rect.width;
|
|
1171
|
+
if (!isMountAnimationPreventedRef.current) {
|
|
1172
|
+
node.style.transitionDuration = originalStylesRef.current.transitionDuration;
|
|
1173
|
+
node.style.animationName = originalStylesRef.current.animationName;
|
|
1174
|
+
}
|
|
1175
|
+
setIsPresent(present);
|
|
1176
|
+
}
|
|
1177
|
+
}, [context.open, present]);
|
|
1178
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1179
|
+
Primitive2.div,
|
|
1180
|
+
{
|
|
1181
|
+
"data-state": getState(context.open),
|
|
1182
|
+
"data-disabled": context.disabled ? "" : void 0,
|
|
1183
|
+
id: context.contentId,
|
|
1184
|
+
hidden: !isOpen,
|
|
1185
|
+
...contentProps,
|
|
1186
|
+
ref: composedRefs,
|
|
1187
|
+
style: {
|
|
1188
|
+
[`--radix-collapsible-content-height`]: height ? `${height}px` : void 0,
|
|
1189
|
+
[`--radix-collapsible-content-width`]: width ? `${width}px` : void 0,
|
|
1190
|
+
...props.style
|
|
1191
|
+
},
|
|
1192
|
+
children: isOpen && children
|
|
1193
|
+
}
|
|
1194
|
+
);
|
|
1195
|
+
});
|
|
1196
|
+
function getState(open) {
|
|
1197
|
+
return open ? "open" : "closed";
|
|
1198
|
+
}
|
|
1199
|
+
var Root3 = Collapsible;
|
|
1200
|
+
var Trigger2 = CollapsibleTrigger;
|
|
1201
|
+
var Content2 = CollapsibleContent;
|
|
1202
|
+
var DirectionContext = React37__namespace.createContext(void 0);
|
|
1203
|
+
function useDirection(localDir) {
|
|
1204
|
+
const globalDir = React37__namespace.useContext(DirectionContext);
|
|
1205
|
+
return localDir || globalDir || "ltr";
|
|
1206
|
+
}
|
|
1207
|
+
var ACCORDION_NAME = "Accordion";
|
|
1208
|
+
var ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
|
|
1209
|
+
var [Collection, useCollection, createCollectionScope] = createCollection(ACCORDION_NAME);
|
|
1210
|
+
var [createAccordionContext] = createContextScope(ACCORDION_NAME, [
|
|
1211
|
+
createCollectionScope,
|
|
1212
|
+
createCollapsibleScope
|
|
1213
|
+
]);
|
|
1214
|
+
var useCollapsibleScope = createCollapsibleScope();
|
|
1215
|
+
var Accordion = React37__namespace.default.forwardRef(
|
|
1216
|
+
(props, forwardedRef) => {
|
|
1217
|
+
const { type, ...accordionProps } = props;
|
|
1218
|
+
const singleProps = accordionProps;
|
|
1219
|
+
const multipleProps = accordionProps;
|
|
1220
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Collection.Provider, { scope: props.__scopeAccordion, children: type === "multiple" ? /* @__PURE__ */ jsxRuntime.jsx(AccordionImplMultiple, { ...multipleProps, ref: forwardedRef }) : /* @__PURE__ */ jsxRuntime.jsx(AccordionImplSingle, { ...singleProps, ref: forwardedRef }) });
|
|
1221
|
+
}
|
|
1222
|
+
);
|
|
1223
|
+
Accordion.displayName = ACCORDION_NAME;
|
|
1224
|
+
var [AccordionValueProvider, useAccordionValueContext] = createAccordionContext(ACCORDION_NAME);
|
|
1225
|
+
var [AccordionCollapsibleProvider, useAccordionCollapsibleContext] = createAccordionContext(
|
|
1226
|
+
ACCORDION_NAME,
|
|
1227
|
+
{ collapsible: false }
|
|
1228
|
+
);
|
|
1229
|
+
var AccordionImplSingle = React37__namespace.default.forwardRef(
|
|
1230
|
+
(props, forwardedRef) => {
|
|
1231
|
+
const {
|
|
1232
|
+
value: valueProp,
|
|
1233
|
+
defaultValue,
|
|
1234
|
+
onValueChange = () => {
|
|
1235
|
+
},
|
|
1236
|
+
collapsible = false,
|
|
1237
|
+
...accordionSingleProps
|
|
1238
|
+
} = props;
|
|
1239
|
+
const [value, setValue] = useControllableState({
|
|
1240
|
+
prop: valueProp,
|
|
1241
|
+
defaultProp: defaultValue ?? "",
|
|
1242
|
+
onChange: onValueChange,
|
|
1243
|
+
caller: ACCORDION_NAME
|
|
1244
|
+
});
|
|
1245
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1246
|
+
AccordionValueProvider,
|
|
1247
|
+
{
|
|
1248
|
+
scope: props.__scopeAccordion,
|
|
1249
|
+
value: React37__namespace.default.useMemo(() => value ? [value] : [], [value]),
|
|
1250
|
+
onItemOpen: setValue,
|
|
1251
|
+
onItemClose: React37__namespace.default.useCallback(() => collapsible && setValue(""), [collapsible, setValue]),
|
|
1252
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionImpl, { ...accordionSingleProps, ref: forwardedRef }) })
|
|
1253
|
+
}
|
|
1254
|
+
);
|
|
1255
|
+
}
|
|
1256
|
+
);
|
|
1257
|
+
var AccordionImplMultiple = React37__namespace.default.forwardRef((props, forwardedRef) => {
|
|
1258
|
+
const {
|
|
1259
|
+
value: valueProp,
|
|
1260
|
+
defaultValue,
|
|
1261
|
+
onValueChange = () => {
|
|
1262
|
+
},
|
|
1263
|
+
...accordionMultipleProps
|
|
1264
|
+
} = props;
|
|
1265
|
+
const [value, setValue] = useControllableState({
|
|
1266
|
+
prop: valueProp,
|
|
1267
|
+
defaultProp: defaultValue ?? [],
|
|
1268
|
+
onChange: onValueChange,
|
|
1269
|
+
caller: ACCORDION_NAME
|
|
1270
|
+
});
|
|
1271
|
+
const handleItemOpen = React37__namespace.default.useCallback(
|
|
1272
|
+
(itemValue) => setValue((prevValue = []) => [...prevValue, itemValue]),
|
|
1273
|
+
[setValue]
|
|
1274
|
+
);
|
|
1275
|
+
const handleItemClose = React37__namespace.default.useCallback(
|
|
1276
|
+
(itemValue) => setValue((prevValue = []) => prevValue.filter((value2) => value2 !== itemValue)),
|
|
1277
|
+
[setValue]
|
|
1278
|
+
);
|
|
1279
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1280
|
+
AccordionValueProvider,
|
|
1281
|
+
{
|
|
1282
|
+
scope: props.__scopeAccordion,
|
|
1283
|
+
value,
|
|
1284
|
+
onItemOpen: handleItemOpen,
|
|
1285
|
+
onItemClose: handleItemClose,
|
|
1286
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(AccordionCollapsibleProvider, { scope: props.__scopeAccordion, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsx(AccordionImpl, { ...accordionMultipleProps, ref: forwardedRef }) })
|
|
1287
|
+
}
|
|
1288
|
+
);
|
|
1289
|
+
});
|
|
1290
|
+
var [AccordionImplProvider, useAccordionContext] = createAccordionContext(ACCORDION_NAME);
|
|
1291
|
+
var AccordionImpl = React37__namespace.default.forwardRef(
|
|
1292
|
+
(props, forwardedRef) => {
|
|
1293
|
+
const { __scopeAccordion, disabled, dir, orientation = "vertical", ...accordionProps } = props;
|
|
1294
|
+
const accordionRef = React37__namespace.default.useRef(null);
|
|
1295
|
+
const composedRefs = useComposedRefs(accordionRef, forwardedRef);
|
|
1296
|
+
const getItems = useCollection(__scopeAccordion);
|
|
1297
|
+
const direction = useDirection(dir);
|
|
1298
|
+
const isDirectionLTR = direction === "ltr";
|
|
1299
|
+
const handleKeyDown = composeEventHandlers(props.onKeyDown, (event) => {
|
|
1300
|
+
if (!ACCORDION_KEYS.includes(event.key)) return;
|
|
1301
|
+
const target = event.target;
|
|
1302
|
+
const triggerCollection = getItems().filter((item) => !item.ref.current?.disabled);
|
|
1303
|
+
const triggerIndex = triggerCollection.findIndex((item) => item.ref.current === target);
|
|
1304
|
+
const triggerCount = triggerCollection.length;
|
|
1305
|
+
if (triggerIndex === -1) return;
|
|
1306
|
+
event.preventDefault();
|
|
1307
|
+
let nextIndex = triggerIndex;
|
|
1308
|
+
const homeIndex = 0;
|
|
1309
|
+
const endIndex = triggerCount - 1;
|
|
1310
|
+
const moveNext = () => {
|
|
1311
|
+
nextIndex = triggerIndex + 1;
|
|
1312
|
+
if (nextIndex > endIndex) {
|
|
1313
|
+
nextIndex = homeIndex;
|
|
1314
|
+
}
|
|
1315
|
+
};
|
|
1316
|
+
const movePrev = () => {
|
|
1317
|
+
nextIndex = triggerIndex - 1;
|
|
1318
|
+
if (nextIndex < homeIndex) {
|
|
1319
|
+
nextIndex = endIndex;
|
|
1320
|
+
}
|
|
1321
|
+
};
|
|
1322
|
+
switch (event.key) {
|
|
1323
|
+
case "Home":
|
|
1324
|
+
nextIndex = homeIndex;
|
|
1325
|
+
break;
|
|
1326
|
+
case "End":
|
|
1327
|
+
nextIndex = endIndex;
|
|
1328
|
+
break;
|
|
1329
|
+
case "ArrowRight":
|
|
1330
|
+
if (orientation === "horizontal") {
|
|
1331
|
+
if (isDirectionLTR) {
|
|
1332
|
+
moveNext();
|
|
1333
|
+
} else {
|
|
1334
|
+
movePrev();
|
|
1335
|
+
}
|
|
1336
|
+
}
|
|
1337
|
+
break;
|
|
1338
|
+
case "ArrowDown":
|
|
1339
|
+
if (orientation === "vertical") {
|
|
1340
|
+
moveNext();
|
|
1341
|
+
}
|
|
1342
|
+
break;
|
|
1343
|
+
case "ArrowLeft":
|
|
1344
|
+
if (orientation === "horizontal") {
|
|
1345
|
+
if (isDirectionLTR) {
|
|
1346
|
+
movePrev();
|
|
1347
|
+
} else {
|
|
1348
|
+
moveNext();
|
|
1349
|
+
}
|
|
1350
|
+
}
|
|
1351
|
+
break;
|
|
1352
|
+
case "ArrowUp":
|
|
1353
|
+
if (orientation === "vertical") {
|
|
1354
|
+
movePrev();
|
|
1355
|
+
}
|
|
1356
|
+
break;
|
|
1357
|
+
}
|
|
1358
|
+
const clampedIndex = nextIndex % triggerCount;
|
|
1359
|
+
triggerCollection[clampedIndex].ref.current?.focus();
|
|
1360
|
+
});
|
|
1361
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1362
|
+
AccordionImplProvider,
|
|
1363
|
+
{
|
|
1364
|
+
scope: __scopeAccordion,
|
|
1365
|
+
disabled,
|
|
1366
|
+
direction: dir,
|
|
1367
|
+
orientation,
|
|
1368
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Collection.Slot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1369
|
+
Primitive2.div,
|
|
1370
|
+
{
|
|
1371
|
+
...accordionProps,
|
|
1372
|
+
"data-orientation": orientation,
|
|
1373
|
+
ref: composedRefs,
|
|
1374
|
+
onKeyDown: disabled ? void 0 : handleKeyDown
|
|
1375
|
+
}
|
|
1376
|
+
) })
|
|
1377
|
+
}
|
|
1378
|
+
);
|
|
1379
|
+
}
|
|
1380
|
+
);
|
|
1381
|
+
var ITEM_NAME = "AccordionItem";
|
|
1382
|
+
var [AccordionItemProvider, useAccordionItemContext] = createAccordionContext(ITEM_NAME);
|
|
1383
|
+
var AccordionItem = React37__namespace.default.forwardRef(
|
|
1384
|
+
(props, forwardedRef) => {
|
|
1385
|
+
const { __scopeAccordion, value, ...accordionItemProps } = props;
|
|
1386
|
+
const accordionContext = useAccordionContext(ITEM_NAME, __scopeAccordion);
|
|
1387
|
+
const valueContext = useAccordionValueContext(ITEM_NAME, __scopeAccordion);
|
|
1388
|
+
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
1389
|
+
const triggerId = useId();
|
|
1390
|
+
const open = value && valueContext.value.includes(value) || false;
|
|
1391
|
+
const disabled = accordionContext.disabled || props.disabled;
|
|
1392
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1393
|
+
AccordionItemProvider,
|
|
1394
|
+
{
|
|
1395
|
+
scope: __scopeAccordion,
|
|
1396
|
+
open,
|
|
1397
|
+
disabled,
|
|
1398
|
+
triggerId,
|
|
1399
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1400
|
+
Root3,
|
|
1401
|
+
{
|
|
1402
|
+
"data-orientation": accordionContext.orientation,
|
|
1403
|
+
"data-state": getState2(open),
|
|
1404
|
+
...collapsibleScope,
|
|
1405
|
+
...accordionItemProps,
|
|
1406
|
+
ref: forwardedRef,
|
|
1407
|
+
disabled,
|
|
1408
|
+
open,
|
|
1409
|
+
onOpenChange: (open2) => {
|
|
1410
|
+
if (open2) {
|
|
1411
|
+
valueContext.onItemOpen(value);
|
|
1412
|
+
} else {
|
|
1413
|
+
valueContext.onItemClose(value);
|
|
1414
|
+
}
|
|
1415
|
+
}
|
|
1416
|
+
}
|
|
1417
|
+
)
|
|
1418
|
+
}
|
|
1419
|
+
);
|
|
1420
|
+
}
|
|
1421
|
+
);
|
|
1422
|
+
AccordionItem.displayName = ITEM_NAME;
|
|
1423
|
+
var HEADER_NAME = "AccordionHeader";
|
|
1424
|
+
var AccordionHeader = React37__namespace.default.forwardRef(
|
|
1425
|
+
(props, forwardedRef) => {
|
|
1426
|
+
const { __scopeAccordion, ...headerProps } = props;
|
|
1427
|
+
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
1428
|
+
const itemContext = useAccordionItemContext(HEADER_NAME, __scopeAccordion);
|
|
1429
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1430
|
+
Primitive2.h3,
|
|
1431
|
+
{
|
|
1432
|
+
"data-orientation": accordionContext.orientation,
|
|
1433
|
+
"data-state": getState2(itemContext.open),
|
|
1434
|
+
"data-disabled": itemContext.disabled ? "" : void 0,
|
|
1435
|
+
...headerProps,
|
|
1436
|
+
ref: forwardedRef
|
|
1437
|
+
}
|
|
1438
|
+
);
|
|
1439
|
+
}
|
|
1440
|
+
);
|
|
1441
|
+
AccordionHeader.displayName = HEADER_NAME;
|
|
1442
|
+
var TRIGGER_NAME2 = "AccordionTrigger";
|
|
1443
|
+
var AccordionTrigger = React37__namespace.default.forwardRef(
|
|
1444
|
+
(props, forwardedRef) => {
|
|
1445
|
+
const { __scopeAccordion, ...triggerProps } = props;
|
|
1446
|
+
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
1447
|
+
const itemContext = useAccordionItemContext(TRIGGER_NAME2, __scopeAccordion);
|
|
1448
|
+
const collapsibleContext = useAccordionCollapsibleContext(TRIGGER_NAME2, __scopeAccordion);
|
|
1449
|
+
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
1450
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Collection.ItemSlot, { scope: __scopeAccordion, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1451
|
+
Trigger2,
|
|
1452
|
+
{
|
|
1453
|
+
"aria-disabled": itemContext.open && !collapsibleContext.collapsible || void 0,
|
|
1454
|
+
"data-orientation": accordionContext.orientation,
|
|
1455
|
+
id: itemContext.triggerId,
|
|
1456
|
+
...collapsibleScope,
|
|
1457
|
+
...triggerProps,
|
|
1458
|
+
ref: forwardedRef
|
|
1459
|
+
}
|
|
1460
|
+
) });
|
|
1461
|
+
}
|
|
1462
|
+
);
|
|
1463
|
+
AccordionTrigger.displayName = TRIGGER_NAME2;
|
|
1464
|
+
var CONTENT_NAME2 = "AccordionContent";
|
|
1465
|
+
var AccordionContent = React37__namespace.default.forwardRef(
|
|
1466
|
+
(props, forwardedRef) => {
|
|
1467
|
+
const { __scopeAccordion, ...contentProps } = props;
|
|
1468
|
+
const accordionContext = useAccordionContext(ACCORDION_NAME, __scopeAccordion);
|
|
1469
|
+
const itemContext = useAccordionItemContext(CONTENT_NAME2, __scopeAccordion);
|
|
1470
|
+
const collapsibleScope = useCollapsibleScope(__scopeAccordion);
|
|
1471
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1472
|
+
Content2,
|
|
1473
|
+
{
|
|
1474
|
+
role: "region",
|
|
1475
|
+
"aria-labelledby": itemContext.triggerId,
|
|
1476
|
+
"data-orientation": accordionContext.orientation,
|
|
1477
|
+
...collapsibleScope,
|
|
1478
|
+
...contentProps,
|
|
1479
|
+
ref: forwardedRef,
|
|
1480
|
+
style: {
|
|
1481
|
+
["--radix-accordion-content-height"]: "var(--radix-collapsible-content-height)",
|
|
1482
|
+
["--radix-accordion-content-width"]: "var(--radix-collapsible-content-width)",
|
|
1483
|
+
...props.style
|
|
1484
|
+
}
|
|
1485
|
+
}
|
|
1486
|
+
);
|
|
1487
|
+
}
|
|
1488
|
+
);
|
|
1489
|
+
AccordionContent.displayName = CONTENT_NAME2;
|
|
1490
|
+
function getState2(open) {
|
|
1491
|
+
return open ? "open" : "closed";
|
|
1492
|
+
}
|
|
1493
|
+
var Root22 = Accordion;
|
|
1494
|
+
var Item = AccordionItem;
|
|
1495
|
+
var Header = AccordionHeader;
|
|
1496
|
+
var Trigger22 = AccordionTrigger;
|
|
1497
|
+
var Content22 = AccordionContent;
|
|
1498
|
+
var Accordion2 = Root22;
|
|
1499
|
+
var AccordionItem2 = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1500
|
+
Item,
|
|
1501
|
+
{
|
|
1502
|
+
ref,
|
|
1503
|
+
className: cn("border-b border-gray-200", className),
|
|
1504
|
+
...props
|
|
1505
|
+
}
|
|
1506
|
+
));
|
|
1507
|
+
AccordionItem2.displayName = "AccordionItem";
|
|
1508
|
+
var AccordionTrigger2 = React37__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
1509
|
+
Trigger22,
|
|
1510
|
+
{
|
|
1511
|
+
ref,
|
|
1512
|
+
className: cn(
|
|
1513
|
+
"flex flex-1 items-center justify-between py-4 font-medium text-[var(--black)] transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
|
|
1514
|
+
className
|
|
1515
|
+
),
|
|
1516
|
+
...props,
|
|
1517
|
+
children: [
|
|
1518
|
+
children,
|
|
1519
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { className: "h-4 w-4 shrink-0 text-gray-500 transition-transform duration-200" })
|
|
1520
|
+
]
|
|
1521
|
+
}
|
|
1522
|
+
) }));
|
|
1523
|
+
AccordionTrigger2.displayName = Trigger22.displayName;
|
|
1524
|
+
var AccordionContent2 = React37__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1525
|
+
Content22,
|
|
1526
|
+
{
|
|
1527
|
+
ref,
|
|
1528
|
+
className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
|
|
1529
|
+
...props,
|
|
1530
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pb-4 pt-0", className), children })
|
|
1531
|
+
}
|
|
1532
|
+
));
|
|
1533
|
+
AccordionContent2.displayName = Content22.displayName;
|
|
1534
|
+
var NODES3 = [
|
|
1535
|
+
"a",
|
|
1536
|
+
"button",
|
|
1537
|
+
"div",
|
|
1538
|
+
"form",
|
|
1539
|
+
"h2",
|
|
1540
|
+
"h3",
|
|
1541
|
+
"img",
|
|
1542
|
+
"input",
|
|
1543
|
+
"label",
|
|
1544
|
+
"li",
|
|
1545
|
+
"nav",
|
|
1546
|
+
"ol",
|
|
1547
|
+
"p",
|
|
1548
|
+
"select",
|
|
1549
|
+
"span",
|
|
1550
|
+
"svg",
|
|
1551
|
+
"ul"
|
|
1552
|
+
];
|
|
1553
|
+
var Primitive3 = NODES3.reduce((primitive, node) => {
|
|
1554
|
+
const Slot2 = reactSlot.createSlot(`Primitive.${node}`);
|
|
1555
|
+
const Node2 = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
1556
|
+
const { asChild, ...primitiveProps } = props;
|
|
1557
|
+
const Comp = asChild ? Slot2 : node;
|
|
1558
|
+
if (typeof window !== "undefined") {
|
|
1559
|
+
window[/* @__PURE__ */ Symbol.for("radix-ui")] = true;
|
|
1560
|
+
}
|
|
1561
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ...primitiveProps, ref: forwardedRef });
|
|
1562
|
+
});
|
|
1563
|
+
Node2.displayName = `Primitive.${node}`;
|
|
1564
|
+
return { ...primitive, [node]: Node2 };
|
|
1565
|
+
}, {});
|
|
1566
|
+
var NAME2 = "Separator";
|
|
1567
|
+
var DEFAULT_ORIENTATION = "horizontal";
|
|
1568
|
+
var ORIENTATIONS = ["horizontal", "vertical"];
|
|
1569
|
+
var Separator = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
1570
|
+
const { decorative, orientation: orientationProp = DEFAULT_ORIENTATION, ...domProps } = props;
|
|
1571
|
+
const orientation = isValidOrientation(orientationProp) ? orientationProp : DEFAULT_ORIENTATION;
|
|
1572
|
+
const ariaOrientation = orientation === "vertical" ? orientation : void 0;
|
|
1573
|
+
const semanticProps = decorative ? { role: "none" } : { "aria-orientation": ariaOrientation, role: "separator" };
|
|
1574
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1575
|
+
Primitive3.div,
|
|
1576
|
+
{
|
|
1577
|
+
"data-orientation": orientation,
|
|
1578
|
+
...semanticProps,
|
|
1579
|
+
...domProps,
|
|
1580
|
+
ref: forwardedRef
|
|
1581
|
+
}
|
|
1582
|
+
);
|
|
1583
|
+
});
|
|
1584
|
+
Separator.displayName = NAME2;
|
|
1585
|
+
function isValidOrientation(orientation) {
|
|
1586
|
+
return ORIENTATIONS.includes(orientation);
|
|
1587
|
+
}
|
|
1588
|
+
var Root4 = Separator;
|
|
1589
|
+
var Separator2 = React37__namespace.forwardRef(
|
|
1590
|
+
({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1591
|
+
Root4,
|
|
1592
|
+
{
|
|
1593
|
+
ref,
|
|
1594
|
+
decorative,
|
|
1595
|
+
orientation,
|
|
1596
|
+
className: cn(
|
|
1597
|
+
"shrink-0 bg-gray-200",
|
|
1598
|
+
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
|
|
1599
|
+
className
|
|
1600
|
+
),
|
|
1601
|
+
...props
|
|
1602
|
+
}
|
|
1603
|
+
)
|
|
1604
|
+
);
|
|
1605
|
+
Separator2.displayName = Root4.displayName;
|
|
1606
|
+
function useCallbackRef(callback) {
|
|
1607
|
+
const callbackRef = React37__namespace.useRef(callback);
|
|
1608
|
+
React37__namespace.useEffect(() => {
|
|
1609
|
+
callbackRef.current = callback;
|
|
1610
|
+
});
|
|
1611
|
+
return React37__namespace.useMemo(() => (...args) => callbackRef.current?.(...args), []);
|
|
1612
|
+
}
|
|
1613
|
+
function useEscapeKeydown(onEscapeKeyDownProp, ownerDocument = globalThis?.document) {
|
|
1614
|
+
const onEscapeKeyDown = useCallbackRef(onEscapeKeyDownProp);
|
|
1615
|
+
React37__namespace.useEffect(() => {
|
|
1616
|
+
const handleKeyDown = (event) => {
|
|
1617
|
+
if (event.key === "Escape") {
|
|
1618
|
+
onEscapeKeyDown(event);
|
|
1619
|
+
}
|
|
1620
|
+
};
|
|
1621
|
+
ownerDocument.addEventListener("keydown", handleKeyDown, { capture: true });
|
|
1622
|
+
return () => ownerDocument.removeEventListener("keydown", handleKeyDown, { capture: true });
|
|
1623
|
+
}, [onEscapeKeyDown, ownerDocument]);
|
|
1624
|
+
}
|
|
1625
|
+
var DISMISSABLE_LAYER_NAME = "DismissableLayer";
|
|
1626
|
+
var CONTEXT_UPDATE = "dismissableLayer.update";
|
|
1627
|
+
var POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
|
|
1628
|
+
var FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
|
|
1629
|
+
var originalBodyPointerEvents;
|
|
1630
|
+
var DismissableLayerContext = React37__namespace.createContext({
|
|
1631
|
+
layers: /* @__PURE__ */ new Set(),
|
|
1632
|
+
layersWithOutsidePointerEventsDisabled: /* @__PURE__ */ new Set(),
|
|
1633
|
+
branches: /* @__PURE__ */ new Set()
|
|
1634
|
+
});
|
|
1635
|
+
var DismissableLayer = React37__namespace.forwardRef(
|
|
1636
|
+
(props, forwardedRef) => {
|
|
1637
|
+
const {
|
|
1638
|
+
disableOutsidePointerEvents = false,
|
|
1639
|
+
onEscapeKeyDown,
|
|
1640
|
+
onPointerDownOutside,
|
|
1641
|
+
onFocusOutside,
|
|
1642
|
+
onInteractOutside,
|
|
1643
|
+
onDismiss,
|
|
1644
|
+
...layerProps
|
|
1645
|
+
} = props;
|
|
1646
|
+
const context = React37__namespace.useContext(DismissableLayerContext);
|
|
1647
|
+
const [node, setNode] = React37__namespace.useState(null);
|
|
1648
|
+
const ownerDocument = node?.ownerDocument ?? globalThis?.document;
|
|
1649
|
+
const [, force] = React37__namespace.useState({});
|
|
1650
|
+
const composedRefs = useComposedRefs(forwardedRef, (node2) => setNode(node2));
|
|
1651
|
+
const layers = Array.from(context.layers);
|
|
1652
|
+
const [highestLayerWithOutsidePointerEventsDisabled] = [...context.layersWithOutsidePointerEventsDisabled].slice(-1);
|
|
1653
|
+
const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled);
|
|
1654
|
+
const index = node ? layers.indexOf(node) : -1;
|
|
1655
|
+
const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0;
|
|
1656
|
+
const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex;
|
|
1657
|
+
const pointerDownOutside = usePointerDownOutside((event) => {
|
|
1658
|
+
const target = event.target;
|
|
1659
|
+
const isPointerDownOnBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
1660
|
+
if (!isPointerEventsEnabled || isPointerDownOnBranch) return;
|
|
1661
|
+
onPointerDownOutside?.(event);
|
|
1662
|
+
onInteractOutside?.(event);
|
|
1663
|
+
if (!event.defaultPrevented) onDismiss?.();
|
|
1664
|
+
}, ownerDocument);
|
|
1665
|
+
const focusOutside = useFocusOutside((event) => {
|
|
1666
|
+
const target = event.target;
|
|
1667
|
+
const isFocusInBranch = [...context.branches].some((branch) => branch.contains(target));
|
|
1668
|
+
if (isFocusInBranch) return;
|
|
1669
|
+
onFocusOutside?.(event);
|
|
1670
|
+
onInteractOutside?.(event);
|
|
1671
|
+
if (!event.defaultPrevented) onDismiss?.();
|
|
1672
|
+
}, ownerDocument);
|
|
1673
|
+
useEscapeKeydown((event) => {
|
|
1674
|
+
const isHighestLayer = index === context.layers.size - 1;
|
|
1675
|
+
if (!isHighestLayer) return;
|
|
1676
|
+
onEscapeKeyDown?.(event);
|
|
1677
|
+
if (!event.defaultPrevented && onDismiss) {
|
|
1678
|
+
event.preventDefault();
|
|
1679
|
+
onDismiss();
|
|
1680
|
+
}
|
|
1681
|
+
}, ownerDocument);
|
|
1682
|
+
React37__namespace.useEffect(() => {
|
|
1683
|
+
if (!node) return;
|
|
1684
|
+
if (disableOutsidePointerEvents) {
|
|
1685
|
+
if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
|
|
1686
|
+
originalBodyPointerEvents = ownerDocument.body.style.pointerEvents;
|
|
1687
|
+
ownerDocument.body.style.pointerEvents = "none";
|
|
1688
|
+
}
|
|
1689
|
+
context.layersWithOutsidePointerEventsDisabled.add(node);
|
|
1690
|
+
}
|
|
1691
|
+
context.layers.add(node);
|
|
1692
|
+
dispatchUpdate();
|
|
1693
|
+
return () => {
|
|
1694
|
+
if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) {
|
|
1695
|
+
ownerDocument.body.style.pointerEvents = originalBodyPointerEvents;
|
|
1696
|
+
}
|
|
1697
|
+
};
|
|
1698
|
+
}, [node, ownerDocument, disableOutsidePointerEvents, context]);
|
|
1699
|
+
React37__namespace.useEffect(() => {
|
|
1700
|
+
return () => {
|
|
1701
|
+
if (!node) return;
|
|
1702
|
+
context.layers.delete(node);
|
|
1703
|
+
context.layersWithOutsidePointerEventsDisabled.delete(node);
|
|
1704
|
+
dispatchUpdate();
|
|
1705
|
+
};
|
|
1706
|
+
}, [node, context]);
|
|
1707
|
+
React37__namespace.useEffect(() => {
|
|
1708
|
+
const handleUpdate = () => force({});
|
|
1709
|
+
document.addEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
1710
|
+
return () => document.removeEventListener(CONTEXT_UPDATE, handleUpdate);
|
|
1711
|
+
}, []);
|
|
1712
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1713
|
+
Primitive2.div,
|
|
1714
|
+
{
|
|
1715
|
+
...layerProps,
|
|
1716
|
+
ref: composedRefs,
|
|
1717
|
+
style: {
|
|
1718
|
+
pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? "auto" : "none" : void 0,
|
|
1719
|
+
...props.style
|
|
1720
|
+
},
|
|
1721
|
+
onFocusCapture: composeEventHandlers(props.onFocusCapture, focusOutside.onFocusCapture),
|
|
1722
|
+
onBlurCapture: composeEventHandlers(props.onBlurCapture, focusOutside.onBlurCapture),
|
|
1723
|
+
onPointerDownCapture: composeEventHandlers(
|
|
1724
|
+
props.onPointerDownCapture,
|
|
1725
|
+
pointerDownOutside.onPointerDownCapture
|
|
1726
|
+
)
|
|
1727
|
+
}
|
|
1728
|
+
);
|
|
1729
|
+
}
|
|
1730
|
+
);
|
|
1731
|
+
DismissableLayer.displayName = DISMISSABLE_LAYER_NAME;
|
|
1732
|
+
var BRANCH_NAME = "DismissableLayerBranch";
|
|
1733
|
+
var DismissableLayerBranch = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
1734
|
+
const context = React37__namespace.useContext(DismissableLayerContext);
|
|
1735
|
+
const ref = React37__namespace.useRef(null);
|
|
1736
|
+
const composedRefs = useComposedRefs(forwardedRef, ref);
|
|
1737
|
+
React37__namespace.useEffect(() => {
|
|
1738
|
+
const node = ref.current;
|
|
1739
|
+
if (node) {
|
|
1740
|
+
context.branches.add(node);
|
|
1741
|
+
return () => {
|
|
1742
|
+
context.branches.delete(node);
|
|
1743
|
+
};
|
|
1744
|
+
}
|
|
1745
|
+
}, [context.branches]);
|
|
1746
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Primitive2.div, { ...props, ref: composedRefs });
|
|
1747
|
+
});
|
|
1748
|
+
DismissableLayerBranch.displayName = BRANCH_NAME;
|
|
1749
|
+
function usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis?.document) {
|
|
1750
|
+
const handlePointerDownOutside = useCallbackRef(onPointerDownOutside);
|
|
1751
|
+
const isPointerInsideReactTreeRef = React37__namespace.useRef(false);
|
|
1752
|
+
const handleClickRef = React37__namespace.useRef(() => {
|
|
1753
|
+
});
|
|
1754
|
+
React37__namespace.useEffect(() => {
|
|
1755
|
+
const handlePointerDown = (event) => {
|
|
1756
|
+
if (event.target && !isPointerInsideReactTreeRef.current) {
|
|
1757
|
+
let handleAndDispatchPointerDownOutsideEvent2 = function() {
|
|
1758
|
+
handleAndDispatchCustomEvent(
|
|
1759
|
+
POINTER_DOWN_OUTSIDE,
|
|
1760
|
+
handlePointerDownOutside,
|
|
1761
|
+
eventDetail,
|
|
1762
|
+
{ discrete: true }
|
|
1763
|
+
);
|
|
1764
|
+
};
|
|
1765
|
+
const eventDetail = { originalEvent: event };
|
|
1766
|
+
if (event.pointerType === "touch") {
|
|
1767
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
1768
|
+
handleClickRef.current = handleAndDispatchPointerDownOutsideEvent2;
|
|
1769
|
+
ownerDocument.addEventListener("click", handleClickRef.current, { once: true });
|
|
1770
|
+
} else {
|
|
1771
|
+
handleAndDispatchPointerDownOutsideEvent2();
|
|
1772
|
+
}
|
|
1773
|
+
} else {
|
|
1774
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
1775
|
+
}
|
|
1776
|
+
isPointerInsideReactTreeRef.current = false;
|
|
1777
|
+
};
|
|
1778
|
+
const timerId = window.setTimeout(() => {
|
|
1779
|
+
ownerDocument.addEventListener("pointerdown", handlePointerDown);
|
|
1780
|
+
}, 0);
|
|
1781
|
+
return () => {
|
|
1782
|
+
window.clearTimeout(timerId);
|
|
1783
|
+
ownerDocument.removeEventListener("pointerdown", handlePointerDown);
|
|
1784
|
+
ownerDocument.removeEventListener("click", handleClickRef.current);
|
|
1785
|
+
};
|
|
1786
|
+
}, [ownerDocument, handlePointerDownOutside]);
|
|
1787
|
+
return {
|
|
1788
|
+
// ensures we check React component tree (not just DOM tree)
|
|
1789
|
+
onPointerDownCapture: () => isPointerInsideReactTreeRef.current = true
|
|
1790
|
+
};
|
|
1791
|
+
}
|
|
1792
|
+
function useFocusOutside(onFocusOutside, ownerDocument = globalThis?.document) {
|
|
1793
|
+
const handleFocusOutside = useCallbackRef(onFocusOutside);
|
|
1794
|
+
const isFocusInsideReactTreeRef = React37__namespace.useRef(false);
|
|
1795
|
+
React37__namespace.useEffect(() => {
|
|
1796
|
+
const handleFocus = (event) => {
|
|
1797
|
+
if (event.target && !isFocusInsideReactTreeRef.current) {
|
|
1798
|
+
const eventDetail = { originalEvent: event };
|
|
1799
|
+
handleAndDispatchCustomEvent(FOCUS_OUTSIDE, handleFocusOutside, eventDetail, {
|
|
1800
|
+
discrete: false
|
|
1801
|
+
});
|
|
1802
|
+
}
|
|
1803
|
+
};
|
|
1804
|
+
ownerDocument.addEventListener("focusin", handleFocus);
|
|
1805
|
+
return () => ownerDocument.removeEventListener("focusin", handleFocus);
|
|
1806
|
+
}, [ownerDocument, handleFocusOutside]);
|
|
1807
|
+
return {
|
|
1808
|
+
onFocusCapture: () => isFocusInsideReactTreeRef.current = true,
|
|
1809
|
+
onBlurCapture: () => isFocusInsideReactTreeRef.current = false
|
|
1810
|
+
};
|
|
1811
|
+
}
|
|
1812
|
+
function dispatchUpdate() {
|
|
1813
|
+
const event = new CustomEvent(CONTEXT_UPDATE);
|
|
1814
|
+
document.dispatchEvent(event);
|
|
1815
|
+
}
|
|
1816
|
+
function handleAndDispatchCustomEvent(name, handler, detail, { discrete }) {
|
|
1817
|
+
const target = detail.originalEvent.target;
|
|
1818
|
+
const event = new CustomEvent(name, { bubbles: false, cancelable: true, detail });
|
|
1819
|
+
if (handler) target.addEventListener(name, handler, { once: true });
|
|
1820
|
+
if (discrete) {
|
|
1821
|
+
dispatchDiscreteCustomEvent(target, event);
|
|
1822
|
+
} else {
|
|
1823
|
+
target.dispatchEvent(event);
|
|
1824
|
+
}
|
|
1825
|
+
}
|
|
1826
|
+
function usePrevious(value) {
|
|
1827
|
+
const ref = React37__namespace.useRef({ value, previous: value });
|
|
1828
|
+
return React37__namespace.useMemo(() => {
|
|
1829
|
+
if (ref.current.value !== value) {
|
|
1830
|
+
ref.current.previous = ref.current.value;
|
|
1831
|
+
ref.current.value = value;
|
|
1832
|
+
}
|
|
1833
|
+
return ref.current.previous;
|
|
1834
|
+
}, [value]);
|
|
1835
|
+
}
|
|
1836
|
+
var VISUALLY_HIDDEN_STYLES = Object.freeze({
|
|
1837
|
+
// See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
|
|
1838
|
+
position: "absolute",
|
|
1839
|
+
border: 0,
|
|
1840
|
+
width: 1,
|
|
1841
|
+
height: 1,
|
|
1842
|
+
padding: 0,
|
|
1843
|
+
margin: -1,
|
|
1844
|
+
overflow: "hidden",
|
|
1845
|
+
clip: "rect(0, 0, 0, 0)",
|
|
1846
|
+
whiteSpace: "nowrap",
|
|
1847
|
+
wordWrap: "normal"
|
|
1848
|
+
});
|
|
1849
|
+
var NAME3 = "VisuallyHidden";
|
|
1850
|
+
var VisuallyHidden = React37__namespace.forwardRef(
|
|
1851
|
+
(props, forwardedRef) => {
|
|
1852
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1853
|
+
Primitive2.span,
|
|
1854
|
+
{
|
|
1855
|
+
...props,
|
|
1856
|
+
ref: forwardedRef,
|
|
1857
|
+
style: { ...VISUALLY_HIDDEN_STYLES, ...props.style }
|
|
1858
|
+
}
|
|
1859
|
+
);
|
|
1860
|
+
}
|
|
1861
|
+
);
|
|
1862
|
+
VisuallyHidden.displayName = NAME3;
|
|
1863
|
+
var Root5 = VisuallyHidden;
|
|
1864
|
+
var NAVIGATION_MENU_NAME = "NavigationMenu";
|
|
1865
|
+
var [Collection2, useCollection2, createCollectionScope2] = createCollection(NAVIGATION_MENU_NAME);
|
|
1866
|
+
var [FocusGroupCollection, useFocusGroupCollection, createFocusGroupCollectionScope] = createCollection(NAVIGATION_MENU_NAME);
|
|
1867
|
+
var [createNavigationMenuContext] = createContextScope(
|
|
1868
|
+
NAVIGATION_MENU_NAME,
|
|
1869
|
+
[createCollectionScope2, createFocusGroupCollectionScope]
|
|
1870
|
+
);
|
|
1871
|
+
var [NavigationMenuProviderImpl, useNavigationMenuContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
|
|
1872
|
+
var [ViewportContentProvider, useViewportContentContext] = createNavigationMenuContext(NAVIGATION_MENU_NAME);
|
|
1873
|
+
var NavigationMenu = React37__namespace.forwardRef(
|
|
1874
|
+
(props, forwardedRef) => {
|
|
1875
|
+
const {
|
|
1876
|
+
__scopeNavigationMenu,
|
|
1877
|
+
value: valueProp,
|
|
1878
|
+
onValueChange,
|
|
1879
|
+
defaultValue,
|
|
1880
|
+
delayDuration = 200,
|
|
1881
|
+
skipDelayDuration = 300,
|
|
1882
|
+
orientation = "horizontal",
|
|
1883
|
+
dir,
|
|
1884
|
+
...NavigationMenuProps
|
|
1885
|
+
} = props;
|
|
1886
|
+
const [navigationMenu, setNavigationMenu] = React37__namespace.useState(null);
|
|
1887
|
+
const composedRef = useComposedRefs(forwardedRef, (node) => setNavigationMenu(node));
|
|
1888
|
+
const direction = useDirection(dir);
|
|
1889
|
+
const openTimerRef = React37__namespace.useRef(0);
|
|
1890
|
+
const closeTimerRef = React37__namespace.useRef(0);
|
|
1891
|
+
const skipDelayTimerRef = React37__namespace.useRef(0);
|
|
1892
|
+
const [isOpenDelayed, setIsOpenDelayed] = React37__namespace.useState(true);
|
|
1893
|
+
const [value, setValue] = useControllableState({
|
|
1894
|
+
prop: valueProp,
|
|
1895
|
+
onChange: (value2) => {
|
|
1896
|
+
const isOpen = value2 !== "";
|
|
1897
|
+
const hasSkipDelayDuration = skipDelayDuration > 0;
|
|
1898
|
+
if (isOpen) {
|
|
1899
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
1900
|
+
if (hasSkipDelayDuration) setIsOpenDelayed(false);
|
|
1901
|
+
} else {
|
|
1902
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
1903
|
+
skipDelayTimerRef.current = window.setTimeout(
|
|
1904
|
+
() => setIsOpenDelayed(true),
|
|
1905
|
+
skipDelayDuration
|
|
1906
|
+
);
|
|
1907
|
+
}
|
|
1908
|
+
onValueChange?.(value2);
|
|
1909
|
+
},
|
|
1910
|
+
defaultProp: defaultValue ?? "",
|
|
1911
|
+
caller: NAVIGATION_MENU_NAME
|
|
1912
|
+
});
|
|
1913
|
+
const startCloseTimer = React37__namespace.useCallback(() => {
|
|
1914
|
+
window.clearTimeout(closeTimerRef.current);
|
|
1915
|
+
closeTimerRef.current = window.setTimeout(() => setValue(""), 150);
|
|
1916
|
+
}, [setValue]);
|
|
1917
|
+
const handleOpen = React37__namespace.useCallback(
|
|
1918
|
+
(itemValue) => {
|
|
1919
|
+
window.clearTimeout(closeTimerRef.current);
|
|
1920
|
+
setValue(itemValue);
|
|
1921
|
+
},
|
|
1922
|
+
[setValue]
|
|
1923
|
+
);
|
|
1924
|
+
const handleDelayedOpen = React37__namespace.useCallback(
|
|
1925
|
+
(itemValue) => {
|
|
1926
|
+
const isOpenItem = value === itemValue;
|
|
1927
|
+
if (isOpenItem) {
|
|
1928
|
+
window.clearTimeout(closeTimerRef.current);
|
|
1929
|
+
} else {
|
|
1930
|
+
openTimerRef.current = window.setTimeout(() => {
|
|
1931
|
+
window.clearTimeout(closeTimerRef.current);
|
|
1932
|
+
setValue(itemValue);
|
|
1933
|
+
}, delayDuration);
|
|
1934
|
+
}
|
|
1935
|
+
},
|
|
1936
|
+
[value, setValue, delayDuration]
|
|
1937
|
+
);
|
|
1938
|
+
React37__namespace.useEffect(() => {
|
|
1939
|
+
return () => {
|
|
1940
|
+
window.clearTimeout(openTimerRef.current);
|
|
1941
|
+
window.clearTimeout(closeTimerRef.current);
|
|
1942
|
+
window.clearTimeout(skipDelayTimerRef.current);
|
|
1943
|
+
};
|
|
1944
|
+
}, []);
|
|
1945
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1946
|
+
NavigationMenuProvider,
|
|
1947
|
+
{
|
|
1948
|
+
scope: __scopeNavigationMenu,
|
|
1949
|
+
isRootMenu: true,
|
|
1950
|
+
value,
|
|
1951
|
+
dir: direction,
|
|
1952
|
+
orientation,
|
|
1953
|
+
rootNavigationMenu: navigationMenu,
|
|
1954
|
+
onTriggerEnter: (itemValue) => {
|
|
1955
|
+
window.clearTimeout(openTimerRef.current);
|
|
1956
|
+
if (isOpenDelayed) handleDelayedOpen(itemValue);
|
|
1957
|
+
else handleOpen(itemValue);
|
|
1958
|
+
},
|
|
1959
|
+
onTriggerLeave: () => {
|
|
1960
|
+
window.clearTimeout(openTimerRef.current);
|
|
1961
|
+
startCloseTimer();
|
|
1962
|
+
},
|
|
1963
|
+
onContentEnter: () => window.clearTimeout(closeTimerRef.current),
|
|
1964
|
+
onContentLeave: startCloseTimer,
|
|
1965
|
+
onItemSelect: (itemValue) => {
|
|
1966
|
+
setValue((prevValue) => prevValue === itemValue ? "" : itemValue);
|
|
1967
|
+
},
|
|
1968
|
+
onItemDismiss: () => setValue(""),
|
|
1969
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1970
|
+
Primitive2.nav,
|
|
1971
|
+
{
|
|
1972
|
+
"aria-label": "Main",
|
|
1973
|
+
"data-orientation": orientation,
|
|
1974
|
+
dir: direction,
|
|
1975
|
+
...NavigationMenuProps,
|
|
1976
|
+
ref: composedRef
|
|
1977
|
+
}
|
|
1978
|
+
)
|
|
1979
|
+
}
|
|
1980
|
+
);
|
|
1981
|
+
}
|
|
1982
|
+
);
|
|
1983
|
+
NavigationMenu.displayName = NAVIGATION_MENU_NAME;
|
|
1984
|
+
var SUB_NAME = "NavigationMenuSub";
|
|
1985
|
+
var NavigationMenuSub = React37__namespace.forwardRef(
|
|
1986
|
+
(props, forwardedRef) => {
|
|
1987
|
+
const {
|
|
1988
|
+
__scopeNavigationMenu,
|
|
1989
|
+
value: valueProp,
|
|
1990
|
+
onValueChange,
|
|
1991
|
+
defaultValue,
|
|
1992
|
+
orientation = "horizontal",
|
|
1993
|
+
...subProps
|
|
1994
|
+
} = props;
|
|
1995
|
+
const context = useNavigationMenuContext(SUB_NAME, __scopeNavigationMenu);
|
|
1996
|
+
const [value, setValue] = useControllableState({
|
|
1997
|
+
prop: valueProp,
|
|
1998
|
+
onChange: onValueChange,
|
|
1999
|
+
defaultProp: defaultValue ?? "",
|
|
2000
|
+
caller: SUB_NAME
|
|
2001
|
+
});
|
|
2002
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2003
|
+
NavigationMenuProvider,
|
|
2004
|
+
{
|
|
2005
|
+
scope: __scopeNavigationMenu,
|
|
2006
|
+
isRootMenu: false,
|
|
2007
|
+
value,
|
|
2008
|
+
dir: context.dir,
|
|
2009
|
+
orientation,
|
|
2010
|
+
rootNavigationMenu: context.rootNavigationMenu,
|
|
2011
|
+
onTriggerEnter: (itemValue) => setValue(itemValue),
|
|
2012
|
+
onItemSelect: (itemValue) => setValue(itemValue),
|
|
2013
|
+
onItemDismiss: () => setValue(""),
|
|
2014
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Primitive2.div, { "data-orientation": orientation, ...subProps, ref: forwardedRef })
|
|
2015
|
+
}
|
|
2016
|
+
);
|
|
2017
|
+
}
|
|
2018
|
+
);
|
|
2019
|
+
NavigationMenuSub.displayName = SUB_NAME;
|
|
2020
|
+
var NavigationMenuProvider = (props) => {
|
|
2021
|
+
const {
|
|
2022
|
+
scope,
|
|
2023
|
+
isRootMenu,
|
|
2024
|
+
rootNavigationMenu,
|
|
2025
|
+
dir,
|
|
2026
|
+
orientation,
|
|
2027
|
+
children,
|
|
2028
|
+
value,
|
|
2029
|
+
onItemSelect,
|
|
2030
|
+
onItemDismiss,
|
|
2031
|
+
onTriggerEnter,
|
|
2032
|
+
onTriggerLeave,
|
|
2033
|
+
onContentEnter,
|
|
2034
|
+
onContentLeave
|
|
2035
|
+
} = props;
|
|
2036
|
+
const [viewport, setViewport] = React37__namespace.useState(null);
|
|
2037
|
+
const [viewportContent, setViewportContent] = React37__namespace.useState(/* @__PURE__ */ new Map());
|
|
2038
|
+
const [indicatorTrack, setIndicatorTrack] = React37__namespace.useState(null);
|
|
2039
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2040
|
+
NavigationMenuProviderImpl,
|
|
2041
|
+
{
|
|
2042
|
+
scope,
|
|
2043
|
+
isRootMenu,
|
|
2044
|
+
rootNavigationMenu,
|
|
2045
|
+
value,
|
|
2046
|
+
previousValue: usePrevious(value),
|
|
2047
|
+
baseId: useId(),
|
|
2048
|
+
dir,
|
|
2049
|
+
orientation,
|
|
2050
|
+
viewport,
|
|
2051
|
+
onViewportChange: setViewport,
|
|
2052
|
+
indicatorTrack,
|
|
2053
|
+
onIndicatorTrackChange: setIndicatorTrack,
|
|
2054
|
+
onTriggerEnter: useCallbackRef(onTriggerEnter),
|
|
2055
|
+
onTriggerLeave: useCallbackRef(onTriggerLeave),
|
|
2056
|
+
onContentEnter: useCallbackRef(onContentEnter),
|
|
2057
|
+
onContentLeave: useCallbackRef(onContentLeave),
|
|
2058
|
+
onItemSelect: useCallbackRef(onItemSelect),
|
|
2059
|
+
onItemDismiss: useCallbackRef(onItemDismiss),
|
|
2060
|
+
onViewportContentChange: React37__namespace.useCallback((contentValue, contentData) => {
|
|
2061
|
+
setViewportContent((prevContent) => {
|
|
2062
|
+
prevContent.set(contentValue, contentData);
|
|
2063
|
+
return new Map(prevContent);
|
|
2064
|
+
});
|
|
2065
|
+
}, []),
|
|
2066
|
+
onViewportContentRemove: React37__namespace.useCallback((contentValue) => {
|
|
2067
|
+
setViewportContent((prevContent) => {
|
|
2068
|
+
if (!prevContent.has(contentValue)) return prevContent;
|
|
2069
|
+
prevContent.delete(contentValue);
|
|
2070
|
+
return new Map(prevContent);
|
|
2071
|
+
});
|
|
2072
|
+
}, []),
|
|
2073
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Collection2.Provider, { scope, children: /* @__PURE__ */ jsxRuntime.jsx(ViewportContentProvider, { scope, items: viewportContent, children }) })
|
|
2074
|
+
}
|
|
2075
|
+
);
|
|
2076
|
+
};
|
|
2077
|
+
var LIST_NAME = "NavigationMenuList";
|
|
2078
|
+
var NavigationMenuList = React37__namespace.forwardRef(
|
|
2079
|
+
(props, forwardedRef) => {
|
|
2080
|
+
const { __scopeNavigationMenu, ...listProps } = props;
|
|
2081
|
+
const context = useNavigationMenuContext(LIST_NAME, __scopeNavigationMenu);
|
|
2082
|
+
const list = /* @__PURE__ */ jsxRuntime.jsx(Primitive2.ul, { "data-orientation": context.orientation, ...listProps, ref: forwardedRef });
|
|
2083
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Primitive2.div, { style: { position: "relative" }, ref: context.onIndicatorTrackChange, children: /* @__PURE__ */ jsxRuntime.jsx(Collection2.Slot, { scope: __scopeNavigationMenu, children: context.isRootMenu ? /* @__PURE__ */ jsxRuntime.jsx(FocusGroup, { asChild: true, children: list }) : list }) });
|
|
2084
|
+
}
|
|
2085
|
+
);
|
|
2086
|
+
NavigationMenuList.displayName = LIST_NAME;
|
|
2087
|
+
var ITEM_NAME2 = "NavigationMenuItem";
|
|
2088
|
+
var [NavigationMenuItemContextProvider, useNavigationMenuItemContext] = createNavigationMenuContext(ITEM_NAME2);
|
|
2089
|
+
var NavigationMenuItem = React37__namespace.forwardRef(
|
|
2090
|
+
(props, forwardedRef) => {
|
|
2091
|
+
const { __scopeNavigationMenu, value: valueProp, ...itemProps } = props;
|
|
2092
|
+
const autoValue = useId();
|
|
2093
|
+
const value = valueProp || autoValue || "LEGACY_REACT_AUTO_VALUE";
|
|
2094
|
+
const contentRef = React37__namespace.useRef(null);
|
|
2095
|
+
const triggerRef = React37__namespace.useRef(null);
|
|
2096
|
+
const focusProxyRef = React37__namespace.useRef(null);
|
|
2097
|
+
const restoreContentTabOrderRef = React37__namespace.useRef(() => {
|
|
2098
|
+
});
|
|
2099
|
+
const wasEscapeCloseRef = React37__namespace.useRef(false);
|
|
2100
|
+
const handleContentEntry = React37__namespace.useCallback((side = "start") => {
|
|
2101
|
+
if (contentRef.current) {
|
|
2102
|
+
restoreContentTabOrderRef.current();
|
|
2103
|
+
const candidates = getTabbableCandidates(contentRef.current);
|
|
2104
|
+
if (candidates.length) focusFirst(side === "start" ? candidates : candidates.reverse());
|
|
2105
|
+
}
|
|
2106
|
+
}, []);
|
|
2107
|
+
const handleContentExit = React37__namespace.useCallback(() => {
|
|
2108
|
+
if (contentRef.current) {
|
|
2109
|
+
const candidates = getTabbableCandidates(contentRef.current);
|
|
2110
|
+
if (candidates.length) restoreContentTabOrderRef.current = removeFromTabOrder(candidates);
|
|
2111
|
+
}
|
|
2112
|
+
}, []);
|
|
2113
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2114
|
+
NavigationMenuItemContextProvider,
|
|
2115
|
+
{
|
|
2116
|
+
scope: __scopeNavigationMenu,
|
|
2117
|
+
value,
|
|
2118
|
+
triggerRef,
|
|
2119
|
+
contentRef,
|
|
2120
|
+
focusProxyRef,
|
|
2121
|
+
wasEscapeCloseRef,
|
|
2122
|
+
onEntryKeyDown: handleContentEntry,
|
|
2123
|
+
onFocusProxyEnter: handleContentEntry,
|
|
2124
|
+
onRootContentClose: handleContentExit,
|
|
2125
|
+
onContentFocusOutside: handleContentExit,
|
|
2126
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(Primitive2.li, { ...itemProps, ref: forwardedRef })
|
|
2127
|
+
}
|
|
2128
|
+
);
|
|
2129
|
+
}
|
|
2130
|
+
);
|
|
2131
|
+
NavigationMenuItem.displayName = ITEM_NAME2;
|
|
2132
|
+
var TRIGGER_NAME3 = "NavigationMenuTrigger";
|
|
2133
|
+
var NavigationMenuTrigger = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2134
|
+
const { __scopeNavigationMenu, disabled, ...triggerProps } = props;
|
|
2135
|
+
const context = useNavigationMenuContext(TRIGGER_NAME3, props.__scopeNavigationMenu);
|
|
2136
|
+
const itemContext = useNavigationMenuItemContext(TRIGGER_NAME3, props.__scopeNavigationMenu);
|
|
2137
|
+
const ref = React37__namespace.useRef(null);
|
|
2138
|
+
const composedRefs = useComposedRefs(ref, itemContext.triggerRef, forwardedRef);
|
|
2139
|
+
const triggerId = makeTriggerId(context.baseId, itemContext.value);
|
|
2140
|
+
const contentId = makeContentId(context.baseId, itemContext.value);
|
|
2141
|
+
const hasPointerMoveOpenedRef = React37__namespace.useRef(false);
|
|
2142
|
+
const wasClickCloseRef = React37__namespace.useRef(false);
|
|
2143
|
+
const open = itemContext.value === context.value;
|
|
2144
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2145
|
+
/* @__PURE__ */ jsxRuntime.jsx(Collection2.ItemSlot, { scope: __scopeNavigationMenu, value: itemContext.value, children: /* @__PURE__ */ jsxRuntime.jsx(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2146
|
+
Primitive2.button,
|
|
2147
|
+
{
|
|
2148
|
+
id: triggerId,
|
|
2149
|
+
disabled,
|
|
2150
|
+
"data-disabled": disabled ? "" : void 0,
|
|
2151
|
+
"data-state": getOpenState(open),
|
|
2152
|
+
"aria-expanded": open,
|
|
2153
|
+
"aria-controls": contentId,
|
|
2154
|
+
...triggerProps,
|
|
2155
|
+
ref: composedRefs,
|
|
2156
|
+
onPointerEnter: composeEventHandlers(props.onPointerEnter, () => {
|
|
2157
|
+
wasClickCloseRef.current = false;
|
|
2158
|
+
itemContext.wasEscapeCloseRef.current = false;
|
|
2159
|
+
}),
|
|
2160
|
+
onPointerMove: composeEventHandlers(
|
|
2161
|
+
props.onPointerMove,
|
|
2162
|
+
whenMouse(() => {
|
|
2163
|
+
if (disabled || wasClickCloseRef.current || itemContext.wasEscapeCloseRef.current || hasPointerMoveOpenedRef.current)
|
|
2164
|
+
return;
|
|
2165
|
+
context.onTriggerEnter(itemContext.value);
|
|
2166
|
+
hasPointerMoveOpenedRef.current = true;
|
|
2167
|
+
})
|
|
2168
|
+
),
|
|
2169
|
+
onPointerLeave: composeEventHandlers(
|
|
2170
|
+
props.onPointerLeave,
|
|
2171
|
+
whenMouse(() => {
|
|
2172
|
+
if (disabled) return;
|
|
2173
|
+
context.onTriggerLeave();
|
|
2174
|
+
hasPointerMoveOpenedRef.current = false;
|
|
2175
|
+
})
|
|
2176
|
+
),
|
|
2177
|
+
onClick: composeEventHandlers(props.onClick, () => {
|
|
2178
|
+
context.onItemSelect(itemContext.value);
|
|
2179
|
+
wasClickCloseRef.current = open;
|
|
2180
|
+
}),
|
|
2181
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
2182
|
+
const verticalEntryKey = context.dir === "rtl" ? "ArrowLeft" : "ArrowRight";
|
|
2183
|
+
const entryKey = { horizontal: "ArrowDown", vertical: verticalEntryKey }[context.orientation];
|
|
2184
|
+
if (open && event.key === entryKey) {
|
|
2185
|
+
itemContext.onEntryKeyDown();
|
|
2186
|
+
event.preventDefault();
|
|
2187
|
+
}
|
|
2188
|
+
})
|
|
2189
|
+
}
|
|
2190
|
+
) }) }),
|
|
2191
|
+
open && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2192
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2193
|
+
Root5,
|
|
2194
|
+
{
|
|
2195
|
+
"aria-hidden": true,
|
|
2196
|
+
tabIndex: 0,
|
|
2197
|
+
ref: itemContext.focusProxyRef,
|
|
2198
|
+
onFocus: (event) => {
|
|
2199
|
+
const content = itemContext.contentRef.current;
|
|
2200
|
+
const prevFocusedElement = event.relatedTarget;
|
|
2201
|
+
const wasTriggerFocused = prevFocusedElement === ref.current;
|
|
2202
|
+
const wasFocusFromContent = content?.contains(prevFocusedElement);
|
|
2203
|
+
if (wasTriggerFocused || !wasFocusFromContent) {
|
|
2204
|
+
itemContext.onFocusProxyEnter(wasTriggerFocused ? "start" : "end");
|
|
2205
|
+
}
|
|
2206
|
+
}
|
|
2207
|
+
}
|
|
2208
|
+
),
|
|
2209
|
+
context.viewport && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-owns": contentId })
|
|
2210
|
+
] })
|
|
2211
|
+
] });
|
|
2212
|
+
});
|
|
2213
|
+
NavigationMenuTrigger.displayName = TRIGGER_NAME3;
|
|
2214
|
+
var LINK_NAME = "NavigationMenuLink";
|
|
2215
|
+
var LINK_SELECT = "navigationMenu.linkSelect";
|
|
2216
|
+
var NavigationMenuLink = React37__namespace.forwardRef(
|
|
2217
|
+
(props, forwardedRef) => {
|
|
2218
|
+
const { __scopeNavigationMenu, active, onSelect, ...linkProps } = props;
|
|
2219
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FocusGroupItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2220
|
+
Primitive2.a,
|
|
2221
|
+
{
|
|
2222
|
+
"data-active": active ? "" : void 0,
|
|
2223
|
+
"aria-current": active ? "page" : void 0,
|
|
2224
|
+
...linkProps,
|
|
2225
|
+
ref: forwardedRef,
|
|
2226
|
+
onClick: composeEventHandlers(
|
|
2227
|
+
props.onClick,
|
|
2228
|
+
(event) => {
|
|
2229
|
+
const target = event.target;
|
|
2230
|
+
const linkSelectEvent = new CustomEvent(LINK_SELECT, {
|
|
2231
|
+
bubbles: true,
|
|
2232
|
+
cancelable: true
|
|
2233
|
+
});
|
|
2234
|
+
target.addEventListener(LINK_SELECT, (event2) => onSelect?.(event2), { once: true });
|
|
2235
|
+
dispatchDiscreteCustomEvent(target, linkSelectEvent);
|
|
2236
|
+
if (!linkSelectEvent.defaultPrevented && !event.metaKey) {
|
|
2237
|
+
const rootContentDismissEvent = new CustomEvent(ROOT_CONTENT_DISMISS, {
|
|
2238
|
+
bubbles: true,
|
|
2239
|
+
cancelable: true
|
|
2240
|
+
});
|
|
2241
|
+
dispatchDiscreteCustomEvent(target, rootContentDismissEvent);
|
|
2242
|
+
}
|
|
2243
|
+
},
|
|
2244
|
+
{ checkForDefaultPrevented: false }
|
|
2245
|
+
)
|
|
2246
|
+
}
|
|
2247
|
+
) });
|
|
2248
|
+
}
|
|
2249
|
+
);
|
|
2250
|
+
NavigationMenuLink.displayName = LINK_NAME;
|
|
2251
|
+
var INDICATOR_NAME = "NavigationMenuIndicator";
|
|
2252
|
+
var NavigationMenuIndicator = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2253
|
+
const { forceMount, ...indicatorProps } = props;
|
|
2254
|
+
const context = useNavigationMenuContext(INDICATOR_NAME, props.__scopeNavigationMenu);
|
|
2255
|
+
const isVisible = Boolean(context.value);
|
|
2256
|
+
return context.indicatorTrack ? ReactDOM2__namespace.default.createPortal(
|
|
2257
|
+
/* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || isVisible, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuIndicatorImpl, { ...indicatorProps, ref: forwardedRef }) }),
|
|
2258
|
+
context.indicatorTrack
|
|
2259
|
+
) : null;
|
|
2260
|
+
});
|
|
2261
|
+
NavigationMenuIndicator.displayName = INDICATOR_NAME;
|
|
2262
|
+
var NavigationMenuIndicatorImpl = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2263
|
+
const { __scopeNavigationMenu, ...indicatorProps } = props;
|
|
2264
|
+
const context = useNavigationMenuContext(INDICATOR_NAME, __scopeNavigationMenu);
|
|
2265
|
+
const getItems = useCollection2(__scopeNavigationMenu);
|
|
2266
|
+
const [activeTrigger, setActiveTrigger] = React37__namespace.useState(
|
|
2267
|
+
null
|
|
2268
|
+
);
|
|
2269
|
+
const [position, setPosition] = React37__namespace.useState(null);
|
|
2270
|
+
const isHorizontal = context.orientation === "horizontal";
|
|
2271
|
+
const isVisible = Boolean(context.value);
|
|
2272
|
+
React37__namespace.useEffect(() => {
|
|
2273
|
+
const items = getItems();
|
|
2274
|
+
const triggerNode = items.find((item) => item.value === context.value)?.ref.current;
|
|
2275
|
+
if (triggerNode) setActiveTrigger(triggerNode);
|
|
2276
|
+
}, [getItems, context.value]);
|
|
2277
|
+
const handlePositionChange = () => {
|
|
2278
|
+
if (activeTrigger) {
|
|
2279
|
+
setPosition({
|
|
2280
|
+
size: isHorizontal ? activeTrigger.offsetWidth : activeTrigger.offsetHeight,
|
|
2281
|
+
offset: isHorizontal ? activeTrigger.offsetLeft : activeTrigger.offsetTop
|
|
2282
|
+
});
|
|
2283
|
+
}
|
|
2284
|
+
};
|
|
2285
|
+
useResizeObserver(activeTrigger, handlePositionChange);
|
|
2286
|
+
useResizeObserver(context.indicatorTrack, handlePositionChange);
|
|
2287
|
+
return position ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
2288
|
+
Primitive2.div,
|
|
2289
|
+
{
|
|
2290
|
+
"aria-hidden": true,
|
|
2291
|
+
"data-state": isVisible ? "visible" : "hidden",
|
|
2292
|
+
"data-orientation": context.orientation,
|
|
2293
|
+
...indicatorProps,
|
|
2294
|
+
ref: forwardedRef,
|
|
2295
|
+
style: {
|
|
2296
|
+
position: "absolute",
|
|
2297
|
+
...isHorizontal ? {
|
|
2298
|
+
left: 0,
|
|
2299
|
+
width: position.size + "px",
|
|
2300
|
+
transform: `translateX(${position.offset}px)`
|
|
2301
|
+
} : {
|
|
2302
|
+
top: 0,
|
|
2303
|
+
height: position.size + "px",
|
|
2304
|
+
transform: `translateY(${position.offset}px)`
|
|
2305
|
+
},
|
|
2306
|
+
...indicatorProps.style
|
|
2307
|
+
}
|
|
2308
|
+
}
|
|
2309
|
+
) : null;
|
|
2310
|
+
});
|
|
2311
|
+
var CONTENT_NAME3 = "NavigationMenuContent";
|
|
2312
|
+
var NavigationMenuContent = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2313
|
+
const { forceMount, ...contentProps } = props;
|
|
2314
|
+
const context = useNavigationMenuContext(CONTENT_NAME3, props.__scopeNavigationMenu);
|
|
2315
|
+
const itemContext = useNavigationMenuItemContext(CONTENT_NAME3, props.__scopeNavigationMenu);
|
|
2316
|
+
const composedRefs = useComposedRefs(itemContext.contentRef, forwardedRef);
|
|
2317
|
+
const open = itemContext.value === context.value;
|
|
2318
|
+
const commonProps = {
|
|
2319
|
+
value: itemContext.value,
|
|
2320
|
+
triggerRef: itemContext.triggerRef,
|
|
2321
|
+
focusProxyRef: itemContext.focusProxyRef,
|
|
2322
|
+
wasEscapeCloseRef: itemContext.wasEscapeCloseRef,
|
|
2323
|
+
onContentFocusOutside: itemContext.onContentFocusOutside,
|
|
2324
|
+
onRootContentClose: itemContext.onRootContentClose,
|
|
2325
|
+
...contentProps
|
|
2326
|
+
};
|
|
2327
|
+
return !context.viewport ? /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || open, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2328
|
+
NavigationMenuContentImpl,
|
|
2329
|
+
{
|
|
2330
|
+
"data-state": getOpenState(open),
|
|
2331
|
+
...commonProps,
|
|
2332
|
+
ref: composedRefs,
|
|
2333
|
+
onPointerEnter: composeEventHandlers(props.onPointerEnter, context.onContentEnter),
|
|
2334
|
+
onPointerLeave: composeEventHandlers(
|
|
2335
|
+
props.onPointerLeave,
|
|
2336
|
+
whenMouse(context.onContentLeave)
|
|
2337
|
+
),
|
|
2338
|
+
style: {
|
|
2339
|
+
// Prevent interaction when animating out
|
|
2340
|
+
pointerEvents: !open && context.isRootMenu ? "none" : void 0,
|
|
2341
|
+
...commonProps.style
|
|
2342
|
+
}
|
|
2343
|
+
}
|
|
2344
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsx(ViewportContentMounter, { forceMount, ...commonProps, ref: composedRefs });
|
|
2345
|
+
});
|
|
2346
|
+
NavigationMenuContent.displayName = CONTENT_NAME3;
|
|
2347
|
+
var ViewportContentMounter = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2348
|
+
const context = useNavigationMenuContext(CONTENT_NAME3, props.__scopeNavigationMenu);
|
|
2349
|
+
const { onViewportContentChange, onViewportContentRemove } = context;
|
|
2350
|
+
useLayoutEffect2(() => {
|
|
2351
|
+
onViewportContentChange(props.value, {
|
|
2352
|
+
ref: forwardedRef,
|
|
2353
|
+
...props
|
|
2354
|
+
});
|
|
2355
|
+
}, [props, forwardedRef, onViewportContentChange]);
|
|
2356
|
+
useLayoutEffect2(() => {
|
|
2357
|
+
return () => onViewportContentRemove(props.value);
|
|
2358
|
+
}, [props.value, onViewportContentRemove]);
|
|
2359
|
+
return null;
|
|
2360
|
+
});
|
|
2361
|
+
var ROOT_CONTENT_DISMISS = "navigationMenu.rootContentDismiss";
|
|
2362
|
+
var NavigationMenuContentImpl = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2363
|
+
const {
|
|
2364
|
+
__scopeNavigationMenu,
|
|
2365
|
+
value,
|
|
2366
|
+
triggerRef,
|
|
2367
|
+
focusProxyRef,
|
|
2368
|
+
wasEscapeCloseRef,
|
|
2369
|
+
onRootContentClose,
|
|
2370
|
+
onContentFocusOutside,
|
|
2371
|
+
...contentProps
|
|
2372
|
+
} = props;
|
|
2373
|
+
const context = useNavigationMenuContext(CONTENT_NAME3, __scopeNavigationMenu);
|
|
2374
|
+
const ref = React37__namespace.useRef(null);
|
|
2375
|
+
const composedRefs = useComposedRefs(ref, forwardedRef);
|
|
2376
|
+
const triggerId = makeTriggerId(context.baseId, value);
|
|
2377
|
+
const contentId = makeContentId(context.baseId, value);
|
|
2378
|
+
const getItems = useCollection2(__scopeNavigationMenu);
|
|
2379
|
+
const prevMotionAttributeRef = React37__namespace.useRef(null);
|
|
2380
|
+
const { onItemDismiss } = context;
|
|
2381
|
+
React37__namespace.useEffect(() => {
|
|
2382
|
+
const content = ref.current;
|
|
2383
|
+
if (context.isRootMenu && content) {
|
|
2384
|
+
const handleClose = () => {
|
|
2385
|
+
onItemDismiss();
|
|
2386
|
+
onRootContentClose();
|
|
2387
|
+
if (content.contains(document.activeElement)) triggerRef.current?.focus();
|
|
2388
|
+
};
|
|
2389
|
+
content.addEventListener(ROOT_CONTENT_DISMISS, handleClose);
|
|
2390
|
+
return () => content.removeEventListener(ROOT_CONTENT_DISMISS, handleClose);
|
|
2391
|
+
}
|
|
2392
|
+
}, [context.isRootMenu, props.value, triggerRef, onItemDismiss, onRootContentClose]);
|
|
2393
|
+
const motionAttribute = React37__namespace.useMemo(() => {
|
|
2394
|
+
const items = getItems();
|
|
2395
|
+
const values = items.map((item) => item.value);
|
|
2396
|
+
if (context.dir === "rtl") values.reverse();
|
|
2397
|
+
const index = values.indexOf(context.value);
|
|
2398
|
+
const prevIndex = values.indexOf(context.previousValue);
|
|
2399
|
+
const isSelected = value === context.value;
|
|
2400
|
+
const wasSelected = prevIndex === values.indexOf(value);
|
|
2401
|
+
if (!isSelected && !wasSelected) return prevMotionAttributeRef.current;
|
|
2402
|
+
const attribute = (() => {
|
|
2403
|
+
if (index !== prevIndex) {
|
|
2404
|
+
if (isSelected && prevIndex !== -1) return index > prevIndex ? "from-end" : "from-start";
|
|
2405
|
+
if (wasSelected && index !== -1) return index > prevIndex ? "to-start" : "to-end";
|
|
2406
|
+
}
|
|
2407
|
+
return null;
|
|
2408
|
+
})();
|
|
2409
|
+
prevMotionAttributeRef.current = attribute;
|
|
2410
|
+
return attribute;
|
|
2411
|
+
}, [context.previousValue, context.value, context.dir, getItems, value]);
|
|
2412
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FocusGroup, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2413
|
+
DismissableLayer,
|
|
2414
|
+
{
|
|
2415
|
+
id: contentId,
|
|
2416
|
+
"aria-labelledby": triggerId,
|
|
2417
|
+
"data-motion": motionAttribute,
|
|
2418
|
+
"data-orientation": context.orientation,
|
|
2419
|
+
...contentProps,
|
|
2420
|
+
ref: composedRefs,
|
|
2421
|
+
disableOutsidePointerEvents: false,
|
|
2422
|
+
onDismiss: () => {
|
|
2423
|
+
const rootContentDismissEvent = new Event(ROOT_CONTENT_DISMISS, {
|
|
2424
|
+
bubbles: true,
|
|
2425
|
+
cancelable: true
|
|
2426
|
+
});
|
|
2427
|
+
ref.current?.dispatchEvent(rootContentDismissEvent);
|
|
2428
|
+
},
|
|
2429
|
+
onFocusOutside: composeEventHandlers(props.onFocusOutside, (event) => {
|
|
2430
|
+
onContentFocusOutside();
|
|
2431
|
+
const target = event.target;
|
|
2432
|
+
if (context.rootNavigationMenu?.contains(target)) event.preventDefault();
|
|
2433
|
+
}),
|
|
2434
|
+
onPointerDownOutside: composeEventHandlers(props.onPointerDownOutside, (event) => {
|
|
2435
|
+
const target = event.target;
|
|
2436
|
+
const isTrigger = getItems().some((item) => item.ref.current?.contains(target));
|
|
2437
|
+
const isRootViewport = context.isRootMenu && context.viewport?.contains(target);
|
|
2438
|
+
if (isTrigger || isRootViewport || !context.isRootMenu) event.preventDefault();
|
|
2439
|
+
}),
|
|
2440
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
2441
|
+
const isMetaKey = event.altKey || event.ctrlKey || event.metaKey;
|
|
2442
|
+
const isTabKey = event.key === "Tab" && !isMetaKey;
|
|
2443
|
+
if (isTabKey) {
|
|
2444
|
+
const candidates = getTabbableCandidates(event.currentTarget);
|
|
2445
|
+
const focusedElement = document.activeElement;
|
|
2446
|
+
const index = candidates.findIndex((candidate) => candidate === focusedElement);
|
|
2447
|
+
const isMovingBackwards = event.shiftKey;
|
|
2448
|
+
const nextCandidates = isMovingBackwards ? candidates.slice(0, index).reverse() : candidates.slice(index + 1, candidates.length);
|
|
2449
|
+
if (focusFirst(nextCandidates)) {
|
|
2450
|
+
event.preventDefault();
|
|
2451
|
+
} else {
|
|
2452
|
+
focusProxyRef.current?.focus();
|
|
2453
|
+
}
|
|
2454
|
+
}
|
|
2455
|
+
}),
|
|
2456
|
+
onEscapeKeyDown: composeEventHandlers(props.onEscapeKeyDown, (_event) => {
|
|
2457
|
+
wasEscapeCloseRef.current = true;
|
|
2458
|
+
})
|
|
2459
|
+
}
|
|
2460
|
+
) });
|
|
2461
|
+
});
|
|
2462
|
+
var VIEWPORT_NAME = "NavigationMenuViewport";
|
|
2463
|
+
var NavigationMenuViewport = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2464
|
+
const { forceMount, ...viewportProps } = props;
|
|
2465
|
+
const context = useNavigationMenuContext(VIEWPORT_NAME, props.__scopeNavigationMenu);
|
|
2466
|
+
const open = Boolean(context.value);
|
|
2467
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || open, children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuViewportImpl, { ...viewportProps, ref: forwardedRef }) });
|
|
2468
|
+
});
|
|
2469
|
+
NavigationMenuViewport.displayName = VIEWPORT_NAME;
|
|
2470
|
+
var NavigationMenuViewportImpl = React37__namespace.forwardRef((props, forwardedRef) => {
|
|
2471
|
+
const { __scopeNavigationMenu, children, ...viewportImplProps } = props;
|
|
2472
|
+
const context = useNavigationMenuContext(VIEWPORT_NAME, __scopeNavigationMenu);
|
|
2473
|
+
const composedRefs = useComposedRefs(forwardedRef, context.onViewportChange);
|
|
2474
|
+
const viewportContentContext = useViewportContentContext(
|
|
2475
|
+
CONTENT_NAME3,
|
|
2476
|
+
props.__scopeNavigationMenu
|
|
2477
|
+
);
|
|
2478
|
+
const [size, setSize] = React37__namespace.useState(null);
|
|
2479
|
+
const [content, setContent] = React37__namespace.useState(null);
|
|
2480
|
+
const viewportWidth = size ? size?.width + "px" : void 0;
|
|
2481
|
+
const viewportHeight = size ? size?.height + "px" : void 0;
|
|
2482
|
+
const open = Boolean(context.value);
|
|
2483
|
+
const activeContentValue = open ? context.value : context.previousValue;
|
|
2484
|
+
const handleSizeChange = () => {
|
|
2485
|
+
if (content) setSize({ width: content.offsetWidth, height: content.offsetHeight });
|
|
2486
|
+
};
|
|
2487
|
+
useResizeObserver(content, handleSizeChange);
|
|
2488
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2489
|
+
Primitive2.div,
|
|
2490
|
+
{
|
|
2491
|
+
"data-state": getOpenState(open),
|
|
2492
|
+
"data-orientation": context.orientation,
|
|
2493
|
+
...viewportImplProps,
|
|
2494
|
+
ref: composedRefs,
|
|
2495
|
+
style: {
|
|
2496
|
+
// Prevent interaction when animating out
|
|
2497
|
+
pointerEvents: !open && context.isRootMenu ? "none" : void 0,
|
|
2498
|
+
["--radix-navigation-menu-viewport-width"]: viewportWidth,
|
|
2499
|
+
["--radix-navigation-menu-viewport-height"]: viewportHeight,
|
|
2500
|
+
...viewportImplProps.style
|
|
2501
|
+
},
|
|
2502
|
+
onPointerEnter: composeEventHandlers(props.onPointerEnter, context.onContentEnter),
|
|
2503
|
+
onPointerLeave: composeEventHandlers(props.onPointerLeave, whenMouse(context.onContentLeave)),
|
|
2504
|
+
children: Array.from(viewportContentContext.items).map(([value, { ref, forceMount, ...props2 }]) => {
|
|
2505
|
+
const isActive = activeContentValue === value;
|
|
2506
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Presence, { present: forceMount || isActive, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2507
|
+
NavigationMenuContentImpl,
|
|
2508
|
+
{
|
|
2509
|
+
...props2,
|
|
2510
|
+
ref: composeRefs(ref, (node) => {
|
|
2511
|
+
if (isActive && node) setContent(node);
|
|
2512
|
+
})
|
|
2513
|
+
}
|
|
2514
|
+
) }, value);
|
|
2515
|
+
})
|
|
2516
|
+
}
|
|
2517
|
+
);
|
|
2518
|
+
});
|
|
2519
|
+
var FOCUS_GROUP_NAME = "FocusGroup";
|
|
2520
|
+
var FocusGroup = React37__namespace.forwardRef(
|
|
2521
|
+
(props, forwardedRef) => {
|
|
2522
|
+
const { __scopeNavigationMenu, ...groupProps } = props;
|
|
2523
|
+
const context = useNavigationMenuContext(FOCUS_GROUP_NAME, __scopeNavigationMenu);
|
|
2524
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FocusGroupCollection.Provider, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ jsxRuntime.jsx(FocusGroupCollection.Slot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ jsxRuntime.jsx(Primitive2.div, { dir: context.dir, ...groupProps, ref: forwardedRef }) }) });
|
|
2525
|
+
}
|
|
2526
|
+
);
|
|
2527
|
+
var ARROW_KEYS = ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"];
|
|
2528
|
+
var FOCUS_GROUP_ITEM_NAME = "FocusGroupItem";
|
|
2529
|
+
var FocusGroupItem = React37__namespace.forwardRef(
|
|
2530
|
+
(props, forwardedRef) => {
|
|
2531
|
+
const { __scopeNavigationMenu, ...groupProps } = props;
|
|
2532
|
+
const getItems = useFocusGroupCollection(__scopeNavigationMenu);
|
|
2533
|
+
const context = useNavigationMenuContext(FOCUS_GROUP_ITEM_NAME, __scopeNavigationMenu);
|
|
2534
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FocusGroupCollection.ItemSlot, { scope: __scopeNavigationMenu, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2535
|
+
Primitive2.button,
|
|
2536
|
+
{
|
|
2537
|
+
...groupProps,
|
|
2538
|
+
ref: forwardedRef,
|
|
2539
|
+
onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
|
|
2540
|
+
const isFocusNavigationKey = ["Home", "End", ...ARROW_KEYS].includes(event.key);
|
|
2541
|
+
if (isFocusNavigationKey) {
|
|
2542
|
+
let candidateNodes = getItems().map((item) => item.ref.current);
|
|
2543
|
+
const prevItemKey = context.dir === "rtl" ? "ArrowRight" : "ArrowLeft";
|
|
2544
|
+
const prevKeys = [prevItemKey, "ArrowUp", "End"];
|
|
2545
|
+
if (prevKeys.includes(event.key)) candidateNodes.reverse();
|
|
2546
|
+
if (ARROW_KEYS.includes(event.key)) {
|
|
2547
|
+
const currentIndex = candidateNodes.indexOf(event.currentTarget);
|
|
2548
|
+
candidateNodes = candidateNodes.slice(currentIndex + 1);
|
|
2549
|
+
}
|
|
2550
|
+
setTimeout(() => focusFirst(candidateNodes));
|
|
2551
|
+
event.preventDefault();
|
|
2552
|
+
}
|
|
2553
|
+
})
|
|
2554
|
+
}
|
|
2555
|
+
) });
|
|
2556
|
+
}
|
|
2557
|
+
);
|
|
2558
|
+
function getTabbableCandidates(container) {
|
|
2559
|
+
const nodes = [];
|
|
2560
|
+
const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
|
|
2561
|
+
acceptNode: (node) => {
|
|
2562
|
+
const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
|
|
2563
|
+
if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP;
|
|
2564
|
+
return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
|
|
2565
|
+
}
|
|
2566
|
+
});
|
|
2567
|
+
while (walker.nextNode()) nodes.push(walker.currentNode);
|
|
2568
|
+
return nodes;
|
|
2569
|
+
}
|
|
2570
|
+
function focusFirst(candidates) {
|
|
2571
|
+
const previouslyFocusedElement = document.activeElement;
|
|
2572
|
+
return candidates.some((candidate) => {
|
|
2573
|
+
if (candidate === previouslyFocusedElement) return true;
|
|
2574
|
+
candidate.focus();
|
|
2575
|
+
return document.activeElement !== previouslyFocusedElement;
|
|
2576
|
+
});
|
|
2577
|
+
}
|
|
2578
|
+
function removeFromTabOrder(candidates) {
|
|
2579
|
+
candidates.forEach((candidate) => {
|
|
2580
|
+
candidate.dataset.tabindex = candidate.getAttribute("tabindex") || "";
|
|
2581
|
+
candidate.setAttribute("tabindex", "-1");
|
|
2582
|
+
});
|
|
2583
|
+
return () => {
|
|
2584
|
+
candidates.forEach((candidate) => {
|
|
2585
|
+
const prevTabIndex = candidate.dataset.tabindex;
|
|
2586
|
+
candidate.setAttribute("tabindex", prevTabIndex);
|
|
2587
|
+
});
|
|
2588
|
+
};
|
|
2589
|
+
}
|
|
2590
|
+
function useResizeObserver(element, onResize) {
|
|
2591
|
+
const handleResize = useCallbackRef(onResize);
|
|
2592
|
+
useLayoutEffect2(() => {
|
|
2593
|
+
let rAF = 0;
|
|
2594
|
+
if (element) {
|
|
2595
|
+
const resizeObserver = new ResizeObserver(() => {
|
|
2596
|
+
cancelAnimationFrame(rAF);
|
|
2597
|
+
rAF = window.requestAnimationFrame(handleResize);
|
|
2598
|
+
});
|
|
2599
|
+
resizeObserver.observe(element);
|
|
2600
|
+
return () => {
|
|
2601
|
+
window.cancelAnimationFrame(rAF);
|
|
2602
|
+
resizeObserver.unobserve(element);
|
|
2603
|
+
};
|
|
2604
|
+
}
|
|
2605
|
+
}, [element, handleResize]);
|
|
2606
|
+
}
|
|
2607
|
+
function getOpenState(open) {
|
|
2608
|
+
return open ? "open" : "closed";
|
|
2609
|
+
}
|
|
2610
|
+
function makeTriggerId(baseId, value) {
|
|
2611
|
+
return `${baseId}-trigger-${value}`;
|
|
2612
|
+
}
|
|
2613
|
+
function makeContentId(baseId, value) {
|
|
2614
|
+
return `${baseId}-content-${value}`;
|
|
2615
|
+
}
|
|
2616
|
+
function whenMouse(handler) {
|
|
2617
|
+
return (event) => event.pointerType === "mouse" ? handler(event) : void 0;
|
|
2618
|
+
}
|
|
2619
|
+
var Root23 = NavigationMenu;
|
|
2620
|
+
var List2 = NavigationMenuList;
|
|
2621
|
+
var Item2 = NavigationMenuItem;
|
|
2622
|
+
var Trigger3 = NavigationMenuTrigger;
|
|
2623
|
+
var Link2 = NavigationMenuLink;
|
|
2624
|
+
var Indicator = NavigationMenuIndicator;
|
|
2625
|
+
var Content3 = NavigationMenuContent;
|
|
2626
|
+
var Viewport = NavigationMenuViewport;
|
|
2627
|
+
var NavigationMenu2 = React37__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2628
|
+
Root23,
|
|
2629
|
+
{
|
|
2630
|
+
ref,
|
|
2631
|
+
className: cn(
|
|
2632
|
+
"relative z-10 flex max-w-max flex-1 items-center justify-center",
|
|
2633
|
+
className
|
|
2634
|
+
),
|
|
2635
|
+
...props,
|
|
2636
|
+
children: [
|
|
2637
|
+
children,
|
|
2638
|
+
/* @__PURE__ */ jsxRuntime.jsx(NavigationMenuViewport2, {})
|
|
2639
|
+
]
|
|
2640
|
+
}
|
|
2641
|
+
));
|
|
2642
|
+
NavigationMenu2.displayName = Root23.displayName;
|
|
2643
|
+
var NavigationMenuList2 = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2644
|
+
List2,
|
|
2645
|
+
{
|
|
2646
|
+
ref,
|
|
2647
|
+
className: cn(
|
|
2648
|
+
"group flex flex-1 list-none items-center justify-center space-x-1",
|
|
2649
|
+
className
|
|
2650
|
+
),
|
|
2651
|
+
...props
|
|
2652
|
+
}
|
|
2653
|
+
));
|
|
2654
|
+
NavigationMenuList2.displayName = List2.displayName;
|
|
2655
|
+
var NavigationMenuItem2 = Item2;
|
|
2656
|
+
var navigationMenuTriggerStyle = classVarianceAuthority.cva(
|
|
2657
|
+
"group inline-flex h-10 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-[var(--black)] transition-colors hover:bg-gray-100 hover:text-[var(--black)] focus:bg-gray-100 focus:text-[var(--black)] focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-[var(--black)] data-[state=open]:bg-gray-100/50 data-[state=open]:hover:bg-gray-100 data-[state=open]:focus:bg-gray-100"
|
|
2658
|
+
);
|
|
2659
|
+
var NavigationMenuTrigger2 = React37__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2660
|
+
Trigger3,
|
|
2661
|
+
{
|
|
2662
|
+
ref,
|
|
2663
|
+
className: cn(navigationMenuTriggerStyle(), "group", className),
|
|
2664
|
+
...props,
|
|
2665
|
+
children: [
|
|
2666
|
+
children,
|
|
2667
|
+
" ",
|
|
2668
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2669
|
+
react.CaretDown,
|
|
2670
|
+
{
|
|
2671
|
+
className: "relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
|
|
2672
|
+
"aria-hidden": "true"
|
|
2673
|
+
}
|
|
2674
|
+
)
|
|
2675
|
+
]
|
|
2676
|
+
}
|
|
2677
|
+
));
|
|
2678
|
+
NavigationMenuTrigger2.displayName = Trigger3.displayName;
|
|
2679
|
+
var NavigationMenuContent2 = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2680
|
+
Content3,
|
|
2681
|
+
{
|
|
2682
|
+
ref,
|
|
2683
|
+
className: cn(
|
|
2684
|
+
"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
|
|
2685
|
+
className
|
|
2686
|
+
),
|
|
2687
|
+
...props
|
|
2688
|
+
}
|
|
2689
|
+
));
|
|
2690
|
+
NavigationMenuContent2.displayName = Content3.displayName;
|
|
2691
|
+
var NavigationMenuLink2 = Link2;
|
|
2692
|
+
var NavigationMenuViewport2 = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2693
|
+
Viewport,
|
|
2694
|
+
{
|
|
2695
|
+
className: cn(
|
|
2696
|
+
"origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-gray-200 bg-white text-[var(--black)] shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
|
|
2697
|
+
className
|
|
2698
|
+
),
|
|
2699
|
+
ref,
|
|
2700
|
+
...props
|
|
2701
|
+
}
|
|
2702
|
+
) }));
|
|
2703
|
+
NavigationMenuViewport2.displayName = Viewport.displayName;
|
|
2704
|
+
var NavigationMenuIndicator2 = React37__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2705
|
+
Indicator,
|
|
2706
|
+
{
|
|
2707
|
+
ref,
|
|
2708
|
+
className: cn(
|
|
2709
|
+
"top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
|
|
2710
|
+
className
|
|
2711
|
+
),
|
|
2712
|
+
...props,
|
|
2713
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-gray-200 shadow-md" })
|
|
2714
|
+
}
|
|
2715
|
+
));
|
|
2716
|
+
NavigationMenuIndicator2.displayName = Indicator.displayName;
|
|
571
2717
|
|
|
572
2718
|
Object.defineProperty(exports, "AddressBook", {
|
|
573
2719
|
enumerable: true,
|
|
@@ -853,6 +2999,10 @@ Object.defineProperty(exports, "XLogo", {
|
|
|
853
2999
|
enumerable: true,
|
|
854
3000
|
get: function () { return react.XLogo; }
|
|
855
3001
|
});
|
|
3002
|
+
exports.Accordion = Accordion2;
|
|
3003
|
+
exports.AccordionContent = AccordionContent2;
|
|
3004
|
+
exports.AccordionItem = AccordionItem2;
|
|
3005
|
+
exports.AccordionTrigger = AccordionTrigger2;
|
|
856
3006
|
exports.Badge = Badge;
|
|
857
3007
|
exports.Button = Button;
|
|
858
3008
|
exports.Card = Card;
|
|
@@ -862,8 +3012,19 @@ exports.CardFooter = CardFooter;
|
|
|
862
3012
|
exports.CardHeader = CardHeader;
|
|
863
3013
|
exports.CardTitle = CardTitle;
|
|
864
3014
|
exports.IconBox = IconBox;
|
|
3015
|
+
exports.Input = Input;
|
|
3016
|
+
exports.Label = Label2;
|
|
865
3017
|
exports.Logo = Logo;
|
|
3018
|
+
exports.NavigationMenu = NavigationMenu2;
|
|
3019
|
+
exports.NavigationMenuContent = NavigationMenuContent2;
|
|
3020
|
+
exports.NavigationMenuIndicator = NavigationMenuIndicator2;
|
|
3021
|
+
exports.NavigationMenuItem = NavigationMenuItem2;
|
|
3022
|
+
exports.NavigationMenuLink = NavigationMenuLink2;
|
|
3023
|
+
exports.NavigationMenuList = NavigationMenuList2;
|
|
3024
|
+
exports.NavigationMenuTrigger = NavigationMenuTrigger2;
|
|
3025
|
+
exports.NavigationMenuViewport = NavigationMenuViewport2;
|
|
866
3026
|
exports.Progress = Progress;
|
|
3027
|
+
exports.Separator = Separator2;
|
|
867
3028
|
exports.Sheet = Sheet;
|
|
868
3029
|
exports.SheetClose = SheetClose;
|
|
869
3030
|
exports.SheetContent = SheetContent;
|
|
@@ -876,10 +3037,12 @@ exports.SheetTitle = SheetTitle;
|
|
|
876
3037
|
exports.SheetTrigger = SheetTrigger;
|
|
877
3038
|
exports.Stat = Stat;
|
|
878
3039
|
exports.Tag = Tag;
|
|
3040
|
+
exports.Textarea = Textarea;
|
|
879
3041
|
exports.badgeVariants = badgeVariants;
|
|
880
3042
|
exports.buttonVariants = buttonVariants;
|
|
881
3043
|
exports.cn = cn;
|
|
882
3044
|
exports.iconBoxVariants = iconBoxVariants;
|
|
3045
|
+
exports.navigationMenuTriggerStyle = navigationMenuTriggerStyle;
|
|
883
3046
|
exports.progressVariants = progressVariants;
|
|
884
3047
|
exports.statVariants = statVariants;
|
|
885
3048
|
exports.tagVariants = tagVariants;
|