@dss-kit/ui-kit 0.3.8 → 0.3.10

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 No({
   fieldClassName: R,
   previewClassName: v
 }) {
-  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => z(), []), L = a(
+  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => K(), []), L = a(
     () => ({
       isEditable: !m,
       isPreviewMode: i,
@@ -49,7 +49,7 @@ function No({
     }),
     [m, i, d]
   ), F = a(() => ({
-    availableActions: s || K
+    availableActions: s || q
   }), [s]), f = p(
     (t) => {
       A(t), r.onMarkdownChange && r.onMarkdownChange(t);
@@ -64,7 +64,7 @@ function No({
     },
     [f, r]
   );
-  return /* @__PURE__ */ o(q, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
+  return /* @__PURE__ */ o(z, { locale: M, children: /* @__PURE__ */ o(D, { initialConfig: I, children: /* @__PURE__ */ o(G.Provider, { value: L, children: /* @__PURE__ */ c(J.Provider, { value: F, children: [
     /* @__PURE__ */ c(
       h,
       {

package/dist/components/controls/RadioGroup/Radio.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { Size } from '../../../types';
+import { AccentType, NeutralType, Size } from '../../../types';
 /**
  * Radio — доступная реализация визуального радио-переключателя.
  *
@@ -44,6 +44,15 @@ export type RadioProps = {
      * @default "left"
      */
     side?: "left" | "right";
+    /**
+     * Цветовая схема радиокнопки в выбранном (checked) состоянии.
+     * - `accent`  — заливка индикатора акцентным цветом (стандартное поведение).
+     * - `neutral` — индикатор остаётся незалитым: видимая нейтральная рамка
+     *   (`border/neutral-primary`) и точка нейтрального цвета (`icon/secondary`)
+     *   вместо заливки. Не влияет на состояние ошибки — `error` всегда приоритетнее.
+     * @default "accent"
+     */
+    color?: AccentType | NeutralType;
     /**
      * Делает конкретное Radio доступной только для чтения.
      * - Изменение выбранного значения запрещено.

package/dist/components/controls/RadioGroup/Radio.js

@@ -1,113 +1,118 @@
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import { cx as E } from "@emotion/css";
-import { forwardRef as F } from "react";
-import { useRadioGroupContext as H } from "./context.js";
-import { styles as t } from "./styles.js";
-import { useControlled as J } from "../../../utils/hooks/useControlled.js";
-import { theme as K } from "../../../utils/theme/index.js";
-import { Box as c } from "../../builders/Box/Box.js";
-import { Text as g } from "../../builders/Text/Text.js";
-const { color: o, cornerRadius: x } = K, R = {
+import { jsxs as x, jsx as l } from "react/jsx-runtime";
+import { cx as J } from "@emotion/css";
+import { forwardRef as K } from "react";
+import { useRadioGroupContext as Q } from "./context.js";
+import { styles as n } from "./styles.js";
+import { useControlled as X } from "../../../utils/hooks/useControlled.js";
+import { theme as Y } from "../../../utils/theme/index.js";
+import { Box as u } from "../../builders/Box/Box.js";
+import { Text as R } from "../../builders/Text/Text.js";
+const { color: r, cornerRadius: N } = Y, m = {
   sm: {
     inner: 12,
+    // neutral: точка вдвое меньше, чем у accent (см. md — подтверждено в Figma)
+    neutralInner: 6,
     outer: 20
   },
   md: {
     inner: 16,
+    // neutral: 8px точка в 24px внешнем круге — Figma node 8677:5697, состояние Selected
+    neutralInner: 8,
     outer: 24
   }
-}, Q = F(
+}, Z = K(
   ({
-    value: i,
+    value: s,
     children: v,
-    checked: s,
+    checked: d,
     defaultChecked: C,
-    onChange: N,
-    disabled: k,
-    className: S,
-    description: m,
-    size: w,
-    side: z,
-    readOnly: B,
+    onChange: k,
+    disabled: B,
+    className: I,
+    description: f,
+    size: S,
+    side: w,
+    readOnly: z,
     error: O,
+    color: P = "accent",
     outerCircleClassName: T,
     innerCircleClassName: V,
     labelContainerClassName: j,
     labelClassName: G,
-    descriptionClassName: I
-  }, P) => {
-    const r = H(), u = !!r, f = s !== void 0, [A, D] = J(
-      s,
+    descriptionClassName: W
+  }, A) => {
+    const o = Q(), b = !!o, y = d !== void 0, [D, L] = X(
+      d,
       C
-    ), e = u ? r.value === i : f ? s : A, d = r?.disabled || k, l = w ?? r?.size ?? "md", L = z ?? r?.side ?? "left", b = B ?? r?.readOnly ?? !1, a = O ?? r?.error ?? !1, p = R[l].outer, y = R[l].inner, M = () => {
-      d || b || (u ? r.setValue?.(i) : (f || D(!e), N?.(!e)));
-    }, U = e && a ? o.fill.negativeTint : e ? o.fill.accentTint : o.fill.bgSecondary, W = e && a ? o.fill.negativePrimary : e ? o.fill.accentPrimary : void 0, q = e && a || a && !e ? o.border.negativeSecondary : o.border.neutralAlphaLow;
+    ), e = b ? o.value === s : y ? d : D, c = o?.disabled || B, a = S ?? o?.size ?? "md", M = w ?? o?.side ?? "left", p = z ?? o?.readOnly ?? !1, i = O ?? o?.error ?? !1, t = P === "neutral", h = m[a].outer, g = t ? m[a].neutralInner : m[a].inner, U = () => {
+      c || p || (b ? o.setValue?.(s) : (y || L(!e), k?.(!e)));
+    }, q = i ? e ? r.fill.negativeTint : r.fill.bgSecondary : e ? t ? r.fill.neutralPrimary : r.fill.accentTint : r.fill.bgSecondary, E = e ? i ? r.fill.negativePrimary : t ? r.icon.secondary : r.fill.accentPrimary : void 0, F = i ? r.border.negativeSecondary : e && t ? r.border.neutralPrimary : r.border.neutralAlphaLow, H = e && (!t || i) ? 0 : 1;
     return (
       // biome-ignore lint/a11y/useSemanticElements: <нарочное допущение тк с button проще работать чем с input>
-      /* @__PURE__ */ h(
+      /* @__PURE__ */ x(
         "button",
         {
-          ref: P,
+          ref: A,
           role: "radio",
           type: "button",
-          "data-value": i,
+          "data-value": s,
           "aria-checked": e,
-          "aria-disabled": d || void 0,
+          "aria-disabled": c || void 0,
           tabIndex: e ? 0 : -1,
-          className: E([
-            t.radio,
-            e && t.checked,
-            d && t.disabled,
-            L === "right" && t.sideRight,
-            b && t.readOnly,
-            S
+          className: J([
+            n.radio,
+            e && n.checked,
+            c && n.disabled,
+            M === "right" && n.sideRight,
+            p && n.readOnly,
+            I
           ]),
-          onClick: M,
+          onClick: U,
           children: [
-            /* @__PURE__ */ n(
-              c,
+            /* @__PURE__ */ l(
+              u,
               {
-                w: p,
-                h: p,
-                backgroundColor: U,
-                borderWidth: e ? 0 : 1,
-                borderColor: q,
+                w: h,
+                h,
+                backgroundColor: q,
+                borderWidth: H,
+                borderColor: F,
                 borderStyle: "solid",
                 center: !0,
-                borderRadius: x.fullRound,
+                borderRadius: N.fullRound,
                 className: T,
-                children: /* @__PURE__ */ n(
-                  c,
+                children: /* @__PURE__ */ l(
+                  u,
                   {
-                    w: y,
-                    h: y,
-                    backgroundColor: W,
-                    borderRadius: x.fullRound,
+                    w: g,
+                    h: g,
+                    backgroundColor: E,
+                    borderRadius: N.fullRound,
                     "aria-hidden": !0,
                     className: V
                   }
                 )
               }
             ),
-            /* @__PURE__ */ h(c, { alignItems: "flex-start", className: j, children: [
-              /* @__PURE__ */ n(
-                g,
+            /* @__PURE__ */ x(u, { alignItems: "flex-start", className: j, children: [
+              /* @__PURE__ */ l(
+                R,
                 {
-                  variant: l === "sm" ? "body-2" : "body-1",
+                  variant: a === "sm" ? "body-2" : "body-1",
                   tag: "span",
                   left: !0,
                   className: G,
                   children: v
                 }
               ),
-              m && /* @__PURE__ */ n(
-                g,
+              f && /* @__PURE__ */ l(
+                R,
                 {
                   tag: "span",
                   variant: "body-2",
                   colorName: "secondary",
-                  className: I,
-                  children: m
+                  className: W,
+                  children: f
                 }
               )
             ] })
@@ -117,7 +122,7 @@ const { color: o, cornerRadius: x } = K, R = {
     );
   }
 );
-Q.displayName = "Radio";
+Z.displayName = "Radio";
 export {
-  Q as Radio
+  Z as Radio
 };

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

@@ -2,7 +2,7 @@ import { FC, MouseEvent, ReactNode } from 'react';
 import { AccentType, NegativeType, NeutralType, PositiveType, Size, TransferType, WarningType } from '../../../types/tokens.types';
 export type BadgeVariant = "filled" | "outline" | "clear";
 export type BadgeColor = NeutralType | AccentType | WarningType | PositiveType | NegativeType | TransferType;
-export type BadgeSize = Extract<Size, "sm" | "md" | "lg">;
+export type BadgeSize = Extract<Size, "xs" | "sm" | "md" | "lg">;
 export type BadgeTextAlign = "left" | "center" | "right";
 export interface BadgeProps {
     /** Содержимое лейбла бейджа. Текст всегда центрируется по вертикали внутри бейджа. */

package/dist/components/shared/Badge/Badge.js

@@ -1,11 +1,11 @@
-import { jsxs as k, jsx as a } from "react/jsx-runtime";
-import { cx as y, css as u } from "@emotion/css";
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { cx as y, css as x } from "@emotion/css";
 import B from "../../../assets/svg/shared/close-outline.svg.js";
 import { Box as L } from "../../builders/Box/Box.js";
 import { theme as $ } from "../../../utils/theme/index.js";
 import { Ripple as j } from "../../builders/Ripple/Ripple.js";
 import { Text as h } from "../../builders/Text/Text.js";
-const { color: e, cornerRadius: g, spacing: l } = $, b = {
+const { color: e, cornerRadius: l, spacing: a } = $, b = {
   neutral: {
     border: e.border.neutralAlphaLow,
     bg: e.status.neutralTint,
@@ -42,32 +42,42 @@ const { color: e, cornerRadius: g, spacing: l } = $, b = {
     color: "var(--text-transfer)",
     colorName: "transfer"
   }
-}, i = {
+}, p = {
+  xs: {
+    h: 18,
+    text: "caption-2",
+    corner: l.xs,
+    p: `3px ${a.xs}`,
+    gap: "2px"
+  },
   sm: {
     h: 24,
     text: "caption-1",
-    corner: g.xs,
-    p: `6px ${l.sm}`
+    corner: l.xs,
+    p: `6px ${a.sm}`,
+    gap: a.sm
   },
   md: {
     h: 32,
     text: "body-2",
-    corner: g.sm,
-    p: `6px ${l.md}`
+    corner: l.sm,
+    p: `6px ${a.md}`,
+    gap: a.sm
   },
   lg: {
     h: 40,
     text: "body-2",
-    corner: g.md,
-    p: `6px ${l.lg}`
+    corner: l.md,
+    p: `6px ${a.lg}`,
+    gap: a.sm
   }
-}, R = (d, n, o, p) => {
-  const t = b[n];
-  let r = t.bg, s = "none";
-  const c = t.color;
+}, R = (d, s, o, m) => {
+  const t = b[s];
+  let r = t.bg, c = "none";
+  const i = t.color;
   switch (d) {
     case "outline":
-      r = "transparent", s = `1px solid ${t.border}`;
+      r = "transparent", c = `1px solid ${t.border}`;
       break;
     case "clear":
       r = "transparent";
@@ -76,64 +86,63 @@ const { color: e, cornerRadius: g, spacing: l } = $, b = {
       r = t.bg;
       break;
   }
-  return u({
-    cursor: o ? "not-allowed" : p ? "pointer" : "default",
+  return x({
+    cursor: o ? "not-allowed" : m ? "pointer" : "default",
     opacity: o ? 0.5 : 1,
     userSelect: "none",
     position: "relative",
     transition: "background-color 0.2s, opacity 0.2s",
     backgroundColor: r,
-    color: c,
-    border: s
+    color: i,
+    border: c
   });
-}, I = u({
+}, I = x({
   display: "inline-flex",
   cursor: "pointer",
   opacity: 0.6,
   "&:hover": { opacity: 1 }
-}), w = u({
+}), w = x({
   display: "inline-flex",
   alignItems: "center",
   color: "inherit"
 }), O = ({
   label: d,
-  color: n = "neutral",
+  color: s = "neutral",
   size: o = "md",
-  variant: p = "filled",
+  variant: m = "filled",
   width: t,
   textAlign: r = "center",
-  leftElement: s,
-  rightElement: c,
-  disabled: x,
-  onClick: m,
+  leftElement: c,
+  rightElement: i,
+  disabled: u,
+  onClick: g,
   onDelete: f,
   className: N,
   labelClassName: C,
   deleteButtonClassName: S
 }) => {
-  const T = R(p, n, x, m);
+  const T = R(m, s, u, g);
   return /* @__PURE__ */ k(
     L,
     {
       row: !0,
       alignItems: "center",
       justifyContent: "center",
-      gap: l.sm,
-      p: i[o].p,
-      h: i[o].h,
+      p: p[o].p,
+      h: p[o].h,
       w: t,
       overflow: "hidden",
-      borderRadius: i[o].corner,
-      onClick: m,
+      borderRadius: p[o].corner,
+      onClick: g,
       className: y(T, N),
       children: [
-        m && /* @__PURE__ */ a(j, {}),
-        s && /* @__PURE__ */ a("span", { className: w, children: s }),
-        /* @__PURE__ */ a(
+        g && /* @__PURE__ */ n(j, {}),
+        c && /* @__PURE__ */ n("span", { className: w, children: c }),
+        /* @__PURE__ */ n(
           h,
           {
-            variant: i[o].text,
-            colorName: b[n].colorName,
+            variant: p[o].text,
+            colorName: b[s].colorName,
             textOverflow: "ellipsis",
             left: r === "left",
             center: r === "center",
@@ -143,16 +152,16 @@ const { color: e, cornerRadius: g, spacing: l } = $, b = {
             children: d
           }
         ),
-        c && /* @__PURE__ */ a("span", { className: w, children: c }),
-        f && !x && /* @__PURE__ */ a(
+        i && /* @__PURE__ */ n("span", { className: w, children: i }),
+        f && !u && /* @__PURE__ */ n(
           h,
           {
             className: y(I, S),
-            colorName: b[n].colorName,
+            colorName: b[s].colorName,
             onClick: (v) => {
               v.stopPropagation(), f(v);
             },
-            children: /* @__PURE__ */ a(B, {})
+            children: /* @__PURE__ */ n(B, {})
           }
         )
       ]

package/dist/components/shared/MarkdownText/MarkdownText.js

@@ -6,11 +6,11 @@ import { ContentEditable as f } from "@lexical/react/LexicalContentEditable";
 import { LexicalErrorBoundary as c } from "@lexical/react/LexicalErrorBoundary";
 import { RichTextPlugin as p } from "@lexical/react/LexicalRichTextPlugin";
 import { useMemo as s } from "react";
-import { EDITOR_TRANSFORMERS as u } from "../../controls/MarkdownTextEditor/transformers/index.js";
-import { markdownTextStyle as x } from "./MarkdownText.styles.js";
-import { Text as w } from "../../builders/Text/Text.js";
-import { EditorStateContext as E } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
-import { getEditorConfig as k } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+import { getEditorConfig as u } from "../../controls/MarkdownTextEditor/configs/editor.config.js";
+import { EDITOR_TRANSFORMERS as x } from "../../controls/MarkdownTextEditor/transformers/index.js";
+import { markdownTextStyle as w } from "./MarkdownText.styles.js";
+import { Text as E } from "../../builders/Text/Text.js";
+import { EditorStateContext as k } from "../../controls/MarkdownTextEditor/contexts/EditorStateContext/EditorStateContext.js";
 function F({
   markdown: t,
   className: i,
@@ -27,15 +27,15 @@ function F({
     }),
     [r]
   );
-  return r ? /* @__PURE__ */ o(E.Provider, { value: a, children: /* @__PURE__ */ o(
+  return r ? /* @__PURE__ */ o(k.Provider, { value: a, children: /* @__PURE__ */ o(
     d,
     {
       initialConfig: {
-        ...k(),
+        ...u(),
         editable: !1,
         namespace: "ui-kit-markdown-text-viewer",
         editorState: () => {
-          l(r, u);
+          l(r, x);
         }
       },
       children: /* @__PURE__ */ o(
@@ -44,7 +44,7 @@ function F({
           contentEditable: /* @__PURE__ */ o(
             f,
             {
-              className: m(x, i),
+              className: m(w, i),
               "aria-placeholder": "markdown text",
               placeholder: () => null
             }
@@ -56,7 +56,7 @@ function F({
     },
     r
   ) }) : typeof e == "string" ? /* @__PURE__ */ o(
-    w,
+    E,
     {
       variant: "body-2",
       colorName: "tertiary",