@tensor_1/react 2.29.0 → 2.31.0

package/dist/components/SchedulingTimeline.js

@@ -0,0 +1,245 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo, useRef, useState } from "react";
+import { cx } from "../cx.js";
+import { fillLabel } from "../fill-label.js";
+import { useUixLabels } from "../labels-context.js";
+import { defaultTimelineStep, layoutLane, pixelsToMs, placeSpan, shiftSpan, timelineTicks } from "../scheduling-timeline-model.js";
+const DEFAULT_SCHEDULING_TIMELINE_LABELS = {
+  region: "Schedule timeline in {timeZone}",
+  lanes: "Lanes",
+  item: "{title}, {state}, {start} to {end}{conflict}",
+  conflict: ", overlaps another entry",
+  moveHint: "Shift and an arrow key moves it; Alt, Shift and an arrow key changes when it ends.",
+  moved: "Moved {title} to {start} \u2013 {end}",
+  resized: "{title} now ends {end}",
+  loading: "Loading schedule\u2026",
+  retry: "Try again",
+  empty: "Nothing is scheduled in this range.",
+  windows: "Windows and markers in this range",
+  now: "Now",
+  states: { scheduled: "Scheduled", conflicted: "Conflicted", "in-progress": "In progress", "blackout-violation": "Blackout violation" },
+  overlays: { freeze: "Change freeze", maintenance: "Maintenance window", blackout: "Blackout" }
+};
+const TICK_WIDTH = { hour: "3.5rem", day: "7rem", week: "6rem", month: "8rem" };
+const TICK_FORMAT = {
+  hour: { hour: "2-digit", minute: "2-digit" },
+  day: { weekday: "short", day: "numeric" },
+  week: { day: "numeric", month: "short" },
+  month: { month: "short", year: "numeric" }
+};
+function SchedulingTimeline({
+  lanes,
+  items,
+  range,
+  scale = "day",
+  timeZone,
+  locale,
+  overlays = [],
+  markers = [],
+  now,
+  weekStartsOn = 1,
+  tickWidth,
+  step: stepProp,
+  formatTick,
+  formatInstant: formatInstantProp,
+  renderItem,
+  onSelectItem,
+  onMoveItem,
+  loading,
+  error,
+  onRetry,
+  labels: labelOverrides,
+  className
+}) {
+  const uixLabels = useUixLabels();
+  const labels = {
+    ...DEFAULT_SCHEDULING_TIMELINE_LABELS,
+    ...uixLabels.schedulingTimeline,
+    ...labelOverrides,
+    states: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.states, ...uixLabels.schedulingTimeline?.states, ...labelOverrides?.states },
+    overlays: { ...DEFAULT_SCHEDULING_TIMELINE_LABELS.overlays, ...uixLabels.schedulingTimeline?.overlays, ...labelOverrides?.overlays }
+  };
+  const id = useId();
+  const step = stepProp ?? defaultTimelineStep(scale);
+  const ticks = useMemo(() => timelineTicks(range, scale, timeZone, weekStartsOn), [range.start, range.end, scale, timeZone, weekStartsOn]);
+  const laneLayouts = useMemo(
+    () => lanes.map((lane) => ({ lane, placed: layoutLane(items.filter((item) => item.laneId === lane.id), range) })),
+    [lanes, items, range.start, range.end]
+    // eslint-disable-line react-hooks/exhaustive-deps
+  );
+  const ordered = useMemo(() => laneLayouts.flatMap((l) => l.placed.map((p) => p.item.id)), [laneLayouts]);
+  const [activeId, setActiveId] = useState();
+  const focusId = activeId && ordered.includes(activeId) ? activeId : ordered[0];
+  const [drag, setDrag] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const rootRef = useRef(null);
+  const fmtInstant = (instant) => formatInstantProp?.(instant) ?? new Intl.DateTimeFormat(locale, { timeZone, dateStyle: "medium", timeStyle: "short" }).format(new Date(instant));
+  const fmtTick = (at) => formatTick?.(new Date(at), scale) ?? new Intl.DateTimeFormat(locale, { timeZone, ...TICK_FORMAT[scale] }).format(new Date(at));
+  const movable = (item) => !!onMoveItem && item.movable !== false;
+  const focusItem = (itemId) => {
+    if (!itemId) return;
+    setActiveId(itemId);
+    requestAnimationFrame(() => rootRef.current?.querySelector(`[data-timeline-item="${CSS.escape(itemId)}"]`)?.focus());
+  };
+  const commit = (item, delta, mode) => {
+    if (!onMoveItem || delta === 0) return;
+    const next = shiftSpan(item, delta, mode, step);
+    onMoveItem(item.id, next);
+    setAnnouncement(mode === "move" ? fillLabel(labels.moved, { title: item.title, start: fmtInstant(next.start), end: fmtInstant(next.end) }) : fillLabel(labels.resized, { title: item.title, end: fmtInstant(next.end) }));
+  };
+  const onItemKeyDown = (event, laneIndex, placed, index) => {
+    const item = placed[index].item;
+    const horizontal = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+    if (horizontal && event.shiftKey && movable(item)) {
+      event.preventDefault();
+      commit(item, horizontal * step, event.altKey ? "resize" : "move");
+      return;
+    }
+    if (horizontal) {
+      event.preventDefault();
+      focusItem(placed[index + horizontal]?.item.id);
+      return;
+    }
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      focusItem((event.key === "Home" ? placed[0] : placed[placed.length - 1])?.item.id);
+      return;
+    }
+    const vertical = event.key === "ArrowUp" ? -1 : event.key === "ArrowDown" ? 1 : 0;
+    if (vertical) {
+      event.preventDefault();
+      const start = Date.parse(item.start);
+      for (let l = laneIndex + vertical; l >= 0 && l < laneLayouts.length; l += vertical) {
+        const candidates = laneLayouts[l].placed;
+        if (candidates.length === 0) continue;
+        const nearest = candidates.reduce((best, p) => Math.abs(Date.parse(p.item.start) - start) < Math.abs(Date.parse(best.item.start) - start) ? p : best);
+        focusItem(nearest.item.id);
+        return;
+      }
+    }
+  };
+  const onPointerDown = (event, item) => {
+    if (!movable(item) || event.button !== 0) return;
+    const track = event.currentTarget.closest(".uix-scheduling-timeline__track");
+    if (!track) return;
+    event.currentTarget.setPointerCapture?.(event.pointerId);
+    setDrag({ id: item.id, x: event.clientX, width: track.getBoundingClientRect().width, delta: 0, moved: false });
+  };
+  const onPointerMove = (event) => {
+    if (!drag) return;
+    const dx = event.clientX - drag.x;
+    const delta = pixelsToMs(dx, drag.width, range, step);
+    if (delta !== drag.delta || !drag.moved && Math.abs(dx) > 3) setDrag({ ...drag, delta, moved: drag.moved || Math.abs(dx) > 3 });
+  };
+  const onPointerUp = (item) => {
+    if (!drag || drag.id !== item.id) return;
+    if (drag.moved) commit(item, drag.delta, "move");
+    setDrag(drag.moved ? { ...drag, delta: 0 } : null);
+    if (drag.moved) window.setTimeout(() => setDrag(null), 0);
+  };
+  const nowPos = now ? placeSpan({ start: now, end: now }, range) : null;
+  const overlaysFor = (laneId) => overlays.filter((o) => !o.laneId || o.laneId === laneId);
+  const markersFor = (laneId) => markers.filter((m) => !m.laneId || m.laneId === laneId);
+  const trackStyle = { minWidth: `calc(${Math.max(ticks.length - 1, 1)} * ${tickWidth ?? TICK_WIDTH[scale]})` };
+  const band = (o, showLabel) => {
+    const pos = placeSpan(o, range);
+    return pos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay", "data-kind": o.kind, style: { left: `${pos.left}%`, width: `${pos.width}%` }, children: showLabel && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__overlay-label", children: o.label }) }, o.id);
+  };
+  return /* @__PURE__ */ jsxs("section", { ref: rootRef, className: cx("uix-scheduling-timeline", className), "aria-label": fillLabel(labels.region, { timeZone }), children: [
+    loading ? /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__state", role: "status", children: labels.loading }) : error ? /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__state", role: "alert", children: [
+      /* @__PURE__ */ jsx("p", { children: error }),
+      onRetry && /* @__PURE__ */ jsx("button", { type: "button", className: "uix-btn uix-btn--secondary", onClick: onRetry, children: labels.retry })
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      (overlays.length > 0 || markers.length > 0) && /* @__PURE__ */ jsxs("div", { className: "uix-visually-hidden", children: [
+        /* @__PURE__ */ jsx("p", { id: `${id}-windows`, children: labels.windows }),
+        /* @__PURE__ */ jsxs("ul", { "aria-labelledby": `${id}-windows`, children: [
+          overlays.map((o) => /* @__PURE__ */ jsxs("li", { children: [
+            labels.overlays[o.kind],
+            ": ",
+            o.label,
+            ", ",
+            fmtInstant(o.start),
+            " \u2013 ",
+            fmtInstant(o.end)
+          ] }, o.id)),
+          markers.map((m) => /* @__PURE__ */ jsxs("li", { children: [
+            m.label,
+            ", ",
+            fmtInstant(m.at)
+          ] }, m.id))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__scroller", children: /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__grid", children: [
+        /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row uix-scheduling-timeline__row--axis", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__lane-label", children: labels.lanes }),
+          /* @__PURE__ */ jsx("div", { className: "uix-scheduling-timeline__track uix-scheduling-timeline__axis", style: trackStyle, children: ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, children: tick.offset < 100 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__tick-label", children: fmtTick(tick.at) }) }, tick.at)) })
+        ] }),
+        laneLayouts.map(({ lane, placed }, laneIndex) => {
+          const rows = placed.reduce((max, p) => Math.max(max, p.row + 1), 1);
+          const laneLabelId = `${id}-lane-${laneIndex}`;
+          return /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__row", style: { "--uix-timeline-rows": rows }, children: [
+            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__lane-label", id: laneLabelId, children: [
+              /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-name", children: lane.label }),
+              lane.meta != null && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__lane-meta", children: lane.meta })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "uix-scheduling-timeline__track", style: trackStyle, children: [
+              ticks.map((tick) => /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__gridline", "data-major": tick.major || void 0, style: { left: `${tick.offset}%` }, "aria-hidden": "true" }, tick.at)),
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: overlaysFor(lane.id).map((o) => band(o, laneIndex === 0 || !!o.laneId)) }),
+              nowPos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now", style: { left: `${nowPos.left}%` }, "aria-hidden": "true", children: laneIndex === 0 && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__now-label", children: labels.now }) }),
+              markersFor(lane.id).map((m) => {
+                const pos = placeSpan({ start: m.at, end: m.at }, range);
+                return pos && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__marker", style: { left: `${pos.left}%` }, title: m.label, "aria-hidden": "true" }, m.id);
+              }),
+              /* @__PURE__ */ jsx("ul", { className: "uix-scheduling-timeline__items", "aria-labelledby": laneLabelId, children: placed.map((p, index) => {
+                const item = p.item;
+                const state = item.state ?? "scheduled";
+                const dragging = drag?.id === item.id && drag.moved;
+                const shown = dragging && drag ? placeSpan(shiftSpan(item, drag.delta, "move", step), range) ?? p : p;
+                return /* @__PURE__ */ jsx("li", { className: "uix-scheduling-timeline__slot", style: { left: `${shown.left}%`, width: `${shown.width}%`, "--uix-timeline-row": p.row }, children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    className: "uix-scheduling-timeline__item",
+                    "data-timeline-item": item.id,
+                    title: item.title,
+                    "data-state": state,
+                    "data-conflict": p.conflict || void 0,
+                    "data-clipped-start": p.clippedStart || void 0,
+                    "data-clipped-end": p.clippedEnd || void 0,
+                    "data-movable": movable(item) || void 0,
+                    "data-dragging": dragging || void 0,
+                    tabIndex: focusId === item.id ? 0 : -1,
+                    "aria-label": fillLabel(labels.item, { title: item.title, state: labels.states[state], start: fmtInstant(item.start), end: fmtInstant(item.end), conflict: p.conflict ? labels.conflict : "" }),
+                    "aria-describedby": movable(item) ? `${id}-hint` : void 0,
+                    onFocus: () => setActiveId(item.id),
+                    onKeyDown: (event) => onItemKeyDown(event, laneIndex, placed, index),
+                    onPointerDown: (event) => onPointerDown(event, item),
+                    onPointerMove,
+                    onPointerUp: () => onPointerUp(item),
+                    onPointerCancel: () => setDrag(null),
+                    onClick: () => {
+                      if (drag?.moved) return;
+                      onSelectItem?.(item);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-title", children: renderItem?.(item) ?? item.title }),
+                      item.meta && /* @__PURE__ */ jsx("span", { className: "uix-scheduling-timeline__item-meta", children: item.meta })
+                    ]
+                  }
+                ) }, item.id);
+              }) })
+            ] })
+          ] }, lane.id);
+        })
+      ] }) }),
+      ordered.length === 0 && /* @__PURE__ */ jsx("p", { className: "uix-scheduling-timeline__empty", children: labels.empty })
+    ] }),
+    onMoveItem && /* @__PURE__ */ jsx("span", { id: `${id}-hint`, className: "uix-visually-hidden", children: labels.moveHint }),
+    /* @__PURE__ */ jsx("span", { className: "uix-visually-hidden", role: "status", "aria-live": "polite", children: announcement })
+  ] });
+}
+export {
+  DEFAULT_SCHEDULING_TIMELINE_LABELS,
+  SchedulingTimeline
+};

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
+};

package/dist/filter-model.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Typed column filters for `FilterEditor` (HAR-1365; TENSOR C6 `table-filter-editor.tsx`,
+ * MOTUS C-1 "+ filter"). The value is data the product serializes into its own query; the
+ * summary feeds a `Chip`. Pure, so a server can summarize a saved view too.
+ */
+interface FilterChoice {
+    value: string;
+    label: string;
+}
+type TextFilterOperator = 'contains' | 'not-contains' | 'is' | 'is-not' | 'starts-with';
+type NumberFilterOperator = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte' | 'between';
+type FilterValue = {
+    kind: 'enum';
+    values: string[];
+} | {
+    kind: 'text';
+    operator: TextFilterOperator;
+    text: string;
+} | {
+    kind: 'number';
+    operator: NumberFilterOperator;
+    value?: number;
+    to?: number;
+} | {
+    kind: 'date-range';
+    from?: string;
+    to?: string;
+} | {
+    kind: 'boolean';
+    value?: boolean;
+} | {
+    kind: 'reference';
+    values: FilterChoice[];
+};
+type FilterValueKind = FilterValue['kind'];
+interface FilterField {
+    id: string;
+    /** Column name, also the start of the chip summary. */
+    label: string;
+    kind: FilterValueKind;
+    /** `enum`: the choices. */
+    options?: readonly FilterChoice[];
+    /** `reference`: finds records to pick; rejected promises show the error state. */
+    onSearch?: (query: string) => Promise<readonly FilterChoice[]>;
+    /** `text` / `number`: the operators offered, in order. Default: all of the kind. */
+    operators?: readonly (TextFilterOperator | NumberFilterOperator)[];
+    /** `number`: a unit shown after the value, e.g. "days". */
+    unit?: string;
+    /** `boolean`: words for true and false, e.g. Escalated / Not escalated. Default from labels. */
+    trueLabel?: string;
+    falseLabel?: string;
+}
+interface FilterSummaryLabels {
+    operators: Record<TextFilterOperator | NumberFilterOperator, string>;
+    yes: string;
+    no: string;
+    /** `{from}`, `{to}`; also used for a number range. */
+    range: string;
+    /** Only a start date. `{from}`. */
+    from: string;
+    /** Only an end date. `{to}`. */
+    until: string;
+    /** More than `maxListed` values: `{first}`, `{count}`. */
+    more: string;
+}
+declare const DEFAULT_FILTER_SUMMARY_LABELS: FilterSummaryLabels;
+declare const TEXT_FILTER_OPERATORS: readonly TextFilterOperator[];
+declare const NUMBER_FILTER_OPERATORS: readonly NumberFilterOperator[];
+/** The empty value for a field kind (what Clear resets to). */
+declare function emptyFilterValue(kind: FilterValueKind): FilterValue;
+/** True when the value filters nothing (so the chip goes away). */
+declare function isFilterEmpty(value: FilterValue | undefined): boolean;
+interface SummarizeFilterOptions {
+    labels?: Partial<FilterSummaryLabels>;
+    /** Formats a `YYYY-MM-DD` date (a product format such as DD.MM.YYYY). Default: as given. */
+    formatDate?: (date: string) => string;
+    /** Formats a number. Default: `String`. */
+    formatNumber?: (value: number) => string;
+    /** List this many values before "+N". Default 2. */
+    maxListed?: number;
+}
+/**
+ * One line for the filter chip, e.g. "State: Open, Pending", "Priority ≥ 2", "Created:
+ * 01.10.2026 – 05.10.2026", "Escalated: Yes". Empty values give an empty string.
+ */
+declare function summarizeFilter(field: FilterField, value: FilterValue | undefined, options?: SummarizeFilterOptions): string;
+
+export { DEFAULT_FILTER_SUMMARY_LABELS, type FilterChoice, type FilterField, type FilterSummaryLabels, type FilterValue, type FilterValueKind, NUMBER_FILTER_OPERATORS, type NumberFilterOperator, type SummarizeFilterOptions, TEXT_FILTER_OPERATORS, type TextFilterOperator, emptyFilterValue, isFilterEmpty, summarizeFilter };

package/dist/filter-model.js

@@ -0,0 +1,91 @@
+const DEFAULT_FILTER_SUMMARY_LABELS = {
+  operators: {
+    contains: "contains",
+    "not-contains": "does not contain",
+    is: "is",
+    "is-not": "is not",
+    "starts-with": "starts with",
+    eq: "=",
+    neq: "\u2260",
+    lt: "<",
+    lte: "\u2264",
+    gt: ">",
+    gte: "\u2265",
+    between: "between"
+  },
+  yes: "Yes",
+  no: "No",
+  range: "{from} \u2013 {to}",
+  from: "from {from}",
+  until: "until {to}",
+  more: "{first} +{count}"
+};
+const TEXT_FILTER_OPERATORS = ["contains", "not-contains", "is", "is-not", "starts-with"];
+const NUMBER_FILTER_OPERATORS = ["eq", "neq", "lt", "lte", "gt", "gte", "between"];
+function emptyFilterValue(kind) {
+  switch (kind) {
+    case "enum":
+      return { kind, values: [] };
+    case "text":
+      return { kind, operator: "contains", text: "" };
+    case "number":
+      return { kind, operator: "eq" };
+    case "date-range":
+      return { kind };
+    case "boolean":
+      return { kind };
+    case "reference":
+      return { kind, values: [] };
+  }
+}
+function isFilterEmpty(value) {
+  if (!value) return true;
+  switch (value.kind) {
+    case "enum":
+    case "reference":
+      return value.values.length === 0;
+    case "text":
+      return value.text.trim() === "";
+    case "number":
+      return value.value === void 0 || value.operator === "between" && value.to === void 0;
+    case "date-range":
+      return !value.from && !value.to;
+    case "boolean":
+      return value.value === void 0;
+  }
+}
+const fill = (template, values) => template.replace(/\{(\w+)\}/g, (match, key) => key in values ? String(values[key]) : match);
+function summarizeFilter(field, value, options = {}) {
+  if (!value || isFilterEmpty(value)) return "";
+  const labels = { ...DEFAULT_FILTER_SUMMARY_LABELS, ...options.labels, operators: { ...DEFAULT_FILTER_SUMMARY_LABELS.operators, ...options.labels?.operators } };
+  const date = options.formatDate ?? ((d) => d);
+  const num = (n) => `${options.formatNumber?.(n) ?? String(n)}${field.unit ? ` ${field.unit}` : ""}`;
+  const list = (items) => {
+    const max = Math.max(1, options.maxListed ?? 2);
+    return items.length > max ? fill(labels.more, { first: items.slice(0, max).join(", "), count: items.length - max }) : items.join(", ");
+  };
+  switch (value.kind) {
+    case "enum": {
+      const byValue = new Map((field.options ?? []).map((o) => [o.value, o.label]));
+      return `${field.label}: ${list(value.values.map((v) => byValue.get(v) ?? v))}`;
+    }
+    case "reference":
+      return `${field.label}: ${list(value.values.map((v) => v.label))}`;
+    case "text":
+      return `${field.label} ${labels.operators[value.operator]} \u201C${value.text.trim()}\u201D`;
+    case "number":
+      return value.operator === "between" ? `${field.label}: ${fill(labels.range, { from: num(value.value), to: num(value.to) })}` : `${field.label} ${labels.operators[value.operator]} ${num(value.value)}`;
+    case "date-range":
+      return `${field.label}: ${value.from && value.to ? fill(labels.range, { from: date(value.from), to: date(value.to) }) : value.from ? fill(labels.from, { from: date(value.from) }) : fill(labels.until, { to: date(value.to) })}`;
+    case "boolean":
+      return `${field.label}: ${value.value ? field.trueLabel ?? labels.yes : field.falseLabel ?? labels.no}`;
+  }
+}
+export {
+  DEFAULT_FILTER_SUMMARY_LABELS,
+  NUMBER_FILTER_OPERATORS,
+  TEXT_FILTER_OPERATORS,
+  emptyFilterValue,
+  isFilterEmpty,
+  summarizeFilter
+};

package/dist/icons/Icon.d.ts

@@ -5,6 +5,7 @@ import { IconNode, UixIcon, IconProps } from './types.js';
 /** Renders a glyph as an inline SVG; the props contract shared by every icon. */
 declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, className, style, ...rest }: IconProps, ref?: unknown): react.ReactElement<{
     string?: number | string | undefined | undefined;
+    r?: number | string | undefined | undefined;
     type?: string | undefined | undefined;
     id?: string | undefined | undefined;
     name?: string | undefined | undefined;
@@ -252,7 +253,6 @@ declare function renderIcon(node: IconNode, { size, tone, label, strokeWidth, cl
     fill: string;
     clip?: number | string | undefined | undefined;
     stroke: string;
-    r?: number | string | undefined | undefined;
     filter?: string | undefined | undefined;
     values?: string | undefined | undefined;
     offset?: number | string | undefined | undefined;