mimir-ui-kit 1.15.2 → 1.16.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/Input-BFFPzelg.js +228 -0
- package/dist/{ProgressBar-BekX41HR.js → ProgressBar-CwLwhaeM.js} +23 -23
- package/dist/assets/Input.css +1 -1
- package/dist/assets/OtpInput.css +1 -1
- package/dist/assets/ProgressBar2.css +1 -1
- package/dist/assets/TextArea.css +1 -0
- package/dist/components/DatePicker/DatePicker.d.ts +1 -9
- package/dist/components/DatePicker/DatePicker.js +1 -1
- package/dist/components/Input/Input.d.ts +11 -27
- package/dist/components/Input/Input.js +9 -120
- package/dist/components/Input/index.d.ts +1 -1
- package/dist/components/Input/index.js +2 -2
- package/dist/components/Input/types.d.ts +11 -0
- package/dist/components/InputPassword/InputPassword.d.ts +1 -9
- package/dist/components/InputPassword/InputPassword.js +1 -1
- package/dist/components/InputPhoneNumber/InputPhoneNumber.d.ts +1 -9
- package/dist/components/InputPhoneNumber/InputPhoneNumber.js +1 -1
- package/dist/components/OtpInput/OtpInput.js +5 -5
- package/dist/components/SelectSearch/SelectSearch.js +1 -1
- package/dist/components/TextArea/TextArea.d.ts +5 -0
- package/dist/components/TextArea/TextArea.js +209 -0
- package/dist/components/TextArea/hooks.d.ts +1 -0
- package/dist/components/TextArea/hooks.js +13 -0
- package/dist/components/TextArea/index.d.ts +1 -0
- package/dist/components/TextArea/index.js +4 -0
- package/dist/components/TextArea/types.d.ts +3 -0
- package/dist/components/TextArea/types.js +1 -0
- package/dist/components/Toasts/ProgressBar.js +1 -1
- package/dist/components/Toasts/Toast.js +1 -1
- package/dist/components/Toasts/ToastList.js +1 -1
- package/dist/components/Toasts/ToastsProvider.js +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.js +4 -2
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useMergeRefs/index.d.ts +1 -0
- package/dist/hooks/useMergeRefs/index.js +4 -0
- package/dist/hooks/useMergeRefs/useMergeRefs.d.ts +4 -0
- package/dist/hooks/useMergeRefs/useMergeRefs.js +28 -0
- package/dist/icons/components/12px/Close12px.js +1 -1
- package/dist/index.js +6 -2
- package/package.json +2 -3
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "./index-CweZ_OcN.js";
|
|
3
|
+
import { memo, forwardRef, useState, useRef, useEffect } from "react";
|
|
4
|
+
import { EInputVariant } from "./components/Input/constants.js";
|
|
5
|
+
import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
|
|
6
|
+
import { Icon } from "./icons/Icon.js";
|
|
7
|
+
import { Button } from "./components/Button/Button.js";
|
|
8
|
+
import './assets/Input.css';const label = "_label_1lw8q_16";
|
|
9
|
+
const input = "_input_1lw8q_3";
|
|
10
|
+
const focused = "_focused_1lw8q_65";
|
|
11
|
+
const clear = "_clear_1lw8q_98";
|
|
12
|
+
const s = "_s_1lw8q_126";
|
|
13
|
+
const m = "_m_1lw8q_141";
|
|
14
|
+
const l = "_l_1lw8q_16";
|
|
15
|
+
const success = "_success_1lw8q_198";
|
|
16
|
+
const alarm = "_alarm_1lw8q_216";
|
|
17
|
+
const error = "_error_1lw8q_234";
|
|
18
|
+
const disabled = "_disabled_1lw8q_252";
|
|
19
|
+
const cls = {
|
|
20
|
+
"input-wrapper": "_input-wrapper_1lw8q_3",
|
|
21
|
+
label,
|
|
22
|
+
"has-left-slot": "_has-left-slot_1lw8q_29",
|
|
23
|
+
"active-label": "_active-label_1lw8q_32",
|
|
24
|
+
input,
|
|
25
|
+
"has-right-slot": "_has-right-slot_1lw8q_62",
|
|
26
|
+
focused,
|
|
27
|
+
"has-label": "_has-label_1lw8q_68",
|
|
28
|
+
"left-slot": "_left-slot_1lw8q_71",
|
|
29
|
+
"right-slot": "_right-slot_1lw8q_72",
|
|
30
|
+
"addon-icon": "_addon-icon_1lw8q_94",
|
|
31
|
+
clear,
|
|
32
|
+
s,
|
|
33
|
+
m,
|
|
34
|
+
l,
|
|
35
|
+
"default-gray": "_default-gray_1lw8q_171",
|
|
36
|
+
"default-white": "_default-white_1lw8q_183",
|
|
37
|
+
success,
|
|
38
|
+
alarm,
|
|
39
|
+
error,
|
|
40
|
+
disabled
|
|
41
|
+
};
|
|
42
|
+
const renderAddon = (addon) => {
|
|
43
|
+
var _a, _b;
|
|
44
|
+
if (!addon) {
|
|
45
|
+
return null;
|
|
46
|
+
}
|
|
47
|
+
switch (addon.addonType) {
|
|
48
|
+
case "icon": {
|
|
49
|
+
const is16px = (_a = addon.addonContent) == null ? void 0 : _a.includes("16px");
|
|
50
|
+
const is24px = (_b = addon.addonContent) == null ? void 0 : _b.includes("24px");
|
|
51
|
+
return /* @__PURE__ */ jsx(
|
|
52
|
+
Icon,
|
|
53
|
+
{
|
|
54
|
+
style: {
|
|
55
|
+
["--icon-size"]: classNames({
|
|
56
|
+
"16px": is16px,
|
|
57
|
+
"24px": is24px
|
|
58
|
+
})
|
|
59
|
+
},
|
|
60
|
+
className: cls["addon-icon"],
|
|
61
|
+
iconName: addon.addonContent
|
|
62
|
+
}
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
case "text": {
|
|
66
|
+
return addon.addonContent;
|
|
67
|
+
}
|
|
68
|
+
default: {
|
|
69
|
+
return null;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
};
|
|
73
|
+
const Input = memo(
|
|
74
|
+
forwardRef(
|
|
75
|
+
(props, ref) => {
|
|
76
|
+
const {
|
|
77
|
+
value,
|
|
78
|
+
className,
|
|
79
|
+
wrapperClassName,
|
|
80
|
+
variant = EInputVariant.DefaultGray,
|
|
81
|
+
type = "text",
|
|
82
|
+
autofocus,
|
|
83
|
+
readonly,
|
|
84
|
+
id,
|
|
85
|
+
onFocus,
|
|
86
|
+
onBlur,
|
|
87
|
+
label: label2,
|
|
88
|
+
withClearButton,
|
|
89
|
+
disabled: disabled2,
|
|
90
|
+
rightAddon,
|
|
91
|
+
leftAddon,
|
|
92
|
+
size = "m",
|
|
93
|
+
...otherProps
|
|
94
|
+
} = props;
|
|
95
|
+
const [isFocused, setIsFocused] = useState(autofocus);
|
|
96
|
+
const [withValue, setWithValue] = useState(!!value);
|
|
97
|
+
const inputRef = useRef(null);
|
|
98
|
+
const leftAddonRef = useRef(null);
|
|
99
|
+
const mergedInputRef = useMergeRefs(inputRef, ref);
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
if (autofocus) {
|
|
102
|
+
setIsFocused(true);
|
|
103
|
+
}
|
|
104
|
+
}, [autofocus]);
|
|
105
|
+
const handleBlur = (event) => {
|
|
106
|
+
const currentValue = event.currentTarget.value;
|
|
107
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
108
|
+
if (currentValue) {
|
|
109
|
+
return;
|
|
110
|
+
}
|
|
111
|
+
setIsFocused(false);
|
|
112
|
+
};
|
|
113
|
+
const handleFocus = (event) => {
|
|
114
|
+
if (readonly) {
|
|
115
|
+
return;
|
|
116
|
+
}
|
|
117
|
+
setIsFocused(true);
|
|
118
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
119
|
+
};
|
|
120
|
+
const handleClear = () => {
|
|
121
|
+
if (inputRef == null ? void 0 : inputRef.current) {
|
|
122
|
+
inputRef.current.value = "";
|
|
123
|
+
inputRef.current.focus();
|
|
124
|
+
setWithValue(false);
|
|
125
|
+
}
|
|
126
|
+
};
|
|
127
|
+
const handleChange = (event) => {
|
|
128
|
+
var _a;
|
|
129
|
+
const targetValue = event.target.value;
|
|
130
|
+
setWithValue(!!targetValue);
|
|
131
|
+
(_a = otherProps == null ? void 0 : otherProps.onChange) == null ? void 0 : _a.call(otherProps, event);
|
|
132
|
+
};
|
|
133
|
+
const currentLeftAddon = renderAddon(leftAddon);
|
|
134
|
+
const currentRightAddon = renderAddon(rightAddon);
|
|
135
|
+
const mods = {
|
|
136
|
+
[cls.readonly]: disabled2 || readonly,
|
|
137
|
+
[cls.focused]: isFocused || withValue,
|
|
138
|
+
[cls.disabled]: disabled2 || readonly,
|
|
139
|
+
[cls["has-label"]]: !!label2,
|
|
140
|
+
[cls["has-left-slot"]]: !!currentLeftAddon,
|
|
141
|
+
[cls["has-right-slot"]]: !!currentRightAddon
|
|
142
|
+
};
|
|
143
|
+
const labelClassNames = classNames(
|
|
144
|
+
cls.label,
|
|
145
|
+
{
|
|
146
|
+
[cls["active-label"]]: isFocused || value,
|
|
147
|
+
[cls.disabled]: disabled2 || readonly,
|
|
148
|
+
[cls["has-left-slot"]]: !!currentLeftAddon
|
|
149
|
+
},
|
|
150
|
+
className,
|
|
151
|
+
cls[size]
|
|
152
|
+
);
|
|
153
|
+
const inputClassNames = classNames(cls.input, mods, className, [
|
|
154
|
+
cls[variant],
|
|
155
|
+
cls[size]
|
|
156
|
+
]);
|
|
157
|
+
return /* @__PURE__ */ jsxs(
|
|
158
|
+
"div",
|
|
159
|
+
{
|
|
160
|
+
className: classNames(
|
|
161
|
+
cls["input-wrapper"],
|
|
162
|
+
cls[variant],
|
|
163
|
+
cls[size],
|
|
164
|
+
{ [cls.focused]: isFocused || withValue },
|
|
165
|
+
wrapperClassName
|
|
166
|
+
),
|
|
167
|
+
children: [
|
|
168
|
+
label2 && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label2 }),
|
|
169
|
+
currentLeftAddon && /* @__PURE__ */ jsx(
|
|
170
|
+
"span",
|
|
171
|
+
{
|
|
172
|
+
ref: leftAddonRef,
|
|
173
|
+
className: classNames(cls["left-slot"], {
|
|
174
|
+
[cls.focused]: isFocused,
|
|
175
|
+
[cls["has-label"]]: !!label2
|
|
176
|
+
}),
|
|
177
|
+
children: currentLeftAddon
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
/* @__PURE__ */ jsx(
|
|
181
|
+
"input",
|
|
182
|
+
{
|
|
183
|
+
ref: mergedInputRef,
|
|
184
|
+
type,
|
|
185
|
+
id,
|
|
186
|
+
className: inputClassNames,
|
|
187
|
+
onFocus: handleFocus,
|
|
188
|
+
onBlur: handleBlur,
|
|
189
|
+
readOnly: readonly,
|
|
190
|
+
value,
|
|
191
|
+
onChange: handleChange,
|
|
192
|
+
...otherProps
|
|
193
|
+
}
|
|
194
|
+
),
|
|
195
|
+
currentRightAddon && /* @__PURE__ */ jsx(
|
|
196
|
+
"span",
|
|
197
|
+
{
|
|
198
|
+
className: classNames(cls["right-slot"], {
|
|
199
|
+
[cls.focused]: isFocused,
|
|
200
|
+
[cls["has-label"]]: !!label2
|
|
201
|
+
}),
|
|
202
|
+
children: currentRightAddon
|
|
203
|
+
}
|
|
204
|
+
),
|
|
205
|
+
withClearButton && withValue && /* @__PURE__ */ jsx(
|
|
206
|
+
Button,
|
|
207
|
+
{
|
|
208
|
+
tabIndex: -1,
|
|
209
|
+
className: cls.clear,
|
|
210
|
+
isIconButton: true,
|
|
211
|
+
iconName: "Close16px",
|
|
212
|
+
size: "m-s",
|
|
213
|
+
clear: true,
|
|
214
|
+
variant: "secondary-gray",
|
|
215
|
+
onClick: handleClear
|
|
216
|
+
}
|
|
217
|
+
)
|
|
218
|
+
]
|
|
219
|
+
}
|
|
220
|
+
);
|
|
221
|
+
}
|
|
222
|
+
)
|
|
223
|
+
);
|
|
224
|
+
Input.displayName = "Input";
|
|
225
|
+
export {
|
|
226
|
+
Input as I,
|
|
227
|
+
cls as c
|
|
228
|
+
};
|
|
@@ -2,39 +2,39 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "./index-CweZ_OcN.js";
|
|
3
3
|
import { memo, useRef, useEffect } from "react";
|
|
4
4
|
import { DEFAULT_TOAST_DURATION, EToastVariant } from "./components/Toasts/constants.js";
|
|
5
|
-
import './assets/ProgressBar2.css';const title = "
|
|
6
|
-
const timer = "
|
|
7
|
-
const seconds = "
|
|
8
|
-
const message = "
|
|
9
|
-
const progress = "
|
|
10
|
-
const slot = "
|
|
11
|
-
const success = "
|
|
12
|
-
const alarm = "
|
|
13
|
-
const error = "
|
|
5
|
+
import './assets/ProgressBar2.css';const title = "_title_1rvsh_37";
|
|
6
|
+
const timer = "_timer_1rvsh_41";
|
|
7
|
+
const seconds = "_seconds_1rvsh_51";
|
|
8
|
+
const message = "_message_1rvsh_61";
|
|
9
|
+
const progress = "_progress_1rvsh_69";
|
|
10
|
+
const slot = "_slot_1rvsh_95";
|
|
11
|
+
const success = "_success_1rvsh_104";
|
|
12
|
+
const alarm = "_alarm_1rvsh_109";
|
|
13
|
+
const error = "_error_1rvsh_114";
|
|
14
14
|
const cls = {
|
|
15
|
-
"toast-list": "_toast-
|
|
16
|
-
"toast-wrapper": "_toast-
|
|
15
|
+
"toast-list": "_toast-list_1rvsh_2",
|
|
16
|
+
"toast-wrapper": "_toast-wrapper_1rvsh_24",
|
|
17
17
|
title,
|
|
18
18
|
timer,
|
|
19
|
-
"timer-title": "_timer-
|
|
19
|
+
"timer-title": "_timer-title_1rvsh_49",
|
|
20
20
|
seconds,
|
|
21
21
|
message,
|
|
22
22
|
progress,
|
|
23
|
-
"progress-bar": "_progress-
|
|
24
|
-
"close-button": "_close-
|
|
23
|
+
"progress-bar": "_progress-bar_1rvsh_78",
|
|
24
|
+
"close-button": "_close-button_1rvsh_89",
|
|
25
25
|
slot,
|
|
26
|
-
"default": "
|
|
26
|
+
"default": "_default_1rvsh_99",
|
|
27
27
|
success,
|
|
28
28
|
alarm,
|
|
29
29
|
error,
|
|
30
|
-
"top-right": "_top-
|
|
31
|
-
"top-center": "_top-
|
|
32
|
-
"top-left": "_top-
|
|
33
|
-
"bottom-left": "_bottom-
|
|
34
|
-
"bottom-center": "_bottom-
|
|
35
|
-
"bottom-right": "_bottom-
|
|
36
|
-
"toast-in": "_toast-
|
|
37
|
-
"toast-out": "_toast-
|
|
30
|
+
"top-right": "_top-right_1rvsh_119",
|
|
31
|
+
"top-center": "_top-center_1rvsh_125",
|
|
32
|
+
"top-left": "_top-left_1rvsh_131",
|
|
33
|
+
"bottom-left": "_bottom-left_1rvsh_136",
|
|
34
|
+
"bottom-center": "_bottom-center_1rvsh_141",
|
|
35
|
+
"bottom-right": "_bottom-right_1rvsh_147",
|
|
36
|
+
"toast-in": "_toast-in_1rvsh_179",
|
|
37
|
+
"toast-out": "_toast-out_1rvsh_183"
|
|
38
38
|
};
|
|
39
39
|
const ProgressBar = memo(
|
|
40
40
|
({
|
package/dist/assets/Input.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._input-
|
|
1
|
+
._input-wrapper_1lw8q_3{--input-border-radius-l: 8px;--input-border-radius-m: 6px;--input-border-radius-s: 6px;position:relative;display:flex;padding:0 var(--space-m);overflow:hidden;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease}._input-wrapper_1lw8q_3 ._label_1lw8q_16{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_1lw8q_3 ._label_1lw8q_16._has-left-slot_1lw8q_29{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._input-wrapper_1lw8q_3 ._label_1lw8q_16._active-label_1lw8q_32{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_1lw8q_3 ._label_1lw8q_16._active-label_1lw8q_32._has-left-slot_1lw8q_29{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--input-font-size) * -1))}._input-wrapper_1lw8q_3 ._input_1lw8q_3{position:relative;display:block;flex:1;width:100%;min-width:0;height:var(--input-height);color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background-color:inherit;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-feature-settings:"zero"}._input-wrapper_1lw8q_3 ._input_1lw8q_3._has-left-slot_1lw8q_29{padding-left:0}._input-wrapper_1lw8q_3 ._input_1lw8q_3._has-right-slot_1lw8q_62{padding-right:0}._input-wrapper_1lw8q_3 ._input_1lw8q_3._focused_1lw8q_65{padding-top:0}._input-wrapper_1lw8q_3 ._input_1lw8q_3._has-label_1lw8q_68{padding-top:var(--input-padding-position)}._input-wrapper_1lw8q_3 ._left-slot_1lw8q_71,._input-wrapper_1lw8q_3 ._right-slot_1lw8q_72{display:flex;align-items:center;height:var(--input-height);color:var(--black-60);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);background-color:inherit;transition:padding-top .15s ease-out}._input-wrapper_1lw8q_3 ._left-slot_1lw8q_71._focused_1lw8q_65._has-label_1lw8q_68,._input-wrapper_1lw8q_3 ._right-slot_1lw8q_72._focused_1lw8q_65._has-label_1lw8q_68{padding-top:var(--input-padding-position)}._input-wrapper_1lw8q_3 ._left-slot_1lw8q_71{justify-content:flex-end;margin-right:var(--clear-button-mg)}._input-wrapper_1lw8q_3 ._right-slot_1lw8q_72{margin-left:var(--clear-button-mg)}._input-wrapper_1lw8q_3 ._addon-icon_1lw8q_94{width:var(--icon-size);height:var(--icon-size)}._input-wrapper_1lw8q_3 ._clear_1lw8q_98{align-self:center;width:16px;height:16px;margin-left:var(--clear-button-mg)}._input-wrapper_1lw8q_3 svg{color:currentcolor;fill:currentcolor}._input-wrapper_1lw8q_3:hover ._label_1lw8q_16,._input-wrapper_1lw8q_3:focus-within ._label_1lw8q_16{color:var(--label-color)}._input-wrapper_1lw8q_3:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1lw8q_3:focus-within{background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._input-wrapper_1lw8q_3._focused_1lw8q_65{color:var(--input-color-active);background-color:var(--input-bg-color-active)}._input-wrapper_1lw8q_3._focused_1lw8q_65:hover{background-color:var(--input-bg-color-hover)}._s_1lw8q_126{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--input-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: 0px}._m_1lw8q_141{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--input-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: var(--space-3xs)}._l_1lw8q_16{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--input-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s);--clear-button-mg: var(--space-xs);--icon-size: 24px;--left-addon-position: var(--space-s)}._default-gray_1lw8q_171{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1lw8q_183{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1lw8q_183:hover{--label-color: var(--dark-text)}._success_1lw8q_198{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_1lw8q_198::-moz-placeholder{color:var(--input-color)}._success_1lw8q_198::placeholder{color:var(--input-color)}._success_1lw8q_198:hover::-moz-placeholder{color:var(--input-color)}._success_1lw8q_198:hover::placeholder{color:var(--input-color)}._alarm_1lw8q_216{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_1lw8q_216::-moz-placeholder{color:var(--input-color)}._alarm_1lw8q_216::placeholder{color:var(--input-color)}._alarm_1lw8q_216:hover::-moz-placeholder{color:var(--input-color)}._alarm_1lw8q_216:hover::placeholder{color:var(--input-color)}._error_1lw8q_234{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_1lw8q_234::-moz-placeholder{color:var(--input-color)}._error_1lw8q_234::placeholder{color:var(--input-color)}._error_1lw8q_234:hover::-moz-placeholder{color:var(--input-color)}._error_1lw8q_234:hover::placeholder{color:var(--input-color)}._disabled_1lw8q_252{--input-cursor: not-allowed;--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20)}._disabled_1lw8q_252:hover,._disabled_1lw8q_252:active,._disabled_1lw8q_252:focus{--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border:none;box-shadow:none}._disabled_1lw8q_252::-moz-placeholder{color:var(--light-text)}._disabled_1lw8q_252::placeholder{color:var(--light-text)}._disabled_1lw8q_252:hover::-moz-placeholder{color:var(--light-text)}._disabled_1lw8q_252:hover::placeholder{color:var(--light-text)}
|
package/dist/assets/OtpInput.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._otp_196ev_3{display:flex;align-items:center;width:100%;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs)}@media (max-width: 768px){._otp_196ev_3{-moz-column-gap:4.65px;column-gap:4.65px}}._otp_196ev_3 ._input-wrapper_196ev_14{flex:0 0 64px;padding:0}@media (max-width: 768px){._otp_196ev_3 ._input-wrapper_196ev_14{flex:0 0 48px}}._input_196ev_14{text-align:center}._separator_196ev_28{display:block;flex:0 0 54px;align-self:center;height:1px;margin:0 var(--space-xs);background-color:var(--black-100)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._toast-
|
|
1
|
+
._toast-list_1rvsh_2{position:fixed;z-index:15000;width:100vw;max-width:515px;max-height:100vh;padding:var(--space-m);overflow-x:hidden;overflow-y:auto;overflow:hidden auto}._toast-list_1rvsh_2::-webkit-scrollbar{display:none}._toast-list_1rvsh_2::-webkit-scrollbar-track{background-color:transparent}._toast-list_1rvsh_2::-webkit-scrollbar-thumb{background-color:transparent}._toast-list_1rvsh_2::-webkit-scrollbar-thumb:window-inactive{background-color:transparent}._toast-wrapper_1rvsh_24{position:relative;display:flex;flex-direction:column;padding:var(--space-m);background-color:var(--toast-bg-color);border-radius:var(--control-radius);transition:all .3s ease}._toast-wrapper_1rvsh_24:not(:last-child){margin-bottom:var(--space-s)}._title_1rvsh_37:not(:last-child){margin-bottom:var(--space-xs)}._timer_1rvsh_41{display:flex;justify-content:space-between}._timer_1rvsh_41:not(:last-child){margin-bottom:var(--space-2xs)}._timer-title_1rvsh_49,._title_1rvsh_37,._seconds_1rvsh_51{color:var(--black-60);font-size:var(--size-text-m);line-height:var(--line-height-text-xxs)}._seconds_1rvsh_51{color:var(--black-100)}._message_1rvsh_61{font-size:var(--size-text-l);line-height:var(--line-height-text-s1)}._message_1rvsh_61:not(:last-child){margin-bottom:var(--space-xs)}._progress_1rvsh_69{position:relative;width:100%;height:8px;overflow:hidden;background-color:var(--black-5);border-radius:var(--control-radius-xs)}._progress-bar_1rvsh_78{position:absolute;top:0;bottom:0;left:0;width:100%;height:100%;background-color:var(--progress-bg-color);border-radius:var(--control-radius-xs)}._close-button_1rvsh_89{position:absolute;top:var(--space-s);right:var(--space-s)}._slot_1rvsh_95{margin-top:var(--space-xl)}._default_1rvsh_99{--toast-bg-color: var(--white);--progress-bg-color: var(--sapphire-100)}._success_1rvsh_104{--toast-bg-color: var(--success-bg-active);--progress-bg-color: var(--success-normal)}._alarm_1rvsh_109{--toast-bg-color: var(--alarm-bg-active);--progress-bg-color: var(--alarm-normal)}._error_1rvsh_114{--toast-bg-color: var(--error-bg-active);--progress-bg-color: var(--error-normal)}._top-right_1rvsh_119{top:0;right:0;transition:all .3s ease}._top-center_1rvsh_125{top:0;right:50%;transform:translate(50%)}._top-left_1rvsh_131{top:0;left:0}._bottom-left_1rvsh_136{bottom:0;left:0}._bottom-center_1rvsh_141{right:50%;bottom:0;transform:translate(50%)}._bottom-right_1rvsh_147{right:0;bottom:0}@keyframes _toast-in_1rvsh_179{0%{transform:var(--elm-translate);opacity:.7}80%{transform:translate(0);opacity:.7}to{transform:scale(1);opacity:1}}@keyframes _toast-out_1rvsh_183{0%{opacity:1}20%{transform:translate(0);opacity:.7}to{transform:var(--elm-translate);opacity:.7}}._toast-in_1rvsh_179{animation:_toast-in_1rvsh_179 .3s both}._toast-out_1rvsh_183{animation:_toast-out_1rvsh_183 .8s both}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._textarea_46c4k_2{min-height:var(--textarea-height);resize:none}._textarea_46c4k_2._s_46c4k_6{--top-space: var(--space-3xs);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._textarea_46c4k_2._m_46c4k_11{--top-space: var(--space-2xs);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._textarea_46c4k_2._l_46c4k_16{--top-space: var(--space-2xs);--textarea-height: 120px;--textarea-padding: var(--space-2m)}._textarea_46c4k_2._has-label_46c4k_21{padding-top:calc(var(--input-font-size) + var(--top-space))!important}
|
|
@@ -33,12 +33,4 @@ export declare const DatePicker: import('react').MemoExoticComponent<import('rea
|
|
|
33
33
|
* значение из стейта (data)
|
|
34
34
|
*/
|
|
35
35
|
value?: string;
|
|
36
|
-
} & import('../Input/types').TInputProps &
|
|
37
|
-
size?: import('../Input').TSize;
|
|
38
|
-
variant?: import('../Input').TVariant;
|
|
39
|
-
className?: string;
|
|
40
|
-
wrapperClassName?: string;
|
|
41
|
-
label?: import('react').ReactNode;
|
|
42
|
-
autofocus?: boolean;
|
|
43
|
-
readonly?: boolean;
|
|
44
|
-
} & import('react').RefAttributes<HTMLInputElement>>>;
|
|
36
|
+
} & import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -5,7 +5,7 @@ import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.j
|
|
|
5
5
|
import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
|
|
6
6
|
import { formating } from "../../utils/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
8
|
-
import { Input } from "
|
|
8
|
+
import { I as Input } from "../../Input-BFFPzelg.js";
|
|
9
9
|
const DatePicker = memo(
|
|
10
10
|
forwardRef(
|
|
11
11
|
({ size, value, onChangeValue, name, before, ...props }, ref) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
|
-
import { TInputProps, TSize, TVariant } from './types';
|
|
2
|
+
import { TInputProps, TAddon, TIconAddon, TSize, TVariant } from './types';
|
|
3
3
|
|
|
4
|
-
export type
|
|
4
|
+
export type TAdditionalProps = {
|
|
5
5
|
/**
|
|
6
6
|
* Размер ввода.
|
|
7
7
|
*/
|
|
@@ -30,34 +30,18 @@ export type TProps = TInputProps & {
|
|
|
30
30
|
* Сделать ввод только для чтения.
|
|
31
31
|
*/
|
|
32
32
|
readonly?: boolean;
|
|
33
|
-
};
|
|
34
|
-
export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TInputProps & {
|
|
35
|
-
/**
|
|
36
|
-
* Размер ввода.
|
|
37
|
-
*/
|
|
38
|
-
size?: TSize;
|
|
39
|
-
/**
|
|
40
|
-
* `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
|
|
41
|
-
*/
|
|
42
|
-
variant?: TVariant;
|
|
43
|
-
/**
|
|
44
|
-
* Дополнительный класс.
|
|
45
|
-
*/
|
|
46
|
-
className?: string;
|
|
47
|
-
/**
|
|
48
|
-
* Дополнительный класс для обертки поля ввода.
|
|
49
|
-
*/
|
|
50
|
-
wrapperClassName?: string;
|
|
51
33
|
/**
|
|
52
|
-
*
|
|
34
|
+
* Дополнительный слот справа.
|
|
53
35
|
*/
|
|
54
|
-
|
|
36
|
+
rightAddon?: TAddon;
|
|
55
37
|
/**
|
|
56
|
-
*
|
|
38
|
+
* Дополнительный слот слева.
|
|
57
39
|
*/
|
|
58
|
-
|
|
40
|
+
leftAddon?: TIconAddon;
|
|
59
41
|
/**
|
|
60
|
-
*
|
|
42
|
+
* Флаг, показывающий наличие кнопки очистки.
|
|
61
43
|
*/
|
|
62
|
-
|
|
63
|
-
}
|
|
44
|
+
withClearButton?: boolean;
|
|
45
|
+
};
|
|
46
|
+
export type TProps = TInputProps & TAdditionalProps;
|
|
47
|
+
export declare const Input: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TInputProps & TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -1,122 +1,11 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const l = "_l_1sn09_5";
|
|
10
|
-
const success = "_success_1sn09_124";
|
|
11
|
-
const alarm = "_alarm_1sn09_142";
|
|
12
|
-
const error = "_error_1sn09_160";
|
|
13
|
-
const disabled = "_disabled_1sn09_178";
|
|
14
|
-
const cls = {
|
|
15
|
-
"input-wrapper": "_input-wrapper_1sn09_2",
|
|
16
|
-
label,
|
|
17
|
-
"active-label": "_active-label_1sn09_18",
|
|
18
|
-
input,
|
|
19
|
-
s,
|
|
20
|
-
m,
|
|
21
|
-
l,
|
|
22
|
-
"default-gray": "_default-gray_1sn09_97",
|
|
23
|
-
"default-white": "_default-white_1sn09_109",
|
|
24
|
-
success,
|
|
25
|
-
alarm,
|
|
26
|
-
error,
|
|
27
|
-
disabled,
|
|
28
|
-
"has-label": "_has-label_1sn09_198"
|
|
29
|
-
};
|
|
30
|
-
const Input = memo(
|
|
31
|
-
forwardRef(
|
|
32
|
-
(props, ref) => {
|
|
33
|
-
const {
|
|
34
|
-
value,
|
|
35
|
-
className,
|
|
36
|
-
wrapperClassName,
|
|
37
|
-
variant = EInputVariant.DefaultGray,
|
|
38
|
-
type = "text",
|
|
39
|
-
autofocus,
|
|
40
|
-
readonly,
|
|
41
|
-
id,
|
|
42
|
-
onFocus,
|
|
43
|
-
onBlur,
|
|
44
|
-
label: label2,
|
|
45
|
-
disabled: disabled2,
|
|
46
|
-
size = "m",
|
|
47
|
-
...otherProps
|
|
48
|
-
} = props;
|
|
49
|
-
const [isFocused, setIsFocused] = useState(autofocus);
|
|
50
|
-
useEffect(() => {
|
|
51
|
-
if (autofocus) {
|
|
52
|
-
setIsFocused(true);
|
|
53
|
-
}
|
|
54
|
-
}, [autofocus]);
|
|
55
|
-
const handleBlur = (event) => {
|
|
56
|
-
const currentValue = event.currentTarget.value;
|
|
57
|
-
onBlur == null ? void 0 : onBlur(event);
|
|
58
|
-
if (currentValue) {
|
|
59
|
-
return;
|
|
60
|
-
}
|
|
61
|
-
setIsFocused(false);
|
|
62
|
-
};
|
|
63
|
-
const handleFocus = (event) => {
|
|
64
|
-
if (readonly) {
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
setIsFocused(true);
|
|
68
|
-
onFocus == null ? void 0 : onFocus(event);
|
|
69
|
-
};
|
|
70
|
-
const mods = {
|
|
71
|
-
[cls.readonly]: disabled2 || readonly,
|
|
72
|
-
[cls.focused]: isFocused,
|
|
73
|
-
[cls.disabled]: disabled2 || readonly,
|
|
74
|
-
[cls["has-label"]]: !!label2
|
|
75
|
-
};
|
|
76
|
-
const labelClassNames = classNames(
|
|
77
|
-
cls.label,
|
|
78
|
-
{
|
|
79
|
-
[cls["active-label"]]: isFocused || value,
|
|
80
|
-
[cls.disabled]: disabled2 || readonly
|
|
81
|
-
},
|
|
82
|
-
className,
|
|
83
|
-
cls[size]
|
|
84
|
-
);
|
|
85
|
-
const inputClassNames = classNames(cls.input, mods, className, [
|
|
86
|
-
cls[variant],
|
|
87
|
-
cls[size]
|
|
88
|
-
]);
|
|
89
|
-
return /* @__PURE__ */ jsxs(
|
|
90
|
-
"div",
|
|
91
|
-
{
|
|
92
|
-
className: classNames(
|
|
93
|
-
cls["input-wrapper"],
|
|
94
|
-
cls[variant],
|
|
95
|
-
wrapperClassName
|
|
96
|
-
),
|
|
97
|
-
children: [
|
|
98
|
-
label2 && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label2 }),
|
|
99
|
-
/* @__PURE__ */ jsx(
|
|
100
|
-
"input",
|
|
101
|
-
{
|
|
102
|
-
ref,
|
|
103
|
-
type,
|
|
104
|
-
id,
|
|
105
|
-
className: inputClassNames,
|
|
106
|
-
onFocus: handleFocus,
|
|
107
|
-
onBlur: handleBlur,
|
|
108
|
-
readOnly: readonly,
|
|
109
|
-
value: value || "",
|
|
110
|
-
...otherProps
|
|
111
|
-
}
|
|
112
|
-
)
|
|
113
|
-
]
|
|
114
|
-
}
|
|
115
|
-
);
|
|
116
|
-
}
|
|
117
|
-
)
|
|
118
|
-
);
|
|
119
|
-
Input.displayName = "Input";
|
|
1
|
+
import "react/jsx-runtime";
|
|
2
|
+
import "../../index-CweZ_OcN.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import "./constants.js";
|
|
5
|
+
import { I } from "../../Input-BFFPzelg.js";
|
|
6
|
+
import "../../hooks/useMergeRefs/useMergeRefs.js";
|
|
7
|
+
import "../../icons/Icon.js";
|
|
8
|
+
import "../Button/Button.js";
|
|
120
9
|
export {
|
|
121
|
-
Input
|
|
10
|
+
I as Input
|
|
122
11
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { InputHTMLAttributes } from 'react';
|
|
2
2
|
import { EInputSize, EInputVariant } from './constants';
|
|
3
|
+
import { TIcon } from '../../icons';
|
|
3
4
|
|
|
4
5
|
export type TSize = `${EInputSize}` | EInputSize;
|
|
5
6
|
export type TVariant = `${EInputVariant}` | EInputVariant;
|
|
@@ -8,4 +9,14 @@ export type TCommonCompoundInputProps = {
|
|
|
8
9
|
variant?: TVariant;
|
|
9
10
|
className?: string;
|
|
10
11
|
};
|
|
12
|
+
type TTextAddon = {
|
|
13
|
+
addonType?: 'text';
|
|
14
|
+
addonContent?: string;
|
|
15
|
+
};
|
|
16
|
+
export type TIconAddon = {
|
|
17
|
+
addonType?: 'icon';
|
|
18
|
+
addonContent: TIcon;
|
|
19
|
+
};
|
|
20
|
+
export type TAddon = TTextAddon | TIconAddon;
|
|
11
21
|
export type TInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'readOnly' | 'size' | 'placeholder'>;
|
|
22
|
+
export {};
|
|
@@ -1,12 +1,4 @@
|
|
|
1
1
|
import { TInputProps } from '../Input';
|
|
2
2
|
|
|
3
3
|
export type TProps = TInputProps;
|
|
4
|
-
export declare const InputPassword: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps &
|
|
5
|
-
size?: import('../Input').TSize;
|
|
6
|
-
variant?: import('../Input').TVariant;
|
|
7
|
-
className?: string;
|
|
8
|
-
wrapperClassName?: string;
|
|
9
|
-
label?: import('react').ReactNode;
|
|
10
|
-
autofocus?: boolean;
|
|
11
|
-
readonly?: boolean;
|
|
12
|
-
} & import('react').RefAttributes<HTMLInputElement>>>;
|
|
4
|
+
export declare const InputPassword: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { memo, forwardRef, useState } from "react";
|
|
3
3
|
import { Icon } from "../../icons/Icon.js";
|
|
4
4
|
import { Button } from "../Button/Button.js";
|
|
5
|
-
import { Input } from "
|
|
5
|
+
import { I as Input } from "../../Input-BFFPzelg.js";
|
|
6
6
|
import '../../assets/InputPassword.css';const input = "_input_mam1g_2";
|
|
7
7
|
const wrapper = "_wrapper_mam1g_6";
|
|
8
8
|
const button = "_button_mam1g_17";
|
|
@@ -1,12 +1,4 @@
|
|
|
1
1
|
export type ImperativeHandle = Partial<HTMLInputElement> & {
|
|
2
2
|
getPhoneNumber: () => string;
|
|
3
3
|
};
|
|
4
|
-
export declare const InputPhoneNumber: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps &
|
|
5
|
-
size?: import('../Input').TSize;
|
|
6
|
-
variant?: import('../Input').TVariant;
|
|
7
|
-
className?: string;
|
|
8
|
-
wrapperClassName?: string;
|
|
9
|
-
label?: import('react').ReactNode;
|
|
10
|
-
autofocus?: boolean;
|
|
11
|
-
readonly?: boolean;
|
|
12
|
-
} & import('react').RefAttributes<HTMLInputElement>>>;
|
|
4
|
+
export declare const InputPhoneNumber: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('../Input/types').TInputProps & import('../Input').TAdditionalProps & import('react').RefAttributes<HTMLInputElement>>>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
|
|
3
3
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
|
|
4
|
-
import { Input } from "
|
|
4
|
+
import { I as Input } from "../../Input-BFFPzelg.js";
|
|
5
5
|
const InputPhoneNumber = memo(
|
|
6
6
|
forwardRef(
|
|
7
7
|
({ value = "", onChange, ...props }, ref) => {
|
|
@@ -3,13 +3,13 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
|
3
3
|
import { forwardRef, useImperativeHandle, Fragment } from "react";
|
|
4
4
|
import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
|
|
5
5
|
import { useOTPInput } from "./hooks.js";
|
|
6
|
-
import { Input } from "
|
|
7
|
-
import '../../assets/OtpInput.css';const otp = "
|
|
8
|
-
const input = "
|
|
9
|
-
const separator = "
|
|
6
|
+
import { I as Input } from "../../Input-BFFPzelg.js";
|
|
7
|
+
import '../../assets/OtpInput.css';const otp = "_otp_196ev_3";
|
|
8
|
+
const input = "_input_196ev_14";
|
|
9
|
+
const separator = "_separator_196ev_28";
|
|
10
10
|
const cls = {
|
|
11
11
|
otp,
|
|
12
|
-
"input-wrapper": "_input-
|
|
12
|
+
"input-wrapper": "_input-wrapper_196ev_14",
|
|
13
13
|
input,
|
|
14
14
|
separator
|
|
15
15
|
};
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
|
|
5
5
|
import { ESelectSearchSize } from "./constants.js";
|
|
6
6
|
import { Icon } from "../../icons/Icon.js";
|
|
7
|
-
import { Input } from "
|
|
7
|
+
import { I as Input } from "../../Input-BFFPzelg.js";
|
|
8
8
|
import { EInputSize } from "../Input/constants.js";
|
|
9
9
|
import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
|
|
10
10
|
import * as ReactDOM from "react-dom";
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { TTextAreaProps } from './types';
|
|
2
|
+
import { TAdditionalProps } from '../Input';
|
|
3
|
+
|
|
4
|
+
export type TProps = TAdditionalProps & TTextAreaProps;
|
|
5
|
+
export declare const TextArea: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TAdditionalProps & TTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>>;
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
|
+
import { memo, forwardRef, useState, useRef, useEffect } from "react";
|
|
4
|
+
import { useAutoResizeTextArea } from "./hooks.js";
|
|
5
|
+
import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
|
|
6
|
+
import { Icon } from "../../icons/Icon.js";
|
|
7
|
+
import { Button } from "../Button/Button.js";
|
|
8
|
+
import { c as cls } from "../../Input-BFFPzelg.js";
|
|
9
|
+
import { EInputVariant } from "../Input/constants.js";
|
|
10
|
+
import '../../assets/TextArea.css';const textarea = "_textarea_46c4k_2";
|
|
11
|
+
const s = "_s_46c4k_6";
|
|
12
|
+
const m = "_m_46c4k_11";
|
|
13
|
+
const l = "_l_46c4k_16";
|
|
14
|
+
const textareaCls = {
|
|
15
|
+
textarea,
|
|
16
|
+
s,
|
|
17
|
+
m,
|
|
18
|
+
l,
|
|
19
|
+
"has-label": "_has-label_46c4k_21"
|
|
20
|
+
};
|
|
21
|
+
const renderAddon = (addon) => {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
if (!addon) {
|
|
24
|
+
return null;
|
|
25
|
+
}
|
|
26
|
+
switch (addon.addonType) {
|
|
27
|
+
case "icon": {
|
|
28
|
+
const is16px = (_a = addon.addonContent) == null ? void 0 : _a.includes("16px");
|
|
29
|
+
const is24px = (_b = addon.addonContent) == null ? void 0 : _b.includes("24px");
|
|
30
|
+
return /* @__PURE__ */ jsx(
|
|
31
|
+
Icon,
|
|
32
|
+
{
|
|
33
|
+
style: {
|
|
34
|
+
["--icon-size"]: classNames({
|
|
35
|
+
"16px": is16px,
|
|
36
|
+
"24px": is24px
|
|
37
|
+
})
|
|
38
|
+
},
|
|
39
|
+
className: cls["addon-icon"],
|
|
40
|
+
iconName: addon.addonContent
|
|
41
|
+
}
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
case "text": {
|
|
45
|
+
return addon.addonContent;
|
|
46
|
+
}
|
|
47
|
+
default: {
|
|
48
|
+
return null;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
};
|
|
52
|
+
const TextArea = memo(
|
|
53
|
+
forwardRef(
|
|
54
|
+
(props, ref) => {
|
|
55
|
+
const {
|
|
56
|
+
value,
|
|
57
|
+
className,
|
|
58
|
+
wrapperClassName,
|
|
59
|
+
variant = EInputVariant.DefaultGray,
|
|
60
|
+
autofocus,
|
|
61
|
+
readonly,
|
|
62
|
+
id,
|
|
63
|
+
onFocus,
|
|
64
|
+
onBlur,
|
|
65
|
+
label,
|
|
66
|
+
withClearButton,
|
|
67
|
+
disabled,
|
|
68
|
+
rightAddon,
|
|
69
|
+
leftAddon,
|
|
70
|
+
size = "m",
|
|
71
|
+
...otherProps
|
|
72
|
+
} = props;
|
|
73
|
+
const [isFocused, setIsFocused] = useState(autofocus);
|
|
74
|
+
const [withValue, setWithValue] = useState(!!value);
|
|
75
|
+
const inputRef = useRef(null);
|
|
76
|
+
const mergedInputRef = useMergeRefs(inputRef, ref);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
if (autofocus) {
|
|
79
|
+
setIsFocused(true);
|
|
80
|
+
}
|
|
81
|
+
}, [autofocus]);
|
|
82
|
+
const handleResize = useAutoResizeTextArea(inputRef.current);
|
|
83
|
+
const handleBlur = (event) => {
|
|
84
|
+
const currentValue = event.currentTarget.value;
|
|
85
|
+
onBlur == null ? void 0 : onBlur(event);
|
|
86
|
+
if (currentValue) {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
setIsFocused(false);
|
|
90
|
+
};
|
|
91
|
+
const handleFocus = (event) => {
|
|
92
|
+
if (readonly) {
|
|
93
|
+
return;
|
|
94
|
+
}
|
|
95
|
+
setIsFocused(true);
|
|
96
|
+
onFocus == null ? void 0 : onFocus(event);
|
|
97
|
+
};
|
|
98
|
+
const handleClear = () => {
|
|
99
|
+
if (inputRef == null ? void 0 : inputRef.current) {
|
|
100
|
+
inputRef.current.value = "";
|
|
101
|
+
inputRef.current.focus();
|
|
102
|
+
setWithValue(false);
|
|
103
|
+
handleResize();
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
const handleChange = (event) => {
|
|
107
|
+
var _a;
|
|
108
|
+
const targetValue = event.target.value;
|
|
109
|
+
setWithValue(!!targetValue);
|
|
110
|
+
handleResize();
|
|
111
|
+
(_a = otherProps == null ? void 0 : otherProps.onChange) == null ? void 0 : _a.call(otherProps, event);
|
|
112
|
+
};
|
|
113
|
+
const currentLeftAddon = renderAddon(leftAddon);
|
|
114
|
+
const currentRightAddon = renderAddon(rightAddon);
|
|
115
|
+
const mods = {
|
|
116
|
+
[cls.readonly]: disabled || readonly,
|
|
117
|
+
[cls.focused]: isFocused || withValue,
|
|
118
|
+
[cls.disabled]: disabled || readonly,
|
|
119
|
+
[cls["has-left-slot"]]: !!currentLeftAddon,
|
|
120
|
+
[cls["has-right-slot"]]: !!currentRightAddon,
|
|
121
|
+
[textareaCls["has-label"]]: !!label
|
|
122
|
+
};
|
|
123
|
+
const labelClassNames = classNames(
|
|
124
|
+
cls.label,
|
|
125
|
+
{
|
|
126
|
+
[cls["active-label"]]: isFocused || value,
|
|
127
|
+
[cls.disabled]: disabled || readonly,
|
|
128
|
+
[cls["has-left-slot"]]: !!currentLeftAddon
|
|
129
|
+
},
|
|
130
|
+
className,
|
|
131
|
+
cls[size]
|
|
132
|
+
);
|
|
133
|
+
const inputClassNames = classNames(
|
|
134
|
+
textareaCls.textarea,
|
|
135
|
+
cls.input,
|
|
136
|
+
mods,
|
|
137
|
+
className,
|
|
138
|
+
[cls[variant], textareaCls[size], cls[size]]
|
|
139
|
+
);
|
|
140
|
+
return /* @__PURE__ */ jsxs(
|
|
141
|
+
"div",
|
|
142
|
+
{
|
|
143
|
+
className: classNames(
|
|
144
|
+
cls["input-wrapper"],
|
|
145
|
+
cls[variant],
|
|
146
|
+
textareaCls[size],
|
|
147
|
+
cls[size],
|
|
148
|
+
{ [cls.focused]: isFocused || withValue },
|
|
149
|
+
wrapperClassName
|
|
150
|
+
),
|
|
151
|
+
children: [
|
|
152
|
+
label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label }),
|
|
153
|
+
currentLeftAddon && /* @__PURE__ */ jsx(
|
|
154
|
+
"span",
|
|
155
|
+
{
|
|
156
|
+
className: classNames(cls["left-slot"], {
|
|
157
|
+
[cls.focused]: isFocused,
|
|
158
|
+
[cls["has-label"]]: !!label
|
|
159
|
+
}),
|
|
160
|
+
children: currentLeftAddon
|
|
161
|
+
}
|
|
162
|
+
),
|
|
163
|
+
/* @__PURE__ */ jsx(
|
|
164
|
+
"textarea",
|
|
165
|
+
{
|
|
166
|
+
ref: mergedInputRef,
|
|
167
|
+
id,
|
|
168
|
+
className: inputClassNames,
|
|
169
|
+
onFocus: handleFocus,
|
|
170
|
+
onBlur: handleBlur,
|
|
171
|
+
readOnly: readonly,
|
|
172
|
+
value,
|
|
173
|
+
onChange: handleChange,
|
|
174
|
+
...otherProps
|
|
175
|
+
}
|
|
176
|
+
),
|
|
177
|
+
currentRightAddon && /* @__PURE__ */ jsx(
|
|
178
|
+
"span",
|
|
179
|
+
{
|
|
180
|
+
className: classNames(cls["right-slot"], {
|
|
181
|
+
[cls.focused]: isFocused,
|
|
182
|
+
[cls["has-label"]]: !!label
|
|
183
|
+
}),
|
|
184
|
+
children: currentRightAddon
|
|
185
|
+
}
|
|
186
|
+
),
|
|
187
|
+
withClearButton && withValue && /* @__PURE__ */ jsx(
|
|
188
|
+
Button,
|
|
189
|
+
{
|
|
190
|
+
tabIndex: -1,
|
|
191
|
+
className: cls.clear,
|
|
192
|
+
isIconButton: true,
|
|
193
|
+
iconName: "Close16px",
|
|
194
|
+
size: "m-s",
|
|
195
|
+
clear: true,
|
|
196
|
+
variant: "secondary-gray",
|
|
197
|
+
onClick: handleClear
|
|
198
|
+
}
|
|
199
|
+
)
|
|
200
|
+
]
|
|
201
|
+
}
|
|
202
|
+
);
|
|
203
|
+
}
|
|
204
|
+
)
|
|
205
|
+
);
|
|
206
|
+
TextArea.displayName = "TextArea";
|
|
207
|
+
export {
|
|
208
|
+
TextArea
|
|
209
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useAutoResizeTextArea: (textArea: HTMLTextAreaElement | null) => () => void;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { useCallback } from "react";
|
|
2
|
+
const useAutoResizeTextArea = (textArea) => {
|
|
3
|
+
return useCallback(() => {
|
|
4
|
+
if (textArea) {
|
|
5
|
+
textArea.style.height = "var(--textarea-height)";
|
|
6
|
+
const scrollHeight = textArea.scrollHeight;
|
|
7
|
+
textArea.style.height = `${scrollHeight}px`;
|
|
8
|
+
}
|
|
9
|
+
}, [textArea]);
|
|
10
|
+
};
|
|
11
|
+
export {
|
|
12
|
+
useAutoResizeTextArea
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { TextArea, type TProps as TTextAreaProps } from './TextArea';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { memo, useRef } from "react";
|
|
4
4
|
import { ANIMATION_VARIABLES_MAP, EToastPosition, EToastVariant, DEFAULT_TOAST_DURATION } from "./constants.js";
|
|
5
|
-
import { c as cls, P as ProgressBar } from "../../ProgressBar-
|
|
5
|
+
import { c as cls, P as ProgressBar } from "../../ProgressBar-CwLwhaeM.js";
|
|
6
6
|
import { useTimer } from "../../hooks/useTimer/index.js";
|
|
7
7
|
import { Button } from "../Button/Button.js";
|
|
8
8
|
const Toast = memo(
|
|
@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { c as classNames } from "../../index-CweZ_OcN.js";
|
|
3
3
|
import { memo, useRef, useCallback, useEffect } from "react";
|
|
4
4
|
import { EToastPosition } from "./constants.js";
|
|
5
|
-
import { c as cls } from "../../ProgressBar-
|
|
5
|
+
import { c as cls } from "../../ProgressBar-CwLwhaeM.js";
|
|
6
6
|
import { Toast } from "./Toast.js";
|
|
7
7
|
const ToastList = memo(
|
|
8
8
|
({ toasts, position = EToastPosition.TOP_RIGHT, onToastRemove }) => {
|
|
@@ -3,7 +3,7 @@ import { useReducer, useCallback, useMemo } from "react";
|
|
|
3
3
|
import { EToastVariant } from "./constants.js";
|
|
4
4
|
import { ToastContext } from "./hooks.js";
|
|
5
5
|
import { reducer, initialState, actionCreators } from "./store.js";
|
|
6
|
-
import { c as cls } from "../../ProgressBar-
|
|
6
|
+
import { c as cls } from "../../ProgressBar-CwLwhaeM.js";
|
|
7
7
|
import { ToastList } from "./ToastList.js";
|
|
8
8
|
const ToastProvider = ({ children }) => {
|
|
9
9
|
const [toasts, dispatch] = useReducer(reducer, initialState);
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, type TButtonProps } from './Button';
|
|
2
2
|
export { Input, EInputSize, EInputVariant } from './Input';
|
|
3
3
|
export type { TInputProps, TSize, TVariant } from './Input';
|
|
4
|
+
export { TextArea } from './TextArea';
|
|
5
|
+
export type { TTextAreaProps } from './TextArea';
|
|
4
6
|
export { InputPassword } from './InputPassword';
|
|
5
7
|
export type { TInputPasswordProps } from './InputPassword';
|
|
6
8
|
export { InputPhoneNumber, getMaskedInputPhoneValue, getUnmaskedInputValue } from './InputPhoneNumber';
|
package/dist/components/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Button } from "./Button/Button.js";
|
|
2
2
|
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
|
|
3
|
-
import {
|
|
3
|
+
import { I } from "../Input-BFFPzelg.js";
|
|
4
4
|
import { EInputSize, EInputVariant } from "./Input/constants.js";
|
|
5
|
+
import { TextArea } from "./TextArea/TextArea.js";
|
|
5
6
|
import { InputPassword } from "./InputPassword/InputPassword.js";
|
|
6
7
|
import { InputPhoneNumber } from "./InputPhoneNumber/InputPhoneNumber.js";
|
|
7
8
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./InputPhoneNumber/utils.js";
|
|
@@ -63,7 +64,7 @@ export {
|
|
|
63
64
|
EToastVariant,
|
|
64
65
|
EVoteSize,
|
|
65
66
|
AppImage as Image,
|
|
66
|
-
Input,
|
|
67
|
+
I as Input,
|
|
67
68
|
InputPassword,
|
|
68
69
|
InputPhoneNumber,
|
|
69
70
|
Loader,
|
|
@@ -77,6 +78,7 @@ export {
|
|
|
77
78
|
Switch,
|
|
78
79
|
TabTrail,
|
|
79
80
|
Tag,
|
|
81
|
+
TextArea,
|
|
80
82
|
Timer,
|
|
81
83
|
ToastProvider,
|
|
82
84
|
Uploader,
|
package/dist/hooks/index.d.ts
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -4,6 +4,7 @@ import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
|
|
|
4
4
|
import { useInterval } from "./useInterval/useInterval.js";
|
|
5
5
|
import { useTimer } from "./useTimer/index.js";
|
|
6
6
|
import { useCopyToClipboard } from "./useCopyToClipboard/useCopyToClipboard.js";
|
|
7
|
+
import { useMergeRefs } from "./useMergeRefs/useMergeRefs.js";
|
|
7
8
|
export {
|
|
8
9
|
EMediaQuery,
|
|
9
10
|
EMinMediaQuery,
|
|
@@ -11,5 +12,6 @@ export {
|
|
|
11
12
|
useInterval,
|
|
12
13
|
useLockBodyScroll,
|
|
13
14
|
useMediaQuery,
|
|
15
|
+
useMergeRefs,
|
|
14
16
|
useTimer
|
|
15
17
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useMergeRefs } from './useMergeRefs';
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export type ReactRef<T> = React.RefCallback<T> | React.MutableRefObject<T>;
|
|
2
|
+
export declare function assignRef<T = unknown>(ref: ReactRef<T> | null | undefined, value: T): void;
|
|
3
|
+
export declare function mergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;
|
|
4
|
+
export declare function useMergeRefs<T>(...refs: (ReactRef<T> | null | undefined)[]): (node: T | null) => void;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useMemo } from "react";
|
|
2
|
+
function assignRef(ref, value) {
|
|
3
|
+
if (ref == null) return;
|
|
4
|
+
if (typeof ref === "function") {
|
|
5
|
+
ref(value);
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
try {
|
|
9
|
+
ref.current = value;
|
|
10
|
+
} catch (error) {
|
|
11
|
+
throw new Error(`Cannot assign value '${value}' to ref '${ref}'`);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
function mergeRefs(...refs) {
|
|
15
|
+
return (node) => {
|
|
16
|
+
refs.forEach((ref) => {
|
|
17
|
+
assignRef(ref, node);
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
function useMergeRefs(...refs) {
|
|
22
|
+
return useMemo(() => mergeRefs(...refs), refs);
|
|
23
|
+
}
|
|
24
|
+
export {
|
|
25
|
+
assignRef,
|
|
26
|
+
mergeRefs,
|
|
27
|
+
useMergeRefs
|
|
28
|
+
};
|
|
@@ -9,7 +9,7 @@ const Close12px = (props) => {
|
|
|
9
9
|
fill: "none",
|
|
10
10
|
xmlns: "http://www.w3.org/2000/svg",
|
|
11
11
|
...props,
|
|
12
|
-
children: /* @__PURE__ */ jsx("path", { d: "M3 9L8.99991 3M9 9L3 3", stroke: "#333333",
|
|
12
|
+
children: /* @__PURE__ */ jsx("path", { d: "M3 9L8.99991 3M9 9L3 3", stroke: "#333333", strokeWidth: "1.5" })
|
|
13
13
|
}
|
|
14
14
|
);
|
|
15
15
|
};
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { Button } from "./components/Button/Button.js";
|
|
2
2
|
import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
|
|
3
|
-
import {
|
|
3
|
+
import { I } from "./Input-BFFPzelg.js";
|
|
4
4
|
import { EInputSize, EInputVariant } from "./components/Input/constants.js";
|
|
5
|
+
import { TextArea } from "./components/TextArea/TextArea.js";
|
|
5
6
|
import { InputPassword } from "./components/InputPassword/InputPassword.js";
|
|
6
7
|
import { InputPhoneNumber } from "./components/InputPhoneNumber/InputPhoneNumber.js";
|
|
7
8
|
import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./components/InputPhoneNumber/utils.js";
|
|
@@ -42,6 +43,7 @@ import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.j
|
|
|
42
43
|
import { useInterval } from "./hooks/useInterval/useInterval.js";
|
|
43
44
|
import { useTimer } from "./hooks/useTimer/index.js";
|
|
44
45
|
import { useCopyToClipboard } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
|
|
46
|
+
import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
|
|
45
47
|
import { Icon } from "./icons/Icon.js";
|
|
46
48
|
import { formating } from "./utils/index.js";
|
|
47
49
|
import './assets/index.css';export {
|
|
@@ -74,7 +76,7 @@ import './assets/index.css';export {
|
|
|
74
76
|
EVoteSize,
|
|
75
77
|
Icon,
|
|
76
78
|
AppImage as Image,
|
|
77
|
-
Input,
|
|
79
|
+
I as Input,
|
|
78
80
|
InputPassword,
|
|
79
81
|
InputPhoneNumber,
|
|
80
82
|
Loader,
|
|
@@ -88,6 +90,7 @@ import './assets/index.css';export {
|
|
|
88
90
|
Switch,
|
|
89
91
|
TabTrail,
|
|
90
92
|
Tag,
|
|
93
|
+
TextArea,
|
|
91
94
|
Timer,
|
|
92
95
|
ToastProvider,
|
|
93
96
|
Uploader,
|
|
@@ -100,6 +103,7 @@ import './assets/index.css';export {
|
|
|
100
103
|
useInterval,
|
|
101
104
|
useLockBodyScroll,
|
|
102
105
|
useMediaQuery,
|
|
106
|
+
useMergeRefs,
|
|
103
107
|
useTimer,
|
|
104
108
|
useToast
|
|
105
109
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mimir-ui-kit",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.16.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"exports": {
|
|
7
7
|
".": {
|
|
@@ -107,8 +107,7 @@
|
|
|
107
107
|
"@headlessui/react": "^2.1.2",
|
|
108
108
|
"react": "^18.3.1",
|
|
109
109
|
"react-dom": "^18.3.1",
|
|
110
|
-
"swiper": "^11.1.5"
|
|
111
|
-
"react-window": "^1.8.10"
|
|
110
|
+
"swiper": "^11.1.5"
|
|
112
111
|
},
|
|
113
112
|
"husky": {
|
|
114
113
|
"hooks": {
|