@dss-kit/ui-kit 1.0.4 → 1.1.0

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

@@ -1,180 +1,233 @@
-import { jsxs as v, jsx as e } from "react/jsx-runtime";
-import { css as R, cx as G } from "@emotion/css";
-import { useRef as H, useState as J, useEffect as K } from "react";
-import z from "../../../../assets/svg/table/chevron-left.svg.js";
-import M from "../../../../assets/svg/table/chevron-right.svg.js";
-import Q from "../../../../assets/svg/table/dots.svg.js";
-import { getPageNumbers as U } from "./TablePagination.utils.js";
-import { Select as X } from "../../../controls/Select/Select.js";
-import { Button as _ } from "../../../controls/Button/Button.js";
-import { IconButton as B } from "../../../controls/IconButton/IconButton.js";
+import { jsxs as u, jsx as t, Fragment as Y } from "react/jsx-runtime";
+import { css as a, cx as Z } from "@emotion/css";
+import { useRef as ee, useState as te, useEffect as ne } from "react";
+import w from "../../../../assets/svg/table/chevron-left.svg.js";
+import S from "../../../../assets/svg/table/chevron-right.svg.js";
+import oe from "../../../../assets/svg/table/dots.svg.js";
+import { bpContainer as E } from "../../../../styles/utils/breakpoints.js";
+import { getPageNumbers as ie } from "./TablePagination.utils.js";
+import { Select as re } from "../../../controls/Select/Select.js";
+import { Button as V } from "../../../controls/Button/Button.js";
+import { IconButton as f } from "../../../controls/IconButton/IconButton.js";
 import { Box as r } from "../../Box/Box.js";
-import { theme as Y } from "../../../../utils/theme/index.js";
-import { Text as Z } from "../../Text/Text.js";
-const { color: i, cornerRadius: tt, spacing: b } = Y, bt = ({
-  pageIndex: o,
-  pageSize: n,
-  totalCount: a,
+import { theme as se } from "../../../../utils/theme/index.js";
+import { Text as ae } from "../../Text/Text.js";
+const { color: i, cornerRadius: le, spacing: C } = se, k = "table-pagination", ce = a({
+  containerType: "inline-size",
+  containerName: k
+}), P = a({
+  [E.sm(k)]: {
+    display: "none"
+  }
+}), W = a({
+  [E.sm(k, "min")]: {
+    display: "none"
+  }
+}), We = ({
+  pageIndex: n,
+  pageSize: o,
+  totalCount: l,
   onPageChange: s,
   onPageSizeChange: c,
-  variant: l = "numbered",
-  labels: d,
-  pageSizeOptions: m = [10, 20, 50, 100],
-  showPageSizeSelector: h = !0,
-  renderPageSizeSelectorDropdownItem: L = (u) => u.label,
-  renderPageSizeSelectorInputItem: T,
-  className: V,
-  itemClassName: x,
-  activeItemClassName: w,
-  pageSizeSelectorClassName: D
+  variant: p = "numbered",
+  labels: g,
+  pageSizeOptions: b = [10, 20, 50, 100],
+  showPageSizeSelector: v = !0,
+  renderPageSizeSelectorDropdownItem: I = (d) => d.label,
+  renderPageSizeSelectorInputItem: z,
+  className: A,
+  itemClassName: R,
+  activeItemClassName: M,
+  pageSizeSelectorClassName: $
 }) => {
-  const { prev: u = "Previous", next: I = "Next" } = d ?? {}, S = H(null), [O, $] = J(0), y = Math.ceil(a / n), f = o > 0, g = o < y - 1;
-  K(() => {
-    const t = S.current;
-    if (!t) return;
-    const p = new ResizeObserver((W) => {
-      for (const C of W)
-        $(C.contentRect.width);
+  const { prev: d = "Previous", next: _ = "Next" } = g ?? {}, T = ee(null), [F, q] = te(0), B = Math.ceil(l / o), m = n > 0, h = n < B - 1;
+  ne(() => {
+    const e = T.current;
+    if (!e) return;
+    const N = new ResizeObserver((O) => {
+      for (const j of O)
+        q(j.contentRect.width);
     });
-    return p.observe(t), () => {
-      p.disconnect();
+    return N.observe(e), () => {
+      N.disconnect();
     };
   }, []);
-  const E = ((t) => {
-    if (t <= 0)
+  const G = ((e) => {
+    if (e <= 0)
       return 1;
-    const k = t - 96;
-    if (k <= 40)
+    const L = e - 96;
+    if (L <= 40)
       return 1;
-    const F = Math.floor((k + 8) / 48);
-    return Math.max(1, Math.min(10, F));
-  })(O), q = U({
-    page: o + 1,
-    count: y,
-    maxVisiblePages: E
-  }), N = () => {
-    f && s(o - 1);
-  }, P = () => {
-    g && s(o + 1);
-  }, A = (t) => {
-    c(Number(t));
+    const X = Math.floor((L + 8) / 48);
+    return Math.max(1, Math.min(10, X));
+  })(F), H = ie({
+    page: n + 1,
+    count: B,
+    maxVisiblePages: G
+  }), x = () => {
+    m && s(n - 1);
+  }, y = () => {
+    h && s(n + 1);
+  }, J = (e) => {
+    c(Number(e));
   };
-  return a === 0 ? null : /* @__PURE__ */ v(r, { flex: 1, row: !0, justifyContent: "space-between", children: [
-    l === "simple" ? /* @__PURE__ */ v(
-      r,
-      {
-        flex: 1,
-        row: !0,
-        gap: b.sm,
-        alignItems: "center",
-        className: V,
-        children: [
-          /* @__PURE__ */ e(
-            _,
-            {
-              width: "auto",
-              size: "sm",
-              color: "neutral",
-              iconLeft: /* @__PURE__ */ e(z, { width: 20, height: 20 }),
-              disabled: !f,
-              onClick: N,
-              children: u
-            }
-          ),
-          /* @__PURE__ */ e(
-            j,
-            {
-              className: x,
-              activeClassName: w,
-              children: o + 1
-            }
-          ),
-          /* @__PURE__ */ e(
-            _,
-            {
-              width: "auto",
-              size: "sm",
-              color: "neutral",
-              iconRight: /* @__PURE__ */ e(M, { width: 20, height: 20 }),
-              disabled: !g,
-              onClick: P,
-              children: I
-            }
-          )
-        ]
-      }
-    ) : /* @__PURE__ */ v(
-      r,
-      {
-        ref: S,
-        flex: 1,
-        row: !0,
-        overflow: "hidden",
-        gap: b.sm,
-        children: [
-          /* @__PURE__ */ e(
-            B,
-            {
-              onClick: N,
-              disabled: !f,
-              color: "neutral",
-              size: "sm",
-              children: /* @__PURE__ */ e(z, {})
-            }
-          ),
-          /* @__PURE__ */ e(r, { row: !0, gap: b.sm, children: q.map((t) => /* @__PURE__ */ e(
-            j,
-            {
-              isDots: t === "start-dots" || t === "end-dots",
-              isCurrentPage: t === o + 1,
-              disabled: t === "start-dots" || t === "end-dots",
-              onClick: () => s(t - 1),
-              className: x,
-              activeClassName: w,
-              children: t
-            },
-            t
-          )) }),
-          /* @__PURE__ */ e(
-            B,
-            {
-              color: "neutral",
-              size: "sm",
-              onClick: P,
-              disabled: !g,
-              children: /* @__PURE__ */ e(M, {})
-            }
-          )
-        ]
-      }
-    ),
-    h && /* @__PURE__ */ e(r, { alignItems: "flex-end", className: D, children: /* @__PURE__ */ e(
-      X,
-      {
-        width: "fit-content",
-        value: n.toString(),
-        size: "sm",
-        items: m.map((t) => ({
-          value: t.toString(),
-          label: t.toString()
-        })),
-        returnedValue: (t) => t.value,
-        renderDropdownItem: L,
-        renderSingleInputItem: T,
-        onChange: (t) => A(t)
-      }
-    ) })
-  ] });
-}, j = ({
-  children: o,
-  isCurrentPage: n = !1,
-  onClick: a,
+  if (l === 0)
+    return null;
+  const K = () => /* @__PURE__ */ u(
+    r,
+    {
+      ref: T,
+      flex: 1,
+      row: !0,
+      overflow: "hidden",
+      gap: C.sm,
+      children: [
+        /* @__PURE__ */ t(
+          f,
+          {
+            onClick: x,
+            disabled: !m,
+            color: "neutral",
+            size: "sm",
+            children: /* @__PURE__ */ t(w, {})
+          }
+        ),
+        /* @__PURE__ */ t(r, { row: !0, gap: C.sm, children: H.map((e) => /* @__PURE__ */ t(
+          D,
+          {
+            isDots: e === "start-dots" || e === "end-dots",
+            isCurrentPage: e === n + 1,
+            disabled: e === "start-dots" || e === "end-dots",
+            onClick: () => s(e - 1),
+            className: R,
+            activeClassName: M,
+            children: e
+          },
+          e
+        )) }),
+        /* @__PURE__ */ t(
+          f,
+          {
+            color: "neutral",
+            size: "sm",
+            onClick: y,
+            disabled: !h,
+            children: /* @__PURE__ */ t(S, {})
+          }
+        )
+      ]
+    }
+  ), Q = () => /* @__PURE__ */ u(
+    r,
+    {
+      flex: 1,
+      row: !0,
+      gap: C.sm,
+      alignItems: "center",
+      className: A,
+      children: [
+        /* @__PURE__ */ t(
+          V,
+          {
+            className: P,
+            width: "auto",
+            size: "sm",
+            color: "neutral",
+            iconLeft: /* @__PURE__ */ t(w, { width: 20, height: 20 }),
+            disabled: !m,
+            onClick: x,
+            children: d
+          }
+        ),
+        /* @__PURE__ */ t(
+          f,
+          {
+            className: W,
+            color: "neutral",
+            size: "sm",
+            "aria-label": d,
+            disabled: !m,
+            onClick: x,
+            children: /* @__PURE__ */ t(w, {})
+          }
+        ),
+        /* @__PURE__ */ t(
+          D,
+          {
+            className: R,
+            activeClassName: M,
+            children: n + 1
+          }
+        ),
+        /* @__PURE__ */ t(
+          V,
+          {
+            className: P,
+            width: "auto",
+            size: "sm",
+            color: "neutral",
+            iconRight: /* @__PURE__ */ t(S, { width: 20, height: 20 }),
+            disabled: !h,
+            onClick: y,
+            children: _
+          }
+        ),
+        /* @__PURE__ */ t(
+          f,
+          {
+            className: W,
+            color: "neutral",
+            size: "sm",
+            "aria-label": _,
+            disabled: !h,
+            onClick: y,
+            children: /* @__PURE__ */ t(S, {})
+          }
+        )
+      ]
+    }
+  ), U = z && ((e) => /* @__PURE__ */ u(Y, { children: [
+    /* @__PURE__ */ t("span", { className: P, children: z(e) }),
+    /* @__PURE__ */ t("span", { className: W, children: e.label })
+  ] }));
+  return /* @__PURE__ */ u(
+    r,
+    {
+      flex: 1,
+      row: !0,
+      justifyContent: "space-between",
+      className: ce,
+      children: [
+        p === "simple" ? Q() : K(),
+        v && /* @__PURE__ */ t(r, { alignItems: "flex-end", className: $, children: /* @__PURE__ */ t(
+          re,
+          {
+            width: "fit-content",
+            value: o.toString(),
+            size: "sm",
+            items: b.map((e) => ({
+              value: e.toString(),
+              label: e.toString()
+            })),
+            returnedValue: (e) => e.value,
+            renderDropdownItem: I,
+            renderSingleInputItem: U,
+            onChange: (e) => J(e)
+          }
+        ) })
+      ]
+    }
+  );
+}, D = ({
+  children: n,
+  isCurrentPage: o = !1,
+  onClick: l,
   isDots: s = !1,
   disabled: c = !1,
-  className: l,
-  activeClassName: d
+  className: p,
+  activeClassName: g
 }) => {
-  const m = R({
+  const b = a({
     cursor: c ? "not-allowed" : "pointer",
     userSelect: "none",
     width: "40px",
@@ -182,27 +235,27 @@ const { color: i, cornerRadius: tt, spacing: b } = Y, bt = ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    backgroundColor: n ? i.fill.accent_secondary : i.fill.bg_secondary,
-    borderRadius: tt.sm,
-    border: n ? `1px solid ${i.fill.accent_secondary_hover}` : `1px solid ${i.border.neutral_alpha_basic}`
-  }), h = R({
+    backgroundColor: o ? i.fill.accent_secondary : i.fill.bg_secondary,
+    borderRadius: le.sm,
+    border: o ? `1px solid ${i.fill.accent_secondary_hover}` : `1px solid ${i.border.neutral_alpha_basic}`
+  }), v = a({
     width: "24px",
     height: "24px",
-    color: n ? i.icon.secondary : i.icon.tertiary
+    color: o ? i.icon.secondary : i.icon.tertiary
   });
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ t(
     r,
     {
-      className: G(
-        m,
-        l,
-        n && d
+      className: Z(
+        b,
+        p,
+        o && g
       ),
-      onClick: c ? void 0 : a,
-      children: s ? /* @__PURE__ */ e(Q, { className: h }) : /* @__PURE__ */ e(Z, { center: !0, variant: "body-2", fontWeight: "medium", children: o })
+      onClick: c ? void 0 : l,
+      children: s ? /* @__PURE__ */ t(oe, { className: v }) : /* @__PURE__ */ t(ae, { center: !0, variant: "body-2", fontWeight: "medium", children: n })
     }
   );
 };
 export {
-  bt as TablePagination
+  We as TablePagination
 };

package/dist/components/builders/Text/Text.d.ts

@@ -55,7 +55,7 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     opacityDuration?: number;
     style?: React.CSSProperties;
 } & React.RefAttributes<HTMLElement>>;
-export declare const AnimatedText: React.ComponentType<Omit<{
+declare const MotionText: React.ComponentType<Omit<{
     center?: boolean | undefined;
     left?: boolean | undefined;
     right?: boolean | undefined;
@@ -345,3 +345,6 @@ export declare const AnimatedText: React.ComponentType<Omit<{
 } & import('framer-motion').MotionProps, "children"> & {
     children?: React.ReactNode | import('motion-dom').MotionValue<number> | import('motion-dom').MotionValue<string>;
 }>;
+/** `Text` с motion-пропсами. Фичи Motion подгружаются через `MotionProvider`. */
+export declare const AnimatedText: typeof MotionText;
+export {};

package/dist/components/builders/Text/Text.js

@@ -1,97 +1,99 @@
-import { jsx as H } from "react/jsx-runtime";
-import { css as J, cx as K } from "@emotion/css";
-import { motion as O } from "framer-motion";
-import { forwardRef as Q, useState as V } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { css as K, cx as O } from "@emotion/css";
+import { m as Q } from "framer-motion";
+import { forwardRef as l, useState as V } from "react";
 import { styles as o } from "./styles.js";
 import { systemToClass as X } from "./utils/systemToClass.js";
-const i = Q(
+import { MotionProvider as Y } from "../../../providers/MotionProvider/MotionProvider.js";
+const d = l(
   ({
-    children: c,
-    className: m,
-    variant: l = "body-1",
-    fontWeight: d = "medium",
-    tag: p = "p",
-    colorName: f = "primary",
-    inherit: t = !1,
-    style: u,
-    clickOpacity: y = 0.5,
-    opacityDuration: x = 200,
-    onClick: a,
-    disabled: Y,
-    mt: h,
-    mb: T,
-    ml: C,
+    children: t,
+    className: e,
+    variant: p = "body-1",
+    fontWeight: f = "medium",
+    tag: u = "p",
+    colorName: x = "primary",
+    inherit: a = !1,
+    style: y,
+    clickOpacity: T = 0.5,
+    opacityDuration: h = 200,
+    onClick: i,
+    disabled: ss,
+    mt: v,
+    mb: C,
+    ml: M,
     mr: b,
-    flex: v,
-    cursor: M,
-    wordBreak: P,
-    whiteSpace: S,
-    textOverflow: g,
-    decoration: w,
+    flex: P,
+    cursor: N,
+    wordBreak: S,
+    whiteSpace: g,
+    textOverflow: w,
+    decoration: A,
     color: I,
-    center: N,
-    left: R,
-    right: j,
-    uppercase: k,
-    lowercase: A,
-    capitalize: B,
-    overflow: D,
-    ...E
-  }, L) => {
-    const [U, n] = V(!1), s = !!a, r = () => s && n(!0), e = () => s && n(!1), W = X({
-      mt: h,
-      mb: T,
-      ml: C,
+    center: R,
+    left: j,
+    right: k,
+    uppercase: B,
+    lowercase: D,
+    capitalize: E,
+    overflow: L,
+    ...U
+  }, W) => {
+    const [$, m] = V(!1), s = !!i, c = () => s && m(!0), n = () => s && m(!1), q = X({
+      mt: v,
+      mb: C,
+      ml: M,
       mr: b,
-      flex: v,
-      cursor: M,
-      wordBreak: P,
-      whiteSpace: S,
-      textOverflow: g,
-      decoration: w,
+      flex: P,
+      cursor: N,
+      wordBreak: S,
+      whiteSpace: g,
+      textOverflow: w,
+      decoration: A,
       color: I,
-      center: N,
-      left: R,
-      right: j,
-      uppercase: k,
-      lowercase: A,
-      capitalize: B,
-      overflow: D
-    }), $ = p, q = o[t ? "inherit" : l], z = o[t ? "inherit" : f], F = o[t ? "inherit" : d], G = s ? J({
-      opacity: U ? y : 1,
-      transition: `opacity ${x}ms ease`
+      center: R,
+      left: j,
+      right: k,
+      uppercase: B,
+      lowercase: D,
+      capitalize: E,
+      overflow: L
+    }), z = u, F = o[a ? "inherit" : p], G = o[a ? "inherit" : x], H = o[a ? "inherit" : f], J = s ? K({
+      opacity: $ ? T : 1,
+      transition: `opacity ${h}ms ease`
     }) : "";
-    return /* @__PURE__ */ H(
-      $,
+    return /* @__PURE__ */ r(
+      z,
       {
-        ref: L,
-        ...E,
-        className: K(
+        ref: W,
+        ...U,
+        className: O(
           o.text,
-          q,
-          z,
           F,
           G,
-          m,
-          W
+          H,
+          J,
+          e,
+          q
         ),
-        style: u,
-        onClick: a,
-        onMouseDown: r,
-        onMouseUp: e,
-        onMouseLeave: e,
-        onTouchStart: r,
-        onTouchEnd: e,
+        style: y,
+        onClick: i,
+        onMouseDown: c,
+        onMouseUp: n,
+        onMouseLeave: n,
+        onTouchStart: c,
+        onTouchEnd: n,
         role: s ? "button" : void 0,
         tabIndex: s ? 0 : void 0,
-        children: c
+        children: t
       }
     );
   }
 );
-i.displayName = "Text";
-const as = O(i);
+d.displayName = "Text";
+const Z = Q.create(d), _ = l((t, e) => /* @__PURE__ */ r(Y, { children: /* @__PURE__ */ r(Z, { ...t, ref: e }) }));
+_.displayName = "AnimatedText";
 export {
-  as as AnimatedText,
-  i as Text
+  _ as AnimatedText,
+  d as Text
 };

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

@@ -45,7 +45,7 @@ export interface ButtonProps extends Omit<HTMLMotionProps<"button">, "className"
     className?: string;
     /** Класс для корневой обёртки кнопки (`Box`). */
     wrapperClassName?: string;
-    /** Класс для самой `motion.button`. */
+    /** Класс для самой `m.button`. */
     buttonClassName?: string;
     /** Класс, применяемый к кнопке только в состоянии `disabled`. */
     buttonDisabledClassName?: string;