virtuo-ui-library 1.0.4 → 1.0.6

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 +40 -93
  2. package/dist/index.mjs +40 -93
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -263,81 +263,8 @@ function shadeColor2(hex, percent) {
263
263
  return `rgb(${r},${g},${b})`;
264
264
  }
265
265
 
266
- // src/components/ProfileCard/ProfileCard.jsx
267
- var import_react3 = __toESM(require("react"));
268
- var ProfileCard = ({
269
- name = "John Doe",
270
- role = "Software Engineer",
271
- avatarUrl = "https://i.pravatar.cc/150?img=3",
272
- color = "#4f46e5",
273
- size = "medium"
274
- }) => {
275
- const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
276
- const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
277
- const sizeMap = {
278
- small: { width: 220, avatar: 60, fontSize: 14 },
279
- medium: { width: 280, avatar: 80, fontSize: 16 },
280
- large: { width: 340, avatar: 100, fontSize: 18 }
281
- };
282
- const { width, avatar, fontSize } = sizeMap[size] || sizeMap.medium;
283
- const cardStyle = {
284
- width,
285
- padding: "20px",
286
- borderRadius: "16px",
287
- textAlign: "center",
288
- fontFamily: "Arial, sans-serif",
289
- backgroundColor: "#ffffff",
290
- boxShadow: isHovered ? "0 12px 24px rgba(0,0,0,0.15)" : "0 4px 12px rgba(0,0,0,0.08)",
291
- transform: isHovered ? "translateY(-4px)" : "translateY(0)",
292
- transition: "all 0.25s ease-in-out",
293
- border: `1px solid ${color}20`
294
- };
295
- const avatarStyle = {
296
- width: avatar,
297
- height: avatar,
298
- borderRadius: "50%",
299
- objectFit: "cover",
300
- border: `3px solid ${color}`,
301
- marginBottom: "12px"
302
- };
303
- const nameStyle = {
304
- margin: 0,
305
- fontSize: fontSize + 4,
306
- fontWeight: "bold",
307
- color: "#1f2937"
308
- };
309
- const roleStyle = {
310
- margin: "4px 0 16px",
311
- fontSize,
312
- color: "#6b7280"
313
- };
314
- const buttonStyle = {
315
- padding: "8px 20px",
316
- borderRadius: "999px",
317
- cursor: "pointer",
318
- fontSize,
319
- fontWeight: 600,
320
- color: isFollowing ? color : "#ffffff",
321
- backgroundColor: isFollowing ? "#ffffff" : color,
322
- border: `2px solid ${color}`,
323
- transition: "all 0.2s ease-in-out"
324
- };
325
- return /* @__PURE__ */ import_react3.default.createElement(
326
- "div",
327
- {
328
- style: cardStyle,
329
- onMouseEnter: () => setIsHovered(true),
330
- onMouseLeave: () => setIsHovered(false)
331
- },
332
- /* @__PURE__ */ import_react3.default.createElement("img", { src: avatarUrl, alt: name, style: avatarStyle }),
333
- /* @__PURE__ */ import_react3.default.createElement("h3", { style: nameStyle }, name),
334
- /* @__PURE__ */ import_react3.default.createElement("p", { style: roleStyle }, role),
335
- /* @__PURE__ */ import_react3.default.createElement("button", { style: buttonStyle, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following" : "Follow")
336
- );
337
- };
338
-
339
266
  // src/components/EcommerceCard/EcommerceCard.jsx
340
- var import_react4 = __toESM(require("react"));
267
+ var import_react3 = __toESM(require("react"));
341
268
  var EcommerceCard = ({
342
269
  image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
343
270
  title = "Wireless Headphones",
@@ -352,8 +279,8 @@ var EcommerceCard = ({
352
279
  onAddToCart = () => {
353
280
  }
354
281
  }) => {
355
- const [hovered, setHovered] = (0, import_react4.useState)(false);
356
- const [wishlisted, setWishlisted] = (0, import_react4.useState)(false);
282
+ const [hovered, setHovered] = (0, import_react3.useState)(false);
283
+ const [wishlisted, setWishlisted] = (0, import_react3.useState)(false);
357
284
  const alpha = (hex, op) => {
358
285
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
359
286
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -365,21 +292,21 @@ var EcommerceCard = ({
365
292
  for (let i = 1; i <= 5; i++) {
366
293
  if (i <= fullStars) {
367
294
  stars.push(
368
- /* @__PURE__ */ import_react4.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react4.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
+ /* @__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" }))
369
296
  );
370
297
  } else if (i === fullStars + 1 && hasHalfStar) {
371
298
  stars.push(
372
- /* @__PURE__ */ import_react4.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ import_react4.default.createElement("defs", null, /* @__PURE__ */ import_react4.default.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ import_react4.default.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ import_react4.default.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ import_react4.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
+ /* @__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)" }))
373
300
  );
374
301
  } else {
375
302
  stars.push(
376
- /* @__PURE__ */ import_react4.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_react4.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
+ /* @__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" }))
377
304
  );
378
305
  }
379
306
  }
380
307
  return stars;
381
308
  };
382
- return /* @__PURE__ */ import_react4.default.createElement(
309
+ return /* @__PURE__ */ import_react3.default.createElement(
383
310
  "div",
384
311
  {
385
312
  onMouseEnter: () => setHovered(true),
@@ -396,7 +323,7 @@ var EcommerceCard = ({
396
323
  boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
397
324
  }
398
325
  },
399
- /* @__PURE__ */ import_react4.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react4.default.createElement(
326
+ /* @__PURE__ */ import_react3.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react3.default.createElement(
400
327
  "img",
401
328
  {
402
329
  src: image,
@@ -409,7 +336,7 @@ var EcommerceCard = ({
409
336
  transform: hovered ? "scale(1.05)" : "scale(1)"
410
337
  }
411
338
  }
412
- ), badge && /* @__PURE__ */ import_react4.default.createElement("div", { style: {
339
+ ), badge && /* @__PURE__ */ import_react3.default.createElement("div", { style: {
413
340
  position: "absolute",
414
341
  top: "10px",
415
342
  left: "10px",
@@ -421,7 +348,7 @@ var EcommerceCard = ({
421
348
  color: "#fff",
422
349
  textTransform: "uppercase",
423
350
  letterSpacing: "0.5px"
424
- } }, badge), /* @__PURE__ */ import_react4.default.createElement(
351
+ } }, badge), /* @__PURE__ */ import_react3.default.createElement(
425
352
  "button",
426
353
  {
427
354
  onClick: () => setWishlisted(!wishlisted),
@@ -440,7 +367,7 @@ var EcommerceCard = ({
440
367
  cursor: "pointer"
441
368
  }
442
369
  },
443
- /* @__PURE__ */ import_react4.default.createElement(
370
+ /* @__PURE__ */ import_react3.default.createElement(
444
371
  "svg",
445
372
  {
446
373
  width: "16",
@@ -450,38 +377,38 @@ var EcommerceCard = ({
450
377
  stroke: wishlisted ? "#ef4444" : "#fff",
451
378
  strokeWidth: "2"
452
379
  },
453
- /* @__PURE__ */ import_react4.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
+ /* @__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" })
454
381
  )
455
382
  )),
456
- /* @__PURE__ */ import_react4.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react4.default.createElement("h3", { style: {
383
+ /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react3.default.createElement("h3", { style: {
457
384
  fontSize: "16px",
458
385
  fontWeight: "700",
459
386
  color: "#fff",
460
387
  margin: "0 0 8px",
461
388
  lineHeight: 1.4
462
- } }, title), /* @__PURE__ */ import_react4.default.createElement("div", { style: {
389
+ } }, title), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
463
390
  display: "flex",
464
391
  alignItems: "center",
465
392
  gap: "6px",
466
393
  marginBottom: "12px"
467
- } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react4.default.createElement("span", { style: {
394
+ } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ import_react3.default.createElement("span", { style: {
468
395
  fontSize: "12px",
469
396
  color: "rgba(255,255,255,0.45)"
470
- } }, "(", reviewCount, ")")), /* @__PURE__ */ import_react4.default.createElement("div", { style: {
397
+ } }, "(", reviewCount, ")")), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
471
398
  display: "flex",
472
399
  alignItems: "center",
473
400
  gap: "10px",
474
401
  marginBottom: "16px"
475
- } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: {
402
+ } }, /* @__PURE__ */ import_react3.default.createElement("span", { style: {
476
403
  fontSize: "20px",
477
404
  fontWeight: "800",
478
405
  color: "#fff"
479
- } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react4.default.createElement("span", { style: {
406
+ } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ import_react3.default.createElement("span", { style: {
480
407
  fontSize: "14px",
481
408
  fontWeight: "500",
482
409
  color: "#86efac",
483
410
  textDecoration: "line-through"
484
- } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react4.default.createElement(
411
+ } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ import_react3.default.createElement(
485
412
  "button",
486
413
  {
487
414
  onClick: onAddToCart,
@@ -502,11 +429,31 @@ var EcommerceCard = ({
502
429
  gap: "8px"
503
430
  }
504
431
  },
505
- /* @__PURE__ */ import_react4.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react4.default.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ import_react4.default.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ import_react4.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
+ /* @__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" })),
506
433
  "Add to Cart"
507
434
  ))
508
435
  );
509
436
  };
437
+
438
+ // src/components/ProfileCard/ProfileCard.jsx
439
+ var import_react4 = __toESM(require("react"));
440
+ var ProfileCard = ({
441
+ name = "John Doe",
442
+ bio = "Software Engineer | Tech Enthusiast",
443
+ avatar = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=600&q=80",
444
+ accent = "#6366f1",
445
+ bg = "#0f172a",
446
+ onFollowClick = () => {
447
+ },
448
+ onMessageClick = () => {
449
+ }
450
+ }) => {
451
+ const alpha = (hex, op) => {
452
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
453
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
454
+ };
455
+ return /* @__PURE__ */ import_react4.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_react4.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ import_react4.default.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ import_react4.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_react4.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"))));
456
+ };
510
457
  // Annotate the CommonJS export names for ESM import in node:
511
458
  0 && (module.exports = {
512
459
  Button,
package/dist/index.mjs CHANGED
@@ -225,81 +225,8 @@ function shadeColor2(hex, percent) {
225
225
  return `rgb(${r},${g},${b})`;
226
226
  }
227
227
 
228
- // src/components/ProfileCard/ProfileCard.jsx
229
- import React3, { useState as useState3 } from "react";
230
- var ProfileCard = ({
231
- name = "John Doe",
232
- role = "Software Engineer",
233
- avatarUrl = "https://i.pravatar.cc/150?img=3",
234
- color = "#4f46e5",
235
- size = "medium"
236
- }) => {
237
- const [isHovered, setIsHovered] = useState3(false);
238
- const [isFollowing, setIsFollowing] = useState3(false);
239
- const sizeMap = {
240
- small: { width: 220, avatar: 60, fontSize: 14 },
241
- medium: { width: 280, avatar: 80, fontSize: 16 },
242
- large: { width: 340, avatar: 100, fontSize: 18 }
243
- };
244
- const { width, avatar, fontSize } = sizeMap[size] || sizeMap.medium;
245
- const cardStyle = {
246
- width,
247
- padding: "20px",
248
- borderRadius: "16px",
249
- textAlign: "center",
250
- fontFamily: "Arial, sans-serif",
251
- backgroundColor: "#ffffff",
252
- boxShadow: isHovered ? "0 12px 24px rgba(0,0,0,0.15)" : "0 4px 12px rgba(0,0,0,0.08)",
253
- transform: isHovered ? "translateY(-4px)" : "translateY(0)",
254
- transition: "all 0.25s ease-in-out",
255
- border: `1px solid ${color}20`
256
- };
257
- const avatarStyle = {
258
- width: avatar,
259
- height: avatar,
260
- borderRadius: "50%",
261
- objectFit: "cover",
262
- border: `3px solid ${color}`,
263
- marginBottom: "12px"
264
- };
265
- const nameStyle = {
266
- margin: 0,
267
- fontSize: fontSize + 4,
268
- fontWeight: "bold",
269
- color: "#1f2937"
270
- };
271
- const roleStyle = {
272
- margin: "4px 0 16px",
273
- fontSize,
274
- color: "#6b7280"
275
- };
276
- const buttonStyle = {
277
- padding: "8px 20px",
278
- borderRadius: "999px",
279
- cursor: "pointer",
280
- fontSize,
281
- fontWeight: 600,
282
- color: isFollowing ? color : "#ffffff",
283
- backgroundColor: isFollowing ? "#ffffff" : color,
284
- border: `2px solid ${color}`,
285
- transition: "all 0.2s ease-in-out"
286
- };
287
- return /* @__PURE__ */ React3.createElement(
288
- "div",
289
- {
290
- style: cardStyle,
291
- onMouseEnter: () => setIsHovered(true),
292
- onMouseLeave: () => setIsHovered(false)
293
- },
294
- /* @__PURE__ */ React3.createElement("img", { src: avatarUrl, alt: name, style: avatarStyle }),
295
- /* @__PURE__ */ React3.createElement("h3", { style: nameStyle }, name),
296
- /* @__PURE__ */ React3.createElement("p", { style: roleStyle }, role),
297
- /* @__PURE__ */ React3.createElement("button", { style: buttonStyle, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following" : "Follow")
298
- );
299
- };
300
-
301
228
  // src/components/EcommerceCard/EcommerceCard.jsx
302
- import React4, { useState as useState4 } from "react";
229
+ import React3, { useState as useState3 } from "react";
303
230
  var EcommerceCard = ({
304
231
  image = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=600&q=80",
305
232
  title = "Wireless Headphones",
@@ -314,8 +241,8 @@ var EcommerceCard = ({
314
241
  onAddToCart = () => {
315
242
  }
316
243
  }) => {
317
- const [hovered, setHovered] = useState4(false);
318
- const [wishlisted, setWishlisted] = useState4(false);
244
+ const [hovered, setHovered] = useState3(false);
245
+ const [wishlisted, setWishlisted] = useState3(false);
319
246
  const alpha = (hex, op) => {
320
247
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
321
248
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -327,21 +254,21 @@ var EcommerceCard = ({
327
254
  for (let i = 1; i <= 5; i++) {
328
255
  if (i <= fullStars) {
329
256
  stars.push(
330
- /* @__PURE__ */ React4.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React4.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" }))
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" }))
331
258
  );
332
259
  } else if (i === fullStars + 1 && hasHalfStar) {
333
260
  stars.push(
334
- /* @__PURE__ */ React4.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "#fbbf24", stroke: "none" }, /* @__PURE__ */ React4.createElement("defs", null, /* @__PURE__ */ React4.createElement("linearGradient", { id: "half", x1: "0", x2: "100%", y1: "0", y2: "0" }, /* @__PURE__ */ React4.createElement("stop", { offset: "50%", stopColor: "#fbbf24" }), /* @__PURE__ */ React4.createElement("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)" }))), /* @__PURE__ */ React4.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)" }))
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)" }))
335
262
  );
336
263
  } else {
337
264
  stars.push(
338
- /* @__PURE__ */ React4.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: "rgba(255,255,255,0.1)", stroke: "none" }, /* @__PURE__ */ React4.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" }))
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" }))
339
266
  );
340
267
  }
341
268
  }
342
269
  return stars;
343
270
  };
344
- return /* @__PURE__ */ React4.createElement(
271
+ return /* @__PURE__ */ React3.createElement(
345
272
  "div",
346
273
  {
347
274
  onMouseEnter: () => setHovered(true),
@@ -358,7 +285,7 @@ var EcommerceCard = ({
358
285
  boxShadow: hovered ? "0 12px 30px rgba(0,0,0,0.4)" : "0 4px 16px rgba(0,0,0,0.3)"
359
286
  }
360
287
  },
361
- /* @__PURE__ */ React4.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React4.createElement(
288
+ /* @__PURE__ */ React3.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React3.createElement(
362
289
  "img",
363
290
  {
364
291
  src: image,
@@ -371,7 +298,7 @@ var EcommerceCard = ({
371
298
  transform: hovered ? "scale(1.05)" : "scale(1)"
372
299
  }
373
300
  }
374
- ), badge && /* @__PURE__ */ React4.createElement("div", { style: {
301
+ ), badge && /* @__PURE__ */ React3.createElement("div", { style: {
375
302
  position: "absolute",
376
303
  top: "10px",
377
304
  left: "10px",
@@ -383,7 +310,7 @@ var EcommerceCard = ({
383
310
  color: "#fff",
384
311
  textTransform: "uppercase",
385
312
  letterSpacing: "0.5px"
386
- } }, badge), /* @__PURE__ */ React4.createElement(
313
+ } }, badge), /* @__PURE__ */ React3.createElement(
387
314
  "button",
388
315
  {
389
316
  onClick: () => setWishlisted(!wishlisted),
@@ -402,7 +329,7 @@ var EcommerceCard = ({
402
329
  cursor: "pointer"
403
330
  }
404
331
  },
405
- /* @__PURE__ */ React4.createElement(
332
+ /* @__PURE__ */ React3.createElement(
406
333
  "svg",
407
334
  {
408
335
  width: "16",
@@ -412,38 +339,38 @@ var EcommerceCard = ({
412
339
  stroke: wishlisted ? "#ef4444" : "#fff",
413
340
  strokeWidth: "2"
414
341
  },
415
- /* @__PURE__ */ React4.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" })
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" })
416
343
  )
417
344
  )),
418
- /* @__PURE__ */ React4.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React4.createElement("h3", { style: {
345
+ /* @__PURE__ */ React3.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React3.createElement("h3", { style: {
419
346
  fontSize: "16px",
420
347
  fontWeight: "700",
421
348
  color: "#fff",
422
349
  margin: "0 0 8px",
423
350
  lineHeight: 1.4
424
- } }, title), /* @__PURE__ */ React4.createElement("div", { style: {
351
+ } }, title), /* @__PURE__ */ React3.createElement("div", { style: {
425
352
  display: "flex",
426
353
  alignItems: "center",
427
354
  gap: "6px",
428
355
  marginBottom: "12px"
429
- } }, /* @__PURE__ */ React4.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React4.createElement("span", { style: {
356
+ } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex" } }, renderStars()), /* @__PURE__ */ React3.createElement("span", { style: {
430
357
  fontSize: "12px",
431
358
  color: "rgba(255,255,255,0.45)"
432
- } }, "(", reviewCount, ")")), /* @__PURE__ */ React4.createElement("div", { style: {
359
+ } }, "(", reviewCount, ")")), /* @__PURE__ */ React3.createElement("div", { style: {
433
360
  display: "flex",
434
361
  alignItems: "center",
435
362
  gap: "10px",
436
363
  marginBottom: "16px"
437
- } }, /* @__PURE__ */ React4.createElement("span", { style: {
364
+ } }, /* @__PURE__ */ React3.createElement("span", { style: {
438
365
  fontSize: "20px",
439
366
  fontWeight: "800",
440
367
  color: "#fff"
441
- } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React4.createElement("span", { style: {
368
+ } }, currency, price.toFixed(2)), discount > 0 && /* @__PURE__ */ React3.createElement("span", { style: {
442
369
  fontSize: "14px",
443
370
  fontWeight: "500",
444
371
  color: "#86efac",
445
372
  textDecoration: "line-through"
446
- } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React4.createElement(
373
+ } }, currency, (price + price * discount / 100).toFixed(2))), /* @__PURE__ */ React3.createElement(
447
374
  "button",
448
375
  {
449
376
  onClick: onAddToCart,
@@ -464,11 +391,31 @@ var EcommerceCard = ({
464
391
  gap: "8px"
465
392
  }
466
393
  },
467
- /* @__PURE__ */ React4.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React4.createElement("circle", { cx: "9", cy: "21", r: "1" }), /* @__PURE__ */ React4.createElement("circle", { cx: "20", cy: "21", r: "1" }), /* @__PURE__ */ React4.createElement("path", { d: "M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6" })),
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" })),
468
395
  "Add to Cart"
469
396
  ))
470
397
  );
471
398
  };
399
+
400
+ // src/components/ProfileCard/ProfileCard.jsx
401
+ import React4 from "react";
402
+ var ProfileCard = ({
403
+ name = "John Doe",
404
+ bio = "Software Engineer | Tech Enthusiast",
405
+ avatar = "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=600&q=80",
406
+ accent = "#6366f1",
407
+ bg = "#0f172a",
408
+ onFollowClick = () => {
409
+ },
410
+ onMessageClick = () => {
411
+ }
412
+ }) => {
413
+ const alpha = (hex, op) => {
414
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
415
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
416
+ };
417
+ return /* @__PURE__ */ React4.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__ */ React4.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React4.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "3px solid " + alpha(accent, 0.3) } }, /* @__PURE__ */ React4.createElement("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "18px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", textAlign: "center" } }, bio), /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", gap: "12px", marginTop: "12px" } }, /* @__PURE__ */ React4.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__ */ React4.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"))));
418
+ };
472
419
  export {
473
420
  Button,
474
421
  Card,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtuo-ui-library",
3
- "version": "1.0.4",
3
+ "version": "1.0.6",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Ritik Saini",