@dss-kit/ui-kit 0.3.4 → 0.3.6

package/dist/components/builders/Table/Table.types.d.ts

@@ -9,7 +9,13 @@ export type { TablePaginationLabels, TablePaginationProps, TablePaginationVarian
 export interface TableProps<TData> {
     /** Данные для отображения в таблице */
     data: TData[];
-    /** Определения колонок */
+    /**
+     * Определения колонок.
+     *
+     * Сортировка по колонке по умолчанию выключена: чтобы включить её,
+     * укажите у колонки `enableSorting: true` (при этом `enableSorting`
+     * таблицы тоже должен быть включён).
+     */
     columns: ColumnDef<TData, any>[];
     /** Показывать ли границы */
     /** @default true */

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
 };