@itwin/itwinui-react 5.0.0-alpha.8 → 5.0.0-alpha.9

package/dist/bricks/Kbd.js

@@ -1,24 +1,9 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 import { VisuallyHidden } from "./VisuallyHidden.js";
-const predefinedSymbols = {
-  Backspace: "\u232B",
-  Command: "\u2318",
-  Control: "Ctrl",
-  Down: "\u2193",
-  Eject: "\u23CF",
-  Enter: "\u21B5",
-  Escape: "Esc",
-  Left: "\u2190",
-  Option: "\u2325",
-  Right: "\u2192",
-  Shift: "\u21E7",
-  Space: "\u2423",
-  Tab: "Tab",
-  Up: "\u2191"
-};
+import { predefinedSymbols } from "./Kbd.internal.js";
 const Kbd = forwardRef((props, forwardedRef) => {
   const { variant = "solid", symbol, children, ...rest } = props;
   let content = children;
@@ -29,7 +14,7 @@ const Kbd = forwardRef((props, forwardedRef) => {
     ] });
   }
   return /* @__PURE__ */ jsx(
-    Ariakit.Role,
+    Role,
     {
       ...rest,
       "data-kiwi-variant": variant,

package/dist/bricks/Label.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import { forwardRef } from "./~utils.js";
 import { FieldLabel } from "./Field.js";
 const Label = forwardRef((props, forwardedRef) => {
@@ -8,7 +8,7 @@ const Label = forwardRef((props, forwardedRef) => {
     FieldLabel,
     {
       render: /* @__PURE__ */ jsx(
-        Ariakit.Role.label,
+        Role.label,
         {
           ...props,
           className: cx("\u{1F95D}-label", props.className),

package/dist/bricks/Radio.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type RadioProps as AkRadioProps } from "@ariakit/react/radio";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type RadioOwnProps = Pick<Ariakit.RadioProps, "value" | "checked" | "onChange">;
+type RadioOwnProps = Pick<AkRadioProps, "value" | "checked" | "onChange">;
 interface RadioProps extends InputBaseProps, RadioOwnProps {
 }
 /**

package/dist/bricks/Radio.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import {
+  Radio as AkRadio
+} from "@ariakit/react/radio";
 import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
@@ -11,7 +13,7 @@ const Radio = forwardRef((props, forwardedRef) => {
       type: "checkable",
       id,
       render: /* @__PURE__ */ jsx(
-        Ariakit.Radio,
+        AkRadio,
         {
           accessibleWhenDisabled: true,
           ...rest,

package/dist/bricks/Root.js

@@ -1,19 +1,30 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
+import * as ReactDOM from "react-dom";
+import { Role } from "@ariakit/react/role";
+import { PortalContext } from "@ariakit/react/portal";
 import cx from "classnames";
 import foundationsCss from "../foundations/styles.css.js";
 import bricksCss from "./styles.css.js";
 import { forwardRef, isBrowser } from "./~utils.js";
-import { useMergedRefs } from "./~hooks.js";
+import { useIsClient, useMergedRefs } from "./~hooks.js";
 const css = foundationsCss + bricksCss;
 const Root = forwardRef((props, forwardedRef) => {
   const { children, synchronizeColorScheme = false, ...rest } = props;
+  const [portalContainer, setPortalContainer] = React.useState(null);
   return /* @__PURE__ */ jsxs(RootInternal, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(Styles, {}),
     /* @__PURE__ */ jsx(Fonts, {}),
     synchronizeColorScheme ? /* @__PURE__ */ jsx(SynchronizeColorScheme, { colorScheme: props.colorScheme }) : null,
-    children
+    /* @__PURE__ */ jsx(
+      PortalContainer,
+      {
+        colorScheme: props.colorScheme,
+        density: props.density,
+        ref: setPortalContainer
+      }
+    ),
+    /* @__PURE__ */ jsx(PortalContext.Provider, { value: portalContainer, children })
   ] });
 });
 const RootNodeContext = React.createContext(null);
@@ -31,7 +42,7 @@ const RootInternal = forwardRef(
       setRootNode(rootNode2);
     }, []);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         className: cx("\u{1F95D}-root", props.className),
@@ -59,6 +70,26 @@ function SynchronizeColorScheme({
   }, [rootNode, colorScheme]);
   return null;
 }
+const PortalContainer = forwardRef((props, forwardedRef) => {
+  const isClient = useIsClient();
+  const rootNode = useRootNode();
+  if (!isClient) return null;
+  const destination = rootNode && isDocument(rootNode) ? rootNode.body : rootNode;
+  if (!destination) return null;
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "\u{1F95D}-root",
+        "data-kiwi-theme": props.colorScheme,
+        "data-kiwi-density": props.density,
+        style: { display: "contents" },
+        ref: forwardedRef
+      }
+    ),
+    destination
+  );
+});
 function Styles() {
   const rootNode = useRootNode();
   useLayoutEffect(() => {

package/dist/bricks/Select.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as Ariakit from "@ariakit/react";
 import { type FocusableProps } from "./~utils.js";
 /**
  * Compound component for a select element, which allows the user to select a value from a list of options.
@@ -20,7 +19,7 @@ import { type FocusableProps } from "./~utils.js";
  * </Field>
  * ```
  */
-declare const SelectRoot: React.ForwardRefExoticComponent<Pick<Ariakit.RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const SelectRoot: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 type HtmlSelectBaseProps = Omit<FocusableProps<"select">, "multiple" | "size">;
 interface HtmlSelectProps extends HtmlSelectBaseProps {
     /**

package/dist/bricks/Select.js

@@ -1,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import {
   forwardRef,
   isBrowser
@@ -14,7 +14,7 @@ const HtmlSelectContext = React.createContext(() => {
 const SelectRoot = forwardRef((props, forwardedRef) => {
   const [isHtmlSelect, setIsHtmlSelect] = React.useState(false);
   return /* @__PURE__ */ jsx(HtmlSelectContext.Provider, { value: setIsHtmlSelect, children: /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-select-root", props.className),
@@ -40,7 +40,7 @@ const HtmlSelect = forwardRef(
           type: "textlike",
           id,
           render: /* @__PURE__ */ jsx(
-            Ariakit.Role.select,
+            Role.select,
             {
               ...rest,
               className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),

package/dist/bricks/Spinner.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import cx from "classnames";
 import { VisuallyHidden } from "./VisuallyHidden.js";
 import { forwardRef } from "./~utils.js";
@@ -12,7 +12,7 @@ const Spinner = forwardRef(
       ...rest
     } = props;
     return /* @__PURE__ */ jsxs(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         "data-kiwi-size": size,

package/dist/bricks/Switch.d.ts

@@ -1,7 +1,7 @@
-import * as Ariakit from "@ariakit/react";
+import { type CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
 import { type FocusableProps } from "./~utils.js";
 type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "value">;
-type CheckboxOwnProps = Pick<Ariakit.CheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
+type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
 interface SwitchProps extends InputBaseProps, CheckboxOwnProps {
     /** The default checked state of the toggle switch. */
     defaultChecked?: boolean;

package/dist/bricks/Switch.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import {
+  Checkbox as AkCheckbox
+} from "@ariakit/react/checkbox";
 import { FieldControl } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
@@ -12,7 +14,7 @@ const Switch = forwardRef(
         type: "checkable",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Checkbox,
+          AkCheckbox,
           {
             accessibleWhenDisabled: true,
             ...rest,

package/dist/bricks/Table.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import * as Ariakit from "@ariakit/react";
+import { Role } from "@ariakit/react/role";
 import * as React from "react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
@@ -12,7 +12,7 @@ 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(
-    Ariakit.Role,
+    Role,
     {
       ...props,
       className: cx("\u{1F95D}-table", props.className),
@@ -27,7 +27,7 @@ const TableHeaderContext = React.createContext(false);
 const TableHeader = forwardRef(
   (props, forwardedRef) => {
     return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
-      Ariakit.Role.div,
+      Role.div,
       {
         ...props,
         className: cx("\u{1F95D}-table-header", props.className),
@@ -40,7 +40,7 @@ const TableHeader = forwardRef(
 );
 const TableBody = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...props,
       className: cx("\u{1F95D}-table-body", props.className),
@@ -52,7 +52,7 @@ const TableBody = forwardRef((props, forwardedRef) => {
 const TableRow = forwardRef((props, forwardedRef) => {
   const { children, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.div,
+    Role.div,
     {
       ...rest,
       className: cx("\u{1F95D}-table-row", props.className),
@@ -74,7 +74,7 @@ const TableCaption = forwardRef(
       [id, setCaptionId]
     );
     return /* @__PURE__ */ jsx(
-      Ariakit.Role,
+      Role,
       {
         ...rest,
         id,
@@ -88,7 +88,7 @@ const TableCaption = forwardRef(
 const TableCell = forwardRef((props, forwardedRef) => {
   const isWithinTableHeader = React.useContext(TableHeaderContext);
   return /* @__PURE__ */ jsx(
-    Ariakit.Role.span,
+    Role.span,
     {
       ...props,
       className: cx("\u{1F95D}-table-cell", props.className),

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 FocusableProps<"div">, Pick<Ariakit.TabPanelProps, "tabId" | "unmountOnHide" | "focusable"> {
+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,7 +45,7 @@ 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,
     {
       ...rest,
       "data-kiwi-tone": tone,
@@ -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.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.js

@@ -1,6 +1,7 @@
 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 { FieldControl } from "./Field.js";
 import { Icon } from "./Icon.js";
@@ -20,14 +21,14 @@ const TextBoxInput = forwardRef(
         type: "textlike",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.input,
+          Role.input,
           {
             readOnly: props.disabled,
             ...rest,
             className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
-              Ariakit.Focusable,
+              Focusable,
               {
                 accessibleWhenDisabled: true,
                 render: props.render || /* @__PURE__ */ jsx("input", {})
@@ -49,14 +50,14 @@ const TextBoxTextarea = forwardRef(
         type: "textlike",
         id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Role.textarea,
+          Role.textarea,
           {
             readOnly: props.disabled,
             ...rest,
             className: cx("\u{1F95D}-text-box", props.className),
             placeholder: props.placeholder ?? " ",
             render: /* @__PURE__ */ jsx(
-              Ariakit.Focusable,
+              Focusable,
               {
                 accessibleWhenDisabled: true,
                 render: props.render || /* @__PURE__ */ jsx("textarea", {})
@@ -78,7 +79,7 @@ const TextBoxRoot = forwardRef(
       {
         value: React.useMemo(() => ({ setDisabled, inputRef }), []),
         children: /* @__PURE__ */ jsx(
-          Ariakit.Role.div,
+          Role.div,
           {
             ...props,
             "data-kiwi-disabled": disabled,
@@ -113,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),

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,7 +1,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import cx from "classnames";
-import * as Ariakit from "@ariakit/react";
+import * as AkTooltip from "@ariakit/react/tooltip";
 import { forwardRef } from "./~utils.js";
 import { usePopoverApi } from "./~hooks.js";
 const Tooltip = forwardRef(
@@ -18,10 +18,10 @@ const Tooltip = forwardRef(
       unmountOnHide = type === "none",
       ...rest
     } = props;
-    const store = Ariakit.useTooltipStore();
+    const store = AkTooltip.useTooltipStore();
     const popover = usePopoverApi(store);
     return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      Ariakit.TooltipProvider,
+      AkTooltip.TooltipProvider,
       {
         store,
         defaultOpen: defaultOpenProp,
@@ -29,7 +29,7 @@ const Tooltip = forwardRef(
         setOpen: setOpenProp,
         children: [
           /* @__PURE__ */ jsx(
-            Ariakit.TooltipAnchor,
+            AkTooltip.TooltipAnchor,
             {
               render: children,
               ...type === "description" && { "aria-describedby": id },
@@ -37,7 +37,7 @@ const Tooltip = forwardRef(
             }
           ),
           /* @__PURE__ */ jsx(
-            Ariakit.Tooltip,
+            AkTooltip.Tooltip,
             {
               "aria-hidden": "true",
               ...rest,

package/dist/bricks/Tree.d.ts

@@ -1,6 +1,5 @@
-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 {
 }
 /**
@@ -19,111 +18,5 @@ interface TreeProps extends BaseProps {
  * </Tree.Root>
  * ```
  */
-declare const Tree: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-interface TreeItemProps extends Omit<BaseProps, "content" | "children"> {
-    /** Specifies the nesting level of the tree item. Nesting levels start at 1. */
-    "aria-level": number;
-    /** Defines tree item position in the current level of tree items. Integer greater than or equal to 1. */
-    "aria-posinset": number;
-    /** Defines tree item set size of the current level. */
-    "aria-setsize": number;
-    /**
-     * Specifies if the tree item is selected.
-     *
-     * If `undefined`, the tree item is not selectable.
-     *
-     * @default undefined
-     */
-    selected?: boolean;
-    /**
-     * Callback fired when the tree item is selected.
-     *
-     * Should be used with the `selected` prop.
-     */
-    onSelectedChange?: (selected: boolean) => void;
-    /**
-     * Specifies if the tree item is expanded.
-     *
-     * Used to determine if a tree item is a parent node. If `undefined`, it is a leaf node (i.e. not expandable).
-     *
-     * @default undefined
-     * */
-    expanded?: boolean;
-    /**
-     * Callback fired when the tree item is expanded.
-     *
-     * Should be used with the `expanded` prop.
-     */
-    onExpandedChange?: (expanded: boolean) => void;
-    /**
-     * Icon to be displayed inside the tree item.
-     *
-     * Can be a URL of an SVG from the `@itwin/itwinui-icons` package, or a JSX element.
-     */
-    icon?: string | React.JSX.Element;
-    /**
-     * The primary label that identifies the tree item and is displayed inside it.
-     */
-    label?: React.ReactNode;
-    /** Secondary line of text to display additional information about the tree item. */
-    description?: React.ReactNode;
-    /**
-     * The actions available for the tree item. Must be a list of `Tree.ItemAction` components.
-     *
-     * Example:
-     * ```tsx
-     * actions={[
-     *   <Tree.ItemAction key={…} icon={…} label={…} />,
-     *   <Tree.ItemAction key={…} icon={…} label={…} />,
-     * ]}
-     * ```
-     */
-    actions?: React.ReactNode[];
-}
-/**
- * A treeitem is a node in a tree structure that may be expanded or collapsed to reveal or hide its descendants.
- *
- * `Tree.Item`s can be rendered inside a `Tree.Root`. Additional properties are specified to the `Tree.Item`s to create a hierarchical tree structure.
- *
- * Example:
- * ```tsx
- * <Tree.Root>
- *   <Tree.Item label="Parent" aria-level={1} aria-posinset={1} aria-setsize={1} />
- *   <Tree.Item label="Child 1" aria-level={2} aria-posinset={1} aria-setsize={2} />
- *   <Tree.Item label="Child 2" aria-level={2} aria-posinset={2} aria-setsize={2}  />
- * </Tree.Root>
- * ```
- *
- * The `label` and `icon` props can be used to specify the treeitem's own content.
- *
- * The `aria-level` prop is used to specify the nesting level of the treeitem. Nesting levels start at 1.
- *
- * The `aria-posinset` and `aria-setsize` props are used to define the treeitem's position in the current level of tree items.
- *
- * The `expanded` and `onExpandedChange` props can be used to control the expansion state of a treeitem.
- *
- * The `selected` and `onSelectedChange` props can be used to control the selection state of a treeitem.
- *
- * Secondary actions can be passed into the `actions` prop.
- */
-declare const TreeItem: React.ForwardRefExoticComponent<TreeItemProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-type IconButtonProps = React.ComponentProps<typeof IconButton>;
-interface TreeItemActionProps extends BaseProps<"button">, Pick<IconButtonProps, "label" | "icon"> {
-    /**
-     * Controls the visibility of the action.
-     *
-     * If `true`, the action is always visible.
-     * If `false`, the action is hidden and becomes inaccessible, but still occupies space.
-     *
-     * By default, the action is shown only when the treeitem receives hover/focus.
-     */
-    visible?: boolean;
-}
-/**
- * A secondary action for `<Tree.Item>`, to be passed into the `actions` prop. The action is typically
- * displayed as an icon-button on the right end of the treeitem.
- *
- * By default, the action appears only on hover/focus. This can be controlled by the `visible` prop.
- */
-declare const TreeItemAction: React.ForwardRefExoticComponent<TreeItemActionProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-export { Tree as Root, TreeItem as Item, TreeItemAction as ItemAction };
+declare const Tree: import("react").ForwardRefExoticComponent<TreeProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+export { Tree as Root, TreeItemRoot as Item, TreeItemAction as ItemAction };