ics-ui-kit 0.1.13 → 0.1.15

package/dist/lib/utils/dom.d.ts

@@ -2,5 +2,77 @@
  * Проверяет, переполнен ли элемент (дочерние элементы выходят за пределы родительского элемента)
  * @param element - HTML элемент для проверки
  * @returns true, если элемент переполнен по ширине или высоте
+ *
+ * @example
+ * // подсказку показываем только там, где текст обрезан
+ * const truncated = isElementOverflowing(labelRef.current);
  */
 export declare const isElementOverflowing: (element: HTMLElement) => boolean;
+/**
+ * Ставит каретку в `input`/`textarea` по горизонтальной координате указателя (`clientX`).
+ *
+ * Нужно там, где поле появляется по клику уже после самого клика — например, при переходе
+ * ячейки таблицы в режим редактирования по двойному щелчку: без этого каретка встаёт
+ * в начало или конец, а не туда, куда целился пользователь.
+ *
+ * `caretPositionFromPoint` / `caretRangeFromPoint` здесь бесполезны: содержимое `input`
+ * не является частью DOM-дерева, и Range/Selection API до него не достаёт — вернётся сам
+ * элемент, а не позиция в тексте. Поэтому индекс считается вручную: текст измеряется
+ * на offscreen canvas тем же шрифтом, и выбирается ближайшая к точке граница символа.
+ * Ширины префиксов монотонно растут, так что перебор обрывается, как только начал удаляться
+ * от цели.
+ *
+ * Учитывается только горизонталь, поэтому для многострочного текста функция не годится —
+ * там нужен `placeCaretAtClientPoint` по `contenteditable`.
+ *
+ * Возвращает `false`, если поставить каретку не удалось (поле пустое, тип поля не поддерживает
+ * выделение или canvas недоступен) — вызывающему коду в этом случае стоит оставить поведение
+ * по умолчанию.
+ *
+ * @example
+ * // координата запоминается на dblclick, применяется, когда поле получило фокус
+ * <input
+ *   autoFocus
+ *   onFocus={(event) => {
+ *     const input = event.currentTarget;
+ *     if (!placeCaretAtPoint(input, caretX)) placeCaretAtEnd(input);
+ *   }}
+ * />
+ */
+export declare const placeCaretAtPoint: (element: HTMLInputElement | HTMLTextAreaElement, clientX: number) => boolean;
+/**
+ * Ставит каретку в `contenteditable` по точке указателя.
+ *
+ * В отличие от `input`, текст здесь — обычные узлы DOM, поэтому измерять ничего не нужно:
+ * браузер сам отдаёт позицию по координатам. Работает и с переносами, так что это тот случай,
+ * когда многострочная правка делается редактируемым `div`, а не `textarea`.
+ *
+ * Возвращает `false`, если точка не попала в текст элемента, — вызывающему коду стоит
+ * поставить каретку в конец через `placeCaretAtEnd`.
+ *
+ * @example
+ * const editor = event.currentTarget;
+ * if (!placeCaretAtClientPoint(editor, event.clientX, event.clientY)) placeCaretAtEnd(editor);
+ */
+export declare const placeCaretAtClientPoint: (element: HTMLElement, clientX: number, clientY: number) => boolean;
+/**
+ * Ставит каретку в конец содержимого `contenteditable` — поведение F2 в Excel.
+ *
+ * @example
+ * // F2 открывает правку с кареткой в конце
+ * if (event.key === "F2") placeCaretAtEnd(editorRef.current);
+ */
+export declare const placeCaretAtEnd: (element: HTMLElement) => void;
+/**
+ * Вставляет текст в текущую позицию каретки внутри `contenteditable`, заменяя выделенное.
+ *
+ * Нужно на вставке из буфера: по умолчанию `contenteditable` принимает разметку, и в ячейку
+ * приезжает чужое форматирование вместе с текстом.
+ *
+ * @example
+ * onPaste={(event) => {
+ *   event.preventDefault();
+ *   insertTextAtCaret(event.currentTarget, event.clipboardData.getData("text/plain"));
+ * }}
+ */
+export declare const insertTextAtCaret: (element: HTMLElement, text: string) => void;

package/dist/opaqueCell-SGaiyL54.js

@@ -0,0 +1,31 @@
+import { T as r } from "./index-BVqs-uqP.js";
+const n = {
+  selected: "hsl(var(--alpha-high-05))",
+  inactive: "hsl(var(--status-error) / 5%)"
+}, l = (...e) => {
+  const a = e.filter(Boolean).map((t) => `linear-gradient(${t},${t})`);
+  return a.length ? { "--table-row-tints": a.join(",") } : {};
+}, i = "bg-[image:var(--table-row-tints,none)]", o = "after:bg-[image:var(--table-row-tints,none)]", b = r({
+  base: [
+    "after:pointer-events-none after:absolute after:inset-0 after:transition-colors",
+    "after:bg-[color:var(--table-row-bg)] [tr:hover>&]:after:bg-[color:var(--table-row-bg-hover)]",
+    o
+  ],
+  variants: {
+    part: {
+      cell: "bg-secondary-bg",
+      head: "bg-primary-bg"
+    }
+  },
+  defaultVariants: {
+    part: "cell"
+  }
+});
+export {
+  n as T,
+  i as a,
+  o as b,
+  b as o,
+  l as t
+};
+//# sourceMappingURL=opaqueCell-SGaiyL54.js.map

package/dist/opaqueCell-SGaiyL54.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opaqueCell-SGaiyL54.js","sources":["../src/components/table/rowTint.ts","../src/components/table/opaqueCell.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * Подкраска строки таблицы — стопка полупрозрачных слоёв поверх её заливки.\n *\n * **Когда нужно.** Когда состояний у строки больше одного. Заливка у строки одна\n * (`background-color`), и второе состояние вытеснило бы первое: выделенная деактивированная\n * строка выглядела бы просто выделенной. Слои же складываются альфами — и между собой,\n * и с заливкой, какой бы она ни была, включая заданную вами `className=\"bg-…\"`.\n *\n * **Почему это не пропсы строки.** `TableRow` не знает ни про «выделено», ни про «отключено»:\n * что означает подсветка и когда её включать — знание прикладного кода. Кит даёт механизм\n * (слои), готовые цвета (`TABLE_ROW_TINT`) и рисующие их классы; собирает их потребитель.\n *\n * @example\n * <TableRow style={tableRowTints(isSelected && TABLE_ROW_TINT.selected, isInactive && TABLE_ROW_TINT.inactive)}>\n */\n\n/**\n * Готовые цвета подкрасок: `selected` — выделенная строка, `inactive` — деактивированная.\n *\n * Оба полупрозрачные, поэтому сочетаются и друг с другом, и с наведением: наведение красит\n * заливку под слоями, и выделенная строка под курсором темнеет.\n *\n * Список открытый: свои состояния задавайте своими значениями, слоем годится любой\n * полупрозрачный CSS-цвет.\n */\nexport const TABLE_ROW_TINT = {\n\tselected: \"hsl(var(--alpha-high-05))\",\n\tinactive: \"hsl(var(--status-error) / 5%)\"\n} as const;\n\n/**\n * Слои подкраски для `style` строки. Первый аргумент — верхний слой, каждый следующий\n * ложится под ним, под всеми — заливка строки.\n *\n * **Цвета должны быть полупрозрачными**, и следит за этим вызывающий код: значения уходят\n * в `background-image` как есть. Непрозрачный цвет закроет всё, что под ним, — остальные\n * слои и заливку вместе с наведением.\n *\n * Ложные значения отбрасываются, поэтому условия пишутся прямо в аргументах:\n * `tableRowTints(isSelected && TABLE_ROW_TINT.selected)`. Без единого слоя строка красится\n * одной заливкой.\n *\n * Результат — инлайновый стиль с CSS-переменной; она наследуется от `tr` к ячейкам, поэтому\n * закреплённые и перетаскиваемые колонки подхватывают подкраску сами.\n *\n * @example\n * <TableRow\n *   style={tableRowTints(\n *     isSelected && TABLE_ROW_TINT.selected,\n *     isOverdue && \"hsl(var(--status-warning) / 12%)\"\n *   )}\n * >\n */\nexport const tableRowTints = (...tints: (string | false | null | undefined)[]): CSSProperties => {\n\tconst layers = tints.filter(Boolean).map((tint) => `linear-gradient(${tint},${tint})`);\n\n\t// `linear-gradient(цвет, цвет)` — способ подать сплошную заливку как изображение: слоями\n\t// умеет быть только `background-image`, а `background-color` — единственный и последний.\n\treturn layers.length ? ({ \"--table-row-tints\": layers.join(\",\") } as CSSProperties) : {};\n};\n\n/**\n * Класс, рисующий слои подкраски на строке. Уже применён к `TableRow` — нужен, только если\n * вы рисуете строку своим элементом.\n */\nexport const TABLE_ROW_TINT_LAYERS = \"bg-[image:var(--table-row-tints,none)]\";\n\n/** То же самое для слоя `::after` непрозрачной ячейки — см. `opaqueCellStyles`. */\nexport const TABLE_ROW_TINT_LAYERS_AFTER = \"after:bg-[image:var(--table-row-tints,none)]\";\n","import { tv } from \"tailwind-variants\";\nimport { TABLE_ROW_TINT_LAYERS_AFTER } from \"./rowTint\";\n\n/**\n * Ячейка с непрозрачным фоном, сохраняющая подсветку строки.\n *\n * Нужна везде, где ячейка выезжает из потока и под ней оказывается чужое содержимое:\n * закреплённая колонка (`stickyCellStyles`) и колонка, которую перетаскивают\n * (`useColumnReorder`). Обе задачи одинаковые, поэтому рецепт один.\n *\n * **Почему фон нельзя просто задать.** Строка прозрачна — красит подложка секции\n * (`TableBody`, `TableHeader`), и такой ячейке нужен свой непрозрачный фон. Но подменять\n * им подсветку строки нельзя: `hover:bg-*` положил бы поверх полупрозрачный цвет, и чужое\n * содержимое снова стало бы просвечивать. Поэтому подсветку рисует слой `::after` теми же\n * переменными, что и сама строка, — заливкой (`--table-row-bg`, `--table-row-bg-hover`)\n * и списком слоёв (`--table-row-tints`). Переменные наследуются от `tr` к ячейке сами,\n * связывать их не нужно.\n *\n * Повторяются обе части: если рисовать только заливку, у закреплённой колонки пропадёт любая\n * подкраска — и выделение, и деактивация, и что там ещё собрал потребитель.\n *\n * `transition-colors` совпадает с переходом у `TableRow`, поэтому строка подсвечивается\n * целиком, а не двумя рывками. Разделители слой не задевает: `inset-0` у абсолютного\n * потомка отсчитывается от padding-box, а границы лежат снаружи него.\n *\n * **Требует контекста позиционирования** — `sticky` у закреплённой ячейки, `relative`\n * у перетаскиваемой: иначе `::after` растянется не по ячейке, а по ближайшему\n * позиционированному предку.\n *\n * @example\n * <TableCell className={opaqueCellStyles({ className: \"relative\" })}>…</TableCell>\n * <TableHead className={opaqueCellStyles({ part: \"head\", className: \"relative\" })}>…</TableHead>\n */\nexport const opaqueCellStyles = tv({\n\tbase: [\n\t\t\"after:pointer-events-none after:absolute after:inset-0 after:transition-colors\",\n\t\t\"after:bg-[color:var(--table-row-bg)] [tr:hover>&]:after:bg-[color:var(--table-row-bg-hover)]\",\n\t\tTABLE_ROW_TINT_LAYERS_AFTER\n\t],\n\tvariants: {\n\t\tpart: {\n\t\t\tcell: \"bg-secondary-bg\",\n\t\t\thead: \"bg-primary-bg\"\n\t\t}\n\t},\n\tdefaultVariants: {\n\t\tpart: \"cell\"\n\t}\n});\n"],"names":["TABLE_ROW_TINT","tableRowTints","tints","layers","tint","TABLE_ROW_TINT_LAYERS","TABLE_ROW_TINT_LAYERS_AFTER","opaqueCellStyles","tv"],"mappings":";AA2BO,MAAMA,IAAiB;AAAA,EAC7B,UAAU;AAAA,EACV,UAAU;AACX,GAyBaC,IAAgB,IAAIC,MAAgE;AAChG,QAAMC,IAASD,EAAM,OAAO,OAAO,EAAE,IAAI,CAACE,MAAS,mBAAmBA,CAAI,IAAIA,CAAI,GAAG;AAI9E,SAAAD,EAAO,SAAU,EAAE,qBAAqBA,EAAO,KAAK,GAAG,EAAE,IAAsB,CAAC;AACxF,GAMaE,IAAwB,0CAGxBC,IAA8B,gDCrC9BC,IAAmBC,EAAG;AAAA,EAClC,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACAF;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC;"}

package/dist/plus-BpxYPnAG.js

@@ -0,0 +1,15 @@
+import { c as e } from "./createLucideIcon-DwBrHnj9.js";
+/**
+ * @license lucide-react v0.460.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const a = e("Plus", [
+  ["path", { d: "M5 12h14", key: "1ays0h" }],
+  ["path", { d: "M12 5v14", key: "s699le" }]
+]);
+export {
+  a as P
+};
+//# sourceMappingURL=plus-BpxYPnAG.js.map

package/dist/plus-BpxYPnAG.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plus-BpxYPnAG.js","sources":["../node_modules/.pnpm/lucide-react@0.460.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/plus.js"],"sourcesContent":["/**\n * @license lucide-react v0.460.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst Plus = createLucideIcon(\"Plus\", [\n  [\"path\", { d: \"M5 12h14\", key: \"1ays0h\" }],\n  [\"path\", { d: \"M12 5v14\", key: \"s699le\" }]\n]);\n\nexport { Plus as default };\n//# sourceMappingURL=plus.js.map\n"],"names":["Plus","createLucideIcon"],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASK,MAACA,IAAOC,EAAiB,QAAQ;AAAA,EACpC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAQ,CAAE;AAAA,EACzC,CAAC,QAAQ,EAAE,GAAG,YAAY,KAAK,SAAU,CAAA;AAC3C,CAAC;","x_google_ignoreList":[0]}