@vesture/react 0.2.3 → 0.2.5

package/dist/index.js

@@ -76,7 +76,7 @@ var Select = forwardRef5(function Select2({ invalid, className, children, ...res
 });
 
 // src/components/Checkbox/Checkbox.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef6, useEffect, useRef } from "react";
 
 // src/components/Checkbox/Checkbox.css.ts
 var box = "Checkbox_box__7029a22";
@@ -85,11 +85,32 @@ var wrapper2 = "Checkbox_wrapper__7029a20";
 
 // src/components/Checkbox/Checkbox.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var Checkbox = forwardRef6(function Checkbox2({ label: label3, className, ...rest }, ref) {
+var Checkbox = forwardRef6(function Checkbox2({ label: label4, className, indeterminate = false, ...rest }, ref) {
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
   return /* @__PURE__ */ jsxs3("label", { className: [wrapper2, className].filter(Boolean).join(" "), children: [
-    /* @__PURE__ */ jsx6("input", { ref, type: "checkbox", className: hiddenInput, ...rest }),
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref: (el) => {
+          inputRef.current = el;
+          if (typeof ref === "function") {
+            ref(el);
+          } else if (ref) {
+            ref.current = el;
+          }
+        },
+        type: "checkbox",
+        className: hiddenInput,
+        ...rest
+      }
+    ),
     /* @__PURE__ */ jsx6("span", { className: box, "aria-hidden": "true" }),
-    label3
+    label4
   ] });
 });
 
@@ -103,11 +124,11 @@ var wrapper3 = "Radio_wrapper__gzk3vv0";
 
 // src/components/Radio/Radio.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var Radio = forwardRef7(function Radio2({ label: label3, className, ...rest }, ref) {
+var Radio = forwardRef7(function Radio2({ label: label4, className, ...rest }, ref) {
   return /* @__PURE__ */ jsxs4("label", { className: [wrapper3, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx7("input", { ref, type: "radio", className: hiddenInput2, ...rest }),
     /* @__PURE__ */ jsx7("span", { className: circle, "aria-hidden": "true" }),
-    label3
+    label4
   ] });
 });
 
@@ -121,11 +142,11 @@ var wrapper4 = "Switch_wrapper__1yxysfy0";
 
 // src/components/Switch/Switch.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var Switch = forwardRef8(function Switch2({ label: label3, className, ...rest }, ref) {
+var Switch = forwardRef8(function Switch2({ label: label4, className, ...rest }, ref) {
   return /* @__PURE__ */ jsxs5("label", { className: [wrapper4, className].filter(Boolean).join(" "), children: [
     /* @__PURE__ */ jsx8("input", { ref, type: "checkbox", role: "switch", className: hiddenInput3, ...rest }),
     /* @__PURE__ */ jsx8("span", { className: track, "aria-hidden": "true" }),
-    label3
+    label4
   ] });
 });
 
@@ -200,7 +221,7 @@ var Divider = forwardRef11(function Divider2({ orientation: orientationProp = "h
 });
 
 // src/components/Tooltip/Tooltip.tsx
-import { cloneElement, isValidElement, useRef, useState } from "react";
+import { cloneElement, isValidElement, useRef as useRef2, useState } from "react";
 import {
   FloatingArrow,
   FloatingPortal,
@@ -226,7 +247,7 @@ var tooltip = "Tooltip_tooltip__foawl10";
 import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function Tooltip({ content, placement = "top", children }) {
   const [open, setOpen] = useState(false);
-  const arrowRef = useRef(null);
+  const arrowRef = useRef2(null);
   const { refs, floatingStyles, context } = useFloating({
     open,
     onOpenChange: setOpen,
@@ -444,7 +465,7 @@ function useToast() {
 }
 
 // src/components/DropdownMenu/DropdownMenu.tsx
-import { cloneElement as cloneElement3, isValidElement as isValidElement3, useRef as useRef2, useState as useState4 } from "react";
+import { cloneElement as cloneElement3, isValidElement as isValidElement3, useRef as useRef3, useState as useState4 } from "react";
 import {
   FloatingFocusManager as FloatingFocusManager3,
   FloatingPortal as FloatingPortal4,
@@ -485,7 +506,7 @@ function DropdownMenu({
 }) {
   const [open, setOpen] = useState4(false);
   const [activeIndex, setActiveIndex] = useState4(null);
-  const elementsRef = useRef2([]);
+  const elementsRef = useRef3([]);
   const { refs, floatingStyles, context } = useFloating4({
     open,
     onOpenChange: setOpen,
@@ -1027,7 +1048,7 @@ var srOnly = "Spinner_srOnly__1hs5uji5";
 import { jsx as jsx32 } from "react/jsx-runtime";
 function Spinner({
   size: sizeProp = "md",
-  label: label3 = "Loading",
+  label: label4 = "Loading",
   className,
   ...rest
 }) {
@@ -1035,10 +1056,10 @@ function Spinner({
     "div",
     {
       role: "status",
-      "aria-label": label3,
+      "aria-label": label4,
       className: [spinner, size2[sizeProp], className].filter(Boolean).join(" "),
       ...rest,
-      children: /* @__PURE__ */ jsx32("span", { className: srOnly, children: label3 })
+      children: /* @__PURE__ */ jsx32("span", { className: srOnly, children: label4 })
     }
   );
 }
@@ -1079,7 +1100,7 @@ function Alert({
 }
 
 // src/components/DataGrid/DataGrid.tsx
-import { useCallback as useCallback2, useEffect, useMemo as useMemo2, useRef as useRef3, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef4, useState as useState8 } from "react";
 
 // src/components/DataGrid/DataGrid.css.ts
 var actionsCell = "DataGrid_actionsCell__7xivx7g";
@@ -1116,7 +1137,7 @@ var ACTIONS_COLUMN_WIDTH = 72;
 var FILTER_DEBOUNCE_MS = 200;
 function useDebouncedValue(value, delay) {
   const [debounced, setDebounced] = useState8(value);
-  useEffect(() => {
+  useEffect2(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
@@ -1129,17 +1150,17 @@ function FilterTextInput({
 }) {
   const [draft, setDraft] = useState8(value);
   const debounced = useDebouncedValue(draft, FILTER_DEBOUNCE_MS);
-  const onChangeRef = useRef3(onChange);
+  const onChangeRef = useRef4(onChange);
   onChangeRef.current = onChange;
-  const mounted = useRef3(false);
-  useEffect(() => {
+  const mounted = useRef4(false);
+  useEffect2(() => {
     if (!mounted.current) {
       mounted.current = true;
       return;
     }
     onChangeRef.current(debounced);
   }, [debounced]);
-  useEffect(() => {
+  useEffect2(() => {
     setDraft(value);
   }, [value]);
   return /* @__PURE__ */ jsx34(
@@ -1158,11 +1179,11 @@ function compareValues(a, b) {
   }
   return String(a).localeCompare(String(b));
 }
-function getCellValue(column, row2) {
+function getCellValue(column, row3) {
   if (column.accessor) {
-    return column.accessor(row2);
+    return column.accessor(row3);
   }
-  return row2[column.key];
+  return row3[column.key];
 }
 function DataGrid({
   columns,
@@ -1244,11 +1265,11 @@ function DataGrid({
       return data;
     }
     return data.filter(
-      (row2) => filters.every((f) => {
+      (row3) => filters.every((f) => {
         if (!f.value) return true;
         const column = columns.find((c) => c.key === f.key);
         if (!column) return true;
-        const cellValue = String(getCellValue(column, row2) ?? "").toLowerCase();
+        const cellValue = String(getCellValue(column, row3) ?? "").toLowerCase();
         return cellValue.includes(f.value.toLowerCase());
       })
     );
@@ -1274,8 +1295,8 @@ function DataGrid({
     for (const column of columns) {
       if (!column.filterable || column.filterType !== "select") continue;
       const values = /* @__PURE__ */ new Set();
-      for (const row2 of data) {
-        values.add(String(getCellValue(column, row2) ?? ""));
+      for (const row3 of data) {
+        values.add(String(getCellValue(column, row3) ?? ""));
       }
       map[column.key] = Array.from(values).sort();
     }
@@ -1301,7 +1322,7 @@ function DataGrid({
     }
     setSelectedIds(next);
   };
-  const resizeState = useRef3(null);
+  const resizeState = useRef4(null);
   const handleResizeStart = useCallback2(
     (event, column) => {
       if (column.resizable === false) return;
@@ -1713,7 +1734,7 @@ function DataGrid({
 }
 
 // src/components/Calendar/Calendar.tsx
-import { useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState9 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo3, useRef as useRef5, useState as useState9 } from "react";
 
 // src/components/Calendar/Calendar.css.ts
 var dayButton = "Calendar_dayButton__1uy43my8";
@@ -1852,15 +1873,15 @@ function Calendar({
   const [rovingDate, setRovingDate] = useState9(
     () => getFocusableDate(month, value, minDate, maxDate, isDateDisabled)
   );
-  const shouldFocusRef = useRef4(false);
-  const dayRefs = useRef4(/* @__PURE__ */ new Map());
-  useEffect2(() => {
+  const shouldFocusRef = useRef5(false);
+  const dayRefs = useRef5(/* @__PURE__ */ new Map());
+  useEffect3(() => {
     setRovingDate((prev) => {
       if (isSameMonth(prev, month)) return prev;
       return getFocusableDate(month, value, minDate, maxDate, isDateDisabled);
     });
   }, [month]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!shouldFocusRef.current) return;
     shouldFocusRef.current = false;
     dayRefs.current.get(dateKey(rovingDate))?.focus();
@@ -2027,7 +2048,7 @@ function Calendar({
 }
 
 // src/components/DatePicker/DatePicker.tsx
-import { useEffect as useEffect3, useRef as useRef5, useState as useState10 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState10 } from "react";
 import {
   FloatingFocusManager as FloatingFocusManager4,
   FloatingPortal as FloatingPortal5,
@@ -2141,11 +2162,11 @@ function DatePicker({
   const [inputText, setInputText] = useState10(
     () => value ? formatDate(value, locale) : ""
   );
-  const inputRef = useRef5(null);
-  useEffect3(() => {
+  const inputRef = useRef6(null);
+  useEffect4(() => {
     setInputText(value ? formatDate(value, locale) : "");
   }, [value, locale]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (open && value) {
       setMonth(startOfMonth2(value));
     }
@@ -2293,7 +2314,7 @@ function DatePicker({
 }
 
 // src/components/DateRangePicker/DateRangePicker.tsx
-import { useEffect as useEffect4, useState as useState11 } from "react";
+import { useEffect as useEffect5, useState as useState11 } from "react";
 import {
   FloatingFocusManager as FloatingFocusManager5,
   FloatingPortal as FloatingPortal6,
@@ -2418,13 +2439,13 @@ function DateRangePicker({
   const [endText, setEndText] = useState11(
     () => value.end ? formatDate2(value.end, locale) : ""
   );
-  useEffect4(() => {
+  useEffect5(() => {
     setStartText(value.start ? formatDate2(value.start, locale) : "");
   }, [value.start, locale]);
-  useEffect4(() => {
+  useEffect5(() => {
     setEndText(value.end ? formatDate2(value.end, locale) : "");
   }, [value.end, locale]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (open && value.start) {
       setMonth(startOfMonth3(value.start));
     }
@@ -2621,7 +2642,7 @@ function DateRangePicker({
 }
 
 // src/components/NumberInput/NumberInput.tsx
-import { forwardRef as forwardRef14, useEffect as useEffect5, useRef as useRef6, useState as useState12 } from "react";
+import { forwardRef as forwardRef14, useEffect as useEffect6, useRef as useRef7, useState as useState12 } from "react";
 import { useMergeRefs as useMergeRefs5 } from "@floating-ui/react";
 
 // src/components/NumberInput/NumberInput.css.ts
@@ -2666,10 +2687,10 @@ var NumberInput = forwardRef14(function NumberInput2({
     onChange?.(next);
   };
   const [inputText, setInputText] = useState12(() => formatValue(value));
-  useEffect5(() => {
+  useEffect6(() => {
     setInputText(formatValue(value));
   }, [value]);
-  const inputRef = useRef6(null);
+  const inputRef = useRef7(null);
   const mergedRef = useMergeRefs5([inputRef, ref]);
   const commitTypedValue = () => {
     const trimmed = inputText.trim();
@@ -2780,7 +2801,7 @@ var NumberInput = forwardRef14(function NumberInput2({
 });
 
 // src/components/Slider/Slider.tsx
-import { useRef as useRef7, useState as useState13 } from "react";
+import { useRef as useRef8, useState as useState13 } from "react";
 
 // src/components/Slider/Slider.css.ts
 var range2 = "Slider_range__2gl56i2";
@@ -2824,10 +2845,10 @@ function Slider({
     }
     onChange?.(next);
   };
-  const trackRef = useRef7(null);
-  const thumbRefs = useRef7({ single: null, 0: null, 1: null });
-  const dragThumbIndex = useRef7(null);
-  const isDragging = useRef7(false);
+  const trackRef = useRef8(null);
+  const thumbRefs = useRef8({ single: null, 0: null, 1: null });
+  const dragThumbIndex = useRef8(null);
+  const isDragging = useRef8(false);
   const valueFromClientX = (clientX) => {
     const trackEl = trackRef.current;
     if (!trackEl) return min;
@@ -2910,7 +2931,7 @@ function Slider({
     event.preventDefault();
     setThumbValue(index, next);
   };
-  const renderThumb = (index, current2, label3) => /* @__PURE__ */ jsx39(
+  const renderThumb = (index, current2, label4) => /* @__PURE__ */ jsx39(
     "span",
     {
       ref: (node) => {
@@ -2918,7 +2939,7 @@ function Slider({
       },
       role: "slider",
       tabIndex: disabled ? -1 : 0,
-      "aria-label": label3,
+      "aria-label": label4,
       "aria-valuemin": min,
       "aria-valuemax": max,
       "aria-valuenow": current2,
@@ -2954,7 +2975,7 @@ function Slider({
 }
 
 // src/components/Combobox/Combobox.tsx
-import { useEffect as useEffect6, useId as useId2, useRef as useRef8, useState as useState14 } from "react";
+import { useEffect as useEffect7, useId as useId2, useRef as useRef9, useState as useState14 } from "react";
 import {
   FloatingPortal as FloatingPortal7,
   autoUpdate as autoUpdate6,
@@ -3021,12 +3042,12 @@ function Combobox({
   const [open, setOpen] = useState14(false);
   const [inputText, setInputText] = useState14(() => multiple ? "" : labelFor(options, singleValue));
   const [activeIndex, setActiveIndex] = useState14(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!multiple) {
       setInputText(labelFor(options, singleValue));
     }
   }, [singleValue, multiple]);
-  const inputRef = useRef8(null);
+  const inputRef = useRef9(null);
   const listboxId = useId2();
   const filteredOptions = filterOptions(options, multiple ? inputText : open ? inputText : "");
   const { refs, floatingStyles, context } = useFloating7({
@@ -3206,8 +3227,386 @@ function Combobox({
   ] });
 }
 
+// src/components/TreeView/TreeView.tsx
+import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef10, useState as useState15 } from "react";
+import { vars as vars2 } from "@vesture/tokens";
+
+// src/components/TreeView/TreeView.css.ts
+var checkboxCell2 = "TreeView_checkboxCell__1c2l28y6";
+var chevron2 = "TreeView_chevron__1c2l28y4";
+var label3 = "TreeView_label__1c2l28y7";
+var loadingSlot = "TreeView_loadingSlot__1c2l28y5";
+var root4 = "TreeView_root__1c2l28y1";
+var row2 = "TreeView_row__1c2l28y2";
+var rowContent = "TreeView_rowContent__1c2l28y3";
+var scroller = "TreeView_scroller__1c2l28y0";
+
+// src/components/TreeView/TreeView.tsx
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+function getChildren(node, loadedChildren) {
+  return node.children ?? loadedChildren.get(node.id);
+}
+function collectDescendantIds(node, loadedChildren, acc) {
+  const children = getChildren(node, loadedChildren);
+  if (!children) return;
+  for (const child of children) {
+    acc.add(child.id);
+    collectDescendantIds(child, loadedChildren, acc);
+  }
+}
+function hasAnyDescendantSelected(node, loadedChildren, selected) {
+  const children = getChildren(node, loadedChildren);
+  if (!children) return false;
+  for (const child of children) {
+    if (selected.has(child.id)) return true;
+    if (hasAnyDescendantSelected(child, loadedChildren, selected)) return true;
+  }
+  return false;
+}
+function reconcileAncestors(nodeId, next, nodeIndex, loadedChildren) {
+  let parentId = nodeIndex.get(nodeId)?.parentId ?? null;
+  while (parentId) {
+    const entry = nodeIndex.get(parentId);
+    if (!entry) break;
+    const children = getChildren(entry.node, loadedChildren) ?? [];
+    const allChecked = children.length > 0 && children.every((c) => next.has(c.id));
+    if (allChecked) {
+      next.add(parentId);
+    } else {
+      next.delete(parentId);
+    }
+    parentId = entry.parentId;
+  }
+}
+function TreeView({
+  nodes,
+  expanded: controlledExpanded,
+  defaultExpanded,
+  onExpandedChange,
+  selected: controlledSelected,
+  defaultSelected,
+  onSelectedChange,
+  selectable = "none",
+  onLoadChildren,
+  height = 320,
+  rowHeight = 32
+}) {
+  const [uncontrolledExpanded, setUncontrolledExpanded] = useState15(
+    () => defaultExpanded ?? /* @__PURE__ */ new Set()
+  );
+  const expandedSet = controlledExpanded !== void 0 ? controlledExpanded : uncontrolledExpanded;
+  const setExpandedSet = (next) => {
+    if (controlledExpanded === void 0) {
+      setUncontrolledExpanded(next);
+    }
+    onExpandedChange?.(next);
+  };
+  const [uncontrolledSelected, setUncontrolledSelected] = useState15(
+    () => defaultSelected ?? /* @__PURE__ */ new Set()
+  );
+  const selectedSet = controlledSelected !== void 0 ? controlledSelected : uncontrolledSelected;
+  const setSelectedSet = (next) => {
+    if (controlledSelected === void 0) {
+      setUncontrolledSelected(next);
+    }
+    onSelectedChange?.(next);
+  };
+  const selectedSetRef = useRef10(selectedSet);
+  selectedSetRef.current = selectedSet;
+  const [loadedChildren, setLoadedChildren] = useState15(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [loadingIds, setLoadingIds] = useState15(() => /* @__PURE__ */ new Set());
+  const attemptedLoadRef = useRef10(/* @__PURE__ */ new Set());
+  const [scrollTop, setScrollTop] = useState15(0);
+  const [focusedId, setFocusedId] = useState15(
+    () => nodes[0]?.id ?? null
+  );
+  const shouldFocusRef = useRef10(false);
+  const containerRef = useRef10(null);
+  const rowRefs = useRef10(/* @__PURE__ */ new Map());
+  const nodeIndex = useMemo4(() => {
+    const map = /* @__PURE__ */ new Map();
+    function walk(list4, parentId) {
+      for (const node of list4) {
+        map.set(node.id, { node, parentId });
+        const children = getChildren(node, loadedChildren);
+        if (children) walk(children, node.id);
+      }
+    }
+    walk(nodes, null);
+    return map;
+  }, [nodes, loadedChildren]);
+  const flatNodes = useMemo4(() => {
+    const result = [];
+    function walk(list4, depth) {
+      for (const node of list4) {
+        const children = getChildren(node, loadedChildren);
+        const nodeHasChildren = children ? children.length > 0 : node.hasChildren === true;
+        const isExpanded = expandedSet.has(node.id);
+        result.push({ node, depth, hasChildren: nodeHasChildren, isExpanded });
+        if (isExpanded && children) {
+          walk(children, depth + 1);
+        }
+      }
+    }
+    walk(nodes, 0);
+    return result;
+  }, [nodes, expandedSet, loadedChildren]);
+  useEffect8(() => {
+    if (focusedId !== null && flatNodes.some((f) => f.node.id === focusedId)) {
+      return;
+    }
+    setFocusedId(flatNodes[0]?.node.id ?? null);
+  }, [flatNodes, focusedId]);
+  useEffect8(() => {
+    if (!shouldFocusRef.current || focusedId === null) return;
+    shouldFocusRef.current = false;
+    rowRefs.current.get(focusedId)?.focus();
+  }, [focusedId, scrollTop]);
+  async function loadChildrenFor(node) {
+    if (!onLoadChildren) return;
+    if (attemptedLoadRef.current.has(node.id)) return;
+    attemptedLoadRef.current.add(node.id);
+    setLoadingIds((prev) => new Set(prev).add(node.id));
+    try {
+      const loaded = await onLoadChildren(node);
+      setLoadedChildren((prev) => new Map(prev).set(node.id, loaded));
+      if (selectable === "multi" && selectedSetRef.current.has(node.id)) {
+        setSelectedSet(
+          (() => {
+            const next = new Set(selectedSetRef.current);
+            for (const child of loaded) next.add(child.id);
+            return next;
+          })()
+        );
+      }
+    } finally {
+      setLoadingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(node.id);
+        return next;
+      });
+    }
+  }
+  function expandNode(node) {
+    const next = new Set(expandedSet);
+    next.add(node.id);
+    setExpandedSet(next);
+    const children = getChildren(node, loadedChildren);
+    if (node.hasChildren === true && children === void 0) {
+      void loadChildrenFor(node);
+    }
+  }
+  function collapseNode(node) {
+    const next = new Set(expandedSet);
+    next.delete(node.id);
+    setExpandedSet(next);
+  }
+  function toggleExpand(flat) {
+    if (flat.isExpanded) {
+      collapseNode(flat.node);
+    } else {
+      expandNode(flat.node);
+    }
+  }
+  function toggleSelect(node) {
+    if (selectable === "none") return;
+    if (selectable === "single") {
+      const isSelected = selectedSet.has(node.id);
+      setSelectedSet(isSelected ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([node.id]));
+      return;
+    }
+    const next = new Set(selectedSet);
+    const willSelect = !next.has(node.id);
+    const descendants = /* @__PURE__ */ new Set();
+    collectDescendantIds(node, loadedChildren, descendants);
+    if (willSelect) {
+      next.add(node.id);
+      descendants.forEach((id) => next.add(id));
+    } else {
+      next.delete(node.id);
+      descendants.forEach((id) => next.delete(id));
+    }
+    reconcileAncestors(node.id, next, nodeIndex, loadedChildren);
+    setSelectedSet(next);
+  }
+  function moveFocusTo(id) {
+    const index = flatNodes.findIndex((f) => f.node.id === id);
+    if (index === -1) return;
+    const rowTop = index * rowHeight;
+    const rowBottom = rowTop + rowHeight;
+    let scrolled = false;
+    if (containerRef.current) {
+      if (rowTop < containerRef.current.scrollTop) {
+        containerRef.current.scrollTop = rowTop;
+        scrolled = true;
+      } else if (rowBottom > containerRef.current.scrollTop + height) {
+        containerRef.current.scrollTop = rowBottom - height;
+        scrolled = true;
+      }
+    }
+    setFocusedId(id);
+    const target = rowRefs.current.get(id);
+    if (target && !scrolled) {
+      target.focus();
+    } else {
+      shouldFocusRef.current = true;
+    }
+  }
+  function handleKeyDown(event, flat) {
+    const { node, depth, hasChildren, isExpanded } = flat;
+    const index = flatNodes.findIndex((f) => f.node.id === node.id);
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const next = flatNodes[index + 1];
+        if (next) moveFocusTo(next.node.id);
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const prev = flatNodes[index - 1];
+        if (prev) moveFocusTo(prev.node.id);
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        if (flatNodes[0]) moveFocusTo(flatNodes[0].node.id);
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        const last = flatNodes[flatNodes.length - 1];
+        if (last) moveFocusTo(last.node.id);
+        break;
+      }
+      case "ArrowRight": {
+        if (!hasChildren) break;
+        event.preventDefault();
+        if (!isExpanded) {
+          expandNode(node);
+        } else {
+          const next = flatNodes[index + 1];
+          if (next && next.depth === depth + 1) moveFocusTo(next.node.id);
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        event.preventDefault();
+        if (isExpanded && hasChildren) {
+          collapseNode(node);
+        } else {
+          const parentId = nodeIndex.get(node.id)?.parentId;
+          if (parentId) moveFocusTo(parentId);
+        }
+        break;
+      }
+      case " ":
+      case "Spacebar": {
+        if (selectable === "none") break;
+        event.preventDefault();
+        toggleSelect(node);
+        break;
+      }
+      default:
+        return;
+    }
+  }
+  const totalHeight = flatNodes.length * rowHeight;
+  const overscan = 5;
+  const visibleCount = Math.ceil(height / rowHeight) + overscan * 2;
+  const startIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
+  const endIndex = Math.min(flatNodes.length, startIndex + visibleCount);
+  const visibleFlatNodes = flatNodes.slice(startIndex, endIndex);
+  return /* @__PURE__ */ jsx41(
+    "div",
+    {
+      ref: containerRef,
+      className: scroller,
+      style: { height },
+      onScroll: (e) => setScrollTop(e.currentTarget.scrollTop),
+      role: "tree",
+      children: /* @__PURE__ */ jsx41("div", { className: root4, style: { height: totalHeight }, children: visibleFlatNodes.map((flat, i) => {
+        const index = startIndex + i;
+        const { node, depth, hasChildren, isExpanded } = flat;
+        const isLoading = loadingIds.has(node.id);
+        const isSelected = selectedSet.has(node.id);
+        const isIndeterminate = selectable === "multi" && !isSelected && hasAnyDescendantSelected(node, loadedChildren, selectedSet);
+        return /* @__PURE__ */ jsx41(
+          "div",
+          {
+            ref: (el) => {
+              if (el) {
+                rowRefs.current.set(node.id, el);
+              } else {
+                rowRefs.current.delete(node.id);
+              }
+            },
+            className: row2,
+            style: { top: index * rowHeight, height: rowHeight },
+            role: "treeitem",
+            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-level": depth + 1,
+            "aria-selected": selectable !== "none" ? isSelected : void 0,
+            tabIndex: node.id === focusedId ? 0 : -1,
+            onFocus: () => setFocusedId(node.id),
+            onKeyDown: (e) => handleKeyDown(e, flat),
+            onClick: () => setFocusedId(node.id),
+            children: /* @__PURE__ */ jsxs24(
+              "div",
+              {
+                className: rowContent,
+                style: { paddingLeft: `calc(${depth} * ${vars2.space.lg})` },
+                children: [
+                  hasChildren ? isLoading ? /* @__PURE__ */ jsx41("span", { className: loadingSlot, children: /* @__PURE__ */ jsx41(Spinner, { size: "sm" }) }) : /* @__PURE__ */ jsx41(
+                    "button",
+                    {
+                      type: "button",
+                      className: chevron2,
+                      "data-expanded": isExpanded || void 0,
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        toggleExpand(flat);
+                      },
+                      "aria-hidden": "true",
+                      tabIndex: -1,
+                      children: "\u203A"
+                    }
+                  ) : /* @__PURE__ */ jsx41("span", { className: chevron2, "aria-hidden": "true" }),
+                  selectable === "multi" ? /* @__PURE__ */ jsx41(
+                    "span",
+                    {
+                      className: checkboxCell2,
+                      onMouseDown: (e) => e.preventDefault(),
+                      onClick: (e) => e.stopPropagation(),
+                      children: /* @__PURE__ */ jsx41(
+                        Checkbox,
+                        {
+                          checked: isSelected,
+                          indeterminate: isIndeterminate,
+                          onChange: () => toggleSelect(node),
+                          tabIndex: -1,
+                          "aria-label": `Select ${typeof node.label === "string" ? node.label : node.id}`
+                        }
+                      )
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx41("span", { className: label3, "data-selected": isSelected || void 0, children: node.label })
+                ]
+              }
+            )
+          },
+          node.id
+        );
+      }) })
+    }
+  );
+}
+
 // src/index.ts
-import { vars as vars2, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
+import { vars as vars3, defaultThemeClass, defaultThemeVars } from "@vesture/tokens";
 export {
   Accordion2 as Accordion,
   AccordionContent,
@@ -3249,9 +3648,10 @@ export {
   Textarea,
   ToastProvider,
   Tooltip,
+  TreeView,
   defaultThemeClass,
   defaultThemeVars,
   useToast,
-  vars2 as vars
+  vars3 as vars
 };
 //# sourceMappingURL=index.js.map