@stratakit/structures 0.1.0 → 0.2.0

package/dist/DEV/Table.js

@@ -0,0 +1,151 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import {
+  useMergedRefs,
+  useSafeContext
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+const TableContext = React.createContext(void 0);
+const TableHeaderContext = React.createContext(false);
+const HtmlTable = forwardRef((props, forwardedRef) => {
+  const tableContextValue = React.useMemo(
+    () => ({ mode: "html" }),
+    []
+  );
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+    Role,
+    {
+      render: /* @__PURE__ */ jsx("table", {}),
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table", props.className)
+    }
+  ) });
+});
+DEV: HtmlTable.displayName = "Table.HtmlTable";
+const CustomTable = forwardRef(
+  (props, forwardedRef) => {
+    const [captionId, setCaptionId] = React.useState();
+    const tableContextValue = React.useMemo(
+      () => ({ captionId, setCaptionId, mode: "aria" }),
+      [captionId]
+    );
+    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        role: "table",
+        "aria-labelledby": captionId,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table", props.className)
+      }
+    ) });
+  }
+);
+DEV: CustomTable.displayName = "Table.CustomTable";
+const TableHeader = forwardRef(
+  (props, forwardedRef) => {
+    const { mode } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
+    const role = mode === "aria" ? "rowgroup" : void 0;
+    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        render,
+        role,
+        ...props,
+        ref: forwardedRef,
+        className: cx("\u{1F95D}-table-header", props.className)
+      }
+    ) });
+  }
+);
+DEV: TableHeader.displayName = "Table.Header";
+const TableBody = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      render,
+      role: void 0,
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table-body", props.className)
+    }
+  );
+});
+DEV: TableBody.displayName = "Table.Body";
+const TableRow = forwardRef((props, forwardedRef) => {
+  const { mode } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
+  const role = mode === "aria" ? "row" : void 0;
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      render,
+      role,
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table-row", props.className)
+    }
+  );
+});
+DEV: TableRow.displayName = "Table.Row";
+const TableCaption = forwardRef(
+  (props, forwardedRef) => {
+    const fallbackId = React.useId();
+    const { id = fallbackId, ...rest } = props;
+    const { mode, setCaptionId } = useSafeContext(TableContext);
+    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
+    const captionIdRef = React.useCallback(
+      (element) => {
+        setCaptionId?.(element ? id : void 0);
+      },
+      [id, setCaptionId]
+    );
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        render,
+        ...rest,
+        id,
+        ref: useMergedRefs(forwardedRef, captionIdRef),
+        className: cx("\u{1F95D}-table-caption", props.className)
+      }
+    );
+  }
+);
+DEV: TableCaption.displayName = "Table.Caption";
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = useSafeContext(TableHeaderContext);
+  const { mode } = useSafeContext(TableContext);
+  const { render, role } = React.useMemo(() => {
+    if (mode === "aria") {
+      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+    }
+    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
+  }, [isWithinTableHeader, mode]);
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      render,
+      role,
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table-cell", props.className)
+    }
+  );
+});
+DEV: TableCell.displayName = "Table.Cell";
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  CustomTable,
+  TableHeader as Header,
+  HtmlTable,
+  TableRow as Row
+};

package/dist/DEV/Tabs.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import * as AkTab from "@ariakit/react/tab";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+function Tabs(props) {
+  const {
+    defaultSelectedId,
+    selectedId,
+    setSelectedId,
+    selectOnMove,
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(
+    AkTab.TabProvider,
+    {
+      defaultSelectedId,
+      selectedId,
+      setSelectedId,
+      selectOnMove,
+      children
+    }
+  );
+}
+DEV: Tabs.displayName = "Tabs.Root";
+const TabList = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    AkTab.TabList,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      className: cx("\u{1F95D}-tab-list", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: TabList.displayName = "Tabs.TabList";
+const Tab = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.Tab,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-tab", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: Tab.displayName = "Tabs.Tab";
+const TabPanel = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.TabPanel,
+    {
+      ...props,
+      className: cx("\u{1F95D}-tab-panel", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: TabPanel.displayName = "Tabs.TabPanel";
+export {
+  Tabs as Root,
+  Tab,
+  TabList,
+  TabPanel
+};

package/dist/DEV/Toolbar.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as Toolbar from "@ariakit/react/toolbar";
+import { IconButtonContext } from "@stratakit/bricks/secret-internals";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
+    Toolbar.Toolbar,
+    {
+      ...props,
+      className: cx("\u{1F95D}-toolbar", props.className),
+      ref: forwardedRef
+    }
+  ) });
+});
+DEV: ToolbarGroup.displayName = "Toolbar.Group";
+const ToolbarItem = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, { ...props, ref: forwardedRef });
+  }
+);
+DEV: ToolbarItem.displayName = "Toolbar.Item";
+export {
+  ToolbarGroup as Group,
+  ToolbarItem as Item
+};

package/dist/DEV/Tree.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Composite, useCompositeStore } from "@ariakit/react/composite";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
+const Tree = forwardRef((props, forwardedRef) => {
+  const composite = useCompositeStore({ orientation: "vertical" });
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      role: "tree",
+      ...props,
+      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
+      className: cx("\u{1F95D}-tree", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+DEV: Tree.displayName = "Tree.Root";
+export {
+  TreeItemRoot as Item,
+  TreeItemAction as ItemAction,
+  Tree as Root
+};

package/dist/DEV/TreeItem.js

@@ -0,0 +1,395 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CompositeItem } from "@ariakit/react/composite";
+import { PopoverProvider } from "@ariakit/react/popover";
+import { Role } from "@ariakit/react/role";
+import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
+import { IconButton } from "@stratakit/bricks";
+import {
+  GhostAligner,
+  IconButtonPresentation
+} from "@stratakit/bricks/secret-internals";
+import { Icon } from "@stratakit/foundations";
+import {
+  forwardRef,
+  useEventHandlers
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import * as DropdownMenu from "./DropdownMenu.js";
+import * as ListItem from "./~utils.ListItem.js";
+import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
+const TreeItemErrorContext = React.createContext(void 0);
+const TreeItemActionsContext = React.createContext(void 0);
+const TreeItemDecorationsContext = React.createContext(void 0);
+const TreeItemIconContext = React.createContext(void 0);
+const TreeItemDecorationIdContext = React.createContext(
+  void 0
+);
+const TreeItemLabelContext = React.createContext(void 0);
+const TreeItemLabelIdContext = React.createContext(
+  void 0
+);
+const TreeItemDescriptionContext = React.createContext(void 0);
+const TreeItemDescriptionIdContext = React.createContext(
+  void 0
+);
+const TreeItemInlineActionsContext = React.createContext(void 0);
+const TreeItemOverflowActionsContext = React.createContext(void 0);
+const TreeItemHasOverflowActionsContext = React.createContext(false);
+const TreeItem = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const { expanded, selected } = props;
+    const {
+      onSelectedChange,
+      onExpandedChange,
+      icon,
+      unstable_decorations,
+      label,
+      description,
+      actions,
+      onClick: onClickProp,
+      onKeyDown: onKeyDownProp,
+      ...rest
+    } = props;
+    const onExpanderClick = useEventHandlers(() => {
+      if (expanded === void 0) return;
+      onExpandedChange?.(!expanded);
+    });
+    const handleClick = (event) => {
+      if (selected === void 0) return;
+      event.stopPropagation();
+      onSelectedChange?.(!selected);
+    };
+    const handleKeyDown = (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
+      if (expanded === void 0) return;
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        onExpandedChange?.(event.key === "ArrowRight");
+      }
+    };
+    return /* @__PURE__ */ jsx(TreeItemRootProvider, { ...props, children: /* @__PURE__ */ jsx(
+      TreeItemRoot,
+      {
+        ...rest,
+        onClick: useEventHandlers(onClickProp, handleClick),
+        onKeyDown: useEventHandlers(onKeyDownProp, handleKeyDown),
+        ref: forwardedRef,
+        children: React.useMemo(
+          () => /* @__PURE__ */ jsx(
+            TreeItemNode,
+            {
+              onExpanderClick,
+              expanded,
+              selected
+            }
+          ),
+          [onExpanderClick, expanded, selected]
+        )
+      }
+    ) });
+  })
+);
+DEV: TreeItem.displayName = "Tree.Item";
+function TreeItemRootProvider(props) {
+  const {
+    actions,
+    label,
+    description,
+    icon: iconProp,
+    unstable_decorations: decorations,
+    error
+  } = props;
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const decorationId = React.useId();
+  const icon = error ? /* @__PURE__ */ jsx(StatusIcon, { tone: "attention" }) : iconProp;
+  const hasDecoration = icon || decorations;
+  return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
+    TreeItemDecorationIdContext.Provider,
+    {
+      value: hasDecoration ? decorationId : void 0,
+      children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
+        TreeItemDescriptionIdContext.Provider,
+        {
+          value: description ? descriptionId : void 0,
+          children: props.children
+        }
+      ) }) }) }) }) })
+    }
+  ) }) });
+}
+DEV: TreeItemRootProvider.displayName = "TreeItemRootProvider";
+const TreeItemRoot = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const {
+      style: styleProp,
+      "aria-level": level,
+      selected,
+      expanded,
+      ...rest
+    } = props;
+    const labelId = React.useContext(TreeItemLabelIdContext);
+    const decorationId = React.useContext(TreeItemDecorationIdContext);
+    const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+    const error = React.useContext(TreeItemErrorContext);
+    const errorId = typeof error === "string" ? error : void 0;
+    const describedBy = React.useMemo(() => {
+      const ids = [];
+      if (descriptionId) ids.push(descriptionId);
+      if (decorationId) ids.push(decorationId);
+      if (errorId) ids.push(errorId);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    }, [decorationId, descriptionId, errorId]);
+    const style = React.useMemo(
+      () => ({
+        ...styleProp,
+        "--\u{1F95D}tree-item-level": level
+      }),
+      [styleProp, level]
+    );
+    return /* @__PURE__ */ jsx(
+      CompositeItem,
+      {
+        render: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            role: "treeitem",
+            "aria-expanded": expanded,
+            "aria-selected": selected,
+            "aria-labelledby": labelId,
+            "aria-describedby": describedBy,
+            "aria-level": level,
+            className: cx("\u{1F95D}-tree-item", props.className),
+            style,
+            ref: forwardedRef
+          }
+        ),
+        children: props.children
+      }
+    );
+  })
+);
+DEV: TreeItemRoot.displayName = "TreeItemRoot";
+const TreeItemNode = React.memo((props) => {
+  const { expanded, selected, onExpanderClick } = props;
+  const error = React.useContext(TreeItemErrorContext);
+  return /* @__PURE__ */ jsxs(
+    ListItem.Root,
+    {
+      "data-kiwi-expanded": expanded,
+      "data-kiwi-selected": selected,
+      "data-kiwi-error": error ? true : void 0,
+      className: "\u{1F95D}-tree-item-node",
+      role: void 0,
+      children: [
+        /* @__PURE__ */ jsx(TreeItemDecorations, { onExpanderClick }),
+        /* @__PURE__ */ jsx(TreeItemContent, {}),
+        /* @__PURE__ */ jsx(TreeItemDescription, {}),
+        /* @__PURE__ */ jsx(TreeItemActions, {})
+      ]
+    }
+  );
+});
+DEV: TreeItemNode.displayName = "TreeItemNode";
+const TreeItemDecorations = React.memo((props) => {
+  return /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
+    /* @__PURE__ */ jsx(TreeItemExpander, { onClick: props.onExpanderClick }),
+    /* @__PURE__ */ jsx(TreeItemDecoration, {})
+  ] });
+});
+DEV: TreeItemDecorations.displayName = "TreeItemDecorations";
+function TreeItemDecoration() {
+  const decorationId = React.useContext(TreeItemDecorationIdContext);
+  const decorations = React.useContext(TreeItemDecorationsContext);
+  const icon = React.useContext(TreeItemIconContext);
+  return icon || decorations ? /* @__PURE__ */ jsx(
+    Role,
+    {
+      className: "\u{1F95D}-tree-item-decoration",
+      id: decorationId,
+      render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
+      children: !icon ? decorations : null
+    }
+  ) : null;
+}
+DEV: TreeItemDecoration.displayName = "TreeItemDecoration";
+const TreeItemContent = React.memo(() => {
+  const labelId = React.useContext(TreeItemLabelIdContext);
+  const label = React.useContext(TreeItemLabelContext);
+  return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label });
+});
+DEV: TreeItemContent.displayName = "TreeItemContent";
+const TreeItemDescription = React.memo(() => {
+  const description = React.useContext(TreeItemDescriptionContext);
+  const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+  return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}-tree-item-description", children: description }) : void 0;
+});
+DEV: TreeItemDescription.displayName = "TreeItemDescription";
+const TreeItemActions = React.memo(
+  forwardRef((props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TreeItemActionsProvider, { children: /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        onKeyDown: useEventHandlers(
+          props.onKeyDown,
+          (e) => e.stopPropagation()
+        ),
+        className: cx("\u{1F95D}-tree-item-actions-container", props.className),
+        ref: forwardedRef,
+        render: /* @__PURE__ */ jsxs(Toolbar, { focusLoop: false, children: [
+          /* @__PURE__ */ jsx(TreeItemInlineActions, {}),
+          /* @__PURE__ */ jsx(TreeItemActionsOverflowMenu, {})
+        ] })
+      }
+    ) });
+  })
+);
+DEV: TreeItemActions.displayName = "TreeItemActions";
+function TreeItemActionsProvider(props) {
+  const actionsProp = React.useContext(TreeItemActionsContext);
+  const error = React.useContext(TreeItemErrorContext);
+  const actionsLimit = error ? 2 : 3;
+  const { inline, overflow } = React.useMemo(() => {
+    const actions = React.Children.toArray(actionsProp).filter(Boolean);
+    const inline2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      actions.slice(0, actionsLimit - 1),
+      actions.length === actionsLimit ? actions[actionsLimit - 1] : null
+    ] });
+    const overflow2 = actions.length > actionsLimit ? actions.slice(actionsLimit - 1) : void 0;
+    return { inline: inline2, overflow: overflow2 };
+  }, [actionsProp, actionsLimit]);
+  return /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inline, children: /* @__PURE__ */ jsx(TreeItemOverflowActionsContext.Provider, { value: overflow, children: /* @__PURE__ */ jsx(TreeItemHasOverflowActionsContext.Provider, { value: !!overflow, children: props.children }) }) });
+}
+DEV: TreeItemActionsProvider.displayName = "TreeItemActionsProvider";
+function TreeItemInlineActions() {
+  const actions = React.useContext(TreeItemInlineActionsContext);
+  return actions;
+}
+DEV: TreeItemInlineActions.displayName = "TreeItemInlineActions";
+const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const TreeItemActionsOverflowMenuContext = React.createContext(false);
+function TreeItemActionsOverflowMenu() {
+  const overflow = React.useContext(TreeItemHasOverflowActionsContext);
+  const [open, setOpen] = React.useState(false);
+  const isArrowKeyPressed = React.useRef(false);
+  if (!overflow) return null;
+  return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(
+    DropdownMenu.Root,
+    {
+      open,
+      setOpen: React.useCallback((value) => {
+        if (value && !isArrowKeyPressed.current) {
+          setOpen(true);
+        } else {
+          setOpen(false);
+        }
+      }, []),
+      children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenu.Button,
+          {
+            onKeyDown: (e) => {
+              if (arrowKeys.includes(e.key)) {
+                isArrowKeyPressed.current = true;
+              }
+              queueMicrotask(() => {
+                isArrowKeyPressed.current = false;
+              });
+            },
+            render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContent, {}) })
+      ]
+    }
+  ) });
+}
+DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
+function TreeItemActionsOverflowMenuContent() {
+  const actions = React.useContext(TreeItemOverflowActionsContext);
+  return /* @__PURE__ */ jsx(DropdownMenu.Content, { children: actions });
+}
+DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
+const TreeItemAction = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const error = React.useContext(TreeItemErrorContext);
+    const {
+      visible = error ? true : void 0,
+      // visible by default during error state
+      label,
+      icon,
+      dot,
+      ...rest
+    } = props;
+    if (React.useContext(TreeItemActionsOverflowMenuContext)) {
+      DEV: {
+        if (visible !== void 0)
+          console.warn("overflowing actions should not use `visible` prop");
+      }
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          ...rest,
+          label,
+          icon,
+          unstable_dot: dot,
+          ref: forwardedRef
+        }
+      );
+    }
+    DEV: {
+      if (!icon)
+        throw new Error(
+          "`icon` prop is required when the action is displayed as a button"
+        );
+    }
+    return /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        render: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label,
+            icon,
+            inert: visible === false ? true : void 0,
+            ...rest,
+            dot,
+            variant: "ghost",
+            className: cx("\u{1F95D}-tree-item-action", props.className),
+            "data-kiwi-visible": visible,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  })
+);
+DEV: TreeItemAction.displayName = "TreeItem.Action";
+const TreeItemExpander = forwardRef(
+  (props, forwardedRef) => {
+    const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+    return /* @__PURE__ */ jsx(GhostAligner, { align: descriptionId ? "block" : void 0, children: /* @__PURE__ */ jsx(
+      IconButtonPresentation,
+      {
+        "aria-hidden": "true",
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        variant: "ghost",
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(ChevronDown, {})
+      }
+    ) });
+  }
+);
+DEV: TreeItemExpander.displayName = "TreeItemExpander";
+export {
+  TreeItemAction as Action,
+  TreeItem as Root
+};

package/dist/DEV/index.js

@@ -0,0 +1,21 @@
+"use client";
+import * as unstable_AccordionItem from "./AccordionItem.js";
+import { Banner } from "./Banner.js";
+import { Chip } from "./Chip.js";
+import * as DropdownMenu from "./DropdownMenu.js";
+import * as unstable_ErrorRegion from "./ErrorRegion.js";
+import * as Table from "./Table.js";
+import * as Tabs from "./Tabs.js";
+import * as unstable_Toolbar from "./Toolbar.js";
+import * as Tree from "./Tree.js";
+export {
+  Chip,
+  DropdownMenu,
+  Table,
+  Tabs,
+  Tree,
+  unstable_AccordionItem,
+  Banner as unstable_Banner,
+  unstable_ErrorRegion,
+  unstable_Toolbar
+};