@tensor_1/react 2.47.0 → 2.49.0

package/dist/components/OtpInput.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Fragment, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { cx } from "../cx.js";
+const allowed = (text, mode) => {
+  const plain = text.normalize("NFKC");
+  return mode === "numeric" ? plain.replace(/\D+/g, "") : plain.replace(/[^0-9a-z]+/gi, "").toUpperCase();
+};
+const clean = (text, mode, length) => allowed(text, mode).slice(0, length);
+const OtpInput = forwardRef(function OtpInput2({
+  length: lengthProp = 6,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onComplete,
+  mode = "numeric",
+  groupSize,
+  invalid,
+  "aria-invalid": ariaInvalid,
+  className,
+  style,
+  autoComplete = "one-time-code",
+  onFocus,
+  onBlur,
+  onSelect,
+  disabled,
+  ...props
+}, forwardedRef) {
+  const length = Math.max(1, Math.floor(lengthProp));
+  const [internal, setInternal] = useState(() => clean(defaultValue, mode, length));
+  const value = valueProp !== void 0 ? clean(valueProp, mode, length) : internal;
+  const [focused, setFocused] = useState(false);
+  const inputRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const completed = useRef(value.length === length ? value : null);
+  const update = (raw) => {
+    const next = clean(raw, mode, length);
+    if (valueProp === void 0) setInternal(next);
+    if (next !== value) onValueChange?.(next);
+  };
+  useEffect(() => {
+    if (value.length === length && completed.current !== value) {
+      completed.current = value;
+      onComplete?.(value);
+    } else if (value.length < length) {
+      completed.current = null;
+    }
+  }, [value, length]);
+  const toEnd = () => {
+    const input = inputRef.current;
+    if (!input) return;
+    const all = input.value.length > 0 && input.selectionStart === 0 && input.selectionEnd === input.value.length;
+    if (!all && (input.selectionStart !== input.value.length || input.selectionEnd !== input.value.length)) {
+      try {
+        input.setSelectionRange(input.value.length, input.value.length);
+      } catch {
+      }
+    }
+  };
+  const isInvalid = !!invalid || ariaInvalid === true || ariaInvalid === "true";
+  const active = focused ? Math.min(value.length, length - 1) : -1;
+  const group = groupSize && groupSize > 0 && groupSize < length ? Math.floor(groupSize) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-otp", className),
+      style: { "--uix-otp-cells": length, "--uix-otp-seps": group ? Math.ceil(length / group) - 1 : 0, ...style },
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...props,
+            ref: inputRef,
+            className: "uix-otp__input",
+            type: "text",
+            inputMode: mode === "numeric" ? "numeric" : "text",
+            autoComplete,
+            autoCapitalize: mode === "alphanumeric" ? "characters" : "off",
+            autoCorrect: "off",
+            spellCheck: false,
+            pattern: mode === "numeric" ? `[0-9]{${length}}` : `[0-9A-Za-z]{${length}}`,
+            dir: "ltr",
+            value,
+            disabled,
+            "aria-invalid": isInvalid || void 0,
+            onChange: (event) => update(event.target.value),
+            onPaste: (event) => {
+              const usable = allowed(event.clipboardData?.getData("text") ?? "", mode);
+              event.preventDefault();
+              if (!usable) return;
+              const input = event.currentTarget;
+              const start = input.selectionStart ?? value.length;
+              const end = input.selectionEnd ?? value.length;
+              const whole = start === 0 && end === value.length;
+              update(whole ? usable : `${value.slice(0, start)}${usable}${value.slice(end)}`);
+            },
+            onFocus: (event) => {
+              setFocused(true);
+              toEnd();
+              onFocus?.(event);
+            },
+            onBlur: (event) => {
+              setFocused(false);
+              onBlur?.(event);
+            },
+            onSelect: (event) => {
+              toEnd();
+              onSelect?.(event);
+            }
+          }
+        ),
+        Array.from({ length }, (_, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          group > 0 && index > 0 && index % group === 0 && /* @__PURE__ */ jsx("span", { className: "uix-otp__sep", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: "uix-otp__cell", "aria-hidden": "true", "data-active": index === active || void 0, children: value[index] ?? "" })
+        ] }, index))
+      ]
+    }
+  );
+});
+OtpInput.displayName = "OtpInput";
+export {
+  OtpInput
+};

package/dist/components/PageHeader.d.ts

@@ -17,11 +17,17 @@ interface PageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
     helpLabel?: string;
     /** Right-aligned action area (buttons, menus). */
     actions?: ReactNode;
+    /**
+     * `display` is the staff type preset (HAR-1815; TENSOR, MOTUS ADR-0047): a 40 px heading-font
+     * title, a bold hushed eyebrow, a body-size hushed subtitle up to 42rem, and the actions
+     * aligned to the bottom of the titles. `default` is the 24 px header.
+     */
+    size?: 'default' | 'display';
 }
 /**
  * Page header — eyebrow / title (+ optional `help` ?) / subtitle + actions row, over `.uix-page-header`.
  * The hairline + breathing room below come from the component CSS.
  */
-declare function PageHeader({ eyebrow, title, subtitle, help, helpLabel, actions, as: TitleTag, className, ...props }: PageHeaderProps): react.JSX.Element;
+declare function PageHeader({ eyebrow, title, subtitle, help, helpLabel, actions, as: TitleTag, size, className, ...props }: PageHeaderProps): react.JSX.Element;
 
 export { PageHeader, type PageHeaderProps };

package/dist/components/PageHeader.js

@@ -2,9 +2,9 @@ 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 PageHeader({ eyebrow, title, subtitle, help, helpLabel, actions, as: TitleTag = "h1", className, ...props }) {
+function PageHeader({ eyebrow, title, subtitle, help, helpLabel, actions, as: TitleTag = "h1", size = "default", className, ...props }) {
   const heading = /* @__PURE__ */ jsx(TitleTag, { className: "uix-page-header__title", children: title });
-  return /* @__PURE__ */ jsxs("header", { className: cx("uix-page-header", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("header", { className: cx("uix-page-header", size === "display" && "uix-page-header--display", className), ...props, children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-page-header__titles", children: [
       eyebrow != null && /* @__PURE__ */ jsx("div", { className: "uix-page-header__eyebrow", children: eyebrow }),
       hasHelp(help) ? /* @__PURE__ */ jsxs("div", { className: "uix-page-header__title-row", children: [

package/dist/components/Pagination.js

@@ -2,6 +2,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment2 } from "react";
 import { cx } from "../cx.js";
 import { renderUixLink } from "../link.js";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon } from "../icons/components.js";
 function getPageNumbers(page, total) {
   if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1);
   const pages = [1];
@@ -59,19 +60,19 @@ function Pagination({
   if (mode === "cursor") {
     const linked = firstHref != null || previousHref != null || nextHref != null;
     controls = /* @__PURE__ */ jsxs(Fragment, { children: [
-      (onFirst || firstHref != null) && render({ key: "first", content: "\xAB", label: labels.first, disabled: !hasPrevious, href: linked ? firstHref ?? "" : void 0, onClick: onFirst }),
-      render({ key: "prev", content: "\u2039", label: labels.previous, disabled: !hasPrevious, href: linked ? previousHref ?? "" : void 0, onClick: onPrevious }),
+      (onFirst || firstHref != null) && render({ key: "first", content: /* @__PURE__ */ jsx(ChevronsLeftIcon, {}), label: labels.first, disabled: !hasPrevious, href: linked ? firstHref ?? "" : void 0, onClick: onFirst }),
+      render({ key: "prev", content: /* @__PURE__ */ jsx(ChevronLeftIcon, {}), label: labels.previous, disabled: !hasPrevious, href: linked ? previousHref ?? "" : void 0, onClick: onPrevious }),
       summary != null && /* @__PURE__ */ jsx("span", { className: "uix-pagination__summary", children: summary }),
-      render({ key: "next", content: "\u203A", label: labels.next, disabled: !hasNext, href: linked ? nextHref ?? "" : void 0, onClick: onNext })
+      render({ key: "next", content: /* @__PURE__ */ jsx(ChevronRightIcon, {}), label: labels.next, disabled: !hasNext, href: linked ? nextHref ?? "" : void 0, onClick: onNext })
     ] });
   } else {
     const go = (target) => hrefFor ? { href: hrefFor(target) } : { onClick: () => onChange?.(target) };
     controls = /* @__PURE__ */ jsxs(Fragment, { children: [
-      render({ key: "prev", content: "\u2039", label: labels.previous, disabled: page <= 1, ...go(page - 1) }),
+      render({ key: "prev", content: /* @__PURE__ */ jsx(ChevronLeftIcon, {}), label: labels.previous, disabled: page <= 1, ...go(page - 1) }),
       getPageNumbers(page, pageCount).map(
         (p, i) => p === "ellipsis" ? /* @__PURE__ */ jsx("span", { className: "uix-pagination__ellipsis", children: "\u2026" }, `e${i}`) : render({ key: `p${p}`, content: p, current: p === page, ...go(p) })
       ),
-      render({ key: "next", content: "\u203A", label: labels.next, disabled: page >= pageCount, ...go(page + 1) })
+      render({ key: "next", content: /* @__PURE__ */ jsx(ChevronRightIcon, {}), label: labels.next, disabled: page >= pageCount, ...go(page + 1) })
     ] });
   }
   return /* @__PURE__ */ jsx("nav", { "aria-label": labels.region, className: cx("uix-pagination", className), ...props, children: controls });

package/dist/components/PasswordInput.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { InputProps } from './Input.js';
+
+/** The words `PasswordInput` renders. */
+interface PasswordInputLabels {
+    /**
+     * Name of the reveal toggle. It stays the same while the password shows: the toggle's pressed
+     * state (`aria-pressed`) says whether it is on.
+     */
+    show: string;
+}
+declare const DEFAULT_PASSWORD_INPUT_LABELS: PasswordInputLabels;
+interface PasswordInputProps extends Omit<InputProps, 'type'> {
+    /** Controlled: whether the password shows as text. */
+    revealed?: boolean;
+    /** Uncontrolled: shown as text at first. Default `false`. */
+    defaultRevealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** Each word defaults to `UixLabelsProvider` `passwordInput`, then to English. */
+    labels?: Partial<PasswordInputLabels>;
+    /** Class of the wrapping `InputGroup` (`className` goes on the input). */
+    groupClassName?: string;
+}
+/**
+ * A password field with a reveal toggle (HAR-1376): an `Input type="password"` and, inside its end,
+ * a toggle button (`aria-pressed`) that shows the password as text and hides it again. A pointer
+ * press leaves focus in the field; the keyboard reaches the toggle with Tab. The password is
+ * hidden again when its form submits, so a password manager sees a password field. `autoComplete`
+ * passes through (`current-password`, `new-password`); inside `Field` the label, hint and error
+ * land on the input. `ref` is the input.
+ */
+declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
+
+export { DEFAULT_PASSWORD_INPUT_LABELS, PasswordInput, type PasswordInputLabels, type PasswordInputProps };

package/dist/components/PasswordInput.js

@@ -0,0 +1,101 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
+import { EyeIcon, EyeOffIcon } from "../icons/components.js";
+import { useUixLabels } from "../labels-context.js";
+import { Input, InputGroup } from "./Input.js";
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const DEFAULT_PASSWORD_INPUT_LABELS = { show: "Show password" };
+const PasswordInput = forwardRef(function PasswordInput2({
+  revealed: revealedProp,
+  defaultRevealed = false,
+  onRevealedChange,
+  labels: labelOverrides,
+  groupClassName,
+  disabled,
+  size,
+  ...props
+}, forwardedRef) {
+  const labels = { ...DEFAULT_PASSWORD_INPUT_LABELS, ...useUixLabels().passwordInput, ...labelOverrides };
+  const [internal, setInternal] = useState(defaultRevealed);
+  const revealed = revealedProp ?? internal;
+  const inputRef = useRef(null);
+  useImperativeHandle(forwardedRef, () => inputRef.current);
+  const revealedRef = useRef(revealed);
+  revealedRef.current = revealed;
+  const setRevealed = (next) => {
+    if (revealedProp === void 0) setInternal(next);
+    onRevealedChange?.(next);
+  };
+  const setRef = useRef(setRevealed);
+  setRef.current = setRevealed;
+  const selection = useRef(null);
+  const keepSelection = () => {
+    const input = inputRef.current;
+    if (!input || input.ownerDocument.activeElement !== input) {
+      selection.current = null;
+      return;
+    }
+    selection.current = { start: input.selectionStart ?? input.value.length, end: input.selectionEnd ?? input.value.length, direction: input.selectionDirection ?? "none" };
+  };
+  useIsomorphicLayoutEffect(() => {
+    const input = inputRef.current;
+    const kept = selection.current;
+    selection.current = null;
+    if (!input || !kept || input.ownerDocument.activeElement !== input) return;
+    void input.offsetWidth;
+    try {
+      input.setSelectionRange(kept.start, kept.end, kept.direction);
+    } catch {
+    }
+  }, [revealed]);
+  useEffect(() => {
+    const form = inputRef.current?.form;
+    if (!form) return void 0;
+    const onSubmit = () => {
+      if (revealedRef.current) setRef.current(false);
+    };
+    form.addEventListener("submit", onSubmit, true);
+    return () => form.removeEventListener("submit", onSubmit, true);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    InputGroup,
+    {
+      className: groupClassName,
+      trailingAction: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "uix-input-group__action",
+          "aria-label": labels.show,
+          "aria-pressed": revealed,
+          "aria-controls": props.id,
+          disabled,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => {
+            keepSelection();
+            setRevealed(!revealed);
+          },
+          children: revealed ? /* @__PURE__ */ jsx(EyeOffIcon, { size: "sm" }) : /* @__PURE__ */ jsx(EyeIcon, { size: "sm" })
+        }
+      ),
+      children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...props,
+          ref: inputRef,
+          size,
+          disabled,
+          type: revealed ? "text" : "password",
+          spellCheck: false,
+          autoCapitalize: "none"
+        }
+      )
+    }
+  );
+});
+PasswordInput.displayName = "PasswordInput";
+export {
+  DEFAULT_PASSWORD_INPUT_LABELS,
+  PasswordInput
+};

package/dist/components/Peek.js

@@ -19,12 +19,12 @@ function Peek({ open, onClose, title, children, footer, onNavPrev, onNavNext, hi
   return /* @__PURE__ */ jsxs("dialog", { ref, className: cx("uix-peek", className), "aria-labelledby": title ? titleId : void 0, ...rest, onClick: backdropDismiss(onClose, onClick), children: [
     /* @__PURE__ */ jsxs("div", { className: "uix-peek__header", children: [
       hasNav && /* @__PURE__ */ jsxs("div", { className: "uix-peek__nav", children: [
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": previousLabel, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
-        /* @__PURE__ */ jsx("button", { className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": nextLabel, children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-peek__navbtn", onClick: () => onNavPrev?.(), "aria-disabled": onNavPrev ? void 0 : true, "aria-label": previousLabel, children: /* @__PURE__ */ jsx(ChevronUp, {}) }),
+        /* @__PURE__ */ jsx("button", { type: "button", className: "uix-peek__navbtn", onClick: () => onNavNext?.(), "aria-disabled": onNavNext ? void 0 : true, "aria-label": nextLabel, children: /* @__PURE__ */ jsx(ChevronDown, {}) })
       ] }),
       title && /* @__PURE__ */ jsx("h2", { className: "uix-peek__title", id: titleId, children: title }),
       hint && /* @__PURE__ */ jsx("span", { className: "uix-peek__hint", children: hint }),
-      onClose && /* @__PURE__ */ jsx("button", { className: "uix-peek__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+      onClose && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-peek__close", onClick: onClose, "aria-label": closeLabel, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
     ] }),
     children != null && /* @__PURE__ */ jsx("div", { className: "uix-peek__body", children }),
     footer != null && /* @__PURE__ */ jsx("div", { className: "uix-peek__footer", children: footer })

package/dist/components/Popover.js

@@ -3,6 +3,7 @@ import { jsx } from "react/jsx-runtime";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { cx } from "../cx.js";
 import { resolveAnchor, useAnchoredPosition } from "../hooks/useAnchoredPosition.js";
+import { markKeyOpened, watchInputModality } from "../motion.js";
 const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
 const PLACING = "data-uix-placing";
 const isPopoverOpen = (el) => {
@@ -54,6 +55,14 @@ function Popover({
       el.hidePopover();
     } : void 0
   });
+  useEffect(() => {
+    watchInputModality();
+    const el = ref.current;
+    if (!el) return;
+    const mark = () => markKeyOpened(el);
+    el.addEventListener("beforetoggle", mark);
+    return () => el.removeEventListener("beforetoggle", mark);
+  }, []);
   useEffect(() => {
     const el = ref.current;
     if (!el || !anchor) return;
@@ -134,6 +143,8 @@ function Popover({
     };
     const onKeyDown = (event) => {
       if (event.key !== "Escape" || !isPopoverOpen(el)) return;
+      event.preventDefault();
+      event.stopPropagation();
       window.clearTimeout(timer);
       const hadFocus = el.contains(el.ownerDocument.activeElement);
       try {

package/dist/components/PrintLayout.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/** The words of `PrintSignature` (HAR-986). */
+interface PrintLayoutLabels {
+    /** The caption under the signature line. */
+    signature: string;
+    /** The caption of the stamp box. */
+    stamp: string;
+}
+declare const DEFAULT_PRINT_LAYOUT_LABELS: PrintLayoutLabels;
+type PrintPageSize = 'A4' | 'A5';
+interface PrintLayoutProps extends HTMLAttributes<HTMLDivElement> {
+    /** The paper. Default `A4` (210 × 297 mm); `A5` is 148 × 210 mm (a poster, a slip). */
+    size?: PrintPageSize;
+    /** Default `portrait`. */
+    orientation?: 'portrait' | 'landscape';
+    /** Repeats at the top of every printed page: the practice or store identity. */
+    header?: ReactNode;
+    /** Repeats at the foot of every printed page, before the page number. */
+    footer?: ReactNode;
+    /** "page / pages" in the bottom-right page margin of every printed page. Default `true`; never on a `singlePage` layout. */
+    pageNumbers?: boolean;
+    /**
+     * One page and no more (a poster, a one-page readout): the header and footer are not
+     * repeated, the layout is kept in one piece, and the screen preview is exactly one page tall.
+     * When the content does not fit, the preview is outlined and `onOverflowChange(true)` is called,
+     * so the product can shorten it before anyone prints.
+     */
+    singlePage?: boolean;
+    /** Called with `true` when a `singlePage` layout's content is taller than its page, and `false` once it fits again. */
+    onOverflowChange?: (overflowing: boolean) => void;
+    /**
+     * When printing, show only print layouts: everything else on the page (the app shell, the
+     * toolbar with the Print button, toasts, dialogs) is hidden. Default `true`.
+     */
+    isolate?: boolean;
+}
+/**
+ * A print document frame (HAR-986, HAR-1252; MEDx S20 "Nalaz i mišljenje" and the day list,
+ * SHOPx PRE-01 A5 poster and SHOP-03 one-page readout): an A4 or A5 page with the paper's margins,
+ * a header and a footer that repeat on every printed page, page numbers in the page margin, and
+ * black-on-white tokens for everything inside, on screen (as a paper preview) and on paper. The
+ * consumer supplies the sections; the browser's own print (`window.print()`) makes the pages.
+ */
+declare function PrintLayout({ size, orientation, header, footer, pageNumbers, singlePage, onOverflowChange, isolate, className, children, style, ...props }: PrintLayoutProps): react.JSX.Element;
+interface PrintSignatureProps extends HTMLAttributes<HTMLDivElement> {
+    /** The caption under the line. Default `labels.signature`. */
+    label?: ReactNode;
+    /** The signer's printed name and title under the caption, e.g. "dr. Amra Hadžić, spec. pedijatrije". */
+    name?: ReactNode;
+    /** Place and date at the start of the block, e.g. "Sarajevo, 22. 10. 2026.". */
+    placeAndDate?: ReactNode;
+    /** A box for the stamp beside the signature. */
+    stamp?: boolean;
+    labels?: Partial<PrintLayoutLabels>;
+}
+/** A signature line (and an optional stamp box) that is never split across two pages. */
+declare function PrintSignature({ label, name, placeAndDate, stamp, labels: labelsProp, className, ...props }: PrintSignatureProps): react.JSX.Element;
+/** Starts a new printed page here. On screen it is a dashed line, so the preview shows where the page ends. */
+declare function PrintPageBreak({ className, ...props }: HTMLAttributes<HTMLDivElement>): react.JSX.Element;
+
+export { DEFAULT_PRINT_LAYOUT_LABELS, PrintLayout, type PrintLayoutLabels, type PrintLayoutProps, PrintPageBreak, type PrintPageSize, PrintSignature, type PrintSignatureProps };

package/dist/components/PrintLayout.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+const DEFAULT_PRINT_LAYOUT_LABELS = { signature: "Signature", stamp: "Stamp" };
+const useIsomorphicLayoutEffect = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+const PAPER_MM = { A4: [210, 297], A5: [148, 210] };
+const PX_PER_MM = 96 / 25.4;
+function PrintLayout({
+  size = "A4",
+  orientation = "portrait",
+  header,
+  footer,
+  pageNumbers = true,
+  singlePage = false,
+  onOverflowChange,
+  isolate = true,
+  className,
+  children,
+  style,
+  ...props
+}) {
+  const ref = useRef(null);
+  const fitRef = useRef(null);
+  const report = useRef(onOverflowChange);
+  report.current = onOverflowChange;
+  const [scale, setScale] = useState(1);
+  const paperMm = PAPER_MM[size][orientation === "landscape" ? 1 : 0];
+  const paperPx = paperMm * PX_PER_MM;
+  useIsomorphicLayoutEffect(() => {
+    const box = fitRef.current;
+    if (!box) return void 0;
+    const fit = () => {
+      const room = box.getBoundingClientRect().width;
+      if (room > 0) setScale(room >= paperPx - 0.5 ? 1 : room / paperPx);
+    };
+    fit();
+    if (typeof ResizeObserver === "undefined") return void 0;
+    const observer = new ResizeObserver(fit);
+    observer.observe(box);
+    return () => observer.disconnect();
+  }, [paperPx]);
+  const hasHeader = header != null;
+  const hasFooter = footer != null;
+  useEffect(() => {
+    const root = ref.current;
+    if (!singlePage || !root || typeof ResizeObserver === "undefined") return void 0;
+    const content = root.querySelector(":scope > .uix-print-layout__page");
+    if (!content) return void 0;
+    let last = false;
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      const over = content.scrollHeight > content.clientHeight + 1;
+      if (over === last) return;
+      last = over;
+      root.toggleAttribute("data-overflowing", over);
+      report.current?.(over);
+    };
+    const observer = new ResizeObserver(() => {
+      if (!frame) frame = requestAnimationFrame(measure);
+    });
+    observer.observe(content);
+    for (const cell of Array.from(content.querySelectorAll(":scope > * > tr > td"))) observer.observe(cell);
+    measure();
+    return () => {
+      observer.disconnect();
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [singlePage, hasHeader, hasFooter]);
+  const page = `uix-print-${size.toLowerCase()}${orientation === "landscape" ? "-landscape" : ""}${pageNumbers && !singlePage ? "" : "-plain"}`;
+  return /* @__PURE__ */ jsx("div", { ref: fitRef, className: "uix-print-preview", style: { inlineSize: `${paperMm}mm` }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cx("uix-print-layout", className),
+      "data-size": size,
+      "data-orientation": orientation,
+      "data-page": page,
+      "data-single-page": singlePage ? "" : void 0,
+      "data-isolate": isolate ? "" : void 0,
+      style: scale < 1 ? { "--uix-print-preview-scale": Number(scale.toFixed(4)), ...style } : style,
+      ...props,
+      children: /* @__PURE__ */ jsxs("table", { className: "uix-print-layout__page", role: "presentation", children: [
+        header != null && /* @__PURE__ */ jsx("thead", { className: "uix-print-layout__header", children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: "uix-print-layout__bar", children: header }) }) }) }),
+        /* @__PURE__ */ jsx("tbody", { className: "uix-print-layout__main", children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "uix-print-layout__body", children }) }) }),
+        footer != null && /* @__PURE__ */ jsx("tfoot", { className: "uix-print-layout__footer", children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("div", { className: "uix-print-layout__bar", children: footer }) }) }) })
+      ] })
+    }
+  ) });
+}
+function PrintSignature({ label, name, placeAndDate, stamp = false, labels: labelsProp, className, ...props }) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_PRINT_LAYOUT_LABELS, ...uixLabels.printLayout, ...labelsProp };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-print-signature", className), ...props, children: [
+    placeAndDate != null && /* @__PURE__ */ jsx("div", { className: "uix-print-signature__place", children: placeAndDate }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-print-signature__field", children: [
+      /* @__PURE__ */ jsx("div", { className: "uix-print-signature__line", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("div", { className: "uix-print-signature__caption", children: label ?? labels.signature }),
+      name != null && /* @__PURE__ */ jsx("div", { className: "uix-print-signature__name", children: name })
+    ] }),
+    stamp && /* @__PURE__ */ jsx("div", { className: "uix-print-signature__stamp", children: /* @__PURE__ */ jsx("span", { children: labels.stamp }) })
+  ] });
+}
+function PrintPageBreak({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cx("uix-print-break", className), role: "presentation", ...props });
+}
+export {
+  DEFAULT_PRINT_LAYOUT_LABELS,
+  PrintLayout,
+  PrintPageBreak,
+  PrintSignature
+};

package/dist/components/QrCode.d.ts

@@ -0,0 +1,47 @@
+import * as react from 'react';
+import { SVGAttributes } from 'react';
+import { QrErrorCorrection } from '../qr-model.js';
+
+/** The words of a `QrCode` (HAR-1251). */
+interface QrCodeLabels {
+    /** Shown in place of the symbol when `value` does not fit in a QR code at the chosen level. */
+    tooLong: string;
+}
+/** The English words of `QrCode`, the base `UixLabelsProvider` `qrCode` and `labels` override. */
+declare const DEFAULT_QR_CODE_LABELS: QrCodeLabels;
+interface QrCodeProps extends Omit<SVGAttributes<SVGSVGElement>, 'children' | 'width' | 'height' | 'viewBox'> {
+    /** The text to encode, e.g. the campaign URL. Encoded as UTF-8 bytes. */
+    value: string;
+    /**
+     * The symbol's accessible name, e.g. "QR code: open the summer campaign". Say where it leads;
+     * the image itself tells a screen-reader user nothing.
+     */
+    label: string;
+    /**
+     * `L` 7 %, `M` 15 % (default), `Q` 25 %, `H` 30 % of the symbol may be lost and still read.
+     * Use `Q` or `H` for a poster that may be creased, scuffed or partly covered.
+     */
+    errorCorrection?: QrErrorCorrection;
+    /**
+     * The rendered width and height, quiet zone included: a number of CSS pixels (default 160) or
+     * any CSS length (`'32mm'` on paper). Keep at least 2 px per module on a screen and 0.4 mm per
+     * module on paper: a 30-character URL at `M` is version 3, 37 modules with the quiet zone, so
+     * at least 74 px or 15 mm.
+     */
+    size?: number | string;
+    /** The smallest version to use, so a set of posters gets symbols of one size. */
+    minVersion?: number;
+    /** Mark non-ASCII text as UTF-8 with an ECI designator (see `QrEncodeOptions.eci`). Default false. */
+    eci?: boolean;
+    /** The words. Default: `UixLabelsProvider` `qrCode`, then English. */
+    labels?: Partial<QrCodeLabels>;
+}
+/**
+ * A scannable, print-safe QR code (HAR-1251; SHOPx PRE-01 poster, voucher): `value` as an SVG
+ * with the standard four-module quiet zone, dark modules on light paper in every theme, in print
+ * and in forced colours (scanners read dark on light; an inverted symbol fails many of them).
+ * The encoder is the kit's own (`encodeQr`), so nothing is fetched and no library is added.
+ */
+declare function QrCode({ value, label, errorCorrection, size, minVersion, eci, labels: labelsProp, className, style, ...props }: QrCodeProps): react.JSX.Element;
+
+export { DEFAULT_QR_CODE_LABELS, QrCode, type QrCodeLabels, type QrCodeProps };

package/dist/components/QrCode.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { cx } from "../cx.js";
+import { useUixLabels } from "../labels-context.js";
+import { encodeQr, qrPath, QrCapacityError } from "../qr-model.js";
+const DEFAULT_QR_CODE_LABELS = { tooLong: "Too long for a QR code" };
+const QUIET_ZONE = 4;
+function QrCode({ value, label, errorCorrection = "M", size = 160, minVersion, eci = false, labels: labelsProp, className, style, ...props }) {
+  const uixLabels = useUixLabels();
+  const labels = { ...DEFAULT_QR_CODE_LABELS, ...uixLabels.qrCode, ...labelsProp };
+  const matrix = useMemo(() => {
+    try {
+      return encodeQr(value, { errorCorrection, minVersion, eci });
+    } catch (error) {
+      if (error instanceof QrCapacityError) return void 0;
+      throw error;
+    }
+  }, [value, errorCorrection, minVersion, eci]);
+  const length = typeof size === "number" ? `${size}px` : size;
+  if (!matrix) {
+    return /* @__PURE__ */ jsxs("span", { ...props, className: cx("uix-qr-code", "uix-qr-code--error", className), style: { inlineSize: length, ...style }, children: [
+      /* @__PURE__ */ jsxs("span", { className: "uix-visually-hidden", children: [
+        label,
+        ": "
+      ] }),
+      labels.tooLong
+    ] });
+  }
+  const extent = matrix.size + QUIET_ZONE * 2;
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: cx("uix-qr-code", className),
+      role: "img",
+      "aria-label": label,
+      viewBox: `0 0 ${extent} ${extent}`,
+      width: length,
+      height: length,
+      shapeRendering: "crispEdges",
+      "data-version": matrix.version,
+      "data-error-correction": matrix.errorCorrection,
+      style,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("rect", { className: "uix-qr-code__paper", width: extent, height: extent }),
+        /* @__PURE__ */ jsx("path", { className: "uix-qr-code__ink", d: qrPath(matrix, QUIET_ZONE) })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_QR_CODE_LABELS,
+  QrCode
+};