@tensor_1/react 2.30.0 → 2.31.0

package/README.md

@@ -377,3 +377,83 @@ markers). It pairs with `SchedulingCalendar`: same entry states, the same explic
 - **Keyboard:** one tab stop. ←/→ go to the previous or next bar in a lane, ↑/↓ to the nearest bar in the next lane, Home/End to the lane's ends, and Enter selects.
 - **Windows and markers:** `overlays` (`freeze`, `maintenance`, `blackout`; all lanes, or one with `laneId`), `markers` (a point in time) and `now` are drawn behind the bars and listed for screen readers.
 - Pure helpers are exported for tests and server code: `timelineTicks`, `placeSpan`, `layoutLane`, `shiftSpan`, `snapToStep`, `pixelsToMs`, `defaultTimelineStep`.
+
+### FilterEditor (typed column filters)
+
+`FilterEditor` is the content of one column-filter popover with a typed value (HAR-1365; TENSOR's
+`table-filter-editor.tsx`, MOTUS's "+ filter"). `summarizeFilter` turns the applied value into the chip text.
+`FilterPopover` stays for the single-string case.
+
+```tsx
+const field: FilterField = { id: 'state', label: t('state'), kind: 'enum', options: states };
+<Popover anchor={chipRef} popover="manual">
+  <FilterEditor field={field} value={draft} onValueChange={setDraft} onApply={() => apply(field.id, draft)} onClear={() => clear(field.id)} />
+</Popover>
+<Chip onClick={edit} onRemove={remove}>{summarizeFilter(field, applied, { formatDate: formatDisplayDate })}</Chip>
+```
+
+| `kind` | Value | Editor |
+|---|---|---|
+| `enum` | `{ values: string[] }` | checkboxes; a diacritic-insensitive search above more than `searchThreshold` (8) options; Select all / Clear selection |
+| `text` | `{ operator, text }` | condition (`contains`, `not-contains`, `is`, `is-not`, `starts-with`) + text; Enter applies |
+| `number` | `{ operator, value, to? }` | condition (`eq`…`gte`, `between`) + value(s), optional `unit` |
+| `date-range` | `{ from?, to? }` | two date fields that bound each other |
+| `boolean` | `{ value?: boolean }` | Any / Yes / No (`trueLabel`, `falseLabel`) |
+| `reference` | `{ values: { value, label }[] }` | `onSearch(query)` → records, debounced (`searchDelay`), with loading, empty and error (retry) states; chosen records as removable chips |
+
+`isFilterEmpty`, `emptyFilterValue`, the operator lists and all words (`labels`) are exported, and the value is plain
+data for your own query string. Stale search results are ignored.
+### EntityPicker
+
+A form field that holds one record found by an async search (HAR-1366; TENSOR's `entity-picker.tsx` and its
+person, incident and CI pickers; MOTUS's author filter). Built on `SearchSuggest`.
+
+```tsx
+<Field label={t('assignee')} htmlFor="assignee" hint={t('assigneeHint')}>
+  <EntityPicker id="assignee" name="assignee_id" label={t('assignee')} value={assignee} onValueChange={setAssignee}
+    onSearch={(q) => api.people.search(q)} labels={{ none: t('choosePerson') }} />
+</Field>
+```
+
+- **Chosen:** the record shows in the field (title plus its last breadcrumb, or `renderValue`), with a × named "Clear {title}". Choosing the field again opens a fresh search; Escape with an empty query returns to the record.
+- **Searching:** debounced (`delay`, 250 ms) from `minQueryLength` (0) characters, with loading, empty and error states. **Retry is a list row**, so arrow keys reach it. Stale results are ignored. Focus returns to the field after a choice.
+- **Forms:** `name` posts the chosen id in a hidden input; `id` and the `Field` hint and error wire to the active control. `SearchSuggest` gains `inputId` and `inputDescribedBy` for the same purpose.
+
+### Lightbox
+
+A full-screen media viewer (HAR-1367; TENSOR's capture viewer, MOTUS's programme gallery and photo zoom).
+
+```tsx
+<Lightbox items={photos.map((p) => ({ src: p.url, alt: p.alt, caption: p.caption, width: p.w, height: p.h }))}
+  index={index} onIndexChange={setIndex} open={open} onClose={() => setOpen(false)} />
+```
+
+- **Moving:** previous/next buttons, ←/→, Home/End and a swipe on touch (`loop` wraps). An announced "{index} of {total}" counter and the caption sit under the media.
+- **Size:** "Show actual size" switches between fitted and natural size; the stage scrolls when zoomed.
+- **Video:** `kind: 'video'` renders a native player, which keeps its own arrow keys.
+- **Dialog:** native `<dialog>`. Focus starts on Close, Escape and a backdrop click close it, and focus returns to the opener. Every word is in `labels`.
+- **Image size:** pass `width` and `height` so an SVG or a slow image keeps its box.
+
+### FileUpload and Attachment
+
+`FileUpload` is a drop zone, file picker and upload list (HAR-984; TENSOR's attachment panel, MOTUS's photo intake). `Attachment` is a row for a file that is already stored (HAR-985).
+
+```tsx
+<FileUpload items={uploads} accept=".pdf,image/*" maxSize={20_000_000} maxFiles={10}
+  hint="PDF or photos, up to 20 MB"
+  onFilesAdded={(accepted) => accepted.forEach(startUpload)}
+  onRetry={retryUpload} onRemove={removeUpload} />
+
+<AttachmentList label={`Attachments (${files.length})`}>
+  {files.map((f) => (
+    <Attachment key={f.id} name={f.name} size={f.size} type={f.type} href={f.url} download
+      meta={`${f.addedBy} · ${f.addedAt}`} onRemove={() => confirmRemove(f)} />
+  ))}
+</AttachmentList>
+```
+
+- **The product uploads.** `onFilesAdded(accepted, rejected)` gets the files that passed `accept`, `maxSize` and `maxFiles` (counting `items`). Report progress, success and failure back through `items` (`status`, `progress`, `error`). Rejected files are listed in an alert, one sentence each.
+- **Keyboard:** "Choose files" is a real button, described by the `hint`. Dropping is an extra, not the only way in. `capture` opens the camera on phones.
+- **List:** each file shows its size and status. Uploads show a progress bar (indeterminate without `progress`), and failures show the reason and a Retry button. `previewUrl` shows a thumbnail, and `onAltChange` asks for alt text on images.
+- **Attachment:** the name is the link (`href`, `download`, `renderLink`). It has a quieter `meta` line, a `state` slot (e.g. a "Scanning" `StatusPill`), `actions`, `onRemove`, and `status` `loading` | `error` | `forbidden` (no link, and the reason shown). It's server-renderable.
+- Pure helpers: `formatFileSize`, `fileMatchesAccept`, `partitionFiles`, `fileKind`.

package/dist/components/Attachment.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { LiHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
+import { UixRenderLink } from '../link.js';
+
+interface AttachmentLabels {
+    /** Remove button. `{name}`. */
+    remove: string;
+    /** Download link name when `download` is set. `{name}`. */
+    download: string;
+    loading: string;
+    forbidden: string;
+}
+declare const DEFAULT_ATTACHMENT_LABELS: AttachmentLabels;
+interface AttachmentProps extends Omit<LiHTMLAttributes<HTMLLIElement>, 'children'> {
+    /** File name as the user should read it (decrypted, if the product stores it encrypted). */
+    name: string;
+    /** Bytes. */
+    size?: number;
+    /** MIME type, for the file glyph. */
+    type?: string;
+    /** Opens or downloads the file. The name becomes the link. */
+    href?: string;
+    /** Download instead of opening; a string sets the saved file name. */
+    download?: boolean | string;
+    renderLink?: UixRenderLink;
+    /** A quieter line: who added it and when. */
+    meta?: ReactNode;
+    /** A state slot after the name, e.g. `<StatusPill tone="warning">Scanning</StatusPill>`. */
+    state?: ReactNode;
+    /** Replaces the file glyph (e.g. an image thumbnail). */
+    thumbnail?: ReactNode;
+    /** Adds a remove button; confirm destructive removals in the handler (`ConfirmDialog`/`Popconfirm`). */
+    onRemove?: () => void;
+    /** `loading` (no link yet), `error` (shows `error`), `forbidden` (no link, a reason). */
+    status?: 'ready' | 'loading' | 'error' | 'forbidden';
+    error?: ReactNode;
+    /** Extra actions at the end of the row. */
+    actions?: ReactNode;
+    locale?: string;
+    labels?: Partial<AttachmentLabels>;
+}
+/**
+ * One file row (HAR-985; TENSOR C15/B12 `attachments-panel-view.tsx`, MEDx S19/S52): glyph or
+ * thumbnail, the name as a link, size and meta, a state slot, and remove. Server-renderable.
+ */
+declare function Attachment({ name, size, type, href, download, renderLink, meta, state, thumbnail, onRemove, status, error, actions, locale, labels: labelOverrides, className, ...props }: AttachmentProps): react.JSX.Element;
+interface AttachmentListProps extends HTMLAttributes<HTMLUListElement> {
+    /** Names the list, e.g. "Attachments (3)". */
+    label?: string;
+    children?: ReactNode;
+}
+/** A list of `Attachment` rows. */
+declare function AttachmentList({ label, className, children, ...props }: AttachmentListProps): react.JSX.Element;
+
+export { Attachment, type AttachmentLabels, AttachmentList, type AttachmentListProps, type AttachmentProps, DEFAULT_ATTACHMENT_LABELS };

package/dist/components/Attachment.js

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { formatFileSize } from "../file-model.js";
+import { renderUixLink } from "../link.js";
+import { Button } from "./Button.js";
+import { FileIcon } from "./FileIcon.js";
+const DEFAULT_ATTACHMENT_LABELS = {
+  remove: "Remove {name}",
+  download: "Download {name}",
+  loading: "Loading\u2026",
+  forbidden: "You do not have access to this file."
+};
+function Attachment({
+  name,
+  size,
+  type,
+  href,
+  download,
+  renderLink,
+  meta,
+  state,
+  thumbnail,
+  onRemove,
+  status = "ready",
+  error,
+  actions,
+  locale,
+  labels: labelOverrides,
+  className,
+  ...props
+}) {
+  const labels = { ...DEFAULT_ATTACHMENT_LABELS, ...labelOverrides };
+  const linked = href != null && status !== "loading" && status !== "forbidden";
+  const nameNode = linked ? renderUixLink(renderLink, {
+    href,
+    className: "uix-attachment__name",
+    children: name,
+    ...download ? { download: typeof download === "string" ? download : "", "aria-label": fillLabel(labels.download, { name }) } : {}
+  }) : /* @__PURE__ */ jsx("span", { className: "uix-attachment__name", children: name });
+  return /* @__PURE__ */ jsxs("li", { className: cx("uix-attachment", className), "data-status": status === "ready" ? void 0 : status, "aria-busy": status === "loading" || void 0, ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "uix-attachment__icon", "aria-hidden": "true", children: thumbnail ?? /* @__PURE__ */ jsx(FileIcon, { name, type }) }),
+    /* @__PURE__ */ jsxs("span", { className: "uix-attachment__body", children: [
+      /* @__PURE__ */ jsxs("span", { className: "uix-attachment__line", children: [
+        nameNode,
+        state != null && /* @__PURE__ */ jsx("span", { className: "uix-attachment__state", children: state })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "uix-attachment__meta", children: [
+        size !== void 0 && /* @__PURE__ */ jsx("span", { className: "uix-attachment__size", children: formatFileSize(size, locale) }),
+        meta != null && /* @__PURE__ */ jsx("span", { children: meta }),
+        status === "loading" && /* @__PURE__ */ jsx("span", { children: labels.loading }),
+        status === "forbidden" && /* @__PURE__ */ jsx("span", { children: labels.forbidden })
+      ] }),
+      status === "error" && error != null && /* @__PURE__ */ jsx("span", { className: "uix-attachment__error", role: "alert", children: error })
+    ] }),
+    (actions != null || onRemove) && /* @__PURE__ */ jsxs("span", { className: "uix-attachment__actions", children: [
+      actions,
+      onRemove && /* @__PURE__ */ jsx(Button, { type: "button", size: "xs", variant: "ghost", icon: true, "aria-label": fillLabel(labels.remove, { name }), onClick: onRemove, 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: "M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14" }) }) })
+    ] })
+  ] });
+}
+function AttachmentList({ label, className, children, ...props }) {
+  return /* @__PURE__ */ jsx("ul", { className: cx("uix-attachments", "uix-attachments--list", className), "aria-label": label, ...props, children });
+}
+export {
+  Attachment,
+  AttachmentList,
+  DEFAULT_ATTACHMENT_LABELS
+};

package/dist/components/EntityPicker.d.ts

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { SearchSuggestOption } from './SearchSuggest.js';
+
+interface EntityPickerLabels {
+    /** Accessible name of the search field while picking. */
+    search: string;
+    loading: string;
+    empty: string;
+    error: string;
+    retry: string;
+    /** Clears the chosen record. `{title}`. */
+    clear: string;
+    /** Names the chosen-record button that reopens the search. `{label}`, `{title}`. */
+    change: string;
+    /** Shown in the field when nothing is chosen. */
+    none: string;
+    /** Polite count after a search. `{count}`. */
+    results: string;
+}
+declare const DEFAULT_ENTITY_PICKER_LABELS: EntityPickerLabels;
+interface EntityPickerProps {
+    /** The chosen record, or null. */
+    value: SearchSuggestOption | null;
+    onValueChange: (next: SearchSuggestOption | null) => void;
+    /** Finds records for the query; a rejection shows the error state with a Retry row. */
+    onSearch: (query: string) => Promise<readonly SearchSuggestOption[]>;
+    /** The field's name (the visible label usually comes from a surrounding `Field`). */
+    label: string;
+    /** Id of the control, for `Field htmlFor`/`label for`. */
+    id?: string;
+    /** Hidden form value: the chosen record's id. */
+    name?: string;
+    placeholder?: string;
+    /** Search only from this many characters. Default 0 (an empty query lists suggestions). */
+    minQueryLength?: number;
+    /** Debounce before searching, in ms. Default 250. */
+    delay?: number;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Ids of hint/error text (from `Field`). */
+    'aria-describedby'?: string;
+    /** How the chosen record shows in the field. Default: title, then the last breadcrumb. */
+    renderValue?: (option: SearchSuggestOption) => ReactNode;
+    labels?: Partial<EntityPickerLabels>;
+    className?: string;
+}
+/**
+ * A form field that holds one record found by an async search (HAR-1366; TENSOR B28/C5
+ * `entity-picker.tsx`, MOTUS B-P10): the chosen record shows as the field's value with a
+ * clear ×; choosing again or typing opens a `SearchSuggest` list with loading, empty and error
+ * states, and Retry is a list row, so the keyboard reaches it. Stale results are ignored.
+ */
+declare function EntityPicker({ value, onValueChange, onSearch, label, id, name, placeholder, minQueryLength, delay, disabled, invalid, 'aria-describedby': describedBy, renderValue, labels: labelOverrides, className, }: EntityPickerProps): react.JSX.Element;
+
+export { DEFAULT_ENTITY_PICKER_LABELS, EntityPicker, type EntityPickerLabels, type EntityPickerProps };

package/dist/components/EntityPicker.js

@@ -0,0 +1,168 @@
+"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 { SearchSuggest } from "./SearchSuggest.js";
+const DEFAULT_ENTITY_PICKER_LABELS = {
+  search: "Search",
+  loading: "Searching\u2026",
+  empty: "No matches.",
+  error: "Search failed.",
+  retry: "Try again",
+  clear: "Clear {title}",
+  change: "{label}: {title}. Change",
+  none: "Choose\u2026",
+  results: "{count} results"
+};
+function EntityPicker({
+  value,
+  onValueChange,
+  onSearch,
+  label,
+  id,
+  name,
+  placeholder,
+  minQueryLength = 0,
+  delay = 250,
+  disabled,
+  invalid,
+  "aria-describedby": describedBy,
+  renderValue,
+  labels: labelOverrides,
+  className
+}) {
+  const labels = { ...DEFAULT_ENTITY_PICKER_LABELS, ...labelOverrides };
+  const [editing, setEditing] = useState(value == null);
+  const [query, setQuery] = useState("");
+  const [results, setResults] = useState([]);
+  const [status, setStatus] = useState("idle");
+  const [attempt, setAttempt] = useState(0);
+  const latest = useRef(0);
+  const inputRef = useRef(null);
+  const valueButtonRef = useRef(null);
+  const returnFocus = useRef(false);
+  useEffect(() => {
+    if (value) setEditing(false);
+    else setEditing(true);
+  }, [value?.id]);
+  useEffect(() => {
+    if (!editing || disabled) return;
+    const q = query.trim();
+    if (q.length < minQueryLength) {
+      setStatus("idle");
+      setResults([]);
+      return;
+    }
+    const run = ++latest.current;
+    const timer = window.setTimeout(() => {
+      setStatus("loading");
+      onSearch(q).then(
+        (found) => {
+          if (run === latest.current) {
+            setResults(found);
+            setStatus("done");
+          }
+        },
+        () => {
+          if (run === latest.current) {
+            setResults([]);
+            setStatus("error");
+          }
+        }
+      );
+    }, delay);
+    return () => window.clearTimeout(timer);
+  }, [editing, query, attempt, minQueryLength, delay, disabled]);
+  useEffect(() => {
+    if (!returnFocus.current) return;
+    returnFocus.current = false;
+    (editing ? inputRef.current : valueButtonRef.current)?.focus();
+  }, [editing]);
+  const startEditing = () => {
+    setQuery("");
+    returnFocus.current = true;
+    setEditing(true);
+  };
+  const choose = (option) => {
+    onValueChange(option);
+    returnFocus.current = true;
+    setEditing(false);
+  };
+  const clear = () => {
+    onValueChange(null);
+    returnFocus.current = true;
+    setEditing(true);
+  };
+  const hidden = name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: value?.id ?? "" }) : null;
+  if (!editing && value) {
+    const shown = renderValue?.(value) ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "uix-entity-picker__title", children: value.title }),
+      value.meta?.length ? /* @__PURE__ */ jsx("span", { className: "uix-entity-picker__meta", children: value.meta[value.meta.length - 1] }) : null
+    ] });
+    return /* @__PURE__ */ jsxs("div", { className: cx("uix-entity-picker", className), "data-invalid": invalid || void 0, children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref: valueButtonRef,
+          id,
+          type: "button",
+          className: "uix-input uix-entity-picker__value",
+          "aria-label": fillLabel(labels.change, { label, title: value.title }),
+          "aria-describedby": describedBy,
+          "aria-invalid": invalid || void 0,
+          disabled,
+          onClick: startEditing,
+          children: [
+            value.icon != null && /* @__PURE__ */ jsx("span", { className: "uix-entity-picker__icon", "aria-hidden": "true", children: value.icon }),
+            /* @__PURE__ */ jsx("span", { className: "uix-entity-picker__text", children: shown })
+          ]
+        }
+      ),
+      !disabled && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-entity-picker__clear", "aria-label": fillLabel(labels.clear, { title: value.title }), onClick: clear, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) }) }),
+      hidden
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("uix-entity-picker", "uix-entity-picker--editing", className),
+      "data-invalid": invalid || void 0,
+      onKeyDown: (event) => {
+        if (event.key === "Escape" && value && !query) {
+          event.preventDefault();
+          returnFocus.current = true;
+          setEditing(false);
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SearchSuggest,
+          {
+            inputId: id,
+            inputDescribedBy: describedBy,
+            inputRef,
+            value: query,
+            onValueChange: setQuery,
+            options: status === "done" ? results : [],
+            onSelect: (_, option) => choose(option),
+            label: `${label}. ${labels.search}`,
+            placeholder: placeholder ?? labels.none,
+            loading: status === "loading",
+            loadingLabel: labels.loading,
+            empty: labels.empty,
+            error: status === "error" ? labels.error : void 0,
+            footer: status === "error" ? { label: labels.retry, onSelect: () => setAttempt((n) => n + 1) } : void 0,
+            status: status === "done" ? fillLabel(labels.results, { count: results.length }) : void 0,
+            strategy: "fixed"
+          }
+        ),
+        hidden
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_ENTITY_PICKER_LABELS,
+  EntityPicker
+};

package/dist/components/FileIcon.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+/** A decorative glyph for a file's kind (Lucide-style strokes). Internal to FileUpload and Attachment. */
+declare function FileIcon({ name, type }: {
+    name: string;
+    type?: string;
+}): react.JSX.Element;
+
+export { FileIcon };

package/dist/components/FileIcon.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { fileKind } from "../file-model.js";
+const PATHS = {
+  image: "M4 4h16v16H4zM8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM20 15l-5-5L4 20",
+  video: "M4 6h12v12H4zM16 10l4-2v8l-4-2",
+  pdf: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5M8 13h8M8 17h5",
+  sheet: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5M8 12h8M8 16h8M12 12v8",
+  archive: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5M10 6h1M10 9h1M10 12h1M10 15h1v3h-1z",
+  text: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5M8 13h8M8 17h8",
+  other: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8zM14 3v5h5"
+};
+function FileIcon({ name, type }) {
+  return /* @__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: PATHS[fileKind({ name, type })] }) });
+}
+export {
+  FileIcon
+};

package/dist/components/FileUpload.d.ts

@@ -0,0 +1,87 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { FileRejection } from '../file-model.js';
+
+type FileUploadStatus = 'queued' | 'uploading' | 'done' | 'error';
+interface FileUploadItem {
+    id: string;
+    name: string;
+    /** Bytes. */
+    size: number;
+    type?: string;
+    status: FileUploadStatus;
+    /** 0–100 while uploading; without it the bar is indeterminate. */
+    progress?: number;
+    /** Why it failed (shown under the name with a Retry button). */
+    error?: ReactNode;
+    /** An object URL or remote URL for an image thumbnail. */
+    previewUrl?: string;
+    /** Alternative text, when the product asks for it (`onAltChange`). */
+    alt?: string;
+}
+interface FileUploadLabels {
+    /** Main line of the drop zone. */
+    title: string;
+    choose: string;
+    /** Shown while a file is dragged over. */
+    drop: string;
+    list: string;
+    remove: string;
+    /** Accessible name of Retry. `{name}`. */
+    retry: string;
+    /** Visible text of Retry. */
+    retryShort: string;
+    queued: string;
+    /** `{progress}`. */
+    uploading: string;
+    done: string;
+    failed: string;
+    /** `{name}` — set `alt` for images. */
+    alt: string;
+    /** `{count}` files added. */
+    added: string;
+    /** `{name}`, `{accept}`. */
+    wrongType: string;
+    /** `{name}`, `{max}`. */
+    tooLarge: string;
+    /** `{name}`, `{max}`. */
+    tooMany: string;
+}
+declare const DEFAULT_FILE_UPLOAD_LABELS: FileUploadLabels;
+interface FileUploadProps {
+    /** The files so far, with their upload state (controlled). */
+    items: readonly FileUploadItem[];
+    /**
+     * Called with the files that passed `accept`, `maxSize` and `maxFiles`, and the ones that did
+     * not. Add accepted files to `items` and upload them; the component never uploads.
+     */
+    onFilesAdded: (accepted: File[], rejected: FileRejection[]) => void;
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    /** Ask for alt text on image items (MOTUS photo intake). */
+    onAltChange?: (id: string, alt: string) => void;
+    /** Accepted types, as for `<input accept>`. */
+    accept?: string;
+    /** Largest file in bytes. */
+    maxSize?: number;
+    /** Most files in `items`. */
+    maxFiles?: number;
+    /** Default true. */
+    multiple?: boolean;
+    /** Open the camera on phones (`user` or `environment`). */
+    capture?: 'user' | 'environment';
+    disabled?: boolean;
+    /** Second line of the drop zone, e.g. "PDF or images, up to 20 MB". */
+    hint?: ReactNode;
+    locale?: string;
+    labels?: Partial<FileUploadLabels>;
+    className?: string;
+}
+/**
+ * Drop zone, file picker and upload list (HAR-984; TENSOR C15, MOTUS C-7, MEDx S18/S19). The
+ * product owns the upload: it receives validated `File`s and reports progress, success and
+ * failure through `items`. Keyboard users get a real button; drop is an extra, not the only way.
+ */
+declare function FileUpload({ items, onFilesAdded, onRemove, onRetry, onAltChange, accept, maxSize, maxFiles, multiple, capture, disabled, hint, locale, labels: labelOverrides, className, }: FileUploadProps): react.JSX.Element;
+
+export { DEFAULT_FILE_UPLOAD_LABELS, FileUpload, type FileUploadItem, type FileUploadLabels, type FileUploadProps, type FileUploadStatus };