@dss-kit/ui-kit 0.3.10 → 1.0.1

package/README.md

@@ -1,29 +1,29 @@
-# Storybook
-
-Storybook для библиотеки React-компонентов **UI Kit** (`@dss-kit/ui-kit`) с дизайн-системой.
-Репозиторий хранит исходники компонентов и их Storybook, собирает контейнерный образ и
-разворачивает Storybook в Kubernetes.
-
-## Включает:
-
-- React компоненты и дизайн-систему (CSS переменные и токены, SCSS утилиты, TypeScript типы, SVG иконки)
-- Провайдеры тем (ThemeProviderScoped)
-- Storybook как витрину компонентов
-- CI/CD для сборки образа и деплоя в Kubernetes
-
-## Деплой
-
-- **Stable** — на merge в `main` создаётся релизный тег, собирается образ
-  `harbor.infra.dssnet.tech/dssnet/storybook` и разворачивается через ArgoCD.
-- **Trial-превью** — кнопка в CI (`deploy:trial`) на любой ветке кроме `main` публикует Storybook
-  этой ветки на `storybook-trials-<id>.staging.dssnet.tech` (живёт 7 дней, продлевается при
-  повторном деплое).
-
-## Документация
-
-Ссылки на более подробную документацию по разделам
-
-- **[Сборка](./docs/build/index.md)** — команды сборки, конфигурации Vite и т.д.
-- **[Использование](./docs/usage/index.md)** — подключение стилей, примеры компонентов
-- **[Стили](./docs/styles/index.md)** — подключение шрифтов, CSS переменных, базовые стили и миксины
-- **[Утилиты](./docs/utils/index.md)** — функции хелперы
+# Storybook
+
+Storybook для библиотеки React-компонентов **UI Kit** (`@dss-kit/ui-kit`) с дизайн-системой.
+Репозиторий хранит исходники компонентов и их Storybook, собирает контейнерный образ и
+разворачивает Storybook в Kubernetes.
+
+## Включает:
+
+- React компоненты и дизайн-систему (CSS переменные и токены, SCSS утилиты, TypeScript типы, SVG иконки)
+- Провайдеры тем (ThemeProviderScoped)
+- Storybook как витрину компонентов
+- CI/CD для сборки образа и деплоя в Kubernetes
+
+## Деплой
+
+- **Stable** — на merge в `main` создаётся релизный тег, собирается образ
+  `harbor.infra.dssnet.tech/dssnet/storybook` и разворачивается через ArgoCD.
+- **Trial-превью** — кнопка в CI (`deploy:trial`) на любой ветке кроме `main` публикует Storybook
+  этой ветки на `storybook-trials-<id>.staging.dssnet.tech` (живёт 7 дней, продлевается при
+  повторном деплое).
+
+## Документация
+
+Ссылки на более подробную документацию по разделам
+
+- **[Сборка](./docs/build/index.md)** — команды сборки, конфигурации Vite и т.д.
+- **[Использование](./docs/usage/index.md)** — подключение стилей, примеры компонентов
+- **[Стили](./docs/styles/index.md)** — подключение шрифтов, CSS переменных, базовые стили и миксины
+- **[Утилиты](./docs/utils/index.md)** — функции хелперы

package/dist/components/builders/Modal/Modal.js

@@ -6,7 +6,7 @@ import { ModalContext as E } from "./context.js";
 import { styles as i } from "./styles.js";
 import { Portal as I } from "../Portal/Portal.js";
 import { Box as l } from "../Box/Box.js";
-import { IconButton as P } from "../../controls/IconButton/IconButton.js";
+import { IconButton as _ } from "../../controls/IconButton/IconButton.js";
 import { theme as f } from "../../../utils/theme/index.js";
 const j = D(
   ({
@@ -61,7 +61,7 @@ const j = D(
         flex: 1,
         onMouseDown: b,
         onClick: M,
-        backgroundColor: f.color.fill.bgOverlayPrimary,
+        backgroundColor: f.color.fill.bg_overlay_primary,
         className: s(i.overlay, y),
         zIndex: 1,
         children: /* @__PURE__ */ z(
@@ -83,7 +83,7 @@ const j = D(
                   right: f.spacing.lg,
                   zIndex: 1,
                   children: /* @__PURE__ */ t(
-                    P,
+                    _,
                     {
                       className: g,
                       onClick: r,

package/dist/components/builders/Modal/ModalFooter/ModalFooter.js

@@ -4,15 +4,15 @@ import { forwardRef as d } from "react";
 import { Box as n } from "../../Box/Box.js";
 import { theme as o } from "../../../../utils/theme/index.js";
 const x = f({
-  borderTop: `1px solid ${o.color.border.neutralAlphaBasic}`
+  borderTop: `1px solid ${o.color.border.neutral_alpha_basic}`
 }), u = d(
   ({
     children: r,
     row: t = !0,
     flex: e = !0,
-    gap: m = o.spacing.lg,
-    p: s = o.spacing["2xl"],
-    className: a,
+    gap: a = o.spacing.lg,
+    p: m = o.spacing["2xl"],
+    className: s,
     // Остальные пропсы передаются в компонент Box
     ...p
   }, l) => /* @__PURE__ */ i(
@@ -20,9 +20,9 @@ const x = f({
     {
       flex: e,
       row: t,
-      gap: m,
-      p: s,
-      className: c(x, a),
+      gap: a,
+      p: m,
+      className: c(x, s),
       ref: l,
       ...p,
       children: r

package/dist/components/builders/Modal/ModalHeader/ModalHeader.js

@@ -1,15 +1,15 @@
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
-import B from "../../../../assets/svg/modal/close.svg.js";
-import { useModalContext as W } from "../context.js";
+import W from "../../../../assets/svg/modal/close.svg.js";
+import { useModalContext as B } from "../context.js";
 import { Box as t } from "../../Box/Box.js";
 import { theme as r } from "../../../../utils/theme/index.js";
 import { Text as i } from "../../Text/Text.js";
 import { IconButton as M } from "../../../controls/IconButton/IconButton.js";
 const j = v(
   ({
-    title: l,
-    subtitle: a,
+    title: a,
+    subtitle: l,
     w: m = "full",
     p: s,
     py: d,
@@ -18,13 +18,13 @@ const j = v(
     pb: p = r.spacing.lg,
     row: f = !0,
     justifyContent: h = "space-between",
-    showCloseButton: g = !1,
-    className: x,
-    titleClassName: b,
+    showCloseButton: b = !1,
+    className: g,
+    titleClassName: x,
     subtitleClassName: u,
     closeButtonClassName: N
   }, y) => {
-    const { onClose: C } = W();
+    const { onClose: C } = B();
     return /* @__PURE__ */ e(
       t,
       {
@@ -37,11 +37,11 @@ const j = v(
         row: f,
         justifyContent: h,
         ref: y,
-        borderColor: r.color.border.neutralAlphaBasic,
+        borderColor: r.color.border.neutral_alpha_basic,
         borderWidth: 0,
         borderBottomWidth: 1,
         borderStyle: "solid",
-        className: x,
+        className: g,
         children: [
           /* @__PURE__ */ e(t, { gap: r.spacing.sm, children: [
             /* @__PURE__ */ o(
@@ -50,8 +50,8 @@ const j = v(
                 variant: "title-3",
                 colorName: "primary",
                 fontWeight: "semibold",
-                className: b,
-                children: l
+                className: x,
+                children: a
               }
             ),
             /* @__PURE__ */ o(
@@ -61,18 +61,18 @@ const j = v(
                 colorName: "tertiary",
                 fontWeight: "medium",
                 className: u,
-                children: a
+                children: l
               }
             )
           ] }),
-          g && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
+          b && /* @__PURE__ */ o("div", { children: /* @__PURE__ */ o(
             M,
             {
               onClick: C,
               color: "neutral",
               className: N,
               size: "xs",
-              children: /* @__PURE__ */ o(B, {})
+              children: /* @__PURE__ */ o(W, {})
             }
           ) })
         ]

package/dist/components/builders/Modal/ModalMain/styles.js

@@ -5,17 +5,17 @@ const c = {
     flex: 0,
     overflowY: "auto",
     scrollbarWidth: "thin",
-    scrollbarColor: `${r.color.scrollbar.thumbPrimary} ${r.color.scrollbar.trackPrimary}`,
+    scrollbarColor: `${r.color.scrollbar.thumb_primary} ${r.color.scrollbar.track_primary}`,
     "&::-webkit-scrollbar": {
       width: 6
     },
     "&::-webkit-scrollbar-track": {
-      background: r.color.scrollbar.trackPrimary,
+      background: r.color.scrollbar.track_primary,
       borderRadius: r.cornerRadius.fullRound
     },
     "&::-webkit-scrollbar-thumb": {
       borderRadius: r.cornerRadius.fullRound,
-      backgroundColor: r.color.scrollbar.thumbPrimary
+      backgroundColor: r.color.scrollbar.thumb_primary
     }
   })
 };

package/dist/components/builders/Modal/styles.js

@@ -21,8 +21,8 @@ const t = a`
     maxWidth: `calc(100vw - ${o.spacing["3xl"]})`,
     maxHeight: `calc(100vh - ${o.spacing["7xl"]} - ${o.spacing["7xl"]})`,
     borderRadius: o.cornerRadius["2xl"],
-    backgroundColor: o.color.fill.bgPrimary,
-    boxShadow: `0 4px 20px 0 ${o.color.effect.shadowS}`,
+    backgroundColor: o.color.fill.bg_primary,
+    boxShadow: `0 4px 20px 0 ${o.color.effect.shadow_s}`,
     [r.sm()]: {
       flex: 1
     }

package/dist/components/builders/Table/Table.js

@@ -1,56 +1,56 @@
-import { jsx as o, jsxs as v } from "react/jsx-runtime";
+import { jsx as o, jsxs as H } from "react/jsx-runtime";
 import { cx as p, css as b } from "@emotion/css";
-import { useReactTable as He, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as ke, flexRender as H, createColumnHelper as ze } from "@tanstack/react-table";
-import { useMemo as Ie, useImperativeHandle as Ve } from "react";
-import Le from "../../../assets/svg/table/search.svg.js";
-import { typography as We } from "../../../styles/utils/typography.js";
+import { useReactTable as Pe, getPaginationRowModel as Me, getSortedRowModel as Ne, getCoreRowModel as _e, flexRender as P, createColumnHelper as ke } from "@tanstack/react-table";
+import { useMemo as ze, useImperativeHandle as Ie } from "react";
+import Ve from "../../../assets/svg/table/search.svg.js";
+import { typography as Le } from "../../../styles/utils/typography.js";
 import { useControllableState as m } from "./Table.hooks.js";
 import { getColumnPinningStyles as f } from "./Table.utils.js";
-import { TablePlaceholder as Ee } from "./TablePlaceholder/TablePlaceholder.js";
-import { TableWrapper as Fe } from "./TableWrapper/TableWrapper.js";
-import { TableHeadRow as je } from "./TableHeadRow/TableHeadRow.js";
-import { TablePagination as Be } from "./TablePagination/TablePagination.js";
-import { TableHeadCell as De } from "./TableHeadCell/TableHeadCell.js";
-import { TableBodyCell as _e } from "./TableBodyCell/TableBodyCell.js";
+import { TablePlaceholder as We } from "./TablePlaceholder/TablePlaceholder.js";
+import { TableWrapper as Ee } from "./TableWrapper/TableWrapper.js";
+import { TableHeadRow as Fe } from "./TableHeadRow/TableHeadRow.js";
+import { TablePagination as je } from "./TablePagination/TablePagination.js";
+import { TableHeadCell as Be } from "./TableHeadCell/TableHeadCell.js";
+import { TableBodyCell as De } from "./TableBodyCell/TableBodyCell.js";
 import { TableBodyRow as Ae } from "./TableBodyRow/TableBodyRow.js";
-import { TableBodyCellContent as k } from "./TableBodyCellContent/TableBodyCellContent.js";
+import { TableBodyCellContent as _ } from "./TableBodyCellContent/TableBodyCellContent.js";
 import { Skeleton as Ke } from "../../shared/Skeleton/Skeleton.js";
 import { TableHeadCellContent as Oe } from "./TableHeadCellContent/TableHeadCellContent.js";
 import { TableHeadCellContentSortable as $e } from "./TableHeadCellContentSortable/TableHeadCellContentSortable.js";
 import { theme as qe } from "../../../utils/theme/index.js";
 import { Box as Ge } from "../Box/Box.js";
 const { spacing: M, color: l } = qe, Je = b({
-  ...We.body2,
+  ...Le.body2,
   fontWeight: 500,
   width: "100%",
   maxWidth: "100%",
   minWidth: "max-content",
   borderCollapse: "collapse",
   borderSpacing: 0,
-  backgroundColor: l.fill.bgPrimary
+  backgroundColor: l.fill.bg_primary
 }), Qe = b({
-  backgroundColor: l.fill.bgSecondary,
+  backgroundColor: l.fill.bg_secondary,
   color: l.text.tertiary
 }), Ue = b({
   pointerEvents: "none",
   userSelect: "none"
 }), N = ["70%", "55%", "80%", "60%"], c = ({
-  ref: z,
+  ref: k,
   data: h,
   columns: u,
   showBorders: g = !0,
-  enableSorting: I = !1,
+  enableSorting: z = !1,
   enablePagination: S = !1,
-  enableRowSelection: V = !1,
-  enableMultiRowSelection: L = !1,
+  enableRowSelection: I = !1,
+  enableMultiRowSelection: V = !1,
   enableColumnPinning: d = !1,
-  columnPinning: W,
-  onColumnPinningChange: E,
-  sorting: F,
-  onSortingChange: j,
-  manualSorting: B,
-  columnFilters: D,
-  onColumnFiltersChange: _,
+  columnPinning: L,
+  onColumnPinningChange: W,
+  sorting: E,
+  onSortingChange: F,
+  manualSorting: j,
+  columnFilters: B,
+  onColumnFiltersChange: D,
   columnVisibility: A,
   onColumnVisibilityChange: K,
   pagination: O,
@@ -76,9 +76,9 @@ const { spacing: M, color: l } = qe, Je = b({
   tableOptions: te = {},
   onRowClick: w,
   getRowId: le,
-  headCellComponent: ie = De,
-  bodyCellComponent: x = _e,
-  headRowComponent: ae = je,
+  headCellComponent: ie = Be,
+  bodyCellComponent: x = De,
+  headRowComponent: ae = Fe,
   bodyRowComponent: R = Ae,
   onReset: re,
   paginationVariant: me,
@@ -87,12 +87,12 @@ const { spacing: M, color: l } = qe, Je = b({
   renderPageSizeSelectorInputItem: ge
 }) => {
   const [de, pe] = m(
+    E,
     F,
-    j,
     []
   ), [he, Ce] = m(
+    B,
     D,
-    _,
     []
   ), [fe, be] = m(
     A,
@@ -103,16 +103,16 @@ const { spacing: M, color: l } = qe, Je = b({
     $,
     { pageIndex: 0, pageSize: 10 }
   ), [ue, Se] = m(q, G, {}), [ye, we] = m(
+    L,
     W,
-    E,
     { left: [], right: [] }
-  ), T = B ?? !!s, xe = Ie(
+  ), T = j ?? !!s, xe = ze(
     () => u.map((e) => ({
       enableSorting: !1,
       ...e
     })),
     [u]
-  ), t = He({
+  ), t = Pe({
     data: h,
     columns: xe,
     state: {
@@ -129,11 +129,11 @@ const { spacing: M, color: l } = qe, Je = b({
     onPaginationChange: C,
     onRowSelectionChange: Se,
     onColumnPinningChange: we,
-    getCoreRowModel: ke(),
-    getSortedRowModel: I && !T ? Ne() : void 0,
+    getCoreRowModel: _e(),
+    getSortedRowModel: z && !T ? Ne() : void 0,
     getPaginationRowModel: S ? Me() : void 0,
-    enableRowSelection: V,
-    enableMultiRowSelection: L,
+    enableRowSelection: I,
+    enableMultiRowSelection: V,
     enableColumnPinning: d,
     getRowId: le,
     manualSorting: T,
@@ -141,21 +141,25 @@ const { spacing: M, color: l } = qe, Je = b({
     pageCount: s ? Math.ceil(s / a.pageSize) : void 0,
     ...te
   });
-  Ve(z, () => t);
-  const { rows: P } = t.getRowModel(), Re = (e, n) => {
+  Ie(k, () => t);
+  const { rows: v } = t.getRowModel(), Re = (e, n) => {
     w && w(e.original, n);
   }, Te = (e) => /* @__PURE__ */ o(
     ie,
     {
       style: {
         width: e.getSize(),
-        ...d && f(t, e.column, l.fill.bgSecondary)
+        ...d && f(
+          t,
+          e.column,
+          l.fill.bg_secondary
+        )
       },
       onClick: i ? void 0 : e.column.getToggleSortingHandler(),
-      children: e.isPlaceholder ? null : H(e.column.columnDef.header, e.getContext())
+      children: e.isPlaceholder ? null : P(e.column.columnDef.header, e.getContext())
     },
     e.id
-  ), Pe = (e, n) => /* @__PURE__ */ o(
+  ), ve = (e, n) => /* @__PURE__ */ o(
     R,
     {
       showBorders: g,
@@ -163,22 +167,26 @@ const { spacing: M, color: l } = qe, Je = b({
       children: e.getVisibleCells().map((r) => /* @__PURE__ */ o(
         x,
         {
-          style: d ? f(t, r.column, l.fill.bgPrimary) : void 0,
-          children: H(r.column.columnDef.cell, r.getContext())
+          style: d ? f(
+            t,
+            r.column,
+            l.fill.bg_primary
+          ) : void 0,
+          children: P(r.column.columnDef.cell, r.getContext())
         },
         r.id
       ))
     },
     e.id
-  ), ve = (e) => /* @__PURE__ */ o(
+  ), He = (e) => /* @__PURE__ */ o(
     R,
     {
       showBorders: g,
       children: t.getVisibleLeafColumns().map((n, r) => /* @__PURE__ */ o(
         x,
         {
-          style: d ? f(t, n, l.fill.bgPrimary) : void 0,
-          children: /* @__PURE__ */ o(k, { children: /* @__PURE__ */ o(
+          style: d ? f(t, n, l.fill.bg_primary) : void 0,
+          children: /* @__PURE__ */ o(_, { children: /* @__PURE__ */ o(
             Ke,
             {
               variant: "text",
@@ -192,11 +200,11 @@ const { spacing: M, color: l } = qe, Je = b({
     },
     `skeleton-row-${e}`
   );
-  return !i && !P.length ? /* @__PURE__ */ o(
-    Ee,
+  return !i && !v.length ? /* @__PURE__ */ o(
+    We,
     {
       icon: /* @__PURE__ */ o(
-        Le,
+        Ve,
         {
           width: 24,
           height: 24,
@@ -209,8 +217,8 @@ const { spacing: M, color: l } = qe, Je = b({
       titleClassName: ee,
       descriptionClassName: oe
     }
-  ) : /* @__PURE__ */ v(Ge, { w: "full", gap: M.xl, className: p(y), children: [
-    /* @__PURE__ */ o(Fe, { data: h, showBorders: g, children: /* @__PURE__ */ v("table", { className: p(Je, U), children: [
+  ) : /* @__PURE__ */ H(Ge, { w: "full", gap: M.xl, className: p(y), children: [
+    /* @__PURE__ */ o(Ee, { data: h, showBorders: g, children: /* @__PURE__ */ H("table", { className: p(Je, U), children: [
       /* @__PURE__ */ o(
         "thead",
         {
@@ -225,11 +233,11 @@ const { spacing: M, color: l } = qe, Je = b({
       ),
       /* @__PURE__ */ o("tbody", { className: Y, children: i ? Array.from(
         { length: J },
-        (e, n) => ve(n)
-      ) : P.map((e, n) => Pe(e, n)) })
+        (e, n) => He(n)
+      ) : v.map((e, n) => ve(e, n)) })
     ] }) }),
     S && !i && /* @__PURE__ */ o(
-      Be,
+      je,
       {
         pageIndex: a.pageIndex,
         pageSize: a.pageSize,
@@ -247,9 +255,9 @@ const { spacing: M, color: l } = qe, Je = b({
 };
 c.displayName = "Table";
 c.HeadCellContent = Oe;
-c.BodyCellContent = k;
+c.BodyCellContent = _;
 c.HeadCellContentSortable = $e;
-c.createColumnHelper = ze;
+c.createColumnHelper = ke;
 export {
   c as Table
 };

package/dist/components/builders/Table/Table.utils.js

@@ -1,5 +1,5 @@
-import { theme as d } from "../../../utils/theme/index.js";
-const p = (s, f, g) => {
+import { theme as l } from "../../../utils/theme/index.js";
+const p = (s, f, d) => {
   const e = f.getIsPinned();
   if (!e) return {};
   const n = e === "left" ? s.getLeftLeafColumns() : s.getRightLeafColumns(), i = f.getPinnedIndex();
@@ -10,14 +10,14 @@ const p = (s, f, g) => {
   else
     for (let t = n.length - 1; t > i; t--)
       o += n[t].getSize();
-  const l = e === "left" && i === n.length - 1;
+  const g = e === "left" && i === n.length - 1;
   return {
     position: "sticky",
     left: e === "left" ? o : void 0,
     right: e === "right" ? o : void 0,
     zIndex: 1,
-    background: g,
-    boxShadow: l ? `-2px 0 2px -2px ${d.color.effect.shadowL} inset` : e === "right" && i === 0 ? `2px 0 2px -2px ${d.color.effect.shadowL} inset` : void 0
+    background: d,
+    boxShadow: g ? `-2px 0 2px -2px ${l.color.effect.shadow_l} inset` : e === "right" && i === 0 ? `2px 0 2px -2px ${l.color.effect.shadow_l} inset` : void 0
   };
 };
 export {

package/dist/components/builders/Table/TableBodyRow/TableBodyRow.js

@@ -2,19 +2,19 @@ import { jsx as n } from "react/jsx-runtime";
 import { css as m, cx as c } from "@emotion/css";
 import { forwardRef as i } from "react";
 import { theme as d } from "../../../../utils/theme/index.js";
-const { color: o } = d, f = i(
+const { color: o } = d, p = i(
   ({ children: r, className: e, showBorders: t = !1, ...a }, l) => {
     const s = m({
-      borderBottom: t ? `1px solid ${o.border.neutralAlphaLow}` : "none",
+      borderBottom: t ? `1px solid ${o.border.neutral_alpha_low}` : "none",
       transition: "background-color 0.15s ease-in-out",
       "&:hover": {
-        backgroundColor: o.fill.neutralPrimaryHover
+        backgroundColor: o.fill.neutral_primary_hover
       }
     });
     return /* @__PURE__ */ n("tr", { ref: l, className: c(s, e), ...a, children: r });
   }
 );
-f.displayName = "TableBodyRow";
+p.displayName = "TableBodyRow";
 export {
-  f as TableBodyRow
+  p as TableBodyRow
 };

package/dist/components/builders/Table/TableHeadRow/TableHeadRow.js

@@ -3,12 +3,12 @@ import { css as c, cx as d } from "@emotion/css";
 import { forwardRef as n } from "react";
 import { theme as f } from "../../../../utils/theme/index.js";
 const { color: o } = f, p = n(
-  ({ children: r, className: e, showBorders: a = !1, ...t }, l) => {
+  ({ children: r, className: e, showBorders: a = !1, ...l }, t) => {
     const s = c({
-      backgroundColor: o.fill.bgSecondary,
-      borderBottom: a ? `1px solid ${o.border.neutralAlphaLow}` : "none"
+      backgroundColor: o.fill.bg_secondary,
+      borderBottom: a ? `1px solid ${o.border.neutral_alpha_low}` : "none"
     });
-    return /* @__PURE__ */ m("tr", { ref: l, className: d(s, e), ...t, children: r });
+    return /* @__PURE__ */ m("tr", { ref: t, className: d(s, e), ...l, children: r });
   }
 );
 p.displayName = "TableHeadRow";