@onesaz/ui 0.3.18 → 0.3.20

package/dist/index.js

@@ -1185,31 +1185,117 @@ TextField.displayName = "TextField";
 
 // src/components/checkbox.tsx
 import * as React12 from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
 var Checkbox = React12.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
-    "input",
-    {
-      type: "checkbox",
-      ref,
-      className: cn(
-        "h-4 w-4 shrink-0 rounded-sm border border-accent cursor-pointer",
-        "ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        "disabled:cursor-not-allowed disabled:opacity-50",
-        "accent-accent",
-        className
-      ),
-      ...props
-    }
-  )
+  ({
+    className,
+    checked,
+    defaultChecked,
+    onChange,
+    disabled,
+    indeterminate = false,
+    ...props
+  }, ref) => {
+    const inputRef = React12.useRef(null);
+    React12.useImperativeHandle(ref, () => inputRef.current);
+    const [isChecked, setIsChecked] = React12.useState(
+      checked !== void 0 ? Boolean(checked) : Boolean(defaultChecked)
+    );
+    React12.useEffect(() => {
+      if (checked !== void 0) setIsChecked(Boolean(checked));
+    }, [checked]);
+    React12.useEffect(() => {
+      if (inputRef.current) {
+        inputRef.current.indeterminate = indeterminate;
+      }
+    }, [indeterminate]);
+    const handleChange = (e) => {
+      if (checked === void 0) setIsChecked(e.target.checked);
+      onChange?.(e);
+    };
+    const active = isChecked || indeterminate;
+    return /* @__PURE__ */ jsxs3(
+      "label",
+      {
+        className: cn(
+          "relative inline-flex h-4 w-4 shrink-0",
+          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              ref: inputRef,
+              type: "checkbox",
+              checked,
+              defaultChecked,
+              onChange: handleChange,
+              disabled,
+              className: "peer sr-only",
+              ...props
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "h-4 w-4 rounded-sm border transition-colors duration-150",
+                "flex items-center justify-center",
+                // Focus ring mirrors the hidden input's focus-visible state
+                "peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background peer-focus-visible:outline-none",
+                active ? "bg-accent border-accent text-accent-foreground" : "bg-background border-border text-transparent"
+              ),
+              children: indeterminate ? (
+                // Dash for indeterminate
+                /* @__PURE__ */ jsx12(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "10",
+                    height: "10",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx12("path", { d: "M5 12h14" })
+                  }
+                )
+              ) : (
+                // Checkmark
+                /* @__PURE__ */ jsx12(
+                  "svg",
+                  {
+                    xmlns: "http://www.w3.org/2000/svg",
+                    width: "10",
+                    height: "10",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: "3.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: /* @__PURE__ */ jsx12("polyline", { points: "20 6 9 17 4 12" })
+                  }
+                )
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 Checkbox.displayName = "Checkbox";
 
 // src/components/switch.tsx
 import * as React13 from "react";
-import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var Switch = React13.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs3("label", { className: cn("relative inline-flex items-center cursor-pointer", className), children: [
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxs4("label", { className: cn("relative inline-flex items-center cursor-pointer", className), children: [
     /* @__PURE__ */ jsx13(
       "input",
       {
@@ -1241,7 +1327,7 @@ Switch.displayName = "Switch";
 // src/components/radio.tsx
 import * as React14 from "react";
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var RadioGroupContext = React14.createContext({});
 var RadioGroup = React14.forwardRef(({ className, orientation = "vertical", size = "md", ...props }, ref) => {
   return /* @__PURE__ */ jsx14(RadioGroupContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx14(
@@ -1306,9 +1392,9 @@ var Radio = React14.forwardRef(({ className, label, description, id: idProp, val
   if (!label && !description) {
     return /* @__PURE__ */ jsx14(RadioGroupItem, { ref, value, size, ...props });
   }
-  return /* @__PURE__ */ jsxs4("div", { className: cn("flex items-start gap-3", className), children: [
+  return /* @__PURE__ */ jsxs5("div", { className: cn("flex items-start gap-3", className), children: [
     /* @__PURE__ */ jsx14(RadioGroupItem, { ref, id, value, size, ...props }),
-    /* @__PURE__ */ jsxs4("div", { className: "grid gap-1", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "grid gap-1", children: [
       label && /* @__PURE__ */ jsx14(
         "label",
         {
@@ -1325,7 +1411,7 @@ Radio.displayName = "Radio";
 
 // src/components/form.tsx
 import * as React15 from "react";
-import { jsx as jsx15, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 var FormControlContext = React15.createContext({});
 function useFormControl() {
   return React15.useContext(FormControlContext);
@@ -1374,7 +1460,7 @@ var FormLabel = React15.forwardRef(
     const disabled = disabledProp ?? context.disabled;
     const required = requiredProp ?? context.required;
     const id = htmlFor ?? context.id;
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "label",
       {
         ref,
@@ -1440,7 +1526,7 @@ FormGroup.displayName = "FormGroup";
 // src/components/slider.tsx
 import * as React16 from "react";
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 var Slider = React16.forwardRef(({
   className,
   min = 0,
@@ -1469,7 +1555,7 @@ var Slider = React16.forwardRef(({
   };
   const currentValue = internalValue[0];
   const displayValue = valueFormatter ? valueFormatter(currentValue) : currentValue.toString();
-  const sliderElement = /* @__PURE__ */ jsxs6(
+  const sliderElement = /* @__PURE__ */ jsxs7(
     SliderPrimitive.Root,
     {
       ref,
@@ -1501,19 +1587,19 @@ var Slider = React16.forwardRef(({
     right: "flex items-center gap-3"
   };
   const orderMap = {
-    top: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    top: /* @__PURE__ */ jsxs7(Fragment2, { children: [
       valueElement,
       sliderElement
     ] }),
-    bottom: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    bottom: /* @__PURE__ */ jsxs7(Fragment2, { children: [
       sliderElement,
       valueElement
     ] }),
-    left: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    left: /* @__PURE__ */ jsxs7(Fragment2, { children: [
       valueElement,
       sliderElement
     ] }),
-    right: /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    right: /* @__PURE__ */ jsxs7(Fragment2, { children: [
       sliderElement,
       valueElement
     ] })
@@ -1525,7 +1611,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 // src/components/range-slider.tsx
 import * as React17 from "react";
 import * as SliderPrimitive2 from "@radix-ui/react-slider";
-import { jsx as jsx17, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var RangeSlider = React17.forwardRef(({
   className,
   min = 0,
@@ -1560,18 +1646,18 @@ var RangeSlider = React17.forwardRef(({
   };
   const minValue = internalValue[0];
   const maxValue = internalValue[1];
-  return /* @__PURE__ */ jsxs7("div", { className: cn("w-full", className), children: [
-    showValues && valuePosition === "top" && /* @__PURE__ */ jsxs7("div", { className: "flex justify-between mb-2", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-start", children: [
+  return /* @__PURE__ */ jsxs8("div", { className: cn("w-full", className), children: [
+    showValues && valuePosition === "top" && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mb-2", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: minLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(minValue) })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-end", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: maxLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(maxValue) })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       SliderPrimitive2.Root,
       {
         ref,
@@ -1604,17 +1690,17 @@ var RangeSlider = React17.forwardRef(({
         ]
       }
     ),
-    showValues && valuePosition === "bottom" && /* @__PURE__ */ jsxs7("div", { className: "flex justify-between mt-2", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-start", children: [
+    showValues && valuePosition === "bottom" && /* @__PURE__ */ jsxs8("div", { className: "flex justify-between mt-2", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-start", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: minLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(minValue) })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-end", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-end", children: [
         /* @__PURE__ */ jsx17("span", { className: "text-xs text-muted-foreground", children: maxLabel }),
         /* @__PURE__ */ jsx17("span", { className: "text-sm font-semibold text-accent", children: formatValue(maxValue) })
       ] })
     ] }),
-    showValues && /* @__PURE__ */ jsx17("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxs7("span", { className: "text-xs text-muted-foreground", children: [
+    showValues && /* @__PURE__ */ jsx17("div", { className: "flex justify-center mt-1", children: /* @__PURE__ */ jsxs8("span", { className: "text-xs text-muted-foreground", children: [
       "Range: ",
       formatValue(minValue),
       " - ",
@@ -1722,7 +1808,7 @@ Badge.displayName = "Badge";
 
 // src/components/chip.tsx
 import * as React20 from "react";
-import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs9 } from "react/jsx-runtime";
 var filledColorClasses = {
   default: "bg-muted text-foreground",
   primary: "bg-accent text-accent-foreground",
@@ -1764,7 +1850,7 @@ var Chip = React20.forwardRef(
   }, ref) => {
     const isClickable = clickable || !!onClick;
     const content = label ?? children;
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs9(
       "div",
       {
         ref,
@@ -1843,7 +1929,7 @@ Separator.displayName = "Separator";
 // src/components/accordion.tsx
 import * as React22 from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
-import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
 var Accordion = AccordionPrimitive.Root;
 var AccordionItem = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   AccordionPrimitive.Item,
@@ -1857,7 +1943,7 @@ var AccordionItem = React22.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs9(
+var AccordionTrigger = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx22(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs10(
   AccordionPrimitive.Trigger,
   {
     ref,
@@ -1907,7 +1993,7 @@ AccordionContent.displayName = "AccordionContent";
 // src/components/select/index.tsx
 import * as React23 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
 var ChevronDownIcon = () => /* @__PURE__ */ jsx23(
   "svg",
   {
@@ -1956,7 +2042,7 @@ var CheckIcon = () => /* @__PURE__ */ jsx23(
 var Select = SelectPrimitive.Root;
 var SelectGroup = SelectPrimitive.Group;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
+var SelectTrigger = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2004,7 +2090,7 @@ var SelectScrollDownButton = React23.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs10(
+var SelectContent = React23.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs11(
   SelectPrimitive.Content,
   {
     ref,
@@ -2047,7 +2133,7 @@ var SelectLabel = React23.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
+var SelectItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   SelectPrimitive.Item,
   {
     ref,
@@ -2111,7 +2197,7 @@ NativeSelectOption.displayName = "NativeSelectOption";
 // src/components/dialog/index.tsx
 import * as React24 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "react/jsx-runtime";
 var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
@@ -2129,9 +2215,9 @@ var DialogOverlay = React24.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React24.forwardRef(({ className, children, hideCloseButton = false, size = "lg", ...props }, ref) => /* @__PURE__ */ jsxs11(DialogPortal, { children: [
+var DialogContent = React24.forwardRef(({ className, children, hideCloseButton = false, size = "lg", ...props }, ref) => /* @__PURE__ */ jsxs12(DialogPortal, { children: [
   /* @__PURE__ */ jsx24(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs11(
+  /* @__PURE__ */ jsxs12(
     DialogPrimitive.Content,
     {
       ref,
@@ -2152,8 +2238,8 @@ var DialogContent = React24.forwardRef(({ className, children, hideCloseButton =
       ...props,
       children: [
         children,
-        !hideCloseButton && /* @__PURE__ */ jsxs11(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsxs11(
+        !hideCloseButton && /* @__PURE__ */ jsxs12(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground", children: [
+          /* @__PURE__ */ jsxs12(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -2234,7 +2320,7 @@ var DialogNamespace = Object.assign(Dialog, {
 // src/components/alert-dialog.tsx
 import * as React25 from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "react/jsx-runtime";
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -2275,23 +2361,23 @@ var variantStyles = {
   }
 };
 var VariantIcons = {
-  default: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  default: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "M12 16v-4M12 8h.01" })
   ] }),
-  destructive: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  destructive: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "m15 9-6 6M9 9l6 6" })
   ] }),
-  success: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  success: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "m9 12 2 2 4-4" })
   ] }),
-  warning: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  warning: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
     /* @__PURE__ */ jsx25("path", { d: "M12 9v4M12 17h.01" })
   ] }),
-  info: ({ className }) => /* @__PURE__ */ jsxs12("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  info: ({ className }) => /* @__PURE__ */ jsxs13("svg", { className, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
     /* @__PURE__ */ jsx25("circle", { cx: "12", cy: "12", r: "10" }),
     /* @__PURE__ */ jsx25("path", { d: "M12 16v-4M12 8h.01" })
   ] })
@@ -2299,7 +2385,7 @@ var VariantIcons = {
 var AlertDialogContent = React25.forwardRef(({ className, variant = "default", showIcon = true, children, ...props }, ref) => {
   const IconComponent = VariantIcons[variant];
   const styles = variantStyles[variant];
-  return /* @__PURE__ */ jsxs12(AlertDialogPortal, { children: [
+  return /* @__PURE__ */ jsxs13(AlertDialogPortal, { children: [
     /* @__PURE__ */ jsx25(AlertDialogOverlay, {}),
     /* @__PURE__ */ jsx25(
       AlertDialogPrimitive.Content,
@@ -2318,7 +2404,7 @@ var AlertDialogContent = React25.forwardRef(({ className, variant = "default", s
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsxs12("div", { className: "flex gap-4 items-start", children: [
+        children: /* @__PURE__ */ jsxs13("div", { className: "flex gap-4 items-start", children: [
           showIcon && /* @__PURE__ */ jsx25("div", { className: cn("shrink-0 mt-1", styles.icon), children: /* @__PURE__ */ jsx25(IconComponent, { className: "h-6 w-6" }) }),
           /* @__PURE__ */ jsx25("div", { className: "flex-1", children })
         ] })
@@ -2436,7 +2522,7 @@ Spinner.displayName = "Spinner";
 
 // src/components/alert.tsx
 import * as React27 from "react";
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
 var variants = {
   default: {
     iconBg: "bg-zinc-900",
@@ -2480,7 +2566,7 @@ var CheckIcon2 = ({ className }) => /* @__PURE__ */ jsx27(
     children: /* @__PURE__ */ jsx27("path", { d: "m5 13 4 4L19 7" })
   }
 );
-var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs13(
+var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs14(
   "svg",
   {
     className,
@@ -2494,7 +2580,7 @@ var InfoIcon = ({ className }) => /* @__PURE__ */ jsxs13(
     ]
   }
 );
-var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs13(
+var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs14(
   "svg",
   {
     className,
@@ -2508,7 +2594,7 @@ var WarningIcon = ({ className }) => /* @__PURE__ */ jsxs13(
     ]
   }
 );
-var XCircleIcon = ({ className }) => /* @__PURE__ */ jsxs13(
+var XCircleIcon = ({ className }) => /* @__PURE__ */ jsxs14(
   "svg",
   {
     className,
@@ -2576,7 +2662,7 @@ var Alert = ({
     onClose?.();
   };
   if (!visible) return null;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     "div",
     {
       role: "alert",
@@ -2652,7 +2738,7 @@ var AlertDescription = ({
 // src/components/tabs.tsx
 import * as React28 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
 var Tabs = TabsPrimitive.Root;
 var TabsList = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx28(
   TabsPrimitive.List,
@@ -2709,7 +2795,7 @@ var UnderlineTabsList = React28.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 UnderlineTabsList.displayName = "UnderlineTabsList";
-var UnderlineTabsTrigger = React28.forwardRef(({ className, children, count, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var UnderlineTabsTrigger = React28.forwardRef(({ className, children, count, ...props }, ref) => /* @__PURE__ */ jsxs15(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -2772,7 +2858,7 @@ var VerticalTabsList = React28.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 VerticalTabsList.displayName = "VerticalTabsList";
-var VerticalTabsTrigger = React28.forwardRef(({ className, children, icon, ...props }, ref) => /* @__PURE__ */ jsxs14(
+var VerticalTabsTrigger = React28.forwardRef(({ className, children, icon, ...props }, ref) => /* @__PURE__ */ jsxs15(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -2825,7 +2911,7 @@ VerticalTabsGroupLabel.displayName = "VerticalTabsGroupLabel";
 // src/components/tooltip.tsx
 import * as React29 from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
 var TooltipProvider = TooltipPrimitive.Provider;
 var TooltipRoot = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -2839,7 +2925,7 @@ var TooltipArrow = React29.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
-var TooltipContent = React29.forwardRef(({ className, sideOffset = 4, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+var TooltipContent = React29.forwardRef(({ className, sideOffset = 4, showArrow = false, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
   TooltipPrimitive.Content,
   {
     ref,
@@ -2878,7 +2964,7 @@ var Tooltip = React29.forwardRef(
     if (disabled) {
       return /* @__PURE__ */ jsx29(Fragment3, { children });
     }
-    return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsx29(TooltipProvider, { children: /* @__PURE__ */ jsxs16(
       TooltipRoot,
       {
         delayDuration,
@@ -2905,7 +2991,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/progress.tsx
 import * as React30 from "react";
-import { jsx as jsx30, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 var linearSizeClasses = {
   sm: "h-1",
   md: "h-2",
@@ -2930,7 +3016,7 @@ var LinearProgress = React30.forwardRef(
     ...props
   }, ref) => {
     const isIndeterminate = value === void 0;
-    return /* @__PURE__ */ jsxs16("div", { ref, className: cn("w-full", className), ...props, children: [
+    return /* @__PURE__ */ jsxs17("div", { ref, className: cn("w-full", className), ...props, children: [
       /* @__PURE__ */ jsx30(
         "div",
         {
@@ -2991,7 +3077,7 @@ var CircularProgress = React30.forwardRef(
     const radius = (sizeValue - thickness) / 2;
     const circumference = 2 * Math.PI * radius;
     const strokeDashoffset = isIndeterminate ? 0 : circumference - Math.min(100, Math.max(0, value)) / 100 * circumference;
-    return /* @__PURE__ */ jsxs16(
+    return /* @__PURE__ */ jsxs17(
       "div",
       {
         ref,
@@ -3003,7 +3089,7 @@ var CircularProgress = React30.forwardRef(
         "aria-valuemax": 100,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs16(
+          /* @__PURE__ */ jsxs17(
             "svg",
             {
               className: cn(isIndeterminate && "animate-spin"),
@@ -3155,7 +3241,7 @@ var TableNamespace = Object.assign(Table, {
 
 // src/components/avatar.tsx
 import * as React32 from "react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 var sizeClasses4 = {
   xs: "h-6 w-6 text-xs",
   sm: "h-8 w-8 text-sm",
@@ -3210,7 +3296,7 @@ var Avatar = React32.forwardRef(
           }
         ) : fallbackElement ? fallbackElement : fallback ? /* @__PURE__ */ jsx32("span", { className: "font-medium", children: getInitials(fallback) }) : (
           // Default user icon
-          /* @__PURE__ */ jsxs17(
+          /* @__PURE__ */ jsxs18(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -3238,7 +3324,7 @@ var AvatarGroup = React32.forwardRef(
     const childArray = React32.Children.toArray(children);
     const visibleChildren = max ? childArray.slice(0, max) : childArray;
     const remainingCount = max ? childArray.length - max : 0;
-    return /* @__PURE__ */ jsxs17(
+    return /* @__PURE__ */ jsxs18(
       "div",
       {
         ref,
@@ -3274,7 +3360,7 @@ AvatarGroup.displayName = "AvatarGroup";
 
 // src/components/skeleton.tsx
 import * as React33 from "react";
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 var Skeleton = React33.forwardRef(
   ({
     variant = "text",
@@ -3380,7 +3466,7 @@ var SkeletonCard = React33.forwardRef(
     className,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ jsxs18(
+    return /* @__PURE__ */ jsxs19(
       "div",
       {
         ref,
@@ -3395,7 +3481,7 @@ var SkeletonCard = React33.forwardRef(
               animation
             }
           ),
-          /* @__PURE__ */ jsxs18("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxs19("div", { className: "space-y-2", children: [
             /* @__PURE__ */ jsx33(Skeleton, { variant: "text", width: "60%", animation }),
             /* @__PURE__ */ jsx33(SkeletonText, { lines, animation })
           ] })
@@ -3430,7 +3516,7 @@ SkeletonTableRow.displayName = "SkeletonTableRow";
 
 // src/components/pagination.tsx
 import * as React34 from "react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 var Pagination = React34.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx34(
     "nav",
@@ -3468,7 +3554,7 @@ var PaginationLink = React34.forwardRef(
   )
 );
 PaginationLink.displayName = "PaginationLink";
-var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs19(
+var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
   Button,
   {
     ref,
@@ -3498,7 +3584,7 @@ var PaginationPrevious = React34.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 PaginationPrevious.displayName = "PaginationPrevious";
-var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs19(
+var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
   Button,
   {
     ref,
@@ -3528,7 +3614,7 @@ var PaginationNext = React34.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 PaginationNext.displayName = "PaginationNext";
-var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs19(
+var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs20(
   "span",
   {
     ref,
@@ -3536,7 +3622,7 @@ var PaginationEllipsis = React34.forwardRef(({ className, ...props }, ref) => /*
     className: cn("flex h-9 w-9 items-center justify-center", className),
     ...props,
     children: [
-      /* @__PURE__ */ jsxs19(
+      /* @__PURE__ */ jsxs20(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -3572,7 +3658,8 @@ var PaginationNamespace = Object.assign(Pagination, {
 
 // src/components/combobox/index.tsx
 import * as React35 from "react";
-import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Fragment as Fragment4, jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 function isMultipleProps(props) {
   return props.multiple === true;
 }
@@ -3597,6 +3684,71 @@ function Adornment({
   }
   return /* @__PURE__ */ jsx35("span", { className: cn("shrink-0 pointer-events-none opacity-50", className), children });
 }
+function OptionItem({
+  option,
+  isSelected,
+  isMultiple,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs21(
+    "button",
+    {
+      type: "button",
+      disabled: option.disabled,
+      onClick: onSelect,
+      className: cn(
+        "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+        "hover:bg-muted hover:text-foreground",
+        "focus:bg-muted focus:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        isSelected && "bg-muted"
+      ),
+      children: [
+        /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: isMultiple ? /* @__PURE__ */ jsx35(
+          "div",
+          {
+            className: cn(
+              "flex h-4 w-4 items-center justify-center rounded border border-input",
+              isSelected && "bg-accent border-accent"
+            ),
+            children: isSelected && /* @__PURE__ */ jsx35(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "white",
+                strokeWidth: "3",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "h-3 w-3",
+                children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
+              }
+            )
+          }
+        ) : isSelected && /* @__PURE__ */ jsx35(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: "24",
+            height: "24",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "h-4 w-4",
+            children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) }),
+        option.label
+      ]
+    }
+  );
+}
 var Combobox = React35.forwardRef(
   (props, ref) => {
     const {
@@ -3611,7 +3763,9 @@ var Combobox = React35.forwardRef(
       startAdornment,
       onStartAdornmentClick,
       endAdornment,
-      onEndAdornmentClick
+      onEndAdornmentClick,
+      virtual = false,
+      virtualItemHeight = 36
     } = props;
     const labelKey = props.labelKey ?? "label";
     const valueKey = props.valueKey ?? "value";
@@ -3649,6 +3803,7 @@ var Combobox = React35.forwardRef(
     const [internalSearch, setInternalSearch] = React35.useState("");
     const containerRef = React35.useRef(null);
     const searchInputRef = React35.useRef(null);
+    const listContainerRef = React35.useRef(null);
     const isMultiple = isMultipleProps(props);
     const selectAll = isMultiple ? props.selectAll ?? false : false;
     const selectAllLabel = isMultiple ? props.selectAllLabel ?? "Select all" : "Select all";
@@ -3674,6 +3829,12 @@ var Combobox = React35.forwardRef(
       [normalizedOptions]
     );
     const allSelected = isMultiple && selectableOptions.length > 0 && selectableOptions.every((option) => selectedValueKeys.has(option.value));
+    const rowVirtualizer = useVirtualizer({
+      count: virtual ? filteredOptions.length : 0,
+      getScrollElement: () => listContainerRef.current,
+      estimateSize: () => virtualItemHeight,
+      overscan: 5
+    });
     const handleSingleSelect = (option) => {
       if (!isMultiple) {
         if (props.value === void 0) {
@@ -3762,8 +3923,8 @@ var Combobox = React35.forwardRef(
     const maxDisplayItems = isMultiple ? props.maxDisplayItems ?? 3 : 0;
     const displayedOptions = selectedOptions.slice(0, maxDisplayItems);
     const remainingCount = selectedOptions.length - maxDisplayItems;
-    return /* @__PURE__ */ jsxs20("div", { ref: containerRef, className: "relative", children: [
-      /* @__PURE__ */ jsxs20(
+    return /* @__PURE__ */ jsxs21("div", { ref: containerRef, className: "relative", children: [
+      /* @__PURE__ */ jsxs21(
         "button",
         {
           type: "button",
@@ -3781,8 +3942,8 @@ var Combobox = React35.forwardRef(
           ),
           children: [
             startAdornment && /* @__PURE__ */ jsx35(Adornment, { onClick: onStartAdornmentClick, className: "mr-1.5", children: startAdornment }),
-            isMultiple ? /* @__PURE__ */ jsx35("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs20(Fragment4, { children: [
-              displayedOptions.map((option) => /* @__PURE__ */ jsxs20(
+            isMultiple ? /* @__PURE__ */ jsx35("div", { className: "flex flex-1 flex-wrap items-center gap-1", children: selectedOptions.length === 0 ? /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground", children: placeholder }) : /* @__PURE__ */ jsxs21(Fragment4, { children: [
+              displayedOptions.map((option) => /* @__PURE__ */ jsxs21(
                 "span",
                 {
                   className: "inline-flex items-center gap-1 rounded-md bg-muted px-2 py-0.5 text-xs font-medium",
@@ -3815,13 +3976,13 @@ var Combobox = React35.forwardRef(
                 },
                 getOptionValue(option)
               )),
-              remainingCount > 0 && /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground", children: [
+              remainingCount > 0 && /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground", children: [
                 "+",
                 remainingCount,
                 " more"
               ] })
             ] }) }) : /* @__PURE__ */ jsx35("span", { className: cn("flex-1", !singleValue && "text-muted-foreground"), children: singleValue ? getOptionLabel(singleValue) : placeholder }),
-            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-1", children: [
               isMultiple && selectedOptions.length > 0 && /* @__PURE__ */ jsx35(
                 "button",
                 {
@@ -3895,9 +4056,9 @@ var Combobox = React35.forwardRef(
           ]
         }
       ),
-      open && /* @__PURE__ */ jsxs20("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
-        /* @__PURE__ */ jsxs20("div", { className: "flex items-center border-b border-border px-3", children: [
-          /* @__PURE__ */ jsxs20(
+      open && /* @__PURE__ */ jsxs21("div", { className: "absolute z-50 mt-1 w-full overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md", children: [
+        /* @__PURE__ */ jsxs21("div", { className: "flex items-center border-b border-border px-3", children: [
+          /* @__PURE__ */ jsxs21(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
@@ -3935,117 +4096,104 @@ var Combobox = React35.forwardRef(
             }
           )
         ] }),
-        /* @__PURE__ */ jsx35("div", { className: "max-h-[300px] overflow-y-auto p-1", children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsxs20(Fragment4, { children: [
-          isMultiple && selectAll && /* @__PURE__ */ jsxs20(
-            "button",
-            {
-              type: "button",
-              onClick: handleSelectAll,
-              className: cn(
-                "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-                "hover:bg-muted hover:text-foreground",
-                "focus:bg-muted focus:text-foreground",
-                allSelected && "bg-muted"
-              ),
-              children: [
-                /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx35(
-                  "div",
-                  {
-                    className: cn(
-                      "flex h-4 w-4 items-center justify-center rounded border border-input",
-                      allSelected && "bg-accent border-accent"
-                    ),
-                    children: allSelected && /* @__PURE__ */ jsx35(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "24",
-                        height: "24",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "white",
-                        strokeWidth: "3",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        className: "h-3 w-3",
-                        children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
-                      }
-                    )
-                  }
-                ) }),
-                selectAllLabel
-              ]
-            }
-          ),
-          filteredOptions.map((option) => {
-            const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
-            return /* @__PURE__ */ jsxs20(
-              "button",
-              {
-                type: "button",
-                disabled: option.disabled,
-                onClick: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw),
-                className: cn(
-                  "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
-                  "hover:bg-muted hover:text-foreground",
-                  "focus:bg-muted focus:text-foreground",
-                  "disabled:pointer-events-none disabled:opacity-50",
-                  isSelected && "bg-muted"
-                ),
-                children: [
-                  /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: isMultiple ? (
-                    // Checkbox for multi-select
-                    /* @__PURE__ */ jsx35(
+        isMultiple && selectAll && filteredOptions.length > 0 && /* @__PURE__ */ jsx35("div", { className: "px-1 pt-1", children: /* @__PURE__ */ jsxs21(
+          "button",
+          {
+            type: "button",
+            onClick: handleSelectAll,
+            className: cn(
+              "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+              "hover:bg-muted hover:text-foreground",
+              "focus:bg-muted focus:text-foreground",
+              allSelected && "bg-muted"
+            ),
+            children: [
+              /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ jsx35(
+                "div",
+                {
+                  className: cn(
+                    "flex h-4 w-4 items-center justify-center rounded border border-input",
+                    allSelected && "bg-accent border-accent"
+                  ),
+                  children: allSelected && /* @__PURE__ */ jsx35(
+                    "svg",
+                    {
+                      xmlns: "http://www.w3.org/2000/svg",
+                      width: "24",
+                      height: "24",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "white",
+                      strokeWidth: "3",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      className: "h-3 w-3",
+                      children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
+                    }
+                  )
+                }
+              ) }),
+              selectAllLabel
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx35(
+          "div",
+          {
+            ref: listContainerRef,
+            className: "max-h-[300px] overflow-y-auto p-1",
+            children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx35("div", { className: "py-6 text-center text-sm text-muted-foreground", children: emptyMessage }) : virtual ? (
+              // ── Virtual list ──────────────────────────────────────────
+              /* @__PURE__ */ jsx35(
+                "div",
+                {
+                  style: { height: rowVirtualizer.getTotalSize(), position: "relative" },
+                  children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                    const option = filteredOptions[virtualRow.index];
+                    const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
+                    return /* @__PURE__ */ jsx35(
                       "div",
                       {
-                        className: cn(
-                          "flex h-4 w-4 items-center justify-center rounded border border-input",
-                          isSelected && "bg-accent border-accent"
-                        ),
-                        children: isSelected && /* @__PURE__ */ jsx35(
-                          "svg",
+                        style: {
+                          position: "absolute",
+                          top: virtualRow.start,
+                          left: 0,
+                          right: 0,
+                          height: virtualRow.size
+                        },
+                        children: /* @__PURE__ */ jsx35(
+                          OptionItem,
                           {
-                            xmlns: "http://www.w3.org/2000/svg",
-                            width: "24",
-                            height: "24",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            stroke: "white",
-                            strokeWidth: "3",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            className: "h-3 w-3",
-                            children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
+                            option,
+                            isSelected,
+                            isMultiple,
+                            onSelect: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw)
                           }
                         )
-                      }
-                    )
-                  ) : (
-                    // Checkmark for single-select
-                    isSelected && /* @__PURE__ */ jsx35(
-                      "svg",
-                      {
-                        xmlns: "http://www.w3.org/2000/svg",
-                        width: "24",
-                        height: "24",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "currentColor",
-                        strokeWidth: "2",
-                        strokeLinecap: "round",
-                        strokeLinejoin: "round",
-                        className: "h-4 w-4",
-                        children: /* @__PURE__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
-                      }
-                    )
-                  ) }),
-                  option.label
-                ]
-              },
-              option.value
-            );
-          })
-        ] }) })
+                      },
+                      virtualRow.key
+                    );
+                  })
+                }
+              )
+            ) : (
+              // ── Normal list ───────────────────────────────────────────
+              filteredOptions.map((option) => {
+                const isSelected = isMultiple ? selectedValueKeys.has(option.value) : option.value === singleValueKey;
+                return /* @__PURE__ */ jsx35(
+                  OptionItem,
+                  {
+                    option,
+                    isSelected,
+                    isMultiple,
+                    onSelect: () => isMultiple ? handleMultiSelect(option.raw) : handleSingleSelect(option.raw)
+                  },
+                  option.value
+                );
+              })
+            )
+          }
+        )
       ] })
     ] });
   }
@@ -4062,8 +4210,8 @@ import {
   getFilteredRowModel,
   flexRender
 } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 function convertColumns(columns, checkboxSelection) {
   const tanstackColumns = [];
   if (checkboxSelection) {
@@ -4250,8 +4398,8 @@ var ColumnVisibilityDropdown = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const allColumns = table.getAllLeafColumns().filter((col) => col.id !== "__select__");
-  return /* @__PURE__ */ jsxs21("div", { className: "relative", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs22(
       Button,
       {
         variant: "outline",
@@ -4259,7 +4407,7 @@ var ColumnVisibilityDropdown = ({
         onClick: () => setOpen(!open),
         className: "h-9 gap-2",
         children: [
-          /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
             /* @__PURE__ */ jsx36("path", { d: "M12 3v18M3 12h18" }),
             /* @__PURE__ */ jsx36("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
             /* @__PURE__ */ jsx36("path", { d: "M3 9h18M3 15h18M9 3v18M15 3v18" })
@@ -4268,12 +4416,12 @@ var ColumnVisibilityDropdown = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs21("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
+    open && /* @__PURE__ */ jsxs22("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[180px] rounded-md border border-border bg-popover p-2 shadow-md", children: [
       /* @__PURE__ */ jsx36("div", { className: "text-xs font-medium text-foreground mb-2 px-2", children: "Show/Hide Columns" }),
       /* @__PURE__ */ jsx36("div", { className: "max-h-[300px] overflow-auto", children: allColumns.map((column) => {
         const meta = column.columnDef.meta;
         const headerName = meta?.headerName || column.id;
-        return /* @__PURE__ */ jsxs21(
+        return /* @__PURE__ */ jsxs22(
           "label",
           {
             className: "flex items-center gap-2 px-2 py-1.5 hover:bg-muted rounded cursor-pointer",
@@ -4291,7 +4439,7 @@ var ColumnVisibilityDropdown = ({
           column.id
         );
       }) }),
-      /* @__PURE__ */ jsxs21("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
+      /* @__PURE__ */ jsxs22("div", { className: "border-t border-border mt-2 pt-2 flex gap-2 px-2", children: [
         /* @__PURE__ */ jsx36(
           Button,
           {
@@ -4352,8 +4500,8 @@ var DataGridPagination = ({
   };
   const startRow = currentPage * pageSize + 1;
   const endRow = Math.min((currentPage + 1) * pageSize, totalRows);
-  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
-    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 text-xs text-muted-foreground whitespace-nowrap", children: [
       /* @__PURE__ */ jsx36("span", { children: "Rows per page:" }),
       /* @__PURE__ */ jsx36(
         "select",
@@ -4365,14 +4513,14 @@ var DataGridPagination = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
+    /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
       startRow,
       "-",
       endRow,
       " of ",
       totalRows
     ] }),
-    /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs21(PaginationContent, { children: [
+    /* @__PURE__ */ jsx36(PaginationNamespace, { className: "mx-0 w-auto", children: /* @__PURE__ */ jsxs22(PaginationContent, { children: [
       /* @__PURE__ */ jsx36(PaginationItem, { children: /* @__PURE__ */ jsx36(
         Button,
         {
@@ -4434,6 +4582,7 @@ var ExportDropdown = ({
   onExport,
   rows,
   columns,
+  pinnedRows,
   fileName = "data-export"
 }) => {
   const [open, setOpen] = React36.useState(false);
@@ -4451,7 +4600,12 @@ var ExportDropdown = ({
     const visibleColumns = columns.filter((col) => !col.hide && !col.disableExport && !col.hideExport);
     const headers = visibleColumns.map((col) => col.headerName || col.field);
     const csvRows = [headers.join(",")];
-    rows.forEach((row) => {
+    const allRows = [
+      ...pinnedRows?.top || [],
+      ...rows,
+      ...pinnedRows?.bottom || []
+    ];
+    allRows.forEach((row) => {
       const values = visibleColumns.map((col) => {
         let value;
         if (col.valueGetter) {
@@ -4478,12 +4632,17 @@ var ExportDropdown = ({
   };
   const handleCustomExport = () => {
     if (onExport) {
-      onExport(rows, columns);
+      const allRows = [
+        ...pinnedRows?.top || [],
+        ...rows,
+        ...pinnedRows?.bottom || []
+      ];
+      onExport(allRows, columns);
     }
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs21("div", { className: "relative", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs22(
       Button,
       {
         variant: "outline",
@@ -4491,7 +4650,7 @@ var ExportDropdown = ({
         onClick: () => setOpen(!open),
         className: "h-9 gap-2",
         children: [
-          /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+          /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
             /* @__PURE__ */ jsx36("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
             /* @__PURE__ */ jsx36("polyline", { points: "7 10 12 15 17 10" }),
             /* @__PURE__ */ jsx36("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
@@ -4500,14 +4659,14 @@ var ExportDropdown = ({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs21("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
-      /* @__PURE__ */ jsxs21(
+    open && /* @__PURE__ */ jsxs22("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[140px] rounded-md border border-border bg-popover p-1 shadow-md", children: [
+      /* @__PURE__ */ jsxs22(
         "button",
         {
           className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: exportToCSV,
           children: [
-            /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ jsx36("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
               /* @__PURE__ */ jsx36("polyline", { points: "14 2 14 8 20 8" })
             ] }),
@@ -4515,13 +4674,13 @@ var ExportDropdown = ({
           ]
         }
       ),
-      onExport && /* @__PURE__ */ jsxs21(
+      onExport && /* @__PURE__ */ jsxs22(
         "button",
         {
           className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
           onClick: handleCustomExport,
           children: [
-            /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+            /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
               /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "3" }),
               /* @__PURE__ */ jsx36("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z" })
             ] }),
@@ -4547,7 +4706,7 @@ var MoreOptionsDropdown = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   if (options.length === 0) return null;
-  return /* @__PURE__ */ jsxs21("div", { className: "relative", ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "relative", ref: dropdownRef, children: [
     /* @__PURE__ */ jsx36(
       Button,
       {
@@ -4555,14 +4714,14 @@ var MoreOptionsDropdown = ({
         size: "icon",
         onClick: () => setOpen(!open),
         className: "h-9 w-9",
-        children: /* @__PURE__ */ jsxs21("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+        children: /* @__PURE__ */ jsxs22("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
           /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "12", r: "1" }),
           /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "5", r: "1" }),
           /* @__PURE__ */ jsx36("circle", { cx: "12", cy: "19", r: "1" })
         ] })
       }
     ),
-    open && /* @__PURE__ */ jsx36("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs21(
+    open && /* @__PURE__ */ jsx36("div", { className: "absolute right-0 top-full mt-1 z-50 min-w-[160px] rounded-md border border-border bg-popover p-1 shadow-md", children: options.map((option, index) => /* @__PURE__ */ jsxs22(
       "button",
       {
         className: "flex w-full items-center gap-2 rounded px-3 py-2 text-xs hover:bg-muted",
@@ -4591,12 +4750,13 @@ var DataGridToolbar = ({
   columns,
   onExport,
   exportFileName,
+  pinnedRows,
   customButtons,
   moreOptions = []
 }) => {
-  return /* @__PURE__ */ jsxs21("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
+  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border bg-background", children: [
     title && /* @__PURE__ */ jsx36("h3", { className: "text-lg font-semibold text-foreground", children: title }),
-    /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 ml-auto", children: [
+    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 ml-auto", children: [
       showQuickFilter && /* @__PURE__ */ jsx36(
         Input,
         {
@@ -4613,6 +4773,7 @@ var DataGridToolbar = ({
           onExport,
           rows,
           columns,
+          pinnedRows,
           fileName: exportFileName
         }
       ),
@@ -4836,7 +4997,7 @@ var VirtualizedTableBody = ({
   gridColumns
 }) => {
   const rows = table.getRowModel().rows;
-  const virtualizer = useVirtualizer({
+  const virtualizer = useVirtualizer2({
     count: rows.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => rowHeight,
@@ -4855,7 +5016,7 @@ var VirtualizedTableBody = ({
   }
   const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
   const paddingBottom = virtualRows.length > 0 ? virtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
-  return /* @__PURE__ */ jsxs21("tbody", { children: [
+  return /* @__PURE__ */ jsxs22("tbody", { children: [
     paddingTop > 0 && /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
       "td",
       {
@@ -5350,7 +5511,7 @@ function DataGrid({
     if (minHeight) containerStyle.minHeight = minHeight;
     if (maxHeight) containerStyle.maxHeight = maxHeight;
   }
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -5373,18 +5534,19 @@ function DataGrid({
             columns,
             onExport,
             exportFileName,
+            pinnedRows,
             customButtons,
             moreOptions
           }
         ),
-        /* @__PURE__ */ jsxs21(
+        /* @__PURE__ */ jsxs22(
           "div",
           {
             ref: tableContainerRef,
             className: "relative flex-1 overflow-auto",
             children: [
               loading && /* @__PURE__ */ jsx36("div", { className: "absolute inset-0 bg-background/80 flex items-center justify-center z-10", children: /* @__PURE__ */ jsx36(Spinner, { size: "lg" }) }),
-              /* @__PURE__ */ jsxs21("table", { className: "w-full border-separate border-spacing-0 table-fixed", children: [
+              /* @__PURE__ */ jsxs22("table", { className: "w-full border-separate border-spacing-0 table-fixed", children: [
                 /* @__PURE__ */ jsx36("colgroup", { children: table.getVisibleLeafColumns().map((column) => {
                   const colWidth = columnWidths.get(column.id);
                   return /* @__PURE__ */ jsx36(
@@ -5399,7 +5561,7 @@ function DataGrid({
                     column.id
                   );
                 }) }),
-                /* @__PURE__ */ jsxs21("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
+                /* @__PURE__ */ jsxs22("thead", { className: "sticky top-0 z-[3] bg-muted", children: [
                   columnGroupingModel && columnGroupingModel.length > 0 && /* @__PURE__ */ jsx36(
                     ColumnGroupHeader,
                     {
@@ -5419,7 +5581,7 @@ function DataGrid({
                     const colWidth = columnWidths.get(header.column.id);
                     const effectiveWidth = colWidth?.width || header.getSize();
                     const pinnedInfo = pinnedColumnOffsets?.get(header.column.id);
-                    return /* @__PURE__ */ jsxs21(
+                    return /* @__PURE__ */ jsxs22(
                       "th",
                       {
                         className: cn(
@@ -5446,7 +5608,7 @@ function DataGrid({
                         },
                         onClick: header.column.getToggleSortingHandler(),
                         children: [
-                          /* @__PURE__ */ jsxs21("div", { className: cn(
+                          /* @__PURE__ */ jsxs22("div", { className: cn(
                             "flex items-center gap-1 truncate",
                             align === "center" && "justify-center",
                             align === "right" && "justify-end"
@@ -5547,7 +5709,7 @@ function DataGrid({
             paginationMode
           }
         ),
-        effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs21("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
+        effectiveVirtualized && !hideFooter && /* @__PURE__ */ jsx36("div", { className: "flex items-center justify-end gap-4 px-4 py-3 border-t border-border bg-background", children: /* @__PURE__ */ jsxs22("span", { className: "text-xs text-muted-foreground whitespace-nowrap", children: [
           table.getFilteredRowModel().rows.length,
           " total rows (virtualized)"
         ] }) })
@@ -5559,9 +5721,17 @@ DataGrid.displayName = "DataGrid";
 
 // src/components/list.tsx
 import * as React37 from "react";
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 var List2 = React37.forwardRef(
-  ({ dividers = false, dense = false, clickable = false, className, ...props }, ref) => /* @__PURE__ */ jsx37(
+  ({
+    dividers = false,
+    dense = false,
+    clickable = false,
+    disablePadding = false,
+    className,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx37(
     "ul",
     {
       ref,
@@ -5569,7 +5739,7 @@ var List2 = React37.forwardRef(
       "data-dividers": dividers,
       "data-dense": dense,
       "data-clickable": clickable,
-      className: cn("flex flex-col", className),
+      className: cn("flex flex-col", !disablePadding && "py-1", className),
       ...props
     }
   )
@@ -5583,10 +5753,13 @@ var ListItem = React37.forwardRef(
     leading,
     trailing,
     secondaryAction,
+    inset = false,
+    disableGutters = false,
+    alignItems = "center",
     className,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ jsxs22(
+  }, ref) => /* @__PURE__ */ jsxs23(
     "li",
     {
       ref,
@@ -5595,10 +5768,13 @@ var ListItem = React37.forwardRef(
       "aria-selected": selected,
       "aria-disabled": disabled,
       className: cn(
-        "flex items-center gap-3 px-4 py-3",
+        "relative flex gap-3 py-2",
+        alignItems === "center" ? "items-center" : "items-start",
+        !disableGutters && "px-4",
         "border-b border-border last:border-b-0",
         '[ul[data-dividers="false"]_&]:border-b-0',
-        '[ul[data-dense="true"]_&]:py-2 [ul[data-dense="true"]_&]:px-3',
+        '[ul[data-dense="true"]_&]:py-1',
+        inset && "pl-14",
         clickable && !disabled && [
           "cursor-pointer",
           "hover:bg-muted",
@@ -5607,43 +5783,115 @@ var ListItem = React37.forwardRef(
         '[ul[data-clickable="true"]_&]:cursor-pointer [ul[data-clickable="true"]_&]:hover:bg-muted',
         selected && "bg-muted",
         disabled && "opacity-50 cursor-not-allowed",
+        secondaryAction && "pr-12",
         className
       ),
       ...props,
       children: [
-        leading && /* @__PURE__ */ jsx37("div", { className: "shrink-0", children: leading }),
+        leading && /* @__PURE__ */ jsx37(
+          "div",
+          {
+            className: cn(
+              "shrink-0",
+              alignItems === "center" ? "self-center" : "self-start mt-0.5"
+            ),
+            children: leading
+          }
+        ),
         /* @__PURE__ */ jsx37("div", { className: "flex-1 min-w-0", children }),
         trailing && /* @__PURE__ */ jsx37("div", { className: "shrink-0", children: trailing }),
-        secondaryAction && /* @__PURE__ */ jsx37("div", { className: "shrink-0 ml-2", children: secondaryAction })
+        secondaryAction && /* @__PURE__ */ jsx37("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 shrink-0", children: secondaryAction })
       ]
     }
   )
 );
 ListItem.displayName = "ListItem";
+var ListItemButton = React37.forwardRef(
+  ({
+    selected = false,
+    dense = false,
+    disableGutters = false,
+    divider = false,
+    alignItems = "center",
+    autoFocus = false,
+    disabled,
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx37(
+    "button",
+    {
+      ref,
+      type: "button",
+      autoFocus,
+      disabled,
+      "aria-selected": selected,
+      className: cn(
+        "relative flex w-full gap-3 py-2 text-left text-sm",
+        "transition-colors",
+        alignItems === "center" ? "items-center" : "items-start",
+        !disableGutters && "px-4",
+        dense ? "py-1" : "py-2",
+        '[ul[data-dense="true"]_&]:py-1',
+        divider && "border-b border-border",
+        "hover:bg-muted",
+        "focus:outline-none focus-visible:bg-muted",
+        selected && "bg-muted text-foreground",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      ...props,
+      children
+    }
+  )
+);
+ListItemButton.displayName = "ListItemButton";
 var ListItemText = React37.forwardRef(
-  ({ primary, secondary, noWrap = false, className, children, ...props }, ref) => /* @__PURE__ */ jsxs22("div", { ref, className: cn("min-w-0", className), ...props, children: [
-    primary && /* @__PURE__ */ jsx37(
-      "div",
-      {
-        className: cn(
-          "text-sm font-medium text-foreground",
-          noWrap && "truncate"
+  ({
+    primary,
+    secondary,
+    noWrap = false,
+    inset = false,
+    primaryTypographyProps,
+    secondaryTypographyProps,
+    className,
+    children,
+    ...props
+  }, ref) => /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      ref,
+      className: cn("min-w-0 flex-1", inset && "pl-10", className),
+      ...props,
+      children: [
+        primary && /* @__PURE__ */ jsx37(
+          "p",
+          {
+            ...primaryTypographyProps,
+            className: cn(
+              "text-sm font-medium text-foreground leading-snug",
+              noWrap && "truncate",
+              primaryTypographyProps?.className
+            ),
+            children: primary
+          }
         ),
-        children: primary
-      }
-    ),
-    secondary && /* @__PURE__ */ jsx37(
-      "div",
-      {
-        className: cn(
-          "text-sm text-muted-foreground",
-          noWrap && "truncate"
+        secondary && /* @__PURE__ */ jsx37(
+          "p",
+          {
+            ...secondaryTypographyProps,
+            className: cn(
+              "text-xs text-muted-foreground leading-snug mt-0.5",
+              noWrap && "truncate",
+              secondaryTypographyProps?.className
+            ),
+            children: secondary
+          }
         ),
-        children: secondary
-      }
-    ),
-    !primary && !secondary && children
-  ] })
+        !primary && !secondary && children
+      ]
+    }
+  )
 );
 ListItemText.displayName = "ListItemText";
 var ListItemIcon = React37.forwardRef(
@@ -5651,7 +5899,7 @@ var ListItemIcon = React37.forwardRef(
     "div",
     {
       ref,
-      className: cn("shrink-0 text-muted-foreground", className),
+      className: cn("shrink-0 flex items-center justify-center text-muted-foreground w-5", className),
       ...props
     }
   )
@@ -5662,19 +5910,23 @@ var ListItemAvatar = React37.forwardRef(
 );
 ListItemAvatar.displayName = "ListItemAvatar";
 var ListSubheader = React37.forwardRef(
-  ({ sticky = false, className, ...props }, ref) => /* @__PURE__ */ jsx37(
-    "li",
-    {
-      ref,
-      role: "presentation",
-      className: cn(
-        "px-4 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-background",
-        sticky && "sticky top-0 z-10",
-        className
-      ),
-      ...props
-    }
-  )
+  ({ disableSticky = false, disableGutters = false, sticky, className, ...props }, ref) => {
+    const isSticky = sticky !== void 0 ? sticky : !disableSticky;
+    return /* @__PURE__ */ jsx37(
+      "li",
+      {
+        ref,
+        role: "presentation",
+        className: cn(
+          "py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-background",
+          !disableGutters && "px-4",
+          isSticky && "sticky top-0 z-10",
+          className
+        ),
+        ...props
+      }
+    );
+  }
 );
 ListSubheader.displayName = "ListSubheader";
 var ListDivider = React37.forwardRef(
@@ -5683,16 +5935,57 @@ var ListDivider = React37.forwardRef(
     {
       ref,
       role: "separator",
-      className: cn(
-        "border-t border-border my-1",
-        inset && "ml-14",
-        className
-      ),
+      className: cn("border-t border-border my-1", inset && "ml-14", className),
       ...props
     }
   )
 );
 ListDivider.displayName = "ListDivider";
+function VirtualList({
+  items,
+  itemHeight = 48,
+  height = 400,
+  overscan = 5,
+  renderItem,
+  className
+}) {
+  const parentRef = React37.useRef(null);
+  const virtualizer = useVirtualizer3({
+    count: items.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => itemHeight,
+    overscan
+  });
+  return /* @__PURE__ */ jsx37(
+    "div",
+    {
+      ref: parentRef,
+      style: { height, overflowY: "auto" },
+      className: cn("relative", className),
+      children: /* @__PURE__ */ jsx37(
+        "ul",
+        {
+          role: "list",
+          style: { height: virtualizer.getTotalSize(), position: "relative" },
+          children: virtualizer.getVirtualItems().map((virtualRow) => /* @__PURE__ */ jsx37(
+            "li",
+            {
+              style: {
+                position: "absolute",
+                top: virtualRow.start,
+                left: 0,
+                right: 0,
+                height: virtualRow.size
+              },
+              children: renderItem(items[virtualRow.index], virtualRow.index)
+            },
+            virtualRow.key
+          ))
+        }
+      )
+    }
+  );
+}
 
 // src/components/charts.tsx
 import * as React38 from "react";
@@ -5722,7 +6015,7 @@ import {
   LabelList
 } from "recharts";
 import { accentColors as accentColors2 } from "@onesaz/tokens";
-import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
 var BarChart = ({
   data,
   dataKey,
@@ -5775,7 +6068,7 @@ var BarChart = ({
       )
     },
     keyConfig.dataKey
-  )) : /* @__PURE__ */ jsxs23(
+  )) : /* @__PURE__ */ jsxs24(
     Bar,
     {
       dataKey,
@@ -5813,7 +6106,7 @@ var BarChart = ({
       contentStyle: tooltip.contentStyle
     }
   ) : showTooltip ? /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(
     RechartsBarChart,
     {
       data,
@@ -5900,7 +6193,7 @@ var LineChart = ({
       name: name || dataKey
     }
   );
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsLineChart, { data, margin, children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsLineChart, { data, margin, children: [
     showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
     xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
       XAxis,
@@ -5953,7 +6246,7 @@ var PieChart = ({
     accentColors2[accentColor][1]
   ];
   const chartColors = colors || defaultColors;
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsPieChart, { children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
     /* @__PURE__ */ jsx38(
       Pie,
       {
@@ -6022,7 +6315,7 @@ var AreaChart = ({
       name: name || dataKey
     }
   );
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsAreaChart, { data, margin, children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsAreaChart, { data, margin, children: [
     showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
     xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
       XAxis,
@@ -6065,7 +6358,7 @@ var ScatterChart = ({
   className
 }) => {
   const { accentColor } = useTheme();
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsScatterChart, { data, margin, children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsScatterChart, { data, margin, children: [
     showGrid && /* @__PURE__ */ jsx38(CartesianGrid, { strokeDasharray: "3 3", stroke: "hsl(var(--muted-foreground))", opacity: 0.3 }),
     xAxis && !xAxis.hide && /* @__PURE__ */ jsx38(
       XAxis,
@@ -6106,7 +6399,7 @@ var RadarChart = ({
   className
 }) => {
   const { accentColor } = useTheme();
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsRadarChart, { data, children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsRadarChart, { data, children: [
     /* @__PURE__ */ jsx38(PolarGrid, {}),
     /* @__PURE__ */ jsx38(PolarAngleAxis, { dataKey: nameKey }),
     /* @__PURE__ */ jsx38(PolarRadiusAxis, {}),
@@ -6168,8 +6461,8 @@ var DonutChart = ({
     }
   };
   const styling = { ...defaultAdvancedStyling, ...advancedStyling };
-  const gradientDefs = styling.enableGradients ? /* @__PURE__ */ jsxs23("defs", { children: [
-    styling.enableShadows && /* @__PURE__ */ jsxs23(
+  const gradientDefs = styling.enableGradients ? /* @__PURE__ */ jsxs24("defs", { children: [
+    styling.enableShadows && /* @__PURE__ */ jsxs24(
       "filter",
       {
         id: "deepInsetShadow",
@@ -6230,7 +6523,7 @@ var DonutChart = ({
         )
       }
     ),
-    styling.gradients?.map((gradient) => /* @__PURE__ */ jsxs23(
+    styling.gradients?.map((gradient) => /* @__PURE__ */ jsxs24(
       "linearGradient",
       {
         id: gradient.id,
@@ -6255,7 +6548,7 @@ var DonutChart = ({
       contentStyle: tooltip.contentStyle
     }
   ) : showTooltip ? /* @__PURE__ */ jsx38(Tooltip2, { contentStyle: { backgroundColor: "hsl(var(--background))", border: "1px solid hsl(var(--border))", borderRadius: "6px", color: "hsl(var(--foreground))" } }) : null;
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsPieChart, { children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
     gradientDefs,
     /* @__PURE__ */ jsx38(
       Pie,
@@ -6317,7 +6610,7 @@ var ProgressCard = ({
   const bgShadowId = `progress-bg-shadow-${Math.random().toString(36).substr(2, 9)}`;
   const [startColor, endColor] = colorFn(normalizedPercentage);
   const percentageTextColor = typography.percentageColorAuto ? normalizedPercentage <= 30 ? "text-green-600" : normalizedPercentage <= 50 ? "text-blue-600" : "text-red-600" : "text-gray-900 dark:text-gray-100";
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       className: cn(
@@ -6327,16 +6620,16 @@ var ProgressCard = ({
       ),
       onClick: () => onClick?.(questionNum),
       children: [
-        /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsx38("span", { className: cn("font-bold", typography.questionFontSize, typography.questionColor), children: questionNum }),
-          /* @__PURE__ */ jsxs23("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
+          /* @__PURE__ */ jsxs24("span", { className: cn("font-bold", typography.percentageFontSize, percentageTextColor), children: [
             normalizedPercentage.toFixed(1),
             "%"
           ] })
         ] }),
-        /* @__PURE__ */ jsx38("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs23("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
-          /* @__PURE__ */ jsxs23("defs", { children: [
-            enableGradients && /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx38("div", { className: "flex items-center", style: { width: `${donutSize + 10}px`, height: `${donutSize + 10}px` }, children: /* @__PURE__ */ jsxs24("svg", { width: donutSize + 10, height: donutSize + 10, viewBox: "0 0 100 100", children: [
+          /* @__PURE__ */ jsxs24("defs", { children: [
+            enableGradients && /* @__PURE__ */ jsxs24(
               "linearGradient",
               {
                 id: gradientId,
@@ -6350,8 +6643,8 @@ var ProgressCard = ({
                 ]
               }
             ),
-            enableShadows && /* @__PURE__ */ jsxs23(Fragment5, { children: [
-              /* @__PURE__ */ jsxs23(
+            enableShadows && /* @__PURE__ */ jsxs24(Fragment5, { children: [
+              /* @__PURE__ */ jsxs24(
                 "filter",
                 {
                   id: bgShadowId,
@@ -6482,7 +6775,7 @@ var ProgressDonut = ({
   if (!data || data.length === 0) {
     return /* @__PURE__ */ jsx38("div", { className: cn("text-gray-500", className), children: "No data provided" });
   }
-  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs23(RechartsPieChart, { children: [
+  return /* @__PURE__ */ jsx38("div", { className: cn("w-full", className), children: /* @__PURE__ */ jsx38(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs24(RechartsPieChart, { children: [
     /* @__PURE__ */ jsx38(
       Pie,
       {
@@ -6537,12 +6830,12 @@ var MultiProgressDonut = ({
     const shadowId = `progress-shadow-${index}`;
     const bgShadowId = `progress-bg-shadow-${index}`;
     const [startColor, endColor] = colorFn(percentage);
-    return /* @__PURE__ */ jsxs23("div", { className: "flex flex-col items-center gap-2", children: [
+    return /* @__PURE__ */ jsxs24("div", { className: "flex flex-col items-center gap-2", children: [
       item.label && /* @__PURE__ */ jsx38("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: item.label }),
-      /* @__PURE__ */ jsxs23("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs23("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
-          /* @__PURE__ */ jsxs23("defs", { children: [
-            enableGradients && /* @__PURE__ */ jsxs23(
+      /* @__PURE__ */ jsxs24("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxs24("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
+          /* @__PURE__ */ jsxs24("defs", { children: [
+            enableGradients && /* @__PURE__ */ jsxs24(
               "linearGradient",
               {
                 id: gradientId,
@@ -6556,8 +6849,8 @@ var MultiProgressDonut = ({
                 ]
               }
             ),
-            enableShadows && /* @__PURE__ */ jsxs23(Fragment5, { children: [
-              /* @__PURE__ */ jsxs23(
+            enableShadows && /* @__PURE__ */ jsxs24(Fragment5, { children: [
+              /* @__PURE__ */ jsxs24(
                 "filter",
                 {
                   id: bgShadowId,
@@ -6649,7 +6942,7 @@ var MultiProgressDonut = ({
             }
           )
         ] }),
-        showPercentage && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs23("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
+        showPercentage && /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxs24("span", { className: "text-xs font-bold text-gray-700 dark:text-gray-300", children: [
           percentage.toFixed(1),
           "%"
         ] }) })
@@ -6752,7 +7045,7 @@ var PackedBubbleChart = ({
     if (colorByValue) return colorByValue(item.value);
     return defaultColor;
   };
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs24(
     "div",
     {
       ref: containerRef,
@@ -6767,7 +7060,7 @@ var PackedBubbleChart = ({
             children: title
           }
         ),
-        /* @__PURE__ */ jsx38("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs23(
+        /* @__PURE__ */ jsx38("svg", { width: "100%", height: "100%", className: "overflow-visible", children: bubbles.map((bubble, index) => /* @__PURE__ */ jsxs24(
           "g",
           {
             onClick: () => onBubbleClick?.(bubble.data),
@@ -6828,7 +7121,7 @@ var PackedBubbleChart = ({
 
 // src/components/breadcrumbs.tsx
 import * as React39 from "react";
-import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
 var Breadcrumbs = React39.forwardRef(
   ({
     separator,
@@ -6870,7 +7163,7 @@ var Breadcrumbs = React39.forwardRef(
     } else {
       displayedItems = childArray;
     }
-    return /* @__PURE__ */ jsx39("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx39("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs24("li", { className: "flex items-center gap-1.5", children: [
+    return /* @__PURE__ */ jsx39("nav", { ref, "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx39("ol", { className: "flex items-center gap-1.5 flex-wrap", children: displayedItems.map((child, index) => /* @__PURE__ */ jsxs25("li", { className: "flex items-center gap-1.5", children: [
       index > 0 && /* @__PURE__ */ jsx39("span", { className: "flex items-center", "aria-hidden": "true", children: separatorElement }),
       child
     ] }, index)) }) });
@@ -6980,7 +7273,7 @@ var BreadcrumbEllipsis = React39.forwardRef(
       "aria-hidden": "true",
       className: cn("text-sm text-muted-foreground", className),
       ...props,
-      children: /* @__PURE__ */ jsxs24(
+      children: /* @__PURE__ */ jsxs25(
         "svg",
         {
           xmlns: "http://www.w3.org/2000/svg",
@@ -7019,14 +7312,14 @@ BreadcrumbPage.displayName = "BreadcrumbPage";
 // src/components/dropdown-menu.tsx
 import * as React40 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs26 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
 var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 var DropdownMenuSub = DropdownMenuPrimitive.Sub;
 var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-var DropdownMenuSubTrigger = React40.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+var DropdownMenuSubTrigger = React40.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -7109,7 +7402,7 @@ var DropdownMenuItem = React40.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs25(
+var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs26(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -7141,7 +7434,7 @@ var DropdownMenuCheckboxItem = React40.forwardRef(({ className, children, checke
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs25(
+var DropdownMenuRadioItem = React40.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -7206,7 +7499,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 // src/components/drawer.tsx
 import * as React41 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
-import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs27 } from "react/jsx-runtime";
 var Drawer = DialogPrimitive2.Root;
 var DrawerTrigger = DialogPrimitive2.Trigger;
 var DrawerClose = DialogPrimitive2.Close;
@@ -7231,9 +7524,9 @@ var slideVariants = {
   top: "inset-x-0 top-0 w-full data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
   bottom: "inset-x-0 bottom-0 w-full data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom"
 };
-var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs26(DrawerPortal, { children: [
+var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, className, children, ...props }, ref) => /* @__PURE__ */ jsxs27(DrawerPortal, { children: [
   /* @__PURE__ */ jsx41(DrawerOverlay, {}),
-  /* @__PURE__ */ jsxs26(
+  /* @__PURE__ */ jsxs27(
     DialogPrimitive2.Content,
     {
       ref,
@@ -7247,7 +7540,7 @@ var DrawerContent = React41.forwardRef(({ side = "right", showClose = true, clas
       ...props,
       children: [
         children,
-        showClose && /* @__PURE__ */ jsxs26(
+        showClose && /* @__PURE__ */ jsxs27(
           DrawerClose,
           {
             className: cn(
@@ -7350,7 +7643,7 @@ var SheetFooter = DrawerFooter;
 
 // src/components/topbar.tsx
 import * as React42 from "react";
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs28 } from "react/jsx-runtime";
 var sizeClasses5 = {
   sm: "h-12",
   md: "h-14",
@@ -7378,7 +7671,7 @@ var TopBar = React42.forwardRef(
 TopBar.displayName = "TopBar";
 var TopBarBrand = React42.forwardRef(
   ({ className, logo, name, href, children, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs27(Fragment6, { children: [
+    const content = /* @__PURE__ */ jsxs28(Fragment6, { children: [
       logo && /* @__PURE__ */ jsx42("span", { className: "shrink-0", children: logo }),
       name && /* @__PURE__ */ jsx42("span", { className: "font-semibold text-lg", children: name }),
       children
@@ -7460,7 +7753,7 @@ TopBarDivider.displayName = "TopBarDivider";
 
 // src/components/sidebar.tsx
 import * as React43 from "react";
-import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx43, jsxs as jsxs29 } from "react/jsx-runtime";
 var SidebarContext = React43.createContext(void 0);
 var useSidebar = () => {
   const context = React43.useContext(SidebarContext);
@@ -7558,7 +7851,7 @@ SidebarFooter.displayName = "SidebarFooter";
 var SidebarGroup = React43.forwardRef(
   ({ className, label, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    return /* @__PURE__ */ jsxs28("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+    return /* @__PURE__ */ jsxs29("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
       label && !collapsed && /* @__PURE__ */ jsx43("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
       label && collapsed && /* @__PURE__ */ jsx43("div", { className: "flex justify-center py-1.5", children: /* @__PURE__ */ jsx43("div", { className: "h-px w-4 bg-border" }) }),
       /* @__PURE__ */ jsx43("div", { className: "space-y-1", children })
@@ -7569,9 +7862,9 @@ SidebarGroup.displayName = "SidebarGroup";
 var SidebarItem = React43.forwardRef(
   ({ className, icon, active, disabled, badge, onClick, href, children, ...props }, ref) => {
     const { collapsed } = useSidebar();
-    const content = /* @__PURE__ */ jsxs28(Fragment7, { children: [
+    const content = /* @__PURE__ */ jsxs29(Fragment7, { children: [
       icon && /* @__PURE__ */ jsx43("span", { className: cn("shrink-0", collapsed ? "mx-auto" : ""), children: icon }),
-      !collapsed && /* @__PURE__ */ jsxs28(Fragment7, { children: [
+      !collapsed && /* @__PURE__ */ jsxs29(Fragment7, { children: [
         /* @__PURE__ */ jsx43("span", { className: "flex-1 truncate", children }),
         badge && /* @__PURE__ */ jsx43("span", { className: "shrink-0", children: badge })
       ] })
@@ -7613,8 +7906,8 @@ var SidebarSubMenu = React43.forwardRef(
     if (collapsed) {
       return /* @__PURE__ */ jsx43(SidebarItem, { icon, className, children: label });
     }
-    return /* @__PURE__ */ jsxs28("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsxs28(
+    return /* @__PURE__ */ jsxs29("div", { ref, className, ...props, children: [
+      /* @__PURE__ */ jsxs29(
         "div",
         {
           className: cn(
@@ -7666,7 +7959,7 @@ var SidebarToggle = React43.forwardRef(
         ),
         "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
         ...props,
-        children: children || /* @__PURE__ */ jsxs28(
+        children: children || /* @__PURE__ */ jsxs29(
           "svg",
           {
             className: cn("h-5 w-5 transition-transform", collapsed && "rotate-180"),
@@ -7692,7 +7985,7 @@ SidebarToggle.displayName = "SidebarToggle";
 
 // src/components/sidebar-rail.tsx
 import * as React44 from "react";
-import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
 var SidebarRailContext = React44.createContext(void 0);
 var useSidebarRail = () => {
   const context = React44.useContext(SidebarRailContext);
@@ -7886,7 +8179,7 @@ var IconRailItem = React44.forwardRef(
         setActiveRail(railId);
       }
     };
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "button",
       {
         ref,
@@ -7922,7 +8215,7 @@ var RailPanel = React44.forwardRef(
       }
     };
     if (!isVisible) return null;
-    return /* @__PURE__ */ jsxs29(
+    return /* @__PURE__ */ jsxs30(
       "div",
       {
         ref,
@@ -7935,7 +8228,7 @@ var RailPanel = React44.forwardRef(
         onMouseLeave: handleMouseLeave,
         ...props,
         children: [
-          title && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
+          title && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between h-14 px-4 border-b border-border shrink-0", children: [
             /* @__PURE__ */ jsx44("span", { className: "font-semibold text-sm", children: title }),
             /* @__PURE__ */ jsx44(
               "button",
@@ -7944,7 +8237,7 @@ var RailPanel = React44.forwardRef(
                 onClick: () => setActiveRail(null),
                 className: "p-1 rounded hover:bg-muted text-muted-foreground hover:text-foreground cursor-pointer",
                 "aria-label": "Close panel",
-                children: /* @__PURE__ */ jsxs29(
+                children: /* @__PURE__ */ jsxs30(
                   "svg",
                   {
                     className: "h-4 w-4",
@@ -7973,7 +8266,7 @@ var RailPanel = React44.forwardRef(
 RailPanel.displayName = "RailPanel";
 var RailPanelGroup = React44.forwardRef(
   ({ className, label, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs29("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
+    return /* @__PURE__ */ jsxs30("div", { ref, className: cn("px-2 py-2", className), ...props, children: [
       label && /* @__PURE__ */ jsx44("div", { className: "px-2 py-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: label }),
       /* @__PURE__ */ jsx44("div", { className: "space-y-1", children })
     ] });
@@ -7982,7 +8275,7 @@ var RailPanelGroup = React44.forwardRef(
 RailPanelGroup.displayName = "RailPanelGroup";
 var RailPanelItem = React44.forwardRef(
   ({ className, icon, active, disabled, badge, href, children, onClick, ...props }, ref) => {
-    const content = /* @__PURE__ */ jsxs29(Fragment8, { children: [
+    const content = /* @__PURE__ */ jsxs30(Fragment8, { children: [
       icon && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: icon }),
       /* @__PURE__ */ jsx44("span", { className: "flex-1 truncate", children }),
       badge && /* @__PURE__ */ jsx44("span", { className: "shrink-0", children: badge })
@@ -8014,18 +8307,18 @@ RailPanelItem.displayName = "RailPanelItem";
 
 // src/playground.tsx
 import * as React45 from "react";
-import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
-var Section = ({ title, children }) => /* @__PURE__ */ jsxs30("div", { className: "mb-8", children: [
+import { jsx as jsx45, jsxs as jsxs31 } from "react/jsx-runtime";
+var Section = ({ title, children }) => /* @__PURE__ */ jsxs31("div", { className: "mb-8", children: [
   /* @__PURE__ */ jsx45("h2", { className: "text-xl font-semibold mb-4 text-foreground", children: title }),
   /* @__PURE__ */ jsx45("div", { className: "p-4 border border-border rounded-lg bg-background", children })
 ] });
 var ThemeToggle = () => {
   const { theme, setTheme } = useTheme();
-  return /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
     /* @__PURE__ */ jsx45(Label, { children: "Theme:" }),
-    /* @__PURE__ */ jsxs30(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
+    /* @__PURE__ */ jsxs31(SelectNamespace, { value: theme, onValueChange: (value) => setTheme(value), children: [
       /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-32", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select theme" }) }),
-      /* @__PURE__ */ jsxs30(SelectContent, { children: [
+      /* @__PURE__ */ jsxs31(SelectContent, { children: [
         /* @__PURE__ */ jsx45(SelectItem, { value: "light", children: "Light" }),
         /* @__PURE__ */ jsx45(SelectItem, { value: "dark", children: "Dark" }),
         /* @__PURE__ */ jsx45(SelectItem, { value: "system", children: "System" })
@@ -8048,13 +8341,13 @@ var PlaygroundContent = () => {
     { value: "svelte", label: "Svelte" },
     { value: "solid", label: "SolidJS" }
   ];
-  return /* @__PURE__ */ jsx45("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs30("div", { className: "max-w-4xl mx-auto", children: [
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between mb-8", children: [
+  return /* @__PURE__ */ jsx45("div", { className: "min-h-screen bg-background p-8", children: /* @__PURE__ */ jsxs31("div", { className: "max-w-4xl mx-auto", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between mb-8", children: [
       /* @__PURE__ */ jsx45("h1", { className: "text-3xl font-bold text-foreground", children: "@onesaz/ui Playground" }),
       /* @__PURE__ */ jsx45(ThemeToggle, {})
     ] }),
-    /* @__PURE__ */ jsxs30(Section, { title: "Button", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4", children: [
+    /* @__PURE__ */ jsxs31(Section, { title: "Button", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4", children: [
         /* @__PURE__ */ jsx45(Button, { variant: "default", children: "Default" }),
         /* @__PURE__ */ jsx45(Button, { variant: "destructive", children: "Destructive" }),
         /* @__PURE__ */ jsx45(Button, { variant: "outline", children: "Outline" }),
@@ -8062,19 +8355,19 @@ var PlaygroundContent = () => {
         /* @__PURE__ */ jsx45(Button, { variant: "ghost", children: "Ghost" }),
         /* @__PURE__ */ jsx45(Button, { variant: "link", children: "Link" })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx45(Button, { size: "sm", children: "Small" }),
         /* @__PURE__ */ jsx45(Button, { size: "default", children: "Default" }),
         /* @__PURE__ */ jsx45(Button, { size: "lg", children: "Large" }),
         /* @__PURE__ */ jsx45(Button, { size: "icon", children: "\u{1F514}" })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4 mt-4", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4 mt-4", children: [
         /* @__PURE__ */ jsx45(Button, { disabled: true, children: "Disabled" }),
         /* @__PURE__ */ jsx45(Button, { variant: "outline", disabled: true, children: "Disabled Outline" })
       ] })
     ] }),
-    /* @__PURE__ */ jsx45(Section, { title: "Input", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Input", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { htmlFor: "input-default", children: "Default Input" }),
         /* @__PURE__ */ jsx45(
           Input,
@@ -8086,17 +8379,17 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { htmlFor: "input-disabled", children: "Disabled Input" }),
         /* @__PURE__ */ jsx45(Input, { id: "input-disabled", placeholder: "Disabled...", disabled: true })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { htmlFor: "input-type", children: "Email Input" }),
         /* @__PURE__ */ jsx45(Input, { id: "input-type", type: "email", placeholder: "email@example.com" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Textarea", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { htmlFor: "textarea-default", children: "Default Textarea" }),
         /* @__PURE__ */ jsx45(
           Textarea,
@@ -8108,34 +8401,34 @@ var PlaygroundContent = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { htmlFor: "textarea-disabled", children: "Disabled Textarea" }),
         /* @__PURE__ */ jsx45(Textarea, { id: "textarea-disabled", placeholder: "Disabled...", disabled: true })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Select", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4 max-w-md", children: [
-      /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Select", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4 max-w-md", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { children: "Default Select" }),
-        /* @__PURE__ */ jsxs30(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
+        /* @__PURE__ */ jsxs31(SelectNamespace, { value: selectValue, onValueChange: setSelectValue, children: [
           /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select an option..." }) }),
-          /* @__PURE__ */ jsxs30(SelectContent, { children: [
+          /* @__PURE__ */ jsxs31(SelectContent, { children: [
             /* @__PURE__ */ jsx45(SelectItem, { value: "option1", children: "Option 1" }),
             /* @__PURE__ */ jsx45(SelectItem, { value: "option2", children: "Option 2" }),
             /* @__PURE__ */ jsx45(SelectItem, { value: "option3", children: "Option 3" })
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { children: "Grouped Select" }),
-        /* @__PURE__ */ jsxs30(SelectNamespace, { children: [
+        /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
           /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select a food..." }) }),
-          /* @__PURE__ */ jsxs30(SelectContent, { children: [
-            /* @__PURE__ */ jsxs30(SelectGroup, { children: [
+          /* @__PURE__ */ jsxs31(SelectContent, { children: [
+            /* @__PURE__ */ jsxs31(SelectGroup, { children: [
               /* @__PURE__ */ jsx45(SelectLabel, { children: "Fruits" }),
               /* @__PURE__ */ jsx45(SelectItem, { value: "apple", children: "Apple" }),
               /* @__PURE__ */ jsx45(SelectItem, { value: "banana", children: "Banana" })
             ] }),
-            /* @__PURE__ */ jsxs30(SelectGroup, { children: [
+            /* @__PURE__ */ jsxs31(SelectGroup, { children: [
               /* @__PURE__ */ jsx45(SelectLabel, { children: "Vegetables" }),
               /* @__PURE__ */ jsx45(SelectItem, { value: "carrot", children: "Carrot" }),
               /* @__PURE__ */ jsx45(SelectItem, { value: "potato", children: "Potato" })
@@ -8143,15 +8436,15 @@ var PlaygroundContent = () => {
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx45(Label, { children: "Disabled Select" }),
-        /* @__PURE__ */ jsxs30(SelectNamespace, { disabled: true, children: [
+        /* @__PURE__ */ jsxs31(SelectNamespace, { disabled: true, children: [
           /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Disabled..." }) }),
           /* @__PURE__ */ jsx45(SelectContent, { children: /* @__PURE__ */ jsx45(SelectItem, { value: "none", children: "None" }) })
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx45("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Combobox (Searchable Select)", children: /* @__PURE__ */ jsx45("div", { className: "space-y-4 max-w-md", children: /* @__PURE__ */ jsxs31("div", { children: [
       /* @__PURE__ */ jsx45(Label, { children: "Framework" }),
       /* @__PURE__ */ jsx45(
         Combobox,
@@ -8165,8 +8458,8 @@ var PlaygroundContent = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Checkbox & Switch", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx45(
           Checkbox,
           {
@@ -8177,12 +8470,12 @@ var PlaygroundContent = () => {
         ),
         /* @__PURE__ */ jsx45(Label, { htmlFor: "checkbox", children: "Accept terms and conditions" })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx45(Checkbox, { id: "checkbox-disabled", disabled: true }),
         /* @__PURE__ */ jsx45(Label, { htmlFor: "checkbox-disabled", children: "Disabled checkbox" })
       ] }),
       /* @__PURE__ */ jsx45(Separator, {}),
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx45(
           Switch,
           {
@@ -8193,75 +8486,75 @@ var PlaygroundContent = () => {
         ),
         /* @__PURE__ */ jsx45(Label, { htmlFor: "switch", children: "Enable notifications" })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx45(Switch, { id: "switch-disabled", disabled: true }),
         /* @__PURE__ */ jsx45(Label, { htmlFor: "switch-disabled", children: "Disabled switch" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Badge", children: /* @__PURE__ */ jsxs30("div", { className: "flex flex-wrap gap-4", children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Badge", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-wrap gap-4", children: [
       /* @__PURE__ */ jsx45(Badge, { children: "Default" }),
       /* @__PURE__ */ jsx45(Badge, { variant: "secondary", children: "Secondary" }),
       /* @__PURE__ */ jsx45(Badge, { variant: "destructive", children: "Destructive" }),
       /* @__PURE__ */ jsx45(Badge, { variant: "outline", children: "Outline" })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Card", children: /* @__PURE__ */ jsxs30("div", { className: "grid gap-4 md:grid-cols-2", children: [
-      /* @__PURE__ */ jsxs30(Card, { children: [
-        /* @__PURE__ */ jsxs30(CardHeader, { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Card", children: /* @__PURE__ */ jsxs31("div", { className: "grid gap-4 md:grid-cols-2", children: [
+      /* @__PURE__ */ jsxs31(Card, { children: [
+        /* @__PURE__ */ jsxs31(CardHeader, { children: [
           /* @__PURE__ */ jsx45(CardTitle, { children: "Card Title" }),
           /* @__PURE__ */ jsx45(CardDescription, { children: "Card description goes here" })
         ] }),
         /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "This is the card content area." }) }),
-        /* @__PURE__ */ jsxs30(CardFooter, { children: [
+        /* @__PURE__ */ jsxs31(CardFooter, { children: [
           /* @__PURE__ */ jsx45(Button, { variant: "outline", className: "mr-2", children: "Cancel" }),
           /* @__PURE__ */ jsx45(Button, { children: "Submit" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs30(Card, { children: [
-        /* @__PURE__ */ jsxs30(CardHeader, { children: [
+      /* @__PURE__ */ jsxs31(Card, { children: [
+        /* @__PURE__ */ jsxs31(CardHeader, { children: [
           /* @__PURE__ */ jsx45(CardTitle, { children: "Another Card" }),
           /* @__PURE__ */ jsx45(CardDescription, { children: "With different content" })
         ] }),
-        /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx45(CardContent, { children: /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
           /* @__PURE__ */ jsx45(Label, { htmlFor: "card-input", children: "Name" }),
           /* @__PURE__ */ jsx45(Input, { id: "card-input", placeholder: "Enter name..." })
         ] }) }),
         /* @__PURE__ */ jsx45(CardFooter, { children: /* @__PURE__ */ jsx45(Button, { className: "w-full", children: "Save" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs30(Section, { title: "Dialog", children: [
+    /* @__PURE__ */ jsxs31(Section, { title: "Dialog", children: [
       /* @__PURE__ */ jsx45(Button, { onClick: () => setDialogOpen(true), children: "Open Dialog" }),
-      /* @__PURE__ */ jsx45(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs30(DialogContent, { children: [
-        /* @__PURE__ */ jsxs30(DialogHeader, { children: [
+      /* @__PURE__ */ jsx45(DialogNamespace, { open: dialogOpen, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs31(DialogContent, { children: [
+        /* @__PURE__ */ jsxs31(DialogHeader, { children: [
           /* @__PURE__ */ jsx45(DialogTitle, { children: "Create New Zone" }),
           /* @__PURE__ */ jsx45(DialogDescription, { children: "Fill in the details below to create a new zone." })
         ] }),
-        /* @__PURE__ */ jsxs30("div", { className: "space-y-4 py-4", children: [
-          /* @__PURE__ */ jsxs30("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs30("div", { children: [
+        /* @__PURE__ */ jsxs31("div", { className: "space-y-4 py-4", children: [
+          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
               /* @__PURE__ */ jsx45(Label, { htmlFor: "zone-name", children: "Zone Name *" }),
               /* @__PURE__ */ jsx45(Input, { id: "zone-name", placeholder: "eg:hyderabad" })
             ] }),
-            /* @__PURE__ */ jsxs30("div", { children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
               /* @__PURE__ */ jsx45(Label, { htmlFor: "zone-code", children: "Zone Code *" }),
               /* @__PURE__ */ jsx45(Input, { id: "zone-code", placeholder: "eg :hyd022" })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs30("div", { className: "grid grid-cols-2 gap-4", children: [
-            /* @__PURE__ */ jsxs30("div", { children: [
+          /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
               /* @__PURE__ */ jsx45(Label, { children: "State *" }),
-              /* @__PURE__ */ jsxs30(SelectNamespace, { children: [
+              /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
                 /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select state" }) }),
-                /* @__PURE__ */ jsxs30(SelectContent, { children: [
+                /* @__PURE__ */ jsxs31(SelectContent, { children: [
                   /* @__PURE__ */ jsx45(SelectItem, { value: "telangana", children: "TELANGANA" }),
                   /* @__PURE__ */ jsx45(SelectItem, { value: "andhra", children: "ANDHRA PRADESH" })
                 ] })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs30("div", { children: [
+            /* @__PURE__ */ jsxs31("div", { children: [
               /* @__PURE__ */ jsx45(Label, { children: "District *" }),
-              /* @__PURE__ */ jsxs30(SelectNamespace, { children: [
+              /* @__PURE__ */ jsxs31(SelectNamespace, { children: [
                 /* @__PURE__ */ jsx45(SelectTrigger, { className: "w-full", children: /* @__PURE__ */ jsx45(SelectValue, { placeholder: "Select District" }) }),
-                /* @__PURE__ */ jsxs30(SelectContent, { children: [
+                /* @__PURE__ */ jsxs31(SelectContent, { children: [
                   /* @__PURE__ */ jsx45(SelectItem, { value: "hyderabad", children: "HYDERABAD" }),
                   /* @__PURE__ */ jsx45(SelectItem, { value: "rangareddy", children: "RANGAREDDY" })
                 ] })
@@ -8269,34 +8562,34 @@ var PlaygroundContent = () => {
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs30(DialogFooter, { children: [
+        /* @__PURE__ */ jsxs31(DialogFooter, { children: [
           /* @__PURE__ */ jsx45(Button, { variant: "outline", onClick: () => setDialogOpen(false), children: "CANCEL" }),
           /* @__PURE__ */ jsx45(Button, { onClick: () => setDialogOpen(false), children: "Create" })
         ] })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx45(Section, { title: "Table", children: /* @__PURE__ */ jsxs30(TableNamespace, { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Table", children: /* @__PURE__ */ jsxs31(TableNamespace, { children: [
       /* @__PURE__ */ jsx45(TableCaption, { children: "A list of recent invoices" }),
-      /* @__PURE__ */ jsx45(TableHeader, { children: /* @__PURE__ */ jsxs30(TableRow, { children: [
+      /* @__PURE__ */ jsx45(TableHeader, { children: /* @__PURE__ */ jsxs31(TableRow, { children: [
         /* @__PURE__ */ jsx45(TableHead, { children: "Invoice" }),
         /* @__PURE__ */ jsx45(TableHead, { children: "Status" }),
         /* @__PURE__ */ jsx45(TableHead, { children: "Method" }),
         /* @__PURE__ */ jsx45(TableHead, { className: "text-right", children: "Amount" })
       ] }) }),
-      /* @__PURE__ */ jsxs30(TableBody, { children: [
-        /* @__PURE__ */ jsxs30(TableRow, { children: [
+      /* @__PURE__ */ jsxs31(TableBody, { children: [
+        /* @__PURE__ */ jsxs31(TableRow, { children: [
           /* @__PURE__ */ jsx45(TableCell, { children: "INV001" }),
           /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { children: "Paid" }) }),
           /* @__PURE__ */ jsx45(TableCell, { children: "Credit Card" }),
           /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$250.00" })
         ] }),
-        /* @__PURE__ */ jsxs30(TableRow, { children: [
+        /* @__PURE__ */ jsxs31(TableRow, { children: [
           /* @__PURE__ */ jsx45(TableCell, { children: "INV002" }),
           /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { variant: "secondary", children: "Pending" }) }),
           /* @__PURE__ */ jsx45(TableCell, { children: "PayPal" }),
           /* @__PURE__ */ jsx45(TableCell, { className: "text-right", children: "$150.00" })
         ] }),
-        /* @__PURE__ */ jsxs30(TableRow, { children: [
+        /* @__PURE__ */ jsxs31(TableRow, { children: [
           /* @__PURE__ */ jsx45(TableCell, { children: "INV003" }),
           /* @__PURE__ */ jsx45(TableCell, { children: /* @__PURE__ */ jsx45(Badge, { variant: "destructive", children: "Failed" }) }),
           /* @__PURE__ */ jsx45(TableCell, { children: "Bank Transfer" }),
@@ -8304,7 +8597,7 @@ var PlaygroundContent = () => {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Pagination", children: /* @__PURE__ */ jsx45(PaginationNamespace, { children: /* @__PURE__ */ jsxs30(PaginationContent, { children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Pagination", children: /* @__PURE__ */ jsx45(PaginationNamespace, { children: /* @__PURE__ */ jsxs31(PaginationContent, { children: [
       /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationPrevious, { onClick: () => console.log("Previous") }) }),
       /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { isActive: true, children: "1" }) }),
       /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationLink, { children: "2" }) }),
@@ -8312,31 +8605,31 @@ var PlaygroundContent = () => {
       /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationEllipsis, {}) }),
       /* @__PURE__ */ jsx45(PaginationItem, { children: /* @__PURE__ */ jsx45(PaginationNext, { onClick: () => console.log("Next") }) })
     ] }) }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-8", children: [
-      /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Spinner", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-8", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx45(Spinner, { size: "sm" }),
         /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Small" })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx45(Spinner, { size: "default" }),
         /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Default" })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "text-center", children: [
         /* @__PURE__ */ jsx45(Spinner, { size: "lg" }),
         /* @__PURE__ */ jsx45("p", { className: "text-sm text-muted-foreground mt-2", children: "Large" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Separator", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Separator", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
       /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "Content above separator" }),
       /* @__PURE__ */ jsx45(Separator, {}),
       /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "Content below separator" }),
-      /* @__PURE__ */ jsxs30("div", { className: "flex items-center h-10", children: [
+      /* @__PURE__ */ jsxs31("div", { className: "flex items-center h-10", children: [
         /* @__PURE__ */ jsx45("span", { className: "text-foreground", children: "Left" }),
         /* @__PURE__ */ jsx45(Separator, { orientation: "vertical", className: "mx-4" }),
         /* @__PURE__ */ jsx45("span", { className: "text-foreground", children: "Right" })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx45(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsx45(Section, { title: "Typography & Colors", children: /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
       /* @__PURE__ */ jsx45("p", { className: "text-foreground", children: "text-foreground - Primary text color" }),
       /* @__PURE__ */ jsx45("p", { className: "text-muted-foreground", children: "text-muted-foreground - Muted text color" }),
       /* @__PURE__ */ jsx45("p", { className: "text-accent", children: "text-accent - Accent color" }),
@@ -8454,6 +8747,7 @@ export {
   ListDivider,
   ListItem,
   ListItemAvatar,
+  ListItemButton,
   ListItemIcon,
   ListItemText,
   ListSubheader,
@@ -8562,6 +8856,7 @@ export {
   VerticalTabsGroupLabel,
   VerticalTabsList,
   VerticalTabsTrigger,
+  VirtualList,
   cn,
   useFormControl,
   useSidebar,