@arthurzakharov/ui-kit 1.7.7 → 1.7.8

package/dist/assets/text-field-CMQWxQpy.css

@@ -0,0 +1 @@
+._TextField_1jd9o_1{position:relative;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Content_1jd9o_11{box-sizing:border-box;position:relative;flex-grow:1;height:58px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm) calc(var(--rm-ui-padding-xs) - 2px) var(--rm-ui-padding-sm);display:flex;flex-direction:row;justify-content:stretch;align-items:flex-end}._Content_1jd9o_11:hover{cursor:pointer}._Label_1jd9o_27{position:absolute;left:var(--rm-ui-padding-sm);transition:top var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Label_1jd9o_27:hover{cursor:pointer}._Idle_1jd9o_37{top:50%;transform:translateY(-50%)}._Active_1jd9o_42{top:var(--rm-ui-padding-xs);transform:translateY(0)}._Placeholder_1jd9o_47{position:absolute;z-index:1;bottom:var(--rm-ui-padding-xs);left:var(--rm-ui-padding-sm)}._PlaceholderText_1jd9o_54{opacity:.75;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-secondary)}._ErrorMessage_1jd9o_62{padding-left:var(--rm-ui-padding-sm)}._Input_1jd9o_66{flex-grow:1}._MaskStart_1jd9o_70{opacity:0}

package/dist/controls/interactives/input/input.component.d.ts

@@ -1,11 +1,9 @@
-import { RefObject } from 'react';
 import { Interactive } from '../../utils';
 import { Base } from '../../../utils/types';
 export interface InputProps extends Base, Interactive<string> {
-    ref?: RefObject<HTMLInputElement>;
     mask?: string;
     maxLength?: number;
     onAnimationStart?: (id: string) => void;
     onAnimationEnd?: (id: string) => void;
 }
-export declare const Input: ({ id, value, disabled, onChange, onFocus, onBlur, ref, maxLength, mask, onAnimationStart, onAnimationEnd, ...base }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Input: ({ id, value, disabled, onChange, onFocus, onBlur, maxLength, mask, onAnimationStart, onAnimationEnd, ...base }: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/interactives/input/input.component.js

@@ -1,13 +1,13 @@
 import { jsx as M } from "react/jsx-runtime";
-import { useRef as d, useState as Q, useLayoutEffect as W, useCallback as R, useEffect as X } from "react";
+import { useRef as d, useState as O, useLayoutEffect as Q, useCallback as R, useEffect as W } from "react";
 import K from "clsx";
-import { compareStrings as Y, isDigit as Z, getFirstNotEnteredCharIndex as v, replaceCharByIndex as b, getNextChar as T, isSeparator as P, getPreviousChar as k, applyMask as tt } from "./input.utils.js";
-import { useControlInteraction as et } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
+import { compareStrings as X, isDigit as Y, getFirstNotEnteredCharIndex as v, replaceCharByIndex as b, getNextChar as T, isSeparator as P, getPreviousChar as Z, applyMask as k } from "./input.utils.js";
+import { useControlInteraction as tt } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
 import { baseProps as h } from "../../../utils/functions/functions.util.js";
-import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_Placeholder_gfvsr_45", w = {
-  Input: nt,
-  Placeholder: rt
-}, lt = ({
+import '../../../assets/input-D66hMzHc.css';const et = "_Input_gfvsr_1", nt = "_Placeholder_gfvsr_45", w = {
+  Input: et,
+  Placeholder: nt
+}, it = ({
   // Interactive props
   id: u,
   value: y = "",
@@ -16,27 +16,26 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
   onFocus: L,
   onBlur: j,
   // Input props
-  ref: U,
-  maxLength: q,
+  maxLength: U,
   mask: n = "",
-  onAnimationStart: z,
-  onAnimationEnd: G,
+  onAnimationStart: q,
+  onAnimationEnd: z,
   // Base props
   ...s
 }) => {
-  const { emitChange: C, handleFocus: S, handleBlur: E } = et({
+  const { emitChange: C, handleFocus: S, handleBlur: E } = tt({
     id: u,
     disabled: g,
     onChange: $,
     onFocus: L,
     onBlur: j
-  }), o = U || d(null), D = d(!1), a = d(null), N = d(!0), [r, I] = Q(y || n), i = (t) => {
+  }), o = d(null), D = d(!1), a = d(null), N = d(!0), [r, I] = O(y || n), i = (t) => {
     const c = Math.max(0, t);
     if (a.current = c, !o.current) return;
     const e = Math.min(c, o.current.value.length);
     o.current.setSelectionRange(e, e);
   };
-  W(() => {
+  Q(() => {
     if (!n || !o.current || a.current === null) return;
     const t = Math.min(a.current, o.current.value.length);
     o.current.setSelectionRange(t, t), a.current = null;
@@ -44,16 +43,16 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
   const F = () => {
     const t = o.current?.value || "", c = v(t, n);
     c !== t.length && i(c);
-  }, H = R(() => {
-    const t = o.current?.value || "", c = Y(r, t);
-    if (!Z(c)) return;
+  }, G = R(() => {
+    const t = o.current?.value || "", c = X(r, t);
+    if (!Y(c)) return;
     const e = o.current?.selectionEnd || 0, m = v(t, n) === t.length, l = b(r, e - 1, c), f = v(l, n);
     if (m) {
-      const p = t.slice(0, e - 1), x = t.slice(e - 1, e), B = t.slice(e), O = b(p + B, e - 1, x), _ = T(p + B, e) || "";
-      I(O), i(P(_, n) && _ ? e + 1 : e);
+      const p = t.slice(0, e - 1), x = t.slice(e - 1, e), B = t.slice(e), J = b(p + B, e - 1, x), _ = T(p + B, e) || "";
+      I(J), i(P(_, n) && _ ? e + 1 : e);
     } else
       I(l), i(f);
-  }, [r, n]), J = R(
+  }, [r, n]), H = R(
     (t) => {
       if ([
         "Digit1",
@@ -74,14 +73,14 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
         t.preventDefault();
         const e = o.current?.selectionEnd || 0;
         if (e) {
-          const A = k(r, e), m = T(r, e - 1), l = P(A, n), f = P(m, n), p = e - (l || f ? 2 : 1), x = tt(r, n, e - (f ? 2 : 1));
+          const A = Z(r, e), m = T(r, e - 1), l = P(A, n), f = P(m, n), p = e - (l || f ? 2 : 1), x = k(r, n, e - (f ? 2 : 1));
           I(x), i(p);
         }
       }
     },
     [r, n]
   );
-  X(() => {
+  W(() => {
     if (n) {
       if (N.current) {
         N.current = !1;
@@ -91,7 +90,7 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
     }
   }, [r, n, C]);
   const V = (t) => {
-    t.includes("autofill-start") && z?.(u), t.includes("autofill-end") && G?.(u);
+    t.includes("autofill-start") && q?.(u), t.includes("autofill-end") && z?.(u);
   };
   return n ? /* @__PURE__ */ M(
     "input",
@@ -106,8 +105,8 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
       value: r,
       className: K(w.Input, h(s, "className"), { [w.Placeholder]: r === n }),
       onAnimationStart: (t) => V(t.animationName),
-      onKeyDown: J,
-      onChange: H,
+      onKeyDown: H,
+      onChange: G,
       onPointerDown: (t) => {
         t.preventDefault(), D.current = !0, t.currentTarget.focus(), F();
       },
@@ -126,7 +125,7 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
       "data-testid": h(s, "data-testid", "input"),
       "aria-label": `${u}-text-input`,
       disabled: g,
-      maxLength: q,
+      maxLength: U,
       type: "text",
       id: u,
       name: u,
@@ -140,5 +139,5 @@ import '../../../assets/input-D66hMzHc.css';const nt = "_Input_gfvsr_1", rt = "_
   );
 };
 export {
-  lt as Input
+  it as Input
 };

package/dist/controls/interactives/text-field/text-field.component.js

@@ -1,103 +1,106 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { useRef as B } from "react";
-import i from "clsx";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import d from "clsx";
 import { useBoolean as x } from "usehooks-ts";
-import { FadeScale as C } from "../../../animations/fade-scale/fade-scale.component.js";
-import { FadeSlide as $ } from "../../../animations/fade-slide/fade-slide.component.js";
-import { Box as w } from "../../primitives/box/box.component.js";
+import { FadeScale as k } from "../../../animations/fade-scale/fade-scale.component.js";
+import { FadeSlide as B } from "../../../animations/fade-slide/fade-slide.component.js";
+import { Box as C } from "../../primitives/box/box.component.js";
+import "react";
 import { baseProps as h } from "../../../utils/functions/functions.util.js";
 import "lucide-react";
-import { ErrorMessage as j } from "../../primitives/error-message/error-message.component.js";
-import { Label as D } from "../../primitives/label/label.component.js";
-import { Input as O } from "../input/input.component.js";
-import '../../../assets/text-field-5nNgGQnX.css';const R = "_TextField_l5ui0_1", q = "_Content_l5ui0_10", y = "_Label_l5ui0_26", z = "_Idle_l5ui0_32", G = "_Active_l5ui0_37", H = "_Placeholder_l5ui0_42", J = "_PlaceholderText_l5ui0_49", K = "_ErrorMessage_l5ui0_57", Q = "_Input_l5ui0_61", U = "_MaskStart_l5ui0_65", e = {
-  TextField: R,
-  Content: q,
-  Label: y,
+import { ErrorMessage as $ } from "../../primitives/error-message/error-message.component.js";
+import { Label as w } from "../../primitives/label/label.component.js";
+import { Input as D } from "../input/input.component.js";
+import '../../../assets/text-field-CMQWxQpy.css';const O = "_TextField_1jd9o_1", y = "_Content_1jd9o_11", q = "_Label_1jd9o_27", z = "_Idle_1jd9o_37", G = "_Active_1jd9o_42", H = "_Placeholder_1jd9o_47", J = "_PlaceholderText_1jd9o_54", K = "_ErrorMessage_1jd9o_62", Q = "_Input_1jd9o_66", R = "_MaskStart_1jd9o_70", e = {
+  TextField: O,
+  Content: y,
+  Label: q,
   Idle: z,
   Active: G,
   Placeholder: H,
   PlaceholderText: J,
   ErrorMessage: K,
   Input: Q,
-  MaskStart: U
-}, ne = ({
+  MaskStart: R
+}, le = ({
   // Interactive props
-  id: c,
-  value: l = "",
+  id: l,
+  value: s = "",
   disabled: I = !1,
-  state: a = "idle",
-  onChange: F,
-  onFocus: M,
-  onBlur: P,
+  state: n = "idle",
+  onChange: j,
+  onFocus: F,
+  onBlur: M,
   // Text props
-  mask: n,
-  maxLength: T = -1,
-  label: A = "",
-  message: d = "",
-  placeholder: u = "",
+  mask: c,
+  maxLength: P = -1,
+  label: T = "",
+  message: m = "",
+  placeholder: _ = "",
   // Base props
-  ...m
+  ...p
 }) => {
-  const { value: _, setTrue: S, setFalse: b } = x(!1), { value: r, setTrue: g, setFalse: E } = x(!1), f = B(null), s = r || !!l || _, N = !n && !!u && r && !l && !_, v = !!d && a === "error", L = (o) => {
-    g(), M?.(o);
-  }, k = (o) => {
-    E(), P?.(o);
+  const { value: u, setTrue: g, setFalse: A } = x(!1), { value: r, setTrue: S, setFalse: b } = x(!1), a = r || !!s || u, E = !c && !!_ && r && !s && !u, N = !!m && n === "error", v = (o) => {
+    S(), F?.(o);
+  }, L = (o) => {
+    b(), M?.(o);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ i(
     "div",
     {
-      "data-testid": h(m, "data-testid", "text-field"),
-      className: i(e.TextField, h(m, "className")),
+      "data-testid": h(p, "data-testid", "text-field"),
+      className: d(e.TextField, h(p, "className")),
       children: [
-        /* @__PURE__ */ t(w, { state: a, focused: r, children: /* @__PURE__ */ p(
-          "label",
-          {
-            htmlFor: c,
-            className: e.Content,
-            onPointerDown: (o) => {
-              r && o.preventDefault(), f.current?.click();
-            },
-            children: [
-              /* @__PURE__ */ t(
-                D,
-                {
-                  "data-testid": "text-label",
-                  text: A,
-                  position: s ? "active" : "idle",
-                  state: s ? a : "idle",
-                  className: i(e.Label, s ? e.Active : e.Idle)
-                }
-              ),
-              /* @__PURE__ */ t(C, { name: "text-placeholder", condition: N, className: e.Placeholder, children: /* @__PURE__ */ t("span", { "data-testid": "text-placeholder", className: e.PlaceholderText, children: u }) }),
-              /* @__PURE__ */ t(
-                O,
-                {
-                  "data-testid": "text-input",
-                  mask: n,
-                  maxLength: T,
-                  disabled: I,
-                  id: c,
-                  ref: f,
-                  value: l,
-                  className: i(e.Input, {
-                    [e.MaskStart]: n && l === "" && !s
-                  }),
-                  onAnimationStart: S,
-                  onAnimationEnd: b,
-                  onChange: F,
-                  onFocus: L,
-                  onBlur: k
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ t($, { name: "text-message", direction: "ltr", condition: v, children: /* @__PURE__ */ t(j, { "data-testid": "text-error-message", text: d, className: e.ErrorMessage }) })
+        /* @__PURE__ */ i(C, { state: n, focused: r, children: [
+          /* @__PURE__ */ t(
+            w,
+            {
+              "data-testid": "text-label",
+              text: T,
+              position: a ? "active" : "idle",
+              state: a ? n : "idle",
+              className: d(e.Label, a ? e.Active : e.Idle)
+            }
+          ),
+          /* @__PURE__ */ i(
+            "label",
+            {
+              htmlFor: l,
+              className: e.Content,
+              onPointerDown: (o) => {
+                r && o.preventDefault();
+                const f = document.getElementById(l);
+                console.log("input", f), f?.click();
+              },
+              children: [
+                /* @__PURE__ */ t(k, { name: "text-placeholder", condition: E, className: e.Placeholder, children: /* @__PURE__ */ t("span", { "data-testid": "text-placeholder", className: e.PlaceholderText, children: _ }) }),
+                /* @__PURE__ */ t(
+                  D,
+                  {
+                    "data-testid": "text-input",
+                    mask: c,
+                    maxLength: P,
+                    disabled: I,
+                    id: l,
+                    value: s,
+                    className: d(e.Input, {
+                      [e.MaskStart]: c && s === "" && !a
+                    }),
+                    onAnimationStart: g,
+                    onAnimationEnd: A,
+                    onChange: j,
+                    onFocus: v,
+                    onBlur: L
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(B, { name: "text-message", direction: "ltr", condition: N, children: /* @__PURE__ */ t($, { "data-testid": "text-error-message", text: m, className: e.ErrorMessage }) })
       ]
     }
   );
 };
 export {
-  ne as TextField
+  le as TextField
 };

package/dist/controls/primitives/label/label.component.js

@@ -1,33 +1,36 @@
-import { jsx as l } from "react/jsx-runtime";
-import _ from "clsx";
-import { Content as a } from "../../../utils/content/content.component.js";
-import { baseProps as t } from "../../../utils/functions/functions.util.js";
-import '../../../assets/label-BKXQlPJi.css';const i = "_Label_85kr5_1", d = "_Idle_85kr5_7", m = "_Active_85kr5_12", n = "_Success_85kr5_21", e = {
-  Label: i,
-  Idle: d,
+import { jsx as a } from "react/jsx-runtime";
+import i from "clsx";
+import { Content as _ } from "../../../utils/content/content.component.js";
+import { baseProps as o } from "../../../utils/functions/functions.util.js";
+import '../../../assets/label-BKXQlPJi.css';const d = "_Label_85kr5_1", n = "_Idle_85kr5_7", m = "_Active_85kr5_12", p = "_Success_85kr5_21", e = {
+  Label: d,
+  Idle: n,
   Active: m,
   Error: "_Error_85kr5_17",
-  Success: n
-}, v = ({
+  Success: p
+}, L = ({
   // Label props
-  text: o,
+  text: t,
   state: r = "idle",
   position: c = "idle",
   // Base props
   ...s
-}) => /* @__PURE__ */ l(
-  a,
+}) => /* @__PURE__ */ a(
+  _,
   {
-    "data-testid": t(s, "data-testid", "label"),
-    className: _(e.Label, t(s, "className"), {
+    "data-testid": o(s, "data-testid", "label"),
+    className: i(e.Label, o(s, "className"), {
       [e.Idle]: c === "idle",
       [e.Active]: c === "active",
       [e.Error]: r === "error",
       [e.Success]: r === "success"
     }),
-    children: o
+    onClick: (l) => {
+      l.stopPropagation();
+    },
+    children: t
   }
 );
 export {
-  v as Label
+  L as Label
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arthurzakharov/ui-kit",
   "private": false,
-  "version": "1.7.7",
+  "version": "1.7.8",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/assets/text-field-5nNgGQnX.css

@@ -1 +0,0 @@
-._TextField_l5ui0_1{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Content_l5ui0_10{box-sizing:border-box;position:relative;flex-grow:1;height:58px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm) calc(var(--rm-ui-padding-xs) - 2px) var(--rm-ui-padding-sm);display:flex;flex-direction:row;justify-content:stretch;align-items:flex-end}._Content_l5ui0_10:hover{cursor:pointer}._Label_l5ui0_26{position:absolute;left:var(--rm-ui-padding-sm);transition:top var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Idle_l5ui0_32{top:50%;transform:translateY(-50%)}._Active_l5ui0_37{top:var(--rm-ui-padding-xs);transform:translateY(0)}._Placeholder_l5ui0_42{position:absolute;z-index:1;bottom:var(--rm-ui-padding-xs);left:var(--rm-ui-padding-sm)}._PlaceholderText_l5ui0_49{opacity:.75;font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-secondary)}._ErrorMessage_l5ui0_57{padding-left:var(--rm-ui-padding-sm)}._Input_l5ui0_61{flex-grow:1}._MaskStart_l5ui0_65{opacity:0}