@ui-sdk/react 0.0.0-stage → 0.1.0-beta.1

package/dist/toggle.js

@@ -0,0 +1,76 @@
+"use client";
+// src/toggle.tsx
+import {
+  toggle,
+  toggleGroup
+} from "@ui-sdk/core/toggle";
+import * as React from "react";
+import { useToolbarScope } from "./toolbar-context.js";
+import {
+  createParts,
+  reading,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import {
+  createToggleController,
+  createToggleGroupController
+} from "@ui-sdk/core/toggle";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(toggle, { root: "button", icon: "span" });
+var ToggleGroupContext = React.createContext(null);
+function Toggle(props) {
+  const group = React.useContext(ToggleGroupContext);
+  const toolbar = useToolbarScope();
+  return /* @__PURE__ */ jsx(
+    parts.Root,
+    {
+      ...props,
+      group: group ? reading(group, () => group.api) : void 0,
+      toolbar
+    }
+  );
+}
+var ToggleIcon = parts.Icon;
+function ToggleGroup({
+  value,
+  defaultValue,
+  onValueChange,
+  multiple,
+  deselectable,
+  disabled,
+  orientation,
+  loop,
+  controller,
+  debug,
+  ...props
+}) {
+  const toolbar = useToolbarScope();
+  const group = usePrimitive(toggleGroup, {
+    value,
+    defaultValue,
+    onValueChange,
+    multiple,
+    deselectable,
+    disabled,
+    orientation,
+    loop,
+    controller,
+    debug,
+    toolbar
+  });
+  return /* @__PURE__ */ jsx(ToggleGroupContext, { value: group, children: usePart(
+    group,
+    "group",
+    {},
+    props,
+    "div"
+  ) });
+}
+export {
+  Toggle,
+  ToggleGroup,
+  ToggleIcon,
+  createToggleController,
+  createToggleGroupController
+};

package/dist/token-input.d.ts

@@ -0,0 +1,35 @@
+import { type Token, type TokenInputEditorProps, type TokenInputEditorState, type TokenInputOptions, type TokenInputTokenState } from "@ui-sdk/core/token-input";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * The props of `TokenInput`.
+ * @stable
+ */
+type TokenInputProps = TokenInputOptions & {
+    children?: React.ReactNode;
+    /** Renders a token's content, usually a TokenInputToken. Without it, tokens show their label. */
+    renderToken?: (token: Token) => React.ReactNode;
+};
+/**
+ * A text field with atomic tokens. A TriggerMenu inside it suggests into it.
+ * @stable
+ */
+declare function TokenInput({ children, renderToken, ...options }: TokenInputProps): React.JSX.Element;
+/**
+ * The editable text. The core owns its content; style it, and show the placeholder with `data-empty`.
+ * @stable
+ */
+declare function TokenInputEditor({ placeholder, render, ...props }: Omit<PartProps<"div", TokenInputEditorState>, "children"> & TokenInputEditorProps): React.JSX.Element | null;
+/**
+ * A token's content, inside `renderToken`, with its state for styling.
+ * @stable
+ */
+declare function TokenInputToken(props: PartProps<"span", TokenInputTokenState>): React.JSX.Element | null;
+/**
+ * Removes its token when pressed. Hidden from assistive technology: the keyboard's way is Backspace.
+ * @stable
+ */
+declare function TokenInputTokenRemove(props: PartProps<"span">): React.JSX.Element | null;
+export { createTokenInputController, defaultCodec, fromText, toLabel, toText, } from "@ui-sdk/core/token-input";
+export type { UndoStackOptions, TextEditorAdapter, TextRange, Token, TokenCodec, TokenDeletion, TokenInputApi, TokenInputChangeOptions, TokenInputController, TokenInputEditorProps, TokenInputEditorState, TokenInputOptions, TokenInputPrimitive, TokenInputTokenProps, TokenInputTokenState, TokenInputValue, TokenInputSubmitDetails, TokenInputValueChangeDetails, TokenInputValueChangeReason, TokenInsert, } from "@ui-sdk/core/token-input";
+export { TokenInput, TokenInputEditor, type TokenInputProps, TokenInputToken, TokenInputTokenRemove, };

package/dist/token-input.js

@@ -0,0 +1,100 @@
+"use client";
+// src/token-input.tsx
+import {
+  tokenInput
+} from "@ui-sdk/core/token-input";
+import { renderStaticHtml, renderVersion } from "@ui-sdk/core/renderer";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { EditorContext } from "./editor-context.js";
+import { controlRender, useFieldControl } from "./field-context.js";
+import {
+  HandleScope,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import {
+  createTokenInputController,
+  defaultCodec,
+  fromText,
+  toLabel,
+  toText
+} from "@ui-sdk/core/token-input";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var TokenContext = React.createContext(null);
+function useTokenId(part) {
+  const id = React.useContext(TokenContext);
+  if (!id) {
+    throw new Error(`<${part}> must be used inside renderToken.`);
+  }
+  return id;
+}
+function TokenInput({ children, renderToken, ...options }) {
+  const field = useFieldControl();
+  const input = usePrimitive(tokenInput, {
+    ...options,
+    name: options.name ?? field?.name,
+    disabled: options.disabled || field?.disabled
+  });
+  const custom = !!renderToken;
+  React.useLayoutEffect(() => input.api.internal.setCustom(custom), [custom]);
+  return /* @__PURE__ */ jsx(HandleScope, { handle: input, children: /* @__PURE__ */ jsxs(EditorContext.Provider, { value: input.api.editor, children: [
+    children,
+    renderToken && /* @__PURE__ */ jsx(Tokens, { input, renderToken }),
+    /* @__PURE__ */ jsx(FormInput, {})
+  ] }) });
+}
+function Tokens({
+  input,
+  renderToken
+}) {
+  const version = () => renderVersion(input.instance);
+  React.useSyncExternalStore(input.instance.subscribe, version, version);
+  return input.api.internal.hosts().map(
+    ({ id, token, host }) => createPortal(
+      /* @__PURE__ */ jsx(TokenContext.Provider, { value: id, children: renderToken(token) }),
+      host,
+      id
+    )
+  );
+}
+function FormInput() {
+  const render = ({ value, ...props }) => props.name ? /* @__PURE__ */ jsx("textarea", { ...props, defaultValue: value }) : /* @__PURE__ */ jsx(Fragment, {});
+  return usePart(tokenInput, "form-input", {}, { render }, "textarea");
+}
+function TokenInputEditor({
+  placeholder,
+  render,
+  ...props
+}) {
+  const input = useHandle(tokenInput);
+  const [html] = React.useState(() => ({
+    __html: renderStaticHtml(input.state.value, input.api.internal.describe)
+  }));
+  const element = {
+    ...props,
+    dangerouslySetInnerHTML: html,
+    render: controlRender(useFieldControl(props), "div", render)
+  };
+  return usePart(input, "editor", { placeholder }, element);
+}
+function TokenInputToken(props) {
+  const id = useTokenId("TokenInputToken");
+  return usePart(tokenInput, "token", { id, token: id }, props, "span");
+}
+function TokenInputTokenRemove(props) {
+  const id = useTokenId("TokenInputTokenRemove");
+  return usePart(tokenInput, "token-remove", { id, token: id }, props, "span");
+}
+export {
+  TokenInput,
+  TokenInputEditor,
+  TokenInputToken,
+  TokenInputTokenRemove,
+  createTokenInputController,
+  defaultCodec,
+  fromText,
+  toLabel,
+  toText
+};

package/dist/toolbar-context.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { type PrimitiveHandle } from "./use-primitive.js";
+declare const ToolbarContext: React.Context<PrimitiveHandle<import("@ui-sdk/core/toolbar").ToolbarPrimitive> | null>;
+declare const ToolbarGroupContext: React.Context<boolean>;
+declare function useToolbarScope(): (() => import("@ui-sdk/core/renderer").RovingScope) | undefined;
+export { ToolbarContext, ToolbarGroupContext, useToolbarScope };

package/dist/toolbar-context.js

@@ -0,0 +1,16 @@
+"use client";
+// src/toolbar-context.ts
+import * as React from "react";
+import { reading } from "./use-primitive.js";
+var ToolbarContext = React.createContext(null);
+var ToolbarGroupContext = React.createContext(false);
+function useToolbarScope() {
+  const toolbar = React.useContext(ToolbarContext);
+  const groupDisabled = React.useContext(ToolbarGroupContext);
+  return toolbar ? reading(toolbar, () => toolbar.api.internal.scopeIn(groupDisabled)) : void 0;
+}
+export {
+  ToolbarContext,
+  ToolbarGroupContext,
+  useToolbarScope
+};

package/dist/toolbar.d.ts

@@ -0,0 +1,38 @@
+import { type ToolbarGroupProps, type ToolbarGroupState, type ToolbarOptions, type ToolbarState } from "@ui-sdk/core/toolbar";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * A row of controls with one tab stop and arrow keys between them. Toggles and
+ * toggle groups inside join it. Render menu and select triggers through
+ * `ToolbarButton`, and fields through `ToolbarInput`.
+ * @stable
+ */
+declare function Toolbar({ orientation, loop, disabled, controller, debug, ...props }: ToolbarOptions & PartProps<"div", ToolbarState>): React.JSX.Element;
+/**
+ * A button in the toolbar. Arrow keys move between it and the toolbar's other items.
+ * @stable
+ */
+declare const ToolbarButton: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/toolbar").ToolbarPrimitive, "button", "button">;
+/**
+ * A link in the toolbar. Arrow keys move between it and the toolbar's other items.
+ * @stable
+ */
+declare const ToolbarLink: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/toolbar").ToolbarPrimitive, "link", "a">;
+/**
+ * A text field. Arrows move its caret, and leave it only from the end they point at.
+ * @stable
+ */
+declare const ToolbarInput: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/toolbar").ToolbarPrimitive, "input", "input">;
+/**
+ * A group of related items in the toolbar. `disabled` disables every item in it.
+ * @stable
+ */
+declare function ToolbarGroup({ disabled, children, ...props }: ToolbarGroupProps & Omit<PartProps<"div", ToolbarGroupState>, "disabled">): React.JSX.Element | null;
+/**
+ * A line between groups of items.
+ * @stable
+ */
+declare const ToolbarSeparator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/toolbar").ToolbarPrimitive, "separator", "div">;
+export { createToolbarController } from "@ui-sdk/core/toolbar";
+export type { ToolbarApi, ToolbarButtonProps, ToolbarButtonState, ToolbarController, ToolbarGroupProps, ToolbarGroupState, ToolbarInputProps, ToolbarInputState, ToolbarLinkState, ToolbarOptions, ToolbarOrientation, ToolbarPrimitive, ToolbarState, ToolbarSeparatorState, } from "@ui-sdk/core/toolbar";
+export { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, };

package/dist/toolbar.js

@@ -0,0 +1,63 @@
+"use client";
+// src/toolbar.tsx
+import {
+  toolbar
+} from "@ui-sdk/core/toolbar";
+import * as React from "react";
+import { ToolbarContext, ToolbarGroupContext } from "./toolbar-context.js";
+import {
+  createParts,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createToolbarController } from "@ui-sdk/core/toolbar";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(toolbar, {
+  button: "button",
+  link: "a",
+  input: "input",
+  separator: "div"
+});
+function Toolbar({
+  orientation,
+  loop,
+  disabled,
+  controller,
+  debug,
+  ...props
+}) {
+  const handle = usePrimitive(toolbar, {
+    orientation,
+    loop,
+    disabled,
+    controller,
+    debug
+  });
+  return /* @__PURE__ */ jsx(ToolbarContext.Provider, { value: handle, children: usePart(handle, "root", {}, props) });
+}
+var ToolbarButton = parts.Button;
+var ToolbarLink = parts.Link;
+var ToolbarInput = parts.Input;
+function ToolbarGroup({
+  disabled,
+  children,
+  ...props
+}) {
+  const content = (state) => /* @__PURE__ */ jsx(ToolbarGroupContext.Provider, { value: state.disabled, children: typeof children === "function" ? children(state) : children });
+  return usePart(
+    toolbar,
+    "group",
+    { id: React.useId(), disabled },
+    { ...props, children: content }
+  );
+}
+var ToolbarSeparator = parts.Separator;
+export {
+  Toolbar,
+  ToolbarButton,
+  ToolbarGroup,
+  ToolbarInput,
+  ToolbarLink,
+  ToolbarSeparator,
+  createToolbarController
+};

package/dist/tooltip.d.ts

@@ -0,0 +1,39 @@
+import { type TooltipContentProps, type TooltipContentState, type TooltipOptions, type TooltipShortcutProps, type TooltipShortcutState, type TooltipTriggerProps, type TooltipTriggerState } from "@ui-sdk/core/tooltip";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+/**
+ * The props of `Tooltip`.
+ * @stable
+ */
+type TooltipProps = TooltipOptions & {
+    children?: React.ReactNode;
+};
+/**
+ * A short label or hint that appears when the pointer rests on its trigger or keyboard focus reaches it.
+ * @stable
+ */
+declare function Tooltip({ children, container, ...options }: TooltipProps): React.JSX.Element;
+type TriggerPartProps = Omit<PartProps<"button", TooltipTriggerState>, "value" | "defaultValue" | "onChange"> & TooltipTriggerProps;
+/**
+ * The element the tooltip names or describes, usually a button.
+ * @stable
+ */
+declare function TooltipTrigger({ controller, ...props }: TriggerPartProps): React.JSX.Element;
+/**
+ * The tooltip itself, positioned against its trigger.
+ * @stable
+ */
+declare function TooltipContent<Payload = unknown>({ side, align, sideOffset, alignOffset, collisionPadding, arrowPadding, anchor, container, ...props }: PartProps<"div", TooltipContentState<Payload>> & TooltipContentProps): React.JSX.Element | null;
+/**
+ * An arrow on the tooltip's edge that points at its trigger.
+ * @stable
+ */
+declare const TooltipArrow: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/tooltip").TooltipPrimitive, "arrow", "div">;
+/**
+ * Shows the tooltip's shortcut, like `⌘S`, formatted for the platform.
+ * @stable
+ */
+declare function TooltipShortcut(props: PartProps<"span", TooltipShortcutState> & TooltipShortcutProps): React.JSX.Element | null;
+export { createTooltipController } from "@ui-sdk/core/tooltip";
+export type { TooltipApi, TooltipArrowState, TooltipContentProps, TooltipContentState, TooltipController, TooltipOpenChangeReason, TooltipOptions, TooltipPayloadChangeReason, TooltipPrimitive, TooltipShortcutProps, TooltipShortcutState, TooltipTriggerProps, TooltipTriggerState, } from "@ui-sdk/core/tooltip";
+export { Tooltip, TooltipArrow, TooltipContent, type TooltipProps, TooltipShortcut, TooltipTrigger, };

package/dist/tooltip.js

@@ -0,0 +1,108 @@
+"use client";
+// src/tooltip.tsx
+import {
+  tooltip
+} from "@ui-sdk/core/tooltip";
+import * as React from "react";
+import {
+  Connected,
+  renderPopup,
+  useControllerEntry,
+  useOwnContainer,
+  usePopupContainer
+} from "./popup.js";
+import {
+  createParts,
+  HandleScope,
+  renderElement,
+  useNearest,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import { createTooltipController } from "@ui-sdk/core/tooltip";
+import { jsx } from "react/jsx-runtime";
+var parts = createParts(tooltip, { trigger: "button", arrow: "div" });
+var ContainerContext = React.createContext(void 0);
+var InTriggerContext = React.createContext(false);
+function Tooltip({ children, container, ...options }) {
+  const handle = usePrimitive(tooltip, options);
+  useControllerEntry(options.controller, handle);
+  return /* @__PURE__ */ jsx(HandleScope, { handle, children: /* @__PURE__ */ jsx(ContainerContext.Provider, { value: container, children }) });
+}
+function TooltipTrigger({ controller, ...props }) {
+  const { payload: _, render, ...rest } = props;
+  const unconnected = () => renderElement("button", { type: "button", ...rest }, render, {
+    open: false
+  });
+  return /* @__PURE__ */ jsx(InTriggerContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
+    Connected,
+    {
+      primitive: tooltip,
+      controller,
+      fallback: unconnected,
+      children: /* @__PURE__ */ jsx(parts.Trigger, { ...props })
+    }
+  ) });
+}
+function TooltipContent({
+  side,
+  align,
+  sideOffset,
+  alignOffset,
+  collisionPadding,
+  arrowPadding,
+  anchor,
+  container,
+  ...props
+}) {
+  const target = usePopupContainer(useOwnContainer(container, ContainerContext));
+  const content = {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    collisionPadding,
+    arrowPadding,
+    anchor
+  };
+  const element = usePart(
+    tooltip,
+    "content",
+    content,
+    props
+  );
+  return element && renderPopup(element, target);
+}
+var TooltipArrow = parts.Arrow;
+var text = (state) => state.text;
+function TooltipShortcut(props) {
+  const inTrigger = React.useContext(InTriggerContext);
+  if (useNearest(tooltip)) {
+    return /* @__PURE__ */ jsx(ShortcutPart, { ...props });
+  }
+  if (inTrigger) {
+    return null;
+  }
+  throw new Error("Tooltip parts must be used inside <Tooltip>.");
+}
+function ShortcutPart({
+  shortcut,
+  children = text,
+  ...props
+}) {
+  return usePart(
+    tooltip,
+    "shortcut",
+    { shortcut },
+    { ...props, children },
+    "span"
+  );
+}
+export {
+  Tooltip,
+  TooltipArrow,
+  TooltipContent,
+  TooltipShortcut,
+  TooltipTrigger,
+  createTooltipController
+};

package/dist/tree.d.ts

@@ -0,0 +1,51 @@
+import { type TreeItemData, type TreeItemProps, type TreeItemState, type TreeOptions, type TreeState, type TreeMode } from "@ui-sdk/core/tree";
+import * as React from "react";
+import { type PartProps } from "./use-primitive.js";
+type Clashing = "value" | "defaultValue" | "defaultChecked" | "onChange" | "onSelect";
+/**
+ * The props of `Tree`.
+ * @stable
+ */
+type TreeProps<Mode extends TreeMode = "single"> = Omit<PartProps<"div", TreeState>, Clashing | keyof TreeOptions> & TreeOptions<Mode> & {};
+/**
+ * A tree of items that expand and collapse, with one tab stop and arrow keys between its items.
+ * @stable
+ */
+declare function Tree<Mode extends TreeMode = "single">({ items, paths, mode, value, defaultValue, onValueChange, activation, expanded, defaultExpanded, onExpandedChange, expandOnPress, checkable, checked, defaultChecked, onCheckedChange, checkStrategy, onAction, pendingAnnouncement, loadChildren, current, onHighlight, disabled, focusableWhenDisabled, keepMounted, hiddenUntilFound, announcement, controller, debug, children, ...props }: TreeProps<Mode>): React.JSX.Element;
+/**
+ * An item. Put its text in a `TreeItemLabel` and its children in a
+ * `TreeGroup`, which makes it a branch. Set `branch` for one whose children
+ * load later, or whose group is inside a component of your own.
+ * @stable
+ */
+declare function TreeItem({ value, branch, disabled, label, children, ...props }: Omit<PartProps<"div", TreeItemState>, Clashing> & Omit<TreeItemProps, "parent">): React.JSX.Element;
+/**
+ * The item's text, which names it. Render it as a link to make the item one.
+ * @stable
+ */
+declare const TreeItemLabel: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/tree").TreePrimitive, "label", "span">;
+/**
+ * The arrow that expands and collapses a branch. Alt or Option expands everything in it.
+ * @stable
+ */
+declare const TreeItemIndicator: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/tree").TreePrimitive, "indicator", "span">;
+/**
+ * The item's checkbox, with `checkable`. Screen readers hear the item's checked state instead.
+ * @stable
+ */
+declare const TreeItemCheckbox: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/tree").TreePrimitive, "checkbox", "span">;
+/**
+ * A branch's children. Rendered while the branch is expanded or animating closed.
+ * @stable
+ */
+declare const TreeGroup: import("./use-primitive.js").PartComponent<import("@ui-sdk/core/tree").TreePrimitive, "group", "div">;
+/**
+ * Renders data items. Used by data trees, and available for custom layouts.
+ * @stable
+ */
+declare function TreeItems({ items }: {
+    items: TreeItemData[];
+}): React.JSX.Element[];
+export { createTreeController, toggleTreeChecked, treeCheckedStates, treeFromPaths, visibleTreeRows, } from "@ui-sdk/core/tree";
+export type { ListHighlightDetails, TreeActionDetails, TreeAnnouncement, TreeApi, TreeChangeOptions, TreeCheckStrategy, TreeCheckedChangeReason, TreeCheckedState, TreeCollection, TreeCollectionNode, TreeController, TreeExpandedChangeReason, TreeGroupProps, TreeGroupState, TreeItemData, TreeItemPartProps, TreeItemProps, TreeItemState, TreeOptions, TreePrimitive, TreeState, TreeRow, TreeMode, TreeValue, TreeValueChangeReason, } from "@ui-sdk/core/tree";
+export { Tree, TreeGroup, TreeItem, TreeItemCheckbox, TreeItemIndicator, TreeItemLabel, TreeItems, type TreeProps, };

package/dist/tree.js

@@ -0,0 +1,150 @@
+"use client";
+// src/tree.tsx
+import {
+  tree as treePrimitive
+} from "@ui-sdk/core/tree";
+import * as React from "react";
+import { hasChild } from "./children.js";
+import {
+  createParts,
+  readIn,
+  useHandle,
+  usePart,
+  usePrimitive
+} from "./use-primitive.js";
+import {
+  createTreeController,
+  toggleTreeChecked,
+  treeCheckedStates,
+  treeFromPaths,
+  visibleTreeRows
+} from "@ui-sdk/core/tree";
+import { jsx, jsxs } from "react/jsx-runtime";
+var parts = createParts(treePrimitive, {
+  label: "span",
+  indicator: "span",
+  checkbox: "span",
+  group: "div"
+});
+var ItemContext = React.createContext(null);
+function Tree({
+  items,
+  paths,
+  mode,
+  value,
+  defaultValue,
+  onValueChange,
+  activation,
+  expanded,
+  defaultExpanded,
+  onExpandedChange,
+  expandOnPress,
+  checkable,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  checkStrategy,
+  onAction,
+  pendingAnnouncement,
+  loadChildren,
+  current,
+  onHighlight,
+  disabled,
+  focusableWhenDisabled,
+  keepMounted,
+  hiddenUntilFound,
+  announcement,
+  controller,
+  debug,
+  children,
+  ...props
+}) {
+  const tree = usePrimitive(treePrimitive, {
+    items,
+    paths,
+    mode,
+    value,
+    defaultValue,
+    onValueChange,
+    activation,
+    expanded,
+    defaultExpanded,
+    onExpandedChange,
+    expandOnPress,
+    checkable,
+    checked,
+    defaultChecked,
+    onCheckedChange,
+    checkStrategy,
+    onAction,
+    pendingAnnouncement,
+    loadChildren,
+    current,
+    onHighlight,
+    disabled,
+    focusableWhenDisabled,
+    keepMounted,
+    hiddenUntilFound,
+    announcement,
+    controller,
+    debug
+  });
+  const data = readIn(tree, () => tree.api.internal.items());
+  const content = children ?? (data && /* @__PURE__ */ jsx(TreeItems, { items: data }));
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value: null, children: usePart(tree, "root", {}, { ...props, children: content }) });
+}
+function TreeItem({
+  value,
+  branch,
+  disabled,
+  label,
+  children,
+  ...props
+}) {
+  const parent = React.useContext(ItemContext);
+  const item = {
+    value,
+    parent,
+    // A branch is one with a group among its children.
+    branch: branch ?? (typeof children === "function" ? void 0 : hasChild(children, TreeGroup) || void 0),
+    disabled,
+    label
+  };
+  return /* @__PURE__ */ jsx(ItemContext.Provider, { value, children: usePart(treePrimitive, "item", item, { ...props, children }) });
+}
+var TreeItemLabel = parts.Label;
+var TreeItemIndicator = parts.Indicator;
+var TreeItemCheckbox = parts.Checkbox;
+var TreeGroup = parts.Group;
+function TreeItems({ items }) {
+  const tree = useHandle(treePrimitive);
+  const checkable = tree.state.checkable;
+  return items.map((item) => /* @__PURE__ */ jsxs(
+    TreeItem,
+    {
+      value: item.value,
+      branch: item.children !== void 0,
+      disabled: item.disabled,
+      children: [
+        checkable && /* @__PURE__ */ jsx(TreeItemCheckbox, {}),
+        /* @__PURE__ */ jsx(TreeItemLabel, { render: item.href ? /* @__PURE__ */ jsx("a", { href: item.href }) : void 0, children: item.label }),
+        item.children && /* @__PURE__ */ jsx(TreeGroup, { children: /* @__PURE__ */ jsx(TreeItems, { items: item.children }) })
+      ]
+    },
+    item.value
+  ));
+}
+export {
+  Tree,
+  TreeGroup,
+  TreeItem,
+  TreeItemCheckbox,
+  TreeItemIndicator,
+  TreeItemLabel,
+  TreeItems,
+  createTreeController,
+  toggleTreeChecked,
+  treeCheckedStates,
+  treeFromPaths,
+  visibleTreeRows
+};