@tensor_1/react 2.41.0 → 2.43.0

package/dist/components/Input.d.ts

@@ -5,6 +5,11 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
     size?: 'sm' | 'md';
     invalid?: boolean;
     valid?: boolean;
+    /**
+     * "Check this": a value the reader should confirm, not an error, e.g. one an assistant filled
+     * in (HAR-1814). Draws the warning border; `invalid` wins when both are set.
+     */
+    warning?: boolean;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 interface InputGroupProps {

package/dist/components/Input.js

@@ -2,13 +2,14 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, forwardRef, isValidElement } from "react";
 import { cx } from "../cx.js";
 const Input = forwardRef(
-  ({ size = "md", invalid, valid, className, ...props }, ref) => /* @__PURE__ */ jsx(
+  ({ size = "md", invalid, valid, warning, className, ...props }, ref) => /* @__PURE__ */ jsx(
     "input",
     {
       ref,
       className: cx("uix-input", size === "sm" && "uix-input--sm", className),
       "aria-invalid": invalid || void 0,
       "data-valid": valid || void 0,
+      "data-warning": warning || void 0,
       ...props
     }
   )

package/dist/components/Kbd.d.ts

@@ -7,6 +7,25 @@ interface KbdProps extends HTMLAttributes<HTMLElement> {
 /** One keyboard key over `.uix-kbd` (HAR-1361; TENSOR C14, MOTUS B-A16). */
 declare function Kbd({ className, children, ...props }: KbdProps): react.JSX.Element;
 type KbdPlatform = 'mac' | 'other';
+/**
+ * The platform for glyphs and `aria-keyshortcuts`: `platform` when given, else the browser's. The
+ * server and the hydrating render use `other`; a component mounted later (a menu row on open)
+ * reads the platform at once, so it never flashes Ctrl before ⌘.
+ */
+declare function useKbdPlatform(platform?: KbdPlatform): KbdPlatform;
+/**
+ * A keyboard shortcut (HAR-2031): the keys pressed together, in `KbdCombo`'s names, e.g.
+ * `['Mod', 'K']`, `['Shift', '?']` or `['A']`. `Mod` is ⌘ on Apple and Ctrl elsewhere.
+ */
+type KeyShortcut = readonly string[];
+/**
+ * The `aria-keyshortcuts` value of a shortcut on a platform (HAR-2031): `['Mod', 'K']` is
+ * `Meta+K` on Apple and `Control+K` elsewhere; a single letter is upper-cased (`['a']` is `A`).
+ * For a control the kit does not render.
+ */
+declare function ariaKeyShortcuts(keys: KeyShortcut, platform: KbdPlatform): string;
+/** A `shortcut` prop that is key names rather than a node (HAR-2031). */
+declare const isKeyShortcut: (value: unknown) => value is KeyShortcut;
 interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * Keys in order, e.g. `['Mod', 'K']`. `Mod` is ⌘ on Apple and Ctrl elsewhere; `Shift`,
@@ -24,4 +43,4 @@ interface KbdComboProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'
  */
 declare function KbdCombo({ keys, platform, keyLabels, className, ...props }: KbdComboProps): react.JSX.Element;
 
-export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps };
+export { Kbd, KbdCombo, type KbdComboProps, type KbdPlatform, type KbdProps, type KeyShortcut, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform };

package/dist/components/Kbd.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
 function Kbd({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("kbd", { className: cx("uix-kbd", className), ...props, children });
@@ -12,6 +12,11 @@ const KEYS = {
   Alt: { mac: ["\u2325", "Option"], other: ["Alt", "Alt"] },
   Enter: { mac: ["\u21B5", "Enter"], other: ["Enter", "Enter"] },
   Escape: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Esc: { mac: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Delete: { mac: ["Del", "Delete"], other: ["Del", "Delete"] },
+  Del: { mac: ["Del", "Delete"], other: ["Del", "Delete"] },
+  Space: { mac: ["Space", "Space"], other: ["Space", "Space"] },
+  " ": { mac: ["Space", "Space"], other: ["Space", "Space"] },
   Backspace: { mac: ["\u232B", "Backspace"], other: ["Backspace", "Backspace"] },
   Tab: { mac: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
   ArrowUp: { mac: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
@@ -24,12 +29,27 @@ const detectPlatform = () => {
   const nav = navigator;
   return /mac|iphone|ipad|ipod/i.test(nav.userAgentData?.platform ?? navigator.platform ?? "") ? "mac" : "other";
 };
+const noSubscription = () => () => {
+};
+const serverPlatform = () => "other";
+function useKbdPlatform(platform) {
+  const detected = useSyncExternalStore(noSubscription, detectPlatform, serverPlatform);
+  return platform ?? detected;
+}
+const ARIA_KEYS = {
+  Mod: { mac: "Meta", other: "Control" },
+  Ctrl: { mac: "Control", other: "Control" },
+  Esc: { mac: "Escape", other: "Escape" },
+  Del: { mac: "Delete", other: "Delete" },
+  " ": { mac: "Space", other: "Space" },
+  "+": { mac: "Plus", other: "Plus" }
+};
+function ariaKeyShortcuts(keys, platform) {
+  return keys.map((key) => ARIA_KEYS[key]?.[platform] ?? (key.length === 1 ? key.toUpperCase() : key)).join("+");
+}
+const isKeyShortcut = (value) => Array.isArray(value) && value.length > 0 && value.every((key) => typeof key === "string");
 function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
-  const [detected, setDetected] = useState("other");
-  useEffect(() => {
-    if (!platform) setDetected(detectPlatform());
-  }, [platform]);
-  const active = platform ?? detected;
+  const active = useKbdPlatform(platform);
   const parts = keys.map((key) => {
     const known = KEYS[key]?.[active];
     return { glyph: known?.[0] ?? key, spoken: keyLabels?.[key] ?? known?.[1] ?? key };
@@ -41,5 +61,8 @@ function KbdCombo({ keys, platform, keyLabels, className, ...props }) {
 }
 export {
   Kbd,
-  KbdCombo
+  KbdCombo,
+  ariaKeyShortcuts,
+  isKeyShortcut,
+  useKbdPlatform
 };

package/dist/components/Menu.d.ts

@@ -2,6 +2,7 @@ import * as react from 'react';
 import { ReactElement, ReactNode } from 'react';
 import { UixRenderLink } from '../link.js';
 import { Placement } from '../overlay-position.js';
+import { KeyShortcut } from './Kbd.js';
 
 /** `id` and `data-*` for the item's own element (HAR-1629): a stable hook for tests, journeys and analytics. */
 interface MenuItemAttributes {
@@ -40,8 +41,12 @@ interface MenuItemProps extends MenuItemAttributes {
     href?: string;
     renderLink?: UixRenderLink;
     icon?: ReactNode;
-    /** Shortcut hint at the end of the row, e.g. `<KbdCombo keys={['Mod', 'D']} />`. */
-    shortcut?: ReactNode;
+    /**
+     * The row's keyboard shortcut, at its end. Key names (`['Mod', 'D']`, `['A']`) render with
+     * `KbdCombo` and set the row's `aria-keyshortcuts` for the viewer's platform (HAR-2031); any
+     * other node renders as given.
+     */
+    shortcut?: KeyShortcut | ReactNode;
     tone?: 'default' | 'danger';
     disabled?: boolean;
     className?: string;
@@ -70,7 +75,8 @@ interface MenuItemRadioProps extends MenuItemAttributes {
     closeOnSelect?: boolean;
     children?: ReactNode;
     icon?: ReactNode;
-    shortcut?: ReactNode;
+    /** Key names (`['Shift', 'W']`) or a node; see `MenuItemProps.shortcut`. */
+    shortcut?: KeyShortcut | ReactNode;
     disabled?: boolean;
     className?: string;
 }
@@ -83,7 +89,8 @@ interface MenuItemCheckboxProps extends MenuItemAttributes {
     closeOnSelect?: boolean;
     children?: ReactNode;
     icon?: ReactNode;
-    shortcut?: ReactNode;
+    /** Key names (`['Shift', 'W']`) or a node; see `MenuItemProps.shortcut`. */
+    shortcut?: KeyShortcut | ReactNode;
     disabled?: boolean;
     className?: string;
 }

package/dist/components/Menu.js

@@ -5,6 +5,16 @@ import { cx } from "../cx.js";
 import { Popover } from "./Popover.js";
 import { CheckIcon } from "../icons/components.js";
 import { renderUixLink } from "../link.js";
+import { KbdCombo, ariaKeyShortcuts, isKeyShortcut, useKbdPlatform } from "./Kbd.js";
+function useRowShortcut(shortcut) {
+  const platform = useKbdPlatform();
+  if (shortcut == null) return { node: null, aria: {} };
+  if (!isKeyShortcut(shortcut)) return { node: /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut }), aria: {} };
+  return {
+    node: /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: /* @__PURE__ */ jsx(KbdCombo, { keys: [...shortcut], platform }) }),
+    aria: { "aria-keyshortcuts": ariaKeyShortcuts(shortcut, platform) }
+  };
+}
 const MenuContext = createContext(null);
 const MenuRadioContext = createContext(null);
 const ITEM = '[role^="menuitem"]:not([aria-disabled="true"])';
@@ -150,18 +160,20 @@ function MenuItem({ children, onSelect, href, renderLink, icon, shortcut, tone =
   const menu = useContext(MenuContext);
   const classes = cx("uix-menu__item", tone === "danger" && "uix-menu__item--danger", className);
   const attributes = itemAttributes(rest);
+  const keys = useRowShortcut(shortcut);
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
     /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
-    shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+    keys.node
   ] });
   if (href != null && !disabled) {
-    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...attributes, href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
+    return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...attributes, ...keys.aria, href, role: "menuitem", tabIndex: -1, className: classes, onClick: () => menu?.close(false), children: body }) });
   }
   return /* @__PURE__ */ jsx(
     "button",
     {
       ...attributes,
+      ...keys.aria,
       type: "button",
       role: "menuitem",
       tabIndex: -1,
@@ -189,10 +201,12 @@ function CheckableItem({
   ...rest
 }) {
   const menu = useContext(MenuContext);
+  const keys = useRowShortcut(shortcut);
   return /* @__PURE__ */ jsxs(
     "button",
     {
       ...itemAttributes(rest),
+      ...keys.aria,
       type: "button",
       role,
       "aria-checked": checked,
@@ -216,7 +230,7 @@ function CheckableItem({
         /* @__PURE__ */ jsx("span", { className: "uix-menu__check", "aria-hidden": "true", children: checked && /* @__PURE__ */ jsx(CheckIcon, {}) }),
         icon != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__icon", "aria-hidden": "true", children: icon }),
         /* @__PURE__ */ jsx("span", { className: "uix-menu__text", children }),
-        shortcut != null && /* @__PURE__ */ jsx("span", { className: "uix-menu__shortcut", children: shortcut })
+        keys.node
       ]
     }
   );

package/dist/components/MetricInput.d.ts

@@ -10,6 +10,13 @@ interface MetricInputProps {
     label: string;
     invalid?: boolean;
     errorMessage?: string;
+    /**
+     * A required value (HAR-1819): the label shows the same marker as `Field`, and the input
+     * gets native `required` and `aria-required="true"`.
+     */
+    required?: boolean;
+    /** Guidance under the control (a range, a unit rule), tied to the input by `aria-describedby`. */
+    hint?: string;
     disabled?: boolean;
     readOnly?: boolean;
     parse?: (input: string) => number | null;
@@ -18,6 +25,6 @@ interface MetricInputProps {
     id?: string;
 }
 /** Accessible numeric recipe composed from Input and the UIx stepper controls. */
-declare function MetricInput({ value, onValueChange, min, max, step, unit, label, invalid, errorMessage, disabled, readOnly, parse, format, className, id: providedId, }: MetricInputProps): react.JSX.Element;
+declare function MetricInput({ value, onValueChange, min, max, step, unit, label, invalid, errorMessage, required, hint, disabled, readOnly, parse, format, className, id: providedId, }: MetricInputProps): react.JSX.Element;
 
 export { MetricInput, type MetricInputProps };

package/dist/components/MetricInput.js

@@ -15,6 +15,8 @@ function MetricInput({
   label,
   invalid,
   errorMessage,
+  required,
+  hint,
   disabled,
   readOnly,
   parse = parseMetricValue,
@@ -25,6 +27,9 @@ function MetricInput({
   const generatedId = useId();
   const id = providedId ?? generatedId;
   const errorId = `${id}-error`;
+  const hintId = `${id}-hint`;
+  const showError = Boolean(invalid && errorMessage);
+  const describedBy = [hint ? hintId : null, showError ? errorId : null].filter(Boolean).join(" ") || void 0;
   const [text, setText] = useState(() => format(value));
   useEffect(() => setText(format(value)), [value, format]);
   const commit = (input) => {
@@ -53,7 +58,7 @@ function MetricInput({
     setText(parsed === null && event.currentTarget.value.trim() !== "" ? format(value) : format(parsed));
   };
   return /* @__PURE__ */ jsxs("div", { className: cx("uix-metric-input", invalid && "uix-metric-input--invalid", className), children: [
-    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: id, "data-required": required || void 0, children: label }),
     /* @__PURE__ */ jsxs("div", { className: "uix-metric-input__control", children: [
       /* @__PURE__ */ jsx(
         Input,
@@ -68,7 +73,9 @@ function MetricInput({
           "aria-valuenow": value ?? void 0,
           "aria-valuemin": min,
           "aria-valuemax": max,
-          "aria-describedby": invalid && errorMessage ? errorId : void 0,
+          "aria-describedby": describedBy,
+          required,
+          "aria-required": required || void 0,
           invalid,
           disabled,
           readOnly
@@ -84,7 +91,8 @@ function MetricInput({
       "Unit: ",
       unit
     ] }),
-    invalid && errorMessage && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error", children: errorMessage })
+    hint && /* @__PURE__ */ jsx("span", { id: hintId, className: "uix-field__hint", children: hint }),
+    showError && /* @__PURE__ */ jsx("span", { id: errorId, className: "uix-field__error", children: errorMessage })
   ] });
 }
 export {

package/dist/components/Modal.d.ts

@@ -1,9 +1,23 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { DiscardPromptLabels } from './DiscardPrompt.js';
+import './Button.js';
+import '../link.js';
+import './Kbd.js';
 
 interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     open: boolean;
     onClose?: () => void;
+    /**
+     * The dialog holds input that is not saved (HAR-2029). Escape, the close button and a
+     * `DialogClose` then open an anchored "Discard changes?" step with focus on "Keep editing"
+     * instead of calling `onClose`; "Discard" calls it. A clean dialog closes at once.
+     */
+    dirty?: boolean;
+    /** A save is in flight: Escape, the close button and a `DialogClose` do nothing. */
+    pending?: boolean;
+    /** The words of the discard step. Default: `UixLabelsProvider` `discardPrompt`, then English. */
+    discardLabels?: Partial<DiscardPromptLabels>;
     title?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
@@ -11,6 +25,6 @@ interface ModalProps extends Omit<HTMLAttributes<HTMLDialogElement>, 'title'> {
     closeLabel?: string;
     role?: 'dialog' | 'alertdialog';
 }
-declare function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role, ...rest }: ModalProps): react.JSX.Element;
+declare function Modal({ open, onClose, dirty, pending, discardLabels, title, children, footer, className, closeLabel: closeLabelProp, role, onKeyDown, ...rest }: ModalProps): react.JSX.Element;
 
 export { Modal, type ModalProps };

package/dist/components/Modal.js

@@ -1,23 +1,68 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef } from "react";
 import { cx } from "../cx.js";
 import { useUixLabels } from "../labels-context.js";
-import { useDialog } from "../hooks/useDialog.js";
+import { useGuardedDialog } from "./DiscardPrompt.js";
 const CloseIcon = () => /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-function Modal({ open, onClose, title, children, footer, className, closeLabel: closeLabelProp, role = "dialog", ...rest }) {
+function Modal({
+  open,
+  onClose,
+  dirty = false,
+  pending = false,
+  discardLabels,
+  title,
+  children,
+  footer,
+  className,
+  closeLabel: closeLabelProp,
+  role = "dialog",
+  onKeyDown,
+  ...rest
+}) {
   const uixLabels = useUixLabels();
   const closeLabel = closeLabelProp ?? uixLabels.modal?.close ?? "Close dialog";
-  const ref = useDialog(open, onClose);
+  const closeRef = useRef(null);
+  const guard = useGuardedDialog({ open, onClose, dirty, pending, labels: discardLabels, closeRef });
   const titleId = useId();
-  return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-dialog", className), role, "aria-labelledby": title != null ? titleId : void 0, ...rest, children: [
-    (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-dialog__header", children: [
-      title && /* @__PURE__ */ jsx("h2", { className: "uix-dialog__title", id: titleId, children: title }),
-      onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-dialog__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
-    ] }),
-    children != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__body", children }),
-    footer != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__footer", children: footer })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref: guard.ref,
+      className: cx("uix-dialog", className),
+      role,
+      "aria-labelledby": title != null ? titleId : void 0,
+      ...rest,
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        guard.onKeyDown(event);
+      },
+      children: [
+        guard.provide(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            (title != null || onClose) && /* @__PURE__ */ jsxs("div", { className: "uix-dialog__header", children: [
+              title && /* @__PURE__ */ jsx("h2", { className: "uix-dialog__title", id: titleId, children: title }),
+              onClose && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  ref: closeRef,
+                  type: "button",
+                  className: "uix-dialog__close",
+                  onClick: () => guard.requestClose(),
+                  "aria-label": closeLabel,
+                  "aria-disabled": pending || void 0,
+                  children: /* @__PURE__ */ jsx(CloseIcon, {})
+                }
+              )
+            ] }),
+            children != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__body", children }),
+            footer != null && /* @__PURE__ */ jsx("div", { className: "uix-dialog__footer", children: footer })
+          ] })
+        ),
+        guard.prompt
+      ]
+    }
+  );
 }
 export {
   Modal

package/dist/components/OrgChart.d.ts

@@ -0,0 +1,121 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+
+/** One person (or position) in an {@link OrgChart}. */
+interface OrgChartNode {
+    id: string;
+    /** The person's name; also the card's accessible name. */
+    name: string;
+    /** Job title, under the name. */
+    title?: string;
+    team?: string;
+    location?: string;
+    /** Photo URL. Without one the card shows {@link OrgChartNode.initials}, else the name's initials. */
+    photo?: string;
+    initials?: string;
+    /** A short marker on the card, such as "You". It is read with the person's description. */
+    badge?: string;
+    /**
+     * How many people report directly to this one. With `loadChildren`, a count above 0 shows the
+     * count on the card and makes the person expandable before {@link OrgChartNode.children} is
+     * known. Once the reports are known, their number wins.
+     */
+    reportCount?: number;
+    /** The direct reports, when known. Otherwise `loadChildren` loads them on the first expand. */
+    children?: OrgChartNode[];
+}
+/** The words of an {@link OrgChart}. `{count}` and `{percent}` are filled in. */
+interface OrgChartLabels {
+    /** The tree's name when the chart gets no `aria-label` / `aria-labelledby`. */
+    chart: string;
+    /** The row in place of reports that are loading. */
+    loading: string;
+    /** The row in place of reports that could not be loaded; also announced. */
+    error: string;
+    /** The action in that row. Enter, Space or a click on the row runs it. */
+    retry: string;
+    /** Read after the person: one direct report. */
+    reportsOne: string;
+    /** Read after the person: `{count}` direct reports. */
+    reportsMany: string;
+    /** The report count's tooltip while the reports are hidden. */
+    expand: string;
+    /** The report count's tooltip while the reports are shown. */
+    collapse: string;
+    /** The zoom controls' group name. */
+    toolbar: string;
+    zoomIn: string;
+    zoomOut: string;
+    /** Fit the chart's width into the frame. */
+    fit: string;
+    /** The current zoom, shown on the reset button: `{percent}`. */
+    zoomLevel: string;
+    /** The reset button's name; it should start with the visible level. `{percent}`. */
+    resetZoom: string;
+}
+declare const DEFAULT_ORG_CHART_LABELS: OrgChartLabels;
+interface OrgChartProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onToggle' | 'children'> {
+    /** The top of the chart: the people without a manager, or wherever the chart should start. */
+    nodes: OrgChartNode[];
+    /** Expanded people (controlled). Expanding one whose reports are not known loads them. */
+    expanded?: ReadonlySet<string>;
+    /** Expanded people at first render (uncontrolled). */
+    defaultExpanded?: ReadonlySet<string>;
+    /** A person was expanded or collapsed, by a click on the report count or by the keyboard. */
+    onToggle?: (id: string, expanded: boolean) => void;
+    /** The chosen person: highlighted, and the tree's entry point for the Tab key. */
+    selected?: string | null;
+    /** A card was clicked, or Enter pressed on it: open the person. */
+    onSelect?: (id: string) => void;
+    /**
+     * Loads a person's direct reports the first time they are expanded, for a chart that grows on
+     * demand. While it runs a loading row stands in for the reports; a rejection shows an error row
+     * whose Enter, Space or click retries, and is announced. The result is kept for the life of the
+     * chart.
+     */
+    loadChildren?: (node: OrgChartNode) => Promise<OrgChartNode[]>;
+    /**
+     * Bring this person into view and focus them once they are rendered: the target of a search.
+     * Expand their reporting line first (`expanded`); the chart waits until the card exists. Set it
+     * back to null in `onReveal`, so the same person can be revealed again later.
+     */
+    revealId?: string | null;
+    /** Called once the {@link OrgChartProps.revealId} person has been scrolled to and focused. */
+    onReveal?: (id: string) => void;
+    /**
+     * Stack a row of people who have no reports of their own in one column under their manager,
+     * instead of side by side. Default true: a team of eight then takes one card's width.
+     */
+    stackLeaves?: boolean;
+    /**
+     * Start at this zoom (0.25–1.5), or `'fit'` to fit the chart's width into the frame; the fit is
+     * kept as reports load until the reader zooms, pans or opens someone. Default 1.
+     */
+    defaultZoom?: number | 'fit';
+    /** Words of the chart. Default: `UixLabelsProvider` `orgChart`, then English. */
+    labels?: Partial<OrgChartLabels>;
+}
+/** The next zoom step above (`dir` 1) or below (`dir` -1) `zoom`. */
+declare const orgChartZoomStep: (zoom: number, dir: 1 | -1) => number;
+/** "Mira Kovač" → "MK"; one word → its first letter. */
+declare const orgChartInitials: (name: string) => string;
+/**
+ * An org chart over `.uix-org-chart` (HAR-1807): managers above their direct reports, joined by
+ * lines, each person a card with photo or initials, name, title, team, location and their number
+ * of direct reports. Reports load on expand (`loadChildren`); a person can be revealed by id for
+ * search. The frame zooms (buttons, and Fit for the chart's width) around its centre, pans by
+ * dragging its background, scrolls, and keeps an opened manager's card in place while their
+ * reports appear. Below 48rem of its own width it becomes an indented vertical tree.
+ *
+ * A WAI-ARIA tree with one tab stop. In the chart: ↑ manager, ↓ first report (expanding them
+ * first), ← → the previous and next person on the same level (from a stacked column, the next
+ * column); in a stacked column ↑ ↓ move along it. In the list: the tree keys (↑ ↓ visible order,
+ * → expand / first report, ← collapse / manager). Both: Home / End, a letter jumps to the next
+ * visible person whose name starts with it, Enter opens the person (`onSelect`), Space shows or
+ * hides their reports.
+ *
+ * The root is an inline-size container: give it a width (a block, or `flex: 1` in a flex row).
+ */
+declare function OrgChart({ nodes, expanded: controlledExpanded, defaultExpanded, onToggle, selected, onSelect, loadChildren, revealId, onReveal, stackLeaves, defaultZoom, labels: labelOverrides, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, ...props }: OrgChartProps): react.JSX.Element;
+
+export { DEFAULT_ORG_CHART_LABELS, OrgChart, type OrgChartLabels, type OrgChartNode, type OrgChartProps, orgChartInitials, orgChartZoomStep };