virtual-ui-library-uday 1.0.9 → 1.0.11

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 +212 -93
  2. package/dist/index.mjs +210 -92
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -30,94 +30,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  var index_exports = {};
31
31
  __export(index_exports, {
32
32
  Button: () => Button,
33
- Card: () => Card
33
+ Card: () => Card,
34
+ Profilecard: () => Profilecard
34
35
  });
35
36
  module.exports = __toCommonJS(index_exports);
36
37
 
37
- // src/components/Buttons/Button.jsx
38
+ // src/components/Card/Card.jsx
38
39
  var import_react = __toESM(require("react"));
39
40
  var import_react2 = require("react");
40
- var Button = ({
41
- label = "Click Me",
42
- onClick = () => {
43
- },
44
- backgroundColor = "#6c63ff",
45
- color = "#ffffff",
46
- hoverBackgroundColor = "#574fd6",
47
- hoverColor = "#ffffff",
48
- fontSize = "15px",
49
- paddingX = "24px",
50
- paddingY = "11px",
51
- borderRadius = "8px",
52
- border = "none",
53
- fontFamily = "'Segoe UI', sans-serif",
54
- fontWeight = "600",
55
- disabled = false,
56
- loading = false,
57
- icon = null
58
- }) => {
59
- const [hovered, setHovered] = (0, import_react2.useState)(false);
60
- const [pressed, setPressed] = (0, import_react2.useState)(false);
61
- const style = {
62
- display: "inline-flex",
63
- alignItems: "center",
64
- justifyContent: "center",
65
- gap: "8px",
66
- padding: `${paddingY} ${paddingX}`,
67
- backgroundColor: disabled ? "#cccccc" : hovered ? hoverBackgroundColor : backgroundColor,
68
- color: hovered ? hoverColor : color,
69
- fontSize,
70
- fontFamily,
71
- fontWeight,
72
- border,
73
- borderRadius,
74
- cursor: disabled || loading ? "not-allowed" : "pointer",
75
- opacity: disabled ? 0.6 : 1,
76
- transform: pressed && !disabled ? "scale(0.96)" : "scale(1)",
77
- boxShadow: hovered && !disabled ? "0 6px 20px rgba(108,99,255,0.35)" : "0 2px 8px rgba(0,0,0,0.12)",
78
- transition: "all 0.2s ease",
79
- outline: "none",
80
- userSelect: "none",
81
- letterSpacing: "0.03em"
82
- };
83
- const spinnerStyle = {
84
- width: "13px",
85
- height: "13px",
86
- border: `2px solid ${color}44`,
87
- borderTop: `2px solid ${color}`,
88
- borderRadius: "50%",
89
- animation: "btn-spin 0.65s linear infinite"
90
- };
91
- return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, `
92
- @keyframes btn-spin {
93
- to {
94
- transform: rotate(360deg);
95
- }
96
- }
97
- `), /* @__PURE__ */ import_react.default.createElement(
98
- "button",
99
- {
100
- style,
101
- onClick: !disabled && !loading ? onClick : void 0,
102
- onMouseEnter: () => setHovered(true),
103
- onMouseLeave: () => {
104
- setHovered(false);
105
- setPressed(false);
106
- },
107
- onMouseDown: () => setPressed(true),
108
- onMouseUp: () => setPressed(false),
109
- disabled,
110
- "aria-disabled": disabled || loading,
111
- "aria-label": label
112
- },
113
- loading ? /* @__PURE__ */ import_react.default.createElement("span", { style: spinnerStyle }) : icon && /* @__PURE__ */ import_react.default.createElement("span", null, icon),
114
- loading ? "Loading..." : label
115
- ));
116
- };
117
-
118
- // src/components/Card/Card.jsx
119
- var import_react3 = __toESM(require("react"));
120
- var import_react4 = require("react");
121
41
  var Card = ({
122
42
  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
123
43
  category = "Travel",
@@ -137,10 +57,10 @@ var Card = ({
137
57
  onReadMore = () => {
138
58
  }
139
59
  }) => {
140
- const [liked, setLiked] = (0, import_react4.useState)(false);
141
- const [likeCount, setLikeCount] = (0, import_react4.useState)(likes);
142
- const [saved, setSaved] = (0, import_react4.useState)(bookmarked);
143
- const [imgHovered, setImgHovered] = (0, import_react4.useState)(false);
60
+ const [liked, setLiked] = (0, import_react2.useState)(false);
61
+ const [likeCount, setLikeCount] = (0, import_react2.useState)(likes);
62
+ const [saved, setSaved] = (0, import_react2.useState)(bookmarked);
63
+ const [imgHovered, setImgHovered] = (0, import_react2.useState)(false);
144
64
  const handleLike = () => {
145
65
  setLiked(!liked);
146
66
  setLikeCount((c) => liked ? c - 1 : c + 1);
@@ -282,17 +202,17 @@ var Card = ({
282
202
  transition: "opacity 0.2s ease"
283
203
  }
284
204
  };
285
- return /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.card }, /* @__PURE__ */ import_react3.default.createElement(
205
+ return /* @__PURE__ */ import_react.default.createElement("div", { style: styles.card }, /* @__PURE__ */ import_react.default.createElement(
286
206
  "div",
287
207
  {
288
208
  style: styles.imageWrap,
289
209
  onMouseEnter: () => setImgHovered(true),
290
210
  onMouseLeave: () => setImgHovered(false)
291
211
  },
292
- /* @__PURE__ */ import_react3.default.createElement("img", { src: image, alt: title, style: styles.image }),
293
- /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.imageOverlay }),
294
- /* @__PURE__ */ import_react3.default.createElement("span", { style: styles.category }, category)
295
- ), /* @__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(
212
+ /* @__PURE__ */ import_react.default.createElement("img", { src: image, alt: title, style: styles.image }),
213
+ /* @__PURE__ */ import_react.default.createElement("div", { style: styles.imageOverlay }),
214
+ /* @__PURE__ */ import_react.default.createElement("span", { style: styles.category }, category)
215
+ ), /* @__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(
296
216
  "button",
297
217
  {
298
218
  style: styles.readBtn,
@@ -303,8 +223,207 @@ var Card = ({
303
223
  "Read \u2192"
304
224
  ))));
305
225
  };
226
+
227
+ // src/components/profilecard/Profilecard.jsx
228
+ var import_react3 = __toESM(require("react"));
229
+ var Profilecard = ({
230
+ name = "Priya Mehta",
231
+ role = "Product Designer",
232
+ company = "Linear",
233
+ location = "San Francisco, CA",
234
+ avatar = "https://i.pravatar.cc/80?img=47",
235
+ coverColor = "#C0DD97",
236
+ online = true,
237
+ followers = "12.4k",
238
+ following = 310,
239
+ projects = 48,
240
+ tags = ["UI/UX", "Figma", "Systems"],
241
+ onMessage = () => {
242
+ }
243
+ }) => {
244
+ const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
245
+ const s = {
246
+ card: {
247
+ width: "300px",
248
+ background: "#fff",
249
+ border: "0.5px solid rgba(0,0,0,0.1)",
250
+ borderRadius: "16px",
251
+ overflow: "hidden",
252
+ fontFamily: "'Segoe UI', system-ui, sans-serif"
253
+ },
254
+ cover: {
255
+ height: "88px",
256
+ background: coverColor,
257
+ position: "relative"
258
+ },
259
+ avatarWrap: {
260
+ position: "absolute",
261
+ bottom: "-28px",
262
+ left: "50%",
263
+ transform: "translateX(-50%)"
264
+ },
265
+ avatar: {
266
+ width: "56px",
267
+ height: "56px",
268
+ borderRadius: "50%",
269
+ border: "3px solid #fff",
270
+ objectFit: "cover",
271
+ display: "block"
272
+ },
273
+ dot: {
274
+ position: "absolute",
275
+ bottom: "2px",
276
+ right: "2px",
277
+ width: "12px",
278
+ height: "12px",
279
+ borderRadius: "50%",
280
+ background: online ? "#22c55e" : "#9ca3af",
281
+ border: "2px solid #fff"
282
+ },
283
+ info: {
284
+ textAlign: "center",
285
+ padding: "38px 20px 16px"
286
+ },
287
+ name: {
288
+ fontSize: "16px",
289
+ fontWeight: "600",
290
+ color: "#111",
291
+ margin: "0 0 2px"
292
+ },
293
+ role: {
294
+ fontSize: "13px",
295
+ color: "#666",
296
+ margin: "0 0 8px"
297
+ },
298
+ location: {
299
+ fontSize: "12px",
300
+ color: "#999",
301
+ display: "flex",
302
+ alignItems: "center",
303
+ justifyContent: "center",
304
+ gap: "4px"
305
+ },
306
+ tags: {
307
+ display: "flex",
308
+ flexWrap: "wrap",
309
+ justifyContent: "center",
310
+ gap: "6px",
311
+ margin: "12px 20px 0"
312
+ },
313
+ tag: {
314
+ fontSize: "11px",
315
+ padding: "3px 10px",
316
+ borderRadius: "6px",
317
+ background: "#f5f5f5",
318
+ color: "#666",
319
+ border: "0.5px solid rgba(0,0,0,0.08)"
320
+ },
321
+ stats: {
322
+ display: "grid",
323
+ gridTemplateColumns: "repeat(3, 1fr)",
324
+ borderTop: "0.5px solid rgba(0,0,0,0.08)",
325
+ borderBottom: "0.5px solid rgba(0,0,0,0.08)",
326
+ margin: "16px 0 0"
327
+ },
328
+ stat: (i) => ({
329
+ textAlign: "center",
330
+ padding: "12px 8px",
331
+ borderLeft: i > 0 ? "0.5px solid rgba(0,0,0,0.08)" : "none"
332
+ }),
333
+ statNum: {
334
+ fontSize: "15px",
335
+ fontWeight: "600",
336
+ color: "#111"
337
+ },
338
+ statLbl: {
339
+ fontSize: "10px",
340
+ color: "#aaa",
341
+ marginTop: "2px",
342
+ textTransform: "uppercase",
343
+ letterSpacing: "0.06em"
344
+ },
345
+ actions: {
346
+ display: "flex",
347
+ gap: "8px",
348
+ padding: "14px 16px"
349
+ },
350
+ followBtn: {
351
+ flex: 1,
352
+ padding: "8px",
353
+ borderRadius: "8px",
354
+ fontSize: "13px",
355
+ fontWeight: "500",
356
+ cursor: "pointer",
357
+ border: isFollowing ? "0.5px solid #16a34a" : "0.5px solid rgba(0,0,0,0.15)",
358
+ background: isFollowing ? "#dcfce7" : "#fff",
359
+ color: isFollowing ? "#15803d" : "#111",
360
+ transition: "all 0.15s ease"
361
+ },
362
+ msgBtn: {
363
+ padding: "8px 14px",
364
+ borderRadius: "8px",
365
+ fontSize: "13px",
366
+ cursor: "pointer",
367
+ border: "0.5px solid rgba(0,0,0,0.15)",
368
+ background: "#fff",
369
+ color: "#666"
370
+ }
371
+ };
372
+ const stats = [
373
+ { num: followers, lbl: "Followers" },
374
+ { num: following, lbl: "Following" },
375
+ { num: projects, lbl: "Projects" }
376
+ ];
377
+ 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}")));
378
+ };
379
+
380
+ // src/components/Button/Button.jsx
381
+ var import_react4 = __toESM(require("react"));
382
+ var alpha = (hex, op) => {
383
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
384
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
385
+ };
386
+ var Button = ({
387
+ label = "Click me",
388
+ onClick = () => console.log("Button clicked"),
389
+ color = "#4CAF50",
390
+ disabled = false,
391
+ size = "medium"
392
+ }) => {
393
+ const sizes = {
394
+ small: { padding: "6px 12px", fontSize: "12px" },
395
+ medium: { padding: "10px 20px", fontSize: "14px" },
396
+ large: { padding: "14px 28px", fontSize: "16px" }
397
+ };
398
+ const buttonStyle = {
399
+ backgroundColor: disabled ? "#cccccc" : color,
400
+ color: "white",
401
+ border: "none",
402
+ borderRadius: "4px",
403
+ cursor: disabled ? "not-allowed" : "pointer",
404
+ fontWeight: "bold",
405
+ transition: "background-color 0.3s",
406
+ ...sizes[size]
407
+ };
408
+ const hoverStyle = {
409
+ backgroundColor: disabled ? "#cccccc" : alpha(color, 0.8)
410
+ };
411
+ const [hover, setHover] = import_react4.default.useState(false);
412
+ return /* @__PURE__ */ import_react4.default.createElement(
413
+ "button",
414
+ {
415
+ onClick: !disabled ? onClick : null,
416
+ style: hover ? { ...buttonStyle, ...hoverStyle } : buttonStyle,
417
+ onMouseEnter: () => setHover(true),
418
+ onMouseLeave: () => setHover(false),
419
+ disabled
420
+ },
421
+ label
422
+ );
423
+ };
306
424
  // Annotate the CommonJS export names for ESM import in node:
307
425
  0 && (module.exports = {
308
426
  Button,
309
- Card
427
+ Card,
428
+ Profilecard
310
429
  });
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,
@@ -267,7 +186,206 @@ var Card = ({
267
186
  "Read \u2192"
268
187
  ))));
269
188
  };
189
+
190
+ // src/components/profilecard/Profilecard.jsx
191
+ import React2, { useState as useState2 } from "react";
192
+ var Profilecard = ({
193
+ name = "Priya Mehta",
194
+ role = "Product Designer",
195
+ company = "Linear",
196
+ location = "San Francisco, CA",
197
+ avatar = "https://i.pravatar.cc/80?img=47",
198
+ coverColor = "#C0DD97",
199
+ online = true,
200
+ followers = "12.4k",
201
+ following = 310,
202
+ projects = 48,
203
+ tags = ["UI/UX", "Figma", "Systems"],
204
+ onMessage = () => {
205
+ }
206
+ }) => {
207
+ const [isFollowing, setIsFollowing] = useState2(false);
208
+ const s = {
209
+ card: {
210
+ width: "300px",
211
+ background: "#fff",
212
+ border: "0.5px solid rgba(0,0,0,0.1)",
213
+ borderRadius: "16px",
214
+ overflow: "hidden",
215
+ fontFamily: "'Segoe UI', system-ui, sans-serif"
216
+ },
217
+ cover: {
218
+ height: "88px",
219
+ background: coverColor,
220
+ position: "relative"
221
+ },
222
+ avatarWrap: {
223
+ position: "absolute",
224
+ bottom: "-28px",
225
+ left: "50%",
226
+ transform: "translateX(-50%)"
227
+ },
228
+ avatar: {
229
+ width: "56px",
230
+ height: "56px",
231
+ borderRadius: "50%",
232
+ border: "3px solid #fff",
233
+ objectFit: "cover",
234
+ display: "block"
235
+ },
236
+ dot: {
237
+ position: "absolute",
238
+ bottom: "2px",
239
+ right: "2px",
240
+ width: "12px",
241
+ height: "12px",
242
+ borderRadius: "50%",
243
+ background: online ? "#22c55e" : "#9ca3af",
244
+ border: "2px solid #fff"
245
+ },
246
+ info: {
247
+ textAlign: "center",
248
+ padding: "38px 20px 16px"
249
+ },
250
+ name: {
251
+ fontSize: "16px",
252
+ fontWeight: "600",
253
+ color: "#111",
254
+ margin: "0 0 2px"
255
+ },
256
+ role: {
257
+ fontSize: "13px",
258
+ color: "#666",
259
+ margin: "0 0 8px"
260
+ },
261
+ location: {
262
+ fontSize: "12px",
263
+ color: "#999",
264
+ display: "flex",
265
+ alignItems: "center",
266
+ justifyContent: "center",
267
+ gap: "4px"
268
+ },
269
+ tags: {
270
+ display: "flex",
271
+ flexWrap: "wrap",
272
+ justifyContent: "center",
273
+ gap: "6px",
274
+ margin: "12px 20px 0"
275
+ },
276
+ tag: {
277
+ fontSize: "11px",
278
+ padding: "3px 10px",
279
+ borderRadius: "6px",
280
+ background: "#f5f5f5",
281
+ color: "#666",
282
+ border: "0.5px solid rgba(0,0,0,0.08)"
283
+ },
284
+ stats: {
285
+ display: "grid",
286
+ gridTemplateColumns: "repeat(3, 1fr)",
287
+ borderTop: "0.5px solid rgba(0,0,0,0.08)",
288
+ borderBottom: "0.5px solid rgba(0,0,0,0.08)",
289
+ margin: "16px 0 0"
290
+ },
291
+ stat: (i) => ({
292
+ textAlign: "center",
293
+ padding: "12px 8px",
294
+ borderLeft: i > 0 ? "0.5px solid rgba(0,0,0,0.08)" : "none"
295
+ }),
296
+ statNum: {
297
+ fontSize: "15px",
298
+ fontWeight: "600",
299
+ color: "#111"
300
+ },
301
+ statLbl: {
302
+ fontSize: "10px",
303
+ color: "#aaa",
304
+ marginTop: "2px",
305
+ textTransform: "uppercase",
306
+ letterSpacing: "0.06em"
307
+ },
308
+ actions: {
309
+ display: "flex",
310
+ gap: "8px",
311
+ padding: "14px 16px"
312
+ },
313
+ followBtn: {
314
+ flex: 1,
315
+ padding: "8px",
316
+ borderRadius: "8px",
317
+ fontSize: "13px",
318
+ fontWeight: "500",
319
+ cursor: "pointer",
320
+ border: isFollowing ? "0.5px solid #16a34a" : "0.5px solid rgba(0,0,0,0.15)",
321
+ background: isFollowing ? "#dcfce7" : "#fff",
322
+ color: isFollowing ? "#15803d" : "#111",
323
+ transition: "all 0.15s ease"
324
+ },
325
+ msgBtn: {
326
+ padding: "8px 14px",
327
+ borderRadius: "8px",
328
+ fontSize: "13px",
329
+ cursor: "pointer",
330
+ border: "0.5px solid rgba(0,0,0,0.15)",
331
+ background: "#fff",
332
+ color: "#666"
333
+ }
334
+ };
335
+ const stats = [
336
+ { num: followers, lbl: "Followers" },
337
+ { num: following, lbl: "Following" },
338
+ { num: projects, lbl: "Projects" }
339
+ ];
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
+ };
270
387
  export {
271
388
  Button,
272
- Card
389
+ Card,
390
+ Profilecard
273
391
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-library-uday",
3
- "version": "1.0.9",
3
+ "version": "1.0.11",
4
4
  "description": "virtual ui react library",
5
5
  "license": "ISC",
6
6
  "author": "Uday",