@thangnqdev/ui 0.1.1 → 0.2.0

package/dist/data-display/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React15 = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
@@ -9,7 +9,7 @@ var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React15__default = /*#__PURE__*/_interopDefault(React15);
 
 // src/data-display/Card.tsx
 function cn(...inputs) {
@@ -44,7 +44,7 @@ var cardVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Card = React11.forwardRef(
+var Card = React15.forwardRef(
   ({ className, variant, padding, specular = true, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -58,53 +58,53 @@ var Card = React11.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React11.forwardRef(
+var CardHeader = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col space-y-1.5 mb-5", className), ...props, children });
   }
 );
 CardHeader.displayName = "CardHeader";
-var CardTitle = React11.forwardRef(
+var CardTitle = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-lg sm:text-xl font-bold tracking-tight text-[var(--ui-text-primary)]", className), ...props, children });
   }
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = React11.forwardRef(
+var CardDescription = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-xs sm:text-sm text-[var(--ui-text-muted)] font-normal leading-relaxed", className), ...props, children });
   }
 );
 CardDescription.displayName = "CardDescription";
-var CardContent = React11.forwardRef(
+var CardContent = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("pt-0", className), ...props, children });
   }
 );
 CardContent.displayName = "CardContent";
-var CardFooter = React11.forwardRef(
+var CardFooter = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center pt-4 mt-5 border-t border-[var(--ui-border-subtle)]", className), ...props, children });
   }
 );
 CardFooter.displayName = "CardFooter";
-var Table = React11.forwardRef(
+var Table = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-auto rounded-[var(--ui-radius-lg)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]", children: /* @__PURE__ */ jsxRuntime.jsx("table", { ref, className: cn("w-full caption-bottom text-sm text-left", className), ...props }) })
 );
 Table.displayName = "Table";
-var TableHeader = React11.forwardRef(
+var TableHeader = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("bg-[var(--ui-bg-secondary)] border-b border-[var(--ui-border-default)]", className), ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React11.forwardRef(
+var TableBody = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props })
 );
 TableBody.displayName = "TableBody";
-var TableFooter = React11.forwardRef(
+var TableFooter = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: cn("bg-[var(--ui-bg-secondary)] font-medium border-t border-[var(--ui-border-default)]", className), ...props })
 );
 TableFooter.displayName = "TableFooter";
-var TableRow = React11.forwardRef(
+var TableRow = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "tr",
     {
@@ -118,7 +118,7 @@ var TableRow = React11.forwardRef(
   )
 );
 TableRow.displayName = "TableRow";
-var TableHead = React11.forwardRef(
+var TableHead = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
@@ -132,11 +132,11 @@ var TableHead = React11.forwardRef(
   )
 );
 TableHead.displayName = "TableHead";
-var TableCell = React11.forwardRef(
+var TableCell = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("td", { ref, className: cn("p-4 align-middle text-sm text-[var(--ui-text-primary)]", className), ...props })
 );
 TableCell.displayName = "TableCell";
-var TableCaption = React11.forwardRef(
+var TableCaption = React15.forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("caption", { ref, className: cn("mt-4 text-xs text-[var(--ui-text-muted)]", className), ...props })
 );
 TableCaption.displayName = "TableCaption";
@@ -181,9 +181,9 @@ var statusVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Avatar = React11.forwardRef(
+var Avatar = React15.forwardRef(
   ({ className, size = "md", src, alt, name, status, children, ...props }, ref) => {
-    const [hasError, setHasError] = React11.useState(false);
+    const [hasError, setHasError] = React15.useState(false);
     const getInitials = (n) => {
       if (!n) return "";
       const parts = n.trim().split(" ");
@@ -212,9 +212,9 @@ var Avatar = React11.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-var AvatarGroup = React11.forwardRef(
+var AvatarGroup = React15.forwardRef(
   ({ className, max = 4, spacing = "tight", children, ...props }, ref) => {
-    const childArray = React11__default.default.Children.toArray(children);
+    const childArray = React15__default.default.Children.toArray(children);
     const visibleChildren = childArray.slice(0, max);
     const remainingCount = childArray.length - max;
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -240,13 +240,13 @@ var AvatarGroup = React11.forwardRef(
   }
 );
 AvatarGroup.displayName = "AvatarGroup";
-var AccordionContext = React11.createContext(null);
+var AccordionContext = React15.createContext(null);
 function useAccordion() {
-  const context = React11.useContext(AccordionContext);
+  const context = React15.useContext(AccordionContext);
   if (!context) throw new Error("AccordionItem components must be used within <Accordion />");
   return context;
 }
-var Accordion = React11.forwardRef(
+var Accordion = React15.forwardRef(
   ({
     className,
     type = "single",
@@ -256,7 +256,7 @@ var Accordion = React11.forwardRef(
     children,
     ...props
   }, ref) => {
-    const [internalOpen, setInternalOpen] = React11.useState(() => {
+    const [internalOpen, setInternalOpen] = React15.useState(() => {
       if (Array.isArray(defaultValue)) return defaultValue;
       if (typeof defaultValue === "string") return [defaultValue];
       return [];
@@ -276,17 +276,17 @@ var Accordion = React11.forwardRef(
   }
 );
 Accordion.displayName = "Accordion";
-var AccordionItemContext = React11.createContext(null);
-var AccordionItem = React11.forwardRef(
+var AccordionItemContext = React15.createContext(null);
+var AccordionItem = React15.forwardRef(
   ({ className, value, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value: { id: value }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full", className), ...props, children }) });
   }
 );
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React11.forwardRef(
+var AccordionTrigger = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { openItems, toggleItem } = useAccordion();
-    const item = React11.useContext(AccordionItemContext);
+    const item = React15.useContext(AccordionItemContext);
     const isOpen = item ? openItems.includes(item.id) : false;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -317,10 +317,10 @@ var AccordionTrigger = React11.forwardRef(
   }
 );
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React11.forwardRef(
+var AccordionContent = React15.forwardRef(
   ({ className, children, ...props }, ref) => {
     const { openItems } = useAccordion();
-    const item = React11.useContext(AccordionItemContext);
+    const item = React15.useContext(AccordionItemContext);
     const isOpen = item ? openItems.includes(item.id) : false;
     if (!isOpen) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -364,7 +364,7 @@ var chipVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Chip = React11.forwardRef(
+var Chip = React15.forwardRef(
   ({ className, variant, size, clickable, onRemove, icon, children, onClick, ...props }, ref) => {
     const isClickable = Boolean(clickable || onClick);
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -396,7 +396,7 @@ var Chip = React11.forwardRef(
   }
 );
 Chip.displayName = "Chip";
-var StatCard = React11.forwardRef(
+var StatCard = React15.forwardRef(
   ({ className, label, value, change, trend, trendLabel, icon, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(Card, { ref, className: cn("p-6", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
@@ -428,7 +428,7 @@ var StatCard = React11.forwardRef(
   }
 );
 StatCard.displayName = "StatCard";
-var Timeline = React11.forwardRef(
+var Timeline = React15.forwardRef(
   ({ className, items, ...props }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("relative pl-6 space-y-6", className), ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-[11px] top-2 bottom-2 w-0.5 bg-[var(--ui-border-subtle)]" }),
@@ -493,7 +493,7 @@ var buttonVariants = classVarianceAuthority.cva(
     }
   }
 );
-var Button = React11.forwardRef(
+var Button = React15.forwardRef(
   ({
     className,
     variant,
@@ -537,6 +537,285 @@ var Button = React11.forwardRef(
   }
 );
 Button.displayName = "Button";
+var labelVariants = classVarianceAuthority.cva(
+  "text-sm font-medium leading-none select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-[var(--ui-text-primary)] inline-flex items-center gap-1",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      },
+      error: {
+        true: "text-[var(--ui-error)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      error: false
+    }
+  }
+);
+var Label = React15.forwardRef(
+  ({ className, size, error, required, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        ref,
+        className: cn(labelVariants({ size, error }), className),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-error)] ml-0.5", "aria-hidden": "true", children: "*" })
+        ]
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+var FormFieldContext = React15.createContext(null);
+function useFormField() {
+  const context = React15.useContext(FormFieldContext);
+  return context;
+}
+var FormField = React15.forwardRef(
+  ({ className, isRequired, isInvalid, isDisabled, children, ...props }, ref) => {
+    const generatedId = React15.useId();
+    const id = props.id || generatedId;
+    const labelId = `${id}-label`;
+    const descriptionId = `${id}-description`;
+    const errorId = `${id}-error`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldContext.Provider,
+      {
+        value: {
+          id,
+          labelId,
+          descriptionId,
+          errorId,
+          isRequired,
+          isInvalid,
+          isDisabled
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("space-y-1.5 w-full", className), ...props, children })
+      }
+    );
+  }
+);
+FormField.displayName = "FormField";
+var FormLabel = React15.forwardRef(
+  ({ className, required, children, ...props }, ref) => {
+    const context = useFormField();
+    const isRequired = required ?? context?.isRequired;
+    const isError = context?.isInvalid;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Label,
+      {
+        ref,
+        id: context?.labelId,
+        htmlFor: context?.id,
+        required: isRequired,
+        error: isError,
+        className,
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormLabel.displayName = "FormLabel";
+var FormHelperText = React15.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: context?.descriptionId,
+        className: cn("text-xs text-[var(--ui-text-muted)]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormHelperText.displayName = "FormHelperText";
+var FormErrorMessage = React15.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const context = useFormField();
+    if (!context?.isInvalid && !children) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        ref,
+        id: context?.errorId,
+        role: "alert",
+        className: cn("text-xs font-medium text-[var(--ui-error)]", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+FormErrorMessage.displayName = "FormErrorMessage";
+var CheckboxGroupContext = React15.createContext(null);
+var useCheckboxGroup = () => React15.useContext(CheckboxGroupContext);
+var CheckboxGroup = React15.forwardRef(
+  ({
+    className,
+    orientation = "vertical",
+    children,
+    value: controlledValue,
+    defaultValue = [],
+    onChange,
+    disabled,
+    name,
+    ...props
+  }, ref) => {
+    const [internalValue, setInternalValue] = React15.useState(defaultValue);
+    const isControlled = controlledValue !== void 0;
+    const value = isControlled ? controlledValue : internalValue;
+    const handleValueChange = (nextValue) => {
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      onChange?.(nextValue);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CheckboxGroupContext.Provider,
+      {
+        value: {
+          value,
+          onChange: handleValueChange,
+          disabled,
+          name
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref,
+            role: "group",
+            className: cn(
+              "flex gap-2",
+              orientation === "vertical" ? "flex-col" : "flex-row flex-wrap items-center",
+              className
+            ),
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+CheckboxGroup.displayName = "CheckboxGroup";
+var checkboxVariants = classVarianceAuthority.cva(
+  "peer shrink-0 rounded-[var(--ui-radius-sm)] border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] transition-all flex items-center justify-center text-[var(--ui-primary-fg)] peer-focus-visible:ring-2 peer-focus-visible:ring-[var(--ui-primary)] peer-focus-visible:ring-offset-2",
+  {
+    variants: {
+      size: {
+        sm: "w-4 h-4 text-xs",
+        md: "w-5 h-5 text-sm",
+        lg: "w-6 h-6 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var Checkbox = React15.forwardRef(
+  ({
+    className,
+    size,
+    indeterminate = false,
+    label,
+    checked,
+    defaultChecked = false,
+    disabled,
+    id,
+    name,
+    value: propValue,
+    onChange,
+    onCheckedChange,
+    ...props
+  }, ref) => {
+    const formField = useFormField();
+    const group = useCheckboxGroup();
+    const isGroupMember = group !== null && propValue !== void 0;
+    const isDisabled = disabled ?? group?.disabled ?? formField?.isDisabled ?? false;
+    const checkboxId = id || formField?.id;
+    const checkboxName = name || group?.name;
+    const isControlled = checked !== void 0;
+    const [internalChecked, setInternalChecked] = React15.useState(defaultChecked);
+    const isChecked = isGroupMember ? group.value.includes(String(propValue)) : isControlled ? Boolean(checked) : internalChecked;
+    const innerRef = React15.useRef(null);
+    React15.useImperativeHandle(ref, () => innerRef.current);
+    React15.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.indeterminate = Boolean(indeterminate);
+      }
+    }, [indeterminate]);
+    const handleChange = (e) => {
+      if (isDisabled) return;
+      const newChecked = e.target.checked;
+      if (!isControlled && !isGroupMember) {
+        setInternalChecked(newChecked);
+      }
+      if (isGroupMember && group) {
+        const val = String(propValue);
+        const next = newChecked ? [...group.value, val] : group.value.filter((v) => v !== val);
+        group.onChange(next);
+      }
+      onChange?.(e);
+      onCheckedChange?.(newChecked);
+    };
+    const isVisualActive = isChecked || indeterminate;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "label",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 select-none cursor-pointer group",
+          isDisabled && "cursor-not-allowed opacity-50"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center justify-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref: innerRef,
+                type: "checkbox",
+                id: checkboxId,
+                name: checkboxName,
+                value: propValue,
+                disabled: isDisabled,
+                checked: isChecked,
+                onChange: handleChange,
+                "aria-checked": indeterminate ? "mixed" : isChecked,
+                className: "sr-only peer",
+                ...props
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn(
+                  checkboxVariants({ size }),
+                  isVisualActive ? "bg-[var(--ui-primary)] border-[var(--ui-primary)] text-white" : "hover:border-[var(--ui-border-strong)]",
+                  className
+                ),
+                children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Minus, { className: "w-3.5 h-3.5 stroke-[3]" }) : isChecked && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 stroke-[3]" })
+              }
+            )
+          ] }),
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-[var(--ui-text-primary)]", children: label })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
 function DataTablePro({
   data,
   columns,
@@ -544,79 +823,183 @@ function DataTablePro({
   searchable = true,
   searchPlaceholder = "Search all records...",
   selectable = true,
+  selectedKeys: controlledSelectedKeys,
+  defaultSelectedKeys = [],
   onSelectionChange,
   pageSize: initialPageSize = 10,
   pageSizeOptions = [5, 10, 25, 50],
   title,
   description,
   actions,
-  className
+  className,
+  loading = false,
+  // Multi-column sorting
+  multiSort = true,
+  sorting: controlledSorting,
+  defaultSorting = [],
+  onSortingChange,
+  // Server-side / manual mode props
+  manualPagination = false,
+  manualSorting = false,
+  manualFiltering = false,
+  pageIndex: controlledPageIndex,
+  pageCount: controlledPageCount,
+  totalCount: controlledTotalCount,
+  onPaginationChange,
+  searchQuery: controlledSearchQuery,
+  onSearchChange,
+  onSelectAllDataset,
+  emptyText = "No matching records found."
 }) {
-  const [search, setSearch] = React11.useState("");
-  const [sortKey, setSortKey] = React11.useState(null);
-  const [sortDirection, setSortDirection] = React11.useState("asc");
-  const [currentPage, setCurrentPage] = React11.useState(1);
-  const [pageSize, setPageSize] = React11.useState(initialPageSize);
-  const [selectedKeys, setSelectedKeys] = React11.useState([]);
-  const filteredData = React11.useMemo(() => {
-    if (!search.trim()) return data;
+  const [internalSearch, setInternalSearch] = React15.useState("");
+  const search = controlledSearchQuery !== void 0 ? controlledSearchQuery : internalSearch;
+  const [internalSorting, setInternalSorting] = React15.useState(defaultSorting);
+  const currentSorting = controlledSorting !== void 0 ? controlledSorting ?? [] : internalSorting;
+  const [internalCurrentPage, setInternalCurrentPage] = React15.useState(1);
+  const currentPage = controlledPageIndex !== void 0 ? controlledPageIndex : internalCurrentPage;
+  const [internalPageSize, setInternalPageSize] = React15.useState(initialPageSize);
+  const pageSize = internalPageSize;
+  const [internalSelectedKeys, setInternalSelectedKeys] = React15.useState(defaultSelectedKeys);
+  const isSelectedControlled = controlledSelectedKeys !== void 0;
+  const selectedKeys = isSelectedControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const handleSelectionUpdate = (nextKeys) => {
+    if (!isSelectedControlled) {
+      setInternalSelectedKeys(nextKeys);
+    }
+    onSelectionChange?.(nextKeys);
+  };
+  const filteredData = React15.useMemo(() => {
+    if (manualFiltering || !search.trim()) return data;
     const q = search.toLowerCase();
     return data.filter((row) => {
-      return Object.values(row).some((val) => {
+      return columns.some((col) => {
+        const val = col.accessor ? col.accessor(row) : row[col.key];
         if (val === null || val === void 0) return false;
         return String(val).toLowerCase().includes(q);
       });
     });
-  }, [data, search]);
-  const sortedData = React11.useMemo(() => {
-    if (!sortKey) return filteredData;
-    const col = columns.find((c) => c.key === sortKey);
+  }, [data, search, columns, manualFiltering]);
+  const sortedData = React15.useMemo(() => {
+    if (manualSorting || currentSorting.length === 0) return filteredData;
     return [...filteredData].sort((a, b) => {
-      const valA = col?.accessor ? col.accessor(a) : a[sortKey];
-      const valB = col?.accessor ? col.accessor(b) : b[sortKey];
-      if (valA === valB) return 0;
-      if (valA === null || valA === void 0) return 1;
-      if (valB === null || valB === void 0) return -1;
-      const comp = valA < valB ? -1 : 1;
-      return sortDirection === "asc" ? comp : -comp;
+      for (const { key, direction } of currentSorting) {
+        const col = columns.find((c) => c.key === key);
+        let comp = 0;
+        if (col?.sortComparator) {
+          comp = col.sortComparator(a, b);
+        } else {
+          const valA = col?.accessor ? col.accessor(a) : a[key];
+          const valB = col?.accessor ? col.accessor(b) : b[key];
+          if (valA === valB) continue;
+          if (valA === null || valA === void 0) return 1;
+          if (valB === null || valB === void 0) return -1;
+          comp = valA < valB ? -1 : 1;
+        }
+        if (comp !== 0) {
+          return direction === "asc" ? comp : -comp;
+        }
+      }
+      return 0;
     });
-  }, [filteredData, sortKey, sortDirection, columns]);
-  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
-  const paginatedData = React11.useMemo(() => {
+  }, [filteredData, currentSorting, columns, manualSorting]);
+  const totalItems = controlledTotalCount !== void 0 ? controlledTotalCount : sortedData.length;
+  const totalPages = controlledPageCount !== void 0 ? Math.max(1, controlledPageCount) : Math.max(1, Math.ceil(totalItems / pageSize));
+  React15.useEffect(() => {
+    if (!manualPagination && currentPage > totalPages && totalPages > 0) {
+      setInternalCurrentPage(totalPages);
+      onPaginationChange?.(totalPages, pageSize);
+    }
+  }, [totalPages, currentPage, manualPagination, pageSize, onPaginationChange]);
+  const paginatedData = React15.useMemo(() => {
+    if (manualPagination) return data;
     const start = (currentPage - 1) * pageSize;
     return sortedData.slice(start, start + pageSize);
-  }, [sortedData, currentPage, pageSize]);
-  const handleSort = (key) => {
-    if (sortKey === key) {
-      if (sortDirection === "asc") {
-        setSortDirection("desc");
+  }, [data, sortedData, currentPage, pageSize, manualPagination]);
+  const handleSort = (key, e) => {
+    const isShift = e?.shiftKey || false;
+    let nextSorting = [...currentSorting];
+    const existingIdx = nextSorting.findIndex((s) => s.key === key);
+    if (isShift && multiSort) {
+      if (existingIdx >= 0) {
+        if (nextSorting[existingIdx].direction === "asc") {
+          nextSorting[existingIdx] = { key, direction: "desc" };
+        } else {
+          nextSorting.splice(existingIdx, 1);
+        }
       } else {
-        setSortKey(null);
-        setSortDirection("asc");
+        nextSorting.push({ key, direction: "asc" });
       }
     } else {
-      setSortKey(key);
-      setSortDirection("asc");
+      if (existingIdx >= 0 && nextSorting.length === 1) {
+        if (nextSorting[0].direction === "asc") {
+          nextSorting = [{ key, direction: "desc" }];
+        } else {
+          nextSorting = [];
+        }
+      } else {
+        nextSorting = [{ key, direction: "asc" }];
+      }
+    }
+    if (controlledSorting === void 0) {
+      setInternalSorting(nextSorting);
     }
+    onSortingChange?.(nextSorting);
   };
-  const toggleSelectAll = () => {
-    if (selectedKeys.length === paginatedData.length) {
-      setSelectedKeys([]);
-      onSelectionChange?.([]);
+  const handlePageChange = (newPage) => {
+    const clamped = Math.max(1, Math.min(totalPages, newPage));
+    if (controlledPageIndex === void 0) {
+      setInternalCurrentPage(clamped);
+    }
+    onPaginationChange?.(clamped, pageSize);
+  };
+  const handlePageSizeChange = (newSize) => {
+    setInternalPageSize(newSize);
+    if (controlledPageIndex === void 0) {
+      setInternalCurrentPage(1);
+    }
+    onPaginationChange?.(1, newSize);
+  };
+  const handleSearchChange = (query) => {
+    if (controlledSearchQuery === void 0) {
+      setInternalSearch(query);
+      if (controlledPageIndex === void 0) {
+        setInternalCurrentPage(1);
+      }
+    }
+    onSearchChange?.(query);
+  };
+  const currentPageKeys = React15.useMemo(() => paginatedData.map(keyExtractor), [paginatedData, keyExtractor]);
+  const isAllCurrentPageSelected = currentPageKeys.length > 0 && currentPageKeys.every((k) => selectedKeys.includes(k));
+  const isSomeCurrentPageSelected = currentPageKeys.some((k) => selectedKeys.includes(k)) && !isAllCurrentPageSelected;
+  const toggleSelectAllCurrentPage = () => {
+    if (isAllCurrentPageSelected) {
+      const next = selectedKeys.filter((k) => !currentPageKeys.includes(k));
+      handleSelectionUpdate(next);
     } else {
-      const allKeys = paginatedData.map(keyExtractor);
-      setSelectedKeys(allKeys);
-      onSelectionChange?.(allKeys);
+      const combined = Array.from(/* @__PURE__ */ new Set([...selectedKeys, ...currentPageKeys]));
+      handleSelectionUpdate(combined);
     }
   };
   const toggleSelectRow = (key) => {
     const next = selectedKeys.includes(key) ? selectedKeys.filter((k) => k !== key) : [...selectedKeys, key];
-    setSelectedKeys(next);
-    onSelectionChange?.(next);
+    handleSelectionUpdate(next);
+  };
+  const canSelectAllDataset = !manualPagination || typeof onSelectAllDataset === "function";
+  const selectAllDataset = () => {
+    if (manualPagination) {
+      onSelectAllDataset?.();
+      return;
+    }
+    const allKeys = sortedData.map(keyExtractor);
+    handleSelectionUpdate(allKeys);
+  };
+  const clearSelection = () => {
+    handleSelectionUpdate([]);
   };
   const exportCSV = () => {
+    const exportRows = manualPagination ? data : sortedData;
     const headers = columns.map((c) => typeof c.header === "string" ? c.header : c.key);
-    const rows = sortedData.map(
+    const rows = exportRows.map(
       (row) => columns.map((c) => {
         const val = c.accessor ? c.accessor(row) : row[c.key];
         return `"${String(val ?? "").replace(/"/g, '""')}"`;
@@ -631,7 +1014,6 @@ function DataTablePro({
     link.click();
     document.body.removeChild(link);
   };
-  const isAllSelected = paginatedData.length > 0 && selectedKeys.length === paginatedData.length;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("w-full space-y-4", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
       (title || description) && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -647,10 +1029,7 @@ function DataTablePro({
               type: "text",
               placeholder: searchPlaceholder,
               value: search,
-              onChange: (e) => {
-                setSearch(e.target.value);
-                setCurrentPage(1);
-              },
+              onChange: (e) => handleSearchChange(e.target.value),
               className: "w-full h-8 pl-8 pr-3 text-xs rounded-xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] focus:outline-none focus:ring-2 focus:ring-[var(--ui-primary)]/40 text-[var(--ui-text-primary)] placeholder:text-[var(--ui-text-muted)] transition-all shadow-inner"
             }
           )
@@ -659,83 +1038,110 @@ function DataTablePro({
         actions
       ] })
     ] }),
-    selectedKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 rounded-xl bg-[var(--ui-primary)]/15 border border-[var(--ui-primary)]/30 flex items-center justify-between animate-in fade-in duration-200", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        "Selected ",
-        selectedKeys.length,
-        " of ",
-        sortedData.length,
-        " records"
-      ] }) }),
+    selectedKeys.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 rounded-xl bg-[var(--ui-primary)]/15 border border-[var(--ui-primary)]/30 flex flex-wrap items-center justify-between gap-2 animate-in fade-in duration-200", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          "Selected ",
+          selectedKeys.length,
+          " records"
+        ] }),
+        canSelectAllDataset && selectedKeys.length < totalItems && /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: selectAllDataset,
+            className: "underline hover:text-[var(--ui-primary)]/80 cursor-pointer font-bold ml-1",
+            children: [
+              "Select all ",
+              totalItems,
+              " records"
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         Button,
         {
           size: "xs",
           variant: "ghost",
           className: "text-xs text-rose-500 hover:text-rose-600 hover:bg-rose-500/10",
-          onClick: () => {
-            setSelectedKeys([]);
-            onSelectionChange?.([]);
-          },
+          onClick: clearSelection,
           children: "Clear Selection"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full overflow-x-auto rounded-2xl border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] shadow-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
-        selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full overflow-x-auto rounded-2xl border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)] shadow-sm", children: [
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 z-20 bg-[var(--ui-bg-surface)]/60 backdrop-blur-xs flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { className: "w-6 h-6 animate-spin text-[var(--ui-primary)]" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Table, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(TableHeader, { children: /* @__PURE__ */ jsxRuntime.jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsxRuntime.jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Checkbox,
+            {
+              checked: isAllCurrentPageSelected,
+              indeterminate: isSomeCurrentPageSelected,
+              onCheckedChange: toggleSelectAllCurrentPage,
+              "aria-label": "Select all on page"
+            }
+          ) }),
+          columns.map((col) => {
+            const sortIndex = currentSorting.findIndex((s) => s.key === col.key);
+            const sortRule = sortIndex >= 0 ? currentSorting[sortIndex] : null;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              TableHead,
+              {
+                style: { width: col.width },
+                onClick: (e) => col.sortable !== false && handleSort(col.key, e),
+                className: cn(
+                  col.sortable !== false && "cursor-pointer select-none hover:text-[var(--ui-text-primary)] transition-colors"
+                ),
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.header }),
+                  col.sortable !== false && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-0.5 text-[var(--ui-text-muted)]", children: [
+                    sortRule ? sortRule.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3 opacity-40" }),
+                    currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono font-bold text-[var(--ui-primary)]", children: sortIndex + 1 })
+                  ] })
+                ] })
+              },
+              col.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          TableCell,
           {
-            type: "checkbox",
-            checked: isAllSelected,
-            onChange: toggleSelectAll,
-            className: "rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
+            colSpan: columns.length + (selectable ? 1 : 0),
+            className: "h-32 text-center text-xs text-[var(--ui-text-muted)]",
+            children: emptyText
           }
-        ) }),
-        columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx(
-          TableHead,
-          {
-            style: { width: col.width },
-            onClick: () => col.sortable !== false && handleSort(col.key),
-            className: cn(
-              col.sortable !== false && "cursor-pointer select-none hover:text-[var(--ui-text-primary)] transition-colors"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: col.header }),
-              col.sortable !== false && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--ui-text-muted)]", children: sortKey === col.key ? sortDirection === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronsUpDown, { className: "w-3 h-3 opacity-40" }) })
-            ] })
-          },
-          col.key
-        ))
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(TableRow, { children: /* @__PURE__ */ jsxRuntime.jsx(TableCell, { colSpan: columns.length + (selectable ? 1 : 0), className: "h-32 text-center text-xs text-[var(--ui-text-muted)]", children: "No matching records found." }) }) : paginatedData.map((row, rowIdx) => {
-        const key = keyExtractor(row);
-        const isSelected = selectedKeys.includes(key);
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          TableRow,
-          {
-            "data-state": isSelected ? "selected" : void 0,
-            className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
-            children: [
-              selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "checkbox",
-                  checked: isSelected,
-                  onChange: () => toggleSelectRow(key),
-                  className: "rounded border-[var(--ui-border-default)] text-[var(--ui-primary)] focus:ring-[var(--ui-primary)] cursor-pointer"
-                }
-              ) }),
-              columns.map((col) => {
-                const cellContent = col.render ? col.render(row, rowIdx) : col.accessor ? col.accessor(row) : row[col.key];
-                return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: cellContent }, col.key);
-              })
-            ]
-          },
-          key
-        );
-      }) })
-    ] }) }),
+        ) }) : paginatedData.map((row, rowIdx) => {
+          const key = keyExtractor(row);
+          const isSelected = selectedKeys.includes(key);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            TableRow,
+            {
+              "data-state": isSelected ? "selected" : void 0,
+              className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
+              children: [
+                selectable && /* @__PURE__ */ jsxRuntime.jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => toggleSelectRow(key),
+                    "aria-label": `Select row ${key}`
+                  }
+                ) }),
+                columns.map((col) => {
+                  const val = col.accessor ? col.accessor(row) : row[col.key];
+                  const cellContent = col.render ? col.render(row, rowIdx, val) : val;
+                  return /* @__PURE__ */ jsxRuntime.jsx(TableCell, { children: cellContent }, col.key);
+                })
+              ]
+            },
+            key
+          );
+        }) })
+      ] })
+    ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-3 px-1 text-xs text-[var(--ui-text-muted)] font-mono", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Rows per page:" }),
@@ -743,21 +1149,18 @@ function DataTablePro({
           "select",
           {
             value: pageSize,
-            onChange: (e) => {
-              setPageSize(Number(e.target.value));
-              setCurrentPage(1);
-            },
+            onChange: (e) => handlePageSizeChange(Number(e.target.value)),
             className: "px-2 py-1 rounded-lg bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] text-[var(--ui-text-primary)] font-mono text-xs focus:outline-none",
             children: pageSizeOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--ui-text-muted)]", children: [
           "Showing ",
-          Math.min((currentPage - 1) * pageSize + 1, sortedData.length),
+          totalItems === 0 ? 0 : Math.min((currentPage - 1) * pageSize + 1, totalItems),
           "\u2013",
-          Math.min(currentPage * pageSize, sortedData.length),
+          Math.min(currentPage * pageSize, totalItems),
           " of ",
-          sortedData.length
+          totalItems
         ] })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -766,8 +1169,9 @@ function DataTablePro({
           {
             size: "xs",
             variant: "outline",
-            disabled: currentPage === 1,
-            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            disabled: currentPage <= 1 || loading,
+            onClick: () => handlePageChange(currentPage - 1),
+            "aria-label": "Previous page",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-3.5 h-3.5" })
           }
         ),
@@ -781,8 +1185,9 @@ function DataTablePro({
           {
             size: "xs",
             variant: "outline",
-            disabled: currentPage === totalPages,
-            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            disabled: currentPage >= totalPages || loading,
+            onClick: () => handlePageChange(currentPage + 1),
+            "aria-label": "Next page",
             children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-3.5 h-3.5" })
           }
         )
@@ -790,106 +1195,224 @@ function DataTablePro({
     ] })
   ] });
 }
-function TreeNode({ item, level, selectedId, onSelect }) {
-  const [isExpanded, setIsExpanded] = React11.useState(Boolean(item.defaultExpanded));
-  const hasChildren = Boolean(item.children && item.children.length > 0);
-  const isSelected = selectedId === item.id;
-  const handleClick = (e) => {
-    e.stopPropagation();
-    if (hasChildren) {
-      setIsExpanded(!isExpanded);
-    }
-    onSelect?.(item);
-  };
-  const getIcon = () => {
-    if (item.icon) return item.icon;
-    if (hasChildren) {
-      return isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "w-4 h-4 text-amber-500 shrink-0" });
-    }
-    if (item.label.endsWith(".tsx") || item.label.endsWith(".ts") || item.label.endsWith(".js")) {
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { className: "w-4 h-4 text-blue-500 shrink-0" });
-    }
-    if (item.label.endsWith(".png") || item.label.endsWith(".jpg") || item.label.endsWith(".svg")) {
-      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "select-none text-xs", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        onClick: handleClick,
-        style: { paddingLeft: `${level * 16 + 8}px` },
-        className: cn(
-          "flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group",
-          isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]"
-        ),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-            hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4" }),
-            getIcon(),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
-          ] }),
-          item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
+var TreeView = React15.forwardRef(
+  ({
+    data,
+    selectedId,
+    defaultExpandedIds,
+    onSelect,
+    onExpandedChange,
+    className,
+    "aria-label": ariaLabel = "Tree View"
+  }, ref) => {
+    const initialExpanded = React15.useMemo(() => {
+      if (defaultExpandedIds) return new Set(defaultExpandedIds);
+      const set = /* @__PURE__ */ new Set();
+      const collect = (items) => {
+        for (const it of items) {
+          if (it.defaultExpanded) set.add(it.id);
+          if (it.children) collect(it.children);
+        }
+      };
+      collect(data);
+      return set;
+    }, [data, defaultExpandedIds]);
+    const [expandedSet, setExpandedSet] = React15.useState(initialExpanded);
+    const [focusedId, setFocusedId] = React15.useState(null);
+    const itemRefs = React15.useRef(/* @__PURE__ */ new Map());
+    const focusNode = (id) => {
+      setFocusedId(id);
+      const el = itemRefs.current.get(id);
+      if (el) {
+        el.focus();
+      }
+    };
+    const toggleExpand = (id) => {
+      setExpandedSet((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        onExpandedChange?.(Array.from(next));
+        return next;
+      });
+    };
+    const expandNode = (id) => {
+      if (!expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev).add(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+    const collapseNode = (id) => {
+      if (expandedSet.has(id)) {
+        setExpandedSet((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          onExpandedChange?.(Array.from(next));
+          return next;
+        });
+      }
+    };
+    const visibleList = React15.useMemo(() => {
+      const list = [];
+      const traverse = (items, level, parentId) => {
+        for (const item of items) {
+          const hasChildren = Boolean(item.children && item.children.length > 0);
+          list.push({ item, level, parentId, hasChildren });
+          if (hasChildren && expandedSet.has(item.id)) {
+            traverse(item.children, level + 1, item.id);
+          }
+        }
+      };
+      traverse(data, 0, null);
+      return list;
+    }, [data, expandedSet]);
+    const handleKeyDown = (e) => {
+      if (visibleList.length === 0) return;
+      const currentIdx = focusedId ? visibleList.findIndex((f) => f.item.id === focusedId) : 0;
+      const currentFlat = visibleList[currentIdx] || visibleList[0];
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const nextIdx = Math.min(visibleList.length - 1, currentIdx + 1);
+        focusNode(visibleList[nextIdx].item.id);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prevIdx = Math.max(0, currentIdx - 1);
+        focusNode(visibleList[prevIdx].item.id);
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        if (currentFlat.hasChildren) {
+          if (!expandedSet.has(currentFlat.item.id)) {
+            expandNode(currentFlat.item.id);
+          } else {
+            const nextIdx = currentIdx + 1;
+            if (nextIdx < visibleList.length) {
+              focusNode(visibleList[nextIdx].item.id);
+            }
+          }
+        }
+      } else if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        if (currentFlat.hasChildren && expandedSet.has(currentFlat.item.id)) {
+          collapseNode(currentFlat.item.id);
+        } else if (currentFlat.parentId) {
+          focusNode(currentFlat.parentId);
+        }
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        focusNode(visibleList[0].item.id);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        focusNode(visibleList[visibleList.length - 1].item.id);
+      } else if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        if (currentFlat) {
+          if (currentFlat.hasChildren) {
+            toggleExpand(currentFlat.item.id);
+          }
+          onSelect?.(currentFlat.item);
+        }
+      }
+    };
+    const getIcon = (item, hasChildren, isExpanded) => {
+      if (item.icon) return item.icon;
+      if (hasChildren) {
+        return isExpanded ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Folder, { className: "w-4 h-4 text-amber-500 shrink-0" });
+      }
+      if (item.label.endsWith(".tsx") || item.label.endsWith(".ts") || item.label.endsWith(".js")) {
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileCode, { className: "w-4 h-4 text-blue-500 shrink-0" });
+      }
+      if (item.label.endsWith(".png") || item.label.endsWith(".jpg") || item.label.endsWith(".svg")) {
+        return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
+    };
+    const renderNodes = (items, level) => {
+      return items.map((item, index) => {
+        const hasChildren = Boolean(item.children && item.children.length > 0);
+        const isExpanded = expandedSet.has(item.id);
+        const isSelected = selectedId === item.id;
+        const isFocused = focusedId === item.id || !focusedId && level === 0 && index === 0;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "none", className: "select-none text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
+              ref: (el) => {
+                if (el) itemRefs.current.set(item.id, el);
+                else itemRefs.current.delete(item.id);
+              },
+              role: "treeitem",
+              tabIndex: isFocused ? 0 : -1,
+              "aria-expanded": hasChildren ? isExpanded : void 0,
+              "aria-selected": isSelected,
+              "aria-level": level + 1,
+              "aria-posinset": index + 1,
+              "aria-setsize": items.length,
+              onClick: (e) => {
+                e.stopPropagation();
+                focusNode(item.id);
+                if (hasChildren) {
+                  toggleExpand(item.id);
+                }
+                onSelect?.(item);
+              },
+              style: { paddingLeft: `${level * 16 + 8}px` },
               className: cn(
-                "px-1.5 py-0.5 rounded-md text-[10px] font-mono",
-                isSelected ? "bg-white/20 text-white" : "bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]"
+                "flex items-center justify-between py-1.5 pr-2.5 rounded-xl cursor-pointer transition-colors group outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)]",
+                isSelected ? "bg-[var(--ui-primary)] text-white font-semibold shadow-xs" : "text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]"
               ),
-              children: item.badge
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                  hasChildren ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-4" }),
+                  getIcon(item, hasChildren, isExpanded),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label })
+                ] }),
+                item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded-md text-[10px] font-mono",
+                      isSelected ? "bg-white/20 text-white" : "bg-[var(--ui-bg-secondary)] text-[var(--ui-text-muted)]"
+                    ),
+                    children: item.badge
+                  }
+                )
+              ]
             }
-          )
-        ]
-      }
-    ),
-    hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]",
-          style: { left: `${level * 16 + 15}px` }
-        }
-      ),
-      item.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
-        TreeNode,
-        {
-          item: child,
-          level: level + 1,
-          selectedId,
-          onSelect
-        },
-        child.id
-      ))
-    ] })
-  ] });
-}
-var TreeView = React11.forwardRef(
-  ({ data, selectedId, onSelect, className }, ref) => {
+          ),
+          hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "absolute left-[15px] top-0 bottom-0 w-[1px] bg-[var(--ui-border-subtle)]",
+                style: { left: `${level * 16 + 15}px` }
+              }
+            ),
+            renderNodes(item.children, level + 1)
+          ] })
+        ] }, item.id);
+      });
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
+        role: "tree",
+        "aria-label": ariaLabel,
+        onKeyDown: handleKeyDown,
         className: cn(
-          "w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden",
+          "w-full p-2 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] space-y-0.5 shadow-sm overflow-hidden outline-none",
           className
         ),
-        children: data.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-          TreeNode,
-          {
-            item,
-            level: 0,
-            selectedId,
-            onSelect
-          },
-          item.id
-        ))
+        children: renderNodes(data, 0)
       }
     );
   }
 );
 TreeView.displayName = "TreeView";
-var Carousel = React11.forwardRef(
+var Carousel = React15.forwardRef(
   ({
     autoplay = false,
     autoplayInterval = 4e3,
@@ -900,9 +1423,9 @@ var Carousel = React11.forwardRef(
     className,
     ...props
   }, ref) => {
-    const [currentIndex, setCurrentIndex] = React11.useState(0);
-    const totalSlides = React11__default.default.Children.count(children);
-    const timerRef = React11.useRef(null);
+    const [currentIndex, setCurrentIndex] = React15.useState(0);
+    const totalSlides = React15__default.default.Children.count(children);
+    const timerRef = React15.useRef(null);
     const nextSlide = () => {
       setCurrentIndex((prev) => {
         if (prev === totalSlides - 1) {
@@ -919,7 +1442,7 @@ var Carousel = React11.forwardRef(
         return prev - 1;
       });
     };
-    React11.useEffect(() => {
+    React15.useEffect(() => {
       if (autoplay && totalSlides > 1) {
         timerRef.current = setInterval(nextSlide, autoplayInterval);
         return () => clearInterval(timerRef.current);
@@ -943,7 +1466,7 @@ var Carousel = React11.forwardRef(
             {
               className: "flex transition-transform duration-500 ease-out",
               style: { transform: `translateX(-${currentIndex * 100}%)` },
-              children: React11__default.default.Children.map(children, (child, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0", children: child }, idx))
+              children: React15__default.default.Children.map(children, (child, idx) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full flex-shrink-0", children: child }, idx))
             }
           ),
           showArrows && totalSlides > 1 && /* @__PURE__ */ jsxRuntime.jsx(