@dxos/react-ui 0.6.4 → 0.6.5-staging.435ed25

package/dist/lib/browser/index.mjs

@@ -1102,7 +1102,7 @@ var Input = {
   DescriptionAndValidation
 };
 
-// packages/ui/react-ui/src/components/List/List.tsx
+// packages/ui/react-ui/src/components/Lists/List.tsx
 import { CaretDown, CaretRight } from "@phosphor-icons/react";
 import { Slot as Slot8 } from "@radix-ui/react-slot";
 import React17, { forwardRef as forwardRef14 } from "react";
@@ -1119,7 +1119,7 @@ var DensityProvider = ({ density, children }) => /* @__PURE__ */ React16.createE
   }
 }, children);
 
-// packages/ui/react-ui/src/components/List/List.tsx
+// packages/ui/react-ui/src/components/Lists/List.tsx
 var List = /* @__PURE__ */ forwardRef14(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
@@ -1205,7 +1205,7 @@ var ListItem = {
   MockOpenTrigger: MockListItemOpenTrigger
 };
 
-// packages/ui/react-ui/src/components/List/Tree.tsx
+// packages/ui/react-ui/src/components/Lists/Tree.tsx
 import React18, { forwardRef as forwardRef15 } from "react";
 var TreeRoot = /* @__PURE__ */ forwardRef15((props, forwardedRef) => {
   return /* @__PURE__ */ React18.createElement(List, {
@@ -1244,13 +1244,96 @@ var TreeItem = {
   MockOpenTrigger: MockTreeItemOpenTrigger
 };
 
-// packages/ui/react-ui/src/components/Main/Main.tsx
-import { createContext as createContext8 } from "@radix-ui/react-context";
-import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
+// packages/ui/react-ui/src/components/Lists/Treegrid.tsx
+import { useFocusableGroup, useArrowNavigationGroup } from "@fluentui/react-tabster";
+import { createContextScope } from "@radix-ui/react-context";
 import { Primitive as Primitive8 } from "@radix-ui/react-primitive";
 import { Slot as Slot9 } from "@radix-ui/react-slot";
 import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React19, { forwardRef as forwardRef16, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } from "react";
+import React19, { forwardRef as forwardRef16 } from "react";
+var TREEGRID_ROW_NAME = "TreegridRow";
+var [createTreegridRowContext, createTreegridRowScope] = createContextScope(TREEGRID_ROW_NAME, []);
+var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
+var PATH_SEPARATOR = "~";
+var PARENT_OF_SEPARATOR = " ";
+var TreegridRoot = /* @__PURE__ */ forwardRef16(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: "vertical"
+  });
+  return /* @__PURE__ */ React19.createElement(Root3, {
+    role: "treegrid",
+    ...arrowNavigationAttrs,
+    ...props,
+    className: tx("treegrid.root", "treegrid", {}, classNames),
+    style: {
+      ...style,
+      gridTemplateColumns
+    },
+    ref: forwardedRef
+  }, children);
+});
+var TreegridRow = /* @__PURE__ */ forwardRef16(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  const Root3 = asChild ? Slot9 : Primitive8.div;
+  const pathParts = id.split(PATH_SEPARATOR);
+  const level = pathParts.length - 1;
+  const [open, onOpenChange] = useControllableState2({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
+  });
+  const focusableGroupAttrs = useFocusableGroup();
+  return /* @__PURE__ */ React19.createElement(TreegridRowProvider, {
+    open,
+    onOpenChange,
+    scope: __treegridRowScope
+  }, /* @__PURE__ */ React19.createElement(Root3, {
+    role: "row",
+    "aria-level": level,
+    className: tx("treegrid.row", "treegrid__row", {
+      level
+    }, classNames),
+    ...parentOf && {
+      "aria-expanded": open,
+      "aria-owns": parentOf
+    },
+    tabIndex: 0,
+    ...focusableGroupAttrs,
+    ...props,
+    id,
+    ref: forwardedRef
+  }, children));
+});
+var TreegridCell = /* @__PURE__ */ forwardRef16(({ classNames, children, indent, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return /* @__PURE__ */ React19.createElement("div", {
+    role: "gridcell",
+    className: tx("treegrid.cell", "treegrid__cell", {
+      indent
+    }, classNames),
+    ...props,
+    ref: forwardedRef
+  }, children);
+});
+var Treegrid = {
+  Root: TreegridRoot,
+  Row: TreegridRow,
+  Cell: TreegridCell,
+  PARENT_OF_SEPARATOR,
+  PATH_SEPARATOR,
+  createTreegridRowScope,
+  useTreegridRowContext
+};
+
+// packages/ui/react-ui/src/components/Main/Main.tsx
+import { createContext as createContext8 } from "@radix-ui/react-context";
+import { Root as DialogRoot2, DialogContent as DialogContent2 } from "@radix-ui/react-dialog";
+import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
+import { Slot as Slot10 } from "@radix-ui/react-slot";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
+import React20, { forwardRef as forwardRef17, useCallback as useCallback3, useEffect as useEffect4, useRef, useState as useState4 } from "react";
 import { log } from "@dxos/log";
 import { useMediaQuery, useForwardedRef } from "@dxos/react-hooks";
 
@@ -1413,12 +1496,12 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
-  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState2({
+  const [navigationSidebarOpen = isLg, setNavigationSidebarOpen] = useControllableState3({
     prop: propsNavigationSidebarOpen,
     defaultProp: defaultNavigationSidebarOpen,
     onChange: onNavigationSidebarOpenChange
   });
-  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState2({
+  const [complementarySidebarOpen = false, setComplementarySidebarOpen] = useControllableState3({
     prop: propsComplementarySidebarOpen,
     defaultProp: defaultComplementarySidebarOpen,
     onChange: onComplementarySidebarOpenChange
@@ -1441,7 +1524,7 @@ var MainRoot = ({ navigationSidebarOpen: propsNavigationSidebarOpen, defaultNavi
   }, [
     handleResize
   ]);
-  return /* @__PURE__ */ React19.createElement(MainProvider, {
+  return /* @__PURE__ */ React20.createElement(MainProvider, {
     ...props,
     navigationSidebarOpen,
     setNavigationSidebarOpen,
@@ -1454,7 +1537,7 @@ MainRoot.displayName = MAIN_ROOT_NAME;
 var handleOpenAutoFocus = (event) => {
   !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
 };
-var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
+var MainSidebar = /* @__PURE__ */ forwardRef17(({ classNames, children, swipeToDismiss, onOpenAutoFocus, open, resizing, setOpen, side, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
@@ -1464,11 +1547,11 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
   useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
     onDismiss: () => setOpen(false)
   });
-  const Root3 = isLg ? Primitive8.div : DialogContent2;
-  return /* @__PURE__ */ React19.createElement(DialogRoot2, {
+  const Root3 = isLg ? Primitive9.div : DialogContent2;
+  return /* @__PURE__ */ React20.createElement(DialogRoot2, {
     open,
     modal: false
-  }, /* @__PURE__ */ React19.createElement(Root3, {
+  }, /* @__PURE__ */ React20.createElement(Root3, {
     ...!isLg && {
       forceMount: true,
       tabIndex: -1,
@@ -1483,13 +1566,13 @@ var MainSidebar = /* @__PURE__ */ forwardRef16(({ classNames, children, swipeToD
       inert: "true"
     },
     ref
-  }, /* @__PURE__ */ React19.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React20.createElement(ElevationProvider, {
     elevation: "group"
   }, children)));
 });
-var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var MainNavigationSidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { navigationSidebarOpen, setNavigationSidebarOpen, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
-  return /* @__PURE__ */ React19.createElement(MainSidebar, {
+  return /* @__PURE__ */ React20.createElement(MainSidebar, {
     ...props,
     open: navigationSidebarOpen,
     setOpen: setNavigationSidebarOpen,
@@ -1499,9 +1582,9 @@ var MainNavigationSidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) =
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef) => {
+var MainComplementarySidebar = /* @__PURE__ */ forwardRef17((props, forwardedRef) => {
   const { complementarySidebarOpen, setComplementarySidebarOpen, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
-  return /* @__PURE__ */ React19.createElement(MainSidebar, {
+  return /* @__PURE__ */ React20.createElement(MainSidebar, {
     ...props,
     open: complementarySidebarOpen,
     setOpen: setComplementarySidebarOpen,
@@ -1511,11 +1594,11 @@ var MainComplementarySidebar = /* @__PURE__ */ forwardRef16((props, forwardedRef
   });
 });
 MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
-var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
+var MainContent = /* @__PURE__ */ forwardRef17(({ asChild, classNames, bounce, children, ...props }, forwardedRef) => {
   const { navigationSidebarOpen, complementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot9 : "main";
-  return /* @__PURE__ */ React19.createElement(Root3, {
+  const Root3 = asChild ? Slot10 : "main";
+  return /* @__PURE__ */ React20.createElement(Root3, {
     ...props,
     "data-sidebar-inline-start-state": navigationSidebarOpen ? "open" : "closed",
     "data-sidebar-inline-end-state": complementarySidebarOpen ? "open" : "closed",
@@ -1526,13 +1609,13 @@ var MainContent = /* @__PURE__ */ forwardRef16(({ asChild, classNames, bounce, c
   }, children);
 });
 MainContent.displayName = MAIN_NAME;
-var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
+var MainOverlay = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
   const [isLg] = useMediaQuery("lg", {
     ssr: false
   });
   const { navigationSidebarOpen, setNavigationSidebarOpen, complementarySidebarOpen, setComplementarySidebarOpen } = useMainContext(MAIN_NAME);
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React19.createElement("div", {
+  return /* @__PURE__ */ React20.createElement("div", {
     onClick: () => {
       setNavigationSidebarOpen(false);
       setComplementarySidebarOpen(false);
@@ -1548,10 +1631,10 @@ var MainOverlay = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwar
     ref: forwardedRef
   });
 });
-var MainNotch = /* @__PURE__ */ forwardRef16(({ classNames, ...props }, forwardedRef) => {
+var MainNotch = /* @__PURE__ */ forwardRef17(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { navigationSidebarOpen } = useMainContext(MAIN_NAME);
-  return /* @__PURE__ */ React19.createElement("nav", {
+  return /* @__PURE__ */ React20.createElement("nav", {
     ...props,
     "data-nav-sidebar-state": navigationSidebarOpen ? "open" : "closed",
     className: tx("main.notch", "main__notch", {}, classNames),
@@ -1569,22 +1652,22 @@ var Main = {
 
 // packages/ui/react-ui/src/components/Message/Message.tsx
 import { createContext as createContext9 } from "@radix-ui/react-context";
-import { Primitive as Primitive9 } from "@radix-ui/react-primitive";
-import { Slot as Slot10 } from "@radix-ui/react-slot";
-import React20, { forwardRef as forwardRef17 } from "react";
+import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
+import { Slot as Slot11 } from "@radix-ui/react-slot";
+import React21, { forwardRef as forwardRef18 } from "react";
 import { useId as useId3 } from "@dxos/react-hooks";
 var MESSAGE_NAME = "Message";
 var [MessageProvider, useMessageContext] = createContext9(MESSAGE_NAME);
-var MessageRoot = /* @__PURE__ */ forwardRef17(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
+var MessageRoot = /* @__PURE__ */ forwardRef18(({ asChild, valence, elevation: propsElevation, className, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const titleId = useId3("message__title", propsTitleId);
   const descriptionId = useId3("message__description", propsDescriptionId);
   const elevation = useElevationContext(propsElevation);
-  const Root3 = asChild ? Slot10 : Primitive9.div;
-  return /* @__PURE__ */ React20.createElement(MessageProvider, {
+  const Root3 = asChild ? Slot11 : Primitive10.div;
+  return /* @__PURE__ */ React21.createElement(MessageProvider, {
     titleId,
     descriptionId
-  }, /* @__PURE__ */ React20.createElement(Root3, {
+  }, /* @__PURE__ */ React21.createElement(Root3, {
     ...props,
     className: tx("message.root", "message", {
       valence,
@@ -1597,11 +1680,11 @@ var MessageRoot = /* @__PURE__ */ forwardRef17(({ asChild, valence, elevation: p
 });
 MessageRoot.displayName = MESSAGE_NAME;
 var MESSAGE_TITLE_NAME = "MessageTitle";
-var MessageTitle = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageTitle = /* @__PURE__ */ forwardRef18(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { titleId } = useMessageContext(MESSAGE_TITLE_NAME);
-  const Root3 = asChild ? Slot10 : Primitive9.h2;
-  return /* @__PURE__ */ React20.createElement(Root3, {
+  const Root3 = asChild ? Slot11 : Primitive10.h2;
+  return /* @__PURE__ */ React21.createElement(Root3, {
     ...props,
     className: tx("message.title", "message__title", {}, className),
     id: titleId,
@@ -1610,11 +1693,11 @@ var MessageTitle = /* @__PURE__ */ forwardRef17(({ asChild, className, children,
 });
 MessageTitle.displayName = MESSAGE_TITLE_NAME;
 var MESSAGE_BODY_NAME = "MessageBody";
-var MessageBody = /* @__PURE__ */ forwardRef17(({ asChild, className, children, ...props }, forwardedRef) => {
+var MessageBody = /* @__PURE__ */ forwardRef18(({ asChild, className, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
-  const Root3 = asChild ? Slot10 : Primitive9.p;
-  return /* @__PURE__ */ React20.createElement(Root3, {
+  const Root3 = asChild ? Slot11 : Primitive10.p;
+  return /* @__PURE__ */ React21.createElement(Root3, {
     ...props,
     className: tx("message.body", "message__body", {}, className),
     id: descriptionId,
@@ -1630,38 +1713,38 @@ var Message = {
 
 // packages/ui/react-ui/src/components/Popover/Popover.tsx
 import { Root as PopoverRootPrimitive, PopoverContent as PopoverContentPrimitive, PopoverTrigger as PopoverTriggerPrimitive, PopoverAnchor as PopoverAnchorPrimitive, PopoverPortal as PopoverPortalPrimitive, PopoverArrow as PopoverArrowPrimitive, PopoverClose as PopoverClosePrimitive } from "@radix-ui/react-popover";
-import { Primitive as Primitive10 } from "@radix-ui/react-primitive";
-import { Slot as Slot11 } from "@radix-ui/react-slot";
-import React21, { forwardRef as forwardRef18 } from "react";
+import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
+import { Slot as Slot12 } from "@radix-ui/react-slot";
+import React22, { forwardRef as forwardRef19 } from "react";
 var PopoverRoot = PopoverRootPrimitive;
 var PopoverPortal = PopoverPortalPrimitive;
 var PopoverTrigger = PopoverTriggerPrimitive;
 var PopoverAnchor = PopoverAnchorPrimitive;
 var PopoverClose = PopoverClosePrimitive;
-var PopoverArrow = /* @__PURE__ */ forwardRef18(({ classNames, ...props }, forwardedRef) => {
+var PopoverArrow = /* @__PURE__ */ forwardRef19(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(PopoverArrowPrimitive, {
+  return /* @__PURE__ */ React22.createElement(PopoverArrowPrimitive, {
     ...props,
     className: tx("popover.arrow", "popover__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var PopoverContent = /* @__PURE__ */ forwardRef18(({ classNames, children, ...props }, forwardedRef) => {
+var PopoverContent = /* @__PURE__ */ forwardRef19(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React21.createElement(PopoverContentPrimitive, {
+  return /* @__PURE__ */ React22.createElement(PopoverContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
     className: tx("popover.content", "popover", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React21.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React22.createElement(ElevationProvider, {
     elevation: "chrome"
   }, children));
 });
-var PopoverViewport = /* @__PURE__ */ forwardRef18(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
+var PopoverViewport = /* @__PURE__ */ forwardRef19(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot11 : Primitive10.div;
-  return /* @__PURE__ */ React21.createElement(Root3, {
+  const Root3 = asChild ? Slot12 : Primitive11.div;
+  return /* @__PURE__ */ React22.createElement(Root3, {
     ...props,
     className: tx("popover.viewport", "popover__viewport", {
       constrainInline,
@@ -1682,17 +1765,17 @@ var Popover = {
 };
 
 // packages/ui/react-ui/src/components/Status/Status.tsx
-import React22, { forwardRef as forwardRef19 } from "react";
-var Status = /* @__PURE__ */ forwardRef19(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
+import React23, { forwardRef as forwardRef20 } from "react";
+var Status = /* @__PURE__ */ forwardRef20(({ classNames, children, progress = 0, indeterminate, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React22.createElement("span", {
+  return /* @__PURE__ */ React23.createElement("span", {
     role: "status",
     ...props,
     className: tx("status.root", "status", {
       indeterminate
     }, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React22.createElement("span", {
+  }, /* @__PURE__ */ React23.createElement("span", {
     role: "none",
     className: tx("status.bar", "status__bar", {
       indeterminate
@@ -1707,43 +1790,43 @@ var Status = /* @__PURE__ */ forwardRef19(({ classNames, children, progress = 0,
 
 // packages/ui/react-ui/src/components/ScrollArea/ScrollArea.tsx
 import { Root as ScrollAreaPrimitiveRoot, Viewport as ScrollAreaPrimitiveViewport, Scrollbar as ScrollAreaPrimitiveScrollbar, Thumb as ScrollAreaPrimitiveThumb, Corner as ScrollAreaPrimitiveCorner } from "@radix-ui/react-scroll-area";
-import React23, { forwardRef as forwardRef20 } from "react";
-var ScrollAreaRoot = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+import React24, { forwardRef as forwardRef21 } from "react";
+var ScrollAreaRoot = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveRoot, {
+  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveRoot, {
     ...props,
     className: tx("scrollArea.root", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaViewport = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaViewport = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveViewport, {
+  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveViewport, {
     ...props,
     className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef20(({ classNames, variant = "fine", ...props }, forwardedRef) => {
+var ScrollAreaScrollbar = /* @__PURE__ */ forwardRef21(({ classNames, variant = "fine", ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveScrollbar, {
+  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveScrollbar, {
     "data-variant": variant,
     ...props,
     className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaThumb = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaThumb = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveThumb, {
+  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveThumb, {
     ...props,
     className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
     ref: forwardedRef
   });
 });
-var ScrollAreaCorner = /* @__PURE__ */ forwardRef20(({ classNames, ...props }, forwardedRef) => {
+var ScrollAreaCorner = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React23.createElement(ScrollAreaPrimitiveCorner, {
+  return /* @__PURE__ */ React24.createElement(ScrollAreaPrimitiveCorner, {
     ...props,
     className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
     ref: forwardedRef
@@ -1760,99 +1843,99 @@ var ScrollArea = {
 // packages/ui/react-ui/src/components/Select/Select.tsx
 import { CaretDown as CaretDown2, CaretUp, Check as Check2 } from "@phosphor-icons/react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import React24, { forwardRef as forwardRef21 } from "react";
+import React25, { forwardRef as forwardRef22 } from "react";
 var SelectRoot = SelectPrimitive.Root;
 var SelectTrigger = SelectPrimitive.Trigger;
 var SelectValue = SelectPrimitive.Value;
 var SelectIcon = SelectPrimitive.Icon;
 var SelectPortal = SelectPrimitive.Portal;
-var SelectTriggerButton = /* @__PURE__ */ forwardRef21(({ children, placeholder, ...props }, forwardedRef) => {
+var SelectTriggerButton = /* @__PURE__ */ forwardRef22(({ children, placeholder, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Trigger, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Trigger, {
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React24.createElement(Button, props, /* @__PURE__ */ React24.createElement(SelectPrimitive.Value, {
+  }, /* @__PURE__ */ React25.createElement(Button, props, /* @__PURE__ */ React25.createElement(SelectPrimitive.Value, {
     placeholder
-  }, children), /* @__PURE__ */ React24.createElement(SelectPrimitive.Icon, {
+  }, children), /* @__PURE__ */ React25.createElement(SelectPrimitive.Icon, {
     asChild: true
-  }, /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("span", {
+  }, /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement("span", {
     className: "w-1"
-  }), /* @__PURE__ */ React24.createElement(CaretDown2, {
+  }), /* @__PURE__ */ React25.createElement(CaretDown2, {
     className: tx("select.triggerIcon", "select__trigger__icon", {}),
     weight: "bold"
   })))));
 });
-var SelectContent = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
+var SelectContent = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Content, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Content, {
     ...props,
     className: tx("select.content", "select__content", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollUpButton2 = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollUpButton, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollUpButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React24.createElement(CaretUp, {
+  }, children ?? /* @__PURE__ */ React25.createElement(CaretUp, {
     weight: "bold"
   }));
 });
-var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
+var SelectScrollDownButton2 = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.SelectScrollDownButton, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.SelectScrollDownButton, {
     ...props,
     className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
     ref: forwardedRef
-  }, children ?? /* @__PURE__ */ React24.createElement(CaretDown2, {
+  }, children ?? /* @__PURE__ */ React25.createElement(CaretDown2, {
     weight: "bold"
   }));
 });
 var SelectViewport = SelectPrimitive.Viewport;
-var SelectItem = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var SelectItem = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
   });
 });
 var SelectItemText = SelectPrimitive.ItemText;
-var SelectItemIndicator = /* @__PURE__ */ forwardRef21(({ classNames, children, ...props }, forwardedRef) => {
+var SelectItemIndicator = /* @__PURE__ */ forwardRef22(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemIndicator, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
     ...props,
     className: tx("select.itemIndicator", "option__indicator", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var SelectOption = /* @__PURE__ */ forwardRef21(({ children, classNames, ...props }, forwardedRef) => {
+var SelectOption = /* @__PURE__ */ forwardRef22(({ children, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Item, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Item, {
     ...props,
     className: tx("select.item", "option", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React24.createElement(SelectPrimitive.ItemIndicator, {
+  }, /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ React25.createElement(SelectPrimitive.ItemIndicator, {
     className: tx("select.itemIndicator", "option__indicator", {})
-  }, /* @__PURE__ */ React24.createElement(Check2, {
+  }, /* @__PURE__ */ React25.createElement(Check2, {
     weight: "bold"
   })));
 });
 var SelectGroup = SelectPrimitive.Group;
 var SelectLabel = SelectPrimitive.Label;
-var SelectSeparator = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var SelectSeparator = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Separator, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Separator, {
     ...props,
     className: tx("select.separator", "select__separator", {}, classNames),
     ref: forwardedRef
   });
 });
-var SelectArrow = /* @__PURE__ */ forwardRef21(({ classNames, ...props }, forwardedRef) => {
+var SelectArrow = /* @__PURE__ */ forwardRef22(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React24.createElement(SelectPrimitive.Arrow, {
+  return /* @__PURE__ */ React25.createElement(SelectPrimitive.Arrow, {
     ...props,
     className: tx("select.arrow", "select__arrow", {}, classNames),
     ref: forwardedRef
@@ -1881,10 +1964,10 @@ var Select = {
 
 // packages/ui/react-ui/src/components/Separator/Separator.tsx
 import { Separator as SeparatorPrimitive } from "@radix-ui/react-separator";
-import React25 from "react";
+import React26 from "react";
 var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React25.createElement(SeparatorPrimitive, {
+  return /* @__PURE__ */ React26.createElement(SeparatorPrimitive, {
     orientation,
     ...props,
     className: tx("separator.root", "separator", {
@@ -1894,13 +1977,13 @@ var Separator4 = ({ classNames, orientation = "horizontal", ...props }) => {
 };
 
 // packages/ui/react-ui/src/components/Tag/Tag.tsx
-import { Primitive as Primitive11 } from "@radix-ui/react-primitive";
-import { Slot as Slot12 } from "@radix-ui/react-slot";
-import React26, { forwardRef as forwardRef22 } from "react";
-var Tag = /* @__PURE__ */ forwardRef22(({ asChild, palette, classNames, ...props }, forwardedRef) => {
+import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
+import { Slot as Slot13 } from "@radix-ui/react-slot";
+import React27, { forwardRef as forwardRef23 } from "react";
+var Tag = /* @__PURE__ */ forwardRef23(({ asChild, palette, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot12 : Primitive11.span;
-  return /* @__PURE__ */ React26.createElement(Root3, {
+  const Root3 = asChild ? Slot13 : Primitive12.span;
+  return /* @__PURE__ */ React27.createElement(Root3, {
     ...props,
     className: tx("tag.root", "tag", {
       palette
@@ -1910,61 +1993,61 @@ var Tag = /* @__PURE__ */ forwardRef22(({ asChild, palette, classNames, ...props
 });
 
 // packages/ui/react-ui/src/components/Toast/Toast.tsx
-import { Primitive as Primitive12 } from "@radix-ui/react-primitive";
-import { Slot as Slot13 } from "@radix-ui/react-slot";
+import { Primitive as Primitive13 } from "@radix-ui/react-primitive";
+import { Slot as Slot14 } from "@radix-ui/react-slot";
 import { ToastProvider as ToastProviderPrimitive, ToastViewport as ToastViewportPrimitive, Root as ToastRootPrimitive, ToastTitle as ToastTitlePrimitive, ToastDescription as ToastDescriptionPrimitive, ToastAction as ToastActionPrimitive, ToastClose as ToastClosePrimitive } from "@radix-ui/react-toast";
-import React27, { forwardRef as forwardRef23 } from "react";
+import React28, { forwardRef as forwardRef24 } from "react";
 var ToastProvider = ToastProviderPrimitive;
-var ToastViewport = /* @__PURE__ */ forwardRef23(({ classNames, ...props }, forwardedRef) => {
+var ToastViewport = /* @__PURE__ */ forwardRef24(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ToastViewportPrimitive, {
+  return /* @__PURE__ */ React28.createElement(ToastViewportPrimitive, {
     className: tx("toast.viewport", "toast-viewport", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastRoot = /* @__PURE__ */ forwardRef23(({ classNames, children, ...props }, forwardedRef) => {
+var ToastRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React27.createElement(ToastRootPrimitive, {
+  return /* @__PURE__ */ React28.createElement(ToastRootPrimitive, {
     ...props,
     className: tx("toast.root", "toast", {}, classNames),
     ref: forwardedRef
-  }, /* @__PURE__ */ React27.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React28.createElement(ElevationProvider, {
     elevation: "chrome"
-  }, /* @__PURE__ */ React27.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React28.createElement(DensityProvider, {
     density: "fine"
   }, children)));
 });
-var ToastBody = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastBody = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot13 : Primitive12.div;
-  return /* @__PURE__ */ React27.createElement(Root3, {
+  const Root3 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React28.createElement(Root3, {
     ...props,
     className: tx("toast.body", "toast__body", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastTitle = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastTitle = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot13 : ToastTitlePrimitive;
-  return /* @__PURE__ */ React27.createElement(Root3, {
+  const Root3 = asChild ? Slot14 : ToastTitlePrimitive;
+  return /* @__PURE__ */ React28.createElement(Root3, {
     ...props,
     className: tx("toast.title", "toast__title", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastDescription = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastDescription = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot13 : ToastDescriptionPrimitive;
-  return /* @__PURE__ */ React27.createElement(Root3, {
+  const Root3 = asChild ? Slot14 : ToastDescriptionPrimitive;
+  return /* @__PURE__ */ React28.createElement(Root3, {
     ...props,
     className: tx("toast.description", "toast__description", {}, classNames),
     ref: forwardedRef
   });
 });
-var ToastActions = /* @__PURE__ */ forwardRef23(({ asChild, classNames, ...props }, forwardedRef) => {
+var ToastActions = /* @__PURE__ */ forwardRef24(({ asChild, classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  const Root3 = asChild ? Slot13 : Primitive12.div;
-  return /* @__PURE__ */ React27.createElement(Root3, {
+  const Root3 = asChild ? Slot14 : Primitive13.div;
+  return /* @__PURE__ */ React28.createElement(Root3, {
     ...props,
     className: tx("toast.actions", "toast__actions", {}, classNames),
     ref: forwardedRef
@@ -1986,47 +2069,47 @@ var Toast = {
 
 // packages/ui/react-ui/src/components/Toolbar/Toolbar.tsx
 import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
-import React28, { forwardRef as forwardRef24 } from "react";
-var ToolbarRoot = /* @__PURE__ */ forwardRef24(({ classNames, children, ...props }, forwardedRef) => {
+import React29, { forwardRef as forwardRef25 } from "react";
+var ToolbarRoot = /* @__PURE__ */ forwardRef25(({ classNames, children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Root, {
+  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Root, {
     ...props,
     className: tx("toolbar.root", "toolbar", {}, classNames),
     ref: forwardedRef
   }, children);
 });
-var ToolbarButton = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
-  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Button, {
+var ToolbarButton = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
+  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Button, {
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(Button, {
+  }, /* @__PURE__ */ React29.createElement(Button, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarLink = /* @__PURE__ */ forwardRef24((props, forwardedRef) => {
-  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Link, {
+var ToolbarLink = /* @__PURE__ */ forwardRef25((props, forwardedRef) => {
+  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Link, {
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(Link, {
+  }, /* @__PURE__ */ React29.createElement(Link, {
     ...props,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef24(({ classNames, children, elevation, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
+var ToolbarToggleGroup2 = /* @__PURE__ */ forwardRef25(({ classNames, children, elevation, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(ButtonGroup, {
+  }, /* @__PURE__ */ React29.createElement(ButtonGroup, {
     classNames,
     children,
     elevation,
     ref: forwardedRef
   }));
 });
-var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef24(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.ToolbarToggleItem, {
+var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef25(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.ToolbarToggleItem, {
     ...props,
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(Button, {
+  }, /* @__PURE__ */ React29.createElement(Button, {
     variant,
     density,
     elevation,
@@ -2036,9 +2119,9 @@ var ToolbarToggleGroupItem = /* @__PURE__ */ forwardRef24(({ variant, density, e
   }));
 });
 var ToolbarSeparator = (props) => {
-  return /* @__PURE__ */ React28.createElement(ToolbarPrimitive.Separator, {
+  return /* @__PURE__ */ React29.createElement(ToolbarPrimitive.Separator, {
     asChild: true
-  }, /* @__PURE__ */ React28.createElement(Separator4, {
+  }, /* @__PURE__ */ React29.createElement(Separator4, {
     orientation: "vertical",
     ...props
   }));
@@ -2054,22 +2137,22 @@ var Toolbar = {
 
 // packages/ui/react-ui/src/components/Tooltip/Tooltip.tsx
 import { Provider as TooltipProviderPrimitive, Root as TooltipRootPrimitive, TooltipContent as TooltipContentPrimitive, TooltipTrigger as TooltipTriggerPrimitive, TooltipPortal as TooltipPortalPrimitive, TooltipArrow as TooltipArrowPrimitive } from "@radix-ui/react-tooltip";
-import React29, { forwardRef as forwardRef25 } from "react";
+import React30, { forwardRef as forwardRef26 } from "react";
 var TooltipProvider = TooltipProviderPrimitive;
 var TooltipRoot = TooltipRootPrimitive;
 var TooltipPortal = TooltipPortalPrimitive;
 var TooltipTrigger = TooltipTriggerPrimitive;
-var TooltipArrow = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+var TooltipArrow = /* @__PURE__ */ forwardRef26(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(TooltipArrowPrimitive, {
+  return /* @__PURE__ */ React30.createElement(TooltipArrowPrimitive, {
     ...props,
     className: tx("tooltip.arrow", "tooltip__arrow", {}, classNames),
     ref: forwardedRef
   });
 });
-var TooltipContent = /* @__PURE__ */ forwardRef25(({ classNames, ...props }, forwardedRef) => {
+var TooltipContent = /* @__PURE__ */ forwardRef26(({ classNames, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
-  return /* @__PURE__ */ React29.createElement(TooltipContentPrimitive, {
+  return /* @__PURE__ */ React30.createElement(TooltipContentPrimitive, {
     sideOffset: 4,
     collisionPadding: 8,
     ...props,
@@ -2088,7 +2171,7 @@ var Tooltip = {
 
 // packages/ui/react-ui/src/components/ThemeProvider/ThemeProvider.tsx
 import { createKeyborg } from "keyborg";
-import React30, { createContext as createContext10, useEffect as useEffect5 } from "react";
+import React31, { createContext as createContext10, useEffect as useEffect5 } from "react";
 
 // packages/ui/react-ui/src/util/hasIosKeyboard.ts
 var hasIosKeyboard = () => {
@@ -2116,19 +2199,19 @@ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx
       return () => kb.unsubscribe(handleInputModalityChange);
     }
   }, []);
-  return /* @__PURE__ */ React30.createElement(ThemeContext.Provider, {
+  return /* @__PURE__ */ React31.createElement(ThemeContext.Provider, {
     value: {
       tx,
       themeMode,
       hasIosKeyboard: hasIosKeyboard()
     }
-  }, /* @__PURE__ */ React30.createElement(TranslationsProvider, {
+  }, /* @__PURE__ */ React31.createElement(TranslationsProvider, {
     fallback,
     resourceExtensions,
     appNs
-  }, /* @__PURE__ */ React30.createElement(ElevationProvider, {
+  }, /* @__PURE__ */ React31.createElement(ElevationProvider, {
     elevation: rootElevation
-  }, /* @__PURE__ */ React30.createElement(DensityProvider, {
+  }, /* @__PURE__ */ React31.createElement(DensityProvider, {
     density: rootDensity
   }, children))));
 };
@@ -2174,6 +2257,7 @@ export {
   Trans,
   Tree,
   TreeItem,
+  Treegrid,
   hasIosKeyboard,
   isLabel,
   toLocalizedString,