virtuo-ui-library 1.0.0 → 1.0.1

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 +94 -2
  2. package/dist/index.mjs +92 -1
  3. package/package.json +5 -4
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
 
@@ -260,8 +261,99 @@ function shadeColor2(hex, percent) {
260
261
  const b = Math.min(255, Math.max(0, (num & 255) + percent));
261
262
  return `rgb(${r},${g},${b})`;
262
263
  }
264
+
265
+ // src/components/ProfileCard/ProfileCard.jsx
266
+ var import_react3 = __toESM(require("react"));
267
+ var ProfileCard = ({
268
+ name = "John Doe",
269
+ role = "Frontend Developer",
270
+ avatar = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80",
271
+ bio = "Passionate about building modern, scalable, and user-friendly web applications.",
272
+ location = "New York, USA",
273
+ followers = "12.4K",
274
+ following = "480",
275
+ posts = "128",
276
+ primaryColor = "#2563eb",
277
+ buttonText = "Follow",
278
+ onButtonClick = () => {
279
+ }
280
+ }) => {
281
+ const [hovered, setHovered] = (0, import_react3.useState)(false);
282
+ return /* @__PURE__ */ import_react3.default.createElement(
283
+ "div",
284
+ {
285
+ className: `w-full max-w-sm rounded-3xl bg-white shadow-lg overflow-hidden transition-all duration-300 ${hovered ? "scale-[1.02] shadow-2xl" : ""}`,
286
+ onMouseEnter: () => setHovered(true),
287
+ onMouseLeave: () => setHovered(false),
288
+ "aria-label": "Profile Card"
289
+ },
290
+ /* @__PURE__ */ import_react3.default.createElement(
291
+ "div",
292
+ {
293
+ className: "h-28",
294
+ style: {
295
+ background: `linear-gradient(135deg, ${primaryColor}, #7c3aed)`
296
+ }
297
+ }
298
+ ),
299
+ /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative flex flex-col items-center px-6 pb-6" }, /* @__PURE__ */ import_react3.default.createElement(
300
+ "img",
301
+ {
302
+ src: avatar,
303
+ alt: `${name}'s avatar`,
304
+ className: "w-28 h-28 rounded-full border-4 border-white object-cover -mt-14 shadow-md"
305
+ }
306
+ ), /* @__PURE__ */ import_react3.default.createElement("h2", { className: "mt-4 text-2xl font-bold text-gray-900" }, name), /* @__PURE__ */ import_react3.default.createElement(
307
+ "p",
308
+ {
309
+ className: "mt-1 text-sm font-medium",
310
+ style: { color: primaryColor }
311
+ },
312
+ role
313
+ ), /* @__PURE__ */ import_react3.default.createElement("p", { className: "mt-3 text-center text-gray-500 text-sm" }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-3 flex items-center gap-2 text-sm text-gray-500" }, /* @__PURE__ */ import_react3.default.createElement(
314
+ "svg",
315
+ {
316
+ xmlns: "http://www.w3.org/2000/svg",
317
+ className: "w-4 h-4",
318
+ fill: "none",
319
+ viewBox: "0 0 24 24",
320
+ stroke: "currentColor"
321
+ },
322
+ /* @__PURE__ */ import_react3.default.createElement(
323
+ "path",
324
+ {
325
+ strokeLinecap: "round",
326
+ strokeLinejoin: "round",
327
+ strokeWidth: 2,
328
+ d: "M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"
329
+ }
330
+ ),
331
+ /* @__PURE__ */ import_react3.default.createElement(
332
+ "path",
333
+ {
334
+ strokeLinecap: "round",
335
+ strokeLinejoin: "round",
336
+ strokeWidth: 2,
337
+ d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
338
+ }
339
+ )
340
+ ), location), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-6 grid grid-cols-3 w-full text-center border-y border-gray-200 py-4" }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("p", { className: "font-bold text-gray-900" }, posts), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Posts")), /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("p", { className: "font-bold text-gray-900" }, followers), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Followers")), /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("p", { className: "font-bold text-gray-900" }, following), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Following"))), /* @__PURE__ */ import_react3.default.createElement(
341
+ "button",
342
+ {
343
+ onClick: onButtonClick,
344
+ className: "mt-6 w-full rounded-xl px-5 py-3 text-white font-semibold transition-all duration-300 hover:opacity-90 hover:scale-[1.02] focus:outline-none focus:ring-4",
345
+ style: {
346
+ backgroundColor: primaryColor,
347
+ boxShadow: `0 10px 25px ${primaryColor}33`
348
+ }
349
+ },
350
+ buttonText
351
+ ))
352
+ );
353
+ };
263
354
  // Annotate the CommonJS export names for ESM import in node:
264
355
  0 && (module.exports = {
265
356
  Button,
266
- Card
357
+ Card,
358
+ ProfileCard
267
359
  });
package/dist/index.mjs CHANGED
@@ -224,7 +224,98 @@ function shadeColor2(hex, percent) {
224
224
  const b = Math.min(255, Math.max(0, (num & 255) + percent));
225
225
  return `rgb(${r},${g},${b})`;
226
226
  }
227
+
228
+ // src/components/ProfileCard/ProfileCard.jsx
229
+ import React3, { useState as useState3 } from "react";
230
+ var ProfileCard = ({
231
+ name = "John Doe",
232
+ role = "Frontend Developer",
233
+ avatar = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80",
234
+ bio = "Passionate about building modern, scalable, and user-friendly web applications.",
235
+ location = "New York, USA",
236
+ followers = "12.4K",
237
+ following = "480",
238
+ posts = "128",
239
+ primaryColor = "#2563eb",
240
+ buttonText = "Follow",
241
+ onButtonClick = () => {
242
+ }
243
+ }) => {
244
+ const [hovered, setHovered] = useState3(false);
245
+ return /* @__PURE__ */ React3.createElement(
246
+ "div",
247
+ {
248
+ className: `w-full max-w-sm rounded-3xl bg-white shadow-lg overflow-hidden transition-all duration-300 ${hovered ? "scale-[1.02] shadow-2xl" : ""}`,
249
+ onMouseEnter: () => setHovered(true),
250
+ onMouseLeave: () => setHovered(false),
251
+ "aria-label": "Profile Card"
252
+ },
253
+ /* @__PURE__ */ React3.createElement(
254
+ "div",
255
+ {
256
+ className: "h-28",
257
+ style: {
258
+ background: `linear-gradient(135deg, ${primaryColor}, #7c3aed)`
259
+ }
260
+ }
261
+ ),
262
+ /* @__PURE__ */ React3.createElement("div", { className: "relative flex flex-col items-center px-6 pb-6" }, /* @__PURE__ */ React3.createElement(
263
+ "img",
264
+ {
265
+ src: avatar,
266
+ alt: `${name}'s avatar`,
267
+ className: "w-28 h-28 rounded-full border-4 border-white object-cover -mt-14 shadow-md"
268
+ }
269
+ ), /* @__PURE__ */ React3.createElement("h2", { className: "mt-4 text-2xl font-bold text-gray-900" }, name), /* @__PURE__ */ React3.createElement(
270
+ "p",
271
+ {
272
+ className: "mt-1 text-sm font-medium",
273
+ style: { color: primaryColor }
274
+ },
275
+ role
276
+ ), /* @__PURE__ */ React3.createElement("p", { className: "mt-3 text-center text-gray-500 text-sm" }, bio), /* @__PURE__ */ React3.createElement("div", { className: "mt-3 flex items-center gap-2 text-sm text-gray-500" }, /* @__PURE__ */ React3.createElement(
277
+ "svg",
278
+ {
279
+ xmlns: "http://www.w3.org/2000/svg",
280
+ className: "w-4 h-4",
281
+ fill: "none",
282
+ viewBox: "0 0 24 24",
283
+ stroke: "currentColor"
284
+ },
285
+ /* @__PURE__ */ React3.createElement(
286
+ "path",
287
+ {
288
+ strokeLinecap: "round",
289
+ strokeLinejoin: "round",
290
+ strokeWidth: 2,
291
+ d: "M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"
292
+ }
293
+ ),
294
+ /* @__PURE__ */ React3.createElement(
295
+ "path",
296
+ {
297
+ strokeLinecap: "round",
298
+ strokeLinejoin: "round",
299
+ strokeWidth: 2,
300
+ d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
301
+ }
302
+ )
303
+ ), location), /* @__PURE__ */ React3.createElement("div", { className: "mt-6 grid grid-cols-3 w-full text-center border-y border-gray-200 py-4" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("p", { className: "font-bold text-gray-900" }, posts), /* @__PURE__ */ React3.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Posts")), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("p", { className: "font-bold text-gray-900" }, followers), /* @__PURE__ */ React3.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Followers")), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("p", { className: "font-bold text-gray-900" }, following), /* @__PURE__ */ React3.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Following"))), /* @__PURE__ */ React3.createElement(
304
+ "button",
305
+ {
306
+ onClick: onButtonClick,
307
+ className: "mt-6 w-full rounded-xl px-5 py-3 text-white font-semibold transition-all duration-300 hover:opacity-90 hover:scale-[1.02] focus:outline-none focus:ring-4",
308
+ style: {
309
+ backgroundColor: primaryColor,
310
+ boxShadow: `0 10px 25px ${primaryColor}33`
311
+ }
312
+ },
313
+ buttonText
314
+ ))
315
+ );
316
+ };
227
317
  export {
228
318
  Button,
229
- Card
319
+ Card,
320
+ ProfileCard
230
321
  };
package/package.json CHANGED
@@ -1,13 +1,14 @@
1
1
  {
2
2
  "name": "virtuo-ui-library",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Ritik Saini",
7
7
  "main": "dist/index.js",
8
- "module" : "dist/index.mjs",
9
- "files": ["dist"],
10
-
8
+ "module": "dist/index.mjs",
9
+ "files": [
10
+ "dist"
11
+ ],
11
12
  "scripts": {
12
13
  "build": "tsup"
13
14
  },