@ayseaistudio/ui-components 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/Label/Label.d.ts +3 -1
- package/dist/Label/Label.js +3 -2
- package/dist/ProfileButton/ProfileButton.d.ts +27 -0
- package/dist/ProfileButton/ProfileButton.js +24 -0
- package/dist/ProfileButton/index.d.ts +1 -0
- package/dist/ProfileButton/index.js +1 -0
- package/dist/ProfileButton/style.css +176 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/Label/Label.d.ts
CHANGED
|
@@ -13,9 +13,10 @@ interface Props {
|
|
|
13
13
|
bold?: "off" | "on";
|
|
14
14
|
spacing?: "off" | "on";
|
|
15
15
|
className: any;
|
|
16
|
+
divClassName?: string;
|
|
16
17
|
}
|
|
17
18
|
export declare const Label: {
|
|
18
|
-
({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, }: Props): React.JSX.Element;
|
|
19
|
+
({ text, title, leftIcon, rightIcon, size, color, version, stroke, bold, spacing, className, divClassName, }: Props): React.JSX.Element;
|
|
19
20
|
propTypes: {
|
|
20
21
|
text: PropTypes.Requireable<string>;
|
|
21
22
|
title: PropTypes.Requireable<string>;
|
|
@@ -28,6 +29,7 @@ export declare const Label: {
|
|
|
28
29
|
stroke: PropTypes.Requireable<string>;
|
|
29
30
|
bold: PropTypes.Requireable<string>;
|
|
30
31
|
spacing: PropTypes.Requireable<string>;
|
|
32
|
+
divClassName: PropTypes.Requireable<string>;
|
|
31
33
|
};
|
|
32
34
|
};
|
|
33
35
|
export {};
|
package/dist/Label/Label.js
CHANGED
|
@@ -32,11 +32,11 @@ const getIconClassName = (size) => {
|
|
|
32
32
|
};
|
|
33
33
|
return sizeClassMap[size] || "";
|
|
34
34
|
};
|
|
35
|
-
export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, }) => {
|
|
35
|
+
export const Label = ({ text, title, leftIcon, rightIcon, size, color, version, stroke = "off", bold, spacing, className, divClassName, }) => {
|
|
36
36
|
return (_jsxs("div", { className: `label ${size} ${stroke} ${spacing} ${color} ${className}`, title: title, children: [leftIcon && (React.cloneElement(leftIcon, {
|
|
37
37
|
className: getIconClassName(size),
|
|
38
38
|
color: getIconColor(version, color)
|
|
39
|
-
})), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
|
|
39
|
+
})), text && (_jsx("div", { className: `text-wrapper ${version} bold-${bold} size-${size} color-${color} ${divClassName || ""}`, children: text })), rightIcon && (React.cloneElement(rightIcon, {
|
|
40
40
|
className: getIconClassName(size),
|
|
41
41
|
color: getIconColor(version, color)
|
|
42
42
|
}))] }));
|
|
@@ -64,4 +64,5 @@ Label.propTypes = {
|
|
|
64
64
|
stroke: PropTypes.oneOf(["off", "on"]),
|
|
65
65
|
bold: PropTypes.oneOf(["off", "on"]),
|
|
66
66
|
spacing: PropTypes.oneOf(["off", "on"]),
|
|
67
|
+
divClassName: PropTypes.string,
|
|
67
68
|
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import PropTypes from "prop-types";
|
|
2
|
+
import "./style.css";
|
|
3
|
+
interface Props {
|
|
4
|
+
text?: string;
|
|
5
|
+
subtext?: string;
|
|
6
|
+
activity?: boolean;
|
|
7
|
+
size?: "large" | "x-small" | "medium" | "small";
|
|
8
|
+
status?: "pressing" | "default";
|
|
9
|
+
className?: any;
|
|
10
|
+
avatarLetter?: string;
|
|
11
|
+
avatarColor?: string;
|
|
12
|
+
activityColor?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare const ProfileButton: {
|
|
15
|
+
({ text, subtext, activity, size, status, avatarLetter, avatarColor, className, activityColor, }: Props): React.JSX.Element;
|
|
16
|
+
propTypes: {
|
|
17
|
+
text: PropTypes.Requireable<string>;
|
|
18
|
+
withText: PropTypes.Requireable<boolean>;
|
|
19
|
+
subtext: PropTypes.Requireable<string>;
|
|
20
|
+
withSubtext: PropTypes.Requireable<boolean>;
|
|
21
|
+
withAllText: PropTypes.Requireable<boolean>;
|
|
22
|
+
activity: PropTypes.Requireable<boolean>;
|
|
23
|
+
size: PropTypes.Requireable<string>;
|
|
24
|
+
status: PropTypes.Requireable<string>;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
export {};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import "./style.css";
|
|
4
|
+
import { Avatar } from "../Avatar";
|
|
5
|
+
import { Activity } from "../Activity";
|
|
6
|
+
export const ProfileButton = ({ text, subtext, activity = false, size, status, avatarLetter = "AB", avatarColor = "grey", className, activityColor = "black", }) => {
|
|
7
|
+
return (_jsxs("div", { className: `profile-button size-0-${size} ${status} ${className}`, children: [_jsx(Avatar, { className: "avatar-instance", color: avatarColor, letter: avatarLetter, size: size === "medium"
|
|
8
|
+
? "medium"
|
|
9
|
+
: size === "small"
|
|
10
|
+
? "small"
|
|
11
|
+
: size === "x-small"
|
|
12
|
+
? "x-small"
|
|
13
|
+
: "large", status: "default", version: "default" }), _jsxs("div", { className: "frame", children: [text && _jsx("div", { className: "text", children: text }), subtext && _jsx("div", { className: "subtext", children: subtext })] }), activity && (_jsx(Activity, { className: `${size === "medium" ? "class" : (size === "small") ? "class-2" : size === "x-small" ? "class-3" : "class-4"}`, color: activityColor === "black" || activityColor === "green" || activityColor === "galliano" || activityColor === "red" ? activityColor : undefined, size: "x-small" }))] }));
|
|
14
|
+
};
|
|
15
|
+
ProfileButton.propTypes = {
|
|
16
|
+
text: PropTypes.string,
|
|
17
|
+
withText: PropTypes.bool,
|
|
18
|
+
subtext: PropTypes.string,
|
|
19
|
+
withSubtext: PropTypes.bool,
|
|
20
|
+
withAllText: PropTypes.bool,
|
|
21
|
+
activity: PropTypes.bool,
|
|
22
|
+
size: PropTypes.oneOf(["large", "x-small", "medium", "small"]),
|
|
23
|
+
status: PropTypes.oneOf(["pressing", "default"]),
|
|
24
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ProfileButton } from "./ProfileButton";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { ProfileButton } from "./ProfileButton";
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
.profile-button {
|
|
2
|
+
align-items: center;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
padding: 4px;
|
|
5
|
+
position: relative;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.profile-button .frame {
|
|
9
|
+
align-items: flex-start;
|
|
10
|
+
display: inline-flex;
|
|
11
|
+
flex: 0 0 auto;
|
|
12
|
+
flex-direction: column;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
position: relative;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.profile-button .text {
|
|
18
|
+
-webkit-box-orient: vertical;
|
|
19
|
+
color: #5d5d5d;
|
|
20
|
+
display: -webkit-box;
|
|
21
|
+
overflow: hidden;
|
|
22
|
+
position: relative;
|
|
23
|
+
text-overflow: ellipsis;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.profile-button .subtext {
|
|
27
|
+
align-self: stretch;
|
|
28
|
+
color: #5d5d5d;
|
|
29
|
+
position: relative;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.profile-button .class {
|
|
33
|
+
left: 29px !important;
|
|
34
|
+
position: absolute !important;
|
|
35
|
+
top: 2px !important;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.profile-button .class-2 {
|
|
39
|
+
left: 24px !important;
|
|
40
|
+
position: absolute !important;
|
|
41
|
+
top: 2px !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.profile-button .class-3 {
|
|
45
|
+
left: 20px !important;
|
|
46
|
+
position: absolute !important;
|
|
47
|
+
top: 2px !important;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.profile-button .class-4 {
|
|
51
|
+
left: 48px !important;
|
|
52
|
+
position: absolute !important;
|
|
53
|
+
top: 2px !important;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.profile-button.size-0-large {
|
|
57
|
+
border-radius: 16px;
|
|
58
|
+
gap: 8px;
|
|
59
|
+
top: 12px;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.profile-button.size-0-small {
|
|
63
|
+
border-radius: 12px;
|
|
64
|
+
gap: 6px;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.profile-button.size-0-medium {
|
|
68
|
+
border-radius: 12px;
|
|
69
|
+
gap: 6px;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.profile-button.size-0-x-small {
|
|
73
|
+
border-radius: 8px;
|
|
74
|
+
gap: 6px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.profile-button.pressing {
|
|
78
|
+
background-color: #2424240d;
|
|
79
|
+
}
|
|
80
|
+
.profile-button.size-0-x-small .frame {
|
|
81
|
+
height: 24px;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.profile-button.size-0-large .frame {
|
|
85
|
+
gap: 6px;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.profile-button.size-0-small .frame {
|
|
89
|
+
height: 28px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.profile-button.size-0-x-small .text {
|
|
93
|
+
-webkit-line-clamp: 0;
|
|
94
|
+
font-family: var(--b2-bold-font-family);
|
|
95
|
+
font-size: var(--b2-bold-font-size);
|
|
96
|
+
font-style: var(--b2-bold-font-style);
|
|
97
|
+
font-weight: var(--b2-bold-font-weight);
|
|
98
|
+
height: 14px;
|
|
99
|
+
letter-spacing: var(--b2-bold-letter-spacing);
|
|
100
|
+
line-height: var(--b2-bold-line-height);
|
|
101
|
+
margin-top: -3.00px;
|
|
102
|
+
white-space: nowrap;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.profile-button.size-0-large .text {
|
|
106
|
+
-webkit-line-clamp: 0;
|
|
107
|
+
font-family: var(--h5-bold-font-family);
|
|
108
|
+
font-size: var(--h5-bold-font-size);
|
|
109
|
+
font-style: var(--h5-bold-font-style);
|
|
110
|
+
font-weight: var(--h5-bold-font-weight);
|
|
111
|
+
letter-spacing: var(--h5-bold-letter-spacing);
|
|
112
|
+
line-height: var(--h5-bold-line-height);
|
|
113
|
+
margin-top: -1.00px;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.profile-button.size-0-medium .text {
|
|
117
|
+
-webkit-line-clamp: 1;
|
|
118
|
+
font-family: var(--b1-bold-font-family);
|
|
119
|
+
font-size: var(--b1-bold-font-size);
|
|
120
|
+
font-style: var(--b1-bold-font-style);
|
|
121
|
+
font-weight: var(--b1-bold-font-weight);
|
|
122
|
+
letter-spacing: var(--b1-bold-letter-spacing);
|
|
123
|
+
line-height: var(--b1-bold-line-height);
|
|
124
|
+
margin-top: -1.00px;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.profile-button.size-0-small .text {
|
|
128
|
+
-webkit-line-clamp: 1;
|
|
129
|
+
font-family: var(--b2-bold-font-family);
|
|
130
|
+
font-size: var(--b2-bold-font-size);
|
|
131
|
+
font-style: var(--b2-bold-font-style);
|
|
132
|
+
font-weight: var(--b2-bold-font-weight);
|
|
133
|
+
letter-spacing: var(--b2-bold-letter-spacing);
|
|
134
|
+
line-height: var(--b2-bold-line-height);
|
|
135
|
+
margin-top: -3.00px;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.profile-button.size-0-x-small .subtext {
|
|
139
|
+
font-family: var(--b3-medium-font-family);
|
|
140
|
+
font-size: var(--b3-medium-font-size);
|
|
141
|
+
font-style: var(--b3-medium-font-style);
|
|
142
|
+
font-weight: var(--b3-medium-font-weight);
|
|
143
|
+
height: 14px;
|
|
144
|
+
letter-spacing: var(--b3-medium-letter-spacing);
|
|
145
|
+
line-height: var(--b3-medium-line-height);
|
|
146
|
+
margin-bottom: -1.00px;
|
|
147
|
+
white-space: nowrap;
|
|
148
|
+
}
|
|
149
|
+
|
|
150
|
+
.profile-button.size-0-large .subtext {
|
|
151
|
+
font-family: var(--b1-medium-font-family);
|
|
152
|
+
font-size: var(--b1-medium-font-size);
|
|
153
|
+
font-style: var(--b1-medium-font-style);
|
|
154
|
+
font-weight: var(--b1-medium-font-weight);
|
|
155
|
+
letter-spacing: var(--b1-medium-letter-spacing);
|
|
156
|
+
line-height: var(--b1-medium-line-height);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.profile-button.size-0-medium .subtext {
|
|
160
|
+
font-family: var(--b2-medium-font-family);
|
|
161
|
+
font-size: var(--b2-medium-font-size);
|
|
162
|
+
font-style: var(--b2-medium-font-style);
|
|
163
|
+
font-weight: var(--b2-medium-font-weight);
|
|
164
|
+
letter-spacing: var(--b2-medium-letter-spacing);
|
|
165
|
+
line-height: var(--b2-medium-line-height);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.profile-button.size-0-small .subtext {
|
|
169
|
+
font-family: var(--b3-medium-font-family);
|
|
170
|
+
font-size: var(--b3-medium-font-size);
|
|
171
|
+
font-style: var(--b3-medium-font-style);
|
|
172
|
+
font-weight: var(--b3-medium-font-weight);
|
|
173
|
+
letter-spacing: var(--b3-medium-letter-spacing);
|
|
174
|
+
line-height: var(--b3-medium-line-height);
|
|
175
|
+
margin-bottom: -1.00px;
|
|
176
|
+
}
|
package/dist/index.d.ts
CHANGED
|
@@ -14,3 +14,4 @@ export { Page } from "./Page/Page";
|
|
|
14
14
|
export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
|
|
15
15
|
export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
|
|
16
16
|
export { SingleSlider } from "./SingleSlider/SingleSlider";
|
|
17
|
+
export { ProfileButton } from "./ProfileButton/ProfileButton";
|
package/dist/index.js
CHANGED
|
@@ -14,3 +14,4 @@ export { Page } from "./Page/Page";
|
|
|
14
14
|
export { PlatformsButton } from "./PlatformsButton/PlatformsButton";
|
|
15
15
|
export { PlatformSelector } from "./PlatformSelector/PlatformSelector";
|
|
16
16
|
export { SingleSlider } from "./SingleSlider/SingleSlider";
|
|
17
|
+
export { ProfileButton } from "./ProfileButton/ProfileButton";
|