@dss-kit/ui-kit 0.3.10 → 1.0.0

package/dist/components/controls/MarkdownTextEditor/nodes/CustomLinkNode/parts/CustomLinkNodeComponent/CustomLinkNodeComponent.styles.js

@@ -8,7 +8,7 @@ const { color: o, cornerRadius: r, spacing: n, transition: c } = t, a = e({
 }), l = e({
   color: o.text.accent,
   ":hover": {
-    color: o.text.accentHover
+    color: o.text.accent_hover
   }
 }), p = e({
   width: "16px",
@@ -17,10 +17,10 @@ const { color: o, cornerRadius: r, spacing: n, transition: c } = t, a = e({
   cursor: "pointer",
   transition: c.general,
   ":hover": {
-    color: o.icon.negativeHover
+    color: o.icon.negative_hover
   }
 }), x = e({
-  boxShadow: `0 2px 10px 4px ${o.effect.shadowL}`,
+  boxShadow: `0 2px 10px 4px ${o.effect.shadow_l}`,
   borderRadius: r.md,
   padding: n.sm
 });

package/dist/components/controls/MarkdownTextEditor/nodes/ImageRowNode/parts/ImageRowNodeComponent/ImageRowNodeComponent.styles.js

@@ -12,10 +12,10 @@ const { color: o, cornerRadius: t, spacing: i, transition: s } = r, p = e({
   cursor: "pointer",
   transition: s.general,
   ":hover": {
-    color: o.icon.negativeHover
+    color: o.icon.negative_hover
   }
 }), d = e({
-  boxShadow: `0 2px 10px 4px ${o.effect.shadowL}`,
+  boxShadow: `0 2px 10px 4px ${o.effect.shadow_l}`,
   borderRadius: t.xs,
   padding: i.xs
 });

package/dist/components/controls/MarkdownTextEditor/themes/editor.theme.js

@@ -5,7 +5,7 @@ const { color: o, spacing: r } = l, n = t({
   borderSpacing: "0",
   borderCollapse: "separate"
 }), i = t({
-  border: `1px solid ${o.border.neutralPrimary}`,
+  border: `1px solid ${o.border.neutral_primary}`,
   padding: `${r.sm} ${r.sm}`
 }), a = t({
   color: o.text.accent

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

@@ -1,7 +1,7 @@
 import { css as o } from "@emotion/css";
 import { typography as e } from "../../../styles/utils/typography.js";
 import { theme as i } from "../../../utils/theme/index.js";
-const { color: r } = i, l = {
+const { color: r } = i, s = {
   input: o({
     ...e.common,
     ...e.body1,
@@ -9,7 +9,7 @@ const { color: r } = i, l = {
     height: 48,
     textAlign: "center",
     borderRadius: 12,
-    border: `1px solid ${r.border.neutralAlphaBasic}`,
+    border: `1px solid ${r.border.neutral_alpha_basic}`,
     color: r.text.primary,
     outline: "none",
     transition: "border-color 0.5s ease, background-color 0.5s ease, box-shadow 0.5s ease",
@@ -17,11 +17,11 @@ const { color: r } = i, l = {
       color: r.text.tertiary
     },
     "&:focus-visible": {
-      borderColor: r.border.accentPrimary,
-      boxShadow: `0 0 0 1px ${r.border.accentPrimary}`
+      borderColor: r.border.accent_primary,
+      boxShadow: `0 0 0 1px ${r.border.accent_primary}`
     },
     "&:not(.disabled):hover": {
-      backgroundColor: r.fill.neutralPrimaryHover
+      backgroundColor: r.fill.neutral_primary_hover
     },
     "&:disabled": {
       opacity: 0.6,
@@ -29,20 +29,20 @@ const { color: r } = i, l = {
     }
   }),
   error: o({
-    borderColor: r.border.negativePrimary
+    borderColor: r.border.negative_primary
   }),
   success: o({
-    borderColor: r.border.positivePrimary
+    borderColor: r.border.positive_primary
   }),
   disabled: o({
     pointerEvents: "none",
     opacity: 0.5
   }),
   white: o({
-    background: r.fill.bgPrimary
+    background: r.fill.bg_primary
   }),
   gray: o({
-    background: r.fill.bgSecondary
+    background: r.fill.bg_secondary
   }),
   glow: o({
     position: "absolute",
@@ -51,9 +51,9 @@ const { color: r } = i, l = {
     pointerEvents: "none",
     opacity: 0,
     transformOrigin: "center",
-    background: r.fill.accentPrimary
+    background: r.fill.accent_primary
   })
 };
 export {
-  l as styles
+  s as styles
 };

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

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

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

@@ -1,13 +1,13 @@
 import { jsx as t, jsxs as c } from "react/jsx-runtime";
 import { cx as l } from "@emotion/css";
-import C from "react";
+import _ from "react";
 import { styles as e } from "./styles.js";
 import { Box as i } from "../../builders/Box/Box.js";
-import { theme as R } from "../../../utils/theme/index.js";
-import { Text as j } from "../../builders/Text/Text.js";
-import { Ripple as k } from "../../builders/Ripple/Ripple.js";
-const { color: m, cornerRadius: T, spacing: d } = R;
-function P({
+import { theme as C } from "../../../utils/theme/index.js";
+import { Text as R } from "../../builders/Text/Text.js";
+import { Ripple as j } from "../../builders/Ripple/Ripple.js";
+const { color: m, cornerRadius: k, spacing: d } = C;
+function q({
   value: u,
   onChange: f,
   options: b,
@@ -26,13 +26,13 @@ function P({
     {
       row: !0,
       alignItems: "center",
-      borderRadius: T.md,
+      borderRadius: k.md,
       p: d.xs,
       gap: d.md,
       className: l(e[n], s && e["full-width"], p),
       children: b.map((r) => {
         const a = r.value === u, o = r.disabled, w = r.separatorAfter ?? !1;
-        return /* @__PURE__ */ c(C.Fragment, { children: [
+        return /* @__PURE__ */ c(_.Fragment, { children: [
           /* @__PURE__ */ c(
             "button",
             {
@@ -60,14 +60,14 @@ function P({
                   }
                 ),
                 r.label && /* @__PURE__ */ t(
-                  j,
+                  R,
                   {
                     colorName: a ? "primary" : "tertiary",
                     className: N,
                     children: r.label
                   }
                 ),
-                !o && /* @__PURE__ */ t(k, { color: m.fill.bgOverlayPrimary })
+                !o && /* @__PURE__ */ t(j, { color: m.fill.bg_overlay_primary })
               ]
             }
           ),
@@ -76,7 +76,7 @@ function P({
             {
               w: 1,
               h: 24,
-              backgroundColor: m.fill.bgTertiary,
+              backgroundColor: m.fill.bg_tertiary,
               className: v
             }
           )
@@ -86,5 +86,5 @@ function P({
   );
 }
 export {
-  P as SegmentControl
+  q as SegmentControl
 };

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"