@dss-kit/ui-kit 0.3.5 → 0.3.7

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/TablePagination/TablePagination.js

@@ -6,10 +6,10 @@ import B from "../../../../assets/svg/table/chevron-right.svg.js";
 import U from "../../../../assets/svg/table/dots.svg.js";
 import { getPageNumbers as X } from "./TablePagination.utils.js";
 import { Button as M } from "../../../controls/Button/Button.js";
+import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
 import { Box as r } from "../../Box/Box.js";
 import { Select as Y } from "../../../controls/Select/Select.js";
 import { theme as Z } from "../../../../utils/theme/index.js";
-import { IconButton as j } from "../../../controls/IconButton/IconButton.js";
 import { Text as _ } from "../../Text/Text.js";
 const { color: i, cornerRadius: tt, spacing: b } = Z, bt = ({
   pageIndex: o,

package/dist/components/controls/Button/Button.js

@@ -5,10 +5,10 @@ import { useMemo as o } from "react";
 import { cornerRadiusValues as u, baseButton as D, getVariantStyles as E, typeStyles as G, sizeValues as H } from "./styles.js";
 import { Loader as I } from "../../builders/Loader/Loader.js";
 import { AnimatedText as J } from "../../builders/Text/Text.js";
-import { Ripple as K } from "../../builders/Ripple/Ripple.js";
-import { theme as P } from "../../../utils/theme/index.js";
-import { Box as Q } from "../../builders/Box/Box.js";
-const { color: m } = P, ue = ({
+import { theme as K } from "../../../utils/theme/index.js";
+import { Box as P } from "../../builders/Box/Box.js";
+import { Ripple as Q } from "../../builders/Ripple/Ripple.js";
+const { color: m } = K, ue = ({
   disabled: n,
   loading: l,
   className: g,
@@ -95,7 +95,7 @@ const { color: m } = P, ue = ({
     }
   }, [s]);
   return /* @__PURE__ */ a(
-    Q,
+    P,
     {
       className: y(S, g),
       w: h,
@@ -131,7 +131,7 @@ const { color: m } = P, ue = ({
               ),
               R
             ] }),
-            /* @__PURE__ */ a(K, {})
+            /* @__PURE__ */ a(Q, {})
           ]
         }
       )

package/dist/components/controls/IconButton/IconButton.d.ts

@@ -1,2 +1,17 @@
-import { IIconButtonProps } from './IconButton.types';
-export declare function IconButton({ attr, children, className, type, color, size, ...props }: IIconButtonProps): import("react/jsx-runtime").JSX.Element;
+import { ComponentProps } from 'react';
+import { CustomType, NegativeType, NeutralType, PositiveType, PrimaryType, SecondaryType, Size, TransferType, WarningType } from '../../../types/tokens.types';
+export type IconButtonSize = Extract<Size, "xs" | "sm" | "md"> | CustomType;
+export type IconButtonColor = PrimaryType | SecondaryType | NegativeType | PositiveType | WarningType | TransferType | NeutralType | CustomType | "neutral-white" | "no-bg";
+export interface IconButtonProps extends ComponentProps<"button"> {
+    /**
+     * Размер кнопки.
+     * @default "md"
+     */
+    size?: IconButtonSize;
+    /**
+     * Цветовая схема (токен).
+     * @default "primary"
+     */
+    color?: IconButtonColor;
+}
+export declare function IconButton({ children, className, type, color, size, ...rest }: IconButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/controls/IconButton/IconButton.js

@@ -1,35 +1,28 @@
-import { jsxs as l, jsx as n } from "react/jsx-runtime";
-import p from "classnames";
-import { Ripple as c } from "../../builders/Ripple/Ripple.js";
-import { styles as a, sizeStyles as f, colorStyles as u } from "./styles.js";
-function j({
-  attr: o,
-  children: t,
-  className: r,
-  type: s = "button",
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import { cx as p } from "@emotion/css";
+import { styles as l, sizeStyles as c, colorStyles as f } from "./styles.js";
+import { Ripple as u } from "../../builders/Ripple/Ripple.js";
+function d({
+  children: o,
+  className: t,
+  type: r = "button",
   color: m = "primary",
-  size: e = "md",
-  ...i
+  size: s = "md",
+  ...e
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ i(
     "button",
     {
-      ...o,
-      ...i,
-      type: s,
-      className: p(
-        a,
-        f[e],
-        u[m],
-        r
-      ),
+      ...e,
+      type: r,
+      className: p(l, c[s], f[m], t),
       children: [
-        /* @__PURE__ */ n(c, {}),
-        t
+        /* @__PURE__ */ n(u, {}),
+        o
       ]
     }
   );
 }
 export {
-  j as IconButton
+  d as IconButton
 };

package/dist/components/controls/IconButton/index.d.ts

@@ -1,2 +1,2 @@
-export * from './IconButton';
-export type * from './IconButton.types';
+export type { IconButtonColor, IconButtonProps, IconButtonSize, } from './IconButton';
+export { IconButton } from './IconButton';

package/dist/components/controls/Input/Input.js

@@ -1,204 +1,218 @@
-import { jsxs as v, jsx as n } from "react/jsx-runtime";
-import { cx as y } from "@emotion/css";
-import { useMergeRefs as L } from "@floating-ui/react";
-import { forwardRef as Q, useRef as N, useEffect as U, useMemo as X } from "react";
-import Y from "../../../assets/svg/shared/close-circle.svg.js";
-import { styles as t } from "./styles.js";
-import { useControlled as Z } from "../../../utils/hooks/useControlled.js";
-import { Box as o } from "../../builders/Box/Box.js";
-import { theme as ee } from "../../../utils/theme/index.js";
-import { Text as p } from "../../builders/Text/Text.js";
-const { spacing: k } = ee;
-function M(e) {
+import { jsxs as N, jsx as n } from "react/jsx-runtime";
+import { cx as w } from "@emotion/css";
+import { useMergeRefs as k } from "@floating-ui/react";
+import { forwardRef as Y, useRef as R, useEffect as Z, useMemo as ee } from "react";
+import te from "../../../assets/svg/shared/close-circle.svg.js";
+import { styles as e } from "./styles.js";
+import { useControlled as ne } from "../../../utils/hooks/useControlled.js";
+import { Box as u } from "../../builders/Box/Box.js";
+import { theme as re } from "../../../utils/theme/index.js";
+import { Text as y } from "../../builders/Text/Text.js";
+const { spacing: j } = re;
+function F(t) {
   return {
     ...new Event("input", { bubbles: !0 }),
-    target: e,
-    currentTarget: e
+    target: t,
+    currentTarget: t
   };
 }
-const te = Q((e, C) => {
+const ae = Y((t, v) => {
   const {
-    label: f,
-    prompt: g,
-    error: b,
-    errorText: w,
-    size: R = "md",
-    prefix: E,
+    label: d,
+    prompt: h,
+    error: I,
+    errorText: E,
+    size: M = "md",
+    prefix: O,
     suffix: _,
-    background: h = "primary",
-    showClearButton: j,
-    disabled: i,
-    value: d,
-    defaultValue: u,
-    className: I,
-    wrapperClassName: W,
-    labelClassName: A,
-    fieldContainerClassName: F,
-    promptClassName: H,
-    errorClassName: P,
-    textAlign: x = "left",
+    background: x = "primary",
+    showClearButton: W,
+    disabled: l,
+    value: p,
+    defaultValue: m,
+    className: B,
+    wrapperClassName: A,
+    labelClassName: H,
+    fieldContainerClassName: P,
+    promptClassName: q,
+    errorClassName: G,
+    textAlign: C = "left",
     ...T
-  } = e, a = e.multiline === !0, $ = N(null), s = N(null), q = L([
-    $,
-    C
-  ]), D = L([
-    s,
-    C
-  ]), { current: z } = N(d !== void 0), [c, B] = Z(
-    typeof d == "string" || typeof d == "number" ? String(d) : void 0,
-    typeof u == "string" || typeof u == "number" ? String(u) : ""
-  ), S = (l) => {
-    if (B(l.target.value), a) {
-      const r = e.onChange;
-      r?.(l);
+  } = t, o = t.multiline === !0, i = !!t.readOnly, $ = (r) => {
+    i && r.preventDefault();
+  }, z = R(null), c = R(null), J = k([
+    z,
+    v
+  ]), K = k([
+    c,
+    v
+  ]), { current: D } = R(p !== void 0), [f, S] = ne(
+    typeof p == "string" || typeof p == "number" ? String(p) : void 0,
+    typeof m == "string" || typeof m == "number" ? String(m) : ""
+  ), V = (r) => {
+    if (S(r.target.value), o) {
+      const a = t.onChange;
+      a?.(r);
     } else {
-      const r = e.onChange;
-      r?.(l);
+      const a = t.onChange;
+      a?.(r);
     }
   };
-  U(() => {
-    a && e.autoResize && s.current && (s.current.style.height = "auto", s.current.style.height = `${s.current.scrollHeight}px`);
-  }, [c, a, e.autoResize]);
-  const G = () => {
-    if (B(""), !a) {
-      const r = $.current;
-      if (r) {
-        r.value = "";
-        const m = M(r), V = e.onChange;
-        V?.(m);
+  Z(() => {
+    o && t.autoResize && c.current && (c.current.style.height = "auto", c.current.style.height = `${c.current.scrollHeight}px`);
+  }, [f, o, t.autoResize]);
+  const Q = () => {
+    if (S(""), !o) {
+      const a = z.current;
+      if (a) {
+        a.value = "";
+        const s = F(a), g = t.onChange;
+        g?.(s);
       }
       return;
     }
-    const l = s.current;
-    if (l) {
-      l.value = "";
-      const r = M(l), m = e.onChange;
-      m?.(r);
+    const r = c.current;
+    if (r) {
+      r.value = "";
+      const a = F(r), s = t.onChange;
+      s?.(a);
     }
-  }, J = () => {
-    if (a) {
+  }, U = () => {
+    if (o) {
       const {
-        rows: V,
-        autoResize: ne,
-        onChange: re,
-        multiline: ae,
-        ...O
+        rows: g,
+        autoResize: oe,
+        onChange: le,
+        multiline: ie,
+        ...b
       } = T;
       return /* @__PURE__ */ n(
         "textarea",
         {
-          ref: D,
-          rows: e.rows ?? 3,
-          className: y(t.input, I, {
-            [t.disabled]: i,
-            [t[`input-text-align_${x}`]]: !!x
+          ref: K,
+          rows: t.rows ?? 3,
+          className: w(e.input, B, {
+            [e.disabled]: l,
+            [e.readOnly]: i,
+            [e[`input-text-align_${C}`]]: !!C
           }),
-          disabled: i,
-          maxLength: e.maxLength,
-          ...O,
-          ...z ? { value: c } : { defaultValue: String(u ?? "") },
-          onChange: S
+          disabled: l,
+          maxLength: t.maxLength,
+          ...b,
+          ...D ? { value: f } : { defaultValue: String(m ?? "") },
+          onChange: V,
+          tabIndex: i ? -1 : b.tabIndex,
+          onMouseDown: (L) => {
+            $(L), b.onMouseDown?.(L);
+          }
         }
       );
     }
     const {
-      onChange: l,
-      multiline: r,
-      ...m
+      onChange: r,
+      multiline: a,
+      ...s
     } = T;
     return /* @__PURE__ */ n(
       "input",
       {
-        ...m,
-        ref: q,
-        className: y(
-          t.input,
-          t[`input-text-size_${R}`],
-          I,
+        ...s,
+        ref: J,
+        className: w(
+          e.input,
+          e[`input-text-size_${M}`],
+          B,
           {
-            [t.disabled]: i,
-            [t[`input-text-align_${x}`]]: !!x
+            [e.disabled]: l,
+            [e.readOnly]: i,
+            [e[`input-text-align_${C}`]]: !!C
           }
         ),
-        disabled: i,
-        type: e.type ?? "text",
-        ...z ? { value: c } : { defaultValue: String(u ?? "") },
-        onChange: S
+        disabled: l,
+        type: t.type ?? "text",
+        ...D ? { value: f } : { defaultValue: String(m ?? "") },
+        onChange: V,
+        tabIndex: i ? -1 : s.tabIndex,
+        onMouseDown: (g) => {
+          $(g), s.onMouseDown?.(g);
+        }
       }
     );
-  }, K = X(() => h === "white" ? t.primary : h === "gray" ? t.secondary : t[h], [h]);
-  return /* @__PURE__ */ v(o, { w: "full", gap: k.sm, className: W, children: [
-    typeof f == "string" ? /* @__PURE__ */ n(
-      p,
+  }, X = ee(() => x === "white" ? e.primary : x === "gray" ? e.secondary : e[x], [x]);
+  return /* @__PURE__ */ N(u, { w: "full", gap: j.sm, className: A, children: [
+    typeof d == "string" ? /* @__PURE__ */ n(
+      y,
       {
         variant: "body-2",
         fontWeight: "regular",
         colorName: "tertiary",
-        className: A,
-        children: f
+        className: H,
+        children: d
       }
-    ) : f,
-    /* @__PURE__ */ v(
-      o,
+    ) : d,
+    /* @__PURE__ */ N(
+      u,
       {
         row: !0,
-        alignItems: a ? "flex-start" : "center",
+        alignItems: o ? "flex-start" : "center",
         w: "full",
-        gap: k.md,
-        className: y(
-          t["input-container"],
-          K,
-          t[R],
+        gap: j.md,
+        className: w(
+          e["input-container"],
+          X,
+          e[M],
           {
-            [t.error]: b,
-            [t.disabled]: i,
-            [t.multiline]: a
+            [e.error]: I,
+            [e.disabled]: l,
+            [e.multiline]: o,
+            [e.readOnly]: i,
+            [e["container-hover"]]: !l && !i
           },
-          F
+          P
         ),
         children: [
-          E && /* @__PURE__ */ n(o, { flex: "none", children: E }),
-          /* @__PURE__ */ n(o, { flex: "1", children: J() }),
-          j && c && !i && /* @__PURE__ */ n(o, { flex: "none", children: /* @__PURE__ */ n("span", { className: t["clear-button"], onClick: G, children: /* @__PURE__ */ n(Y, {}) }) }),
-          _ && /* @__PURE__ */ n(o, { flex: "none", children: _ })
+          O && /* @__PURE__ */ n(u, { flex: "none", children: O }),
+          /* @__PURE__ */ n(u, { flex: "1", children: U() }),
+          W && f && !l && /* @__PURE__ */ n(u, { flex: "none", children: /* @__PURE__ */ n("span", { className: e["clear-button"], onClick: Q, children: /* @__PURE__ */ n(te, {}) }) }),
+          _ && /* @__PURE__ */ n(u, { flex: "none", children: _ })
         ]
       }
     ),
-    (g || a) && /* @__PURE__ */ v(o, { row: !0, gap: 10, w: "full", children: [
-      typeof g == "string" ? /* @__PURE__ */ n(
-        p,
+    (h || o) && /* @__PURE__ */ N(u, { row: !0, gap: 10, w: "full", children: [
+      typeof h == "string" ? /* @__PURE__ */ n(
+        y,
         {
           variant: "caption-1",
           colorName: "tertiary",
-          className: H,
-          children: g
+          className: q,
+          children: h
         }
-      ) : g,
-      a && e.maxLength && /* @__PURE__ */ n(
-        p,
+      ) : h,
+      o && t.maxLength && /* @__PURE__ */ n(
+        y,
         {
           right: !0,
           ml: "auto",
           flex: "none",
           variant: "caption-1",
           colorName: "tertiary",
-          children: `${c.length}/${e.maxLength}`
+          children: `${f.length}/${t.maxLength}`
         }
       )
     ] }),
-    w && b && /* @__PURE__ */ n(
-      p,
+    E && I && /* @__PURE__ */ n(
+      y,
       {
         variant: "body-2",
         colorName: "negative",
         fontWeight: "regular",
-        className: P,
-        children: w
+        className: G,
+        children: E
       }
     )
   ] });
 });
-te.displayName = "Input";
+ae.displayName = "Input";
 export {
-  te as Input
+  ae as Input
 };

package/dist/components/controls/Input/styles.d.ts

@@ -10,6 +10,8 @@ export declare const styles: {
     md: string;
     error: string;
     disabled: string;
+    readOnly: string;
+    "container-hover": string;
     multiline: string;
     primary: string;
     secondary: string;

package/dist/components/controls/Input/styles.js

@@ -1,14 +1,23 @@
 import { css as r } from "@emotion/css";
-import { typography as e } from "../../../styles/utils/typography.js";
-import { theme as n } from "../../../utils/theme/index.js";
-const { color: t, spacing: o } = n, i = r({
+import { typography as t } from "../../../styles/utils/typography.js";
+import { theme as i } from "../../../utils/theme/index.js";
+const { color: o, spacing: e } = i, a = r({
   opacity: 0.6,
   cursor: "not-allowed"
-}), c = {
+}), n = r({
+  cursor: "default",
+  "&:hover": {
+    cursor: "default"
+  }
+}), l = r({
+  "&:hover": {
+    backgroundColor: o.fill.neutralPrimaryHover
+  }
+}), g = {
   "input-container": r({
-    backgroundColor: t.fill.accentSecondary,
-    border: `1px solid ${t.border.neutralAlphaBasic}`,
-    padding: `${o.md} ${o.lg}`,
+    backgroundColor: o.fill.accentSecondary,
+    border: `1px solid ${o.border.neutralAlphaBasic}`,
+    padding: `${e.md} ${e.lg}`,
     borderRadius: 12,
     minHeight: 40,
     width: "100%",
@@ -16,62 +25,61 @@ const { color: t, spacing: o } = n, i = r({
     "& textarea": {
       resize: "none"
     },
-    [`&:not(.${i}):hover`]: {
-      backgroundColor: t.fill.neutralPrimaryHover
-    },
     "&:focus-within": {
-      borderColor: t.border.accentPrimary,
-      [`&:not(.${i}):hover`]: {
-        borderColor: t.border.accentPrimary
+      borderColor: o.border.accentPrimary,
+      "&:hover": {
+        borderColor: o.border.accentPrimary
       }
     }
   }),
   input: r({
-    ...e.common,
-    ...e.body1,
+    ...t.common,
+    ...t.body1,
     background: "transparent",
     width: "100%",
-    color: t.text.primary,
+    color: o.text.primary,
     "&::placeholder": {
-      color: t.text.tertiary,
+      color: o.text.tertiary,
       textOverflow: "ellipsis"
     }
   }),
-  "input-text-size_sm": r({ ...e.body2 }),
-  "input-text-size_md": r({ ...e.body2 }),
+  "input-text-size_sm": r({ ...t.body2 }),
+  "input-text-size_md": r({ ...t.body2 }),
   "input-text-align_left": r({ textAlign: "left" }),
   "input-text-align_center": r({ textAlign: "center" }),
   "input-text-align_right": r({ textAlign: "right" }),
   sm: r({
     height: 40,
-    padding: o.md
+    padding: e.md
   }),
   md: r({
     height: 48,
-    padding: `14px ${o.lg} 14px ${o.lg}`
+    padding: `14px ${e.lg} 14px ${e.lg}`
   }),
   error: r({
-    borderColor: t.border.negativePrimary
+    borderColor: o.border.negativePrimary
   }),
-  disabled: i,
+  disabled: a,
+  readOnly: n,
+  "container-hover": l,
   multiline: r({
     height: "auto"
   }),
   primary: r({
-    background: t.fill.bgPrimary
+    background: o.fill.bgPrimary
   }),
   secondary: r({
-    background: t.fill.bgSecondary
+    background: o.fill.bgSecondary
   }),
   "clear-button": r({
     cursor: "pointer",
-    color: t.text.tertiary,
+    color: o.text.tertiary,
     height: 20,
     "&:hover": {
-      color: t.text.primary
+      color: o.text.primary
     }
   })
 };
 export {
-  c as styles
+  g as styles
 };