@dss-kit/ui-kit 1.0.3 → 1.1.0

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

@@ -1,14 +1,15 @@
-import { jsx as o, jsxs as b, Fragment as O } from "react/jsx-runtime";
-import { cx as _, css as k } from "@emotion/css";
-import { motion as q } from "framer-motion";
+import { jsx as m, jsxs as b, Fragment as O } from "react/jsx-runtime";
+import { cx as _, css as P } from "@emotion/css";
+import { m as k } from "framer-motion";
 import { useMemo as n } from "react";
-import { cornerRadiusValues as m, 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 { 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: u } = K, sr = ({
+import { cornerRadiusValues as o, baseButton as q, getVariantStyles as D, typeStyles as E, sizeValues as G } from "./styles.js";
+import { Loader as H } from "../../builders/Loader/Loader.js";
+import { AnimatedText as I } from "../../builders/Text/Text.js";
+import { theme as J } from "../../../utils/theme/index.js";
+import { Box as K } from "../../builders/Box/Box.js";
+import { MotionProvider as Q } from "../../../providers/MotionProvider/MotionProvider.js";
+import { Ripple as U } from "../../builders/Ripple/Ripple.js";
+const { color: u } = J, or = ({
   disabled: a,
   loading: l,
   className: w,
@@ -18,14 +19,14 @@ const { color: u } = K, sr = ({
   textClassName: S,
   children: v,
   variant: e = "filled",
-  backgroundColor: f,
-  textColor: d,
-  textFontWeight: U,
-  borderColor: i,
+  backgroundColor: i,
+  textColor: c,
+  textFontWeight: X,
+  borderColor: f,
   color: r = "accent",
   opacity: p,
   borderRadius: x,
-  width: c = "auto",
+  width: d = "auto",
   size: s = "md",
   iconLeft: B,
   iconRight: R,
@@ -35,15 +36,15 @@ const { color: u } = K, sr = ({
   ...j
 }) => {
   const h = n(() => {
-    switch (c) {
+    switch (d) {
       case "full":
         return "100%";
       case "auto":
         return "fit-content";
       default:
-        return c;
+        return d;
     }
-  }, [c]), F = n(() => f || (e === "filled" ? r === "neutral" ? u.fill.neutral_secondary : r === "neutral-primary" ? u.fill.neutral_primary : `var(--fill-${r}-${t})` : "transparent"), [e, f, r, t]), W = n(() => {
+  }, [d]), F = n(() => i || (e === "filled" ? r === "neutral" ? u.fill.neutral_secondary : r === "neutral-primary" ? u.fill.neutral_primary : `var(--fill-${r}-${t})` : "transparent"), [e, i, r, t]), M = n(() => {
     if (t === "primary") {
       if (r === "neutral" || r === "neutral-primary")
         return u.text.secondary;
@@ -58,34 +59,34 @@ const { color: u } = K, sr = ({
     } else if (r === "neutral" || r === "neutral-primary")
       return "secondary";
     return r;
-  }, [e, r, t]), A = n(() => i || (e === "outline" ? r === "neutral-primary" ? u.border.neutral_alpha_basic : `var(--border-${r}-${t})` : "transparent"), [e, i, r, t]), C = n(() => {
+  }, [e, r, t]), W = n(() => f || (e === "outline" ? r === "neutral-primary" ? u.border.neutral_alpha_basic : `var(--border-${r}-${t})` : "transparent"), [e, f, r, t]), A = n(() => {
     switch (s) {
       case "lg":
-        return m.lg;
+        return o.lg;
       case "md":
       case "sm":
-        return m.md;
+        return o.md;
       case "xs":
-        return m.sm;
+        return o.sm;
       default:
-        return m.md;
+        return o.md;
     }
-  }, [s]), L = _(
-    D,
-    E(e, r, t, a),
-    G[e],
+  }, [s]), C = _(
+    q,
+    D(e, r, t, a),
+    E[e],
     a ? N : void 0,
-    k({
-      borderRadius: x ? m[x] : C,
+    P({
+      borderRadius: x ? o[x] : A,
       backgroundColor: F,
-      borderColor: A,
-      color: d ?? `var(--text-${y})`,
+      borderColor: W,
+      color: c ?? `var(--text-${y})`,
       width: h,
-      height: H[s],
+      height: G[s],
       opacity: p || (a ? 0.7 : 1)
     }),
     $
-  ), M = n(() => {
+  ), L = n(() => {
     switch (s) {
       case "lg":
       case "md":
@@ -97,16 +98,16 @@ const { color: u } = K, sr = ({
         return "body-1";
     }
   }, [s]);
-  return /* @__PURE__ */ o(
-    P,
+  return /* @__PURE__ */ m(
+    K,
     {
       className: _(g, w),
       w: h,
       flex: T,
       relative: !0,
       overflow: "hidden",
-      children: /* @__PURE__ */ b(
-        q.button,
+      children: /* @__PURE__ */ m(Q, { children: /* @__PURE__ */ b(
+        k.button,
         {
           ...j,
           whileTap: !a && !l ? {
@@ -115,17 +116,17 @@ const { color: u } = K, sr = ({
             transition: { duration: 0 }
           } : {},
           disabled: a || l,
-          className: L,
+          className: C,
           type: V,
           children: [
-            l ? /* @__PURE__ */ o(I, { color: W }) : /* @__PURE__ */ b(O, { children: [
+            l ? /* @__PURE__ */ m(H, { color: M }) : /* @__PURE__ */ b(O, { children: [
               B,
-              /* @__PURE__ */ o(
-                J,
+              /* @__PURE__ */ m(
+                I,
                 {
-                  style: { color: d },
+                  style: { color: c },
                   colorName: y,
-                  variant: M,
+                  variant: L,
                   className: S,
                   textOverflow: "ellipsis",
                   overflow: "hidden",
@@ -134,13 +135,13 @@ const { color: u } = K, sr = ({
               ),
               R
             ] }),
-            /* @__PURE__ */ o(Q, {})
+            /* @__PURE__ */ m(U, {})
           ]
         }
-      )
+      ) })
     }
   );
 };
 export {
-  sr as Button
+  or as Button
 };

package/dist/components/controls/OtpInput/OtpInput.js

@@ -1,63 +1,62 @@
-import { jsxs as W, jsx as p } from "react/jsx-runtime";
-import { cx as F, css as sr } from "@emotion/css";
-import { motion as cr } from "framer-motion";
-import { forwardRef as nr, useState as ur, useRef as H, useEffect as ir, useCallback as C, useImperativeHandle as fr } from "react";
-import { styles as y } from "./styles.js";
+import { jsxs as H, jsx as y } from "react/jsx-runtime";
+import { cx as k, css as ar } from "@emotion/css";
+import { forwardRef as cr, useState as nr, useRef as $, useEffect as ur, useCallback as D, useImperativeHandle as fr } from "react";
+import { styles as m } from "./styles.js";
 import { usePrevious as lr } from "./usePrevious.js";
-import { useControlled as mr } from "../../../utils/hooks/useControlled.js";
-import { Box as j } from "../../builders/Box/Box.js";
-import { theme as pr } from "../../../utils/theme/index.js";
-import { Text as V } from "../../builders/Text/Text.js";
-const { spacing: q } = pr, yr = nr(
+import { useControlled as ir } from "../../../utils/hooks/useControlled.js";
+import { Box as V } from "../../builders/Box/Box.js";
+import { theme as mr } from "../../../utils/theme/index.js";
+import { Text as b } from "../../builders/Text/Text.js";
+const { spacing: d } = mr, pr = cr(
   ({
-    length: a = 6,
-    label: d,
-    prompt: k,
-    error: b,
-    errorText: _,
-    success: G,
-    disabled: i,
-    autoFocus: J,
-    center: M,
-    secure: Q,
-    loading: R,
-    background: T = "gray",
+    length: o = 6,
+    label: _,
+    prompt: M,
+    error: R,
+    errorText: E,
+    success: q,
+    disabled: f,
+    autoFocus: G,
+    center: L,
+    secure: J,
+    loading: C,
+    background: Q = "gray",
     numeric: w = !0,
-    className: U,
-    inputsContainerClassName: X,
-    inputClassName: Y,
-    labelClassName: Z,
-    promptClassName: $,
+    className: T,
+    inputsContainerClassName: U,
+    inputClassName: X,
+    labelClassName: Y,
+    promptClassName: Z,
     errorClassName: P,
-    value: m,
+    value: p,
     defaultValue: x,
-    onChange: E,
-    onComplete: L
+    onChange: W,
+    onComplete: z
   }, rr) => {
-    const A = typeof m == "string", z = A ? m : x, B = typeof z == "string" ? z.slice(0, a) : "", [K, O] = mr(
-      A ? m : void 0,
-      B
-    ), [s, f] = ur(() => {
-      const r = B.slice(0, a);
-      return Array.from({ length: a }, (e, t) => r[t] ?? "");
-    }), D = H(void 0), S = lr(m), c = H([]);
-    ir(() => {
+    const A = typeof p == "string", B = A ? p : x, K = typeof B == "string" ? B.slice(0, o) : "", [O, S] = ir(
+      A ? p : void 0,
+      K
+    ), [a, l] = nr(() => {
+      const r = K.slice(0, o);
+      return Array.from({ length: o }, (e, t) => r[t] ?? "");
+    }), N = $(void 0), F = lr(p), c = $([]);
+    ur(() => {
       if (!A) return;
-      const r = m ?? "";
-      if (r === S) return;
-      if (r === D.current) {
-        D.current = void 0;
+      const r = p ?? "";
+      if (r === F) return;
+      if (r === N.current) {
+        N.current = void 0;
         return;
       }
-      const e = r.slice(0, a);
-      f(Array.from({ length: a }, (t, o) => e[o] ?? ""));
-    }, [A, m, a, S]);
-    const n = C(
+      const e = r.slice(0, o);
+      l(Array.from({ length: o }, (t, s) => e[s] ?? ""));
+    }, [A, p, o, F]);
+    const n = D(
       (r, e) => {
-        const t = r.slice(0, a);
-        e?.fromInternal && (D.current = t), O(t), E?.(t), t.length === a && L?.(t);
+        const t = r.slice(0, o);
+        e?.fromInternal && (N.current = t), S(t), W?.(t), t.length === o && z?.(t);
       },
-      [a, E, L, O]
+      [o, W, z, S]
     );
     fr(
       rr,
@@ -69,183 +68,162 @@ const { spacing: q } = pr, yr = nr(
           c.current.forEach((r) => r?.blur());
         },
         get value() {
-          return K || "";
+          return O || "";
         },
         setValue: (r) => {
-          const e = r.slice(0, a);
-          f(Array.from({ length: a }, (t, o) => e[o] ?? "")), n(e, { fromInternal: !0 });
+          const e = r.slice(0, o);
+          l(Array.from({ length: o }, (t, s) => e[s] ?? "")), n(e, { fromInternal: !0 });
         },
         clear: () => {
-          f(Array.from({ length: a }, () => "")), n("", { fromInternal: !0 });
+          l(Array.from({ length: o }, () => "")), n("", { fromInternal: !0 });
         }
       }),
-      [a, n, K]
+      [o, n, O]
     );
-    const tr = C(
+    const tr = D(
       (r, e) => {
-        if (i) return;
+        if (f) return;
         let t = e;
         if (w && (t = t.replace(/\D/g, "")), t.length > 1) {
-          const u = s.slice(0, r).join("") + t + s.slice(r + 1).join(""), g = Array.from({ length: a }, (I, or) => u[or] ?? "");
-          f(g), n(u, { fromInternal: !0 });
-          const h = Math.min(r + t.length, a - 1), v = c.current[h];
+          const u = a.slice(0, r).join("") + t + a.slice(r + 1).join(""), g = Array.from({ length: o }, (I, sr) => u[sr] ?? "");
+          l(g), n(u, { fromInternal: !0 });
+          const j = Math.min(r + t.length, o - 1), v = c.current[j];
           v?.focus(), v?.select();
           return;
         }
-        const o = s[r], l = [...s];
-        l[r] = t, f(l);
-        const N = l.join("");
-        if (n(N, { fromInternal: !0 }), !o && t && r < a - 1) {
+        const s = a[r], i = [...a];
+        i[r] = t, l(i);
+        const h = i.join("");
+        if (n(h, { fromInternal: !0 }), !s && t && r < o - 1) {
           const u = c.current[r + 1];
           u?.focus(), u?.select();
         }
       },
-      [s, i, a, w, n]
-    ), er = C(
+      [a, f, o, w, n]
+    ), er = D(
       (r, e) => {
-        if (!i) {
+        if (!f) {
           if (e.key === "Backspace") {
             e.preventDefault();
             const t = c.current[r];
-            if (s[r]) {
-              const o = [...s];
-              o[r] = "", f(o), n(o.join(""), { fromInternal: !0 }), t?.focus();
+            if (a[r]) {
+              const s = [...a];
+              s[r] = "", l(s), n(s.join(""), { fromInternal: !0 }), t?.focus();
               return;
             }
             if (r > 0) {
-              const o = c.current[r - 1];
-              o?.focus(), o?.select();
+              const s = c.current[r - 1];
+              s?.focus(), s?.select();
             }
             return;
           }
-          e.key === "ArrowLeft" && r > 0 && (e.preventDefault(), c.current[r - 1]?.focus()), e.key === "ArrowRight" && r < a - 1 && (e.preventDefault(), c.current[r + 1]?.focus());
+          e.key === "ArrowLeft" && r > 0 && (e.preventDefault(), c.current[r - 1]?.focus()), e.key === "ArrowRight" && r < o - 1 && (e.preventDefault(), c.current[r + 1]?.focus());
         }
       },
-      [s, i, a, n]
-    ), ar = C(
+      [a, f, o, n]
+    ), or = D(
       (r, e) => {
-        if (i) return;
+        if (f) return;
         e.preventDefault();
         let t = e.clipboardData.getData("text");
         if (w && (t = t.replace(/\D/g, "")), !t) return;
-        const o = a - r, l = Math.min(t.length, o), N = t.slice(0, l), u = [...s];
-        for (let I = 0; I < l; I++)
-          u[r + I] = N[I] ?? "";
-        f(u);
+        const s = o - r, i = Math.min(t.length, s), h = t.slice(0, i), u = [...a];
+        for (let I = 0; I < i; I++)
+          u[r + I] = h[I] ?? "";
+        l(u);
         const g = u.join("");
         n(g, { fromInternal: !0 });
-        const h = Math.min(r + l - 1, a - 1), v = c.current[h];
+        const j = Math.min(r + i - 1, o - 1), v = c.current[j];
         v?.focus(), v?.select();
       },
-      [s, i, a, w, n]
+      [a, f, o, w, n]
     );
-    return /* @__PURE__ */ W(j, { w: "full", gap: q.sm, className: U, center: M, children: [
-      d && /* @__PURE__ */ p(
-        V,
+    return /* @__PURE__ */ H(V, { w: "full", gap: d.sm, className: T, center: L, children: [
+      _ && /* @__PURE__ */ y(
+        b,
         {
           variant: "body-2",
           fontWeight: "regular",
           colorName: "tertiary",
-          className: Z,
-          children: d
+          className: Y,
+          children: _
         }
       ),
-      /* @__PURE__ */ p(
-        j,
+      /* @__PURE__ */ y(
+        V,
         {
           row: !0,
           w: "full",
-          gap: q.sm,
-          center: M,
-          className: F(
+          gap: d.sm,
+          center: L,
+          className: k(
             {
-              [y.disabled]: i
+              [m.disabled]: f
             },
-            X
+            U
           ),
-          children: Array.from({ length: a }).map((r, e) => (
+          children: Array.from({ length: o }).map((r, e) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-            /* @__PURE__ */ W(j, { relative: !0, display: "inline-block", children: [
-              /* @__PURE__ */ p(
+            /* @__PURE__ */ H(V, { relative: !0, display: "inline-block", children: [
+              /* @__PURE__ */ y(
                 "input",
                 {
                   ref: (t) => {
                     c.current[e] = t;
                   },
-                  className: F(
-                    y.input,
-                    y[T],
-                    b && y.error,
-                    G && y.success,
-                    s[e] && sr({ caretColor: "transparent" }),
-                    Y
+                  className: k(
+                    m.input,
+                    m[Q],
+                    R && m.error,
+                    q && m.success,
+                    a[e] && ar({ caretColor: "transparent" }),
+                    X
                   ),
                   inputMode: w ? "numeric" : "text",
-                  type: Q ? "password" : "text",
+                  type: J ? "password" : "text",
                   maxLength: 1,
-                  autoFocus: J && e === 0,
-                  disabled: i || R,
-                  value: s[e],
+                  autoFocus: G && e === 0,
+                  disabled: f || C,
+                  value: a[e],
                   onChange: (t) => tr(e, t.target.value),
                   onKeyDown: (t) => er(e, t),
-                  onPaste: (t) => ar(e, t)
+                  onPaste: (t) => or(e, t)
                 }
               ),
-              /* @__PURE__ */ p(
-                cr.span,
+              /* @__PURE__ */ y(
+                "span",
                 {
-                  className: y.glow,
-                  variants: wr,
-                  custom: e,
-                  initial: "idle",
-                  animate: R ? "wave" : "idle"
+                  className: k(m.glow, C && m.glowWave),
+                  style: C ? { animationDelay: `${e * 150}ms` } : void 0
                 }
               )
             ] }, e)
           ))
         }
       ),
-      k && /* @__PURE__ */ p(
-        V,
+      M && /* @__PURE__ */ y(
+        b,
         {
           variant: "caption-1",
           colorName: "tertiary",
-          className: $,
-          children: k
+          className: Z,
+          children: M
         }
       ),
-      _ && b && /* @__PURE__ */ p(
-        V,
+      E && R && /* @__PURE__ */ y(
+        b,
         {
           variant: "body-2",
           colorName: "negative",
           fontWeight: "regular",
           className: P,
-          children: _
+          children: E
         }
       )
     ] });
   }
-), wr = {
-  idle: {
-    opacity: 0,
-    scale: 1,
-    // без delay — мгновенное скрытие при переходе в idle
-    transition: { duration: 0.18 }
-  },
-  wave: (a = 0) => ({
-    // keyframes: вспышка opacity + небольшой scale для эффекта «волны»
-    opacity: [0, 0.2, 0],
-    scale: [1, 1.03, 1],
-    transition: {
-      duration: 1.5,
-      delay: a * 0.15,
-      repeat: 1 / 0,
-      ease: [0.42, 0, 0.58, 1]
-    }
-  })
-};
-yr.displayName = "OtpInput";
+);
+pr.displayName = "OtpInput";
 export {
-  yr as OtpInput
+  pr as OtpInput
 };

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

@@ -6,4 +6,5 @@ export declare const styles: {
     white: string;
     gray: string;
     glow: string;
+    glowWave: string;
 };

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

@@ -1,7 +1,10 @@
-import { css as o } from "@emotion/css";
+import { css as o, keyframes as a } from "@emotion/css";
 import { typography as e } from "../../../styles/utils/typography.js";
 import { theme as i } from "../../../utils/theme/index.js";
-const { color: r } = i, s = {
+const { color: r } = i, t = a({
+  "0%, 100%": { opacity: 0, transform: "scale(1)" },
+  "50%": { opacity: 0.2, transform: "scale(1.03)" }
+}), l = {
   input: o({
     ...e.common,
     ...e.body1,
@@ -52,8 +55,11 @@ const { color: r } = i, s = {
     opacity: 0,
     transformOrigin: "center",
     background: r.fill.accent_primary
+  }),
+  glowWave: o({
+    animation: `${t} 1.5s cubic-bezier(0.42, 0, 0.58, 1) infinite`
   })
 };
 export {
-  s as styles
+  l as styles
 };