@tensor_1/react 2.3.0 → 2.4.0

package/dist/components/NavFavourites.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface NavFavouriteItem {
+    /** Stable identity used for reorder + remove (consumers typically pass the href). */
+    readonly id: string;
+    /** Display label, interpolated into the per-row remove / options accessible names. */
+    readonly label: string;
+    /** The destination control, rendered by the consumer so routing + link styling stay app-owned. */
+    readonly link: ReactNode;
+}
+interface NavFavouritesLabels {
+    /** Disclosure header, e.g. "Favourites". */
+    readonly heading: string;
+    /** Shown when there are no favourites. */
+    readonly empty: string;
+    readonly moveUp: string;
+    readonly moveDown: string;
+    /** Per-row remove action template with a `{label}` placeholder, e.g. "Remove {label} from favourites". */
+    readonly remove: string;
+    /** Per-row overflow-trigger accessible-name template with `{label}`. Defaults to "{label} favourite options". */
+    readonly options?: string;
+}
+interface NavFavouritesProps {
+    /** The already-resolved favourites, in display order. */
+    items: ReadonlyArray<NavFavouriteItem>;
+    collapsed?: boolean;
+    onToggleCollapsed?: () => void;
+    /** Called with the id of the favourite to unpin. */
+    onRemove: (id: string) => void;
+    /** Called with the full new id order after a move. */
+    onReorder: (orderedIds: string[]) => void;
+    labels: NavFavouritesLabels;
+    /** Optional telemetry hook emitted as `data-empty-reason` on the empty-state node. */
+    emptyReason?: string;
+    className?: string;
+}
+/**
+ * Controlled Favourites disclosure for a sidebar nav (UIx owns the look + the
+ * APG interaction contract; the consumer owns the favourites list + persistence).
+ *
+ * An ARIA disclosure exactly like a collapsible nav group: a header button with
+ * `aria-expanded`/`aria-controls`, the region always rendered with a stable id
+ * and toggled via `hidden`, focus pulled to the header before collapse.
+ *
+ * Each row carries the consumer-rendered destination link plus:
+ *   - an overflow menu (APG menu-button: button + `aria-haspopup="menu"` +
+ *     `aria-expanded`; Up/Down roving focus; Escape returns focus to the
+ *     trigger) with Move up / Move down / Remove,
+ *   - Alt+ArrowUp / Alt+ArrowDown accelerators on the focused row so moves
+ *     chain without re-opening the menu.
+ *
+ * Focus management:
+ *   - after Remove, focus moves to the adjacent favourite, or to the header
+ *     when the list empties,
+ *   - after Move up/down, focus stays on the moved row's control in its new
+ *     position.
+ */
+declare function NavFavourites({ items, collapsed, onToggleCollapsed, onRemove, onReorder, labels, emptyReason, className, }: NavFavouritesProps): react.JSX.Element;
+
+export { type NavFavouriteItem, NavFavourites, type NavFavouritesLabels, type NavFavouritesProps };

package/dist/components/NavFavourites.js

@@ -0,0 +1,352 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+const ChevronDownIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    style: { flexShrink: 0 },
+    children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+const ChevronRightIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    style: { flexShrink: 0 },
+    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+  }
+);
+const MoreIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 1.75,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "5", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "19", r: "1" })
+    ]
+  }
+);
+const MUTED = "color-mix(in srgb, var(--uix-text) 50%, transparent)";
+function NavFavourites({
+  items,
+  collapsed = false,
+  onToggleCollapsed,
+  onRemove,
+  onReorder,
+  labels,
+  emptyReason,
+  className
+}) {
+  const regionId = useId();
+  const headerRef = useRef(null);
+  const regionRef = useRef(null);
+  const focusAfterRef = useRef(null);
+  const triggerRefs = useRef(/* @__PURE__ */ new Map());
+  const order = items.map((i) => i.id);
+  useEffect(() => {
+    const id = focusAfterRef.current;
+    if (!id) return;
+    focusAfterRef.current = null;
+    const el = triggerRefs.current.get(id);
+    if (el) el.focus();
+    else headerRef.current?.focus();
+  }, [order.join("|")]);
+  const handleToggle = () => {
+    if (!collapsed) {
+      const active = document.activeElement;
+      if (active && regionRef.current?.contains(active) && active !== headerRef.current) {
+        headerRef.current?.focus();
+      }
+    }
+    onToggleCollapsed?.();
+  };
+  const move = (id, dir) => {
+    const idx = order.indexOf(id);
+    const next = idx + dir;
+    if (idx < 0 || next < 0 || next >= order.length) return;
+    const reordered = [...order];
+    const [it] = reordered.splice(idx, 1);
+    if (it === void 0) return;
+    reordered.splice(next, 0, it);
+    focusAfterRef.current = id;
+    onReorder(reordered);
+  };
+  const remove = (id) => {
+    const idx = order.indexOf(id);
+    const neighbour = order[idx + 1] ?? order[idx - 1] ?? null;
+    focusAfterRef.current = neighbour;
+    onRemove(id);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-favourites", className), style: { marginBottom: "var(--uix-space-1)" }, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: headerRef,
+        type: "button",
+        "aria-expanded": !collapsed,
+        "aria-controls": regionId,
+        onClick: handleToggle,
+        className: "uix-text-eyebrow",
+        style: {
+          display: "flex",
+          width: "100%",
+          alignItems: "center",
+          gap: "6px",
+          padding: "8px 4px 4px",
+          border: 0,
+          background: "transparent",
+          cursor: "pointer",
+          color: "inherit"
+        },
+        children: [
+          collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+          labels.heading
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: regionRef,
+        id: regionId,
+        hidden: collapsed,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "1px",
+          listStyle: "none",
+          margin: 0,
+          padding: 0
+        },
+        children: items.length === 0 ? /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "uix-text-meta",
+            "data-empty-reason": emptyReason,
+            style: { padding: "6px 8px", color: MUTED },
+            children: labels.empty
+          }
+        ) : items.map((item, idx) => /* @__PURE__ */ jsx(
+          FavouriteRow,
+          {
+            item,
+            isFirst: idx === 0,
+            isLast: idx === items.length - 1,
+            labels,
+            onMoveUp: () => move(item.id, -1),
+            onMoveDown: () => move(item.id, 1),
+            onRemove: () => remove(item.id),
+            registerTrigger: (el) => triggerRefs.current.set(item.id, el)
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+function FavouriteRow({
+  item,
+  isFirst,
+  isLast,
+  labels,
+  onMoveUp,
+  onMoveDown,
+  onRemove,
+  registerTrigger
+}) {
+  const [open, setOpen] = useState(false);
+  const [revealed, setRevealed] = useState(false);
+  const menuId = useId();
+  const triggerRef = useRef(null);
+  const itemRefs = useRef([]);
+  const optionsTemplate = labels.options ?? "{label} favourite options";
+  const actions = [
+    ...isFirst ? [] : [{ label: labels.moveUp, onSelect: onMoveUp }],
+    ...isLast ? [] : [{ label: labels.moveDown, onSelect: onMoveDown }],
+    { label: labels.remove.replace("{label}", item.label), onSelect: onRemove }
+  ];
+  useEffect(() => {
+    if (open) itemRefs.current[0]?.focus();
+  }, [open]);
+  const closeAndReturnFocus = () => {
+    setOpen(false);
+    triggerRef.current?.focus();
+  };
+  const onMenuKeyDown = (e) => {
+    const menuItems = itemRefs.current.filter((x) => x !== null);
+    const currentIdx = menuItems.findIndex((el) => el === document.activeElement);
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      menuItems[(currentIdx + 1) % menuItems.length]?.focus();
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      menuItems[(currentIdx - 1 + menuItems.length) % menuItems.length]?.focus();
+    } else if (e.key === "Escape") {
+      e.preventDefault();
+      closeAndReturnFocus();
+    } else if (e.key === "Tab") {
+      setOpen(false);
+    }
+  };
+  const onRowKeyDown = (e) => {
+    if (!e.altKey) return;
+    if (e.key === "ArrowUp" && !isFirst) {
+      e.preventDefault();
+      onMoveUp();
+    } else if (e.key === "ArrowDown" && !isLast) {
+      e.preventDefault();
+      onMoveDown();
+    }
+  };
+  const triggerVisible = revealed || open;
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: keyboard accelerators on the row; the focusable controls inside carry their own semantics.
+    /* @__PURE__ */ jsxs(
+      "li",
+      {
+        style: { position: "relative", display: "flex", alignItems: "center" },
+        onKeyDown: onRowKeyDown,
+        onMouseEnter: () => setRevealed(true),
+        onMouseLeave: () => setRevealed(false),
+        onFocus: () => setRevealed(true),
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setRevealed(false);
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { style: { minWidth: 0, flex: 1 }, children: item.link }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: (el) => {
+                triggerRef.current = el;
+                registerTrigger(el);
+              },
+              type: "button",
+              "aria-haspopup": "menu",
+              "aria-expanded": open,
+              "aria-controls": open ? menuId : void 0,
+              "aria-label": optionsTemplate.replace("{label}", item.label),
+              onClick: () => setOpen((v) => !v),
+              style: {
+                marginLeft: "auto",
+                display: "inline-flex",
+                height: "20px",
+                width: "20px",
+                flexShrink: 0,
+                alignItems: "center",
+                justifyContent: "center",
+                border: 0,
+                borderRadius: "2px",
+                background: "transparent",
+                cursor: "pointer",
+                color: MUTED,
+                opacity: triggerVisible ? 1 : 0,
+                transition: "opacity var(--uix-dur-fast) var(--uix-ease-out)"
+              },
+              children: /* @__PURE__ */ jsx(MoreIcon, {})
+            }
+          ),
+          open ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                role: "presentation",
+                onClick: () => setOpen(false),
+                style: { position: "fixed", inset: 0, cursor: "default", background: "transparent", zIndex: 40 }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "ul",
+              {
+                id: menuId,
+                role: "menu",
+                onKeyDown: onMenuKeyDown,
+                style: {
+                  position: "absolute",
+                  right: 0,
+                  top: "calc(100% + 2px)",
+                  zIndex: 50,
+                  minWidth: "160px",
+                  overflow: "hidden",
+                  margin: 0,
+                  padding: "4px 0",
+                  listStyle: "none",
+                  borderRadius: "6px",
+                  border: "1px solid var(--uix-border)",
+                  background: "var(--uix-surface)",
+                  boxShadow: "var(--uix-shadow-popover)"
+                },
+                children: actions.map((action, i) => /* @__PURE__ */ jsx("li", { role: "presentation", children: /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    ref: (el) => {
+                      itemRefs.current[i] = el;
+                    },
+                    type: "button",
+                    role: "menuitem",
+                    tabIndex: -1,
+                    onClick: () => {
+                      setOpen(false);
+                      action.onSelect();
+                    },
+                    style: {
+                      display: "flex",
+                      width: "100%",
+                      alignItems: "center",
+                      padding: "6px 12px",
+                      border: 0,
+                      background: "transparent",
+                      cursor: "pointer",
+                      textAlign: "left",
+                      fontSize: "13px",
+                      color: "color-mix(in srgb, var(--uix-text) 85%, transparent)",
+                      transition: "background-color var(--uix-dur-fast) var(--uix-ease-out)"
+                    },
+                    onMouseEnter: (e) => {
+                      e.currentTarget.style.background = "var(--uix-bg-hover)";
+                    },
+                    onMouseLeave: (e) => {
+                      e.currentTarget.style.background = "transparent";
+                    },
+                    children: action.label
+                  }
+                ) }, action.label))
+              }
+            )
+          ] }) : null
+        ]
+      }
+    )
+  );
+}
+export {
+  NavFavourites
+};

package/dist/components/StarButton.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+
+interface StarButtonProps {
+    /** Pinned state — drives the filled, warning-toned, always-visible look via `data-on`. */
+    pinned: boolean;
+    /** Item label, interpolated into the accessible name. */
+    label: string;
+    /**
+     * Accessible-name template carrying a `{label}` placeholder. ONE state model:
+     * a STATIC name ("Add {label} to favourites") plus `aria-pressed` reflecting
+     * the pinned state — never a dynamic Pin/Remove name AND `aria-pressed` (that
+     * double-encodes the state). Defaults to `Add {label} to favourites`.
+     */
+    addLabel?: string;
+    /** Called with the next pinned state when the control is activated. */
+    onToggle: (next: boolean) => void;
+    /** Extra classes — e.g. consumer-owned reveal triggers when the row is not a `.uix-navitem`. */
+    className?: string;
+}
+/**
+ * Controlled pin/unpin star for a nav item. UIx owns the look (the
+ * `.uix-navitem__star` contract: reveal-on-hover inside a `.uix-navitem`,
+ * warning-toned fill when pinned); the consumer owns the pinned state.
+ *
+ * Reveal-on-hover is opacity-only (zeroed under `prefers-reduced-motion`).
+ * When the star lives outside a `.uix-navitem` row, pass reveal triggers via
+ * `className`.
+ */
+declare function StarButton({ pinned, label, addLabel, onToggle, className, }: StarButtonProps): react.JSX.Element;
+
+export { StarButton, type StarButtonProps };

package/dist/components/StarButton.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+const StarGlyph = () => /* @__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: "M11.5 2.7a.6.6 0 0 1 1 0l2.4 5 5.4.8a.6.6 0 0 1 .3 1l-3.9 3.8.9 5.4a.6.6 0 0 1-.8.6L12 17l-4.8 2.5a.6.6 0 0 1-.8-.6l.9-5.4L3.4 9.5a.6.6 0 0 1 .3-1l5.4-.8z" })
+  }
+);
+function StarButton({
+  pinned,
+  label,
+  addLabel = "Add {label} to favourites",
+  onToggle,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cx("uix-navitem__star", className),
+      "data-on": pinned || void 0,
+      "aria-pressed": pinned,
+      "aria-label": addLabel.replace("{label}", label),
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onToggle(!pinned);
+      },
+      children: /* @__PURE__ */ jsx(StarGlyph, {})
+    }
+  );
+}
+export {
+  StarButton
+};