@dss-kit/ui-kit 0.3.9 → 1.0.0

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

@@ -1,19 +1,19 @@
 import { css as o } from "@emotion/css";
 import { theme as e } from "../../../utils/theme/index.js";
 const { color: r } = e, t = o({
-  border: `1px solid ${r.border.neutralAlphaBasic}`
+  border: `1px solid ${r.border.neutral_alpha_basic}`
 }), n = o({
   display: "flex",
   alignItems: "center",
   justifyContent: "center"
 }), l = {
   primary: o({
-    background: r.fill.bgPrimary,
-    border: `1px solid ${r.border.neutralAlphaBasic}`
+    background: r.fill.bg_primary,
+    border: `1px solid ${r.border.neutral_alpha_basic}`
   }),
   secondary: o({
-    background: r.fill.bgSecondary,
-    border: `1px solid ${r.border.neutralAlphaBasic}`
+    background: r.fill.bg_secondary,
+    border: `1px solid ${r.border.neutral_alpha_basic}`
   }),
   button: o({
     cursor: "pointer",
@@ -29,7 +29,7 @@ const { color: r } = e, t = o({
     overflow: "hidden",
     background: "none",
     [`&:hover:not(.${t})`]: {
-      background: r.fill.neutralPrimaryHover
+      background: r.fill.neutral_primary_hover
     },
     [`& .${n} svg`]: {
       color: r.icon.tertiary
@@ -41,10 +41,10 @@ const { color: r } = e, t = o({
   }),
   "button-active": t,
   "button-primary": o({
-    background: r.fill.bgSecondary
+    background: r.fill.bg_secondary
   }),
   "button-secondary": o({
-    background: r.fill.bgPrimary
+    background: r.fill.bg_primary
   }),
   "button-disabled": o({
     opacity: 0.5,

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

@@ -1,8 +1,8 @@
 import { css as e } from "@emotion/css";
 import { typography as i } from "../../../styles/utils/typography.js";
-import { theme as a } from "../../../utils/theme/index.js";
-const { color: o, cornerRadius: r } = a, n = e({
-  borderColor: o.border.negativePrimary
+import { theme as s } from "../../../utils/theme/index.js";
+const { color: o, cornerRadius: r } = s, n = e({
+  borderColor: o.border.negative_primary
 }), t = e({
   cursor: "not-allowed",
   opacity: 0.5
@@ -17,7 +17,7 @@ const { color: o, cornerRadius: r } = a, n = e({
     height: 20,
     transition: "transform 0.2s ease-in"
   }
-}), s = e({
+}), a = e({
   [`& .${l} svg`]: {
     transform: "rotateX(180deg)"
   }
@@ -34,21 +34,21 @@ const { color: o, cornerRadius: r } = a, n = e({
     width: "100%"
   }),
   "select-input": e({
-    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    border: `1px solid ${o.border.neutral_alpha_basic}`,
     borderRadius: r.md,
     cursor: "pointer",
     transition: "all 0.2s ease-in-out",
     boxSizing: "border-box",
     [`&:hover:not(.${t})`]: {
-      borderColor: o.border.neutralAlphaHigh,
-      backgroundColor: o.fill.neutralPrimaryHover
+      borderColor: o.border.neutral_alpha_high,
+      backgroundColor: o.fill.neutral_primary_hover
     },
     [`&:focus:not(.${t})`]: {
       outline: "none",
-      borderColor: o.border.accentPrimary
+      borderColor: o.border.accent_primary
     },
     [`&.${n}:focus`]: {
-      boxShadow: `0 0 0 3px ${o.effect.shadowS}`
+      boxShadow: `0 0 0 3px ${o.effect.shadow_s}`
     }
   }),
   // Size variants
@@ -69,14 +69,14 @@ const { color: o, cornerRadius: r } = a, n = e({
   }),
   // Background variants
   "background-primary": e({
-    backgroundColor: o.fill.bgPrimary
+    backgroundColor: o.fill.bg_primary
   }),
   "background-secondary": e({
-    backgroundColor: o.fill.bgSecondary
+    backgroundColor: o.fill.bg_secondary
   }),
   error: n,
   disabled: t,
-  open: s,
+  open: a,
   "select-value": e({
     flex: 1,
     color: o.text.primary,
@@ -96,9 +96,9 @@ const { color: o, cornerRadius: r } = a, n = e({
   "select-arrow": l,
   "select-dropdown": e({
     marginTop: 4,
-    backgroundColor: o.fill.bgPrimary,
+    backgroundColor: o.fill.bg_primary,
     borderRadius: r.md,
-    boxShadow: `0 4px 20px 0 ${o.effect.shadowS}`,
+    boxShadow: `0 4px 20px 0 ${o.effect.shadow_s}`,
     maxHeight: 224,
     overflow: "hidden"
   }),
@@ -111,7 +111,7 @@ const { color: o, cornerRadius: r } = a, n = e({
     "&::-webkit-scrollbar-thumb": {
       background: "#c1c1c1",
       borderRadius: 3,
-      "&:hover": { background: o.fill.neutralSecondary }
+      "&:hover": { background: o.fill.neutral_secondary }
     }
   }),
   "select-menu-item": e({
@@ -122,7 +122,7 @@ const { color: o, cornerRadius: r } = a, n = e({
     overflow: "hidden",
     textOverflow: "ellipsis",
     "&:hover": {
-      backgroundColor: o.fill.neutralSecondaryHover
+      backgroundColor: o.fill.neutral_secondary_hover
     }
   }),
   "select-menu-item-first": e({
@@ -132,7 +132,7 @@ const { color: o, cornerRadius: r } = a, n = e({
     }
   }),
   selected: e({
-    backgroundColor: o.fill.neutralSecondary
+    backgroundColor: o.fill.neutral_secondary
   }),
   "overflow-tooltip-container": e({
     width: "100%",
@@ -152,7 +152,7 @@ const { color: o, cornerRadius: r } = a, n = e({
     justifyContent: "center",
     padding: 14
   })
-}, u = {
+}, h = {
   xs: e({
     width: 16,
     height: 16,
@@ -166,6 +166,6 @@ const { color: o, cornerRadius: r } = a, n = e({
   md: e({})
 };
 export {
-  u as selectArrowSizesStyles,
+  h as selectArrowSizesStyles,
   b as styles
 };

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

@@ -39,32 +39,32 @@ 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({
     "&:has(input:not(:checked))": {
-      "--switch-bg-color": i.fill.bgTertiary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": i.fill.bg_tertiary,
+      "--thumb-bg-color": i.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accentPrimary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": i.fill.accent_primary,
+      "--thumb-bg-color": i.fill.bg_primary
     }
   }),
   variant_secondary: t({
     "&:has(input:not(:checked))": {
-      "--switch-bg-color": i.fill.bgTertiary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": i.fill.bg_tertiary,
+      "--thumb-bg-color": i.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accentSecondary,
-      "--thumb-bg-color": i.fill.accentPrimary
+      "--switch-bg-color": i.fill.accent_secondary,
+      "--thumb-bg-color": i.fill.accent_primary
     }
   }),
   variant_theme: t({
     "&:has(input:not(:checked))": {
-      "--switch-bg-color": i.fill.bgTertiary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": i.fill.bg_tertiary,
+      "--thumb-bg-color": i.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.bgSecondary,
-      "--thumb-bg-color": i.fill.bgTertiary
+      "--switch-bg-color": i.fill.bg_secondary,
+      "--thumb-bg-color": i.fill.bg_tertiary
     }
   }),
   // Size classes

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

@@ -1,11 +1,11 @@
-import { jsxs as C, jsx as c } from "react/jsx-runtime";
+import { jsxs as y, jsx as c } from "react/jsx-runtime";
 import { cx as f, css as i } from "@emotion/css";
-import { useState as p, useRef as I, useEffect as S } from "react";
+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 B } from "../../../utils/theme/index.js";
-const { color: m } = B, R = i({
-  borderBottom: `1px solid ${m.border.neutralAlphaBasic}`
+import { theme as R } from "../../../utils/theme/index.js";
+const { color: m } = R, _ = i({
+  borderBottom: `1px solid ${m.border.neutral_alpha_basic}`
 }), g = ({
   value: a,
   onChange: n,
@@ -17,27 +17,27 @@ const { color: m } = B, R = i({
   tabTextClassName: x,
   indicatorClassName: w
 }) => {
-  const [l, v] = p({
+  const [l, v] = C({
     left: 0,
     width: 0
   }), o = I([]), N = (e) => (t) => {
     o.current[e] = t;
   };
   S(() => {
-    const e = s.findIndex((y) => y.value === a), t = o.current[e];
+    const e = s.findIndex((p) => p.value === a), t = o.current[e];
     t && v({
       left: t.offsetLeft,
       width: t.offsetWidth
     });
   }, [a, s]);
   const T = (e, t = !1) => () => !t && n(e);
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ y(
     d,
     {
       row: !0,
       w: r ? "full" : "auto",
       relative: !0,
-      className: f(R, b),
+      className: f(_, b),
       children: [
         s.map((e, t) => /* @__PURE__ */ c(
           k,
@@ -62,7 +62,7 @@ const { color: m } = B, R = i({
             absolute: !0,
             bottom: -1,
             left: l.left,
-            backgroundColor: m.border.accentPrimary,
+            backgroundColor: m.border.accent_primary,
             className: f(
               i({
                 transition: "left 0.2s ease, width 0.2s ease"

package/dist/components/shared/Avatar/Avatar.js

@@ -5,32 +5,32 @@ import { theme as b } from "../../../utils/theme/index.js";
 import { Box as h } from "../../builders/Box/Box.js";
 const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
   primary: {
-    bg: i.fill.accentTint,
+    bg: i.fill.accent_tint,
     text: i.text.accent,
     icon: i.icon.accent
   },
   secondary: {
-    bg: i.fill.neutralTint,
+    bg: i.fill.neutral_tint,
     text: i.text.secondary,
     icon: i.icon.tertiary
   },
   negative: {
-    bg: i.fill.negativeTint,
+    bg: i.fill.negative_tint,
     text: i.text.negative,
     icon: i.icon.negative
   },
   positive: {
-    bg: i.fill.positiveTint,
+    bg: i.fill.positive_tint,
     text: i.text.positive,
     icon: i.icon.positive
   },
   warning: {
-    bg: i.fill.warningTint,
+    bg: i.fill.warning_tint,
     text: i.text.warning,
     icon: i.icon.warning
   },
   neutral: {
-    bg: i.fill.neutralTint,
+    bg: i.fill.neutral_tint,
     text: i.text.tertiary,
     icon: i.icon.tertiary
   },
@@ -40,7 +40,7 @@ const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
     icon: "var(--icon-transfer)"
   },
   custom: {
-    bg: i.fill.accentTint,
+    bg: i.fill.accent_tint,
     text: i.text.accent,
     icon: i.icon.accent
   }
@@ -126,7 +126,7 @@ const { color: i, cornerRadius: o, height: t, transition: d } = b, S = {
       },
       "&:has(img)": {
         backgroundColor: "transparent",
-        border: `1px solid ${i.border.neutralAlphaLow}`
+        border: `1px solid ${i.border.neutral_alpha_low}`
       }
     }), [n, e, c]);
     return /* @__PURE__ */ v(

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,38 +1,38 @@
-import { jsxs as k, jsx as a } from "react/jsx-runtime";
-import { cx as y, css as u } 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 { jsxs as B, jsx as n } from "react/jsx-runtime";
+import { cx as y, css as x } from "@emotion/css";
+import $ from "../../../assets/svg/shared/close-outline.svg.js";
+import { Box as j } from "../../builders/Box/Box.js";
+import { theme as R } from "../../../utils/theme/index.js";
+import { Ripple as S } 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: i, spacing: a } = R, b = {
   neutral: {
-    border: e.border.neutralAlphaLow,
-    bg: e.status.neutralTint,
+    border: e.border.neutral_alpha_low,
+    bg: e.status.neutral_tint,
     color: e.text.secondary,
     colorName: "secondary"
   },
   accent: {
-    border: e.border.accentSecondary,
-    bg: e.status.accentTintLow,
+    border: e.border.accent_secondary,
+    bg: e.status.accent_tint_low,
     color: e.text.accent,
     colorName: "accent"
   },
   warning: {
-    border: e.border.warningSecondary,
-    bg: e.status.warningTintLow,
+    border: e.border.warning_secondary,
+    bg: e.status.warning_tint_low,
     color: e.text.warning,
     colorName: "warning"
   },
   positive: {
-    border: e.border.positiveSecondary,
-    bg: e.status.positiveTintLow,
+    border: e.border.positive_secondary,
+    bg: e.status.positive_tint_low,
     color: e.text.positive,
     colorName: "positive"
   },
   negative: {
-    border: e.border.negativeSecondary,
-    bg: e.status.negativeTintLow,
+    border: e.border.negative_secondary,
+    bg: e.status.negative_tint_low,
     color: e.text.negative,
     colorName: "negative"
   },
@@ -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: i.xs,
+    p: `3px ${a.xs}`,
+    gap: "2px"
+  },
   sm: {
     h: 24,
     text: "caption-1",
-    corner: g.xs,
-    p: `6px ${l.sm}`
+    corner: i.xs,
+    p: `6px ${a.sm}`,
+    gap: a.sm
   },
   md: {
     h: 32,
     text: "body-2",
-    corner: g.sm,
-    p: `6px ${l.md}`
+    corner: i.sm,
+    p: `6px ${a.md}`,
+    gap: a.sm
   },
   lg: {
     h: 40,
     text: "body-2",
-    corner: g.md,
-    p: `6px ${l.lg}`
+    corner: i.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;
+}, I = (d, s, o, m) => {
+  const t = b[s];
+  let r = t.bg, c = "none";
+  const l = 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,90 +86,89 @@ 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: l,
+    border: c
   });
-}, I = u({
+}, O = x({
   display: "inline-flex",
   cursor: "pointer",
   opacity: 0.6,
   "&:hover": { opacity: 1 }
-}), w = u({
+}), w = x({
   display: "inline-flex",
   alignItems: "center",
   color: "inherit"
-}), O = ({
+}), T = ({
   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: l,
+  disabled: u,
+  onClick: g,
   onDelete: f,
   className: N,
-  labelClassName: C,
-  deleteButtonClassName: S
+  labelClassName: _,
+  deleteButtonClassName: C
 }) => {
-  const T = R(p, n, x, m);
-  return /* @__PURE__ */ k(
-    L,
+  const k = I(m, s, u, g);
+  return /* @__PURE__ */ B(
+    j,
     {
       row: !0,
       alignItems: "center",
       justifyContent: "center",
-      gap: l.sm,
-      p: i[o].p,
-      h: i[o].h,
+      p: p[o].p,
+      minHeight: p[o].h,
       w: t,
       overflow: "hidden",
-      borderRadius: i[o].corner,
-      onClick: m,
-      className: y(T, N),
+      borderRadius: p[o].corner,
+      onClick: g,
+      className: y(k, N),
       children: [
-        m && /* @__PURE__ */ a(j, {}),
-        s && /* @__PURE__ */ a("span", { className: w, children: s }),
-        /* @__PURE__ */ a(
+        g && /* @__PURE__ */ n(S, {}),
+        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",
             right: r === "right",
             flex: t ? 1 : void 0,
-            className: C,
+            className: _,
             children: d
           }
         ),
-        c && /* @__PURE__ */ a("span", { className: w, children: c }),
-        f && !x && /* @__PURE__ */ a(
+        l && /* @__PURE__ */ n("span", { className: w, children: l }),
+        f && !u && /* @__PURE__ */ n(
           h,
           {
-            className: y(I, S),
-            colorName: b[n].colorName,
+            className: y(O, C),
+            colorName: b[s].colorName,
             onClick: (v) => {
               v.stopPropagation(), f(v);
             },
-            children: /* @__PURE__ */ a(B, {})
+            children: /* @__PURE__ */ n($, {})
           }
         )
       ]
     }
   );
 };
-O.displayName = "Badge";
+T.displayName = "Badge";
 export {
-  O as Badge
+  T as Badge
 };

package/dist/components/shared/Hint/styles.js

@@ -65,27 +65,27 @@ const { color: t, cornerRadius: o, spacing: n } = i, s = {
   },
   soft: {
     warning: e({
-      background: t.status.warningTintLow,
+      background: t.status.warning_tint_low,
       color: t.text.warning
     }),
     negative: e({
-      background: t.status.negativeTintLow,
+      background: t.status.negative_tint_low,
       color: t.text.negative
     }),
     positive: e({
-      background: t.status.positiveTintLow,
+      background: t.status.positive_tint_low,
       color: t.text.positive
     }),
     accent: e({
-      background: t.status.accentTintLow,
+      background: t.status.accent_tint_low,
       color: t.text.accent
     }),
     neutral: e({
-      background: t.status.neutralTintLow,
+      background: t.status.neutral_tint_low,
       color: t.text.tertiary
     }),
     transfer: e({
-      background: t.status.transferTintLow,
+      background: t.status.transfer_tint_low,
       color: t.text.transfer
     })
   }

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

@@ -58,7 +58,7 @@ const { color: o, cornerRadius: n, spacing: t } = l, h = i({
   code: {
     padding: `0 ${t.xs}`,
     borderRadius: n.xs,
-    backgroundColor: o.fill.neutralSecondary,
+    backgroundColor: o.fill.neutral_secondary,
     fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
   },
   "pre code": {
@@ -69,7 +69,7 @@ const { color: o, cornerRadius: n, spacing: t } = l, h = i({
   blockquote: {
     marginLeft: 0,
     paddingLeft: t.md,
-    borderLeft: `3px solid ${o.border.neutralAlphaBasic}`,
+    borderLeft: `3px solid ${o.border.neutral_alpha_basic}`,
     color: o.text.secondary
   },
   table: {
@@ -77,12 +77,12 @@ const { color: o, cornerRadius: n, spacing: t } = l, h = i({
     borderCollapse: "collapse"
   },
   "th, td": {
-    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    border: `1px solid ${o.border.neutral_alpha_basic}`,
     padding: t.sm,
     textAlign: "left"
   },
   th: {
-    backgroundColor: o.fill.neutralSecondary
+    backgroundColor: o.fill.neutral_secondary
   }
 });
 export {

package/dist/components/shared/Popover/PopoverContent/PopoverContent.js

@@ -11,7 +11,7 @@ const { color: o, cornerRadius: p } = i, f = m`
   }
 `, d = c({
   animation: `${f} 0.2s ease-out`,
-  boxShadow: `0 4px 20px 0 ${o.effect.shadowS}`
+  boxShadow: `0 4px 20px 0 ${o.effect.shadow_s}`
 }), b = ({
   children: r,
   className: t,
@@ -20,7 +20,7 @@ const { color: o, cornerRadius: p } = i, f = m`
   n,
   {
     relative: !0,
-    backgroundColor: o.fill.bgPrimary,
+    backgroundColor: o.fill.bg_primary,
     borderRadius: p.md,
     className: a(d, t),
     ...e,