@dss-kit/ui-kit 0.3.9 → 1.0.0

package/dist/components/controls/Button/types.d.ts

@@ -11,8 +11,9 @@ export type ButtonType = "clear" | "filled" | "outline";
  * Использует системные токены:
  * - `accent`   — акцентный цвет
  * - `neutral`  — нейтральный
+ * - `neutral-primary` — нейтральный основной
  * - `negative` — негативный (ошибки/отмена)
  * - `positive` — позитивный (успех)
  * - `warning`  — предупреждение
  */
-export type ButtonColor = AccentType | NeutralType | NegativeType | PositiveType | WarningType | TransferType;
+export type ButtonColor = AccentType | NeutralType | "neutral-primary" | NegativeType | PositiveType | WarningType | TransferType;

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

@@ -24,22 +24,22 @@ const { color: r } = e, t = {
     alignItems: "center",
     justifyContent: "center",
     borderRadius: 4,
-    border: `1px solid ${r.border.neutralAlphaHigh}`,
-    backgroundColor: r.fill.bgSecondary,
+    border: `1px solid ${r.border.neutral_alpha_high}`,
+    backgroundColor: r.fill.bg_secondary,
     opacity: 1,
     transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
     position: "relative",
     "& svg": {
-      color: r.border.accentPrimary
+      color: r.border.accent_primary
     }
   }),
   checked: o({
-    borderColor: `${r.border.accentPrimary} !important`,
-    backgroundColor: `${r.fill.accentSecondary} !important`
+    borderColor: `${r.border.accent_primary} !important`,
+    backgroundColor: `${r.fill.accent_secondary} !important`
   }),
   error: o({
-    borderColor: r.border.negativePrimary,
-    backgroundColor: r.fill.negativeSecondary
+    borderColor: r.border.negative_primary,
+    backgroundColor: r.fill.negative_secondary
   })
 }, a = {
   primary: o({}),

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

@@ -44,75 +44,75 @@ const c = r({
   custom: r({})
 }, n = {
   primary: r({
-    backgroundColor: o.color.fill.accentPrimary,
-    ":where(&) svg": { color: o.color.icon.primaryInverse },
+    backgroundColor: o.color.fill.accent_primary,
+    ":where(&) svg": { color: o.color.icon.primary_inverse },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.accentPrimaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryInverse }
+      backgroundColor: o.color.fill.accent_primary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_inverse }
     }
   }),
   secondary: r({
-    backgroundColor: o.color.fill.accentSecondary,
+    backgroundColor: o.color.fill.accent_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.accentSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.accent_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   negative: r({
-    backgroundColor: o.color.fill.negativeSecondary,
+    backgroundColor: o.color.fill.negative_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.negativeSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.negative_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   positive: r({
-    backgroundColor: o.color.fill.positiveSecondary,
+    backgroundColor: o.color.fill.positive_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.positiveSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.positive_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   warning: r({
-    backgroundColor: o.color.fill.warningSecondary,
+    backgroundColor: o.color.fill.warning_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.warningSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.warning_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   neutral: r({
-    backgroundColor: o.color.fill.neutralSecondary,
+    backgroundColor: o.color.fill.neutral_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.neutralSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.neutral_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   transfer: r({
-    backgroundColor: o.color.fill.transferSecondary,
+    backgroundColor: o.color.fill.transfer_secondary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.transferSecondaryHover,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.transfer_secondary_hover,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   "neutral-white": r({
-    backgroundColor: o.color.fill.bgPrimary,
+    backgroundColor: o.color.fill.bg_primary,
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.bgSecondary,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.bg_secondary,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   "no-bg": r({
     backgroundColor: "transparent",
     ":where(&) svg": { color: o.color.icon.primary },
     "&:hover:not(:disabled), &:active:not(:disabled)": {
-      backgroundColor: o.color.fill.bgSecondary,
-      ":where(&) svg": { color: o.color.icon.primaryHover }
+      backgroundColor: o.color.fill.bg_secondary,
+      ":where(&) svg": { color: o.color.icon.primary_hover }
     }
   }),
   custom: r({})

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

@@ -11,12 +11,12 @@ const { color: o, spacing: e } = i, a = r({
   }
 }), l = r({
   "&:hover": {
-    backgroundColor: o.fill.neutralPrimaryHover
+    backgroundColor: o.fill.neutral_primary_hover
   }
-}), g = {
+}), p = {
   "input-container": r({
-    backgroundColor: o.fill.accentSecondary,
-    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    backgroundColor: o.fill.accent_secondary,
+    border: `1px solid ${o.border.neutral_alpha_basic}`,
     padding: `${e.md} ${e.lg}`,
     borderRadius: 12,
     minHeight: 40,
@@ -26,9 +26,9 @@ const { color: o, spacing: e } = i, a = r({
       resize: "none"
     },
     "&:focus-within": {
-      borderColor: o.border.accentPrimary,
+      borderColor: o.border.accent_primary,
       "&:hover": {
-        borderColor: o.border.accentPrimary
+        borderColor: o.border.accent_primary
       }
     }
   }),
@@ -57,7 +57,7 @@ const { color: o, spacing: e } = i, a = r({
     padding: `14px ${e.lg} 14px ${e.lg}`
   }),
   error: r({
-    borderColor: o.border.negativePrimary
+    borderColor: o.border.negative_primary
   }),
   disabled: a,
   readOnly: n,
@@ -66,10 +66,10 @@ const { color: o, spacing: e } = i, a = r({
     height: "auto"
   }),
   primary: r({
-    background: o.fill.bgPrimary
+    background: o.fill.bg_primary
   }),
   secondary: r({
-    background: o.fill.bgSecondary
+    background: o.fill.bg_secondary
   }),
   "clear-button": r({
     cursor: "pointer",
@@ -81,5 +81,5 @@ const { color: o, spacing: e } = i, a = r({
   })
 };
 export {
-  g as styles
+  p as styles
 };

package/dist/components/controls/MarkdownTextEditor/MarkdownTextEditor.js

@@ -1,9 +1,9 @@
 import { jsx as o, jsxs as c } from "react/jsx-runtime";
 import { $convertToMarkdownString as y } from "@lexical/markdown";
-import { AutoFocusPlugin as B } from "@lexical/react/LexicalAutoFocusPlugin";
-import { LexicalComposer as D } from "@lexical/react/LexicalComposer";
-import { HashtagPlugin as V } from "@lexical/react/LexicalHashtagPlugin";
-import { ListPlugin as j } from "@lexical/react/LexicalListPlugin";
+import { AutoFocusPlugin as D } from "@lexical/react/LexicalAutoFocusPlugin";
+import { LexicalComposer as V } from "@lexical/react/LexicalComposer";
+import { HashtagPlugin as j } from "@lexical/react/LexicalHashtagPlugin";
+import { ListPlugin as B } from "@lexical/react/LexicalListPlugin";
 import { MarkdownShortcutPlugin as U } from "@lexical/react/LexicalMarkdownShortcutPlugin";
 import { OnChangePlugin as W } from "@lexical/react/LexicalOnChangePlugin";
 import { TablePlugin as H } from "@lexical/react/LexicalTablePlugin";
@@ -24,38 +24,38 @@ import { Box as h } from "../../builders/Box/Box.js";
 import { theme as to } from "../../../utils/theme/index.js";
 import { Text as eo } from "../../builders/Text/Text.js";
 const { color: n, cornerRadius: w, spacing: e } = to;
-function No({
+function Ao({
   label: l,
   plugins: C,
   field: k,
   disabled: m = !1,
   locale: M,
-  toolbar: P,
-  defaultMarkdown: b,
+  toolbar: b,
+  defaultMarkdown: P,
   events: r = {},
   className: x,
-  labelClassName: S,
-  toolbarClassName: T,
-  editorClassName: E,
+  labelClassName: T,
+  toolbarClassName: E,
+  editorClassName: S,
   fieldClassName: R,
   previewClassName: v
 }) {
-  const [d, A] = u(""), [i, N] = u(!1), { availableActions: s, onImagesUpload: O } = P || {}, I = a(() => z(), []), L = a(
+  const [d, N] = u(""), [i, A] = u(!1), { availableActions: s, onImagesUpload: _ } = b || {}, O = a(() => z(), []), I = a(
     () => ({
       isEditable: !m,
       isPreviewMode: i,
-      setPreviewMode: N,
+      setPreviewMode: A,
       markdownText: d
     }),
     [m, i, d]
-  ), F = a(() => ({
+  ), L = a(() => ({
     availableActions: s || K
   }), [s]), f = p(
     (t) => {
-      A(t), r.onMarkdownChange && r.onMarkdownChange(t);
+      N(t), r.onMarkdownChange && r.onMarkdownChange(t);
     },
     [r]
-  ), _ = p(
+  ), F = p(
     (t) => {
       t.read(() => {
         const $ = y(g);
@@ -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(q, { 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,
       {
@@ -73,7 +73,7 @@ function No({
         borderRadius: w.lg,
         p: e.lg,
         gap: e.sm,
-        backgroundColor: n.fill.neutralSecondary,
+        backgroundColor: n.fill.neutral_secondary,
         className: x,
         children: [
           l ? /* @__PURE__ */ o(
@@ -81,46 +81,46 @@ function No({
             {
               variant: "headline-3",
               fontWeight: "semibold",
-              className: S,
+              className: T,
               children: l
             }
           ) : null,
           /* @__PURE__ */ o(
             Q,
             {
-              onImagesUpload: O,
-              className: T
+              onImagesUpload: _,
+              className: E
             }
           ),
           /* @__PURE__ */ o(
             h,
             {
-              backgroundColor: n.fill.neutralPrimary,
-              border: `1px solid ${n.border.neutralAlphaBasic}`,
+              backgroundColor: n.fill.neutral_primary,
+              border: `1px solid ${n.border.neutral_alpha_basic}`,
               borderRadius: w.md,
               p: `${e.md} ${e.lg}`,
               w: "full",
               h: 144,
               overflow: "auto",
-              className: E,
+              className: S,
               children: i ? /* @__PURE__ */ o(X, { className: v }) : /* @__PURE__ */ o(Y, { ...k, className: R })
             }
           )
         ]
       }
     ),
+    /* @__PURE__ */ o(D, {}),
     /* @__PURE__ */ o(B, {}),
-    /* @__PURE__ */ o(j, {}),
     /* @__PURE__ */ o(H, {}),
-    /* @__PURE__ */ o(V, {}),
+    /* @__PURE__ */ o(j, {}),
     /* @__PURE__ */ o(U, { transformers: g }),
-    /* @__PURE__ */ o(W, { onChange: _ }),
+    /* @__PURE__ */ o(W, { onChange: F }),
     /* @__PURE__ */ o(Z, {}),
-    /* @__PURE__ */ o(oo, { defaultValue: b }),
+    /* @__PURE__ */ o(oo, { defaultValue: P }),
     /* @__PURE__ */ o(ro, {}),
     C
   ] }) }) }) });
 }
 export {
-  No as MarkdownTextEditor
+  Ao as MarkdownTextEditor
 };

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.js

@@ -1,15 +1,15 @@
 import { jsxs as u, jsx as e } from "react/jsx-runtime";
 import { cx as k } from "@emotion/css";
-import { useState as y, useCallback as h, useMemo as B, Fragment as I } from "react";
-import P from "../../../../../../assets/svg/markdown/dots-horizontal.svg.js";
-import { rowStyle as S, rowStyleInteractive as j } from "./ActionMenuButton.styles.js";
-import { IconButton as z } from "../../../../IconButton/IconButton.js";
+import { useState as y, useCallback as h, useMemo as I, Fragment as P } from "react";
+import S from "../../../../../../assets/svg/markdown/dots-horizontal.svg.js";
+import { rowStyle as j, rowStyleInteractive as B } from "./ActionMenuButton.styles.js";
+import { IconButton as b } from "../../../../IconButton/IconButton.js";
 import { Box as c } from "../../../../../builders/Box/Box.js";
-import { theme as A } from "../../../../../../utils/theme/index.js";
+import { theme as z } from "../../../../../../utils/theme/index.js";
 import { Text as O } from "../../../../../builders/Text/Text.js";
 import { Popover as T } from "../../../../../shared/Popover/Popover.js";
-const { color: x, spacing: v } = A;
-function K({
+const { color: x, spacing: v } = z;
+function J({
   groups: n,
   toolbarVisibleActionsCount: m,
   onAction: s,
@@ -24,7 +24,7 @@ function K({
     ({ IconComponent: t, ...o }, l) => /* @__PURE__ */ u(
       c,
       {
-        className: k(S, !r && j),
+        className: k(j, !r && B),
         p: v.sm,
         alignItems: "center",
         flex: !0,
@@ -46,7 +46,7 @@ function K({
       o.id
     ),
     [r, s, p]
-  ), g = B(() => n.map((t, o) => {
+  ), g = I(() => n.map((t, o) => {
     const l = o === n.length - 1;
     if (!t.length)
       return null;
@@ -54,14 +54,14 @@ function K({
       const M = (o ? n.slice(0, o).flat().length : 0) + d + m;
       return f(i, M);
     });
-    return /* @__PURE__ */ u(I, { children: [
+    return /* @__PURE__ */ u(P, { children: [
       C,
       l ? null : /* @__PURE__ */ e(
         c,
         {
           w: "full",
           h: 1,
-          backgroundColor: x.border.neutralAlphaBasic
+          backgroundColor: x.border.neutral_alpha_basic
         }
       )
     ] }, t.flatMap((i) => i.id).join("-"));
@@ -73,10 +73,10 @@ function K({
       placement: "bottom",
       open: w,
       onChange: a,
-      children: /* @__PURE__ */ e(z, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(P, {}) })
+      children: /* @__PURE__ */ e(b, { size: "xs", color: "no-bg", disabled: r, children: /* @__PURE__ */ e(S, {}) })
     }
   );
 }
 export {
-  K as ActionMenuButton
+  J as ActionMenuButton
 };

package/dist/components/controls/MarkdownTextEditor/components/EditorToolbar/ActionMenuButton/ActionMenuButton.styles.js

@@ -4,10 +4,10 @@ const { color: o } = t, l = r({
   cursor: "pointer"
 }), n = r({
   ":hover": {
-    backgroundColor: o.fill.bgSecondary
+    backgroundColor: o.fill.bg_secondary
   },
   ":active": {
-    backgroundColor: o.fill.bgSecondary
+    backgroundColor: o.fill.bg_secondary
   }
 });
 export {