@dss-kit/ui-kit 0.3.4 → 0.3.5

package/dist/components/builders/Modal/Modal.js

@@ -2,12 +2,12 @@ import { jsx as t, jsxs as M } from "react/jsx-runtime";
 import { cx as i } from "@emotion/css";
 import { forwardRef as B, useEffect as c, useCallback as f, useRef as D } from "react";
 import N from "../../../assets/svg/modal/close.svg.js";
-import { ModalContext as E } from "./context.js";
+import { ModalContext as z } from "./context.js";
 import { styles as n } from "./styles.js";
-import { Portal as P } from "../Portal/Portal.js";
+import { Portal as E } from "../Portal/Portal.js";
 import { Box as s } from "../Box/Box.js";
-import { IconButton as j } from "../../controls/IconButton/IconButton.js";
-import { theme as z } from "../../../utils/theme/index.js";
+import { IconButton as P } from "../../controls/IconButton/IconButton.js";
+import { theme as j } from "../../../utils/theme/index.js";
 const C = B(
   ({
     isOpen: o,
@@ -21,7 +21,7 @@ const C = B(
     disableBodyScroll: l = !0,
     showAbsoluteCloseButton: g,
     children: v
-  }, k) => {
+  }, x) => {
     c(() => {
       if (l && o && typeof window < "u" && typeof document < "u") {
         const e = window.getComputedStyle(document.body).overflow;
@@ -40,7 +40,7 @@ const C = B(
       if (typeof window < "u" && typeof document < "u" && u && o)
         return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
     }, [o, u, d]);
-    const a = D(!1), x = f((e) => {
+    const a = D(!1), k = f((e) => {
       a.current = e.target === e.currentTarget;
     }, []), b = f(
       (e) => {
@@ -48,7 +48,7 @@ const C = B(
       },
       [m, r]
     );
-    return o ? /* @__PURE__ */ t(P, { children: /* @__PURE__ */ t(E.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
+    return o ? /* @__PURE__ */ t(E, { children: /* @__PURE__ */ t(z.Provider, { value: { isOpen: o, onClose: r }, children: /* @__PURE__ */ t(
       s,
       {
         position: "fixed",
@@ -59,15 +59,15 @@ const C = B(
         row: !0,
         center: !0,
         flex: 1,
-        onMouseDown: x,
+        onMouseDown: k,
         onClick: b,
-        backgroundColor: z.color.fill.bgOverlayPrimary,
+        backgroundColor: j.color.fill.bgOverlayPrimary,
         className: i(n.overlay, y),
         zIndex: 1,
         children: /* @__PURE__ */ M(
           s,
           {
-            ref: k,
+            ref: x,
             className: i(
               n.modal,
               n[`size_${h}`],
@@ -76,7 +76,7 @@ const C = B(
             relative: !0,
             children: [
               g && /* @__PURE__ */ t(
-                j,
+                P,
                 {
                   className: i(
                     n.closeButton,
@@ -84,6 +84,7 @@ const C = B(
                   ),
                   onClick: r,
                   color: "neutral",
+                  size: "xs",
                   children: /* @__PURE__ */ t(N, {})
                 }
               ),

package/dist/components/builders/Modal/ModalFooter/ModalFooter.d.ts

@@ -1,4 +1,36 @@
 import { BoxProps } from '../../Box';
+/**
+ * Пропсы компонента `ModalFooter`.
+ *
+ * Наследует все пропсы `Box` (см. {@link BoxProps}); ниже переопределены
+ * футер-специфичные пропсы с их значениями по умолчанию.
+ */
+export interface ModalFooterProps extends BoxProps {
+    /**
+     * Дочерние элементы футера (обычно кнопки действий).
+     * @default undefined */
+    children?: React.ReactNode;
+    /**
+     * Горизонтальное расположение элементов (flex-direction: row).
+     * @default true */
+    row?: BoxProps["row"];
+    /**
+     * Включение flexbox layout.
+     * @default true */
+    flex?: BoxProps["flex"];
+    /**
+     * Расстояние между дочерними элементами.
+     * @default theme.spacing.lg */
+    gap?: BoxProps["gap"];
+    /**
+     * Внутренние отступы футера.
+     * @default theme.spacing["2xl"] */
+    p?: BoxProps["p"];
+    /**
+     * Дополнительный CSS-класс для корневого `Box` футера.
+     * @default undefined */
+    className?: string;
+}
 /**
  * Компонент футера модального окна.
  *
@@ -27,7 +59,7 @@ import { BoxProps } from '../../Box';
  * </ModalFooter>
  * ```
  */
-declare const ModalFooter: import('react').ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const ModalFooter: import('react').ForwardRefExoticComponent<Omit<ModalFooterProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 /**
  * Экспорт компонента ModalFooter.
  *

package/dist/components/builders/Modal/ModalFooter/ModalFooter.js

@@ -7,19 +7,13 @@ const x = f({
   borderTop: `1px solid ${o.color.border.neutralAlphaBasic}`
 }), u = d(
   ({
-    /** Дочерние элементы футера (обычно кнопки) */
     children: r,
-    /** Горизонтальное расположение элементов. @default true */
     row: t = !0,
-    /** Включение flexbox layout. @default true */
     flex: e = !0,
-    /** Расстояние между дочерними элементами. @default spacing.lg */
     gap: m = o.spacing.lg,
-    /** Внутренние отступы футера. @default spacing['2xl'] */
     p: s = o.spacing["2xl"],
-    /** Дополнительные CSS классы */
     className: a,
-    /** Остальные пропсы передаются в компонент Box */
+    // Остальные пропсы передаются в компонент Box
     ...p
   }, l) => /* @__PURE__ */ i(
     n,

package/dist/components/builders/Modal/ModalFooter/index.d.ts

@@ -1 +1,2 @@
+export type { ModalFooterProps } from './ModalFooter';
 export { ModalFooter } from './ModalFooter';

package/dist/components/builders/Modal/ModalHeader/ModalHeader.d.ts

@@ -1,5 +1,5 @@
 import { BoxProps } from '../../Box';
-interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt" | "pb" | "row" | "justifyContent" | "w"> {
+export interface ModalHeaderProps extends Pick<BoxProps, "p" | "px" | "py" | "pt" | "pb" | "row" | "justifyContent" | "w"> {
     /**
      * Основной заголовок, отображаемый в шапке модального окна.
      * Стилизуется как title-3 с полужирным начертанием.

package/dist/components/builders/Modal/ModalHeader/ModalHeader.js

@@ -1,79 +1,80 @@
-import { jsxs as t, jsx as o } from "react/jsx-runtime";
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import { forwardRef as B } from "react";
 import W from "../../../../assets/svg/modal/close.svg.js";
 import { useModalContext as v } from "../context.js";
-import { Box as e } from "../../Box/Box.js";
-import { theme as r } from "../../../../utils/theme/index.js";
-import { Text as l } from "../../Text/Text.js";
+import { Box as t } from "../../Box/Box.js";
+import { theme as o } from "../../../../utils/theme/index.js";
+import { Text as a } from "../../Text/Text.js";
 import { IconButton as M } from "../../../controls/IconButton/IconButton.js";
 const j = B(
   ({
-    title: a,
-    subtitle: i,
+    title: i,
+    subtitle: l,
     w: m = "full",
-    p: n,
-    py: s,
-    px: d = r.spacing["2xl"],
-    pt: c = r.spacing["2xl"],
-    pb: p = r.spacing.lg,
+    p: s,
+    py: n,
+    px: d = o.spacing["2xl"],
+    pt: c = o.spacing["2xl"],
+    pb: p = o.spacing.lg,
     row: f = !0,
     justifyContent: h = "space-between",
     showCloseButton: g = !1,
-    className: b,
-    titleClassName: u,
-    subtitleClassName: x,
+    className: x,
+    titleClassName: b,
+    subtitleClassName: u,
     closeButtonClassName: N
   }, y) => {
     const { onClose: C } = v();
-    return /* @__PURE__ */ t(
-      e,
+    return /* @__PURE__ */ e(
+      t,
       {
         w: m,
-        p: n,
-        py: s,
+        p: s,
+        py: n,
         px: d,
         pt: c,
         pb: p,
         row: f,
         justifyContent: h,
         ref: y,
-        borderColor: r.color.border.neutralAlphaBasic,
+        borderColor: o.color.border.neutralAlphaBasic,
         borderWidth: 0,
         borderBottomWidth: 1,
         borderStyle: "solid",
-        className: b,
+        className: x,
         children: [
-          /* @__PURE__ */ t(e, { gap: r.spacing.sm, children: [
-            /* @__PURE__ */ o(
-              l,
+          /* @__PURE__ */ e(t, { gap: o.spacing.sm, children: [
+            /* @__PURE__ */ r(
+              a,
               {
                 variant: "title-3",
                 colorName: "primary",
                 fontWeight: "semibold",
-                className: u,
-                children: a
+                className: b,
+                children: i
               }
             ),
-            /* @__PURE__ */ o(
-              l,
+            /* @__PURE__ */ r(
+              a,
               {
                 variant: "body-1",
                 colorName: "tertiary",
                 fontWeight: "medium",
-                className: x,
-                children: i
+                className: u,
+                children: l
               }
             )
           ] }),
-          g && /* @__PURE__ */ o(e, { children: /* @__PURE__ */ o(
+          g && /* @__PURE__ */ r(
             M,
             {
               onClick: C,
               color: "neutral",
               className: N,
-              children: /* @__PURE__ */ o(W, {})
+              size: "xs",
+              children: /* @__PURE__ */ r(W, {})
             }
-          ) })
+          )
         ]
       }
     );

package/dist/components/builders/Modal/ModalHeader/index.d.ts

@@ -1 +1,2 @@
+export type { ModalHeaderProps } from './ModalHeader';
 export { ModalHeader } from './ModalHeader';

package/dist/components/builders/Modal/ModalMain/ModalMain.d.ts

@@ -24,7 +24,7 @@ interface ModalMainRef {
  * @interface ModalMainProps
  * @extends {PropsWithChildren}
  */
-interface ModalMainProps extends PropsWithChildren {
+export interface ModalMainProps extends PropsWithChildren {
     /**
      * Направление расположения элементов
      * Если true, flex-direction будет row, иначе column

package/dist/components/builders/Modal/ModalMain/index.d.ts

@@ -1,2 +1,2 @@
-export type { ModalMainRef } from './ModalMain';
+export type { ModalMainProps, ModalMainRef } from './ModalMain';
 export { ModalMain } from './ModalMain';

package/dist/components/builders/Modal/index.d.ts

@@ -1,12 +1,28 @@
+import { ReactNode, RefAttributes } from 'react';
 import { ModalProps } from './Modal';
 import { ModalFooter } from './ModalFooter';
 import { ModalHeader } from './ModalHeader';
 import { ModalMain } from './ModalMain';
-interface ModalWithSubComponentsProps extends React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>> {
+/**
+ * Тип составного компонента `Modal`.
+ *
+ * Намеренно НЕ наследует `ForwardRefExoticComponent`: это убирает из
+ * автодополнения `<Modal.` служебные React-поля ($$typeof, displayName,
+ * propTypes, defaultProps), оставляя `Header` / `Main` / `Footer`.
+ * Компонент по-прежнему вызывается как `<Modal>` и принимает `ref`.
+ *
+ * NB: члены `Function` (apply/bind/call/…) TypeScript всё равно подмешивает
+ * к любому вызываемому значению — полностью убрать их без отказа от `<Modal>`
+ * нельзя.
+ */
+type ModalComponent = ((props: ModalProps & RefAttributes<HTMLDivElement>) => ReactNode) & {
     Header: typeof ModalHeader;
     Main: typeof ModalMain;
     Footer: typeof ModalFooter;
-}
-declare const ModalWithSubComponents: ModalWithSubComponentsProps;
+};
+declare const ModalWithSubComponents: ModalComponent;
 export { ModalWithSubComponents as Modal };
 export type { ModalProps };
+export type { ModalFooterProps } from './ModalFooter';
+export type { ModalHeaderProps } from './ModalHeader';
+export type { ModalMainProps } from './ModalMain';

package/dist/components/builders/Table/Table.utils.js

@@ -17,7 +17,7 @@ const p = (s, f, g) => {
     right: e === "right" ? o : void 0,
     zIndex: 1,
     background: g,
-    boxShadow: l ? `-4px 0 4px -4px ${d.color.effect.shadowL} inset` : e === "right" && i === 0 ? `4px 0 4px -4px ${d.color.effect.shadowL} inset` : void 0
+    boxShadow: l ? `-2px 0 2px -2px ${d.color.effect.shadowL} inset` : e === "right" && i === 0 ? `2px 0 2px -2px ${d.color.effect.shadowL} inset` : void 0
   };
 };
 export {

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

@@ -3,17 +3,31 @@ import { AccentType, NegativeType, NeutralType, PositiveType, Size, TransferType
 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 BadgeTextAlign = "left" | "center" | "right";
 export interface BadgeProps {
+    /** Содержимое лейбла бейджа. Текст всегда центрируется по вертикали внутри бейджа. */
     label: ReactNode;
+    /** Цветовая схема бейджа (фон, рамка и цвет текста берутся из соответствующего токена). @default "neutral" */
     color?: BadgeColor;
+    /** Стиль заливки: "filled" — цветной фон, "outline" — только рамка, "clear" — прозрачный фон без рамки. @default "filled" */
     variant?: BadgeVariant;
+    /** Размер бейджа: "sm" (24px), "md" (32px) или "lg" (40px) — определяет высоту, отступы и вариант текста. @default "md" */
     size?: BadgeSize;
+    /** Фиксированная ширина бейджа (число в px или CSS-строка). Если не задана, ширина определяется содержимым. */
     width?: number | string;
+    /** Расположение текста лейбла по горизонтали внутри бейджа. @default "center" */
+    textAlign?: BadgeTextAlign;
+    /** Элемент (иконка и т.п.), отображаемый слева от текста лейбла. */
     leftElement?: ReactNode;
+    /** Элемент (иконка и т.п.), отображаемый справа от текста лейбла. */
     rightElement?: ReactNode;
+    /** Переводит бейдж в неактивное состояние: снижает непрозрачность, отключает клик и скрывает кнопку удаления. @default false */
     disabled?: boolean;
+    /** Обработчик клика по бейджу. Если передан (и `disabled` не установлен), бейдж становится кликабельным и получает эффект Ripple. */
     onClick?: (e: MouseEvent) => void;
+    /** Обработчик удаления бейджа. Если передан (и `disabled` не установлен), справа отображается кнопка с иконкой закрытия. */
     onDelete?: (e: MouseEvent) => void;
+    /** Класс для корневого контейнера бейджа (`Box`). */
     className?: string;
     /** Класс для текста-лейбла (`Text`). */
     labelClassName?: string;

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

@@ -1,39 +1,39 @@
-import { jsxs as C, jsx as a } from "react/jsx-runtime";
-import { cx as v, css as u } from "@emotion/css";
-import k from "../../../assets/svg/shared/close-outline.svg.js";
-import { Box as B } from "../../builders/Box/Box.js";
-import { theme as L } from "../../../utils/theme/index.js";
-import { Ripple as $ } from "../../builders/Ripple/Ripple.js";
-import { Text as w } from "../../builders/Text/Text.js";
-const { color: r, cornerRadius: g, spacing: l } = L, b = {
+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 { Text as h } from "../../builders/Text/Text.js";
+const { color: e, cornerRadius: g, spacing: l } = $, b = {
   neutral: {
-    border: r.border.neutralAlphaLow,
-    bg: r.status.neutralTint,
-    color: r.text.secondary,
+    border: e.border.neutralAlphaLow,
+    bg: e.status.neutralTint,
+    color: e.text.secondary,
     colorName: "secondary"
   },
   accent: {
-    border: r.border.accentSecondary,
-    bg: r.status.accentTintLow,
-    color: r.text.accent,
+    border: e.border.accentSecondary,
+    bg: e.status.accentTintLow,
+    color: e.text.accent,
     colorName: "accent"
   },
   warning: {
-    border: r.border.warningSecondary,
-    bg: r.status.warningTintLow,
-    color: r.text.warning,
+    border: e.border.warningSecondary,
+    bg: e.status.warningTintLow,
+    color: e.text.warning,
     colorName: "warning"
   },
   positive: {
-    border: r.border.positiveSecondary,
-    bg: r.status.positiveTintLow,
-    color: r.text.positive,
+    border: e.border.positiveSecondary,
+    bg: e.status.positiveTintLow,
+    color: e.text.positive,
     colorName: "positive"
   },
   negative: {
-    border: r.border.negativeSecondary,
-    bg: r.status.negativeTintLow,
-    color: r.text.negative,
+    border: e.border.negativeSecondary,
+    bg: e.status.negativeTintLow,
+    color: e.text.negative,
     colorName: "negative"
   },
   transfer: {
@@ -63,17 +63,17 @@ const { color: r, cornerRadius: g, spacing: l } = L, b = {
   }
 }, R = (d, n, o, p) => {
   const t = b[n];
-  let e = t.bg, s = "none";
+  let r = t.bg, s = "none";
   const c = t.color;
   switch (d) {
     case "outline":
-      e = "transparent", s = `1px solid ${t.border}`;
+      r = "transparent", s = `1px solid ${t.border}`;
       break;
     case "clear":
-      e = "transparent";
+      r = "transparent";
       break;
     default:
-      e = t.bg;
+      r = t.bg;
       break;
   }
   return u({
@@ -82,40 +82,42 @@ const { color: r, cornerRadius: g, spacing: l } = L, b = {
     userSelect: "none",
     position: "relative",
     transition: "background-color 0.2s, opacity 0.2s",
-    backgroundColor: e,
+    backgroundColor: r,
     color: c,
     border: s
   });
-}, j = u({
+}, I = u({
   display: "inline-flex",
   cursor: "pointer",
   opacity: 0.6,
   "&:hover": { opacity: 1 }
-}), y = u({
+}), w = u({
   display: "inline-flex",
   alignItems: "center",
   color: "inherit"
-}), I = ({
+}), O = ({
   label: d,
   color: n = "neutral",
   size: o = "md",
   variant: p = "filled",
   width: t,
-  leftElement: e,
-  rightElement: s,
-  disabled: c,
+  textAlign: r = "center",
+  leftElement: s,
+  rightElement: c,
+  disabled: x,
   onClick: m,
-  onDelete: x,
+  onDelete: f,
   className: N,
-  labelClassName: h,
+  labelClassName: C,
   deleteButtonClassName: S
 }) => {
-  const T = R(p, n, c, m);
-  return /* @__PURE__ */ C(
-    B,
+  const T = R(p, n, x, m);
+  return /* @__PURE__ */ k(
+    L,
     {
       row: !0,
       alignItems: "center",
+      justifyContent: "center",
       gap: l.sm,
       p: i[o].p,
       h: i[o].h,
@@ -123,37 +125,41 @@ const { color: r, cornerRadius: g, spacing: l } = L, b = {
       overflow: "hidden",
       borderRadius: i[o].corner,
       onClick: m,
-      className: v(T, N),
+      className: y(T, N),
       children: [
-        m && /* @__PURE__ */ a($, {}),
-        e && /* @__PURE__ */ a("span", { className: y, children: e }),
+        m && /* @__PURE__ */ a(j, {}),
+        s && /* @__PURE__ */ a("span", { className: w, children: s }),
         /* @__PURE__ */ a(
-          w,
+          h,
           {
             variant: i[o].text,
             colorName: b[n].colorName,
             textOverflow: "ellipsis",
-            className: h,
+            left: r === "left",
+            center: r === "center",
+            right: r === "right",
+            flex: t ? 1 : void 0,
+            className: C,
             children: d
           }
         ),
-        s && /* @__PURE__ */ a("span", { className: y, children: s }),
-        x && !c && /* @__PURE__ */ a(
-          w,
+        c && /* @__PURE__ */ a("span", { className: w, children: c }),
+        f && !x && /* @__PURE__ */ a(
+          h,
           {
-            className: v(j, S),
+            className: y(I, S),
             colorName: b[n].colorName,
-            onClick: (f) => {
-              f.stopPropagation(), x(f);
+            onClick: (v) => {
+              v.stopPropagation(), f(v);
             },
-            children: /* @__PURE__ */ a(k, {})
+            children: /* @__PURE__ */ a(B, {})
           }
         )
       ]
     }
   );
 };
-I.displayName = "Badge";
+O.displayName = "Badge";
 export {
-  I as Badge
+  O as Badge
 };