virtual-ui-library-uday 1.0.10 → 1.0.12

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 +211 -94
  2. package/dist/index.mjs +210 -94
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -31,94 +31,14 @@ var index_exports = {};
31
31
  __export(index_exports, {
32
32
  Button: () => Button,
33
33
  Card: () => Card,
34
+ ProductCard: () => ProductCard,
34
35
  Profilecard: () => Profilecard
35
36
  });
36
37
  module.exports = __toCommonJS(index_exports);
37
38
 
38
- // src/components/Buttons/Button.jsx
39
+ // src/components/Card/Card.jsx
39
40
  var import_react = __toESM(require("react"));
40
41
  var import_react2 = require("react");
41
- var Button = ({
42
- label = "Click Me",
43
- onClick = () => {
44
- },
45
- backgroundColor = "#6c63ff",
46
- color = "#ffffff",
47
- hoverBackgroundColor = "#574fd6",
48
- hoverColor = "#ffffff",
49
- fontSize = "15px",
50
- paddingX = "24px",
51
- paddingY = "11px",
52
- borderRadius = "8px",
53
- border = "none",
54
- fontFamily = "'Segoe UI', sans-serif",
55
- fontWeight = "600",
56
- disabled = false,
57
- loading = false,
58
- icon = null
59
- }) => {
60
- const [hovered, setHovered] = (0, import_react2.useState)(false);
61
- const [pressed, setPressed] = (0, import_react2.useState)(false);
62
- const style = {
63
- display: "inline-flex",
64
- alignItems: "center",
65
- justifyContent: "center",
66
- gap: "8px",
67
- padding: `${paddingY} ${paddingX}`,
68
- backgroundColor: disabled ? "#cccccc" : hovered ? hoverBackgroundColor : backgroundColor,
69
- color: hovered ? hoverColor : color,
70
- fontSize,
71
- fontFamily,
72
- fontWeight,
73
- border,
74
- borderRadius,
75
- cursor: disabled || loading ? "not-allowed" : "pointer",
76
- opacity: disabled ? 0.6 : 1,
77
- transform: pressed && !disabled ? "scale(0.96)" : "scale(1)",
78
- boxShadow: hovered && !disabled ? "0 6px 20px rgba(108,99,255,0.35)" : "0 2px 8px rgba(0,0,0,0.12)",
79
- transition: "all 0.2s ease",
80
- outline: "none",
81
- userSelect: "none",
82
- letterSpacing: "0.03em"
83
- };
84
- const spinnerStyle = {
85
- width: "13px",
86
- height: "13px",
87
- border: `2px solid ${color}44`,
88
- borderTop: `2px solid ${color}`,
89
- borderRadius: "50%",
90
- animation: "btn-spin 0.65s linear infinite"
91
- };
92
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, `
93
- @keyframes btn-spin {
94
- to {
95
- transform: rotate(360deg);
96
- }
97
- }
98
- `), /* @__PURE__ */ import_react.default.createElement(
99
- "button",
100
- {
101
- style,
102
- onClick: !disabled && !loading ? onClick : void 0,
103
- onMouseEnter: () => setHovered(true),
104
- onMouseLeave: () => {
105
- setHovered(false);
106
- setPressed(false);
107
- },
108
- onMouseDown: () => setPressed(true),
109
- onMouseUp: () => setPressed(false),
110
- disabled,
111
- "aria-disabled": disabled || loading,
112
- "aria-label": label
113
- },
114
- loading ? /* @__PURE__ */ import_react.default.createElement("span", { style: spinnerStyle }) : icon && /* @__PURE__ */ import_react.default.createElement("span", null, icon),
115
- loading ? "Loading..." : label
116
- ));
117
- };
118
-
119
- // src/components/Card/Card.jsx
120
- var import_react3 = __toESM(require("react"));
121
- var import_react4 = require("react");
122
42
  var Card = ({
123
43
  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
124
44
  category = "Travel",
@@ -138,10 +58,10 @@ var Card = ({
138
58
  onReadMore = () => {
139
59
  }
140
60
  }) => {
141
- const [liked, setLiked] = (0, import_react4.useState)(false);
142
- const [likeCount, setLikeCount] = (0, import_react4.useState)(likes);
143
- const [saved, setSaved] = (0, import_react4.useState)(bookmarked);
144
- const [imgHovered, setImgHovered] = (0, import_react4.useState)(false);
61
+ const [liked, setLiked] = (0, import_react2.useState)(false);
62
+ const [likeCount, setLikeCount] = (0, import_react2.useState)(likes);
63
+ const [saved, setSaved] = (0, import_react2.useState)(bookmarked);
64
+ const [imgHovered, setImgHovered] = (0, import_react2.useState)(false);
145
65
  const handleLike = () => {
146
66
  setLiked(!liked);
147
67
  setLikeCount((c) => liked ? c - 1 : c + 1);
@@ -283,17 +203,17 @@ var Card = ({
283
203
  transition: "opacity 0.2s ease"
284
204
  }
285
205
  };
286
- return /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.card }, /* @__PURE__ */ import_react3.default.createElement(
206
+ return /* @__PURE__ */ import_react.default.createElement("div", { style: styles.card }, /* @__PURE__ */ import_react.default.createElement(
287
207
  "div",
288
208
  {
289
209
  style: styles.imageWrap,
290
210
  onMouseEnter: () => setImgHovered(true),
291
211
  onMouseLeave: () => setImgHovered(false)
292
212
  },
293
- /* @__PURE__ */ import_react3.default.createElement("img", { src: image, alt: title, style: styles.image }),
294
- /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.imageOverlay }),
295
- /* @__PURE__ */ import_react3.default.createElement("span", { style: styles.category }, category)
296
- ), /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.body }, /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.title }, title), /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.description }, description), /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.divider }), /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.meta }, /* @__PURE__ */ import_react3.default.createElement("img", { src: authorAvatar, alt: author, style: styles.avatar }), /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.authorName }, author)), /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.metaRight }, /* @__PURE__ */ import_react3.default.createElement("span", { style: styles.metaText }, date), /* @__PURE__ */ import_react3.default.createElement("span", { style: styles.metaText }, readTime))), /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.actions }, /* @__PURE__ */ import_react3.default.createElement("button", { style: styles.iconBtn(liked, "#e74c3c"), onClick: handleLike }, liked ? "\u2665" : "\u2661", " ", likeCount), /* @__PURE__ */ import_react3.default.createElement("button", { style: styles.iconBtn(saved, accentColor), onClick: handleBookmark }, saved ? "\u229F" : "\u229E", " ", saved ? "Saved" : "Save"), /* @__PURE__ */ import_react3.default.createElement(
213
+ /* @__PURE__ */ import_react.default.createElement("img", { src: image, alt: title, style: styles.image }),
214
+ /* @__PURE__ */ import_react.default.createElement("div", { style: styles.imageOverlay }),
215
+ /* @__PURE__ */ import_react.default.createElement("span", { style: styles.category }, category)
216
+ ), /* @__PURE__ */ import_react.default.createElement("div", { style: styles.body }, /* @__PURE__ */ import_react.default.createElement("div", { style: styles.title }, title), /* @__PURE__ */ import_react.default.createElement("div", { style: styles.description }, description), /* @__PURE__ */ import_react.default.createElement("div", { style: styles.divider }), /* @__PURE__ */ import_react.default.createElement("div", { style: styles.meta }, /* @__PURE__ */ import_react.default.createElement("img", { src: authorAvatar, alt: author, style: styles.avatar }), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement("div", { style: styles.authorName }, author)), /* @__PURE__ */ import_react.default.createElement("div", { style: styles.metaRight }, /* @__PURE__ */ import_react.default.createElement("span", { style: styles.metaText }, date), /* @__PURE__ */ import_react.default.createElement("span", { style: styles.metaText }, readTime))), /* @__PURE__ */ import_react.default.createElement("div", { style: styles.actions }, /* @__PURE__ */ import_react.default.createElement("button", { style: styles.iconBtn(liked, "#e74c3c"), onClick: handleLike }, liked ? "\u2665" : "\u2661", " ", likeCount), /* @__PURE__ */ import_react.default.createElement("button", { style: styles.iconBtn(saved, accentColor), onClick: handleBookmark }, saved ? "\u229F" : "\u229E", " ", saved ? "Saved" : "Save"), /* @__PURE__ */ import_react.default.createElement(
297
217
  "button",
298
218
  {
299
219
  style: styles.readBtn,
@@ -306,7 +226,7 @@ var Card = ({
306
226
  };
307
227
 
308
228
  // src/components/profilecard/Profilecard.jsx
309
- var import_react5 = __toESM(require("react"));
229
+ var import_react3 = __toESM(require("react"));
310
230
  var Profilecard = ({
311
231
  name = "Priya Mehta",
312
232
  role = "Product Designer",
@@ -322,7 +242,7 @@ var Profilecard = ({
322
242
  onMessage = () => {
323
243
  }
324
244
  }) => {
325
- const [isFollowing, setIsFollowing] = (0, import_react5.useState)(false);
245
+ const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
326
246
  const s = {
327
247
  card: {
328
248
  width: "300px",
@@ -455,11 +375,208 @@ var Profilecard = ({
455
375
  { num: following, lbl: "Following" },
456
376
  { num: projects, lbl: "Projects" }
457
377
  ];
458
- return /* @__PURE__ */ import_react5.default.createElement("div", { style: s.card }, /* @__PURE__ */ import_react5.default.createElement("div", { style: s.cover }, /* @__PURE__ */ import_react5.default.createElement("div", { style: s.avatarWrap }, /* @__PURE__ */ import_react5.default.createElement("img", { src: avatar, alt: name, style: s.avatar }), /* @__PURE__ */ import_react5.default.createElement("span", { style: s.dot }))), /* @__PURE__ */ import_react5.default.createElement("div", { style: s.info }, /* @__PURE__ */ import_react5.default.createElement("p", { style: s.name }, name), /* @__PURE__ */ import_react5.default.createElement("p", { style: s.role }, role, " \xB7 ", /* @__PURE__ */ import_react5.default.createElement("span", { style: { color: "#aaa" } }, company)), /* @__PURE__ */ import_react5.default.createElement("div", { style: s.location }, /* @__PURE__ */ import_react5.default.createElement("span", null, "\u{1F4CD}"), " ", location)), /* @__PURE__ */ import_react5.default.createElement("div", { style: s.tags }, tags.map((t) => /* @__PURE__ */ import_react5.default.createElement("span", { key: t, style: s.tag }, t))), /* @__PURE__ */ import_react5.default.createElement("div", { style: s.stats }, stats.map((st, i) => /* @__PURE__ */ import_react5.default.createElement("div", { key: st.lbl, style: s.stat(i) }, /* @__PURE__ */ import_react5.default.createElement("div", { style: s.statNum }, st.num), /* @__PURE__ */ import_react5.default.createElement("div", { style: s.statLbl }, st.lbl)))), /* @__PURE__ */ import_react5.default.createElement("div", { style: s.actions }, /* @__PURE__ */ import_react5.default.createElement("button", { style: s.followBtn, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following \u2713" : "Follow"), /* @__PURE__ */ import_react5.default.createElement("button", { style: s.msgBtn, onClick: onMessage }, "\u{1F4AC}")));
378
+ return /* @__PURE__ */ import_react3.default.createElement("div", { style: s.card }, /* @__PURE__ */ import_react3.default.createElement("div", { style: s.cover }, /* @__PURE__ */ import_react3.default.createElement("div", { style: s.avatarWrap }, /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: name, style: s.avatar }), /* @__PURE__ */ import_react3.default.createElement("span", { style: s.dot }))), /* @__PURE__ */ import_react3.default.createElement("div", { style: s.info }, /* @__PURE__ */ import_react3.default.createElement("p", { style: s.name }, name), /* @__PURE__ */ import_react3.default.createElement("p", { style: s.role }, role, " \xB7 ", /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: "#aaa" } }, company)), /* @__PURE__ */ import_react3.default.createElement("div", { style: s.location }, /* @__PURE__ */ import_react3.default.createElement("span", null, "\u{1F4CD}"), " ", location)), /* @__PURE__ */ import_react3.default.createElement("div", { style: s.tags }, tags.map((t) => /* @__PURE__ */ import_react3.default.createElement("span", { key: t, style: s.tag }, t))), /* @__PURE__ */ import_react3.default.createElement("div", { style: s.stats }, stats.map((st, i) => /* @__PURE__ */ import_react3.default.createElement("div", { key: st.lbl, style: s.stat(i) }, /* @__PURE__ */ import_react3.default.createElement("div", { style: s.statNum }, st.num), /* @__PURE__ */ import_react3.default.createElement("div", { style: s.statLbl }, st.lbl)))), /* @__PURE__ */ import_react3.default.createElement("div", { style: s.actions }, /* @__PURE__ */ import_react3.default.createElement("button", { style: s.followBtn, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following \u2713" : "Follow"), /* @__PURE__ */ import_react3.default.createElement("button", { style: s.msgBtn, onClick: onMessage }, "\u{1F4AC}")));
379
+ };
380
+
381
+ // src/components/Button/Button.jsx
382
+ var import_react4 = __toESM(require("react"));
383
+ var alpha = (hex, op) => {
384
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
385
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
386
+ };
387
+ var Button = ({
388
+ label = "Click me",
389
+ onClick = () => console.log("Button clicked"),
390
+ color = "#4CAF50",
391
+ disabled = false,
392
+ size = "medium"
393
+ }) => {
394
+ const sizes = {
395
+ small: { padding: "6px 12px", fontSize: "12px" },
396
+ medium: { padding: "10px 20px", fontSize: "14px" },
397
+ large: { padding: "14px 28px", fontSize: "16px" }
398
+ };
399
+ const buttonStyle = {
400
+ backgroundColor: disabled ? "#cccccc" : color,
401
+ color: "white",
402
+ border: "none",
403
+ borderRadius: "4px",
404
+ cursor: disabled ? "not-allowed" : "pointer",
405
+ fontWeight: "bold",
406
+ transition: "background-color 0.3s",
407
+ ...sizes[size]
408
+ };
409
+ const hoverStyle = {
410
+ backgroundColor: disabled ? "#cccccc" : alpha(color, 0.8)
411
+ };
412
+ const [hover, setHover] = import_react4.default.useState(false);
413
+ return /* @__PURE__ */ import_react4.default.createElement(
414
+ "button",
415
+ {
416
+ onClick: !disabled ? onClick : null,
417
+ style: hover ? { ...buttonStyle, ...hoverStyle } : buttonStyle,
418
+ onMouseEnter: () => setHover(true),
419
+ onMouseLeave: () => setHover(false),
420
+ disabled
421
+ },
422
+ label
423
+ );
424
+ };
425
+
426
+ // src/components/ProductCard/ProductCard.jsx
427
+ var import_react5 = __toESM(require("react"));
428
+ var alpha2 = (hex, op) => {
429
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
430
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
431
+ };
432
+ var ProductCard = ({
433
+ title = "Premium Headphones",
434
+ price = 199.99,
435
+ discount = 0,
436
+ rating = 4.5,
437
+ imageUrl = "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500",
438
+ accentColor = "#3b82f6"
439
+ }) => {
440
+ const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
441
+ const [isLiked, setIsLiked] = (0, import_react5.useState)(false);
442
+ const formattedPrice = new Intl.NumberFormat("en-US", {
443
+ style: "currency",
444
+ currency: "USD"
445
+ }).format(price);
446
+ const discountPrice = discount > 0 ? new Intl.NumberFormat("en-US", {
447
+ style: "currency",
448
+ currency: "USD"
449
+ }).format(price * (1 - discount / 100)) : null;
450
+ return /* @__PURE__ */ import_react5.default.createElement(
451
+ "div",
452
+ {
453
+ style: {
454
+ width: "280px",
455
+ borderRadius: "12px",
456
+ overflow: "hidden",
457
+ boxShadow: "0 4px 6px " + alpha2("#000000", 0.1),
458
+ transition: "transform 0.3s ease, box-shadow 0.3s ease",
459
+ transform: isHovered ? "translateY(-4px)" : "translateY(0)",
460
+ boxShadow: isHovered ? "0 8px 15px " + alpha2("#000000", 0.15) : "0 4px 6px " + alpha2("#000000", 0.1),
461
+ backgroundColor: "#ffffff",
462
+ position: "relative"
463
+ },
464
+ onMouseEnter: () => setIsHovered(true),
465
+ onMouseLeave: () => setIsHovered(false)
466
+ },
467
+ /* @__PURE__ */ import_react5.default.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ import_react5.default.createElement(
468
+ "img",
469
+ {
470
+ src: imageUrl,
471
+ alt: title,
472
+ style: {
473
+ width: "100%",
474
+ height: "200px",
475
+ objectFit: "cover",
476
+ borderTopLeftRadius: "12px",
477
+ borderTopRightRadius: "12px"
478
+ }
479
+ }
480
+ ), /* @__PURE__ */ import_react5.default.createElement(
481
+ "button",
482
+ {
483
+ onClick: () => setIsLiked(!isLiked),
484
+ style: {
485
+ position: "absolute",
486
+ top: "12px",
487
+ right: "12px",
488
+ width: "36px",
489
+ height: "36px",
490
+ borderRadius: "50%",
491
+ backgroundColor: "#ffffff",
492
+ border: "none",
493
+ display: "flex",
494
+ alignItems: "center",
495
+ justifyContent: "center",
496
+ cursor: "pointer",
497
+ boxShadow: "0 2px 4px " + alpha2("#000000", 0.1)
498
+ }
499
+ },
500
+ /* @__PURE__ */ import_react5.default.createElement(
501
+ "svg",
502
+ {
503
+ width: "20",
504
+ height: "20",
505
+ viewBox: "0 0 24 24",
506
+ fill: isLiked ? accentColor : "none",
507
+ stroke: isLiked ? accentColor : "#6b7280",
508
+ strokeWidth: "2"
509
+ },
510
+ /* @__PURE__ */ import_react5.default.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
511
+ )
512
+ ), discount > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { style: {
513
+ position: "absolute",
514
+ top: "12px",
515
+ left: "12px",
516
+ backgroundColor: accentColor,
517
+ color: "white",
518
+ padding: "4px 8px",
519
+ borderRadius: "4px",
520
+ fontSize: "14px",
521
+ fontWeight: "bold"
522
+ } }, "-", discount, "%")),
523
+ /* @__PURE__ */ import_react5.default.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ import_react5.default.createElement("h3", { style: {
524
+ margin: "0 0 8px 0",
525
+ fontSize: "18px",
526
+ fontWeight: "600",
527
+ color: "#1f2937",
528
+ whiteSpace: "nowrap",
529
+ overflow: "hidden",
530
+ textOverflow: "ellipsis"
531
+ } }, title), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "12px" } }, [...Array(5)].map((_, i) => /* @__PURE__ */ import_react5.default.createElement(
532
+ "svg",
533
+ {
534
+ key: i,
535
+ width: "16",
536
+ height: "16",
537
+ viewBox: "0 0 24 24",
538
+ fill: i < Math.floor(rating) ? "#f59e0b" : i < rating ? "#f59e0b" : "#e5e7eb",
539
+ stroke: "#f59e0b",
540
+ strokeWidth: "1"
541
+ },
542
+ /* @__PURE__ */ import_react5.default.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
543
+ )), /* @__PURE__ */ import_react5.default.createElement("span", { style: {
544
+ marginLeft: "6px",
545
+ fontSize: "14px",
546
+ color: "#6b7280"
547
+ } }, rating.toFixed(1))), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react5.default.createElement("span", { style: {
548
+ fontSize: "20px",
549
+ fontWeight: "bold",
550
+ color: accentColor
551
+ } }, discountPrice || formattedPrice), discountPrice && /* @__PURE__ */ import_react5.default.createElement("span", { style: {
552
+ fontSize: "14px",
553
+ color: "#6b7280",
554
+ textDecoration: "line-through"
555
+ } }, formattedPrice)), /* @__PURE__ */ import_react5.default.createElement(
556
+ "button",
557
+ {
558
+ style: {
559
+ width: "100%",
560
+ marginTop: "16px",
561
+ padding: "10px 16px",
562
+ backgroundColor: isHovered ? alpha2(accentColor, 0.9) : accentColor,
563
+ color: "white",
564
+ border: "none",
565
+ borderRadius: "6px",
566
+ fontSize: "16px",
567
+ fontWeight: "600",
568
+ cursor: "pointer",
569
+ transition: "background-color 0.2s ease"
570
+ }
571
+ },
572
+ "Add to Cart"
573
+ ))
574
+ );
459
575
  };
460
576
  // Annotate the CommonJS export names for ESM import in node:
461
577
  0 && (module.exports = {
462
578
  Button,
463
579
  Card,
580
+ ProductCard,
464
581
  Profilecard
465
582
  });
package/dist/index.mjs CHANGED
@@ -1,87 +1,6 @@
1
- // src/components/Buttons/Button.jsx
1
+ // src/components/Card/Card.jsx
2
2
  import React from "react";
3
3
  import { useState } from "react";
4
- var Button = ({
5
- label = "Click Me",
6
- onClick = () => {
7
- },
8
- backgroundColor = "#6c63ff",
9
- color = "#ffffff",
10
- hoverBackgroundColor = "#574fd6",
11
- hoverColor = "#ffffff",
12
- fontSize = "15px",
13
- paddingX = "24px",
14
- paddingY = "11px",
15
- borderRadius = "8px",
16
- border = "none",
17
- fontFamily = "'Segoe UI', sans-serif",
18
- fontWeight = "600",
19
- disabled = false,
20
- loading = false,
21
- icon = null
22
- }) => {
23
- const [hovered, setHovered] = useState(false);
24
- const [pressed, setPressed] = useState(false);
25
- const style = {
26
- display: "inline-flex",
27
- alignItems: "center",
28
- justifyContent: "center",
29
- gap: "8px",
30
- padding: `${paddingY} ${paddingX}`,
31
- backgroundColor: disabled ? "#cccccc" : hovered ? hoverBackgroundColor : backgroundColor,
32
- color: hovered ? hoverColor : color,
33
- fontSize,
34
- fontFamily,
35
- fontWeight,
36
- border,
37
- borderRadius,
38
- cursor: disabled || loading ? "not-allowed" : "pointer",
39
- opacity: disabled ? 0.6 : 1,
40
- transform: pressed && !disabled ? "scale(0.96)" : "scale(1)",
41
- boxShadow: hovered && !disabled ? "0 6px 20px rgba(108,99,255,0.35)" : "0 2px 8px rgba(0,0,0,0.12)",
42
- transition: "all 0.2s ease",
43
- outline: "none",
44
- userSelect: "none",
45
- letterSpacing: "0.03em"
46
- };
47
- const spinnerStyle = {
48
- width: "13px",
49
- height: "13px",
50
- border: `2px solid ${color}44`,
51
- borderTop: `2px solid ${color}`,
52
- borderRadius: "50%",
53
- animation: "btn-spin 0.65s linear infinite"
54
- };
55
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, `
56
- @keyframes btn-spin {
57
- to {
58
- transform: rotate(360deg);
59
- }
60
- }
61
- `), /* @__PURE__ */ React.createElement(
62
- "button",
63
- {
64
- style,
65
- onClick: !disabled && !loading ? onClick : void 0,
66
- onMouseEnter: () => setHovered(true),
67
- onMouseLeave: () => {
68
- setHovered(false);
69
- setPressed(false);
70
- },
71
- onMouseDown: () => setPressed(true),
72
- onMouseUp: () => setPressed(false),
73
- disabled,
74
- "aria-disabled": disabled || loading,
75
- "aria-label": label
76
- },
77
- loading ? /* @__PURE__ */ React.createElement("span", { style: spinnerStyle }) : icon && /* @__PURE__ */ React.createElement("span", null, icon),
78
- loading ? "Loading..." : label
79
- ));
80
- };
81
-
82
- // src/components/Card/Card.jsx
83
- import React2 from "react";
84
- import { useState as useState2 } from "react";
85
4
  var Card = ({
86
5
  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
87
6
  category = "Travel",
@@ -101,10 +20,10 @@ var Card = ({
101
20
  onReadMore = () => {
102
21
  }
103
22
  }) => {
104
- const [liked, setLiked] = useState2(false);
105
- const [likeCount, setLikeCount] = useState2(likes);
106
- const [saved, setSaved] = useState2(bookmarked);
107
- const [imgHovered, setImgHovered] = useState2(false);
23
+ const [liked, setLiked] = useState(false);
24
+ const [likeCount, setLikeCount] = useState(likes);
25
+ const [saved, setSaved] = useState(bookmarked);
26
+ const [imgHovered, setImgHovered] = useState(false);
108
27
  const handleLike = () => {
109
28
  setLiked(!liked);
110
29
  setLikeCount((c) => liked ? c - 1 : c + 1);
@@ -246,17 +165,17 @@ var Card = ({
246
165
  transition: "opacity 0.2s ease"
247
166
  }
248
167
  };
249
- return /* @__PURE__ */ React2.createElement("div", { style: styles.card }, /* @__PURE__ */ React2.createElement(
168
+ return /* @__PURE__ */ React.createElement("div", { style: styles.card }, /* @__PURE__ */ React.createElement(
250
169
  "div",
251
170
  {
252
171
  style: styles.imageWrap,
253
172
  onMouseEnter: () => setImgHovered(true),
254
173
  onMouseLeave: () => setImgHovered(false)
255
174
  },
256
- /* @__PURE__ */ React2.createElement("img", { src: image, alt: title, style: styles.image }),
257
- /* @__PURE__ */ React2.createElement("div", { style: styles.imageOverlay }),
258
- /* @__PURE__ */ React2.createElement("span", { style: styles.category }, category)
259
- ), /* @__PURE__ */ React2.createElement("div", { style: styles.body }, /* @__PURE__ */ React2.createElement("div", { style: styles.title }, title), /* @__PURE__ */ React2.createElement("div", { style: styles.description }, description), /* @__PURE__ */ React2.createElement("div", { style: styles.divider }), /* @__PURE__ */ React2.createElement("div", { style: styles.meta }, /* @__PURE__ */ React2.createElement("img", { src: authorAvatar, alt: author, style: styles.avatar }), /* @__PURE__ */ React2.createElement("div", null, /* @__PURE__ */ React2.createElement("div", { style: styles.authorName }, author)), /* @__PURE__ */ React2.createElement("div", { style: styles.metaRight }, /* @__PURE__ */ React2.createElement("span", { style: styles.metaText }, date), /* @__PURE__ */ React2.createElement("span", { style: styles.metaText }, readTime))), /* @__PURE__ */ React2.createElement("div", { style: styles.actions }, /* @__PURE__ */ React2.createElement("button", { style: styles.iconBtn(liked, "#e74c3c"), onClick: handleLike }, liked ? "\u2665" : "\u2661", " ", likeCount), /* @__PURE__ */ React2.createElement("button", { style: styles.iconBtn(saved, accentColor), onClick: handleBookmark }, saved ? "\u229F" : "\u229E", " ", saved ? "Saved" : "Save"), /* @__PURE__ */ React2.createElement(
175
+ /* @__PURE__ */ React.createElement("img", { src: image, alt: title, style: styles.image }),
176
+ /* @__PURE__ */ React.createElement("div", { style: styles.imageOverlay }),
177
+ /* @__PURE__ */ React.createElement("span", { style: styles.category }, category)
178
+ ), /* @__PURE__ */ React.createElement("div", { style: styles.body }, /* @__PURE__ */ React.createElement("div", { style: styles.title }, title), /* @__PURE__ */ React.createElement("div", { style: styles.description }, description), /* @__PURE__ */ React.createElement("div", { style: styles.divider }), /* @__PURE__ */ React.createElement("div", { style: styles.meta }, /* @__PURE__ */ React.createElement("img", { src: authorAvatar, alt: author, style: styles.avatar }), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: styles.authorName }, author)), /* @__PURE__ */ React.createElement("div", { style: styles.metaRight }, /* @__PURE__ */ React.createElement("span", { style: styles.metaText }, date), /* @__PURE__ */ React.createElement("span", { style: styles.metaText }, readTime))), /* @__PURE__ */ React.createElement("div", { style: styles.actions }, /* @__PURE__ */ React.createElement("button", { style: styles.iconBtn(liked, "#e74c3c"), onClick: handleLike }, liked ? "\u2665" : "\u2661", " ", likeCount), /* @__PURE__ */ React.createElement("button", { style: styles.iconBtn(saved, accentColor), onClick: handleBookmark }, saved ? "\u229F" : "\u229E", " ", saved ? "Saved" : "Save"), /* @__PURE__ */ React.createElement(
260
179
  "button",
261
180
  {
262
181
  style: styles.readBtn,
@@ -269,7 +188,7 @@ var Card = ({
269
188
  };
270
189
 
271
190
  // src/components/profilecard/Profilecard.jsx
272
- import React3, { useState as useState3 } from "react";
191
+ import React2, { useState as useState2 } from "react";
273
192
  var Profilecard = ({
274
193
  name = "Priya Mehta",
275
194
  role = "Product Designer",
@@ -285,7 +204,7 @@ var Profilecard = ({
285
204
  onMessage = () => {
286
205
  }
287
206
  }) => {
288
- const [isFollowing, setIsFollowing] = useState3(false);
207
+ const [isFollowing, setIsFollowing] = useState2(false);
289
208
  const s = {
290
209
  card: {
291
210
  width: "300px",
@@ -418,10 +337,207 @@ var Profilecard = ({
418
337
  { num: following, lbl: "Following" },
419
338
  { num: projects, lbl: "Projects" }
420
339
  ];
421
- return /* @__PURE__ */ React3.createElement("div", { style: s.card }, /* @__PURE__ */ React3.createElement("div", { style: s.cover }, /* @__PURE__ */ React3.createElement("div", { style: s.avatarWrap }, /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: name, style: s.avatar }), /* @__PURE__ */ React3.createElement("span", { style: s.dot }))), /* @__PURE__ */ React3.createElement("div", { style: s.info }, /* @__PURE__ */ React3.createElement("p", { style: s.name }, name), /* @__PURE__ */ React3.createElement("p", { style: s.role }, role, " \xB7 ", /* @__PURE__ */ React3.createElement("span", { style: { color: "#aaa" } }, company)), /* @__PURE__ */ React3.createElement("div", { style: s.location }, /* @__PURE__ */ React3.createElement("span", null, "\u{1F4CD}"), " ", location)), /* @__PURE__ */ React3.createElement("div", { style: s.tags }, tags.map((t) => /* @__PURE__ */ React3.createElement("span", { key: t, style: s.tag }, t))), /* @__PURE__ */ React3.createElement("div", { style: s.stats }, stats.map((st, i) => /* @__PURE__ */ React3.createElement("div", { key: st.lbl, style: s.stat(i) }, /* @__PURE__ */ React3.createElement("div", { style: s.statNum }, st.num), /* @__PURE__ */ React3.createElement("div", { style: s.statLbl }, st.lbl)))), /* @__PURE__ */ React3.createElement("div", { style: s.actions }, /* @__PURE__ */ React3.createElement("button", { style: s.followBtn, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following \u2713" : "Follow"), /* @__PURE__ */ React3.createElement("button", { style: s.msgBtn, onClick: onMessage }, "\u{1F4AC}")));
340
+ return /* @__PURE__ */ React2.createElement("div", { style: s.card }, /* @__PURE__ */ React2.createElement("div", { style: s.cover }, /* @__PURE__ */ React2.createElement("div", { style: s.avatarWrap }, /* @__PURE__ */ React2.createElement("img", { src: avatar, alt: name, style: s.avatar }), /* @__PURE__ */ React2.createElement("span", { style: s.dot }))), /* @__PURE__ */ React2.createElement("div", { style: s.info }, /* @__PURE__ */ React2.createElement("p", { style: s.name }, name), /* @__PURE__ */ React2.createElement("p", { style: s.role }, role, " \xB7 ", /* @__PURE__ */ React2.createElement("span", { style: { color: "#aaa" } }, company)), /* @__PURE__ */ React2.createElement("div", { style: s.location }, /* @__PURE__ */ React2.createElement("span", null, "\u{1F4CD}"), " ", location)), /* @__PURE__ */ React2.createElement("div", { style: s.tags }, tags.map((t) => /* @__PURE__ */ React2.createElement("span", { key: t, style: s.tag }, t))), /* @__PURE__ */ React2.createElement("div", { style: s.stats }, stats.map((st, i) => /* @__PURE__ */ React2.createElement("div", { key: st.lbl, style: s.stat(i) }, /* @__PURE__ */ React2.createElement("div", { style: s.statNum }, st.num), /* @__PURE__ */ React2.createElement("div", { style: s.statLbl }, st.lbl)))), /* @__PURE__ */ React2.createElement("div", { style: s.actions }, /* @__PURE__ */ React2.createElement("button", { style: s.followBtn, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following \u2713" : "Follow"), /* @__PURE__ */ React2.createElement("button", { style: s.msgBtn, onClick: onMessage }, "\u{1F4AC}")));
341
+ };
342
+
343
+ // src/components/Button/Button.jsx
344
+ import React3 from "react";
345
+ var alpha = (hex, op) => {
346
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
347
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
348
+ };
349
+ var Button = ({
350
+ label = "Click me",
351
+ onClick = () => console.log("Button clicked"),
352
+ color = "#4CAF50",
353
+ disabled = false,
354
+ size = "medium"
355
+ }) => {
356
+ const sizes = {
357
+ small: { padding: "6px 12px", fontSize: "12px" },
358
+ medium: { padding: "10px 20px", fontSize: "14px" },
359
+ large: { padding: "14px 28px", fontSize: "16px" }
360
+ };
361
+ const buttonStyle = {
362
+ backgroundColor: disabled ? "#cccccc" : color,
363
+ color: "white",
364
+ border: "none",
365
+ borderRadius: "4px",
366
+ cursor: disabled ? "not-allowed" : "pointer",
367
+ fontWeight: "bold",
368
+ transition: "background-color 0.3s",
369
+ ...sizes[size]
370
+ };
371
+ const hoverStyle = {
372
+ backgroundColor: disabled ? "#cccccc" : alpha(color, 0.8)
373
+ };
374
+ const [hover, setHover] = React3.useState(false);
375
+ return /* @__PURE__ */ React3.createElement(
376
+ "button",
377
+ {
378
+ onClick: !disabled ? onClick : null,
379
+ style: hover ? { ...buttonStyle, ...hoverStyle } : buttonStyle,
380
+ onMouseEnter: () => setHover(true),
381
+ onMouseLeave: () => setHover(false),
382
+ disabled
383
+ },
384
+ label
385
+ );
386
+ };
387
+
388
+ // src/components/ProductCard/ProductCard.jsx
389
+ import React4, { useState as useState3 } from "react";
390
+ var alpha2 = (hex, op) => {
391
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
392
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
393
+ };
394
+ var ProductCard = ({
395
+ title = "Premium Headphones",
396
+ price = 199.99,
397
+ discount = 0,
398
+ rating = 4.5,
399
+ imageUrl = "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=500",
400
+ accentColor = "#3b82f6"
401
+ }) => {
402
+ const [isHovered, setIsHovered] = useState3(false);
403
+ const [isLiked, setIsLiked] = useState3(false);
404
+ const formattedPrice = new Intl.NumberFormat("en-US", {
405
+ style: "currency",
406
+ currency: "USD"
407
+ }).format(price);
408
+ const discountPrice = discount > 0 ? new Intl.NumberFormat("en-US", {
409
+ style: "currency",
410
+ currency: "USD"
411
+ }).format(price * (1 - discount / 100)) : null;
412
+ return /* @__PURE__ */ React4.createElement(
413
+ "div",
414
+ {
415
+ style: {
416
+ width: "280px",
417
+ borderRadius: "12px",
418
+ overflow: "hidden",
419
+ boxShadow: "0 4px 6px " + alpha2("#000000", 0.1),
420
+ transition: "transform 0.3s ease, box-shadow 0.3s ease",
421
+ transform: isHovered ? "translateY(-4px)" : "translateY(0)",
422
+ boxShadow: isHovered ? "0 8px 15px " + alpha2("#000000", 0.15) : "0 4px 6px " + alpha2("#000000", 0.1),
423
+ backgroundColor: "#ffffff",
424
+ position: "relative"
425
+ },
426
+ onMouseEnter: () => setIsHovered(true),
427
+ onMouseLeave: () => setIsHovered(false)
428
+ },
429
+ /* @__PURE__ */ React4.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React4.createElement(
430
+ "img",
431
+ {
432
+ src: imageUrl,
433
+ alt: title,
434
+ style: {
435
+ width: "100%",
436
+ height: "200px",
437
+ objectFit: "cover",
438
+ borderTopLeftRadius: "12px",
439
+ borderTopRightRadius: "12px"
440
+ }
441
+ }
442
+ ), /* @__PURE__ */ React4.createElement(
443
+ "button",
444
+ {
445
+ onClick: () => setIsLiked(!isLiked),
446
+ style: {
447
+ position: "absolute",
448
+ top: "12px",
449
+ right: "12px",
450
+ width: "36px",
451
+ height: "36px",
452
+ borderRadius: "50%",
453
+ backgroundColor: "#ffffff",
454
+ border: "none",
455
+ display: "flex",
456
+ alignItems: "center",
457
+ justifyContent: "center",
458
+ cursor: "pointer",
459
+ boxShadow: "0 2px 4px " + alpha2("#000000", 0.1)
460
+ }
461
+ },
462
+ /* @__PURE__ */ React4.createElement(
463
+ "svg",
464
+ {
465
+ width: "20",
466
+ height: "20",
467
+ viewBox: "0 0 24 24",
468
+ fill: isLiked ? accentColor : "none",
469
+ stroke: isLiked ? accentColor : "#6b7280",
470
+ strokeWidth: "2"
471
+ },
472
+ /* @__PURE__ */ React4.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
473
+ )
474
+ ), discount > 0 && /* @__PURE__ */ React4.createElement("div", { style: {
475
+ position: "absolute",
476
+ top: "12px",
477
+ left: "12px",
478
+ backgroundColor: accentColor,
479
+ color: "white",
480
+ padding: "4px 8px",
481
+ borderRadius: "4px",
482
+ fontSize: "14px",
483
+ fontWeight: "bold"
484
+ } }, "-", discount, "%")),
485
+ /* @__PURE__ */ React4.createElement("div", { style: { padding: "16px" } }, /* @__PURE__ */ React4.createElement("h3", { style: {
486
+ margin: "0 0 8px 0",
487
+ fontSize: "18px",
488
+ fontWeight: "600",
489
+ color: "#1f2937",
490
+ whiteSpace: "nowrap",
491
+ overflow: "hidden",
492
+ textOverflow: "ellipsis"
493
+ } }, title), /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "12px" } }, [...Array(5)].map((_, i) => /* @__PURE__ */ React4.createElement(
494
+ "svg",
495
+ {
496
+ key: i,
497
+ width: "16",
498
+ height: "16",
499
+ viewBox: "0 0 24 24",
500
+ fill: i < Math.floor(rating) ? "#f59e0b" : i < rating ? "#f59e0b" : "#e5e7eb",
501
+ stroke: "#f59e0b",
502
+ strokeWidth: "1"
503
+ },
504
+ /* @__PURE__ */ React4.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" })
505
+ )), /* @__PURE__ */ React4.createElement("span", { style: {
506
+ marginLeft: "6px",
507
+ fontSize: "14px",
508
+ color: "#6b7280"
509
+ } }, rating.toFixed(1))), /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React4.createElement("span", { style: {
510
+ fontSize: "20px",
511
+ fontWeight: "bold",
512
+ color: accentColor
513
+ } }, discountPrice || formattedPrice), discountPrice && /* @__PURE__ */ React4.createElement("span", { style: {
514
+ fontSize: "14px",
515
+ color: "#6b7280",
516
+ textDecoration: "line-through"
517
+ } }, formattedPrice)), /* @__PURE__ */ React4.createElement(
518
+ "button",
519
+ {
520
+ style: {
521
+ width: "100%",
522
+ marginTop: "16px",
523
+ padding: "10px 16px",
524
+ backgroundColor: isHovered ? alpha2(accentColor, 0.9) : accentColor,
525
+ color: "white",
526
+ border: "none",
527
+ borderRadius: "6px",
528
+ fontSize: "16px",
529
+ fontWeight: "600",
530
+ cursor: "pointer",
531
+ transition: "background-color 0.2s ease"
532
+ }
533
+ },
534
+ "Add to Cart"
535
+ ))
536
+ );
422
537
  };
423
538
  export {
424
539
  Button,
425
540
  Card,
541
+ ProductCard,
426
542
  Profilecard
427
543
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-library-uday",
3
- "version": "1.0.10",
3
+ "version": "1.0.12",
4
4
  "description": "virtual ui react library",
5
5
  "license": "ISC",
6
6
  "author": "Uday",