virtual-ui-library-uday 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +157 -2
- package/dist/index.mjs +155 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
32
|
Button: () => Button,
|
|
33
|
-
Card: () => Card
|
|
33
|
+
Card: () => Card,
|
|
34
|
+
Profilecard: () => Profilecard
|
|
34
35
|
});
|
|
35
36
|
module.exports = __toCommonJS(index_exports);
|
|
36
37
|
|
|
@@ -303,8 +304,162 @@ var Card = ({
|
|
|
303
304
|
"Read \u2192"
|
|
304
305
|
))));
|
|
305
306
|
};
|
|
307
|
+
|
|
308
|
+
// src/components/profilecard/Profilecard.jsx
|
|
309
|
+
var import_react5 = __toESM(require("react"));
|
|
310
|
+
var Profilecard = ({
|
|
311
|
+
name = "Priya Mehta",
|
|
312
|
+
role = "Product Designer",
|
|
313
|
+
company = "Linear",
|
|
314
|
+
location = "San Francisco, CA",
|
|
315
|
+
avatar = "https://i.pravatar.cc/80?img=47",
|
|
316
|
+
coverColor = "#C0DD97",
|
|
317
|
+
online = true,
|
|
318
|
+
followers = "12.4k",
|
|
319
|
+
following = 310,
|
|
320
|
+
projects = 48,
|
|
321
|
+
tags = ["UI/UX", "Figma", "Systems"],
|
|
322
|
+
onMessage = () => {
|
|
323
|
+
}
|
|
324
|
+
}) => {
|
|
325
|
+
const [isFollowing, setIsFollowing] = (0, import_react5.useState)(false);
|
|
326
|
+
const s = {
|
|
327
|
+
card: {
|
|
328
|
+
width: "300px",
|
|
329
|
+
background: "#fff",
|
|
330
|
+
border: "0.5px solid rgba(0,0,0,0.1)",
|
|
331
|
+
borderRadius: "16px",
|
|
332
|
+
overflow: "hidden",
|
|
333
|
+
fontFamily: "'Segoe UI', system-ui, sans-serif"
|
|
334
|
+
},
|
|
335
|
+
cover: {
|
|
336
|
+
height: "88px",
|
|
337
|
+
background: coverColor,
|
|
338
|
+
position: "relative"
|
|
339
|
+
},
|
|
340
|
+
avatarWrap: {
|
|
341
|
+
position: "absolute",
|
|
342
|
+
bottom: "-28px",
|
|
343
|
+
left: "50%",
|
|
344
|
+
transform: "translateX(-50%)"
|
|
345
|
+
},
|
|
346
|
+
avatar: {
|
|
347
|
+
width: "56px",
|
|
348
|
+
height: "56px",
|
|
349
|
+
borderRadius: "50%",
|
|
350
|
+
border: "3px solid #fff",
|
|
351
|
+
objectFit: "cover",
|
|
352
|
+
display: "block"
|
|
353
|
+
},
|
|
354
|
+
dot: {
|
|
355
|
+
position: "absolute",
|
|
356
|
+
bottom: "2px",
|
|
357
|
+
right: "2px",
|
|
358
|
+
width: "12px",
|
|
359
|
+
height: "12px",
|
|
360
|
+
borderRadius: "50%",
|
|
361
|
+
background: online ? "#22c55e" : "#9ca3af",
|
|
362
|
+
border: "2px solid #fff"
|
|
363
|
+
},
|
|
364
|
+
info: {
|
|
365
|
+
textAlign: "center",
|
|
366
|
+
padding: "38px 20px 16px"
|
|
367
|
+
},
|
|
368
|
+
name: {
|
|
369
|
+
fontSize: "16px",
|
|
370
|
+
fontWeight: "600",
|
|
371
|
+
color: "#111",
|
|
372
|
+
margin: "0 0 2px"
|
|
373
|
+
},
|
|
374
|
+
role: {
|
|
375
|
+
fontSize: "13px",
|
|
376
|
+
color: "#666",
|
|
377
|
+
margin: "0 0 8px"
|
|
378
|
+
},
|
|
379
|
+
location: {
|
|
380
|
+
fontSize: "12px",
|
|
381
|
+
color: "#999",
|
|
382
|
+
display: "flex",
|
|
383
|
+
alignItems: "center",
|
|
384
|
+
justifyContent: "center",
|
|
385
|
+
gap: "4px"
|
|
386
|
+
},
|
|
387
|
+
tags: {
|
|
388
|
+
display: "flex",
|
|
389
|
+
flexWrap: "wrap",
|
|
390
|
+
justifyContent: "center",
|
|
391
|
+
gap: "6px",
|
|
392
|
+
margin: "12px 20px 0"
|
|
393
|
+
},
|
|
394
|
+
tag: {
|
|
395
|
+
fontSize: "11px",
|
|
396
|
+
padding: "3px 10px",
|
|
397
|
+
borderRadius: "6px",
|
|
398
|
+
background: "#f5f5f5",
|
|
399
|
+
color: "#666",
|
|
400
|
+
border: "0.5px solid rgba(0,0,0,0.08)"
|
|
401
|
+
},
|
|
402
|
+
stats: {
|
|
403
|
+
display: "grid",
|
|
404
|
+
gridTemplateColumns: "repeat(3, 1fr)",
|
|
405
|
+
borderTop: "0.5px solid rgba(0,0,0,0.08)",
|
|
406
|
+
borderBottom: "0.5px solid rgba(0,0,0,0.08)",
|
|
407
|
+
margin: "16px 0 0"
|
|
408
|
+
},
|
|
409
|
+
stat: (i) => ({
|
|
410
|
+
textAlign: "center",
|
|
411
|
+
padding: "12px 8px",
|
|
412
|
+
borderLeft: i > 0 ? "0.5px solid rgba(0,0,0,0.08)" : "none"
|
|
413
|
+
}),
|
|
414
|
+
statNum: {
|
|
415
|
+
fontSize: "15px",
|
|
416
|
+
fontWeight: "600",
|
|
417
|
+
color: "#111"
|
|
418
|
+
},
|
|
419
|
+
statLbl: {
|
|
420
|
+
fontSize: "10px",
|
|
421
|
+
color: "#aaa",
|
|
422
|
+
marginTop: "2px",
|
|
423
|
+
textTransform: "uppercase",
|
|
424
|
+
letterSpacing: "0.06em"
|
|
425
|
+
},
|
|
426
|
+
actions: {
|
|
427
|
+
display: "flex",
|
|
428
|
+
gap: "8px",
|
|
429
|
+
padding: "14px 16px"
|
|
430
|
+
},
|
|
431
|
+
followBtn: {
|
|
432
|
+
flex: 1,
|
|
433
|
+
padding: "8px",
|
|
434
|
+
borderRadius: "8px",
|
|
435
|
+
fontSize: "13px",
|
|
436
|
+
fontWeight: "500",
|
|
437
|
+
cursor: "pointer",
|
|
438
|
+
border: isFollowing ? "0.5px solid #16a34a" : "0.5px solid rgba(0,0,0,0.15)",
|
|
439
|
+
background: isFollowing ? "#dcfce7" : "#fff",
|
|
440
|
+
color: isFollowing ? "#15803d" : "#111",
|
|
441
|
+
transition: "all 0.15s ease"
|
|
442
|
+
},
|
|
443
|
+
msgBtn: {
|
|
444
|
+
padding: "8px 14px",
|
|
445
|
+
borderRadius: "8px",
|
|
446
|
+
fontSize: "13px",
|
|
447
|
+
cursor: "pointer",
|
|
448
|
+
border: "0.5px solid rgba(0,0,0,0.15)",
|
|
449
|
+
background: "#fff",
|
|
450
|
+
color: "#666"
|
|
451
|
+
}
|
|
452
|
+
};
|
|
453
|
+
const stats = [
|
|
454
|
+
{ num: followers, lbl: "Followers" },
|
|
455
|
+
{ num: following, lbl: "Following" },
|
|
456
|
+
{ num: projects, lbl: "Projects" }
|
|
457
|
+
];
|
|
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}")));
|
|
459
|
+
};
|
|
306
460
|
// Annotate the CommonJS export names for ESM import in node:
|
|
307
461
|
0 && (module.exports = {
|
|
308
462
|
Button,
|
|
309
|
-
Card
|
|
463
|
+
Card,
|
|
464
|
+
Profilecard
|
|
310
465
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -267,7 +267,161 @@ var Card = ({
|
|
|
267
267
|
"Read \u2192"
|
|
268
268
|
))));
|
|
269
269
|
};
|
|
270
|
+
|
|
271
|
+
// src/components/profilecard/Profilecard.jsx
|
|
272
|
+
import React3, { useState as useState3 } from "react";
|
|
273
|
+
var Profilecard = ({
|
|
274
|
+
name = "Priya Mehta",
|
|
275
|
+
role = "Product Designer",
|
|
276
|
+
company = "Linear",
|
|
277
|
+
location = "San Francisco, CA",
|
|
278
|
+
avatar = "https://i.pravatar.cc/80?img=47",
|
|
279
|
+
coverColor = "#C0DD97",
|
|
280
|
+
online = true,
|
|
281
|
+
followers = "12.4k",
|
|
282
|
+
following = 310,
|
|
283
|
+
projects = 48,
|
|
284
|
+
tags = ["UI/UX", "Figma", "Systems"],
|
|
285
|
+
onMessage = () => {
|
|
286
|
+
}
|
|
287
|
+
}) => {
|
|
288
|
+
const [isFollowing, setIsFollowing] = useState3(false);
|
|
289
|
+
const s = {
|
|
290
|
+
card: {
|
|
291
|
+
width: "300px",
|
|
292
|
+
background: "#fff",
|
|
293
|
+
border: "0.5px solid rgba(0,0,0,0.1)",
|
|
294
|
+
borderRadius: "16px",
|
|
295
|
+
overflow: "hidden",
|
|
296
|
+
fontFamily: "'Segoe UI', system-ui, sans-serif"
|
|
297
|
+
},
|
|
298
|
+
cover: {
|
|
299
|
+
height: "88px",
|
|
300
|
+
background: coverColor,
|
|
301
|
+
position: "relative"
|
|
302
|
+
},
|
|
303
|
+
avatarWrap: {
|
|
304
|
+
position: "absolute",
|
|
305
|
+
bottom: "-28px",
|
|
306
|
+
left: "50%",
|
|
307
|
+
transform: "translateX(-50%)"
|
|
308
|
+
},
|
|
309
|
+
avatar: {
|
|
310
|
+
width: "56px",
|
|
311
|
+
height: "56px",
|
|
312
|
+
borderRadius: "50%",
|
|
313
|
+
border: "3px solid #fff",
|
|
314
|
+
objectFit: "cover",
|
|
315
|
+
display: "block"
|
|
316
|
+
},
|
|
317
|
+
dot: {
|
|
318
|
+
position: "absolute",
|
|
319
|
+
bottom: "2px",
|
|
320
|
+
right: "2px",
|
|
321
|
+
width: "12px",
|
|
322
|
+
height: "12px",
|
|
323
|
+
borderRadius: "50%",
|
|
324
|
+
background: online ? "#22c55e" : "#9ca3af",
|
|
325
|
+
border: "2px solid #fff"
|
|
326
|
+
},
|
|
327
|
+
info: {
|
|
328
|
+
textAlign: "center",
|
|
329
|
+
padding: "38px 20px 16px"
|
|
330
|
+
},
|
|
331
|
+
name: {
|
|
332
|
+
fontSize: "16px",
|
|
333
|
+
fontWeight: "600",
|
|
334
|
+
color: "#111",
|
|
335
|
+
margin: "0 0 2px"
|
|
336
|
+
},
|
|
337
|
+
role: {
|
|
338
|
+
fontSize: "13px",
|
|
339
|
+
color: "#666",
|
|
340
|
+
margin: "0 0 8px"
|
|
341
|
+
},
|
|
342
|
+
location: {
|
|
343
|
+
fontSize: "12px",
|
|
344
|
+
color: "#999",
|
|
345
|
+
display: "flex",
|
|
346
|
+
alignItems: "center",
|
|
347
|
+
justifyContent: "center",
|
|
348
|
+
gap: "4px"
|
|
349
|
+
},
|
|
350
|
+
tags: {
|
|
351
|
+
display: "flex",
|
|
352
|
+
flexWrap: "wrap",
|
|
353
|
+
justifyContent: "center",
|
|
354
|
+
gap: "6px",
|
|
355
|
+
margin: "12px 20px 0"
|
|
356
|
+
},
|
|
357
|
+
tag: {
|
|
358
|
+
fontSize: "11px",
|
|
359
|
+
padding: "3px 10px",
|
|
360
|
+
borderRadius: "6px",
|
|
361
|
+
background: "#f5f5f5",
|
|
362
|
+
color: "#666",
|
|
363
|
+
border: "0.5px solid rgba(0,0,0,0.08)"
|
|
364
|
+
},
|
|
365
|
+
stats: {
|
|
366
|
+
display: "grid",
|
|
367
|
+
gridTemplateColumns: "repeat(3, 1fr)",
|
|
368
|
+
borderTop: "0.5px solid rgba(0,0,0,0.08)",
|
|
369
|
+
borderBottom: "0.5px solid rgba(0,0,0,0.08)",
|
|
370
|
+
margin: "16px 0 0"
|
|
371
|
+
},
|
|
372
|
+
stat: (i) => ({
|
|
373
|
+
textAlign: "center",
|
|
374
|
+
padding: "12px 8px",
|
|
375
|
+
borderLeft: i > 0 ? "0.5px solid rgba(0,0,0,0.08)" : "none"
|
|
376
|
+
}),
|
|
377
|
+
statNum: {
|
|
378
|
+
fontSize: "15px",
|
|
379
|
+
fontWeight: "600",
|
|
380
|
+
color: "#111"
|
|
381
|
+
},
|
|
382
|
+
statLbl: {
|
|
383
|
+
fontSize: "10px",
|
|
384
|
+
color: "#aaa",
|
|
385
|
+
marginTop: "2px",
|
|
386
|
+
textTransform: "uppercase",
|
|
387
|
+
letterSpacing: "0.06em"
|
|
388
|
+
},
|
|
389
|
+
actions: {
|
|
390
|
+
display: "flex",
|
|
391
|
+
gap: "8px",
|
|
392
|
+
padding: "14px 16px"
|
|
393
|
+
},
|
|
394
|
+
followBtn: {
|
|
395
|
+
flex: 1,
|
|
396
|
+
padding: "8px",
|
|
397
|
+
borderRadius: "8px",
|
|
398
|
+
fontSize: "13px",
|
|
399
|
+
fontWeight: "500",
|
|
400
|
+
cursor: "pointer",
|
|
401
|
+
border: isFollowing ? "0.5px solid #16a34a" : "0.5px solid rgba(0,0,0,0.15)",
|
|
402
|
+
background: isFollowing ? "#dcfce7" : "#fff",
|
|
403
|
+
color: isFollowing ? "#15803d" : "#111",
|
|
404
|
+
transition: "all 0.15s ease"
|
|
405
|
+
},
|
|
406
|
+
msgBtn: {
|
|
407
|
+
padding: "8px 14px",
|
|
408
|
+
borderRadius: "8px",
|
|
409
|
+
fontSize: "13px",
|
|
410
|
+
cursor: "pointer",
|
|
411
|
+
border: "0.5px solid rgba(0,0,0,0.15)",
|
|
412
|
+
background: "#fff",
|
|
413
|
+
color: "#666"
|
|
414
|
+
}
|
|
415
|
+
};
|
|
416
|
+
const stats = [
|
|
417
|
+
{ num: followers, lbl: "Followers" },
|
|
418
|
+
{ num: following, lbl: "Following" },
|
|
419
|
+
{ num: projects, lbl: "Projects" }
|
|
420
|
+
];
|
|
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}")));
|
|
422
|
+
};
|
|
270
423
|
export {
|
|
271
424
|
Button,
|
|
272
|
-
Card
|
|
425
|
+
Card,
|
|
426
|
+
Profilecard
|
|
273
427
|
};
|