@thangnqdev/ui 0.1.2 → 0.2.1

package/dist/{chunk-NFVONJUK.js → chunk-W5WNWTQC.js}

@@ -1,10 +1,10 @@
-import { chipVariants, Chip } from './chunk-X76KBH4Y.js';
-import { Button } from './chunk-66VWUJEI.js';
-import { __export, cn } from './chunk-4S6L5V7X.js';
-import React9, { forwardRef, useState, createContext, useContext, useMemo, useRef, useEffect } from 'react';
+import { chipVariants, Chip, Checkbox } from './chunk-DSEL7ELZ.js';
+import { Button } from './chunk-I2FQBMVW.js';
+import { __export, cn } from './chunk-2YJBW4E2.js';
+import React9, { forwardRef, useState, createContext, useContext, useMemo, useEffect, useRef } from 'react';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ChevronDown, ArrowUpRight, ArrowDownRight, Minus, Search, Download, ChevronUp, ChevronsUpDown, ChevronLeft, ChevronRight, FolderOpen, Folder, FileCode, Image, FileText } from 'lucide-react';
+import { ChevronDown, ArrowUpRight, ArrowDownRight, Minus, Search, Download, Loader2, ChevronUp, ChevronsUpDown, ChevronLeft, ChevronRight, FolderOpen, Folder, FileCode, Image, FileText } from 'lucide-react';
 
 // src/data-display/index.ts
 var data_display_exports = {};
@@ -433,79 +433,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] = useState("");
-  const [sortKey, setSortKey] = useState(null);
-  const [sortDirection, setSortDirection] = useState("asc");
-  const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(initialPageSize);
-  const [selectedKeys, setSelectedKeys] = useState([]);
+  const [internalSearch, setInternalSearch] = useState("");
+  const search = controlledSearchQuery !== void 0 ? controlledSearchQuery : internalSearch;
+  const [internalSorting, setInternalSorting] = useState(defaultSorting);
+  const currentSorting = controlledSorting !== void 0 ? controlledSorting ?? [] : internalSorting;
+  const [internalCurrentPage, setInternalCurrentPage] = useState(1);
+  const currentPage = controlledPageIndex !== void 0 ? controlledPageIndex : internalCurrentPage;
+  const [internalPageSize, setInternalPageSize] = useState(initialPageSize);
+  const pageSize = internalPageSize;
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState(defaultSelectedKeys);
+  const isSelectedControlled = controlledSelectedKeys !== void 0;
+  const selectedKeys = isSelectedControlled ? controlledSelectedKeys : internalSelectedKeys;
+  const handleSelectionUpdate = (nextKeys) => {
+    if (!isSelectedControlled) {
+      setInternalSelectedKeys(nextKeys);
+    }
+    onSelectionChange?.(nextKeys);
+  };
   const filteredData = useMemo(() => {
-    if (!search.trim()) return data;
+    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]);
+  }, [data, search, columns, manualFiltering]);
   const sortedData = useMemo(() => {
-    if (!sortKey) return filteredData;
-    const col = columns.find((c) => c.key === sortKey);
+    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));
+  }, [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));
+  useEffect(() => {
+    if (!manualPagination && currentPage > totalPages && totalPages > 0) {
+      setInternalCurrentPage(totalPages);
+      onPaginationChange?.(totalPages, pageSize);
+    }
+  }, [totalPages, currentPage, manualPagination, pageSize, onPaginationChange]);
   const paginatedData = 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 = 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, '""')}"`;
@@ -520,7 +624,6 @@ function DataTablePro({
     link.click();
     document.body.removeChild(link);
   };
-  const isAllSelected = paginatedData.length > 0 && selectedKeys.length === paginatedData.length;
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full space-y-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4", children: [
       (title || description) && /* @__PURE__ */ jsxs("div", { children: [
@@ -536,10 +639,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"
             }
           )
@@ -548,83 +648,110 @@ function DataTablePro({
         actions
       ] })
     ] }),
-    selectedKeys.length > 0 && /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: /* @__PURE__ */ jsxs("span", { children: [
-        "Selected ",
-        selectedKeys.length,
-        " of ",
-        sortedData.length,
-        " records"
-      ] }) }),
+    selectedKeys.length > 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-semibold text-[var(--ui-primary)]", children: [
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Selected ",
+          selectedKeys.length,
+          " records"
+        ] }),
+        canSelectAllDataset && selectedKeys.length < totalItems && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsxs(Table, { children: [
-      /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ jsx(
-          "input",
+    /* @__PURE__ */ 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__ */ jsx("div", { className: "absolute inset-0 z-20 bg-[var(--ui-bg-surface)]/60 backdrop-blur-xs flex items-center justify-center", children: /* @__PURE__ */ jsx(Loader2, { className: "w-6 h-6 animate-spin text-[var(--ui-primary)]" }) }),
+      /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10 px-4", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+                  /* @__PURE__ */ jsx("span", { children: col.header }),
+                  col.sortable !== false && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 text-[var(--ui-text-muted)]", children: [
+                    sortRule ? sortRule.direction === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-3 h-3 opacity-40" }),
+                    currentSorting.length > 1 && sortIndex >= 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono font-bold text-[var(--ui-primary)]", children: sortIndex + 1 })
+                  ] })
+                ] })
+              },
+              col.key
+            );
+          })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsx("span", { children: col.header }),
-              col.sortable !== false && /* @__PURE__ */ jsx("span", { className: "text-[var(--ui-text-muted)]", children: sortKey === col.key ? sortDirection === "asc" ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-3.5 h-3.5 text-[var(--ui-primary)] font-bold" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "w-3 h-3 opacity-40" }) })
-            ] })
-          },
-          col.key
-        ))
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: paginatedData.length === 0 ? /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ 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__ */ jsxs(
-          TableRow,
-          {
-            "data-state": isSelected ? "selected" : void 0,
-            className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
-            children: [
-              selectable && /* @__PURE__ */ jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ 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__ */ jsx(TableCell, { children: cellContent }, col.key);
-              })
-            ]
-          },
-          key
-        );
-      }) })
-    ] }) }),
+        ) }) : paginatedData.map((row, rowIdx) => {
+          const key = keyExtractor(row);
+          const isSelected = selectedKeys.includes(key);
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              "data-state": isSelected ? "selected" : void 0,
+              className: cn(isSelected && "bg-[var(--ui-primary)]/10"),
+              children: [
+                selectable && /* @__PURE__ */ jsx(TableCell, { className: "w-10 px-4", children: /* @__PURE__ */ 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__ */ jsx(TableCell, { children: cellContent }, col.key);
+                })
+              ]
+            },
+            key
+          );
+        }) })
+      ] })
+    ] }),
     /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx("span", { children: "Rows per page:" }),
@@ -632,21 +759,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__ */ jsx("option", { value: opt, children: opt }, opt))
           }
         ),
         /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
@@ -655,8 +779,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__ */ jsx(ChevronLeft, { className: "w-3.5 h-3.5" })
           }
         ),
@@ -670,8 +795,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__ */ jsx(ChevronRight, { className: "w-3.5 h-3.5" })
           }
         )
@@ -679,100 +805,218 @@ function DataTablePro({
     ] })
   ] });
 }
-function TreeNode({ item, level, selectedId, onSelect }) {
-  const [isExpanded, setIsExpanded] = 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__ */ jsx(FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
-    }
-    return /* @__PURE__ */ jsx(FileText, { className: "w-4 h-4 text-[var(--ui-text-muted)] shrink-0" });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "select-none text-xs", children: [
-    /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
-            hasChildren ? /* @__PURE__ */ jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsx("span", { className: "w-4" }),
-            getIcon(),
-            /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
-          ] }),
-          item.badge !== void 0 && /* @__PURE__ */ jsx(
-            "span",
+var TreeView = forwardRef(
+  ({
+    data,
+    selectedId,
+    defaultExpandedIds,
+    onSelect,
+    onExpandedChange,
+    className,
+    "aria-label": ariaLabel = "Tree View"
+  }, ref) => {
+    const initialExpanded = 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] = useState(initialExpanded);
+    const [focusedId, setFocusedId] = useState(null);
+    const itemRefs = 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 = 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__ */ jsx(FolderOpen, { className: "w-4 h-4 text-amber-500 shrink-0" }) : /* @__PURE__ */ jsx(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__ */ jsx(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__ */ jsx(Image, { className: "w-4 h-4 text-purple-500 shrink-0" });
+      }
+      return /* @__PURE__ */ jsx(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__ */ jsxs("div", { role: "none", className: "select-none text-xs", children: [
+          /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-center gap-2 truncate", children: [
+                  hasChildren ? /* @__PURE__ */ jsx("span", { className: cn("p-0.5 rounded transition-transform duration-200", isExpanded && "rotate-90"), children: /* @__PURE__ */ jsx(ChevronRight, { className: cn("w-3 h-3", isSelected ? "text-white" : "text-[var(--ui-text-muted)]") }) }) : /* @__PURE__ */ jsx("span", { className: "w-4" }),
+                  getIcon(item, hasChildren, isExpanded),
+                  /* @__PURE__ */ jsx("span", { className: "truncate", children: item.label })
+                ] }),
+                item.badge !== void 0 && /* @__PURE__ */ 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__ */ jsxs("div", { className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
-      /* @__PURE__ */ 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__ */ jsx(
-        TreeNode,
-        {
-          item: child,
-          level: level + 1,
-          selectedId,
-          onSelect
-        },
-        child.id
-      ))
-    ] })
-  ] });
-}
-var TreeView = forwardRef(
-  ({ data, selectedId, onSelect, className }, ref) => {
+          ),
+          hasChildren && isExpanded && /* @__PURE__ */ jsxs("div", { role: "group", className: "relative space-y-0.5 animate-in fade-in duration-150", children: [
+            /* @__PURE__ */ 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__ */ 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__ */ jsx(
-          TreeNode,
-          {
-            item,
-            level: 0,
-            selectedId,
-            onSelect
-          },
-          item.id
-        ))
+        children: renderNodes(data, 0)
       }
     );
   }
@@ -878,5 +1122,5 @@ var Carousel = forwardRef(
 Carousel.displayName = "Carousel";
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Avatar, AvatarGroup, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, DataTablePro, StatCard, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Timeline, TreeView, avatarVariants, cardVariants, data_display_exports, statusVariants, useAccordion };
-//# sourceMappingURL=chunk-NFVONJUK.js.map
-//# sourceMappingURL=chunk-NFVONJUK.js.map
+//# sourceMappingURL=chunk-W5WNWTQC.js.map
+//# sourceMappingURL=chunk-W5WNWTQC.js.map