@tensor_1/react 2.30.0 → 2.31.0

package/dist/components/FileUpload.js

@@ -0,0 +1,139 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { formatFileSize, partitionFiles } from "../file-model.js";
+import { Button } from "./Button.js";
+import { Input } from "./Input.js";
+import { Progress } from "./Progress.js";
+import { FileIcon } from "./FileIcon.js";
+const DEFAULT_FILE_UPLOAD_LABELS = {
+  title: "Drop files here",
+  choose: "Choose files",
+  drop: "Release to add the files",
+  list: "Files",
+  remove: "Remove {name}",
+  retry: "Retry {name}",
+  retryShort: "Retry",
+  queued: "Waiting",
+  uploading: "Uploading, {progress}%",
+  done: "Uploaded",
+  failed: "Upload failed",
+  alt: "Description of {name} for screen readers",
+  added: "{count} added",
+  wrongType: "{name} is not an accepted file type ({accept}).",
+  tooLarge: "{name} is larger than {max}.",
+  tooMany: "{name} was not added: at most {max} files."
+};
+function FileUpload({
+  items,
+  onFilesAdded,
+  onRemove,
+  onRetry,
+  onAltChange,
+  accept,
+  maxSize,
+  maxFiles,
+  multiple = true,
+  capture,
+  disabled,
+  hint,
+  locale,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...DEFAULT_FILE_UPLOAD_LABELS, ...labelOverrides };
+  const id = useId();
+  const inputRef = useRef(null);
+  const [over, setOver] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [announce, setAnnounce] = useState("");
+  const take = (list) => {
+    if (!list || disabled) return;
+    const files = Array.from(list);
+    const { accepted, rejected } = partitionFiles(files, { accept, maxSize, maxFiles, existing: items.length });
+    const max = maxSize !== void 0 ? formatFileSize(maxSize, locale) : "";
+    setMessages(rejected.map(({ file, reason }) => fillLabel(
+      reason === "type" ? labels.wrongType : reason === "size" ? labels.tooLarge : labels.tooMany,
+      { name: file.name, accept: accept ?? "", max: reason === "count" ? String(maxFiles) : max }
+    )));
+    setAnnounce(accepted.length ? fillLabel(labels.added, { count: accepted.length }) : "");
+    onFilesAdded(accepted, rejected);
+  };
+  const onDrop = (event) => {
+    event.preventDefault();
+    setOver(false);
+    take(event.dataTransfer?.files ?? null);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cx("uix-file-upload", className), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "uix-dropzone",
+        "data-dragover": over || void 0,
+        onDragOver: (event) => {
+          if (disabled) return;
+          event.preventDefault();
+          setOver(true);
+        },
+        onDragLeave: () => setOver(false),
+        onDrop,
+        onClick: (event) => {
+          if (event.target === event.currentTarget) inputRef.current?.click();
+        },
+        children: [
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M12 15V4M7 9l5-5 5 5M4 15v4a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-4" }) }),
+          /* @__PURE__ */ jsx("strong", { "aria-hidden": over || void 0, children: over ? labels.drop : labels.title }),
+          hint != null && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__hint", id: `${id}-hint`, children: hint }),
+          /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", disabled, "aria-describedby": hint != null ? `${id}-hint` : void 0, onClick: () => inputRef.current?.click(), children: labels.choose }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "file",
+              className: "uix-visually-hidden",
+              tabIndex: -1,
+              "aria-hidden": "true",
+              accept,
+              multiple,
+              capture,
+              disabled,
+              onChange: (event) => {
+                take(event.currentTarget.files);
+                event.currentTarget.value = "";
+              }
+            }
+          )
+        ]
+      }
+    ),
+    messages.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-file-upload__errors", role: "alert", children: messages.map((m, i) => /* @__PURE__ */ jsx("li", { children: m }, i)) }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announce }),
+    items.length > 0 && /* @__PURE__ */ jsx("ul", { className: "uix-filelist uix-file-upload__list", "aria-label": labels.list, children: items.map((item) => {
+      const statusText = item.status === "uploading" ? fillLabel(labels.uploading, { progress: item.progress ?? 0 }) : item.status === "done" ? labels.done : item.status === "error" ? labels.failed : labels.queued;
+      const image = !!item.previewUrl;
+      return /* @__PURE__ */ jsxs("li", { className: "uix-filelist__item uix-file-upload__item", "data-status": item.status, children: [
+        image ? /* @__PURE__ */ jsx("img", { className: "uix-file-upload__thumb", src: item.previewUrl, alt: "" }) : /* @__PURE__ */ jsx("span", { className: "uix-attachment__icon", children: /* @__PURE__ */ jsx(FileIcon, { name: item.name, type: item.type }) }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-file-upload__body", children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-file-upload__name", children: item.name }),
+          /* @__PURE__ */ jsxs("span", { className: "uix-file-upload__meta", children: [
+            /* @__PURE__ */ jsx("span", { children: formatFileSize(item.size, locale) }),
+            item.status !== "uploading" && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__status", children: statusText })
+          ] }),
+          item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.progress, indeterminate: item.progress === void 0, max: 100, label: statusText }),
+          item.status === "error" && item.error != null && /* @__PURE__ */ jsx("span", { className: "uix-file-upload__error", children: item.error }),
+          image && onAltChange && /* @__PURE__ */ jsx(Input, { size: "sm", "aria-label": fillLabel(labels.alt, { name: item.name }), placeholder: fillLabel(labels.alt, { name: item.name }), value: item.alt ?? "", onChange: (event) => onAltChange(item.id, event.currentTarget.value) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-file-upload__actions", children: [
+          item.status === "error" && onRetry && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", "aria-label": fillLabel(labels.retry, { name: item.name }), onClick: () => onRetry(item.id), children: labels.retryShort }),
+          onRemove && /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", variant: "ghost", icon: true, "aria-label": fillLabel(labels.remove, { name: item.name }), onClick: () => onRemove(item.id), 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 4l8 8M12 4l-8 8" }) }) })
+        ] })
+      ] }, item.id);
+    }) })
+  ] });
+}
+export {
+  DEFAULT_FILE_UPLOAD_LABELS,
+  FileUpload
+};

package/dist/components/FilterEditor.d.ts

@@ -0,0 +1,51 @@
+import * as react from 'react';
+import { TextFilterOperator, NumberFilterOperator, FilterField, FilterValue } from '../filter-model.js';
+
+interface FilterEditorLabels {
+    apply: string;
+    clear: string;
+    operator: string;
+    value: string;
+    from: string;
+    to: string;
+    /** Between two numbers: "and". */
+    and: string;
+    any: string;
+    yes: string;
+    no: string;
+    search: string;
+    searching: string;
+    noMatches: string;
+    searchFailed: string;
+    retry: string;
+    selectAll: string;
+    selectNone: string;
+    /** `{count}` chosen. */
+    selected: string;
+    /** Remove one chosen record. `{label}`. */
+    remove: string;
+    operators: Record<TextFilterOperator | NumberFilterOperator, string>;
+}
+declare const DEFAULT_FILTER_EDITOR_LABELS: FilterEditorLabels;
+interface FilterEditorProps {
+    field: FilterField;
+    /** Undefined means "not filtered yet". */
+    value: FilterValue | undefined;
+    onValueChange: (value: FilterValue) => void;
+    onApply: () => void;
+    onClear: () => void;
+    labels?: Partial<FilterEditorLabels>;
+    /** Show an option filter above an enum list once it has more options than this. Default 8. */
+    searchThreshold?: number;
+    /** Delay before a reference search runs, in ms. Default 250. */
+    searchDelay?: number;
+}
+/**
+ * Editor content for one typed column filter (HAR-1365; TENSOR C6, MOTUS C-1): an enum
+ * multi-select, text or number with a condition, a date range, yes/no, or records found by
+ * an async search. The product owns the popover trigger and the query; `summarizeFilter`
+ * turns the applied value into the chip text. `FilterPopover` stays for the one-string case.
+ */
+declare function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear, labels: labelOverrides, searchThreshold, searchDelay }: FilterEditorProps): react.JSX.Element;
+
+export { DEFAULT_FILTER_EDITOR_LABELS, FilterEditor, type FilterEditorLabels, type FilterEditorProps };

package/dist/components/FilterEditor.js

@@ -0,0 +1,175 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { Button } from "./Button.js";
+import { Checkbox } from "./Checkbox.js";
+import { Input } from "./Input.js";
+import { Radio, RadioGroup } from "./Radio.js";
+import { Select } from "./Select.js";
+import { Chip } from "./Chip.js";
+import { fillLabel } from "../fill-label.js";
+import { foldForSearch } from "../search-suggest-model.js";
+import { NUMBER_FILTER_OPERATORS, TEXT_FILTER_OPERATORS, emptyFilterValue } from "../filter-model.js";
+const DEFAULT_FILTER_EDITOR_LABELS = {
+  apply: "Apply",
+  clear: "Clear",
+  operator: "Condition",
+  value: "Value",
+  from: "From",
+  to: "To",
+  and: "and",
+  any: "Any",
+  yes: "Yes",
+  no: "No",
+  search: "Search",
+  searching: "Searching\u2026",
+  noMatches: "No matches.",
+  searchFailed: "Search failed.",
+  retry: "Try again",
+  selectAll: "Select all",
+  selectNone: "Clear selection",
+  selected: "{count} selected",
+  remove: "Remove {label}",
+  operators: {
+    contains: "contains",
+    "not-contains": "does not contain",
+    is: "is",
+    "is-not": "is not",
+    "starts-with": "starts with",
+    eq: "equals",
+    neq: "does not equal",
+    lt: "less than",
+    lte: "at most",
+    gt: "more than",
+    gte: "at least",
+    between: "between"
+  }
+};
+function FilterEditor({ field, value: valueProp, onValueChange, onApply, onClear, labels: labelOverrides, searchThreshold = 8, searchDelay = 250 }) {
+  const labels = { ...DEFAULT_FILTER_EDITOR_LABELS, ...labelOverrides, operators: { ...DEFAULT_FILTER_EDITOR_LABELS.operators, ...labelOverrides?.operators } };
+  const id = useId();
+  const value = valueProp?.kind === field.kind ? valueProp : emptyFilterValue(field.kind);
+  let body = null;
+  switch (value.kind) {
+    case "enum":
+      body = /* @__PURE__ */ jsx(EnumBody, { field, value, onChange: onValueChange, labels, threshold: searchThreshold });
+      break;
+    case "reference":
+      body = /* @__PURE__ */ jsx(ReferenceBody, { field, value, onChange: onValueChange, labels, delay: searchDelay });
+      break;
+    case "text": {
+      const ops = field.operators ?? TEXT_FILTER_OPERATORS;
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        ops.length > 1 && /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": labels.operator, value: value.operator, onChange: (e) => onValueChange({ ...value, operator: e.currentTarget.value }), children: ops.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: labels.operators[op] }, op)) }),
+        /* @__PURE__ */ jsx(Input, { "aria-label": labels.value, value: value.text, onChange: (e) => onValueChange({ ...value, text: e.currentTarget.value }), onKeyDown: (e) => {
+          if (e.key === "Enter") onApply();
+        }, autoFocus: true })
+      ] });
+      break;
+    }
+    case "number": {
+      const ops = field.operators ?? NUMBER_FILTER_OPERATORS;
+      const toNumber = (raw) => raw.trim() === "" ? void 0 : Number(raw);
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        ops.length > 1 && /* @__PURE__ */ jsx(Select, { size: "sm", "aria-label": labels.operator, value: value.operator, onChange: (e) => onValueChange({ ...value, operator: e.currentTarget.value }), children: ops.map((op) => /* @__PURE__ */ jsx("option", { value: op, children: labels.operators[op] }, op)) }),
+        /* @__PURE__ */ jsx(Input, { type: "number", inputMode: "decimal", "aria-label": value.operator === "between" ? labels.from : labels.value, value: value.value ?? "", onChange: (e) => onValueChange({ ...value, value: toNumber(e.currentTarget.value) }), autoFocus: true }),
+        value.operator === "between" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__and", children: labels.and }),
+          /* @__PURE__ */ jsx(Input, { type: "number", inputMode: "decimal", "aria-label": labels.to, value: value.to ?? "", onChange: (e) => onValueChange({ ...value, to: toNumber(e.currentTarget.value) }) })
+        ] }),
+        field.unit && /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__unit", children: field.unit })
+      ] });
+      break;
+    }
+    case "date-range":
+      body = /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__row", children: [
+        /* @__PURE__ */ jsxs("label", { className: "uix-filter-editor__date", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.from }),
+          /* @__PURE__ */ jsx(Input, { type: "date", value: value.from ?? "", max: value.to, onChange: (e) => onValueChange({ ...value, from: e.currentTarget.value || void 0 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "uix-filter-editor__date", children: [
+          /* @__PURE__ */ jsx("span", { children: labels.to }),
+          /* @__PURE__ */ jsx(Input, { type: "date", value: value.to ?? "", min: value.from, onChange: (e) => onValueChange({ ...value, to: e.currentTarget.value || void 0 }) })
+        ] })
+      ] });
+      break;
+    case "boolean": {
+      const pick = (v) => onValueChange({ kind: "boolean", value: v });
+      body = /* @__PURE__ */ jsxs(RadioGroup, { className: "uix-filter-editor__choices", children: [
+        /* @__PURE__ */ jsx(Radio, { name: `${id}-bool`, label: labels.any, checked: value.value === void 0, onChange: () => pick(void 0) }),
+        /* @__PURE__ */ jsx(Radio, { name: `${id}-bool`, label: field.trueLabel ?? labels.yes, checked: value.value === true, onChange: () => pick(true) }),
+        /* @__PURE__ */ jsx(Radio, { name: `${id}-bool`, label: field.falseLabel ?? labels.no, checked: value.value === false, onChange: () => pick(false) })
+      ] });
+      break;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover uix-filter-editor", role: "group", "aria-labelledby": `${id}-label`, "data-kind": field.kind, children: [
+    /* @__PURE__ */ jsx("div", { id: `${id}-label`, className: "uix-filter-editor__label", children: field.label }),
+    body,
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-popover__actions", children: [
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", onClick: onClear, children: labels.clear }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "primary", onClick: onApply, children: labels.apply })
+    ] })
+  ] });
+}
+function EnumBody({ field, value, onChange, labels, threshold }) {
+  const [query, setQuery] = useState("");
+  const options = field.options ?? [];
+  const shown = useMemo(() => {
+    const q = foldForSearch(query.trim()).text;
+    return q ? options.filter((o) => foldForSearch(o.label).text.includes(q)) : options;
+  }, [options, query]);
+  const selected = new Set(value.values);
+  const toggle = (v, on) => onChange({ kind: "enum", values: on ? [...value.values, v] : value.values.filter((x) => x !== v) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    options.length > threshold && /* @__PURE__ */ jsx(Input, { type: "search", size: "sm", "aria-label": labels.search, placeholder: labels.search, value: query, onChange: (e) => setQuery(e.currentTarget.value), autoFocus: true }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__bulk", children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-filter-editor__count", "aria-live": "polite", children: fillLabel(labels.selected, { count: value.values.length }) }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange({ kind: "enum", values: [.../* @__PURE__ */ new Set([...value.values, ...shown.map((o) => o.value)])] }), children: labels.selectAll }),
+      /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => onChange({ kind: "enum", values: [] }), children: labels.selectNone })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "uix-filter-editor__list", children: shown.length === 0 ? /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", children: labels.noMatches }) : shown.map((o) => /* @__PURE__ */ jsx(Checkbox, { label: o.label, checked: selected.has(o.value), onChange: (e) => toggle(o.value, e.currentTarget.checked) }, o.value)) })
+  ] });
+}
+function ReferenceBody({ field, value, onChange, labels, delay }) {
+  const [query, setQuery] = useState("");
+  const [state, setState] = useState({ status: "idle", results: [] });
+  const [attempt, setAttempt] = useState(0);
+  const latest = useRef(0);
+  useEffect(() => {
+    if (!field.onSearch) return;
+    const run = ++latest.current;
+    const timer = window.setTimeout(() => {
+      setState((s) => ({ ...s, status: "loading" }));
+      field.onSearch(query.trim()).then(
+        (results) => {
+          if (run === latest.current) setState({ status: "done", results });
+        },
+        () => {
+          if (run === latest.current) setState({ status: "error", results: [] });
+        }
+      );
+    }, delay);
+    return () => window.clearTimeout(timer);
+  }, [query, attempt, field, delay]);
+  const chosen = new Map(value.values.map((v) => [v.value, v]));
+  const toggle = (choice, on) => onChange({ kind: "reference", values: on ? [...value.values, choice] : value.values.filter((v) => v.value !== choice.value) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    value.values.length > 0 && /* @__PURE__ */ jsx("div", { className: "uix-chip-group", role: "group", "aria-label": fillLabel(labels.selected, { count: value.values.length }), children: value.values.map((v) => /* @__PURE__ */ jsx(Chip, { removeLabel: fillLabel(labels.remove, { label: v.label }), onRemove: () => toggle(v, false), children: v.label }, v.value)) }),
+    /* @__PURE__ */ jsx(Input, { type: "search", size: "sm", "aria-label": labels.search, placeholder: labels.search, value: query, onChange: (e) => setQuery(e.currentTarget.value), autoFocus: true }),
+    /* @__PURE__ */ jsxs("div", { className: "uix-filter-editor__list", "aria-busy": state.status === "loading" || void 0, children: [
+      state.status === "loading" && /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", role: "status", children: labels.searching }),
+      state.status === "error" && /* @__PURE__ */ jsxs("p", { className: "uix-filter-editor__note", role: "alert", children: [
+        labels.searchFailed,
+        " ",
+        /* @__PURE__ */ jsx(Button, { type: "button", variant: "link", size: "sm", onClick: () => setAttempt((n) => n + 1), children: labels.retry })
+      ] }),
+      state.status === "done" && state.results.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-filter-editor__note", children: labels.noMatches }),
+      state.status === "done" && state.results.map((r) => /* @__PURE__ */ jsx(Checkbox, { label: r.label, checked: chosen.has(r.value), onChange: (e) => toggle(r, e.currentTarget.checked) }, r.value))
+    ] })
+  ] });
+}
+export {
+  DEFAULT_FILTER_EDITOR_LABELS,
+  FilterEditor
+};

package/dist/components/Lightbox.d.ts

@@ -0,0 +1,45 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface LightboxItem {
+    src: string;
+    /** Alternative text for an image; the video's name for a video. */
+    alt: string;
+    caption?: ReactNode;
+    kind?: 'image' | 'video';
+    /** Intrinsic size, so an SVG or a slow image keeps its box. */
+    width?: number;
+    height?: number;
+}
+interface LightboxLabels {
+    region: string;
+    previous: string;
+    next: string;
+    close: string;
+    /** `{index}`, `{total}`. */
+    counter: string;
+    zoomIn: string;
+    zoomOut: string;
+}
+declare const DEFAULT_LIGHTBOX_LABELS: LightboxLabels;
+interface LightboxProps {
+    items: readonly LightboxItem[];
+    /** The item on show (0-based). */
+    index: number;
+    onIndexChange: (index: number) => void;
+    open: boolean;
+    onClose: () => void;
+    /** Wrap from the last item to the first. Default false. */
+    loop?: boolean;
+    labels?: Partial<LightboxLabels>;
+    className?: string;
+}
+/**
+ * A full-screen media viewer over `.uix-lightbox` (HAR-1367; TENSOR C12 `capture-viewer.tsx`,
+ * MOTUS C-8 programme gallery): previous/next buttons, ←/→ and Home/End, swipe on touch, an
+ * announced "n of total" counter, a caption, and a fit/actual-size toggle. Native `<dialog>`,
+ * so focus stays inside and Escape closes; focus returns to the control that opened it.
+ */
+declare function Lightbox({ items, index, onIndexChange, open, onClose, loop, labels: labelOverrides, className }: LightboxProps): react.JSX.Element;
+
+export { DEFAULT_LIGHTBOX_LABELS, Lightbox, type LightboxItem, type LightboxLabels, type LightboxProps };

package/dist/components/Lightbox.js

@@ -0,0 +1,102 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useDialog } from "../hooks/useDialog.js";
+const DEFAULT_LIGHTBOX_LABELS = {
+  region: "Media viewer",
+  previous: "Previous",
+  next: "Next",
+  close: "Close",
+  counter: "{index} of {total}",
+  zoomIn: "Show actual size",
+  zoomOut: "Fit to screen"
+};
+const Chevron = ({ dir }) => /* @__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: dir === "left" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" }) });
+function Lightbox({ items, index, onIndexChange, open, onClose, loop = false, labels: labelOverrides, className }) {
+  const labels = { ...DEFAULT_LIGHTBOX_LABELS, ...labelOverrides };
+  const ref = useDialog(open, onClose);
+  const closeRef = useRef(null);
+  const returnTo = useRef(null);
+  const swipe = useRef(null);
+  const [zoomed, setZoomed] = useState(false);
+  const total = items.length;
+  const current = items[Math.min(Math.max(index, 0), Math.max(total - 1, 0))];
+  const hasPrev = loop ? total > 1 : index > 0;
+  const hasNext = loop ? total > 1 : index < total - 1;
+  useEffect(() => {
+    if (open) {
+      returnTo.current = document.activeElement;
+      closeRef.current?.focus();
+    } else if (returnTo.current) {
+      returnTo.current.focus?.();
+      returnTo.current = null;
+    }
+  }, [open]);
+  useEffect(() => {
+    setZoomed(false);
+  }, [index]);
+  const go = (to) => {
+    if (total === 0) return;
+    const next = loop ? (to + total) % total : Math.min(Math.max(to, 0), total - 1);
+    if (next !== index) onIndexChange(next);
+  };
+  const onKeyDown = (event) => {
+    if (event.target.closest("video")) return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      go(index - 1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      go(index + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      go(0);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      go(total - 1);
+    }
+  };
+  const onPointerDown = (event) => {
+    if (event.pointerType !== "mouse") swipe.current = { x: event.clientX, id: event.pointerId };
+  };
+  const onPointerUp = (event) => {
+    const start = swipe.current;
+    swipe.current = null;
+    if (!start || start.id !== event.pointerId || zoomed) return;
+    const dx = event.clientX - start.x;
+    if (Math.abs(dx) > 48) go(index + (dx < 0 ? 1 : -1));
+  };
+  return /* @__PURE__ */ jsxs(
+    "dialog",
+    {
+      ref,
+      className: cx("uix-lightbox", "uix-lightbox--gallery", className),
+      "aria-label": labels.region,
+      onKeyDown,
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onClose();
+      },
+      children: [
+        current && /* @__PURE__ */ jsxs("figure", { className: "uix-lightbox__figure", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-lightbox__stage", "data-zoomed": zoomed || void 0, onPointerDown, onPointerUp, children: current.kind === "video" ? /* @__PURE__ */ jsx("video", { className: "uix-lightbox__media", src: current.src, controls: true, "aria-label": current.alt, width: current.width, height: current.height }) : /* @__PURE__ */ jsx("img", { className: "uix-lightbox__media", src: current.src, alt: current.alt, width: current.width, height: current.height }) }),
+          /* @__PURE__ */ jsxs("figcaption", { className: "uix-lightbox__bar", children: [
+            /* @__PURE__ */ jsx("span", { className: "uix-lightbox__counter", "aria-live": "polite", children: fillLabel(labels.counter, { index: index + 1, total }) }),
+            current.caption != null && /* @__PURE__ */ jsx("span", { className: "uix-lightbox__caption", children: current.caption }),
+            current.kind !== "video" && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__tool", "aria-pressed": zoomed, onClick: () => setZoomed((z) => !z), children: zoomed ? labels.zoomOut : labels.zoomIn })
+          ] })
+        ] }),
+        total > 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__nav uix-lightbox__nav--prev", "aria-label": labels.previous, disabled: !hasPrev, onClick: () => go(index - 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "left" }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "uix-lightbox__nav uix-lightbox__nav--next", "aria-label": labels.next, disabled: !hasNext, onClick: () => go(index + 1), children: /* @__PURE__ */ jsx(Chevron, { dir: "right" }) })
+        ] }),
+        /* @__PURE__ */ jsx("button", { ref: closeRef, type: "button", className: "uix-lightbox__close", "aria-label": labels.close, onClick: onClose, 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 4l8 8M12 4l-8 8" }) }) })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_LIGHTBOX_LABELS,
+  Lightbox
+};

package/dist/components/SearchSuggest.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { HTMLAttributes, ReactNode, Ref } from 'react';
+import { ReactNode, HTMLAttributes, Ref } from 'react';
 
 /** One result row. */
 interface SearchSuggestOption {
@@ -74,6 +74,10 @@ interface SearchSuggestProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
     autoFocus?: boolean;
     /** Form field name of the input. */
     name?: string;
+    /** Id of the input itself (for a `<label for>` / `Field htmlFor`); `id` stays on the wrapper. */
+    inputId?: string;
+    /** `aria-describedby` of the input (hint and error text from a `Field`). */
+    inputDescribedBy?: string;
 }
 /**
  * A search field with a suggestion list underneath: the "search and jump" pattern of Windows
@@ -82,6 +86,6 @@ interface SearchSuggestProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
  * (`aria-activedescendant`), Enter opens it (the first row when none is active), Escape closes the
  * list and a second Escape clears the text.
  */
-declare function SearchSuggest({ value, onValueChange, options, onSelect, label, placeholder, highlight, heading, headingAction, footer, loading, loadingLabel, empty, error, shortcutHint, clearLabel: clearLabelProp, status, size, open: openProp, strategy, onOpenChange, inputRef, autoFocus, name, className, onBlur, ...props }: SearchSuggestProps): react.JSX.Element;
+declare function SearchSuggest({ value, onValueChange, options, onSelect, label, placeholder, highlight, heading, headingAction, footer, loading, loadingLabel, empty, error, shortcutHint, clearLabel: clearLabelProp, status, size, open: openProp, strategy, onOpenChange, inputRef, autoFocus, name, inputId, inputDescribedBy, className, onBlur, ...props }: SearchSuggestProps): react.JSX.Element;
 
 export { SearchSuggest, type SearchSuggestAction, type SearchSuggestOption, type SearchSuggestProps };

package/dist/components/SearchSuggest.js

@@ -43,6 +43,8 @@ function SearchSuggest({
   inputRef,
   autoFocus,
   name,
+  inputId,
+  inputDescribedBy,
   className,
   onBlur,
   ...props
@@ -185,6 +187,8 @@ function SearchSuggest({
             "input",
             {
               ref: fieldRef,
+              id: inputId,
+              "aria-describedby": inputDescribedBy,
               className: "uix-input uix-search-suggest__input",
               type: "text",
               role: "combobox",

package/dist/file-model.d.ts

@@ -0,0 +1,37 @@
+/** File helpers shared by `FileUpload` and `Attachment` (HAR-984/985). Pure. */
+/** "1.2 MB", "340 KB", "12 B" in the locale's number format (base 1000, like file managers). */
+declare function formatFileSize(bytes: number, locale?: string): string;
+/** Whether a file matches an `accept` list (".pdf,image/*,application/zip"). An empty list accepts all. */
+declare function fileMatchesAccept(file: {
+    name: string;
+    type?: string;
+}, accept?: string): boolean;
+type FileRejectionReason = 'type' | 'size' | 'count';
+interface FileRejection<F = File> {
+    file: F;
+    reason: FileRejectionReason;
+}
+/**
+ * Splits picked files into accepted and rejected (wrong type, over `maxSize` bytes, or beyond
+ * `maxFiles` counting the `existing` ones). Order is kept.
+ */
+declare function partitionFiles<F extends {
+    name: string;
+    type?: string;
+    size: number;
+}>(files: readonly F[], { accept, maxSize, maxFiles, existing }: {
+    accept?: string;
+    maxSize?: number;
+    maxFiles?: number;
+    existing?: number;
+}): {
+    accepted: F[];
+    rejected: FileRejection<F>[];
+};
+/** A coarse kind for a file icon. */
+declare function fileKind(file: {
+    name: string;
+    type?: string;
+}): 'image' | 'video' | 'pdf' | 'sheet' | 'archive' | 'text' | 'other';
+
+export { type FileRejection, type FileRejectionReason, fileKind, fileMatchesAccept, formatFileSize, partitionFiles };

package/dist/file-model.js

@@ -0,0 +1,50 @@
+function formatFileSize(bytes, locale) {
+  if (!Number.isFinite(bytes) || bytes < 0) return "";
+  const units = ["B", "KB", "MB", "GB", "TB"];
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1e3 && unit < units.length - 1) {
+    value /= 1e3;
+    unit += 1;
+  }
+  const digits = unit === 0 || value >= 100 ? 0 : 1;
+  return `${new Intl.NumberFormat(locale, { maximumFractionDigits: digits, minimumFractionDigits: 0 }).format(value)} ${units[unit]}`;
+}
+function fileMatchesAccept(file, accept) {
+  if (!accept || !accept.trim()) return true;
+  const name = file.name.toLowerCase();
+  const type = (file.type ?? "").toLowerCase();
+  return accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean).some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+function partitionFiles(files, { accept, maxSize, maxFiles, existing = 0 }) {
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (!fileMatchesAccept(file, accept)) rejected.push({ file, reason: "type" });
+    else if (maxSize !== void 0 && file.size > maxSize) rejected.push({ file, reason: "size" });
+    else if (maxFiles !== void 0 && existing + accepted.length >= maxFiles) rejected.push({ file, reason: "count" });
+    else accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+function fileKind(file) {
+  const type = (file.type ?? "").toLowerCase();
+  const ext = file.name.toLowerCase().split(".").pop() ?? "";
+  if (type.startsWith("image/") || ["png", "jpg", "jpeg", "gif", "webp", "svg", "heic"].includes(ext)) return "image";
+  if (type.startsWith("video/") || ["mp4", "mov", "webm"].includes(ext)) return "video";
+  if (type === "application/pdf" || ext === "pdf") return "pdf";
+  if (["xls", "xlsx", "csv", "ods"].includes(ext) || type.includes("spreadsheet") || type === "text/csv") return "sheet";
+  if (["zip", "7z", "gz", "tar", "rar"].includes(ext) || type.includes("zip")) return "archive";
+  if (type.startsWith("text/") || ["txt", "md", "log", "json", "xml", "doc", "docx", "odt", "rtf"].includes(ext)) return "text";
+  return "other";
+}
+export {
+  fileKind,
+  fileMatchesAccept,
+  formatFileSize,
+  partitionFiles
+};