@arthurzakharov/ui-kit 1.7.6 → 1.7.8

package/dist/assets/form-row-C_CTS-Xj.css

@@ -0,0 +1 @@
+._FormRow_v16lb_1{display:flex;flex-direction:column;align-items:stretch}._XXS_v16lb_7{gap:var(--rm-ui-padding-xxs)}._XS_v16lb_11{gap:var(--rm-ui-padding-xs)}._SM_v16lb_15{gap:var(--rm-ui-padding-sm)}._MD_v16lb_19{gap:var(--rm-ui-padding-md)}._LG_v16lb_23,._XL_v16lb_27{gap:var(--rm-ui-padding-xl)}._XXL_v16lb_31{gap:var(--rm-ui-padding-xxl)}._XXXL_v16lb_35{gap:var(--rm-ui-padding-xxxl)}._Child_v16lb_39{flex-grow:1}@media screen and (min-width:768px){._FormRow_v16lb_1{flex-direction:row}._Child_v16lb_39[data-children-quantity="1"]{width:100%}._Child_v16lb_39[data-children-quantity="2"]{width:50%}._Child_v16lb_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_v16lb_39[data-children-quantity="4"]{width:25%}}

package/dist/assets/info-panel-DT7lLHJR.css

@@ -0,0 +1 @@
+._InfoPanel_1xmmg_1{position:relative;padding:var(--rm-ui-padding-md) 0;background-color:var(--rm-ui-info-panel-bg);font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._InfoPanel_1xmmg_1:before,._InfoPanel_1xmmg_1:after{content:"";display:block;position:absolute;top:0;z-index:1;height:100%;width:100vw;background-color:inherit}._InfoPanel_1xmmg_1:before{left:0}._InfoPanel_1xmmg_1:after{right:0}._List_1xmmg_30{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Item_1xmmg_40{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._Key_1xmmg_48{color:var(--rm-ui-color-text-secondary)}._Value_1xmmg_52{color:var(--rm-ui-color-text-primary)}@media screen and (min-width:480px){._Item_1xmmg_40{gap:var(--rm-ui-padding-xxs)}}

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/components/form-row/form-row.component.js

@@ -1,35 +1,35 @@
-import { jsx as n } from "react/jsx-runtime";
-import { Children as t, isValidElement as x } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Children as _, isValidElement as m } from "react";
 import c from "clsx";
-import { baseProps as m } from "../../utils/functions/functions.util.js";
-import '../../assets/form-row-Dx21oHae.css';const l = "_FormRow_ax4us_1", u = "_XXS_ax4us_7", a = "_XS_ax4us_11", i = "_SM_ax4us_15", L = "_MD_ax4us_19", d = "_LG_ax4us_23", e = "_XL_ax4us_27", S = "_XXL_ax4us_31", M = "_XXXL_ax4us_35", f = "_Child_ax4us_39", s = {
-  FormRow: l,
-  XXS: u,
-  XS: a,
-  SM: i,
-  MD: L,
-  LG: d,
-  XL: e,
-  XXL: S,
-  XXXL: M,
-  Child: f
-}, R = ({ children: X, gap: o = "sm", ..._ }) => t.count(X) === 0 ? null : /* @__PURE__ */ n(
+import { baseProps as n } from "../../utils/functions/functions.util.js";
+import '../../assets/form-row-C_CTS-Xj.css';const i = "_FormRow_v16lb_1", L = "_XXS_v16lb_7", d = "_XS_v16lb_11", e = "_SM_v16lb_15", v = "_MD_v16lb_19", x = "_LG_v16lb_23", S = "_XL_v16lb_27", b = "_XXL_v16lb_31", u = "_XXXL_v16lb_35", a = "_Child_v16lb_39", o = {
+  FormRow: i,
+  XXS: L,
+  XS: d,
+  SM: e,
+  MD: v,
+  LG: x,
+  XL: S,
+  XXL: b,
+  XXXL: u,
+  Child: a
+}, C = ({ children: t, gap: X = "sm", ...l }) => _.count(t) === 0 ? null : /* @__PURE__ */ r(
   "div",
   {
-    "data-testid": m(_, "data-testid", "form-row"),
-    className: c(s.FormRow, m(_, "className"), {
-      [s.XXS]: o === "xxs",
-      [s.XS]: o === "xs",
-      [s.SM]: o === "sm",
-      [s.MD]: o === "md",
-      [s.LG]: o === "lg",
-      [s.XL]: o === "xl",
-      [s.XXL]: o === "xxl",
-      [s.XXXL]: o === "xxxl"
+    "data-testid": n(l, "data-testid", "form-row"),
+    className: c(o.FormRow, n(l, "className"), {
+      [o.XXS]: X === "xxs",
+      [o.XS]: X === "xs",
+      [o.SM]: X === "sm",
+      [o.MD]: X === "md",
+      [o.LG]: X === "lg",
+      [o.XL]: X === "xl",
+      [o.XXL]: X === "xxl",
+      [o.XXXL]: X === "xxxl"
     }),
-    children: t.map(X, (r) => x(r) ? /* @__PURE__ */ n("div", { "data-children-quantity": t.count(X), className: s.Child, children: r }) : null)
+    children: _.map(t, (s) => m(s) ? /* @__PURE__ */ r("div", { "data-children-quantity": _.count(t), className: o.Child, children: s }) : null)
   }
 );
 export {
-  R as FormRow
+  C as FormRow
 };

package/dist/components/info-panel/info-panel.component.js

@@ -1,23 +1,23 @@
-import { jsx as e, jsxs as o } from "react/jsx-runtime";
-import c from "clsx";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import o from "clsx";
 import { baseProps as n } from "../../utils/functions/functions.util.js";
-import '../../assets/info-panel-BJPuE65n.css';const r = "_InfoPanel_1u1r0_1", m = "_List_1u1r0_30", d = "_Item_1u1r0_40", _ = "_Key_1u1r0_48", f = "_Value_1u1r0_52", a = {
-  InfoPanel: r,
-  List: m,
-  Item: d,
-  Key: _,
+import '../../assets/info-panel-DT7lLHJR.css';const c = "_InfoPanel_1xmmg_1", d = "_List_1xmmg_30", _ = "_Item_1xmmg_40", r = "_Key_1xmmg_48", f = "_Value_1xmmg_52", a = {
+  InfoPanel: c,
+  List: d,
+  Item: _,
+  Key: r,
   Value: f
-}, N = ({ data: l, ...s }) => /* @__PURE__ */ e(
+}, u = ({ data: l, ...s }) => /* @__PURE__ */ e(
   "div",
   {
     "data-testid": n(s, "data-testid", "info-panel"),
-    className: c(a.InfoPanel, n(s, "className")),
-    children: /* @__PURE__ */ e("ul", { "data-testid": "info-panel-list", className: a.List, children: l.map(([t, i]) => /* @__PURE__ */ o("li", { className: a.Item, children: [
+    className: o(a.InfoPanel, n(s, "className")),
+    children: /* @__PURE__ */ e("ul", { "data-testid": "info-panel-list", className: a.List, children: l.map(([t, m]) => /* @__PURE__ */ i("li", { className: a.Item, children: [
       /* @__PURE__ */ e("span", { "data-testid": "info-panel-key", className: a.Key, children: t }),
-      /* @__PURE__ */ e("span", { "data-testid": "info-panel-value", className: a.Value, children: i })
+      /* @__PURE__ */ e("span", { "data-testid": "info-panel-value", className: a.Value, children: m })
     ] }, t)) })
   }
 );
 export {
-  N as InfoPanel
+  u as InfoPanel
 };

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

@@ -1,102 +1,106 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import n from "clsx";
-import { useBoolean as f } from "usehooks-ts";
+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 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 x } from "../../../utils/functions/functions.util.js";
+import { baseProps as h } from "../../../utils/functions/functions.util.js";
 import "lucide-react";
 import { ErrorMessage as $ } from "../../primitives/error-message/error-message.component.js";
 import { Label as w } from "../../primitives/label/label.component.js";
-import { Input as j } from "../input/input.component.js";
-import '../../../assets/text-field-5nNgGQnX.css';const D = "_TextField_l5ui0_1", O = "_Content_l5ui0_10", q = "_Label_l5ui0_26", y = "_Idle_l5ui0_32", z = "_Active_l5ui0_37", G = "_Placeholder_l5ui0_42", H = "_PlaceholderText_l5ui0_49", J = "_ErrorMessage_l5ui0_57", K = "_Input_l5ui0_61", Q = "_MaskStart_l5ui0_65", e = {
-  TextField: D,
-  Content: O,
+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: y,
-  Active: z,
-  Placeholder: G,
-  PlaceholderText: H,
-  ErrorMessage: J,
-  Input: K,
-  MaskStart: Q
-}, se = ({
+  Idle: z,
+  Active: G,
+  Placeholder: H,
+  PlaceholderText: J,
+  ErrorMessage: K,
+  Input: Q,
+  MaskStart: R
+}, le = ({
   // Interactive props
-  id: c,
-  value: l = "",
-  disabled: h = !1,
-  state: a = "idle",
-  onChange: I,
+  id: l,
+  value: s = "",
+  disabled: I = !1,
+  state: n = "idle",
+  onChange: j,
   onFocus: F,
   onBlur: M,
   // Text props
-  mask: i,
+  mask: c,
   maxLength: P = -1,
   label: T = "",
-  message: d = "",
-  placeholder: m = "",
+  message: m = "",
+  placeholder: _ = "",
   // Base props
-  ...u
+  ...p
 }) => {
-  const { value: _, setTrue: A, setFalse: S } = f(!1), { value: r, setTrue: b, setFalse: g } = f(!1), s = r || !!l || _, E = !i && !!m && r && !l && !_, N = !!d && a === "error", v = (o) => {
-    b(), F?.(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) => {
-    g(), M?.(o);
+    b(), M?.(o);
   };
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ i(
     "div",
     {
-      "data-testid": x(u, "data-testid", "text-field"),
-      className: n(e.TextField, x(u, "className")),
+      "data-testid": h(p, "data-testid", "text-field"),
+      className: d(e.TextField, h(p, "className")),
       children: [
-        /* @__PURE__ */ t(C, { state: a, focused: r, children: /* @__PURE__ */ p(
-          "label",
-          {
-            htmlFor: c,
-            className: e.Content,
-            onPointerDown: (o) => {
-              r && o.preventDefault();
-            },
-            children: [
-              /* @__PURE__ */ t(
-                w,
-                {
-                  "data-testid": "text-label",
-                  text: T,
-                  position: s ? "active" : "idle",
-                  state: s ? a : "idle",
-                  className: n(e.Label, s ? e.Active : e.Idle)
-                }
-              ),
-              /* @__PURE__ */ t(k, { name: "text-placeholder", condition: E, className: e.Placeholder, children: /* @__PURE__ */ t("span", { "data-testid": "text-placeholder", className: e.PlaceholderText, children: m }) }),
-              /* @__PURE__ */ t(
-                j,
-                {
-                  "data-testid": "text-input",
-                  mask: i,
-                  maxLength: P,
-                  disabled: h,
-                  id: c,
-                  value: l,
-                  className: n(e.Input, {
-                    [e.MaskStart]: i && l === "" && !s
-                  }),
-                  onAnimationStart: A,
-                  onAnimationEnd: S,
-                  onChange: I,
-                  onFocus: v,
-                  onBlur: L
-                }
-              )
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ t(B, { name: "text-message", direction: "ltr", condition: N, children: /* @__PURE__ */ t($, { "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 {
-  se 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.6",
+  "version": "1.7.8",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/assets/form-row-Dx21oHae.css

@@ -1 +0,0 @@
-._FormRow_ax4us_1{display:flex;flex-direction:column;align-items:stretch}._XXS_ax4us_7{gap:var(--rm-ui-padding-xxs)}._XS_ax4us_11{gap:var(--rm-ui-padding-xs)}._SM_ax4us_15{gap:var(--rm-ui-padding-sm)}._MD_ax4us_19{gap:var(--rm-ui-padding-md)}._LG_ax4us_23,._XL_ax4us_27{gap:var(--rm-ui-padding-xl)}._XXL_ax4us_31{gap:var(--rm-ui-padding-xxl)}._XXXL_ax4us_35{gap:var(--rm-ui-padding-xxxl)}._Child_ax4us_39{flex-grow:1}._Child_ax4us_39[data-children-quantity="1"]{width:100%}._Child_ax4us_39[data-children-quantity="2"]{width:50%}._Child_ax4us_39[data-children-quantity="3"]{width:calc(100% / 3)}._Child_ax4us_39[data-children-quantity="4"]{width:25%}@media screen and (min-width:768px){._FormRow_ax4us_1{flex-direction:row}}

package/dist/assets/info-panel-BJPuE65n.css

@@ -1 +0,0 @@
-._InfoPanel_1u1r0_1{position:relative;padding:var(--rm-ui-padding-md) 0;background-color:var(--rm-ui-info-panel-bg);font-weight:var(--rm-ui-font-weight-regular);font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small)}._InfoPanel_1u1r0_1:before,._InfoPanel_1u1r0_1:after{content:"";display:block;position:absolute;top:0;z-index:1;height:100%;width:100vw;background-color:inherit}._InfoPanel_1u1r0_1:before{left:0}._InfoPanel_1u1r0_1:after{right:0}._List_1u1r0_30{position:relative;z-index:2;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Item_1u1r0_40{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--rm-ui-padding-xxs)}._Key_1u1r0_48{color:var(--rm-ui-color-text-secondary)}._Value_1u1r0_52{color:var(--rm-ui-color-text-primary)}@media screen and (min-width:480px){._Item_1u1r0_40{justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}}

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}