ics-ui-kit 0.1.12 → 0.1.14

package/dist/components/table/column-reorder/useColumnReorder.d.ts

@@ -0,0 +1,82 @@
+import { PointerEvent as ReactPointerEvent } from 'react';
+/** Атрибут, по которому хук находит в DOM все ячейки одной колонки. */
+export declare const COLUMN_KEY_ATTRIBUTE = "data-column-key";
+export interface UseColumnReorderOptions<K extends string> {
+    /** Полный видимый порядок колонок — включая те, что двигать нельзя. */
+    columns: K[];
+    /** Ширины колонок: из них считаются границы слотов. Обычно это `widths` из `useColumnResize`. */
+    widths: Record<K, number>;
+    /** Новый порядок. Хук ничего не хранит — состояние остаётся у вызывающей стороны. */
+    onReorder: (next: K[]) => void;
+    /**
+     * Колонки, которые нельзя ни таскать, ни занимать: например колонка иерархии,
+     * которая обязана оставаться первой. Свой индекс они сохраняют при любой перестановке.
+     */
+    locked?: K[];
+}
+export interface UseColumnReorderResult<K extends string> {
+    /** Колонка, которую тащат прямо сейчас. Годится для подсветки грипа. */
+    dragKey: K | null;
+    /** Пропы для ручки-грипа. Драг начинается только с неё. */
+    getGripProps: (key: K) => {
+        onPointerDown: (event: ReactPointerEvent) => void;
+        style: {
+            touchAction: "none";
+        };
+    };
+    /** Пропы для каждой ячейки колонки — и в шапке, и в теле. Без них колонка не поедет. */
+    getColumnProps: (key: K) => Record<string, string>;
+}
+/**
+ * Перетаскивание колонок таблицы: колонка едет за курсором, соседи разъезжаются, отпускание
+ * укладывает её в новый слот.
+ *
+ * **Почему не библиотека.** Универсальные DnD-библиотеки (dnd-kit и подобные) существуют ради
+ * произвольной геометрии: они измеряют узлы, ищут коллизии, держат подписку на каждый
+ * перетаскиваемый элемент. Здесь ничего этого не нужно — колонки лежат в один ряд, а их ширины
+ * уже известны из `useColumnResize`, так что смещение слота это префиксная сумма, а выбор цели —
+ * ближайший центр. Ровно то же самое делает `closestCenter`, только без обхода DOM.
+ *
+ * Вторая причина — цена на большой таблице. Библиотечный подход требует хука на **каждую**
+ * ячейку, включая ячейки тела, иначе колонка не поедет целиком: на таблице 7×34 это больше
+ * двухсот подписок и столько же ререндеров на каждое движение мыши. Здесь во время драга
+ * React не участвует вовсе: трансформации пишутся прямо в DOM, а состояние меняется один раз,
+ * когда кнопку отпустили. Тот же приём и по той же причине используется в `useColumnResize`.
+ *
+ * **Оговорка про инлайновые стили.** На время драга хук пишет ячейкам `transform`,
+ * `transition`, `position`, `z-index` и `box-shadow` — последний рисует левый край, которого
+ * у плывущей колонки нет (см. `setColumnSeparator`). Свои значения этих свойств ячейка
+ * получает обратно после отпускания: хук снимает их при первом касании и возвращает
+ * в конце. Классы при этом не трогаются вовсе, поэтому оформление классами живёт своей
+ * жизнью, а тень от хука просто лежит поверх на время перетаскивания.
+ *
+ * **Оговорка про фон.** Плывущая колонка на время перетаскивания получает классы
+ * `opaqueCellStyles`: строка прозрачна, и без непрозрачного фона колонка едет поверх соседей
+ * вместе с их текстом, наложенным на свой. Тот же рецепт, что у закреплённой колонки, — и по
+ * той же причине. Подсветку строки он сохраняет, поэтому наведение и `selected` под колонкой
+ * не пропадают.
+ *
+ * **Чего нет.** Перетаскивания с клавиатуры: правильный клавиатурный аналог — пункты меню
+ * «сдвинуть влево / вправо», а не имитация драга. Автопрокрутки контейнера у края тоже нет —
+ * при перетаскивании за пределы видимой области колонка просто упрётся в край.
+ *
+ * **Как подключается.** `getGripProps` — на ручку, `getColumnProps` — на `TableHead`
+ * и на каждую `TableCell` этой колонки. Драг начинается только с ручки: `pointerdown`
+ * по всей ячейке конфликтовал бы с ресайзером, который начинается так же.
+ *
+ * @example
+ * const [order, setOrder] = useState(["tree", "client", "sum"]);
+ *
+ * const { getGripProps, getColumnProps } = useColumnReorder({
+ *   columns: order,
+ *   widths, // из useColumnResize
+ *   onReorder: setOrder,
+ *   locked: ["tree"]
+ * });
+ *
+ * <TableHead {...getColumnProps(key)}>
+ *   <span {...getGripProps(key)}>⠿</span>
+ * </TableHead>
+ * <TableCell {...getColumnProps(key)}>…</TableCell>
+ */
+export declare function useColumnReorder<K extends string>({ columns, widths, onReorder, locked }: UseColumnReorderOptions<K>): UseColumnReorderResult<K>;

package/dist/components/table/column-reorder.d.ts

@@ -0,0 +1,2 @@
+export * from './column-reorder/index'
+export {}

package/dist/components/table/column-reorder.js

@@ -0,0 +1,6 @@
+import { C as r, u as s } from "../../useColumnReorder-BxVZQ_Y5.js";
+export {
+  r as COLUMN_KEY_ATTRIBUTE,
+  s as useColumnReorder
+};
+//# sourceMappingURL=column-reorder.js.map

package/dist/components/table/column-reorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-reorder.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/table/column-resize/columnAutoFit.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Автофит колонки по содержимому (двойной клик по ручке ресайза).
+ *
+ * Меряет «естественную» ширину контента колонки: клонирует заголовок и видимые ячейки
+ * тела в скрытую sandbox-таблицу с `table-layout: auto` / `width: max-content` и берёт
+ * итоговую ширину. `cloneCell` переносит на клон вычисленные шрифтовые стили, иначе
+ * замер вне исходного каскада получился бы неверным.
+ */
+export interface ColumnAutoFitOptions {
+    minWidth: number;
+    maxWidth: number;
+}
+/**
+ * Ширина колонки по её содержимому, в пикселях. `undefined` — если замерить не удалось
+ * (заголовок вне таблицы). Результат зажат между `minWidth` и `maxWidth`.
+ *
+ * @example
+ * const width = getColumnAutoFitWidth(headerElement, { minWidth: 60, maxWidth: 500 });
+ * if (width) setWidths((current) => ({ ...current, name: width }));
+ */
+export declare function getColumnAutoFitWidth(header: HTMLTableCellElement, options: ColumnAutoFitOptions): number | undefined;

package/dist/components/table/column-resize/columnResizeSession.d.ts

@@ -0,0 +1,9 @@
+export declare class ColumnResizeSession {
+    private minWidth;
+    private state?;
+    constructor(minWidth: number);
+    start(columnKey: string, startWidth: number, startX: number): void;
+    getWidth(currentX: number): number | undefined;
+    getColumnKey(): string | undefined;
+    end(): void;
+}

package/dist/components/table/column-resize/index.d.ts

@@ -0,0 +1,3 @@
+export { ColumnResizeSession } from './columnResizeSession';
+export { getColumnAutoFitWidth, type ColumnAutoFitOptions } from './columnAutoFit';
+export { useColumnResize, type ResizableColumn, type UseColumnResizeOptions, type UseColumnResizeResult } from './useColumnResize';

package/dist/components/table/column-resize/useColumnResize.d.ts

@@ -0,0 +1,52 @@
+import { MouseEvent as ReactMouseEvent, RefObject } from 'react';
+export interface ResizableColumn<K extends string = string> {
+    key: K;
+    defaultWidth: number;
+    minWidth: number;
+    maxWidth?: number;
+}
+export interface UseColumnResizeOptions {
+    /** Глобальный минимум-подстраховка для драга. */
+    minWidth?: number;
+    /** Дефолтный максимум для колонок без своего `maxWidth` (используется в драге и автофите). */
+    maxWidth?: number;
+}
+export interface UseColumnResizeResult<K extends string> {
+    /**
+     * Ref на саму таблицу — вешается на `<Table ref>`.
+     *
+     * Именно `RefObject<HTMLTableElement>`, а не `RefObject<HTMLTableElement | null>`: это то,
+     * что возвращает `useRef` в типах React 18, и то, что принимает проп `ref` у `forwardRef`.
+     * Аннотация с `| null` пришла из React 19 и делала результат хука непередаваемым в `ref`.
+     */
+    tableRef: RefObject<HTMLTableElement>;
+    widths: Record<K, number>;
+    totalWidth: number;
+    getHeaderRef: (key: K) => (el: HTMLTableCellElement | null) => void;
+    getResizeHandleProps: (key: K) => {
+        onMouseDown: (event: ReactMouseEvent) => void;
+        onDoubleClick: (event: ReactMouseEvent) => void;
+    };
+    reset: () => void;
+}
+/**
+ * Ресайз и автофит колонок обычной HTML-таблицы, без table-библиотек.
+ *
+ * Во время `mousemove` ширина мутируется напрямую в DOM (`th.style.width`, `table.style.width`)
+ * через рефы — без React state на каждый пиксель. На `mouseup` — один коммит в state.
+ *
+ * `columns` должен быть стабильной ссылкой (модульная константа или `useMemo` вызывающей
+ * стороны) — из неё один раз считаются дефолтные ширины.
+ *
+ * @example
+ * const COLUMNS = [{ key: "name", defaultWidth: 240, minWidth: 120 }];
+ *
+ * const { tableRef, widths, totalWidth, getHeaderRef, getResizeHandleProps } = useColumnResize(COLUMNS);
+ *
+ * <Table ref={tableRef} style={{ width: totalWidth, tableLayout: "fixed" }}>
+ *   <TableHead ref={getHeaderRef("name")} className="relative" style={{ width: widths.name }}>
+ *     Контрагент
+ *     <TableResizeHandle {...getResizeHandleProps("name")} />
+ *   </TableHead>
+ */
+export declare function useColumnResize<K extends string>(columns: ResizableColumn<K>[], options?: UseColumnResizeOptions): UseColumnResizeResult<K>;

package/dist/components/table/column-resize.d.ts

@@ -0,0 +1,2 @@
+export * from './column-resize/index'
+export {}

package/dist/components/table/column-resize.js

@@ -0,0 +1,7 @@
+import { C as o, g as u, u as i } from "../../useColumnResize-wjfEyBBg.js";
+export {
+  o as ColumnResizeSession,
+  u as getColumnAutoFitWidth,
+  i as useColumnResize
+};
+//# sourceMappingURL=column-resize.js.map

package/dist/components/table/column-resize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column-resize.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/table/editable/TableFillHandle.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+export type TableFillHandleProps = React.HTMLAttributes<HTMLSpanElement>;
+/**
+ * Ручка автозаполнения — точка на нижнем правом углу выделения, за которую тянут значения.
+ *
+ * Рисуется внутри угловой ячейки диапазона и позиционируется от неё, поэтому ячейке нужен
+ * `position: relative` — он уже есть в `cellStateStyles`.
+ *
+ * По макету ручка круглая (`border radius/full`, 10px), хотя в Excel это квадрат — оставлено
+ * как в макете.
+ *
+ * Кит даёт только вид и попадание курсором: что протянется, куда и как далеко — решает
+ * прикладной код по `onMouseDown` и движению мыши.
+ *
+ * **Почему `span`, а не `button`.** Ручка работает только протягиванием мыши, клавиатурного
+ * аналога у неё нет. Настоящая кнопка встала бы в порядок обхода табом и по Enter не делала
+ * бы ничего — остановка фокуса, которая ничем не отвечает, хуже её отсутствия. Роль и подпись
+ * при этом остаются: скринридер ручку видит и называет.
+ *
+ * @example
+ * {isCorner && <TableFillHandle onMouseDown={() => setFillFrom(rowIndex)} />}
+ */
+export declare const TableFillHandle: React.ForwardRefExoticComponent<TableFillHandleProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/table/editable/cellRange.d.ts

@@ -0,0 +1,83 @@
+import { CSSProperties } from 'react';
+/** Адрес ячейки в сетке: индекс видимой строки и индекс видимой колонки. */
+export type CellRef = {
+    row: number;
+    col: number;
+};
+/** Прямоугольный диапазон ячеек. Границы включительно, поэтому одна ячейка — тоже диапазон. */
+export type CellRange = {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+};
+/**
+ * Диапазон по двум углам — якорю выделения и текущей ячейке.
+ *
+ * Порядок углов не важен: тянут выделение в любую сторону, поэтому границы нормализуются.
+ * Это геометрия, а не поведение: где стоит якорь, когда он переставляется и что вообще
+ * считается выделением — знание прикладного кода.
+ *
+ * @example
+ * cellRange({ row: 4, col: 1 }, { row: 2, col: 3 }); // { top: 2, bottom: 4, left: 1, right: 3 }
+ */
+export declare const cellRange: (anchor: CellRef, focus: CellRef) => CellRange;
+/** Попадает ли ячейка в диапазон. Отсутствие диапазона — не попадает, проверять отдельно не нужно. */
+export declare const inCellRange: (range: CellRange | null | undefined, cell: CellRef) => boolean;
+/** Как выглядит грань диапазона: цвет и толщина линии. */
+export type CellRangeEdge = {
+    color: string;
+    width: number;
+};
+/**
+ * Готовые рамки диапазонов: `selection` — то, что выделено, `preview` — то, что получится,
+ * если отпустить сейчас (протягивание значений, перенос).
+ *
+ * Предпросмотр намеренно тоньше и бледнее выделения: две одинаковые рамки на экране
+ * невозможно различить, а они означают разное — состоявшееся и предполагаемое.
+ *
+ * Список открытый: своя рамка — это `{ color, width }` с любым CSS-цветом.
+ */
+export declare const CELL_RANGE_EDGE: {
+    readonly selection: {
+        readonly color: "hsl(var(--primary-accent))";
+        readonly width: 2;
+    };
+    readonly preview: {
+        readonly color: "hsl(var(--primary-border) / 0.75)";
+        readonly width: 1;
+    };
+};
+/**
+ * Грани диапазона, проходящие через эту ячейку, — готовая строка для `box-shadow`.
+ *
+ * Рамка обводит диапазон целиком, а не каждую его ячейку: грань достаётся только тем ячейкам,
+ * что стоят по краю, поэтому внутри диапазона линий нет. Ячейка вне диапазона (и отсутствие
+ * диапазона) даёт пустую строку — проверять попадание перед вызовом не нужно.
+ *
+ * **Почему тень, а не рамка.** `border` входит в бокс ячейки и раздвинул бы колонки на
+ * ширину линии, `outline` обвёл бы каждую ячейку целиком. `inset`-тень рисуется внутри
+ * ячейки и ничего не двигает.
+ *
+ * Значения считаются на ходу и потому уезжают в инлайновый стиль, но цвет всё равно берётся
+ * из токена, а не хардкодом.
+ *
+ * @example
+ * cellRangeEdges(selection, { row: 2, col: 0 }); // "inset 0 2px 0 0 …, inset 2px 0 0 0 …"
+ */
+export declare const cellRangeEdges: (range: CellRange | null | undefined, cell: CellRef, edge?: CellRangeEdge) => string;
+/**
+ * Рамки нескольких диапазонов в одном `style` ячейки. Первый аргумент — верхняя тень.
+ *
+ * Ложные и пустые значения отбрасываются, поэтому условия пишутся прямо в аргументах,
+ * а ячейка без единой грани не получает инлайнового стиля вовсе.
+ *
+ * @example
+ * <TableCell
+ *   style={cellRangeStyle(
+ *     cellRangeEdges(selection, cell),
+ *     cellRangeEdges(fillPreview, cell, CELL_RANGE_EDGE.preview)
+ *   )}
+ * >
+ */
+export declare const cellRangeStyle: (...shadows: (string | false | null | undefined)[]) => CSSProperties;

package/dist/components/table/editable/editableCell.d.ts

@@ -0,0 +1,90 @@
+import { VariantProps, TVReturnType } from 'tailwind-variants';
+/**
+ * Ячейка редактируемой таблицы: скелет сетки и заливка по состоянию.
+ *
+ * Скелет один на все состояния. `relative` — контекст позиционирования для ручки
+ * автозаполнения (`TableFillHandle`), `cursor-cell` — курсор сетки вместо стрелки,
+ * `select-none` — чтобы протягивание выделения мышью не выделяло текст.
+ *
+ * **Состояние — одна ось, а не набор флагов.** Все состояния красят одно и то же —
+ * `background-color`, поэтому одновременно видно ровно одно. Будь это булевы пропы,
+ * у ячейки «изменена и нередактируема» победил бы не тот класс, который передали последним,
+ * а тот, что стоит ниже в стилях: порядок в атрибуте `class` браузер не учитывает.
+ * С одним `state` выбор делается явно — и делает его прикладной код, потому что приоритет
+ * состояний зависит от задачи: где-то важнее показать правку, где-то — запрет на неё.
+ *
+ * Что означают состояния и когда их включать, кит не знает: «изменена» — это правка,
+ * не отправленная на сервер, или отличие от прошлой версии? Ячейка только красится.
+ *
+ * | Состояние    | Смысл                                                        |
+ * | ------------ | ------------------------------------------------------------ |
+ * | `readonly`   | правка запрещена — приглушённый текст на серой заливке       |
+ * | `modified`   | значение изменено                                            |
+ * | `editing`    | открыт редактор — та же заливка плюс кольцо фокуса           |
+ * | `fillSource` | ячейка, из которой тянут значения                            |
+ *
+ * @example
+ * <TableCell
+ *   className={cellStateStyles({
+ *     state: isEditing ? "editing" : isModified ? "modified" : readonly ? "readonly" : undefined,
+ *     className: column.numeric ? "text-right tabular-nums" : undefined
+ *   })}
+ * >
+ */
+export declare const cellStateStyles: TVReturnType<{
+    state: {
+        readonly: string;
+        fillSource: string;
+        modified: string;
+        editing: string;
+    };
+}, undefined, "relative cursor-cell select-none", {
+    state: {
+        readonly: string;
+        fillSource: string;
+        modified: string;
+        editing: string;
+    };
+}, undefined, TVReturnType<{
+    state: {
+        readonly: string;
+        fillSource: string;
+        modified: string;
+        editing: string;
+    };
+}, undefined, "relative cursor-cell select-none", unknown, unknown, undefined>>;
+/**
+ * Поле правки внутри ячейки — `input`, `textarea` или редактируемый `div`.
+ *
+ * Прозрачный фон обязателен: заливку ячейка уже нарисовала своим состоянием, и собственный
+ * фон поля закрыл бы её. Снятый `outline` — по той же причине: рамку правки рисует ячейка
+ * (`state: "editing"`), а вторая обводка внутри первой выглядит браком.
+ *
+ * `multiline` возвращает выделение текста, снятое у ячейки ради протягивания мышью, и учит
+ * поле переносам: без `whitespace-pre-wrap` переносы в значении схлопнутся в пробелы,
+ * без `break-words` длинное слово растянет колонку.
+ *
+ * @example
+ * <input className={cellEditorStyles({ className: column.numeric ? "text-right" : undefined })} />
+ * <div contentEditable className={cellEditorStyles({ multiline: true })} />
+ */
+export declare const cellEditorStyles: TVReturnType<{
+    multiline: {
+        true: string;
+    };
+}, undefined, "w-full bg-transparent outline-none", {
+    multiline: {
+        true: string;
+    };
+}, undefined, TVReturnType<{
+    multiline: {
+        true: string;
+    };
+}, undefined, "w-full bg-transparent outline-none", unknown, unknown, undefined>>;
+/**
+ * Состояние ячейки — то, что она означает прямо сейчас.
+ *
+ * Выведено из самого `cellStateStyles`, поэтому список состояний в типе и в стилях
+ * не разъезжается.
+ */
+export type CellState = NonNullable<VariantProps<typeof cellStateStyles>["state"]>;

package/dist/components/table/editable/index.d.ts

@@ -0,0 +1,3 @@
+export { cellStateStyles, cellEditorStyles, type CellState } from './editableCell';
+export { cellRange, inCellRange, cellRangeEdges, cellRangeStyle, CELL_RANGE_EDGE, type CellRef, type CellRange, type CellRangeEdge } from './cellRange';
+export { TableFillHandle, type TableFillHandleProps } from './TableFillHandle';

package/dist/components/table/editable.d.ts

@@ -0,0 +1,2 @@
+export * from './editable/index'
+export {}

package/dist/components/table/editable.js

@@ -0,0 +1,12 @@
+import { C as a, T as s, a as t, b as c, d as n, e as E, c as g, i as R } from "../../TableFillHandle-C_yvCTSl.js";
+export {
+  a as CELL_RANGE_EDGE,
+  s as TableFillHandle,
+  t as cellEditorStyles,
+  c as cellRange,
+  n as cellRangeEdges,
+  E as cellRangeStyle,
+  g as cellStateStyles,
+  R as inCellRange
+};
+//# sourceMappingURL=editable.js.map

package/dist/components/table/editable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/table/index.d.ts

@@ -1 +1,8 @@
-export { Table, TableHeader, TableBody, TableBodyContainer, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './Table';
+export { Table, TableHeader, TableBody, TableBodyContainer, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableResizeHandle, type TableProps, type TableHeaderProps, type TableFooterProps, type TableHeadProps, type TableRowProps, type TableResizeHandleProps } from './Table';
+export { useColumnResize, getColumnAutoFitWidth, ColumnResizeSession, type ResizableColumn, type UseColumnResizeOptions, type UseColumnResizeResult, type ColumnAutoFitOptions } from './column-resize';
+export { useColumnReorder, COLUMN_KEY_ATTRIBUTE, type UseColumnReorderOptions, type UseColumnReorderResult } from './column-reorder';
+export { opaqueCellStyles } from './opaqueCell';
+export { tableRowTints, TABLE_ROW_TINT, TABLE_ROW_TINT_LAYERS, TABLE_ROW_TINT_LAYERS_AFTER } from './rowTint';
+export * from './tree';
+export * from './editable';
+export * from './sticky';

package/dist/components/table/opaqueCell.d.ts

@@ -0,0 +1,47 @@
+import { TVReturnType } from 'tailwind-variants';
+/**
+ * Ячейка с непрозрачным фоном, сохраняющая подсветку строки.
+ *
+ * Нужна везде, где ячейка выезжает из потока и под ней оказывается чужое содержимое:
+ * закреплённая колонка (`stickyCellStyles`) и колонка, которую перетаскивают
+ * (`useColumnReorder`). Обе задачи одинаковые, поэтому рецепт один.
+ *
+ * **Почему фон нельзя просто задать.** Строка прозрачна — красит подложка секции
+ * (`TableBody`, `TableHeader`), и такой ячейке нужен свой непрозрачный фон. Но подменять
+ * им подсветку строки нельзя: `hover:bg-*` положил бы поверх полупрозрачный цвет, и чужое
+ * содержимое снова стало бы просвечивать. Поэтому подсветку рисует слой `::after` теми же
+ * переменными, что и сама строка, — заливкой (`--table-row-bg`, `--table-row-bg-hover`)
+ * и списком слоёв (`--table-row-tints`). Переменные наследуются от `tr` к ячейке сами,
+ * связывать их не нужно.
+ *
+ * Повторяются обе части: если рисовать только заливку, у закреплённой колонки пропадёт любая
+ * подкраска — и выделение, и деактивация, и что там ещё собрал потребитель.
+ *
+ * `transition-colors` совпадает с переходом у `TableRow`, поэтому строка подсвечивается
+ * целиком, а не двумя рывками. Разделители слой не задевает: `inset-0` у абсолютного
+ * потомка отсчитывается от padding-box, а границы лежат снаружи него.
+ *
+ * **Требует контекста позиционирования** — `sticky` у закреплённой ячейки, `relative`
+ * у перетаскиваемой: иначе `::after` растянется не по ячейке, а по ближайшему
+ * позиционированному предку.
+ *
+ * @example
+ * <TableCell className={opaqueCellStyles({ className: "relative" })}>…</TableCell>
+ * <TableHead className={opaqueCellStyles({ part: "head", className: "relative" })}>…</TableHead>
+ */
+export declare const opaqueCellStyles: TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, string[], {
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/table/rowTint.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+/**
+ * Подкраска строки таблицы — стопка полупрозрачных слоёв поверх её заливки.
+ *
+ * **Когда нужно.** Когда состояний у строки больше одного. Заливка у строки одна
+ * (`background-color`), и второе состояние вытеснило бы первое: выделенная деактивированная
+ * строка выглядела бы просто выделенной. Слои же складываются альфами — и между собой,
+ * и с заливкой, какой бы она ни была, включая заданную вами `className="bg-…"`.
+ *
+ * **Почему это не пропсы строки.** `TableRow` не знает ни про «выделено», ни про «отключено»:
+ * что означает подсветка и когда её включать — знание прикладного кода. Кит даёт механизм
+ * (слои), готовые цвета (`TABLE_ROW_TINT`) и рисующие их классы; собирает их потребитель.
+ *
+ * @example
+ * <TableRow style={tableRowTints(isSelected && TABLE_ROW_TINT.selected, isInactive && TABLE_ROW_TINT.inactive)}>
+ */
+/**
+ * Готовые цвета подкрасок: `selected` — выделенная строка, `inactive` — деактивированная.
+ *
+ * Оба полупрозрачные, поэтому сочетаются и друг с другом, и с наведением: наведение красит
+ * заливку под слоями, и выделенная строка под курсором темнеет.
+ *
+ * Список открытый: свои состояния задавайте своими значениями, слоем годится любой
+ * полупрозрачный CSS-цвет.
+ */
+export declare const TABLE_ROW_TINT: {
+    readonly selected: "hsl(var(--alpha-high-05))";
+    readonly inactive: "hsl(var(--status-error) / 5%)";
+};
+/**
+ * Слои подкраски для `style` строки. Первый аргумент — верхний слой, каждый следующий
+ * ложится под ним, под всеми — заливка строки.
+ *
+ * **Цвета должны быть полупрозрачными**, и следит за этим вызывающий код: значения уходят
+ * в `background-image` как есть. Непрозрачный цвет закроет всё, что под ним, — остальные
+ * слои и заливку вместе с наведением.
+ *
+ * Ложные значения отбрасываются, поэтому условия пишутся прямо в аргументах:
+ * `tableRowTints(isSelected && TABLE_ROW_TINT.selected)`. Без единого слоя строка красится
+ * одной заливкой.
+ *
+ * Результат — инлайновый стиль с CSS-переменной; она наследуется от `tr` к ячейкам, поэтому
+ * закреплённые и перетаскиваемые колонки подхватывают подкраску сами.
+ *
+ * @example
+ * <TableRow
+ *   style={tableRowTints(
+ *     isSelected && TABLE_ROW_TINT.selected,
+ *     isOverdue && "hsl(var(--status-warning) / 12%)"
+ *   )}
+ * >
+ */
+export declare const tableRowTints: (...tints: (string | false | null | undefined)[]) => CSSProperties;
+/**
+ * Класс, рисующий слои подкраски на строке. Уже применён к `TableRow` — нужен, только если
+ * вы рисуете строку своим элементом.
+ */
+export declare const TABLE_ROW_TINT_LAYERS = "bg-[image:var(--table-row-tints,none)]";
+/** То же самое для слоя `::after` непрозрачной ячейки — см. `opaqueCellStyles`. */
+export declare const TABLE_ROW_TINT_LAYERS_AFTER = "after:bg-[image:var(--table-row-tints,none)]";

package/dist/components/table/sticky/index.d.ts

@@ -0,0 +1 @@
+export { stickyCellStyles, stickyOffset, STICKY_HEADER, STICKY_FOOTER } from './stickyCell';