@cosmicdrift/kumiko-renderer 0.384.0 → 0.385.0

package/dist/web/primitives/data-table.js

@@ -0,0 +1,279 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
+import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, Search, SlidersHorizontal, X, } from "lucide-react";
+import { Fragment, useId, useState, } from "react";
+import { useOptionalLocale, useOptionalTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
+import { CardLeadingImage } from "./file-thumbnail.js";
+import { screenPaddingClassName } from "./layout.js";
+import { useIsNarrowViewport } from "./use-narrow-viewport.js";
+import "../react-css-custom-properties.js";
+import { buildTableItems, cellLinkProp, cellTitle, DataTableCell, FIT_CONTENT_CELL_CLASS, FirstCellLink, isBadgeColumn, isEmptyCellValue, isUnlabeledFalse, NUMERIC_COLUMN_TYPES, rowToneClass, SortableHeader, showsBareCheckMark, TABULAR_COLUMN_TYPES, } from "./data-table-cell.js";
+import { DateRangeFacetFilter, FacetFilter } from "./facet-filter.js";
+import { InfiniteSentinel, Pager, TABLE_FOOTER_BAR_CLASS } from "./pager.js";
+import { RowActionsCell } from "./row-actions.js";
+// The vendored Table wraps <table> in an `overflow-x-auto` container, which
+// would become the scrollport of a sticky header. A scrollBody table scrolls
+// in its parent instead, so it renders the bare <table>.
+function FlushTable({ className, ...props }) {
+    return (_jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }));
+}
+// Header cells stick to the scroll surface; the bottom rule is an inset
+// shadow because a border on a sticky cell scrolls away under border-collapse.
+// Column weight (medium vs. semibold for the sorted one) lives on the th itself
+// in SortableHeader: a `[&_th]:font-*` rule here would outrank it.
+// Child selectors only: an expanded row nests a whole table inside a cell, and
+// descendant selectors would make its header sticky and re-pad its cells.
+const FILL_TABLE_CLASS = cn("[&>thead>tr>th]:sticky [&>thead>tr>th]:top-0 [&>thead>tr>th]:z-10 [&>thead>tr>th]:h-9 [&>thead>tr>th]:bg-muted [&>thead>tr>th]:px-2 [&>thead>tr>th]:text-[13px]", "[&>thead>tr>th]:shadow-[inset_0_-1px_0_var(--color-border)] [&>thead>tr>th_button]:text-[13px] [&>tbody>tr>td]:px-2 [&>tbody>tr>td]:py-0", "[&>*>tr>:first-child]:pl-6 [&>*>tr>:last-child]:pr-6");
+// `!`: beats the first/last-child padding of FILL_TABLE_CLASS, which would
+// otherwise widen the narrow toggle column / pad the full-width expansion cell.
+// The nested table's sticky actions cell (last td) gets the muted surface
+// instead of its own md:bg-background, so it blends into the area.
+const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
+const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
+const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
+function RowExpandToggle({ expanded, controlsId, label, onToggle, testId, }) {
+    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 max-md:size-11", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
+            e.stopPropagation();
+            onToggle();
+        }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(ChevronRight, { className: cn("size-4 transition-transform", expanded && "rotate-90"), "aria-hidden": "true" }) }));
+}
+function DataTableFooter({ count, itemNoun, testId, }) {
+    const t = useOptionalTranslation();
+    const noun = itemNoun?.(count);
+    const label = noun !== undefined
+        ? (t?.("kumiko.list.count.noun", { count: count.toLocaleString(), noun }) ??
+            `${count.toLocaleString()} ${noun}`)
+        : count === 1
+            ? (t?.("kumiko.list.count.one") ?? "1 entry")
+            : (t?.("kumiko.list.count.other", { count: count.toLocaleString() }) ??
+                `${count.toLocaleString()} entries`);
+    return (_jsx("div", { "data-testid": testId, className: TABLE_FOOTER_BAR_CLASS, children: _jsx("span", { "data-testid": `${testId}-count`, children: label }) }));
+}
+// Cell content is a ReactNode, so the tooltip text is read from the rendered DOM.
+function showFullTextOnHover(event) {
+    const element = event.currentTarget;
+    element.title = element.scrollWidth > element.clientWidth ? (element.textContent ?? "") : "";
+}
+export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, emptyState, toolbarStart, toolbarDescription, toolbarEnd, pager, onReachEnd, loadingMore, hasMore, itemNoun, rowActions, rowActionMode, rowGrouping, rowTone, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, testId, onCellChange, getRowTestId, getCellTestId, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, }) {
+    // One locale/translate subscription per table — not per cell (fw#2345).
+    // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
+    const tableTranslate = useOptionalTranslation();
+    const tableLocale = useOptionalLocale();
+    // Below 768px a table scrolls its columns out of reach with no visible
+    // affordance (fw#2159 fixed the desktop case; narrow viewports never had
+    // one). Cards replace the table entirely below the breakpoint — same
+    // single-mount pattern as EmbeddedListInput/embedded-list-input.tsx.
+    const isNarrow = useIsNarrowViewport();
+    const [facetsOpenNarrow, setFacetsOpenNarrow] = useState(false);
+    const [toggledGroups, setToggledGroups] = useState(new Set());
+    // Toolbar wrapper: shared container for toolbar + table so the two belong
+    // together visually. The toolbar is NOT sticky: lists typically scroll with
+    // the page container, not internally. Sticky would compete with the topbar.
+    // The row click already runs rowClick actions, so with a clickable row they
+    // must not reappear in the kebab (a list whose only action is the rowClick
+    // one gets no actions column at all).
+    const rowIsLink = onRowClick !== undefined;
+    const menuActions = rowActions !== undefined && rowIsLink
+        ? rowActions.filter((action) => action.rowClick !== true)
+        : rowActions;
+    // The table keeps every action in "inline" mode, and with editable cells the
+    // first cell is not a keyboard link (FirstCellLink is off), so the kebab is
+    // then the only keyboard route to the rowClick action.
+    const tableActions = rowActionMode === "inline" || onCellChange !== undefined ? rowActions : menuActions;
+    const rowClickAction = rowActions?.find((action) => action.rowClick === true);
+    const rowClickLabel = rowClickAction?.label;
+    const rowClickIsHidden = (row) => rowClickAction?.isVisible !== undefined && !rowClickAction.isVisible(row);
+    const hasTableActions = tableActions !== undefined && tableActions.length > 0;
+    const isEmpty = rows.length === 0;
+    const expansionIdPrefix = useId();
+    const isRowExpandable = renderExpandedRow !== undefined && onToggleRowExpanded !== undefined;
+    const rowTestId = (row) => getRowTestId?.(row) ?? `row-${row.id}`;
+    const expansionDomId = (row) => `${expansionIdPrefix}-${row.id}`;
+    // The expand toggle of a row, shared by table and card layout. Named after
+    // the first data column, the one a user recognizes the row by.
+    function renderExpandToggle(row) {
+        if (!isRowExpandable)
+            return null;
+        const expanded = expandedRowIds?.has(row.id) === true;
+        const firstColumn = columns[0];
+        const title = (firstColumn !== undefined ? cellTitle(row.values[firstColumn.field]) : undefined) ?? "";
+        const labelKey = expanded ? "kumiko.list.row.collapse" : "kumiko.list.row.expand";
+        return (_jsx(RowExpandToggle, { expanded: expanded, controlsId: expansionDomId(row), label: tableTranslate?.(labelKey, { title }) ?? `${expanded ? "Collapse" : "Expand"} ${title}`, onToggle: () => onToggleRowExpanded(row.id), testId: `${rowTestId(row)}-toggle` }));
+    }
+    function renderExpansion(row, as, colSpan) {
+        if (!isRowExpandable || expandedRowIds?.has(row.id) !== true)
+            return null;
+        const content = renderExpandedRow(row);
+        if (as === "item") {
+            return (_jsx("li", { id: expansionDomId(row), "data-testid": `${rowTestId(row)}-expansion`, className: "border-b border-border-row bg-muted px-4 pt-1 pb-3.5", children: content }));
+        }
+        return (_jsx(TableRow, { id: expansionDomId(row), "data-testid": `${rowTestId(row)}-expansion`, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colSpan, className: EXPANSION_CELL_CLASS, children: _jsx("div", { className: EXPANSION_CONTENT_CLASS, children: content }) }) }));
+    }
+    const fillsHeight = scrollBody === true;
+    const TableRoot = fillsHeight ? FlushTable : Table;
+    const emptyBlock = (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-empty` : "render-list-empty", className: cn("flex flex-col items-center justify-center p-12 text-sm text-muted-foreground gap-3", chromeless !== true && !fillsHeight && "rounded-md border border-dashed"), children: emptyState ?? _jsx("span", { children: tableTranslate?.("kumiko.list.no-entries") ?? "No entries." }) }));
+    const tableItems = buildTableItems(rows, rowGrouping, toggledGroups);
+    function renderGroupToggle(item) {
+        return (_jsxs("button", { type: "button", "aria-expanded": !item.collapsed, "data-testid": `row-group-${item.key}-toggle`, onClick: () => setToggledGroups((prev) => {
+                const next = new Set(prev);
+                if (!next.delete(item.key))
+                    next.add(item.key);
+                return next;
+            }), className: "flex w-full items-center gap-2 px-4 py-2 text-left text-xs font-medium text-foreground-secondary", children: [item.collapsed ? (_jsx(ChevronRight, { className: "size-3.5" })) : (_jsx(ChevronDown, { className: "size-3.5" })), item.label] }));
+    }
+    function tableInner() {
+        if (isEmpty)
+            return emptyBlock;
+        return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, children: [_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [isRowExpandable && (_jsx(TableHead, { "data-testid": "column-expand", className: EXPAND_TOGGLE_CELL_CLASS })), columns.map((col) => (_jsx(SortableHeader, { field: col.field, label: col.label, sortable: col.sortable === true, highlighted: col.highlighted === true, numeric: NUMERIC_COLUMN_TYPES.has(col.type), fitContent: col.fileDisplay !== undefined, ...(sort !== undefined && sort !== null && { sort }), ...(onSortChange !== undefined && { onSortChange }) }, col.field))), hasTableActions && (_jsx(TableHead, { "data-testid": "column-actions", 
+                                    // From md: sticky right-0 + bg-muted (= header tone) so the
+                                    // action column stays at the right edge during horizontal
+                                    // scroll on wider screens. Below md, actions scroll in
+                                    // normal flow — sticky there would pin the column over the
+                                    // preceding data column instead of the (already narrow)
+                                    // page edge. No border-l: a permanent divider looks heavy;
+                                    // the sticky bg already sets the column apart during scroll.
+                                    className: "w-px text-right text-muted-foreground md:sticky md:right-0 md:z-10 md:bg-muted", "aria-label": tableTranslate?.("kumiko.list.actions") ?? "Actions" }))] }) }), _jsx(TableBody, { children: tableItems.map((item) => {
+                            if (item.kind === "group") {
+                                return (_jsx(TableRow, { "data-testid": `row-group-${item.key}`, children: _jsx(TableCell, { colSpan: columns.length + (isRowExpandable ? 1 : 0) + (hasTableActions ? 1 : 0), className: "bg-muted/40 p-0", children: renderGroupToggle(item) }) }, `group-${item.key}`));
+                            }
+                            const row = item.row;
+                            const opensOnClick = rowIsLink && !rowClickIsHidden(row);
+                            return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), onClick: opensOnClick ? () => onRowClick(row) : undefined, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", fillsHeight && "h-10 border-border-row hover:bg-muted"), children: [isRowExpandable && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: EXPAND_TOGGLE_CELL_CLASS, children: renderExpandToggle(row) })), columns.map((col, colIndex) => (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, 
+                                                // Text wraps instead of truncating: nowrap cells keep their
+                                                // full width, so a wide table scrolled sideways and its
+                                                // last column slid under the sticky actions column with
+                                                // nothing visibly cut off. max-w-xs bounds a single column;
+                                                // badges and dates stay nowrap by their own classes.
+                                                className: cn(col.fileDisplay === undefined
+                                                    ? "max-w-xs whitespace-normal break-words"
+                                                    : FIT_CONTENT_CELL_CLASS, colIndex === 0
+                                                    ? "font-medium text-foreground"
+                                                    : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40"), title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: colIndex === 0 && opensOnClick && onCellChange === undefined, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: rowClickLabel, children: _jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && {
+                                                            optionLabels: col.optionLabels,
+                                                        }), ...(col.optionTones !== undefined && { optionTones: col.optionTones }), ...(col.grouping !== undefined && { grouping: col.grouping }), ...(col.fileDisplay !== undefined && { fileDisplay: col.fileDisplay }), ...(onCellChange !== undefined && {
+                                                            onChange: (value) => onCellChange(row.id, col.field, value),
+                                                        }), ...cellLinkProp(col, row, !(colIndex === 0 && opensOnClick && onCellChange === undefined)) }) }) }, col.field))), hasTableActions && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`, 
+                                                // From md: sticky-right so the actions stay visible on the
+                                                // right edge during horizontal scroll. Below md, actions
+                                                // scroll with the row like any other cell — sticky there
+                                                // would hide the neighboring data column on narrow
+                                                // viewports. bg-background sets the column apart during
+                                                // scroll — no border-l (divider too heavy).
+                                                className: cn("whitespace-nowrap text-right md:sticky md:right-0 md:z-10 md:bg-background", fillsHeight && "md:bg-card"), 
+                                                // Action-cell events must not trigger the row click/activation
+                                                // (typically "Open Detail" — the user wanted the action,
+                                                // not navigation). We stopPropagation for mouse and
+                                                // keyboard so a11y stays consistent.
+                                                onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: tableActions, mode: rowActionMode, rowIsLink: rowIsLink }) }))] }), renderExpansion(row, "row", columns.length + (isRowExpandable ? 1 : 0) + (hasTableActions ? 1 : 0))] }, row.id));
+                        }) })] }) }));
+    }
+    // No column headers below the breakpoint, so the click-to-sort affordance
+    // on SortableHeader has nothing to attach to. A single native <select> is
+    // the whole fix — no custom widget, no menu — fed straight from the
+    // columns marked sortable in the ViewModel. Options carry the resolved
+    // {field, dir} directly so onChange can look the pick up by value instead
+    // of parsing/casting the option string back apart.
+    const sortableColumns = columns.filter((col) => col.sortable);
+    const sortOptions = sortableColumns.flatMap((col) => [
+        { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
+        { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
+    ]);
+    const { image: cardImageColumn, title: cardTitleColumn, status: cardStatusColumn, meta: cardMetaColumns, } = cardColumnRoles(columns);
+    function cardCell(row, col) {
+        // A bare check mark in the subtitle line says nothing without its column.
+        if (showsBareCheckMark(col.type, row.values[col.field], col.renderer))
+            return col.label;
+        return (_jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && { optionLabels: col.optionLabels }), ...(col.optionTones !== undefined && { optionTones: col.optionTones }), ...(col.grouping !== undefined && { grouping: col.grouping }), ...(col.fileDisplay !== undefined && { fileDisplay: col.fileDisplay, compactFile: true }), ...(onCellChange !== undefined && {
+                onChange: (value) => onCellChange(row.id, col.field, value),
+            }), ...cellLinkProp(col, row, !(rowIsLink && !rowClickIsHidden(row))) }));
+    }
+    function renderCard(row) {
+        const metaColumns = cardMetaColumns.filter((col) => !isEmptyCellValue(row.values[col.field]) &&
+            !isUnlabeledFalse(col.type, row.values[col.field], col.renderer));
+        const showStatus = cardStatusColumn !== undefined && !isEmptyCellValue(row.values[cardStatusColumn.field]);
+        const hasMenu = menuActions !== undefined && menuActions.length > 0;
+        const opensOnClick = rowIsLink && !rowClickIsHidden(row);
+        const body = (_jsxs(_Fragment, { children: [cardImageColumn?.fileDisplay !== undefined && (_jsx("div", { "data-testid": `card-image-${row.id}`, className: "shrink-0", children: _jsx(CardLeadingImage, { value: row.values[cardImageColumn.field], display: cardImageColumn.fileDisplay }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [cardTitleColumn !== undefined && (_jsx("span", { "data-testid": getCellTestId?.(row, cardTitleColumn.field) ??
+                                        `cell-${row.id}-${cardTitleColumn.field}`, className: "min-w-0 break-words text-base font-semibold text-foreground", children: cardCell(row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": getCellTestId?.(row, cardStatusColumn.field) ??
+                                        `cell-${row.id}-${cardStatusColumn.field}`, className: "shrink-0", children: cardCell(row, cardStatusColumn) }))] }), metaColumns.length > 0 && (_jsx("div", { className: "min-w-0 overflow-x-clip", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ms-3 flex min-w-0 flex-wrap items-center text-[13px] leading-5 tabular-nums text-foreground-secondary", children: metaColumns.map((col) => (_jsxs("div", { className: "flex h-5 min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("div", { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, className: "min-w-0 truncate leading-5", onPointerEnter: showFullTextOnHover, children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(row, col) })) : (cardCell(row, col)) })] }, col.field))) }) }))] }), opensOnClick && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
+        const rowItem = (_jsxs("li", { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), isRowExpandable ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4"), ...(opensOnClick && { onClick: () => onRowClick(row) }), children: [renderExpandToggle(row), opensOnClick ? (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
+                        if (e.key !== "Enter")
+                            return;
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onRowClick(row);
+                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink, compact: true }) }))] }, row.id));
+        if (!isRowExpandable)
+            return rowItem;
+        // The expansion is a sibling <li>, outside the row's click target, so
+        // clicks in the sub-area never navigate the parent row.
+        return (_jsxs(Fragment, { children: [rowItem, renderExpansion(row, "item", 0)] }, row.id));
+    }
+    function cardsInner() {
+        if (isEmpty)
+            return emptyBlock;
+        const sortLabel = sort !== undefined && sort !== null
+            ? (tableTranslate?.("kumiko.list.sort.by", {
+                column: columns.find((col) => col.field === sort.field)?.label ?? sort.field,
+            }) ?? `Sorted by ${sort.field}`)
+            : (tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted");
+        const SortArrow = sort?.dir === "desc" ? ArrowDown : ArrowUp;
+        // URL state can carry a sort on a column that is not sortable; without an
+        // option for it the select would claim "Unsorted" while the list is sorted.
+        const currentSortValue = sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "";
+        const currentSortIsUnlisted = sort !== undefined && sort !== null && !sortOptions.some((o) => o.value === currentSortValue);
+        return (_jsx("div", { "data-testid": testId, className: "contents", children: _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [onSortChange !== undefined && sortableColumns.length > 0 && (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && (_jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" })), _jsxs("select", { "aria-label": tableTranslate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: currentSortValue, onChange: (e) => {
+                                    const raw = e.target.value;
+                                    if (raw === "") {
+                                        onSortChange(null);
+                                        return;
+                                    }
+                                    const picked = sortOptions.find((o) => o.value === raw);
+                                    if (picked === undefined)
+                                        return;
+                                    onSortChange({ field: picked.field, dir: picked.dir });
+                                }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), currentSortIsUnlisted && (_jsx("option", { value: currentSortValue, children: `${columns.find((col) => col.field === sort.field)?.label ?? sort.field} ${sort.dir === "desc" ? "↓" : "↑"}` })), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] })), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: tableItems.map((item) => item.kind === "group" ? (_jsx("li", { "data-testid": `row-group-${item.key}`, className: "border-b border-border-row bg-muted/40", children: renderGroupToggle(item) }, `group-${item.key}`)) : (renderCard(item.row))) })] }) }));
+    }
+    const tableContent = isNarrow ? cardsInner() : tableInner();
+    // The pager is ALWAYS rendered below the table (even with rows=[]) so the
+    // user can page back on a filter hit of zero without losing the list.
+    // Except total === 0: then there is nothing to paginate. Incompatible with
+    // infinite scroll: the caller sets either pager OR onReachEnd.
+    const pagerElement = pager !== undefined && pager.total > 0 ? (_jsx(Pager, { page: pager.page, limit: pager.limit, total: pager.total, onPageChange: pager.onPageChange, ...(pager.pageSizeOptions !== undefined && { pageSizeOptions: pager.pageSizeOptions }), ...(pager.onPageSizeChange !== undefined && { onPageSizeChange: pager.onPageSizeChange }), ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-pager` : "render-list-pager", pinned: fillsHeight })) : undefined;
+    const sentinelElement = pagerElement === undefined && onReachEnd !== undefined ? (_jsx(InfiniteSentinel, { onReachEnd: onReachEnd, loadingMore: loadingMore === true, hasMore: hasMore !== false, rowsCount: rows.length, testId: testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel" })) : undefined;
+    // With scrollBody the footer (pager, else the entry count) sits OUTSIDE the
+    // scroll surface so it stays put at any row count; the infinite sentinel
+    // stays INSIDE, or it would never intersect the scrollport.
+    const content = fillsHeight ? (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : "render-list-scroll", className: "min-h-0 flex-1 overflow-auto border-t border-border bg-card", children: [tableContent, sentinelElement] }), pagerElement ?? (_jsx(DataTableFooter, { count: rows.length, ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-footer` : "render-list-footer" }))] })) : (_jsxs(_Fragment, { children: [tableContent, pagerElement, sentinelElement] }));
+    const hasFacets = filterFacets !== undefined && filterFacets.length > 0 && onFilterChange !== undefined;
+    const hasDateRangeFacets = dateRangeFacets !== undefined && dateRangeFacets.length > 0 && onDateRangeChange !== undefined;
+    const hasActiveFilters = filterValues !== undefined && Object.values(filterValues).some((v) => v.length > 0);
+    const facetCluster = hasFacets || hasDateRangeFacets ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [hasFacets &&
+                filterFacets.map((facet) => (_jsx(FacetFilter, { facet: facet, selected: filterValues?.[facet.field] ?? [], onChange: onFilterChange, dense: fillsHeight }, facet.field))), hasDateRangeFacets &&
+                dateRangeFacets.map((facet) => (_jsx(DateRangeFacetFilter, { facet: facet, onChange: onDateRangeChange }, facet.field))), hasActiveFilters && onFilterReset !== undefined && (_jsxs(UiButton, { variant: "ghost", size: "sm", className: "h-9 px-2", onClick: onFilterReset, "data-testid": "facet-reset", children: [tableTranslate?.("kumiko.list.filter.reset") ?? "Reset", _jsx(X, {})] }))] })) : undefined;
+    const collapsesFacetsBehindButton = isNarrow && fillsHeight && facetCluster !== undefined;
+    const hasToolbar = toolbarStart !== undefined || toolbarEnd !== undefined || facetCluster !== undefined;
+    // dashboard-01 pattern: the toolbar (search + facets + "+ New") sits ABOVE
+    // the table in the same padding block; no separate bg bar, no screen title
+    // (that lives in the shell's breadcrumb).
+    return (_jsxs("div", { className: cn("flex flex-col w-full", 
+        // scrollBody: the wrapper fills its container so the footer sits at the
+        // same spot at 3 and 300 rows; the 24px insets live in toolbar, cells
+        // and footer, so no outer padding.
+        fillsHeight
+            ? "h-full min-h-0"
+            : cn("gap-4", screenPadding === true
+                ? screenPaddingClassName
+                : screenPadding === false
+                    ? undefined
+                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", fillsHeight
+                    ? isNarrow
+                        ? "shrink-0 gap-2 p-3"
+                        : "min-h-13 shrink-0 gap-2 px-6 py-2 md:py-0"
+                    : "gap-3"), children: [toolbarStart !== undefined && (_jsxs("div", { className: cn(fillsHeight
+                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11 md:[&_input]:h-8"
+                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), toolbarEnd !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: toolbarEnd }))] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6")), children: toolbarDescription })), content] }));
+}

package/dist/web/primitives/default-form.d.ts

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import { type FormProps } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function DefaultForm({ onSubmit, focusFirstErrorKey, children, title, subtitle, actions, secondaryActions, testId, width, stickyActions, headerRegion, titleAction, fillHeight, chromeless, screenForm, unsavedCount, sectionNav, sideRail, summary, }: FormProps): ReactNode;

package/dist/web/primitives/default-form.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { InsideDrawerProvider, useInsideDrawer } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { screenFormColumnWidthClassName, screenPaddingClassName } from "./layout.js";
+import { InsideScreenFormColumnContext } from "./metric.js";
+import "../react-css-custom-properties.js";
+import { cardSurface } from "./card-styles.js";
+import { BareFormContext, DrawerBodyContext, EmbeddedFormContext, InsideFormContext, ScreenFormContext, ScreenWidthContext, } from "./contexts.js";
+import { FormFooter, FormRoot, FormScreenShell, FormSectionNav, FormSections, FormTitleBlock, isPinnedFooter, SECTION_NAV_MIN_ITEMS, } from "./form.js";
+// Form inside the Drawer primitive: the drawer header carries the title, so
+// only the description (as help text), the scrolling sections and a pinned
+// footer remain. The scroll area is a sibling of the footer, never its parent.
+function DrawerFormLayout({ onSubmit, focusFirstErrorKey, subtitle, actions, secondaryActions, summary, testId, children, }) {
+    return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 py-5", children: [summary !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-summary` : undefined, className: "flex flex-col gap-0.5 rounded-lg bg-muted px-3.5 py-3", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: summary.title }), summary.subtitle !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: summary.subtitle }))] })), subtitle !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: "text-[13px] text-foreground-secondary", children: subtitle })), _jsx(InsideFormContext.Provider, { value: true, children: _jsx(ScreenFormContext.Provider, { value: true, children: _jsx(InsideDrawerProvider, { value: false, children: _jsx(DrawerBodyContext.Provider, { value: true, children: _jsx("div", { className: "flex flex-col gap-5", children: children }) }) }) }) })] }), (actions !== undefined || secondaryActions !== undefined) && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-footer` : undefined, className: "flex h-16 shrink-0 items-center justify-end gap-2 border-t border-border px-6", children: [secondaryActions, actions] }))] }));
+}
+export function DefaultForm({ onSubmit, focusFirstErrorKey, children, title, subtitle, actions, secondaryActions, testId, width, stickyActions, headerRegion, titleAction, fillHeight, chromeless, screenForm, unsavedCount, sectionNav, sideRail, summary, }) {
+    const insideDrawer = useInsideDrawer();
+    const isEmbeddedForm = useContext(EmbeddedFormContext);
+    const contextWidth = useContext(ScreenWidthContext);
+    // Embedded (AuthCard etc.): bare <form>, stacked fields with gap; the
+    // container carries card/title itself, otherwise card-in-card.
+    if (useContext(BareFormContext)) {
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col gap-4", 
+            // Bare forms stack sections without a card; without a divider a
+            // section boundary reads as a layout gap, not structure.
+            "[&>section:not(:first-child)]:border-t"), children: [headerRegion, _jsx(InsideFormContext.Provider, { value: true, children: children }), (secondaryActions !== undefined || actions !== undefined) && (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [secondaryActions, actions] }))] }));
+    }
+    if (insideDrawer) {
+        return (_jsx(DrawerFormLayout, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, subtitle: subtitle, actions: actions, secondaryActions: secondaryActions, summary: summary, testId: testId, children: children }));
+    }
+    if (isEmbeddedForm) {
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex w-full flex-col gap-6", children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), _jsx(FormSections, { chromeless: true, stickyActions: undefined, fillHeight: false, screenForm: true, children: children }), (actions !== undefined || secondaryActions !== undefined) && (_jsx("div", { className: "max-w-4xl border-t border-border", children: _jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: true, stickyActions: undefined, fillHeight: false, ...(unsavedCount !== undefined && { unsavedCount }) }) }))] }));
+    }
+    const isScreenForm = screenForm === true && fillHeight === true && chromeless !== true;
+    const screenFormWidth = width ?? contextWidth;
+    const sections = (_jsx(FormSections, { chromeless: chromeless === true, stickyActions: stickyActions, fillHeight: fillHeight, screenForm: isScreenForm, children: children }));
+    const footer = (_jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: chromeless === true, stickyActions: stickyActions, fillHeight: fillHeight, ...(unsavedCount !== undefined && { unsavedCount }), railed: sideRail !== undefined }));
+    // Screen form: no card. A padded scroll surface holds the form column and,
+    // from xl, the section navigation; the footer stays pinned below it.
+    if (isScreenForm) {
+        const showsSectionNav = sectionNav !== undefined && sectionNav.length >= SECTION_NAV_MIN_ITEMS;
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [sideRail, _jsx("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: cn("min-h-0 flex-1 overflow-y-auto", screenPaddingClassName), children: _jsxs("div", { className: "flex gap-18", children: [_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-9", screenFormWidth !== undefined
+                                            ? screenFormColumnWidthClassName[screenFormWidth]
+                                            : "max-w-[640px]"), children: [_jsx(InsideScreenFormColumnContext.Provider, { value: true, children: headerRegion }), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), sections] }), showsSectionNav && _jsx(FormSectionNav, { items: sectionNav })] }) })] }), footer] }));
+    }
+    // Pinned footer (fillHeight + stickyActions): the footer is a full-bleed
+    // sibling BELOW the padded shell, so the shell's bottom inset does not float
+    // it above the viewport edge; the shell shrinks (`flex-1`) to make room.
+    const pinnedFooter = isPinnedFooter(stickyActions, fillHeight);
+    const pinnedShellClassName = pinnedFooter ? "h-auto flex-1 pb-6" : undefined;
+    // Tab content (bedienkonzept A1): the head card is the ONLY card on the
+    // screen, so a tabbed projectionDetail's tab content must render as a
+    // sibling of that card, not nest another one around itself — chromeless
+    // skips the card wrapper and its border/padding so sections and footer
+    // sit directly on the page background, same edge as a standalone list
+    // screen. Title/subtitle still render unbordered: RenderEdit's tabs
+    // caller already blanks the per-section title via hideSectionTitles, but
+    // the screen-level subtitle (screen.description) is independent of that
+    // and must survive tabs mode.
+    if (chromeless === true) {
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { maxWidth: "full", ...(fillHeight === true && { fillHeight: true }), className: cn("!p-0", pinnedShellClassName), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col", fillHeight === true && "shrink-0"), children: headerRegion })), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: fillHeight }), sections, !pinnedFooter && footer] }), pinnedFooter && footer] }));
+    }
+    // One card form: title as header (no divider under it), sections divided
+    // between each other, muted action footer. Shell width comes from
+    // FormScreenShell (layout.width, else the app-wide screenWidth default, else
+    // 4xl).
+    return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { ...(width !== undefined && { maxWidth: width }), ...(fillHeight === true && { fillHeight: true }), ...(pinnedShellClassName !== undefined && { className: pinnedShellClassName }), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col gap-6 mb-8", fillHeight === true && "shrink-0"), children: headerRegion })), _jsxs("div", { "data-slot": "card", className: cn(cardSurface(), "overflow-hidden", 
+                        // No flex-1: a fillHeight card sizes to its content (flex's
+                        // initial 0 1 auto) and only claims more than that once its
+                        // FormScreenShell ancestor is itself height-constrained and
+                        // shrinks it back down via min-h-0 — flex-1 would instead force
+                        // it to always fill the remaining height, stretching a short
+                        // relatedList tab to the bottom of the panel (fw#2778).
+                        // The min-height floor keeps the card from collapsing to ~0 on short
+                        // viewports; the shell then overflows and <main> scrolls instead of
+                        // the overflow-hidden card clipping the table.
+                        fillHeight === true && "min-h-64 flex flex-col", pinnedFooter && "flex-1"), children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: true, fillHeight: fillHeight }), sections, !pinnedFooter && footer] })] }), pinnedFooter && footer] }));
+}

package/dist/web/primitives/facet-filter.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import type { DataTableDateRangeFacet, DataTableFacet } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function FacetFilter({ facet, selected, onChange, dense, }: {
+    facet: DataTableFacet;
+    selected: readonly string[];
+    onChange: (field: string, values: readonly string[]) => void;
+    /** Toolbar of a scrollBody table: h32 with the stronger border. */
+    dense?: boolean;
+}): ReactNode;
+export declare function DateRangeFacetFilter({ facet, onChange, }: {
+    facet: DataTableDateRangeFacet;
+    onChange: (field: string, bound: "from" | "to", value: string) => void;
+}): ReactNode;

package/dist/web/primitives/facet-filter.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "../ui/badge.js";
+import { Button as UiButton } from "../ui/button.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import "../react-css-custom-properties.js";
+import { DefaultButton } from "./button.js";
+// ---- DataTable (shadcn: Table) ----
+function sameValueSet(a, b) {
+    return a.length === b.length && a.every((value) => b.includes(value));
+}
+// Single-choice chip row for a facet with `chips`: a chip is pressed while the
+// current selection equals its values, a click replaces the selection.
+function FacetChips({ facet, selected, onChange, }) {
+    const chips = (facet.chips ?? []).filter((chip) => facet.hideEmpty !== true || chip.count !== 0 || sameValueSet(selected, chip.values));
+    return (_jsx("div", { role: "group", "aria-label": facet.label, className: "flex flex-wrap items-center gap-1.5", "data-testid": `facet-${facet.field}`, children: chips.map((chip) => (_jsxs(DefaultButton, { variant: "secondary", size: "sm", pressed: sameValueSet(selected, chip.values), onClick: () => onChange(facet.field, chip.values), testId: `facet-${facet.field}-${chip.id}`, className: "rounded-full", children: [chip.label, facet.showCounts === true && chip.count !== undefined && (_jsx("span", { className: "tabular-nums text-muted-foreground", children: chip.count }))] }, chip.id))) }));
+}
+// Faceted filter dropdown: outline button (like shadcn's "Columns" toggle) +
+// multi-select checkboxes. Active selection -> count badge on the button.
+export function FacetFilter({ facet, selected, onChange, dense = false, }) {
+    const toggle = (value, checked) => {
+        const next = checked ? [...selected, value] : selected.filter((v) => v !== value);
+        onChange(facet.field, next);
+    };
+    if (facet.chips !== undefined) {
+        return _jsx(FacetChips, { facet: facet, selected: selected, onChange: onChange });
+    }
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "h-8 border-border-strong px-2.5 max-md:h-11"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
+}
+// Time-range filter (fw#3104): two native <input type="date"> instead of a
+// dropdown — the browser supplies the calendar, the locale and the keyboard
+// handling, so no date dependency is needed. Each bound constrains the other
+// through min/max so the picker can't offer an inverted span; the caller
+// clamps a typed value on top of that.
+export function DateRangeFacetFilter({ facet, onChange, }) {
+    const inputClass = "h-9 rounded-md border border-input bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 max-md:min-h-11";
+    return (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `facet-daterange-${facet.field}`, children: [_jsx("span", { className: "text-sm text-muted-foreground", children: facet.label }), _jsx("input", { type: "date", className: inputClass, value: facet.from, ...(facet.to !== "" && { max: facet.to }), "aria-label": `${facet.label} from`, "data-testid": `facet-daterange-${facet.field}-from`, onChange: (e) => onChange(facet.field, "from", e.target.value) }), _jsx("span", { className: "text-sm text-muted-foreground", children: "\u2013" }), _jsx("input", { type: "date", className: inputClass, value: facet.to, ...(facet.from !== "" && { min: facet.from }), "aria-label": `${facet.label} to`, "data-testid": `facet-daterange-${facet.field}-to`, onChange: (e) => onChange(facet.field, "to", e.target.value) })] }));
+}

package/dist/web/primitives/field.d.ts

@@ -0,0 +1,63 @@
+import type { FieldIconKey } from "@cosmicdrift/kumiko-framework/ui-types";
+import { type ComponentProps, type CSSProperties, type ReactNode } from "react";
+import { type FieldProps, type InputFillAction, type TrailingInputAction } from "../../index.ts";
+import type { ComboboxOption } from "./combobox.tsx";
+import { SegmentedControl } from "./segmented-select.tsx";
+import "../react-css-custom-properties.ts";
+export declare function fieldLabelId(id: string): string;
+export declare function DefaultField(props: FieldProps): ReactNode;
+declare const FIELD_ICONS: {
+    readonly mail: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly lock: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly hash: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly search: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly user: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly phone: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly calendar: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly link: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly tag: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly building: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly globe: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly key: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+    readonly "map-pin": import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+};
+export declare function fieldIconFor(icon: string | undefined): (typeof FIELD_ICONS)[FieldIconKey] | undefined;
+export declare const FIELD_ICON_CLASS = "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground";
+export declare function withFieldIcon(icon: string | undefined, input: ReactNode): ReactNode;
+type InputAddonProps = {
+    readonly name: string;
+    readonly prefix?: string | undefined;
+    readonly suffix?: string | undefined;
+    readonly fill?: InputFillAction | undefined;
+};
+export declare function withInputAddons(addons: InputAddonProps, input: ReactNode): ReactNode;
+export declare function unitSuffixId(inputId: string): string;
+export declare function withTrailingAction(action: TrailingInputAction | undefined, input: ReactNode, keepWrapper?: boolean): ReactNode;
+type SelectPresentation = "segmented" | "radioList" | "dropdown";
+export declare function defaultSelectPresentation(options: readonly {
+    readonly label: string;
+}[]): SelectPresentation;
+export declare function withoutSegmentedSelectPlaceholder<T extends {
+    readonly value: string;
+}>(options: readonly T[]): readonly T[];
+export declare function SegmentedSelect(props: Omit<ComponentProps<typeof SegmentedControl>, "labelProps">): ReactNode;
+export declare function RadioListSelect({ id, name, value, onChange, options, variant, disabled, required, hasError, }: {
+    readonly id: string;
+    readonly name: string;
+    readonly value: string;
+    readonly onChange: (v: string) => void;
+    readonly options: readonly {
+        readonly value: string;
+        readonly label: string;
+        readonly description?: string;
+        readonly group?: string;
+        readonly disabled?: boolean;
+    }[];
+    readonly variant?: "list" | "card";
+    readonly disabled?: boolean;
+    readonly required?: boolean;
+    readonly hasError?: boolean;
+}): ReactNode;
+export declare function textareaMinHeight(rows: number): CSSProperties;
+export declare function withInlineDisabledHint(option: ComboboxOption): ComboboxOption;
+export {};