@arthurzakharov/ui-kit 1.0.42 → 1.0.44
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/checkbox-DQ3Y5rHZ.css +1 -0
- package/dist/assets/choice-pCBafXqx.css +1 -0
- package/dist/components/control/components/checkbox/checkbox.component.d.ts +2 -0
- package/dist/components/control/components/checkbox/checkbox.component.js +40 -29
- package/dist/components/control/components/choice/choice.component.d.ts +1 -0
- package/dist/components/control/components/choice/choice.component.js +39 -29
- package/dist/components/control/components/radio/radio.component.d.ts +2 -0
- package/dist/components/control/components/radio/radio.component.js +25 -24
- package/dist/components/sidebar/sidebar.component.d.ts +0 -3
- package/dist/components/sidebar/sidebar.component.js +22 -40
- package/package.json +1 -1
- package/dist/assets/checkbox-C8mg6gvd.css +0 -1
- package/dist/assets/choice-BEXd0fh0.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Checkbox_6s2ra_1{position:relative;display:inline-flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Checkbox_6s2ra_1:hover{cursor:pointer}._CheckboxChoice_6s2ra_14{position:relative;left:0;top:3px}._CheckboxContent_6s2ra_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-text-primary)}._CheckboxContent_6s2ra_20 button{background-color:transparent;border:none;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:var(--rm-ui-color-text-primary);text-decoration:underline}._CheckboxContent_6s2ra_20 button:hover{cursor:pointer;outline-offset:2px}._CheckboxContent_6s2ra_20 button:focus-visible{outline-color:var(--rm-ui-color-focus)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._Choice_188fk_1{margin:1px;position:relative;background-color:var(--rm-ui-card-background);outline-offset:0;outline:1px solid transparent;box-sizing:border-box;border-width:2px;border-style:solid;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;transition:outline-color .15s ease-out,background-color .15s ease-out,border-color .15s ease-out}._ChoiceFocused_188fk_24:not(._ChoiceDisabled_188fk_24){outline-color:var(--rm-ui-color-focus)}._ChoiceHovered_188fk_28._ChoiceStateIdle_188fk_28{background-color:var(--rm-ui-grey-300)}._ChoiceDisabled_188fk_24{opacity:.33}._ChoiceStateIdle_188fk_28{border-color:var(--rm-ui-grey-300)}._ChoiceStateSuccess_188fk_40{border-color:var(--rm-ui-color-action)}._ChoiceStateError_188fk_44{border-color:var(--rm-ui-color-error)}._ChoiceTypeRadio_188fk_50{border-radius:100%}._ChoiceTypeRadio_188fk_50._ChoiceChecked_188fk_54._ChoiceStateIdle_188fk_28,._ChoiceTypeRadio_188fk_50._ChoiceChecked_188fk_54._ChoiceStateSuccess_188fk_40{background-color:var(--rm-ui-color-action)}._ChoiceTypeRadio_188fk_50._ChoiceChecked_188fk_54._ChoiceStateError_188fk_44{background-color:var(--rm-ui-color-error)}._ChoiceTypeRadio_188fk_50 ._ChoiceMark_188fk_63{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background-color:transparent}._ChoiceTypeRadio_188fk_50._ChoiceSizeXs_188fk_73 ._ChoiceMark_188fk_63{width:6px;height:6px}._ChoiceTypeRadio_188fk_50._ChoiceSizeSm_188fk_78 ._ChoiceMark_188fk_63{width:7px;height:7px}._ChoiceTypeRadio_188fk_50._ChoiceSizeMd_188fk_83 ._ChoiceMark_188fk_63{width:8px;height:8px}._ChoiceTypeRadio_188fk_50._ChoiceSizeLg_188fk_88 ._ChoiceMark_188fk_63{width:9px;height:9px}._ChoiceTypeRadio_188fk_50._ChoiceSizeXl_188fk_93 ._ChoiceMark_188fk_63{width:10px;height:10px}._ChoiceTypeRadio_188fk_50._ChoiceChecked_188fk_54 ._ChoiceMark_188fk_63,._ChoiceTypeRadio_188fk_50._ChoiceHovered_188fk_28 ._ChoiceMark_188fk_63{background-color:var(--rm-ui-card-background)}._ChoiceTypeCheckbox_188fk_105{border-radius:4px}._ChoiceTypeCheckbox_188fk_105._ChoiceChecked_188fk_54._ChoiceStateIdle_188fk_28,._ChoiceTypeCheckbox_188fk_105._ChoiceChecked_188fk_54._ChoiceStateSuccess_188fk_40{background-color:var(--rm-ui-color-action)}._ChoiceTypeCheckbox_188fk_105._ChoiceChecked_188fk_54._ChoiceStateError_188fk_44{background-color:var(--rm-ui-color-error)}._ChoiceTypeCheckbox_188fk_105 ._ChoiceMark_188fk_63{position:absolute;content:"";top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;stroke-width:3px;stroke:transparent}._ChoiceTypeCheckbox_188fk_105._ChoiceSizeXs_188fk_73 ._ChoiceMark_188fk_63{width:8px;height:8px}._ChoiceTypeCheckbox_188fk_105._ChoiceSizeSm_188fk_78 ._ChoiceMark_188fk_63{width:10px;height:10px}._ChoiceTypeCheckbox_188fk_105._ChoiceSizeMd_188fk_83 ._ChoiceMark_188fk_63{width:12px;height:12px}._ChoiceTypeCheckbox_188fk_105._ChoiceSizeLg_188fk_88 ._ChoiceMark_188fk_63{width:14px;height:14px}._ChoiceTypeCheckbox_188fk_105._ChoiceSizeXl_188fk_93 ._ChoiceMark_188fk_63{width:16px;height:16px}._ChoiceTypeCheckbox_188fk_105._ChoiceChecked_188fk_54 ._ChoiceMark_188fk_63,._ChoiceTypeCheckbox_188fk_105._ChoiceHovered_188fk_28 ._ChoiceMark_188fk_63{stroke:var(--rm-ui-card-background)}._ChoiceSizeXs_188fk_73{width:14px;height:14px}._ChoiceSizeSm_188fk_78{width:16px;height:16px}._ChoiceSizeMd_188fk_83{width:18px;height:18px}._ChoiceSizeLg_188fk_88{width:20px;height:20px}._ChoiceSizeXl_188fk_93{width:22px;height:22px}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { Interactive, State } from '../../types';
|
|
3
|
+
import { ChoiceProps } from '../choice/choice.component';
|
|
3
4
|
export interface CheckboxProps extends PropsWithChildren, Interactive<boolean> {
|
|
4
5
|
state?: State;
|
|
6
|
+
size?: ChoiceProps['size'];
|
|
5
7
|
}
|
|
6
8
|
export declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,47 +1,58 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useToggle as
|
|
3
|
-
import { Choice as
|
|
4
|
-
import { HiddenInput as
|
|
5
|
-
import { Converter as
|
|
6
|
-
import '../../../../assets/checkbox-
|
|
7
|
-
Checkbox:
|
|
8
|
-
CheckboxChoice:
|
|
9
|
-
CheckboxContent:
|
|
10
|
-
}, D = (
|
|
11
|
-
const { children: u, state: k = "idle", id: o, value: n, disabled: e = !1, onChange:
|
|
12
|
-
e ||
|
|
13
|
-
},
|
|
14
|
-
e || (t.stopPropagation(),
|
|
15
|
-
}, f = () => {
|
|
16
|
-
e || (h(), b?.call(null, o));
|
|
1
|
+
import { jsxs as _, jsx as c } from "react/jsx-runtime";
|
|
2
|
+
import { useToggle as i } from "usehooks-ts";
|
|
3
|
+
import { Choice as B } from "../choice/choice.component.js";
|
|
4
|
+
import { HiddenInput as F } from "../hidden-input/hidden-input.component.js";
|
|
5
|
+
import { Converter as I } from "../../../../utils/converter/converter.js";
|
|
6
|
+
import '../../../../assets/checkbox-DQ3Y5rHZ.css';const N = "_Checkbox_6s2ra_1", j = "_CheckboxChoice_6s2ra_14", y = "_CheckboxContent_6s2ra_20", r = {
|
|
7
|
+
Checkbox: N,
|
|
8
|
+
CheckboxChoice: j,
|
|
9
|
+
CheckboxContent: y
|
|
10
|
+
}, D = (C) => {
|
|
11
|
+
const { children: u, state: k = "idle", size: b = "md", id: o, value: n, disabled: e = !1, onChange: s, onFocus: d, onBlur: x } = C, [l, a] = i(!1), [m, h] = i(!1), p = (t) => {
|
|
12
|
+
e || l || (t.preventDefault(), s(!n, o));
|
|
13
|
+
}, f = (t) => {
|
|
14
|
+
e || (t.stopPropagation(), s(!n, o));
|
|
17
15
|
}, g = () => {
|
|
18
|
-
e || (
|
|
16
|
+
e || (a(), d?.call(null, o));
|
|
17
|
+
}, v = () => {
|
|
18
|
+
e || (a(), x?.call(null, o));
|
|
19
19
|
};
|
|
20
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ _(
|
|
21
21
|
"label",
|
|
22
22
|
{
|
|
23
23
|
htmlFor: o,
|
|
24
|
-
className:
|
|
25
|
-
onClick:
|
|
26
|
-
onFocus:
|
|
27
|
-
onBlur:
|
|
28
|
-
onMouseEnter: () =>
|
|
29
|
-
onMouseLeave: () =>
|
|
24
|
+
className: r.Checkbox,
|
|
25
|
+
onClick: p,
|
|
26
|
+
onFocus: g,
|
|
27
|
+
onBlur: v,
|
|
28
|
+
onMouseEnter: () => h(),
|
|
29
|
+
onMouseLeave: () => h(),
|
|
30
30
|
children: [
|
|
31
31
|
/* @__PURE__ */ c(
|
|
32
|
-
|
|
32
|
+
F,
|
|
33
33
|
{
|
|
34
34
|
type: "checkbox",
|
|
35
35
|
id: o,
|
|
36
36
|
name: o,
|
|
37
|
-
value:
|
|
37
|
+
value: I.Boolean.ToBooleanString(n),
|
|
38
38
|
checked: n,
|
|
39
39
|
disabled: e,
|
|
40
|
-
onChange:
|
|
40
|
+
onChange: f
|
|
41
41
|
}
|
|
42
42
|
),
|
|
43
|
-
/* @__PURE__ */ c("div", { className:
|
|
44
|
-
|
|
43
|
+
/* @__PURE__ */ c("div", { className: r.CheckboxChoice, children: /* @__PURE__ */ c(
|
|
44
|
+
B,
|
|
45
|
+
{
|
|
46
|
+
type: "checkbox",
|
|
47
|
+
size: b,
|
|
48
|
+
state: k,
|
|
49
|
+
checked: n,
|
|
50
|
+
focused: l,
|
|
51
|
+
hovered: m,
|
|
52
|
+
disabled: e
|
|
53
|
+
}
|
|
54
|
+
) }),
|
|
55
|
+
/* @__PURE__ */ c("div", { className: r.CheckboxContent, children: u })
|
|
45
56
|
]
|
|
46
57
|
}
|
|
47
58
|
);
|
|
@@ -1,42 +1,52 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Check as
|
|
3
|
-
import
|
|
4
|
-
import '../../../../assets/choice-
|
|
5
|
-
Choice:
|
|
6
|
-
ChoiceFocused:
|
|
7
|
-
ChoiceDisabled:
|
|
8
|
-
ChoiceHovered:
|
|
9
|
-
ChoiceStateIdle:
|
|
10
|
-
ChoiceStateSuccess:
|
|
11
|
-
ChoiceStateError:
|
|
1
|
+
import { jsxs as a, jsx as C } from "react/jsx-runtime";
|
|
2
|
+
import { Check as S } from "lucide-react";
|
|
3
|
+
import r from "clsx";
|
|
4
|
+
import '../../../../assets/choice-pCBafXqx.css';const k = "_Choice_188fk_1", l = "_ChoiceFocused_188fk_24", f = "_ChoiceDisabled_188fk_24", n = "_ChoiceHovered_188fk_28", z = "_ChoiceStateIdle_188fk_28", m = "_ChoiceStateSuccess_188fk_40", p = "_ChoiceStateError_188fk_44", x = "_ChoiceTypeRadio_188fk_50", b = "_ChoiceChecked_188fk_54", u = "_ChoiceMark_188fk_63", y = "_ChoiceSizeXs_188fk_73", M = "_ChoiceSizeSm_188fk_78", T = "_ChoiceSizeMd_188fk_83", X = "_ChoiceSizeLg_188fk_88", v = "_ChoiceSizeXl_188fk_93", g = "_ChoiceTypeCheckbox_188fk_105", e = {
|
|
5
|
+
Choice: k,
|
|
6
|
+
ChoiceFocused: l,
|
|
7
|
+
ChoiceDisabled: f,
|
|
8
|
+
ChoiceHovered: n,
|
|
9
|
+
ChoiceStateIdle: z,
|
|
10
|
+
ChoiceStateSuccess: m,
|
|
11
|
+
ChoiceStateError: p,
|
|
12
12
|
ChoiceTypeRadio: x,
|
|
13
|
-
ChoiceChecked:
|
|
14
|
-
ChoiceMark:
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
ChoiceChecked: b,
|
|
14
|
+
ChoiceMark: u,
|
|
15
|
+
ChoiceSizeXs: y,
|
|
16
|
+
ChoiceSizeSm: M,
|
|
17
|
+
ChoiceSizeMd: T,
|
|
18
|
+
ChoiceSizeLg: X,
|
|
19
|
+
ChoiceSizeXl: v,
|
|
20
|
+
ChoiceTypeCheckbox: g
|
|
21
|
+
}, H = (s) => {
|
|
22
|
+
const { type: o, checked: h, state: i = "idle", size: c = "md", focused: t = !1, hovered: _ = !1, disabled: d = !1 } = s;
|
|
23
|
+
return /* @__PURE__ */ a(
|
|
19
24
|
"div",
|
|
20
25
|
{
|
|
21
26
|
"data-testid": "choice",
|
|
22
|
-
className:
|
|
27
|
+
className: r(e.Choice, {
|
|
23
28
|
[e.ChoiceChecked]: h,
|
|
24
|
-
[e.ChoiceFocused]:
|
|
25
|
-
[e.ChoiceHovered]:
|
|
26
|
-
[e.ChoiceDisabled]:
|
|
27
|
-
[e.ChoiceTypeRadio]:
|
|
28
|
-
[e.ChoiceTypeCheckbox]:
|
|
29
|
-
[e.ChoiceStateIdle]:
|
|
30
|
-
[e.ChoiceStateError]:
|
|
31
|
-
[e.ChoiceStateSuccess]:
|
|
29
|
+
[e.ChoiceFocused]: t,
|
|
30
|
+
[e.ChoiceHovered]: _,
|
|
31
|
+
[e.ChoiceDisabled]: d,
|
|
32
|
+
[e.ChoiceTypeRadio]: o === "radio",
|
|
33
|
+
[e.ChoiceTypeCheckbox]: o === "checkbox",
|
|
34
|
+
[e.ChoiceStateIdle]: i === "idle",
|
|
35
|
+
[e.ChoiceStateError]: i === "error",
|
|
36
|
+
[e.ChoiceStateSuccess]: i === "success" || h,
|
|
37
|
+
[e.ChoiceSizeXs]: c === "xs",
|
|
38
|
+
[e.ChoiceSizeSm]: c === "sm",
|
|
39
|
+
[e.ChoiceSizeMd]: c === "md",
|
|
40
|
+
[e.ChoiceSizeLg]: c === "lg",
|
|
41
|
+
[e.ChoiceSizeXl]: c === "xl"
|
|
32
42
|
}),
|
|
33
43
|
children: [
|
|
34
|
-
|
|
35
|
-
|
|
44
|
+
o === "radio" && /* @__PURE__ */ C("div", { className: e.ChoiceMark }),
|
|
45
|
+
o === "checkbox" && /* @__PURE__ */ C(S, { className: e.ChoiceMark })
|
|
36
46
|
]
|
|
37
47
|
}
|
|
38
48
|
);
|
|
39
49
|
};
|
|
40
50
|
export {
|
|
41
|
-
|
|
51
|
+
H as Choice
|
|
42
52
|
};
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
import { Interactive, RadioChoice, State } from '../../types';
|
|
2
|
+
import { ChoiceProps } from '../choice/choice.component';
|
|
2
3
|
export interface RadioProps extends Interactive<string> {
|
|
3
4
|
orientation: 'horizontal' | 'vertical';
|
|
4
5
|
choices: RadioChoice[];
|
|
5
6
|
state?: State;
|
|
7
|
+
size?: ChoiceProps['size'];
|
|
6
8
|
}
|
|
7
9
|
export declare const Radio: (props: RadioProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,40 +1,41 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import
|
|
1
|
+
import { jsx as o, jsxs as O } from "react/jsx-runtime";
|
|
2
|
+
import z from "clsx";
|
|
3
3
|
import { Choice as h } from "../choice/choice.component.js";
|
|
4
|
-
import { HiddenInput as
|
|
5
|
-
import { RadioLabel as
|
|
6
|
-
import { RadioText as
|
|
7
|
-
import { getChoiceId as
|
|
8
|
-
import '../../../../assets/radio-BkD7BKk0.css';const
|
|
9
|
-
Radio:
|
|
10
|
-
RadioOrientationHorizontal:
|
|
11
|
-
RadioOrientationVertical:
|
|
12
|
-
RadioLabel:
|
|
13
|
-
},
|
|
14
|
-
const { orientation: r, choices: s, state: m = "idle", id: t, value:
|
|
4
|
+
import { HiddenInput as L } from "../hidden-input/hidden-input.component.js";
|
|
5
|
+
import { RadioLabel as x } from "../radio-label/radio-label.component.js";
|
|
6
|
+
import { RadioText as H } from "../radio-text/radio-text.component.js";
|
|
7
|
+
import { getChoiceId as g } from "../../utils/utils.js";
|
|
8
|
+
import '../../../../assets/radio-BkD7BKk0.css';const w = "_Radio_1wc8m_1", C = "_RadioOrientationHorizontal_1wc8m_5", V = "_RadioOrientationVertical_1wc8m_10", I = "_RadioLabel_1wc8m_15", a = {
|
|
9
|
+
Radio: w,
|
|
10
|
+
RadioOrientationHorizontal: C,
|
|
11
|
+
RadioOrientationVertical: V,
|
|
12
|
+
RadioLabel: I
|
|
13
|
+
}, B = (l) => {
|
|
14
|
+
const { orientation: r, choices: s, state: m = "idle", size: c = "md", id: t, value: R, disabled: d = !1, onChange: p } = l;
|
|
15
15
|
return /* @__PURE__ */ o(
|
|
16
16
|
"div",
|
|
17
17
|
{
|
|
18
|
-
className:
|
|
18
|
+
className: z(a.Radio, {
|
|
19
19
|
[a.RadioOrientationHorizontal]: r === "horizontal",
|
|
20
20
|
[a.RadioOrientationVertical]: r === "vertical"
|
|
21
21
|
}),
|
|
22
|
-
children: s.map((i,
|
|
23
|
-
const e =
|
|
24
|
-
return /* @__PURE__ */ o(
|
|
22
|
+
children: s.map((i, _, b) => {
|
|
23
|
+
const e = g(t, i.value, _);
|
|
24
|
+
return /* @__PURE__ */ o(x, { id: e, value: R, state: m, choice: i, choices: b, children: ({ focused: f, hovered: u, checked: n, state: v }) => /* @__PURE__ */ O("div", { className: a.RadioLabel, children: [
|
|
25
25
|
/* @__PURE__ */ o(
|
|
26
26
|
h,
|
|
27
27
|
{
|
|
28
28
|
type: "radio",
|
|
29
|
-
|
|
29
|
+
size: c,
|
|
30
|
+
state: v,
|
|
30
31
|
checked: n,
|
|
31
|
-
focused:
|
|
32
|
-
hovered:
|
|
32
|
+
focused: f,
|
|
33
|
+
hovered: u,
|
|
33
34
|
disabled: d
|
|
34
35
|
}
|
|
35
36
|
),
|
|
36
37
|
/* @__PURE__ */ o(
|
|
37
|
-
|
|
38
|
+
L,
|
|
38
39
|
{
|
|
39
40
|
type: "radio",
|
|
40
41
|
id: e,
|
|
@@ -42,15 +43,15 @@ import '../../../../assets/radio-BkD7BKk0.css';const g = "_Radio_1wc8m_1", w = "
|
|
|
42
43
|
name: t,
|
|
43
44
|
checked: n,
|
|
44
45
|
disabled: d,
|
|
45
|
-
onChange: () =>
|
|
46
|
+
onChange: () => p(i.value, t)
|
|
46
47
|
}
|
|
47
48
|
),
|
|
48
|
-
/* @__PURE__ */ o(
|
|
49
|
+
/* @__PURE__ */ o(H, { size: "lg", checked: n, children: i.label })
|
|
49
50
|
] }) }, e);
|
|
50
51
|
})
|
|
51
52
|
}
|
|
52
53
|
);
|
|
53
54
|
};
|
|
54
55
|
export {
|
|
55
|
-
|
|
56
|
+
B as Radio
|
|
56
57
|
};
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { CertificationsProps } from '../certifications/certifications.component';
|
|
3
|
-
import { InfoProps } from './components/info/info.component';
|
|
4
3
|
import { StepsProps } from './components/steps/steps.component';
|
|
5
4
|
import { UserProps } from './components/user/user.component';
|
|
6
5
|
export interface SidebarProps extends PropsWithChildren {
|
|
7
6
|
isButtonVisible: boolean;
|
|
8
|
-
isUserOpen: boolean;
|
|
9
7
|
title: string;
|
|
10
8
|
steps: StepsProps['data'];
|
|
11
|
-
info: InfoProps['data'];
|
|
12
9
|
user: UserProps;
|
|
13
10
|
certifications: CertificationsProps['icons'];
|
|
14
11
|
}
|
|
@@ -1,44 +1,26 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { Animation as
|
|
3
|
-
import { Text as
|
|
4
|
-
import { Certifications as
|
|
5
|
-
import { Board as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
certifications: l = [],
|
|
23
|
-
user: i
|
|
24
|
-
} = e;
|
|
25
|
-
return /* @__PURE__ */ f(S, { children: [
|
|
26
|
-
/* @__PURE__ */ t("div", { className: o.SidebarTitle, children: /* @__PURE__ */ t(p.SidebarTitle, { children: d }) }),
|
|
27
|
-
/* @__PURE__ */ t(T, { data: c }),
|
|
28
|
-
/* @__PURE__ */ t(r, {}),
|
|
29
|
-
/* @__PURE__ */ t(
|
|
30
|
-
h,
|
|
31
|
-
{
|
|
32
|
-
isUserOpen: s,
|
|
33
|
-
user: /* @__PURE__ */ t(_, { title: i.title, button: i.button, data: i.data, onClick: i.onClick }),
|
|
34
|
-
info: /* @__PURE__ */ t(B, { data: m })
|
|
35
|
-
}
|
|
36
|
-
),
|
|
37
|
-
/* @__PURE__ */ t(r, {}),
|
|
38
|
-
/* @__PURE__ */ t(b.FadeScale, { name: "button", condition: n, duration: 0.2, delay: 0.1, children: /* @__PURE__ */ t("div", { className: o.SidebarButton, children: a }) }),
|
|
39
|
-
/* @__PURE__ */ t(u, { icons: l })
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import { Animation as m } from "../animation/animation.component.js";
|
|
3
|
+
import { Text as b } from "../text/text.component.js";
|
|
4
|
+
import { Certifications as S } from "../certifications/certifications.component.js";
|
|
5
|
+
import { Board as f } from "./components/board/board.component.js";
|
|
6
|
+
import { Line as e } from "./components/line/line.component.js";
|
|
7
|
+
import { Steps as p } from "./components/steps/steps.component.js";
|
|
8
|
+
import { User as u } from "./components/user/user.component.js";
|
|
9
|
+
import '../../assets/sidebar-B3KPFpFU.css';const h = "_SidebarTitle_1sscs_1", B = "_SidebarButton_1sscs_2", r = {
|
|
10
|
+
SidebarTitle: h,
|
|
11
|
+
SidebarButton: B
|
|
12
|
+
}, y = (o) => {
|
|
13
|
+
const { children: n, isButtonVisible: a = !1, title: s = "Ihre Übersicht", steps: d = [], certifications: c = [], user: i } = o;
|
|
14
|
+
return /* @__PURE__ */ l(f, { children: [
|
|
15
|
+
/* @__PURE__ */ t("div", { className: r.SidebarTitle, children: /* @__PURE__ */ t(b.SidebarTitle, { children: s }) }),
|
|
16
|
+
/* @__PURE__ */ t(p, { data: d }),
|
|
17
|
+
/* @__PURE__ */ t(e, {}),
|
|
18
|
+
/* @__PURE__ */ t(u, { title: i.title, button: i.button, data: i.data, onClick: i.onClick }),
|
|
19
|
+
/* @__PURE__ */ t(e, {}),
|
|
20
|
+
/* @__PURE__ */ t(m.FadeScale, { name: "button", condition: a, duration: 0.2, delay: 0.1, children: /* @__PURE__ */ t("div", { className: r.SidebarButton, children: n }) }),
|
|
21
|
+
/* @__PURE__ */ t(S, { icons: c })
|
|
40
22
|
] });
|
|
41
23
|
};
|
|
42
24
|
export {
|
|
43
|
-
|
|
25
|
+
y as Sidebar
|
|
44
26
|
};
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._Checkbox_1gskb_1{position:relative;display:inline-flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:var(--rm-ui-padding-xs)}._Checkbox_1gskb_1:hover{cursor:pointer}._CheckboxChoice_1gskb_14{position:relative;left:0;top:3px}._CheckboxContent_1gskb_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-text-primary)}._CheckboxContent_1gskb_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_1gskb_20 button:hover{cursor:pointer;text-decoration:underline}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._Choice_64h05_1{margin:1px;position:relative;background-color:var(--rm-ui-card-background);outline-offset:0;outline:1px solid transparent;box-sizing:border-box;border-width:2px;border-style:solid;width:18px;height:18px;display:flex;flex-direction:row;align-items:center;justify-content:center;transition:outline-color .15s ease-out,background-color .15s ease-out,border-color .15s ease-out}._ChoiceFocused_64h05_24:not(._ChoiceDisabled_64h05_24){outline-color:var(--rm-ui-color-focus)}._ChoiceHovered_64h05_28._ChoiceStateIdle_64h05_28{background-color:var(--rm-ui-grey-300)}._ChoiceDisabled_64h05_24{opacity:.33}._ChoiceStateIdle_64h05_28{border-color:var(--rm-ui-grey-300)}._ChoiceStateSuccess_64h05_40{border-color:var(--rm-ui-color-action)}._ChoiceStateError_64h05_44{border-color:var(--rm-ui-color-error)}._ChoiceTypeRadio_64h05_50{border-radius:100%}._ChoiceTypeRadio_64h05_50._ChoiceChecked_64h05_54._ChoiceStateIdle_64h05_28,._ChoiceTypeRadio_64h05_50._ChoiceChecked_64h05_54._ChoiceStateSuccess_64h05_40{background-color:var(--rm-ui-color-action)}._ChoiceTypeRadio_64h05_50._ChoiceChecked_64h05_54._ChoiceStateError_64h05_44{background-color:var(--rm-ui-color-error)}._ChoiceTypeRadio_64h05_50 ._ChoiceMark_64h05_63{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:8px;height:8px;background-color:transparent}._ChoiceTypeRadio_64h05_50._ChoiceChecked_64h05_54 ._ChoiceMark_64h05_63,._ChoiceTypeRadio_64h05_50._ChoiceHovered_64h05_28 ._ChoiceMark_64h05_63{background-color:var(--rm-ui-card-background)}._ChoiceTypeCheckbox_64h05_82{border-radius:4px}._ChoiceTypeCheckbox_64h05_82._ChoiceChecked_64h05_54._ChoiceStateIdle_64h05_28,._ChoiceTypeCheckbox_64h05_82._ChoiceChecked_64h05_54._ChoiceStateSuccess_64h05_40{background-color:var(--rm-ui-color-action)}._ChoiceTypeCheckbox_64h05_82._ChoiceChecked_64h05_54._ChoiceStateError_64h05_44{background-color:var(--rm-ui-color-error)}._ChoiceTypeCheckbox_64h05_82 ._ChoiceMark_64h05_63{position:absolute;content:"";top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;width:12px;height:12px;stroke-width:3px;stroke:transparent}._ChoiceTypeCheckbox_64h05_82._ChoiceChecked_64h05_54 ._ChoiceMark_64h05_63,._ChoiceTypeCheckbox_64h05_82._ChoiceHovered_64h05_28 ._ChoiceMark_64h05_63{stroke:var(--rm-ui-card-background)}
|