@optilogic/core 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/index.js

@@ -1,13 +1,13 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React34 from 'react';
+import * as React20 from 'react';
 import { useMemo, useState, useRef, useEffect, useCallback } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Check, ChevronDown, ChevronUp, ChevronRight, Circle, X, ChevronLeft, Calendar as Calendar$1, Filter, GripVertical, Search, ChevronsLeft, ChevronsRight, Copy, Palette } from 'lucide-react';
+import { Check, ChevronDown, ChevronUp, ChevronRight, Circle, Search, ArrowUp, ArrowDown, ArrowUpDown, ChevronsLeft, ChevronLeft, ChevronsRight, X, Calendar as Calendar$1, Filter, GripVertical, Copy, Palette } from 'lucide-react';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
@@ -53,7 +53,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React34.forwardRef(
+var Button = React20.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -67,7 +67,7 @@ var Button = React34.forwardRef(
   }
 );
 Button.displayName = "Button";
-var Input = React34.forwardRef(
+var Input = React20.forwardRef(
   ({ className, type, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "input",
@@ -87,7 +87,7 @@ Input.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -96,7 +96,7 @@ var Label = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
-var Textarea = React34.forwardRef(
+var Textarea = React20.forwardRef(
   ({ className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "textarea",
@@ -135,7 +135,7 @@ var badgeVariants = cva(
 function Badge({ className, variant, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
-var Checkbox = React34.forwardRef(({ className, showBorder = true, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React20.forwardRef(({ className, showBorder = true, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -179,7 +179,7 @@ var Checkbox = React34.forwardRef(({ className, showBorder = true, ...props }, r
   }
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var Switch = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Switch = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SwitchPrimitive.Root,
   {
     className: cn(
@@ -215,7 +215,7 @@ var Switch = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Switch.displayName = SwitchPrimitive.Root.displayName;
-var Progress = React34.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
+var Progress = React20.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(
   ProgressPrimitive.Root,
   {
     ref,
@@ -234,7 +234,7 @@ var Progress = React34.forwardRef(({ className, value, ...props }, ref) => /* @_
   }
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
-var Separator = React34.forwardRef(
+var Separator = React20.forwardRef(
   ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
@@ -263,7 +263,7 @@ function Skeleton({ className, ...props }) {
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -279,7 +279,7 @@ var SelectTrigger = React34.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -292,7 +292,7 @@ var SelectScrollUpButton = React34.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -305,7 +305,7 @@ var SelectScrollDownButton = React34.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React34.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React20.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -333,7 +333,7 @@ var SelectContent = React34.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -342,7 +342,7 @@ var SelectLabel = React34.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -358,7 +358,7 @@ var SelectItem = React34.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -368,7 +368,7 @@ var SelectSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @_
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 var Tabs = TabsPrimitive.Root;
-var TabsList = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -382,7 +382,7 @@ var TabsList = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -409,7 +409,7 @@ var TabsTrigger = React34.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     ref,
@@ -492,7 +492,7 @@ var accordionContentInnerVariants = cva("pb-4 pt-0", {
   }
 });
 var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React34.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionItem = React20.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Item,
   {
     ref,
@@ -502,7 +502,7 @@ var AccordionItem = React34.forwardRef(({ className, variant, ...props }, ref) =
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React34.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+var AccordionTrigger = React20.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -515,7 +515,7 @@ var AccordionTrigger = React34.forwardRef(({ className, children, variant, ...pr
   }
 ) }));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-var AccordionContent = React34.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+var AccordionContent = React20.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsx(
   AccordionPrimitive.Content,
   {
     ref,
@@ -529,7 +529,7 @@ var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipPortal = TooltipPrimitive.Portal;
-var TooltipContent = React34.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var TooltipContent = React20.forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
@@ -558,7 +558,7 @@ var TooltipContent = React34.forwardRef(({ className, sideOffset = 6, ...props }
   }
 ) }));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var TooltipArrow = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipArrow = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Arrow,
   {
     ref,
@@ -597,7 +597,7 @@ function Tooltip({
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React34.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React20.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -623,7 +623,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React34.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -642,7 +642,7 @@ var DropdownMenuSubTrigger = React34.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -659,7 +659,7 @@ var DropdownMenuSubContent = React34.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React34.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -677,7 +677,7 @@ var DropdownMenuContent = React34.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React34.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React20.forwardRef(({ className, inset, destructive, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -693,7 +693,7 @@ var DropdownMenuItem = React34.forwardRef(({ className, inset, destructive, ...p
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React34.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React20.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -712,7 +712,7 @@ var DropdownMenuCheckboxItem = React34.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React34.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -730,7 +730,7 @@ var DropdownMenuRadioItem = React34.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React34.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -743,7 +743,7 @@ var DropdownMenuLabel = React34.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -768,7 +768,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -782,7 +782,7 @@ var AlertDialogOverlay = React34.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -825,7 +825,7 @@ var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -834,7 +834,7 @@ var AlertDialogTitle = React34.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -843,7 +843,7 @@ var AlertDialogDescription = React34.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -852,7 +852,7 @@ var AlertDialogAction = React34.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -915,7 +915,7 @@ var cardVariants = cva(
     }
   }
 );
-var Card = React34.forwardRef(
+var Card = React20.forwardRef(
   ({
     className,
     size,
@@ -929,7 +929,7 @@ var Card = React34.forwardRef(
     ...props
   }, ref) => {
     const isInteractive = interactive || asButton || !!onClick;
-    const handleKeyDown = React34.useCallback(
+    const handleKeyDown = React20.useCallback(
       (e) => {
         if (isInteractive && (e.key === "Enter" || e.key === " ")) {
           e.preventDefault();
@@ -961,7 +961,7 @@ var Card = React34.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React34.forwardRef(
+var CardHeader = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -972,7 +972,7 @@ var CardHeader = React34.forwardRef(
   )
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React34.forwardRef(
+var CardTitle = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -983,7 +983,7 @@ var CardTitle = React34.forwardRef(
   )
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React34.forwardRef(
+var CardDescription = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -994,11 +994,11 @@ var CardDescription = React34.forwardRef(
   )
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React34.forwardRef(
+var CardContent = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React34.forwardRef(
+var CardFooter = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1035,17 +1035,17 @@ var cardImageVariants = cva("w-full object-cover", {
     position: "top"
   }
 });
-var CardImage = React34.forwardRef(
+var CardImage = React20.forwardRef(
   ({ className, aspectRatio, position, fallback, alt, src, onError, ...props }, ref) => {
-    const [hasError, setHasError] = React34.useState(false);
-    const handleError = React34.useCallback(
+    const [hasError, setHasError] = React20.useState(false);
+    const handleError = React20.useCallback(
       (e) => {
         setHasError(true);
         onError?.(e);
       },
       [onError]
     );
-    React34.useEffect(() => {
+    React20.useEffect(() => {
       setHasError(false);
     }, [src]);
     if (hasError && fallback) {
@@ -1116,7 +1116,7 @@ var cardActionsVariants = cva(
     }
   }
 );
-var CardActions = React34.forwardRef(
+var CardActions = React20.forwardRef(
   ({ className, showOn, position, variant, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1128,7 +1128,7 @@ var CardActions = React34.forwardRef(
   )
 );
 CardActions.displayName = "CardActions";
-var SelectableCard = React34.forwardRef(
+var SelectableCard = React20.forwardRef(
   ({
     className,
     selected: controlledSelected,
@@ -1142,10 +1142,10 @@ var SelectableCard = React34.forwardRef(
     hover = "border",
     ...props
   }, ref) => {
-    const [uncontrolledSelected, setUncontrolledSelected] = React34.useState(defaultSelected);
+    const [uncontrolledSelected, setUncontrolledSelected] = React20.useState(defaultSelected);
     const isControlled = controlledSelected !== void 0;
     const isSelected = isControlled ? controlledSelected : uncontrolledSelected;
-    const handleClick = React34.useCallback(
+    const handleClick = React20.useCallback(
       (e) => {
         if (disabled) return;
         const newSelected = !isSelected;
@@ -1157,7 +1157,7 @@ var SelectableCard = React34.forwardRef(
       },
       [disabled, isSelected, isControlled, onSelectedChange, onClick]
     );
-    const handleCheckboxChange = React34.useCallback(
+    const handleCheckboxChange = React20.useCallback(
       (checked) => {
         if (disabled) return;
         const newSelected = checked === true;
@@ -1257,7 +1257,7 @@ var cardGridVariants = cva("grid", {
     gap: "md"
   }
 });
-var CardGrid = React34.forwardRef(
+var CardGrid = React20.forwardRef(
   ({ className, columns, gap, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1292,7 +1292,7 @@ var cardListVariants = cva("flex flex-col", {
     divided: false
   }
 });
-var CardList = React34.forwardRef(
+var CardList = React20.forwardRef(
   ({ className, gap, divided, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1373,7 +1373,7 @@ var boardVariants = cva("text-card-foreground", {
     hover: "none"
   }
 });
-var Board = React34.forwardRef(
+var Board = React20.forwardRef(
   ({
     className,
     elevation,
@@ -1409,7 +1409,7 @@ var Board = React34.forwardRef(
   }
 );
 Board.displayName = "Board";
-var BoardHeader = React34.forwardRef(
+var BoardHeader = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -1420,11 +1420,11 @@ var BoardHeader = React34.forwardRef(
   )
 );
 BoardHeader.displayName = "BoardHeader";
-var BoardContent = React34.forwardRef(
+var BoardContent = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-4", className), ...props })
 );
 BoardContent.displayName = "BoardContent";
-var Table = React34.forwardRef(
+var Table = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "relative w-full overflow-auto", children: /* @__PURE__ */ jsx(
     "table",
     {
@@ -1435,11 +1435,11 @@ var Table = React34.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = React34.forwardRef(
+var TableHeader = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React34.forwardRef(
+var TableBody = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tbody",
     {
@@ -1450,7 +1450,7 @@ var TableBody = React34.forwardRef(
   )
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React34.forwardRef(
+var TableFooter = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tfoot",
     {
@@ -1464,7 +1464,7 @@ var TableFooter = React34.forwardRef(
   )
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React34.forwardRef(
+var TableRow = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "tr",
     {
@@ -1478,7 +1478,7 @@ var TableRow = React34.forwardRef(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = React34.forwardRef(
+var TableHead = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "th",
     {
@@ -1492,7 +1492,7 @@ var TableHead = React34.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React34.forwardRef(
+var TableCell = React20.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "td",
     {
@@ -1506,7 +1506,7 @@ var TableCell = React34.forwardRef(
   )
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -1515,6 +1515,518 @@ var TableCaption = React34.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TableCaption.displayName = "TableCaption";
+var loadingSpinnerVariants = cva("rounded-full animate-spin border-current", {
+  variants: {
+    /**
+     * Size of the spinner
+     */
+    size: {
+      sm: "w-4 h-4 border-2",
+      default: "w-8 h-8 border-2",
+      lg: "w-12 h-12 border-[3px]",
+      xl: "w-16 h-16 border-4"
+    },
+    /**
+     * Visual variant
+     */
+    variant: {
+      /** Primary color spinner (default) */
+      default: "border-primary/20 border-t-primary",
+      /** Accent color spinner */
+      accent: "border-accent/20 border-t-accent",
+      /** Muted/subtle spinner */
+      muted: "border-muted-foreground/20 border-t-muted-foreground",
+      /** Inherits current text color */
+      inherit: "border-current/20 border-t-current"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    variant: "default"
+  }
+});
+var LoadingSpinner = React20.forwardRef(
+  ({ className, size, variant, label, showDots = false, ...props }, ref) => {
+    const [dots, setDots] = React20.useState("");
+    React20.useEffect(() => {
+      if (!showDots || !label) return;
+      const interval = setInterval(() => {
+        setDots((prev) => prev.length >= 3 ? "" : prev + ".");
+      }, 500);
+      return () => clearInterval(interval);
+    }, [showDots, label]);
+    if (label) {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn("flex flex-col items-center gap-3", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("div", { className: loadingSpinnerVariants({ size, variant }) }),
+            /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              label,
+              showDots && /* @__PURE__ */ jsx("span", { className: "inline-block w-4", children: dots })
+            ] })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(loadingSpinnerVariants({ size, variant }), className),
+        ...props
+      }
+    );
+  }
+);
+LoadingSpinner.displayName = "LoadingSpinner";
+function getCellRawValue(row, col) {
+  if (col.accessor) return col.accessor(row);
+  return row[col.key];
+}
+function defaultSearch(row, query, columns) {
+  const lowerQuery = query.toLowerCase();
+  return columns.some((col) => {
+    const val = getCellRawValue(row, col);
+    if (val == null) return false;
+    return String(val).toLowerCase().includes(lowerQuery);
+  });
+}
+function defaultSortComparator(a, b, col, direction) {
+  if (col.sortFn) {
+    const result = col.sortFn(a, b);
+    return direction === "asc" ? result : -result;
+  }
+  const aVal = getCellRawValue(a, col);
+  const bVal = getCellRawValue(b, col);
+  const aStr = aVal == null ? "" : String(aVal);
+  const bStr = bVal == null ? "" : String(bVal);
+  const aNum = Number(aStr);
+  const bNum = Number(bStr);
+  if (!isNaN(aNum) && !isNaN(bNum) && aStr !== "" && bStr !== "") {
+    return direction === "asc" ? aNum - bNum : bNum - aNum;
+  }
+  const cmp = aStr.localeCompare(bStr);
+  return direction === "asc" ? cmp : -cmp;
+}
+function DataTable({
+  data,
+  columns,
+  getRowKey,
+  // Sorting
+  defaultSort,
+  sort: controlledSort,
+  onSortChange,
+  // Search
+  searchable = false,
+  searchPlaceholder = "Search...",
+  searchValue: controlledSearchValue,
+  onSearchChange,
+  searchFn,
+  // Pagination
+  pageSize: defaultPageSize,
+  pageSizeOptions = [10, 15, 25, 50, 100],
+  currentPage: controlledPage,
+  onPageChange,
+  onPageSizeChange,
+  // Selection
+  selectable,
+  selectedRows: controlledSelectedRows,
+  onSelectedRowsChange,
+  // Row interaction
+  onRowClick,
+  rowClassName,
+  // Pinned rows
+  pinnedRows = [],
+  // Slots
+  toolbar,
+  emptyState,
+  caption,
+  // Loading
+  loading = false,
+  // Styling
+  className
+}) {
+  const [internalSort, setInternalSort] = React20.useState(
+    defaultSort ?? null
+  );
+  const [internalSearchValue, setInternalSearchValue] = React20.useState("");
+  const [internalPage, setInternalPage] = React20.useState(0);
+  const [internalPageSize, setInternalPageSize] = React20.useState(
+    defaultPageSize ?? 10
+  );
+  const [internalSelectedRows, setInternalSelectedRows] = React20.useState([]);
+  const sort = controlledSort !== void 0 ? controlledSort : internalSort;
+  const searchQuery = controlledSearchValue !== void 0 ? controlledSearchValue : internalSearchValue;
+  const page = controlledPage !== void 0 ? controlledPage : internalPage;
+  const pageSize = defaultPageSize != null ? internalPageSize ?? defaultPageSize : void 0;
+  const selectedRowKeys = controlledSelectedRows !== void 0 ? controlledSelectedRows : internalSelectedRows;
+  const handleSortChange = React20.useCallback(
+    (next) => {
+      if (onSortChange) onSortChange(next);
+      else setInternalSort(next);
+    },
+    [onSortChange]
+  );
+  const handleSearchChange = React20.useCallback(
+    (value) => {
+      if (onSearchChange) onSearchChange(value);
+      else setInternalSearchValue(value);
+      if (onPageChange) onPageChange(0);
+      else setInternalPage(0);
+    },
+    [onSearchChange, onPageChange]
+  );
+  const handlePageChange = React20.useCallback(
+    (p) => {
+      if (onPageChange) onPageChange(p);
+      else setInternalPage(p);
+    },
+    [onPageChange]
+  );
+  const handlePageSizeChange = React20.useCallback(
+    (size) => {
+      if (onPageSizeChange) onPageSizeChange(size);
+      else setInternalPageSize(size);
+      if (onPageChange) onPageChange(0);
+      else setInternalPage(0);
+    },
+    [onPageSizeChange, onPageChange]
+  );
+  const handleSelectionChange = React20.useCallback(
+    (keys) => {
+      if (onSelectedRowsChange) onSelectedRowsChange(keys);
+      else setInternalSelectedRows(keys);
+    },
+    [onSelectedRowsChange]
+  );
+  const handleHeaderClick = React20.useCallback(
+    (colKey) => {
+      if (sort?.key === colKey) {
+        if (sort.direction === "asc") {
+          handleSortChange({ key: colKey, direction: "desc" });
+        } else {
+          handleSortChange(null);
+        }
+      } else {
+        handleSortChange({ key: colKey, direction: "asc" });
+      }
+    },
+    [sort, handleSortChange]
+  );
+  const searchedData = React20.useMemo(() => {
+    if (!searchable || !searchQuery) return data;
+    if (searchFn) return data.filter((row) => searchFn(row, searchQuery));
+    return data.filter((row) => defaultSearch(row, searchQuery, columns));
+  }, [data, searchable, searchQuery, searchFn, columns]);
+  const sortedData = React20.useMemo(() => {
+    if (!sort) return searchedData;
+    const col = columns.find((c) => c.key === sort.key);
+    if (!col) return searchedData;
+    return [...searchedData].sort(
+      (a, b) => defaultSortComparator(a, b, col, sort.direction)
+    );
+  }, [searchedData, sort, columns]);
+  const pinnedSet = React20.useMemo(() => new Set(pinnedRows), [pinnedRows]);
+  const { pinnedData, unpinnedData } = React20.useMemo(() => {
+    if (pinnedSet.size === 0) return { pinnedData: [], unpinnedData: sortedData };
+    const pinned = [];
+    const unpinned = [];
+    const dataByKey = /* @__PURE__ */ new Map();
+    data.forEach((row, i) => {
+      dataByKey.set(getRowKey(row, i), row);
+    });
+    pinnedRows.forEach((key) => {
+      const row = dataByKey.get(key);
+      if (row) pinned.push(row);
+    });
+    sortedData.forEach((row, i) => {
+      const key = getRowKey(row, i);
+      if (!pinnedSet.has(key)) unpinned.push(row);
+    });
+    return { pinnedData: pinned, unpinnedData: unpinned };
+  }, [sortedData, pinnedSet, pinnedRows, data, getRowKey]);
+  const totalUnpinned = unpinnedData.length;
+  const totalPages = pageSize ? Math.max(1, Math.ceil(totalUnpinned / pageSize)) : 1;
+  const paginatedData = React20.useMemo(() => {
+    if (!pageSize) return unpinnedData;
+    const start = page * pageSize;
+    return unpinnedData.slice(start, start + pageSize);
+  }, [unpinnedData, pageSize, page]);
+  const visibleRows = React20.useMemo(
+    () => [...pinnedData, ...paginatedData],
+    [pinnedData, paginatedData]
+  );
+  const totalItems = searchedData.length;
+  const visibleKeys = React20.useMemo(
+    () => visibleRows.map((row, i) => getRowKey(row, i)),
+    [visibleRows, getRowKey]
+  );
+  const allVisibleSelected = visibleKeys.length > 0 && visibleKeys.every((k) => selectedRowKeys.includes(k));
+  const someVisibleSelected = !allVisibleSelected && visibleKeys.some((k) => selectedRowKeys.includes(k));
+  const toggleRowSelection = React20.useCallback(
+    (key) => {
+      const isSelected = selectedRowKeys.includes(key);
+      const next = isSelected ? selectedRowKeys.filter((k) => k !== key) : [...selectedRowKeys, key];
+      handleSelectionChange(next);
+    },
+    [selectedRowKeys, handleSelectionChange]
+  );
+  const toggleAllVisible = React20.useCallback(() => {
+    if (allVisibleSelected) {
+      const visibleSet = new Set(visibleKeys);
+      handleSelectionChange(selectedRowKeys.filter((k) => !visibleSet.has(k)));
+    } else {
+      const merged = /* @__PURE__ */ new Set([...selectedRowKeys, ...visibleKeys]);
+      handleSelectionChange(Array.from(merged));
+    }
+  }, [allVisibleSelected, visibleKeys, selectedRowKeys, handleSelectionChange]);
+  const handleRowClick = React20.useCallback(
+    (row, index, key) => {
+      if (selectable === "highlight") {
+        toggleRowSelection(key);
+      }
+      onRowClick?.(row, index);
+    },
+    [selectable, toggleRowSelection, onRowClick]
+  );
+  const renderCellContent = (row, col, rowIndex) => {
+    if (col.cell) return col.cell(row, rowIndex);
+    const val = getCellRawValue(row, col);
+    if (val == null) return /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: "--" });
+    return String(val);
+  };
+  const alignClass = (align) => {
+    if (align === "center") return "text-center";
+    if (align === "right") return "text-right";
+    return "text-left";
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center py-16", className), children: /* @__PURE__ */ jsx(LoadingSpinner, { label: "Loading", showDots: true }) });
+  }
+  const showSearch = searchable;
+  const showPagination = pageSize != null;
+  const showCheckboxColumn = selectable === "checkbox";
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col w-full", className), children: [
+    (showSearch || toolbar) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 pb-4", children: [
+      showSearch && /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm", children: [
+        /* @__PURE__ */ jsx(Search, { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" }),
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            placeholder: searchPlaceholder,
+            value: searchQuery,
+            onChange: (e) => handleSearchChange(e.target.value),
+            className: "pl-9"
+          }
+        )
+      ] }),
+      toolbar && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: toolbar })
+    ] }),
+    /* @__PURE__ */ jsxs(Table, { children: [
+      caption && /* @__PURE__ */ jsx(TableCaption, { children: caption }),
+      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+        showCheckboxColumn && /* @__PURE__ */ jsx(TableHead, { className: "w-[40px]", children: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            checked: allVisibleSelected ? true : someVisibleSelected ? "indeterminate" : false,
+            onCheckedChange: () => toggleAllVisible(),
+            "aria-label": "Select all"
+          }
+        ) }),
+        columns.map((col) => {
+          const isSorted = sort?.key === col.key;
+          const sortDir = isSorted ? sort.direction : null;
+          return /* @__PURE__ */ jsx(
+            TableHead,
+            {
+              className: cn(
+                col.width,
+                col.headerClassName,
+                alignClass(col.align),
+                col.sortable && "cursor-pointer select-none"
+              ),
+              onClick: col.sortable ? () => handleHeaderClick(col.key) : void 0,
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center gap-1",
+                    col.align === "center" && "justify-center",
+                    col.align === "right" && "justify-end"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: col.header }),
+                    col.sortable && /* @__PURE__ */ jsx("span", { className: "inline-flex ml-1", children: sortDir === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5" }) : sortDir === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 opacity-40" }) })
+                  ]
+                }
+              )
+            },
+            col.key
+          );
+        })
+      ] }) }),
+      pinnedData.length > 0 && /* @__PURE__ */ jsx(TableBody, { className: "bg-muted/30 border-b-2 border-border", children: pinnedData.map((row, i) => {
+        const key = getRowKey(row, i);
+        const isSelected = selectedRowKeys.includes(key);
+        return /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            "data-state": isSelected ? "selected" : void 0,
+            className: cn(
+              (onRowClick || selectable === "highlight") && "cursor-pointer",
+              rowClassName?.(row, i)
+            ),
+            onClick: () => handleRowClick(row, i, key),
+            children: [
+              showCheckboxColumn && /* @__PURE__ */ jsx(TableCell, { className: "w-[40px]", children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isSelected,
+                  onCheckedChange: () => toggleRowSelection(key),
+                  onClick: (e) => e.stopPropagation(),
+                  "aria-label": "Select row"
+                }
+              ) }),
+              columns.map((col) => /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: cn(alignClass(col.align), col.className),
+                  children: renderCellContent(row, col, i)
+                },
+                col.key
+              ))
+            ]
+          },
+          key
+        );
+      }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: paginatedData.length === 0 && pinnedData.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(
+        TableCell,
+        {
+          colSpan: columns.length + (showCheckboxColumn ? 1 : 0),
+          className: "h-24 text-center",
+          children: emptyState ?? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "No results." })
+        }
+      ) }) : paginatedData.map((row, i) => {
+        const globalIndex = pageSize ? page * pageSize + i : i;
+        const key = getRowKey(row, globalIndex);
+        const isSelected = selectedRowKeys.includes(key);
+        return /* @__PURE__ */ jsxs(
+          TableRow,
+          {
+            "data-state": isSelected ? "selected" : void 0,
+            className: cn(
+              (onRowClick || selectable === "highlight") && "cursor-pointer",
+              rowClassName?.(row, globalIndex)
+            ),
+            onClick: () => handleRowClick(row, globalIndex, key),
+            children: [
+              showCheckboxColumn && /* @__PURE__ */ jsx(TableCell, { className: "w-[40px]", children: /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  checked: isSelected,
+                  onCheckedChange: () => toggleRowSelection(key),
+                  onClick: (e) => e.stopPropagation(),
+                  "aria-label": "Select row"
+                }
+              ) }),
+              columns.map((col) => /* @__PURE__ */ jsx(
+                TableCell,
+                {
+                  className: cn(alignClass(col.align), col.className),
+                  children: renderCellContent(row, col, globalIndex)
+                },
+                col.key
+              ))
+            ]
+          },
+          key
+        );
+      }) })
+    ] }),
+    showPagination && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Rows per page" }),
+        /* @__PURE__ */ jsxs(
+          Select,
+          {
+            value: String(pageSize),
+            onValueChange: (val) => handlePageSizeChange(Number(val)),
+            children: [
+              /* @__PURE__ */ jsx(SelectTrigger, { className: "h-8 w-[70px]", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: String(pageSize) }) }),
+              /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: String(opt), children: opt }, opt)) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          page + 1,
+          " of ",
+          totalPages,
+          ` (${totalItems} total)`
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: () => handlePageChange(0),
+              disabled: page === 0,
+              "aria-label": "First page",
+              children: /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: () => handlePageChange(page - 1),
+              disabled: page === 0,
+              "aria-label": "Previous page",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: () => handlePageChange(page + 1),
+              disabled: page >= totalPages - 1,
+              "aria-label": "Next page",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon",
+              className: "h-8 w-8",
+              onClick: () => handlePageChange(totalPages - 1),
+              disabled: page >= totalPages - 1,
+              "aria-label": "Last page",
+              children: /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+DataTable.displayName = "DataTable";
 function Modal({
   isOpen,
   onClose,
@@ -1525,7 +2037,7 @@ function Modal({
   zIndex = 50,
   className
 }) {
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (!isOpen) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -1535,7 +2047,7 @@ function Modal({
     window.addEventListener("keydown", handleEscape);
     return () => window.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -1650,12 +2162,12 @@ function ConfirmationModal({
   ] }) });
 }
 function useConfirmation() {
-  const [state, setState] = React34.useState({
+  const [state, setState] = React20.useState({
     open: false,
     title: "",
     description: ""
   });
-  const confirm = React34.useCallback(
+  const confirm = React20.useCallback(
     (options) => {
       return new Promise((resolve) => {
         setState({
@@ -1667,15 +2179,15 @@ function useConfirmation() {
     },
     []
   );
-  const handleConfirm = React34.useCallback(() => {
+  const handleConfirm = React20.useCallback(() => {
     state.resolve?.(true);
     setState((prev) => ({ ...prev, open: false }));
   }, [state.resolve]);
-  const handleCancel = React34.useCallback(() => {
+  const handleCancel = React20.useCallback(() => {
     state.resolve?.(false);
     setState((prev) => ({ ...prev, open: false }));
   }, [state.resolve]);
-  const handleOpenChange = React34.useCallback(
+  const handleOpenChange = React20.useCallback(
     (open) => {
       if (!open) {
         state.resolve?.(false);
@@ -1711,11 +2223,11 @@ function ResizeHandle({
   ariaLabel,
   className
 }) {
-  const [isDragging, setIsDragging] = React34.useState(false);
-  const [isFocused, setIsFocused] = React34.useState(false);
-  const startXRef = React34.useRef(0);
-  const handleRef = React34.useRef(null);
-  const handleMouseDown = React34.useCallback(
+  const [isDragging, setIsDragging] = React20.useState(false);
+  const [isFocused, setIsFocused] = React20.useState(false);
+  const startXRef = React20.useRef(0);
+  const handleRef = React20.useRef(null);
+  const handleMouseDown = React20.useCallback(
     (e) => {
       if (!resizable) return;
       e.preventDefault();
@@ -1726,7 +2238,7 @@ function ResizeHandle({
     },
     [resizable, onDragStart]
   );
-  const handleMouseMove = React34.useCallback(
+  const handleMouseMove = React20.useCallback(
     (e) => {
       if (!isDragging) return;
       const deltaX = e.clientX - startXRef.current;
@@ -1735,13 +2247,13 @@ function ResizeHandle({
     },
     [isDragging, onDrag]
   );
-  const handleMouseUp = React34.useCallback(() => {
+  const handleMouseUp = React20.useCallback(() => {
     if (!isDragging) return;
     setIsDragging(false);
     document.body.style.userSelect = "";
     onDragEnd?.();
   }, [isDragging, onDragEnd]);
-  const handleKeyDown = React34.useCallback(
+  const handleKeyDown = React20.useCallback(
     (e) => {
       if (!resizable || !onKeyboardResize) return;
       let direction = null;
@@ -1760,7 +2272,7 @@ function ResizeHandle({
     },
     [resizable, onKeyboardResize, orientation]
   );
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -1830,12 +2342,12 @@ function ResizablePanel({
   className,
   dataAttributes = {}
 }) {
-  const panelRef = React34.useRef(null);
-  const [isDragging, setIsDragging] = React34.useState(false);
-  const [localWidth, setLocalWidth] = React34.useState(null);
-  const [localOuterWidth, setLocalOuterWidth] = React34.useState(null);
+  const panelRef = React20.useRef(null);
+  const [isDragging, setIsDragging] = React20.useState(false);
+  const [localWidth, setLocalWidth] = React20.useState(null);
+  const [localOuterWidth, setLocalOuterWidth] = React20.useState(null);
   const currentWidthVW = isExpanded ? (isDragging && localWidth !== null ? localWidth : expandedWidthVW) || collapsedSizeVW : collapsedSizeVW;
-  const clampWidth = React34.useCallback(
+  const clampWidth = React20.useCallback(
     (width) => {
       let effectiveMinWidth = minWidthVW;
       let effectiveMaxWidth = maxWidthVW;
@@ -1848,11 +2360,11 @@ function ResizablePanel({
     },
     [minWidthVW, maxWidthVW, orientation, leftWidthVW, isOverlay]
   );
-  const handleDragStart = React34.useCallback(() => {
+  const handleDragStart = React20.useCallback(() => {
     setIsDragging(true);
     setLocalWidth(currentWidthVW);
   }, [currentWidthVW]);
-  const handleDrag = React34.useCallback(
+  const handleDrag = React20.useCallback(
     (deltaX) => {
       if (!isExpanded || isOverlay) return;
       const viewportWidth = window.innerWidth;
@@ -1871,14 +2383,14 @@ function ResizablePanel({
       clampWidth
     ]
   );
-  const handleDragEnd = React34.useCallback(() => {
+  const handleDragEnd = React20.useCallback(() => {
     if (localWidth !== null && onResize) {
       onResize(localWidth);
     }
     setIsDragging(false);
     setLocalWidth(null);
   }, [localWidth, onResize]);
-  const handleKeyboardResize = React34.useCallback(
+  const handleKeyboardResize = React20.useCallback(
     (direction) => {
       if (!isExpanded || isOverlay || !onResize) return;
       const step = 1;
@@ -1887,13 +2399,13 @@ function ResizablePanel({
     },
     [isExpanded, isOverlay, onResize, currentWidthVW, clampWidth]
   );
-  const handleOverlayDragStart = React34.useCallback(() => {
+  const handleOverlayDragStart = React20.useCallback(() => {
     if (outerWidthVW) {
       setIsDragging(true);
       setLocalOuterWidth(outerWidthVW);
     }
   }, [outerWidthVW]);
-  const handleOverlayDrag = React34.useCallback(
+  const handleOverlayDrag = React20.useCallback(
     (deltaX) => {
       if (!isOverlay) return;
       const viewportWidth = window.innerWidth;
@@ -1904,14 +2416,14 @@ function ResizablePanel({
     },
     [isOverlay, localOuterWidth, outerWidthVW]
   );
-  const handleOverlayDragEnd = React34.useCallback(() => {
+  const handleOverlayDragEnd = React20.useCallback(() => {
     if (localOuterWidth !== null && onResizeOverlay) {
       onResizeOverlay(localOuterWidth);
     }
     setIsDragging(false);
     setLocalOuterWidth(null);
   }, [localOuterWidth, onResizeOverlay]);
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (isOverlay && panelRef.current) {
       const focusableElement = panelRef.current.querySelector(
         'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -1919,7 +2431,7 @@ function ResizablePanel({
       focusableElement?.focus();
     }
   }, [isOverlay]);
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (!isOverlay) return;
     const handleEscape = (e) => {
       if (e.key === "Escape") {
@@ -2105,74 +2617,6 @@ function Chip({
     }
   );
 }
-var loadingSpinnerVariants = cva("rounded-full animate-spin border-current", {
-  variants: {
-    /**
-     * Size of the spinner
-     */
-    size: {
-      sm: "w-4 h-4 border-2",
-      default: "w-8 h-8 border-2",
-      lg: "w-12 h-12 border-[3px]",
-      xl: "w-16 h-16 border-4"
-    },
-    /**
-     * Visual variant
-     */
-    variant: {
-      /** Primary color spinner (default) */
-      default: "border-primary/20 border-t-primary",
-      /** Accent color spinner */
-      accent: "border-accent/20 border-t-accent",
-      /** Muted/subtle spinner */
-      muted: "border-muted-foreground/20 border-t-muted-foreground",
-      /** Inherits current text color */
-      inherit: "border-current/20 border-t-current"
-    }
-  },
-  defaultVariants: {
-    size: "default",
-    variant: "default"
-  }
-});
-var LoadingSpinner = React34.forwardRef(
-  ({ className, size, variant, label, showDots = false, ...props }, ref) => {
-    const [dots, setDots] = React34.useState("");
-    React34.useEffect(() => {
-      if (!showDots || !label) return;
-      const interval = setInterval(() => {
-        setDots((prev) => prev.length >= 3 ? "" : prev + ".");
-      }, 500);
-      return () => clearInterval(interval);
-    }, [showDots, label]);
-    if (label) {
-      return /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col items-center gap-3", className),
-          ...props,
-          children: [
-            /* @__PURE__ */ jsx("div", { className: loadingSpinnerVariants({ size, variant }) }),
-            /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
-              label,
-              showDots && /* @__PURE__ */ jsx("span", { className: "inline-block w-4", children: dots })
-            ] })
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(loadingSpinnerVariants({ size, variant }), className),
-        ...props
-      }
-    );
-  }
-);
-LoadingSpinner.displayName = "LoadingSpinner";
 function Toaster({
   position = "top-right",
   expand = false,
@@ -2235,12 +2679,12 @@ function Calendar({
   const endMonth = props.endMonth ?? props.toDate;
   const fromYear = startMonth?.getFullYear();
   const toYear = endMonth?.getFullYear();
-  const years = React34.useMemo(() => getYearRange(fromYear, toYear), [fromYear, toYear]);
-  const [internalMonth, setInternalMonth] = React34.useState(
+  const years = React20.useMemo(() => getYearRange(fromYear, toYear), [fromYear, toYear]);
+  const [internalMonth, setInternalMonth] = React20.useState(
     defaultMonth ?? /* @__PURE__ */ new Date()
   );
   const displayedMonth = controlledMonth ?? internalMonth;
-  const handleMonthChange = React34.useCallback(
+  const handleMonthChange = React20.useCallback(
     (newMonth) => {
       if (controlledMonth === void 0) {
         setInternalMonth(newMonth);
@@ -2371,8 +2815,8 @@ function DatePicker({
   matchTriggerWidth = false,
   onOpenChange
 }) {
-  const [open, setOpen] = React34.useState(false);
-  const [internalValue, setInternalValue] = React34.useState(
+  const [open, setOpen] = React20.useState(false);
+  const [internalValue, setInternalValue] = React20.useState(
     defaultValue
   );
   const isControlled = value !== void 0;
@@ -2474,15 +2918,15 @@ function DatePickerInput({
   onOpenChange,
   size = "default"
 }) {
-  const [open, setOpen] = React34.useState(false);
-  const [internalValue, setInternalValue] = React34.useState(
+  const [open, setOpen] = React20.useState(false);
+  const [internalValue, setInternalValue] = React20.useState(
     defaultValue
   );
-  const [inputValue, setInputValue] = React34.useState("");
-  const inputRef = React34.useRef(null);
+  const [inputValue, setInputValue] = React20.useState("");
+  const inputRef = React20.useRef(null);
   const isControlled = value !== void 0;
   const selectedDate = isControlled ? value : internalValue;
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (selectedDate) {
       setInputValue(format(selectedDate, dateFormat));
     } else {
@@ -2643,11 +3087,11 @@ function FilterPopover({
   onFilterChange
 }) {
   const filterType = column.filterType || "text";
-  const [operator, setOperator] = React34.useState(
+  const [operator, setOperator] = React20.useState(
     filter?.operator || getDefaultOperator(filterType)
   );
-  const [value, setValue] = React34.useState(filter?.value ?? "");
-  const [valueTo, setValueTo] = React34.useState(filter?.valueTo ?? "");
+  const [value, setValue] = React20.useState(filter?.value ?? "");
+  const [valueTo, setValueTo] = React20.useState(filter?.valueTo ?? "");
   function getDefaultOperator(type) {
     switch (type) {
       case "text":
@@ -2790,7 +3234,7 @@ function FilterPopover({
     ] })
   ] });
   const renderDateFilter = () => {
-    const dateValue = React34.useMemo(() => {
+    const dateValue = React20.useMemo(() => {
       if (!value) return void 0;
       if (value instanceof Date) return value;
       if (typeof value === "string") {
@@ -2799,7 +3243,7 @@ function FilterPopover({
       }
       return void 0;
     }, [value]);
-    const dateToValue = React34.useMemo(() => {
+    const dateToValue = React20.useMemo(() => {
       if (!valueTo) return void 0;
       if (valueTo instanceof Date) return valueTo;
       if (typeof valueTo === "string") {
@@ -2934,7 +3378,7 @@ function HeaderCell({
   onResizeDoubleClick,
   isResizing
 }) {
-  const [filterOpen, setFilterOpen] = React34.useState(false);
+  const [filterOpen, setFilterOpen] = React20.useState(false);
   const isSorted = sorting?.field === column.key;
   const isFiltered = !!filter;
   const isSortable = column.sortable && onSort;
@@ -3092,15 +3536,15 @@ function CellEditor({
   className
 }) {
   const editorType = column.editorType || "text";
-  const [internalValue, setInternalValue] = React34.useState(value);
-  const [validationError, setValidationError] = React34.useState(
+  const [internalValue, setInternalValue] = React20.useState(value);
+  const [validationError, setValidationError] = React20.useState(
     null
   );
-  const inputRef = React34.useRef(null);
-  const selectRef = React34.useRef(null);
+  const inputRef = React20.useRef(null);
+  const selectRef = React20.useRef(null);
   const currentValue = onChange ? value : internalValue;
   const setValue = onChange || setInternalValue;
-  const validate = React34.useCallback(
+  const validate = React20.useCallback(
     (val) => {
       if (!column.validator) return true;
       const result = column.validator(val, row);
@@ -3148,7 +3592,7 @@ function CellEditor({
     }
     handleCommit();
   };
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     const timer = setTimeout(() => {
       if (editorType === "select") {
         selectRef.current?.focus();
@@ -3195,7 +3639,7 @@ function CellEditor({
     }
   );
   const renderDateEditor = () => {
-    const dateValue = React34.useMemo(() => {
+    const dateValue = React20.useMemo(() => {
       if (!currentValue) return void 0;
       if (currentValue instanceof Date) return currentValue;
       if (typeof currentValue === "string") {
@@ -4243,15 +4687,15 @@ function DataGrid({
   hasMore = false,
   loadingMore = false
 }) {
-  const parentRef = React34.useRef(null);
-  const headerRef = React34.useRef(null);
-  const [headerHeight, setHeaderHeight] = React34.useState(40);
-  const [hoveredCell, setHoveredCell] = React34.useState(null);
-  const visibleColumns = React34.useMemo(
+  const parentRef = React20.useRef(null);
+  const headerRef = React20.useRef(null);
+  const [headerHeight, setHeaderHeight] = React20.useState(40);
+  const [hoveredCell, setHoveredCell] = React20.useState(null);
+  const visibleColumns = React20.useMemo(
     () => columns.filter((col) => !col.hidden),
     [columns]
   );
-  const getCellValue2 = React34.useCallback(
+  const getCellValue2 = React20.useCallback(
     (row, column) => {
       if (column.accessor) {
         return column.accessor(row);
@@ -4280,7 +4724,7 @@ function DataGrid({
     data,
     getCellValue: getCellValue2
   });
-  const processedData = React34.useMemo(() => {
+  const processedData = React20.useMemo(() => {
     let result = data;
     if (enableInternalFiltering && !isControlled.filters && state.filters.length > 0) {
       result = applyFilters(result, state.filters, visibleColumns);
@@ -4308,7 +4752,7 @@ function DataGrid({
     onColumnResizeEnd
   });
   const shouldVirtualize = virtualized ?? processedData.length > 100;
-  React34.useLayoutEffect(() => {
+  React20.useLayoutEffect(() => {
     if (headerRef.current && shouldVirtualize) {
       setHeaderHeight(headerRef.current.offsetHeight);
     }
@@ -4320,13 +4764,13 @@ function DataGrid({
     overscan: DEFAULT_OVERSCAN,
     enabled: shouldVirtualize
   });
-  const tableWidth = React34.useMemo(() => {
+  const tableWidth = React20.useMemo(() => {
     return visibleColumns.reduce((acc, col) => {
       const width = state.columnWidths[col.key] || col.width || estimateColumnWidth(col);
       return acc + width;
     }, 0);
   }, [visibleColumns, state.columnWidths]);
-  const visibleRowCount = React34.useMemo(() => {
+  const visibleRowCount = React20.useMemo(() => {
     if (!parentRef.current) return 10;
     return Math.floor(parentRef.current.clientHeight / DEFAULT_ROW_HEIGHT);
   }, []);
@@ -4345,7 +4789,7 @@ function DataGrid({
       rowVirtualizer.scrollToIndex(rowIndex, { align: "auto" });
     }
   });
-  const handleBlur = React34.useCallback(
+  const handleBlur = React20.useCallback(
     (event) => {
       const target = event.target;
       const relatedTarget = event.relatedTarget;
@@ -4403,7 +4847,7 @@ function DataGrid({
     },
     [state.editingCell, actions]
   );
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (!infiniteScroll || !hasMore || loadingMore || !parentRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -4847,7 +5291,7 @@ function DataGrid({
   );
 }
 function PaginationFooter({ pagination }) {
-  const [goToPage, setGoToPage] = React34.useState("");
+  const [goToPage, setGoToPage] = React20.useState("");
   const handleGoToPage = () => {
     const page = parseInt(goToPage, 10);
     if (!isNaN(page) && page >= 1 && page <= pagination.totalPages) {
@@ -4965,21 +5409,21 @@ function Autocomplete({
   className,
   clearable = false
 }) {
-  const [open, setOpen] = React34.useState(false);
-  const [search, setSearch] = React34.useState("");
-  const inputRef = React34.useRef(null);
-  const selectedOption = React34.useMemo(
+  const [open, setOpen] = React20.useState(false);
+  const [search, setSearch] = React20.useState("");
+  const inputRef = React20.useRef(null);
+  const selectedOption = React20.useMemo(
     () => options.find((opt) => opt.value === value),
     [options, value]
   );
-  const filteredOptions = React34.useMemo(() => {
+  const filteredOptions = React20.useMemo(() => {
     if (!search.trim()) return options;
     const searchLower = search.toLowerCase();
     return options.filter(
       (opt) => opt.label.toLowerCase().includes(searchLower) || opt.description?.toLowerCase().includes(searchLower)
     );
   }, [options, search]);
-  const groupedOptions = React34.useMemo(() => {
+  const groupedOptions = React20.useMemo(() => {
     const groups = {};
     const ungrouped = [];
     filteredOptions.forEach((opt) => {
@@ -4993,7 +5437,7 @@ function Autocomplete({
     return { groups, ungrouped };
   }, [filteredOptions]);
   const hasGroups = Object.keys(groupedOptions.groups).length > 0;
-  const handleSelect = React34.useCallback(
+  const handleSelect = React20.useCallback(
     (optionValue) => {
       onChange?.(optionValue);
       setOpen(false);
@@ -5001,7 +5445,7 @@ function Autocomplete({
     },
     [onChange]
   );
-  const handleClear = React34.useCallback(
+  const handleClear = React20.useCallback(
     (e) => {
       e.stopPropagation();
       onChange?.(void 0);
@@ -5009,7 +5453,7 @@ function Autocomplete({
     },
     [onChange]
   );
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (open) {
       const timeout = setTimeout(() => {
         inputRef.current?.focus();
@@ -5019,7 +5463,7 @@ function Autocomplete({
       setSearch("");
     }
   }, [open]);
-  const handleKeyDown = React34.useCallback((e) => {
+  const handleKeyDown = React20.useCallback((e) => {
     if (e.key === "Escape") {
       setOpen(false);
     }
@@ -5195,7 +5639,7 @@ var iconButtonVariants = cva(
     }
   }
 );
-var IconButton = React34.forwardRef(
+var IconButton = React20.forwardRef(
   ({ className, variant, size, isActive = false, icon, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(
       "button",
@@ -5219,7 +5663,7 @@ var IconButton = React34.forwardRef(
 );
 IconButton.displayName = "IconButton";
 function CopyButton({ content, className, size = "md" }) {
-  const [copied, setCopied] = React34.useState(false);
+  const [copied, setCopied] = React20.useState(false);
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(content);
@@ -5992,11 +6436,11 @@ function ThemePicker({
   align = "end",
   side = "bottom"
 }) {
-  const [open, setOpen] = React34.useState(false);
-  const [selectedTheme, setSelectedTheme] = React34.useState(
+  const [open, setOpen] = React20.useState(false);
+  const [selectedTheme, setSelectedTheme] = React20.useState(
     value || themes[0]
   );
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (value) {
       setSelectedTheme(value);
     }
@@ -6106,19 +6550,19 @@ function getSafePosition(x, y, menuWidth, menuHeight) {
   return { x: safeX, y: safeY };
 }
 function MenuItem({ item, onClose, depth = 0 }) {
-  const [isSubmenuOpen, setIsSubmenuOpen] = React34.useState(false);
-  const [submenuPosition, setSubmenuPosition] = React34.useState(null);
-  const itemRef = React34.useRef(null);
-  const hoverTimeoutRef = React34.useRef(null);
+  const [isSubmenuOpen, setIsSubmenuOpen] = React20.useState(false);
+  const [submenuPosition, setSubmenuPosition] = React20.useState(null);
+  const itemRef = React20.useRef(null);
+  const hoverTimeoutRef = React20.useRef(null);
   const hasSubmenu = item.submenu && item.submenu.length > 0;
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     return () => {
       if (hoverTimeoutRef.current) {
         clearTimeout(hoverTimeoutRef.current);
       }
     };
   }, []);
-  const handleMouseEnter = React34.useCallback(() => {
+  const handleMouseEnter = React20.useCallback(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
     }
@@ -6138,22 +6582,22 @@ function MenuItem({ item, onClose, depth = 0 }) {
       setIsSubmenuOpen(true);
     }
   }, [hasSubmenu, item.submenu?.length]);
-  const handleMouseLeave = React34.useCallback(() => {
+  const handleMouseLeave = React20.useCallback(() => {
     hoverTimeoutRef.current = setTimeout(() => {
       setIsSubmenuOpen(false);
     }, 100);
   }, []);
-  const handleSubmenuMouseEnter = React34.useCallback(() => {
+  const handleSubmenuMouseEnter = React20.useCallback(() => {
     if (hoverTimeoutRef.current) {
       clearTimeout(hoverTimeoutRef.current);
     }
   }, []);
-  const handleSubmenuMouseLeave = React34.useCallback(() => {
+  const handleSubmenuMouseLeave = React20.useCallback(() => {
     hoverTimeoutRef.current = setTimeout(() => {
       setIsSubmenuOpen(false);
     }, 100);
   }, []);
-  const handleClick = React34.useCallback(() => {
+  const handleClick = React20.useCallback(() => {
     if (item.disabled) return;
     if (!hasSubmenu && item.action) {
       item.action();
@@ -6233,12 +6677,12 @@ function ContextMenu({
   anchorEl,
   className
 }) {
-  const menuRef = React34.useRef(null);
-  const [menuPosition, setMenuPosition] = React34.useState({
+  const menuRef = React20.useRef(null);
+  const [menuPosition, setMenuPosition] = React20.useState({
     x: 0,
     y: 0
   });
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (!isOpen) return;
     let x = position.x;
     let y = position.y;
@@ -6257,7 +6701,7 @@ function ContextMenu({
       }
     });
   }, [isOpen, position, anchorEl]);
-  React34.useEffect(() => {
+  React20.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (e) => {
       if (menuRef.current && !menuRef.current.contains(e.target)) {
@@ -6301,16 +6745,16 @@ function ContextMenu({
   );
 }
 function useContextMenu() {
-  const [isOpen, setIsOpen] = React34.useState(false);
-  const [position, setPosition] = React34.useState({ x: 0, y: 0 });
-  const [targetItem, setTargetItem] = React34.useState(null);
-  const menuRef = React34.useRef(null);
-  const openMenu = React34.useCallback((x, y, item) => {
+  const [isOpen, setIsOpen] = React20.useState(false);
+  const [position, setPosition] = React20.useState({ x: 0, y: 0 });
+  const [targetItem, setTargetItem] = React20.useState(null);
+  const menuRef = React20.useRef(null);
+  const openMenu = React20.useCallback((x, y, item) => {
     setPosition({ x, y });
     setTargetItem(item);
     setIsOpen(true);
   }, []);
-  const closeMenu = React34.useCallback(() => {
+  const closeMenu = React20.useCallback(() => {
     setIsOpen(false);
     setTargetItem(null);
   }, []);
@@ -6324,6 +6768,6 @@ function useContextMenu() {
   };
 }
 
-export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Board, BoardContent, BoardHeader, Button, CYBERPUNK_THEME, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, ConfirmationModal, ContextMenu, CopyButton, DARK_ELEGANT_THEME, DataGrid, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FOREST_THEME, FUTURISTIC_THEME, FilterPopover, GREEN_THEME, HeaderCell, IconButton, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, Modal, ModalButton, NATURE_THEME, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, SCIFI_THEME, SUNSET_THEME, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, boardVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
+export { ALL_THEMES, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, Badge, Board, BoardContent, BoardHeader, Button, CYBERPUNK_THEME, Calendar, Card, CardActions, CardContent, CardDescription, CardFooter, CardGrid, CardHeader, CardImage, CardList, CardTitle, CellEditor, Checkbox, Chip, ConfirmationModal, ContextMenu, CopyButton, DARK_ELEGANT_THEME, DataGrid, DataTable, DatePicker, DatePickerInput, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FOREST_THEME, FUTURISTIC_THEME, FilterPopover, GREEN_THEME, HeaderCell, IconButton, Input, Label, LoadingSpinner, MINIMALIST_LIGHT_THEME, Modal, ModalButton, NATURE_THEME, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ResizablePanel, ResizeHandle, SCIFI_THEME, SUNSET_THEME, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableCard, Separator, Skeleton, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemePicker, Toaster, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipRoot, TooltipTrigger, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, boardVariants, buttonVariants, cardActionsVariants, cardGridVariants, cardImageVariants, cardListVariants, cardVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map