@tensor_1/react 2.19.1 → 2.20.0

package/README.md

@@ -191,4 +191,18 @@ Radial mode still shortens long labels to fit its ring, but every node carries i
 <TabPanel value="history" keepMounted>{history}</TabPanel>
 ```
 
+### Scrolling tabs, toned stat tiles and copying
+
+- **`Tabs overflow="scroll"`** keeps a long tab row on one line that scrolls sideways. The selected tab is always scrolled into view, and edge buttons appear only on the side that has hidden tabs. The buttons are pointer-only: keyboard users move with Arrow, Home and End. Combine it with `TabPanel keepMounted` on a record page with many sections.
+- **`Stat tone`** (`warning`, `danger`) draws a toned outline and value; the label stays muted, so the tone never replaces words. `size="compact"` fits dense fact bands.
+- **`Stat onActivate`** makes the whole tile a button that opens an editor (`aria-haspopup="dialog"`). Pass `activateLabel` (e.g. "change") so the name reads "Priority: P1, change", and `expanded` while the editor is open. The ref points at the button, for anchoring a popover.
+- **`CopyButton`** copies `value`. Name it for what it copies (`label="Copy email"`), pass `copiedLabel`, and pass `failedLabel` so a refused copy is explained rather than silent.
+
+```tsx
+<Tabs value={tab} onChange={setTab} overflow="scroll">{tabs}</Tabs>
+<Stat label={t('sla')} value={remaining} tone={breached ? 'danger' : 'neutral'} size="compact" />
+<Stat ref={anchor} label={t('priority')} value="P1" onActivate={openEditor} activateLabel={t('change')} expanded={open} size="compact" />
+<CopyButton value={email} label={t('copyEmail')} copiedLabel={t('copied')} failedLabel={t('copyFailed')} />
+```
+
 Ships **ESM + CJS + types**, with per-file `"use client"` so it's safe under React Server Components. Part of the **[UIx v2 styleguide](https://github.com/COx-ORG-H/UIx)**.

package/dist/components/CopyButton.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+
+interface CopyButtonProps {
+    /** The text written to the clipboard. */
+    value: string;
+    /** Accessible name of the button, e.g. "Copy email". */
+    label: string;
+    /** Announced through a polite status region after a successful copy, e.g. "Copied". */
+    copiedLabel: string;
+    /**
+     * Announced when the copy fails (no clipboard, or the write was refused), e.g.
+     * "Could not copy — select the text instead". Without it a failure is silent: nothing
+     * false is shown, but the person is left guessing why nothing happened.
+     */
+    failedLabel?: string;
+    className?: string;
+}
+/**
+ * Icon-only ghost button that copies `value`. On success it shows a check for 1.5 s and
+ * announces `copiedLabel`. On failure (no clipboard, or the write was refused) it shows no
+ * check and announces `failedLabel` when one is given.
+ */
+declare function CopyButton({ value, label, copiedLabel, failedLabel, className }: CopyButtonProps): react.JSX.Element;
+
+export { CopyButton, type CopyButtonProps };

package/dist/components/CopyButton.js

@@ -0,0 +1,52 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { copyText } from "../copy-model.js";
+const CONFIRM_MS = 1500;
+const CopyGlyph = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+] });
+const CheckGlyph = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function CopyButton({ value, label, copiedLabel, failedLabel, className }) {
+  const [outcome, setOutcome] = useState("idle");
+  const copied = outcome === "copied";
+  const timer = useRef(void 0);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      clearTimeout(timer.current);
+    };
+  }, []);
+  const onClick = async () => {
+    const ok = await copyText(value);
+    if (!mounted.current) return;
+    clearTimeout(timer.current);
+    if (!ok && !failedLabel) {
+      setOutcome("idle");
+      return;
+    }
+    setOutcome(ok ? "copied" : "failed");
+    timer.current = setTimeout(() => setOutcome("idle"), CONFIRM_MS);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cx("uix-btn", "uix-btn--ghost", "uix-btn--icon", "uix-btn--sm", "uix-copy-button", className),
+        "aria-label": label,
+        "data-copied": copied || void 0,
+        onClick,
+        children: copied ? /* @__PURE__ */ jsx(CheckGlyph, {}) : /* @__PURE__ */ jsx(CopyGlyph, {})
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { role: "status", className: "uix-visually-hidden", children: outcome === "copied" ? copiedLabel : outcome === "failed" ? failedLabel : "" })
+  ] });
+}
+export {
+  CopyButton
+};

package/dist/components/Stat.d.ts

@@ -5,7 +5,7 @@ interface StatTrend {
     direction: 'up' | 'down';
     label: ReactNode;
 }
-interface StatProps extends HTMLAttributes<HTMLDivElement> {
+interface StatProps extends HTMLAttributes<HTMLElement> {
     label: ReactNode;
     value: ReactNode;
     /** Optional icon shown at the trailing edge of the label row. */
@@ -14,8 +14,24 @@ interface StatProps extends HTMLAttributes<HTMLDivElement> {
     meta?: ReactNode;
     /** Trend chip rendered before the meta text. */
     trend?: StatTrend;
+    /** Outline and value colour. `neutral` (default) is today's tile. */
+    tone?: 'neutral' | 'warning' | 'danger';
+    /** `hero` (default) is today's KPI size; `compact` is for dense fact bands. */
+    size?: 'hero' | 'compact';
+    /**
+     * Makes the whole tile a `<button>` that opens an editor (a popover or dialog). It gets
+     * `aria-haspopup="dialog"` and a trailing chevron.
+     */
+    onActivate?: () => void;
+    /** Action word appended to the accessible name, e.g. "change" → "Priority: P1, change". */
+    activateLabel?: string;
+    /** Whether the editor this tile opens is currently open (`aria-expanded`). */
+    expanded?: boolean;
 }
-/** KPI / stat tile over `.uix-stat`. */
-declare function Stat({ label, value, icon, meta, trend, className, ...props }: StatProps): react.JSX.Element;
+/**
+ * KPI / stat tile over `.uix-stat`. With `onActivate` the tile is a button; the forwarded
+ * ref then points at that button, so a popover can anchor to it.
+ */
+declare const Stat: react.ForwardRefExoticComponent<StatProps & react.RefAttributes<HTMLElement>>;
 
 export { Stat, type StatProps, type StatTrend };

package/dist/components/Stat.js

@@ -1,13 +1,26 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useId } from "react";
 import { cx } from "../cx.js";
-function Stat({ label, value, icon, meta, trend, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-stat", className), ...props, children: [
-    /* @__PURE__ */ jsxs("div", { className: "uix-stat__label", children: [
-      /* @__PURE__ */ jsx("span", { children: label }),
-      icon
+const Chevron = () => /* @__PURE__ */ jsx("span", { className: "uix-stat__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) }) });
+const Stat = forwardRef(function Stat2({ label, value, icon, meta, trend, tone = "neutral", size = "hero", onActivate, activateLabel, expanded, className, onClick, ...props }, ref) {
+  const id = useId();
+  const interactive = onActivate != null;
+  const classes = cx(
+    "uix-stat",
+    tone !== "neutral" && `uix-stat--${tone}`,
+    size === "compact" && "uix-stat--compact",
+    interactive && "uix-stat--interactive",
+    className
+  );
+  const Row = interactive ? "span" : "div";
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Row, { className: "uix-stat__label", children: [
+      /* @__PURE__ */ jsx("span", { id: interactive ? `${id}-label` : void 0, children: label }),
+      icon,
+      interactive && /* @__PURE__ */ jsx(Chevron, {})
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "uix-stat__value", children: value }),
-    (meta != null || trend != null) && /* @__PURE__ */ jsxs("div", { className: "uix-stat__meta", children: [
+    /* @__PURE__ */ jsx(Row, { className: "uix-stat__value", id: interactive ? `${id}-value` : void 0, children: value }),
+    (meta != null || trend != null) && /* @__PURE__ */ jsxs(Row, { className: "uix-stat__meta", id: interactive ? `${id}-meta` : void 0, children: [
       trend != null && /* @__PURE__ */ jsxs("span", { className: cx("uix-stat__trend", `uix-stat__trend--${trend.direction}`), children: [
         /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: trend.direction === "up" ? /* @__PURE__ */ jsx("path", { d: "M12 19V5m-6 6 6-6 6 6" }) : /* @__PURE__ */ jsx("path", { d: "M12 5v14m6-6-6 6-6-6" }) }),
         /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", children: trend.direction === "up" ? "up" : "down" }),
@@ -16,7 +29,35 @@ function Stat({ label, value, icon, meta, trend, className, ...props }) {
       meta
     ] })
   ] });
-}
+  if (!interactive) {
+    return /* @__PURE__ */ jsx("div", { ref, className: classes, onClick, ...props, children: body });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ...props,
+      ref,
+      className: classes,
+      "aria-haspopup": "dialog",
+      "aria-expanded": expanded,
+      "aria-labelledby": `${id}-label ${id}-sep ${id}-value${activateLabel ? ` ${id}-action` : ""}`,
+      "aria-describedby": meta != null || trend != null ? `${id}-meta` : void 0,
+      onClick: (e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) onActivate();
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { id: `${id}-sep`, className: "uix-visually-hidden", children: ":" }),
+        activateLabel && /* @__PURE__ */ jsxs("span", { id: `${id}-action`, className: "uix-visually-hidden", children: [
+          ", ",
+          activateLabel
+        ] }),
+        body
+      ]
+    }
+  );
+});
 export {
   Stat
 };

package/dist/components/Tabs.d.ts

@@ -7,8 +7,14 @@ interface TabsProps {
     onChange?: (value: string) => void;
     children?: ReactNode;
     className?: string;
+    /**
+     * What happens when the tabs don't fit. `'wrap'` (default) keeps today's layout.
+     * `'scroll'` keeps one row that scrolls sideways, with pointer-only edge buttons
+     * shown on the side that has hidden tabs. The selected tab is always scrolled into view.
+     */
+    overflow?: 'wrap' | 'scroll';
 }
-declare function Tabs({ variant, value, onChange, children, className }: TabsProps): react.JSX.Element;
+declare function Tabs({ variant, value, onChange, children, className, overflow }: TabsProps): react.JSX.Element;
 interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onChange'> {
     value: string;
     children?: ReactNode;

package/dist/components/Tabs.js

@@ -1,23 +1,64 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef } from "react";
+import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cx } from "../cx.js";
 const TabsCtx = createContext({});
-function Tabs({ variant = "line", value, onChange, children, className }) {
+const Chevron = ({ d }) => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d }) });
+const inlineOffset = (el, rtl) => rtl ? -el.scrollLeft : el.scrollLeft;
+function Tabs({ variant = "line", value, onChange, children, className, overflow = "wrap" }) {
   const baseId = useId();
   const listRef = useRef(null);
   const contextValue = useMemo(() => ({ value, onChange, baseId }), [value, onChange, baseId]);
+  const scroll = overflow === "scroll";
+  const [hidden, setHidden] = useState({ start: false, end: false });
   const kids = Children.toArray(children);
   const panels = kids.filter((k) => isValidElement(k) && k.type === TabPanel);
   const tabs = kids.filter((k) => !(isValidElement(k) && k.type === TabPanel));
   useEffect(() => {
-    const list = listRef.current;
-    if (!list) return;
-    const all = Array.from(list.querySelectorAll('[role="tab"]'));
+    const list2 = listRef.current;
+    if (!list2) return;
+    const all = Array.from(list2.querySelectorAll('[role="tab"]'));
     const enabled = all.filter((t) => !t.matches(":disabled"));
     const active = enabled.find((t) => t.getAttribute("aria-selected") === "true") ?? enabled[0];
     for (const t of all) t.tabIndex = t === active ? 0 : -1;
   });
+  useEffect(() => {
+    const list2 = listRef.current;
+    if (!scroll || !list2) return;
+    const measure = () => {
+      const rtl = getComputedStyle(list2).direction === "rtl";
+      const pos = inlineOffset(list2, rtl);
+      const max = list2.scrollWidth - list2.clientWidth;
+      const next = { start: pos > 1, end: pos < max - 1 };
+      setHidden((prev) => prev.start === next.start && prev.end === next.end ? prev : next);
+    };
+    measure();
+    list2.addEventListener("scroll", measure, { passive: true });
+    if (typeof ResizeObserver === "undefined") return () => list2.removeEventListener("scroll", measure);
+    const observer = new ResizeObserver(measure);
+    observer.observe(list2);
+    for (const tab of Array.from(list2.children)) observer.observe(tab);
+    return () => {
+      list2.removeEventListener("scroll", measure);
+      observer.disconnect();
+    };
+  });
+  useEffect(() => {
+    const list2 = listRef.current;
+    const tab = list2?.querySelector('[role="tab"][aria-selected="true"]');
+    if (!scroll || !list2 || !tab) return;
+    const outer = list2.getBoundingClientRect();
+    const inner = tab.getBoundingClientRect();
+    const reserve = list2.scrollWidth > list2.clientWidth ? Number.parseFloat(getComputedStyle(list2).getPropertyValue("--uix-control-h")) || 0 : 0;
+    if (inner.left < outer.left + reserve) list2.scrollBy({ left: inner.left - outer.left - reserve });
+    else if (inner.right > outer.right - reserve) list2.scrollBy({ left: inner.right - outer.right + reserve });
+  }, [scroll, value]);
+  const page = (direction) => {
+    const list2 = listRef.current;
+    if (!list2) return;
+    const rtl = getComputedStyle(list2).direction === "rtl";
+    list2.scrollBy({ left: direction * (rtl ? -1 : 1) * list2.clientWidth * 0.8 });
+  };
   const onKeyDown = (e) => {
     const items = Array.from(
       listRef.current?.querySelectorAll('[role="tab"]:not(:disabled)') ?? []
@@ -49,17 +90,46 @@ function Tabs({ variant = "line", value, onChange, children, className }) {
       target.click();
     }
   };
+  const list = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: listRef,
+      role: "tablist",
+      className: cx("uix-tabs", `uix-tabs--${variant}`, scroll && "uix-tabs--scroll", className),
+      onKeyDown,
+      children: tabs
+    }
+  );
   return /* @__PURE__ */ jsxs(TabsCtx.Provider, { value: contextValue, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: listRef,
-        role: "tablist",
-        className: cx("uix-tabs", `uix-tabs--${variant}`, className),
-        onKeyDown,
-        children: tabs
-      }
-    ),
+    scroll ? /* @__PURE__ */ jsxs("div", { className: "uix-tabs-scroller", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uix-tabs-scroller__prev",
+          "aria-hidden": "true",
+          tabIndex: -1,
+          hidden: !hidden.start,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => page(-1),
+          children: /* @__PURE__ */ jsx(Chevron, { d: "m15 18-6-6 6-6" })
+        }
+      ),
+      list,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uix-tabs-scroller__next",
+          "aria-hidden": "true",
+          tabIndex: -1,
+          hidden: !hidden.end,
+          onMouseDown: (e) => e.preventDefault(),
+          onClick: () => page(1),
+          children: /* @__PURE__ */ jsx(Chevron, { d: "m9 18 6-6-6-6" })
+        }
+      )
+    ] }) : list,
     panels
   ] });
 }

package/dist/copy-model.d.ts

@@ -0,0 +1,12 @@
+/** The part of the async Clipboard API that CopyButton needs. */
+interface ClipboardWriter {
+    writeText(text: string): Promise<void>;
+}
+/**
+ * Copies `value` and reports whether the write succeeded. It never throws: there may be no
+ * clipboard (an insecure context or an old browser), or the write may be refused (no
+ * permission, or the document isn't focused).
+ */
+declare function copyText(value: string, clipboard?: ClipboardWriter | undefined): Promise<boolean>;
+
+export { type ClipboardWriter, copyText };

package/dist/copy-model.js

@@ -0,0 +1,12 @@
+async function copyText(value, clipboard = globalThis.navigator?.clipboard) {
+  if (!clipboard || typeof clipboard.writeText !== "function") return false;
+  try {
+    await clipboard.writeText(value);
+    return true;
+  } catch {
+    return false;
+  }
+}
+export {
+  copyText
+};