@arthurzakharov/ui-kit 1.0.6 → 1.0.7
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/card-image-DQ9c4G_r.css +1 -0
- package/dist/assets/card-text-fgHu9TyO.css +1 -0
- package/dist/assets/checkbox-n_3O8ZLW.css +1 -0
- package/dist/assets/dropdown-DKR8xas9.css +1 -0
- package/dist/assets/radio-BkD7BKk0.css +1 -0
- package/dist/assets/text-Dt0DeN-I.css +1 -0
- package/dist/assets/textarea-qkrRnSO5.css +1 -0
- package/dist/components/certifications/certifications.component.d.ts +5 -1
- package/dist/components/control/components/box/box.component.d.ts +9 -1
- package/dist/components/control/components/box/box.component.js +13 -13
- package/dist/components/control/components/button/button.component.d.ts +12 -1
- package/dist/components/control/components/button/button.component.js +26 -26
- package/dist/components/control/components/card-image/card-image.component.d.ts +6 -1
- package/dist/components/control/components/card-image/card-image.component.js +57 -5
- package/dist/components/control/components/card-text/card-text.component.d.ts +5 -1
- package/dist/components/control/components/card-text/card-text.component.js +45 -5
- package/dist/components/control/components/checkbox/checkbox.component.d.ts +5 -1
- package/dist/components/control/components/checkbox/checkbox.component.js +49 -5
- package/dist/components/control/components/choice/choice.component.d.ts +8 -1
- package/dist/components/control/components/dropdown/dropdown.component.d.ts +14 -1
- package/dist/components/control/components/dropdown/dropdown.component.js +95 -9
- package/dist/components/control/components/hidden-input/hidden-input.component.d.ts +11 -1
- package/dist/components/control/components/hidden-input/hidden-input.component.js +14 -15
- package/dist/components/control/components/input/input.component.d.ts +7 -1
- package/dist/components/control/components/input/input.component.js +25 -25
- package/dist/components/control/components/label/label.component.d.ts +6 -1
- package/dist/components/control/components/radio/radio.component.d.ts +6 -1
- package/dist/components/control/components/radio/radio.component.js +54 -5
- package/dist/components/control/components/radio-label/radio-label.component.d.ts +16 -2
- package/dist/components/control/components/radio-text/radio-text.component.d.ts +6 -1
- package/dist/components/control/components/text/text.component.d.ts +6 -1
- package/dist/components/control/components/text/text.component.js +47 -5
- package/dist/components/control/components/textarea/textarea.component.d.ts +8 -1
- package/dist/components/control/components/textarea/textarea.component.js +34 -4
- package/dist/components/control/control.component.d.ts +17 -0
- package/dist/components/control/control.component.js +35 -0
- package/dist/main.d.ts +2 -2
- package/dist/main.js +1 -1
- package/dist/utils/converter/converter.d.ts +2 -1
- package/package.json +12 -4
- package/dist/assets/index-CqamBlbE.css +0 -1
- package/dist/components/certifications/certifications.types.d.ts +0 -5
- package/dist/components/certifications/certifications.types.js +0 -1
- package/dist/components/certifications/index.d.ts +0 -1
- package/dist/components/certifications/index.js +0 -4
- package/dist/components/control/components/box/box.types.d.ts +0 -9
- package/dist/components/control/components/box/box.types.js +0 -1
- package/dist/components/control/components/box/index.d.ts +0 -1
- package/dist/components/control/components/box/index.js +0 -4
- package/dist/components/control/components/button/button.types.d.ts +0 -16
- package/dist/components/control/components/button/button.types.js +0 -1
- package/dist/components/control/components/button/index.d.ts +0 -1
- package/dist/components/control/components/button/index.js +0 -4
- package/dist/components/control/components/card-image/card-image.types.d.ts +0 -6
- package/dist/components/control/components/card-image/card-image.types.js +0 -1
- package/dist/components/control/components/card-image/index.d.ts +0 -1
- package/dist/components/control/components/card-image/index.js +0 -4
- package/dist/components/control/components/card-text/card-text.types.d.ts +0 -5
- package/dist/components/control/components/card-text/card-text.types.js +0 -1
- package/dist/components/control/components/card-text/index.d.ts +0 -1
- package/dist/components/control/components/card-text/index.js +0 -4
- package/dist/components/control/components/checkbox/checkbox.types.d.ts +0 -5
- package/dist/components/control/components/checkbox/checkbox.types.js +0 -1
- package/dist/components/control/components/checkbox/index.d.ts +0 -1
- package/dist/components/control/components/checkbox/index.js +0 -4
- package/dist/components/control/components/choice/choice.types.d.ts +0 -8
- package/dist/components/control/components/choice/choice.types.js +0 -1
- package/dist/components/control/components/choice/index.d.ts +0 -1
- package/dist/components/control/components/choice/index.js +0 -4
- package/dist/components/control/components/dropdown/dropdown.types.d.ts +0 -14
- package/dist/components/control/components/dropdown/dropdown.types.js +0 -1
- package/dist/components/control/components/dropdown/index.d.ts +0 -1
- package/dist/components/control/components/dropdown/index.js +0 -4
- package/dist/components/control/components/hidden-input/hidden-input.types.d.ts +0 -11
- package/dist/components/control/components/hidden-input/hidden-input.types.js +0 -1
- package/dist/components/control/components/hidden-input/index.d.ts +0 -1
- package/dist/components/control/components/hidden-input/index.js +0 -4
- package/dist/components/control/components/input/index.d.ts +0 -1
- package/dist/components/control/components/input/index.js +0 -4
- package/dist/components/control/components/input/input.types.d.ts +0 -7
- package/dist/components/control/components/input/input.types.js +0 -1
- package/dist/components/control/components/label/index.d.ts +0 -1
- package/dist/components/control/components/label/index.js +0 -4
- package/dist/components/control/components/label/label.types.d.ts +0 -8
- package/dist/components/control/components/label/label.types.js +0 -1
- package/dist/components/control/components/radio/index.d.ts +0 -1
- package/dist/components/control/components/radio/index.js +0 -4
- package/dist/components/control/components/radio/radio.types.d.ts +0 -6
- package/dist/components/control/components/radio/radio.types.js +0 -1
- package/dist/components/control/components/radio-label/index.d.ts +0 -1
- package/dist/components/control/components/radio-label/index.js +0 -4
- package/dist/components/control/components/radio-label/radio-label.types.d.ts +0 -17
- package/dist/components/control/components/radio-label/radio-label.types.js +0 -1
- package/dist/components/control/components/radio-text/index.d.ts +0 -1
- package/dist/components/control/components/radio-text/index.js +0 -4
- package/dist/components/control/components/radio-text/radio-text.types.d.ts +0 -6
- package/dist/components/control/components/radio-text/radio-text.types.js +0 -1
- package/dist/components/control/components/text/index.d.ts +0 -1
- package/dist/components/control/components/text/index.js +0 -4
- package/dist/components/control/components/text/text.types.d.ts +0 -6
- package/dist/components/control/components/text/text.types.js +0 -1
- package/dist/components/control/components/textarea/index.d.ts +0 -1
- package/dist/components/control/components/textarea/index.js +0 -4
- package/dist/components/control/components/textarea/textarea.types.d.ts +0 -8
- package/dist/components/control/components/textarea/textarea.types.js +0 -1
- package/dist/components/control/hooks/index.d.ts +0 -1
- package/dist/components/control/hooks/index.js +0 -4
- package/dist/components/control/hooks/useChoice/index.d.ts +0 -1
- package/dist/components/control/hooks/useChoice/index.js +0 -4
- package/dist/components/control/index.d.ts +0 -17
- package/dist/components/control/index.js +0 -12
- package/dist/components/control/types.js +0 -1
- package/dist/components/control/utils/index.d.ts +0 -1
- package/dist/components/control/utils/index.js +0 -6
- package/dist/enums.d.ts +0 -14
- package/dist/enums.js +0 -4
- package/dist/index-DtupH5zG.js +0 -405
- package/dist/types.d.ts +0 -3
- package/dist/types.js +0 -1
- package/dist/utils/converter/index.d.ts +0 -1
- package/dist/utils/converter/index.js +0 -4
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.js +0 -6
- package/dist/utils/time/index.d.ts +0 -1
- package/dist/utils/time/index.js +0 -4
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import '../../../../assets/input-DTN-3ZET.css';const
|
|
3
|
-
Input:
|
|
1
|
+
import { jsx as f } from "react/jsx-runtime";
|
|
2
|
+
import '../../../../assets/input-DTN-3ZET.css';const m = "_Input_1vr20_1", a = {
|
|
3
|
+
Input: m,
|
|
4
4
|
"autofill-start": "_autofill-start_1vr20_1",
|
|
5
5
|
"autofill-cancel": "_autofill-cancel_1vr20_1"
|
|
6
|
-
},
|
|
7
|
-
id:
|
|
8
|
-
value:
|
|
9
|
-
disabled:
|
|
10
|
-
type:
|
|
11
|
-
onAutofill:
|
|
6
|
+
}, _ = ({
|
|
7
|
+
id: t,
|
|
8
|
+
value: n,
|
|
9
|
+
disabled: o = !1,
|
|
10
|
+
type: u = "text",
|
|
11
|
+
onAutofill: c,
|
|
12
12
|
onAutofillCancel: e,
|
|
13
|
-
onChange:
|
|
14
|
-
onFocus:
|
|
15
|
-
onBlur:
|
|
16
|
-
}) => /* @__PURE__ */
|
|
13
|
+
onChange: r,
|
|
14
|
+
onFocus: i,
|
|
15
|
+
onBlur: s
|
|
16
|
+
}) => /* @__PURE__ */ f(
|
|
17
17
|
"input",
|
|
18
18
|
{
|
|
19
19
|
"data-testid": "input",
|
|
20
|
-
disabled:
|
|
21
|
-
type:
|
|
22
|
-
id:
|
|
23
|
-
name:
|
|
24
|
-
value:
|
|
25
|
-
className:
|
|
26
|
-
onChange: (
|
|
27
|
-
onAnimationStart: (
|
|
28
|
-
|
|
20
|
+
disabled: o,
|
|
21
|
+
type: u,
|
|
22
|
+
id: t,
|
|
23
|
+
name: t,
|
|
24
|
+
value: n,
|
|
25
|
+
className: a.Input,
|
|
26
|
+
onChange: (l) => r(l.target.value, t, "keyboard"),
|
|
27
|
+
onAnimationStart: (l) => {
|
|
28
|
+
l.animationName === a["autofill-start"] && c?.call(null, t), l.animationName === a["autofill-cancel"] && e?.call(null, t);
|
|
29
29
|
},
|
|
30
|
-
onFocus: () =>
|
|
31
|
-
onBlur: () =>
|
|
30
|
+
onFocus: () => i?.call(null, t),
|
|
31
|
+
onBlur: () => s?.call(null, t)
|
|
32
32
|
}
|
|
33
33
|
);
|
|
34
34
|
export {
|
|
35
|
-
|
|
35
|
+
_ as Input
|
|
36
36
|
};
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PropsWithChildren } from 'react';
|
|
2
|
+
import { State } from '../../types';
|
|
3
|
+
export interface LabelProps extends PropsWithChildren {
|
|
4
|
+
state?: State;
|
|
5
|
+
position?: 'idle' | 'active';
|
|
6
|
+
}
|
|
2
7
|
export declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Interactive, RadioChoice, State } from '../../types';
|
|
2
|
+
export interface RadioProps extends Interactive<string> {
|
|
3
|
+
orientation: 'horizontal' | 'vertical';
|
|
4
|
+
choices: RadioChoice[];
|
|
5
|
+
state?: State;
|
|
6
|
+
}
|
|
2
7
|
export declare const Radio: (props: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,56 @@
|
|
|
1
|
-
import "react/jsx-runtime";
|
|
2
|
-
import "clsx";
|
|
3
|
-
import {
|
|
4
|
-
import "
|
|
1
|
+
import { jsx as o, jsxs as v } from "react/jsx-runtime";
|
|
2
|
+
import O from "clsx";
|
|
3
|
+
import { Choice as h } from "../choice/choice.component.js";
|
|
4
|
+
import { HiddenInput as z } from "../hidden-input/hidden-input.component.js";
|
|
5
|
+
import { RadioLabel as L } from "../radio-label/radio-label.component.js";
|
|
6
|
+
import { RadioText as x } from "../radio-text/radio-text.component.js";
|
|
7
|
+
import { getChoiceId as H } from "../../utils/utils.js";
|
|
8
|
+
import '../../../../assets/radio-BkD7BKk0.css';const g = "_Radio_1wc8m_1", w = "_RadioOrientationHorizontal_1wc8m_5", C = "_RadioOrientationVertical_1wc8m_10", V = "_RadioLabel_1wc8m_15", a = {
|
|
9
|
+
Radio: g,
|
|
10
|
+
RadioOrientationHorizontal: w,
|
|
11
|
+
RadioOrientationVertical: C,
|
|
12
|
+
RadioLabel: V
|
|
13
|
+
}, A = (l) => {
|
|
14
|
+
const { orientation: r, choices: s, state: m = "idle", id: t, value: c, disabled: d = !1, onChange: R } = l;
|
|
15
|
+
return /* @__PURE__ */ o(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
className: O(a.Radio, {
|
|
19
|
+
[a.RadioOrientationHorizontal]: r === "horizontal",
|
|
20
|
+
[a.RadioOrientationVertical]: r === "vertical"
|
|
21
|
+
}),
|
|
22
|
+
children: s.map((i, p, _) => {
|
|
23
|
+
const e = H(t, i.value, p);
|
|
24
|
+
return /* @__PURE__ */ o(L, { id: e, value: c, state: m, choice: i, choices: _, children: ({ focused: b, hovered: f, checked: n, state: u }) => /* @__PURE__ */ v("div", { className: a.RadioLabel, children: [
|
|
25
|
+
/* @__PURE__ */ o(
|
|
26
|
+
h,
|
|
27
|
+
{
|
|
28
|
+
type: "radio",
|
|
29
|
+
state: u,
|
|
30
|
+
checked: n,
|
|
31
|
+
focused: b,
|
|
32
|
+
hovered: f,
|
|
33
|
+
disabled: d
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ o(
|
|
37
|
+
z,
|
|
38
|
+
{
|
|
39
|
+
type: "radio",
|
|
40
|
+
id: e,
|
|
41
|
+
value: i.value,
|
|
42
|
+
name: t,
|
|
43
|
+
checked: n,
|
|
44
|
+
disabled: d,
|
|
45
|
+
onChange: () => R(i.value, t)
|
|
46
|
+
}
|
|
47
|
+
),
|
|
48
|
+
/* @__PURE__ */ o(x, { size: "lg", checked: n, children: i.label })
|
|
49
|
+
] }) }, e);
|
|
50
|
+
})
|
|
51
|
+
}
|
|
52
|
+
);
|
|
53
|
+
};
|
|
5
54
|
export {
|
|
6
|
-
|
|
55
|
+
A as Radio
|
|
7
56
|
};
|
|
@@ -1,3 +1,17 @@
|
|
|
1
|
-
import { ChoiceValue } from '../../types';
|
|
2
|
-
import {
|
|
1
|
+
import { ChoiceValue, RadioChoice, State } from '../../types';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export interface RadioLabelChild {
|
|
4
|
+
focused: boolean;
|
|
5
|
+
hovered: boolean;
|
|
6
|
+
checked: boolean;
|
|
7
|
+
state?: State;
|
|
8
|
+
}
|
|
9
|
+
export interface RadioLabelProps<T extends ChoiceValue> {
|
|
10
|
+
id: string;
|
|
11
|
+
value: T;
|
|
12
|
+
choice: RadioChoice;
|
|
13
|
+
choices?: RadioChoice[];
|
|
14
|
+
state?: State;
|
|
15
|
+
children: (props: RadioLabelChild) => ReactNode;
|
|
16
|
+
}
|
|
3
17
|
export declare const RadioLabel: <T extends ChoiceValue>(props: RadioLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
export interface RadioTextProps {
|
|
2
|
+
children: string;
|
|
3
|
+
size: 'md' | 'lg';
|
|
4
|
+
checked: boolean;
|
|
5
|
+
oneLine?: boolean;
|
|
6
|
+
}
|
|
2
7
|
export declare const RadioText: (props: RadioTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { State } from '../../types';
|
|
2
|
+
import { InputProps } from '../input/input.component';
|
|
3
|
+
export interface TextProps extends InputProps {
|
|
4
|
+
label: string;
|
|
5
|
+
state?: State;
|
|
6
|
+
}
|
|
2
7
|
export declare const Text: (props: TextProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,49 @@
|
|
|
1
|
-
import "react/jsx-runtime";
|
|
2
|
-
import "clsx";
|
|
3
|
-
import "usehooks-ts";
|
|
4
|
-
import {
|
|
1
|
+
import { jsx as t, jsxs as A } from "react/jsx-runtime";
|
|
2
|
+
import h from "clsx";
|
|
3
|
+
import { useBoolean as F, useToggle as g } from "usehooks-ts";
|
|
4
|
+
import { Input as B } from "../input/input.component.js";
|
|
5
|
+
import { Label as j } from "../label/label.component.js";
|
|
6
|
+
import { Box as k } from "../box/box.component.js";
|
|
7
|
+
import '../../../../assets/text-Dt0DeN-I.css';const C = "_Text_1ble1_1", N = "_TextLabel_1ble1_17", y = "_TextLabelIdle_1ble1_23", $ = "_TextLabelActive_1ble1_28", l = {
|
|
8
|
+
Text: C,
|
|
9
|
+
TextLabel: N,
|
|
10
|
+
TextLabelIdle: y,
|
|
11
|
+
TextLabelActive: $
|
|
12
|
+
}, H = (x) => {
|
|
13
|
+
const { label: u, state: s = "idle", type: b = "text", id: a, value: e, disabled: d = !1, onChange: T, onFocus: m, onBlur: f } = x, { value: o, setTrue: c, setFalse: i } = F(!0), [L, r] = g(), p = () => {
|
|
14
|
+
i();
|
|
15
|
+
}, _ = () => {
|
|
16
|
+
e || c();
|
|
17
|
+
}, v = (n) => {
|
|
18
|
+
e || i(), r(), m?.call(null, n);
|
|
19
|
+
}, I = (n) => {
|
|
20
|
+
e || c(), r(), f?.call(null, n);
|
|
21
|
+
};
|
|
22
|
+
return /* @__PURE__ */ t(k, { state: s, focused: L, children: /* @__PURE__ */ A("label", { htmlFor: a, className: l.Text, children: [
|
|
23
|
+
/* @__PURE__ */ t(
|
|
24
|
+
"div",
|
|
25
|
+
{
|
|
26
|
+
"data-testid": "text-label",
|
|
27
|
+
className: h(l.TextLabel, !o || e ? l.TextLabelActive : l.TextLabelIdle),
|
|
28
|
+
children: /* @__PURE__ */ t(j, { position: o ? "idle" : "active", state: o ? "idle" : s, children: u })
|
|
29
|
+
}
|
|
30
|
+
),
|
|
31
|
+
/* @__PURE__ */ t(
|
|
32
|
+
B,
|
|
33
|
+
{
|
|
34
|
+
disabled: d,
|
|
35
|
+
type: b,
|
|
36
|
+
id: a,
|
|
37
|
+
value: e,
|
|
38
|
+
onChange: T,
|
|
39
|
+
onAutofill: p,
|
|
40
|
+
onAutofillCancel: _,
|
|
41
|
+
onFocus: v,
|
|
42
|
+
onBlur: I
|
|
43
|
+
}
|
|
44
|
+
)
|
|
45
|
+
] }) });
|
|
46
|
+
};
|
|
5
47
|
export {
|
|
6
|
-
|
|
48
|
+
H as Text
|
|
7
49
|
};
|
|
@@ -1,2 +1,9 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Interactive, State } from '../../types';
|
|
2
|
+
export interface TextareaProps extends Interactive<string> {
|
|
3
|
+
state?: State;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
rows?: number;
|
|
6
|
+
onAutofill?: (id: string) => void;
|
|
7
|
+
onAutofillCancel?: (id: string) => void;
|
|
8
|
+
}
|
|
2
9
|
export declare const Textarea: (props: TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,6 +1,36 @@
|
|
|
1
|
-
import "react/jsx-runtime";
|
|
2
|
-
import "usehooks-ts";
|
|
3
|
-
import {
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { useBoolean as h, useToggle as v } from "usehooks-ts";
|
|
3
|
+
import { Box as k } from "../box/box.component.js";
|
|
4
|
+
import '../../../../assets/textarea-qkrRnSO5.css';const N = "_Textarea_1ltsl_1", l = {
|
|
5
|
+
Textarea: N,
|
|
6
|
+
"autofill-start": "_autofill-start_1ltsl_1",
|
|
7
|
+
"autofill-cancel": "_autofill-cancel_1ltsl_1"
|
|
8
|
+
}, I = (i) => {
|
|
9
|
+
const { state: c = "idle", placeholder: u = "", rows: f = 5, id: e, value: t, disabled: d = !1, onChange: m, onFocus: x, onBlur: T } = i, { value: _, setTrue: o, setFalse: s } = h(!0), [g, n] = v(!1), p = (a) => {
|
|
10
|
+
a.animationName === l["autofill-start"] && s(), a.animationName === l["autofill-cancel"] && !t && o();
|
|
11
|
+
}, B = (a) => {
|
|
12
|
+
t || s(), n(), x?.call(null, a);
|
|
13
|
+
}, F = (a) => {
|
|
14
|
+
t || o(), n(), T?.call(null, a);
|
|
15
|
+
};
|
|
16
|
+
return /* @__PURE__ */ r(k, { state: c, focused: g, children: /* @__PURE__ */ r(
|
|
17
|
+
"textarea",
|
|
18
|
+
{
|
|
19
|
+
"data-testid": "textarea",
|
|
20
|
+
"data-is-idle": _,
|
|
21
|
+
disabled: d,
|
|
22
|
+
id: e,
|
|
23
|
+
rows: f,
|
|
24
|
+
placeholder: u,
|
|
25
|
+
value: t,
|
|
26
|
+
className: l.Textarea,
|
|
27
|
+
onChange: (a) => m(a.target.value, e, "keyboard"),
|
|
28
|
+
onAnimationStart: p,
|
|
29
|
+
onFocus: () => B(e),
|
|
30
|
+
onBlur: () => F(e)
|
|
31
|
+
}
|
|
32
|
+
) });
|
|
33
|
+
};
|
|
4
34
|
export {
|
|
5
|
-
|
|
35
|
+
I as Textarea
|
|
6
36
|
};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const Control: {
|
|
2
|
+
Box: import('react').ForwardRefExoticComponent<import('./components/box/box.component').BoxProps & import('react').RefAttributes<HTMLDivElement>>;
|
|
3
|
+
Button: (props: import('./components/button/button.component').ButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
CardImage: (props: import('./components/card-image/card-image.component').CardImageProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
CardText: (props: import('./components/card-text/card-text.component').CardTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
Checkbox: (props: import('./components/checkbox/checkbox.component').CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
Choice: (props: import('./components/choice/choice.component').ChoiceProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
Dropdown: (props: import('./components/dropdown/dropdown.component').DropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
HiddenInput: (props: import('./components/hidden-input/hidden-input.component').HiddenInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
Input: ({ id, value, disabled, type, onAutofill, onAutofillCancel, onChange, onFocus, onBlur, }: import('./components/input/input.component').InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
Label: (props: import('./components/label/label.component').LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
Radio: (props: import('./components/radio/radio.component').RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
RadioLabel: <T extends import('./types').ChoiceValue>(props: import('./components/radio-label/radio-label.component').RadioLabelProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
RadioText: (props: import('./components/radio-text/radio-text.component').RadioTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
Text: (props: import('./components/text/text.component').TextProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
Textarea: (props: import('./components/textarea/textarea.component').TextareaProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { Box as o } from "./components/box/box.component.js";
|
|
2
|
+
import { Button as r } from "./components/button/button.component.js";
|
|
3
|
+
import { CardImage as m } from "./components/card-image/card-image.component.js";
|
|
4
|
+
import { CardText as t } from "./components/card-text/card-text.component.js";
|
|
5
|
+
import { Checkbox as i } from "./components/checkbox/checkbox.component.js";
|
|
6
|
+
import { Choice as p } from "./components/choice/choice.component.js";
|
|
7
|
+
import { Dropdown as f } from "./components/dropdown/dropdown.component.js";
|
|
8
|
+
import { HiddenInput as e } from "./components/hidden-input/hidden-input.component.js";
|
|
9
|
+
import { Input as a } from "./components/input/input.component.js";
|
|
10
|
+
import { Label as d } from "./components/label/label.component.js";
|
|
11
|
+
import { Radio as n } from "./components/radio/radio.component.js";
|
|
12
|
+
import { RadioLabel as x } from "./components/radio-label/radio-label.component.js";
|
|
13
|
+
import { RadioText as C } from "./components/radio-text/radio-text.component.js";
|
|
14
|
+
import { Text as T } from "./components/text/text.component.js";
|
|
15
|
+
import { Textarea as b } from "./components/textarea/textarea.component.js";
|
|
16
|
+
const q = {
|
|
17
|
+
Box: o,
|
|
18
|
+
Button: r,
|
|
19
|
+
CardImage: m,
|
|
20
|
+
CardText: t,
|
|
21
|
+
Checkbox: i,
|
|
22
|
+
Choice: p,
|
|
23
|
+
Dropdown: f,
|
|
24
|
+
HiddenInput: e,
|
|
25
|
+
Input: a,
|
|
26
|
+
Label: d,
|
|
27
|
+
Radio: n,
|
|
28
|
+
RadioLabel: x,
|
|
29
|
+
RadioText: C,
|
|
30
|
+
Text: T,
|
|
31
|
+
Textarea: b
|
|
32
|
+
};
|
|
33
|
+
export {
|
|
34
|
+
q as Control
|
|
35
|
+
};
|
package/dist/main.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { Certifications } from './components/certifications';
|
|
2
|
-
export { Control } from './components/control';
|
|
1
|
+
export { Certifications } from './components/certifications/certifications.component';
|
|
2
|
+
export { Control } from './components/control/control.component';
|
package/dist/main.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Certifications as t } from "./components/certifications/certifications.component.js";
|
|
2
|
-
import {
|
|
2
|
+
import { Control as f } from "./components/control/control.component.js";
|
|
3
3
|
import './assets/main-C0tWHTEq.css';export {
|
|
4
4
|
t as Certifications,
|
|
5
5
|
f as Control
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
type DatePrecision = 'month' | 'day';
|
|
2
2
|
export declare abstract class Converter {
|
|
3
3
|
private static formatNumberWithLeadingZero;
|
|
4
4
|
private static maskExplanation;
|
|
@@ -35,3 +35,4 @@ export declare abstract class Converter {
|
|
|
35
35
|
FromArrayToMultiple: (value: string[]) => string;
|
|
36
36
|
};
|
|
37
37
|
}
|
|
38
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arthurzakharov/ui-kit",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.7",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/main.js",
|
|
7
7
|
"types": "dist/main.d.ts",
|
|
@@ -19,6 +19,8 @@
|
|
|
19
19
|
},
|
|
20
20
|
"scripts": {
|
|
21
21
|
"build": "tsc && vite build --logLevel info",
|
|
22
|
+
"lint:check": "eslint . --ext ts,tsx",
|
|
23
|
+
"lint:fix": "eslint . --fix",
|
|
22
24
|
"prettier:check": "prettier --check --log-level=log .",
|
|
23
25
|
"prettier:fix": "prettier --write --log-level=log .",
|
|
24
26
|
"storybook": "storybook dev -p 6006",
|
|
@@ -40,8 +42,14 @@
|
|
|
40
42
|
"@testing-library/react": "^15.0.7",
|
|
41
43
|
"@types/node": "^24.1.0",
|
|
42
44
|
"@types/react": "^18.3.27",
|
|
45
|
+
"@typescript-eslint/eslint-plugin": "^8.52.0",
|
|
46
|
+
"@typescript-eslint/parser": "^8.52.0",
|
|
43
47
|
"@vitejs/plugin-react": "^5.1.2",
|
|
44
48
|
"clsx": "^2.1.1",
|
|
49
|
+
"eslint": "^9.39.2",
|
|
50
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
51
|
+
"eslint-plugin-react-refresh": "^0.4.26",
|
|
52
|
+
"eslint-plugin-storybook": "^10.1.11",
|
|
45
53
|
"glob": "^13.0.0",
|
|
46
54
|
"globals": "^17.0.0",
|
|
47
55
|
"jsdom": "^27.4.0",
|
|
@@ -50,10 +58,10 @@
|
|
|
50
58
|
"react": "^18.3.1",
|
|
51
59
|
"react-dom": "^18.3.1",
|
|
52
60
|
"storybook": "^10.1.11",
|
|
53
|
-
"typescript": "^5.
|
|
54
|
-
"typescript-eslint": "^8.
|
|
61
|
+
"typescript": "^5.9.3",
|
|
62
|
+
"typescript-eslint": "^8.52.0",
|
|
55
63
|
"usehooks-ts": "^3.1.1",
|
|
56
|
-
"vite": "^
|
|
64
|
+
"vite": "^7.3.1",
|
|
57
65
|
"vite-plugin-dts": "^4.5.4",
|
|
58
66
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
59
67
|
"vitest": "^4.0.16"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._CardImage_dw1xq_1{--font-size: 12px;--line-height: 14px;--img-size: 110px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--rm-ui-padding-xs)}._CardImageContent_dw1xq_13{width:135px;height:130px;padding:6px;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}._CardImageContent_dw1xq_13:hover{cursor:pointer}._CardImageTop_dw1xq_27{position:relative;flex-grow:1}._CardImageWrap_dw1xq_32{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--img-size);height:var(--img-size);background-repeat:no-repeat;background-size:700%}._CardImageBottom_dw1xq_43{flex-basis:calc(var(--line-height) * 2);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:var(--rm-ui-padding-xs)}._CardText_1eht8_1{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--rm-ui-padding-sm)}._CardTextLabel_1eht8_9{position:relative;padding:var(--rm-ui-padding-md) var(--rm-ui-padding-sm);flex-basis:100%;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._CardTextLabel_1eht8_9:hover{cursor:pointer}._CardTextChoice_1eht8_24{display:flex;flex-direction:row;align-items:center;justify-content:center}._Checkbox_1l6ko_1{position:relative;display:inline-flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Checkbox_1l6ko_1:hover{cursor:pointer}._CheckboxChoice_1l6ko_14{position:relative;left:0;top:3px}._CheckboxContent_1l6ko_20{font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-primary)}._CheckboxContent_1l6ko_20 button{background-color:transparent;border:none;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:var(--rm-ui-color-action)}._CheckboxContent_1l6ko_20 button:hover{cursor:pointer;text-decoration:underline}._Dropdown_152mp_1{--transition-time: .2s;--under-chevron: linear-gradient(90deg, rgba(255, 255, 255, 0) -10%, rgba(255, 255, 255, .5411764706) 25%, #fff 50%);--border-radius: 3px;position:relative;font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body-small);line-height:var(--rm-ui-line-height-body-small);color:var(--rm-ui-color-primary);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xxs)}._DropdownBorder_152mp_17{position:relative;min-height:60px;flex-grow:1;display:flex;align-items:center;justify-content:flex-start;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);overflow:hidden}._DropdownContent_152mp_28{display:flex;flex-direction:column;align-items:flex-start;justify-content:center}._DropdownBorder_152mp_17:hover{cursor:pointer}._DropdownChevron_152mp_39{width:24px;height:24px;transition:transform var(--transition-time) ease-out}._DropdownChevron_152mp_39[data-open=false]{transform:rotate(0)}._DropdownChevron_152mp_39[data-open=true]{transform:rotate(180deg)}._DropdownChevronWrap_152mp_53{position:absolute;z-index:1;right:0;top:50%;transform:translateY(-50%);background:var(--under-chevron);border-radius:10px;width:80px;height:100%;padding-right:var(--rm-ui-padding-sm);display:flex;justify-content:flex-end;align-items:center}._DropdownBox_152mp_69{flex-grow:1;border-radius:10px;background-color:var(--rm-ui-grey-50)}._DropdownBoxVisible_152mp_75{display:block}._DropdownBoxHidden_152mp_79{display:none}._DropdownSearch_152mp_83{position:relative;border-bottom:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm)}._DropdownSearchVisible_152mp_89{display:block}._DropdownSearchHidden_152mp_93{display:none}._DropdownClose_152mp_97{border-top:1px var(--rm-ui-grey-300) solid;padding:var(--rm-ui-padding-sm);display:flex;flex-direction:row;align-items:center;justify-content:flex-end}._DropdownInput_152mp_106{width:100%;border-radius:10px;padding:var(--rm-ui-padding-xs) calc(var(--rm-ui-padding-sm) * 2 + 12px) var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);border:1px var(--rm-ui-grey-300) solid;box-sizing:border-box;font-family:var(--rm-ui-font-family-regular),sans-serif;font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-primary);outline-color:var(--rm-ui-color-accent-primary)}._DropdownGlass_152mp_120{position:absolute;z-index:1;right:calc(var(--rm-ui-padding-sm) * 2);top:50%;transform:translateY(-50%);width:24px;height:24px;color:var(--rm-ui-grey-300)}._DropdownChoices_152mp_131{list-style:none;margin:0;padding:0;max-height:228px;overflow-y:scroll;border-radius:10px}._DropdownChoice_152mp_131{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-sm);padding:6px var(--rm-ui-padding-sm)}._DropdownChoice_152mp_131:hover{cursor:pointer;background-color:#fff}._DropdownChoiceNoResult_152mp_154{color:var(--rm-ui-grey-600);text-align:center}html[dir=rtl] ._DropdownGlass_152mp_120{left:31px;right:initial}html[dir=rtl] ._DropdownChevronWrap_152mp_53{left:19px;right:initial}._Radio_1wc8m_1{display:inline-flex}._RadioOrientationHorizontal_1wc8m_5{flex-direction:row;gap:var(--rm-ui-padding-lg)}._RadioOrientationVertical_1wc8m_10{flex-direction:column;gap:var(--rm-ui-padding-xxs)}._RadioLabel_1wc8m_15{position:relative;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._RadioLabel_1wc8m_15:hover{cursor:pointer}._Text_1ble1_1{box-sizing:border-box;position:relative;flex-grow:1;height:58px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);display:flex;flex-direction:row;justify-content:stretch;align-items:flex-end}._Text_1ble1_1:hover{cursor:pointer}._TextLabel_1ble1_17{position:absolute;left:var(--rm-ui-padding-sm);transition:top .15s ease-out}._TextLabelIdle_1ble1_23{top:50%;transform:translateY(-50%)}._TextLabelActive_1ble1_28{top:var(--rm-ui-padding-xs);transform:translateY(0)}._Textarea_1ltsl_1{resize:none;outline:none;box-sizing:border-box;width:100%;border:none;border-radius:10px;padding:var(--rm-ui-padding-xs) var(--rm-ui-padding-sm);font-family:var(--rm-ui-font-family-medium),sans-serif;font-size:var(--rm-ui-font-size-body);line-height:var(--rm-ui-line-height-body);color:var(--rm-ui-color-primary)}._Textarea_1ltsl_1:hover{cursor:pointer}._Textarea_1ltsl_1:disabled{opacity:.33}._Textarea_1ltsl_1:disabled,._Textarea_1ltsl_1:-webkit-autofill,._Textarea_1ltsl_1:-webkit-autofill:hover,._Textarea_1ltsl_1:-webkit-autofill:focus,._Textarea_1ltsl_1:-webkit-autofill:active,._Textarea_1ltsl_1:autofill,._Textarea_1ltsl_1:autofill:hover,._Textarea_1ltsl_1:autofill:focus,._Textarea_1ltsl_1:autofill:active{background:transparent;transition:background 7200s ease-in-out 0s}._Textarea_1ltsl_1:-webkit-autofill{animation-name:_autofill-start_1ltsl_1;animation-duration:.1s;-webkit-text-fill-color:var(--rm-ui-grey-500)}._Textarea_1ltsl_1:not(:-webkit-autofill){animation-name:_autofill-cancel_1ltsl_1;animation-duration:.1s}@keyframes _autofill-start_1ltsl_1{}@keyframes _autofill-cancel_1ltsl_1{}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Certifications } from './certifications.component';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Box } from './box.component';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren } from 'react';
|
|
2
|
-
type ButtonColor = 'next' | 'previous';
|
|
3
|
-
type ButtonSize = 'sm' | 'md' | 'lg';
|
|
4
|
-
type ButtonType = 'submit' | 'reset' | 'button';
|
|
5
|
-
export interface ButtonProps extends PropsWithChildren {
|
|
6
|
-
color: ButtonColor;
|
|
7
|
-
size: ButtonSize;
|
|
8
|
-
type: ButtonType;
|
|
9
|
-
disabled?: boolean;
|
|
10
|
-
info?: string;
|
|
11
|
-
fullWidth?: boolean;
|
|
12
|
-
onClick?: () => void;
|
|
13
|
-
onFocus?: () => void;
|
|
14
|
-
onBlur?: () => void;
|
|
15
|
-
}
|
|
16
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Button } from './button.component';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { CardImage } from './card-image.component';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { CardText } from './card-text.component';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Checkbox } from './checkbox.component';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Choice } from './choice.component';
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
import { QuestionChoice } from '../../types';
|
|
2
|
-
export interface DropdownProps {
|
|
3
|
-
choices: QuestionChoice[];
|
|
4
|
-
value: QuestionChoice[];
|
|
5
|
-
label?: string;
|
|
6
|
-
placeholder?: string;
|
|
7
|
-
noResult?: string;
|
|
8
|
-
isSearchHidden?: boolean;
|
|
9
|
-
multiple?: boolean;
|
|
10
|
-
closeButton?: string;
|
|
11
|
-
onChange: (values: QuestionChoice[]) => void;
|
|
12
|
-
onOpen?: (height: number, width: number) => void;
|
|
13
|
-
onClose?: () => void;
|
|
14
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Dropdown } from './dropdown.component';
|