@dss-kit/ui-kit 1.0.0 → 1.0.2

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.bg_tertiary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accent_primary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--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.bg_tertiary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.accent_secondary,
-      "--thumb-bg-color": i.fill.accent_primary
+      "--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.bg_tertiary,
-      "--thumb-bg-color": i.fill.bg_primary
+      "--switch-bg-color": t.fill.bg_tertiary,
+      "--thumb-bg-color": t.fill.bg_primary
     },
     "&:has(input:checked)": {
-      "--switch-bg-color": i.fill.bg_secondary,
-      "--thumb-bg-color": i.fill.bg_tertiary
+      "--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 y, jsx as c } from "react/jsx-runtime";
-import { cx as f, css as i } from "@emotion/css";
-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 R } from "../../../utils/theme/index.js";
-const { color: m } = R, _ = i({
-  borderBottom: `1px solid ${m.border.neutral_alpha_basic}`
-}), g = ({
+import { jsxs as C, jsx as c } from "react/jsx-runtime";
+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 } = R, _ = i({
   tabClassName: u,
   activeTabClassName: h,
   tabTextClassName: x,
-  indicatorClassName: w
+  endSlotClassName: w,
+  indicatorClassName: v
 }) => {
-  const [l, v] = C({
+  const [l, N] = p({
     left: 0,
     width: 0
-  }), o = I([]), N = (e) => (t) => {
+  }), o = I([]), S = (e) => (t) => {
     o.current[e] = t;
   };
-  S(() => {
-    const e = s.findIndex((p) => p.value === a), t = o.current[e];
-    t && v({
+  k(() => {
+    const e = s.findIndex((y) => y.value === a), t = o.current[e];
+    t && N({
       left: t.offsetLeft,
       width: t.offsetWidth
     });
   }, [a, s]);
   const T = (e, t = !1) => () => !t && n(e);
-  return /* @__PURE__ */ y(
-    d,
+  return /* @__PURE__ */ C(
+    f,
     {
       row: !0,
       w: r ? "full" : "auto",
       relative: !0,
-      className: f(_, 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.accent_primary,
-            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 } = R, _ = i({
     }
   );
 };
-g.displayName = "Tabs";
+j.displayName = "Tabs";
 export {
-  g as Tabs
+  j as Tabs
 };

package/dist/components/shared/Counter/Counter.const.d.ts

@@ -0,0 +1,6 @@
+import { CounterColorName, CounterSize } from './Counter.types';
+export declare const DEFAULT_MAX_NUMBER = 99;
+export declare const COUNTER_CUTOUT_WIDTH = 1;
+export declare const COUNTER_CUTOUT_COLOR: "var(--fill-bg-primary)";
+export declare const COUNTER_BACKGROUND: Record<CounterColorName, string>;
+export declare const COUNTER_HEIGHT: Record<CounterSize, number>;

package/dist/components/shared/Counter/Counter.const.js

@@ -0,0 +1,16 @@
+import { theme as o } from "../../../utils/theme/index.js";
+const { color: t } = o, n = 99, c = 1, e = t.fill.bg_primary, T = {
+  negative: t.status.negative,
+  accent: t.status.accent,
+  neutral: t.status.neutral
+}, U = {
+  sm: 16,
+  md: 20
+};
+export {
+  T as COUNTER_BACKGROUND,
+  e as COUNTER_CUTOUT_COLOR,
+  c as COUNTER_CUTOUT_WIDTH,
+  U as COUNTER_HEIGHT,
+  n as DEFAULT_MAX_NUMBER
+};

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

@@ -0,0 +1,11 @@
+import { CounterProps } from './Counter.types';
+/**
+ * Счётчик: число или короткий текст в цветной капсуле.
+ * @example
+ * ```tsx
+ * <Counter value={5} />
+ * <Counter value={120} maxNumber={99} colorName="accent" size="sm" />
+ * <Counter value="New" />
+ * ```
+ */
+export declare function Counter({ value, maxNumber, colorName, size, withBorder, className, }: CounterProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/Counter/Counter.js

@@ -0,0 +1,58 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cx as s } from "@emotion/css";
+import { useMemo as c } from "react";
+import { DEFAULT_MAX_NUMBER as p, COUNTER_BACKGROUND as d, COUNTER_CUTOUT_COLOR as f, COUNTER_CUTOUT_WIDTH as u, COUNTER_HEIGHT as n } from "./Counter.const.js";
+import { getCounterLabel as C } from "./Counter.utils.js";
+import { counterLabelStyles as T, counterStyles as U } from "./styles.js";
+import { Box as R } from "../../builders/Box/Box.js";
+import { theme as h } from "../../../utils/theme/index.js";
+import { Text as O } from "../../builders/Text/Text.js";
+const { cornerRadius: b, spacing: x } = h;
+function A({
+  value: r,
+  maxNumber: e = p,
+  colorName: i = "negative",
+  size: o = "md",
+  withBorder: m = !0,
+  className: a
+}) {
+  const l = c(
+    () => C({ value: r, maxNumber: e }),
+    [r, e]
+  );
+  return /* @__PURE__ */ t(
+    R,
+    {
+      row: !0,
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      h: n[o],
+      minWidth: n[o],
+      px: x.xs,
+      borderRadius: b.fullRound,
+      borderWidth: u,
+      borderStyle: "solid",
+      borderColor: m ? f : "transparent",
+      backgroundColor: d[i],
+      className: s(U, a),
+      children: /* @__PURE__ */ t(
+        O,
+        {
+          tag: "span",
+          variant: "caption-2",
+          fontWeight: "semibold",
+          colorName: "inverse",
+          whiteSpace: "nowrap",
+          center: !0,
+          className: T,
+          children: l
+        }
+      )
+    }
+  );
+}
+export {
+  A as Counter
+};

package/dist/components/shared/Counter/Counter.types.d.ts

@@ -0,0 +1,29 @@
+import { AccentType, NegativeType, NeutralType, Size } from '../../../types/tokens.types';
+export type CounterColorName = NegativeType | AccentType | NeutralType;
+export type CounterSize = Extract<Size, "sm" | "md">;
+export interface CounterProps {
+    /** Значение счётчика. Строка выводится как есть, число ограничивается через `maxNumber`. */
+    value: number | string;
+    /**
+     * Верхняя граница для числового `value`: при превышении выводится `${maxNumber}+`.
+     * `null` снимает ограничение. На строки не действует.
+     * @default 99
+     */
+    maxNumber?: number | null;
+    /** Цветовая схема счётчика. @default "negative" */
+    colorName?: CounterColorName;
+    /** Размер счётчика: "sm" (16px) или "md" (20px). @default "md" */
+    size?: CounterSize;
+    /**
+     * Обводка цветом фона страницы. Отделяет счётчик от элемента, на который он наложен.
+     * При `false` рамка становится прозрачной, место под неё и размеры счётчика сохраняются.
+     * @default true
+     */
+    withBorder?: boolean;
+    /** Класс для корневого элемента. Добавляется к внутренним классам, например для позиционирования снаружи. */
+    className?: string;
+}
+export interface GetCounterLabelParams {
+    value: number | string;
+    maxNumber: number | null;
+}

package/dist/components/shared/Counter/Counter.utils.d.ts

@@ -0,0 +1,2 @@
+import { GetCounterLabelParams } from './Counter.types';
+export declare function getCounterLabel({ value, maxNumber }: GetCounterLabelParams): string;

package/dist/components/shared/Counter/Counter.utils.js

@@ -0,0 +1,6 @@
+function r({ value: t, maxNumber: n }) {
+  return typeof t == "string" ? t : n !== null && t > n ? `${n}+` : String(t);
+}
+export {
+  r as getCounterLabel
+};

package/dist/components/shared/Counter/index.d.ts

@@ -0,0 +1,2 @@
+export { Counter } from './Counter';
+export type { CounterColorName, CounterProps, CounterSize, } from './Counter.types';

package/dist/components/shared/Counter/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const counterStyles: string;
+export declare const counterLabelStyles: string;

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

@@ -0,0 +1,11 @@
+import { css as t } from "@emotion/css";
+const e = t({
+  backgroundClip: "padding-box"
+}), c = t({
+  textBoxTrim: "trim-both",
+  textBoxEdge: "cap alphabetic"
+});
+export {
+  c as counterLabelStyles,
+  e as counterStyles
+};

package/dist/components/shared/Dot/Dot.const.d.ts

@@ -0,0 +1,5 @@
+import { DotColorName, DotSize } from './Dot.types';
+export declare const DOT_CUTOUT_WIDTH = 1;
+export declare const DOT_CUTOUT_COLOR: "var(--fill-bg-primary)";
+export declare const DOT_BACKGROUND: Record<DotColorName, string>;
+export declare const DOT_SIZE: Record<DotSize, number>;

package/dist/components/shared/Dot/Dot.const.js

@@ -0,0 +1,15 @@
+import { theme as o } from "../../../utils/theme/index.js";
+const { color: t } = o, e = 1, n = t.fill.bg_primary, c = {
+  negative: t.status.negative,
+  accent: t.status.accent,
+  neutral: t.status.neutral
+}, a = {
+  sm: 6,
+  md: 8
+};
+export {
+  c as DOT_BACKGROUND,
+  n as DOT_CUTOUT_COLOR,
+  e as DOT_CUTOUT_WIDTH,
+  a as DOT_SIZE
+};

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

@@ -0,0 +1,10 @@
+import { DotProps } from './Dot.types';
+/**
+ * Точка-индикатор без текста, например отметка непрочитанного.
+ * @example
+ * ```tsx
+ * <Dot />
+ * <Dot colorName="accent" size="sm" />
+ * ```
+ */
+export declare function Dot({ colorName, size, withBorder, className, }: DotProps): import("react/jsx-runtime").JSX.Element;