@dss-kit/ui-kit 0.3.10 → 1.0.1

package/dist/components/shared/Badge/Badge.js

@@ -1,38 +1,38 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { jsxs as B, jsx as n } from "react/jsx-runtime";
 import { cx as y, css as x } 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 $ 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: l, spacing: a } = $, 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"
   },
@@ -46,35 +46,35 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
   xs: {
     h: 18,
     text: "caption-2",
-    corner: l.xs,
+    corner: i.xs,
     p: `3px ${a.xs}`,
     gap: "2px"
   },
   sm: {
     h: 24,
     text: "caption-1",
-    corner: l.xs,
+    corner: i.xs,
     p: `6px ${a.sm}`,
     gap: a.sm
   },
   md: {
     h: 32,
     text: "body-2",
-    corner: l.sm,
+    corner: i.sm,
     p: `6px ${a.md}`,
     gap: a.sm
   },
   lg: {
     h: 40,
     text: "body-2",
-    corner: l.md,
+    corner: i.md,
     p: `6px ${a.lg}`,
     gap: a.sm
   }
-}, R = (d, s, o, m) => {
+}, I = (d, s, o, m) => {
   const t = b[s];
   let r = t.bg, c = "none";
-  const i = t.color;
+  const l = t.color;
   switch (d) {
     case "outline":
       r = "transparent", c = `1px solid ${t.border}`;
@@ -93,10 +93,10 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
     position: "relative",
     transition: "background-color 0.2s, opacity 0.2s",
     backgroundColor: r,
-    color: i,
+    color: l,
     border: c
   });
-}, I = x({
+}, O = x({
   display: "inline-flex",
   cursor: "pointer",
   opacity: 0.6,
@@ -105,7 +105,7 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
   display: "inline-flex",
   alignItems: "center",
   color: "inherit"
-}), O = ({
+}), T = ({
   label: d,
   color: s = "neutral",
   size: o = "md",
@@ -113,30 +113,30 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
   width: t,
   textAlign: r = "center",
   leftElement: c,
-  rightElement: i,
+  rightElement: l,
   disabled: u,
   onClick: g,
   onDelete: f,
   className: N,
-  labelClassName: C,
-  deleteButtonClassName: S
+  labelClassName: _,
+  deleteButtonClassName: C
 }) => {
-  const T = R(m, s, u, g);
-  return /* @__PURE__ */ k(
-    L,
+  const k = I(m, s, u, g);
+  return /* @__PURE__ */ B(
+    j,
     {
       row: !0,
       alignItems: "center",
       justifyContent: "center",
       p: p[o].p,
-      h: p[o].h,
+      minHeight: p[o].h,
       w: t,
       overflow: "hidden",
       borderRadius: p[o].corner,
       onClick: g,
-      className: y(T, N),
+      className: y(k, N),
       children: [
-        g && /* @__PURE__ */ n(j, {}),
+        g && /* @__PURE__ */ n(S, {}),
         c && /* @__PURE__ */ n("span", { className: w, children: c }),
         /* @__PURE__ */ n(
           h,
@@ -148,27 +148,27 @@ const { color: e, cornerRadius: l, spacing: a } = $, b = {
             center: r === "center",
             right: r === "right",
             flex: t ? 1 : void 0,
-            className: C,
+            className: _,
             children: d
           }
         ),
-        i && /* @__PURE__ */ n("span", { className: w, children: i }),
+        l && /* @__PURE__ */ n("span", { className: w, children: l }),
         f && !u && /* @__PURE__ */ n(
           h,
           {
-            className: y(I, S),
+            className: y(O, C),
             colorName: b[s].colorName,
             onClick: (v) => {
               v.stopPropagation(), f(v);
             },
-            children: /* @__PURE__ */ n(B, {})
+            children: /* @__PURE__ */ n($, {})
           }
         )
       ]
     }
   );
 };
-O.displayName = "Badge";
+T.displayName = "Badge";
 export {
-  O as Badge
+  T as Badge
 };

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;

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

@@ -0,0 +1,32 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cx as d } from "@emotion/css";
+import { DOT_BACKGROUND as n, DOT_CUTOUT_COLOR as l, DOT_CUTOUT_WIDTH as f, DOT_SIZE as o } from "./Dot.const.js";
+import { dotStyles as a } from "./styles.js";
+import { Box as p } from "../../builders/Box/Box.js";
+import { theme as s } from "../../../utils/theme/index.js";
+const { cornerRadius: O } = s;
+function _({
+  colorName: t = "negative",
+  size: r = "md",
+  withBorder: e = !0,
+  className: i
+}) {
+  return /* @__PURE__ */ m(
+    p,
+    {
+      display: "inline-flex",
+      flexShrink: 0,
+      w: o[r],
+      h: o[r],
+      borderRadius: O.fullRound,
+      borderWidth: f,
+      borderStyle: "solid",
+      borderColor: e ? l : "transparent",
+      backgroundColor: n[t],
+      className: d(a, i)
+    }
+  );
+}
+export {
+  _ as Dot
+};

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

@@ -0,0 +1,17 @@
+import { AccentType, NegativeType, NeutralType, Size } from '../../../types/tokens.types';
+export type DotColorName = NegativeType | AccentType | NeutralType;
+export type DotSize = Extract<Size, "sm" | "md">;
+export interface DotProps {
+    /** Цветовая схема точки. @default "negative" */
+    colorName?: DotColorName;
+    /** Размер точки вместе с обводкой: "sm" (6px) или "md" (8px). @default "md" */
+    size?: DotSize;
+    /**
+     * Обводка цветом фона страницы. Отделяет точку от элемента, на который она наложена.
+     * При `false` рамка становится прозрачной, место под неё и размеры точки сохраняются.
+     * @default true
+     */
+    withBorder?: boolean;
+    /** Класс для корневого элемента. Добавляется к внутренним классам, например для позиционирования снаружи. */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { Dot } from './Dot';
+export type { DotColorName, DotProps, DotSize } from './Dot.types';

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

@@ -0,0 +1 @@
+export declare const dotStyles: string;

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

@@ -0,0 +1,7 @@
+import { css as o } from "@emotion/css";
+const d = o({
+  backgroundClip: "padding-box"
+});
+export {
+  d as dotStyles
+};

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,

package/dist/components/shared/Skeleton/Skeleton.js

@@ -8,7 +8,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
   md: { width: 32, height: 32 },
   lg: { width: 40, height: 40 },
   xl: { width: 48, height: 48 }
-}, T = {
+}, z = {
   zero: e.zero,
   xs: e.xs,
   sm: e.sm,
@@ -23,7 +23,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
   "full-round": e.fullRound,
   circular: "50%"
 }, w = t({
-  backgroundColor: A.status.neutralTint,
+  backgroundColor: A.status.neutral_tint,
   borderRadius: e.sm,
   position: "relative",
   overflow: "hidden",
@@ -37,7 +37,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
     background: "linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)",
     transform: "translateX(-100%)"
   }
-}), z = t({
+}), M = t({
   animation: "skeleton-pulse 1.5s ease-in-out infinite",
   "@keyframes skeleton-pulse": {
     "0%": {
@@ -50,7 +50,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
       opacity: 1
     }
   }
-}), M = t({
+}), N = t({
   "&::before": {
     animation: "skeleton-wave 1.6s linear infinite"
   },
@@ -68,7 +68,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
 }), b = (r, n) => {
   if (n !== void 0)
     return t({
-      borderRadius: T[n]
+      borderRadius: z[n]
     });
   switch (r) {
     case "circular":
@@ -87,13 +87,13 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
 }, y = (r) => {
   switch (r) {
     case "pulse":
-      return z;
-    case "wave":
       return M;
+    case "wave":
+      return N;
     default:
       return "";
   }
-}, N = ({
+}, T = ({
   width: r,
   height: n,
   variant: s = "rectangular",
@@ -111,7 +111,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
   if (!d)
     return null;
   const h = r || k[i].width, g = n || k[i].height;
-  return s === "text" && a > 1 ? /* @__PURE__ */ o(l, { gap: X.sm, className: u, children: Array.from({ length: a }, (j, p) => /* @__PURE__ */ o(
+  return s === "text" && a > 1 ? /* @__PURE__ */ o(l, { gap: X.sm, className: u, children: Array.from({ length: a }, (_, p) => /* @__PURE__ */ o(
     l,
     {
       className: x(
@@ -138,7 +138,7 @@ const { color: A, cornerRadius: e, spacing: X } = S, k = {
     }
   );
 };
-N.displayName = "Skeleton";
+T.displayName = "Skeleton";
 export {
-  N as Skeleton
+  T as Skeleton
 };