@mvn-ui/react 0.1.3 → 0.1.5

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import * as React49 from 'react';
-import React49__default, { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useContext, cloneElement, useMemo, Fragment as Fragment$1 } from 'react';
+import * as React52 from 'react';
+import React52__default, { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useCallback, useMemo, useContext, cloneElement, Fragment as Fragment$1 } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Slot } from '@radix-ui/react-slot';
-import { Loader2Icon, XIcon, EyeOffIcon, EyeIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, CircleIcon, X, InboxIcon, ChevronRightIcon, ChevronsUpDownIcon, CalendarIcon, ArrowLeft, ArrowRight, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown, Star, RotateCcw, MoreHorizontalIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, GripVerticalIcon, PanelLeftIcon, FileDown, SearchIcon, TextAlignJustify, Scaling, Pin, ListFilter, Minus, Plus } from 'lucide-react';
+import { Loader2Icon, XIcon, EyeOffIcon, EyeIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, MinusIcon, CircleIcon, X, InboxIcon, ChevronRightIcon, ChevronsUpDownIcon, CalendarIcon, ArrowLeft, ArrowRight, Calendar as Calendar$1, ChevronLeft, ChevronRight, ChevronDown, Star, RotateCcw, MoreHorizontalIcon, ChevronLeftIcon, ChevronsLeftIcon, ChevronsRightIcon, GripVerticalIcon, PanelLeftIcon, MenuIcon, FileDown, SearchIcon, ArrowUp, ArrowDown, MoreHorizontal, Pin, ListFilter, Minus, Plus } from 'lucide-react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -43,6 +43,8 @@ import isEqual from 'react-fast-compare';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { getDefaultClassNames, DayPicker } from 'react-day-picker';
 import useEmblaCarousel from 'embla-carousel-react';
+import { ResponsiveContainer, LineChart as LineChart$1, CartesianGrid, XAxis, YAxis, Tooltip as Tooltip$1, Legend, Line, BarChart as BarChart$1, Bar, PieChart as PieChart$1, Pie, Cell, AreaChart as AreaChart$1, Area, ScatterChart as ScatterChart$1, ZAxis, Scatter, RadarChart as RadarChart$1, PolarGrid, PolarAngleAxis, PolarRadiusAxis, Radar } from 'recharts';
+export { Area, Bar, Brush, CartesianGrid, Cell, Legend as ChartLegend, Tooltip as ChartTooltip, Line, Pie, PolarAngleAxis, PolarGrid, PolarRadiusAxis, Radar, ReferenceArea, ReferenceLine, ResponsiveContainer, Scatter, XAxis, YAxis, ZAxis } from 'recharts';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -286,7 +288,7 @@ var init_card = __esm({
         }
       }
     );
-    Card = React49.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
+    Card = React52.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -295,7 +297,7 @@ var init_card = __esm({
       }
     ));
     Card.displayName = "Card";
-    CardHeader = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardHeader = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -304,7 +306,7 @@ var init_card = __esm({
       }
     ));
     CardHeader.displayName = "CardHeader";
-    CardTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardTitle = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "h3",
       {
         ref,
@@ -313,7 +315,7 @@ var init_card = __esm({
       }
     ));
     CardTitle.displayName = "CardTitle";
-    CardDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardDescription = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -322,9 +324,9 @@ var init_card = __esm({
       }
     ));
     CardDescription.displayName = "CardDescription";
-    CardContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+    CardContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props }));
     CardContent.displayName = "CardContent";
-    CardFooter = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    CardFooter = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
       "div",
       {
         ref,
@@ -335,6 +337,132 @@ var init_card = __esm({
     CardFooter.displayName = "CardFooter";
   }
 });
+var BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+function useBreakpoint(ssrFallback = "md") {
+  const [breakpoint, setBreakpoint] = useState(ssrFallback);
+  useEffect(() => {
+    const getBreakpoint = () => {
+      const width = window.innerWidth;
+      if (width >= BREAKPOINTS.xl) return "xl";
+      if (width >= BREAKPOINTS.lg) return "lg";
+      if (width >= BREAKPOINTS.md) return "md";
+      if (width >= BREAKPOINTS.sm) return "sm";
+      return "xs";
+    };
+    setBreakpoint(getBreakpoint());
+    let timeoutId;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => setBreakpoint(getBreakpoint()), 150);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  return breakpoint;
+}
+function useBreakpointValue(values, fallback) {
+  const breakpoint = useBreakpoint();
+  return useMemo(() => {
+    const order = ["xs", "sm", "md", "lg", "xl"];
+    const currentIndex = order.indexOf(breakpoint);
+    for (let i = currentIndex; i >= 0; i--) {
+      const bp = order[i];
+      if (values[bp] !== void 0) {
+        return values[bp];
+      }
+    }
+    return fallback;
+  }, [breakpoint, values, fallback]);
+}
+
+// src/hooks/useIsMobile.ts
+function useIsMobile(ssrFallback = false) {
+  const fallbackBreakpoint = ssrFallback ? "xs" : "md";
+  const breakpoint = useBreakpoint(fallbackBreakpoint);
+  return breakpoint === "xs" || breakpoint === "sm";
+}
+function useIsTablet() {
+  const breakpoint = useBreakpoint();
+  return breakpoint === "md";
+}
+function useIsDesktop() {
+  const breakpoint = useBreakpoint();
+  return breakpoint === "lg" || breakpoint === "xl";
+}
+function useSwipeActions({
+  leftActions = [],
+  rightActions = [],
+  threshold = 80,
+  disabled = false
+} = {}) {
+  const [offsetX, setOffsetX] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const [revealed, setRevealed] = useState(null);
+  const startX = useRef(0);
+  const currentOffsetX = useRef(0);
+  currentOffsetX.current = offsetX;
+  const reset = useCallback(() => {
+    setOffsetX(0);
+    setRevealed(null);
+  }, []);
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (disabled) return;
+      startX.current = e.touches[0].clientX;
+      setIsDragging(true);
+    },
+    [disabled]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (disabled || !isDragging) return;
+      const currentX = e.touches[0].clientX;
+      const deltaX = currentX - startX.current;
+      const maxLeft = rightActions.length > 0 ? -threshold * 1.5 : 0;
+      const maxRight = leftActions.length > 0 ? threshold * 1.5 : 0;
+      const clampedX = Math.max(maxLeft, Math.min(maxRight, deltaX));
+      setOffsetX(clampedX);
+    },
+    [disabled, isDragging, threshold, leftActions.length, rightActions.length]
+  );
+  const handleTouchEnd = useCallback(() => {
+    setIsDragging(false);
+    const offset = currentOffsetX.current;
+    if (Math.abs(offset) >= threshold) {
+      if (offset < 0 && rightActions.length > 0) {
+        setRevealed("right");
+        setOffsetX(-threshold);
+      } else if (offset > 0 && leftActions.length > 0) {
+        setRevealed("left");
+        setOffsetX(threshold);
+      } else {
+        reset();
+      }
+    } else {
+      reset();
+    }
+  }, [threshold, leftActions.length, rightActions.length, reset]);
+  const computedOffsetX = revealed === "right" ? -threshold : revealed === "left" ? threshold : offsetX;
+  return {
+    offsetX: computedOffsetX,
+    revealed,
+    isDragging,
+    handlers: {
+      onTouchStart: handleTouchStart,
+      onTouchMove: handleTouchMove,
+      onTouchEnd: handleTouchEnd
+    },
+    reset
+  };
+}
 
 // src/components/ui/button/index.tsx
 init_utils();
@@ -354,8 +482,10 @@ var buttonVariants = cva(
         default: "h-10 px-4 py-2.5 rounded-md text-[0.9375rem]",
         sm: "h-8 px-3 py-1.5 rounded text-sm",
         lg: "h-12 px-5 py-3 rounded-md text-base",
+        touch: "h-11 min-h-[44px] px-4 py-2.5 rounded-md text-base",
         icon: "h-10 w-10 rounded-md",
-        "icon-sm": "h-8 w-8 rounded"
+        "icon-sm": "h-8 w-8 rounded",
+        "icon-touch": "h-11 w-11 min-h-[44px] min-w-[44px] rounded-md"
       },
       fullWidth: {
         true: "w-full"
@@ -367,7 +497,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React49.forwardRef(
+var Button = React52.forwardRef(
   ({
     className,
     variant,
@@ -417,7 +547,7 @@ var Button = React49.forwardRef(
   }
 );
 Button.displayName = "Button";
-var IconButton = React49.forwardRef(
+var IconButton = React52.forwardRef(
   ({ icon, size = "icon", className, ...props }, ref) => {
     return /* @__PURE__ */ jsx(Button, { ref, size, className, ...props, children: icon });
   }
@@ -500,9 +630,10 @@ var inputVariants = cva(
         underlined: "rounded-md border-0 border-b-2 border-mvn-gray-300 px-3.5 py-2.5 hover:border-mvn-gray-400 focus:border-primary bg-transparent"
       },
       inputSize: {
-        sm: "h-8 text-sm px-2.5 py-1.5 rounded",
-        default: "h-10 text-[0.9375rem] px-3.5 py-2.5 rounded-md",
-        lg: "h-12 text-base px-4 py-3 rounded-md"
+        sm: "h-8 text-base px-2.5 py-1.5 rounded",
+        default: "h-10 text-base px-3.5 py-2.5 rounded-md",
+        lg: "h-12 text-base px-4 py-3 rounded-md",
+        touch: "h-11 min-h-[44px] text-base px-3.5 py-2.5 rounded-md"
       }
     },
     defaultVariants: {
@@ -511,7 +642,7 @@ var inputVariants = cva(
     }
   }
 );
-var Input = React49.forwardRef(
+var Input = React52.forwardRef(
   ({
     className,
     containerClassName,
@@ -529,12 +660,12 @@ var Input = React49.forwardRef(
     value,
     ...props
   }, ref) => {
-    const [showPassword, setShowPassword] = React49.useState(false);
-    const [internalValue, setInternalValue] = React49.useState(value || "");
-    const generatedId = React49.useId();
+    const [showPassword, setShowPassword] = React52.useState(false);
+    const [internalValue, setInternalValue] = React52.useState(value || "");
+    const generatedId = React52.useId();
     const inputId = id || generatedId;
     const hasError = !!error;
-    React49.useEffect(() => {
+    React52.useEffect(() => {
       setInternalValue(value || "");
     }, [value]);
     const handleClear = () => {
@@ -643,7 +774,7 @@ var labelVariants = cva(
     }
   }
 );
-var Label = React49.forwardRef(({ className, variant, required, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React52.forwardRef(({ className, variant, required, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -684,7 +815,7 @@ var textareaVariants = cva(
     }
   }
 );
-var Textarea = React49.forwardRef(
+var Textarea = React52.forwardRef(
   ({
     className,
     containerClassName,
@@ -702,8 +833,8 @@ var Textarea = React49.forwardRef(
     id,
     ...props
   }, ref) => {
-    const internalRef = React49.useRef(null);
-    const [charCount, setCharCount] = React49.useState(0);
+    const internalRef = React52.useRef(null);
+    const [charCount, setCharCount] = React52.useState(0);
     const textareaRef = (node) => {
       internalRef.current = node;
       if (typeof ref === "function") {
@@ -712,14 +843,14 @@ var Textarea = React49.forwardRef(
         ref.current = node;
       }
     };
-    React49.useEffect(() => {
+    React52.useEffect(() => {
       if (autoResize && internalRef.current) {
         const textarea = internalRef.current;
         textarea.style.height = "auto";
         textarea.style.height = `${textarea.scrollHeight}px`;
       }
     }, [value, autoResize]);
-    const handleChange = React49.useCallback(
+    const handleChange = React52.useCallback(
       (e) => {
         if (showCount || maxLength) {
           setCharCount(e.target.value.length);
@@ -728,13 +859,13 @@ var Textarea = React49.forwardRef(
       },
       [onChange, showCount, maxLength]
     );
-    React49.useEffect(() => {
+    React52.useEffect(() => {
       if (showCount || maxLength) {
         setCharCount(String(value || "").length);
       }
     }, [value, showCount, maxLength]);
     const hasError = !!error;
-    const generatedId = React49.useId();
+    const generatedId = React52.useId();
     const textareaId = id || generatedId;
     return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-2", containerClassName), children: [
       label && /* @__PURE__ */ jsx(
@@ -795,10 +926,10 @@ Textarea.displayName = "Textarea";
 
 // src/components/ui/select/index.tsx
 init_utils();
-var Select = React49.forwardRef(
+var Select = React52.forwardRef(
   ({ children, value, onValueChange, ...props }, _ref) => {
-    const [internalValue, setInternalValue] = React49.useState(value ?? "");
-    React49.useEffect(() => {
+    const [internalValue, setInternalValue] = React52.useState(value ?? "");
+    React52.useEffect(() => {
       setInternalValue(value ?? "");
     }, [value]);
     const handleValueChange = (newValue) => {
@@ -820,7 +951,7 @@ Select.displayName = "Select";
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
 var triggerVariants = cva(
-  "flex h-10 w-full items-center justify-between text-[0.9375rem] transition-colors placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:bg-mvn-gray-100 disabled:opacity-60 [&>span]:line-clamp-1",
+  "flex w-full items-center justify-between text-[0.9375rem] transition-colors placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:bg-mvn-gray-100 disabled:opacity-60 [&>span]:line-clamp-1",
   {
     variants: {
       variant: {
@@ -828,18 +959,25 @@ var triggerVariants = cva(
         filled: "rounded-md border border-transparent bg-mvn-gray-100 px-3.5 py-2.5 hover:bg-mvn-gray-200 focus:border-primary focus:bg-background",
         borderless: "rounded-md border border-transparent bg-transparent px-3.5 py-2.5 shadow-none",
         underlined: "rounded-md border-0 border-b-2 border-mvn-gray-300 px-3.5 py-2.5 hover:border-mvn-gray-400 focus:border-primary"
+      },
+      size: {
+        sm: "h-8 text-sm px-2.5",
+        default: "h-10",
+        lg: "h-12 text-base px-4",
+        touch: "h-11 min-h-[44px] text-base"
       }
     },
     defaultVariants: {
-      variant: "outlined"
+      variant: "outlined",
+      size: "default"
     }
   }
 );
-var SelectTrigger = React49.forwardRef(({ className, children, variant, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React52.forwardRef(({ className, children, variant, size, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
-    className: cn(triggerVariants({ variant }), className),
+    className: cn(triggerVariants({ variant, size }), className),
     ...props,
     children: [
       children,
@@ -848,7 +986,7 @@ var SelectTrigger = React49.forwardRef(({ className, children, variant, ...props
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -861,7 +999,7 @@ var SelectScrollUpButton = React49.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -874,7 +1012,7 @@ var SelectScrollDownButton = React49.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React49.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+var SelectContent = React52.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
   SelectPrimitive.Content,
   {
     ref,
@@ -902,7 +1040,7 @@ var SelectContent = React49.forwardRef(({ className, children, position = "poppe
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -914,7 +1052,7 @@ var SelectLabel = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -930,7 +1068,7 @@ var SelectItem = React49.forwardRef(({ className, children, ...props }, ref) =>
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -949,7 +1087,8 @@ var checkboxVariants = cva(
       size: {
         sm: "h-4 w-4 rounded",
         default: "h-[18px] w-[18px] rounded",
-        lg: "h-5 w-5 rounded-md"
+        lg: "h-5 w-5 rounded-md",
+        touch: "h-6 w-6 rounded-md"
       }
     },
     defaultVariants: {
@@ -957,10 +1096,23 @@ var checkboxVariants = cva(
     }
   }
 );
-var Checkbox = React49.forwardRef(({ className, size, label, description, indeterminate, ...props }, ref) => {
-  const generatedId = React49.useId();
+var checkboxWrapperVariants = cva("flex items-start", {
+  variants: {
+    size: {
+      sm: "gap-2.5",
+      default: "gap-2.5",
+      lg: "gap-3",
+      touch: "gap-3 min-h-[44px] items-center"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var Checkbox = React52.forwardRef(({ className, size, label, description, indeterminate, ...props }, ref) => {
+  const generatedId = React52.useId();
   const checkboxId = props.id || generatedId;
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5", children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(checkboxWrapperVariants({ size })), children: [
     /* @__PURE__ */ jsx(
       CheckboxPrimitive.Root,
       {
@@ -1006,10 +1158,40 @@ var radioGroupVariants = cva("grid gap-2", {
     orientation: "vertical"
   }
 });
-var RadioGroup = React49.forwardRef(
+var radioItemVariants = cva(
+  "aspect-square rounded-full border border-line-strong text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "h-3.5 w-3.5",
+        default: "h-4 w-4",
+        lg: "h-5 w-5",
+        touch: "h-6 w-6"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var radioIndicatorVariants = cva("fill-primary text-primary", {
+  variants: {
+    size: {
+      sm: "h-2 w-2",
+      default: "h-2.5 w-2.5",
+      lg: "h-3 w-3",
+      touch: "h-3.5 w-3.5"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+var RadioGroup = React52.forwardRef(
   ({
     className,
     orientation = "vertical",
+    size,
     items,
     itemClassName,
     renderItem,
@@ -1019,14 +1201,15 @@ var RadioGroup = React49.forwardRef(
     children,
     ...props
   }, ref) => {
-    const generatedId = React49.useId();
-    const defaultRenderItem = React49.useCallback(
+    const generatedId = React52.useId();
+    const defaultRenderItem = React52.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         "div",
         {
           className: cn(
             "flex items-start gap-3 rounded-lg border border-line-soft p-4 transition-colors hover:bg-surface-2 has-[[data-state=checked]]:border-primary has-[[data-state=checked]]:bg-primary/5",
             item.disabled && "opacity-50 cursor-not-allowed",
+            size === "touch" && "min-h-[44px] items-center",
             itemClassName
           ),
           children: [
@@ -1036,8 +1219,8 @@ var RadioGroup = React49.forwardRef(
                 value: item.value,
                 id: `${generatedId}-${item.value}`,
                 disabled: item.disabled,
-                className: "aspect-square h-4 w-4 rounded-full border border-line-strong text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary mt-0.5 shrink-0",
-                children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+                className: cn(radioItemVariants({ size }), "mt-0.5"),
+                children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { className: cn(radioIndicatorVariants({ size })) }) })
               }
             ),
             /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
@@ -1058,7 +1241,7 @@ var RadioGroup = React49.forwardRef(
         },
         item.value
       ),
-      [generatedId, itemClassName]
+      [generatedId, itemClassName, size]
     );
     const renderFunction = renderItem || defaultRenderItem;
     return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
@@ -1078,17 +1261,14 @@ var RadioGroup = React49.forwardRef(
   }
 );
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React49.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React52.forwardRef(({ className, size, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
       ref,
-      className: cn(
-        "aspect-square h-4 w-4 rounded-full border border-line-strong text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary",
-        className
-      ),
+      className: cn(radioItemVariants({ size }), className),
       ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { className: cn(radioIndicatorVariants({ size })) }) })
     }
   );
 });
@@ -1096,32 +1276,49 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/components/ui/switch/index.tsx
 init_utils();
-var Switch = React49.forwardRef(({ className, offNode, onNode, ...props }, ref) => {
+var switchVariants = cva(
+  "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+  {
+    variants: {
+      size: {
+        sm: "h-5 w-9",
+        default: "h-6 w-11",
+        lg: "h-7 w-[52px]",
+        touch: "h-7 w-[52px] min-h-[44px] min-w-[44px]"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var thumbVariants = cva(
+  "group pointer-events-none relative flex items-center justify-center rounded-full bg-background shadow-lg ring-0 transition-transform",
+  {
+    variants: {
+      size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        default: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+        lg: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0",
+        touch: "h-6 w-6 data-[state=checked]:translate-x-6 data-[state=unchecked]:translate-x-0"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var Switch = React52.forwardRef(({ className, size, offNode, onNode, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     SwitchPrimitives.Root,
     {
       ref,
-      className: cn(
-        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-        className
-      ),
+      className: cn(switchVariants({ size }), className),
       ...props,
-      children: /* @__PURE__ */ jsxs(
-        SwitchPrimitives.Thumb,
-        {
-          className: cn(
-            "group pointer-events-none relative flex items-center justify-center h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform",
-            "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-          ),
-          children: [
-            /* @__PURE__ */ jsx("span", { className: "absolute opacity-0 group-data-[state=checked]:opacity-100 transition-all duration-200", children: onNode }),
-            /* @__PURE__ */ jsx("span", { className: "absolute opacity-100 group-data-[state=checked]:opacity-0 transition-all duration-200", children: offNode })
-          ]
-        }
-      )
+      children: /* @__PURE__ */ jsxs(SwitchPrimitives.Thumb, { className: cn(thumbVariants({ size })), children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute opacity-0 group-data-[state=checked]:opacity-100 transition-all duration-200", children: onNode }),
+        /* @__PURE__ */ jsx("span", { className: "absolute opacity-100 group-data-[state=checked]:opacity-0 transition-all duration-200", children: offNode })
+      ] })
     }
   );
 });
@@ -1150,7 +1347,7 @@ var toggleVariants = cva(
     }
   }
 );
-var Toggle = React49.forwardRef(({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var Toggle = React52.forwardRef(({ className, variant, size, icon, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   TogglePrimitive.Root,
   {
     ref,
@@ -1196,9 +1393,9 @@ var toggleGroupItemVariants = cva(
     }
   }
 );
-var ToggleGroup = React49.forwardRef(
+var ToggleGroup = React52.forwardRef(
   ({ className, size, items, itemClassName, renderItem, children, ...props }, ref) => {
-    const defaultRenderItem = React49.useCallback(
+    const defaultRenderItem = React52.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         ToggleGroupPrimitive.Item,
         {
@@ -1228,7 +1425,7 @@ var ToggleGroup = React49.forwardRef(
   }
 );
 ToggleGroup.displayName = "ToggleGroup";
-var ToggleGroupItem = React49.forwardRef(({ className, size, children, ...props }, ref) => {
+var ToggleGroupItem = React52.forwardRef(({ className, size, children, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -1243,7 +1440,7 @@ ToggleGroupItem.displayName = "ToggleGroupItem";
 
 // src/components/ui/slider/index.tsx
 init_utils();
-var Slider = React49.forwardRef(
+var Slider = React52.forwardRef(
   ({
     className,
     showValue,
@@ -1302,7 +1499,7 @@ var inputGroupVariants = cva("flex items-stretch w-full", {
     size: "default"
   }
 });
-var InputGroup = React49.forwardRef(
+var InputGroup = React52.forwardRef(
   ({
     className,
     size,
@@ -1338,9 +1535,9 @@ var InputGroup = React49.forwardRef(
             }
           ),
           leftElement && /* @__PURE__ */ jsx("div", { className: "inline-flex items-center", children: leftElement }),
-          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: React49.Children.map(children, (child) => {
-            if (React49.isValidElement(child)) {
-              return React49.cloneElement(child, {
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: React52.Children.map(children, (child) => {
+            if (React52.isValidElement(child)) {
+              return React52.cloneElement(child, {
                 className: cn(
                   child.props.className,
                   (leftAddon || leftElement) && "rounded-l-none border-l-0",
@@ -1371,7 +1568,7 @@ InputGroup.displayName = "InputGroup";
 
 // src/components/ui/input-otp/index.tsx
 init_utils();
-var InputOTP = React49.forwardRef(({ containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var InputOTP = React52.forwardRef(({ containerClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
   OTPInput,
   {
     ref,
@@ -1384,10 +1581,10 @@ var InputOTP = React49.forwardRef(({ containerClassName, children, ...props }, r
   }
 ));
 InputOTP.displayName = "InputOTP";
-var InputOTPGroup = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props }));
+var InputOTPGroup = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center gap-2", className), ...props }));
 InputOTPGroup.displayName = "InputOTPGroup";
-var InputOTPSlot = React49.forwardRef(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React49.useContext(OTPInputContext);
+var InputOTPSlot = React52.forwardRef(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React52.useContext(OTPInputContext);
   if (!inputOTPContext) {
     console.error("InputOTPSlot must be used within InputOTP");
     return null;
@@ -1421,7 +1618,7 @@ var InputOTPSlot = React49.forwardRef(({ index, className, ...props }, ref) => {
   );
 });
 InputOTPSlot.displayName = "InputOTPSlot";
-var InputOTPSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className, ...props, children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) }));
+var InputOTPSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "separator", className, ...props, children: /* @__PURE__ */ jsx(MinusIcon, { className: "h-4 w-4 text-muted-foreground" }) }));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
 // src/components/ui/form/form-utils.ts
@@ -2110,7 +2307,7 @@ var FormItem = (props) => {
   const isRequired = Array.isArray(rules) ? rules.some((rule) => rule && rule.required) : false;
   const isDisabled = !!contextDisabled;
   const requiredIndicator = requiredMark === void 0 ? /* @__PURE__ */ jsx("span", { className: "text-destructive mr-1", "aria-hidden": "true", children: "*" }) : /* @__PURE__ */ jsx("span", { className: "mr-1", "aria-hidden": "true", children: requiredMark });
-  if (!children || !React49__default.isValidElement(children)) return null;
+  if (!children || !React52__default.isValidElement(children)) return null;
   const childProps = {};
   childProps[valuePropName] = fieldValue;
   const childClass = children.props.className;
@@ -2278,7 +2475,7 @@ var fieldVariants = cva("", {
     orientation: "vertical"
   }
 });
-var Field = React49.forwardRef(
+var Field = React52.forwardRef(
   ({
     className,
     orientation,
@@ -2291,7 +2488,7 @@ var Field = React49.forwardRef(
     children,
     ...props
   }, ref) => {
-    const generatedId = React49.useId();
+    const generatedId = React52.useId();
     const fieldId = htmlFor || generatedId;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -2340,7 +2537,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React49.forwardRef(
+var Alert = React52.forwardRef(
   ({
     className,
     variant,
@@ -2353,8 +2550,8 @@ var Alert = React49.forwardRef(
     descriptionClassName,
     ...props
   }, ref) => {
-    const [isVisible, setIsVisible] = React49.useState(true);
-    const handleDismiss = React49.useCallback(() => {
+    const [isVisible, setIsVisible] = React52.useState(true);
+    const handleDismiss = React52.useCallback(() => {
       setIsVisible(false);
       onClose?.();
     }, [onClose]);
@@ -2523,7 +2720,7 @@ var toastVariants = cva(
     }
   }
 );
-var Toast = React49.forwardRef(
+var Toast = React52.forwardRef(
   ({
     className,
     variant,
@@ -2536,8 +2733,8 @@ var Toast = React49.forwardRef(
     descriptionClassName,
     ...props
   }, ref) => {
-    const [isVisible, setIsVisible] = React49.useState(true);
-    const handleDismiss = React49.useCallback(() => {
+    const [isVisible, setIsVisible] = React52.useState(true);
+    const handleDismiss = React52.useCallback(() => {
       setIsVisible(false);
       onClose?.();
     }, [onClose]);
@@ -2633,7 +2830,7 @@ var progressVariants = cva(
     }
   }
 );
-var Progress = React49.forwardRef(
+var Progress = React52.forwardRef(
   ({
     className,
     value = 0,
@@ -2699,7 +2896,7 @@ var spinnerVariants = cva("animate-spin", {
     variant: "default"
   }
 });
-var Spinner = React49.forwardRef(
+var Spinner = React52.forwardRef(
   ({ className, size, variant, label, centered, overlay, icon, ...props }, ref) => {
     const spinnerContent = /* @__PURE__ */ jsxs(
       "div",
@@ -2730,7 +2927,7 @@ var Spinner = React49.forwardRef(
   }
 );
 Spinner.displayName = "Spinner";
-var DotsSpinner = React49.forwardRef(
+var DotsSpinner = React52.forwardRef(
   ({ className, size = "default", dotCount = 3, ...props }, ref) => {
     const dotSizeMap = {
       xs: "h-1 w-1",
@@ -2783,7 +2980,7 @@ var skeletonVariants = cva(
     }
   }
 );
-var Skeleton = React49.forwardRef(
+var Skeleton = React52.forwardRef(
   ({
     className,
     variant,
@@ -2832,7 +3029,7 @@ var Skeleton = React49.forwardRef(
   }
 );
 Skeleton.displayName = "Skeleton";
-var SkeletonCard = React49.forwardRef(
+var SkeletonCard = React52.forwardRef(
   ({ className, avatar = false, lines = 3, ...props }, ref) => {
     return /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-4", className), ...props, children: [
       avatar && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -2872,7 +3069,7 @@ var emptyVariants = cva(
     }
   }
 );
-var Empty = React49.forwardRef(
+var Empty = React52.forwardRef(
   ({
     className,
     size,
@@ -2913,7 +3110,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogOverlay = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -2925,7 +3122,7 @@ var DialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React49.forwardRef(
+var DialogContent = React52.forwardRef(
   ({
     className,
     children,
@@ -2990,7 +3187,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -3002,7 +3199,7 @@ var DialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3017,7 +3214,7 @@ init_utils();
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogOverlay = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Overlay,
   {
     className: cn(
@@ -3029,7 +3226,7 @@ var AlertDialogOverlay = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+var AlertDialogContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
   /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
   /* @__PURE__ */ jsx(
     AlertDialogPrimitive.Content,
@@ -3072,7 +3269,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogTitle = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -3081,7 +3278,7 @@ var AlertDialogTitle = React49.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogDescription = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -3090,7 +3287,7 @@ var AlertDialogDescription = React49.forwardRef(({ className, ...props }, ref) =
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogAction = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -3099,7 +3296,7 @@ var AlertDialogAction = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDialogCancel = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -3119,7 +3316,7 @@ var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
 var SheetPortal = DialogPrimitive.Portal;
-var SheetOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetOverlay = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     className: cn(
@@ -3147,7 +3344,7 @@ var sheetVariants = cva(
     }
   }
 );
-var SheetContent = React49.forwardRef(({ side = "right", className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
+var SheetContent = React52.forwardRef(({ side = "right", className, children, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs(SheetPortal, { children: [
   /* @__PURE__ */ jsx(SheetOverlay, {}),
   /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -3194,7 +3391,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetTitle = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -3203,7 +3400,7 @@ var SheetTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SheetDescription = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3215,7 +3412,7 @@ SheetDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/ui/drawer/index.tsx
 init_utils();
-var DrawerContext = React49.createContext({
+var DrawerContext = React52.createContext({
   direction: "bottom"
 });
 var Drawer = ({
@@ -3234,7 +3431,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = Drawer$1.Trigger;
 var DrawerPortal = Drawer$1.Portal;
 var DrawerClose = Drawer$1.Close;
-var DrawerOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerOverlay = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Overlay,
   {
     ref,
@@ -3243,7 +3440,7 @@ var DrawerOverlay = React49.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DrawerOverlay.displayName = Drawer$1.Overlay.displayName;
-var DrawerContent = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+var DrawerContent = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DrawerPortal, { children: [
   /* @__PURE__ */ jsx(DrawerOverlay, {}),
   /* @__PURE__ */ jsxs(
     Drawer$1.Content,
@@ -3278,7 +3475,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerTitle = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Title,
   {
     ref,
@@ -3290,7 +3487,7 @@ var DrawerTitle = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = Drawer$1.Title.displayName;
-var DrawerDescription = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DrawerDescription = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Drawer$1.Description,
   {
     ref,
@@ -3305,7 +3502,7 @@ init_utils();
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React49.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React52.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -3325,13 +3522,13 @@ init_utils();
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
-var TooltipContent = React49.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var TooltipContent = React52.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     ref,
     sideOffset,
     className: cn(
-      "z-50 overflow-hidden rounded-md bg-mvn-gray-900 px-3 py-1.5 text-xs text-primary-50 dark:bg-primary-50 dark:text-mvn-gray-900 animate-in fade-in-0 zoom-in-95",
+      "z-50 overflow-hidden rounded-md bg-mvn-gray-900 px-3 py-1.5 text-xs text-primary-50 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
@@ -3340,7 +3537,7 @@ var TooltipContent = React49.forwardRef(({ className, sideOffset = 4, ...props }
   }
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-var SimpleTooltip = React49.forwardRef(
+var SimpleTooltip = React52.forwardRef(
   ({
     children,
     content,
@@ -3371,7 +3568,7 @@ init_utils();
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardArrow = HoverCardPrimitive.Arrow;
-var HoverCardContent = React49.forwardRef(
+var HoverCardContent = React52.forwardRef(
   ({
     className,
     align = "center",
@@ -3415,7 +3612,7 @@ var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React49.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuSubTrigger = React52.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3432,7 +3629,7 @@ var DropdownMenuSubTrigger = React49.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSubContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.SubContent,
   {
     ref,
@@ -3444,7 +3641,7 @@ var DropdownMenuSubContent = React49.forwardRef(({ className, ...props }, ref) =
   }
 ));
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React49.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var DropdownMenuContent = React52.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     ref,
@@ -3457,7 +3654,7 @@ var DropdownMenuContent = React49.forwardRef(({ className, sideOffset = 4, ...pr
   }
 ) }));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = React52.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -3470,7 +3667,7 @@ var DropdownMenuItem = React49.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React49.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuCheckboxItem = React52.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3487,7 +3684,7 @@ var DropdownMenuCheckboxItem = React49.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var DropdownMenuRadioItem = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -3503,7 +3700,7 @@ var DropdownMenuRadioItem = React49.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuLabel = React52.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -3516,7 +3713,7 @@ var DropdownMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3547,7 +3744,7 @@ var ContextMenuGroup = ContextMenuPrimitive.Group;
 var ContextMenuPortal = ContextMenuPrimitive.Portal;
 var ContextMenuSub = ContextMenuPrimitive.Sub;
 var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
-var ContextMenuSubTrigger = React49.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuSubTrigger = React52.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -3564,7 +3761,7 @@ var ContextMenuSubTrigger = React49.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSubContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.SubContent,
   {
     ref,
@@ -3576,7 +3773,7 @@ var ContextMenuSubContent = React49.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var ContextMenuContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Content,
   {
     ref,
@@ -3588,7 +3785,7 @@ var ContextMenuContent = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ) }));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuItem = React52.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -3601,7 +3798,7 @@ var ContextMenuItem = React49.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React49.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuCheckboxItem = React52.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -3618,7 +3815,7 @@ var ContextMenuCheckboxItem = React49.forwardRef(({ className, children, checked
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var ContextMenuRadioItem = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -3634,7 +3831,7 @@ var ContextMenuRadioItem = React49.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuLabel = React52.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -3647,7 +3844,7 @@ var ContextMenuLabel = React49.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ContextMenuSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -3680,7 +3877,7 @@ var MenubarGroup = MenubarPrimitive.Group;
 var MenubarPortal = MenubarPrimitive.Portal;
 var MenubarSub = MenubarPrimitive.Sub;
 var MenubarRadioGroup = MenubarPrimitive.RadioGroup;
-var Menubar = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Menubar = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Root,
   {
     ref,
@@ -3692,7 +3889,7 @@ var Menubar = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
-var MenubarTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarTrigger = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Trigger,
   {
     ref,
@@ -3704,7 +3901,7 @@ var MenubarTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
-var MenubarSubTrigger = React49.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarSubTrigger = React52.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.SubTrigger,
   {
     ref,
@@ -3721,7 +3918,7 @@ var MenubarSubTrigger = React49.forwardRef(({ className, inset, children, ...pro
   }
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
-var MenubarSubContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSubContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.SubContent,
   {
     ref,
@@ -3733,7 +3930,7 @@ var MenubarSubContent = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
-var MenubarContent = React49.forwardRef(
+var MenubarContent = React52.forwardRef(
   ({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => /* @__PURE__ */ jsx(MenubarPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     MenubarPrimitive.Content,
     {
@@ -3750,7 +3947,7 @@ var MenubarContent = React49.forwardRef(
   ) })
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
-var MenubarItem = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarItem = React52.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Item,
   {
     ref,
@@ -3763,7 +3960,7 @@ var MenubarItem = React49.forwardRef(({ className, inset, ...props }, ref) => /*
   }
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
-var MenubarCheckboxItem = React49.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarCheckboxItem = React52.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.CheckboxItem,
   {
     ref,
@@ -3780,7 +3977,7 @@ var MenubarCheckboxItem = React49.forwardRef(({ className, children, checked, ..
   }
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
-var MenubarRadioItem = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var MenubarRadioItem = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   MenubarPrimitive.RadioItem,
   {
     ref,
@@ -3796,7 +3993,7 @@ var MenubarRadioItem = React49.forwardRef(({ className, children, ...props }, re
   }
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
-var MenubarLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarLabel = React52.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Label,
   {
     ref,
@@ -3809,7 +4006,7 @@ var MenubarLabel = React49.forwardRef(({ className, inset, ...props }, ref) => /
   }
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
-var MenubarSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var MenubarSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   MenubarPrimitive.Separator,
   {
     ref,
@@ -3837,7 +4034,7 @@ MenubarShortcut.displayName = "MenubarShortcut";
 
 // src/components/ui/navigation-menu/index.tsx
 init_utils();
-var NavigationMenu = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var NavigationMenu = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Root,
   {
     ref,
@@ -3853,7 +4050,7 @@ var NavigationMenu = React49.forwardRef(({ className, children, ...props }, ref)
   }
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
-var NavigationMenuList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuList = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.List,
   {
     ref,
@@ -3869,7 +4066,7 @@ var NavigationMenuItem = NavigationMenuPrimitive.Item;
 var navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-[0.9375rem] font-medium transition-colors hover:bg-mvn-gray-100 focus:bg-mvn-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-mvn-gray-100 data-[state=open]:bg-mvn-gray-100"
 );
-var NavigationMenuTrigger = React49.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var NavigationMenuTrigger = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   NavigationMenuPrimitive.Trigger,
   {
     ref,
@@ -3889,7 +4086,7 @@ var NavigationMenuTrigger = React49.forwardRef(({ className, children, ...props
   }
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
-var NavigationMenuContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Content,
   {
     ref,
@@ -3902,7 +4099,7 @@ var NavigationMenuContent = React49.forwardRef(({ className, ...props }, ref) =>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 var NavigationMenuLink = NavigationMenuPrimitive.Link;
-var NavigationMenuViewport = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
+var NavigationMenuViewport = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("absolute left-0 top-full flex justify-center"), children: /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Viewport,
   {
     className: cn(
@@ -3914,7 +4111,7 @@ var NavigationMenuViewport = React49.forwardRef(({ className, ...props }, ref) =
   }
 ) }));
 NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
-var NavigationMenuIndicator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var NavigationMenuIndicator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   NavigationMenuPrimitive.Indicator,
   {
     ref,
@@ -3930,7 +4127,7 @@ NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayN
 
 // src/components/ui/command/index.tsx
 init_utils();
-var Command = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Command = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1,
   {
     ref,
@@ -3945,7 +4142,7 @@ Command.displayName = Command$1.displayName;
 var CommandDialog = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx(Dialog, { ...props, children: /* @__PURE__ */ jsx(DialogContent, { className: "overflow-hidden p-0", children: /* @__PURE__ */ jsx(Command, { className: "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5", children }) }) });
 };
-var CommandInput = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-mvn-gray-200 px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b border-mvn-gray-200 px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx(
     Command$1.Input,
@@ -3960,7 +4157,7 @@ var CommandInput = React49.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = Command$1.Input.displayName;
-var CommandList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandList = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.List,
   {
     ref,
@@ -3969,7 +4166,7 @@ var CommandList = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = Command$1.List.displayName;
-var CommandEmpty = React49.forwardRef((props, ref) => /* @__PURE__ */ jsx(
+var CommandEmpty = React52.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   Command$1.Empty,
   {
     ref,
@@ -3978,7 +4175,7 @@ var CommandEmpty = React49.forwardRef((props, ref) => /* @__PURE__ */ jsx(
   }
 ));
 CommandEmpty.displayName = Command$1.Empty.displayName;
-var CommandGroup = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandGroup = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Group,
   {
     ref,
@@ -3990,7 +4187,7 @@ var CommandGroup = React49.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = Command$1.Group.displayName;
-var CommandSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Separator,
   {
     ref,
@@ -3999,7 +4196,7 @@ var CommandSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = Command$1.Separator.displayName;
-var CommandItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CommandItem = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   Command$1.Item,
   {
     ref,
@@ -4030,7 +4227,7 @@ CommandShortcut.displayName = "CommandShortcut";
 
 // src/components/ui/combobox/index.tsx
 init_utils();
-var Combobox = React49.forwardRef(
+var Combobox = React52.forwardRef(
   ({
     options,
     value,
@@ -4042,7 +4239,7 @@ var Combobox = React49.forwardRef(
     disabled,
     clearable
   }, ref) => {
-    const [open, setOpen] = React49.useState(false);
+    const [open, setOpen] = React52.useState(false);
     const selectedOption = options.find((option) => option.value === value);
     const handleClear = (e) => {
       e.stopPropagation();
@@ -4114,9 +4311,9 @@ Combobox.displayName = "Combobox";
 
 // src/components/ui/breadcrumb/index.tsx
 init_utils();
-var Breadcrumb = React49.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
+var Breadcrumb = React52.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-var BreadcrumbList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbList = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ol",
   {
     ref,
@@ -4128,7 +4325,7 @@ var BreadcrumbList = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
-var BreadcrumbItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbItem = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "li",
   {
     ref,
@@ -4137,7 +4334,7 @@ var BreadcrumbItem = React49.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-var BreadcrumbLink = React49.forwardRef(({ asChild, className, ...props }, ref) => {
+var BreadcrumbLink = React52.forwardRef(({ asChild, className, ...props }, ref) => {
   const Comp = "a";
   return /* @__PURE__ */ jsx(
     Comp,
@@ -4152,7 +4349,7 @@ var BreadcrumbLink = React49.forwardRef(({ asChild, className, ...props }, ref)
   );
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-var BreadcrumbPage = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var BreadcrumbPage = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "span",
   {
     ref,
@@ -4219,7 +4416,7 @@ var Pagination = ({
   }
 );
 Pagination.displayName = "Pagination";
-var PaginationContent = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var PaginationContent = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "ul",
   {
     ref,
@@ -4228,7 +4425,7 @@ var PaginationContent = React49.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationContent.displayName = "PaginationContent";
-var PaginationItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
+var PaginationItem = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props }));
 PaginationItem.displayName = "PaginationItem";
 var PaginationLink = ({
   className,
@@ -4335,12 +4532,12 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
 
 // src/components/ui/tabs/index.tsx
 init_utils();
-var TabsContext = React49.createContext({
+var TabsContext = React52.createContext({
   destroyInactiveTabs: true
 });
-var Tabs = React49.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
+var Tabs = React52.forwardRef(({ destroyInactiveTabs = true, ...props }, ref) => /* @__PURE__ */ jsx(TabsContext.Provider, { value: { destroyInactiveTabs }, children: /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props }) }));
 Tabs.displayName = TabsPrimitive.Root.displayName;
-var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsList = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.List,
   {
     ref,
@@ -4355,26 +4552,30 @@ var TabsList = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TabsTrigger = React52.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Trigger,
   {
     ref,
     className: cn(
-      "inline-flex min-w-0 items-center justify-center whitespace-nowrap text-sm font-medium",
+      "group inline-flex min-w-0 items-center justify-center whitespace-nowrap text-sm",
       "transition-all duration-150 text-muted-foreground hover:text-primary",
       "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       "data-[orientation=horizontal]:px-4 data-[orientation=horizontal]:py-3 data-[orientation=horizontal]:border-b-2 data-[orientation=horizontal]:border-transparent",
       "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-[orientation=vertical]:px-3 data-[orientation=vertical]:py-2 data-[orientation=vertical]:border-l-2 data-[orientation=vertical]:border-border",
-      "data-[state=active]:text-primary data-[state=active]:font-semibold data-[state=active]:border-primary",
+      "data-[state=active]:text-primary data-[state=active]:border-primary",
       "disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed",
       className
     ),
-    ...props
+    ...props,
+    children: /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+      /* @__PURE__ */ jsx("span", { className: "invisible font-semibold", "aria-hidden": "true", children }),
+      /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center font-medium group-data-[state=active]:font-semibold", children })
+    ] })
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React49.forwardRef(({ className, ...props }, ref) => {
-  const { destroyInactiveTabs } = React49.useContext(TabsContext);
+var TabsContent = React52.forwardRef(({ className, ...props }, ref) => {
+  const { destroyInactiveTabs } = React52.useContext(TabsContext);
   return /* @__PURE__ */ jsx(
     TabsPrimitive.Content,
     {
@@ -4463,7 +4664,7 @@ var separatorVariants = cva("shrink-0 bg-line-normal", {
     variant: "default"
   }
 });
-var Separator5 = React49.forwardRef(
+var Separator5 = React52.forwardRef(
   ({
     className,
     orientation = "horizontal",
@@ -4520,7 +4721,7 @@ var AspectRatio = AspectRatioPrimitive.Root;
 
 // src/components/ui/accordion/index.tsx
 init_utils();
-var Accordion = React49.forwardRef(
+var Accordion = React52.forwardRef(
   ({
     items,
     className,
@@ -4530,7 +4731,7 @@ var Accordion = React49.forwardRef(
     renderItem,
     ...props
   }, ref) => {
-    const defaultRenderItem = React49.useCallback(
+    const defaultRenderItem = React52.useCallback(
       (item) => /* @__PURE__ */ jsxs(
         AccordionPrimitive.Item,
         {
@@ -4578,7 +4779,7 @@ Accordion.displayName = "Accordion";
 // src/components/ui/collapsible/index.tsx
 init_utils();
 var Collapsible = CollapsiblePrimitive.Root;
-var CollapsibleItem = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CollapsibleItem = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -4590,7 +4791,7 @@ var CollapsibleItem = React49.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CollapsibleItem.displayName = "CollapsibleItem";
-var CollapsibleTrigger = React49.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsxs(
+var CollapsibleTrigger = React52.forwardRef(({ className, children, indicator, ...props }, ref) => /* @__PURE__ */ jsxs(
   CollapsiblePrimitive.Trigger,
   {
     ref,
@@ -4616,7 +4817,7 @@ var CollapsibleTrigger = React49.forwardRef(({ className, children, indicator, .
   }
 ));
 CollapsibleTrigger.displayName = CollapsiblePrimitive.Trigger.displayName;
-var CollapsibleContent = React49.forwardRef(({ className, contentClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
+var CollapsibleContent = React52.forwardRef(({ className, contentClassName, children, ...props }, ref) => /* @__PURE__ */ jsx(
   CollapsiblePrimitive.Content,
   {
     ref,
@@ -4667,7 +4868,7 @@ var ResizableHandle = ({
 
 // src/components/ui/scroll-area/index.tsx
 init_utils();
-var ScrollArea = React49.forwardRef(
+var ScrollArea = React52.forwardRef(
   ({
     className,
     children,
@@ -4722,7 +4923,7 @@ var ScrollArea = React49.forwardRef(
   }
 );
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React49.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsx(
+var ScrollBar = React52.forwardRef(({ className, orientation = "vertical", thumbClassName, ...props }, ref) => /* @__PURE__ */ jsx(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -4754,9 +4955,9 @@ var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React49.createContext(null);
+var SidebarContext = React52.createContext(null);
 function useSidebar() {
-  const context = React49.useContext(SidebarContext);
+  const context = React52.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4771,9 +4972,9 @@ function SidebarProvider({
   children,
   ...props
 }) {
-  const [_open, _setOpen] = React49.useState(defaultOpen);
+  const [_open, _setOpen] = React52.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React49.useCallback(
+  const setOpen = React52.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4785,10 +4986,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React49.useCallback(() => {
+  const toggleSidebar = React52.useCallback(() => {
     return setOpen((open2) => !open2);
   }, [setOpen]);
-  React49.useEffect(() => {
+  React52.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -4799,7 +5000,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React49.useMemo(
+  const contextValue = React52.useMemo(
     () => ({
       state,
       open,
@@ -4834,7 +5035,25 @@ function Sidebar({
   children,
   ...props
 }) {
-  const { state } = useSidebar();
+  const { state, open, setOpen } = useSidebar();
+  const isMobile = useIsMobile();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx(Sheet, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsx(
+      SheetContent,
+      {
+        side,
+        className: cn(
+          "w-[280px] max-w-[80vw] p-0",
+          "pt-[var(--mvn-safe-area-top)]",
+          className
+        ),
+        hideClose: true,
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        children: /* @__PURE__ */ jsx("div", { className: "bg-sidebar text-sidebar-foreground flex h-full w-full flex-col", children })
+      }
+    ) });
+  }
   if (collapsible === "none") {
     return /* @__PURE__ */ jsx(
       "div",
@@ -5265,7 +5484,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React49.useMemo(() => {
+  const width = React52.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs(
@@ -5358,6 +5577,166 @@ function SidebarMenuSubButton({
   );
 }
 
+// src/components/ui/mobile-header/index.tsx
+init_utils();
+function MobileHeader({
+  logo,
+  title,
+  rightActions,
+  showSidebarTrigger = true,
+  stickyTop = true,
+  className,
+  ...props
+}) {
+  const sidebar = useSidebar();
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      "data-slot": "mobile-header",
+      className: cn(
+        "flex items-center h-14 bg-background border-b border-border px-4 gap-3 md:hidden",
+        "pt-[var(--mvn-safe-area-top)]",
+        stickyTop && "sticky top-0 z-40",
+        className
+      ),
+      ...props,
+      children: [
+        showSidebarTrigger && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "-ml-2",
+            onClick: () => sidebar.setOpen(true),
+            "aria-label": "Open menu",
+            children: /* @__PURE__ */ jsx(MenuIcon, { className: "h-5 w-5" })
+          }
+        ),
+        logo && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: logo }),
+        title && /* @__PURE__ */ jsx("span", { className: "font-semibold truncate flex-1 text-foreground", children: title }),
+        rightActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 shrink-0", children: rightActions })
+      ]
+    }
+  );
+}
+MobileHeader.displayName = "MobileHeader";
+
+// src/components/ui/bottom-navigation/index.tsx
+init_utils();
+function BottomNavigation({
+  items,
+  activeKey,
+  onActiveChange,
+  hideOnDesktop = true,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-slot": "bottom-navigation",
+      className: cn(
+        "fixed bottom-0 left-0 right-0 bg-background border-t border-border",
+        "flex justify-around items-center h-16",
+        "pb-[var(--mvn-safe-area-bottom)]",
+        "z-40",
+        hideOnDesktop && "md:hidden",
+        className
+      ),
+      ...props,
+      children: items.map((item) => {
+        const isActive = activeKey === item.key;
+        const Component = item.href ? "a" : "button";
+        return /* @__PURE__ */ jsxs(
+          Component,
+          {
+            href: item.href,
+            onClick: () => {
+              if (!item.disabled) {
+                item.onClick?.();
+                onActiveChange?.(item.key);
+              }
+            },
+            disabled: item.disabled,
+            className: cn(
+              "flex flex-col items-center justify-center gap-1 flex-1 h-full relative",
+              "text-muted-foreground transition-colors",
+              "min-w-[64px] min-h-[48px]",
+              "hover:text-foreground focus:outline-none focus-visible:text-foreground",
+              isActive && "text-primary",
+              item.disabled && "opacity-50 pointer-events-none"
+            ),
+            "aria-current": isActive ? "page" : void 0,
+            children: [
+              /* @__PURE__ */ jsxs("span", { className: "relative", children: [
+                item.icon,
+                item.badge !== void 0 && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "absolute -top-1 -right-2 min-w-[18px] h-[18px]",
+                      "bg-destructive text-destructive-foreground",
+                      "rounded-full text-[10px] font-medium",
+                      "flex items-center justify-center px-1"
+                    ),
+                    children: typeof item.badge === "number" && item.badge > 99 ? "99+" : item.badge
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-[11px] font-medium leading-tight", children: item.label })
+            ]
+          },
+          item.key
+        );
+      })
+    }
+  );
+}
+BottomNavigation.displayName = "BottomNavigation";
+var MobileNavContext = React52.createContext(
+  null
+);
+function useMobileNav() {
+  const context = React52.useContext(MobileNavContext);
+  if (!context) {
+    throw new Error(
+      "useMobileNav must be used within MobileNavigationProvider"
+    );
+  }
+  return context;
+}
+function MobileNavigationProvider({
+  children,
+  hideBottomNavOnScroll = false
+}) {
+  const [bottomNavVisible, setBottomNavVisible] = React52.useState(true);
+  const lastScrollY = React52.useRef(0);
+  React52.useEffect(() => {
+    if (!hideBottomNavOnScroll) return;
+    const handleScroll = () => {
+      const currentY = window.scrollY;
+      const direction = currentY > lastScrollY.current ? "down" : "up";
+      if (direction === "down" && currentY > 50) {
+        setBottomNavVisible(false);
+      } else if (direction === "up") {
+        setBottomNavVisible(true);
+      }
+      lastScrollY.current = currentY;
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [hideBottomNavOnScroll]);
+  const value = React52.useMemo(
+    () => ({
+      bottomNavVisible,
+      setBottomNavVisible
+    }),
+    [bottomNavVisible]
+  );
+  return /* @__PURE__ */ jsx(MobileNavContext.Provider, { value, children });
+}
+MobileNavigationProvider.displayName = "MobileNavigationProvider";
+
 // src/components/ui/table/index.tsx
 init_utils();
 
@@ -5384,7 +5763,7 @@ var tableVariants = cva("w-full caption-bottom text-sm", {
     size: "default"
   }
 });
-var Table = React49.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsx(
+var Table = React52.forwardRef(({ className, variant, size, wrapperClassName, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: cn("relative w-full overflow-auto", wrapperClassName), children: /* @__PURE__ */ jsx(
   "table",
   {
     ref,
@@ -5393,9 +5772,9 @@ var Table = React49.forwardRef(({ className, variant, size, wrapperClassName, ..
   }
 ) }));
 Table.displayName = "Table";
-var TableHeader = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
+var TableHeader = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-b", className), ...props }));
 TableHeader.displayName = "TableHeader";
-var TableBody = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableBody = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tbody",
   {
     ref,
@@ -5404,7 +5783,7 @@ var TableBody = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableFooter = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tfoot",
   {
     ref,
@@ -5416,7 +5795,7 @@ var TableFooter = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableRow = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "tr",
   {
     ref,
@@ -5428,7 +5807,7 @@ var TableRow = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableHead = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "th",
   {
     ref,
@@ -5440,7 +5819,7 @@ var TableHead = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableHead.displayName = "TableHead";
-var TableCell = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCell = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "td",
   {
     ref,
@@ -5452,7 +5831,7 @@ var TableCell = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableCell.displayName = "TableCell";
-var TableCaption = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var TableCaption = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "caption",
   {
     ref,
@@ -5498,7 +5877,9 @@ var TableBodyComponent = ({
   rowClassName,
   onRowClick,
   getRowExpandable,
-  invalidateCache
+  invalidateCache,
+  headers,
+  hasInitializedSizing
 }) => {
   const resolveRowClassName = useCallback(
     (record, index) => {
@@ -5539,6 +5920,37 @@ var TableBodyComponent = ({
     }
     return flexRender(cell.column.columnDef.cell, cell.getContext());
   };
+  const { leftOffsets, rightOffsets } = useMemo(() => {
+    if (!headers || headers.length === 0) {
+      return {
+        leftOffsets: /* @__PURE__ */ new Map(),
+        rightOffsets: /* @__PURE__ */ new Map()
+      };
+    }
+    const leftPinned = headers.filter(
+      (h) => h.column.getIsPinned() === "left"
+    );
+    const rightPinned = headers.filter(
+      (h) => h.column.getIsPinned() === "right"
+    );
+    const leftMap = /* @__PURE__ */ new Map();
+    let leftAcc = 0;
+    for (const h of leftPinned) {
+      leftMap.set(h.column.id, leftAcc);
+      leftAcc += h.getSize();
+    }
+    const rightMap = /* @__PURE__ */ new Map();
+    let rightAcc = 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const h = rightPinned[i];
+      rightMap.set(h.column.id, rightAcc);
+      rightAcc += h.getSize();
+    }
+    return {
+      leftOffsets: leftMap,
+      rightOffsets: rightMap
+    };
+  }, [headers]);
   const renderBaseRow = useCallback(
     (rowData, options = {}) => {
       const { ref, virtualIndex } = options;
@@ -5560,6 +5972,32 @@ var TableBodyComponent = ({
           onClick: () => onRowClick?.(rowData.original, rowData.index),
           children: rowData.getVisibleCells().map((cell) => {
             const meta = cell.column.columnDef.meta;
+            const pinPosition = cell.column.getIsPinned();
+            const cellStyle = {};
+            if (hasInitializedSizing) {
+              const fallbackWidth = cell.column.getSize();
+              cellStyle.width = `var(--mvn-col-${cell.column.id}-width, ${fallbackWidth}px)`;
+              cellStyle.maxWidth = `var(--mvn-col-${cell.column.id}-width, ${fallbackWidth}px)`;
+              cellStyle.overflow = "hidden";
+              cellStyle.textOverflow = "ellipsis";
+              cellStyle.whiteSpace = "nowrap";
+            }
+            if (pinPosition === "left") {
+              const offset = leftOffsets.get(cell.column.id);
+              if (offset !== void 0) {
+                cellStyle.position = "sticky";
+                cellStyle.left = `var(--mvn-col-${cell.column.id}-left, ${offset}px)`;
+                cellStyle.zIndex = 5;
+              }
+            } else if (pinPosition === "right") {
+              const offset = rightOffsets.get(cell.column.id);
+              if (offset !== void 0) {
+                cellStyle.position = "sticky";
+                cellStyle.right = `var(--mvn-col-${cell.column.id}-right, ${offset}px)`;
+                cellStyle.zIndex = 5;
+              }
+            }
+            const hasStyles = Object.keys(cellStyle).length > 0;
             return /* @__PURE__ */ jsx(
               TableCell,
               {
@@ -5567,9 +6005,11 @@ var TableBodyComponent = ({
                   meta?.className,
                   meta?.align === "center" && "text-center",
                   meta?.align === "right" && "text-right",
-                  meta?.align === "left" && "text-left"
+                  meta?.align === "left" && "text-left",
+                  // Pinned cell styling
+                  pinPosition && "bg-background"
                 ),
-                style: meta?.width ? { width: meta.width } : void 0,
+                style: hasStyles ? cellStyle : void 0,
                 children: onRenderedRow(cell, virtualIndex)
               },
               cell.id
@@ -5579,7 +6019,13 @@ var TableBodyComponent = ({
         `row-${rowData.index}`
       );
     },
-    [onRowClick, resolveRowClassName]
+    [
+      onRowClick,
+      resolveRowClassName,
+      leftOffsets,
+      rightOffsets,
+      hasInitializedSizing
+    ]
   );
   const renderExpandedRow = useCallback(
     (rowData, options = {}) => {
@@ -5668,9 +6114,146 @@ var TableBodyComponent = ({
   ] }, row.id)) });
 };
 
+// src/components/ui/table/components/TableCardView.tsx
+init_utils();
+var CARD_BASE_CLASSES = "border border-border rounded-lg bg-card overflow-hidden transition-shadow hover:shadow-md";
+function renderCellValue(col, value, record, index) {
+  if (col.mobileRender) return col.mobileRender(value, record, index);
+  if (col.render) return col.render(value, record, index);
+  return String(value ?? "");
+}
+function TableCardView({
+  rows,
+  columns,
+  selectable,
+  expandable,
+  onRowClick,
+  rowClassName,
+  renderExpandedContent,
+  mobileCardActions,
+  emptyMessage = "No data",
+  renderMobileCard
+}) {
+  if (rows.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center py-12 text-muted-foreground", children: emptyMessage });
+  }
+  const mobileColumns = React52.useMemo(() => {
+    return columns.filter((col) => !col.mobileHidden && (col.mobileVisible ?? true)).sort((a, b) => (a.mobilePriority ?? 99) - (b.mobilePriority ?? 99)).slice(0, 6);
+  }, [columns]);
+  const headerColumn = mobileColumns[0];
+  const bodyColumns = mobileColumns.slice(1);
+  const hasCardContent = bodyColumns.length > 0 || mobileCardActions;
+  return /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((row) => {
+    const record = row.original;
+    const isSelected = row.getIsSelected();
+    const isExpanded = row.getIsExpanded();
+    const rowClasses = typeof rowClassName === "function" ? rowClassName(record, row.index) : rowClassName;
+    const cardClassName = cn(
+      CARD_BASE_CLASSES,
+      isSelected && "ring-2 ring-primary",
+      rowClasses
+    );
+    if (renderMobileCard) {
+      return /* @__PURE__ */ jsx("div", { className: cardClassName, children: renderMobileCard(record, columns) }, row.id);
+    }
+    return /* @__PURE__ */ jsxs("div", { className: cardClassName, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-3 p-4",
+            hasCardContent && "border-b border-border",
+            onRowClick && "cursor-pointer"
+          ),
+          onClick: () => onRowClick?.(record, row.index),
+          onKeyDown: onRowClick ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onRowClick(record, row.index);
+            }
+          } : void 0,
+          role: onRowClick ? "button" : void 0,
+          tabIndex: onRowClick ? 0 : void 0,
+          children: [
+            selectable && /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: isSelected,
+                onCheckedChange: (checked) => row.toggleSelected(!!checked),
+                onClick: (e) => e.stopPropagation(),
+                "aria-label": "Select row"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "flex-1 font-medium text-foreground truncate", children: headerColumn && renderCellValue(
+              headerColumn,
+              row.getValue(headerColumn.key),
+              record,
+              row.index
+            ) }),
+            expandable && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  row.toggleExpanded();
+                },
+                className: "p-1 text-muted-foreground hover:text-foreground transition-colors",
+                "aria-label": isExpanded ? "Collapse" : "Expand",
+                children: /* @__PURE__ */ jsx(
+                  ChevronDownIcon,
+                  {
+                    className: cn(
+                      "h-5 w-5 transition-transform",
+                      isExpanded && "rotate-180"
+                    )
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ),
+      bodyColumns.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-4 space-y-2", children: bodyColumns.map((col) => {
+        const isFullWidth = col.mobileWidth === "full";
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex justify-between items-start gap-2",
+              isFullWidth && "flex-col"
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground shrink-0", children: col.mobileLabel ?? col.title }),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "text-sm text-foreground text-right",
+                    isFullWidth && "text-left w-full"
+                  ),
+                  children: renderCellValue(
+                    col,
+                    row.getValue(col.key),
+                    record,
+                    row.index
+                  )
+                }
+              )
+            ]
+          },
+          col.key
+        );
+      }) }),
+      mobileCardActions && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 p-4 pt-0 border-t border-border mt-2", children: mobileCardActions(record) }),
+      expandable && isExpanded && renderExpandedContent && /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-border bg-muted/50", children: renderExpandedContent(record, row) })
+    ] }, row.id);
+  }) });
+}
+TableCardView.displayName = "TableCardView";
+
 // src/components/ui/table/components/TableHeaderComponent.tsx
 init_utils();
-var TableFilterOptions = [
+var TABLE_FILTER_OPTIONS = [
   { value: "includesString", label: "Contains" },
   { value: "notContains", label: "Does not contain" },
   { value: "equals", label: "Equals" },
@@ -5678,25 +6261,20 @@ var TableFilterOptions = [
   { value: "startsWith", label: "Starts with" },
   { value: "endsWith", label: "Ends with" }
 ];
-var pinOptions = [
+var PIN_OPTIONS = [
   { value: "left", label: "Pin Left" },
   { value: "right", label: "Pin Right" }
 ];
-var sizingOptions = [
-  { value: "single", label: "Autosize This Column" },
-  { value: "all", label: "Autosize All Columns" },
-  { value: "reset", label: "Reset All Columns" }
-];
-var sortOptions = [
-  { value: "asc", label: "Sort Ascending" },
-  { value: "desc", label: "Sort Descending" }
-];
 var TableHeaderComponent = ({
   header,
   enableColumnOrdering,
   baseColumnOrder,
   setColumnOrder,
-  draggedColumnId
+  draggedColumnId,
+  pinnedLeftOffset,
+  pinnedRightOffset,
+  hasInitializedSizing,
+  startResize
 }) => {
   const column = header.column;
   const meta = column.columnDef.meta;
@@ -5706,28 +6284,8 @@ var TableHeaderComponent = ({
   };
   const pinPosition = column.getIsPinned();
   const sortDirection = column.getIsSorted();
-  const isReorderTable = enableColumnOrdering && !column.id.startsWith("_mvn_");
-  const handleColumnDrop = (targetId) => {
-    const sourceId = draggedColumnId.current;
-    draggedColumnId.current = null;
-    if (!sourceId || sourceId === targetId) return;
-    moveColumnTo(sourceId, targetId);
-  };
-  const moveColumnTo = (sourceId, targetId) => {
-    if (!enableColumnOrdering || sourceId.startsWith("_mvn_") || targetId.startsWith("_mvn_"))
-      return;
-    setColumnOrder((previous) => {
-      const order = previous.length ? [...previous] : [...baseColumnOrder];
-      const sourceIndex = order.indexOf(sourceId);
-      const targetIndex = order.indexOf(targetId);
-      if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex)
-        return order;
-      const next = [...order];
-      next.splice(sourceIndex, 1);
-      next.splice(targetIndex, 0, sourceId);
-      return next;
-    });
-  };
+  const isMvnColumn = column.id.startsWith("_mvn_");
+  const isReorderTable = enableColumnOrdering && !isMvnColumn;
   const [inputValue, setInputValue] = useState(value);
   const debounceTimeoutRef = useRef(null);
   useEffect(() => {
@@ -5766,167 +6324,245 @@ var TableHeaderComponent = ({
     },
     [debouncedFilterChange, filterType]
   );
-  const showPopover = column.getCanSort() || column.getCanPin() || column.getCanFilter() || column.getCanResize();
-  return /* @__PURE__ */ jsx(
-    TableHead,
-    {
-      className: cn(
-        meta?.headerClassName,
-        meta?.align === "center" && "text-center",
-        meta?.align === "right" && "text-right",
-        meta?.align === "left" && "text-left",
-        column.getCanSort() && "select-none",
-        "bg-mvn-gray-100 text-foreground sticky top-0 z-10"
-      ),
-      style: meta?.width ? { width: meta.width } : void 0,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "flex items-center w-full",
-            meta?.align === "center" && "justify-center",
-            meta?.align === "right" && "justify-end",
-            meta?.align === "left" && "justify-start",
-            column.getCanSort() && "cursor-pointer"
-          ),
-          draggable: isReorderTable,
-          onDragStart: (event) => {
-            if (!isReorderTable) return;
-            event.dataTransfer.effectAllowed = "move";
-            draggedColumnId.current = column.id;
-          },
-          onDragEnd: () => {
-            draggedColumnId.current = null;
-          },
-          onDragOver: (event) => {
-            if (!isReorderTable || !draggedColumnId.current || draggedColumnId.current === column.id) {
-              return;
-            }
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "move";
-          },
-          onDrop: (event) => {
-            if (!isReorderTable) return;
-            event.preventDefault();
-            handleColumnDrop(column.id);
-          },
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "flex gap-2 text-[16px] font-medium", children: flexRender(column.columnDef.header, header.getContext()) }),
-            !column.id.startsWith("_mvn_") && showPopover && /* @__PURE__ */ jsx(
-              "span",
-              {
-                onClick: (event) => event.stopPropagation(),
-                className: "ml-auto",
-                children: /* @__PURE__ */ jsxs(Popover, { children: [
-                  /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(TextAlignJustify, { className: "p-1 h-6 w-6" }) }),
-                  /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: "size", children: [
-                    /* @__PURE__ */ jsxs(TabsList, { children: [
-                      column.getCanResize() && /* @__PURE__ */ jsx(TabsTrigger, { value: "size", children: /* @__PURE__ */ jsx(Scaling, { className: "p-1 h-6 w-6" }) }),
-                      column.getCanSort() && /* @__PURE__ */ jsx(TabsTrigger, { value: "sort", children: /* @__PURE__ */ jsx(Scaling, { className: "p-1 h-6 w-6" }) }),
-                      column.getCanPin() && /* @__PURE__ */ jsx(TabsTrigger, { value: "pin", children: /* @__PURE__ */ jsx(Pin, { className: "p-1 h-6 w-6" }) }),
-                      column.getCanFilter() && /* @__PURE__ */ jsx(TabsTrigger, { value: "filter", children: /* @__PURE__ */ jsx(ListFilter, { className: "p-1 h-6 w-6" }) })
-                    ] }),
-                    column.getCanResize() && /* @__PURE__ */ jsx(TabsContent, { value: "size", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: sizingOptions.map((option) => /* @__PURE__ */ jsx(
-                      CommandItem,
-                      {
-                        value: option.value,
-                        onSelect: () => {
-                        },
-                        children: option.label
-                      },
-                      option.value
-                    )) }) }) }) }),
-                    column.getCanSort() && /* @__PURE__ */ jsx(TabsContent, { value: "sort", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: sortOptions.map((option) => /* @__PURE__ */ jsxs(
-                      CommandItem,
-                      {
-                        value: option.value,
-                        onSelect: () => {
-                          if (option.value === sortDirection) {
-                            column.clearSorting();
-                            return;
-                          }
-                          column.toggleSorting(option.value === "desc");
-                        },
-                        children: [
-                          option.label,
-                          /* @__PURE__ */ jsx(
-                            CheckIcon,
-                            {
-                              className: cn(
-                                "ml-auto h-4 w-4",
-                                sortDirection === option.value ? "opacity-100" : "opacity-0"
-                              )
-                            }
-                          )
-                        ]
-                      },
-                      option.value
-                    )) }) }) }) }),
-                    column.getCanPin() && /* @__PURE__ */ jsx(TabsContent, { value: "pin", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: pinOptions.map((option) => /* @__PURE__ */ jsxs(
-                      CommandItem,
-                      {
-                        value: option.value,
-                        onSelect: () => {
-                          if (option.value === pinPosition) {
-                            column.pin(false);
-                            return;
+  const moveColumnTo = useCallback(
+    (sourceId, targetId) => {
+      if (!enableColumnOrdering || sourceId.startsWith("_mvn_") || targetId.startsWith("_mvn_")) {
+        return;
+      }
+      setColumnOrder((previous) => {
+        const order = previous.length ? [...previous] : [...baseColumnOrder];
+        const sourceIndex = order.indexOf(sourceId);
+        const targetIndex = order.indexOf(targetId);
+        if (sourceIndex === -1 || targetIndex === -1 || sourceIndex === targetIndex) {
+          return order;
+        }
+        const next = [...order];
+        next.splice(sourceIndex, 1);
+        next.splice(targetIndex, 0, sourceId);
+        return next;
+      });
+    },
+    [baseColumnOrder, enableColumnOrdering, setColumnOrder]
+  );
+  const handleColumnDrop = useCallback(
+    (targetId) => {
+      const sourceId = draggedColumnId.current;
+      draggedColumnId.current = null;
+      if (!sourceId || sourceId === targetId) return;
+      moveColumnTo(sourceId, targetId);
+    },
+    [draggedColumnId, moveColumnTo]
+  );
+  const handleResizeStart = useCallback(
+    (event) => {
+      event.stopPropagation();
+      if (startResize) {
+        const minSize = column.columnDef.minSize ?? 36;
+        const maxSize = column.columnDef.maxSize ?? 9999;
+        startResize(column.id, event, header.getSize(), minSize, maxSize);
+      } else {
+        header.getResizeHandler()(event);
+      }
+    },
+    [
+      column.columnDef.minSize,
+      column.columnDef.maxSize,
+      column.id,
+      header,
+      startResize
+    ]
+  );
+  const handleFilterTypeChange = useCallback(
+    (selected) => {
+      if (debounceTimeoutRef.current !== null) {
+        window.clearTimeout(debounceTimeoutRef.current);
+        debounceTimeoutRef.current = null;
+      }
+      handleFilterChange(selected, inputValue);
+    },
+    [debounceTimeoutRef, handleFilterChange, inputValue]
+  );
+  const showPopover = column.getCanPin() || column.getCanFilter();
+  const cellStyle = {};
+  if (hasInitializedSizing) {
+    const fallbackWidth = Math.max(header.getSize(), 36);
+    cellStyle.width = `var(--mvn-col-${column.id}-width, ${fallbackWidth}px)`;
+    cellStyle.overflow = "hidden";
+    cellStyle.textOverflow = "ellipsis";
+    cellStyle.whiteSpace = "nowrap";
+  }
+  if (pinPosition === "left" && pinnedLeftOffset !== void 0) {
+    cellStyle.position = "sticky";
+    cellStyle.left = `var(--mvn-col-${column.id}-left, ${pinnedLeftOffset}px)`;
+    cellStyle.zIndex = 20;
+  } else if (pinPosition === "right" && pinnedRightOffset !== void 0) {
+    cellStyle.position = "sticky";
+    cellStyle.right = `var(--mvn-col-${column.id}-right, ${pinnedRightOffset}px)`;
+    cellStyle.zIndex = 20;
+  }
+  return /* @__PURE__ */ jsxs(
+    TableHead,
+    {
+      className: cn(
+        "group",
+        meta?.headerClassName,
+        meta?.align === "center" && "text-center",
+        meta?.align === "right" && "text-right",
+        meta?.align === "left" && "text-left",
+        column.getCanSort() && "select-none",
+        "bg-mvn-gray-100 text-foreground sticky top-0 z-10",
+        pinPosition && "bg-background"
+      ),
+      style: cellStyle,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center w-full",
+              meta?.align === "center" && "justify-center",
+              meta?.align === "right" && "justify-end",
+              meta?.align === "left" && "justify-start"
+            ),
+            draggable: isReorderTable,
+            onDragStart: (event) => {
+              if (!isReorderTable) return;
+              event.dataTransfer.effectAllowed = "move";
+              draggedColumnId.current = column.id;
+            },
+            onDragEnd: () => {
+              draggedColumnId.current = null;
+            },
+            onDragOver: (event) => {
+              if (!isReorderTable || !draggedColumnId.current || draggedColumnId.current === column.id) {
+                return;
+              }
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+            },
+            onDrop: (event) => {
+              if (!isReorderTable) return;
+              event.preventDefault();
+              handleColumnDrop(column.id);
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "flex gap-2 text-[16px] font-medium items-center",
+                    column.getCanSort() && "cursor-pointer"
+                  ),
+                  onClick: () => {
+                    if (draggedColumnId.current) return;
+                    if (column.getCanSort()) {
+                      column.toggleSorting();
+                    }
+                  },
+                  children: [
+                    flexRender(column.columnDef.header, header.getContext()),
+                    sortDirection === "asc" && /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 text-primary flex-shrink-0" }),
+                    sortDirection === "desc" && /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4 text-primary flex-shrink-0" })
+                  ]
+                }
+              ),
+              !isMvnColumn && showPopover && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  onClick: (event) => event.stopPropagation(),
+                  className: "ml-auto",
+                  children: /* @__PURE__ */ jsxs(Popover, { children: [
+                    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "p-1 h-4 w-4 rounded-sm cursor-pointer hover:bg-muted transition-colors" }) }),
+                    /* @__PURE__ */ jsx(PopoverContent, { side: "bottom", className: "pt-2", children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: column.getCanPin() ? "pin" : "filter", children: [
+                      /* @__PURE__ */ jsxs(TabsList, { children: [
+                        column.getCanPin() && /* @__PURE__ */ jsx(
+                          TabsTrigger,
+                          {
+                            value: "pin",
+                            className: "data-[orientation=horizontal]:p-2",
+                            children: /* @__PURE__ */ jsx(Pin, { className: "h-4 w-4" })
                           }
-                          if (option.value === "left" || option.value === "right") {
-                            column.pin(option.value);
+                        ),
+                        column.getCanFilter() && /* @__PURE__ */ jsx(
+                          TabsTrigger,
+                          {
+                            value: "filter",
+                            className: "data-[orientation=horizontal]:p-2",
+                            children: /* @__PURE__ */ jsx(ListFilter, { className: "h-4 w-4" })
                           }
-                        },
-                        children: [
-                          option.label,
-                          /* @__PURE__ */ jsx(
-                            CheckIcon,
-                            {
-                              className: cn(
-                                "ml-auto h-4 w-4",
-                                pinPosition === option.value ? "opacity-100" : "opacity-0"
-                              )
-                            }
-                          )
-                        ]
-                      },
-                      option.value
-                    )) }) }) }) }),
-                    column.getCanFilter() && /* @__PURE__ */ jsxs(TabsContent, { value: "filter", children: [
-                      /* @__PURE__ */ jsxs(
-                        Select,
+                        )
+                      ] }),
+                      column.getCanPin() && /* @__PURE__ */ jsx(TabsContent, { value: "pin", className: "mt-4", children: /* @__PURE__ */ jsx(Command, { className: "h-auto", children: /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsx(CommandGroup, { children: PIN_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+                        CommandItem,
                         {
-                          value: filterType,
-                          onValueChange: (selected) => {
-                            if (debounceTimeoutRef.current !== null) {
-                              window.clearTimeout(debounceTimeoutRef.current);
-                              debounceTimeoutRef.current = null;
-                            }
-                            handleFilterChange(selected, inputValue);
+                          value: option.value,
+                          onSelect: () => {
+                            column.pin(
+                              option.value === pinPosition ? false : option.value
+                            );
                           },
                           children: [
-                            /* @__PURE__ */ jsx(SelectTrigger, { className: "mb-4", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
-                            /* @__PURE__ */ jsx(SelectContent, { children: TableFilterOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                            option.label,
+                            /* @__PURE__ */ jsx(
+                              CheckIcon,
+                              {
+                                className: cn(
+                                  "ml-auto h-4 w-4",
+                                  pinPosition === option.value ? "opacity-100" : "opacity-0"
+                                )
+                              }
+                            )
                           ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Input,
-                        {
-                          leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-                          value: inputValue,
-                          onChange: handleInputChange,
-                          clearable: true,
-                          onClear: () => column.setFilterValue({ filterType, value: "" }),
-                          placeholder: meta?.filterPlaceholder ?? "Filter\u2026"
-                        }
-                      )
-                    ] })
-                  ] }) })
-                ] })
-              }
-            )
-          ]
-        }
-      )
+                        },
+                        option.value
+                      )) }) }) }) }),
+                      column.getCanFilter() && /* @__PURE__ */ jsxs(TabsContent, { value: "filter", className: "mt-2", children: [
+                        /* @__PURE__ */ jsxs(
+                          Select,
+                          {
+                            value: filterType,
+                            onValueChange: handleFilterTypeChange,
+                            children: [
+                              /* @__PURE__ */ jsx(SelectTrigger, { className: "mb-4", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                              /* @__PURE__ */ jsx(SelectContent, { children: TABLE_FILTER_OPTIONS.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                            ]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          Input,
+                          {
+                            leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
+                            value: inputValue,
+                            onChange: handleInputChange,
+                            clearable: true,
+                            onClear: () => column.setFilterValue({ filterType, value: "" }),
+                            placeholder: meta?.filterPlaceholder ?? "Filter\u2026"
+                          }
+                        )
+                      ] })
+                    ] }) })
+                  ] })
+                }
+              )
+            ]
+          }
+        ),
+        column.getCanResize() && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onMouseDown: handleResizeStart,
+            onTouchStart: handleResizeStart,
+            onDoubleClick: () => header.column.resetSize(),
+            className: cn(
+              "absolute right-0 top-0 h-full w-4 cursor-w-resize select-none touch-none",
+              "flex items-center justify-center",
+              "opacity-0 group-hover:opacity-100 transition-opacity duration-150",
+              header.column.getIsResizing() && "opacity-100 bg-primary/10"
+            ),
+            style: { transform: "translateX(50%)" }
+          }
+        )
+      ]
     },
     header.id
   );
@@ -5942,6 +6578,46 @@ var TableToolbarComponent = ({
   customizeToolbar
 }) => {
   const toolbarVisible = enableExport || customizeToolbar || enableGlobalFilter;
+  const [inputValue, setInputValue] = useState(globalFilter);
+  const debounceTimeoutRef = useRef(null);
+  useEffect(() => {
+    setInputValue(globalFilter);
+  }, [globalFilter]);
+  useEffect(() => {
+    return () => {
+      if (debounceTimeoutRef.current !== null) {
+        window.clearTimeout(debounceTimeoutRef.current);
+      }
+    };
+  }, []);
+  const debouncedSetGlobalFilter = useCallback(
+    (nextValue) => {
+      if (debounceTimeoutRef.current !== null) {
+        window.clearTimeout(debounceTimeoutRef.current);
+      }
+      debounceTimeoutRef.current = window.setTimeout(() => {
+        setGlobalFilter(nextValue);
+        debounceTimeoutRef.current = null;
+      }, 300);
+    },
+    [setGlobalFilter]
+  );
+  const handleInputChange = useCallback(
+    (event) => {
+      const nextValue = event.target.value;
+      setInputValue(nextValue);
+      debouncedSetGlobalFilter(nextValue);
+    },
+    [debouncedSetGlobalFilter]
+  );
+  const handleClear = useCallback(() => {
+    if (debounceTimeoutRef.current !== null) {
+      window.clearTimeout(debounceTimeoutRef.current);
+      debounceTimeoutRef.current = null;
+    }
+    setInputValue("");
+    setGlobalFilter("");
+  }, [setGlobalFilter]);
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     toolbarVisible && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
       enableExport && /* @__PURE__ */ jsx(
@@ -5959,9 +6635,10 @@ var TableToolbarComponent = ({
       Input,
       {
         leftIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
-        value: globalFilter,
-        onChange: (event) => setGlobalFilter(event.target.value),
+        value: inputValue,
+        onChange: handleInputChange,
         clearable: true,
+        onClear: handleClear,
         placeholder: globalFilterPlaceholder
       }
     )
@@ -6059,7 +6736,10 @@ function useTableCore({
   manualSorting,
   onFilterChange,
   getCheckboxProps,
-  selectedRowKey
+  selectedRowKey,
+  defaultColumnPinning,
+  enableColumnResizing = false,
+  columnResizeMode = "onChange"
 }) {
   const [sorting, setSorting] = useState(
     sortBy ? [{ id: sortBy, desc: sortDirection === "desc" }] : []
@@ -6073,8 +6753,24 @@ function useTableCore({
     pageSize
   });
   const [columnPinning, setColumnPinning] = useState({
-    left: [],
-    right: []
+    left: defaultColumnPinning?.left ?? [],
+    right: defaultColumnPinning?.right ?? []
+  });
+  const [columnSizing, setColumnSizing] = useState(() => {
+    if (!enableColumnResizing) return {};
+    const initial = {};
+    columns.forEach((col) => {
+      if (col.size !== void 0) {
+        const key = typeof col.key === "string" ? col.key : String(col.key);
+        initial[key] = col.size;
+      }
+    });
+    return initial;
+  });
+  const [columnSizingInfo, setColumnSizingInfo] = useState({});
+  const [hasInitializedSizing, setHasInitializedSizing] = useState(() => {
+    if (!enableColumnResizing) return false;
+    return columns.some((col) => col.size !== void 0);
   });
   const dataLength = data.length;
   const enableColumnFilters = useMemo(() => {
@@ -6200,6 +6896,9 @@ function useTableCore({
         enableColumnFilter: column.filterable === true,
         enablePinning: column.pinnable === true,
         enableResizing: column.resizable === true,
+        size: column.size,
+        minSize: column.minSize,
+        maxSize: column.maxSize,
         meta: {
           align: column.align,
           className: column.className,
@@ -6329,11 +7028,156 @@ function useTableCore({
     }
     return paginationState;
   }, [pagination, dataLength, paginationState]);
+  const tableRef = useRef(null);
+  const tableContainerRef = useRef(null);
+  const resizeStateRef = useRef({
+    isResizing: false,
+    columnId: null,
+    startX: 0,
+    startWidth: 0,
+    minSize: 36,
+    maxSize: 9999
+  });
+  const pinnedColumnsRef = useRef({ left: [], right: [] });
+  const updatePinnedOffsets = useCallback(() => {
+    const container = tableContainerRef.current;
+    if (!container) return;
+    const { left, right } = pinnedColumnsRef.current;
+    const computedStyle = getComputedStyle(container);
+    let leftAcc = 0;
+    for (const col of left) {
+      container.style.setProperty(`--mvn-col-${col.id}-left`, `${leftAcc}px`);
+      const widthVar = computedStyle.getPropertyValue(
+        `--mvn-col-${col.id}-width`
+      );
+      const width = widthVar ? parseFloat(widthVar) : 0;
+      leftAcc += width;
+    }
+    let rightAcc = 0;
+    for (let i = right.length - 1; i >= 0; i--) {
+      const col = right[i];
+      container.style.setProperty(`--mvn-col-${col.id}-right`, `${rightAcc}px`);
+      const widthVar = computedStyle.getPropertyValue(
+        `--mvn-col-${col.id}-width`
+      );
+      const width = widthVar ? parseFloat(widthVar) : 0;
+      rightAcc += width;
+    }
+  }, []);
+  const handleResizeMove = useCallback(
+    (event) => {
+      const state = resizeStateRef.current;
+      if (!state.isResizing || !state.columnId || !tableContainerRef.current)
+        return;
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      const delta = clientX - state.startX;
+      const newWidth = Math.max(
+        state.minSize,
+        Math.min(state.maxSize, state.startWidth + delta)
+      );
+      tableContainerRef.current.style.setProperty(
+        `--mvn-col-${state.columnId}-width`,
+        `${newWidth}px`
+      );
+      const { left, right } = pinnedColumnsRef.current;
+      const isPinned = left.some((c) => c.id === state.columnId) || right.some((c) => c.id === state.columnId);
+      if (isPinned) {
+        updatePinnedOffsets();
+      }
+    },
+    [updatePinnedOffsets]
+  );
+  const handleResizeEnd = useCallback(() => {
+    const state = resizeStateRef.current;
+    if (!state.isResizing || !tableContainerRef.current) return;
+    const container = tableContainerRef.current;
+    const computedStyle = getComputedStyle(container);
+    const newSizing = {};
+    const headers = tableRef.current?.getHeaderGroups()[0]?.headers ?? [];
+    for (const header of headers) {
+      if (header.column.getCanResize()) {
+        const varName = `--mvn-col-${header.column.id}-width`;
+        const value = computedStyle.getPropertyValue(varName);
+        if (value) {
+          newSizing[header.column.id] = parseFloat(value);
+        }
+      }
+    }
+    if (Object.keys(newSizing).length > 0) {
+      setColumnSizing(newSizing);
+      if (!hasInitializedSizing) {
+        setHasInitializedSizing(true);
+      }
+    }
+    resizeStateRef.current = {
+      isResizing: false,
+      columnId: null,
+      startX: 0,
+      startWidth: 0,
+      minSize: 36,
+      maxSize: 9999
+    };
+    document.removeEventListener("mousemove", handleResizeMove);
+    document.removeEventListener("mouseup", handleResizeEnd);
+    document.removeEventListener("touchmove", handleResizeMove);
+    document.removeEventListener("touchend", handleResizeEnd);
+  }, [hasInitializedSizing, handleResizeMove]);
+  const startResize = useCallback(
+    (columnId, event, initialWidth, minSize = 36, maxSize = 9999) => {
+      const clientX = "touches" in event ? event.touches[0].clientX : event.clientX;
+      resizeStateRef.current = {
+        isResizing: true,
+        columnId,
+        startX: clientX,
+        startWidth: initialWidth,
+        minSize,
+        maxSize
+      };
+      document.addEventListener("mousemove", handleResizeMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      document.addEventListener("touchmove", handleResizeMove);
+      document.addEventListener("touchend", handleResizeEnd);
+    },
+    [handleResizeMove, handleResizeEnd]
+  );
+  useEffect(() => {
+    return () => {
+      document.removeEventListener("mousemove", handleResizeMove);
+      document.removeEventListener("mouseup", handleResizeEnd);
+      document.removeEventListener("touchmove", handleResizeMove);
+      document.removeEventListener("touchend", handleResizeEnd);
+    };
+  }, [handleResizeMove, handleResizeEnd]);
+  const handleColumnSizingInfoChange = useCallback(
+    (updater) => {
+      setColumnSizingInfo((prev) => {
+        const next = typeof updater === "function" ? updater(prev) : updater;
+        const shouldInitializeSizing = next.isResizingColumn && !hasInitializedSizing && tableRef.current;
+        if (shouldInitializeSizing) {
+          const headers = tableRef.current.getHeaderGroups()[0]?.headers ?? [];
+          const allWidths = {};
+          for (const header of headers) {
+            if (header.column.getCanResize()) {
+              allWidths[header.column.id] = header.getSize();
+            }
+          }
+          if (Object.keys(allWidths).length > 0) {
+            setColumnSizing(allWidths);
+            setHasInitializedSizing(true);
+          }
+        }
+        return next;
+      });
+    },
+    [hasInitializedSizing]
+  );
   const table = useReactTable({
     data,
     columns: columnDefs,
     manualFiltering,
     manualSorting,
+    enableColumnResizing,
+    columnResizeMode,
     state: {
       sorting,
       columnFilters,
@@ -6342,7 +7186,9 @@ function useTableCore({
       ...enableColumnOrdering ? { columnOrder } : {},
       ...enableGlobalFilter ? { globalFilter } : {},
       pagination: tablePaginationState,
-      columnPinning
+      columnPinning,
+      columnSizing,
+      columnSizingInfo
     },
     onSortingChange: enableColumnSorter ? handleSortingChange : void 0,
     onColumnFiltersChange: enableColumnFilters ? handleFilteringChange : void 0,
@@ -6352,6 +7198,8 @@ function useTableCore({
     onGlobalFilterChange: enableGlobalFilter ? setGlobalFilter : void 0,
     onPaginationChange: pagination ? handlePaginationChange : void 0,
     onColumnPinningChange: enableColumnPin ? setColumnPinning : void 0,
+    onColumnSizingChange: enableColumnResizing ? setColumnSizing : void 0,
+    onColumnSizingInfoChange: enableColumnResizing ? handleColumnSizingInfoChange : void 0,
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: getSortedRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
@@ -6363,6 +7211,18 @@ function useTableCore({
     getRowId: (originalRow, index) => resolveRowId(originalRow, index),
     getRowCanExpand: expandable ? (row) => getRowCanExpand ? getRowCanExpand(row.original) : !!renderExpandedContent : void 0
   });
+  tableRef.current = table;
+  useEffect(() => {
+    const headers = table.getHeaderGroups()[0]?.headers ?? [];
+    const leftPinned = [];
+    const rightPinned = [];
+    headers.forEach((h) => {
+      const pin = h.column.getIsPinned();
+      if (pin === "left") leftPinned.push({ id: h.column.id });
+      if (pin === "right") rightPinned.push({ id: h.column.id });
+    });
+    pinnedColumnsRef.current = { left: leftPinned, right: rightPinned };
+  }, [table, columnPinning]);
   const pageCount = useMemo(
     () => table.getPageCount(),
     [table, sorting, columnFilters]
@@ -6421,7 +7281,11 @@ function useTableCore({
     pageNumbers,
     paginationState,
     sorting,
-    columnFilters
+    columnFilters,
+    hasInitializedSizing,
+    tableContainerRef,
+    startResize,
+    updatePinnedOffsets
   };
 }
 function useTableVirtualization({
@@ -6927,7 +7791,14 @@ function SimpleTable({
   maxRecords,
   loadingText,
   pagingPosition = "right",
-  recordPerChunk = 100
+  recordPerChunk = 100,
+  defaultColumnPinning,
+  enableColumnResizing = false,
+  columnResizeMode = "onChange",
+  // Mobile props
+  mobileLayout = "auto",
+  mobileCardActions,
+  renderMobileCard
 }) {
   const [internalLazyLoading, setInternalLazyLoading] = useState(false);
   const pendingLazyLoad = useRef(false);
@@ -6946,7 +7817,11 @@ function SimpleTable({
     pageNumbers,
     paginationState,
     sorting,
-    columnFilters
+    columnFilters,
+    hasInitializedSizing,
+    tableContainerRef,
+    startResize,
+    updatePinnedOffsets
   } = useTableCore({
     data,
     columns,
@@ -6970,7 +7845,10 @@ function SimpleTable({
     numberOfPageButtons,
     manualSorting,
     manualFiltering,
-    onFilterChange
+    onFilterChange,
+    defaultColumnPinning,
+    enableColumnResizing,
+    columnResizeMode
   });
   const handleLazyLoad = useCallback(async () => {
     if (!onLazyScrollLoad || pendingLazyLoad.current || resolvedLoading) return;
@@ -6984,6 +7862,8 @@ function SimpleTable({
     }
   }, [onLazyScrollLoad, resolvedLoading]);
   const virtualizationActive = data.length * (expandable ? 2 : 1) > virtualizationThreshold;
+  const isMobile = useIsMobile();
+  const shouldUseCardView = mobileLayout === "card" || mobileLayout === "auto" && isMobile;
   const [chunkCount, setChunkCount] = useState(recordPerChunk);
   const onLoadChunk = useCallback(() => {
     if (resolvedLoading || pendingLazyLoad.current) return;
@@ -7000,7 +7880,7 @@ function SimpleTable({
   }, [onLoadChunk]);
   const rows = useMemo(
     () => table.getRowModel().rows,
-    [paginationState, sorting, columnFilters]
+    [paginationState, sorting, columnFilters, globalFilter]
   );
   const splittedRows = useMemo(
     () => rows.slice(0, chunkCount),
@@ -7012,7 +7892,6 @@ function SimpleTable({
   );
   const tablePagination = table.getState().pagination;
   const draggedColumnId = useRef(null);
-  const tableContainerRef = useRef(null);
   const {
     virtualRowPointers,
     virtualItems,
@@ -7032,7 +7911,7 @@ function SimpleTable({
   const rafRef = useRef(null);
   useEffect(() => {
     const container = tableContainerRef.current;
-    if (!container || virtualizationActive) return;
+    if (!container || virtualizationActive && !shouldUseCardView) return;
     const scheduleCheck = () => {
       if (rafRef.current != null) return;
       rafRef.current = requestAnimationFrame(() => {
@@ -7060,12 +7939,63 @@ function SimpleTable({
     }
   }, [virtualizationActive]);
   useEffect(() => {
-    if (!virtualItems.length || !virtualizationActive) return;
+    if (!virtualItems.length || !virtualizationActive || shouldUseCardView) return;
     if (paddingBottom <= scrollLoadThreshold) {
       onLoadChunkRef.current();
     }
   }, [paddingBottom, scrollLoadThreshold, virtualizationActive]);
   const columnCount = table.getAllLeafColumns().length;
+  const allHeaders = useMemo(() => {
+    const groups = table.getHeaderGroups();
+    if (groups.length === 0) return [];
+    return groups[0].headers;
+  }, [table]);
+  const { leftOffsets, rightOffsets } = useMemo(() => {
+    if (!allHeaders || allHeaders.length === 0) {
+      return {
+        leftOffsets: /* @__PURE__ */ new Map(),
+        rightOffsets: /* @__PURE__ */ new Map()
+      };
+    }
+    const leftPinned = allHeaders.filter(
+      (h) => h.column.getIsPinned() === "left"
+    );
+    const rightPinned = allHeaders.filter(
+      (h) => h.column.getIsPinned() === "right"
+    );
+    const leftMap = /* @__PURE__ */ new Map();
+    let leftAcc = 0;
+    for (const h of leftPinned) {
+      leftMap.set(h.column.id, leftAcc);
+      leftAcc += h.getSize();
+    }
+    const rightMap = /* @__PURE__ */ new Map();
+    let rightAcc = 0;
+    for (let i = rightPinned.length - 1; i >= 0; i--) {
+      const h = rightPinned[i];
+      rightMap.set(h.column.id, rightAcc);
+      rightAcc += h.getSize();
+    }
+    return {
+      leftOffsets: leftMap,
+      rightOffsets: rightMap
+    };
+  }, [allHeaders]);
+  useEffect(() => {
+    if (!hasInitializedSizing || !tableContainerRef.current) return;
+    const container = tableContainerRef.current;
+    const headers = table.getHeaderGroups()[0]?.headers ?? [];
+    for (const header of headers) {
+      if (header.column.getCanResize()) {
+        const width = header.getSize();
+        container.style.setProperty(
+          `--mvn-col-${header.column.id}-width`,
+          `${width}px`
+        );
+      }
+    }
+    updatePinnedOffsets();
+  }, [hasInitializedSizing, table, updatePinnedOffsets]);
   useEffect(() => {
     if (!selectable || !onSelectionChange) return;
     onSelectionChange(selectedRows);
@@ -7116,17 +8046,36 @@ function SimpleTable({
         },
         children: [
           showOverlayLoading && (loadingComponent ?? /* @__PURE__ */ jsx(DefaultLoadingComponent, { loadingText })),
-          /* @__PURE__ */ jsxs(
+          shouldUseCardView ? /* @__PURE__ */ jsx(
+            TableCardView,
+            {
+              rows: splittedRows,
+              columns,
+              selectable,
+              expandable,
+              onRowClick,
+              rowClassName,
+              renderExpandedContent,
+              mobileCardActions,
+              emptyMessage,
+              renderMobileCard
+            }
+          ) : /* @__PURE__ */ jsxs(
             Table,
             {
               variant,
               size,
               wrapperClassName: "overflow-visible",
               className: showOverlayLoading ? "pointer-events-none opacity-50" : void 0,
+              style: enableColumnResizing ? {
+                width: hasInitializedSizing ? table.getTotalSize() : void 0,
+                tableLayout: hasInitializedSizing ? "fixed" : "auto"
+              } : void 0,
               children: [
                 caption && /* @__PURE__ */ jsx(TableCaption, { children: caption }),
                 /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => {
                   if (header.isPlaceholder) return null;
+                  const pinPosition = header.column.getIsPinned();
                   return /* @__PURE__ */ jsx(
                     TableHeaderComponent,
                     {
@@ -7134,7 +8083,11 @@ function SimpleTable({
                       draggedColumnId,
                       enableColumnOrdering,
                       baseColumnOrder,
-                      setColumnOrder
+                      setColumnOrder,
+                      pinnedLeftOffset: pinPosition === "left" ? leftOffsets.get(header.column.id) : void 0,
+                      pinnedRightOffset: pinPosition === "right" ? rightOffsets.get(header.column.id) : void 0,
+                      hasInitializedSizing,
+                      startResize
                     },
                     header.id
                   );
@@ -7157,7 +8110,9 @@ function SimpleTable({
                       renderExpandedContent,
                       virtualItems,
                       invalidateCache,
-                      getRowExpandable
+                      getRowExpandable,
+                      headers: allHeaders,
+                      hasInitializedSizing
                     }
                   ),
                   showInlineLoadingRow && resolvedLoading && /* @__PURE__ */ jsx(TableRow, { "data-loading-row": true, className: "pointer-events-none", children: /* @__PURE__ */ jsxs(
@@ -7218,12 +8173,12 @@ function DataTable({
   pageSize = 10,
   className
 }) {
-  const [sorting, setSorting] = React49.useState([]);
-  const [columnFilters, setColumnFilters] = React49.useState(
+  const [sorting, setSorting] = React52.useState([]);
+  const [columnFilters, setColumnFilters] = React52.useState(
     []
   );
-  const [columnVisibility, setColumnVisibility] = React49.useState({});
-  const [rowSelection, setRowSelection] = React49.useState({});
+  const [columnVisibility, setColumnVisibility] = React52.useState({});
+  const [rowSelection, setRowSelection] = React52.useState({});
   const table = useReactTable({
     data,
     columns,
@@ -7380,7 +8335,7 @@ var avatarFallbackVariants = cva(
     }
   }
 );
-var Avatar = React49.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React52.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -7389,7 +8344,7 @@ var Avatar = React49.forwardRef(({ className, size, ...props }, ref) => /* @__PU
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -7398,7 +8353,7 @@ var AvatarImage = React49.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React49.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React52.forwardRef(({ className, size, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -7562,7 +8517,7 @@ var itemVariants = cva(
     }
   }
 );
-var Item9 = React49.forwardRef(
+var Item9 = React52.forwardRef(
   ({
     className,
     variant,
@@ -7628,7 +8583,7 @@ var Item9 = React49.forwardRef(
   }
 );
 Item9.displayName = "Item";
-var ItemGroup = React49.forwardRef(({ className, label, description, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
+var ItemGroup = React52.forwardRef(({ className, label, description, children, ...props }, ref) => /* @__PURE__ */ jsxs("div", { ref, className: cn("space-y-1", className), ...props, children: [
   (label || description) && /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 space-y-0.5", children: [
     label && /* @__PURE__ */ jsx("div", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
     description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: description })
@@ -7636,7 +8591,7 @@ var ItemGroup = React49.forwardRef(({ className, label, description, children, .
   children
 ] }));
 ItemGroup.displayName = "ItemGroup";
-var ItemList = React49.forwardRef(({ className, divided, spacing = "default", children, ...props }, ref) => {
+var ItemList = React52.forwardRef(({ className, divided, spacing = "default", children, ...props }, ref) => {
   const spacingClasses = {
     none: "space-y-0",
     sm: "space-y-0.5",
@@ -7659,7 +8614,7 @@ var ItemList = React49.forwardRef(({ className, divided, spacing = "default", ch
   );
 });
 ItemList.displayName = "ItemList";
-var ItemSeparator = React49.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var ItemSeparator = React52.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -7697,7 +8652,7 @@ var badgeVariants = cva(
     }
   }
 );
-var Badge = React49.forwardRef(
+var Badge = React52.forwardRef(
   ({
     className,
     variant,
@@ -7764,7 +8719,7 @@ function Calendar({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const { Card: Card2, CardHeader: CardHeader2, CardTitle: CardTitle2, CardContent: CardContent2, CardDescription: CardDescription2 } = React49.useMemo(() => {
+  const { Card: Card2, CardHeader: CardHeader2, CardTitle: CardTitle2, CardContent: CardContent2, CardDescription: CardDescription2 } = React52.useMemo(() => {
     try {
       const cardComponents = (init_card(), __toCommonJS(card_exports));
       return cardComponents;
@@ -7778,7 +8733,7 @@ function Calendar({
       };
     }
   }, []);
-  const defaultPresets = React49.useMemo(() => {
+  const defaultPresets = React52.useMemo(() => {
     if (!quickSelect && !presets) return [];
     const mode = props.mode;
     if (mode === "single") {
@@ -7786,7 +8741,7 @@ function Calendar({
         {
           label: "Today",
           value: () => /* @__PURE__ */ new Date(),
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React52.createElement(Calendar$1, { className: "h-3 w-3" })
         },
         {
           label: "Tomorrow",
@@ -7795,7 +8750,7 @@ function Calendar({
             tomorrow.setDate(tomorrow.getDate() + 1);
             return tomorrow;
           },
-          icon: React49.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
+          icon: React52.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
         },
         {
           label: "Next Week",
@@ -7804,7 +8759,7 @@ function Calendar({
             nextWeek.setDate(nextWeek.getDate() + 7);
             return nextWeek;
           },
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React52.createElement(Calendar$1, { className: "h-3 w-3" })
         }
       ];
     } else if (mode === "range") {
@@ -7817,7 +8772,7 @@ function Calendar({
             end.setDate(start.getDate() + 6);
             return { from: start, to: end };
           },
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React52.createElement(Calendar$1, { className: "h-3 w-3" })
         },
         {
           label: "Next 7 Days",
@@ -7827,7 +8782,7 @@ function Calendar({
             end.setDate(start.getDate() + 7);
             return { from: start, to: end };
           },
-          icon: React49.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
+          icon: React52.createElement("span", { className: "text-xs" }, "\u27A1\uFE0F")
         }
       ];
     } else {
@@ -7843,7 +8798,7 @@ function Calendar({
             }
             return dates;
           },
-          icon: React49.createElement(Calendar$1, { className: "h-3 w-3" })
+          icon: React52.createElement(Calendar$1, { className: "h-3 w-3" })
         }
       ];
     }
@@ -7854,24 +8809,24 @@ function Calendar({
     const selected = props.selected;
     const mode = props.mode;
     if (mode === "single" && selected) {
-      return React49.createElement(
+      return React52.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50"
         },
         [
-          React49.createElement(
+          React52.createElement(
             "div",
             {
               key: "header",
               className: "flex items-center gap-2 mb-1"
             },
             [
-              React49.createElement(Calendar$1, {
+              React52.createElement(Calendar$1, {
                 key: "icon",
                 className: "h-4 w-4"
               }),
-              React49.createElement(
+              React52.createElement(
                 "span",
                 {
                   key: "label",
@@ -7881,7 +8836,7 @@ function Calendar({
               )
             ]
           ),
-          React49.createElement(
+          React52.createElement(
             "p",
             {
               key: "date",
@@ -7899,24 +8854,24 @@ function Calendar({
     }
     if (mode === "range" && selected?.from) {
       const elements = [
-        React49.createElement(
+        React52.createElement(
           "div",
           {
             key: "from",
             className: "flex items-center gap-2 text-sm"
           },
           [
-            React49.createElement(
+            React52.createElement(
               "span",
               { key: "icon", className: "text-green-600" },
               "\u{1F7E2}"
             ),
-            React49.createElement(
+            React52.createElement(
               "span",
               { key: "label", className: "font-medium" },
               "From:"
             ),
-            React49.createElement(
+            React52.createElement(
               "span",
               { key: "date" },
               selected.from.toLocaleDateString()
@@ -7926,43 +8881,43 @@ function Calendar({
       ];
       if (selected.to) {
         elements.push(
-          React49.createElement(
+          React52.createElement(
             "div",
             {
               key: "to",
               className: "flex items-center gap-2 text-sm"
             },
             [
-              React49.createElement(
+              React52.createElement(
                 "span",
                 { key: "icon", className: "text-red-600" },
                 "\u{1F534}"
               ),
-              React49.createElement(
+              React52.createElement(
                 "span",
                 { key: "label", className: "font-medium" },
                 "To:"
               ),
-              React49.createElement(
+              React52.createElement(
                 "span",
                 { key: "date" },
                 selected.to.toLocaleDateString()
               )
             ]
           ),
-          React49.createElement(
+          React52.createElement(
             "div",
             {
               key: "duration",
               className: "flex items-center gap-2 pt-2 border-t text-sm"
             },
             [
-              React49.createElement(
+              React52.createElement(
                 "span",
                 { key: "icon", className: "text-mvn-blue-600" },
                 "\u23F1\uFE0F"
               ),
-              React49.createElement(
+              React52.createElement(
                 "span",
                 { key: "text" },
                 `Duration: ${Math.ceil(
@@ -7973,25 +8928,25 @@ function Calendar({
           )
         );
       }
-      return React49.createElement(
+      return React52.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50"
         },
-        React49.createElement("div", { className: "space-y-2" }, elements)
+        React52.createElement("div", { className: "space-y-2" }, elements)
       );
     }
     if (mode === "multiple" && Array.isArray(selected) && selected.length > 0) {
       const sortedDates = selected.sort((a, b) => a.getTime() - b.getTime()).slice(0, 5);
       const dateElements = sortedDates.map(
-        (date, index) => React49.createElement(
+        (date, index) => React52.createElement(
           "div",
           {
             key: index,
             className: "flex items-center justify-between p-2 bg-background rounded border"
           },
           [
-            React49.createElement(
+            React52.createElement(
               "span",
               {
                 key: "date",
@@ -8003,7 +8958,7 @@ function Calendar({
                 year: "numeric"
               })
             ),
-            React49.createElement(
+            React52.createElement(
               "button",
               {
                 key: "remove",
@@ -8024,18 +8979,18 @@ function Calendar({
         )
       );
       const elements = [
-        React49.createElement(
+        React52.createElement(
           "div",
           {
             key: "header",
             className: "flex items-center gap-2 mb-2"
           },
           [
-            React49.createElement(Star, {
+            React52.createElement(Star, {
               key: "icon",
               className: "h-4 w-4 text-yellow-500"
             }),
-            React49.createElement(
+            React52.createElement(
               "span",
               {
                 key: "label",
@@ -8045,7 +9000,7 @@ function Calendar({
             )
           ]
         ),
-        React49.createElement(
+        React52.createElement(
           "div",
           {
             key: "dates",
@@ -8056,7 +9011,7 @@ function Calendar({
       ];
       if (selected.length > 5) {
         elements.push(
-          React49.createElement(
+          React52.createElement(
             "p",
             {
               key: "more",
@@ -8066,7 +9021,7 @@ function Calendar({
           )
         );
       }
-      return React49.createElement(
+      return React52.createElement(
         "div",
         {
           className: "p-3 border rounded-lg bg-muted/50 max-h-48 overflow-y-auto"
@@ -8081,7 +9036,7 @@ function Calendar({
     const elements = [];
     if ((quickSelect || presets) && activePresets.length > 0) {
       const presetButtons = activePresets.map(
-        (preset, index) => React49.createElement(
+        (preset, index) => React52.createElement(
           "button",
           {
             key: index,
@@ -8090,19 +9045,19 @@ function Calendar({
           },
           [
             preset.icon,
-            React49.createElement("span", { key: "label" }, preset.label)
+            React52.createElement("span", { key: "label" }, preset.label)
           ]
         )
       );
       elements.push(
-        React49.createElement(
+        React52.createElement(
           "div",
           {
             key: "presets",
             className: "space-y-2"
           },
           [
-            React49.createElement(
+            React52.createElement(
               "h5",
               {
                 key: "title",
@@ -8110,7 +9065,7 @@ function Calendar({
               },
               "Quick Select:"
             ),
-            React49.createElement(
+            React52.createElement(
               "div",
               {
                 key: "buttons",
@@ -8135,7 +9090,7 @@ function Calendar({
         label = "Clear Range";
       }
       elements.push(
-        React49.createElement(
+        React52.createElement(
           "button",
           {
             key: "clear",
@@ -8151,7 +9106,7 @@ function Calendar({
             disabled
           },
           [
-            React49.createElement(RotateCcw, {
+            React52.createElement(RotateCcw, {
               key: "icon",
               className: "mr-1 h-3 w-3"
             }),
@@ -8160,7 +9115,7 @@ function Calendar({
         )
       );
     }
-    return React49.createElement(
+    return React52.createElement(
       "div",
       {
         className: cn("space-y-3", sidebarClassName)
@@ -8168,7 +9123,7 @@ function Calendar({
       elements
     );
   };
-  const calendarElement = React49.createElement(DayPicker, {
+  const calendarElement = React52.createElement(DayPicker, {
     showOutsideDays,
     className: cn(
       "bg-background group/calendar p-4 border rounded-lg shadow-sm [--cell-size:theme(spacing.10)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
@@ -8270,7 +9225,7 @@ function Calendar({
     },
     components: {
       Root: ({ className: className2, rootRef, ...props2 }) => {
-        return React49.createElement("div", {
+        return React52.createElement("div", {
           "data-slot": "calendar",
           ref: rootRef,
           className: cn(className2),
@@ -8279,28 +9234,28 @@ function Calendar({
       },
       Chevron: ({ className: className2, orientation, ...props2 }) => {
         if (orientation === "left") {
-          return React49.createElement(ChevronLeft, {
+          return React52.createElement(ChevronLeft, {
             className: cn("size-4", className2),
             ...props2
           });
         }
         if (orientation === "right") {
-          return React49.createElement(ChevronRight, {
+          return React52.createElement(ChevronRight, {
             className: cn("size-4", className2),
             ...props2
           });
         }
-        return React49.createElement(ChevronDown, {
+        return React52.createElement(ChevronDown, {
           className: cn("size-4", className2),
           ...props2
         });
       },
       DayButton: CalendarDayButton,
       WeekNumber: ({ children, ...props2 }) => {
-        return React49.createElement(
+        return React52.createElement(
           "td",
           props2,
-          React49.createElement(
+          React52.createElement(
             "div",
             {
               className: "flex size-10 items-center justify-center text-center text-sm font-medium text-muted-foreground"
@@ -8315,25 +9270,25 @@ function Calendar({
   });
   if (layout === "compact") {
     if (withCard) {
-      return React49.createElement(
+      return React52.createElement(
         Card2,
         {
           className: cn("w-fit", cardClassName)
         },
-        React49.createElement(CardContent2, { className: "p-3" }, calendarElement)
+        React52.createElement(CardContent2, { className: "p-3" }, calendarElement)
       );
     }
     return calendarElement;
   }
   if (layout === "inline") {
-    const sidebarElement2 = renderDateInfo() || renderQuickActions() ? React49.createElement(
+    const sidebarElement2 = renderDateInfo() || renderQuickActions() ? React52.createElement(
       "div",
       {
         className: cn("min-w-[240px] space-y-3", sidebarClassName)
       },
       [renderDateInfo(), renderQuickActions()].filter(Boolean)
     ) : null;
-    const content = sidebarElement2 ? React49.createElement(
+    const content = sidebarElement2 ? React52.createElement(
       "div",
       {
         className: cn("flex gap-4 items-start", containerClassName)
@@ -8341,25 +9296,25 @@ function Calendar({
       [calendarElement, sidebarElement2]
     ) : calendarElement;
     if (withCard) {
-      return React49.createElement(
+      return React52.createElement(
         Card2,
         {
           className: cn("w-fit", cardClassName)
         },
         [
-          (cardTitle || cardDescription) && React49.createElement(CardHeader2, { key: "header" }, [
-            cardTitle && React49.createElement(
+          (cardTitle || cardDescription) && React52.createElement(CardHeader2, { key: "header" }, [
+            cardTitle && React52.createElement(
               CardTitle2,
               { key: "title", className: "text-base" },
               cardTitle
             ),
-            cardDescription && React49.createElement(
+            cardDescription && React52.createElement(
               CardDescription2,
               { key: "desc" },
               cardDescription
             )
           ]),
-          React49.createElement(
+          React52.createElement(
             CardContent2,
             {
               key: "content",
@@ -8372,7 +9327,7 @@ function Calendar({
     }
     return content;
   }
-  const sidebarElement = renderDateInfo() || renderQuickActions() ? React49.createElement(
+  const sidebarElement = renderDateInfo() || renderQuickActions() ? React52.createElement(
     "div",
     {
       className: cn("min-w-[240px] space-y-3", sidebarClassName)
@@ -8380,7 +9335,7 @@ function Calendar({
     [renderDateInfo(), renderQuickActions()].filter(Boolean)
   ) : null;
   if (withCard) {
-    const cardElement = React49.createElement(
+    const cardElement = React52.createElement(
       Card2,
       {
         className: cn(
@@ -8391,19 +9346,19 @@ function Calendar({
         )
       },
       [
-        (cardTitle || cardDescription) && React49.createElement(CardHeader2, { key: "header" }, [
-          cardTitle && React49.createElement(
+        (cardTitle || cardDescription) && React52.createElement(CardHeader2, { key: "header" }, [
+          cardTitle && React52.createElement(
             CardTitle2,
             { key: "title", className: "text-base" },
             cardTitle
           ),
-          cardDescription && React49.createElement(
+          cardDescription && React52.createElement(
             CardDescription2,
             { key: "desc" },
             cardDescription
           )
         ]),
-        React49.createElement(
+        React52.createElement(
           CardContent2,
           {
             key: "content",
@@ -8414,7 +9369,7 @@ function Calendar({
       ].filter(Boolean)
     );
     if (sidebarElement) {
-      return React49.createElement(
+      return React52.createElement(
         "div",
         {
           className: cn("flex gap-4 flex-wrap items-start", containerClassName)
@@ -8425,7 +9380,7 @@ function Calendar({
     return cardElement;
   }
   if (sidebarElement) {
-    return React49.createElement(
+    return React52.createElement(
       "div",
       {
         className: cn("flex gap-4 flex-wrap items-start", containerClassName)
@@ -8442,8 +9397,8 @@ function CalendarDayButton({
   ...props
 }) {
   const defaultClassNames = getDefaultClassNames();
-  const ref = React49.useRef(null);
-  React49.useEffect(() => {
+  const ref = React52.useRef(null);
+  React52.useEffect(() => {
     if (modifiers.focused) ref.current?.focus();
   }, [modifiers.focused]);
   return /* @__PURE__ */ jsx(
@@ -10059,7 +11014,7 @@ var pickerVariants = cva("w-full justify-start text-left font-normal", {
     variant: "outlined"
   }
 });
-var DatePicker = React49.forwardRef(
+var DatePicker = React52.forwardRef(
   ({
     date,
     onDateChange,
@@ -10106,7 +11061,7 @@ var DatePicker = React49.forwardRef(
   }
 );
 DatePicker.displayName = "DatePicker";
-var DateRangePicker = React49.forwardRef(
+var DateRangePicker = React52.forwardRef(
   ({
     dateRange,
     onDateRangeChange,
@@ -10164,15 +11119,15 @@ DateRangePicker.displayName = "DateRangePicker";
 
 // src/components/ui/carousel/index.tsx
 init_utils();
-var CarouselContext = React49.createContext(null);
+var CarouselContext = React52.createContext(null);
 function useCarousel() {
-  const context = React49.useContext(CarouselContext);
+  const context = React52.useContext(CarouselContext);
   if (!context) {
     throw new Error("useCarousel must be used within a <Carousel />");
   }
   return context;
 }
-var Carousel = React49.forwardRef(
+var Carousel = React52.forwardRef(
   ({
     orientation = "horizontal",
     opts,
@@ -10189,22 +11144,22 @@ var Carousel = React49.forwardRef(
       },
       plugins
     );
-    const [canScrollPrev, setCanScrollPrev] = React49.useState(false);
-    const [canScrollNext, setCanScrollNext] = React49.useState(false);
-    const onSelect = React49.useCallback((api2) => {
+    const [canScrollPrev, setCanScrollPrev] = React52.useState(false);
+    const [canScrollNext, setCanScrollNext] = React52.useState(false);
+    const onSelect = React52.useCallback((api2) => {
       if (!api2) {
         return;
       }
       setCanScrollPrev(api2.canScrollPrev());
       setCanScrollNext(api2.canScrollNext());
     }, []);
-    const scrollPrev = React49.useCallback(() => {
+    const scrollPrev = React52.useCallback(() => {
       api?.scrollPrev();
     }, [api]);
-    const scrollNext = React49.useCallback(() => {
+    const scrollNext = React52.useCallback(() => {
       api?.scrollNext();
     }, [api]);
-    const handleKeyDown = React49.useCallback(
+    const handleKeyDown = React52.useCallback(
       (event) => {
         if (event.key === "ArrowLeft") {
           event.preventDefault();
@@ -10216,13 +11171,13 @@ var Carousel = React49.forwardRef(
       },
       [scrollPrev, scrollNext]
     );
-    React49.useEffect(() => {
+    React52.useEffect(() => {
       if (!api || !setApi) {
         return;
       }
       setApi(api);
     }, [api, setApi]);
-    React49.useEffect(() => {
+    React52.useEffect(() => {
       if (!api) {
         return;
       }
@@ -10251,7 +11206,11 @@ var Carousel = React49.forwardRef(
           {
             ref,
             onKeyDownCapture: handleKeyDown,
-            className: cn("relative", className),
+            className: cn(
+              "relative",
+              orientation === "vertical" && "h-full",
+              className
+            ),
             role: "region",
             "aria-roledescription": "carousel",
             ...props,
@@ -10263,9 +11222,9 @@ var Carousel = React49.forwardRef(
   }
 );
 Carousel.displayName = "Carousel";
-var CarouselContent = React49.forwardRef(({ className, ...props }, ref) => {
+var CarouselContent = React52.forwardRef(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel();
-  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { ref: carouselRef, className: "overflow-hidden h-full", children: /* @__PURE__ */ jsx(
     "div",
     {
       ref,
@@ -10279,7 +11238,7 @@ var CarouselContent = React49.forwardRef(({ className, ...props }, ref) => {
   ) });
 });
 CarouselContent.displayName = "CarouselContent";
-var CarouselItem = React49.forwardRef(({ className, ...props }, ref) => {
+var CarouselItem = React52.forwardRef(({ className, ...props }, ref) => {
   const { orientation } = useCarousel();
   return /* @__PURE__ */ jsx(
     "div",
@@ -10297,7 +11256,7 @@ var CarouselItem = React49.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CarouselItem.displayName = "CarouselItem";
-var CarouselPrevious = React49.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselPrevious = React52.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -10306,8 +11265,8 @@ var CarouselPrevious = React49.forwardRef(({ className, variant = "outline", siz
       variant,
       size,
       className: cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "-left-12 top-1/2 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        "absolute z-10 h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "left-2 top-1/2 -translate-y-[1rem]" : "top-2 left-1/2 -translate-x-[1rem] rotate-90",
         className
       ),
       disabled: !canScrollPrev,
@@ -10321,7 +11280,7 @@ var CarouselPrevious = React49.forwardRef(({ className, variant = "outline", siz
   );
 });
 CarouselPrevious.displayName = "CarouselPrevious";
-var CarouselNext = React49.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+var CarouselNext = React52.forwardRef(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
   return /* @__PURE__ */ jsxs(
     Button,
@@ -10330,8 +11289,8 @@ var CarouselNext = React49.forwardRef(({ className, variant = "outline", size =
       variant,
       size,
       className: cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "-right-12 top-1/2 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        "absolute z-10 h-8 w-8 rounded-full",
+        orientation === "horizontal" ? "right-2 top-1/2 -translate-y-[1rem]" : "bottom-2 left-1/2 -translate-x-[1rem] rotate-90",
         className
       ),
       disabled: !canScrollNext,
@@ -10360,10 +11319,10 @@ function SimpleCarousel({
   nextArrow,
   onSlideChange
 }) {
-  const [api, setApi] = React49.useState();
-  const [current, setCurrent] = React49.useState(0);
-  const [count, setCount] = React49.useState(0);
-  React49.useEffect(() => {
+  const [api, setApi] = React52.useState();
+  const [current, setCurrent] = React52.useState(0);
+  const [count, setCount] = React52.useState(0);
+  React52.useEffect(() => {
     if (!api) {
       return;
     }
@@ -10375,7 +11334,7 @@ function SimpleCarousel({
       onSlideChange?.(selectedIndex);
     });
   }, [api, onSlideChange]);
-  React49.useEffect(() => {
+  React52.useEffect(() => {
     if (!api || !autoPlay) {
       return;
     }
@@ -10389,55 +11348,65 @@ function SimpleCarousel({
     return () => clearInterval(interval);
   }, [api, autoPlay, loop]);
   const slideWidth = slidesToShow > 1 ? `${100 / slidesToShow}%` : "100%";
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs(
-      Carousel,
-      {
-        setApi,
-        opts: {
-          align: "start",
-          loop
-        },
-        orientation,
-        className: cn("w-full mx-auto", containerClassName),
-        children: [
-          /* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(
-            CarouselItem,
-            {
-              className: cn(itemClassName, item.className),
-              style: { flexBasis: slideWidth },
-              onClick: item.onClick,
-              children: item.content
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("w-full", orientation === "vertical" && "h-64", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          Carousel,
+          {
+            setApi,
+            opts: {
+              align: "start",
+              loop
             },
-            item.id || index
-          )) }),
-          showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
-            prevArrow || /* @__PURE__ */ jsx(CarouselPrevious, {}),
-            nextArrow || /* @__PURE__ */ jsx(CarouselNext, {})
-          ] })
-        ]
-      }
-    ),
-    showDots && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-2 mt-4", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-      Button,
-      {
-        variant: "ghost",
-        className: cn(
-          "h-2 w-2 rounded-full transition-colors",
-          current === index + 1 ? "bg-primary" : "bg-primary/20 hover:bg-primary/40"
+            orientation,
+            className: cn(
+              "w-full mx-auto",
+              orientation === "vertical" && "h-full",
+              containerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CarouselContent, { children: items.map((item, index) => /* @__PURE__ */ jsx(
+                CarouselItem,
+                {
+                  className: cn(itemClassName, item.className),
+                  style: { flexBasis: slideWidth },
+                  onClick: item.onClick,
+                  children: item.content
+                },
+                item.id || index
+              )) }),
+              showArrows && /* @__PURE__ */ jsxs(Fragment, { children: [
+                prevArrow || /* @__PURE__ */ jsx(CarouselPrevious, {}),
+                nextArrow || /* @__PURE__ */ jsx(CarouselNext, {})
+              ] })
+            ]
+          }
         ),
-        onClick: () => api?.scrollTo(index),
-        "aria-label": `Go to slide ${index + 1}`
-      },
-      index
-    )) }),
-    count > 0 && /* @__PURE__ */ jsxs("div", { className: "py-2 text-center text-sm text-muted-foreground", children: [
-      "Slide ",
-      current,
-      " of ",
-      count
-    ] })
-  ] });
+        showDots && /* @__PURE__ */ jsx("div", { className: "flex justify-center space-x-2 mt-4", children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "ghost",
+            className: cn(
+              "h-2 w-2 rounded-full transition-colors",
+              current === index + 1 ? "bg-primary" : "bg-primary/20 hover:bg-primary/40"
+            ),
+            onClick: () => api?.scrollTo(index),
+            "aria-label": `Go to slide ${index + 1}`
+          },
+          index
+        )) }),
+        count > 0 && /* @__PURE__ */ jsxs("div", { className: "py-2 text-center text-sm text-muted-foreground", children: [
+          "Slide ",
+          current,
+          " of ",
+          count
+        ] })
+      ]
+    }
+  );
 }
 
 // src/components/ui/typography/index.tsx
@@ -10515,7 +11484,7 @@ var typeToTag = {
   list: "ul",
   "list-item": "li"
 };
-var Typography = React49.forwardRef(
+var Typography = React52.forwardRef(
   ({
     type,
     size,
@@ -10552,7 +11521,7 @@ var Typography = React49.forwardRef(
 );
 Typography.displayName = "Typography";
 function createWrapper(fixedType) {
-  return React49.forwardRef(
+  return React52.forwardRef(
     ({ ...props }, ref) => /* @__PURE__ */ jsx(Typography, { ref, type: fixedType, ...props })
   );
 }
@@ -10599,6 +11568,680 @@ var TypographyGroup = {
 // src/index.ts
 init_utils();
 
-export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Blockquote, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, 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, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getInitials, inputGroupVariants, inputVariants, itemVariants, labelVariants, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, requiredRule, separatorVariants, skeletonVariants, spinnerVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, urlRule, useCarousel, useForm, useSidebar, useToast, useWatch };
+// src/components/ui/charts/chart-theme.ts
+var getCSSVariable = (name) => {
+  if (typeof window === "undefined") return "";
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+};
+var CHART_COLORS = {
+  primary: "var(--chart-1)",
+  secondary: "var(--chart-2)",
+  tertiary: "var(--chart-3)",
+  quaternary: "var(--chart-4)",
+  quinary: "var(--chart-5)",
+  // Semantic colors (fixed values)
+  success: "#22a55b",
+  warning: "#f59e0b",
+  error: "#ef4444",
+  info: "var(--chart-1)",
+  // Neutral - uses theme variables
+  muted: "var(--muted-foreground)",
+  foreground: "var(--foreground)",
+  background: "var(--background)",
+  grid: "var(--border)"
+};
+var CHART_PALETTE = [
+  CHART_COLORS.primary,
+  CHART_COLORS.secondary,
+  CHART_COLORS.tertiary,
+  CHART_COLORS.quaternary,
+  CHART_COLORS.quinary,
+  CHART_COLORS.success,
+  CHART_COLORS.warning,
+  CHART_COLORS.error
+];
+var getThemeColors = () => {
+  const chart1 = getCSSVariable("--chart-1");
+  const primary = getCSSVariable("--primary");
+  return {
+    primary: chart1 || primary || "#007bff",
+    chart1: chart1 || "#007bff",
+    chart2: getCSSVariable("--chart-2") || "#3d9bff",
+    chart3: getCSSVariable("--chart-3") || "#7abaff",
+    chart4: getCSSVariable("--chart-4") || "#0563c7",
+    chart5: getCSSVariable("--chart-5") || "#084f9b",
+    foreground: getCSSVariable("--foreground") || "#23252a",
+    muted: getCSSVariable("--muted-foreground") || "#616875",
+    grid: getCSSVariable("--border") || "#dbdde1",
+    background: getCSSVariable("--background") || "#fff"
+  };
+};
+var tooltipStyle = {
+  backgroundColor: "var(--popover)",
+  border: "1px solid var(--border)",
+  borderRadius: "6px",
+  padding: "8px 12px",
+  boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)",
+  color: "var(--foreground)"
+};
+var tooltipLabelStyle = {
+  color: "var(--foreground)",
+  fontWeight: 500
+};
+var tooltipItemStyle = {
+  color: "var(--foreground)"
+};
+var legendStyle = {
+  fontSize: "12px",
+  color: "var(--muted-foreground, #616875)"
+};
+function LineChart({
+  data,
+  xAxisKey,
+  lines,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  showXAxis = true,
+  showYAxis = true,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(LineChart$1, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    showXAxis && /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    showYAxis && /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    lines.map((line, index) => /* @__PURE__ */ jsx(
+      Line,
+      {
+        type: line.type ?? "monotone",
+        dataKey: line.dataKey,
+        name: line.name ?? line.dataKey,
+        stroke: line.stroke ?? CHART_PALETTE[index % CHART_PALETTE.length],
+        strokeWidth: line.strokeWidth ?? 2,
+        dot: line.dot ?? false,
+        activeDot: { r: 4 }
+      },
+      line.dataKey
+    ))
+  ] }) }) });
+}
+function BarChart({
+  data,
+  xAxisKey,
+  bars,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  layout = "horizontal",
+  margin,
+  className
+}) {
+  const defaultMargin = layout === "vertical" ? { top: 20, right: 30, left: 60, bottom: 5 } : { top: 20, right: 30, left: 20, bottom: 5 };
+  const chartMargin = margin ?? defaultMargin;
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(BarChart$1, { data, layout, margin: chartMargin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    layout === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xAxisKey,
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          type: "number",
+          domain: [0, "dataMax"],
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          dataKey: xAxisKey,
+          type: "category",
+          width: 80,
+          stroke: CHART_COLORS.muted,
+          fontSize: 12,
+          tickLine: false,
+          axisLine: false
+        }
+      )
+    ] }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    bars.map((bar, index) => {
+      const defaultRadius = layout === "vertical" ? [0, 4, 4, 0] : [4, 4, 0, 0];
+      return /* @__PURE__ */ jsx(
+        Bar,
+        {
+          dataKey: bar.dataKey,
+          name: bar.name ?? bar.dataKey,
+          fill: bar.fill ?? CHART_PALETTE[index % CHART_PALETTE.length],
+          stackId: bar.stackId,
+          radius: bar.radius ?? defaultRadius
+        },
+        bar.dataKey
+      );
+    })
+  ] }) }) });
+}
+function PieChart({
+  data,
+  dataKey = "value",
+  nameKey = "name",
+  width = "100%",
+  height = 300,
+  showTooltip = true,
+  showLegend = true,
+  innerRadius = 0,
+  outerRadius = 80,
+  showLabel = false,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(PieChart$1, { margin, children: [
+    /* @__PURE__ */ jsx(
+      Pie,
+      {
+        data,
+        dataKey,
+        nameKey,
+        cx: "50%",
+        cy: "50%",
+        innerRadius,
+        outerRadius,
+        label: showLabel,
+        labelLine: showLabel,
+        children: data.map((entry, index) => /* @__PURE__ */ jsx(
+          Cell,
+          {
+            fill: entry.fill ?? CHART_PALETTE[index % CHART_PALETTE.length]
+          },
+          `cell-${index}`
+        ))
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {})
+  ] }) }) });
+}
+function AreaChart({
+  data,
+  xAxisKey,
+  areas,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(AreaChart$1, { data, margin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    areas.map((area, index) => {
+      const color = area.stroke ?? CHART_PALETTE[index % CHART_PALETTE.length];
+      return /* @__PURE__ */ jsx(
+        Area,
+        {
+          type: area.type ?? "monotone",
+          dataKey: area.dataKey,
+          name: area.name ?? area.dataKey,
+          stroke: color,
+          fill: area.fill ?? color,
+          fillOpacity: area.fillOpacity ?? 0.3,
+          stackId: area.stackId
+        },
+        area.dataKey
+      );
+    })
+  ] }) }) });
+}
+function ScatterChart({
+  series,
+  xAxisKey,
+  yAxisKey,
+  zAxisKey,
+  width = "100%",
+  height = 300,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(ScatterChart$1, { margin, children: [
+    showGrid && /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        strokeDasharray: "3 3",
+        stroke: CHART_COLORS.grid,
+        strokeOpacity: 0.5
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      XAxis,
+      {
+        dataKey: xAxisKey,
+        type: "number",
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      YAxis,
+      {
+        dataKey: yAxisKey,
+        type: "number",
+        stroke: CHART_COLORS.muted,
+        fontSize: 12,
+        tickLine: false,
+        axisLine: false
+      }
+    ),
+    zAxisKey && /* @__PURE__ */ jsx(ZAxis, { dataKey: zAxisKey, range: [60, 400] }),
+    showTooltip && /* @__PURE__ */ jsx(
+      Tooltip$1,
+      {
+        contentStyle: tooltipStyle,
+        labelStyle: tooltipLabelStyle,
+        itemStyle: tooltipItemStyle,
+        cursor: { strokeDasharray: "3 3" }
+      }
+    ),
+    showLegend && /* @__PURE__ */ jsx(Legend, {}),
+    series.map((s, index) => /* @__PURE__ */ jsx(
+      Scatter,
+      {
+        name: s.name,
+        data: s.data,
+        fill: s.fill ?? CHART_PALETTE[index % CHART_PALETTE.length]
+      },
+      s.name
+    ))
+  ] }) }) });
+}
+function RadarChart({
+  data,
+  angleKey,
+  radars,
+  width = "100%",
+  height = 300,
+  showTooltip = true,
+  showLegend = true,
+  outerRadius = "80%",
+  margin = { top: 20, right: 30, left: 20, bottom: 5 },
+  domain,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(
+    RadarChart$1,
+    {
+      data,
+      margin,
+      outerRadius,
+      children: [
+        /* @__PURE__ */ jsx(PolarGrid, { stroke: CHART_COLORS.grid, strokeOpacity: 0.5 }),
+        /* @__PURE__ */ jsx(
+          PolarAngleAxis,
+          {
+            dataKey: angleKey,
+            stroke: CHART_COLORS.muted,
+            fontSize: 12
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PolarRadiusAxis,
+          {
+            stroke: CHART_COLORS.muted,
+            fontSize: 10,
+            angle: 90,
+            domain
+          }
+        ),
+        showTooltip && /* @__PURE__ */ jsx(
+          Tooltip$1,
+          {
+            contentStyle: tooltipStyle,
+            labelStyle: tooltipLabelStyle,
+            itemStyle: tooltipItemStyle
+          }
+        ),
+        showLegend && /* @__PURE__ */ jsx(Legend, {}),
+        radars.map((radar, index) => {
+          const color = radar.stroke ?? CHART_PALETTE[index % CHART_PALETTE.length];
+          return /* @__PURE__ */ jsx(
+            Radar,
+            {
+              name: radar.name ?? radar.dataKey,
+              dataKey: radar.dataKey,
+              stroke: color,
+              fill: radar.fill ?? color,
+              fillOpacity: radar.fillOpacity ?? 0.3
+            },
+            radar.dataKey
+          );
+        })
+      ]
+    }
+  ) }) });
+}
+var THEMES = {
+  default: "default",
+  sunset: "sunset",
+  lavender: "lavender",
+  rose: "rose",
+  slate: "slate",
+  midnight: "midnight",
+  emerald: "emerald",
+  amber: "amber",
+  crimson: "crimson"
+};
+var THEME_CATALOG = [
+  {
+    name: "default",
+    label: "Default (Toss Blue)",
+    description: "Clean, professional blue theme",
+    primaryColor: "hsl(211, 100%, 50%)"
+  },
+  {
+    name: "sunset",
+    label: "Sunset",
+    description: "Warm orange for energy and creativity",
+    primaryColor: "hsl(24, 95%, 53%)"
+  },
+  {
+    name: "lavender",
+    label: "Lavender",
+    description: "Elegant purple for creative projects",
+    primaryColor: "hsl(262, 83%, 58%)"
+  },
+  {
+    name: "rose",
+    label: "Rose",
+    description: "Soft pink for modern, approachable design",
+    primaryColor: "hsl(346, 77%, 50%)"
+  },
+  {
+    name: "slate",
+    label: "Slate",
+    description: "Minimal gray for clean, professional look",
+    primaryColor: "hsl(215, 16%, 47%)"
+  },
+  {
+    name: "midnight",
+    label: "Midnight",
+    description: "Deep purple-blue optimized for dark mode",
+    primaryColor: "hsl(240, 65%, 52%)"
+  },
+  {
+    name: "emerald",
+    label: "Emerald",
+    description: "Fresh teal-green for tech-forward apps",
+    primaryColor: "hsl(160, 84%, 39%)"
+  },
+  {
+    name: "amber",
+    label: "Amber",
+    description: "Premium gold for attention-grabbing UI",
+    primaryColor: "hsl(38, 92%, 50%)"
+  },
+  {
+    name: "crimson",
+    label: "Crimson",
+    description: "Bold red for urgent, passionate design",
+    primaryColor: "hsl(0, 84%, 50%)"
+  }
+];
+function getCurrentTheme() {
+  if (typeof document === "undefined") return "default";
+  const html = document.documentElement;
+  for (const theme of Object.keys(THEMES)) {
+    if (theme !== "default" && html.classList.contains(`theme-${theme}`)) {
+      return theme;
+    }
+  }
+  return "default";
+}
+function getCurrentMode() {
+  if (typeof document === "undefined") return "light";
+  return document.documentElement.classList.contains("dark") ? "dark" : "light";
+}
+function setTheme(theme) {
+  if (typeof document === "undefined") return;
+  const html = document.documentElement;
+  for (const t of Object.keys(THEMES)) {
+    if (t !== "default") {
+      html.classList.remove(`theme-${t}`);
+    }
+  }
+  if (theme !== "default") {
+    html.classList.add(`theme-${theme}`);
+  }
+  try {
+    localStorage.setItem("mvn-theme", theme);
+  } catch {
+  }
+}
+function setMode(mode) {
+  if (typeof document === "undefined") return;
+  const html = document.documentElement;
+  if (mode === "system") {
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    html.classList.toggle("dark", prefersDark);
+  } else {
+    html.classList.toggle("dark", mode === "dark");
+  }
+  try {
+    localStorage.setItem("mvn-mode", mode);
+  } catch {
+  }
+}
+function initializeTheme() {
+  if (typeof window === "undefined") return;
+  try {
+    const savedTheme = localStorage.getItem("mvn-theme");
+    const savedMode = localStorage.getItem("mvn-mode");
+    if (savedTheme && savedTheme in THEMES) {
+      setTheme(savedTheme);
+    }
+    if (savedMode) {
+      setMode(savedMode);
+    } else {
+      setMode("system");
+    }
+  } catch {
+  }
+}
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "default",
+  defaultMode = "system",
+  storageKey = "mvn-theme"
+}) {
+  const [theme, setThemeState] = useState(defaultTheme);
+  const [mode, setModeState] = useState(defaultMode);
+  const [resolvedMode, setResolvedMode] = useState("light");
+  useEffect(() => {
+    try {
+      const savedTheme = localStorage.getItem(storageKey);
+      const savedMode = localStorage.getItem(`${storageKey}-mode`);
+      if (savedTheme && savedTheme in THEMES) {
+        setThemeState(savedTheme);
+      }
+      if (savedMode) {
+        setModeState(savedMode);
+      }
+    } catch {
+    }
+  }, [storageKey]);
+  useEffect(() => {
+    const html = document.documentElement;
+    for (const t of Object.keys(THEMES)) {
+      if (t !== "default") {
+        html.classList.remove(`theme-${t}`);
+      }
+    }
+    if (theme !== "default") {
+      html.classList.add(`theme-${theme}`);
+    }
+    try {
+      localStorage.setItem(storageKey, theme);
+    } catch {
+    }
+  }, [theme, storageKey]);
+  useEffect(() => {
+    const html = document.documentElement;
+    const applyMode = (isDark) => {
+      html.classList.toggle("dark", isDark);
+      setResolvedMode(isDark ? "dark" : "light");
+    };
+    if (mode === "system") {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      applyMode(mediaQuery.matches);
+      const handler = (e) => applyMode(e.matches);
+      mediaQuery.addEventListener("change", handler);
+      return () => mediaQuery.removeEventListener("change", handler);
+    } else {
+      applyMode(mode === "dark");
+    }
+    try {
+      localStorage.setItem(`${storageKey}-mode`, mode);
+    } catch {
+    }
+  }, [mode, storageKey]);
+  const value = {
+    theme,
+    mode,
+    resolvedMode,
+    setTheme: setThemeState,
+    setMode: setModeState
+  };
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+function useTheme2() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+export { Accordion, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, BREAKPOINTS, Badge, BarChart, Blockquote, BottomNavigation, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CHART_COLORS, CHART_PALETTE, Calendar, CalendarDayButton, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, Checkbox, Collapsible, CollapsibleContent, CollapsibleItem, CollapsibleTrigger, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, DateRangePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DotsSpinner, 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, Empty, Field, Form, FormItem, FormList, H1, H2, H3, H4, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, InlineCode, Input, InputGroup, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Item9 as Item, ItemGroup, ItemList, ItemSeparator, Label, Lead, LineChart, List3 as List, ListItem, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MobileHeader, MobileNavigationProvider, Muted, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, P, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ProductCard, ProfileCard, Progress, RadarChart, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScatterChart, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator5 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, SimpleAvatar, SimpleCard, SimpleCarousel, SimpleTable, SimpleTabs, SimpleTooltip, Skeleton, SkeletonCard, Slider, Small, Spinner, Switch, THEMES, THEME_CATALOG, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toast, ToastProvider, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, TypographyGroup, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, checkboxVariants, cn, composeRules, emailRule, emptyVariants, fieldVariants, getCurrentMode, getCurrentTheme, getInitials, getThemeColors, initializeTheme, inputGroupVariants, inputVariants, itemVariants, labelVariants, legendStyle, maxLengthRule, maxValueRule, minLengthRule, minValueRule, navigationMenuTriggerStyle, numberRule, patternRule, progressVariants, radioGroupVariants, radioItemVariants, requiredRule, separatorVariants, setMode, setTheme, skeletonVariants, spinnerVariants, switchVariants, tableVariants, textareaVariants, toastVariants, toggleGroupVariants, toggleVariants, tooltipStyle, urlRule, useBreakpoint, useBreakpointValue, useCarousel, useForm, useIsDesktop, useIsMobile, useIsTablet, useMobileNav, useSidebar, useSwipeActions, useTheme2 as useTheme, useToast, useWatch };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map