ics-ui-kit 0.1.15 → 0.1.16

package/tailwind.preset.js

@@ -190,6 +190,10 @@ export default {
 					primary: "hsl(var(--alpha-accent-primary))",
 					secondary: "hsl(var(--alpha-accent-secondary))"
 				},
+				"alpha-accent-high": {
+					primary: "hsl(var(--alpha-accent-high-primary))",
+					secondary: "hsl(var(--alpha-accent-high-secondary))"
+				},
 				shadow: {
 					scroll: "hsl(222, 47%, 11%)"
 				},

package/dist/opaqueCell-SGaiyL54.js.map

@@ -1 +0,0 @@
-{"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;"}