@dss-kit/ui-kit 0.3.10 → 1.0.1

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.bgTertiary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accentPrimary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--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.bgTertiary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accentSecondary,
-      "--thumb-bg-color": i.fill.accentPrimary
+      "--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.bgTertiary,
-      "--thumb-bg-color": i.fill.bgPrimary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.bgSecondary,
-      "--thumb-bg-color": i.fill.bgTertiary
+      "--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 C, 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 { 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}`
-}), g = ({
+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 } = B, R = i({
   tabClassName: u,
   activeTabClassName: h,
   tabTextClassName: x,
-  indicatorClassName: w
+  endSlotClassName: w,
+  indicatorClassName: v
 }) => {
-  const [l, v] = p({
+  const [l, N] = p({
     left: 0,
     width: 0
-  }), o = I([]), N = (e) => (t) => {
+  }), o = I([]), S = (e) => (t) => {
     o.current[e] = t;
   };
-  S(() => {
+  k(() => {
     const e = s.findIndex((y) => y.value === a), t = o.current[e];
-    t && v({
+    t && N({
       left: t.offsetLeft,
       width: t.offsetWidth
     });
   }, [a, s]);
   const T = (e, t = !1) => () => !t && n(e);
   return /* @__PURE__ */ C(
-    d,
+    f,
     {
       row: !0,
       w: r ? "full" : "auto",
       relative: !0,
-      className: f(R, 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.accentPrimary,
-            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 } = B, R = i({
     }
   );
 };
-g.displayName = "Tabs";
+j.displayName = "Tabs";
 export {
-  g as Tabs
+  j as Tabs
 };

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(