virtual-ui-library01 1.0.2 → 1.0.3
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/index.js +82 -2
- package/dist/index.mjs +80 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
Button: () => Button,
|
|
33
|
-
Card: () => Card
|
|
33
|
+
Card: () => Card,
|
|
34
|
+
ProfileCard: () => ProfileCard
|
|
34
35
|
});
|
|
35
36
|
module.exports = __toCommonJS(index_exports);
|
|
36
37
|
|
|
@@ -127,8 +128,87 @@ var Card = ({
|
|
|
127
128
|
/* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, color: textColor, opacity: 0.75, fontSize: "14px", lineHeight: 1.5 } }, description)
|
|
128
129
|
);
|
|
129
130
|
};
|
|
131
|
+
|
|
132
|
+
// src/components/ProfileCard/profilecard.jsx
|
|
133
|
+
var import_react3 = __toESM(require("react"));
|
|
134
|
+
var ProfileCard = ({
|
|
135
|
+
name = "Jane Doe",
|
|
136
|
+
role = "Product Designer",
|
|
137
|
+
bio = "Passionate about crafting delightful user experiences.",
|
|
138
|
+
avatarUrl = "https://i.pravatar.cc/150",
|
|
139
|
+
bgColor = "#ffffff",
|
|
140
|
+
accentColor = "#4f46e5",
|
|
141
|
+
textColor = "#111827",
|
|
142
|
+
size = "medium",
|
|
143
|
+
onFollow = () => {
|
|
144
|
+
}
|
|
145
|
+
}) => {
|
|
146
|
+
const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
|
|
147
|
+
const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
|
|
148
|
+
const sizeStyles = {
|
|
149
|
+
small: { width: "220px", padding: "16px", avatar: "60px" },
|
|
150
|
+
medium: { width: "280px", padding: "22px", avatar: "80px" },
|
|
151
|
+
large: { width: "340px", padding: "28px", avatar: "100px" }
|
|
152
|
+
};
|
|
153
|
+
const currentSize = sizeStyles[size] || sizeStyles.medium;
|
|
154
|
+
const cardStyle = {
|
|
155
|
+
width: currentSize.width,
|
|
156
|
+
padding: currentSize.padding,
|
|
157
|
+
backgroundColor: bgColor,
|
|
158
|
+
borderRadius: "16px",
|
|
159
|
+
boxShadow: isHovered ? "0 10px 24px rgba(0,0,0,0.14)" : "0 2px 8px rgba(0,0,0,0.08)",
|
|
160
|
+
transform: isHovered ? "translateY(-4px)" : "translateY(0)",
|
|
161
|
+
transition: "all 0.25s ease",
|
|
162
|
+
textAlign: "center",
|
|
163
|
+
fontFamily: "sans-serif"
|
|
164
|
+
};
|
|
165
|
+
const buttonStyle = {
|
|
166
|
+
marginTop: "14px",
|
|
167
|
+
padding: "8px 20px",
|
|
168
|
+
borderRadius: "20px",
|
|
169
|
+
border: "none",
|
|
170
|
+
cursor: "pointer",
|
|
171
|
+
fontWeight: 600,
|
|
172
|
+
fontSize: "13px",
|
|
173
|
+
color: isFollowing ? accentColor : "#ffffff",
|
|
174
|
+
backgroundColor: isFollowing ? "#ffffff" : accentColor,
|
|
175
|
+
border: `2px solid ${accentColor}`,
|
|
176
|
+
transition: "all 0.2s ease"
|
|
177
|
+
};
|
|
178
|
+
const handleFollow = () => {
|
|
179
|
+
setIsFollowing((prev) => !prev);
|
|
180
|
+
onFollow(!isFollowing);
|
|
181
|
+
};
|
|
182
|
+
return /* @__PURE__ */ import_react3.default.createElement(
|
|
183
|
+
"div",
|
|
184
|
+
{
|
|
185
|
+
style: cardStyle,
|
|
186
|
+
onMouseEnter: () => setIsHovered(true),
|
|
187
|
+
onMouseLeave: () => setIsHovered(false)
|
|
188
|
+
},
|
|
189
|
+
/* @__PURE__ */ import_react3.default.createElement(
|
|
190
|
+
"img",
|
|
191
|
+
{
|
|
192
|
+
src: avatarUrl,
|
|
193
|
+
alt: name,
|
|
194
|
+
style: {
|
|
195
|
+
width: currentSize.avatar,
|
|
196
|
+
height: currentSize.avatar,
|
|
197
|
+
borderRadius: "50%",
|
|
198
|
+
objectFit: "cover",
|
|
199
|
+
border: `3px solid ${accentColor}`
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
),
|
|
203
|
+
/* @__PURE__ */ import_react3.default.createElement("h3", { style: { margin: "12px 0 2px 0", color: textColor, fontSize: "17px" } }, name),
|
|
204
|
+
/* @__PURE__ */ import_react3.default.createElement("p", { style: { margin: "0 0 8px 0", color: accentColor, fontSize: "13px", fontWeight: 600 } }, role),
|
|
205
|
+
/* @__PURE__ */ import_react3.default.createElement("p", { style: { margin: 0, color: textColor, opacity: 0.7, fontSize: "13px", lineHeight: 1.5 } }, bio),
|
|
206
|
+
/* @__PURE__ */ import_react3.default.createElement("button", { style: buttonStyle, onClick: handleFollow }, isFollowing ? "Following" : "Follow")
|
|
207
|
+
);
|
|
208
|
+
};
|
|
130
209
|
// Annotate the CommonJS export names for ESM import in node:
|
|
131
210
|
0 && (module.exports = {
|
|
132
211
|
Button,
|
|
133
|
-
Card
|
|
212
|
+
Card,
|
|
213
|
+
ProfileCard
|
|
134
214
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -91,7 +91,86 @@ var Card = ({
|
|
|
91
91
|
/* @__PURE__ */ React2.createElement("p", { style: { margin: 0, color: textColor, opacity: 0.75, fontSize: "14px", lineHeight: 1.5 } }, description)
|
|
92
92
|
);
|
|
93
93
|
};
|
|
94
|
+
|
|
95
|
+
// src/components/ProfileCard/profilecard.jsx
|
|
96
|
+
import React3, { useState as useState3 } from "react";
|
|
97
|
+
var ProfileCard = ({
|
|
98
|
+
name = "Jane Doe",
|
|
99
|
+
role = "Product Designer",
|
|
100
|
+
bio = "Passionate about crafting delightful user experiences.",
|
|
101
|
+
avatarUrl = "https://i.pravatar.cc/150",
|
|
102
|
+
bgColor = "#ffffff",
|
|
103
|
+
accentColor = "#4f46e5",
|
|
104
|
+
textColor = "#111827",
|
|
105
|
+
size = "medium",
|
|
106
|
+
onFollow = () => {
|
|
107
|
+
}
|
|
108
|
+
}) => {
|
|
109
|
+
const [isHovered, setIsHovered] = useState3(false);
|
|
110
|
+
const [isFollowing, setIsFollowing] = useState3(false);
|
|
111
|
+
const sizeStyles = {
|
|
112
|
+
small: { width: "220px", padding: "16px", avatar: "60px" },
|
|
113
|
+
medium: { width: "280px", padding: "22px", avatar: "80px" },
|
|
114
|
+
large: { width: "340px", padding: "28px", avatar: "100px" }
|
|
115
|
+
};
|
|
116
|
+
const currentSize = sizeStyles[size] || sizeStyles.medium;
|
|
117
|
+
const cardStyle = {
|
|
118
|
+
width: currentSize.width,
|
|
119
|
+
padding: currentSize.padding,
|
|
120
|
+
backgroundColor: bgColor,
|
|
121
|
+
borderRadius: "16px",
|
|
122
|
+
boxShadow: isHovered ? "0 10px 24px rgba(0,0,0,0.14)" : "0 2px 8px rgba(0,0,0,0.08)",
|
|
123
|
+
transform: isHovered ? "translateY(-4px)" : "translateY(0)",
|
|
124
|
+
transition: "all 0.25s ease",
|
|
125
|
+
textAlign: "center",
|
|
126
|
+
fontFamily: "sans-serif"
|
|
127
|
+
};
|
|
128
|
+
const buttonStyle = {
|
|
129
|
+
marginTop: "14px",
|
|
130
|
+
padding: "8px 20px",
|
|
131
|
+
borderRadius: "20px",
|
|
132
|
+
border: "none",
|
|
133
|
+
cursor: "pointer",
|
|
134
|
+
fontWeight: 600,
|
|
135
|
+
fontSize: "13px",
|
|
136
|
+
color: isFollowing ? accentColor : "#ffffff",
|
|
137
|
+
backgroundColor: isFollowing ? "#ffffff" : accentColor,
|
|
138
|
+
border: `2px solid ${accentColor}`,
|
|
139
|
+
transition: "all 0.2s ease"
|
|
140
|
+
};
|
|
141
|
+
const handleFollow = () => {
|
|
142
|
+
setIsFollowing((prev) => !prev);
|
|
143
|
+
onFollow(!isFollowing);
|
|
144
|
+
};
|
|
145
|
+
return /* @__PURE__ */ React3.createElement(
|
|
146
|
+
"div",
|
|
147
|
+
{
|
|
148
|
+
style: cardStyle,
|
|
149
|
+
onMouseEnter: () => setIsHovered(true),
|
|
150
|
+
onMouseLeave: () => setIsHovered(false)
|
|
151
|
+
},
|
|
152
|
+
/* @__PURE__ */ React3.createElement(
|
|
153
|
+
"img",
|
|
154
|
+
{
|
|
155
|
+
src: avatarUrl,
|
|
156
|
+
alt: name,
|
|
157
|
+
style: {
|
|
158
|
+
width: currentSize.avatar,
|
|
159
|
+
height: currentSize.avatar,
|
|
160
|
+
borderRadius: "50%",
|
|
161
|
+
objectFit: "cover",
|
|
162
|
+
border: `3px solid ${accentColor}`
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
/* @__PURE__ */ React3.createElement("h3", { style: { margin: "12px 0 2px 0", color: textColor, fontSize: "17px" } }, name),
|
|
167
|
+
/* @__PURE__ */ React3.createElement("p", { style: { margin: "0 0 8px 0", color: accentColor, fontSize: "13px", fontWeight: 600 } }, role),
|
|
168
|
+
/* @__PURE__ */ React3.createElement("p", { style: { margin: 0, color: textColor, opacity: 0.7, fontSize: "13px", lineHeight: 1.5 } }, bio),
|
|
169
|
+
/* @__PURE__ */ React3.createElement("button", { style: buttonStyle, onClick: handleFollow }, isFollowing ? "Following" : "Follow")
|
|
170
|
+
);
|
|
171
|
+
};
|
|
94
172
|
export {
|
|
95
173
|
Button,
|
|
96
|
-
Card
|
|
174
|
+
Card,
|
|
175
|
+
ProfileCard
|
|
97
176
|
};
|