@postxl/ui-components 1.4.1 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -2,6 +2,13 @@ import { clsx } from "clsx";
2
2
  import { twMerge } from "tailwind-merge";
3
3
  import * as AccordionPrimitive from "@radix-ui/react-accordion";
4
4
  import { ArrowLeftIcon, ArrowRightIcon, CalendarIcon, CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, Cross1Icon, Cross2Icon, DotFilledIcon, DotsHorizontalIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, DragHandleDots2Icon, EnterFullScreenIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
5
+ import * as React$59 from "react";
6
+ import * as React$58 from "react";
7
+ import * as React$57 from "react";
8
+ import * as React$56 from "react";
9
+ import * as React$55 from "react";
10
+ import * as React$54 from "react";
11
+ import * as React$53 from "react";
5
12
  import * as React$52 from "react";
6
13
  import * as React$51 from "react";
7
14
  import * as React$50 from "react";
@@ -63,7 +70,7 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
63
70
  import { DayPicker, getDefaultClassNames } from "react-day-picker";
64
71
  import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
65
72
  import useEmblaCarousel from "embla-carousel-react";
66
- import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
73
+ import { BaselineIcon, BookmarkIcon, CalendarIcon as CalendarIcon$1, Check, CheckIcon as CheckIcon$1, CheckSquareIcon, ChevronDownIcon as ChevronDownIcon$1, ChevronRightIcon as ChevronRightIcon$1, ChevronUpIcon as ChevronUpIcon$1, CircleCheckIcon, CopyIcon, EraserIcon, EyeIcon, EyeOffIcon, FilterX, GlobeIcon, GripHorizontalIcon, HashIcon, ListChecksIcon, ListIcon, ListTreeIcon, MessageSquareIcon, MinusIcon, PanelLeftIcon, PanelRightIcon, PencilIcon, PinIcon, PinOffIcon, PlusIcon, SaveIcon, Settings2Icon, SquareIcon, TagIcon, TextInitialIcon, Trash2Icon, TrashIcon, XIcon } from "lucide-react";
67
74
  import * as CollapsePrimitive from "@radix-ui/react-collapsible";
68
75
  import { Command as Command$1 } from "cmdk";
69
76
  import * as DialogPrimitive from "@radix-ui/react-dialog";
@@ -90,6 +97,7 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
90
97
  import * as ResizablePrimitive from "react-resizable-panels";
91
98
  import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
92
99
  import * as SliderPrimitive from "@radix-ui/react-slider";
100
+ import { useDirection } from "@radix-ui/react-direction";
93
101
  import * as SwitchPrimitives from "@radix-ui/react-switch";
94
102
  import * as TabsPrimitive from "@radix-ui/react-tabs";
95
103
  import * as TogglePrimitive from "@radix-ui/react-toggle";
@@ -118,13 +126,13 @@ function testId(baseId, suffix) {
118
126
  //#endregion
119
127
  //#region src/accordion/accordion.tsx
120
128
  const Accordion = AccordionPrimitive.Root;
121
- const AccordionItem = React$52.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
129
+ const AccordionItem = React$59.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Item, {
122
130
  ref,
123
131
  className: cn("border-b", className),
124
132
  ...props
125
133
  }));
126
134
  AccordionItem.displayName = "AccordionItem";
127
- const AccordionTrigger = React$52.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
135
+ const AccordionTrigger = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, {
128
136
  className: "flex",
129
137
  children: /* @__PURE__ */ jsxs(AccordionPrimitive.Trigger, {
130
138
  ref,
@@ -134,7 +142,7 @@ const AccordionTrigger = React$52.forwardRef(({ className, children,...props },
134
142
  })
135
143
  }));
136
144
  AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
137
- const AccordionContent = React$52.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
145
+ const AccordionContent = React$59.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
138
146
  ref,
139
147
  className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
140
148
  ...props,
@@ -154,21 +162,21 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
154
162
  } },
155
163
  defaultVariants: { variant: "default" }
156
164
  });
157
- const Alert = React$51.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
165
+ const Alert = React$58.forwardRef(({ className, variant,...props }, ref) => /* @__PURE__ */ jsx("div", {
158
166
  ref,
159
167
  role: "alert",
160
168
  className: cn(alertVariants({ variant }), className),
161
169
  ...props
162
170
  }));
163
171
  Alert.displayName = "Alert";
164
- const AlertTitle = React$51.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
172
+ const AlertTitle = React$58.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h5", {
165
173
  ref,
166
174
  className: cn("mb-1 font-medium leading-none tracking-tight", className),
167
175
  ...props,
168
176
  children
169
177
  }));
170
178
  AlertTitle.displayName = "AlertTitle";
171
- const AlertDescription = React$51.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
179
+ const AlertDescription = React$58.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
172
180
  ref,
173
181
  className: cn("text-sm [&_p]:leading-relaxed", className),
174
182
  ...props
@@ -228,13 +236,13 @@ function Button({ className, variant, size, asChild = false, __e2e_test_id__,...
228
236
  const AlertDialog = AlertDialogPrimitive.Root;
229
237
  const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
230
238
  const AlertDialogPortal = AlertDialogPrimitive.Portal;
231
- const AlertDialogOverlay = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
239
+ const AlertDialogOverlay = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Overlay, {
232
240
  className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
233
241
  ...props,
234
242
  ref
235
243
  }));
236
244
  AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
237
- const AlertDialogContent = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
245
+ const AlertDialogContent = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialogPrimitive.Content, {
238
246
  ref,
239
247
  className: cn("fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg", className),
240
248
  ...props
@@ -250,25 +258,25 @@ const AlertDialogFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div",
250
258
  ...props
251
259
  });
252
260
  AlertDialogFooter.displayName = "AlertDialogFooter";
253
- const AlertDialogTitle = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
261
+ const AlertDialogTitle = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Title, {
254
262
  ref,
255
263
  className: cn("text-lg font-semibold", className),
256
264
  ...props
257
265
  }));
258
266
  AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
259
- const AlertDialogDescription = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
267
+ const AlertDialogDescription = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Description, {
260
268
  ref,
261
269
  className: cn("text-sm text-muted-foreground", className),
262
270
  ...props
263
271
  }));
264
272
  AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
265
- const AlertDialogAction = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
273
+ const AlertDialogAction = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Action, {
266
274
  ref,
267
275
  className: cn(buttonVariants(), className),
268
276
  ...props
269
277
  }));
270
278
  AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
271
- const AlertDialogCancel = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
279
+ const AlertDialogCancel = React$57.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AlertDialogPrimitive.Cancel, {
272
280
  ref,
273
281
  className: cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className),
274
282
  ...props
@@ -277,19 +285,19 @@ AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
277
285
 
278
286
  //#endregion
279
287
  //#region src/avatar/avatar.tsx
280
- const Avatar = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
288
+ const Avatar = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Root, {
281
289
  ref,
282
290
  className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
283
291
  ...props
284
292
  }));
285
293
  Avatar.displayName = AvatarPrimitive.Root.displayName;
286
- const AvatarImage = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
294
+ const AvatarImage = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Image, {
287
295
  ref,
288
296
  className: cn("aspect-square h-full w-full", className),
289
297
  ...props
290
298
  }));
291
299
  AvatarImage.displayName = AvatarPrimitive.Image.displayName;
292
- const AvatarFallback = React$49.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
300
+ const AvatarFallback = React$56.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(AvatarPrimitive.Fallback, {
293
301
  ref,
294
302
  className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className),
295
303
  ...props
@@ -335,25 +343,25 @@ function Badge({ className, variant, size, asChild = false,...props }) {
335
343
 
336
344
  //#endregion
337
345
  //#region src/breadcrumb/breadcrumb.tsx
338
- const Breadcrumb = React$48.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
346
+ const Breadcrumb = React$55.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", {
339
347
  ref,
340
348
  "aria-label": "breadcrumb",
341
349
  ...props
342
350
  }));
343
351
  Breadcrumb.displayName = "Breadcrumb";
344
- const BreadcrumbList = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
352
+ const BreadcrumbList = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ol", {
345
353
  ref,
346
354
  className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className),
347
355
  ...props
348
356
  }));
349
357
  BreadcrumbList.displayName = "BreadcrumbList";
350
- const BreadcrumbItem = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
358
+ const BreadcrumbItem = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
351
359
  ref,
352
360
  className: cn("inline-flex items-center gap-1.5", className),
353
361
  ...props
354
362
  }));
355
363
  BreadcrumbItem.displayName = "BreadcrumbItem";
356
- const BreadcrumbLink = React$48.forwardRef(({ asChild, className,...props }, ref) => {
364
+ const BreadcrumbLink = React$55.forwardRef(({ asChild, className,...props }, ref) => {
357
365
  const Comp = asChild ? Slot : "a";
358
366
  return /* @__PURE__ */ jsx(Comp, {
359
367
  ref,
@@ -362,7 +370,7 @@ const BreadcrumbLink = React$48.forwardRef(({ asChild, className,...props }, ref
362
370
  });
363
371
  });
364
372
  BreadcrumbLink.displayName = "BreadcrumbLink";
365
- const BreadcrumbPage = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
373
+ const BreadcrumbPage = React$55.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("span", {
366
374
  ref,
367
375
  "aria-disabled": "true",
368
376
  "aria-current": "page",
@@ -392,8 +400,8 @@ BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
392
400
  //#region src/calendar/calendar.tsx
393
401
  function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", showYearNavigation = false, formatters, components, __e2e_test_id__,...props }) {
394
402
  const defaultClassNames = getDefaultClassNames();
395
- const [rangeSelectionStep, setRangeSelectionStep] = React$47.useState("from");
396
- const handleDayClick = React$47.useCallback((day, modifiers, e) => {
403
+ const [rangeSelectionStep, setRangeSelectionStep] = React$54.useState("from");
404
+ const handleDayClick = React$54.useCallback((day, modifiers, e) => {
397
405
  if (props.mode === "range") {
398
406
  const range = props.selected;
399
407
  if (rangeSelectionStep === "from") {
@@ -423,8 +431,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
423
431
  fromMonth = props.startMonth ?? new Date(nowYear - 100, 0);
424
432
  toMonth = props.endMonth ?? new Date(nowYear + 100, 11);
425
433
  }
426
- const [currentMonth, setCurrentMonth] = React$47.useState(props.defaultMonth ?? props.month ?? new Date());
427
- React$47.useEffect(() => {
434
+ const [currentMonth, setCurrentMonth] = React$54.useState(props.defaultMonth ?? props.month ?? new Date());
435
+ React$54.useEffect(() => {
428
436
  if (props.month) setCurrentMonth(props.month);
429
437
  }, [props.month]);
430
438
  const addMonths = (date, months) => {
@@ -568,8 +576,8 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
568
576
  }
569
577
  function CalendarDayButton({ className, day, modifiers,...props }) {
570
578
  const defaultClassNames = getDefaultClassNames();
571
- const ref = React$47.useRef(null);
572
- React$47.useEffect(() => {
579
+ const ref = React$54.useRef(null);
580
+ React$54.useEffect(() => {
573
581
  if (modifiers.focused) ref.current?.focus();
574
582
  }, [modifiers.focused]);
575
583
  return /* @__PURE__ */ jsx(Button, {
@@ -588,38 +596,38 @@ function CalendarDayButton({ className, day, modifiers,...props }) {
588
596
 
589
597
  //#endregion
590
598
  //#region src/card/card.tsx
591
- const Card = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
599
+ const Card = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
592
600
  ref,
593
601
  className: cn("rounded-xl border bg-card text-card-foreground shadow", className),
594
602
  ...props
595
603
  }));
596
604
  Card.displayName = "Card";
597
- const CardHeader = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
605
+ const CardHeader = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
598
606
  ref,
599
607
  className: cn("flex flex-col space-y-1.5 p-6", className),
600
608
  ...props
601
609
  }));
602
610
  CardHeader.displayName = "CardHeader";
603
- const CardTitle = React$46.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
611
+ const CardTitle = React$53.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsx("h3", {
604
612
  ref,
605
613
  className: cn("font-semibold leading-none tracking-tight", className),
606
614
  ...props,
607
615
  children
608
616
  }));
609
617
  CardTitle.displayName = "CardTitle";
610
- const CardDescription = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
618
+ const CardDescription = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("p", {
611
619
  ref,
612
620
  className: cn("text-sm text-muted-foreground", className),
613
621
  ...props
614
622
  }));
615
623
  CardDescription.displayName = "CardDescription";
616
- const CardContent = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
624
+ const CardContent = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
617
625
  ref,
618
626
  className: cn("p-6 pt-0", className),
619
627
  ...props
620
628
  }));
621
629
  CardContent.displayName = "CardContent";
622
- const CardFooter = React$46.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
630
+ const CardFooter = React$53.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("div", {
623
631
  ref,
624
632
  className: cn("flex items-center p-6 pt-0", className),
625
633
  ...props
@@ -630,7 +638,7 @@ CardFooter.displayName = "CardFooter";
630
638
  //#region src/card-hover/card-hover.tsx
631
639
  const HoverCard = HoverCardPrimitive.Root;
632
640
  const HoverCardTrigger = HoverCardPrimitive.Trigger;
633
- const HoverCardContent = React$45.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
641
+ const HoverCardContent = React$52.forwardRef(({ className, align = "center", sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Content, {
634
642
  ref,
635
643
  align,
636
644
  sideOffset,
@@ -641,31 +649,31 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
641
649
 
642
650
  //#endregion
643
651
  //#region src/carousel/carousel.tsx
644
- const CarouselContext = React$44.createContext(null);
652
+ const CarouselContext = React$51.createContext(null);
645
653
  function useCarousel() {
646
- const context = React$44.useContext(CarouselContext);
654
+ const context = React$51.useContext(CarouselContext);
647
655
  if (!context) throw new Error("useCarousel must be used within a <Carousel />");
648
656
  return context;
649
657
  }
650
- const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
658
+ const Carousel = React$51.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children,...props }, ref) => {
651
659
  const [carouselRef, api] = useEmblaCarousel({
652
660
  ...opts,
653
661
  axis: orientation === "horizontal" ? "x" : "y"
654
662
  }, plugins);
655
- const [canScrollPrev, setCanScrollPrev] = React$44.useState(false);
656
- const [canScrollNext, setCanScrollNext] = React$44.useState(false);
657
- const onSelect = React$44.useCallback(() => {
663
+ const [canScrollPrev, setCanScrollPrev] = React$51.useState(false);
664
+ const [canScrollNext, setCanScrollNext] = React$51.useState(false);
665
+ const onSelect = React$51.useCallback(() => {
658
666
  if (!api) return;
659
667
  setCanScrollPrev(api.canScrollPrev());
660
668
  setCanScrollNext(api.canScrollNext());
661
669
  }, [api]);
662
- const scrollPrev = React$44.useCallback(() => {
670
+ const scrollPrev = React$51.useCallback(() => {
663
671
  api?.scrollPrev();
664
672
  }, [api]);
665
- const scrollNext = React$44.useCallback(() => {
673
+ const scrollNext = React$51.useCallback(() => {
666
674
  api?.scrollNext();
667
675
  }, [api]);
668
- const handleKeyDown = React$44.useCallback((event) => {
676
+ const handleKeyDown = React$51.useCallback((event) => {
669
677
  if (event.key === "ArrowLeft") {
670
678
  event.preventDefault();
671
679
  scrollPrev();
@@ -674,11 +682,11 @@ const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi
674
682
  scrollNext();
675
683
  }
676
684
  }, [scrollPrev, scrollNext]);
677
- React$44.useEffect(() => {
685
+ React$51.useEffect(() => {
678
686
  if (!api || !setApi) return;
679
687
  setApi(api);
680
688
  }, [api, setApi]);
681
- React$44.useEffect(() => {
689
+ React$51.useEffect(() => {
682
690
  if (!api) return;
683
691
  onSelect();
684
692
  api.on("reInit", onSelect);
@@ -719,7 +727,7 @@ const Carousel = React$44.forwardRef(({ orientation = "horizontal", opts, setApi
719
727
  });
720
728
  });
721
729
  Carousel.displayName = "Carousel";
722
- const CarouselContent = React$44.forwardRef(({ className,...props }, ref) => {
730
+ const CarouselContent = React$51.forwardRef(({ className,...props }, ref) => {
723
731
  const { carouselRef, orientation } = useCarousel();
724
732
  return /* @__PURE__ */ jsx("div", {
725
733
  ref: carouselRef,
@@ -732,7 +740,7 @@ const CarouselContent = React$44.forwardRef(({ className,...props }, ref) => {
732
740
  });
733
741
  });
734
742
  CarouselContent.displayName = "CarouselContent";
735
- const CarouselItem = React$44.forwardRef(({ className,...props }, ref) => {
743
+ const CarouselItem = React$51.forwardRef(({ className,...props }, ref) => {
736
744
  const { orientation } = useCarousel();
737
745
  return /* @__PURE__ */ jsx("div", {
738
746
  ref,
@@ -742,7 +750,7 @@ const CarouselItem = React$44.forwardRef(({ className,...props }, ref) => {
742
750
  });
743
751
  });
744
752
  CarouselItem.displayName = "CarouselItem";
745
- const CarouselPrevious = React$44.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
753
+ const CarouselPrevious = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
746
754
  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
747
755
  return /* @__PURE__ */ jsxs(Button, {
748
756
  ref,
@@ -759,7 +767,7 @@ const CarouselPrevious = React$44.forwardRef(({ className, variant = "outline",
759
767
  });
760
768
  });
761
769
  CarouselPrevious.displayName = "CarouselPrevious";
762
- const CarouselNext = React$44.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
770
+ const CarouselNext = React$51.forwardRef(({ className, variant = "outline", size = "icon",...props }, ref) => {
763
771
  const { orientation, scrollNext, canScrollNext } = useCarousel();
764
772
  return /* @__PURE__ */ jsxs(Button, {
765
773
  ref,
@@ -1209,7 +1217,7 @@ function DialogDescription({ className,...props }) {
1209
1217
 
1210
1218
  //#endregion
1211
1219
  //#region src/command-palette/command-palette.tsx
1212
- const CommandPalette = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
1220
+ const CommandPalette = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1, {
1213
1221
  ref,
1214
1222
  className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
1215
1223
  ...props
@@ -1227,7 +1235,7 @@ const CommandPaletteDialog = ({ children,...props }) => {
1227
1235
  })
1228
1236
  });
1229
1237
  };
1230
- const CommandPaletteInput = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
1238
+ const CommandPaletteInput = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsxs("div", {
1231
1239
  className: "flex items-center border-b px-3",
1232
1240
  "data-cmdk-input-wrapper": "",
1233
1241
  children: [/* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }), /* @__PURE__ */ jsx(Command$1.Input, {
@@ -1237,31 +1245,31 @@ const CommandPaletteInput = React$43.forwardRef(({ className,...props }, ref) =>
1237
1245
  })]
1238
1246
  }));
1239
1247
  CommandPaletteInput.displayName = Command$1.Input.displayName;
1240
- const CommandPaletteList = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
1248
+ const CommandPaletteList = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.List, {
1241
1249
  ref,
1242
1250
  className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
1243
1251
  ...props
1244
1252
  }));
1245
1253
  CommandPaletteList.displayName = Command$1.List.displayName;
1246
- const CommandPaletteEmpty = React$43.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
1254
+ const CommandPaletteEmpty = React$50.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, {
1247
1255
  ref,
1248
1256
  className: "py-6 text-center text-sm",
1249
1257
  ...props
1250
1258
  }));
1251
1259
  CommandPaletteEmpty.displayName = Command$1.Empty.displayName;
1252
- const CommandPaletteGroup = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
1260
+ const CommandPaletteGroup = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Group, {
1253
1261
  ref,
1254
1262
  className: cn("overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground", className),
1255
1263
  ...props
1256
1264
  }));
1257
1265
  CommandPaletteGroup.displayName = Command$1.Group.displayName;
1258
- const CommandPaletteSeparator = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
1266
+ const CommandPaletteSeparator = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, {
1259
1267
  ref,
1260
1268
  className: cn("-mx-1 h-px bg-border", className),
1261
1269
  ...props
1262
1270
  }));
1263
1271
  CommandPaletteSeparator.displayName = Command$1.Separator.displayName;
1264
- const CommandPaletteItem = React$43.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
1272
+ const CommandPaletteItem = React$50.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Command$1.Item, {
1265
1273
  ref,
1266
1274
  className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50", className),
1267
1275
  ...props
@@ -1337,8 +1345,8 @@ const frameworks = [
1337
1345
  }
1338
1346
  ];
1339
1347
  function ComboboxDemo() {
1340
- const [open, setOpen] = React$42.useState(false);
1341
- const [value, setValue] = React$42.useState("");
1348
+ const [open, setOpen] = React$49.useState(false);
1349
+ const [value, setValue] = React$49.useState("");
1342
1350
  return /* @__PURE__ */ jsxs(Popover, {
1343
1351
  open,
1344
1352
  onOpenChange: setOpen,
@@ -1578,32 +1586,32 @@ const ContextMenuGroup = ContextMenuPrimitive.Group;
1578
1586
  const ContextMenuPortal = ContextMenuPrimitive.Portal;
1579
1587
  const ContextMenuSub = ContextMenuPrimitive.Sub;
1580
1588
  const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
1581
- const ContextMenuSubTrigger = React$41.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
1589
+ const ContextMenuSubTrigger = React$48.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.SubTrigger, {
1582
1590
  ref,
1583
1591
  className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
1584
1592
  ...props,
1585
1593
  children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
1586
1594
  }));
1587
1595
  ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
1588
- const ContextMenuSubContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
1596
+ const ContextMenuSubContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.SubContent, {
1589
1597
  ref,
1590
1598
  className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
1591
1599
  ...props
1592
1600
  }));
1593
1601
  ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
1594
- const ContextMenuContent = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
1602
+ const ContextMenuContent = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(ContextMenuPrimitive.Content, {
1595
1603
  ref,
1596
1604
  className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
1597
1605
  ...props
1598
1606
  }) }));
1599
1607
  ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
1600
- const ContextMenuItem = React$41.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
1608
+ const ContextMenuItem = React$48.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Item, {
1601
1609
  ref,
1602
1610
  className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
1603
1611
  ...props
1604
1612
  }));
1605
1613
  ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
1606
- const ContextMenuCheckboxItem = React$41.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
1614
+ const ContextMenuCheckboxItem = React$48.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.CheckboxItem, {
1607
1615
  ref,
1608
1616
  className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
1609
1617
  checked,
@@ -1614,7 +1622,7 @@ const ContextMenuCheckboxItem = React$41.forwardRef(({ className, children, chec
1614
1622
  }), children]
1615
1623
  }));
1616
1624
  ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
1617
- const ContextMenuRadioItem = React$41.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
1625
+ const ContextMenuRadioItem = React$48.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ContextMenuPrimitive.RadioItem, {
1618
1626
  ref,
1619
1627
  className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
1620
1628
  ...props,
@@ -1624,13 +1632,13 @@ const ContextMenuRadioItem = React$41.forwardRef(({ className, children,...props
1624
1632
  }), children]
1625
1633
  }));
1626
1634
  ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
1627
- const ContextMenuLabel = React$41.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
1635
+ const ContextMenuLabel = React$48.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Label, {
1628
1636
  ref,
1629
1637
  className: cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className),
1630
1638
  ...props
1631
1639
  }));
1632
1640
  ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
1633
- const ContextMenuSeparator = React$41.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
1641
+ const ContextMenuSeparator = React$48.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Separator, {
1634
1642
  ref,
1635
1643
  className: cn("-mx-1 my-1 h-px bg-border", className),
1636
1644
  ...props
@@ -1775,7 +1783,7 @@ function DropdownMenuSubContent({ className,...props }) {
1775
1783
  const TooltipProvider = TooltipPrimitive.Provider;
1776
1784
  const Tooltip = TooltipPrimitive.Root;
1777
1785
  const TooltipTrigger = TooltipPrimitive.Trigger;
1778
- const TooltipContent = React$40.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
1786
+ const TooltipContent = React$47.forwardRef(({ className, sideOffset = 4,...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
1779
1787
  ref,
1780
1788
  sideOffset,
1781
1789
  className: cn("z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
@@ -2260,7 +2268,7 @@ const inputVariants = cva("file:text-foreground placeholder:text-muted-foregroun
2260
2268
  } },
2261
2269
  defaultVariants: { variant: "default" }
2262
2270
  });
2263
- const Input = React$39.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
2271
+ const Input = React$46.forwardRef(({ className, type, variant, __e2e_test_id__, onEnter, wrapperClassName,...props }, ref) => {
2264
2272
  const input = /* @__PURE__ */ jsx("input", {
2265
2273
  type,
2266
2274
  "data-slot": "input",
@@ -2342,10 +2350,10 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
2342
2350
  } },
2343
2351
  defaultVariants: { variant: "default" }
2344
2352
  });
2345
- const NumberInput = React$38.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
2346
- const [isFocused, setIsFocused] = React$38.useState(false);
2347
- const [inputString, setInputString] = React$38.useState("");
2348
- const intlFormatter = React$38.useMemo(() => {
2353
+ const NumberInput = React$45.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
2354
+ const [isFocused, setIsFocused] = React$45.useState(false);
2355
+ const [inputString, setInputString] = React$45.useState("");
2356
+ const intlFormatter = React$45.useMemo(() => {
2349
2357
  if (!format$1 || typeof format$1 === "function") return void 0;
2350
2358
  return new Intl.NumberFormat(format$1.locale, format$1.options);
2351
2359
  }, [format$1]);
@@ -2392,7 +2400,7 @@ const NumberInput = React$38.forwardRef(({ className, wrapperClassName, prefix,
2392
2400
  setInputString("");
2393
2401
  props.onBlur?.(e);
2394
2402
  };
2395
- const displayValue = React$38.useMemo(() => {
2403
+ const displayValue = React$45.useMemo(() => {
2396
2404
  if (isFocused && format$1) {
2397
2405
  if (inputString !== "") return inputString;
2398
2406
  if (controlledValue !== void 0) {
@@ -2469,20 +2477,20 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
2469
2477
  const rowOriginal = cell?.row?.original ?? {};
2470
2478
  const colCellMeta = cell?.column?.columnDef?.meta;
2471
2479
  const align = colCellMeta?.align ?? "left";
2472
- const editableResolver = React$37.useMemo(() => {
2480
+ const editableResolver = React$44.useMemo(() => {
2473
2481
  const v = colCellMeta?.editable;
2474
2482
  if (v === void 0) return () => true;
2475
2483
  return typeof v === "function" ? v : () => Boolean(v);
2476
2484
  }, [colCellMeta?.editable]);
2477
2485
  const isEditable = editableResolver(rowOriginal);
2478
- const classNameResolver = React$37.useMemo(() => {
2486
+ const classNameResolver = React$44.useMemo(() => {
2479
2487
  const v = colCellMeta?.className;
2480
2488
  return typeof v === "function" ? v : () => v;
2481
2489
  }, [colCellMeta?.className]);
2482
2490
  const colCellClassName = classNameResolver(rowOriginal);
2483
2491
  const isSearchMatch = meta?.getIsSearchMatch?.(rowIndex, columnId) ?? false;
2484
2492
  const isActiveSearchMatch = meta?.getIsActiveSearchMatch?.(rowIndex, columnId) ?? false;
2485
- const onClick = React$37.useCallback((event) => {
2493
+ const onClick = React$44.useCallback((event) => {
2486
2494
  if (!isEditing) {
2487
2495
  event.preventDefault();
2488
2496
  onClickProp?.(event);
@@ -2495,7 +2503,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
2495
2503
  isEditing,
2496
2504
  onClickProp
2497
2505
  ]);
2498
- const onContextMenu = React$37.useCallback((event) => {
2506
+ const onContextMenu = React$44.useCallback((event) => {
2499
2507
  if (!isEditing) meta?.onCellContextMenu?.(rowIndex, columnId, event);
2500
2508
  }, [
2501
2509
  meta,
@@ -2503,7 +2511,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
2503
2511
  columnId,
2504
2512
  isEditing
2505
2513
  ]);
2506
- const onMouseDown = React$37.useCallback((event) => {
2514
+ const onMouseDown = React$44.useCallback((event) => {
2507
2515
  if (!isEditing) meta?.onCellMouseDown?.(rowIndex, columnId, event);
2508
2516
  }, [
2509
2517
  meta,
@@ -2511,7 +2519,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
2511
2519
  columnId,
2512
2520
  isEditing
2513
2521
  ]);
2514
- const onMouseEnter = React$37.useCallback((event) => {
2522
+ const onMouseEnter = React$44.useCallback((event) => {
2515
2523
  if (!isEditing) meta?.onCellMouseEnter?.(rowIndex, columnId, event);
2516
2524
  }, [
2517
2525
  meta,
@@ -2519,10 +2527,10 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
2519
2527
  columnId,
2520
2528
  isEditing
2521
2529
  ]);
2522
- const onMouseUp = React$37.useCallback(() => {
2530
+ const onMouseUp = React$44.useCallback(() => {
2523
2531
  if (!isEditing) meta?.onCellMouseUp?.();
2524
2532
  }, [meta, isEditing]);
2525
- const onDoubleClick = React$37.useCallback((event) => {
2533
+ const onDoubleClick = React$44.useCallback((event) => {
2526
2534
  if (!isEditing) {
2527
2535
  event.preventDefault();
2528
2536
  if (isEditable) meta?.onCellDoubleClick?.(rowIndex, columnId);
@@ -2534,7 +2542,7 @@ function DataGridCellWrapper({ cell, table, rowIndex, columnId, isEditing, isFoc
2534
2542
  isEditing,
2535
2543
  isEditable
2536
2544
  ]);
2537
- const onKeyDown = React$37.useCallback((event) => {
2545
+ const onKeyDown = React$44.useCallback((event) => {
2538
2546
  onKeyDownProp?.(event);
2539
2547
  if (event.defaultPrevented) return;
2540
2548
  if (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End" || event.key === "PageUp" || event.key === "PageDown" || event.key === "Enter" || event.key === "Tab") return;
@@ -2748,22 +2756,22 @@ function HierarchyItem({ option, selectedValue, expandedIds, onToggleExpand, onS
2748
2756
  }
2749
2757
  function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
2750
2758
  const initialValue = cell.getValue();
2751
- const [value, setValue] = React$36.useState(initialValue);
2752
- const [open, setOpen] = React$36.useState(false);
2753
- const [searchValue, setSearchValue] = React$36.useState("");
2754
- const containerRef = React$36.useRef(null);
2755
- const inputRef = React$36.useRef(null);
2759
+ const [value, setValue] = React$43.useState(initialValue);
2760
+ const [open, setOpen] = React$43.useState(false);
2761
+ const [searchValue, setSearchValue] = React$43.useState("");
2762
+ const containerRef = React$43.useRef(null);
2763
+ const inputRef = React$43.useRef(null);
2756
2764
  const meta = table.options.meta;
2757
2765
  const cellOpts = cell.column.columnDef.meta?.cell;
2758
2766
  const sideOffset = -(containerRef.current?.clientHeight ?? 0);
2759
2767
  const options = cellOpts?.variant === "hierarchy" ? cellOpts.options : [];
2760
- const [expandedIds, setExpandedIds] = React$36.useState(() => getInitialExpandedIds(options, initialValue));
2761
- const labelMap = React$36.useMemo(() => buildLabelMap(options), [options]);
2762
- const displayLabel = React$36.useMemo(() => {
2768
+ const [expandedIds, setExpandedIds] = React$43.useState(() => getInitialExpandedIds(options, initialValue));
2769
+ const labelMap = React$43.useMemo(() => buildLabelMap(options), [options]);
2770
+ const displayLabel = React$43.useMemo(() => {
2763
2771
  if (!value) return "";
2764
2772
  return labelMap.get(value) ?? value;
2765
2773
  }, [value, labelMap]);
2766
- const toggleExpand = React$36.useCallback((id) => {
2774
+ const toggleExpand = React$43.useCallback((id) => {
2767
2775
  setExpandedIds((prev) => {
2768
2776
  const next = new Set(prev);
2769
2777
  if (next.has(id)) next.delete(id);
@@ -2771,7 +2779,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
2771
2779
  return next;
2772
2780
  });
2773
2781
  }, []);
2774
- const onOptionSelect = React$36.useCallback((option) => {
2782
+ const onOptionSelect = React$43.useCallback((option) => {
2775
2783
  const newValue = option.id;
2776
2784
  setValue(newValue);
2777
2785
  meta?.onDataUpdate?.({
@@ -2786,18 +2794,18 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
2786
2794
  rowIndex,
2787
2795
  columnId
2788
2796
  ]);
2789
- const onOpenChange = React$36.useCallback((isOpen) => {
2797
+ const onOpenChange = React$43.useCallback((isOpen) => {
2790
2798
  setOpen(isOpen);
2791
2799
  if (!isOpen) {
2792
2800
  setSearchValue("");
2793
2801
  meta?.onCellEditingStop?.();
2794
2802
  }
2795
2803
  }, [meta]);
2796
- const onOpenAutoFocus = React$36.useCallback((event) => {
2804
+ const onOpenAutoFocus = React$43.useCallback((event) => {
2797
2805
  event.preventDefault();
2798
2806
  inputRef.current?.focus();
2799
2807
  }, []);
2800
- const onWrapperKeyDown = React$36.useCallback((event) => {
2808
+ const onWrapperKeyDown = React$43.useCallback((event) => {
2801
2809
  if (isEditing) {
2802
2810
  if (event.key === "Escape") {
2803
2811
  event.preventDefault();
@@ -2817,10 +2825,10 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
2817
2825
  initialValue,
2818
2826
  meta
2819
2827
  ]);
2820
- React$36.useEffect(() => {
2828
+ React$43.useEffect(() => {
2821
2829
  setValue(initialValue);
2822
2830
  }, [initialValue]);
2823
- React$36.useEffect(() => {
2831
+ React$43.useEffect(() => {
2824
2832
  if (value) {
2825
2833
  const ancestors = getAncestorIds(options, value);
2826
2834
  if (ancestors && ancestors.length > 0) setExpandedIds((prev) => {
@@ -2830,7 +2838,7 @@ function HierarchyCell({ cell, table, rowIndex, columnId, isFocused, isEditing,
2830
2838
  });
2831
2839
  }
2832
2840
  }, [value, options]);
2833
- React$36.useEffect(() => {
2841
+ React$43.useEffect(() => {
2834
2842
  if (isEditing && !open) setOpen(true);
2835
2843
  if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
2836
2844
  }, [
@@ -2928,9 +2936,9 @@ function EditorFooter({ count, onApply, onCancel }) {
2928
2936
  });
2929
2937
  }
2930
2938
  function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel }) {
2931
- const [value, setValue] = React$35.useState("");
2932
- const inputRef = React$35.useRef(null);
2933
- const handleApply = React$35.useCallback(() => {
2939
+ const [value, setValue] = React$42.useState("");
2940
+ const inputRef = React$42.useRef(null);
2941
+ const handleApply = React$42.useCallback(() => {
2934
2942
  onApply(selectedRowIndices.map((rowIndex) => ({
2935
2943
  rowIndex,
2936
2944
  columnId,
@@ -2942,14 +2950,14 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
2942
2950
  value,
2943
2951
  onApply
2944
2952
  ]);
2945
- const onKeyDown = React$35.useCallback((e) => {
2953
+ const onKeyDown = React$42.useCallback((e) => {
2946
2954
  stopGridKeys(e);
2947
2955
  if (e.key === "Enter") {
2948
2956
  e.preventDefault();
2949
2957
  handleApply();
2950
2958
  }
2951
2959
  }, [handleApply]);
2952
- React$35.useEffect(() => {
2960
+ React$42.useEffect(() => {
2953
2961
  inputRef.current?.focus();
2954
2962
  }, []);
2955
2963
  return /* @__PURE__ */ jsxs("div", {
@@ -2971,9 +2979,9 @@ function BulkEditShortText({ columnId, selectedRowIndices, onApply, onCancel })
2971
2979
  });
2972
2980
  }
2973
2981
  function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
2974
- const [value, setValue] = React$35.useState("");
2975
- const textareaRef = React$35.useRef(null);
2976
- const handleApply = React$35.useCallback(() => {
2982
+ const [value, setValue] = React$42.useState("");
2983
+ const textareaRef = React$42.useRef(null);
2984
+ const handleApply = React$42.useCallback(() => {
2977
2985
  onApply(selectedRowIndices.map((rowIndex) => ({
2978
2986
  rowIndex,
2979
2987
  columnId,
@@ -2985,14 +2993,14 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
2985
2993
  value,
2986
2994
  onApply
2987
2995
  ]);
2988
- const onKeyDown = React$35.useCallback((e) => {
2996
+ const onKeyDown = React$42.useCallback((e) => {
2989
2997
  stopGridKeys(e);
2990
2998
  if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {
2991
2999
  e.preventDefault();
2992
3000
  handleApply();
2993
3001
  }
2994
3002
  }, [handleApply]);
2995
- React$35.useEffect(() => {
3003
+ React$42.useEffect(() => {
2996
3004
  textareaRef.current?.focus();
2997
3005
  }, []);
2998
3006
  return /* @__PURE__ */ jsxs("div", {
@@ -3015,12 +3023,12 @@ function BulkEditLongText({ columnId, selectedRowIndices, onApply, onCancel }) {
3015
3023
  });
3016
3024
  }
3017
3025
  function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
3018
- const [value, setValue] = React$35.useState(void 0);
3019
- const inputRef = React$35.useRef(null);
3026
+ const [value, setValue] = React$42.useState(void 0);
3027
+ const inputRef = React$42.useRef(null);
3020
3028
  const { min, max, step, prefix, suffix } = cell.variant === "number" ? cell : {};
3021
3029
  const stringPrefix = typeof prefix === "string" ? prefix : void 0;
3022
3030
  const stringSuffix = typeof suffix === "string" ? suffix : void 0;
3023
- const handleApply = React$35.useCallback(() => {
3031
+ const handleApply = React$42.useCallback(() => {
3024
3032
  const numValue = value ?? null;
3025
3033
  onApply(selectedRowIndices.map((rowIndex) => ({
3026
3034
  rowIndex,
@@ -3033,14 +3041,14 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
3033
3041
  value,
3034
3042
  onApply
3035
3043
  ]);
3036
- const onKeyDown = React$35.useCallback((e) => {
3044
+ const onKeyDown = React$42.useCallback((e) => {
3037
3045
  stopGridKeys(e);
3038
3046
  if (e.key === "Enter") {
3039
3047
  e.preventDefault();
3040
3048
  handleApply();
3041
3049
  }
3042
3050
  }, [handleApply]);
3043
- React$35.useEffect(() => {
3051
+ React$42.useEffect(() => {
3044
3052
  inputRef.current?.focus();
3045
3053
  }, []);
3046
3054
  return /* @__PURE__ */ jsxs("div", {
@@ -3069,8 +3077,8 @@ function BulkEditNumber({ cell, columnId, selectedRowIndices, onApply, onCancel
3069
3077
  }
3070
3078
  function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
3071
3079
  const { options: arrayOptions, optionsMap, optionsRenderer } = cell.variant === "select" ? cell : {};
3072
- const inputRef = React$35.useRef(null);
3073
- const options = React$35.useMemo(() => {
3080
+ const inputRef = React$42.useRef(null);
3081
+ const options = React$42.useMemo(() => {
3074
3082
  if (arrayOptions) return arrayOptions.map((opt) => ({
3075
3083
  value: opt.value,
3076
3084
  data: opt.label
@@ -3081,7 +3089,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
3081
3089
  }));
3082
3090
  return [];
3083
3091
  }, [arrayOptions, optionsMap]);
3084
- const handleSelect = React$35.useCallback((newValue) => {
3092
+ const handleSelect = React$42.useCallback((newValue) => {
3085
3093
  onApply(selectedRowIndices.map((rowIndex) => ({
3086
3094
  rowIndex,
3087
3095
  columnId,
@@ -3092,7 +3100,7 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
3092
3100
  columnId,
3093
3101
  onApply
3094
3102
  ]);
3095
- React$35.useEffect(() => {
3103
+ React$42.useEffect(() => {
3096
3104
  inputRef.current?.focus();
3097
3105
  }, []);
3098
3106
  return /* @__PURE__ */ jsxs("div", {
@@ -3116,10 +3124,10 @@ function BulkEditSelect({ cell, columnId, selectedRowIndices, onApply, onCancel
3116
3124
  }
3117
3125
  function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
3118
3126
  const { options: arrayOptions, optionsMap } = cell.variant === "multi-select" ? cell : {};
3119
- const [selectedValues, setSelectedValues] = React$35.useState([]);
3120
- const [searchValue, setSearchValue] = React$35.useState("");
3121
- const inputRef = React$35.useRef(null);
3122
- const options = React$35.useMemo(() => {
3127
+ const [selectedValues, setSelectedValues] = React$42.useState([]);
3128
+ const [searchValue, setSearchValue] = React$42.useState("");
3129
+ const inputRef = React$42.useRef(null);
3130
+ const options = React$42.useMemo(() => {
3123
3131
  if (arrayOptions) return arrayOptions;
3124
3132
  if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
3125
3133
  value: id,
@@ -3127,12 +3135,12 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
3127
3135
  }));
3128
3136
  return [];
3129
3137
  }, [arrayOptions, optionsMap]);
3130
- const toggleValue = React$35.useCallback((value) => {
3138
+ const toggleValue = React$42.useCallback((value) => {
3131
3139
  setSelectedValues((prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]);
3132
3140
  setSearchValue("");
3133
3141
  queueMicrotask(() => inputRef.current?.focus());
3134
3142
  }, []);
3135
- const handleApply = React$35.useCallback(() => {
3143
+ const handleApply = React$42.useCallback(() => {
3136
3144
  onApply(selectedRowIndices.map((rowIndex) => ({
3137
3145
  rowIndex,
3138
3146
  columnId,
@@ -3144,7 +3152,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
3144
3152
  selectedValues,
3145
3153
  onApply
3146
3154
  ]);
3147
- React$35.useEffect(() => {
3155
+ React$42.useEffect(() => {
3148
3156
  inputRef.current?.focus();
3149
3157
  }, []);
3150
3158
  return /* @__PURE__ */ jsxs("div", {
@@ -3210,7 +3218,7 @@ function BulkEditMultiSelect({ cell, columnId, selectedRowIndices, onApply, onCa
3210
3218
  });
3211
3219
  }
3212
3220
  function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
3213
- const setAll = React$35.useCallback((val) => {
3221
+ const setAll = React$42.useCallback((val) => {
3214
3222
  onApply(selectedRowIndices.map((rowIndex) => ({
3215
3223
  rowIndex,
3216
3224
  columnId,
@@ -3247,10 +3255,10 @@ function BulkEditCheckbox({ columnId, selectedRowIndices, onApply, onCancel }) {
3247
3255
  }
3248
3256
  function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCancel }) {
3249
3257
  const options = cell.variant === "hierarchy" ? cell.options : [];
3250
- const inputRef = React$35.useRef(null);
3251
- const [searchValue, setSearchValue] = React$35.useState("");
3252
- const [expandedIds, setExpandedIds] = React$35.useState(() => getInitialExpandedIds(options, null));
3253
- const toggleExpand = React$35.useCallback((id) => {
3258
+ const inputRef = React$42.useRef(null);
3259
+ const [searchValue, setSearchValue] = React$42.useState("");
3260
+ const [expandedIds, setExpandedIds] = React$42.useState(() => getInitialExpandedIds(options, null));
3261
+ const toggleExpand = React$42.useCallback((id) => {
3254
3262
  setExpandedIds((prev) => {
3255
3263
  const next = new Set(prev);
3256
3264
  if (next.has(id)) next.delete(id);
@@ -3258,7 +3266,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
3258
3266
  return next;
3259
3267
  });
3260
3268
  }, []);
3261
- const handleSelect = React$35.useCallback((option) => {
3269
+ const handleSelect = React$42.useCallback((option) => {
3262
3270
  onApply(selectedRowIndices.map((rowIndex) => ({
3263
3271
  rowIndex,
3264
3272
  columnId,
@@ -3269,7 +3277,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
3269
3277
  columnId,
3270
3278
  onApply
3271
3279
  ]);
3272
- React$35.useEffect(() => {
3280
+ React$42.useEffect(() => {
3273
3281
  inputRef.current?.focus();
3274
3282
  }, []);
3275
3283
  return /* @__PURE__ */ jsxs("div", {
@@ -3300,7 +3308,7 @@ function BulkEditHierarchy({ cell, columnId, selectedRowIndices, onApply, onCanc
3300
3308
  });
3301
3309
  }
3302
3310
  function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
3303
- const onDateSelect = React$35.useCallback((date) => {
3311
+ const onDateSelect = React$42.useCallback((date) => {
3304
3312
  if (!date) return;
3305
3313
  const year = date.getFullYear();
3306
3314
  const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -3332,28 +3340,28 @@ function BulkEditDate({ columnId, selectedRowIndices, onApply, onCancel }) {
3332
3340
  });
3333
3341
  }
3334
3342
  function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }) {
3335
- const selectedRowIndices = React$35.useMemo(() => {
3343
+ const selectedRowIndices = React$42.useMemo(() => {
3336
3344
  if (!open) return [];
3337
3345
  const allRows = table.getRowModel().rows;
3338
3346
  const indices = [];
3339
3347
  for (let i = 0; i < allRows.length; i++) if (allRows[i].getIsSelected()) indices.push(i);
3340
3348
  return indices;
3341
3349
  }, [open, table]);
3342
- React$35.useEffect(() => {
3350
+ React$42.useEffect(() => {
3343
3351
  if (open && selectedRowIndices.length === 0) onOpenChange(false);
3344
3352
  }, [
3345
3353
  open,
3346
3354
  selectedRowIndices.length,
3347
3355
  onOpenChange
3348
3356
  ]);
3349
- const onApply = React$35.useCallback((updates) => {
3357
+ const onApply = React$42.useCallback((updates) => {
3350
3358
  table.options.meta?.onDataUpdate?.(updates);
3351
3359
  onOpenChange(false);
3352
3360
  }, [table, onOpenChange]);
3353
- const onCancel = React$35.useCallback(() => {
3361
+ const onCancel = React$42.useCallback(() => {
3354
3362
  onOpenChange(false);
3355
3363
  }, [onOpenChange]);
3356
- const onOpenAutoFocus = React$35.useCallback((e) => {
3364
+ const onOpenAutoFocus = React$42.useCallback((e) => {
3357
3365
  e.preventDefault();
3358
3366
  }, []);
3359
3367
  const editorProps = {
@@ -3363,7 +3371,7 @@ function BulkEditPopover({ table, cell, columnId, open, onOpenChange, children }
3363
3371
  onApply,
3364
3372
  onCancel
3365
3373
  };
3366
- const editor = React$35.useMemo(() => {
3374
+ const editor = React$42.useMemo(() => {
3367
3375
  switch (cell.variant) {
3368
3376
  case "short-text": return /* @__PURE__ */ jsx(BulkEditShortText, { ...editorProps });
3369
3377
  case "long-text": return /* @__PURE__ */ jsx(BulkEditLongText, { ...editorProps });
@@ -3441,8 +3449,8 @@ function getColumnVariant(variant) {
3441
3449
  }
3442
3450
  }
3443
3451
  function DataGridColumnHeader({ header, table, className, onPointerDown,...props }) {
3444
- const [open, setOpen] = React$34.useState(false);
3445
- const [bulkEditOpen, setBulkEditOpen] = React$34.useState(false);
3452
+ const [open, setOpen] = React$41.useState(false);
3453
+ const [bulkEditOpen, setBulkEditOpen] = React$41.useState(false);
3446
3454
  const column = header.column;
3447
3455
  const label = column.columnDef.meta?.label ? column.columnDef.meta.label : typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
3448
3456
  const isAnyColumnResizing = table.getState().columnSizingInfo.isResizingColumn;
@@ -3451,13 +3459,13 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
3451
3459
  const enableBulkEdit = column.columnDef.meta?.enableBulkEdit ?? false;
3452
3460
  const selectedRowCount = Object.keys(table.getState().rowSelection).length;
3453
3461
  const showBulkEdit = enableBulkEdit && selectedRowCount > 1 && cellVariant != null && EditableCellVariantsSet.has(cellVariant?.variant);
3454
- React$34.useEffect(() => {
3462
+ React$41.useEffect(() => {
3455
3463
  if (!showBulkEdit) setBulkEditOpen(false);
3456
3464
  }, [showBulkEdit]);
3457
3465
  const pinnedPosition = column.getIsPinned();
3458
3466
  const isPinnedLeft = pinnedPosition === "left";
3459
3467
  const isPinnedRight = pinnedPosition === "right";
3460
- const onSortingChange = React$34.useCallback((direction) => {
3468
+ const onSortingChange = React$41.useCallback((direction) => {
3461
3469
  table.setSorting((prev) => {
3462
3470
  const existingSortIndex = prev.findIndex((sort) => sort.id === column.id);
3463
3471
  const newSort = {
@@ -3471,19 +3479,19 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
3471
3479
  } else return [...prev, newSort];
3472
3480
  });
3473
3481
  }, [column.id, table]);
3474
- const onSortRemove = React$34.useCallback(() => {
3482
+ const onSortRemove = React$41.useCallback(() => {
3475
3483
  table.setSorting((prev) => prev.filter((sort) => sort.id !== column.id));
3476
3484
  }, [column.id, table]);
3477
- const onLeftPin = React$34.useCallback(() => {
3485
+ const onLeftPin = React$41.useCallback(() => {
3478
3486
  column.pin("left");
3479
3487
  }, [column]);
3480
- const onRightPin = React$34.useCallback(() => {
3488
+ const onRightPin = React$41.useCallback(() => {
3481
3489
  column.pin("right");
3482
3490
  }, [column]);
3483
- const onUnpin = React$34.useCallback(() => {
3491
+ const onUnpin = React$41.useCallback(() => {
3484
3492
  column.pin(false);
3485
3493
  }, [column]);
3486
- const onTriggerPointerDown = React$34.useCallback((event) => {
3494
+ const onTriggerPointerDown = React$41.useCallback((event) => {
3487
3495
  onPointerDown?.(event);
3488
3496
  if (event.defaultPrevented) return;
3489
3497
  if (event.button !== 0) return;
@@ -3610,7 +3618,7 @@ function DataGridColumnHeader({ header, table, className, onPointerDown,...props
3610
3618
  })
3611
3619
  ] });
3612
3620
  }
3613
- const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, next) => {
3621
+ const DataGridColumnResizer = React$41.memo(DataGridColumnResizerImpl, (prev, next) => {
3614
3622
  const prevColumn = prev.header.column;
3615
3623
  const nextColumn = next.header.column;
3616
3624
  if (prevColumn.getIsResizing() !== nextColumn.getIsResizing() || prevColumn.getSize() !== nextColumn.getSize()) return false;
@@ -3619,7 +3627,7 @@ const DataGridColumnResizer = React$34.memo(DataGridColumnResizerImpl, (prev, ne
3619
3627
  });
3620
3628
  function DataGridColumnResizerImpl({ header, table, label }) {
3621
3629
  const defaultColumnDef = table._getDefaultColumnDef();
3622
- const onDoubleClick = React$34.useCallback(() => {
3630
+ const onDoubleClick = React$41.useCallback(() => {
3623
3631
  header.column.resetSize();
3624
3632
  }, [header.column]);
3625
3633
  return /* @__PURE__ */ jsx("div", {
@@ -3728,7 +3736,7 @@ function DataGridContextMenu({ table }) {
3728
3736
  onRowsDelete
3729
3737
  });
3730
3738
  }
3731
- const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
3739
+ const ContextMenu$1 = React$40.memo(ContextMenuImpl, (prev, next) => {
3732
3740
  if (prev.contextMenu.open !== next.contextMenu.open) return false;
3733
3741
  if (!next.contextMenu.open) return true;
3734
3742
  if (prev.contextMenu.x !== next.contextMenu.x) return false;
@@ -3739,7 +3747,7 @@ const ContextMenu$1 = React$33.memo(ContextMenuImpl, (prev, next) => {
3739
3747
  return true;
3740
3748
  });
3741
3749
  function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenChange, selectionState, onDataUpdate, onRowsDelete }) {
3742
- const triggerStyle = React$33.useMemo(() => ({
3750
+ const triggerStyle = React$40.useMemo(() => ({
3743
3751
  position: "fixed",
3744
3752
  left: `${contextMenu.x}px`,
3745
3753
  top: `${contextMenu.y}px`,
@@ -3752,11 +3760,11 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
3752
3760
  pointerEvents: "none",
3753
3761
  opacity: 0
3754
3762
  }), [contextMenu.x, contextMenu.y]);
3755
- const onCloseAutoFocus = React$33.useCallback((event) => {
3763
+ const onCloseAutoFocus = React$40.useCallback((event) => {
3756
3764
  event.preventDefault();
3757
3765
  dataGridRef?.current?.focus();
3758
3766
  }, [dataGridRef]);
3759
- const onCopy = React$33.useCallback(async () => {
3767
+ const onCopy = React$40.useCallback(async () => {
3760
3768
  if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
3761
3769
  const rows = table.getRowModel().rows;
3762
3770
  const columnIds = [];
@@ -3795,7 +3803,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
3795
3803
  await navigator.clipboard.writeText(tsvData);
3796
3804
  toast$1.success(`${selectionState.selectedCells.size} cell${selectionState.selectedCells.size !== 1 ? "s" : ""} copied`);
3797
3805
  }, [table, selectionState]);
3798
- const canClear = React$33.useMemo(() => {
3806
+ const canClear = React$40.useMemo(() => {
3799
3807
  if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return false;
3800
3808
  const visibleCols = table.getVisibleLeafColumns();
3801
3809
  const rows = table.getRowModel().rows;
@@ -3812,7 +3820,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
3812
3820
  }
3813
3821
  return true;
3814
3822
  }, [selectionState, table]);
3815
- const onClear = React$33.useCallback(() => {
3823
+ const onClear = React$40.useCallback(() => {
3816
3824
  if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
3817
3825
  if (!canClear) return;
3818
3826
  const updates = [];
@@ -3831,7 +3839,7 @@ function ContextMenuImpl({ table, dataGridRef, contextMenu, onContextMenuOpenCha
3831
3839
  selectionState,
3832
3840
  canClear
3833
3841
  ]);
3834
- const onDelete = React$33.useCallback(async () => {
3842
+ const onDelete = React$40.useCallback(async () => {
3835
3843
  if (!selectionState?.selectedCells || selectionState.selectedCells.size === 0) return;
3836
3844
  const rowIndices = new Set();
3837
3845
  for (const cellKey of selectionState.selectedCells) {
@@ -3908,12 +3916,12 @@ function composeRefs(...refs) {
3908
3916
  * Accepts callback refs and RefObject(s)
3909
3917
  */
3910
3918
  function useComposedRefs(...refs) {
3911
- return React$32.useCallback(composeRefs(...refs), refs);
3919
+ return React$39.useCallback(composeRefs(...refs), refs);
3912
3920
  }
3913
3921
 
3914
3922
  //#endregion
3915
3923
  //#region src/data-grid/data-grid-row.tsx
3916
- const DataGridRow = React$31.memo(DataGridRowImpl, (prev, next) => {
3924
+ const DataGridRow = React$38.memo(DataGridRowImpl, (prev, next) => {
3917
3925
  if (prev.row.id !== next.row.id) return false;
3918
3926
  if (prev.row.original !== next.row.original) return false;
3919
3927
  const prevRowIndex = prev.virtualRowIndex;
@@ -3945,7 +3953,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
3945
3953
  }
3946
3954
  });
3947
3955
  const isRowSelected = row.getIsSelected();
3948
- const handleRowClick = React$31.useCallback((event) => {
3956
+ const handleRowClick = React$38.useCallback((event) => {
3949
3957
  const target = event.target;
3950
3958
  if (target.closest("input, button, [role=\"checkbox\"]")) return;
3951
3959
  if (event.detail === 1) onRowClick?.(virtualRowIndex);
@@ -3974,7 +3982,7 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
3974
3982
  "data-highlighted": isCellFocused ? "" : void 0,
3975
3983
  "data-slot": "grid-cell",
3976
3984
  tabIndex: -1,
3977
- className: cn({ "border-r": cell.column.id !== "select" }),
3985
+ className: cn("shrink-0 overflow-hidden", { "border-r": cell.column.id !== "select" }),
3978
3986
  style: {
3979
3987
  ...getCommonPinningStyles({ column: cell.column }),
3980
3988
  width: `calc(var(--col-${cell.column.id}-size) * 1px)`
@@ -3995,20 +4003,20 @@ function DataGridRowImpl({ row, virtualRowIndex, virtualStart, rowVirtualizer, r
3995
4003
  * prop or avoid re-executing effects when passed as a dependency
3996
4004
  */
3997
4005
  function useCallbackRef(callback) {
3998
- const callbackRef = React$30.useRef(callback);
3999
- React$30.useEffect(() => {
4006
+ const callbackRef = React$37.useRef(callback);
4007
+ React$37.useEffect(() => {
4000
4008
  callbackRef.current = callback;
4001
4009
  });
4002
- return React$30.useMemo(() => (...args) => callbackRef.current?.(...args), []);
4010
+ return React$37.useMemo(() => (...args) => callbackRef.current?.(...args), []);
4003
4011
  }
4004
4012
 
4005
4013
  //#endregion
4006
4014
  //#region src/hooks/use-debounced-callback.ts
4007
4015
  function useDebouncedCallback(callback, delay) {
4008
4016
  const handleCallback = useCallbackRef(callback);
4009
- const debounceTimerRef = React$29.useRef(0);
4010
- React$29.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
4011
- const setValue = React$29.useCallback((...args) => {
4017
+ const debounceTimerRef = React$36.useRef(0);
4018
+ React$36.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
4019
+ const setValue = React$36.useCallback((...args) => {
4012
4020
  window.clearTimeout(debounceTimerRef.current);
4013
4021
  debounceTimerRef.current = window.setTimeout(() => handleCallback(...args), delay);
4014
4022
  }, [handleCallback, delay]);
@@ -4017,7 +4025,7 @@ function useDebouncedCallback(callback, delay) {
4017
4025
 
4018
4026
  //#endregion
4019
4027
  //#region src/data-grid/data-grid-search.tsx
4020
- const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
4028
+ const DataGridSearch = React$35.memo(DataGridSearchImpl, (prev, next) => {
4021
4029
  if (prev.searchOpen !== next.searchOpen) return false;
4022
4030
  if (!next.searchOpen) return true;
4023
4031
  if (prev.searchQuery !== next.searchQuery || prev.matchIndex !== next.matchIndex) return false;
@@ -4031,13 +4039,13 @@ const DataGridSearch = React$28.memo(DataGridSearchImpl, (prev, next) => {
4031
4039
  return true;
4032
4040
  });
4033
4041
  function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpenChange, searchQuery, onSearchQueryChange, onSearch, onNavigateToNextMatch, onNavigateToPrevMatch }) {
4034
- const inputRef = React$28.useRef(null);
4035
- React$28.useEffect(() => {
4042
+ const inputRef = React$35.useRef(null);
4043
+ React$35.useEffect(() => {
4036
4044
  if (searchOpen) requestAnimationFrame(() => {
4037
4045
  inputRef.current?.focus();
4038
4046
  });
4039
4047
  }, [searchOpen]);
4040
- React$28.useEffect(() => {
4048
+ React$35.useEffect(() => {
4041
4049
  if (!searchOpen) return;
4042
4050
  function onEscape(event) {
4043
4051
  if (event.key === "Escape") {
@@ -4048,7 +4056,7 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
4048
4056
  document.addEventListener("keydown", onEscape);
4049
4057
  return () => document.removeEventListener("keydown", onEscape);
4050
4058
  }, [searchOpen, onSearchOpenChange]);
4051
- const onKeyDown = React$28.useCallback((event) => {
4059
+ const onKeyDown = React$35.useCallback((event) => {
4052
4060
  event.stopPropagation();
4053
4061
  if (event.key === "Enter") {
4054
4062
  event.preventDefault();
@@ -4059,20 +4067,20 @@ function DataGridSearchImpl({ searchMatches, matchIndex, searchOpen, onSearchOpe
4059
4067
  const debouncedSearch = useDebouncedCallback((query) => {
4060
4068
  onSearch(query);
4061
4069
  }, 150);
4062
- const onChange = React$28.useCallback((event) => {
4070
+ const onChange = React$35.useCallback((event) => {
4063
4071
  const value = event.target.value;
4064
4072
  onSearchQueryChange(value);
4065
4073
  debouncedSearch(value);
4066
4074
  }, [onSearchQueryChange, debouncedSearch]);
4067
- const onTriggerPointerDown = React$28.useCallback((event) => {
4075
+ const onTriggerPointerDown = React$35.useCallback((event) => {
4068
4076
  const target = event.target;
4069
4077
  if (!(target instanceof HTMLElement)) return;
4070
4078
  if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
4071
4079
  if (event.button === 0 && event.ctrlKey === false && event.pointerType === "mouse" && !(event.target instanceof HTMLInputElement)) event.preventDefault();
4072
4080
  }, []);
4073
- const onPrevMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
4074
- const onNextMatchPointerDown = React$28.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
4075
- const onClose = React$28.useCallback(() => {
4081
+ const onPrevMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
4082
+ const onNextMatchPointerDown = React$35.useCallback((event) => onTriggerPointerDown(event), [onTriggerPointerDown]);
4083
+ const onClose = React$35.useCallback(() => {
4076
4084
  onSearchOpenChange(false);
4077
4085
  }, [onSearchOpenChange]);
4078
4086
  if (!searchOpen) return null;
@@ -4153,15 +4161,15 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
4153
4161
  const visibleColumnIds = table.getVisibleLeafColumns().map((c) => c.id).join(",");
4154
4162
  const pinningState = table.getState().columnPinning;
4155
4163
  const columnPinningKey = `${(pinningState.left ?? []).join(",")}|${(pinningState.right ?? []).join(",")}`;
4156
- const prevVisibleColumnIdsRef = React$27.useRef(visibleColumnIds);
4164
+ const prevVisibleColumnIdsRef = React$34.useRef(visibleColumnIds);
4157
4165
  if (prevVisibleColumnIdsRef.current !== visibleColumnIds) {
4158
4166
  rowMapRef.current.clear();
4159
4167
  prevVisibleColumnIdsRef.current = visibleColumnIds;
4160
4168
  }
4161
- const onGridContextMenu = React$27.useCallback((event) => {
4169
+ const onGridContextMenu = React$34.useCallback((event) => {
4162
4170
  event.preventDefault();
4163
4171
  }, []);
4164
- const onAddRowKeyDown = React$27.useCallback(async (event) => {
4172
+ const onAddRowKeyDown = React$34.useCallback(async (event) => {
4165
4173
  if (!onRowAdd) return;
4166
4174
  if (event.key === "Enter" || event.key === "") {
4167
4175
  event.preventDefault();
@@ -4218,7 +4226,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
4218
4226
  "aria-sort": currentSort?.desc === false ? "ascending" : currentSort?.desc === true ? "descending" : isSortable ? "none" : void 0,
4219
4227
  "data-slot": "grid-header-cell",
4220
4228
  tabIndex: -1,
4221
- className: cn("relative", { "border-r": header.column.id !== "select" }),
4229
+ className: cn("relative shrink-0", { "border-r": header.column.id !== "select" }),
4222
4230
  style: {
4223
4231
  ...getCommonPinningStyles({ column: header.column }),
4224
4232
  width: `calc(var(--header-${header.id}-size) * 1px)`
@@ -4248,7 +4256,7 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
4248
4256
  transform: `translateY(${virtualItem.start}px)`
4249
4257
  },
4250
4258
  children: table.getVisibleLeafColumns().map((col) => /* @__PURE__ */ jsx("div", {
4251
- className: "px-3",
4259
+ className: "shrink-0 px-3",
4252
4260
  style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
4253
4261
  children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" })
4254
4262
  }, col.id))
@@ -4313,17 +4321,17 @@ function DataGrid({ dataGridRef, headerRef, rowMapRef, footerRef, table, rowVirt
4313
4321
  function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }) {
4314
4322
  const cellValue = cell.getValue();
4315
4323
  const cellValueAsBoolean = Boolean(cellValue);
4316
- const [value, setValue] = React$26.useState(cellValueAsBoolean);
4317
- const containerRef = React$26.useRef(null);
4324
+ const [value, setValue] = React$33.useState(cellValueAsBoolean);
4325
+ const containerRef = React$33.useRef(null);
4318
4326
  const meta = table.options.meta;
4319
4327
  const colMeta = cell.column.columnDef.meta;
4320
- const editableResolver = React$26.useMemo(() => {
4328
+ const editableResolver = React$33.useMemo(() => {
4321
4329
  const v = colMeta?.editable;
4322
4330
  if (v === void 0) return () => true;
4323
4331
  return typeof v === "function" ? v : () => Boolean(v);
4324
4332
  }, [colMeta?.editable]);
4325
4333
  const isEditable = editableResolver(cell.row.original);
4326
- const onCheckedChange = React$26.useCallback((checked) => {
4334
+ const onCheckedChange = React$33.useCallback((checked) => {
4327
4335
  setValue(checked);
4328
4336
  meta?.onDataUpdate?.({
4329
4337
  rowIndex,
@@ -4335,7 +4343,7 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
4335
4343
  rowIndex,
4336
4344
  columnId
4337
4345
  ]);
4338
- const onWrapperKeyDown = React$26.useCallback((event) => {
4346
+ const onWrapperKeyDown = React$33.useCallback((event) => {
4339
4347
  if (!isEditable) return;
4340
4348
  if (isFocused && (event.key === "" || event.key === "Enter")) {
4341
4349
  event.preventDefault();
@@ -4348,17 +4356,17 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
4348
4356
  onCheckedChange,
4349
4357
  isEditable
4350
4358
  ]);
4351
- React$26.useEffect(() => {
4359
+ React$33.useEffect(() => {
4352
4360
  setValue(cellValueAsBoolean);
4353
4361
  }, [cellValueAsBoolean]);
4354
- React$26.useEffect(() => {
4362
+ React$33.useEffect(() => {
4355
4363
  if (isFocused && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
4356
4364
  }, [
4357
4365
  isFocused,
4358
4366
  meta?.searchOpen,
4359
4367
  meta?.isScrolling
4360
4368
  ]);
4361
- const onWrapperClick = React$26.useCallback((event) => {
4369
+ const onWrapperClick = React$33.useCallback((event) => {
4362
4370
  if (!isEditable) return;
4363
4371
  if (isFocused) {
4364
4372
  event.preventDefault();
@@ -4371,13 +4379,13 @@ function CheckboxCell({ cell, table, rowIndex, columnId, isFocused, isSelected }
4371
4379
  onCheckedChange,
4372
4380
  isEditable
4373
4381
  ]);
4374
- const onCheckboxClick = React$26.useCallback((event) => {
4382
+ const onCheckboxClick = React$33.useCallback((event) => {
4375
4383
  event.stopPropagation();
4376
4384
  }, []);
4377
- const onCheckboxMouseDown = React$26.useCallback((event) => {
4385
+ const onCheckboxMouseDown = React$33.useCallback((event) => {
4378
4386
  event.stopPropagation();
4379
4387
  }, []);
4380
- const onCheckboxDoubleClick = React$26.useCallback((event) => {
4388
+ const onCheckboxDoubleClick = React$33.useCallback((event) => {
4381
4389
  event.stopPropagation();
4382
4390
  }, []);
4383
4391
  return /* @__PURE__ */ jsx(DataGridCellWrapper, {
@@ -4432,20 +4440,20 @@ function formatDateToISOString(date) {
4432
4440
  }
4433
4441
  function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
4434
4442
  const initialValue = cell.getValue();
4435
- const [value, setValue] = React$25.useState(parseToLocalDate(initialValue));
4436
- const [open, setOpen] = React$25.useState(false);
4437
- const containerRef = React$25.useRef(null);
4438
- const hasStoppedRef = React$25.useRef(false);
4443
+ const [value, setValue] = React$32.useState(parseToLocalDate(initialValue));
4444
+ const [open, setOpen] = React$32.useState(false);
4445
+ const containerRef = React$32.useRef(null);
4446
+ const hasStoppedRef = React$32.useRef(false);
4439
4447
  const meta = table.options.meta;
4440
- const prevInitialValueRef = React$25.useRef(initialValue);
4448
+ const prevInitialValueRef = React$32.useRef(initialValue);
4441
4449
  if (initialValue !== prevInitialValueRef.current) {
4442
4450
  prevInitialValueRef.current = initialValue;
4443
4451
  setValue(parseToLocalDate(initialValue));
4444
4452
  }
4445
- React$25.useEffect(() => {
4453
+ React$32.useEffect(() => {
4446
4454
  if (isEditing) hasStoppedRef.current = false;
4447
4455
  }, [isEditing]);
4448
- const onDateSelect = React$25.useCallback((date) => {
4456
+ const onDateSelect = React$32.useCallback((date) => {
4449
4457
  if (!date) return;
4450
4458
  setValue(date);
4451
4459
  meta?.onDataUpdate?.({
@@ -4461,14 +4469,14 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
4461
4469
  rowIndex,
4462
4470
  columnId
4463
4471
  ]);
4464
- const onOpenChange = React$25.useCallback((isOpen) => {
4472
+ const onOpenChange = React$32.useCallback((isOpen) => {
4465
4473
  setOpen(isOpen);
4466
4474
  if (!isOpen && isEditing && !hasStoppedRef.current) {
4467
4475
  hasStoppedRef.current = true;
4468
4476
  meta?.onCellEditingStop?.();
4469
4477
  }
4470
4478
  }, [isEditing, meta]);
4471
- const onWrapperKeyDown = React$25.useCallback((event) => {
4479
+ const onWrapperKeyDown = React$32.useCallback((event) => {
4472
4480
  if (isEditing) {
4473
4481
  if (event.key === "Escape") {
4474
4482
  event.preventDefault();
@@ -4488,10 +4496,10 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
4488
4496
  initialValue,
4489
4497
  meta
4490
4498
  ]);
4491
- React$25.useEffect(() => {
4499
+ React$32.useEffect(() => {
4492
4500
  setOpen(isEditing);
4493
4501
  }, [isEditing]);
4494
- React$25.useEffect(() => {
4502
+ React$32.useEffect(() => {
4495
4503
  if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
4496
4504
  }, [
4497
4505
  isFocused,
@@ -4543,7 +4551,7 @@ function DateCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSel
4543
4551
  //#region src/data-grid/cell-variants/gantt-cell.tsx
4544
4552
  function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
4545
4553
  const initialValue = cell.getValue();
4546
- const containerRef = React$24.useRef(null);
4554
+ const containerRef = React$31.useRef(null);
4547
4555
  const cellOpts = cell.column.columnDef.meta?.cell;
4548
4556
  const ts = cellOpts?.dateRangeFrom ?? cellOpts?.timelineStart;
4549
4557
  const te = cellOpts?.dateRangeTo ?? cellOpts?.timelineEnd;
@@ -4582,19 +4590,19 @@ function GanttCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSe
4582
4590
  //#region src/data-grid/cell-variants/long-text-cell.tsx
4583
4591
  function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
4584
4592
  const initialValue = cell.getValue();
4585
- const [value, setValue] = React$23.useState(initialValue ?? "");
4586
- const [open, setOpen] = React$23.useState(false);
4587
- const textareaRef = React$23.useRef(null);
4588
- const containerRef = React$23.useRef(null);
4589
- const hasSubmittedRef = React$23.useRef(false);
4593
+ const [value, setValue] = React$30.useState(initialValue ?? "");
4594
+ const [open, setOpen] = React$30.useState(false);
4595
+ const textareaRef = React$30.useRef(null);
4596
+ const containerRef = React$30.useRef(null);
4597
+ const hasSubmittedRef = React$30.useRef(false);
4590
4598
  const meta = table.options.meta;
4591
4599
  const sideOffset = -(containerRef.current?.clientHeight ?? 0);
4592
- const prevInitialValueRef = React$23.useRef(initialValue);
4600
+ const prevInitialValueRef = React$30.useRef(initialValue);
4593
4601
  if (initialValue !== prevInitialValueRef.current) {
4594
4602
  prevInitialValueRef.current = initialValue;
4595
4603
  setValue(initialValue ?? "");
4596
4604
  }
4597
- React$23.useEffect(() => {
4605
+ React$30.useEffect(() => {
4598
4606
  if (isEditing) hasSubmittedRef.current = false;
4599
4607
  }, [isEditing]);
4600
4608
  const debouncedSave = useDebouncedCallback((newValue) => {
@@ -4604,7 +4612,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4604
4612
  value: newValue
4605
4613
  });
4606
4614
  }, 300);
4607
- const onSave = React$23.useCallback(() => {
4615
+ const onSave = React$30.useCallback(() => {
4608
4616
  if (hasSubmittedRef.current) return;
4609
4617
  hasSubmittedRef.current = true;
4610
4618
  if (value !== initialValue) meta?.onDataUpdate?.({
@@ -4621,7 +4629,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4621
4629
  rowIndex,
4622
4630
  columnId
4623
4631
  ]);
4624
- const onCancel = React$23.useCallback(() => {
4632
+ const onCancel = React$30.useCallback(() => {
4625
4633
  if (hasSubmittedRef.current) return;
4626
4634
  hasSubmittedRef.current = true;
4627
4635
  setValue(initialValue ?? "");
@@ -4638,12 +4646,12 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4638
4646
  rowIndex,
4639
4647
  columnId
4640
4648
  ]);
4641
- const onChange = React$23.useCallback((event) => {
4649
+ const onChange = React$30.useCallback((event) => {
4642
4650
  const newValue = event.target.value;
4643
4651
  setValue(newValue);
4644
4652
  debouncedSave(newValue);
4645
4653
  }, [debouncedSave]);
4646
- const onOpenChange = React$23.useCallback((isOpen) => {
4654
+ const onOpenChange = React$30.useCallback((isOpen) => {
4647
4655
  setOpen(isOpen);
4648
4656
  if (!isOpen && !hasSubmittedRef.current) {
4649
4657
  hasSubmittedRef.current = true;
@@ -4661,7 +4669,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4661
4669
  rowIndex,
4662
4670
  columnId
4663
4671
  ]);
4664
- const onOpenAutoFocus = React$23.useCallback((event) => {
4672
+ const onOpenAutoFocus = React$30.useCallback((event) => {
4665
4673
  event.preventDefault();
4666
4674
  if (textareaRef.current) {
4667
4675
  textareaRef.current.focus();
@@ -4669,7 +4677,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4669
4677
  textareaRef.current.setSelectionRange(length, length);
4670
4678
  }
4671
4679
  }, []);
4672
- const onWrapperKeyDown = React$23.useCallback((event) => {
4680
+ const onWrapperKeyDown = React$30.useCallback((event) => {
4673
4681
  if (isEditing && !open) {
4674
4682
  if (event.key === "Escape") {
4675
4683
  event.preventDefault();
@@ -4695,7 +4703,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4695
4703
  rowIndex,
4696
4704
  columnId
4697
4705
  ]);
4698
- const onTextareaKeyDown = React$23.useCallback((event) => {
4706
+ const onTextareaKeyDown = React$30.useCallback((event) => {
4699
4707
  if (event.key === "Escape") {
4700
4708
  event.preventDefault();
4701
4709
  onCancel();
@@ -4705,7 +4713,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4705
4713
  }
4706
4714
  event.stopPropagation();
4707
4715
  }, [onCancel, onSave]);
4708
- const onTextareaBlur = React$23.useCallback(() => {
4716
+ const onTextareaBlur = React$30.useCallback(() => {
4709
4717
  if (hasSubmittedRef.current) return;
4710
4718
  hasSubmittedRef.current = true;
4711
4719
  if (value !== initialValue) meta?.onDataUpdate?.({
@@ -4722,7 +4730,7 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4722
4730
  rowIndex,
4723
4731
  columnId
4724
4732
  ]);
4725
- React$23.useEffect(() => {
4733
+ React$30.useEffect(() => {
4726
4734
  if (isEditing && !open) setOpen(true);
4727
4735
  if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
4728
4736
  }, [
@@ -4775,26 +4783,26 @@ function LongTextCell({ cell, table, rowIndex, columnId, isFocused, isEditing, i
4775
4783
  //#endregion
4776
4784
  //#region src/data-grid/cell-variants/multi-select-cell.tsx
4777
4785
  function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
4778
- const cellValue = React$22.useMemo(() => cell.getValue() ?? [], [cell]);
4786
+ const cellValue = React$29.useMemo(() => cell.getValue() ?? [], [cell]);
4779
4787
  const cellId = `${rowIndex}-${columnId}`;
4780
- const prevCellIdRef = React$22.useRef(cellId);
4781
- const [selectedValues, setSelectedValues] = React$22.useState(cellValue);
4782
- const [open, setOpen] = React$22.useState(false);
4783
- const [searchValue, setSearchValue] = React$22.useState("");
4784
- const containerRef = React$22.useRef(null);
4785
- const inputRef = React$22.useRef(null);
4788
+ const prevCellIdRef = React$29.useRef(cellId);
4789
+ const [selectedValues, setSelectedValues] = React$29.useState(cellValue);
4790
+ const [open, setOpen] = React$29.useState(false);
4791
+ const [searchValue, setSearchValue] = React$29.useState("");
4792
+ const containerRef = React$29.useRef(null);
4793
+ const inputRef = React$29.useRef(null);
4786
4794
  const meta = table.options.meta;
4787
4795
  const cellOpts = cell.column.columnDef.meta?.cell;
4788
4796
  const sideOffset = -(containerRef.current?.clientHeight ?? 0);
4789
4797
  const arrayOptions = cellOpts?.variant === "multi-select" ? cellOpts.options : void 0;
4790
4798
  const optionsMap = cellOpts?.variant === "multi-select" ? cellOpts.optionsMap : void 0;
4791
- const arrayOptionsLabelMap = React$22.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
4792
- const getLabel = React$22.useCallback((val) => {
4799
+ const arrayOptionsLabelMap = React$29.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
4800
+ const getLabel = React$29.useCallback((val) => {
4793
4801
  if (optionsMap) return optionsMap.get(val) ?? val;
4794
4802
  if (arrayOptionsLabelMap) return arrayOptionsLabelMap.get(val) ?? val;
4795
4803
  return val;
4796
4804
  }, [optionsMap, arrayOptionsLabelMap]);
4797
- const options = React$22.useMemo(() => {
4805
+ const options = React$29.useMemo(() => {
4798
4806
  if (!isEditing) return [];
4799
4807
  if (arrayOptions) return arrayOptions;
4800
4808
  if (optionsMap) return Array.from(optionsMap.entries()).map(([id, label]) => ({
@@ -4813,10 +4821,10 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4813
4821
  setOpen(false);
4814
4822
  setSearchValue("");
4815
4823
  }
4816
- React$22.useEffect(() => {
4824
+ React$29.useEffect(() => {
4817
4825
  setSelectedValues(cellValue);
4818
4826
  }, [cellValue]);
4819
- const onValueChange = React$22.useCallback((value) => {
4827
+ const onValueChange = React$29.useCallback((value) => {
4820
4828
  const newValues = selectedValues.includes(value) ? selectedValues.filter((v) => v !== value) : [...selectedValues, value];
4821
4829
  setSelectedValues(newValues);
4822
4830
  meta?.onDataUpdate?.({
@@ -4832,7 +4840,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4832
4840
  rowIndex,
4833
4841
  columnId
4834
4842
  ]);
4835
- const removeValue = React$22.useCallback((valueToRemove, event) => {
4843
+ const removeValue = React$29.useCallback((valueToRemove, event) => {
4836
4844
  event?.stopPropagation();
4837
4845
  event?.preventDefault();
4838
4846
  const newValues = selectedValues.filter((v) => v !== valueToRemove);
@@ -4849,7 +4857,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4849
4857
  rowIndex,
4850
4858
  columnId
4851
4859
  ]);
4852
- const clearAll = React$22.useCallback(() => {
4860
+ const clearAll = React$29.useCallback(() => {
4853
4861
  setSelectedValues([]);
4854
4862
  meta?.onDataUpdate?.({
4855
4863
  rowIndex,
@@ -4862,18 +4870,18 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4862
4870
  rowIndex,
4863
4871
  columnId
4864
4872
  ]);
4865
- const onOpenChange = React$22.useCallback((isOpen) => {
4873
+ const onOpenChange = React$29.useCallback((isOpen) => {
4866
4874
  setOpen(isOpen);
4867
4875
  if (!isOpen) {
4868
4876
  setSearchValue("");
4869
4877
  meta?.onCellEditingStop?.();
4870
4878
  }
4871
4879
  }, [meta]);
4872
- const onOpenAutoFocus = React$22.useCallback((event) => {
4880
+ const onOpenAutoFocus = React$29.useCallback((event) => {
4873
4881
  event.preventDefault();
4874
4882
  inputRef.current?.focus();
4875
4883
  }, []);
4876
- const onWrapperKeyDown = React$22.useCallback((event) => {
4884
+ const onWrapperKeyDown = React$29.useCallback((event) => {
4877
4885
  if (isEditing) {
4878
4886
  if (event.key === "Escape") {
4879
4887
  event.preventDefault();
@@ -4893,7 +4901,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4893
4901
  cellValue,
4894
4902
  meta
4895
4903
  ]);
4896
- const onInputKeyDown = React$22.useCallback((event) => {
4904
+ const onInputKeyDown = React$29.useCallback((event) => {
4897
4905
  if (event.key === "Backspace" && searchValue === "" && selectedValues.length > 0) {
4898
4906
  event.preventDefault();
4899
4907
  const lastValue = selectedValues.at(-1);
@@ -4905,7 +4913,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4905
4913
  selectedValues,
4906
4914
  removeValue
4907
4915
  ]);
4908
- React$22.useEffect(() => {
4916
+ React$29.useEffect(() => {
4909
4917
  if (isEditing && !open) setOpen(true);
4910
4918
  if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
4911
4919
  }, [
@@ -4915,7 +4923,7 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
4915
4923
  meta?.searchOpen,
4916
4924
  meta?.isScrolling
4917
4925
  ]);
4918
- React$22.useEffect(() => {
4926
+ React$29.useEffect(() => {
4919
4927
  if (open && inputRef.current) setTimeout(() => inputRef.current?.focus(), 0);
4920
4928
  }, [open]);
4921
4929
  const displayLabels = selectedValues.map(getLabel).filter(Boolean);
@@ -5016,19 +5024,19 @@ function MultiSelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing
5016
5024
  //#region src/data-grid/cell-variants/number-cell.tsx
5017
5025
  function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
5018
5026
  const initialValue = cell.getValue();
5019
- const inputRef = React$21.useRef(null);
5020
- const containerRef = React$21.useRef(null);
5027
+ const inputRef = React$28.useRef(null);
5028
+ const containerRef = React$28.useRef(null);
5021
5029
  const meta = table.options.meta;
5022
5030
  const colMeta = cell.column.columnDef.meta;
5023
5031
  const cellOptions = colMeta?.cell;
5024
- const editableResolver = React$21.useMemo(() => {
5032
+ const editableResolver = React$28.useMemo(() => {
5025
5033
  const v = colMeta?.editable;
5026
5034
  if (v === void 0) return () => true;
5027
5035
  return typeof v === "function" ? v : () => Boolean(v);
5028
5036
  }, [colMeta?.editable]);
5029
5037
  const isEditable = editableResolver(cell.row.original);
5030
5038
  const { min, max, step, prefix, suffix, fallbackValue = "" } = cellOptions?.variant === "number" ? cellOptions : {};
5031
- const resolvedPrefix = React$21.useMemo(() => {
5039
+ const resolvedPrefix = React$28.useMemo(() => {
5032
5040
  if (typeof prefix === "function") return prefix(cell.row.original, initialValue);
5033
5041
  return prefix ?? null;
5034
5042
  }, [
@@ -5036,7 +5044,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5036
5044
  cell.row.original,
5037
5045
  initialValue
5038
5046
  ]);
5039
- const resolvedSuffix = React$21.useMemo(() => {
5047
+ const resolvedSuffix = React$28.useMemo(() => {
5040
5048
  if (typeof suffix === "function") return suffix(cell.row.original, initialValue);
5041
5049
  return suffix ?? null;
5042
5050
  }, [
@@ -5044,12 +5052,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5044
5052
  cell.row.original,
5045
5053
  initialValue
5046
5054
  ]);
5047
- const [editValue, setEditValue] = React$21.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
5048
- const hasSubmittedRef = React$21.useRef(false);
5049
- React$21.useEffect(() => {
5055
+ const [editValue, setEditValue] = React$28.useState(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
5056
+ const hasSubmittedRef = React$28.useRef(false);
5057
+ React$28.useEffect(() => {
5050
5058
  if (isEditing) hasSubmittedRef.current = false;
5051
5059
  }, [isEditing]);
5052
- const onBlur = React$21.useCallback(() => {
5060
+ const onBlur = React$28.useCallback(() => {
5053
5061
  if (hasSubmittedRef.current) return;
5054
5062
  const numValue = editValue === "" ? null : Number(editValue);
5055
5063
  if (numValue !== initialValue) meta?.onDataUpdate?.({
@@ -5065,13 +5073,13 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5065
5073
  initialValue,
5066
5074
  editValue
5067
5075
  ]);
5068
- const onChange = React$21.useCallback((event) => {
5076
+ const onChange = React$28.useCallback((event) => {
5069
5077
  setEditValue(event.target.value);
5070
5078
  }, []);
5071
- const parseNumValue = React$21.useCallback(() => {
5079
+ const parseNumValue = React$28.useCallback(() => {
5072
5080
  return editValue === "" ? null : Number(editValue);
5073
5081
  }, [editValue]);
5074
- const saveAndStop = React$21.useCallback((options) => {
5082
+ const saveAndStop = React$28.useCallback((options) => {
5075
5083
  hasSubmittedRef.current = true;
5076
5084
  const numValue = parseNumValue();
5077
5085
  meta?.onDataUpdate?.({
@@ -5086,7 +5094,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5086
5094
  rowIndex,
5087
5095
  columnId
5088
5096
  ]);
5089
- const handleEditingKeyDown = React$21.useCallback((event) => {
5097
+ const handleEditingKeyDown = React$28.useCallback((event) => {
5090
5098
  if (event.key === "Enter") {
5091
5099
  event.preventDefault();
5092
5100
  saveAndStop({ moveToNextRow: true });
@@ -5105,12 +5113,12 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5105
5113
  initialValue,
5106
5114
  meta
5107
5115
  ]);
5108
- const handleFocusedKeyDown = React$21.useCallback((event) => {
5116
+ const handleFocusedKeyDown = React$28.useCallback((event) => {
5109
5117
  if (!isEditable) return;
5110
5118
  if (event.key === "Backspace") setEditValue("");
5111
5119
  else if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) setEditValue(event.key);
5112
5120
  }, [isEditable]);
5113
- const onWrapperKeyDown = React$21.useCallback((event) => {
5121
+ const onWrapperKeyDown = React$28.useCallback((event) => {
5114
5122
  if (isEditing) handleEditingKeyDown(event);
5115
5123
  else if (isFocused) handleFocusedKeyDown(event);
5116
5124
  }, [
@@ -5119,10 +5127,10 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5119
5127
  handleEditingKeyDown,
5120
5128
  handleFocusedKeyDown
5121
5129
  ]);
5122
- React$21.useEffect(() => {
5130
+ React$28.useEffect(() => {
5123
5131
  setEditValue(initialValue !== null && initialValue !== void 0 ? String(initialValue) : "");
5124
5132
  }, [initialValue]);
5125
- React$21.useEffect(() => {
5133
+ React$28.useEffect(() => {
5126
5134
  if (isEditing && inputRef.current) {
5127
5135
  inputRef.current.focus();
5128
5136
  inputRef.current.select();
@@ -5169,7 +5177,7 @@ function NumberCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5169
5177
  //#endregion
5170
5178
  //#region src/data-grid/cell-variants/react-node-cell.tsx
5171
5179
  function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected, isEditing }) {
5172
- const containerRef = React$20.useRef(null);
5180
+ const containerRef = React$27.useRef(null);
5173
5181
  const cellOpts = cell.column.columnDef.meta?.cell;
5174
5182
  const renderFn = cellOpts?.variant === "react-node" ? cellOpts.render : void 0;
5175
5183
  const children = renderFn ? renderFn({
@@ -5199,17 +5207,17 @@ function ReactNodeCell({ cell, table, rowIndex, columnId, isFocused, isSelected,
5199
5207
  //#region src/data-grid/cell-variants/select-cell.tsx
5200
5208
  function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isSelected }) {
5201
5209
  const initialValue = cell.getValue();
5202
- const [value, setValue] = React$19.useState(initialValue);
5203
- const [open, setOpen] = React$19.useState(false);
5204
- const containerRef = React$19.useRef(null);
5205
- const inputRef = React$19.useRef(null);
5210
+ const [value, setValue] = React$26.useState(initialValue);
5211
+ const [open, setOpen] = React$26.useState(false);
5212
+ const containerRef = React$26.useRef(null);
5213
+ const inputRef = React$26.useRef(null);
5206
5214
  const meta = table.options.meta;
5207
5215
  const cellOpts = cell.column.columnDef.meta?.cell;
5208
5216
  const hasSearch = (cellOpts?.variant === "select" && cellOpts?.hasSearch) ?? false;
5209
5217
  const sideOffset = -(inputRef.current?.clientHeight ?? 0);
5210
5218
  const { options: arrayOptions, optionsMap, optionsRenderer } = cellOpts?.variant === "select" ? cellOpts : {};
5211
- const arrayOptionsLabelMap = React$19.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
5212
- const displayLabel = React$19.useMemo(() => {
5219
+ const arrayOptionsLabelMap = React$26.useMemo(() => arrayOptions ? new Map(arrayOptions.map((opt) => [opt.value, opt.label])) : null, [arrayOptions]);
5220
+ const displayLabel = React$26.useMemo(() => {
5213
5221
  if (optionsMap) {
5214
5222
  const data = optionsMap.get(value ?? "");
5215
5223
  if (optionsRenderer) return optionsRenderer(data, "cell");
@@ -5223,7 +5231,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5223
5231
  arrayOptionsLabelMap,
5224
5232
  optionsRenderer
5225
5233
  ]);
5226
- const options = React$19.useMemo(() => {
5234
+ const options = React$26.useMemo(() => {
5227
5235
  if (!isEditing) return [];
5228
5236
  if (arrayOptions) return arrayOptions.map((opt) => ({
5229
5237
  value: opt.value,
@@ -5239,7 +5247,7 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5239
5247
  arrayOptions,
5240
5248
  optionsMap
5241
5249
  ]);
5242
- const onValueChange = React$19.useCallback((newValue) => {
5250
+ const onValueChange = React$26.useCallback((newValue) => {
5243
5251
  setValue(newValue);
5244
5252
  meta?.onDataUpdate?.({
5245
5253
  rowIndex,
@@ -5252,15 +5260,15 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5252
5260
  rowIndex,
5253
5261
  columnId
5254
5262
  ]);
5255
- const onOpenChange = React$19.useCallback((isOpen) => {
5263
+ const onOpenChange = React$26.useCallback((isOpen) => {
5256
5264
  setOpen(isOpen);
5257
5265
  if (!isOpen) meta?.onCellEditingStop?.();
5258
5266
  }, [meta]);
5259
- const onOpenAutoFocus = React$19.useCallback((event) => {
5267
+ const onOpenAutoFocus = React$26.useCallback((event) => {
5260
5268
  event.preventDefault();
5261
5269
  inputRef.current?.focus();
5262
5270
  }, []);
5263
- const onWrapperKeyDown = React$19.useCallback((event) => {
5271
+ const onWrapperKeyDown = React$26.useCallback((event) => {
5264
5272
  if (isEditing) {
5265
5273
  if (event.key === "Escape") {
5266
5274
  event.preventDefault();
@@ -5278,10 +5286,10 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5278
5286
  initialValue,
5279
5287
  meta
5280
5288
  ]);
5281
- React$19.useEffect(() => {
5289
+ React$26.useEffect(() => {
5282
5290
  setValue(initialValue);
5283
5291
  }, [initialValue]);
5284
- React$19.useEffect(() => {
5292
+ React$26.useEffect(() => {
5285
5293
  if (isEditing && !open) setOpen(true);
5286
5294
  if (isFocused && !isEditing && !meta?.searchOpen && !meta?.isScrolling && containerRef.current) containerRef.current.focus();
5287
5295
  }, [
@@ -5366,22 +5374,22 @@ function SelectCell({ cell, table, rowIndex, columnId, isFocused, isEditing, isS
5366
5374
  //#region src/data-grid/cell-variants/short-text-cell.tsx
5367
5375
  function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused, isSelected }) {
5368
5376
  const initialValue = cell.getValue();
5369
- const [value, setValue] = React$18.useState(initialValue);
5370
- const inputRef = React$18.useRef(null);
5371
- const containerRef = React$18.useRef(null);
5372
- const hasSubmittedRef = React$18.useRef(false);
5377
+ const [value, setValue] = React$25.useState(initialValue);
5378
+ const inputRef = React$25.useRef(null);
5379
+ const containerRef = React$25.useRef(null);
5380
+ const hasSubmittedRef = React$25.useRef(false);
5373
5381
  const meta = table.options.meta;
5374
5382
  const colMeta = cell.column.columnDef.meta;
5375
- const editableResolver = React$18.useMemo(() => {
5383
+ const editableResolver = React$25.useMemo(() => {
5376
5384
  const v = colMeta?.editable;
5377
5385
  if (v === void 0) return () => true;
5378
5386
  return typeof v === "function" ? v : () => Boolean(v);
5379
5387
  }, [colMeta?.editable]);
5380
5388
  const isEditable = editableResolver(cell.row.original);
5381
- React$18.useEffect(() => {
5389
+ React$25.useEffect(() => {
5382
5390
  if (isEditing) hasSubmittedRef.current = false;
5383
5391
  }, [isEditing]);
5384
- const onBlur = React$18.useCallback(() => {
5392
+ const onBlur = React$25.useCallback(() => {
5385
5393
  if (hasSubmittedRef.current) return;
5386
5394
  const currentValue = inputRef.current?.value ?? "";
5387
5395
  const normalizedInitial = initialValue ?? "";
@@ -5397,10 +5405,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
5397
5405
  columnId,
5398
5406
  initialValue
5399
5407
  ]);
5400
- const onChange = React$18.useCallback((event) => {
5408
+ const onChange = React$25.useCallback((event) => {
5401
5409
  setValue(event.target.value);
5402
5410
  }, []);
5403
- const handleEditingKeyDown = React$18.useCallback((event) => {
5411
+ const handleEditingKeyDown = React$25.useCallback((event) => {
5404
5412
  if (event.key === "Enter") {
5405
5413
  event.preventDefault();
5406
5414
  hasSubmittedRef.current = true;
@@ -5434,13 +5442,13 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
5434
5442
  rowIndex,
5435
5443
  columnId
5436
5444
  ]);
5437
- const handleFocusedKeyDown = React$18.useCallback((event) => {
5445
+ const handleFocusedKeyDown = React$25.useCallback((event) => {
5438
5446
  if (event.key.length === 1 && !event.ctrlKey && !event.metaKey) {
5439
5447
  if (!isEditable) return;
5440
5448
  setValue(event.key);
5441
5449
  }
5442
5450
  }, [isEditable]);
5443
- const onWrapperKeyDown = React$18.useCallback((event) => {
5451
+ const onWrapperKeyDown = React$25.useCallback((event) => {
5444
5452
  if (isEditing) handleEditingKeyDown(event);
5445
5453
  else if (isFocused) handleFocusedKeyDown(event);
5446
5454
  }, [
@@ -5449,10 +5457,10 @@ function ShortTextCell({ cell, table, rowIndex, columnId, isEditing, isFocused,
5449
5457
  handleEditingKeyDown,
5450
5458
  handleFocusedKeyDown
5451
5459
  ]);
5452
- React$18.useEffect(() => {
5460
+ React$25.useEffect(() => {
5453
5461
  setValue(initialValue);
5454
5462
  }, [initialValue]);
5455
- React$18.useEffect(() => {
5463
+ React$25.useEffect(() => {
5456
5464
  if (isEditing && inputRef.current) {
5457
5465
  inputRef.current.focus();
5458
5466
  inputRef.current.setSelectionRange(inputRef.current.value.length, inputRef.current.value.length);
@@ -5608,7 +5616,7 @@ function DataGridCell({ cell, table }) {
5608
5616
 
5609
5617
  //#endregion
5610
5618
  //#region src/separator/separator.tsx
5611
- const Separator = React$17.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
5619
+ const Separator = React$24.forwardRef(({ className, orientation = "horizontal", decorative = true,...props }, ref) => /* @__PURE__ */ jsx(SeparatorPrimitive.Root, {
5612
5620
  ref,
5613
5621
  decorative,
5614
5622
  orientation,
@@ -5620,22 +5628,22 @@ Separator.displayName = SeparatorPrimitive.Root.displayName;
5620
5628
  //#endregion
5621
5629
  //#region src/data-grid/data-grid-view-menu.tsx
5622
5630
  function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAdmin, onApplyView, onSaveView, onUpdateView, onRenameView, onDeleteView, onClearView,...props }) {
5623
- const viewableColumns = React$16.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
5624
- const [order, setOrder] = React$16.useState(() => {
5631
+ const viewableColumns = React$23.useMemo(() => table.getAllColumns().filter((column) => typeof column.accessorFn !== "undefined"), [table]);
5632
+ const [order, setOrder] = React$23.useState(() => {
5625
5633
  const stateOrder = table.getState().columnOrder ?? [];
5626
5634
  if (stateOrder && stateOrder.length > 0) return stateOrder;
5627
5635
  return table.getAllColumns().map((c) => c.id);
5628
5636
  });
5629
- const [searchQuery, setSearchQuery] = React$16.useState("");
5630
- const [isDragging, setIsDragging] = React$16.useState(false);
5631
- const [insertionIndex, setInsertionIndex] = React$16.useState(null);
5632
- const [isCreating, setIsCreating] = React$16.useState(false);
5633
- const [newViewName, setNewViewName] = React$16.useState("");
5634
- const [newViewGlobal, setNewViewGlobal] = React$16.useState(false);
5635
- const [renamingViewId, setRenamingViewId] = React$16.useState(null);
5636
- const [renameValue, setRenameValue] = React$16.useState("");
5637
- const [deletingViewId, setDeletingViewId] = React$16.useState(null);
5638
- const [updatingViewId, setUpdatingViewId] = React$16.useState(null);
5637
+ const [searchQuery, setSearchQuery] = React$23.useState("");
5638
+ const [isDragging, setIsDragging] = React$23.useState(false);
5639
+ const [insertionIndex, setInsertionIndex] = React$23.useState(null);
5640
+ const [isCreating, setIsCreating] = React$23.useState(false);
5641
+ const [newViewName, setNewViewName] = React$23.useState("");
5642
+ const [newViewGlobal, setNewViewGlobal] = React$23.useState(false);
5643
+ const [renamingViewId, setRenamingViewId] = React$23.useState(null);
5644
+ const [renameValue, setRenameValue] = React$23.useState("");
5645
+ const [deletingViewId, setDeletingViewId] = React$23.useState(null);
5646
+ const [updatingViewId, setUpdatingViewId] = React$23.useState(null);
5639
5647
  function resetAllStates() {
5640
5648
  setIsCreating(false);
5641
5649
  setNewViewName("");
@@ -5646,7 +5654,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5646
5654
  setSearchQuery("");
5647
5655
  }
5648
5656
  const tableColumnOrder = table.getState().columnOrder;
5649
- React$16.useEffect(() => {
5657
+ React$23.useEffect(() => {
5650
5658
  const stateOrder = tableColumnOrder ?? [];
5651
5659
  if (stateOrder && stateOrder.length > 0) {
5652
5660
  setOrder(stateOrder);
@@ -5654,8 +5662,8 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5654
5662
  }
5655
5663
  setOrder(table.getAllColumns().map((c) => c.id));
5656
5664
  }, [table, tableColumnOrder]);
5657
- const visibleSet = React$16.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
5658
- const orderedColumns = React$16.useMemo(() => {
5665
+ const visibleSet = React$23.useMemo(() => new Set(viewableColumns.map((c) => c.id)), [viewableColumns]);
5666
+ const orderedColumns = React$23.useMemo(() => {
5659
5667
  const ordered = [];
5660
5668
  for (const id of order) {
5661
5669
  const col = viewableColumns.find((c) => c.id === id);
@@ -5668,12 +5676,12 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5668
5676
  viewableColumns,
5669
5677
  table
5670
5678
  ]);
5671
- const draggingRef = React$16.useRef(null);
5672
- const groupRef = React$16.useRef(null);
5673
- const getBaseOrder = React$16.useCallback(() => {
5679
+ const draggingRef = React$23.useRef(null);
5680
+ const groupRef = React$23.useRef(null);
5681
+ const getBaseOrder = React$23.useCallback(() => {
5674
5682
  return table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
5675
5683
  }, [table]);
5676
- const computeInsertionIndex = React$16.useCallback((clientY) => {
5684
+ const computeInsertionIndex = React$23.useCallback((clientY) => {
5677
5685
  const baseOrder = getBaseOrder();
5678
5686
  const el = groupRef.current;
5679
5687
  if (!el) return baseOrder.length;
@@ -5695,7 +5703,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5695
5703
  setIsDragging(false);
5696
5704
  setInsertionIndex(null);
5697
5705
  }
5698
- const doDrop = React$16.useCallback((dragId, toIndex) => {
5706
+ const doDrop = React$23.useCallback((dragId, toIndex) => {
5699
5707
  const baseOrder = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
5700
5708
  const fromIndex = baseOrder.indexOf(dragId);
5701
5709
  if (fromIndex === -1) {
@@ -5712,7 +5720,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5712
5720
  setOrder(copy.filter((id) => visibleSet.has(id)));
5713
5721
  onDragEnd();
5714
5722
  }, [table, visibleSet]);
5715
- const startPointerDrag = React$16.useCallback((e, id) => {
5723
+ const startPointerDrag = React$23.useCallback((e, id) => {
5716
5724
  e.preventDefault();
5717
5725
  draggingRef.current = id;
5718
5726
  setIsDragging(true);
@@ -5745,7 +5753,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5745
5753
  if (fromIndex < targetIndex) insertAt = targetIndex - 1;
5746
5754
  return insertAt === fromIndex;
5747
5755
  }
5748
- const dragFromHandle = React$16.useRef(false);
5756
+ const dragFromHandle = React$23.useRef(false);
5749
5757
  function resetTableView() {
5750
5758
  const defaultOrder = table.getAllColumns().map((c) => c.id);
5751
5759
  try {
@@ -5768,7 +5776,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
5768
5776
  } catch (_) {}
5769
5777
  }
5770
5778
  }
5771
- const sortedViews = React$16.useMemo(() => {
5779
+ const sortedViews = React$23.useMemo(() => {
5772
5780
  if (!savedViews || savedViews.length === 0) return savedViews;
5773
5781
  return [...savedViews].sort((a, b) => {
5774
5782
  if (a.isGlobal !== b.isGlobal) return a.isGlobal ? -1 : 1;
@@ -6084,7 +6092,7 @@ function DataGridViewMenu({ table, savedViews, activeViewId, currentUserId, isAd
6084
6092
  const currentBase = table.getState().columnOrder && table.getState().columnOrder.length ? table.getState().columnOrder.slice() : table.getAllColumns().map((c) => c.id);
6085
6093
  const pos = currentBase.indexOf(column.id);
6086
6094
  const isHideable = column.getCanHide();
6087
- return /* @__PURE__ */ jsxs(React$16.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
6095
+ return /* @__PURE__ */ jsxs(React$23.Fragment, { children: [/* @__PURE__ */ jsxs(CommandItem, {
6088
6096
  value: column.id,
6089
6097
  "data-col-id": column.id,
6090
6098
  className: cn("flex items-center gap-2 px-2 py-1 rounded", !isDragging ? "data-[selected=true]:bg-accent" : "data-[selected=true]:bg-transparent cursor-grabbing", draggingRef.current === column.id && isDragging && "bg-accent data-[selected=true]:bg-accent"),
@@ -6206,33 +6214,33 @@ const MIN_COLUMN_SIZE = 60;
6206
6214
  const MAX_COLUMN_SIZE = 800;
6207
6215
  const SEARCH_SHORTCUT_KEY = "f";
6208
6216
  const NON_NAVIGABLE_COLUMN_IDS = ["select", "actions"];
6209
- const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$15.useLayoutEffect : React$15.useEffect;
6210
- function useLazyRef(fn) {
6211
- const ref = React$15.useRef(null);
6217
+ const useIsomorphicLayoutEffect$1 = typeof window !== "undefined" ? React$22.useLayoutEffect : React$22.useEffect;
6218
+ function useLazyRef$1(fn) {
6219
+ const ref = React$22.useRef(null);
6212
6220
  if (ref.current === null) ref.current = fn();
6213
6221
  return ref;
6214
6222
  }
6215
- function useAsRef(data) {
6216
- const ref = React$15.useRef(data);
6217
- useIsomorphicLayoutEffect(() => {
6223
+ function useAsRef$1(data) {
6224
+ const ref = React$22.useRef(data);
6225
+ useIsomorphicLayoutEffect$1(() => {
6218
6226
  ref.current = data;
6219
6227
  });
6220
6228
  return ref;
6221
6229
  }
6222
- function useStore(store, selector) {
6223
- const getSnapshot = React$15.useCallback(() => selector(store.getState()), [store, selector]);
6224
- return React$15.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
6230
+ function useStore$1(store, selector) {
6231
+ const getSnapshot = React$22.useCallback(() => selector(store.getState()), [store, selector]);
6232
+ return React$22.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
6225
6233
  }
6226
6234
  function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRowsDelete: onRowsDeleteProp, onCellFocus: onCellFocusProp, onRowClick: onRowClickProp, highlightedRowIndex, rowHeight: rowHeightProp = DEFAULT_ROW_HEIGHT, overscan = OVERSCAN, initialState, autoFocus = false, enableColumnSelection = false, enableSearch = false, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, onLoadMore, loadMoreThreshold = 25, totalRowCount, persistColumnState = false,...dataGridProps }) {
6227
- const dataGridRef = React$15.useRef(null);
6228
- const tableRef = React$15.useRef(null);
6229
- const rowVirtualizerRef = React$15.useRef(null);
6230
- const headerRef = React$15.useRef(null);
6231
- const rowMapRef = React$15.useRef(new Map());
6232
- const footerRef = React$15.useRef(null);
6233
- const dataGridPropsRef = useAsRef(dataGridProps);
6234
- const listenersRef = useLazyRef(() => new Set());
6235
- const stateRef = useLazyRef(() => {
6235
+ const dataGridRef = React$22.useRef(null);
6236
+ const tableRef = React$22.useRef(null);
6237
+ const rowVirtualizerRef = React$22.useRef(null);
6238
+ const headerRef = React$22.useRef(null);
6239
+ const rowMapRef = React$22.useRef(new Map());
6240
+ const footerRef = React$22.useRef(null);
6241
+ const dataGridPropsRef = useAsRef$1(dataGridProps);
6242
+ const listenersRef = useLazyRef$1(() => new Set());
6243
+ const stateRef = useLazyRef$1(() => {
6236
6244
  return {
6237
6245
  sorting: initialState?.sorting ?? [],
6238
6246
  rowHeight: rowHeightProp,
@@ -6257,7 +6265,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6257
6265
  isScrolling: false
6258
6266
  };
6259
6267
  });
6260
- const store = React$15.useMemo(() => {
6268
+ const store = React$22.useMemo(() => {
6261
6269
  let isBatching = false;
6262
6270
  let pendingNotification = false;
6263
6271
  return {
@@ -6301,43 +6309,43 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6301
6309
  }
6302
6310
  };
6303
6311
  }, [listenersRef, stateRef]);
6304
- React$15.useEffect(() => {
6312
+ React$22.useEffect(() => {
6305
6313
  store.setState("rowHeight", rowHeightProp);
6306
6314
  }, [rowHeightProp, store]);
6307
- const focusedCell = useStore(store, (state) => state.focusedCell);
6308
- const editingCell = useStore(store, (state) => state.editingCell);
6309
- const selectionState = useStore(store, (state) => state.selectionState);
6310
- const searchQuery = useStore(store, (state) => state.searchQuery);
6311
- const searchMatches = useStore(store, (state) => state.searchMatches);
6312
- const matchIndex = useStore(store, (state) => state.matchIndex);
6313
- const searchOpen = useStore(store, (state) => state.searchOpen);
6314
- const sorting = useStore(store, (state) => state.sorting);
6315
- const rowSelection = useStore(store, (state) => state.rowSelection);
6316
- const contextMenu = useStore(store, (state) => state.contextMenu);
6317
- const rowHeight = useStore(store, (state) => state.rowHeight);
6318
- const isScrolling = useStore(store, (state) => state.isScrolling);
6315
+ const focusedCell = useStore$1(store, (state) => state.focusedCell);
6316
+ const editingCell = useStore$1(store, (state) => state.editingCell);
6317
+ const selectionState = useStore$1(store, (state) => state.selectionState);
6318
+ const searchQuery = useStore$1(store, (state) => state.searchQuery);
6319
+ const searchMatches = useStore$1(store, (state) => state.searchMatches);
6320
+ const matchIndex = useStore$1(store, (state) => state.matchIndex);
6321
+ const searchOpen = useStore$1(store, (state) => state.searchOpen);
6322
+ const sorting = useStore$1(store, (state) => state.sorting);
6323
+ const rowSelection = useStore$1(store, (state) => state.rowSelection);
6324
+ const contextMenu = useStore$1(store, (state) => state.contextMenu);
6325
+ const rowHeight = useStore$1(store, (state) => state.rowHeight);
6326
+ const isScrolling = useStore$1(store, (state) => state.isScrolling);
6319
6327
  const rowHeightValue = getRowHeightValue(rowHeight);
6320
- const columnIds = React$15.useMemo(() => {
6328
+ const columnIds = React$22.useMemo(() => {
6321
6329
  return columns.map((c) => {
6322
6330
  if (c.id) return c.id;
6323
6331
  if ("accessorKey" in c) return c.accessorKey;
6324
6332
  return void 0;
6325
6333
  }).filter((id) => Boolean(id));
6326
6334
  }, [columns]);
6327
- const columnDefsVersionRef = React$15.useRef(0);
6328
- const prevColumnsRef = React$15.useRef(columns);
6335
+ const columnDefsVersionRef = React$22.useRef(0);
6336
+ const prevColumnsRef = React$22.useRef(columns);
6329
6337
  if (prevColumnsRef.current !== columns) {
6330
6338
  prevColumnsRef.current = columns;
6331
6339
  columnDefsVersionRef.current += 1;
6332
6340
  }
6333
6341
  const columnDefsVersion = columnDefsVersionRef.current;
6334
- const storageKey = React$15.useMemo(() => {
6342
+ const storageKey = React$22.useMemo(() => {
6335
6343
  if (!persistColumnState || typeof window === "undefined") return void 0;
6336
6344
  const path = globalThis.location?.pathname ?? "unknown";
6337
6345
  const cols = columnIds.join("|");
6338
6346
  return `pxl.dataGrid:${path}:${cols}`;
6339
6347
  }, [columnIds, persistColumnState]);
6340
- const persistedState = React$15.useMemo(() => {
6348
+ const persistedState = React$22.useMemo(() => {
6341
6349
  if (!storageKey) return void 0;
6342
6350
  try {
6343
6351
  const raw = localStorage.getItem(storageKey);
@@ -6348,7 +6356,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6348
6356
  return void 0;
6349
6357
  }
6350
6358
  }, [storageKey]);
6351
- const mergedInitialState = React$15.useMemo(() => {
6359
+ const mergedInitialState = React$22.useMemo(() => {
6352
6360
  const base = { ...initialState ?? {} };
6353
6361
  if (persistedState) try {
6354
6362
  if (persistedState.columnOrder) base.columnOrder = persistedState.columnOrder;
@@ -6357,12 +6365,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6357
6365
  } catch (_) {}
6358
6366
  return base;
6359
6367
  }, [initialState, persistedState]);
6360
- const getNavigableColumnIds = React$15.useCallback(() => {
6368
+ const getNavigableColumnIds = React$22.useCallback(() => {
6361
6369
  const t = tableRef.current;
6362
6370
  if (t) return t.getVisibleLeafColumns().map((c) => c.id).filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
6363
6371
  return columnIds.filter((c) => !NON_NAVIGABLE_COLUMN_IDS.includes(c));
6364
6372
  }, [columnIds]);
6365
- const onDataUpdate = React$15.useCallback((updates) => {
6373
+ const onDataUpdate = React$22.useCallback((updates) => {
6366
6374
  const updateArray = Array.isArray(updates) ? updates : [updates];
6367
6375
  if (updateArray.length === 0) return;
6368
6376
  const currentTable = tableRef.current;
@@ -6410,10 +6418,10 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6410
6418
  });
6411
6419
  onDataChange?.(newData);
6412
6420
  }, [data, onDataChange]);
6413
- const getIsCellSelected = React$15.useCallback((rowIndex, columnId) => {
6421
+ const getIsCellSelected = React$22.useCallback((rowIndex, columnId) => {
6414
6422
  return selectionState.selectedCells.has(getCellKey(rowIndex, columnId));
6415
6423
  }, [selectionState.selectedCells]);
6416
- const clearSelection = React$15.useCallback(() => {
6424
+ const clearSelection = React$22.useCallback(() => {
6417
6425
  store.batch(() => {
6418
6426
  store.setState("selectionState", {
6419
6427
  selectedCells: new Set(),
@@ -6423,7 +6431,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6423
6431
  store.setState("rowSelection", {});
6424
6432
  });
6425
6433
  }, [store]);
6426
- const selectAll = React$15.useCallback(() => {
6434
+ const selectAll = React$22.useCallback(() => {
6427
6435
  const allCells = new Set();
6428
6436
  const currentTable = tableRef.current;
6429
6437
  const rows = currentTable?.getRowModel().rows ?? [];
@@ -6450,7 +6458,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6450
6458
  data.length,
6451
6459
  store
6452
6460
  ]);
6453
- const selectColumn = React$15.useCallback((columnId) => {
6461
+ const selectColumn = React$22.useCallback((columnId) => {
6454
6462
  const currentTable = tableRef.current;
6455
6463
  const rows = currentTable?.getRowModel().rows ?? [];
6456
6464
  const rowCount = rows.length ?? data.length;
@@ -6472,7 +6480,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6472
6480
  isSelecting: false
6473
6481
  });
6474
6482
  }, [data.length, store]);
6475
- const selectRange = React$15.useCallback((start, end, isSelecting = false) => {
6483
+ const selectRange = React$22.useCallback((start, end, isSelecting = false) => {
6476
6484
  const visibleCols = getNavigableColumnIds();
6477
6485
  const startColIndex = visibleCols.indexOf(start.columnId);
6478
6486
  const endColIndex = visibleCols.indexOf(end.columnId);
@@ -6494,7 +6502,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6494
6502
  isSelecting
6495
6503
  });
6496
6504
  }, [getNavigableColumnIds, store]);
6497
- const focusCell = React$15.useCallback((rowIndex, columnId) => {
6505
+ const focusCell = React$22.useCallback((rowIndex, columnId) => {
6498
6506
  store.batch(() => {
6499
6507
  store.setState("focusedCell", {
6500
6508
  rowIndex,
@@ -6510,7 +6518,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6510
6518
  if (currentState.searchOpen) return;
6511
6519
  if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
6512
6520
  }, [store, onCellFocusProp]);
6513
- const onRowsDelete = React$15.useCallback(async (rowIndices) => {
6521
+ const onRowsDelete = React$22.useCallback(async (rowIndices) => {
6514
6522
  if (!onRowsDeleteProp || rowIndices.length === 0) return;
6515
6523
  const currentTable = tableRef.current;
6516
6524
  const rows = currentTable?.getRowModel().rows;
@@ -6562,7 +6570,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6562
6570
  const debouncedRowClick = useDebouncedCallback((rowIndex) => {
6563
6571
  onRowClickProp?.(rowIndex);
6564
6572
  }, 300);
6565
- const navigateCell = React$15.useCallback((direction) => {
6573
+ const navigateCell = React$22.useCallback((direction) => {
6566
6574
  const currentState = store.getState();
6567
6575
  if (!currentState.focusedCell) return;
6568
6576
  const { rowIndex, columnId } = currentState.focusedCell;
@@ -6692,7 +6700,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6692
6700
  onRowClickProp,
6693
6701
  debouncedRowClick
6694
6702
  ]);
6695
- const onCellEditingStart = React$15.useCallback((rowIndex, columnId) => {
6703
+ const onCellEditingStart = React$22.useCallback((rowIndex, columnId) => {
6696
6704
  const col = tableRef.current?.getColumn(columnId);
6697
6705
  const editable = col?.columnDef?.meta?.editable;
6698
6706
  if (editable === false) return;
@@ -6711,7 +6719,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6711
6719
  });
6712
6720
  });
6713
6721
  }, [store]);
6714
- const onCellEditingStop = React$15.useCallback((opts) => {
6722
+ const onCellEditingStop = React$22.useCallback((opts) => {
6715
6723
  const currentState = store.getState();
6716
6724
  const currentEditing = currentState.editingCell;
6717
6725
  store.setState("editingCell", null);
@@ -6737,7 +6745,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6737
6745
  focusCell,
6738
6746
  navigateCell
6739
6747
  ]);
6740
- const onSearchOpenChange = React$15.useCallback((open) => {
6748
+ const onSearchOpenChange = React$22.useCallback((open) => {
6741
6749
  if (open) {
6742
6750
  store.setState("searchOpen", true);
6743
6751
  return;
@@ -6756,7 +6764,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6756
6764
  });
6757
6765
  if (dataGridRef.current && document.activeElement !== dataGridRef.current) dataGridRef.current.focus();
6758
6766
  }, [store]);
6759
- const onSearch = React$15.useCallback((query) => {
6767
+ const onSearch = React$22.useCallback((query) => {
6760
6768
  if (!query.trim()) {
6761
6769
  store.batch(() => {
6762
6770
  store.setState("searchMatches", []);
@@ -6791,8 +6799,8 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6791
6799
  rowVirtualizerRef.current?.scrollToIndex(firstMatch.rowIndex, { align: "center" });
6792
6800
  }
6793
6801
  }, [columnIds, store]);
6794
- const onSearchQueryChange = React$15.useCallback((query) => store.setState("searchQuery", query), [store]);
6795
- const onNavigateToPrevMatch = React$15.useCallback(() => {
6802
+ const onSearchQueryChange = React$22.useCallback((query) => store.setState("searchQuery", query), [store]);
6803
+ const onNavigateToPrevMatch = React$22.useCallback(() => {
6796
6804
  const currentState = store.getState();
6797
6805
  if (currentState.searchMatches.length === 0) return;
6798
6806
  const prevIndex = currentState.matchIndex - 1 < 0 ? currentState.searchMatches.length - 1 : currentState.matchIndex - 1;
@@ -6807,7 +6815,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6807
6815
  });
6808
6816
  }
6809
6817
  }, [store, focusCell]);
6810
- const onNavigateToNextMatch = React$15.useCallback(() => {
6818
+ const onNavigateToNextMatch = React$22.useCallback(() => {
6811
6819
  const currentState = store.getState();
6812
6820
  if (currentState.searchMatches.length === 0) return;
6813
6821
  const nextIndex = (currentState.matchIndex + 1) % currentState.searchMatches.length;
@@ -6822,15 +6830,15 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6822
6830
  });
6823
6831
  }
6824
6832
  }, [store, focusCell]);
6825
- const getIsSearchMatch = React$15.useCallback((rowIndex, columnId) => {
6833
+ const getIsSearchMatch = React$22.useCallback((rowIndex, columnId) => {
6826
6834
  return searchMatches.some((match) => match.rowIndex === rowIndex && match.columnId === columnId);
6827
6835
  }, [searchMatches]);
6828
- const getIsActiveSearchMatch = React$15.useCallback((rowIndex, columnId) => {
6836
+ const getIsActiveSearchMatch = React$22.useCallback((rowIndex, columnId) => {
6829
6837
  if (matchIndex < 0) return false;
6830
6838
  const currentMatch = searchMatches[matchIndex];
6831
6839
  return currentMatch?.rowIndex === rowIndex && currentMatch?.columnId === columnId;
6832
6840
  }, [searchMatches, matchIndex]);
6833
- const blurCell = React$15.useCallback(() => {
6841
+ const blurCell = React$22.useCallback(() => {
6834
6842
  const currentState = store.getState();
6835
6843
  if (currentState.editingCell && document.activeElement instanceof HTMLElement) document.activeElement.blur();
6836
6844
  store.batch(() => {
@@ -6838,7 +6846,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6838
6846
  store.setState("editingCell", null);
6839
6847
  });
6840
6848
  }, [store]);
6841
- const onCellClick = React$15.useCallback((rowIndex, columnId, event) => {
6849
+ const onCellClick = React$22.useCallback((rowIndex, columnId, event) => {
6842
6850
  if (event?.button === 2) return;
6843
6851
  const currentState = store.getState();
6844
6852
  const currentFocused = currentState.focusedCell;
@@ -6886,11 +6894,11 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6886
6894
  selectRange,
6887
6895
  clearSelection
6888
6896
  ]);
6889
- const onCellDoubleClick = React$15.useCallback((rowIndex, columnId, event) => {
6897
+ const onCellDoubleClick = React$22.useCallback((rowIndex, columnId, event) => {
6890
6898
  if (event?.defaultPrevented) return;
6891
6899
  onCellEditingStart(rowIndex, columnId);
6892
6900
  }, [onCellEditingStart]);
6893
- const onCellMouseDown = React$15.useCallback((rowIndex, columnId, event) => {
6901
+ const onCellMouseDown = React$22.useCallback((rowIndex, columnId, event) => {
6894
6902
  if (event.button === 2) return;
6895
6903
  event.preventDefault();
6896
6904
  if (!event.ctrlKey && !event.metaKey && !event.shiftKey) store.batch(() => {
@@ -6911,7 +6919,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6911
6919
  store.setState("rowSelection", {});
6912
6920
  });
6913
6921
  }, [store]);
6914
- const onCellMouseEnter = React$15.useCallback((rowIndex, columnId, _event) => {
6922
+ const onCellMouseEnter = React$22.useCallback((rowIndex, columnId, _event) => {
6915
6923
  const currentState = store.getState();
6916
6924
  if (currentState.selectionState.isSelecting && currentState.selectionState.selectionRange) {
6917
6925
  const start = currentState.selectionState.selectionRange.start;
@@ -6927,14 +6935,14 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6927
6935
  selectRange,
6928
6936
  focusCell
6929
6937
  ]);
6930
- const onCellMouseUp = React$15.useCallback(() => {
6938
+ const onCellMouseUp = React$22.useCallback(() => {
6931
6939
  const currentState = store.getState();
6932
6940
  store.setState("selectionState", {
6933
6941
  ...currentState.selectionState,
6934
6942
  isSelecting: false
6935
6943
  });
6936
6944
  }, [store]);
6937
- const onCellContextMenu = React$15.useCallback((rowIndex, columnId, event) => {
6945
+ const onCellContextMenu = React$22.useCallback((rowIndex, columnId, event) => {
6938
6946
  event.preventDefault();
6939
6947
  event.stopPropagation();
6940
6948
  const currentState = store.getState();
@@ -6966,7 +6974,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6966
6974
  y: event.clientY
6967
6975
  });
6968
6976
  }, [store]);
6969
- const onContextMenuOpenChange = React$15.useCallback((open) => {
6977
+ const onContextMenuOpenChange = React$22.useCallback((open) => {
6970
6978
  if (!open) {
6971
6979
  const currentMenu = store.getState().contextMenu;
6972
6980
  store.setState("contextMenu", {
@@ -6976,7 +6984,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
6976
6984
  });
6977
6985
  }
6978
6986
  }, [store]);
6979
- const onDataGridKeyDown = React$15.useCallback((event) => {
6987
+ const onDataGridKeyDown = React$22.useCallback((event) => {
6980
6988
  const currentState = store.getState();
6981
6989
  const { key, ctrlKey, metaKey, shiftKey } = event;
6982
6990
  const isCtrlPressed = ctrlKey || metaKey;
@@ -7135,7 +7143,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7135
7143
  enableSearch,
7136
7144
  onCellEditingStart
7137
7145
  ]);
7138
- const onSortingChange = React$15.useCallback((updater) => {
7146
+ const onSortingChange = React$22.useCallback((updater) => {
7139
7147
  if (manualSorting && externalOnSortingChange) externalOnSortingChange(updater);
7140
7148
  else {
7141
7149
  const currentState = store.getState();
@@ -7147,7 +7155,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7147
7155
  manualSorting,
7148
7156
  externalOnSortingChange
7149
7157
  ]);
7150
- const onRowSelectionChange = React$15.useCallback((updater) => {
7158
+ const onRowSelectionChange = React$22.useCallback((updater) => {
7151
7159
  const currentState = store.getState();
7152
7160
  const newRowSelection = typeof updater === "function" ? updater(currentState.rowSelection) : updater;
7153
7161
  const selectedRows = Object.keys(newRowSelection).filter((key) => newRowSelection[key]);
@@ -7169,7 +7177,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7169
7177
  store.setState("editingCell", null);
7170
7178
  });
7171
7179
  }, [store, columnIds]);
7172
- const onRowSelect = React$15.useCallback((rowIndex, selected, shiftKey) => {
7180
+ const onRowSelect = React$22.useCallback((rowIndex, selected, shiftKey) => {
7173
7181
  const currentState = store.getState();
7174
7182
  const rows = tableRef.current?.getRowModel().rows ?? [];
7175
7183
  const currentRow = rows[rowIndex];
@@ -7189,12 +7197,12 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7189
7197
  });
7190
7198
  store.setState("lastClickedRowIndex", rowIndex);
7191
7199
  }, [store, onRowSelectionChange]);
7192
- const onRowHeightChange = React$15.useCallback((updater) => {
7200
+ const onRowHeightChange = React$22.useCallback((updater) => {
7193
7201
  const currentState = store.getState();
7194
7202
  const newRowHeight = typeof updater === "function" ? updater(currentState.rowHeight) : updater;
7195
7203
  store.setState("rowHeight", newRowHeight);
7196
7204
  }, [store]);
7197
- const onColumnClick = React$15.useCallback((columnId) => {
7205
+ const onColumnClick = React$22.useCallback((columnId) => {
7198
7206
  if (!enableColumnSelection) {
7199
7207
  clearSelection();
7200
7208
  return;
@@ -7205,13 +7213,13 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7205
7213
  selectColumn,
7206
7214
  clearSelection
7207
7215
  ]);
7208
- const defaultColumn = React$15.useMemo(() => ({
7216
+ const defaultColumn = React$22.useMemo(() => ({
7209
7217
  cell: DataGridCell,
7210
7218
  minSize: MIN_COLUMN_SIZE,
7211
7219
  maxSize: MAX_COLUMN_SIZE
7212
7220
  }), []);
7213
7221
  const effectiveSorting = manualSorting && externalSorting ? externalSorting : sorting;
7214
- const tableOptions = React$15.useMemo(() => ({
7222
+ const tableOptions = React$22.useMemo(() => ({
7215
7223
  ...dataGridPropsRef.current,
7216
7224
  data,
7217
7225
  columns,
@@ -7303,7 +7311,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7303
7311
  if (!tableRef.current) tableRef.current = table;
7304
7312
  const columnSizing = table.getState().columnSizing;
7305
7313
  const columnVisibility = table.getState().columnVisibility;
7306
- const columnSizeVars = React$15.useMemo(() => {
7314
+ const columnSizeVars = React$22.useMemo(() => {
7307
7315
  const headers = table.getFlatHeaders();
7308
7316
  const colSizes = {};
7309
7317
  for (const header of headers) {
@@ -7345,7 +7353,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7345
7353
  }
7346
7354
  });
7347
7355
  if (!rowVirtualizerRef.current) rowVirtualizerRef.current = rowVirtualizer;
7348
- const onScrollToRow = React$15.useCallback((opts) => {
7356
+ const onScrollToRow = React$22.useCallback((opts) => {
7349
7357
  const rowIndex = opts?.rowIndex ?? 0;
7350
7358
  const columnId = opts?.columnId;
7351
7359
  rowVirtualizer.scrollToIndex(rowIndex, { align: "center" });
@@ -7369,7 +7377,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7369
7377
  getNavigableColumnIds,
7370
7378
  store
7371
7379
  ]);
7372
- const onRowAdd = React$15.useCallback(async (event) => {
7380
+ const onRowAdd = React$22.useCallback(async (event) => {
7373
7381
  if (!onRowAddProp) return;
7374
7382
  const result = await onRowAddProp(event);
7375
7383
  if (event?.defaultPrevented || result === null) return;
@@ -7385,7 +7393,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7385
7393
  }
7386
7394
  onScrollToRow({ rowIndex: rows.length });
7387
7395
  }, [onRowAddProp, onScrollToRow]);
7388
- useIsomorphicLayoutEffect(() => {
7396
+ useIsomorphicLayoutEffect$1(() => {
7389
7397
  if (!storageKey) return;
7390
7398
  try {
7391
7399
  const state = table.getState();
@@ -7402,7 +7410,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7402
7410
  table.getState().columnVisibility,
7403
7411
  table.getState().columnPinning
7404
7412
  ]);
7405
- const searchState = React$15.useMemo(() => {
7413
+ const searchState = React$22.useMemo(() => {
7406
7414
  if (!enableSearch) return void 0;
7407
7415
  return {
7408
7416
  searchMatches,
@@ -7427,7 +7435,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7427
7435
  onNavigateToNextMatch,
7428
7436
  onNavigateToPrevMatch
7429
7437
  ]);
7430
- React$15.useEffect(() => {
7438
+ React$22.useEffect(() => {
7431
7439
  const dataGridElement = dataGridRef.current;
7432
7440
  if (!dataGridElement) return;
7433
7441
  dataGridElement.addEventListener("keydown", onDataGridKeyDown);
@@ -7435,7 +7443,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7435
7443
  dataGridElement.removeEventListener("keydown", onDataGridKeyDown);
7436
7444
  };
7437
7445
  }, [onDataGridKeyDown]);
7438
- React$15.useEffect(() => {
7446
+ React$22.useEffect(() => {
7439
7447
  function onGlobalKeyDown(event) {
7440
7448
  const dataGridElement = dataGridRef.current;
7441
7449
  if (!dataGridElement) return;
@@ -7479,7 +7487,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7479
7487
  store,
7480
7488
  clearSelection
7481
7489
  ]);
7482
- React$15.useEffect(() => {
7490
+ React$22.useEffect(() => {
7483
7491
  const currentState = store.getState();
7484
7492
  if (autoFocus && data.length > 0 && columns.length > 0 && !currentState.focusedCell) {
7485
7493
  const _nav = getNavigableColumnIds();
@@ -7505,7 +7513,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7505
7513
  getNavigableColumnIds,
7506
7514
  focusCell
7507
7515
  ]);
7508
- React$15.useEffect(() => {
7516
+ React$22.useEffect(() => {
7509
7517
  function onOutsideClick(event) {
7510
7518
  if (event.button === 2) return;
7511
7519
  if (dataGridRef.current && !dataGridRef.current.contains(event.target)) {
@@ -7527,7 +7535,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7527
7535
  blurCell,
7528
7536
  clearSelection
7529
7537
  ]);
7530
- React$15.useEffect(() => {
7538
+ React$22.useEffect(() => {
7531
7539
  function onCleanup() {
7532
7540
  document.removeEventListener("selectstart", preventSelection);
7533
7541
  document.removeEventListener("contextmenu", preventContextMenu);
@@ -7552,7 +7560,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7552
7560
  onUnsubscribe();
7553
7561
  };
7554
7562
  }, [store]);
7555
- useIsomorphicLayoutEffect(() => {
7563
+ useIsomorphicLayoutEffect$1(() => {
7556
7564
  const rafId = requestAnimationFrame(() => {
7557
7565
  rowVirtualizer.measure();
7558
7566
  });
@@ -7587,7 +7595,7 @@ function useDataGrid({ columns, data, onDataChange, onRowAdd: onRowAddProp, onRo
7587
7595
  //#endregion
7588
7596
  //#region src/date-picker/date-picker.tsx
7589
7597
  function DatePickerDemo() {
7590
- const [date, setDate] = React$14.useState();
7598
+ const [date, setDate] = React$21.useState();
7591
7599
  return /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
7592
7600
  asChild: true,
7593
7601
  children: /* @__PURE__ */ jsxs(Button, {
@@ -7617,13 +7625,13 @@ Drawer.displayName = "Drawer";
7617
7625
  const DrawerTrigger = Drawer$1.Trigger;
7618
7626
  const DrawerPortal = Drawer$1.Portal;
7619
7627
  const DrawerClose = Drawer$1.Close;
7620
- const DrawerOverlay = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
7628
+ const DrawerOverlay = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Overlay, {
7621
7629
  ref,
7622
7630
  className: cn("fixed inset-0 z-50 bg-black/80", className),
7623
7631
  ...props
7624
7632
  }));
7625
7633
  DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
7626
- const DrawerContent = React$13.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
7634
+ const DrawerContent = React$20.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Drawer$1.Content, {
7627
7635
  ref,
7628
7636
  className: cn("fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background", className),
7629
7637
  ...props,
@@ -7640,13 +7648,13 @@ const DrawerFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
7640
7648
  ...props
7641
7649
  });
7642
7650
  DrawerFooter.displayName = "DrawerFooter";
7643
- const DrawerTitle = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
7651
+ const DrawerTitle = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Title, {
7644
7652
  ref,
7645
7653
  className: cn("text-lg font-semibold leading-none tracking-tight", className),
7646
7654
  ...props
7647
7655
  }));
7648
7656
  DrawerTitle.displayName = Drawer$1.Title.displayName;
7649
- const DrawerDescription = React$13.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
7657
+ const DrawerDescription = React$20.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(Drawer$1.Description, {
7650
7658
  ref,
7651
7659
  className: cn("text-sm text-muted-foreground", className),
7652
7660
  ...props
@@ -7776,8 +7784,8 @@ function FieldError({ className, children, errors,...props }) {
7776
7784
  //#endregion
7777
7785
  //#region src/hooks/use-is-mobile.ts
7778
7786
  function useIsMobile(mobileBreakpoint = 768) {
7779
- const [isMobile, setIsMobile] = React$12.useState(false);
7780
- React$12.useEffect(() => {
7787
+ const [isMobile, setIsMobile] = React$19.useState(false);
7788
+ React$19.useEffect(() => {
7781
7789
  const mql = globalThis.matchMedia(`(max-width: ${mobileBreakpoint - 1}px)`);
7782
7790
  const onChange = () => {
7783
7791
  setIsMobile(globalThis.innerWidth < mobileBreakpoint);
@@ -7921,36 +7929,36 @@ const coordinateGetter = (event, { context }) => {
7921
7929
  }
7922
7930
  return void 0;
7923
7931
  };
7924
- const ROOT_NAME = "Kanban";
7932
+ const ROOT_NAME$1 = "Kanban";
7925
7933
  const BOARD_NAME = "KanbanBoard";
7926
7934
  const COLUMN_NAME = "KanbanColumn";
7927
7935
  const COLUMN_HANDLE_NAME = "KanbanColumnHandle";
7928
- const ITEM_NAME = "KanbanItem";
7936
+ const ITEM_NAME$1 = "KanbanItem";
7929
7937
  const ITEM_HANDLE_NAME = "KanbanItemHandle";
7930
7938
  const OVERLAY_NAME = "KanbanOverlay";
7931
- const KanbanContext = React$11.createContext(null);
7939
+ const KanbanContext = React$18.createContext(null);
7932
7940
  function useKanbanContext(consumerName) {
7933
- const context = React$11.useContext(KanbanContext);
7934
- if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
7941
+ const context = React$18.useContext(KanbanContext);
7942
+ if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME$1}\``);
7935
7943
  return context;
7936
7944
  }
7937
7945
  function KanbanRoot(props) {
7938
7946
  const { value, onValueChange, modifiers, strategy = verticalListSortingStrategy, orientation = "horizontal", onMove, getItemValue: getItemValueProp, accessibility, flatCursor = false,...kanbanProps } = props;
7939
- const id = React$11.useId();
7940
- const [activeId, setActiveId] = React$11.useState(null);
7941
- const lastOverIdRef = React$11.useRef(null);
7942
- const hasMovedRef = React$11.useRef(false);
7947
+ const id = React$18.useId();
7948
+ const [activeId, setActiveId] = React$18.useState(null);
7949
+ const lastOverIdRef = React$18.useRef(null);
7950
+ const hasMovedRef = React$18.useRef(false);
7943
7951
  const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor), useSensor(KeyboardSensor, { coordinateGetter }));
7944
- const getItemValue = React$11.useCallback((item) => {
7952
+ const getItemValue = React$18.useCallback((item) => {
7945
7953
  if (typeof item === "object" && !getItemValueProp) throw new Error("`getItemValue` is required when using array of objects");
7946
7954
  return getItemValueProp ? getItemValueProp(item) : item;
7947
7955
  }, [getItemValueProp]);
7948
- const getColumn = React$11.useCallback((id$1) => {
7956
+ const getColumn = React$18.useCallback((id$1) => {
7949
7957
  if (id$1 in value) return id$1;
7950
7958
  for (const [columnId, items] of Object.entries(value)) if (items.some((item) => getItemValue(item) === id$1)) return columnId;
7951
7959
  return null;
7952
7960
  }, [value, getItemValue]);
7953
- const collisionDetection = React$11.useCallback((args) => {
7961
+ const collisionDetection = React$18.useCallback((args) => {
7954
7962
  if (activeId && activeId in value) return closestCenter({
7955
7963
  ...args,
7956
7964
  droppableContainers: args.droppableContainers.filter((container) => container.id in value)
@@ -7979,12 +7987,12 @@ function KanbanRoot(props) {
7979
7987
  value,
7980
7988
  getItemValue
7981
7989
  ]);
7982
- const onDragStart = React$11.useCallback((event) => {
7990
+ const onDragStart = React$18.useCallback((event) => {
7983
7991
  kanbanProps.onDragStart?.(event);
7984
7992
  if (event.activatorEvent.defaultPrevented) return;
7985
7993
  setActiveId(event.active.id);
7986
7994
  }, [kanbanProps]);
7987
- const onDragOver = React$11.useCallback((event) => {
7995
+ const onDragOver = React$18.useCallback((event) => {
7988
7996
  kanbanProps.onDragOver?.(event);
7989
7997
  if (event.activatorEvent.defaultPrevented) return;
7990
7998
  const { active, over } = event;
@@ -8025,7 +8033,7 @@ function KanbanRoot(props) {
8025
8033
  getItemValue,
8026
8034
  onValueChange
8027
8035
  ]);
8028
- const onDragEnd = React$11.useCallback((event) => {
8036
+ const onDragEnd = React$18.useCallback((event) => {
8029
8037
  kanbanProps.onDragEnd?.(event);
8030
8038
  if (event.activatorEvent.defaultPrevented) return;
8031
8039
  const { active, over } = event;
@@ -8088,13 +8096,13 @@ function KanbanRoot(props) {
8088
8096
  getColumn,
8089
8097
  getItemValue
8090
8098
  ]);
8091
- const onDragCancel = React$11.useCallback((event) => {
8099
+ const onDragCancel = React$18.useCallback((event) => {
8092
8100
  kanbanProps.onDragCancel?.(event);
8093
8101
  if (event.activatorEvent.defaultPrevented) return;
8094
8102
  setActiveId(null);
8095
8103
  hasMovedRef.current = false;
8096
8104
  }, [kanbanProps]);
8097
- const announcements = React$11.useMemo(() => ({
8105
+ const announcements = React$18.useMemo(() => ({
8098
8106
  onDragStart({ active }) {
8099
8107
  const isColumn = active.id in value;
8100
8108
  const itemType = isColumn ? "column" : "item";
@@ -8157,7 +8165,7 @@ function KanbanRoot(props) {
8157
8165
  getColumn,
8158
8166
  getItemValue
8159
8167
  ]);
8160
- const contextValue = React$11.useMemo(() => ({
8168
+ const contextValue = React$18.useMemo(() => ({
8161
8169
  id,
8162
8170
  items: value,
8163
8171
  modifiers,
@@ -8202,11 +8210,11 @@ function KanbanRoot(props) {
8202
8210
  })
8203
8211
  });
8204
8212
  }
8205
- const KanbanBoardContext = React$11.createContext(false);
8213
+ const KanbanBoardContext = React$18.createContext(false);
8206
8214
  function KanbanBoard(props) {
8207
8215
  const { asChild, className, ref,...boardProps } = props;
8208
8216
  const context = useKanbanContext(BOARD_NAME);
8209
- const columns = React$11.useMemo(() => {
8217
+ const columns = React$18.useMemo(() => {
8210
8218
  return Object.keys(context.items);
8211
8219
  }, [context.items]);
8212
8220
  const BoardPrimitive = asChild ? Slot : "div";
@@ -8226,9 +8234,9 @@ function KanbanBoard(props) {
8226
8234
  })
8227
8235
  });
8228
8236
  }
8229
- const KanbanColumnContext = React$11.createContext(null);
8237
+ const KanbanColumnContext = React$18.createContext(null);
8230
8238
  function useKanbanColumnContext(consumerName) {
8231
- const context = React$11.useContext(KanbanColumnContext);
8239
+ const context = React$18.useContext(KanbanColumnContext);
8232
8240
  if (!context) throw new Error(`\`${consumerName}\` must be used within \`${COLUMN_NAME}\``);
8233
8241
  return context;
8234
8242
  }
@@ -8238,10 +8246,10 @@ const animateLayoutChanges = (args) => defaultAnimateLayoutChanges({
8238
8246
  });
8239
8247
  function KanbanColumn(props) {
8240
8248
  const { value, asChild, asHandle, disabled, className, style, ref,...columnProps } = props;
8241
- const id = React$11.useId();
8249
+ const id = React$18.useId();
8242
8250
  const context = useKanbanContext(COLUMN_NAME);
8243
- const inBoard = React$11.useContext(KanbanBoardContext);
8244
- const inOverlay = React$11.useContext(KanbanOverlayContext);
8251
+ const inBoard = React$18.useContext(KanbanBoardContext);
8252
+ const inOverlay = React$18.useContext(KanbanOverlayContext);
8245
8253
  if (!inBoard && !inOverlay) throw new Error(`\`${COLUMN_NAME}\` must be used within \`${BOARD_NAME}\` or \`${OVERLAY_NAME}\``);
8246
8254
  if (value === "") throw new Error(`\`${COLUMN_NAME}\` value cannot be an empty string`);
8247
8255
  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
@@ -8253,7 +8261,7 @@ function KanbanColumn(props) {
8253
8261
  if (disabled) return;
8254
8262
  setNodeRef(node);
8255
8263
  });
8256
- const composedStyle = React$11.useMemo(() => {
8264
+ const composedStyle = React$18.useMemo(() => {
8257
8265
  return {
8258
8266
  transform: CSS.Transform.toString(transform),
8259
8267
  transition,
@@ -8264,11 +8272,11 @@ function KanbanColumn(props) {
8264
8272
  transition,
8265
8273
  style
8266
8274
  ]);
8267
- const items = React$11.useMemo(() => {
8275
+ const items = React$18.useMemo(() => {
8268
8276
  const items$1 = context.items[value] ?? [];
8269
8277
  return items$1.map((item) => context.getItemValue(item));
8270
8278
  }, [context, value]);
8271
- const columnContext = React$11.useMemo(() => ({
8279
+ const columnContext = React$18.useMemo(() => ({
8272
8280
  id,
8273
8281
  attributes,
8274
8282
  listeners,
@@ -8335,29 +8343,29 @@ function KanbanColumnHandle(props) {
8335
8343
  disabled: isDisabled
8336
8344
  });
8337
8345
  }
8338
- const KanbanItemContext = React$11.createContext(null);
8346
+ const KanbanItemContext = React$18.createContext(null);
8339
8347
  function useKanbanItemContext(consumerName) {
8340
- const context = React$11.useContext(KanbanItemContext);
8341
- if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
8348
+ const context = React$18.useContext(KanbanItemContext);
8349
+ if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME$1}\``);
8342
8350
  return context;
8343
8351
  }
8344
8352
  function KanbanItem(props) {
8345
8353
  const { value, style, asHandle, asChild, disabled, className, ref,...itemProps } = props;
8346
- const id = React$11.useId();
8347
- const context = useKanbanContext(ITEM_NAME);
8348
- const inBoard = React$11.useContext(KanbanBoardContext);
8349
- const inOverlay = React$11.useContext(KanbanOverlayContext);
8350
- if (!inBoard && !inOverlay) throw new Error(`\`${ITEM_NAME}\` must be used within \`${BOARD_NAME}\``);
8354
+ const id = React$18.useId();
8355
+ const context = useKanbanContext(ITEM_NAME$1);
8356
+ const inBoard = React$18.useContext(KanbanBoardContext);
8357
+ const inOverlay = React$18.useContext(KanbanOverlayContext);
8358
+ if (!inBoard && !inOverlay) throw new Error(`\`${ITEM_NAME$1}\` must be used within \`${BOARD_NAME}\``);
8351
8359
  const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
8352
8360
  id: value,
8353
8361
  disabled
8354
8362
  });
8355
- if (value === "") throw new Error(`\`${ITEM_NAME}\` value cannot be an empty string`);
8363
+ if (value === "") throw new Error(`\`${ITEM_NAME$1}\` value cannot be an empty string`);
8356
8364
  const composedRef = useComposedRefs(ref, (node) => {
8357
8365
  if (disabled) return;
8358
8366
  setNodeRef(node);
8359
8367
  });
8360
- const composedStyle = React$11.useMemo(() => {
8368
+ const composedStyle = React$18.useMemo(() => {
8361
8369
  return {
8362
8370
  transform: CSS.Transform.toString(transform),
8363
8371
  transition,
@@ -8368,7 +8376,7 @@ function KanbanItem(props) {
8368
8376
  transition,
8369
8377
  style
8370
8378
  ]);
8371
- const itemContext = React$11.useMemo(() => ({
8379
+ const itemContext = React$18.useMemo(() => ({
8372
8380
  id,
8373
8381
  attributes,
8374
8382
  listeners,
@@ -8431,13 +8439,13 @@ function KanbanItemHandle(props) {
8431
8439
  disabled: isDisabled
8432
8440
  });
8433
8441
  }
8434
- const KanbanOverlayContext = React$11.createContext(false);
8442
+ const KanbanOverlayContext = React$18.createContext(false);
8435
8443
  const dropAnimation = { sideEffects: defaultDropAnimationSideEffects({ styles: { active: { opacity: "0.4" } } }) };
8436
8444
  function KanbanOverlay(props) {
8437
8445
  const { container: containerProp, children,...overlayProps } = props;
8438
8446
  const context = useKanbanContext(OVERLAY_NAME);
8439
- const [mounted, setMounted] = React$11.useState(false);
8440
- React$11.useLayoutEffect(() => setMounted(true), []);
8447
+ const [mounted, setMounted] = React$18.useState(false);
8448
+ React$18.useLayoutEffect(() => setMounted(true), []);
8441
8449
  const container = containerProp ?? (mounted ? globalThis.document?.body : null);
8442
8450
  if (!container) return null;
8443
8451
  const variant = context.activeId && context.activeId in context.items ? "column" : "item";
@@ -8573,32 +8581,32 @@ const MenubarGroup = MenubarPrimitive.Group;
8573
8581
  const MenubarPortal = MenubarPrimitive.Portal;
8574
8582
  const MenubarSub = MenubarPrimitive.Sub;
8575
8583
  const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
8576
- const Menubar = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
8584
+ const Menubar = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Root, {
8577
8585
  ref,
8578
8586
  className: cn("flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm", className),
8579
8587
  ...props
8580
8588
  }));
8581
8589
  Menubar.displayName = MenubarPrimitive.Root.displayName;
8582
- const MenubarTrigger = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
8590
+ const MenubarTrigger = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Trigger, {
8583
8591
  ref,
8584
8592
  className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", className),
8585
8593
  ...props
8586
8594
  }));
8587
8595
  MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
8588
- const MenubarSubTrigger = React$10.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
8596
+ const MenubarSubTrigger = React$17.forwardRef(({ className, inset, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.SubTrigger, {
8589
8597
  ref,
8590
8598
  className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground", inset && "pl-8", className),
8591
8599
  ...props,
8592
8600
  children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto h-4 w-4" })]
8593
8601
  }));
8594
8602
  MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
8595
- const MenubarSubContent = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
8603
+ const MenubarSubContent = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.SubContent, {
8596
8604
  ref,
8597
8605
  className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
8598
8606
  ...props
8599
8607
  }));
8600
8608
  MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
8601
- const MenubarContent = React$10.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
8609
+ const MenubarContent = React$17.forwardRef(({ className, align = "start", alignOffset = -4, sideOffset = 8,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(MenubarPrimitive.Content, {
8602
8610
  ref,
8603
8611
  align,
8604
8612
  alignOffset,
@@ -8607,13 +8615,13 @@ const MenubarContent = React$10.forwardRef(({ className, align = "start", alignO
8607
8615
  ...props
8608
8616
  }) }));
8609
8617
  MenubarContent.displayName = MenubarPrimitive.Content.displayName;
8610
- const MenubarItem = React$10.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
8618
+ const MenubarItem = React$17.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Item, {
8611
8619
  ref,
8612
8620
  className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className),
8613
8621
  ...props
8614
8622
  }));
8615
8623
  MenubarItem.displayName = MenubarPrimitive.Item.displayName;
8616
- const MenubarCheckboxItem = React$10.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
8624
+ const MenubarCheckboxItem = React$17.forwardRef(({ className, children, checked,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.CheckboxItem, {
8617
8625
  ref,
8618
8626
  className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
8619
8627
  checked,
@@ -8624,7 +8632,7 @@ const MenubarCheckboxItem = React$10.forwardRef(({ className, children, checked,
8624
8632
  }), children]
8625
8633
  }));
8626
8634
  MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
8627
- const MenubarRadioItem = React$10.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
8635
+ const MenubarRadioItem = React$17.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(MenubarPrimitive.RadioItem, {
8628
8636
  ref,
8629
8637
  className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
8630
8638
  ...props,
@@ -8634,13 +8642,13 @@ const MenubarRadioItem = React$10.forwardRef(({ className, children,...props },
8634
8642
  }), children]
8635
8643
  }));
8636
8644
  MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
8637
- const MenubarLabel = React$10.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
8645
+ const MenubarLabel = React$17.forwardRef(({ className, inset,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Label, {
8638
8646
  ref,
8639
8647
  className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
8640
8648
  ...props
8641
8649
  }));
8642
8650
  MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
8643
- const MenubarSeparator = React$10.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
8651
+ const MenubarSeparator = React$17.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Separator, {
8644
8652
  ref,
8645
8653
  className: cn("-mx-1 my-1 h-px bg-muted", className),
8646
8654
  ...props
@@ -8667,15 +8675,26 @@ const Modal = ({ title = "", subtitle, isOpen, showCloseButton = true, setIsOpen
8667
8675
  __e2e_test_id__,
8668
8676
  onInteractOutside: preventClickOutsideToDismiss ? (e) => e.preventDefault() : void 0,
8669
8677
  onEscapeKeyDown: preventClickOutsideToDismiss ? (e) => e.preventDefault() : void 0,
8678
+ "aria-describedby": subtitle ? void 0 : "modal-content",
8670
8679
  children: [
8671
8680
  /* @__PURE__ */ jsxs(DialogHeader, {
8672
8681
  className: cn("flex flex-row flex-shrink-0 items-center gap-2 p-3 min-h-10 border-b-1 border-(--discreet-border)", showCloseButton ? "pr-12" : "", subtitle ? "pb-0" : ""),
8673
8682
  children: [/* @__PURE__ */ jsxs("div", {
8674
8683
  className: "overflow-hidden",
8675
- children: [title && /* @__PURE__ */ jsx(DialogTitle, {
8676
- className: "text-xl overflow-hidden text-ellipsis whitespace-nowrap",
8677
- children: title
8678
- }), subtitle]
8684
+ children: [
8685
+ title && /* @__PURE__ */ jsx(DialogTitle, {
8686
+ className: "text-xl overflow-hidden text-ellipsis whitespace-nowrap",
8687
+ children: title
8688
+ }),
8689
+ subtitle && /* @__PURE__ */ jsx(DialogDescription, {
8690
+ asChild: true,
8691
+ children: subtitle
8692
+ }),
8693
+ !subtitle && /* @__PURE__ */ jsx(DialogDescription, {
8694
+ className: "sr-only",
8695
+ children: "Modal content"
8696
+ })
8697
+ ]
8679
8698
  }), controls.length > 0 && /* @__PURE__ */ jsx("div", {
8680
8699
  className: "flex flex-grow justify-end items-baseline gap-2 whitespace-nowrap flex-1",
8681
8700
  children: controls
@@ -8683,6 +8702,7 @@ const Modal = ({ title = "", subtitle, isOpen, showCloseButton = true, setIsOpen
8683
8702
  }),
8684
8703
  /* @__PURE__ */ jsx("div", {
8685
8704
  className: "max-h-full h-full overflow-auto flex-grow",
8705
+ id: "modal-content",
8686
8706
  children
8687
8707
  }),
8688
8708
  footer && /* @__PURE__ */ jsx(DialogFooter, {
@@ -8777,13 +8797,13 @@ const Pagination = ({ className,...props }) => /* @__PURE__ */ jsx("nav", {
8777
8797
  ...props
8778
8798
  });
8779
8799
  Pagination.displayName = "Pagination";
8780
- const PaginationContent = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
8800
+ const PaginationContent = React$16.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("ul", {
8781
8801
  ref,
8782
8802
  className: cn("flex flex-row items-center gap-1", className),
8783
8803
  ...props
8784
8804
  }));
8785
8805
  PaginationContent.displayName = "PaginationContent";
8786
- const PaginationItem = React$9.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
8806
+ const PaginationItem = React$16.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx("li", {
8787
8807
  ref,
8788
8808
  className: cn("", className),
8789
8809
  ...props
@@ -8905,7 +8925,7 @@ const ResizableHandle = ({ withHandle, className,...props }) => /* @__PURE__ */
8905
8925
 
8906
8926
  //#endregion
8907
8927
  //#region src/scroll-area/scroll-area.tsx
8908
- const ScrollArea = React$8.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
8928
+ const ScrollArea = React$15.forwardRef(({ className, children,...props }, ref) => /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, {
8909
8929
  ref,
8910
8930
  className: cn("relative overflow-hidden", className),
8911
8931
  ...props,
@@ -8919,7 +8939,7 @@ const ScrollArea = React$8.forwardRef(({ className, children,...props }, ref) =>
8919
8939
  ]
8920
8940
  }));
8921
8941
  ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
8922
- const ScrollBar = React$8.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
8942
+ const ScrollBar = React$15.forwardRef(({ className, orientation = "vertical",...props }, ref) => /* @__PURE__ */ jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, {
8923
8943
  ref,
8924
8944
  orientation,
8925
8945
  className: cn("flex touch-none select-none transition-colors", orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]", className),
@@ -8934,7 +8954,7 @@ const Sheet = SheetPrimitive.Root;
8934
8954
  const SheetTrigger = SheetPrimitive.Trigger;
8935
8955
  const SheetClose = SheetPrimitive.Close;
8936
8956
  const SheetPortal = SheetPrimitive.Portal;
8937
- const SheetOverlay = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
8957
+ const SheetOverlay = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Overlay, {
8938
8958
  className: cn("fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className),
8939
8959
  ...props,
8940
8960
  ref
@@ -8949,7 +8969,7 @@ const sheetVariants = cva("fixed z-50 gap-4 bg-background p-6 shadow-lg transiti
8949
8969
  } },
8950
8970
  defaultVariants: { side: "right" }
8951
8971
  });
8952
- const SheetContent = React$7.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
8972
+ const SheetContent = React$14.forwardRef(({ side = "right", className, children, __e2e_test_id__,...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(SheetPrimitive.Content, {
8953
8973
  ref,
8954
8974
  className: cn(sheetVariants({ side }), className),
8955
8975
  "data-test-id": __e2e_test_id__,
@@ -8974,13 +8994,13 @@ const SheetFooter = ({ className,...props }) => /* @__PURE__ */ jsx("div", {
8974
8994
  ...props
8975
8995
  });
8976
8996
  SheetFooter.displayName = "SheetFooter";
8977
- const SheetTitle = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
8997
+ const SheetTitle = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Title, {
8978
8998
  ref,
8979
8999
  className: cn("text-lg font-semibold text-foreground", className),
8980
9000
  ...props
8981
9001
  }));
8982
9002
  SheetTitle.displayName = SheetPrimitive.Title.displayName;
8983
- const SheetDescription = React$7.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
9003
+ const SheetDescription = React$14.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SheetPrimitive.Description, {
8984
9004
  ref,
8985
9005
  className: cn("text-sm text-muted-foreground", className),
8986
9006
  ...props
@@ -8988,105 +9008,295 @@ const SheetDescription = React$7.forwardRef(({ className,...props }, ref) => /*
8988
9008
  SheetDescription.displayName = SheetPrimitive.Description.displayName;
8989
9009
 
8990
9010
  //#endregion
8991
- //#region src/sidebar/sidebar.tsx
9011
+ //#region src/sidebar/sidebar-context-provider.tsx
8992
9012
  const SIDEBAR_WIDTH = "16rem";
8993
9013
  const SIDEBAR_WIDTH_MOBILE = "18rem";
8994
9014
  const SIDEBAR_WIDTH_ICON = "3rem";
8995
9015
  const SIDEBAR_KEYBOARD_SHORTCUT = "b";
9016
+ const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = ".";
8996
9017
  const SIDEBAR_MIN_WIDTH = 200;
8997
9018
  const SIDEBAR_MAX_WIDTH = 600;
8998
- const SidebarContext = React$6.createContext(null);
8999
- const SidebarResizeContext = React$6.createContext(null);
9000
- function useSidebar() {
9001
- const context = React$6.useContext(SidebarContext);
9002
- if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
9003
- return context;
9004
- }
9005
- function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, className, style, children,...props }) {
9006
- const isMobile = useIsMobile();
9007
- const [openMobile, setOpenMobile] = React$6.useState(false);
9008
- const [isResizing, setIsResizing] = React$6.useState(false);
9009
- const [_open, _setOpen] = React$6.useState(defaultOpen);
9010
- const open = openProp ?? _open;
9011
- const setOpen = React$6.useCallback((value) => {
9012
- const openState = typeof value === "function" ? value(open) : value;
9013
- if (setOpenProp) setOpenProp(openState);
9014
- else _setOpen(openState);
9015
- }, [setOpenProp, open]);
9016
- const toggleSidebar = React$6.useCallback(() => {
9017
- return isMobile ? setOpenMobile((open$1) => !open$1) : setOpen((open$1) => !open$1);
9018
- }, [
9019
- isMobile,
9020
- setOpen,
9021
- setOpenMobile
9022
- ]);
9023
- React$6.useEffect(() => {
9024
- const handleKeyDown = (event) => {
9025
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
9026
- event.preventDefault();
9027
- toggleSidebar();
9028
- }
9029
- };
9030
- globalThis.addEventListener("keydown", handleKeyDown);
9031
- return () => globalThis.removeEventListener("keydown", handleKeyDown);
9032
- }, [toggleSidebar]);
9019
+ /**
9020
+ * Internal store context. Exported for use by `Sidebar` component in the same
9021
+ * package to build per-sidebar resize contexts.
9022
+ */
9023
+ const SidebarStoreContext = React$13.createContext(null);
9024
+ /**
9025
+ * Context that identifies which sidebar a component belongs to.
9026
+ * Set by `<Sidebar sidebarId="...">`, consumed by `useSidebar()`.
9027
+ */
9028
+ const SidebarIdContext = React$13.createContext("default");
9029
+ const SidebarResizeContext = React$13.createContext(null);
9030
+ /**
9031
+ * Returns the state and controls for a specific sidebar.
9032
+ *
9033
+ * @param sidebarId - Optional explicit sidebar ID. Falls back to the nearest
9034
+ * `SidebarIdContext` (set by the parent `<Sidebar>`), then to `"default"`.
9035
+ */
9036
+ function useSidebar(sidebarId) {
9037
+ const store = React$13.useContext(SidebarStoreContext);
9038
+ const ctxId = React$13.useContext(SidebarIdContext);
9039
+ const id = sidebarId ?? ctxId;
9040
+ if (!store) throw new Error("useSidebar must be used within a SidebarProvider.");
9041
+ const open = store.openStates[id] ?? store.defaultOpen;
9042
+ const openMobile = store.mobileStates[id] ?? false;
9043
+ const width = store.widthStates[id];
9044
+ const { isMobile, isResizing } = store;
9045
+ const setOpen = React$13.useCallback((value) => store.setOpen(id, value), [store.setOpen, id]);
9046
+ const setOpenMobile = React$13.useCallback((value) => store.setOpenMobile(id, value), [store.setOpenMobile, id]);
9047
+ const setWidth = React$13.useCallback((value) => store.setWidth(id, value), [store.setWidth, id]);
9048
+ const toggleSidebar = React$13.useCallback(() => {
9049
+ if (store.isMobile) store.setOpenMobile(id, !(store.mobileStates[id] ?? false));
9050
+ else store.setOpen(id, !(store.openStates[id] ?? store.defaultOpen));
9051
+ }, [store, id]);
9033
9052
  const state = open ? "expanded" : "collapsed";
9034
- const contextValue = React$6.useMemo(() => ({
9053
+ return React$13.useMemo(() => ({
9035
9054
  state,
9036
9055
  open,
9037
9056
  setOpen,
9038
- isMobile,
9039
9057
  openMobile,
9040
9058
  setOpenMobile,
9059
+ isMobile,
9041
9060
  toggleSidebar,
9042
- width: widthProp,
9061
+ width,
9062
+ setWidth,
9043
9063
  isResizing
9044
9064
  }), [
9045
9065
  state,
9046
9066
  open,
9047
9067
  setOpen,
9048
- isMobile,
9049
9068
  openMobile,
9050
9069
  setOpenMobile,
9070
+ isMobile,
9051
9071
  toggleSidebar,
9052
- widthProp,
9072
+ width,
9073
+ setWidth,
9053
9074
  isResizing
9054
9075
  ]);
9055
- const sidebarWidthValue = widthProp ? `${widthProp}px` : SIDEBAR_WIDTH;
9056
- return /* @__PURE__ */ jsx(SidebarContext.Provider, {
9057
- value: contextValue,
9058
- children: /* @__PURE__ */ jsx(SidebarResizeContext.Provider, {
9059
- value: {
9060
- onWidthChange,
9061
- minWidth,
9062
- maxWidth,
9063
- isResizing,
9064
- setIsResizing
9065
- },
9066
- children: /* @__PURE__ */ jsx(TooltipProvider, {
9067
- delayDuration: 0,
9068
- children: /* @__PURE__ */ jsx("div", {
9069
- "data-slot": "sidebar-wrapper",
9070
- style: {
9071
- "--sidebar-width": sidebarWidthValue,
9072
- "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
9073
- ...style
9074
- },
9075
- className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
9076
- ...props,
9077
- children
9078
- })
9076
+ }
9077
+ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, width: widthProp, onWidthChange, minWidth = SIDEBAR_MIN_WIDTH, maxWidth = SIDEBAR_MAX_WIDTH, storageKey, defaultOpenSidebars, defaultWidths, keyboardShortcuts, className, style, children,...props }) {
9078
+ const isMobile = useIsMobile();
9079
+ const [isResizing, setIsResizing] = React$13.useState(false);
9080
+ const storedRef = React$13.useRef(null);
9081
+ if (storedRef.current === null && storageKey) try {
9082
+ storedRef.current = JSON.parse(localStorage.getItem(storageKey) ?? "{}");
9083
+ } catch {
9084
+ storedRef.current = {};
9085
+ }
9086
+ const [openStates, setOpenStates] = React$13.useState(() => {
9087
+ const states = { default: defaultOpen };
9088
+ if (defaultOpenSidebars) Object.assign(states, defaultOpenSidebars);
9089
+ if (storedRef.current) {
9090
+ for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && "open" in data) states[id] = data.open;
9091
+ }
9092
+ return states;
9093
+ });
9094
+ const [mobileStates, setMobileStates] = React$13.useState({});
9095
+ React$13.useEffect(() => {
9096
+ if (openProp !== void 0) setOpenStates((prev) => prev["default"] === openProp ? prev : {
9097
+ ...prev,
9098
+ default: openProp
9099
+ });
9100
+ }, [openProp]);
9101
+ const effectiveOpenStates = React$13.useMemo(() => {
9102
+ if (openProp !== void 0) return {
9103
+ ...openStates,
9104
+ default: openProp
9105
+ };
9106
+ return openStates;
9107
+ }, [openStates, openProp]);
9108
+ const [widthStates, setWidthStates] = React$13.useState(() => {
9109
+ const states = {};
9110
+ if (widthProp !== void 0) states["default"] = widthProp;
9111
+ if (defaultWidths) Object.assign(states, defaultWidths);
9112
+ if (storedRef.current) {
9113
+ for (const [id, data] of Object.entries(storedRef.current)) if (data && typeof data === "object" && typeof data.width === "number") states[id] = data.width;
9114
+ }
9115
+ return states;
9116
+ });
9117
+ React$13.useEffect(() => {
9118
+ if (widthProp !== void 0) setWidthStates((prev) => prev["default"] === widthProp ? prev : {
9119
+ ...prev,
9120
+ default: widthProp
9121
+ });
9122
+ }, [widthProp]);
9123
+ const effectiveWidthStates = React$13.useMemo(() => {
9124
+ if (widthProp !== void 0) return {
9125
+ ...widthStates,
9126
+ default: widthProp
9127
+ };
9128
+ return widthStates;
9129
+ }, [widthStates, widthProp]);
9130
+ React$13.useEffect(() => {
9131
+ if (!storageKey) return;
9132
+ const toStore = {};
9133
+ const allIds = new Set([...Object.keys(openStates), ...Object.keys(widthStates)]);
9134
+ for (const id of allIds) toStore[id] = {
9135
+ open: openStates[id] ?? defaultOpen,
9136
+ ...widthStates[id] === void 0 ? {} : { width: widthStates[id] }
9137
+ };
9138
+ localStorage.setItem(storageKey, JSON.stringify(toStore));
9139
+ }, [
9140
+ storageKey,
9141
+ openStates,
9142
+ widthStates,
9143
+ defaultOpen
9144
+ ]);
9145
+ const setOpen = React$13.useCallback((id, open) => {
9146
+ if (id === "default" && setOpenProp) setOpenProp(open);
9147
+ setOpenStates((prev) => ({
9148
+ ...prev,
9149
+ [id]: open
9150
+ }));
9151
+ }, [setOpenProp]);
9152
+ const setOpenMobile = React$13.useCallback((id, open) => {
9153
+ setMobileStates((prev) => ({
9154
+ ...prev,
9155
+ [id]: open
9156
+ }));
9157
+ }, []);
9158
+ const setWidth = React$13.useCallback((id, width) => {
9159
+ if (id === "default" && onWidthChange) onWidthChange(width);
9160
+ setWidthStates((prev) => ({
9161
+ ...prev,
9162
+ [id]: width
9163
+ }));
9164
+ }, [onWidthChange]);
9165
+ const [sideMap, setSideMap] = React$13.useState({});
9166
+ const registerSide = React$13.useCallback((id, side) => {
9167
+ setSideMap((prev) => prev[id] === side ? prev : {
9168
+ ...prev,
9169
+ [id]: side
9170
+ });
9171
+ }, []);
9172
+ const effectiveOpenStatesRef = React$13.useRef(effectiveOpenStates);
9173
+ effectiveOpenStatesRef.current = effectiveOpenStates;
9174
+ const resolvedShortcuts = React$13.useMemo(() => {
9175
+ if (keyboardShortcuts === false) return {};
9176
+ return keyboardShortcuts ?? { [SIDEBAR_KEYBOARD_SHORTCUT]: "default" };
9177
+ }, [keyboardShortcuts]);
9178
+ React$13.useEffect(() => {
9179
+ const entries = Object.entries(resolvedShortcuts);
9180
+ if (entries.length === 0) return;
9181
+ const handleKeyDown = (event) => {
9182
+ if (!(event.metaKey || event.ctrlKey)) return;
9183
+ for (const [key, sidebarId] of entries) if (event.key === key) {
9184
+ event.preventDefault();
9185
+ if (isMobile) setMobileStates((prev) => ({
9186
+ ...prev,
9187
+ [sidebarId]: !(prev[sidebarId] ?? false)
9188
+ }));
9189
+ else {
9190
+ const currentOpen = effectiveOpenStatesRef.current[sidebarId] ?? defaultOpen;
9191
+ setOpen(sidebarId, !currentOpen);
9192
+ }
9193
+ return;
9194
+ }
9195
+ };
9196
+ globalThis.addEventListener("keydown", handleKeyDown);
9197
+ return () => globalThis.removeEventListener("keydown", handleKeyDown);
9198
+ }, [
9199
+ resolvedShortcuts,
9200
+ isMobile,
9201
+ defaultOpen,
9202
+ setOpen
9203
+ ]);
9204
+ const storeValue = React$13.useMemo(() => ({
9205
+ openStates: effectiveOpenStates,
9206
+ mobileStates,
9207
+ widthStates: effectiveWidthStates,
9208
+ sideMap,
9209
+ setOpen,
9210
+ setOpenMobile,
9211
+ setWidth,
9212
+ registerSide,
9213
+ isMobile,
9214
+ defaultOpen,
9215
+ isResizing,
9216
+ setIsResizing,
9217
+ providerMinWidth: minWidth,
9218
+ providerMaxWidth: maxWidth
9219
+ }), [
9220
+ effectiveOpenStates,
9221
+ mobileStates,
9222
+ effectiveWidthStates,
9223
+ sideMap,
9224
+ setOpen,
9225
+ setOpenMobile,
9226
+ setWidth,
9227
+ registerSide,
9228
+ isMobile,
9229
+ defaultOpen,
9230
+ isResizing,
9231
+ minWidth,
9232
+ maxWidth
9233
+ ]);
9234
+ const defaultWidth = effectiveWidthStates["default"];
9235
+ const sidebarWidthValue = defaultWidth ? `${defaultWidth}px` : SIDEBAR_WIDTH;
9236
+ return /* @__PURE__ */ jsx(SidebarStoreContext.Provider, {
9237
+ value: storeValue,
9238
+ children: /* @__PURE__ */ jsx(TooltipProvider, {
9239
+ delayDuration: 0,
9240
+ children: /* @__PURE__ */ jsx("div", {
9241
+ "data-slot": "sidebar-wrapper",
9242
+ style: {
9243
+ "--sidebar-width": sidebarWidthValue,
9244
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
9245
+ ...style
9246
+ },
9247
+ className: cn("group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full", className),
9248
+ ...props,
9249
+ children
9079
9250
  })
9080
9251
  })
9081
9252
  });
9082
9253
  }
9083
- function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children,...props }) {
9084
- const { isMobile, state, openMobile, setOpenMobile, isResizing } = useSidebar();
9254
+
9255
+ //#endregion
9256
+ //#region src/sidebar/sidebar.tsx
9257
+ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", sidebarId = "default", minWidth, maxWidth, className, children,...props }) {
9258
+ const { isMobile, state, openMobile, setOpenMobile, width, setWidth, isResizing } = useSidebar(sidebarId);
9259
+ const store = React$12.useContext(SidebarStoreContext);
9260
+ React$12.useEffect(() => {
9261
+ store?.registerSide(sidebarId, side);
9262
+ }, [
9263
+ store,
9264
+ sidebarId,
9265
+ side
9266
+ ]);
9267
+ const effectiveMinWidth = minWidth ?? store?.providerMinWidth ?? SIDEBAR_MIN_WIDTH;
9268
+ const effectiveMaxWidth = maxWidth ?? store?.providerMaxWidth ?? SIDEBAR_MAX_WIDTH;
9269
+ const resizeContextValue = React$12.useMemo(() => ({
9270
+ onWidthChange: setWidth,
9271
+ minWidth: effectiveMinWidth,
9272
+ maxWidth: effectiveMaxWidth,
9273
+ isResizing,
9274
+ setIsResizing: store?.setIsResizing ?? (() => {})
9275
+ }), [
9276
+ setWidth,
9277
+ effectiveMinWidth,
9278
+ effectiveMaxWidth,
9279
+ isResizing,
9280
+ store?.setIsResizing
9281
+ ]);
9282
+ const sidebarWidthValue = width ? `${width}px` : SIDEBAR_WIDTH;
9283
+ const sidebarStyle = {
9284
+ "--sidebar-width": sidebarWidthValue,
9285
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON
9286
+ };
9287
+ const wrappedChildren = /* @__PURE__ */ jsx(SidebarIdContext.Provider, {
9288
+ value: sidebarId,
9289
+ children: /* @__PURE__ */ jsx(SidebarResizeContext.Provider, {
9290
+ value: resizeContextValue,
9291
+ children
9292
+ })
9293
+ });
9085
9294
  if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
9086
9295
  "data-slot": "sidebar",
9296
+ style: sidebarStyle,
9087
9297
  className: cn("bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col", className),
9088
9298
  ...props,
9089
- children
9299
+ children: wrappedChildren
9090
9300
  });
9091
9301
  if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
9092
9302
  open: openMobile,
@@ -9104,12 +9314,13 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
9104
9314
  children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
9105
9315
  }), /* @__PURE__ */ jsx("div", {
9106
9316
  className: "flex h-full w-full flex-col",
9107
- children
9317
+ children: wrappedChildren
9108
9318
  })]
9109
9319
  })
9110
9320
  });
9111
9321
  return /* @__PURE__ */ jsxs("div", {
9112
9322
  className: "group peer text-sidebar-foreground hidden md:block",
9323
+ style: sidebarStyle,
9113
9324
  "data-state": state,
9114
9325
  "data-collapsible": state === "collapsed" ? collapsible : "",
9115
9326
  "data-variant": variant,
@@ -9133,14 +9344,19 @@ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas"
9133
9344
  "data-sidebar": "sidebar",
9134
9345
  "data-slot": "sidebar-inner",
9135
9346
  className: "bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm",
9136
- children
9347
+ children: wrappedChildren
9137
9348
  })
9138
9349
  })]
9139
9350
  });
9140
9351
  }
9141
- function SidebarTrigger({ className, onClick,...props }) {
9142
- const { toggleSidebar } = useSidebar();
9143
- return /* @__PURE__ */ jsxs(Button, {
9352
+ function SidebarTrigger({ className, onClick, sidebarId, children,...props }) {
9353
+ const { toggleSidebar } = useSidebar(sidebarId);
9354
+ const store = React$12.useContext(SidebarStoreContext);
9355
+ const ctxId = React$12.useContext(SidebarIdContext);
9356
+ const resolvedId = sidebarId ?? ctxId;
9357
+ const side = store?.sideMap[resolvedId];
9358
+ const Icon = side === "right" ? PanelRightIcon : PanelLeftIcon;
9359
+ return /* @__PURE__ */ jsx(Button, {
9144
9360
  "data-sidebar": "trigger",
9145
9361
  "data-slot": "sidebar-trigger",
9146
9362
  variant: "ghost",
@@ -9151,19 +9367,19 @@ function SidebarTrigger({ className, onClick,...props }) {
9151
9367
  toggleSidebar();
9152
9368
  },
9153
9369
  ...props,
9154
- children: [/* @__PURE__ */ jsx(PanelLeftIcon, {}), /* @__PURE__ */ jsx("span", {
9370
+ children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Icon, {}), /* @__PURE__ */ jsx("span", {
9155
9371
  className: "sr-only",
9156
9372
  children: "Toggle Sidebar"
9157
- })]
9373
+ })] })
9158
9374
  });
9159
9375
  }
9160
9376
  function SidebarRail({ className,...props }) {
9161
9377
  const { toggleSidebar } = useSidebar();
9162
- const resizeCtx = React$6.useContext(SidebarResizeContext);
9163
- const startXRef = React$6.useRef(0);
9164
- const hasDraggedRef = React$6.useRef(false);
9378
+ const resizeCtx = React$12.useContext(SidebarResizeContext);
9379
+ const startXRef = React$12.useRef(0);
9380
+ const hasDraggedRef = React$12.useRef(false);
9165
9381
  const isResizable = !!resizeCtx?.onWidthChange;
9166
- const handleMouseDown = React$6.useCallback((e) => {
9382
+ const handleMouseDown = React$12.useCallback((e) => {
9167
9383
  if (!isResizable || !resizeCtx) return;
9168
9384
  e.preventDefault();
9169
9385
  startXRef.current = e.clientX;
@@ -9193,7 +9409,7 @@ function SidebarRail({ className,...props }) {
9193
9409
  document.body.style.cursor = "col-resize";
9194
9410
  document.body.style.userSelect = "none";
9195
9411
  }, [isResizable, resizeCtx]);
9196
- const handleClick = React$6.useCallback(() => {
9412
+ const handleClick = React$12.useCallback(() => {
9197
9413
  if (hasDraggedRef.current) return;
9198
9414
  toggleSidebar();
9199
9415
  }, [toggleSidebar]);
@@ -9428,6 +9644,283 @@ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false,
9428
9644
  });
9429
9645
  }
9430
9646
 
9647
+ //#endregion
9648
+ //#region src/sidebar/sidebar-tab-context-provider.tsx
9649
+ const SidebarTabsContext = React$11.createContext(null);
9650
+ function SidebarTabsProvider({ children }) {
9651
+ const [tabsMap, setTabsMap] = React$11.useState({
9652
+ left: new Map(),
9653
+ right: new Map()
9654
+ });
9655
+ const [activeTab, setActiveTabState] = React$11.useState({
9656
+ left: null,
9657
+ right: null
9658
+ });
9659
+ const register = React$11.useCallback((side, tab) => {
9660
+ setTabsMap((prev) => {
9661
+ const next = new Map(prev[side]);
9662
+ next.set(tab.id, tab);
9663
+ return {
9664
+ ...prev,
9665
+ [side]: next
9666
+ };
9667
+ });
9668
+ setActiveTabState((prev) => {
9669
+ if (prev[side] === null) return {
9670
+ ...prev,
9671
+ [side]: tab.id
9672
+ };
9673
+ return prev;
9674
+ });
9675
+ }, []);
9676
+ const unregister = React$11.useCallback((side, tabId) => {
9677
+ setTabsMap((prev) => {
9678
+ const next = new Map(prev[side]);
9679
+ next.delete(tabId);
9680
+ return {
9681
+ ...prev,
9682
+ [side]: next
9683
+ };
9684
+ });
9685
+ setActiveTabState((prev) => {
9686
+ if (prev[side] === tabId) return {
9687
+ ...prev,
9688
+ [side]: null
9689
+ };
9690
+ return prev;
9691
+ });
9692
+ }, []);
9693
+ const setActiveTab = React$11.useCallback((side, tabId) => {
9694
+ setActiveTabState((prev) => {
9695
+ if (prev[side] === tabId) return prev;
9696
+ return {
9697
+ ...prev,
9698
+ [side]: tabId
9699
+ };
9700
+ });
9701
+ }, []);
9702
+ const sortedTabs = React$11.useMemo(() => {
9703
+ const sort = (map) => [...map.values()].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
9704
+ return {
9705
+ left: sort(tabsMap.left),
9706
+ right: sort(tabsMap.right)
9707
+ };
9708
+ }, [tabsMap]);
9709
+ const value = React$11.useMemo(() => ({
9710
+ tabs: sortedTabs,
9711
+ activeTab,
9712
+ register,
9713
+ unregister,
9714
+ setActiveTab
9715
+ }), [
9716
+ sortedTabs,
9717
+ activeTab,
9718
+ register,
9719
+ unregister,
9720
+ setActiveTab
9721
+ ]);
9722
+ return /* @__PURE__ */ jsx(SidebarTabsContext.Provider, {
9723
+ value,
9724
+ children
9725
+ });
9726
+ }
9727
+ function useSidebarTabs(side) {
9728
+ const ctx = React$11.useContext(SidebarTabsContext);
9729
+ if (!ctx) throw new Error("useSidebarTabs must be used within a SidebarTabsProvider.");
9730
+ const boundSetActiveTab = React$11.useCallback((tabId) => {
9731
+ if (side) ctx.setActiveTab(side, tabId);
9732
+ }, [ctx.setActiveTab, side]);
9733
+ const boundResult = React$11.useMemo(() => side ? {
9734
+ tabs: ctx.tabs[side],
9735
+ activeTab: ctx.activeTab[side],
9736
+ setActiveTab: boundSetActiveTab
9737
+ } : null, [
9738
+ side,
9739
+ ctx.tabs,
9740
+ ctx.activeTab,
9741
+ boundSetActiveTab
9742
+ ]);
9743
+ if (side) return boundResult;
9744
+ return ctx;
9745
+ }
9746
+
9747
+ //#endregion
9748
+ //#region src/sidebar/sidebar-tab.tsx
9749
+ function SidebarTab({ side, id, icon, label, render, order }) {
9750
+ const ctx = React$10.useContext(SidebarTabsContext);
9751
+ if (!ctx) throw new Error("SidebarTab must be used within a SidebarTabsProvider.");
9752
+ const { register, unregister } = ctx;
9753
+ const renderRef = React$10.useRef(render);
9754
+ renderRef.current = render;
9755
+ const iconRef = React$10.useRef(icon);
9756
+ iconRef.current = icon;
9757
+ const stableRender = React$10.useCallback(() => renderRef.current(), []);
9758
+ React$10.useEffect(() => {
9759
+ register(side, {
9760
+ id,
9761
+ icon: iconRef.current,
9762
+ label,
9763
+ render: stableRender,
9764
+ order
9765
+ });
9766
+ return () => unregister(side, id);
9767
+ }, [
9768
+ side,
9769
+ id,
9770
+ label,
9771
+ order,
9772
+ register,
9773
+ unregister,
9774
+ stableRender
9775
+ ]);
9776
+ return null;
9777
+ }
9778
+ function DynamicTabbedSidebar({ side, sidebarId, orientation = "horizontal", collapsible = "offcanvas", className,...sidebarProps }) {
9779
+ const ctx = React$10.useContext(SidebarTabsContext);
9780
+ if (!ctx) throw new Error("DynamicTabbedSidebar must be used within a SidebarTabsProvider.");
9781
+ const { setActiveTab } = ctx;
9782
+ const tabs = ctx.tabs[side];
9783
+ const activeTabId = ctx.activeTab[side];
9784
+ const activeTab = tabs.find((t) => t.id === activeTabId);
9785
+ React$10.useEffect(() => {
9786
+ if (tabs.length > 0 && tabs[0] && !activeTab) setActiveTab(side, tabs[0].id);
9787
+ }, [
9788
+ tabs,
9789
+ activeTab,
9790
+ side,
9791
+ setActiveTab
9792
+ ]);
9793
+ const effectiveSidebarId = sidebarId ?? side;
9794
+ const isVertical = orientation === "vertical";
9795
+ const effectiveCollapsible = isVertical && collapsible === "offcanvas" ? "icon" : collapsible;
9796
+ return /* @__PURE__ */ jsxs(Sidebar, {
9797
+ side,
9798
+ sidebarId: effectiveSidebarId,
9799
+ collapsible: effectiveCollapsible,
9800
+ className,
9801
+ ...sidebarProps,
9802
+ children: [/* @__PURE__ */ jsx(TabbedSidebarContent, {
9803
+ side,
9804
+ tabs,
9805
+ activeTabId,
9806
+ activeTab,
9807
+ isVertical,
9808
+ sidebarId: effectiveSidebarId,
9809
+ collapsible: effectiveCollapsible
9810
+ }), /* @__PURE__ */ jsx(SidebarRail, {})]
9811
+ });
9812
+ }
9813
+ function TabbedSidebarContent({ side, tabs, activeTabId, activeTab, isVertical, sidebarId, collapsible }) {
9814
+ const { state } = useSidebar(sidebarId);
9815
+ const isCollapsed = state === "collapsed";
9816
+ const isIconCollapsible = collapsible === "icon";
9817
+ if (isCollapsed && isIconCollapsible) return /* @__PURE__ */ jsx("div", {
9818
+ className: "flex h-full flex-col",
9819
+ children: /* @__PURE__ */ jsx(VerticalTabBar, {
9820
+ side,
9821
+ tabs,
9822
+ activeTabId,
9823
+ sidebarId
9824
+ })
9825
+ });
9826
+ if (isVertical) return /* @__PURE__ */ jsxs("div", {
9827
+ className: "flex h-full flex-row",
9828
+ children: [/* @__PURE__ */ jsx(VerticalTabBar, {
9829
+ side,
9830
+ tabs,
9831
+ activeTabId,
9832
+ sidebarId
9833
+ }), /* @__PURE__ */ jsx("div", {
9834
+ className: "flex min-w-0 flex-1 flex-col",
9835
+ children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
9836
+ })]
9837
+ });
9838
+ return /* @__PURE__ */ jsxs("div", {
9839
+ className: "flex h-full flex-col",
9840
+ children: [
9841
+ /* @__PURE__ */ jsx(HorizontalTabBar, {
9842
+ side,
9843
+ tabs,
9844
+ activeTabId,
9845
+ sidebarId
9846
+ }),
9847
+ tabs.length > 0 && /* @__PURE__ */ jsx(SidebarSeparator, {}),
9848
+ /* @__PURE__ */ jsx("div", {
9849
+ className: "flex min-w-0 flex-1 flex-col",
9850
+ children: /* @__PURE__ */ jsx(SidebarContent, { children: activeTab?.render() })
9851
+ })
9852
+ ]
9853
+ });
9854
+ }
9855
+ function HorizontalTabBar({ side, tabs, activeTabId, sidebarId }) {
9856
+ const ctx = React$10.useContext(SidebarTabsContext);
9857
+ const { state, toggleSidebar } = useSidebar(sidebarId ?? side);
9858
+ if (tabs.length === 0) return null;
9859
+ const handleTabClick = (tabId) => {
9860
+ if (state === "collapsed") {
9861
+ ctx.setActiveTab(side, tabId);
9862
+ toggleSidebar();
9863
+ } else if (tabId === activeTabId) toggleSidebar();
9864
+ else ctx.setActiveTab(side, tabId);
9865
+ };
9866
+ return /* @__PURE__ */ jsx(SidebarHeader, { children: /* @__PURE__ */ jsx("div", {
9867
+ className: "flex w-full items-center gap-0.5 rounded-md bg-muted p-1",
9868
+ role: "tablist",
9869
+ children: tabs.map((tab) => {
9870
+ const Icon = tab.icon;
9871
+ const isActive = tab.id === activeTabId;
9872
+ return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
9873
+ asChild: true,
9874
+ children: /* @__PURE__ */ jsx("button", {
9875
+ role: "tab",
9876
+ "aria-selected": isActive,
9877
+ className: cn("flex flex-1 items-center justify-center rounded-sm p-1.5 transition-colors", isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
9878
+ onClick: () => handleTabClick(tab.id),
9879
+ children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
9880
+ })
9881
+ }), /* @__PURE__ */ jsx(TooltipContent, {
9882
+ side: "bottom",
9883
+ children: tab.label
9884
+ })] }, tab.id);
9885
+ })
9886
+ }) });
9887
+ }
9888
+ function VerticalTabBar({ side, tabs, activeTabId, sidebarId }) {
9889
+ const ctx = React$10.useContext(SidebarTabsContext);
9890
+ const { state, toggleSidebar } = useSidebar(sidebarId ?? side);
9891
+ const isCollapsed = state === "collapsed";
9892
+ if (tabs.length === 0) return null;
9893
+ const handleTabClick = (tabId) => {
9894
+ if (isCollapsed) {
9895
+ ctx.setActiveTab(side, tabId);
9896
+ toggleSidebar();
9897
+ } else if (tabId === activeTabId) toggleSidebar();
9898
+ else ctx.setActiveTab(side, tabId);
9899
+ };
9900
+ return /* @__PURE__ */ jsx("div", {
9901
+ className: "flex flex-col gap-1 border-r border-sidebar-border p-1",
9902
+ role: "tablist",
9903
+ children: tabs.map((tab) => {
9904
+ const Icon = tab.icon;
9905
+ const isActive = tab.id === activeTabId;
9906
+ return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
9907
+ asChild: true,
9908
+ children: /* @__PURE__ */ jsx("button", {
9909
+ role: "tab",
9910
+ "aria-selected": isActive,
9911
+ className: cn("size-9 flex items-center justify-center rounded-md transition-colors", isActive ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-muted-foreground hover:text-foreground hover:bg-sidebar-accent/50"),
9912
+ onClick: () => handleTabClick(tab.id),
9913
+ children: /* @__PURE__ */ jsx(Icon, { className: "size-4" })
9914
+ })
9915
+ }), /* @__PURE__ */ jsx(TooltipContent, {
9916
+ side: side === "left" ? "right" : "left",
9917
+ hidden: state === "expanded",
9918
+ children: tab.label
9919
+ })] }, tab.id);
9920
+ })
9921
+ });
9922
+ }
9923
+
9431
9924
  //#endregion
9432
9925
  //#region src/slicer/slicer.tsx
9433
9926
  /**
@@ -9710,7 +10203,7 @@ const knobVariants = cva("bg-background block size-4 shrink-0 rounded-full borde
9710
10203
  defaultVariants: { knobVariant: "default" }
9711
10204
  });
9712
10205
  function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVariant, knobVariant, knobSize,...props }) {
9713
- const _values = React$5.useMemo(() => {
10206
+ const _values = React$9.useMemo(() => {
9714
10207
  if (Array.isArray(value)) return value;
9715
10208
  else if (Array.isArray(defaultValue)) return defaultValue;
9716
10209
  return [min, max];
@@ -9743,6 +10236,785 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, sliderVari
9743
10236
  });
9744
10237
  }
9745
10238
 
10239
+ //#endregion
10240
+ //#region src/hooks/use-isomorphic-layout-effect.ts
10241
+ const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$8.useLayoutEffect : React$8.useEffect;
10242
+
10243
+ //#endregion
10244
+ //#region src/hooks/use-as-ref.ts
10245
+ function useAsRef(props) {
10246
+ const ref = React$7.useRef(props);
10247
+ useIsomorphicLayoutEffect(() => {
10248
+ ref.current = props;
10249
+ });
10250
+ return ref;
10251
+ }
10252
+
10253
+ //#endregion
10254
+ //#region src/hooks/use-lazy-ref.ts
10255
+ function useLazyRef(fn) {
10256
+ const ref = React$6.useRef(null);
10257
+ if (ref.current === null) ref.current = fn();
10258
+ return ref;
10259
+ }
10260
+
10261
+ //#endregion
10262
+ //#region src/stepper/stepper.tsx
10263
+ const ROOT_NAME = "Stepper";
10264
+ const LIST_NAME = "StepperList";
10265
+ const ITEM_NAME = "StepperItem";
10266
+ const TRIGGER_NAME = "StepperTrigger";
10267
+ const INDICATOR_NAME = "StepperIndicator";
10268
+ const SEPARATOR_NAME = "StepperSeparator";
10269
+ const TITLE_NAME = "StepperTitle";
10270
+ const DESCRIPTION_NAME = "StepperDescription";
10271
+ const CONTENT_NAME = "StepperContent";
10272
+ const PREV_NAME = "StepperPrev";
10273
+ const NEXT_NAME = "StepperNext";
10274
+ const ENTRY_FOCUS = "stepperFocusGroup.onEntryFocus";
10275
+ const EVENT_OPTIONS = {
10276
+ bubbles: false,
10277
+ cancelable: true
10278
+ };
10279
+ const ARROW_KEYS = [
10280
+ "ArrowUp",
10281
+ "ArrowDown",
10282
+ "ArrowLeft",
10283
+ "ArrowRight"
10284
+ ];
10285
+ function getId(id, variant, value) {
10286
+ return `${id}-${variant}-${value}`;
10287
+ }
10288
+ const MAP_KEY_TO_FOCUS_INTENT = {
10289
+ ArrowLeft: "prev",
10290
+ ArrowUp: "prev",
10291
+ ArrowRight: "next",
10292
+ ArrowDown: "next",
10293
+ PageUp: "first",
10294
+ Home: "first",
10295
+ PageDown: "last",
10296
+ End: "last"
10297
+ };
10298
+ function getDirectionAwareKey(key, dir) {
10299
+ if (dir !== "rtl") return key;
10300
+ return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
10301
+ }
10302
+ function getFocusIntent(event, dir, orientation) {
10303
+ const key = getDirectionAwareKey(event.key, dir);
10304
+ if (orientation === "horizontal" && ["ArrowUp", "ArrowDown"].includes(key)) return void 0;
10305
+ if (orientation === "vertical" && ["ArrowLeft", "ArrowRight"].includes(key)) return void 0;
10306
+ return MAP_KEY_TO_FOCUS_INTENT[key];
10307
+ }
10308
+ function focusFirst(candidates, preventScroll = false) {
10309
+ const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
10310
+ for (const candidateRef of candidates) {
10311
+ const candidate = candidateRef.current;
10312
+ if (!candidate) continue;
10313
+ if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
10314
+ candidate.focus({ preventScroll });
10315
+ if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
10316
+ }
10317
+ }
10318
+ function wrapArray(array, startIndex) {
10319
+ return array.map((_, index) => array[(startIndex + index) % array.length]);
10320
+ }
10321
+ function getDataState(value, itemValue, stepState, steps, variant = "item") {
10322
+ const stepKeys = Array.from(steps.keys());
10323
+ const currentIndex = stepKeys.indexOf(itemValue);
10324
+ if (stepState?.completed) return "completed";
10325
+ if (value === itemValue) return variant === "separator" ? "inactive" : "active";
10326
+ if (value) {
10327
+ const activeIndex = stepKeys.indexOf(value);
10328
+ if (activeIndex > currentIndex) return "completed";
10329
+ }
10330
+ return "inactive";
10331
+ }
10332
+ const StoreContext = React$5.createContext(null);
10333
+ function useStoreContext(consumerName) {
10334
+ const context = React$5.useContext(StoreContext);
10335
+ if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
10336
+ return context;
10337
+ }
10338
+ function useStore(selector) {
10339
+ const store = useStoreContext("useStore");
10340
+ const getSnapshot = React$5.useCallback(() => selector(store.getState()), [store, selector]);
10341
+ return React$5.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
10342
+ }
10343
+ const StepperContext = React$5.createContext(null);
10344
+ function useStepperContext(consumerName) {
10345
+ const context = React$5.useContext(StepperContext);
10346
+ if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
10347
+ return context;
10348
+ }
10349
+ function Stepper(props) {
10350
+ const { value, defaultValue, onValueChange, onValueComplete, onValueAdd, onValueRemove, onValidate, dir: dirProp, orientation = "horizontal", activationMode = "automatic", asChild, disabled = false, nonInteractive = false, loop = false, className, id,...rootProps } = props;
10351
+ const listenersRef = useLazyRef(() => new Set());
10352
+ const stateRef = useLazyRef(() => ({
10353
+ steps: new Map(),
10354
+ value: value ?? defaultValue ?? ""
10355
+ }));
10356
+ const propsRef = useAsRef({
10357
+ onValueChange,
10358
+ onValueComplete,
10359
+ onValueAdd,
10360
+ onValueRemove,
10361
+ onValidate
10362
+ });
10363
+ const store = React$5.useMemo(() => {
10364
+ return {
10365
+ subscribe: (cb) => {
10366
+ listenersRef.current.add(cb);
10367
+ return () => listenersRef.current.delete(cb);
10368
+ },
10369
+ getState: () => stateRef.current,
10370
+ setState: (key, value$1) => {
10371
+ if (Object.is(stateRef.current[key], value$1)) return;
10372
+ if (key === "value" && typeof value$1 === "string") {
10373
+ stateRef.current.value = value$1;
10374
+ propsRef.current.onValueChange?.(value$1);
10375
+ } else stateRef.current[key] = value$1;
10376
+ store.notify();
10377
+ },
10378
+ setStateWithValidation: async (value$1, direction) => {
10379
+ if (!propsRef.current.onValidate) {
10380
+ store.setState("value", value$1);
10381
+ return true;
10382
+ }
10383
+ try {
10384
+ const isValid = await propsRef.current.onValidate(value$1, direction);
10385
+ if (isValid) store.setState("value", value$1);
10386
+ return isValid;
10387
+ } catch {
10388
+ return false;
10389
+ }
10390
+ },
10391
+ hasValidation: () => !!propsRef.current.onValidate,
10392
+ addStep: (value$1, completed, disabled$1) => {
10393
+ const newStep = {
10394
+ value: value$1,
10395
+ completed,
10396
+ disabled: disabled$1
10397
+ };
10398
+ stateRef.current.steps.set(value$1, newStep);
10399
+ propsRef.current.onValueAdd?.(value$1);
10400
+ store.notify();
10401
+ },
10402
+ removeStep: (value$1) => {
10403
+ stateRef.current.steps.delete(value$1);
10404
+ propsRef.current.onValueRemove?.(value$1);
10405
+ store.notify();
10406
+ },
10407
+ setStep: (value$1, completed, disabled$1) => {
10408
+ const step = stateRef.current.steps.get(value$1);
10409
+ if (step) {
10410
+ const updatedStep = {
10411
+ ...step,
10412
+ completed,
10413
+ disabled: disabled$1
10414
+ };
10415
+ stateRef.current.steps.set(value$1, updatedStep);
10416
+ if (completed !== step.completed) propsRef.current.onValueComplete?.(value$1, completed);
10417
+ store.notify();
10418
+ }
10419
+ },
10420
+ notify: () => {
10421
+ for (const cb of listenersRef.current) cb();
10422
+ }
10423
+ };
10424
+ }, [
10425
+ listenersRef,
10426
+ stateRef,
10427
+ propsRef
10428
+ ]);
10429
+ useIsomorphicLayoutEffect(() => {
10430
+ if (value !== void 0) store.setState("value", value);
10431
+ }, [value]);
10432
+ const dir = useDirection(dirProp);
10433
+ const instanceId = React$5.useId();
10434
+ const rootId = id ?? instanceId;
10435
+ const contextValue = React$5.useMemo(() => ({
10436
+ rootId,
10437
+ dir,
10438
+ orientation,
10439
+ activationMode,
10440
+ disabled,
10441
+ nonInteractive,
10442
+ loop
10443
+ }), [
10444
+ rootId,
10445
+ dir,
10446
+ orientation,
10447
+ activationMode,
10448
+ disabled,
10449
+ nonInteractive,
10450
+ loop
10451
+ ]);
10452
+ const RootPrimitive = asChild ? Slot : "div";
10453
+ return /* @__PURE__ */ jsx(StoreContext.Provider, {
10454
+ value: store,
10455
+ children: /* @__PURE__ */ jsx(StepperContext.Provider, {
10456
+ value: contextValue,
10457
+ children: /* @__PURE__ */ jsx(RootPrimitive, {
10458
+ id: rootId,
10459
+ "data-disabled": disabled ? "" : void 0,
10460
+ "data-orientation": orientation,
10461
+ "data-slot": "stepper",
10462
+ dir,
10463
+ ...rootProps,
10464
+ className: cn("flex gap-6", orientation === "horizontal" ? "w-full flex-col" : "flex-row", className)
10465
+ })
10466
+ })
10467
+ });
10468
+ }
10469
+ const FocusContext = React$5.createContext(null);
10470
+ function useFocusContext(consumerName) {
10471
+ const context = React$5.useContext(FocusContext);
10472
+ if (!context) throw new Error(`\`${consumerName}\` must be used within \`FocusProvider\``);
10473
+ return context;
10474
+ }
10475
+ function StepperList(props) {
10476
+ const { asChild, onBlur: onBlurProp, onFocus: onFocusProp, onMouseDown: onMouseDownProp, className, children, ref,...listProps } = props;
10477
+ const context = useStepperContext(LIST_NAME);
10478
+ const orientation = context.orientation;
10479
+ const currentValue = useStore((state) => state.value);
10480
+ const propsRef = useAsRef({
10481
+ onBlur: onBlurProp,
10482
+ onFocus: onFocusProp,
10483
+ onMouseDown: onMouseDownProp
10484
+ });
10485
+ const [tabStopId, setTabStopId] = React$5.useState(null);
10486
+ const [isTabbingBackOut, setIsTabbingBackOut] = React$5.useState(false);
10487
+ const [focusableItemCount, setFocusableItemCount] = React$5.useState(0);
10488
+ const isClickFocusRef = React$5.useRef(false);
10489
+ const itemsRef = React$5.useRef(new Map());
10490
+ const listRef = React$5.useRef(null);
10491
+ const composedRef = useComposedRefs(ref, listRef);
10492
+ const onItemFocus = React$5.useCallback((tabStopId$1) => {
10493
+ setTabStopId(tabStopId$1);
10494
+ }, []);
10495
+ const onItemShiftTab = React$5.useCallback(() => {
10496
+ setIsTabbingBackOut(true);
10497
+ }, []);
10498
+ const onFocusableItemAdd = React$5.useCallback(() => {
10499
+ setFocusableItemCount((prevCount) => prevCount + 1);
10500
+ }, []);
10501
+ const onFocusableItemRemove = React$5.useCallback(() => {
10502
+ setFocusableItemCount((prevCount) => prevCount - 1);
10503
+ }, []);
10504
+ const onItemRegister = React$5.useCallback((item) => {
10505
+ itemsRef.current.set(item.id, item);
10506
+ }, []);
10507
+ const onItemUnregister = React$5.useCallback((id) => {
10508
+ itemsRef.current.delete(id);
10509
+ }, []);
10510
+ const getItems = React$5.useCallback(() => {
10511
+ return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
10512
+ const elementA = a.ref.current;
10513
+ const elementB = b.ref.current;
10514
+ if (!elementA || !elementB) return 0;
10515
+ const position = elementA.compareDocumentPosition(elementB);
10516
+ if (position & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
10517
+ if (position & Node.DOCUMENT_POSITION_PRECEDING) return 1;
10518
+ return 0;
10519
+ });
10520
+ }, []);
10521
+ const onBlur = React$5.useCallback((event) => {
10522
+ propsRef.current.onBlur?.(event);
10523
+ if (event.defaultPrevented) return;
10524
+ setIsTabbingBackOut(false);
10525
+ }, [propsRef]);
10526
+ const onFocus = React$5.useCallback((event) => {
10527
+ propsRef.current.onFocus?.(event);
10528
+ if (event.defaultPrevented) return;
10529
+ const isKeyboardFocus = !isClickFocusRef.current;
10530
+ if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
10531
+ const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
10532
+ event.currentTarget.dispatchEvent(entryFocusEvent);
10533
+ if (!entryFocusEvent.defaultPrevented) {
10534
+ const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
10535
+ const selectedItem = currentValue ? items.find((item) => item.value === currentValue) : void 0;
10536
+ const activeItem = items.find((item) => item.active);
10537
+ const currentItem = items.find((item) => item.id === tabStopId);
10538
+ const candidateItems = [
10539
+ selectedItem,
10540
+ activeItem,
10541
+ currentItem,
10542
+ ...items
10543
+ ].filter(Boolean);
10544
+ const candidateRefs = candidateItems.map((item) => item.ref);
10545
+ focusFirst(candidateRefs, false);
10546
+ }
10547
+ }
10548
+ isClickFocusRef.current = false;
10549
+ }, [
10550
+ propsRef,
10551
+ isTabbingBackOut,
10552
+ currentValue,
10553
+ tabStopId
10554
+ ]);
10555
+ const onMouseDown = React$5.useCallback((event) => {
10556
+ propsRef.current.onMouseDown?.(event);
10557
+ if (event.defaultPrevented) return;
10558
+ isClickFocusRef.current = true;
10559
+ }, [propsRef]);
10560
+ const focusContextValue = React$5.useMemo(() => ({
10561
+ tabStopId,
10562
+ onItemFocus,
10563
+ onItemShiftTab,
10564
+ onFocusableItemAdd,
10565
+ onFocusableItemRemove,
10566
+ onItemRegister,
10567
+ onItemUnregister,
10568
+ getItems
10569
+ }), [
10570
+ tabStopId,
10571
+ onItemFocus,
10572
+ onItemShiftTab,
10573
+ onFocusableItemAdd,
10574
+ onFocusableItemRemove,
10575
+ onItemRegister,
10576
+ onItemUnregister,
10577
+ getItems
10578
+ ]);
10579
+ const ListPrimitive = asChild ? Slot : "div";
10580
+ return /* @__PURE__ */ jsx(FocusContext.Provider, {
10581
+ value: focusContextValue,
10582
+ children: /* @__PURE__ */ jsx(ListPrimitive, {
10583
+ role: "tablist",
10584
+ "aria-orientation": orientation,
10585
+ "data-orientation": orientation,
10586
+ "data-slot": "stepper-list",
10587
+ dir: context.dir,
10588
+ tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
10589
+ ...listProps,
10590
+ ref: composedRef,
10591
+ className: cn("flex outline-none", orientation === "horizontal" ? "flex-row items-center" : "flex-col items-start", className),
10592
+ onBlur,
10593
+ onFocus,
10594
+ onMouseDown,
10595
+ children
10596
+ })
10597
+ });
10598
+ }
10599
+ const StepperItemContext = React$5.createContext(null);
10600
+ function useStepperItemContext(consumerName) {
10601
+ const context = React$5.useContext(StepperItemContext);
10602
+ if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
10603
+ return context;
10604
+ }
10605
+ function StepperItem(props) {
10606
+ const { value: itemValue, completed = false, disabled = false, asChild, className, children, ref,...itemProps } = props;
10607
+ const context = useStepperContext(ITEM_NAME);
10608
+ const store = useStoreContext(ITEM_NAME);
10609
+ const orientation = context.orientation;
10610
+ const value = useStore((state) => state.value);
10611
+ useIsomorphicLayoutEffect(() => {
10612
+ store.addStep(itemValue, completed, disabled);
10613
+ return () => {
10614
+ store.removeStep(itemValue);
10615
+ };
10616
+ }, [
10617
+ itemValue,
10618
+ completed,
10619
+ disabled
10620
+ ]);
10621
+ useIsomorphicLayoutEffect(() => {
10622
+ store.setStep(itemValue, completed, disabled);
10623
+ }, [
10624
+ itemValue,
10625
+ completed,
10626
+ disabled
10627
+ ]);
10628
+ const stepState = useStore((state) => state.steps.get(itemValue));
10629
+ const steps = useStore((state) => state.steps);
10630
+ const dataState = getDataState(value, itemValue, stepState, steps);
10631
+ const itemContextValue = React$5.useMemo(() => ({
10632
+ value: itemValue,
10633
+ stepState
10634
+ }), [itemValue, stepState]);
10635
+ const ItemPrimitive = asChild ? Slot : "div";
10636
+ return /* @__PURE__ */ jsx(StepperItemContext.Provider, {
10637
+ value: itemContextValue,
10638
+ children: /* @__PURE__ */ jsx(ItemPrimitive, {
10639
+ "data-disabled": stepState?.disabled ? "" : void 0,
10640
+ "data-orientation": orientation,
10641
+ "data-state": dataState,
10642
+ "data-slot": "stepper-item",
10643
+ dir: context.dir,
10644
+ ...itemProps,
10645
+ ref,
10646
+ className: cn("relative flex not-last:flex-1 items-center", orientation === "horizontal" ? "flex-row" : "flex-col", className),
10647
+ children
10648
+ })
10649
+ });
10650
+ }
10651
+ function StepperTrigger(props) {
10652
+ const { asChild, onClick: onClickProp, onFocus: onFocusProp, onKeyDown: onKeyDownProp, onMouseDown: onMouseDownProp, disabled, className, ref,...triggerProps } = props;
10653
+ const context = useStepperContext(TRIGGER_NAME);
10654
+ const itemContext = useStepperItemContext(TRIGGER_NAME);
10655
+ const itemValue = itemContext.value;
10656
+ const store = useStoreContext(TRIGGER_NAME);
10657
+ const focusContext = useFocusContext(TRIGGER_NAME);
10658
+ const value = useStore((state) => state.value);
10659
+ const steps = useStore((state) => state.steps);
10660
+ const stepState = useStore((state) => state.steps.get(itemValue));
10661
+ const propsRef = useAsRef({
10662
+ onClick: onClickProp,
10663
+ onFocus: onFocusProp,
10664
+ onKeyDown: onKeyDownProp,
10665
+ onMouseDown: onMouseDownProp
10666
+ });
10667
+ const activationMode = context.activationMode;
10668
+ const orientation = context.orientation;
10669
+ const loop = context.loop;
10670
+ const stepIndex = Array.from(steps.keys()).indexOf(itemValue);
10671
+ const stepPosition = stepIndex + 1;
10672
+ const stepCount = steps.size;
10673
+ const triggerId = getId(context.rootId, "trigger", itemValue);
10674
+ const contentId = getId(context.rootId, "content", itemValue);
10675
+ const titleId = getId(context.rootId, "title", itemValue);
10676
+ const descriptionId = getId(context.rootId, "description", itemValue);
10677
+ const isDisabled = disabled || stepState?.disabled || context.disabled;
10678
+ const isActive = value === itemValue;
10679
+ const isTabStop = focusContext.tabStopId === triggerId;
10680
+ const dataState = getDataState(value, itemValue, stepState, steps);
10681
+ const triggerRef = React$5.useRef(null);
10682
+ const composedRef = useComposedRefs(ref, triggerRef);
10683
+ const isArrowKeyPressedRef = React$5.useRef(false);
10684
+ const isMouseClickRef = React$5.useRef(false);
10685
+ React$5.useEffect(() => {
10686
+ function onKeyDown$1(event) {
10687
+ if (ARROW_KEYS.includes(event.key)) isArrowKeyPressedRef.current = true;
10688
+ }
10689
+ function onKeyUp() {
10690
+ isArrowKeyPressedRef.current = false;
10691
+ }
10692
+ document.addEventListener("keydown", onKeyDown$1);
10693
+ document.addEventListener("keyup", onKeyUp);
10694
+ return () => {
10695
+ document.removeEventListener("keydown", onKeyDown$1);
10696
+ document.removeEventListener("keyup", onKeyUp);
10697
+ };
10698
+ }, []);
10699
+ useIsomorphicLayoutEffect(() => {
10700
+ focusContext.onItemRegister({
10701
+ id: triggerId,
10702
+ ref: triggerRef,
10703
+ value: itemValue,
10704
+ active: isTabStop,
10705
+ disabled: !!isDisabled
10706
+ });
10707
+ if (!isDisabled) focusContext.onFocusableItemAdd();
10708
+ return () => {
10709
+ focusContext.onItemUnregister(triggerId);
10710
+ if (!isDisabled) focusContext.onFocusableItemRemove();
10711
+ };
10712
+ }, [
10713
+ focusContext,
10714
+ triggerId,
10715
+ itemValue,
10716
+ isTabStop,
10717
+ isDisabled
10718
+ ]);
10719
+ const onClick = React$5.useCallback(async (event) => {
10720
+ propsRef.current.onClick?.(event);
10721
+ if (event.defaultPrevented) return;
10722
+ if (!isDisabled && !context.nonInteractive) {
10723
+ const currentStepIndex = Array.from(steps.keys()).indexOf(value ?? "");
10724
+ const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
10725
+ const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
10726
+ await store.setStateWithValidation(itemValue, direction);
10727
+ }
10728
+ }, [
10729
+ isDisabled,
10730
+ context.nonInteractive,
10731
+ store,
10732
+ itemValue,
10733
+ value,
10734
+ steps,
10735
+ propsRef
10736
+ ]);
10737
+ const onFocus = React$5.useCallback(async (event) => {
10738
+ propsRef.current.onFocus?.(event);
10739
+ if (event.defaultPrevented) return;
10740
+ focusContext.onItemFocus(triggerId);
10741
+ const isKeyboardFocus = !isMouseClickRef.current;
10742
+ if (!isActive && !isDisabled && activationMode !== "manual" && !context.nonInteractive && isKeyboardFocus) {
10743
+ const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
10744
+ const targetStepIndex = Array.from(steps.keys()).indexOf(itemValue);
10745
+ const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
10746
+ await store.setStateWithValidation(itemValue, direction);
10747
+ }
10748
+ isMouseClickRef.current = false;
10749
+ }, [
10750
+ focusContext,
10751
+ triggerId,
10752
+ activationMode,
10753
+ isActive,
10754
+ isDisabled,
10755
+ context.nonInteractive,
10756
+ store,
10757
+ itemValue,
10758
+ value,
10759
+ steps,
10760
+ propsRef
10761
+ ]);
10762
+ const onKeyDown = React$5.useCallback(async (event) => {
10763
+ propsRef.current.onKeyDown?.(event);
10764
+ if (event.defaultPrevented) return;
10765
+ if (event.key === "Enter" && context.nonInteractive) {
10766
+ event.preventDefault();
10767
+ return;
10768
+ }
10769
+ if ((event.key === "Enter" || event.key === " ") && activationMode === "manual" && !context.nonInteractive) {
10770
+ event.preventDefault();
10771
+ if (!isDisabled && triggerRef.current) triggerRef.current.click();
10772
+ return;
10773
+ }
10774
+ if (event.key === "Tab" && event.shiftKey) {
10775
+ focusContext.onItemShiftTab();
10776
+ return;
10777
+ }
10778
+ if (event.target !== event.currentTarget) return;
10779
+ const focusIntent = getFocusIntent(event, context.dir, orientation);
10780
+ if (focusIntent !== void 0) {
10781
+ if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
10782
+ event.preventDefault();
10783
+ const items = focusContext.getItems().filter((item) => !item.disabled);
10784
+ let candidateRefs = items.map((item) => item.ref);
10785
+ if (focusIntent === "last") candidateRefs.reverse();
10786
+ else if (focusIntent === "prev" || focusIntent === "next") {
10787
+ if (focusIntent === "prev") candidateRefs.reverse();
10788
+ const currentIndex = candidateRefs.findIndex((ref$1) => ref$1.current === event.currentTarget);
10789
+ candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
10790
+ }
10791
+ if (store.hasValidation() && candidateRefs.length > 0) {
10792
+ const nextRef = candidateRefs[0];
10793
+ const nextElement = nextRef?.current;
10794
+ const nextItem = items.find((item) => item.ref.current === nextElement);
10795
+ if (nextItem && nextItem.value !== itemValue) {
10796
+ const currentStepIndex = Array.from(steps.keys()).indexOf(value || "");
10797
+ const targetStepIndex = Array.from(steps.keys()).indexOf(nextItem.value);
10798
+ const direction = targetStepIndex > currentStepIndex ? "next" : "prev";
10799
+ if (direction === "next") {
10800
+ const isValid = await store.setStateWithValidation(nextItem.value, direction);
10801
+ if (!isValid) return;
10802
+ } else store.setState("value", nextItem.value);
10803
+ queueMicrotask(() => nextElement?.focus());
10804
+ return;
10805
+ }
10806
+ }
10807
+ queueMicrotask(() => focusFirst(candidateRefs));
10808
+ }
10809
+ }, [
10810
+ focusContext,
10811
+ context.nonInteractive,
10812
+ context.dir,
10813
+ activationMode,
10814
+ orientation,
10815
+ loop,
10816
+ isDisabled,
10817
+ store,
10818
+ propsRef,
10819
+ itemValue,
10820
+ value,
10821
+ steps
10822
+ ]);
10823
+ const onMouseDown = React$5.useCallback((event) => {
10824
+ propsRef.current.onMouseDown?.(event);
10825
+ if (event.defaultPrevented) return;
10826
+ isMouseClickRef.current = true;
10827
+ if (isDisabled) event.preventDefault();
10828
+ else focusContext.onItemFocus(triggerId);
10829
+ }, [
10830
+ focusContext,
10831
+ triggerId,
10832
+ isDisabled,
10833
+ propsRef
10834
+ ]);
10835
+ const TriggerPrimitive = asChild ? Slot : "button";
10836
+ return /* @__PURE__ */ jsx(TriggerPrimitive, {
10837
+ id: triggerId,
10838
+ role: "tab",
10839
+ type: "button",
10840
+ "aria-controls": contentId,
10841
+ "aria-current": isActive ? "step" : void 0,
10842
+ "aria-describedby": `${titleId} ${descriptionId}`,
10843
+ "aria-posinset": stepPosition,
10844
+ "aria-selected": isActive,
10845
+ "aria-setsize": stepCount,
10846
+ "data-disabled": isDisabled ? "" : void 0,
10847
+ "data-state": dataState,
10848
+ "data-slot": "stepper-trigger",
10849
+ disabled: isDisabled,
10850
+ tabIndex: isTabStop ? 0 : -1,
10851
+ ...triggerProps,
10852
+ ref: composedRef,
10853
+ className: cn("inline-flex items-center justify-center gap-3 rounded-md text-left outline-none transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "not-has-data-[slot=description]:rounded-full not-has-data-[slot=title]:rounded-full", className),
10854
+ onClick,
10855
+ onFocus,
10856
+ onKeyDown,
10857
+ onMouseDown
10858
+ });
10859
+ }
10860
+ function StepperIndicator(props) {
10861
+ const { className, children, asChild, ref,...indicatorProps } = props;
10862
+ const context = useStepperContext(INDICATOR_NAME);
10863
+ const itemContext = useStepperItemContext(INDICATOR_NAME);
10864
+ const value = useStore((state) => state.value);
10865
+ const itemValue = itemContext.value;
10866
+ const stepState = useStore((state) => state.steps.get(itemValue));
10867
+ const steps = useStore((state) => state.steps);
10868
+ const stepPosition = Array.from(steps.keys()).indexOf(itemValue) + 1;
10869
+ const dataState = getDataState(value, itemValue, stepState, steps);
10870
+ const IndicatorPrimitive = asChild ? Slot : "div";
10871
+ return /* @__PURE__ */ jsx(IndicatorPrimitive, {
10872
+ "data-state": dataState,
10873
+ "data-slot": "stepper-indicator",
10874
+ dir: context.dir,
10875
+ ...indicatorProps,
10876
+ ref,
10877
+ className: cn("flex size-7 shrink-0 items-center justify-center rounded-full border-2 border-muted bg-background font-medium text-muted-foreground text-sm transition-colors data-[state=active]:border-primary data-[state=completed]:border-primary data-[state=active]:bg-primary data-[state=completed]:bg-primary data-[state=active]:text-primary-foreground data-[state=completed]:text-primary-foreground", className),
10878
+ children: typeof children === "function" ? children(dataState) : children ? children : dataState === "completed" ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : stepPosition
10879
+ });
10880
+ }
10881
+ function StepperSeparator(props) {
10882
+ const { className, asChild, forceMount = false, ref,...separatorProps } = props;
10883
+ const context = useStepperContext(SEPARATOR_NAME);
10884
+ const itemContext = useStepperItemContext(SEPARATOR_NAME);
10885
+ const value = useStore((state) => state.value);
10886
+ const steps = useStore((state) => state.steps);
10887
+ const orientation = context.orientation;
10888
+ const stepIndex = Array.from(steps.keys()).indexOf(itemContext.value);
10889
+ const isLastStep = stepIndex === steps.size - 1;
10890
+ if (isLastStep && !forceMount) return null;
10891
+ const dataState = getDataState(value, itemContext.value, itemContext.stepState, steps, "separator");
10892
+ const SeparatorPrimitive$1 = asChild ? Slot : "div";
10893
+ return /* @__PURE__ */ jsx(SeparatorPrimitive$1, {
10894
+ role: "separator",
10895
+ "aria-hidden": "true",
10896
+ "aria-orientation": orientation,
10897
+ "data-orientation": orientation,
10898
+ "data-state": dataState,
10899
+ "data-slot": "stepper-separator",
10900
+ dir: context.dir,
10901
+ ...separatorProps,
10902
+ ref,
10903
+ className: cn("bg-border transition-colors data-[state=active]:bg-primary data-[state=completed]:bg-primary", orientation === "horizontal" ? "h-px flex-1" : "h-10 w-px", className)
10904
+ });
10905
+ }
10906
+ function StepperTitle(props) {
10907
+ const { className, asChild, ref,...titleProps } = props;
10908
+ const context = useStepperContext(TITLE_NAME);
10909
+ const itemContext = useStepperItemContext(TITLE_NAME);
10910
+ const titleId = getId(context.rootId, "title", itemContext.value);
10911
+ const TitlePrimitive = asChild ? Slot : "span";
10912
+ return /* @__PURE__ */ jsx(TitlePrimitive, {
10913
+ id: titleId,
10914
+ "data-slot": "title",
10915
+ dir: context.dir,
10916
+ ...titleProps,
10917
+ ref,
10918
+ className: cn("font-medium text-sm", className)
10919
+ });
10920
+ }
10921
+ function StepperDescription(props) {
10922
+ const { className, asChild, ref,...descriptionProps } = props;
10923
+ const context = useStepperContext(DESCRIPTION_NAME);
10924
+ const itemContext = useStepperItemContext(DESCRIPTION_NAME);
10925
+ const descriptionId = getId(context.rootId, "description", itemContext.value);
10926
+ const DescriptionPrimitive = asChild ? Slot : "span";
10927
+ return /* @__PURE__ */ jsx(DescriptionPrimitive, {
10928
+ id: descriptionId,
10929
+ "data-slot": "description",
10930
+ dir: context.dir,
10931
+ ...descriptionProps,
10932
+ ref,
10933
+ className: cn("text-muted-foreground text-xs", className)
10934
+ });
10935
+ }
10936
+ function StepperContent(props) {
10937
+ const { value: valueProp, asChild, forceMount = false, ref, className,...contentProps } = props;
10938
+ const context = useStepperContext(CONTENT_NAME);
10939
+ const value = useStore((state) => state.value);
10940
+ const contentId = getId(context.rootId, "content", valueProp);
10941
+ const triggerId = getId(context.rootId, "trigger", valueProp);
10942
+ if (valueProp !== value && !forceMount) return null;
10943
+ const ContentPrimitive = asChild ? Slot : "div";
10944
+ return /* @__PURE__ */ jsx(ContentPrimitive, {
10945
+ id: contentId,
10946
+ role: "tabpanel",
10947
+ "aria-labelledby": triggerId,
10948
+ "data-slot": "stepper-content",
10949
+ dir: context.dir,
10950
+ ...contentProps,
10951
+ ref,
10952
+ className: cn("flex-1 outline-none", className)
10953
+ });
10954
+ }
10955
+ function StepperPrev(props) {
10956
+ const { asChild, onClick: onClickProp, disabled,...prevProps } = props;
10957
+ const store = useStoreContext(PREV_NAME);
10958
+ const value = useStore((state) => state.value);
10959
+ const steps = useStore((state) => state.steps);
10960
+ const propsRef = useAsRef({ onClick: onClickProp });
10961
+ const stepKeys = Array.from(steps.keys());
10962
+ const currentIndex = value ? stepKeys.indexOf(value) : -1;
10963
+ const isDisabled = disabled || currentIndex <= 0;
10964
+ const onClick = React$5.useCallback((event) => {
10965
+ propsRef.current.onClick?.(event);
10966
+ if (event.defaultPrevented || isDisabled) return;
10967
+ const prevIndex = Math.max(currentIndex - 1, 0);
10968
+ const prevStepValue = stepKeys[prevIndex];
10969
+ if (prevStepValue) store.setState("value", prevStepValue);
10970
+ }, [
10971
+ propsRef,
10972
+ isDisabled,
10973
+ currentIndex,
10974
+ stepKeys,
10975
+ store
10976
+ ]);
10977
+ const PrevPrimitive = asChild ? Slot : "button";
10978
+ return /* @__PURE__ */ jsx(PrevPrimitive, {
10979
+ type: "button",
10980
+ "data-slot": "stepper-prev",
10981
+ disabled: isDisabled,
10982
+ ...prevProps,
10983
+ onClick
10984
+ });
10985
+ }
10986
+ function StepperNext(props) {
10987
+ const { asChild, onClick: onClickProp, disabled,...nextProps } = props;
10988
+ const store = useStoreContext(NEXT_NAME);
10989
+ const value = useStore((state) => state.value);
10990
+ const steps = useStore((state) => state.steps);
10991
+ const propsRef = useAsRef({ onClick: onClickProp });
10992
+ const stepKeys = Array.from(steps.keys());
10993
+ const currentIndex = value ? stepKeys.indexOf(value) : -1;
10994
+ const isDisabled = disabled || currentIndex >= stepKeys.length - 1;
10995
+ const onClick = React$5.useCallback(async (event) => {
10996
+ propsRef.current.onClick?.(event);
10997
+ if (event.defaultPrevented || isDisabled) return;
10998
+ const nextIndex = Math.min(currentIndex + 1, stepKeys.length - 1);
10999
+ const nextStepValue = stepKeys[nextIndex];
11000
+ if (nextStepValue) await store.setStateWithValidation(nextStepValue, "next");
11001
+ }, [
11002
+ propsRef,
11003
+ isDisabled,
11004
+ currentIndex,
11005
+ stepKeys,
11006
+ store
11007
+ ]);
11008
+ const NextPrimitive = asChild ? Slot : "button";
11009
+ return /* @__PURE__ */ jsx(NextPrimitive, {
11010
+ type: "button",
11011
+ "data-slot": "stepper-next",
11012
+ disabled: isDisabled,
11013
+ ...nextProps,
11014
+ onClick
11015
+ });
11016
+ }
11017
+
9746
11018
  //#endregion
9747
11019
  //#region src/switch/switch.tsx
9748
11020
  const Switch = React$4.forwardRef(({ className,...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
@@ -10027,5 +11299,5 @@ const TreeView = React$1.forwardRef(({ data, onNodeSelect, onGroupSelect, onTogg
10027
11299
  TreeView.displayName = "TreeView";
10028
11300
 
10029
11301
  //#endregion
10030
- export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar };
11302
+ export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, KanbanBoard as Board, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, CheckboxCell, Collapse, CollapseContent, CollapseTrigger, KanbanColumn as Column, KanbanColumnHandle as ColumnHandle, ComboboxDemo, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandPalette, CommandPaletteDialog, CommandPaletteEmpty, CommandPaletteGroup, CommandPaletteInput, CommandPaletteItem, CommandPaletteList, CommandPaletteSeparator, CommandPaletteShortcut, CommandSeparator, CommandShortcut, CommentCreate, CommentList, CommentThread, ContentFrame, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataGrid, DataGridCell, DataGridCellWrapper, DataGridColumnHeader, DataGridContextMenu, DataGridRow, DataGridSearch, DataGridViewMenu, DateCell, DatePickerDemo, DeferredInput, DeferredNumberInput, DeferredTextarea, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicTabbedSidebar, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, GanttCell, GanttTimeline, GanttTimerangePicker, HeaderComponents, HierarchyCell, HierarchyItem, HoverCard, HoverCardContent, HoverCardTrigger, InfoCard, Input, KanbanItem as Item, KanbanItemHandle as ItemHandle, KanbanRoot as Kanban, KanbanBoard, KanbanColumn, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay, Label, Loader, LongTextCell, MarkValueRenderer, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectCell, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NumberCell, NumberInput, KanbanOverlay as Overlay, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ReactNodeCell, ResizableHandle, ResizablePanel, ResizablePanelGroup, KanbanRoot as Root, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_WIDTH_MOBILE, ScrollArea, ScrollBar, Select, SelectCell, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShortTextCell, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarIdContext, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarResizeContext, SidebarSeparator, SidebarStoreContext, SidebarTab, SidebarTabsContext, SidebarTabsProvider, SidebarTrigger, Skeleton, Slicer, SlicerHierarchyItem, Slider, Spinner, Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperList, StepperNext, StepperPrev, StepperSeparator, StepperTitle, StepperTrigger, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeBranch, TreeView, badgeVariants, buildLabelMap, buttonVariants, checkboxVariants, cn, commandInputVariants, createSelectColumn, findOptionById, getAllDescendantIds, getAllDescendantValues, getAllIds, getAncestorIds, getCellKey, getCommonPinningStyles, getInitialExpandedIds, getLabelPath, getLineCount, getRowHeightValue, inputVariants, isoToLocalDate, knobVariants, matchesSearch, navigationMenuTriggerStyle, parseCellKey, sliderVariants, testId, toast, toggleVariants, useCallbackRef, useDataGrid, useDebouncedCallback, useIsMobile, useSidebar, useSidebarTabs, useStore as useStepper };
10031
11303
  //# sourceMappingURL=index.js.map