@tensor_1/react 2.26.3 → 2.28.0

package/dist/components/Steps.js

@@ -0,0 +1,42 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, isValidElement } from "react";
+import { cx } from "../cx.js";
+import { renderUixLink } from "../link.js";
+const DEFAULT_STEP_STATE_LABELS = {
+  complete: "Completed",
+  current: "Current step",
+  upcoming: "Not started",
+  waiting: "Waiting",
+  error: "Needs attention"
+};
+const CSS_STATE = { complete: "done", current: "active", upcoming: void 0, waiting: "waiting", error: "error" };
+const Check = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7" }) });
+function Steps({ orientation = "horizontal", label, stateLabels, className, children, ...props }) {
+  const labels = { ...DEFAULT_STEP_STATE_LABELS, ...stateLabels };
+  const steps = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx("ol", { "aria-label": label, className: cx("uix-steps", "uix-steps--list", `uix-steps--${orientation}`, className), ...props, children: steps.map((step, index) => cloneElement(step, { index, last: index === steps.length - 1, stateLabels: labels })) });
+}
+function Step({ title, description, state = "upcoming", marker, href, renderLink, onSelect, index = 0, last = false, stateLabels = DEFAULT_STEP_STATE_LABELS, className, ...props }) {
+  const glyph = marker ?? (state === "complete" ? /* @__PURE__ */ jsx(Check, {}) : state === "error" ? "!" : index + 1);
+  const name = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-step__title", children: title }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+      ", ",
+      stateLabels[state]
+    ] })
+  ] });
+  const titled = href != null ? renderUixLink(renderLink, { href, className: "uix-step__action", children: name }) : onSelect ? /* @__PURE__ */ jsx("button", { type: "button", className: "uix-step__action", onClick: onSelect, children: name }) : /* @__PURE__ */ jsx("span", { className: "uix-step__action", children: name });
+  return /* @__PURE__ */ jsxs("li", { className: cx("uix-step", className), "data-state": CSS_STATE[state], "aria-current": state === "current" ? "step" : void 0, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-step__marker", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-step__text", children: [
+      titled,
+      description != null && /* @__PURE__ */ jsx("span", { className: "uix-step__desc", children: description })
+    ] }),
+    !last && /* @__PURE__ */ jsx("span", { className: "uix-step__connector", "aria-hidden": "true", "data-done": state === "complete" || void 0 })
+  ] });
+}
+export {
+  DEFAULT_STEP_STATE_LABELS,
+  Step,
+  Steps
+};

package/dist/components/Toast.d.ts

@@ -1,7 +1,8 @@
 import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
+import { ToastStore } from '../toast-store.js';
 
-type ToastTone = 'success' | 'danger' | 'info';
+type ToastTone = 'success' | 'danger' | 'info' | 'warning';
 interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     dismissLabel?: string;
@@ -9,15 +10,26 @@ interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     message?: ReactNode;
     tone?: ToastTone;
     icon?: ReactNode;
+    /** A button (or link) after the text, e.g. "Undo" or "Copy details" (HAR-1363). */
+    action?: ReactNode;
     onClose?: () => void;
     leaving?: boolean;
 }
-declare function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel, className, ...props }: ToastProps): react.JSX.Element;
+declare function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }: ToastProps): react.JSX.Element;
 interface ToasterProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     regionLabel?: string;
+    /**
+     * The queue to render (HAR-1363). Default: the store behind the exported `toast()`.
+     * Children still render first, so a hand-managed `<Toast>` keeps working.
+     */
+    store?: ToastStore;
+    /** At most this many store toasts on screen; later ones wait their turn. Default 3. */
+    limit?: number;
+    /** Corner of the viewport. Default `bottom-end`. */
+    position?: 'bottom-end' | 'bottom-start' | 'bottom-center' | 'top-end' | 'top-start' | 'top-center';
     children?: ReactNode;
 }
-declare function Toaster({ children, regionLabel, className, ...props }: ToasterProps): react.JSX.Element;
+declare function Toaster({ children, regionLabel: regionLabelProp, store, limit, position, className, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }: ToasterProps): react.JSX.Element;
 
 export { Toast, type ToastProps, type ToastTone, Toaster, type ToasterProps };

package/dist/components/Toast.js

@@ -1,9 +1,13 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+import { toast as defaultToast } from "../toast-store.js";
 const ToasterContext = createContext(null);
-function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel = "Dismiss", className, ...props }) {
+function Toast({ title, message, tone, icon, action, onClose, leaving, dismissLabel: dismissLabelProp, className, ...props }) {
+  const uixLabels = useUixLabels();
+  const dismissLabel = dismissLabelProp ?? uixLabels.toast?.dismiss ?? "Dismiss";
   const assertive = tone === "danger";
   const toaster = useContext(ToasterContext);
   const bodyRef = useRef(null);
@@ -39,12 +43,108 @@ function Toast({ title, message, tone, icon, onClose, leaving, dismissLabel = "D
           title && /* @__PURE__ */ jsx("div", { className: "uix-toast__title", children: title }),
           message && /* @__PURE__ */ jsx("div", { className: "uix-toast__msg", children: message })
         ] }),
-        onClose && /* @__PURE__ */ jsx("button", { className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
+        action != null && /* @__PURE__ */ jsx("div", { className: "uix-toast__action-slot", children: action }),
+        onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-toast__close", onClick: handleClose, "aria-label": dismissLabel, children: "\xD7" })
       ]
     }
   );
 }
-function Toaster({ children, regionLabel = "Notifications", className, ...props }) {
+const KIND_TONE = {
+  success: "success",
+  error: "danger",
+  warning: "warning",
+  info: "info",
+  loading: "info",
+  default: void 0
+};
+const svg = (path) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 1.8, strokeLinecap: "round", strokeLinejoin: "round", children: path });
+const KIND_GLYPH = {
+  success: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M6.75 10.25l2.25 2.25 4.25-4.75" })
+  ] })),
+  error: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 6.25v4.5M10 13.5v.25" })
+  ] })),
+  warning: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M10 3.25l7.25 13H2.75z" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 8.25v3.5M10 14v.25" })
+  ] })),
+  info: svg(/* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "7.25" }),
+    /* @__PURE__ */ jsx("path", { d: "M10 9.25v4.5M10 6.5v.25" })
+  ] })),
+  loading: /* @__PURE__ */ jsx("span", { className: "uix-spinner uix-toast__spinner" })
+};
+function StoreToast({ record, store }) {
+  const action = record.action && /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "uix-toast__action",
+      onClick: () => {
+        record.action.onClick();
+        store.dismiss(record.id, "action");
+      },
+      children: record.action.label
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    Toast,
+    {
+      "data-toast-id": record.id,
+      tone: KIND_TONE[record.kind],
+      icon: record.icon ?? KIND_GLYPH[record.kind],
+      title: record.message,
+      message: record.description,
+      action,
+      leaving: record.leaving,
+      "aria-busy": record.kind === "loading" || void 0,
+      onClose: () => store.dismiss(record.id, "close")
+    }
+  );
+}
+function useToastTimers(store, visible, paused) {
+  const timers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const now = Date.now();
+    const map = timers.current;
+    const live = new Map(visible.filter((r) => !r.leaving && r.duration != null).map((r) => [r.id, r]));
+    for (const [id, timer] of map) {
+      const record = live.get(id);
+      if (!record || record.version !== timer.version) {
+        if (timer.handle != null) clearTimeout(timer.handle);
+        map.delete(id);
+      }
+    }
+    for (const record of live.values()) {
+      let timer = map.get(record.id);
+      if (!timer) {
+        timer = { version: record.version, remaining: record.duration, start: now };
+        map.set(record.id, timer);
+      }
+      if (paused) {
+        if (timer.handle != null) {
+          clearTimeout(timer.handle);
+          timer.handle = void 0;
+          timer.remaining -= now - timer.start;
+        }
+      } else if (timer.handle == null) {
+        timer.start = now;
+        const id = record.id;
+        timer.handle = window.setTimeout(() => store.dismiss(id, "timeout"), Math.max(0, timer.remaining));
+      }
+    }
+  });
+  useEffect(() => () => {
+    for (const timer of timers.current.values()) if (timer.handle != null) clearTimeout(timer.handle);
+    timers.current.clear();
+  }, []);
+}
+function Toaster({ children, regionLabel: regionLabelProp, store = defaultToast.store, limit = 3, position = "bottom-end", className, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }) {
+  const uixLabels = useUixLabels();
+  const regionLabel = regionLabelProp ?? uixLabels.toaster?.region ?? "Notifications";
   const [announced, setAnnounced] = useState("");
   const clearTimer = useRef(null);
   const announce = useCallback((text) => {
@@ -56,10 +156,59 @@ function Toaster({ children, regionLabel = "Notifications", className, ...props
     if (clearTimer.current != null) clearTimeout(clearTimer.current);
   }, []);
   const ctx = useMemo(() => ({ announce }), [announce]);
-  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: cx("uix-toaster", className), role: "region", "aria-label": regionLabel, ...props, children: [
-    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
-    children
-  ] }) });
+  const records = useSyncExternalStore(store.subscribe, store.getSnapshot, store.getSnapshot);
+  const visible = useMemo(() => records.slice(-Math.max(1, limit)), [records, limit]);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [hidden, setHidden] = useState(false);
+  useEffect(() => {
+    const sync = () => setHidden(document.visibilityState === "hidden");
+    sync();
+    document.addEventListener("visibilitychange", sync);
+    return () => document.removeEventListener("visibilitychange", sync);
+  }, []);
+  useToastTimers(store, visible, hovered || focused || hidden);
+  const handleKeyDown = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.key !== "Escape") return;
+    const id = event.target.closest("[data-toast-id]")?.dataset.toastId;
+    if (!id) return;
+    event.preventDefault();
+    event.stopPropagation();
+    store.dismiss(id, "close");
+  };
+  return /* @__PURE__ */ jsx(ToasterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-toaster", className),
+      role: "region",
+      "aria-label": regionLabel,
+      "data-position": position === "bottom-end" ? void 0 : position,
+      onMouseEnter: (e) => {
+        setHovered(true);
+        onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        setHovered(false);
+        onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        setFocused(true);
+        onFocus?.(e);
+      },
+      onBlur: (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget)) setFocused(false);
+        onBlur?.(e);
+      },
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announced }),
+        children,
+        visible.map((record) => /* @__PURE__ */ jsx(StoreToast, { record, store }, `${record.id}:${record.kind}`))
+      ]
+    }
+  ) });
 }
 export {
   Toast,

package/dist/components/Tooltip.d.ts

@@ -2,9 +2,15 @@ import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 import { Placement } from '../overlay-position.js';
 
-interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
-    /** Tooltip text. */
-    label: string;
+interface TooltipProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'content'> {
+    /** Tooltip text. Pass this or `content`. */
+    label?: string;
+    /**
+     * Rich, non-interactive tooltip content, e.g. a short list (HAR-1349; TENSOR A3). It is
+     * still a `role="tooltip"` description: no links or buttons inside — use `InfoTip` or
+     * `Popover` for content the user must reach. Wins over `label` when both are set.
+     */
+    content?: ReactNode;
     /** Preferred placement. Default `'top'`. */
     placement?: Placement;
     children?: ReactNode;
@@ -17,6 +23,6 @@ interface TooltipProps extends HTMLAttributes<HTMLSpanElement> {
  * (document-level, per WCAG 1.4.13), and hoverable: the bubble stays open while
  * the pointer is over it (UIX-A11Y-1).
  */
-declare function Tooltip({ label, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
+declare function Tooltip({ label, content, placement, className, children, ...props }: TooltipProps): react.JSX.Element;
 
 export { Tooltip, type TooltipProps };

package/dist/components/Tooltip.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cloneElement, isValidElement, useEffect, useId, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
-function Tooltip({ label, placement = "top", className, children, ...props }) {
+function Tooltip({ label, content, placement = "top", className, children, ...props }) {
   const triggerRef = useRef(null);
   const bubbleRef = useRef(null);
   const closeTimer = useRef(null);
@@ -92,7 +92,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: label
+            children: content ?? label
           }
         )
       ]

package/dist/emoji.cjs

@@ -939,7 +939,7 @@ function EditorIcon({ name, ...props }) {
 // src/components/Tooltip.tsx
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-function Tooltip({ label, placement = "top", className, children, ...props }) {
+function Tooltip({ label, content, placement = "top", className, children, ...props }) {
   const triggerRef = (0, import_react5.useRef)(null);
   const bubbleRef = (0, import_react5.useRef)(null);
   const closeTimer = (0, import_react5.useRef)(null);
@@ -1028,7 +1028,7 @@ function Tooltip({ label, placement = "top", className, children, ...props }) {
             onMouseEnter: cancelClose,
             onMouseLeave: scheduleHide,
             ...bubbleAttr,
-            children: label
+            children: content ?? label
           }
         )
       ]