@itwin/itwinui-react 5.0.0-alpha.1 → 5.0.0-alpha.11

package/dist/bricks/Table.d.ts

@@ -0,0 +1,115 @@
+import * as React from "react";
+import { type BaseProps } from "./~utils.js";
+interface TableProps extends BaseProps {
+}
+/**
+ * A table is a grid of rows and columns that displays data in a structured format.
+ *
+ * `Table.Root` is the root component for a table.
+ * `Table.Header`, `Table.Body`, and `Table.Cell` can be nested inside a `Table.Root` to create a table structure.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ *  <Table.Caption>Table Caption</Table.Caption>
+ * 	<Table.Header>
+ * 		<Table.Row>
+ * 			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ * 		</Table.Row>
+ * 	</Table.Header>
+ *
+ * 	<Table.Body>
+ * 		<Table.Row>
+ * 			<Table.Cell>Cell 1.1</Table.Cell>
+ * 			<Table.Cell>Cell 1.2</Table.Cell>
+ * 		</Table.Row>
+ * 		<Table.Row>
+ * 			<Table.Cell>Cell 2.1</Table.Cell>
+ * 			<Table.Cell>Cell 2.2</Table.Cell>
+ * 		</Table.Row>
+ * 	</Table.Body>
+ * </Table.Root>
+ * ```
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableHeaderProps extends BaseProps {
+}
+/**
+ * `Table.Header` is a column component of cells that labels the columns of a table.
+ * `Table.Row` and `Table.Cell` can be nested inside a `Table.Header` to create a header row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Header>
+ *		<Table.Row>
+ *			<Table.Cell>Header 1</Table.Cell>
+ * 			<Table.Cell>Header 2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Header>
+ * ```
+ */
+declare const TableHeader: React.ForwardRefExoticComponent<TableHeaderProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableBodyProps extends BaseProps {
+}
+/**
+ * `Table.Body` is a component that contains the rows of table data.
+ * Multiple `Table.Row`s and `Table.Cell`s can be nested inside a `Table.Body` to create a table body.
+ *
+ *  This component intentionally does not set `role=rowgroup` because it is not properly supported.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Body>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 1.1</Table.Cell>
+ *			<Table.Cell>Cell 1.2</Table.Cell>
+ *		</Table.Row>
+ *		<Table.Row>
+ *			<Table.Cell>Cell 2.1</Table.Cell>
+ *			<Table.Cell>Cell 2.2</Table.Cell>
+ *		</Table.Row>
+ *	</Table.Body>
+ * ```
+ */
+declare const TableBody: React.ForwardRefExoticComponent<TableBodyProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableRowProps extends BaseProps {
+}
+/**
+ * `Table.Row` is a component that contains the cells of a table row.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Row>
+ *		<Table.Cell>Cell 1.1</Table.Cell>
+ *		<Table.Cell>Cell 1.2</Table.Cell>
+ *	</Table.Row>
+ * ```
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+interface TableCaptionProps extends BaseProps<"caption"> {
+}
+/**
+ * `Table.Caption` is a component that contains the caption of a table.
+ *
+ * Example:
+ * ```tsx
+ * <Table.Root>
+ * 	<Table.Caption>Table Caption</Table.Caption>
+ * 	…
+ * </Table.Root>
+ * ```
+ */
+declare const TableCaption: React.ForwardRefExoticComponent<TableCaptionProps & React.RefAttributes<HTMLElement>>;
+interface TableCellProps extends BaseProps<"span"> {
+}
+/**
+ * `Table.Cell` is a component that contains the data of a table cell.
+ *
+ * Example:
+ * ```tsx
+ *	<Table.Cell>Cell 1.1</Table.Cell>
+ * ```
+ */
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { Table as Root, TableHeader as Header, TableBody as Body, TableRow as Row, TableCaption as Caption, TableCell as Cell, };

package/dist/bricks/Table.js

@@ -0,0 +1,108 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import * as React from "react";
+import cx from "classnames";
+import { forwardRef } from "./~utils.js";
+import { useMergedRefs } from "./~hooks.js";
+const TableContext = React.createContext({
+  setCaptionId: () => {
+  }
+});
+const Table = forwardRef((props, forwardedRef) => {
+  const [captionId, setCaptionId] = React.useState();
+  const tableContext = React.useMemo(() => ({ setCaptionId }), []);
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContext, children: /* @__PURE__ */ jsx(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table", props.className),
+      ref: forwardedRef,
+      role: "table",
+      "aria-labelledby": captionId,
+      children: props.children
+    }
+  ) });
+});
+const TableHeaderContext = React.createContext(false);
+const TableHeader = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}-table-header", props.className),
+        ref: forwardedRef,
+        role: "rowgroup",
+        children: props.children
+      }
+    ) });
+  }
+);
+const TableBody = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-body", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+const TableRow = forwardRef((props, forwardedRef) => {
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      ...rest,
+      className: cx("\u{1F95D}-table-row", props.className),
+      ref: forwardedRef,
+      role: "row",
+      children
+    }
+  );
+});
+const TableCaption = forwardRef(
+  (props, forwardedRef) => {
+    const fallbackId = React.useId();
+    const { id = fallbackId, children, ...rest } = props;
+    const { setCaptionId } = React.useContext(TableContext);
+    const captionIdRef = React.useCallback(
+      (element) => {
+        setCaptionId(element ? id : void 0);
+      },
+      [id, setCaptionId]
+    );
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...rest,
+        id,
+        className: cx("\u{1F95D}-table-caption", props.className),
+        ref: useMergedRefs(forwardedRef, captionIdRef),
+        children
+      }
+    );
+  }
+);
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = React.useContext(TableHeaderContext);
+  return /* @__PURE__ */ jsx(
+    Role.span,
+    {
+      ...props,
+      className: cx("\u{1F95D}-table-cell", props.className),
+      ref: forwardedRef,
+      role: isWithinTableHeader ? "columnheader" : "cell",
+      children: props.children
+    }
+  );
+});
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  TableHeader as Header,
+  Table as Root,
+  TableRow as Row
+};

package/dist/bricks/Tabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as AkTab from "@ariakit/react/tab";
 import { type FocusableProps, type BaseProps } from "./~utils.js";
-interface TabsProps extends Pick<Ariakit.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+interface TabsProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
 }
 /**
  * A set of tabs that can be used to switch between different views.
@@ -53,7 +53,7 @@ interface TabListProps extends BaseProps {
  * ```
  */
 declare const TabList: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TabProps extends FocusableProps<"button">, Pick<Ariakit.TabProps, "id"> {
+interface TabProps extends FocusableProps<"button">, Pick<AkTab.TabProps, "id"> {
 }
 /**
  * An individual tab button that switches the selected tab panel when clicked.
@@ -67,7 +67,7 @@ interface TabProps extends FocusableProps<"button">, Pick<Ariakit.TabProps, "id"
  * ```
  */
 declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-interface TabPanelProps extends BaseProps<"div">, Pick<Ariakit.TabPanelProps, "tabId" | "unmountOnHide"> {
+interface TabPanelProps extends FocusableProps<"div">, Pick<AkTab.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
 }
 /**
  * The actual content of a tab, shown when the tab is selected. Should be used as a child of `Tabs.Root`.

package/dist/bricks/Tabs.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import * as AkTab from "@ariakit/react/tab";
 import { useControlledState } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 function Tabs(props) {
@@ -19,7 +19,7 @@ function Tabs(props) {
     setSelectedIdProp
   );
   return /* @__PURE__ */ jsx(
-    Ariakit.TabProvider,
+    AkTab.TabProvider,
     {
       selectedId,
       setSelectedId: React.useCallback(
@@ -45,10 +45,10 @@ const TabList = forwardRef((props, forwardedRef) => {
   const { tone = "neutral", ...rest } = props;
   const viewTransitionName = `\u{1F95D}active-stripe-${React.useId().replaceAll(":", "_")}`;
   return /* @__PURE__ */ jsx(
-    Ariakit.TabList,
+    AkTab.TabList,
     {
-      "data-kiwi-tone": tone,
       ...rest,
+      "data-kiwi-tone": tone,
       className: cx("\u{1F95D}-tab-list", props.className),
       style: {
         "--\u{1F95D}tab-active-stripe-view-transition-name": viewTransitionName,
@@ -60,7 +60,7 @@ const TabList = forwardRef((props, forwardedRef) => {
 });
 const Tab = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Tab,
+    AkTab.Tab,
     {
       accessibleWhenDisabled: true,
       ...props,
@@ -71,7 +71,7 @@ const Tab = forwardRef((props, forwardedRef) => {
 });
 const TabPanel = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.TabPanel,
+    AkTab.TabPanel,
     {
       ...props,
       className: cx("\u{1F95D}-tab-panel", props.className),

package/dist/bricks/Text.d.ts

@@ -3,7 +3,7 @@ interface TextProps extends BaseProps {
     /**
      * The typography variant to use.
      */
-    variant?: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm";
+    variant: "display-lg" | "display-md" | "display-sm" | "headline-lg" | "headline-md" | "headline-sm" | "body-lg" | "body-md" | "body-sm" | "caption-lg" | "caption-md" | "caption-sm" | "mono-sm";
 }
 /**
  * An element with text styles applied. Useful for paragraphs, headings, and other text content.

package/dist/bricks/Text.js

@@ -1,11 +1,11 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Text = forwardRef((props, forwardedRef) => {
   const { variant, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       className: cx("\u{1F95D}-text", props.className),

package/dist/bricks/TextBox.d.ts

@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Icon } from "./Icon.js";
-import { Textarea } from "./Textarea.js";
 import { type FocusableProps, type BaseProps } from "./~utils.js";
 interface BaseInputProps extends FocusableProps<"input"> {
 }
@@ -39,6 +38,28 @@ interface TextBoxInputProps extends Omit<BaseInputProps, "children" | "type"> {
  * For a multiline text input, use the `TextBox.Textarea` component.
  */
 declare const TextBoxInput: React.ForwardRefExoticComponent<TextBoxInputProps & React.RefAttributes<HTMLElement | HTMLInputElement>>;
+interface TextareaProps extends FocusableProps<"textarea"> {
+}
+/**
+ * A styled textarea element that allows users to enter multiline text values.
+ *
+ * Example usage:
+ * ```tsx
+ * <TextBox.Textarea defaultValue="Hello" />
+ * ```
+ *
+ * Works well with the `Field` and `Label` components.
+ * ```tsx
+ * <Field>
+ *   <Label>Leave a comment, be kind</Label>
+ *   <TextBox.Textarea />
+ * </Field>
+ * ```
+ *
+ * Underneath, it's an HTML textarea, i.e. `<textarea>`, so it supports the same props, including
+ * `value`, `defaultValue`, `onChange`, and `disabled`.
+ */
+declare const TextBoxTextarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLElement | HTMLTextAreaElement>>;
 interface TextBoxRootProps extends BaseProps {
 }
 /**
@@ -76,4 +97,4 @@ interface TextBoxTextProps extends BaseProps<"span"> {
  * A static text decoration for the `TextBox.Root` component. Can be added before or after the `TextBox.Input`.
  */
 declare const TextBoxText: React.ForwardRefExoticComponent<TextBoxTextProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { TextBoxRoot as Root, TextBoxInput as Input, Textarea, TextBoxIcon as Icon, TextBoxText as Text, };
+export { TextBoxRoot as Root, TextBoxInput as Input, TextBoxTextarea as Textarea, TextBoxIcon as Icon, TextBoxText as Text, };

package/dist/bricks/TextBox.js

@@ -1,34 +1,71 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
+import { Focusable } from "@ariakit/react/focusable";
 import cx from "classnames";
-import { useFieldId } from "./Field.js";
+import { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
-import { Textarea } from "./Textarea.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     const rootContext = React.useContext(TextBoxRootContext);
     const setDisabled = rootContext?.setDisabled;
     React.useEffect(() => {
       setDisabled?.(props.disabled);
     }, [setDisabled, props.disabled]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.input,
+      FieldControl,
       {
-        id: fieldId,
-        ...props,
-        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+        type: "textlike",
+        id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
+          Role.input,
           {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("input", {})
+            readOnly: props.disabled,
+            ...rest,
+            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("input", {})
+              }
+            ),
+            ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
           }
-        ),
-        ref: useMergedRefs(rootContext?.inputRef, forwardedRef)
+        )
+      }
+    );
+  }
+);
+const TextBoxTextarea = forwardRef(
+  (props, forwardedRef) => {
+    const { id, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      FieldControl,
+      {
+        type: "textlike",
+        id,
+        render: /* @__PURE__ */ jsx(
+          Role.textarea,
+          {
+            readOnly: props.disabled,
+            ...rest,
+            className: cx("\u{1F95D}-text-box", props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("textarea", {})
+              }
+            ),
+            ref: forwardedRef
+          }
+        )
       }
     );
   }
@@ -42,7 +79,7 @@ const TextBoxRoot = forwardRef(
       {
         value: React.useMemo(() => ({ setDisabled, inputRef }), []),
         children: /* @__PURE__ */ jsx(
-          Ariakit.Role.div,
+          Role.div,
           {
             ...props,
             "data-kiwi-disabled": disabled,
@@ -77,7 +114,7 @@ const TextBoxIcon = forwardRef(
 const TextBoxText = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.span,
+      Role.span,
       {
         ...props,
         className: cx("\u{1F95D}-text-box-decoration", props.className),
@@ -92,5 +129,5 @@ export {
   TextBoxInput as Input,
   TextBoxRoot as Root,
   TextBoxText as Text,
-  Textarea
+  TextBoxTextarea as Textarea
 };

package/dist/bricks/Tooltip.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as AkTooltip from "@ariakit/react/tooltip";
 import { type FocusableProps } from "./~utils.js";
-interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<Ariakit.TooltipProps, "open" | "unmountOnHide">, Pick<Ariakit.TooltipProviderProps, "defaultOpen" | "setOpen"> {
+interface TooltipProps extends Omit<FocusableProps<"div">, "content">, Pick<AkTooltip.TooltipProps, "open" | "unmountOnHide">, Pick<AkTooltip.TooltipProviderProps, "defaultOpen" | "setOpen"> {
     /**
      * The content to be displayed inside the tooltip when the trigger element is hovered or focused.
      */

package/dist/bricks/Tooltip.js

@@ -1,38 +1,29 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
-import { forwardRef, supportsPopover } from "./~utils.js";
+import * as AkTooltip from "@ariakit/react/tooltip";
+import { useStoreState } from "@ariakit/react/store";
+import { forwardRef } from "./~utils.js";
+import { usePopoverApi } from "./~hooks.js";
 const Tooltip = forwardRef(
   (props, forwardedRef) => {
+    const generatedId = React.useId();
     const {
       content,
       children,
-      className,
       type = "description",
-      id = React.useId(),
+      id = generatedId,
       defaultOpen: defaultOpenProp,
       open: openProp,
       setOpen: setOpenProp,
       unmountOnHide = type === "none",
       ...rest
     } = props;
-    const store = Ariakit.useTooltipStore();
-    const open = Ariakit.useStoreState(store, (state) => state.open);
-    const popover = Ariakit.useStoreState(
-      store,
-      (state) => state.popoverElement
-    );
-    React.useEffect(
-      function syncPopoverWithOpenState() {
-        if (popover?.isConnected) {
-          popover?.togglePopover?.(open);
-        }
-      },
-      [open, popover]
-    );
+    const store = AkTooltip.useTooltipStore();
+    const open = useStoreState(store, (store2) => store2.open);
+    const popover = usePopoverApi(store);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      Ariakit.TooltipProvider,
+      AkTooltip.TooltipProvider,
       {
         store,
         defaultOpen: defaultOpenProp,
@@ -40,28 +31,29 @@ const Tooltip = forwardRef(
         setOpen: setOpenProp,
         children: [
           /* @__PURE__ */ jsx(
-            Ariakit.TooltipAnchor,
+            AkTooltip.TooltipAnchor,
             {
               render: children,
+              "data-has-popover-open": open || void 0,
               ...type === "description" && { "aria-describedby": id },
               ...type === "label" && { "aria-labelledby": id }
             }
           ),
           /* @__PURE__ */ jsx(
-            Ariakit.Tooltip,
+            AkTooltip.Tooltip,
             {
               "aria-hidden": "true",
+              portal: true,
               ...rest,
               unmountOnHide,
-              className: cx("\u{1F95D}-tooltip", className),
+              className: cx("\u{1F95D}-tooltip", props.className),
               ref: forwardedRef,
               id,
               style: {
-                zIndex: supportsPopover ? void 0 : 9999,
+                ...popover.style,
                 ...props.style
               },
-              wrapperProps: { popover: "manual" },
-              portal: !supportsPopover,
+              wrapperProps: popover.wrapperProps,
               children: content
             }
           )

package/dist/bricks/Tree.d.ts

@@ -1,23 +1,22 @@
-import * as React from "react";
-import { IconButton } from "./IconButton.js";
 import { type BaseProps } from "./~utils.js";
+import { Root as TreeItemRoot, Action as TreeItemAction } from "./TreeItem.js";
 interface TreeProps extends BaseProps {
 }
-declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TreeItemProps extends Omit<BaseProps, "content"> {
-    content?: React.ReactNode;
-    selected?: boolean;
-    /** Specifies if the tree item is expanded. Used to determine if a tree item is a parent node. Defaults to `undefined`. */
-    expanded?: boolean;
-}
-declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TreeItemContentProps extends BaseProps<"span"> {
-}
-declare const TreeItemContent: React.ForwardRefExoticComponent<TreeItemContentProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-type IconButtonProps = React.ComponentProps<typeof IconButton>;
-interface TreeItemExpanderProps extends Omit<IconButtonProps, "variant" | "label" | "icon"> {
-    label?: IconButtonProps["label"];
-    icon?: IconButtonProps["icon"];
-}
-declare const TreeItemExpander: React.ForwardRefExoticComponent<Omit<TreeItemExpanderProps, "ref"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-export { Tree as Root, TreeItem as Item, TreeItemExpander as Expander, TreeItemContent as Content, };
+/**
+ * A tree is a hierarchical list of items that can be expanded or collapsed, or optionally selected.
+ *
+ * `Tree.Root` is the root component for a tree. `Tree.Item`s are rendered as a flat list in the `Tree.Root` component to create a hierarchical tree structure.
+ *
+ * Example:
+ * ```tsx
+ * <Tree.Root>
+ *   <Tree.Item label="Parent 1" aria-level={1} aria-posinset={1} aria-setsize={2} />
+ *   <Tree.Item label="Child 1.1" aria-level={2} aria-posinset={1} aria-setsize={2} />
+ *   <Tree.Item label="Child 1.2" aria-level={2} aria-posinset={2} aria-setsize={2} />
+ *   <Tree.Item label="Parent 2" aria-level={1} aria-posinset={2} aria-setsize={2} />
+ *   <Tree.Item label="Child 2.1" aria-level={2} aria-posinset={1} aria-setsize={1} />
+ * </Tree.Root>
+ * ```
+ */
+declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export { Tree as Root, TreeItemRoot as Item, TreeItemAction as ItemAction };