@tensor_1/react 2.26.2 → 2.27.0

package/README.md

@@ -257,3 +257,54 @@ A small ? next to a title or label opens a plain-text explanation. Use it for wh
 - **`helpLabel`** is the ? button's accessible name. It defaults to `"About: <title>"` (English), so pass a translated one.
 - **Placement:** the ? is a fixed 9 px glyph, superscript at the top right of the title or label, whatever the text size. It sits beside the heading or `<label>`, never inside it, so the heading's name stays the title and clicking a field label still focuses the input.
 - **Behaviour:** hover opens it after about 300 ms, keyboard focus opens it at once, and a click or tap keeps it open. Esc closes it and keeps focus on the ?, and a press outside also closes it. The panel is the button's `aria-describedby`, so screen readers announce it on focus. It uses `popover="manual"`, so it never closes another open popover.
+
+### Small gaps from the UIx reuse audits (2.27.0)
+
+TENSOR and MOTUS were hand-building these because the kit lacked them (workspace ADR-0038; UIx HAR-1346). Every
+addition is optional; existing calls render as before.
+
+```tsx
+// One link adapter for every component that renders a link
+const toRoute = (p: UixLinkProps) => <NextLink {...p} />;
+<ButtonLink href="/tickets/new" variant="primary" renderLink={toRoute}>New ticket</ButtonLink>
+<Button size="xs" icon aria-label="Remove row"><XIcon /></Button>           // 24 px, the WCAG 2.5.8 floor
+<Stat label="Open" value={12} href="/incidents?state=open" current renderLink={toRoute} />
+<Stat label="Status" value="New" onActivate={openMenu} haspopup="menu" />
+<Pagination page={page} pageCount={9} hrefFor={(p) => `/katalog?page=${p}`} />          // server-safe links
+<Pagination mode="cursor" hasPrevious={!!before} hasNext={!!after} onFirst={first} onPrevious={prev} onNext={next} summary="21–40" />
+
+// SchedulingCalendar: week start, product date format, busy days, a per-day badge
+<SchedulingCalendar weekStartsOn={0} formatDate={(d, part) => part === 'day' ? toDDMMYYYY(d) : intl(d, part)}
+  maxEntriesPerDay={3} onShowMore={(date, entries) => openDay(date)}
+  renderDayBadge={(date, entries) => collisions(entries) || null} … />
+
+// Overlays and disclosure
+<Drawer side="start" …/>  <Drawer side="bottom" …/>
+<Tooltip content={<ul><li>Angry 2</li><li>Calm 5</li></ul>}><button>Mood</button></Tooltip>
+<CollapsibleSection title="SLA" lazy persistKey="incident-sla" openRequest={jumpToSla}>…</CollapsibleSection>
+<ConfirmDialog … destructive typeToConfirm="web-01" compensation="Restore it from the archive within 30 days."
+  error={failure} tertiaryLabel="Archive instead" onTertiary={archive}><dl>…</dl></ConfirmDialog>
+<Popconfirm open={asking} anchor={buttonRef} title="Unlink this CI?" … />
+
+// New components
+<Menu trigger={<Button>Actions</Button>}>
+  <MenuItem onSelect={assign} shortcut={<KbdCombo keys={['Mod', 'M']} />}>Assign to me</MenuItem>
+  <MenuSeparator />
+  <MenuGroup label="Danger zone"><MenuItem tone="danger" onSelect={remove}>Delete</MenuItem></MenuGroup>
+</Menu>
+<ChipGroup label="Active filters">
+  <Chip pressed={mine} onPressedChange={setMine}>Assigned to me</Chip>
+  <Chip count={12} onRemove={clearState}>State: Open</Chip>
+  <Chip variant="add" onClick={addFilter}>+ Add filter</Chip>
+</ChipGroup>
+<Steps label="Intake"><Step title="Scan" state="complete" /><Step title="Review" state="current" /><Step title="Shelve" state="waiting" /></Steps>
+
+// Translate kit chrome once
+<UixLabelsProvider labels={{ drawer: { close: 'Schließen' }, peek: { previous: 'Vorheriger Datensatz' } }}>…</UixLabelsProvider>
+```
+
+- **`renderLink`** (`UixRenderLink`) receives `UixLinkProps` (`href`, `className`, `children`, ARIA). A nullish return falls back to a plain `<a>`.
+- **`UixLabelsProvider`** reaches the client components (`Modal`, `Drawer`, `Peek`, `Toast`, `Toaster`, `AppShell`, `Sidebar`, `SearchSuggest`, `CommandPalette`, `ConfirmDialog`, `Popconfirm`, `SchedulingCalendar`, `DateRangePicker`). `Pagination` and `BulkBar` stay server-renderable, so they cannot read context: pass `labels={useUixLabels().pagination}` from a client parent, or translate on the server. An explicit prop always wins.
+- **`CollapsibleSection`** stays a JS-free `<details>` unless you pass `lazy`, `persistKey` or `openRequest`. `lazy` unmounts a closed body; `lazy="keep"` keeps it after the first open.
+- **`ConfirmDialog`** focuses the type-to-confirm field, else Cancel when `destructive`. `Popconfirm` is for low-risk, easily undone actions; use `ConfirmDialog` for anything hard to undo.
+- **`KbdCombo`** renders the non-Apple glyphs on the server and switches to ⌘/⇧/⌥ after mount, so hydration matches. Pass `platform` to pin it.

package/dist/calendar-model.d.ts

@@ -16,7 +16,9 @@ declare function toDateKey(date: Date): string;
 declare function addCalendarDays(value: string, amount: number): string;
 declare function addCalendarMonths(value: string, amount: number): string;
 declare function startOfMonth(value: string): string;
-declare function buildMonthGrid(month: string, weekStartsOn?: 0 | 1): CalendarDay[];
+/** A weekday in `Date.getUTCDay()` numbering: 0 = Sunday … 6 = Saturday. */
+type CalendarWeekday = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+declare function buildMonthGrid(month: string, weekStartsOn?: CalendarWeekday): CalendarDay[];
 declare function zonedDateKey(instant: string | Date, timeZone: string): string;
 declare function zonedDateSpan(start: string, end: string, timeZone: string): ZonedDateSpan;
 declare function enumerateDateSpan(span: ZonedDateSpan, limit?: number): string[];
@@ -28,4 +30,4 @@ declare function isDateUnavailable(date: string, options: {
     isDisabled?: (date: string) => boolean;
 }): boolean;
 
-export { type CalendarDay, type DateRangeValue, type ZonedDateSpan, addCalendarDays, addCalendarMonths, buildMonthGrid, enumerateDateSpan, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth, toDateKey, zonedDateKey, zonedDateSpan };
+export { type CalendarDay, type CalendarWeekday, type DateRangeValue, type ZonedDateSpan, addCalendarDays, addCalendarMonths, buildMonthGrid, enumerateDateSpan, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth, toDateKey, zonedDateKey, zonedDateSpan };

package/dist/components/AppShell.d.ts

@@ -27,6 +27,6 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
     /** TENSOR RX-125 (UIX-04): translatable; English default. */
     exitFocusLabel?: ReactNode;
 }
-declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, skipToContentLabel, exitFocusLabel, className, ...props }: AppShellProps): react.JSX.Element;
+declare function AppShell({ nav, collapsed, focus, onExitFocus, mainBleed, mainId, sidebar, topbar, children, skipToContentLabel: skipToContentLabelProp, exitFocusLabel: exitFocusLabelProp, className, ...props }: AppShellProps): react.JSX.Element;
 
 export { AppShell, type AppShellProps, type ShellNav };

package/dist/components/AppShell.js

@@ -2,6 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 function AppShell({
   nav,
   collapsed,
@@ -12,11 +13,14 @@ function AppShell({
   sidebar,
   topbar,
   children,
-  skipToContentLabel = "Skip to content",
-  exitFocusLabel = "Esc \xB7 Exit focus",
+  skipToContentLabel: skipToContentLabelProp,
+  exitFocusLabel: exitFocusLabelProp,
   className,
   ...props
 }) {
+  const uixLabels = useUixLabels();
+  const skipToContentLabel = skipToContentLabelProp ?? uixLabels.appShell?.skipToContent ?? "Skip to content";
+  const exitFocusLabel = exitFocusLabelProp ?? uixLabels.appShell?.exitFocus ?? "Esc \xB7 Exit focus";
   const navState = nav ?? (collapsed ? "rail" : "full");
   useEffect(() => {
     if (!focus || !onExitFocus) return;

package/dist/components/Button.d.ts

@@ -1,18 +1,42 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes } from 'react';
+import { UixRenderLink } from '../link.js';
 
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link';
+/** `xs` is 24 px: the smallest hit area WCAG 2.5.8 allows, for dense tool rows (HAR-1348). */
+type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'link';
-    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    size?: ButtonSize;
     icon?: boolean;
     loading?: boolean;
     children?: ReactNode;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface ButtonLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    href: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /** Icon-only link: square, and needs `aria-label`. */
+    icon?: boolean;
+    /**
+     * Renders the link without `href`, with `aria-disabled="true"`, so it is announced
+     * as an unavailable link and cannot be followed or focused.
+     */
+    disabled?: boolean;
+    /** Your router's link (`(p) => <NextLink {...p} />`); default a plain `<a>`. */
+    renderLink?: UixRenderLink;
+    children?: ReactNode;
+}
+/**
+ * A link that looks like a `Button` (HAR-1348; TENSOR A4/B5, MOTUS C-3). Use it when the
+ * action navigates; use `Button` when it acts in place.
+ */
+declare function ButtonLink({ href, variant, size, icon, disabled, renderLink, className, children, onClick, ...props }: ButtonLinkProps): react.JSX.Element;
 interface ButtonGroupProps {
     children?: ReactNode;
     className?: string;
 }
 declare function ButtonGroup({ children, className }: ButtonGroupProps): react.JSX.Element;
 
-export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps };
+export { Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, type ButtonSize, type ButtonVariant };

package/dist/components/Button.js

@@ -1,6 +1,14 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { cx } from "../cx.js";
+import { renderUixLink } from "../link.js";
+const buttonClasses = (variant, size, icon, className) => cx(
+  "uix-btn",
+  `uix-btn--${variant}`,
+  size !== "md" && `uix-btn--${size}`,
+  icon && "uix-btn--icon",
+  className
+);
 let warnedIconButton = false;
 const Button = forwardRef(
   ({ variant = "secondary", size = "md", icon = false, loading = false, className, children, disabled, onClick, ...props }, ref) => {
@@ -12,13 +20,7 @@ const Button = forwardRef(
       "button",
       {
         ref,
-        className: cx(
-          "uix-btn",
-          `uix-btn--${variant}`,
-          size !== "md" && `uix-btn--${size}`,
-          icon && "uix-btn--icon",
-          className
-        ),
+        className: buttonClasses(variant, size, icon, className),
         disabled,
         "aria-disabled": loading || void 0,
         "aria-busy": loading || void 0,
@@ -37,10 +39,18 @@ const Button = forwardRef(
   }
 );
 Button.displayName = "Button";
+function ButtonLink({ href, variant = "secondary", size = "md", icon = false, disabled = false, renderLink, className, children, onClick, ...props }) {
+  const classes = buttonClasses(variant, size, icon, className);
+  if (disabled) {
+    return /* @__PURE__ */ jsx("a", { ...props, className: classes, role: "link", "aria-disabled": "true", children });
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children: renderUixLink(renderLink, { ...props, href, onClick, className: classes, children }) });
+}
 function ButtonGroup({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cx("uix-btn-group", className), children });
 }
 export {
   Button,
-  ButtonGroup
+  ButtonGroup,
+  ButtonLink
 };

package/dist/components/Card.d.ts

@@ -5,6 +5,12 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title?: ReactNode;
     /** Element for the title — pick a real heading to slot the card into the page outline (UIX-A11Y-4). Default `div` keeps legacy rendering. */
     titleAs?: 'h2' | 'h3' | 'h4' | 'div';
+    /**
+     * Id of the title element (HAR-1354; MOTUS B-A5), so a form, table or region elsewhere
+     * can point `aria-labelledby` at it. With a `role` (e.g. `role="region"`), the card is
+     * labelled by its title too; a plain card has no role, and ARIA forbids naming it.
+     */
+    titleId?: string;
     subtitle?: ReactNode;
     /**
      * Plain-text help behind a ? button after the title. Blank lines separate paragraphs;
@@ -17,7 +23,7 @@ interface CardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     footer?: ReactNode;
     children?: ReactNode;
 }
-declare function Card({ title, titleAs: TitleTag, subtitle, help, helpLabel, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
+declare function Card({ title, titleAs: TitleTag, titleId, subtitle, help, helpLabel, headerAction, footer, children, className, ...props }: CardProps): react.JSX.Element;
 interface CardLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'title'> {
     title?: ReactNode;
     subtitle?: ReactNode;

package/dist/components/Card.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
 import { InfoTip } from "./InfoTip.js";
 import { hasHelp, helpLabelFor } from "../info-tip-model.js";
-function Card({ title, titleAs: TitleTag = "div", subtitle, help, helpLabel, headerAction, footer, children, className, ...props }) {
+function Card({ title, titleAs: TitleTag = "div", titleId, subtitle, help, helpLabel, headerAction, footer, children, className, ...props }) {
   const hasHeader = title != null || subtitle != null || headerAction != null;
-  const heading = title ? /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", children: title }) : null;
-  return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), ...props, children: [
+  const heading = title ? /* @__PURE__ */ jsx(TitleTag, { className: "uix-card__title", id: titleId, children: title }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-card", className), "aria-labelledby": heading && titleId && props.role ? titleId : void 0, ...props, children: [
     hasHeader && /* @__PURE__ */ jsxs("div", { className: "uix-card__header", children: [
       /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
         heading && hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-card__title-row", children: [

package/dist/components/Chip.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+import { UixRenderLink } from '../link.js';
+
+interface ChipProps extends Omit<HTMLAttributes<HTMLElement>, 'onClick'> {
+    /** The chip's text. */
+    children?: ReactNode;
+    icon?: ReactNode;
+    /** A trailing count, e.g. the number of matching rows. */
+    count?: ReactNode;
+    /** Toggle chip: `aria-pressed`, filled while on. Pair with `onPressedChange`. */
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** A chip that acts in place (e.g. opens the filter it shows for editing). */
+    onClick?: () => void;
+    /** A link chip. */
+    href?: string;
+    renderLink?: UixRenderLink;
+    /** Adds a × button that removes the chip. */
+    onRemove?: () => void;
+    /**
+     * Accessible name of the × button. `{label}` is replaced by the chip text when it is a
+     * string. Default "Remove {label}"; pass a full name when the text is not a string.
+     */
+    removeLabel?: string;
+    /** `add` is the dashed "+ Add filter" chip. */
+    variant?: 'default' | 'add';
+    disabled?: boolean;
+}
+/**
+ * Filter, tag and token chip over `.uix-chip` (HAR-1360; TENSOR C7/B34, MOTUS C-6/B-A18).
+ * Plain text, a toggle, a link or a button, optionally with a × that removes it.
+ */
+declare function Chip({ children, icon, count, pressed, onPressedChange, onClick, href, renderLink, onRemove, removeLabel, variant, disabled, className, ...props }: ChipProps): react.JSX.Element;
+interface ChipGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the group, e.g. "Active filters". */
+    label?: string;
+    children?: ReactNode;
+}
+/** A wrapping row of chips with a group name. */
+declare function ChipGroup({ label, children, className, ...props }: ChipGroupProps): react.JSX.Element;
+
+export { Chip, ChipGroup, type ChipGroupProps, type ChipProps };

package/dist/components/Chip.js

@@ -0,0 +1,73 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { renderUixLink } from "../link.js";
+function Chip({
+  children,
+  icon,
+  count,
+  pressed,
+  onPressedChange,
+  onClick,
+  href,
+  renderLink,
+  onRemove,
+  removeLabel = "Remove {label}",
+  variant = "default",
+  disabled,
+  className,
+  ...props
+}) {
+  const toggle = pressed !== void 0;
+  const interactive = toggle || onClick != null || href != null;
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon != null && /* @__PURE__ */ jsx("span", { className: "uix-chip__icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "uix-chip__label", children }),
+    count != null && /* @__PURE__ */ jsx("span", { className: "uix-chip__count", children: count })
+  ] });
+  const handleClick = () => {
+    if (disabled) return;
+    if (toggle) onPressedChange?.(!pressed);
+    onClick?.();
+  };
+  const outer = cx(
+    "uix-chip",
+    variant === "add" && "uix-chip--add",
+    onRemove && "uix-chip--removable",
+    !interactive && "uix-chip--static",
+    className
+  );
+  const main = (classes, extra) => {
+    if (href != null && !disabled) return renderUixLink(renderLink, { href, className: classes, children: body, ...extra });
+    if (interactive) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classes,
+          "aria-pressed": toggle ? pressed : void 0,
+          disabled,
+          onClick: handleClick,
+          ...extra,
+          children: body
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { className: classes, ...extra, children: body });
+  };
+  if (!onRemove) {
+    return /* @__PURE__ */ jsx(Fragment, { children: main(outer, { ...props, "data-on": pressed || void 0 }) });
+  }
+  const removeName = fillLabel(removeLabel, { label: typeof children === "string" || typeof children === "number" ? String(children) : "" }).trim();
+  return /* @__PURE__ */ jsxs("span", { className: outer, "data-on": pressed || void 0, ...props, children: [
+    main("uix-chip__main"),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "uix-chip__remove", "aria-label": removeName, disabled, onClick: onRemove, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" }) }) })
+  ] });
+}
+function ChipGroup({ label, children, className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, className: cx("uix-chip-group", className), ...props, children });
+}
+export {
+  Chip,
+  ChipGroup
+};

package/dist/components/CollapsibleSection.d.ts

@@ -5,7 +5,25 @@ interface CollapsibleSectionProps extends Omit<DetailsHTMLAttributes<HTMLDetails
     title: ReactNode;
     summary?: ReactNode;
     children?: ReactNode;
+    /**
+     * Mount the body only while it is needed (HAR-1352; TENSOR B32): `true` mounts it while
+     * open and unmounts it on close; `'keep'` mounts it on first open and keeps it. For
+     * bodies that fetch or chart. Default: always mounted (and server-renderable).
+     */
+    lazy?: boolean | 'keep';
+    /**
+     * Remember the open state for the session under this key (`sessionStorage`,
+     * `uix:collapsible:<key>`). Applied after mount, so the server HTML uses `open`.
+     */
+    persistKey?: string;
+    /** Each new value opens the section and scrolls it into view ("jump to SLA"). */
+    openRequest?: number;
 }
-declare function CollapsibleSection({ title, summary, children, className, ...props }: CollapsibleSectionProps): react.JSX.Element;
+/**
+ * A `<details>` disclosure. Without `lazy`, `persistKey` or `openRequest` it is a plain,
+ * server-renderable element that toggles without JavaScript; with any of them it becomes
+ * a client component that tracks its open state.
+ */
+declare function CollapsibleSection(props: CollapsibleSectionProps): react.JSX.Element;
 
 export { CollapsibleSection, type CollapsibleSectionProps };

package/dist/components/CollapsibleSection.js

@@ -1,7 +1,10 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cx } from "../cx.js";
-function CollapsibleSection({ title, summary, children, className, ...props }) {
-  return /* @__PURE__ */ jsxs("details", { className: cx("uix-collapsible", className), ...props, children: [
+import { CollapsibleSectionState } from "./CollapsibleSectionState.js";
+function CollapsibleSection(props) {
+  const { title, summary, children, className, lazy, persistKey, openRequest, ...rest } = props;
+  if (lazy || persistKey !== void 0 || openRequest !== void 0) return /* @__PURE__ */ jsx(CollapsibleSectionState, { ...props });
+  return /* @__PURE__ */ jsxs("details", { className: cx("uix-collapsible", className), ...rest, children: [
     /* @__PURE__ */ jsxs("summary", { className: "uix-collapsible__summary", children: [
       /* @__PURE__ */ jsxs("span", { children: [
         /* @__PURE__ */ jsx("span", { className: "uix-collapsible__title", children: title }),

package/dist/components/CollapsibleSectionState.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+import { CollapsibleSectionProps } from './CollapsibleSection.js';
+
+/**
+ * The stateful half of `CollapsibleSection` (HAR-1352): lazy bodies, a remembered open
+ * state and `openRequest`. Internal — `CollapsibleSection` delegates here only when one
+ * of those props is set, so the plain section stays server-renderable and JS-free.
+ */
+declare function CollapsibleSectionState({ title, summary, children, className, lazy, persistKey, openRequest, open, onToggle, ...props }: CollapsibleSectionProps): react.JSX.Element;
+
+export { CollapsibleSectionState };

package/dist/components/CollapsibleSectionState.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+const STORAGE_PREFIX = "uix:collapsible:";
+const readStored = (key) => {
+  try {
+    const value = window.sessionStorage.getItem(STORAGE_PREFIX + key);
+    return value === "1" ? true : value === "0" ? false : void 0;
+  } catch {
+    return void 0;
+  }
+};
+const writeStored = (key, open) => {
+  try {
+    window.sessionStorage.setItem(STORAGE_PREFIX + key, open ? "1" : "0");
+  } catch {
+  }
+};
+function CollapsibleSectionState({ title, summary, children, className, lazy, persistKey, openRequest, open, onToggle, ...props }) {
+  const ref = useRef(null);
+  const [isOpen, setIsOpen] = useState(open ?? false);
+  const [hasOpened, setHasOpened] = useState(open ?? false);
+  const lastRequest = useRef(openRequest);
+  useEffect(() => {
+    if (!persistKey) return;
+    const stored = readStored(persistKey);
+    if (stored !== void 0) {
+      setIsOpen(stored);
+      if (stored) setHasOpened(true);
+    }
+  }, [persistKey]);
+  useEffect(() => {
+    if (open === void 0) return;
+    setIsOpen(open);
+    if (open) setHasOpened(true);
+  }, [open]);
+  useEffect(() => {
+    if (openRequest === void 0 || openRequest === lastRequest.current) return;
+    lastRequest.current = openRequest;
+    setIsOpen(true);
+    setHasOpened(true);
+    if (persistKey) writeStored(persistKey, true);
+    requestAnimationFrame(() => ref.current?.scrollIntoView?.({ block: "nearest" }));
+  }, [openRequest, persistKey]);
+  const handleToggle = (event) => {
+    const next = event.currentTarget.open;
+    setIsOpen(next);
+    if (next) setHasOpened(true);
+    if (persistKey) writeStored(persistKey, next);
+    onToggle?.(event);
+  };
+  const mountBody = !lazy || (lazy === "keep" ? hasOpened : isOpen);
+  return /* @__PURE__ */ jsxs("details", { ref, className: cx("uix-collapsible", className), ...props, open: isOpen, onToggle: handleToggle, children: [
+    /* @__PURE__ */ jsxs("summary", { className: "uix-collapsible__summary", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        /* @__PURE__ */ jsx("span", { className: "uix-collapsible__title", children: title }),
+        summary != null && /* @__PURE__ */ jsx("span", { className: "uix-collapsible__meta", children: summary })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "uix-collapsible__chevron", "aria-hidden": "true", children: "\u2304" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-collapsible__body", children: mountBody ? children : null })
+  ] });
+}
+export {
+  CollapsibleSectionState
+};

package/dist/components/CommandPalette.d.ts

@@ -14,7 +14,7 @@ interface CommandPaletteProps extends HTMLAttributes<HTMLDivElement> {
  * a combobox over the listbox of `CommandItem`s; spreads override every default, so
  * consumers already passing their own roles/labels keep working.
  */
-declare function CommandPalette({ inputProps, children, inputLabel, className, ...props }: CommandPaletteProps): react.JSX.Element;
+declare function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, className, ...props }: CommandPaletteProps): react.JSX.Element;
 interface CommandGroupProps {
     label?: ReactNode;
     children?: ReactNode;

package/dist/components/CommandPalette.js

@@ -2,8 +2,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from "react";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 const CmdkContext = createContext(null);
-function CommandPalette({ inputProps, children, inputLabel = "Command palette", className, ...props }) {
+function CommandPalette({ inputProps, children, inputLabel: inputLabelProp, className, ...props }) {
+  const uixLabels = useUixLabels();
+  const inputLabel = inputLabelProp ?? uixLabels.commandPalette?.input ?? "Command palette";
   const listId = useId();
   const [activeId, setActiveId] = useState(null);
   const [count, setCount] = useState(0);

package/dist/components/DateRangePicker.js

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { addCalendarDays, addCalendarMonths, buildMonthGrid, isDateInRange, isDateUnavailable, selectRangeDate, startOfMonth } from "../calendar-model.js";
 import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
 const DEFAULT_DATE_RANGE_PICKER_LABELS = {
   previous: "Previous",
   previousMonth: "Show previous month",
@@ -39,7 +40,8 @@ function DateRangePicker({
   labels: labelOverrides
 }) {
   const id = useId();
-  const labels = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...labelOverrides };
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_DATE_RANGE_PICKER_LABELS, ...uixLabels.dateRangePicker, ...labelOverrides };
   const weekdays = useMemo(() => weekdayNames(locale), [locale]);
   const [internalMonth, setInternalMonth] = useState(() => startOfMonth(controlledMonth ?? value.start ?? (/* @__PURE__ */ new Date()).toISOString().slice(0, 10)));
   const visibleMonth = startOfMonth(controlledMonth ?? internalMonth);

package/dist/components/Dialogs.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
+import { Placement } from '../overlay-position.js';
 
 interface ConfirmDialogProps {
     open: boolean;
@@ -12,9 +13,59 @@ interface ConfirmDialogProps {
     onCancel: () => void;
     pending?: boolean;
     destructive?: boolean;
+    /**
+     * Body below the description: consequences, a `<dl>` of what changes (HAR-1356; MOTUS B-A4).
+     * The description, body and compensation are the dialog's `aria-describedby`.
+     */
+    children?: ReactNode;
+    /** Why the last confirm failed. Shown in the dialog (`role="alert"`); the dialog stays open. */
+    error?: ReactNode;
+    /**
+     * Which button has focus when the dialog opens. Default: the type-to-confirm field when
+     * there is one, else Cancel for a `destructive` dialog, else the browser's first control.
+     */
+    initialFocus?: 'cancel' | 'confirm';
+    /** A third action at the start of the footer, e.g. "Save and leave" (MOTUS C-5). */
+    tertiaryLabel?: ReactNode;
+    onTertiary?: () => void | Promise<void>;
+    /**
+     * High-risk confirmation (TENSOR C2): Confirm stays disabled until the user types exactly
+     * this text, e.g. the record's name.
+     */
+    typeToConfirm?: string;
+    /** Label of the type-to-confirm field. `{value}` is replaced by `typeToConfirm`. */
+    typeToConfirmLabel?: string;
+    /** How the action is undone or compensated, shown as its own labelled block (TENSOR C2). */
+    compensation?: ReactNode;
+    /** Heading of the compensation block. Default "How to undo this". */
+    compensationLabel?: string;
 }
 /** Generic confirmation shell. Audit, authorization and compensation policy remain application-owned. */
-declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive }: ConfirmDialogProps): react.JSX.Element;
+declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, closeLabel, onConfirm, onCancel, pending, destructive, children, error, initialFocus, tertiaryLabel, onTertiary, typeToConfirm, typeToConfirmLabel: typeToConfirmLabelProp, compensation, compensationLabel: compensationLabelProp, }: ConfirmDialogProps): react.JSX.Element;
+interface PopconfirmProps {
+    open: boolean;
+    /** The control that asked for confirmation; the step is placed against it and focus returns to it. */
+    anchor: RefObject<HTMLElement | null> | HTMLElement | null;
+    title: ReactNode;
+    description?: ReactNode;
+    confirmLabel: ReactNode;
+    cancelLabel: ReactNode;
+    onConfirm: () => void | Promise<void>;
+    /** Cancel, Escape and a press outside all call this. */
+    onCancel: () => void;
+    pending?: boolean;
+    destructive?: boolean;
+    /** How the action is undone, under its own heading (TENSOR C2 "single_click" tier). */
+    compensation?: ReactNode;
+    compensationLabel?: string;
+    placement?: Placement;
+}
+/**
+ * An anchored, single-step confirmation for low-risk actions (HAR-1356; TENSOR C2): a small
+ * `role="dialog"` on the kit `Popover`, focus on Cancel, Escape or a press outside cancels,
+ * and focus returns to the anchor. Use `ConfirmDialog` when the action is hard to undo.
+ */
+declare function Popconfirm({ open, anchor, title, description, confirmLabel, cancelLabel, onConfirm, onCancel, pending, destructive, compensation, compensationLabel: compensationLabelProp, placement, }: PopconfirmProps): react.JSX.Element;
 interface PromptDialogProps {
     open: boolean;
     title: ReactNode;
@@ -32,4 +83,4 @@ interface PromptDialogProps {
 }
 declare function PromptDialog({ open, title, description, inputLabel, defaultValue, placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }: PromptDialogProps): react.JSX.Element;
 
-export { ConfirmDialog, type ConfirmDialogProps, PromptDialog, type PromptDialogProps };
+export { ConfirmDialog, type ConfirmDialogProps, Popconfirm, type PopconfirmProps, PromptDialog, type PromptDialogProps };