@tensor_1/react 2.30.0 → 2.32.0

package/dist/components/DateRangePicker.js

@@ -16,6 +16,7 @@ const DEFAULT_DATE_RANGE_PICKER_LABELS = {
   rangeEnd: "end of selected range",
   inRange: "in selected range"
 };
+const localDateKey = (now = /* @__PURE__ */ new Date()) => `${now.getFullYear().toString().padStart(4, "0")}-${(now.getMonth() + 1).toString().padStart(2, "0")}-${now.getDate().toString().padStart(2, "0")}`;
 const monthLabel = (date, locale) => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
 const dateLabel = (date, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }).format(/* @__PURE__ */ new Date(`${date}T00:00:00Z`));
 const weekdayNames = (locale) => {
@@ -37,7 +38,8 @@ function DateRangePicker({
   invalidMessage = "The selected date range is invalid.",
   disabled,
   className,
-  labels: labelOverrides
+  labels: labelOverrides,
+  today
 }) {
   const id = useId();
   const uixLabels = useUixLabels();
@@ -53,6 +55,7 @@ function DateRangePicker({
     const month = startOfMonth(addCalendarMonths(visibleMonth, index));
     return { month, days: buildMonthGrid(month).filter((day) => day.inMonth) };
   }), [visibleMonth, count]);
+  const todayDate = today === void 0 ? localDateKey() : today;
   const rangeInvalid = invalid || !!value.start && !!value.end && value.start > value.end;
   useEffect(() => {
     const first = calendars[0]?.days[0]?.date;
@@ -123,6 +126,7 @@ function DateRangePicker({
               "data-in-range": isDateInRange(day.date, value) || void 0,
               "aria-pressed": edge != null || isDateInRange(day.date, value),
               "aria-label": `${dateLabel(day.date, locale)}${edge ? `, ${edge === "start" ? labels.rangeStart : labels.rangeEnd}` : isDateInRange(day.date, value) ? `, ${labels.inRange}` : ""}`,
+              "aria-current": day.date === todayDate ? "date" : void 0,
               tabIndex: activeDate === day.date ? 0 : -1,
               disabled: unavailable,
               onFocus: () => setActiveDate(day.date),

package/dist/components/DescriptionList.d.ts

@@ -26,6 +26,10 @@ interface DescriptionListItem {
     id?: string;
     term: ReactNode;
     description: ReactNode;
+    /** Attributes for this row's `<dt>` (an `id` to anchor to, `data-*`). */
+    termProps?: HTMLAttributes<HTMLElement>;
+    /** Attributes for this row's `<dd>`. */
+    descriptionProps?: HTMLAttributes<HTMLElement>;
 }
 interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
     items?: DescriptionListItem[];
@@ -35,12 +39,19 @@ declare function DescriptionList({ items, children, className, ...props }: Descr
 interface DescriptionItemProps {
     term: ReactNode;
     children?: ReactNode;
+    /**
+     * Attributes for the `<dt>`: an `id` a deep link or `aria-describedby` points at, `data-*`,
+     * a `className` (HAR-1628). The pair has no wrapper element, so this is where they go.
+     */
+    termProps?: HTMLAttributes<HTMLElement>;
+    /** Attributes for the `<dd>`. */
+    descriptionProps?: HTMLAttributes<HTMLElement>;
 }
 /**
  * One hand-authored row. Renders a `<dt>`/`<dd>` fragment so the pair lands as
  * direct grid children of the enclosing `<DescriptionList>` (never wrap it in
  * an element — that breaks the two-column alignment).
  */
-declare function DescriptionItem({ term, children }: DescriptionItemProps): react.JSX.Element;
+declare function DescriptionItem({ term, children, termProps, descriptionProps }: DescriptionItemProps): react.JSX.Element;
 
 export { DescriptionItem, type DescriptionItemProps, DescriptionList, type DescriptionListItem, type DescriptionListProps };

package/dist/components/DescriptionList.js

@@ -4,16 +4,16 @@ import { cx } from "../cx.js";
 function DescriptionList({ items, children, className, ...props }) {
   return /* @__PURE__ */ jsxs("dl", { className: cx("uix-dl", className), ...props, children: [
     items?.map((item, i) => /* @__PURE__ */ jsxs(Fragment2, { children: [
-      /* @__PURE__ */ jsx("dt", { children: item.term }),
-      /* @__PURE__ */ jsx("dd", { children: item.description })
+      /* @__PURE__ */ jsx("dt", { ...item.termProps, children: item.term }),
+      /* @__PURE__ */ jsx("dd", { ...item.descriptionProps, children: item.description })
     ] }, item.id ?? i)),
     children
   ] });
 }
-function DescriptionItem({ term, children }) {
+function DescriptionItem({ term, children, termProps, descriptionProps }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("dt", { children: term }),
-    /* @__PURE__ */ jsx("dd", { children })
+    /* @__PURE__ */ jsx("dt", { ...termProps, children: term }),
+    /* @__PURE__ */ jsx("dd", { ...descriptionProps, children })
   ] });
 }
 export {

package/dist/components/Dialogs.d.ts

@@ -8,7 +8,8 @@ interface ConfirmDialogProps {
     description?: ReactNode;
     confirmLabel: ReactNode;
     cancelLabel: ReactNode;
-    closeLabel: string;
+    /** Accessible name of the close button. Default: `UixLabelsProvider` `modal.close`, then "Close dialog". */
+    closeLabel?: string;
     onConfirm: () => void | Promise<void>;
     onCancel: () => void;
     pending?: boolean;
@@ -75,12 +76,32 @@ interface PromptDialogProps {
     placeholder?: string;
     submitLabel: ReactNode;
     cancelLabel: ReactNode;
-    closeLabel: string;
+    /** Accessible name of the close button. Default: `UixLabelsProvider` `modal.close`, then "Close dialog". */
+    closeLabel?: string;
     onSubmit: (value: string) => void | Promise<void>;
     onCancel: () => void;
     validate?: (value: string) => ReactNode | undefined;
     pending?: boolean;
+    /**
+     * Ask for a longer answer in a textarea (a reason, a note); a number sets its rows, `true`
+     * is 4. Enter adds a line there, so the form is sent with the submit button or Ctrl/⌘+Enter
+     * (HAR-1614).
+     */
+    multiline?: boolean | number;
+    /**
+     * The answer confirms something that cannot be taken back (a forced import): the submit
+     * button is the danger button and the dialog is an `alertdialog`.
+     */
+    destructive?: boolean;
+    /**
+     * Why the last submit failed, from the server. Shown under the field (`role="alert"`) and
+     * tied to it; the dialog stays open. A message from `validate` takes its place while the
+     * value is invalid.
+     */
+    error?: ReactNode;
+    /** Default: `'alertdialog'` when `destructive`, else `'dialog'`. */
+    role?: 'dialog' | 'alertdialog';
 }
-declare function PromptDialog({ open, title, description, inputLabel, defaultValue, placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }: PromptDialogProps): react.JSX.Element;
+declare function PromptDialog({ open, title, description, inputLabel, defaultValue, placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending, multiline, destructive, error: submitError, role, }: PromptDialogProps): react.JSX.Element;
 
 export { ConfirmDialog, type ConfirmDialogProps, Popconfirm, type PopconfirmProps, PromptDialog, type PromptDialogProps };

package/dist/components/Dialogs.js

@@ -4,6 +4,7 @@ import { useEffect, useId, useRef, useState } from "react";
 import { Button } from "./Button.js";
 import { Input } from "./Input.js";
 import { Modal } from "./Modal.js";
+import { Textarea } from "./Textarea.js";
 import { Popover } from "./Popover.js";
 import { fillLabel } from "../fill-label.js";
 import { resolveAnchor } from "../hooks/useAnchoredPosition.js";
@@ -181,33 +182,90 @@ function Popconfirm({
     }
   );
 }
-function PromptDialog({ open, title, description, inputLabel, defaultValue = "", placeholder, submitLabel, cancelLabel, closeLabel, onSubmit, onCancel, validate, pending }) {
+function PromptDialog({
+  open,
+  title,
+  description,
+  inputLabel,
+  defaultValue = "",
+  placeholder,
+  submitLabel,
+  cancelLabel,
+  closeLabel,
+  onSubmit,
+  onCancel,
+  validate,
+  pending,
+  multiline = false,
+  destructive = false,
+  error: submitError,
+  role
+}) {
   const inputId = useId();
   const errorId = `${inputId}-error`;
+  const descriptionId = `${inputId}-description`;
+  const formRef = useRef(null);
+  const fieldRef = useRef(null);
   const [value, setValue] = useState(defaultValue);
-  const [error, setError] = useState();
+  const [issue, setIssue] = useState();
+  const error = issue ?? submitError;
+  useEffect(() => {
+    if (open) fieldRef.current?.focus();
+  }, [open]);
   useEffect(() => {
     if (open) {
       setValue(defaultValue);
-      setError(void 0);
+      setIssue(void 0);
     }
   }, [defaultValue, open]);
   const handleSubmit = (event) => {
     event.preventDefault();
-    const issue = validate?.(value);
-    setError(issue);
-    if (issue == null) void onSubmit(value);
+    const found = validate?.(value);
+    setIssue(found);
+    if (found == null) void onSubmit(value);
   };
-  return /* @__PURE__ */ jsx(Modal, { open, onClose: onCancel, title, closeLabel, children: /* @__PURE__ */ jsxs("form", { className: "uix-prompt", onSubmit: handleSubmit, children: [
-    description != null && /* @__PURE__ */ jsx("div", { children: description }),
-    /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: inputId, children: inputLabel }),
-    /* @__PURE__ */ jsx(Input, { id: inputId, value, placeholder, "aria-describedby": error ? errorId : void 0, invalid: error != null, onChange: (event) => setValue(event.currentTarget.value), autoFocus: true }),
-    error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
-    /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
-      /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", loading: pending, children: submitLabel })
-    ] })
-  ] }) });
+  const field = {
+    id: inputId,
+    value,
+    placeholder,
+    "aria-describedby": error != null ? errorId : void 0,
+    invalid: error != null,
+    ref: fieldRef
+  };
+  return /* @__PURE__ */ jsx(
+    Modal,
+    {
+      open,
+      onClose: onCancel,
+      title,
+      closeLabel,
+      role: role ?? (destructive ? "alertdialog" : "dialog"),
+      "aria-describedby": description != null ? descriptionId : void 0,
+      children: /* @__PURE__ */ jsxs("form", { ref: formRef, className: "uix-prompt", onSubmit: handleSubmit, children: [
+        description != null && /* @__PURE__ */ jsx("div", { id: descriptionId, children: description }),
+        /* @__PURE__ */ jsx("label", { className: "uix-field__label", htmlFor: inputId, children: inputLabel }),
+        multiline ? /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            ...field,
+            rows: typeof multiline === "number" ? multiline : 4,
+            onChange: (event) => setValue(event.currentTarget.value),
+            onKeyDown: (event) => {
+              if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
+                event.preventDefault();
+                formRef.current?.requestSubmit();
+              }
+            }
+          }
+        ) : /* @__PURE__ */ jsx(Input, { ...field, onChange: (event) => setValue(event.currentTarget.value) }),
+        error != null && /* @__PURE__ */ jsx("div", { id: errorId, className: "uix-field__error", role: "alert", children: error }),
+        /* @__PURE__ */ jsxs("div", { className: "uix-dialog__footer uix-prompt__actions", children: [
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: onCancel, disabled: pending, children: cancelLabel }),
+          /* @__PURE__ */ jsx(Button, { type: "submit", variant: destructive ? "danger" : "primary", loading: pending, children: submitLabel })
+        ] })
+      ] })
+    }
+  );
 }
 export {
   ConfirmDialog,

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,95 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { FileRejection, FileSizeFormatter } 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;
+    /** Count sizes in 1024s (1 MB = 1,048,576 bytes) instead of 1000s. Default `1000`. */
+    sizeBase?: 1000 | 1024;
+    /** The product's own size formatter; it replaces `formatFileSize` (and `sizeBase`). */
+    formatSize?: FileSizeFormatter;
+    /**
+     * Words for this instance. Each one defaults to `UixLabelsProvider` `fileUpload`, then to
+     * English, so one provider translates every upload below it (HAR-1630).
+     */
+    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, sizeBase, formatSize, labels: labelOverrides, className, }: FileUploadProps): react.JSX.Element;
+
+export { DEFAULT_FILE_UPLOAD_LABELS, FileUpload, type FileUploadItem, type FileUploadLabels, type FileUploadProps, type FileUploadStatus };