virtuo-ui-library 1.0.5 → 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.
Files changed (3) hide show
  1. package/dist/index.js +44 -167
  2. package/dist/index.mjs +42 -165
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -30,8 +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,
34
- EcommerceCard: () => EcommerceCard
33
+ EcommerceCard: () => EcommerceCard,
34
+ ProfileCard: () => ProfileCard
35
35
  });
36
36
  module.exports = __toCommonJS(index_exports);
37
37
 
@@ -119,151 +119,8 @@ function shadeColor(hex, percent) {
119
119
  return `rgb(${r},${g},${b})`;
120
120
  }
121
121
 
122
- // src/components/Card/Card.jsx
123
- var import_react2 = __toESM(require("react"));
124
- var Card = ({
125
- title = "Card Title",
126
- description = "This is a simple, reusable card component you can customize with props.",
127
- image = null,
128
- badge = null,
129
- badgeColor = "#6366f1",
130
- accentColor = "#6366f1",
131
- actions = [],
132
- footer = null,
133
- width = "320px",
134
- onClick = null
135
- }) => {
136
- const [hovered, setHovered] = (0, import_react2.useState)(false);
137
- const [liked, setLiked] = (0, import_react2.useState)(false);
138
- const style = {
139
- width,
140
- borderRadius: "16px",
141
- background: "#ffffff",
142
- boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
143
- transform: hovered ? "translateY(-4px)" : "translateY(0)",
144
- transition: "all 0.22s ease",
145
- overflow: "hidden",
146
- fontFamily: "system-ui, sans-serif",
147
- cursor: onClick ? "pointer" : "default",
148
- border: "1px solid #f1f5f9"
149
- };
150
- return /* @__PURE__ */ import_react2.default.createElement(
151
- "div",
152
- {
153
- style,
154
- onMouseEnter: () => setHovered(true),
155
- onMouseLeave: () => setHovered(false),
156
- onClick
157
- },
158
- image && /* @__PURE__ */ import_react2.default.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
159
- "img",
160
- {
161
- src: image,
162
- alt: title,
163
- style: {
164
- width: "100%",
165
- height: "100%",
166
- objectFit: "cover",
167
- transform: hovered ? "scale(1.04)" : "scale(1)",
168
- transition: "transform 0.35s ease"
169
- }
170
- }
171
- ), badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
172
- position: "absolute",
173
- top: "12px",
174
- left: "12px",
175
- background: badgeColor,
176
- color: "#fff",
177
- fontSize: "11px",
178
- fontWeight: 700,
179
- letterSpacing: "0.06em",
180
- textTransform: "uppercase",
181
- padding: "4px 10px",
182
- borderRadius: "99px"
183
- } }, badge)),
184
- /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
185
- display: "inline-block",
186
- background: badgeColor + "18",
187
- color: badgeColor,
188
- fontSize: "11px",
189
- fontWeight: 700,
190
- letterSpacing: "0.06em",
191
- textTransform: "uppercase",
192
- padding: "3px 10px",
193
- borderRadius: "99px",
194
- marginBottom: "10px"
195
- } }, badge), /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ import_react2.default.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
196
- (actions.length > 0 || true) && /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ import_react2.default.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ import_react2.default.createElement(
197
- "button",
198
- {
199
- onClick: (e) => {
200
- e.stopPropagation();
201
- setLiked(!liked);
202
- },
203
- style: {
204
- marginLeft: "auto",
205
- background: liked ? "#fef2f2" : "#f8fafc",
206
- border: "none",
207
- borderRadius: "8px",
208
- padding: "8px 10px",
209
- cursor: "pointer",
210
- fontSize: "16px",
211
- transition: "all 0.15s",
212
- transform: liked ? "scale(1.15)" : "scale(1)"
213
- },
214
- title: liked ? "Unlike" : "Like"
215
- },
216
- liked ? "\u2764\uFE0F" : "\u{1F90D}"
217
- )),
218
- footer && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
219
- borderTop: "1px solid #f1f5f9",
220
- padding: "12px 20px",
221
- fontSize: "12px",
222
- color: "#94a3b8",
223
- display: "flex",
224
- alignItems: "center",
225
- gap: "6px"
226
- } }, footer)
227
- );
228
- };
229
- var ActionButton = ({ label = "Action", onClick = () => {
230
- }, accentColor = "#6366f1", primary = false }) => {
231
- const [hovered, setHovered] = (0, import_react2.useState)(false);
232
- return /* @__PURE__ */ import_react2.default.createElement(
233
- "button",
234
- {
235
- onClick: (e) => {
236
- e.stopPropagation();
237
- onClick();
238
- },
239
- onMouseEnter: () => setHovered(true),
240
- onMouseLeave: () => setHovered(false),
241
- style: {
242
- padding: "8px 18px",
243
- borderRadius: "8px",
244
- fontSize: "13px",
245
- fontWeight: 600,
246
- cursor: "pointer",
247
- transition: "all 0.15s",
248
- background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
249
- color: primary ? "#fff" : accentColor,
250
- border: primary ? "none" : `1.5px solid ${accentColor}`,
251
- boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
252
- }
253
- },
254
- label
255
- );
256
- };
257
- function shadeColor2(hex, percent) {
258
- const num = parseInt(hex.replace("#", ""), 16);
259
- const r = Math.min(255, Math.max(0, (num >> 16) + percent));
260
- const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
261
- const b = Math.min(255, Math.max(0, (num & 255) + percent));
262
- return `rgb(${r},${g},${b})`;
263
- }
264
-
265
122
  // src/components/EcommerceCard/EcommerceCard.jsx
266
- var import_react3 = __toESM(require("react"));
123
+ var import_react2 = __toESM(require("react"));
267
124
  var EcommerceCard = ({
268
125
  image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
269
126
  title = "Wireless Headphones",
@@ -278,8 +135,8 @@ var EcommerceCard = ({
278
135
  onAddToCart = () => {
279
136
  }
280
137
  }) => {
281
- const [hovered, setHovered] = (0, import_react3.useState)(false);
282
- const [wishlisted, setWishlisted] = (0, import_react3.useState)(false);
138
+ const [hovered, setHovered] = (0, import_react2.useState)(false);
139
+ const [wishlisted, setWishlisted] = (0, import_react2.useState)(false);
283
140
  const alpha = (hex, op) => {
284
141
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
285
142
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -291,21 +148,21 @@ var EcommerceCard = ({
291
148
  for (let i = 1; i <= 5; i++) {
292
149
  if (i <= fullStars) {
293
150
  stars.push(
294
- /* @__PURE__ */ import_react3.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
151
+ /* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
295
152
  );
296
153
  } else if (i === fullStars + 1 && hasHalfStar) {
297
154
  stars.push(
298
- /* @__PURE__ */ import_react3.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react3.default.createElement("defs", null, /* @__PURE__ */ import_react3.default.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ import_react3.default.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ import_react3.default.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
155
+ /* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("defs", null, /* @__PURE__ */ import_react2.default.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ import_react2.default.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ import_react2.default.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
299
156
  );
300
157
  } else {
301
158
  stars.push(
302
- /* @__PURE__ */ import_react3.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ import_react3.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
159
+ /* @__PURE__ */ import_react2.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ import_react2.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
303
160
  );
304
161
  }
305
162
  }
306
163
  return stars;
307
164
  };
308
- return /* @__PURE__ */ import_react3.default.createElement(
165
+ return /* @__PURE__ */ import_react2.default.createElement(
309
166
  "div",
310
167
  {
311
168
  onMouseEnter: () => setHovered(true),
@@ -322,7 +179,7 @@ var EcommerceCard = ({
322
179
  boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
323
180
  }
324
181
  },
325
- /* @__PURE__ */ import_react3.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react3.default.createElement(
182
+ /* @__PURE__ */ import_react2.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react2.default.createElement(
326
183
  "img",
327
184
  {
328
185
  src: image,
@@ -335,7 +192,7 @@ var EcommerceCard = ({
335
192
  transform: hovered ? "scale(1.05)" : "scale(1)"
336
193
  }
337
194
  }
338
- ), badge && /* @__PURE__ */ import_react3.default.createElement("div", { style: {
195
+ ), badge && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
339
196
  position: "absolute",
340
197
  top: "10px",
341
198
  left: "10px",
@@ -347,7 +204,7 @@ var EcommerceCard = ({
347
204
  color: "#fff",
348
205
  textTransform: "uppercase",
349
206
  letterSpacing: "0.5px"
350
- } }, badge), /* @__PURE__ */ import_react3.default.createElement(
207
+ } }, badge), /* @__PURE__ */ import_react2.default.createElement(
351
208
  "button",
352
209
  {
353
210
  onClick: () => setWishlisted(!wishlisted),
@@ -366,7 +223,7 @@ var EcommerceCard = ({
366
223
  cursor: "pointer"
367
224
  }
368
225
  },
369
- /* @__PURE__ */ import_react3.default.createElement(
226
+ /* @__PURE__ */ import_react2.default.createElement(
370
227
  "svg",
371
228
  {
372
229
  width: "16",
@@ -376,38 +233,38 @@ var EcommerceCard = ({
376
233
  stroke: wishlisted ? "#ef4444" : "#fff",
377
234
  strokeWidth: "2"
378
235
  },
379
- /* @__PURE__ */ import_react3.default.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
236
+ /* @__PURE__ */ import_react2.default.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
380
237
  )
381
238
  )),
382
- /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react3.default.createElement("h3", { style: {
239
+ /* @__PURE__ */ import_react2.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: {
383
240
  fontSize: "16px",
384
241
  fontWeight: "700",
385
242
  color: "#fff",
386
243
  margin: "0 0 8px",
387
244
  lineHeight: 1.4
388
- } }, title), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
245
+ } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
389
246
  display: "flex",
390
247
  alignItems: "center",
391
248
  gap: "6px",
392
249
  marginBottom: "12px"
393
- } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react3.default.createElement("span", { style: {
250
+ } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
394
251
  fontSize: "12px",
395
252
  color: "rgba(255,255,255,0.45)"
396
- } }, "(", reviewCount, ")")), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
253
+ } }, "(", reviewCount, ")")), /* @__PURE__ */ import_react2.default.createElement("div", { style: {
397
254
  display: "flex",
398
255
  alignItems: "center",
399
256
  gap: "10px",
400
257
  marginBottom: "16px"
401
- } }, /* @__PURE__ */ import_react3.default.createElement("span", { style: {
258
+ } }, /* @__PURE__ */ import_react2.default.createElement("span", { style: {
402
259
  fontSize: "20px",
403
260
  fontWeight: "800",
404
261
  color: "#fff"
405
- } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react3.default.createElement("span", { style: {
262
+ } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react2.default.createElement("span", { style: {
406
263
  fontSize: "14px",
407
264
  fontWeight: "500",
408
265
  color: "#86efac",
409
266
  textDecoration: "line-through"
410
- } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react3.default.createElement(
267
+ } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react2.default.createElement(
411
268
  "button",
412
269
  {
413
270
  onClick: onAddToCart,
@@ -428,14 +285,34 @@ var EcommerceCard = ({
428
285
  gap: "8px"
429
286
  }
430
287
  },
431
- /* @__PURE__ */ import_react3.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ import_react3.default.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ import_react3.default.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
288
+ /* @__PURE__ */ import_react2.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ import_react2.default.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ import_react2.default.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
432
289
  "Add to Cart"
433
290
  ))
434
291
  );
435
292
  };
293
+
294
+ // src/components/ProfileCard/ProfileCard.jsx
295
+ var import_react3 = __toESM(require("react"));
296
+ var ProfileCard = ({
297
+ name = "John Doe",
298
+ bio = "Software Engineer | Tech Enthusiast",
299
+ avatar = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=600&q=80",
300
+ accent = "#6366f1",
301
+ bg = "#0f172a",
302
+ onFollowClick = () => {
303
+ },
304
+ onMessageClick = () => {
305
+ }
306
+ }) => {
307
+ const alpha = (hex, op) => {
308
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
309
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
310
+ };
311
+ return /* @__PURE__ */ import_react3.default.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "280px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onFollowClick, style: { padding: "8px 16px", borderRadius: "8px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Follow"), /* @__PURE__ */ import_react3.default.createElement("button", { onClick: onMessageClick, style: { padding: "8px 16px", borderRadius: "8px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Message"))));
312
+ };
436
313
  // Annotate the CommonJS export names for ESM import in node:
437
314
  0 && (module.exports = {
438
315
  Button,
439
- Card,
440
- EcommerceCard
316
+ EcommerceCard,
317
+ ProfileCard
441
318
  });
package/dist/index.mjs CHANGED
@@ -82,151 +82,8 @@ function shadeColor(hex, percent) {
82
82
  return `rgb(${r},${g},${b})`;
83
83
  }
84
84
 
85
- // src/components/Card/Card.jsx
86
- import React2, { useState as useState2 } from "react";
87
- var Card = ({
88
- title = "Card Title",
89
- description = "This is a simple, reusable card component you can customize with props.",
90
- image = null,
91
- badge = null,
92
- badgeColor = "#6366f1",
93
- accentColor = "#6366f1",
94
- actions = [],
95
- footer = null,
96
- width = "320px",
97
- onClick = null
98
- }) => {
99
- const [hovered, setHovered] = useState2(false);
100
- const [liked, setLiked] = useState2(false);
101
- const style = {
102
- width,
103
- borderRadius: "16px",
104
- background: "#ffffff",
105
- boxShadow: hovered ? "0 16px 48px rgba(0,0,0,0.13)" : "0 4px 20px rgba(0,0,0,0.07)",
106
- transform: hovered ? "translateY(-4px)" : "translateY(0)",
107
- transition: "all 0.22s ease",
108
- overflow: "hidden",
109
- fontFamily: "system-ui, sans-serif",
110
- cursor: onClick ? "pointer" : "default",
111
- border: "1px solid #f1f5f9"
112
- };
113
- return /* @__PURE__ */ React2.createElement(
114
- "div",
115
- {
116
- style,
117
- onMouseEnter: () => setHovered(true),
118
- onMouseLeave: () => setHovered(false),
119
- onClick
120
- },
121
- image && /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "180px", overflow: "hidden", position: "relative" } }, /* @__PURE__ */ React2.createElement(
122
- "img",
123
- {
124
- src: image,
125
- alt: title,
126
- style: {
127
- width: "100%",
128
- height: "100%",
129
- objectFit: "cover",
130
- transform: hovered ? "scale(1.04)" : "scale(1)",
131
- transition: "transform 0.35s ease"
132
- }
133
- }
134
- ), badge && /* @__PURE__ */ React2.createElement("span", { style: {
135
- position: "absolute",
136
- top: "12px",
137
- left: "12px",
138
- background: badgeColor,
139
- color: "#fff",
140
- fontSize: "11px",
141
- fontWeight: 700,
142
- letterSpacing: "0.06em",
143
- textTransform: "uppercase",
144
- padding: "4px 10px",
145
- borderRadius: "99px"
146
- } }, badge)),
147
- /* @__PURE__ */ React2.createElement("div", { style: { padding: "20px 20px 16px" } }, !image && badge && /* @__PURE__ */ React2.createElement("span", { style: {
148
- display: "inline-block",
149
- background: badgeColor + "18",
150
- color: badgeColor,
151
- fontSize: "11px",
152
- fontWeight: 700,
153
- letterSpacing: "0.06em",
154
- textTransform: "uppercase",
155
- padding: "3px 10px",
156
- borderRadius: "99px",
157
- marginBottom: "10px"
158
- } }, badge), /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 8px", fontSize: "17px", fontWeight: 700, color: "#0f172a", lineHeight: 1.3 } }, title), /* @__PURE__ */ React2.createElement("p", { style: { margin: 0, fontSize: "14px", color: "#64748b", lineHeight: 1.6 } }, description)),
159
- (actions.length > 0 || true) && /* @__PURE__ */ React2.createElement("div", { style: { padding: "0 20px 18px", display: "flex", alignItems: "center", gap: "10px" } }, actions.map((action, i) => /* @__PURE__ */ React2.createElement(ActionButton, { key: i, ...action, accentColor, primary: i === 0 })), /* @__PURE__ */ React2.createElement(
160
- "button",
161
- {
162
- onClick: (e) => {
163
- e.stopPropagation();
164
- setLiked(!liked);
165
- },
166
- style: {
167
- marginLeft: "auto",
168
- background: liked ? "#fef2f2" : "#f8fafc",
169
- border: "none",
170
- borderRadius: "8px",
171
- padding: "8px 10px",
172
- cursor: "pointer",
173
- fontSize: "16px",
174
- transition: "all 0.15s",
175
- transform: liked ? "scale(1.15)" : "scale(1)"
176
- },
177
- title: liked ? "Unlike" : "Like"
178
- },
179
- liked ? "\u2764\uFE0F" : "\u{1F90D}"
180
- )),
181
- footer && /* @__PURE__ */ React2.createElement("div", { style: {
182
- borderTop: "1px solid #f1f5f9",
183
- padding: "12px 20px",
184
- fontSize: "12px",
185
- color: "#94a3b8",
186
- display: "flex",
187
- alignItems: "center",
188
- gap: "6px"
189
- } }, footer)
190
- );
191
- };
192
- var ActionButton = ({ label = "Action", onClick = () => {
193
- }, accentColor = "#6366f1", primary = false }) => {
194
- const [hovered, setHovered] = useState2(false);
195
- return /* @__PURE__ */ React2.createElement(
196
- "button",
197
- {
198
- onClick: (e) => {
199
- e.stopPropagation();
200
- onClick();
201
- },
202
- onMouseEnter: () => setHovered(true),
203
- onMouseLeave: () => setHovered(false),
204
- style: {
205
- padding: "8px 18px",
206
- borderRadius: "8px",
207
- fontSize: "13px",
208
- fontWeight: 600,
209
- cursor: "pointer",
210
- transition: "all 0.15s",
211
- background: primary ? hovered ? shadeColor2(accentColor, -15) : accentColor : hovered ? accentColor + "12" : "transparent",
212
- color: primary ? "#fff" : accentColor,
213
- border: primary ? "none" : `1.5px solid ${accentColor}`,
214
- boxShadow: primary && !hovered ? `0 3px 10px ${accentColor}40` : "none"
215
- }
216
- },
217
- label
218
- );
219
- };
220
- function shadeColor2(hex, percent) {
221
- const num = parseInt(hex.replace("#", ""), 16);
222
- const r = Math.min(255, Math.max(0, (num >> 16) + percent));
223
- const g = Math.min(255, Math.max(0, (num >> 8 & 255) + percent));
224
- const b = Math.min(255, Math.max(0, (num & 255) + percent));
225
- return `rgb(${r},${g},${b})`;
226
- }
227
-
228
85
  // src/components/EcommerceCard/EcommerceCard.jsx
229
- import React3, { useState as useState3 } from "react";
86
+ import React2, { useState as useState2 } from "react";
230
87
  var EcommerceCard = ({
231
88
  image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
232
89
  title = "Wireless Headphones",
@@ -241,8 +98,8 @@ var EcommerceCard = ({
241
98
  onAddToCart = () => {
242
99
  }
243
100
  }) => {
244
- const [hovered, setHovered] = useState3(false);
245
- const [wishlisted, setWishlisted] = useState3(false);
101
+ const [hovered, setHovered] = useState2(false);
102
+ const [wishlisted, setWishlisted] = useState2(false);
246
103
  const alpha = (hex, op) => {
247
104
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
248
105
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -254,21 +111,21 @@ var EcommerceCard = ({
254
111
  for (let i = 1; i <= 5; i++) {
255
112
  if (i <= fullStars) {
256
113
  stars.push(
257
- /* @__PURE__ */ React3.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React3.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
114
+ /* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
258
115
  );
259
116
  } else if (i === fullStars + 1 && hasHalfStar) {
260
117
  stars.push(
261
- /* @__PURE__ */ React3.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ React3.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ React3.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ React3.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
118
+ /* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ React2.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ React2.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2", fill: "url(#half)" }))
262
119
  );
263
120
  } else {
264
121
  stars.push(
265
- /* @__PURE__ */ React3.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ React3.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
122
+ /* @__PURE__ */ React2.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ React2.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" }))
266
123
  );
267
124
  }
268
125
  }
269
126
  return stars;
270
127
  };
271
- return /* @__PURE__ */ React3.createElement(
128
+ return /* @__PURE__ */ React2.createElement(
272
129
  "div",
273
130
  {
274
131
  onMouseEnter: () => setHovered(true),
@@ -285,7 +142,7 @@ var EcommerceCard = ({
285
142
  boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
286
143
  }
287
144
  },
288
- /* @__PURE__ */ React3.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React3.createElement(
145
+ /* @__PURE__ */ React2.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React2.createElement(
289
146
  "img",
290
147
  {
291
148
  src: image,
@@ -298,7 +155,7 @@ var EcommerceCard = ({
298
155
  transform: hovered ? "scale(1.05)" : "scale(1)"
299
156
  }
300
157
  }
301
- ), badge && /* @__PURE__ */ React3.createElement("div", { style: {
158
+ ), badge && /* @__PURE__ */ React2.createElement("div", { style: {
302
159
  position: "absolute",
303
160
  top: "10px",
304
161
  left: "10px",
@@ -310,7 +167,7 @@ var EcommerceCard = ({
310
167
  color: "#fff",
311
168
  textTransform: "uppercase",
312
169
  letterSpacing: "0.5px"
313
- } }, badge), /* @__PURE__ */ React3.createElement(
170
+ } }, badge), /* @__PURE__ */ React2.createElement(
314
171
  "button",
315
172
  {
316
173
  onClick: () => setWishlisted(!wishlisted),
@@ -329,7 +186,7 @@ var EcommerceCard = ({
329
186
  cursor: "pointer"
330
187
  }
331
188
  },
332
- /* @__PURE__ */ React3.createElement(
189
+ /* @__PURE__ */ React2.createElement(
333
190
  "svg",
334
191
  {
335
192
  width: "16",
@@ -339,38 +196,38 @@ var EcommerceCard = ({
339
196
  stroke: wishlisted ? "#ef4444" : "#fff",
340
197
  strokeWidth: "2"
341
198
  },
342
- /* @__PURE__ */ React3.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
199
+ /* @__PURE__ */ React2.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
343
200
  )
344
201
  )),
345
- /* @__PURE__ */ React3.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React3.createElement("h3", { style: {
202
+ /* @__PURE__ */ React2.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React2.createElement("h3", { style: {
346
203
  fontSize: "16px",
347
204
  fontWeight: "700",
348
205
  color: "#fff",
349
206
  margin: "0 0 8px",
350
207
  lineHeight: 1.4
351
- } }, title), /* @__PURE__ */ React3.createElement("div", { style: {
208
+ } }, title), /* @__PURE__ */ React2.createElement("div", { style: {
352
209
  display: "flex",
353
210
  alignItems: "center",
354
211
  gap: "6px",
355
212
  marginBottom: "12px"
356
- } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React3.createElement("span", { style: {
213
+ } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React2.createElement("span", { style: {
357
214
  fontSize: "12px",
358
215
  color: "rgba(255,255,255,0.45)"
359
- } }, "(", reviewCount, ")")), /* @__PURE__ */ React3.createElement("div", { style: {
216
+ } }, "(", reviewCount, ")")), /* @__PURE__ */ React2.createElement("div", { style: {
360
217
  display: "flex",
361
218
  alignItems: "center",
362
219
  gap: "10px",
363
220
  marginBottom: "16px"
364
- } }, /* @__PURE__ */ React3.createElement("span", { style: {
221
+ } }, /* @__PURE__ */ React2.createElement("span", { style: {
365
222
  fontSize: "20px",
366
223
  fontWeight: "800",
367
224
  color: "#fff"
368
- } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React3.createElement("span", { style: {
225
+ } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React2.createElement("span", { style: {
369
226
  fontSize: "14px",
370
227
  fontWeight: "500",
371
228
  color: "#86efac",
372
229
  textDecoration: "line-through"
373
- } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React3.createElement(
230
+ } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React2.createElement(
374
231
  "button",
375
232
  {
376
233
  onClick: onAddToCart,
@@ -391,13 +248,33 @@ var EcommerceCard = ({
391
248
  gap: "8px"
392
249
  }
393
250
  },
394
- /* @__PURE__ */ React3.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React3.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ React3.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ React3.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
251
+ /* @__PURE__ */ React2.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React2.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ React2.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ React2.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
395
252
  "Add to Cart"
396
253
  ))
397
254
  );
398
255
  };
256
+
257
+ // src/components/ProfileCard/ProfileCard.jsx
258
+ import React3 from "react";
259
+ var ProfileCard = ({
260
+ name = "John Doe",
261
+ bio = "Software Engineer | Tech Enthusiast",
262
+ avatar = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=600&q=80",
263
+ accent = "#6366f1",
264
+ bg = "#0f172a",
265
+ onFollowClick = () => {
266
+ },
267
+ onMessageClick = () => {
268
+ }
269
+ }) => {
270
+ const alpha = (hex, op) => {
271
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
272
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
273
+ };
274
+ return /* @__PURE__ */ React3.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "280px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React3.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ React3.createElement("button", { onClick: onFollowClick, style: { padding: "8px 16px", borderRadius: "8px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Follow"), /* @__PURE__ */ React3.createElement("button", { onClick: onMessageClick, style: { padding: "8px 16px", borderRadius: "8px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Message"))));
275
+ };
399
276
  export {
400
277
  Button,
401
- Card,
402
- EcommerceCard
278
+ EcommerceCard,
279
+ ProfileCard
403
280
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtuo-ui-library",
3
- "version": "1.0.5",
3
+ "version": "1.0.7",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Ritik Saini",