@arthurzakharov/ui-kit 3.16.0 → 3.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/assets/button-DBz6-Gkk.css +1 -0
  2. package/dist/assets/radio-BAqOCwHC.css +1 -0
  3. package/dist/components/accordion-table/accordion-table.component.js +15 -14
  4. package/dist/components/user-panel/user-panel.component.js +3 -2
  5. package/dist/controls/buttons/button/button.component.d.ts +2 -1
  6. package/dist/controls/buttons/button/button.component.js +102 -83
  7. package/dist/controls/interactives/radio/radio.component.js +50 -50
  8. package/package.json +1 -1
  9. package/dist/assets/button-BMjMeK04.css +0 -1
  10. package/dist/assets/radio-D4fKo4f0.css +0 -1
package/dist/assets/button-DBz6-Gkk.css ADDED
@@ -0,0 +1 @@
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/radio-BAqOCwHC.css ADDED
@@ -0,0 +1 @@
1
+ ._Radio_qna8q_1{display:inline-flex;flex-direction:column}._WithLabel_qna8q_6{display:flex;width:100%;gap:var(--rm-ui-padding-xs)}._Content_qna8q_12{display:inline-flex}._Horizontal_qna8q_16{flex-direction:row;gap:var(--rm-ui-padding-lg)}._Vertical_qna8q_21{flex-direction:column;gap:var(--rm-ui-padding-xxs)}._Label_qna8q_26{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Label_qna8q_26:hover{cursor:pointer}._ErrorMessage_qna8q_39{padding-top:var(--rm-ui-padding-xxs)}
package/dist/components/accordion-table/accordion-table.component.js CHANGED
@@ -1,14 +1,15 @@
1
- import { jsxs as n, jsx as a } from "react/jsx-runtime";
1
+ import { jsxs as n, jsx as t } from "react/jsx-runtime";
2
2
  import { useState as H, Fragment as p } from "react";
3
3
  import { ChevronDown as B } from "lucide-react";
4
4
  import { clsx as s, baseProps as _ } from "../../utils/functions/functions.util.js";
5
5
  import { FadeGrow as g } from "../../animations/fade-grow/fade-grow.component.js";
6
6
  import { Rotate as C } from "../../animations/rotate/rotate.component.js";
7
+ import "../text/text.component.js";
7
8
  import "../../utils/content/content.component.js";
8
9
  import "usehooks-ts";
9
10
  import "../../controls/primitives/box/box.component.js";
10
11
  import { ButtonText as w } from "../../controls/buttons/button-text/button-text.component.js";
11
- 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 = {
12
+ 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 = {
12
13
  AccordionTable: b,
13
14
  Head: $,
14
15
  HeadRow: u,
@@ -18,26 +19,26 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
18
19
  BodyCell: A,
19
20
  BodyHeadCell: T,
20
21
  BodyHead: D
21
- }, E = ({ table: d, active: l = 0, ...r }) => {
22
+ }, J = ({ table: d, active: l = 0, ...r }) => {
22
23
  const [m, h] = H(l >= 0 && l < d.body.length ? l : null);
23
24
  return /* @__PURE__ */ n(
24
25
  "div",
25
26
  {
26
27
  "data-testid": _(r, "data-testid", "accordion-table"),
27
- className: s(t.AccordionTable, _(r, "className")),
28
+ className: s(a.AccordionTable, _(r, "className")),
28
29
  style: { "--accordion-columns": Math.max(d.head.length, 1) },
29
30
  children: [
30
- /* @__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(
31
+ /* @__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(
31
32
  "div",
32
33
  {
33
- className: t.HeadCell,
34
+ className: a.HeadCell,
34
35
  "data-testid": `accordion-table-head-cell-${o}`,
35
36
  dangerouslySetInnerHTML: { __html: e }
36
37
  },
37
38
  e
38
39
  )) }) }),
39
- /* @__PURE__ */ a("div", { children: d.body.map((e, o) => /* @__PURE__ */ n(p, { children: [
40
- /* @__PURE__ */ a("div", { className: t.BodyRow, children: /* @__PURE__ */ a("div", { className: s(t.BodyCell, t.BodyHead, t.BodyHeadCell), children: /* @__PURE__ */ a(
40
+ /* @__PURE__ */ t("div", { children: d.body.map((e, o) => /* @__PURE__ */ n(p, { children: [
41
+ /* @__PURE__ */ t("div", { className: a.BodyRow, children: /* @__PURE__ */ t("div", { className: s(a.BodyCell, a.BodyHead, a.BodyHeadCell), children: /* @__PURE__ */ t(
41
42
  w,
42
43
  {
43
44
  "data-testid": `accordion-table-button-${o}`,
@@ -48,25 +49,25 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
48
49
  weight: "regular",
49
50
  color: "theme-primary",
50
51
  iconPosition: "right",
51
- icon: /* @__PURE__ */ a(
52
+ icon: /* @__PURE__ */ t(
52
53
  C,
53
54
  {
54
55
  name: "rotate-icon",
55
56
  condition: m === o,
56
57
  from: "top",
57
58
  to: "bottom",
58
- children: /* @__PURE__ */ a(B, { size: 24 })
59
+ children: /* @__PURE__ */ t(B, { size: 24 })
59
60
  }
60
61
  ),
61
62
  onClick: () => h((i) => o !== i ? o : null)
62
63
  }
63
64
  ) }) }),
64
- /* @__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(
65
+ /* @__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(
65
66
  "div",
66
67
  {
67
- className: t.DataRow,
68
+ className: a.DataRow,
68
69
  "data-testid": `accordion-table-data-row-${o}-${c}`,
69
- children: i.map((v, y) => /* @__PURE__ */ a("div", { className: t.BodyCell, children: v }, `tr-${o}-${c}-${y}`))
70
+ children: i.map((v, y) => /* @__PURE__ */ t("div", { className: a.BodyCell, children: v }, `tr-${o}-${c}-${y}`))
70
71
  },
71
72
  `tr-${o}-${c}`
72
73
  )) }) })
@@ -76,5 +77,5 @@ import '../../assets/accordion-table-Ci3u6qTN.css';const b = "_AccordionTable_gm
76
77
  );
77
78
  };
78
79
  export {
79
- E as AccordionTable
80
+ J as AccordionTable
80
81
  };
package/dist/components/user-panel/user-panel.component.js CHANGED
@@ -2,6 +2,7 @@ import { jsxs as i, jsx as e } from "react/jsx-runtime";
2
2
  import { Pencil as d } from "lucide-react";
3
3
  import { clsx as p, baseProps as o } from "../../utils/functions/functions.util.js";
4
4
  import "react";
5
+ import "../text/text.component.js";
5
6
  import "../../utils/content/content.component.js";
6
7
  import "usehooks-ts";
7
8
  import "../../controls/primitives/box/box.component.js";
@@ -10,7 +11,7 @@ import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", P
10
11
  UserPanel: _,
11
12
  Head: P,
12
13
  Info: u
13
- }, j = ({ title: n, button: r, data: l, onClick: s, ...a }) => /* @__PURE__ */ i(
14
+ }, g = ({ title: n, button: r, data: l, onClick: s, ...a }) => /* @__PURE__ */ i(
14
15
  "div",
15
16
  {
16
17
  "data-testid": o(a, "data-testid", "user-panel"),
@@ -37,5 +38,5 @@ import '../../assets/user-panel-SauszbHl.css';const _ = "_UserPanel_zes0v_1", P
37
38
  }
38
39
  );
39
40
  export {
40
- j as UserPanel
41
+ g as UserPanel
41
42
  };
package/dist/controls/buttons/button/button.component.d.ts CHANGED
@@ -15,8 +15,9 @@ export interface ButtonProps extends Base {
15
15
  loading?: boolean;
16
16
  preventDefault?: boolean;
17
17
  blurAfterClick?: boolean;
18
+ enterHint?: ReactNode;
18
19
  onClick?: () => void;
19
20
  onFocus?: () => void;
20
21
  onBlur?: () => void;
21
22
  }
22
- 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;
23
+ 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 CHANGED
@@ -1,94 +1,109 @@
1
- import { jsxs as d, jsx as _ } from "react/jsx-runtime";
2
- import { useEffect as x } from "react";
3
- import { clsx as u, withControl as U, baseProps as m } from "../../../utils/functions/functions.util.js";
4
- import { FadeScale as b } from "../../../animations/fade-scale/fade-scale.component.js";
5
- import { Loader as w } from "../../../components/loader/loader.component.js";
6
- import { Content as v } from "../../../utils/content/content.component.js";
7
- 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 = {
8
- Button: C,
9
- SM: T,
10
- LG: S,
11
- Tertiary: k,
12
- Text: N,
13
- MD: D,
14
- Primary: G,
15
- Info: P,
16
- Secondary: I,
17
- Loading: g,
18
- FullWidth: $,
19
- FullWidthUntil768: j,
20
- FullWidthUntil1024: E,
21
- FullWidthUntil1200: q,
22
- FullWidthFrom768: A,
23
- FullWidthFrom1024: H,
24
- FullWidthFrom1200: J,
25
- Content: K,
26
- Loader: O
27
- }, z = ({
28
- text: F,
29
- color: i = "primary",
30
- textSize: l = "md",
31
- infoSize: a = "sm",
32
- type: h = "button",
33
- disabled: y = !1,
34
- info: p = "",
35
- fullWidth: o = !1,
1
+ import { jsxs as f, jsx as d } from "react/jsx-runtime";
2
+ import { useEffect as L } from "react";
3
+ import { clsx as v, withControl as g, baseProps as x } from "../../../utils/functions/functions.util.js";
4
+ import { FadeScale as k } from "../../../animations/fade-scale/fade-scale.component.js";
5
+ import { Loader as C } from "../../../components/loader/loader.component.js";
6
+ import { Text as S } from "../../../components/text/text.component.js";
7
+ import { Content as D } from "../../../utils/content/content.component.js";
8
+ 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 = {
9
+ Button: H,
10
+ WithHint: P,
11
+ EnterHint: G,
12
+ SM: I,
13
+ LG: $,
14
+ Tertiary: j,
15
+ Text: A,
16
+ MD: R,
17
+ Primary: X,
18
+ Info: q,
19
+ Secondary: J,
20
+ Loading: K,
21
+ FullWidth: O,
22
+ FullWidthUntil768: Q,
23
+ FullWidthUntil1024: V,
24
+ FullWidthUntil1200: Y,
25
+ FullWidthFrom768: Z,
26
+ FullWidthFrom1024: z,
27
+ FullWidthFrom1200: tt,
28
+ Content: ot,
29
+ Loader: nt
30
+ }, ut = ({
31
+ text: E,
32
+ color: c = "primary",
33
+ textSize: u = "md",
34
+ infoSize: _ = "sm",
35
+ type: b = "button",
36
+ disabled: m = !1,
37
+ info: B = "",
38
+ fullWidth: l = !1,
36
39
  fullWidthUntil: n,
37
- fullWidthFrom: e,
38
- loading: s = !1,
39
- preventDefault: W = !1,
40
- blurAfterClick: L = !1,
41
- onClick: f = () => {
40
+ fullWidthFrom: r,
41
+ loading: i = !1,
42
+ preventDefault: T = !1,
43
+ blurAfterClick: M = !1,
44
+ enterHint: a,
45
+ onClick: h = () => {
42
46
  },
43
- onFocus: B,
44
- onBlur: M,
45
- ...c
47
+ onFocus: U,
48
+ onBlur: N,
49
+ ...W
46
50
  }) => {
47
- const r = n !== void 0 && e !== void 0;
48
- return x(() => {
49
- if (r) {
51
+ const o = n !== void 0 && r !== void 0, s = a != null && a !== !1 && a !== "", e = s ? !1 : l;
52
+ L(() => {
53
+ if (o) {
50
54
  console.warn(
51
55
  "[ui-kit] Button: `fullWidthUntil` and `fullWidthFrom` are mutually exclusive. Both are set — neither will be applied. Use only one."
52
56
  );
53
57
  return;
54
58
  }
55
- n !== void 0 && !o && console.warn(
59
+ n !== void 0 && !l && console.warn(
56
60
  "[ui-kit] Button: `fullWidthUntil` is set but `fullWidth` is not true. `fullWidthUntil` has no effect without `fullWidth`."
57
- ), e !== void 0 && !o && console.warn(
61
+ ), r !== void 0 && !l && console.warn(
58
62
  "[ui-kit] Button: `fullWidthFrom` is set but `fullWidth` is not true. `fullWidthFrom` has no effect without `fullWidth`."
63
+ ), s && l && console.warn(
64
+ "[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."
59
65
  );
60
- }, [o, n, e, r]), /* @__PURE__ */ d(
66
+ }, [l, n, r, o, s]), L(() => {
67
+ if (!s) return;
68
+ const p = (F) => {
69
+ if (F.key !== "Enter" || m || i) return;
70
+ const w = F.target;
71
+ w && (w.tagName === "TEXTAREA" || w.isContentEditable) || (F.preventDefault(), h());
72
+ };
73
+ return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
74
+ }, [s, m, i, h]);
75
+ const y = /* @__PURE__ */ f(
61
76
  "button",
62
77
  {
63
- "data-testid": m(c, "data-testid", "button"),
64
- type: h,
65
- disabled: y || s,
66
- className: u(t.Button, m(c, "className"), {
67
- [t.SM]: l === "sm",
68
- [t.MD]: l === "md",
69
- [t.LG]: l === "lg",
70
- [t.Primary]: i === "primary",
71
- [t.Secondary]: i === "secondary",
72
- [t.Tertiary]: i === "tertiary",
73
- [t.FullWidth]: o && n === void 0 && e === void 0,
74
- [t.FullWidthUntil768]: o && !r && n === 768,
75
- [t.FullWidthUntil1024]: o && !r && n === 1024,
76
- [t.FullWidthUntil1200]: o && !r && n === 1200,
77
- [t.FullWidthFrom768]: o && !r && e === 768,
78
- [t.FullWidthFrom1024]: o && !r && e === 1024,
79
- [t.FullWidthFrom1200]: o && !r && e === 1200,
80
- [t.Loading]: s
78
+ "data-testid": x(W, "data-testid", "button"),
79
+ type: b,
80
+ disabled: m || i,
81
+ className: v(t.Button, x(W, "className"), {
82
+ [t.SM]: u === "sm",
83
+ [t.MD]: u === "md",
84
+ [t.LG]: u === "lg",
85
+ [t.Primary]: c === "primary",
86
+ [t.Secondary]: c === "secondary",
87
+ [t.Tertiary]: c === "tertiary",
88
+ [t.FullWidth]: e && n === void 0 && r === void 0,
89
+ [t.FullWidthUntil768]: e && !o && n === 768,
90
+ [t.FullWidthUntil1024]: e && !o && n === 1024,
91
+ [t.FullWidthUntil1200]: e && !o && n === 1200,
92
+ [t.FullWidthFrom768]: e && !o && r === 768,
93
+ [t.FullWidthFrom1024]: e && !o && r === 1024,
94
+ [t.FullWidthFrom1200]: e && !o && r === 1200,
95
+ [t.Loading]: i
81
96
  }),
82
- onClick: U(f, { prevent: W, blur: L }),
83
- onFocus: () => B?.(),
84
- onBlur: () => M?.(),
97
+ onClick: g(h, { prevent: T, blur: M }),
98
+ onFocus: () => U?.(),
99
+ onBlur: () => N?.(),
85
100
  children: [
86
- s && /* @__PURE__ */ _(
87
- w,
101
+ i && /* @__PURE__ */ d(
102
+ C,
88
103
  {
89
104
  size: "xs",
90
105
  color: (() => {
91
- switch (i) {
106
+ switch (c) {
92
107
  case "primary":
93
108
  return "white";
94
109
  case "secondary":
@@ -100,24 +115,28 @@ import '../../../assets/button-BMjMeK04.css';const C = "_Button_14or2_1", T = "_
100
115
  className: t.Loader
101
116
  }
102
117
  ),
103
- /* @__PURE__ */ d(b, { name: "content", keepMount: !0, condition: !s, className: t.Content, children: [
104
- /* @__PURE__ */ _("span", { className: t.Text, children: F }),
105
- /* @__PURE__ */ _(
106
- v,
118
+ /* @__PURE__ */ f(k, { name: "content", keepMount: !0, condition: !i, className: t.Content, children: [
119
+ /* @__PURE__ */ d("span", { className: t.Text, children: E }),
120
+ /* @__PURE__ */ d(
121
+ D,
107
122
  {
108
- className: u(t.Info, {
109
- [t.SM]: a === "sm",
110
- [t.MD]: a === "md",
111
- [t.LG]: a === "lg"
123
+ className: v(t.Info, {
124
+ [t.SM]: _ === "sm",
125
+ [t.MD]: _ === "md",
126
+ [t.LG]: _ === "lg"
112
127
  }),
113
- children: p
128
+ children: B
114
129
  }
115
130
  )
116
131
  ] })
117
132
  ]
118
133
  }
119
134
  );
135
+ return s ? /* @__PURE__ */ f("div", { className: t.WithHint, children: [
136
+ y,
137
+ /* @__PURE__ */ d(S, { tag: "span", size: "body-small", color: "text-secondary", className: t.EnterHint, children: a })
138
+ ] }) : y;
120
139
  };
121
140
  export {
122
- z as Button
141
+ ut as Button
123
142
  };
package/dist/controls/interactives/radio/radio.component.js CHANGED
@@ -1,18 +1,18 @@
1
- import { jsxs as u, jsx as r } from "react/jsx-runtime";
2
- import { baseProps as g, clsx as f } from "../../../utils/functions/functions.util.js";
3
- import { FadeSlide as $ } from "../../../animations/fade-slide/fade-slide.component.js";
1
+ import { jsxs as u, jsx as o } from "react/jsx-runtime";
2
+ import { baseProps as f, clsx as h } from "../../../utils/functions/functions.util.js";
3
+ import { FadeSlide as W } from "../../../animations/fade-slide/fade-slide.component.js";
4
4
  import "../../primitives/box/box.component.js";
5
- import { Caption as F } from "../../primitives/caption/caption.component.js";
6
- import { Choice as j } from "../../primitives/choice/choice.component.js";
7
- import { ErrorMessage as B } from "../../primitives/error-message/error-message.component.js";
8
- import { HiddenInput as w } from "../../primitives/hidden-input/hidden-input.component.js";
5
+ import { Caption as $ } from "../../primitives/caption/caption.component.js";
6
+ import { Choice as F } from "../../primitives/choice/choice.component.js";
7
+ import { ErrorMessage as j } from "../../primitives/error-message/error-message.component.js";
8
+ import { HiddenInput as B } from "../../primitives/hidden-input/hidden-input.component.js";
9
9
  import "../../../utils/content/content.component.js";
10
- import { RadioLabel as P } from "../../primitives/radio-label/radio-label.component.js";
10
+ import { RadioLabel as w } from "../../primitives/radio-label/radio-label.component.js";
11
11
  import "lucide-react";
12
- import { Text as S } from "../../../components/text/text.component.js";
13
- import { getChoiceId as T } from "../../utils/functions/functions.util.js";
14
- import { useControlInteraction as q } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
15
- import '../../../assets/radio-D4fKo4f0.css';const A = "_Radio_1trgm_1", D = "_WithLabel_1trgm_6", G = "_Content_1trgm_12", J = "_Horizontal_1trgm_16", K = "_Vertical_1trgm_21", O = "_Label_1trgm_26", Q = "_ErrorMessage_1trgm_39", o = {
12
+ import { Text as P } from "../../../components/text/text.component.js";
13
+ import { getChoiceId as S } from "../../utils/functions/functions.util.js";
14
+ import { useControlInteraction as T } from "../../utils/hooks/use-control-interaction/use-control-interaction.hook.js";
15
+ import '../../../assets/radio-BAqOCwHC.css';const A = "_Radio_qna8q_1", D = "_WithLabel_qna8q_6", G = "_Content_qna8q_12", J = "_Horizontal_qna8q_16", K = "_Vertical_qna8q_21", O = "_Label_qna8q_26", Q = "_ErrorMessage_qna8q_39", r = {
16
16
  Radio: A,
17
17
  WithLabel: D,
18
18
  Content: G,
@@ -20,76 +20,76 @@ import '../../../assets/radio-D4fKo4f0.css';const A = "_Radio_1trgm_1", D = "_Wi
20
20
  Vertical: K,
21
21
  Label: O,
22
22
  ErrorMessage: Q
23
- }, U = (t, a) => t == null || t === !1 || t === "" ? null : typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ r(S, { tag: "div", weight: "medium", size: "body", color: "text-primary", "data-testid": `${a}-label`, children: t }) : /* @__PURE__ */ r("div", { "data-testid": `${a}-label`, children: t }), ct = ({
23
+ }, U = (t, i) => t == null || t === !1 || t === "" ? null : typeof t == "string" || typeof t == "number" ? /* @__PURE__ */ o(P, { tag: "div", weight: "medium", size: "body", color: "text-primary", "data-testid": `${i}-label`, children: t }) : /* @__PURE__ */ o("div", { "data-testid": `${i}-label`, children: t }), ct = ({
24
24
  // Interactive props
25
25
  id: t,
26
- value: a = "",
26
+ value: i = "",
27
27
  disabled: n = !1,
28
- state: d = "idle",
29
- onChange: h,
30
- onFocus: v,
31
- onBlur: L,
28
+ state: m = "idle",
29
+ onChange: q,
30
+ onFocus: g,
31
+ onBlur: v,
32
32
  // Radio props
33
- choices: C,
33
+ choices: L,
34
34
  orientation: l = "horizontal",
35
- iconSize: z = "md",
36
- textSize: x = "body",
35
+ iconSize: C = "md",
36
+ textSize: z = "body",
37
37
  message: c = "",
38
38
  label: e,
39
39
  // Base props
40
40
  ...p
41
41
  }) => {
42
- const { emitChange: y, handleFocus: E, handleBlur: M } = q({
42
+ const { emitChange: x, handleFocus: y, handleBlur: E } = T({
43
43
  id: t,
44
44
  disabled: n,
45
- onChange: h,
46
- onFocus: v,
47
- onBlur: L
48
- }), _ = g(p, "data-testid", "radio"), R = e != null && e !== !1 && e !== "";
49
- return /* @__PURE__ */ u("div", { "data-testid": _, className: f(o.Radio, { [o.WithLabel]: R }, g(p, "className")), children: [
45
+ onChange: q,
46
+ onFocus: g,
47
+ onBlur: v
48
+ }), _ = f(p, "data-testid", "radio"), M = e != null && e !== !1 && e !== "";
49
+ return /* @__PURE__ */ u("div", { "data-testid": _, className: h(r.Radio, { [r.WithLabel]: M }, f(p, "className")), children: [
50
50
  U(e, _),
51
- /* @__PURE__ */ r(
51
+ /* @__PURE__ */ o(
52
52
  "div",
53
53
  {
54
- className: f(o.Content, {
55
- [o.Horizontal]: l === "horizontal",
56
- [o.Vertical]: l === "vertical"
54
+ className: h(r.Content, {
55
+ [r.Horizontal]: l === "horizontal",
56
+ [r.Vertical]: l === "vertical"
57
57
  }),
58
- children: C.map((i, H, N) => {
59
- const s = T(t, i.value, H);
60
- return /* @__PURE__ */ r(P, { id: s, value: a, state: d, choice: i, choices: N, children: ({ focused: b, hovered: I, checked: m, state: V }) => /* @__PURE__ */ u("div", { className: o.Label, children: [
61
- /* @__PURE__ */ r(
62
- j,
58
+ children: L.map((a, R, H) => {
59
+ const s = S(t, a.value, R);
60
+ return /* @__PURE__ */ o(w, { id: s, value: i, state: m, choice: a, choices: H, children: ({ focused: N, hovered: b, checked: d, state: I }) => /* @__PURE__ */ u("div", { className: r.Label, children: [
61
+ /* @__PURE__ */ o(
62
+ F,
63
63
  {
64
64
  type: "radio",
65
- size: z,
66
- state: V,
67
- checked: m,
68
- focused: b,
69
- hovered: I,
65
+ size: C,
66
+ state: I,
67
+ checked: d,
68
+ focused: N,
69
+ hovered: b,
70
70
  disabled: n
71
71
  }
72
72
  ),
73
- /* @__PURE__ */ r(
74
- w,
73
+ /* @__PURE__ */ o(
74
+ B,
75
75
  {
76
76
  type: "radio",
77
77
  id: s,
78
- value: i.value,
78
+ value: a.value,
79
79
  name: t,
80
- checked: m,
80
+ checked: d,
81
81
  disabled: n,
82
- onChange: (X, W) => y(i.value, W),
83
- onFocus: E,
84
- onBlur: M
82
+ onChange: (X, V) => x(a.value, V),
83
+ onFocus: y,
84
+ onBlur: E
85
85
  }
86
86
  ),
87
- /* @__PURE__ */ r(F, { text: i.label, size: x, checked: m })
87
+ /* @__PURE__ */ o($, { text: a.label, size: z, checked: d })
88
88
  ] }) }, s);
89
89
  })
90
90
  }
91
91
  ),
92
- /* @__PURE__ */ r($, { name: "message", condition: d === "error" && !!c, children: /* @__PURE__ */ r(B, { text: c, className: o.ErrorMessage }) })
92
+ /* @__PURE__ */ o(W, { name: "message", condition: m === "error" && !!c, children: /* @__PURE__ */ o(j, { text: c, className: r.ErrorMessage }) })
93
93
  ] });
94
94
  };
95
95
  export {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@arthurzakharov/ui-kit",
3
3
  "private": false,
4
- "version": "3.16.0",
4
+ "version": "3.18.0",
5
5
  "type": "module",
6
6
  "main": "dist/main.js",
7
7
  "types": "dist/main.d.ts",
package/dist/assets/button-BMjMeK04.css DELETED
@@ -1 +0,0 @@
1
- ._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/radio-D4fKo4f0.css DELETED
@@ -1 +0,0 @@
1
- ._Radio_1trgm_1{display:inline-flex;flex-direction:column}._WithLabel_1trgm_6{display:flex;width:100%;gap:var(--rm-ui-padding-sm)}._Content_1trgm_12{display:inline-flex}._Horizontal_1trgm_16{flex-direction:row;gap:var(--rm-ui-padding-lg)}._Vertical_1trgm_21{flex-direction:column;gap:var(--rm-ui-padding-xxs)}._Label_1trgm_26{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Label_1trgm_26:hover{cursor:pointer}._ErrorMessage_1trgm_39{padding-top:var(--rm-ui-padding-xxs)}