@dilipod/ui 0.2.0 → 0.2.1

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