@dss-kit/ui-kit 1.0.0 → 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/controls/MarkdownTextEditor/MarkdownTextEditor.js

@@ -8,10 +8,10 @@ import { MarkdownShortcutPlugin as U } from "@lexical/react/LexicalMarkdownShort
 import { OnChangePlugin as W } from "@lexical/react/LexicalOnChangePlugin";
 import { TablePlugin as H } from "@lexical/react/LexicalTablePlugin";
 import { useState as u, useMemo as a, useCallback as p } from "react";
-import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as K } from "./MarkdownTextEditor.const.js";
-import { MarkdownTextEditorLocaleProvider as q } from "./MarkdownTextEditor.locale.js";
+import { getEditorConfig as K } from "./configs/editor.config.js";
+import { MARKDOWN_TOOLBAR_DEFAULT_ACTIONS as q } from "./MarkdownTextEditor.const.js";
+import { MarkdownTextEditorLocaleProvider as z } from "./MarkdownTextEditor.locale.js";
 import { EDITOR_TRANSFORMERS as g } from "./transformers/index.js";
-import { getEditorConfig as z } from "./configs/editor.config.js";
 import { EditorStateContext as G } from "./contexts/EditorStateContext/EditorStateContext.js";
 import { ToolbarContext as J } from "./contexts/ToolbarContext/ToolbarContext.js";
 import { EditorToolbar as Q } from "./components/EditorToolbar/EditorToolbar.js";
@@ -40,7 +40,7 @@ function Ao({
   fieldClassName: R,
   previewClassName: v
 }) {
-  const [d, N] = u(""), [i, A] = u(!1), { availableActions: s, onImagesUpload: _ } = b || {}, O = a(() => z(), []), I = a(
+  const [d, N] = u(""), [i, A] = u(!1), { availableActions: s, onImagesUpload: _ } = b || {}, O = a(() => K(), []), I = a(
     () => ({
       isEditable: !m,
       isPreviewMode: i,
@@ -49,7 +49,7 @@ function Ao({
     }),
     [m, i, d]
   ), L = a(() => ({
-    availableActions: s || K
+    availableActions: s || q
   }), [s]), f = p(
     (t) => {
       N(t), r.onMarkdownChange && r.onMarkdownChange(t);
@@ -64,7 +64,7 @@ function Ao({
     },
     [f, r]
   );
-  return /* @__PURE__ */ o(q, { locale: M, children: /* @__PURE__ */ o(V, { initialConfig: O, children: /* @__PURE__ */ o(G.Provider, { value: I, children: /* @__PURE__ */ c(J.Provider, { value: L, children: [
+  return /* @__PURE__ */ o(z, { locale: M, children: /* @__PURE__ */ o(V, { initialConfig: O, children: /* @__PURE__ */ o(G.Provider, { value: I, children: /* @__PURE__ */ c(J.Provider, { value: L, children: [
     /* @__PURE__ */ c(
       h,
       {

package/dist/components/controls/Switch/Switch.d.ts

@@ -1,7 +1,7 @@
-import { AccentType, SecondaryType, Size } from '../../../types/tokens.types';
+import { AccentType, PositiveType, SecondaryType, Size } from '../../../types/tokens.types';
 type SwitchSizes = Extract<Size, "sm" | "md" | "lg">;
 type ThemeType = "theme";
-export type SwitchVariant = AccentType | SecondaryType | ThemeType;
+export type SwitchVariant = AccentType | SecondaryType | PositiveType | ThemeType;
 export interface SwitchRef {
     /** Фокус на переключателе */
     focus: () => void;
@@ -33,7 +33,7 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     size?: SwitchSizes;
     /**
      * Вариант переключателя.
-     * Доступны: `accent`, `secondary`, `theme`.
+     * Доступны: `accent`, `secondary`, `positive`, `theme`.
      * @default "accent"
      */
     variant?: SwitchVariant;

package/dist/components/controls/Switch/styles.d.ts

@@ -5,6 +5,7 @@ export declare const styles: {
     switchContainer: string;
     variant_accent: string;
     variant_secondary: string;
+    variant_positive: string;
     variant_theme: string;
     size_sm: string;
     size_md: string;

package/dist/components/controls/Switch/styles.js

@@ -1,14 +1,14 @@
-import { css as t } from "@emotion/css";
-import { theme as s } from "../../../utils/theme/index.js";
-const { color: i, cornerRadius: e, height: h, spacing: c, transition: r } = s, l = {
-  container: t({
+import { css as i } from "@emotion/css";
+import { theme as c } from "../../../utils/theme/index.js";
+const { color: t, cornerRadius: r, height: h, spacing: s, transition: e } = c, l = {
+  container: i({
     width: "100%",
     cursor: "pointer",
     outline: "none",
     userSelect: "none",
     display: "flex",
     justifyContent: "space-between",
-    gap: c.md,
+    gap: s.md,
     "&.disabled": {
       cursor: "not-allowed",
       opacity: 0.5
@@ -17,14 +17,14 @@ const { color: i, cornerRadius: e, height: h, spacing: c, transition: r } = s, l
       flexDirection: "row-reverse"
     }
   }),
-  disabled: t({
+  disabled: i({
     cursor: "not-allowed",
     opacity: 0.5
   }),
-  reverse: t({
+  reverse: i({
     flexDirection: "row-reverse"
   }),
-  switchContainer: t({
+  switchContainer: i({
     "--width-switch-sm": "34px",
     "--width-switch-md": "40px",
     "--width-switch-lg": "52px",
@@ -37,82 +37,92 @@ const { color: i, cornerRadius: e, height: h, spacing: c, transition: r } = s, l
     }
   }),
   // Variant classes — each handles both checked and unchecked states
-  variant_accent: t({
+  variant_accent: i({
     "&:has(input:not(:checked))": {
-      "--switch-bg-color": i.fill.bg_tertiary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accent_primary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.accent_primary,
+      "--thumb-bg-color": t.fill.bg_primary
     }
   }),
-  variant_secondary: t({
+  variant_secondary: i({
     "&:has(input:not(:checked))": {
-      "--switch-bg-color": i.fill.bg_tertiary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accent_secondary,
-      "--thumb-bg-color": i.fill.accent_primary
+      "--switch-bg-color": t.fill.accent_secondary,
+      "--thumb-bg-color": t.fill.accent_primary
     }
   }),
-  variant_theme: t({
+  variant_positive: i({
     "&:has(input:not(:checked))": {
-      "--switch-bg-color": i.fill.bg_tertiary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.bg_secondary,
-      "--thumb-bg-color": i.fill.bg_tertiary
+      "--switch-bg-color": t.fill.positive_primary,
+      "--thumb-bg-color": t.fill.bg_primary
+    }
+  }),
+  variant_theme: i({
+    "&:has(input:not(:checked))": {
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
+    },
+    "&:has(input:checked)": {
+      "--switch-bg-color": t.fill.bg_secondary,
+      "--thumb-bg-color": t.fill.bg_tertiary
     }
   }),
   // Size classes
-  size_sm: t({
+  size_sm: i({
     "--switch-width": "var(--width-switch-sm)",
     "--switch-height": h.switch.sm,
     "--thumb-width": "var(--size-thumb-sm)",
     "--thumb-height": "var(--size-thumb-sm)"
   }),
-  size_md: t({
+  size_md: i({
     "--switch-width": "var(--width-switch-md)",
     "--switch-height": h.switch.md,
     "--thumb-width": "var(--size-thumb-md)",
     "--thumb-height": "var(--size-thumb-md)"
   }),
-  size_lg: t({
+  size_lg: i({
     "--switch-width": "var(--width-switch-lg)",
     "--switch-height": h.switch.lg,
     "--thumb-width": "var(--size-thumb-lg)",
     "--thumb-height": "var(--size-thumb-lg)"
   }),
-  switch: t({
+  switch: i({
     width: "var(--switch-width)",
     height: "var(--switch-height)",
-    transition: r.general,
+    transition: e.general,
     display: "flex",
     alignItems: "center",
     padding: 2,
     backgroundColor: "var(--switch-bg-color)",
-    borderRadius: e.xl
+    borderRadius: r.xl
   }),
-  thumb: t({
+  thumb: i({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     padding: 4,
-    transition: r.general,
+    transition: e.general,
     transform: "translateX(var(--thumb-translate, 0))",
     width: "var(--thumb-width)",
     height: "var(--thumb-height)",
     backgroundColor: "var(--thumb-bg-color)",
-    borderRadius: e.fullRound
+    borderRadius: r.fullRound
   }),
-  moon: t({
+  moon: i({
     width: "100%",
     height: "100%"
   }),
-  fire: t({
+  fire: i({
     width: "100%",
     height: "100%"
   })

package/dist/components/controls/Tabs/TabItem/TabItem.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 interface TabItemProps {
     label: string;
     selected: boolean;
@@ -10,6 +11,10 @@ interface TabItemProps {
     activeClassName?: string;
     /** Класс для текста внутри таба (`Text`). */
     textClassName?: string;
+    /** Элемент справа от подписи, например `Counter`. */
+    endSlot?: ReactNode;
+    /** Класс для обёртки `endSlot`. */
+    endSlotClassName?: string;
 }
 export declare const TabItem: import('react').ForwardRefExoticComponent<TabItemProps & import('react').RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/controls/Tabs/TabItem/TabItem.js

@@ -1,58 +1,77 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cx as e, css as t } from "@emotion/css";
-import { forwardRef as d } from "react";
-import { Box as y } from "../../../builders/Box/Box.js";
-import { theme as x } from "../../../../utils/theme/index.js";
-import { Text as u } from "../../../builders/Text/Text.js";
-const { spacing: s } = x, h = t({
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { cx as i, css as o } from "@emotion/css";
+import { forwardRef as g } from "react";
+import { Box as m } from "../../../builders/Box/Box.js";
+import { theme as w } from "../../../../utils/theme/index.js";
+import { Text as S } from "../../../builders/Text/Text.js";
+const { spacing: t } = w, N = o({
   cursor: "pointer",
   userSelect: "none"
-}), S = t({
+}), b = o({
   cursor: "not-allowed",
   opacity: 0.5
-}), b = t({
+}), j = o({
   transition: "color 0.2s ease"
-}), T = d(
+}), E = g(
   ({
-    label: i,
-    selected: o,
-    disabled: m,
-    fullWidth: n,
-    onClick: c,
-    className: a,
-    activeClassName: l,
-    textClassName: p
-  }, f) => /* @__PURE__ */ r(
-    y,
-    {
-      w: n ? "full" : void 0,
-      justifyContent: "center",
-      alignItems: "center",
-      ref: f,
-      py: s.md,
-      px: s.xl,
-      onClick: c,
-      className: e(
-        h,
-        {
-          [S]: m
-        },
-        a,
-        o && l
-      ),
-      children: /* @__PURE__ */ r(
-        u,
-        {
-          className: e(b, p),
-          colorName: o ? "primary" : "tertiary",
-          fontWeight: "medium",
-          variant: "body-2",
-          children: i
-        }
-      )
-    }
-  )
+    label: a,
+    selected: r,
+    disabled: c,
+    fullWidth: l,
+    onClick: p,
+    className: f,
+    activeClassName: x,
+    textClassName: d,
+    endSlot: e,
+    endSlotClassName: y
+  }, u) => {
+    const s = !!e;
+    return /* @__PURE__ */ h(
+      m,
+      {
+        row: s,
+        gap: t.xs,
+        w: l ? "full" : void 0,
+        justifyContent: "center",
+        alignItems: "center",
+        ref: u,
+        py: t.md,
+        px: t.xl,
+        onClick: p,
+        className: i(
+          N,
+          {
+            [b]: c
+          },
+          f,
+          r && x
+        ),
+        children: [
+          /* @__PURE__ */ n(
+            S,
+            {
+              className: i(j, d),
+              colorName: r ? "primary" : "tertiary",
+              fontWeight: "medium",
+              variant: "body-2",
+              children: a
+            }
+          ),
+          s && /* @__PURE__ */ n(
+            m,
+            {
+              row: !0,
+              alignItems: "center",
+              flexShrink: 0,
+              className: y,
+              children: e
+            }
+          )
+        ]
+      }
+    );
+  }
 );
 export {
-  T as TabItem
+  E as TabItem
 };

package/dist/components/controls/Tabs/Tabs.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 export interface TabOption<T extends string | number> {
     /** Текстовая метка опции */
     label: string;
@@ -5,6 +6,8 @@ export interface TabOption<T extends string | number> {
     value: T;
     /** Флаг отключения опции */
     disabled?: boolean;
+    /** Элемент справа от подписи, например `Counter` */
+    endSlot?: ReactNode;
 }
 export interface TabsProps<T extends string | number> {
     /** Текущее выбранное значение */
@@ -25,6 +28,8 @@ export interface TabsProps<T extends string | number> {
     activeTabClassName?: string;
     /** Класс для текста внутри табов. */
     tabTextClassName?: string;
+    /** Класс для обёртки `endSlot` внутри табов. */
+    endSlotClassName?: string;
     /** Класс для индикатора выбранного таба. */
     indicatorClassName?: string;
 }
@@ -41,7 +46,7 @@ export interface TabsProps<T extends string | number> {
  * ```
  */
 declare const Tabs: {
-    <T extends string | number>({ value, onChange, options, fullWidth, className, tabClassName, activeTabClassName, tabTextClassName, indicatorClassName, }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends string | number>({ value, onChange, options, fullWidth, className, tabClassName, activeTabClassName, tabTextClassName, endSlotClassName, indicatorClassName, }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Tabs };

package/dist/components/controls/Tabs/Tabs.js

@@ -1,12 +1,12 @@
-import { jsxs as y, jsx as c } from "react/jsx-runtime";
-import { cx as f, css as i } from "@emotion/css";
-import { useState as C, useRef as I, useEffect as S } from "react";
-import { TabItem as k } from "./TabItem/TabItem.js";
-import { Box as d } from "../../builders/Box/Box.js";
-import { theme as R } from "../../../utils/theme/index.js";
-const { color: m } = R, _ = i({
-  borderBottom: `1px solid ${m.border.neutral_alpha_basic}`
-}), g = ({
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import { cx as d, css as m } from "@emotion/css";
+import { useState as p, useRef as I, useEffect as k } from "react";
+import { TabItem as R } from "./TabItem/TabItem.js";
+import { Box as f } from "../../builders/Box/Box.js";
+import { theme as _ } from "../../../utils/theme/index.js";
+const { color: i } = _, g = m({
+  borderBottom: `1px solid ${i.border.neutral_alpha_basic}`
+}), j = ({
   value: a,
   onChange: n,
   options: s,
@@ -15,59 +15,62 @@ const { color: m } = R, _ = i({
   tabClassName: u,
   activeTabClassName: h,
   tabTextClassName: x,
-  indicatorClassName: w
+  endSlotClassName: w,
+  indicatorClassName: v
 }) => {
-  const [l, v] = C({
+  const [l, N] = p({
     left: 0,
     width: 0
-  }), o = I([]), N = (e) => (t) => {
+  }), o = I([]), S = (e) => (t) => {
     o.current[e] = t;
   };
-  S(() => {
-    const e = s.findIndex((p) => p.value === a), t = o.current[e];
-    t && v({
+  k(() => {
+    const e = s.findIndex((y) => y.value === a), t = o.current[e];
+    t && N({
       left: t.offsetLeft,
       width: t.offsetWidth
     });
   }, [a, s]);
   const T = (e, t = !1) => () => !t && n(e);
-  return /* @__PURE__ */ y(
-    d,
+  return /* @__PURE__ */ C(
+    f,
     {
       row: !0,
       w: r ? "full" : "auto",
       relative: !0,
-      className: f(_, b),
+      className: d(g, b),
       children: [
         s.map((e, t) => /* @__PURE__ */ c(
-          k,
+          R,
           {
             selected: a === e.value,
             onClick: T(e.value, e.disabled),
-            ref: N(t),
+            ref: S(t),
             label: e.label,
             disabled: e.disabled,
             fullWidth: r,
             className: u,
             activeClassName: h,
-            textClassName: x
+            textClassName: x,
+            endSlot: e.endSlot,
+            endSlotClassName: w
           },
           e.value
         )),
         /* @__PURE__ */ c(
-          d,
+          f,
           {
             h: 2,
             w: l.width,
             absolute: !0,
             bottom: -1,
             left: l.left,
-            backgroundColor: m.border.accent_primary,
-            className: f(
-              i({
+            backgroundColor: i.border.accent_primary,
+            className: d(
+              m({
                 transition: "left 0.2s ease, width 0.2s ease"
               }),
-              w
+              v
             )
           }
         )
@@ -75,7 +78,7 @@ const { color: m } = R, _ = i({
     }
   );
 };
-g.displayName = "Tabs";
+j.displayName = "Tabs";
 export {
-  g as Tabs
+  j as Tabs
 };

package/dist/components/shared/Counter/Counter.const.d.ts

@@ -0,0 +1,6 @@
+import { CounterColorName, CounterSize } from './Counter.types';
+export declare const DEFAULT_MAX_NUMBER = 99;
+export declare const COUNTER_CUTOUT_WIDTH = 1;
+export declare const COUNTER_CUTOUT_COLOR: "var(--fill-bg-primary)";
+export declare const COUNTER_BACKGROUND: Record<CounterColorName, string>;
+export declare const COUNTER_HEIGHT: Record<CounterSize, number>;

package/dist/components/shared/Counter/Counter.const.js

@@ -0,0 +1,16 @@
+import { theme as o } from "../../../utils/theme/index.js";
+const { color: t } = o, n = 99, c = 1, e = t.fill.bg_primary, T = {
+  negative: t.status.negative,
+  accent: t.status.accent,
+  neutral: t.status.neutral
+}, U = {
+  sm: 16,
+  md: 20
+};
+export {
+  T as COUNTER_BACKGROUND,
+  e as COUNTER_CUTOUT_COLOR,
+  c as COUNTER_CUTOUT_WIDTH,
+  U as COUNTER_HEIGHT,
+  n as DEFAULT_MAX_NUMBER
+};

package/dist/components/shared/Counter/Counter.d.ts

@@ -0,0 +1,11 @@
+import { CounterProps } from './Counter.types';
+/**
+ * Счётчик: число или короткий текст в цветной капсуле.
+ * @example
+ * ```tsx
+ * <Counter value={5} />
+ * <Counter value={120} maxNumber={99} colorName="accent" size="sm" />
+ * <Counter value="New" />
+ * ```
+ */
+export declare function Counter({ value, maxNumber, colorName, size, withBorder, className, }: CounterProps): import("react/jsx-runtime").JSX.Element;