@itwin/itwinui-react 5.0.0-alpha.3 → 5.0.0-alpha.5

package/dist/bricks/Field.js

@@ -4,17 +4,21 @@ import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
 import { forwardRef } from "./~utils.js";
 const Field = forwardRef((props, forwardedRef) => {
-  const fieldId = React.useId();
   const { layout, ...rest } = props;
-  return /* @__PURE__ */ jsx(FieldIdContext.Provider, { value: fieldId, children: /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
-    Ariakit.Role,
+  return /* @__PURE__ */ jsx(FieldDescribedByProvider, { children: /* @__PURE__ */ jsx(
+    FieldCollection,
     {
-      ...rest,
-      className: cx("\u{1F95D}-field", props.className),
-      "data-kiwi-layout": layout,
-      ref: forwardedRef
+      render: /* @__PURE__ */ jsx(
+        Ariakit.Role.div,
+        {
+          ...rest,
+          className: cx("\u{1F95D}-field", props.className),
+          "data-kiwi-layout": layout,
+          ref: forwardedRef
+        }
+      )
     }
-  ) }) });
+  ) });
 });
 const FieldDescribedByContext = React.createContext(void 0);
 function FieldDescribedByProvider(props) {
@@ -65,13 +69,78 @@ function useFieldRegisterDescribedBy(id) {
     return () => unregister(id);
   }, [id, register, unregister]);
 }
-const FieldIdContext = React.createContext(void 0);
-function useFieldId() {
-  return React.useContext(FieldIdContext);
+function FieldCollection(props) {
+  const fieldElementCollection = Ariakit.useCollectionStore({
+    defaultItems: []
+  });
+  const renderedItems = Ariakit.useStoreState(
+    fieldElementCollection,
+    "renderedItems"
+  );
+  const [controlType, controlIndex] = React.useMemo(() => {
+    const controlIndex2 = renderedItems.findIndex(
+      (item) => item.elementType === "control"
+    );
+    return [renderedItems[controlIndex2]?.controlType, controlIndex2];
+  }, [renderedItems]);
+  const labelPlacement = React.useMemo(() => {
+    const labelIndex = renderedItems.findIndex(
+      (item) => item.elementType === "label"
+    );
+    if (controlIndex === -1 || labelIndex === -1) return;
+    return labelIndex < controlIndex ? "before" : "after";
+  }, [renderedItems, controlIndex]);
+  return /* @__PURE__ */ jsx(
+    Ariakit.Collection,
+    {
+      ...props,
+      store: fieldElementCollection,
+      "data-kiwi-label-placement": labelPlacement,
+      "data-kiwi-control-type": controlType
+    }
+  );
+}
+function FieldControl(props) {
+  const generatedId = React.useId();
+  const { id = generatedId, type, ...rest } = props;
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "control",
+      controlType: type
+    }),
+    [type]
+  );
+  return /* @__PURE__ */ jsx(Ariakit.CollectionItem, { ...rest, id, getItem: getData });
+}
+function FieldLabel(props) {
+  const store = Ariakit.useCollectionContext();
+  const renderedItems = Ariakit.useStoreState(store, "renderedItems");
+  const fieldId = React.useMemo(
+    () => renderedItems?.find(
+      (item) => item.elementType === "control"
+    )?.id,
+    [renderedItems]
+  );
+  const getData = React.useCallback(
+    (data) => ({
+      ...data,
+      elementType: "label"
+    }),
+    []
+  );
+  return /* @__PURE__ */ jsx(
+    Ariakit.CollectionItem,
+    {
+      getItem: getData,
+      render: /* @__PURE__ */ jsx(Ariakit.Role.label, { ...props, htmlFor: fieldId })
+    }
+  );
 }
 export {
   Field,
+  FieldControl,
+  FieldLabel,
   useFieldDescribedBy,
-  useFieldId,
   useFieldRegisterDescribedBy
 };

package/dist/bricks/Icon.d.ts

@@ -35,4 +35,7 @@ export declare const DisclosureArrow: React.ForwardRefExoticComponent<Disclosure
 interface CheckmarkProps extends Omit<BaseProps<"svg">, "children"> {
 }
 export declare const Checkmark: React.ForwardRefExoticComponent<CheckmarkProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface DismissProps extends Omit<BaseProps<"svg">, "children"> {
+}
+export declare const Dismiss: React.ForwardRefExoticComponent<DismissProps & React.RefAttributes<HTMLElement | SVGSVGElement>>;
 export {};

package/dist/bricks/Icon.js

@@ -83,8 +83,31 @@ const Checkmark = forwardRef(
     );
   }
 );
+const Dismiss = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Icon,
+      {
+        ...props,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Role.svg,
+          {
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "currentColor",
+            render: props.render,
+            children: /* @__PURE__ */ jsx("path", { d: "M4.853 4.146a.5.5 0 1 0-.707.708L7.293 8l-3.147 3.146a.5.5 0 0 0 .707.708L8 8.707l3.146 3.147a.5.5 0 0 0 .707-.708L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.853 4.146Z" })
+          }
+        ),
+        ref: forwardedRef
+      }
+    );
+  }
+);
 export {
   Checkmark,
   DisclosureArrow,
+  Dismiss,
   Icon
 };

package/dist/bricks/Label.js

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

package/dist/bricks/Radio.js

@@ -1,20 +1,26 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl, useFieldDescribedBy } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Radio = forwardRef((props, forwardedRef) => {
-  const fieldId = useFieldId();
+  const { id, ...rest } = props;
   const describedBy = useFieldDescribedBy(props["aria-describedby"]);
   return /* @__PURE__ */ jsx(
-    Ariakit.Radio,
+    FieldControl,
     {
-      accessibleWhenDisabled: true,
-      id: fieldId,
-      ...props,
-      className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
-      "aria-describedby": describedBy,
-      ref: forwardedRef
+      type: "checkable",
+      id,
+      render: /* @__PURE__ */ jsx(
+        Ariakit.Radio,
+        {
+          accessibleWhenDisabled: true,
+          ...rest,
+          className: cx("\u{1F95D}-checkbox", "\u{1F95D}-radio", props.className),
+          "aria-describedby": describedBy,
+          ref: forwardedRef
+        }
+      )
     }
   );
 });

package/dist/bricks/Select.js

@@ -7,7 +7,7 @@ import {
   isBrowser
 } from "./~utils.js";
 import { DisclosureArrow } from "./Icon.js";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl, useFieldDescribedBy } from "./Field.js";
 const supportsHas = isBrowser && CSS?.supports?.("selector(:has(+ *))");
 const HtmlSelectContext = React.createContext(() => {
 });
@@ -25,9 +25,8 @@ const SelectRoot = forwardRef((props, forwardedRef) => {
 });
 const HtmlSelect = forwardRef(
   (props, forwardedRef) => {
-    const { variant = "solid", ...rest } = props;
+    const { id, variant = "solid", ...rest } = props;
     const setIsHtmlSelect = React.useContext(HtmlSelectContext);
-    const fieldId = useFieldId();
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     React.useEffect(
       function updateContext() {
@@ -37,15 +36,21 @@ const HtmlSelect = forwardRef(
     );
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
-        Ariakit.Role.select,
+        FieldControl,
         {
-          id: fieldId,
-          ...rest,
-          className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
-          "aria-describedby": describedBy,
-          "data-kiwi-tone": "neutral",
-          "data-kiwi-variant": variant,
-          ref: forwardedRef
+          type: "textlike",
+          id,
+          render: /* @__PURE__ */ jsx(
+            Ariakit.Role.select,
+            {
+              ...rest,
+              className: cx("\u{1F95D}-button", "\u{1F95D}-select", props.className),
+              "aria-describedby": describedBy,
+              "data-kiwi-tone": "neutral",
+              "data-kiwi-variant": variant,
+              ref: forwardedRef
+            }
+          )
         }
       ),
       /* @__PURE__ */ jsx(DisclosureArrow, { className: "\u{1F95D}-select-arrow" })

package/dist/bricks/Switch.js

@@ -1,22 +1,28 @@
 import { jsx } from "react/jsx-runtime";
 import cx from "classnames";
 import * as Ariakit from "@ariakit/react";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl, useFieldDescribedBy } from "./Field.js";
 import { forwardRef } from "./~utils.js";
 const Switch = forwardRef(
   (props, forwardedRef) => {
-    const fieldId = useFieldId();
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Checkbox,
+      FieldControl,
       {
-        accessibleWhenDisabled: true,
-        id: fieldId,
-        ...props,
-        className: cx("\u{1F95D}-switch", props.className),
-        "aria-describedby": describedBy,
-        role: "switch",
-        ref: forwardedRef
+        type: "checkable",
+        id,
+        render: /* @__PURE__ */ jsx(
+          Ariakit.Checkbox,
+          {
+            accessibleWhenDisabled: true,
+            ...rest,
+            className: cx("\u{1F95D}-switch", props.className),
+            "aria-describedby": describedBy,
+            role: "switch",
+            ref: forwardedRef
+          }
+        )
       }
     );
   }

package/dist/bricks/TextBox.js

@@ -2,59 +2,73 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Ariakit from "@ariakit/react";
 import cx from "classnames";
-import { useFieldDescribedBy, useFieldId } from "./Field.js";
+import { FieldControl, useFieldDescribedBy } from "./Field.js";
 import { Icon } from "./Icon.js";
 import { useMergedRefs } from "./~hooks.js";
 import { forwardRef } from "./~utils.js";
 const TextBoxInput = forwardRef(
   (props, forwardedRef) => {
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
-    const fieldId = useFieldId();
     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,
-        "aria-describedby": describedBy,
-        className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
-        placeholder: props.placeholder ?? " ",
+        type: "textlike",
+        id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
+          Ariakit.Role.input,
           {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("input", {})
+            readOnly: props.disabled,
+            ...rest,
+            "aria-describedby": describedBy,
+            className: cx({ "\u{1F95D}-text-box": !rootContext }, props.className),
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Ariakit.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 fieldId = useFieldId();
+    const { id, ...rest } = props;
     const describedBy = useFieldDescribedBy(props["aria-describedby"]);
     return /* @__PURE__ */ jsx(
-      Ariakit.Role.textarea,
+      FieldControl,
       {
-        id: fieldId,
-        ...props,
-        className: cx("\u{1F95D}-text-box", props.className),
-        "aria-describedby": describedBy,
-        placeholder: props.placeholder ?? " ",
+        type: "textlike",
+        id,
         render: /* @__PURE__ */ jsx(
-          Ariakit.Focusable,
+          Ariakit.Role.textarea,
           {
-            accessibleWhenDisabled: true,
-            render: props.render || /* @__PURE__ */ jsx("textarea", {})
+            readOnly: props.disabled,
+            ...rest,
+            className: cx("\u{1F95D}-text-box", props.className),
+            "aria-describedby": describedBy,
+            placeholder: props.placeholder ?? " ",
+            render: /* @__PURE__ */ jsx(
+              Ariakit.Focusable,
+              {
+                accessibleWhenDisabled: true,
+                render: props.render || /* @__PURE__ */ jsx("textarea", {})
+              }
+            ),
+            ref: forwardedRef
           }
-        ),
-        ref: forwardedRef
+        )
       }
     );
   }

package/dist/bricks/Tree.d.ts

@@ -1,27 +1,32 @@
 import * as React from "react";
+import { IconButton } from "./IconButton.js";
 import { type BaseProps } from "./~utils.js";
 interface TreeProps extends BaseProps {
 }
 /**
  * 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 can be nested inside a `Tree.Root` to create a hierarchical tree structure.
+ * `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">
- *     <Tree.Item label="Child 1.1" />
- *     <Tree.Item label="Child 1.2" />
- *   </Tree.Item>
- *   <Tree.Item label="Parent 2">
- *     <Tree.Item label="Child 2.1" />
- *   </Tree.Item>
+ *   <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: React.ForwardRefExoticComponent<TreeProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 interface TreeItemProps extends Omit<BaseProps, "content"> {
+    /** 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.
      *
@@ -56,31 +61,67 @@ interface TreeItemProps extends Omit<BaseProps, "content"> {
      * Can be a URL of an SVG from the `kiwi-icons` package, or a JSX element.
      */
     icon?: string | React.JSX.Element;
-    /** The label to display for the tree item. */
+    /**
+     * The primary label that identifies the tree item and is displayed inside it.
+     */
     label?: React.ReactNode;
-    /** The actions available for the tree item. */
-    actions?: 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 nested as JSX elements inside a `Tree.Root` to create a hierarchical tree structure.
+ * `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">
- *     <Tree.Item label="Child 1" />
- *     <Tree.Item label="Child 2" />
- *   </Tree.Item>
+ *   <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. `children` is only used for nested items.
+ * 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>>;
-export { Tree as Root, TreeItem as Item };
+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 };

package/dist/bricks/Tree.js

@@ -23,6 +23,7 @@ const Tree = forwardRef((props, forwardedRef) => {
 });
 const TreeItem = forwardRef((props, forwardedRef) => {
   const {
+    "aria-level": level,
     selected,
     children,
     expanded,
@@ -36,8 +37,6 @@ const TreeItem = forwardRef((props, forwardedRef) => {
     onKeyDown: onKeyDownProp,
     ...rest
   } = props;
-  const parentContext = React.useContext(TreeItemContext);
-  const level = parentContext ? parentContext.level + 1 : 1;
   const handleClick = (event) => {
     if (selected === void 0) return;
     event.stopPropagation();
@@ -66,7 +65,7 @@ const TreeItem = forwardRef((props, forwardedRef) => {
         }),
         [level, expanded, selected, contentId]
       ),
-      children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx(
         Ariakit.CompositeItem,
         {
           render: /* @__PURE__ */ jsx(Ariakit.Role, { ...rest }),
@@ -82,35 +81,33 @@ const TreeItem = forwardRef((props, forwardedRef) => {
           "aria-expanded": expanded,
           "aria-selected": selected,
           "aria-labelledby": contentId,
+          "aria-level": level,
           className: cx("\u{1F95D}-tree-item", props.className),
           ref: forwardedRef,
-          children: [
-            /* @__PURE__ */ jsxs(
-              ListItem.Root,
-              {
-                "data-kiwi-expanded": expanded,
-                "data-kiwi-selected": selected,
-                className: "\u{1F95D}-tree-item-node",
-                style: { "--\u{1F95D}tree-item-level": level },
-                role: void 0,
-                children: [
-                  /* @__PURE__ */ jsx(
-                    TreeItemExpander,
-                    {
-                      onClick: () => {
-                        if (expanded === void 0) return;
-                        onExpandedChange?.(!expanded);
-                      }
+          children: /* @__PURE__ */ jsxs(
+            ListItem.Root,
+            {
+              "data-kiwi-expanded": expanded,
+              "data-kiwi-selected": selected,
+              className: "\u{1F95D}-tree-item-node",
+              style: { "--\u{1F95D}tree-item-level": level },
+              role: void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  TreeItemExpander,
+                  {
+                    onClick: () => {
+                      if (expanded === void 0) return;
+                      onExpandedChange?.(!expanded);
                     }
-                  ),
-                  typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-                  /* @__PURE__ */ jsx(TreeItemContent, { label }),
-                  /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
-                ]
-              }
-            ),
-            children && /* @__PURE__ */ jsx("div", { role: "group", children })
-          ]
+                  }
+                ),
+                typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+                /* @__PURE__ */ jsx(TreeItemContent, { label }),
+                /* @__PURE__ */ jsx(TreeItemActions, { children: actions })
+              ]
+            }
+          )
         }
       )
     }
@@ -132,18 +129,30 @@ const TreeItemContent = forwardRef(
     );
   }
 );
-const TreeItemActions = forwardRef(
+const TreeItemActions = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Ariakit.Toolbar,
+    {
+      ...props,
+      onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+      className: cx("\u{1F95D}-tree-item-actions", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+const TreeItemAction = forwardRef(
   (props, forwardedRef) => {
     const { visible, ...rest } = props;
     return /* @__PURE__ */ jsx(
-      Ariakit.Toolbar,
+      IconButton,
       {
+        inert: visible === false ? true : void 0,
         ...rest,
-        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
-        className: cx("\u{1F95D}-tree-item-actions", props.className),
+        variant: "ghost",
+        className: cx("\u{1F95D}-tree-item-action", props.className),
         "data-kiwi-visible": visible,
-        ref: forwardedRef,
-        children: props.children
+        ref: forwardedRef
       }
     );
   }
@@ -193,5 +202,6 @@ const TreeChevron = forwardRef(
 const TreeItemContext = React.createContext(void 0);
 export {
   TreeItem as Item,
+  TreeItemAction as ItemAction,
   Tree as Root
 };