@arthurzakharov/ui-kit 3.17.0 → 3.19.0

package/dist/assets/button-DBz6-Gkk.css

@@ -0,0 +1 @@
+._Button_o1crw_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary),background-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._WithHint_o1crw_14{display:inline-flex;flex-direction:row;align-items:center;gap:var(--rm-ui-padding-sm)}._EnterHint_o1crw_21{white-space:nowrap}._Button_o1crw_1:disabled{cursor:not-allowed;opacity:.33}._Button_o1crw_1._SM_o1crw_30{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._Button_o1crw_1._LG_o1crw_35._Tertiary_o1crw_35{padding:calc(var(--rm-ui-padding-xs) - 1px) calc(var(--rm-ui-padding-sm) - 1px)}._Button_o1crw_1._SM_o1crw_30 ._Text_o1crw_39{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)}._Button_o1crw_1._MD_o1crw_45{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_o1crw_1._MD_o1crw_45._Tertiary_o1crw_35{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_o1crw_1._LG_o1crw_35{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_o1crw_1._LG_o1crw_35._Tertiary_o1crw_35{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_o1crw_1._MD_o1crw_45 ._Text_o1crw_39{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Button_o1crw_1._LG_o1crw_35 ._Text_o1crw_39{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Button_o1crw_1._Primary_o1crw_73{background-color:var(--rm-ui-next-btn-bg)}._Button_o1crw_1._Primary_o1crw_73:hover{background-color:var(--rm-ui-next-btn-bg-hover)}._Button_o1crw_1._Primary_o1crw_73 ._Text_o1crw_39,._Button_o1crw_1._Primary_o1crw_73 ._Info_o1crw_82{color:#fff}._Button_o1crw_1._Secondary_o1crw_86{border:1px solid transparent;background-color:transparent}._Button_o1crw_1._Secondary_o1crw_86:hover{border-color:var(--rm-ui-grey-400)}._Button_o1crw_1._Secondary_o1crw_86:hover ._Text_o1crw_39{color:var(--rm-ui-grey-400);border-color:var(--rm-ui-grey-400)}._Button_o1crw_1._Secondary_o1crw_86 ._Text_o1crw_39,._Button_o1crw_1._Secondary_o1crw_86 ._Info_o1crw_82{color:var(--rm-ui-color-text-secondary)}._Button_o1crw_1._Tertiary_o1crw_35{border:1px solid var(--rm-ui-grey-300);background-color:transparent}._Button_o1crw_1._Tertiary_o1crw_35:hover{border-color:var(--rm-ui-grey-200)}._Button_o1crw_1._Tertiary_o1crw_35:hover ._Text_o1crw_39{color:var(--rm-ui-grey-700)}._Button_o1crw_1._Tertiary_o1crw_35 ._Text_o1crw_39,._Button_o1crw_1._Tertiary_o1crw_35 ._Info_o1crw_82{color:var(--rm-ui-color-text-primary)}._Button_o1crw_1:not(._Loading_o1crw_122):not(:disabled):hover{cursor:pointer}._Button_o1crw_1:focus{outline-color:var(--rm-ui-color-focus)}._Button_o1crw_1._FullWidth_o1crw_130,._Button_o1crw_1._FullWidthUntil768_o1crw_134,._Button_o1crw_1._FullWidthUntil1024_o1crw_135,._Button_o1crw_1._FullWidthUntil1200_o1crw_136{width:100%}@media(min-width:768px){._Button_o1crw_1._FullWidthUntil768_o1crw_134{width:auto}}@media(min-width:1024px){._Button_o1crw_1._FullWidthUntil1024_o1crw_135{width:auto}}@media(min-width:1200px){._Button_o1crw_1._FullWidthUntil1200_o1crw_136{width:auto}}._Button_o1crw_1._FullWidthFrom768_o1crw_158,._Button_o1crw_1._FullWidthFrom1024_o1crw_159,._Button_o1crw_1._FullWidthFrom1200_o1crw_160{width:auto}@media(min-width:768px){._Button_o1crw_1._FullWidthFrom768_o1crw_158{width:100%}}@media(min-width:1024px){._Button_o1crw_1._FullWidthFrom1024_o1crw_159{width:100%}}@media(min-width:1200px){._Button_o1crw_1._FullWidthFrom1200_o1crw_160{width:100%}}._Content_o1crw_182{display:flex;flex-direction:column}._Info_o1crw_82{flex-basis:100%;font-weight:var(--rm-ui-font-weight-regular)}._Info_o1crw_82._SM_o1crw_30{font-size:var(--rm-ui-font-size-body-small);line-height:1.2}._Info_o1crw_82._MD_o1crw_45{font-size:var(--rm-ui-font-size-body);line-height:1.2}._Info_o1crw_82._LG_o1crw_35{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Text_o1crw_39{font-weight:var(--rm-ui-font-weight-medium);transition:color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Loader_o1crw_213{position:absolute}

package/dist/assets/text-area-aZwGK7CT.css

@@ -0,0 +1 @@
+._TextArea_15g66_1{display:flex;flex-direction:column}._Input_15g66_6{resize:none;outline:none;box-sizing:border-box;width:100%;border:none;border-radius:10px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._Input_15g66_6:hover{cursor:pointer}._Input_15g66_6:disabled{opacity:.33}._ErrorMessage_15g66_28{padding-top:var(--rm-ui-padding-xxs)}._FieldGroup_15g66_32{display:flex;flex-direction:column;gap:var(--rm-ui-padding-xs);width:100%}

package/dist/components/accordion-table/accordion-table.component.js

@@ -1,14 +1,15 @@
-import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
 import { useState as H, Fragment as p } from "react";
 import { ChevronDown as B } from "lucide-react";
 import { clsx as s, baseProps as _ } from "../../utils/functions/functions.util.js";
 import { FadeGrow as g } from "../../animations/fade-grow/fade-grow.component.js";
 import { Rotate as C } from "../../animations/rotate/rotate.component.js";
+import "../text/text.component.js";
 import "../../utils/content/content.component.js";
 import "usehooks-ts";
 import "../../controls/primitives/box/box.component.js";
 import { ButtonText as w } from "../../controls/buttons/button-text/button-text.component.js";
-import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gmtv3_1", $ = "_Head_gmtv3_11", u = "_HeadRow_gmtv3_15", R = "_DataRow_gmtv3_16", f = "_BodyRow_gmtv3_21", N = "_HeadCell_gmtv3_25", A = "_BodyCell_gmtv3_26", T = "_BodyHeadCell_gmtv3_41", D = "_BodyHead_gmtv3_41", t = {
+import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gmtv3_1", $ = "_Head_gmtv3_11", u = "_HeadRow_gmtv3_15", R = "_DataRow_gmtv3_16", f = "_BodyRow_gmtv3_21", N = "_HeadCell_gmtv3_25", A = "_BodyCell_gmtv3_26", T = "_BodyHeadCell_gmtv3_41", D = "_BodyHead_gmtv3_41", a = {
   AccordionTable: b,
   Head: $,
   HeadRow: u,
@@ -18,26 +19,26 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
   BodyCell: A,
   BodyHeadCell: T,
   BodyHead: D
-}, E = ({ table: d, active: l = 0, ...r }) => {
+}, J = ({ table: d, active: l = 0, ...r }) => {
   const [m, h] = H(l >= 0 && l < d.body.length ? l : null);
   return /* @__PURE__ */ n(
     "div",
     {
       "data-testid": _(r, "data-testid", "accordion-table"),
-      className: s(t.AccordionTable, _(r, "className")),
+      className: s(a.AccordionTable, _(r, "className")),
       style: { "--accordion-columns": Math.max(d.head.length, 1) },
       children: [
-        /* @__PURE__ */ a("div", { "data-testid": "accordion-table-head", className: t.Head, children: /* @__PURE__ */ a("div", { className: t.HeadRow, children: d.head.map((e, o) => /* @__PURE__ */ a(
+        /* @__PURE__ */ t("div", { "data-testid": "accordion-table-head", className: a.Head, children: /* @__PURE__ */ t("div", { className: a.HeadRow, children: d.head.map((e, o) => /* @__PURE__ */ t(
           "div",
           {
-            className: t.HeadCell,
+            className: a.HeadCell,
             "data-testid": `accordion-table-head-cell-${o}`,
             dangerouslySetInnerHTML: { __html: e }
           },
           e
         )) }) }),
-        /* @__PURE__ */ a("div", { children: d.body.map((e, o) => /* @__PURE__ */ n(p, { children: [
-          /* @__PURE__ */ a("div", { className: t.BodyRow, children: /* @__PURE__ */ a("div", { className: s(t.BodyCell, t.BodyHead, t.BodyHeadCell), children: /* @__PURE__ */ a(
+        /* @__PURE__ */ t("div", { children: d.body.map((e, o) => /* @__PURE__ */ n(p, { children: [
+          /* @__PURE__ */ t("div", { className: a.BodyRow, children: /* @__PURE__ */ t("div", { className: s(a.BodyCell, a.BodyHead, a.BodyHeadCell), children: /* @__PURE__ */ t(
             w,
             {
               "data-testid": `accordion-table-button-${o}`,
@@ -48,25 +49,25 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
               weight: "regular",
               color: "theme-primary",
               iconPosition: "right",
-              icon: /* @__PURE__ */ a(
+              icon: /* @__PURE__ */ t(
                 C,
                 {
                   name: "rotate-icon",
                   condition: m === o,
                   from: "top",
                   to: "bottom",
-                  children: /* @__PURE__ */ a(B, { size: 24 })
+                  children: /* @__PURE__ */ t(B, { size: 24 })
                 }
               ),
               onClick: () => h((i) => o !== i ? o : null)
             }
           ) }) }),
-          /* @__PURE__ */ a(g, { name: `visible-section-${o}`, condition: m === o, children: /* @__PURE__ */ a("div", { "data-testid": `accordion-table-section-content-${o}`, children: e.rows.map((i, c) => /* @__PURE__ */ a(
+          /* @__PURE__ */ t(g, { name: `visible-section-${o}`, condition: m === o, children: /* @__PURE__ */ t("div", { "data-testid": `accordion-table-section-content-${o}`, children: e.rows.map((i, c) => /* @__PURE__ */ t(
             "div",
             {
-              className: t.DataRow,
+              className: a.DataRow,
               "data-testid": `accordion-table-data-row-${o}-${c}`,
-              children: i.map((v, y) => /* @__PURE__ */ a("div", { className: t.BodyCell, children: v }, `tr-${o}-${c}-${y}`))
+              children: i.map((v, y) => /* @__PURE__ */ t("div", { className: a.BodyCell, children: v }, `tr-${o}-${c}-${y}`))
             },
             `tr-${o}-${c}`
           )) }) })
@@ -76,5 +77,5 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
   );
 };
 export {
-  E as AccordionTable
+  J as AccordionTable
 };

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

@@ -2,6 +2,7 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { Pencil as d } from "lucide-react";
 import { clsx as p, baseProps as o } from "../../utils/functions/functions.util.js";
 import "react";
+import "../text/text.component.js";
 import "../../utils/content/content.component.js";
 import "usehooks-ts";
 import "../../controls/primitives/box/box.component.js";
@@ -10,7 +11,7 @@ import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", P
   UserPanel: _,
   Head: P,
   Info: u
-}, j = ({ title: n, button: r, data: l, onClick: s, ...a }) => /* @__PURE__ */ i(
+}, g = ({ title: n, button: r, data: l, onClick: s, ...a }) => /* @__PURE__ */ i(
   "div",
   {
     "data-testid": o(a, "data-testid", "user-panel"),
@@ -37,5 +38,5 @@ import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", P
   }
 );
 export {
-  j as UserPanel
+  g as UserPanel
 };

package/dist/controls/buttons/button/button.component.d.ts

@@ -15,8 +15,9 @@ export interface ButtonProps extends Base {
     loading?: boolean;
     preventDefault?: boolean;
     blurAfterClick?: boolean;
+    enterHint?: ReactNode;
     onClick?: () => void;
     onFocus?: () => void;
     onBlur?: () => void;
 }
-export declare const Button: ({ text, color, textSize, infoSize, type, disabled, info, fullWidth, fullWidthUntil, fullWidthFrom, loading, preventDefault, blurAfterClick, onClick, onFocus, onBlur, ...base }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ text, color, textSize, infoSize, type, disabled, info, fullWidth, fullWidthUntil, fullWidthFrom, loading, preventDefault, blurAfterClick, enterHint, onClick, onFocus, onBlur, ...base }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/controls/buttons/button/button.component.js

@@ -1,94 +1,109 @@
-import { jsxs as d, jsx as _ } from "react/jsx-runtime";
-import { useEffect as x } from "react";
-import { clsx as u, withControl as U, baseProps as m } from "../../../utils/functions/functions.util.js";
-import { FadeScale as b } from "../../../animations/fade-scale/fade-scale.component.js";
-import { Loader as w } from "../../../components/loader/loader.component.js";
-import { Content as v } from "../../../utils/content/content.component.js";
-import '../../../assets/button-BMjMeK04.css';const C = "_Button_14or2_1", T = "_SM_14or2_19", S = "_LG_14or2_24", k = "_Tertiary_14or2_24", N = "_Text_14or2_28", D = "_MD_14or2_34", G = "_Primary_14or2_62", P = "_Info_14or2_71", I = "_Secondary_14or2_75", g = "_Loading_14or2_111", $ = "_FullWidth_14or2_119", j = "_FullWidthUntil768_14or2_123", E = "_FullWidthUntil1024_14or2_124", q = "_FullWidthUntil1200_14or2_125", A = "_FullWidthFrom768_14or2_147", H = "_FullWidthFrom1024_14or2_148", J = "_FullWidthFrom1200_14or2_149", K = "_Content_14or2_171", O = "_Loader_14or2_202", t = {
-  Button: C,
-  SM: T,
-  LG: S,
-  Tertiary: k,
-  Text: N,
-  MD: D,
-  Primary: G,
-  Info: P,
-  Secondary: I,
-  Loading: g,
-  FullWidth: $,
-  FullWidthUntil768: j,
-  FullWidthUntil1024: E,
-  FullWidthUntil1200: q,
-  FullWidthFrom768: A,
-  FullWidthFrom1024: H,
-  FullWidthFrom1200: J,
-  Content: K,
-  Loader: O
-}, z = ({
-  text: F,
-  color: i = "primary",
-  textSize: l = "md",
-  infoSize: a = "sm",
-  type: h = "button",
-  disabled: y = !1,
-  info: p = "",
-  fullWidth: o = !1,
+import { jsxs as f, jsx as d } from "react/jsx-runtime";
+import { useEffect as L } from "react";
+import { clsx as v, withControl as g, baseProps as x } from "../../../utils/functions/functions.util.js";
+import { FadeScale as k } from "../../../animations/fade-scale/fade-scale.component.js";
+import { Loader as C } from "../../../components/loader/loader.component.js";
+import { Text as S } from "../../../components/text/text.component.js";
+import { Content as D } from "../../../utils/content/content.component.js";
+import '../../../assets/button-DBz6-Gkk.css';const H = "_Button_o1crw_1", P = "_WithHint_o1crw_14", G = "_EnterHint_o1crw_21", I = "_SM_o1crw_30", $ = "_LG_o1crw_35", j = "_Tertiary_o1crw_35", A = "_Text_o1crw_39", R = "_MD_o1crw_45", X = "_Primary_o1crw_73", q = "_Info_o1crw_82", J = "_Secondary_o1crw_86", K = "_Loading_o1crw_122", O = "_FullWidth_o1crw_130", Q = "_FullWidthUntil768_o1crw_134", V = "_FullWidthUntil1024_o1crw_135", Y = "_FullWidthUntil1200_o1crw_136", Z = "_FullWidthFrom768_o1crw_158", z = "_FullWidthFrom1024_o1crw_159", tt = "_FullWidthFrom1200_o1crw_160", ot = "_Content_o1crw_182", nt = "_Loader_o1crw_213", t = {
+  Button: H,
+  WithHint: P,
+  EnterHint: G,
+  SM: I,
+  LG: $,
+  Tertiary: j,
+  Text: A,
+  MD: R,
+  Primary: X,
+  Info: q,
+  Secondary: J,
+  Loading: K,
+  FullWidth: O,
+  FullWidthUntil768: Q,
+  FullWidthUntil1024: V,
+  FullWidthUntil1200: Y,
+  FullWidthFrom768: Z,
+  FullWidthFrom1024: z,
+  FullWidthFrom1200: tt,
+  Content: ot,
+  Loader: nt
+}, ut = ({
+  text: E,
+  color: c = "primary",
+  textSize: u = "md",
+  infoSize: _ = "sm",
+  type: b = "button",
+  disabled: m = !1,
+  info: B = "",
+  fullWidth: l = !1,
   fullWidthUntil: n,
-  fullWidthFrom: e,
-  loading: s = !1,
-  preventDefault: W = !1,
-  blurAfterClick: L = !1,
-  onClick: f = () => {
+  fullWidthFrom: r,
+  loading: i = !1,
+  preventDefault: T = !1,
+  blurAfterClick: M = !1,
+  enterHint: a,
+  onClick: h = () => {
   },
-  onFocus: B,
-  onBlur: M,
-  ...c
+  onFocus: U,
+  onBlur: N,
+  ...W
 }) => {
-  const r = n !== void 0 && e !== void 0;
-  return x(() => {
-    if (r) {
+  const o = n !== void 0 && r !== void 0, s = a != null && a !== !1 && a !== "", e = s ? !1 : l;
+  L(() => {
+    if (o) {
       console.warn(
         "[ui-kit] Button: `fullWidthUntil` and `fullWidthFrom` are mutually exclusive. Both are set — neither will be applied. Use only one."
       );
       return;
     }
-    n !== void 0 && !o && console.warn(
+    n !== void 0 && !l && console.warn(
       "[ui-kit] Button: `fullWidthUntil` is set but `fullWidth` is not true. `fullWidthUntil` has no effect without `fullWidth`."
-    ), e !== void 0 && !o && console.warn(
+    ), r !== void 0 && !l && console.warn(
       "[ui-kit] Button: `fullWidthFrom` is set but `fullWidth` is not true. `fullWidthFrom` has no effect without `fullWidth`."
+    ), s && l && console.warn(
+      "[ui-kit] Button: `enterHint` forces `fullWidth` to `false` so the hint can sit beside the button. Pass `fullWidth={false}` (or omit it) to silence this warning."
     );
-  }, [o, n, e, r]), /* @__PURE__ */ d(
+  }, [l, n, r, o, s]), L(() => {
+    if (!s) return;
+    const p = (F) => {
+      if (F.key !== "Enter" || m || i) return;
+      const w = F.target;
+      w && (w.tagName === "TEXTAREA" || w.isContentEditable) || (F.preventDefault(), h());
+    };
+    return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
+  }, [s, m, i, h]);
+  const y = /* @__PURE__ */ f(
     "button",
     {
-      "data-testid": m(c, "data-testid", "button"),
-      type: h,
-      disabled: y || s,
-      className: u(t.Button, m(c, "className"), {
-        [t.SM]: l === "sm",
-        [t.MD]: l === "md",
-        [t.LG]: l === "lg",
-        [t.Primary]: i === "primary",
-        [t.Secondary]: i === "secondary",
-        [t.Tertiary]: i === "tertiary",
-        [t.FullWidth]: o && n === void 0 && e === void 0,
-        [t.FullWidthUntil768]: o && !r && n === 768,
-        [t.FullWidthUntil1024]: o && !r && n === 1024,
-        [t.FullWidthUntil1200]: o && !r && n === 1200,
-        [t.FullWidthFrom768]: o && !r && e === 768,
-        [t.FullWidthFrom1024]: o && !r && e === 1024,
-        [t.FullWidthFrom1200]: o && !r && e === 1200,
-        [t.Loading]: s
+      "data-testid": x(W, "data-testid", "button"),
+      type: b,
+      disabled: m || i,
+      className: v(t.Button, x(W, "className"), {
+        [t.SM]: u === "sm",
+        [t.MD]: u === "md",
+        [t.LG]: u === "lg",
+        [t.Primary]: c === "primary",
+        [t.Secondary]: c === "secondary",
+        [t.Tertiary]: c === "tertiary",
+        [t.FullWidth]: e && n === void 0 && r === void 0,
+        [t.FullWidthUntil768]: e && !o && n === 768,
+        [t.FullWidthUntil1024]: e && !o && n === 1024,
+        [t.FullWidthUntil1200]: e && !o && n === 1200,
+        [t.FullWidthFrom768]: e && !o && r === 768,
+        [t.FullWidthFrom1024]: e && !o && r === 1024,
+        [t.FullWidthFrom1200]: e && !o && r === 1200,
+        [t.Loading]: i
       }),
-      onClick: U(f, { prevent: W, blur: L }),
-      onFocus: () => B?.(),
-      onBlur: () => M?.(),
+      onClick: g(h, { prevent: T, blur: M }),
+      onFocus: () => U?.(),
+      onBlur: () => N?.(),
       children: [
-        s && /* @__PURE__ */ _(
-          w,
+        i && /* @__PURE__ */ d(
+          C,
           {
             size: "xs",
             color: (() => {
-              switch (i) {
+              switch (c) {
                 case "primary":
                   return "white";
                 case "secondary":
@@ -100,24 +115,28 @@ import '../../../assets/button-BMjMeK04.css';const C = "_Button_14or2_1", T = "_
             className: t.Loader
           }
         ),
-        /* @__PURE__ */ d(b, { name: "content", keepMount: !0, condition: !s, className: t.Content, children: [
-          /* @__PURE__ */ _("span", { className: t.Text, children: F }),
-          /* @__PURE__ */ _(
-            v,
+        /* @__PURE__ */ f(k, { name: "content", keepMount: !0, condition: !i, className: t.Content, children: [
+          /* @__PURE__ */ d("span", { className: t.Text, children: E }),
+          /* @__PURE__ */ d(
+            D,
             {
-              className: u(t.Info, {
-                [t.SM]: a === "sm",
-                [t.MD]: a === "md",
-                [t.LG]: a === "lg"
+              className: v(t.Info, {
+                [t.SM]: _ === "sm",
+                [t.MD]: _ === "md",
+                [t.LG]: _ === "lg"
               }),
-              children: p
+              children: B
             }
           )
         ] })
       ]
     }
   );
+  return s ? /* @__PURE__ */ f("div", { className: t.WithHint, children: [
+    y,
+    /* @__PURE__ */ d(S, { tag: "span", size: "body-small", color: "text-secondary", className: t.EnterHint, children: a })
+  ] }) : y;
 };
 export {
-  z as Button
+  ut as Button
 };

package/dist/controls/interactives/text-area/text-area.component.d.ts

@@ -1,8 +1,10 @@
 import { Interactive } from '../../utils';
 import { Base } from '../../../utils/types';
+export type TextAreaPlaceholderPosition = 'inside' | 'outside';
 export interface TextAreaProps extends Base, Interactive<string> {
     placeholder?: string;
+    placeholderPosition?: TextAreaPlaceholderPosition;
     rows?: number;
     message?: string;
 }
-export declare const TextArea: ({ id, value, disabled, state, onChange, onFocus, onBlur, placeholder, rows, message, ...base }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TextArea: ({ id, value, disabled, state, onChange, onFocus, onBlur, placeholder, placeholderPosition, rows, message, ...base }: TextAreaProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,64 +1,70 @@
-import { jsxs as M, jsx as r } from "react/jsx-runtime";
-import { baseProps as t, clsx as N } from "../../../utils/functions/functions.util.js";
-import { FadeSlide as _ } from "../../../animations/fade-slide/fade-slide.component.js";
-import { Box as I } from "../../primitives/box/box.component.js";
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import { baseProps as s, clsx as B } from "../../../utils/functions/functions.util.js";
+import { FadeSlide as C } from "../../../animations/fade-slide/fade-slide.component.js";
+import { Box as G } from "../../primitives/box/box.component.js";
 import "../../../utils/content/content.component.js";
 import "lucide-react";
-import { ErrorMessage as C } from "../../primitives/error-message/error-message.component.js";
+import { ErrorMessage as y } from "../../primitives/error-message/error-message.component.js";
 import "usehooks-ts";
-import { useControlInteraction as k } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
-import '../../../assets/text-area-Dgc2jHSx.css';const B = "_Input_11gck_6", F = "_ErrorMessage_11gck_28", a = {
-  Input: B,
-  ErrorMessage: F
-}, w = ({
+import { Text as b } from "../../../components/text/text.component.js";
+import { useControlInteraction as j } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
+import '../../../assets/text-area-aZwGK7CT.css';const O = "_Input_15g66_6", T = "_ErrorMessage_15g66_28", $ = "_FieldGroup_15g66_32", t = {
+  Input: O,
+  ErrorMessage: T,
+  FieldGroup: $
+}, J = ({
   // Interactive props
-  id: o,
-  value: c,
-  disabled: s = !1,
+  id: a,
+  value: u,
+  disabled: i = !1,
   state: n = "idle",
-  onChange: i,
-  onFocus: l,
-  onBlur: d,
+  onChange: g,
+  onFocus: x,
+  onBlur: f,
   // TextArea props
-  placeholder: p = "",
-  rows: u = 5,
-  message: m = "",
+  placeholder: r = "",
+  placeholderPosition: h = "inside",
+  rows: _ = 5,
+  message: d = "",
   // Base props
-  ...e
+  ...o
 }) => {
-  const { focused: g, emitChange: x, handleFocus: f, handleBlur: h } = k({
-    id: o,
-    disabled: s,
-    onChange: i,
-    onFocus: l,
-    onBlur: d
-  });
-  return /* @__PURE__ */ M(
+  const { focused: F, emitChange: N, handleFocus: E, handleBlur: I } = j({
+    id: a,
+    disabled: i,
+    onChange: g,
+    onFocus: x,
+    onBlur: f
+  }), m = s(o, "data-testid", "textarea"), c = h === "outside", M = c && !!r, l = /* @__PURE__ */ e(G, { state: n, focused: F, className: s(o, "className"), children: /* @__PURE__ */ e(
+    "textarea",
+    {
+      "data-testid": "textarea-input",
+      disabled: i,
+      id: a,
+      rows: _,
+      placeholder: c ? "" : r,
+      value: u,
+      className: t.Input,
+      onChange: (v) => N(v.target.value, "keyboard"),
+      onFocus: () => E(),
+      onBlur: () => I()
+    }
+  ) });
+  return /* @__PURE__ */ p(
     "div",
     {
-      "data-testid": t(e, "data-testid", "textarea"),
-      className: N(a.Container, t(e, "className")),
+      "data-testid": m,
+      className: B(t.Container, s(o, "className")),
       children: [
-        /* @__PURE__ */ r(I, { state: n, focused: g, className: t(e, "className"), children: /* @__PURE__ */ r(
-          "textarea",
-          {
-            "data-testid": "textarea-input",
-            disabled: s,
-            id: o,
-            rows: u,
-            placeholder: p,
-            value: c,
-            className: a.Input,
-            onChange: (E) => x(E.target.value, "keyboard"),
-            onFocus: () => f(),
-            onBlur: () => h()
-          }
-        ) }),
-        /* @__PURE__ */ r(_, { name: "text-message", condition: n === "error" && !!m, children: /* @__PURE__ */ r(C, { "data-testid": "textarea-error-message", text: m, className: a.ErrorMessage }) })
+        M ? /* @__PURE__ */ p("div", { className: t.FieldGroup, children: [
+          /* @__PURE__ */ e(b, { tag: "div", weight: "medium", size: "body", color: "text-primary", "data-testid": `${m}-label`, children: r }),
+          l
+        ] }) : l,
+        /* @__PURE__ */ e(C, { name: "text-message", condition: n === "error" && !!d, children: /* @__PURE__ */ e(y, { "data-testid": "textarea-error-message", text: d, className: t.ErrorMessage }) })
       ]
     }
   );
 };
 export {
-  w as TextArea
+  J as TextArea
 };

package/package.json

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

package/dist/assets/button-BMjMeK04.css

@@ -1 +0,0 @@
-._Button_14or2_1{position:relative;box-sizing:border-box;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:border-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary),background-color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Button_14or2_1:disabled{cursor:not-allowed;opacity:.33}._Button_14or2_1._SM_14or2_19{border-radius:var(--rm-ui-border-radius-sm);padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm)}._Button_14or2_1._LG_14or2_24._Tertiary_14or2_24{padding:calc(var(--rm-ui-padding-xs) - 1px) calc(var(--rm-ui-padding-sm) - 1px)}._Button_14or2_1._SM_14or2_19 ._Text_14or2_28{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)}._Button_14or2_1._MD_14or2_34{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_14or2_1._MD_14or2_34._Tertiary_14or2_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_14or2_1._LG_14or2_24{border-radius:var(--rm-ui-border-radius-md);padding:var(--rm-ui-padding-sm) var(--rm-ui-padding-lg)}._Button_14or2_1._LG_14or2_24._Tertiary_14or2_24{padding:calc(var(--rm-ui-padding-sm) - 1px) calc(var(--rm-ui-padding-lg) - 1px)}._Button_14or2_1._MD_14or2_34 ._Text_14or2_28{font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body)}._Button_14or2_1._LG_14or2_24 ._Text_14or2_28{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Button_14or2_1._Primary_14or2_62{background-color:var(--rm-ui-next-btn-bg)}._Button_14or2_1._Primary_14or2_62:hover{background-color:var(--rm-ui-next-btn-bg-hover)}._Button_14or2_1._Primary_14or2_62 ._Text_14or2_28,._Button_14or2_1._Primary_14or2_62 ._Info_14or2_71{color:#fff}._Button_14or2_1._Secondary_14or2_75{border:1px solid transparent;background-color:transparent}._Button_14or2_1._Secondary_14or2_75:hover{border-color:var(--rm-ui-grey-400)}._Button_14or2_1._Secondary_14or2_75:hover ._Text_14or2_28{color:var(--rm-ui-grey-400);border-color:var(--rm-ui-grey-400)}._Button_14or2_1._Secondary_14or2_75 ._Text_14or2_28,._Button_14or2_1._Secondary_14or2_75 ._Info_14or2_71{color:var(--rm-ui-color-text-secondary)}._Button_14or2_1._Tertiary_14or2_24{border:1px solid var(--rm-ui-grey-300);background-color:transparent}._Button_14or2_1._Tertiary_14or2_24:hover{border-color:var(--rm-ui-grey-200)}._Button_14or2_1._Tertiary_14or2_24:hover ._Text_14or2_28{color:var(--rm-ui-grey-700)}._Button_14or2_1._Tertiary_14or2_24 ._Text_14or2_28,._Button_14or2_1._Tertiary_14or2_24 ._Info_14or2_71{color:var(--rm-ui-color-text-primary)}._Button_14or2_1:not(._Loading_14or2_111):not(:disabled):hover{cursor:pointer}._Button_14or2_1:focus{outline-color:var(--rm-ui-color-focus)}._Button_14or2_1._FullWidth_14or2_119,._Button_14or2_1._FullWidthUntil768_14or2_123,._Button_14or2_1._FullWidthUntil1024_14or2_124,._Button_14or2_1._FullWidthUntil1200_14or2_125{width:100%}@media(min-width:768px){._Button_14or2_1._FullWidthUntil768_14or2_123{width:auto}}@media(min-width:1024px){._Button_14or2_1._FullWidthUntil1024_14or2_124{width:auto}}@media(min-width:1200px){._Button_14or2_1._FullWidthUntil1200_14or2_125{width:auto}}._Button_14or2_1._FullWidthFrom768_14or2_147,._Button_14or2_1._FullWidthFrom1024_14or2_148,._Button_14or2_1._FullWidthFrom1200_14or2_149{width:auto}@media(min-width:768px){._Button_14or2_1._FullWidthFrom768_14or2_147{width:100%}}@media(min-width:1024px){._Button_14or2_1._FullWidthFrom1024_14or2_148{width:100%}}@media(min-width:1200px){._Button_14or2_1._FullWidthFrom1200_14or2_149{width:100%}}._Content_14or2_171{display:flex;flex-direction:column}._Info_14or2_71{flex-basis:100%;font-weight:var(--rm-ui-font-weight-regular)}._Info_14or2_71._SM_14or2_19{font-size:var(--rm-ui-font-size-body-small);line-height:1.2}._Info_14or2_71._MD_14or2_34{font-size:var(--rm-ui-font-size-body);line-height:1.2}._Info_14or2_71._LG_14or2_24{font-size:var(--rm-ui-font-size-body-large);line-height:1.2}._Text_14or2_28{font-weight:var(--rm-ui-font-weight-medium);transition:color var(--rm-ui-amimation-speed-primary) var(--rm-ui-amimation-cubic-primary)}._Loader_14or2_202{position:absolute}

package/dist/assets/text-area-Dgc2jHSx.css

@@ -1 +0,0 @@
-._TextArea_11gck_1{display:flex;flex-direction:column}._Input_11gck_6{resize:none;outline:none;box-sizing:border-box;width:100%;border:none;border-radius:10px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);font-weight:var(--rm-ui-font-weight-medium);font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-text-primary)}._Input_11gck_6:hover{cursor:pointer}._Input_11gck_6:disabled{opacity:.33}._ErrorMessage_11gck_28{padding-top:var(--rm-ui-padding-xxs)}