@arthurzakharov/ui-kit 3.13.0 → 3.15.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.
- package/dist/assets/radio-D4fKo4f0.css +1 -0
- package/dist/components/dialog-article/dialog-article.component.js +10 -10
- package/dist/controls/interactives/radio/radio.component.d.ts +3 -1
- package/dist/controls/interactives/radio/radio.component.js +86 -100
- package/dist/controls/interactives/text-field/text-field.component.js +7 -6
- package/package.json +1 -1
- package/dist/assets/radio-VoXwCoAp.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
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)}
|
|
@@ -23,28 +23,28 @@ import '../../assets/dialog-article-BdDXX1FV.css';const A = "_DialogArticle_vv4c
|
|
|
23
23
|
children: [
|
|
24
24
|
m,
|
|
25
25
|
(t || e) && /* @__PURE__ */ a("div", { "data-testid": "dialog-article-buttons", ref: o, className: n.Buttons, children: [
|
|
26
|
-
|
|
26
|
+
e && /* @__PURE__ */ l(
|
|
27
27
|
c,
|
|
28
28
|
{
|
|
29
|
-
"data-testid": "dialog-article-
|
|
29
|
+
"data-testid": "dialog-article-confirm",
|
|
30
30
|
blurAfterClick: !0,
|
|
31
31
|
preventDefault: !0,
|
|
32
|
-
text:
|
|
33
|
-
color: "
|
|
32
|
+
text: e.text,
|
|
33
|
+
color: "primary",
|
|
34
34
|
textSize: "md",
|
|
35
|
-
onClick:
|
|
35
|
+
onClick: e.fn
|
|
36
36
|
}
|
|
37
37
|
),
|
|
38
|
-
|
|
38
|
+
t && /* @__PURE__ */ l(
|
|
39
39
|
c,
|
|
40
40
|
{
|
|
41
|
-
"data-testid": "dialog-article-
|
|
41
|
+
"data-testid": "dialog-article-cancel",
|
|
42
42
|
blurAfterClick: !0,
|
|
43
43
|
preventDefault: !0,
|
|
44
|
-
text:
|
|
45
|
-
color: "
|
|
44
|
+
text: t.text,
|
|
45
|
+
color: "tertiary",
|
|
46
46
|
textSize: "md",
|
|
47
|
-
onClick:
|
|
47
|
+
onClick: t.fn
|
|
48
48
|
}
|
|
49
49
|
)
|
|
50
50
|
] })
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
1
2
|
import { ChoiceProps, CaptionProps } from '../../primitives';
|
|
2
3
|
import { Interactive, RadioChoice } from '../../utils';
|
|
3
4
|
import { Base } from '../../../utils/types';
|
|
@@ -7,5 +8,6 @@ export interface RadioProps extends Base, Interactive<string> {
|
|
|
7
8
|
iconSize?: ChoiceProps['size'];
|
|
8
9
|
textSize?: CaptionProps['size'];
|
|
9
10
|
message?: string;
|
|
11
|
+
label?: ReactNode;
|
|
10
12
|
}
|
|
11
|
-
export declare const Radio: ({ id, value, disabled, state, onChange, onFocus, onBlur, choices, orientation, iconSize, textSize, message, ...base }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const Radio: ({ id, value, disabled, state, onChange, onFocus, onBlur, choices, orientation, iconSize, textSize, message, label, ...base }: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,111 +1,97 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import { FadeSlide as
|
|
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";
|
|
4
4
|
import "../../primitives/box/box.component.js";
|
|
5
|
-
import { Caption as
|
|
6
|
-
import { Choice as
|
|
7
|
-
import { ErrorMessage as
|
|
8
|
-
import { HiddenInput as
|
|
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";
|
|
9
9
|
import "../../../utils/content/content.component.js";
|
|
10
|
-
import { RadioLabel as
|
|
10
|
+
import { RadioLabel as P } from "../../primitives/radio-label/radio-label.component.js";
|
|
11
11
|
import "lucide-react";
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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 = {
|
|
16
|
+
Radio: A,
|
|
17
|
+
WithLabel: D,
|
|
18
|
+
Content: G,
|
|
19
|
+
Horizontal: J,
|
|
20
|
+
Vertical: K,
|
|
21
|
+
Label: O,
|
|
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 = ({
|
|
22
24
|
// Interactive props
|
|
23
|
-
id:
|
|
24
|
-
value:
|
|
25
|
-
disabled:
|
|
26
|
-
state:
|
|
27
|
-
onChange:
|
|
28
|
-
onFocus:
|
|
29
|
-
onBlur:
|
|
25
|
+
id: t,
|
|
26
|
+
value: a = "",
|
|
27
|
+
disabled: n = !1,
|
|
28
|
+
state: d = "idle",
|
|
29
|
+
onChange: h,
|
|
30
|
+
onFocus: v,
|
|
31
|
+
onBlur: L,
|
|
30
32
|
// Radio props
|
|
31
|
-
choices:
|
|
33
|
+
choices: C,
|
|
32
34
|
orientation: l = "horizontal",
|
|
33
|
-
iconSize:
|
|
34
|
-
textSize:
|
|
35
|
-
message:
|
|
35
|
+
iconSize: z = "md",
|
|
36
|
+
textSize: x = "body",
|
|
37
|
+
message: c = "",
|
|
38
|
+
label: e,
|
|
36
39
|
// Base props
|
|
37
|
-
...
|
|
40
|
+
...p
|
|
38
41
|
}) => {
|
|
39
|
-
const { emitChange:
|
|
40
|
-
id:
|
|
41
|
-
disabled:
|
|
42
|
-
onChange:
|
|
43
|
-
onFocus:
|
|
44
|
-
onBlur:
|
|
45
|
-
});
|
|
46
|
-
return /* @__PURE__ */
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
"
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
"
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
onChange: (J, N) => w(t.value, N),
|
|
92
|
-
onFocus: x,
|
|
93
|
-
onBlur: E
|
|
94
|
-
}
|
|
95
|
-
),
|
|
96
|
-
/* @__PURE__ */ r(I, { text: t.label, size: z, checked: n })
|
|
97
|
-
] })
|
|
98
|
-
},
|
|
99
|
-
i
|
|
100
|
-
);
|
|
101
|
-
})
|
|
102
|
-
}
|
|
103
|
-
),
|
|
104
|
-
/* @__PURE__ */ r(k, { name: "message", condition: s === "error" && !!m, children: /* @__PURE__ */ r(y, { text: m, className: o.ErrorMessage }) })
|
|
105
|
-
]
|
|
106
|
-
}
|
|
107
|
-
);
|
|
42
|
+
const { emitChange: y, handleFocus: E, handleBlur: M } = q({
|
|
43
|
+
id: t,
|
|
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: [
|
|
50
|
+
U(e, _),
|
|
51
|
+
/* @__PURE__ */ r(
|
|
52
|
+
"div",
|
|
53
|
+
{
|
|
54
|
+
className: f(o.Content, {
|
|
55
|
+
[o.Horizontal]: l === "horizontal",
|
|
56
|
+
[o.Vertical]: l === "vertical"
|
|
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,
|
|
63
|
+
{
|
|
64
|
+
type: "radio",
|
|
65
|
+
size: z,
|
|
66
|
+
state: V,
|
|
67
|
+
checked: m,
|
|
68
|
+
focused: b,
|
|
69
|
+
hovered: I,
|
|
70
|
+
disabled: n
|
|
71
|
+
}
|
|
72
|
+
),
|
|
73
|
+
/* @__PURE__ */ r(
|
|
74
|
+
w,
|
|
75
|
+
{
|
|
76
|
+
type: "radio",
|
|
77
|
+
id: s,
|
|
78
|
+
value: i.value,
|
|
79
|
+
name: t,
|
|
80
|
+
checked: m,
|
|
81
|
+
disabled: n,
|
|
82
|
+
onChange: (X, W) => y(i.value, W),
|
|
83
|
+
onFocus: E,
|
|
84
|
+
onBlur: M
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ r(F, { text: i.label, size: x, checked: m })
|
|
88
|
+
] }) }, s);
|
|
89
|
+
})
|
|
90
|
+
}
|
|
91
|
+
),
|
|
92
|
+
/* @__PURE__ */ r($, { name: "message", condition: d === "error" && !!c, children: /* @__PURE__ */ r(B, { text: c, className: o.ErrorMessage }) })
|
|
93
|
+
] });
|
|
108
94
|
};
|
|
109
95
|
export {
|
|
110
|
-
|
|
96
|
+
ct as Radio
|
|
111
97
|
};
|
|
@@ -10,6 +10,7 @@ import { ErrorMessage as k } from "../../primitives/error-message/error-message.
|
|
|
10
10
|
import { Label as C } from "../../primitives/label/label.component.js";
|
|
11
11
|
import "react";
|
|
12
12
|
import { Input as j } from "../input/input.component.js";
|
|
13
|
+
import "../../../components/text/text.component.js";
|
|
13
14
|
import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1", O = "_Box_diews_10", q = "_Content_diews_14", y = "_Label_diews_30", z = "_Idle_diews_40", G = "_Active_diews_45", H = "_Placeholder_diews_50", J = "_PlaceholderText_diews_57", K = "_ErrorMessage_diews_65", Q = "_Input_diews_69", R = "_MaskStart_diews_73", e = {
|
|
14
15
|
TextField: D,
|
|
15
16
|
Box: O,
|
|
@@ -22,7 +23,7 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
|
|
|
22
23
|
ErrorMessage: K,
|
|
23
24
|
Input: Q,
|
|
24
25
|
MaskStart: R
|
|
25
|
-
},
|
|
26
|
+
}, ie = ({
|
|
26
27
|
// Interactive props
|
|
27
28
|
id: d,
|
|
28
29
|
value: s = "",
|
|
@@ -38,9 +39,9 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
|
|
|
38
39
|
message: m = "",
|
|
39
40
|
placeholder: _ = "",
|
|
40
41
|
// Base props
|
|
41
|
-
...
|
|
42
|
+
...p
|
|
42
43
|
}) => {
|
|
43
|
-
const { value:
|
|
44
|
+
const { value: x, setTrue: T, setFalse: A } = f(!1), { value: a, setTrue: S, setFalse: b } = f(!1), r = a || !!s || x, B = !i && !!_ && a && !s && !x, N = !!m && l === "error", g = (o) => {
|
|
44
45
|
S(), I?.(o);
|
|
45
46
|
}, E = (o) => {
|
|
46
47
|
b(), F?.(o);
|
|
@@ -48,8 +49,8 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
|
|
|
48
49
|
return /* @__PURE__ */ n(
|
|
49
50
|
"div",
|
|
50
51
|
{
|
|
51
|
-
"data-testid": u(
|
|
52
|
-
className: c(e.TextField, u(
|
|
52
|
+
"data-testid": u(p, "data-testid", "text-field"),
|
|
53
|
+
className: c(e.TextField, u(p, "className")),
|
|
53
54
|
children: [
|
|
54
55
|
/* @__PURE__ */ n($, { state: l, focused: a, className: e.Box, children: [
|
|
55
56
|
/* @__PURE__ */ t(
|
|
@@ -101,5 +102,5 @@ import '../../../assets/text-field-ycFvAkxr.css';const D = "_TextField_diews_1",
|
|
|
101
102
|
);
|
|
102
103
|
};
|
|
103
104
|
export {
|
|
104
|
-
|
|
105
|
+
ie as TextField
|
|
105
106
|
};
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._Radio_rt0wk_1{display:inline-flex;flex-direction:column}._Content_rt0wk_6{display:inline-flex}._Horizontal_rt0wk_10{flex-direction:row;gap:var(--rm-ui-padding-lg)}._Vertical_rt0wk_15{flex-direction:column;gap:var(--rm-ui-padding-xxs)}._Label_rt0wk_20{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Label_rt0wk_20:hover{cursor:pointer}._ErrorMessage_rt0wk_33{padding-top:var(--rm-ui-padding-xxs)}
|