@arun-dev/headless 4.13.0 → 4.15.0

package/dist/toggle-group/index.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.js';
+
+type ToggleGroupOwnProps = {
+    /** Controlled: the pressed Toggles' values. Provide `onValueChange` alongside it. */
+    value?: readonly string[];
+    /** Initial value when uncontrolled. Read once, at mount. */
+    defaultValue?: readonly string[];
+    onValueChange?: (value: string[]) => void;
+    /** Lets more than one Toggle be pressed. Without it, pressing one releases the others. */
+    multiple?: boolean;
+    /** Disables every Toggle in it. */
+    disabled?: boolean;
+    /** Which arrow keys move between the Toggles. */
+    orientation?: Orientation;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToggleGroupProps = ToggleGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToggleGroupOwnProps>;
+/**
+ * Toggles that share one value (decision 17): `role="group"`, one Tab stop — the pressed Toggle,
+ * or the first — and the arrow keys between them. Pressing the pressed Toggle releases it, so the
+ * value may be empty. Inside a Toolbar its Toggles join the Toolbar's arrow keys instead. Name it
+ * with `aria-label`.
+ */
+declare function ToggleGroup({ value: valueProp, defaultValue, onValueChange, multiple, disabled, orientation, className, children, render, ...rest }: ToggleGroupProps): react.JSX.Element;
+
+export { ToggleGroup, type ToggleGroupProps };

package/dist/toggle-group/index.js

@@ -0,0 +1,68 @@
+import {
+  ToggleGroupContext
+} from "../chunk-E4JBFRMM.js";
+import {
+  RovingGroupContext,
+  useRovingGroup,
+  useRovingGroupContext
+} from "../chunk-36N5DD5K.js";
+import "../chunk-2S4XG4VD.js";
+import {
+  useControlled
+} from "../chunk-UEIB3I3T.js";
+import {
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/toggle-group/ToggleGroup.tsx
+import { useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+function ToggleGroup({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  disabled = false,
+  orientation = "horizontal",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? [],
+    name: "ToggleGroup",
+    state: "value"
+  });
+  const toggle = useCallback(
+    (item) => {
+      const pressed = value.includes(item);
+      const next = multiple ? pressed ? value.filter((v) => v !== item) : [...value, item] : pressed ? [] : [item];
+      setValueState(next);
+      onValueChange?.(next);
+    },
+    [value, multiple, setValueState, onValueChange]
+  );
+  const outer = useRovingGroupContext();
+  const roving = useRovingGroup({ orientation });
+  const context = useMemo(() => ({ value, disabled, toggle }), [value, disabled, toggle]);
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "group",
+      "data-orientation": orientation,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children,
+      // In a Toolbar, the Toolbar moves focus.
+      onKeyDown: outer ? void 0 : roving.onKeyDown
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx(ToggleGroupContext.Provider, { value: context, children: outer ? element : /* @__PURE__ */ jsx(RovingGroupContext.Provider, { value: roving.context, children: element }) });
+}
+export {
+  ToggleGroup
+};

package/dist/toolbar/index.cjs

@@ -0,0 +1,357 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/toolbar/index.ts
+var toolbar_exports = {};
+__export(toolbar_exports, {
+  Toolbar: () => index_parts_exports
+});
+module.exports = __toCommonJS(toolbar_exports);
+
+// src/toolbar/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Button: () => ToolbarButton,
+  Group: () => ToolbarGroup,
+  Input: () => ToolbarInput,
+  Link: () => ToolbarLink,
+  Root: () => ToolbarRoot,
+  Separator: () => ToolbarSeparator
+});
+
+// src/toolbar/ToolbarRoot.tsx
+var import_react3 = require("react");
+
+// src/core/useRender.ts
+var import_react = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react.isValidElement)(render)) {
+    return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react.createElement)(defaultTagName, merged);
+}
+
+// src/core/rovingGroup.ts
+var import_react2 = require("react");
+
+// src/core/rovingFocus.ts
+function byDocumentOrder(a, b) {
+  const x = a.ref.current;
+  const y = b.ref.current;
+  if (!x || !y) return 0;
+  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function rovingIndex(key, {
+  count,
+  current,
+  orientation,
+  rtl
+}) {
+  if (count === 0) return null;
+  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+  switch (key) {
+    case nextKey:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prevKey:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
+// src/core/rovingGroup.ts
+var RovingGroupContext = (0, import_react2.createContext)(null);
+function useRovingGroupContext() {
+  return (0, import_react2.useContext)(RovingGroupContext);
+}
+function keyBelongsToField(event, orientation) {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return false;
+  if (target instanceof HTMLInputElement && !/^(text|search|url|tel|email|password|number)$/.test(target.type)) {
+    return false;
+  }
+  const { key } = event;
+  const along = orientation === "horizontal" ? ["ArrowLeft", "ArrowRight", "Home", "End"] : [];
+  if (!along.includes(key)) return false;
+  const start = target.selectionStart ?? 0;
+  const end = target.selectionEnd ?? 0;
+  const atStart = start === 0 && end === 0;
+  const atEnd = start === target.value.length && end === target.value.length;
+  const rtl = getComputedStyle(target).direction === "rtl";
+  const towardStart = key === (rtl ? "ArrowRight" : "ArrowLeft") || key === "Home";
+  return towardStart ? !atStart : !atEnd;
+}
+function useRovingGroup({ orientation }) {
+  const [items, setItems] = (0, import_react2.useState)([]);
+  const register = (0, import_react2.useCallback)((item) => {
+    setItems((current) => [...current, item].sort(byDocumentOrder));
+    return () => setItems((current) => current.filter((i) => i !== item));
+  }, []);
+  const [chosen, setTabStop] = (0, import_react2.useState)(null);
+  const enabled = items.filter((item) => !item.disabled);
+  const tabStop = (
+    // Matched by element: an item re-registers when its props change.
+    chosen && enabled.find((item) => item.ref === chosen.ref) || enabled.find((item) => item.selected) || enabled[0] || null
+  );
+  const onKeyDown = (0, import_react2.useCallback)(
+    (event) => {
+      if (event.defaultPrevented || keyBelongsToField(event, orientation)) return;
+      const current = enabled.findIndex((item2) => item2.ref.current?.contains(event.target));
+      const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+      const next = rovingIndex(event.key, { count: enabled.length, current, orientation, rtl });
+      if (next === null) return;
+      const item = enabled[next];
+      if (!item) return;
+      event.preventDefault();
+      item.ref.current?.focus();
+      setTabStop(item);
+    },
+    [enabled, orientation]
+  );
+  const context = (0, import_react2.useMemo)(() => ({ tabStop, register, setTabStop }), [tabStop, register]);
+  return { context, onKeyDown };
+}
+function useRovingItem(ref, disabled, selected = false) {
+  const group = useRovingGroupContext();
+  const item = (0, import_react2.useMemo)(() => ({ ref, disabled, selected }), [ref, disabled, selected]);
+  const register = group?.register;
+  (0, import_react2.useLayoutEffect)(() => register?.(item), [register, item]);
+  if (!group) return { tabIndex: void 0, onFocus: void 0 };
+  return {
+    tabIndex: group.tabStop?.ref === ref ? 0 : -1,
+    onFocus() {
+      group.setTabStop(item);
+    }
+  };
+}
+
+// src/toolbar/ToolbarRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ToolbarContext = (0, import_react3.createContext)(null);
+function useToolbarContext(part) {
+  const context = (0, import_react3.useContext)(ToolbarContext);
+  if (!context) throw new Error(`<Toolbar.${part}> must be rendered inside <Toolbar.Root>.`);
+  return context;
+}
+function ToolbarRoot({
+  orientation = "horizontal",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const roving = useRovingGroup({ orientation });
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "toolbar",
+      "aria-orientation": orientation,
+      "data-orientation": orientation,
+      className,
+      children,
+      onKeyDown: roving.onKeyDown
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToolbarContext.Provider, { value: { orientation }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RovingGroupContext.Provider, { value: roving.context, children: element }) });
+}
+
+// src/toolbar/ToolbarButton.tsx
+var import_react4 = require("react");
+function ToolbarButton({
+  disabled = false,
+  className,
+  render,
+  ...rest
+}) {
+  useToolbarContext("Button");
+  const elementRef = (0, import_react4.useRef)(null);
+  const roving = useRovingItem(elementRef, disabled);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      disabled: disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: roving.tabIndex,
+      className,
+      ref: elementRef,
+      onFocus: roving.onFocus
+    },
+    consumerProps: rest
+  });
+}
+
+// src/toolbar/ToolbarLink.tsx
+var import_react5 = require("react");
+function ToolbarLink({ className, render, ...rest }) {
+  useToolbarContext("Link");
+  const elementRef = (0, import_react5.useRef)(null);
+  const roving = useRovingItem(elementRef, false);
+  return useRender({
+    render,
+    defaultTagName: "a",
+    props: {
+      tabIndex: roving.tabIndex,
+      className,
+      ref: elementRef,
+      onFocus: roving.onFocus
+    },
+    consumerProps: rest
+  });
+}
+
+// src/toolbar/ToolbarInput.tsx
+var import_react6 = require("react");
+function ToolbarInput({ disabled = false, className, render, ...rest }) {
+  useToolbarContext("Input");
+  const elementRef = (0, import_react6.useRef)(null);
+  const roving = useRovingItem(elementRef, disabled);
+  return useRender({
+    render,
+    defaultTagName: "input",
+    props: {
+      disabled: disabled || void 0,
+      "data-disabled": disabled ? "" : void 0,
+      tabIndex: roving.tabIndex,
+      className,
+      ref: elementRef,
+      onFocus: roving.onFocus
+    },
+    consumerProps: rest
+  });
+}
+
+// src/toolbar/ToolbarGroup.tsx
+function ToolbarGroup({ className, render, ...rest }) {
+  useToolbarContext("Group");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { role: "group", className },
+    consumerProps: rest
+  });
+}
+
+// src/toolbar/ToolbarSeparator.tsx
+function ToolbarSeparator({ className, render, ...rest }) {
+  const { orientation } = useToolbarContext("Separator");
+  const own = orientation === "horizontal" ? "vertical" : "horizontal";
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      role: "separator",
+      "aria-orientation": own,
+      "data-orientation": own,
+      className
+    },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Toolbar
+});

package/dist/toolbar/index.d.cts

@@ -0,0 +1,89 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.cjs';
+
+type ToolbarRootOwnProps = {
+    /** Which arrow keys move between items. */
+    orientation?: Orientation;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarRootProps = ToolbarRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToolbarRootOwnProps>;
+/**
+ * A row of controls (decision 17): `role="toolbar"`, one Tab stop, and the arrow keys across its
+ * Buttons, Links, Inputs and Toggles — a ToggleGroup inside joins in. A text Input keeps the arrow
+ * keys for its caret until the caret reaches an end. Name it with `aria-label`.
+ */
+declare function ToolbarRoot({ orientation, className, children, render, ...rest }: ToolbarRootProps): react.JSX.Element;
+
+type ToolbarButtonOwnProps = {
+    /** Out of the arrow keys, and not usable. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarButtonProps = ToolbarButtonOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof ToolbarButtonOwnProps>;
+/**
+ * A button in the Toolbar, one of its arrow-key items.
+ */
+declare function ToolbarButton({ disabled, className, render, ...rest }: ToolbarButtonProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarLinkOwnProps = {
+    /** Element to render instead of the default `<a>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarLinkProps = ToolbarLinkOwnProps & Omit<ComponentPropsWithRef<'a'>, keyof ToolbarLinkOwnProps>;
+/**
+ * A link in the Toolbar, one of its arrow-key items. A link cannot be disabled.
+ */
+declare function ToolbarLink({ className, render, ...rest }: ToolbarLinkProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarInputOwnProps = {
+    /** Out of the arrow keys, and not usable. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<input>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarInputProps = ToolbarInputOwnProps & Omit<ComponentPropsWithRef<'input'>, keyof ToolbarInputOwnProps>;
+/**
+ * A field in the Toolbar, one of its arrow-key items. It keeps Left, Right, Home and End
+ * for its caret until the caret is at an end.
+ */
+declare function ToolbarInput({ disabled, className, render, ...rest }: ToolbarInputProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarGroupOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarGroupProps = ToolbarGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToolbarGroupOwnProps>;
+/** Related items, side by side: `role="group"`. Its items stay in the Toolbar's arrow keys. */
+declare function ToolbarGroup({ className, render, ...rest }: ToolbarGroupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarSeparatorOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarSeparatorProps = ToolbarSeparatorOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToolbarSeparatorOwnProps | 'children'>;
+/**
+ * A line between groups of items: `role="separator"`, upright in a horizontal Toolbar. A toolbar
+ * may hold separators; the arrow keys pass it.
+ */
+declare function ToolbarSeparator({ className, render, ...rest }: ToolbarSeparatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { ToolbarButton as Button, ToolbarGroup as Group, ToolbarInput as Input, ToolbarLink as Link, ToolbarRoot as Root, ToolbarSeparator as Separator };
+}
+
+export { index_parts as Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarRootProps, type ToolbarSeparatorProps };

package/dist/toolbar/index.d.ts

@@ -0,0 +1,89 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.js';
+
+type ToolbarRootOwnProps = {
+    /** Which arrow keys move between items. */
+    orientation?: Orientation;
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarRootProps = ToolbarRootOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToolbarRootOwnProps>;
+/**
+ * A row of controls (decision 17): `role="toolbar"`, one Tab stop, and the arrow keys across its
+ * Buttons, Links, Inputs and Toggles — a ToggleGroup inside joins in. A text Input keeps the arrow
+ * keys for its caret until the caret reaches an end. Name it with `aria-label`.
+ */
+declare function ToolbarRoot({ orientation, className, children, render, ...rest }: ToolbarRootProps): react.JSX.Element;
+
+type ToolbarButtonOwnProps = {
+    /** Out of the arrow keys, and not usable. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarButtonProps = ToolbarButtonOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof ToolbarButtonOwnProps>;
+/**
+ * A button in the Toolbar, one of its arrow-key items.
+ */
+declare function ToolbarButton({ disabled, className, render, ...rest }: ToolbarButtonProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarLinkOwnProps = {
+    /** Element to render instead of the default `<a>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarLinkProps = ToolbarLinkOwnProps & Omit<ComponentPropsWithRef<'a'>, keyof ToolbarLinkOwnProps>;
+/**
+ * A link in the Toolbar, one of its arrow-key items. A link cannot be disabled.
+ */
+declare function ToolbarLink({ className, render, ...rest }: ToolbarLinkProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarInputOwnProps = {
+    /** Out of the arrow keys, and not usable. */
+    disabled?: boolean;
+    /** Element to render instead of the default `<input>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarInputProps = ToolbarInputOwnProps & Omit<ComponentPropsWithRef<'input'>, keyof ToolbarInputOwnProps>;
+/**
+ * A field in the Toolbar, one of its arrow-key items. It keeps Left, Right, Home and End
+ * for its caret until the caret is at an end.
+ */
+declare function ToolbarInput({ disabled, className, render, ...rest }: ToolbarInputProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarGroupOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarGroupProps = ToolbarGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToolbarGroupOwnProps>;
+/** Related items, side by side: `role="group"`. Its items stay in the Toolbar's arrow keys. */
+declare function ToolbarGroup({ className, render, ...rest }: ToolbarGroupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+type ToolbarSeparatorOwnProps = {
+    /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type ToolbarSeparatorProps = ToolbarSeparatorOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof ToolbarSeparatorOwnProps | 'children'>;
+/**
+ * A line between groups of items: `role="separator"`, upright in a horizontal Toolbar. A toolbar
+ * may hold separators; the arrow keys pass it.
+ */
+declare function ToolbarSeparator({ className, render, ...rest }: ToolbarSeparatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
+
+declare namespace index_parts {
+  export { ToolbarButton as Button, ToolbarGroup as Group, ToolbarInput as Input, ToolbarLink as Link, ToolbarRoot as Root, ToolbarSeparator as Separator };
+}
+
+export { index_parts as Toolbar, type ToolbarButtonProps, type ToolbarGroupProps, type ToolbarInputProps, type ToolbarLinkProps, type ToolbarRootProps, type ToolbarSeparatorProps };