virtual-ui-project-lib 1.0.6 → 1.0.7

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 (4) hide show
  1. package/dist/index.js +34 -98
  2. package/dist/index.mjs +117 -181
  3. package/package.json +22 -22
  4. package/README.md +0 -361
package/dist/index.js CHANGED
@@ -64,110 +64,46 @@ module.exports = __toCommonJS(index_exports);
64
64
  // src/components/Loader/Loader.jsx
65
65
  var import_react = __toESM(require("react"));
66
66
  var Loader = ({
67
- type = "spinner",
68
- size = 48,
69
- accent = "#6366f1",
70
- bg = "transparent",
71
- label = "",
72
- speed = 1
67
+ size = 40,
68
+ thickness = 5,
69
+ speed = 1,
70
+ color = "#6366f1",
71
+ bgColor = "rgba(255,255,255,0.1)"
73
72
  }) => {
74
- const [dots, setDots] = (0, import_react.useState)(0);
75
- const [progress, setProgress] = (0, import_react.useState)(0);
76
- const alpha = (hex, op) => {
77
- const r = parseInt(hex.slice(1, 3), 16);
78
- const g = parseInt(hex.slice(3, 5), 16);
79
- const b = parseInt(hex.slice(5, 7), 16);
80
- return `rgba(${r},${g},${b},${op})`;
81
- };
82
- (0, import_react.useEffect)(() => {
83
- if (type === "dots") {
84
- const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
85
- return () => clearInterval(t);
86
- }
87
- if (type === "bar") {
88
- const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
89
- return () => clearInterval(t);
90
- }
91
- }, [type, speed]);
92
- const dur = `${1 / speed}s`;
93
- const wrapStyle = {
94
- display: "inline-flex",
95
- flexDirection: "column",
96
- alignItems: "center",
97
- justifyContent: "center",
98
- gap: "12px",
99
- background: bg,
100
- padding: bg !== "transparent" ? "24px" : "0",
101
- borderRadius: "16px",
102
- fontFamily: "system-ui, sans-serif"
103
- };
104
- const labelEl = label ? /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
105
- if (type === "spinner") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react.default.createElement(
106
- "circle",
73
+ return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: size + "px", height: size + "px", position: "relative" } }, /* @__PURE__ */ import_react.default.createElement(
74
+ "div",
107
75
  {
108
- cx: "24",
109
- cy: "24",
110
- r: "20",
111
- fill: "none",
112
- stroke: alpha(accent, 0.15),
113
- strokeWidth: "4"
76
+ style: {
77
+ position: "absolute",
78
+ top: 0,
79
+ left: 0,
80
+ width: "100%",
81
+ height: "100%",
82
+ borderRadius: "50%",
83
+ border: thickness + "px solid " + bgColor,
84
+ boxSizing: "border-box"
85
+ }
114
86
  }
115
87
  ), /* @__PURE__ */ import_react.default.createElement(
116
- "circle",
88
+ "div",
117
89
  {
118
- cx: "24",
119
- cy: "24",
120
- r: "20",
121
- fill: "none",
122
- stroke: accent,
123
- strokeWidth: "4",
124
- strokeLinecap: "round",
125
- strokeDasharray: "31.4 94.2",
126
- style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
90
+ style: {
91
+ position: "absolute",
92
+ top: 0,
93
+ left: 0,
94
+ width: "100%",
95
+ height: "100%",
96
+ borderRadius: "50%",
97
+ border: thickness + "px solid transparent",
98
+ borderTopColor: color,
99
+ boxSizing: "border-box",
100
+ animation: "spin " + speed + "s linear infinite"
101
+ }
127
102
  }
128
- ), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
129
- if (type === "pulse") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
130
- position: "absolute",
131
- inset: 0,
132
- borderRadius: "50%",
133
- background: alpha(accent, 0.2),
134
- animation: `pulse ${dur} ease-out infinite`
135
- } }), /* @__PURE__ */ import_react.default.createElement("div", { style: {
136
- position: "absolute",
137
- inset: "25%",
138
- borderRadius: "50%",
139
- background: accent
140
- } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
141
- if (type === "dots") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, style: {
142
- width: size / 5,
143
- height: size / 5,
144
- borderRadius: "50%",
145
- background: dots === i ? accent : alpha(accent, 0.25),
146
- transition: "background 0.2s"
147
- } }))), labelEl);
148
- if (type === "bar") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
149
- width: size * 3,
150
- height: size / 8,
151
- background: alpha(accent, 0.15),
152
- borderRadius: "99px",
153
- overflow: "hidden"
154
- } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
155
- height: "100%",
156
- borderRadius: "99px",
157
- background: accent,
158
- width: `${progress}%`,
159
- transition: "width 0.03s linear"
160
- } })), labelEl);
161
- if (type === "ring") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
162
- width: size,
163
- height: size,
164
- borderRadius: "50%",
165
- border: `4px solid ${alpha(accent, 0.15)}`,
166
- borderTop: `4px solid ${accent}`,
167
- borderRight: `4px solid ${accent}`,
168
- animation: `spin ${dur} linear infinite`
169
- } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
170
- return null;
103
+ ), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin {
104
+ 0% { transform: rotate(0deg); }
105
+ 100% { transform: rotate(360deg); }
106
+ }`));
171
107
  };
172
108
 
173
109
  // src/components/NotificationToast/NotificationToast.jsx
package/dist/index.mjs CHANGED
@@ -1,114 +1,50 @@
1
1
  // src/components/Loader/Loader.jsx
2
- import React, { useEffect, useState } from "react";
2
+ import React from "react";
3
3
  var Loader = ({
4
- type = "spinner",
5
- size = 48,
6
- accent = "#6366f1",
7
- bg = "transparent",
8
- label = "",
9
- speed = 1
4
+ size = 40,
5
+ thickness = 5,
6
+ speed = 1,
7
+ color = "#6366f1",
8
+ bgColor = "rgba(255,255,255,0.1)"
10
9
  }) => {
11
- const [dots, setDots] = useState(0);
12
- const [progress, setProgress] = useState(0);
13
- const alpha = (hex, op) => {
14
- const r = parseInt(hex.slice(1, 3), 16);
15
- const g = parseInt(hex.slice(3, 5), 16);
16
- const b = parseInt(hex.slice(5, 7), 16);
17
- return `rgba(${r},${g},${b},${op})`;
18
- };
19
- useEffect(() => {
20
- if (type === "dots") {
21
- const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
22
- return () => clearInterval(t);
23
- }
24
- if (type === "bar") {
25
- const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
26
- return () => clearInterval(t);
27
- }
28
- }, [type, speed]);
29
- const dur = `${1 / speed}s`;
30
- const wrapStyle = {
31
- display: "inline-flex",
32
- flexDirection: "column",
33
- alignItems: "center",
34
- justifyContent: "center",
35
- gap: "12px",
36
- background: bg,
37
- padding: bg !== "transparent" ? "24px" : "0",
38
- borderRadius: "16px",
39
- fontFamily: "system-ui, sans-serif"
40
- };
41
- const labelEl = label ? /* @__PURE__ */ React.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
42
- if (type === "spinner") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React.createElement(
43
- "circle",
10
+ return /* @__PURE__ */ React.createElement("div", { style: { width: size + "px", height: size + "px", position: "relative" } }, /* @__PURE__ */ React.createElement(
11
+ "div",
44
12
  {
45
- cx: "24",
46
- cy: "24",
47
- r: "20",
48
- fill: "none",
49
- stroke: alpha(accent, 0.15),
50
- strokeWidth: "4"
13
+ style: {
14
+ position: "absolute",
15
+ top: 0,
16
+ left: 0,
17
+ width: "100%",
18
+ height: "100%",
19
+ borderRadius: "50%",
20
+ border: thickness + "px solid " + bgColor,
21
+ boxSizing: "border-box"
22
+ }
51
23
  }
52
24
  ), /* @__PURE__ */ React.createElement(
53
- "circle",
25
+ "div",
54
26
  {
55
- cx: "24",
56
- cy: "24",
57
- r: "20",
58
- fill: "none",
59
- stroke: accent,
60
- strokeWidth: "4",
61
- strokeLinecap: "round",
62
- strokeDasharray: "31.4 94.2",
63
- style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
27
+ style: {
28
+ position: "absolute",
29
+ top: 0,
30
+ left: 0,
31
+ width: "100%",
32
+ height: "100%",
33
+ borderRadius: "50%",
34
+ border: thickness + "px solid transparent",
35
+ borderTopColor: color,
36
+ boxSizing: "border-box",
37
+ animation: "spin " + speed + "s linear infinite"
38
+ }
64
39
  }
65
- ), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
66
- if (type === "pulse") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ React.createElement("div", { style: {
67
- position: "absolute",
68
- inset: 0,
69
- borderRadius: "50%",
70
- background: alpha(accent, 0.2),
71
- animation: `pulse ${dur} ease-out infinite`
72
- } }), /* @__PURE__ */ React.createElement("div", { style: {
73
- position: "absolute",
74
- inset: "25%",
75
- borderRadius: "50%",
76
- background: accent
77
- } }), /* @__PURE__ */ React.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
78
- if (type === "dots") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React.createElement("div", { key: i, style: {
79
- width: size / 5,
80
- height: size / 5,
81
- borderRadius: "50%",
82
- background: dots === i ? accent : alpha(accent, 0.25),
83
- transition: "background 0.2s"
84
- } }))), labelEl);
85
- if (type === "bar") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: {
86
- width: size * 3,
87
- height: size / 8,
88
- background: alpha(accent, 0.15),
89
- borderRadius: "99px",
90
- overflow: "hidden"
91
- } }, /* @__PURE__ */ React.createElement("div", { style: {
92
- height: "100%",
93
- borderRadius: "99px",
94
- background: accent,
95
- width: `${progress}%`,
96
- transition: "width 0.03s linear"
97
- } })), labelEl);
98
- if (type === "ring") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: {
99
- width: size,
100
- height: size,
101
- borderRadius: "50%",
102
- border: `4px solid ${alpha(accent, 0.15)}`,
103
- borderTop: `4px solid ${accent}`,
104
- borderRight: `4px solid ${accent}`,
105
- animation: `spin ${dur} linear infinite`
106
- } }), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
107
- return null;
40
+ ), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin {
41
+ 0% { transform: rotate(0deg); }
42
+ 100% { transform: rotate(360deg); }
43
+ }`));
108
44
  };
109
45
 
110
46
  // src/components/NotificationToast/NotificationToast.jsx
111
- import React2, { useState as useState2, useEffect as useEffect2 } from "react";
47
+ import React2, { useState, useEffect } from "react";
112
48
  var NotificationToast = ({
113
49
  title = "New Message",
114
50
  message = "You have a new notification from the team.",
@@ -119,8 +55,8 @@ var NotificationToast = ({
119
55
  radius = "14px",
120
56
  showProgress = true
121
57
  }) => {
122
- const [visible, setVisible] = useState2(true);
123
- const [progress, setProgress] = useState2(100);
58
+ const [visible, setVisible] = useState(true);
59
+ const [progress, setProgress] = useState(100);
124
60
  const typeColors = {
125
61
  success: "#10b981",
126
62
  error: "#ef4444",
@@ -134,7 +70,7 @@ var NotificationToast = ({
134
70
  info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
135
71
  };
136
72
  const color = typeColors[type] || accent;
137
- useEffect2(() => {
73
+ useEffect(() => {
138
74
  if (!showProgress) return;
139
75
  const step = 100 / (duration / 50);
140
76
  const timer = setInterval(() => {
@@ -228,7 +164,7 @@ var NotificationToast = ({
228
164
  };
229
165
 
230
166
  // src/components/AvatarCard/AvatarCard.jsx
231
- import React3, { useState as useState3 } from "react";
167
+ import React3, { useState as useState2 } from "react";
232
168
  var AvatarCard = ({
233
169
  name = "Aryan Sharma",
234
170
  role = "Frontend Developer",
@@ -241,7 +177,7 @@ var AvatarCard = ({
241
177
  bg = "#0f172a",
242
178
  radius = "20px"
243
179
  }) => {
244
- const [followed, setFollowed] = useState3(false);
180
+ const [followed, setFollowed] = useState2(false);
245
181
  const alpha = (hex, op) => {
246
182
  const r = parseInt(hex.slice(1, 3), 16);
247
183
  const g = parseInt(hex.slice(3, 5), 16);
@@ -420,7 +356,7 @@ var PricingCard = ({
420
356
  };
421
357
 
422
358
  // src/components/Navbar/Navbar.jsx
423
- import React5, { useState as useState4, useEffect as useEffect3 } from "react";
359
+ import React5, { useState as useState3, useEffect as useEffect2 } from "react";
424
360
  var Navbar = ({
425
361
  logo = "VirtualAI",
426
362
  links = ["Home", "Features", "Pricing", "Blog"],
@@ -432,28 +368,28 @@ var Navbar = ({
432
368
  onLinkClick = () => {
433
369
  }
434
370
  }) => {
435
- const [scrolled, setScrolled] = useState4(false);
436
- const [menuOpen, setMenuOpen] = useState4(false);
437
- const [active, setActive] = useState4("Home");
438
- const [isMobile, setIsMobile] = useState4(false);
371
+ const [scrolled, setScrolled] = useState3(false);
372
+ const [menuOpen, setMenuOpen] = useState3(false);
373
+ const [active, setActive] = useState3("Home");
374
+ const [isMobile, setIsMobile] = useState3(false);
439
375
  const alpha = (hex, op) => {
440
376
  const r = parseInt(hex.slice(1, 3), 16);
441
377
  const g = parseInt(hex.slice(3, 5), 16);
442
378
  const b = parseInt(hex.slice(5, 7), 16);
443
379
  return `rgba(${r},${g},${b},${op})`;
444
380
  };
445
- useEffect3(() => {
381
+ useEffect2(() => {
446
382
  const checkMobile = () => setIsMobile(window.innerWidth < 768);
447
383
  checkMobile();
448
384
  window.addEventListener("resize", checkMobile);
449
385
  return () => window.removeEventListener("resize", checkMobile);
450
386
  }, []);
451
- useEffect3(() => {
387
+ useEffect2(() => {
452
388
  const handler = () => setScrolled(window.scrollY > 10);
453
389
  window.addEventListener("scroll", handler);
454
390
  return () => window.removeEventListener("scroll", handler);
455
391
  }, []);
456
- useEffect3(() => {
392
+ useEffect2(() => {
457
393
  if (!isMobile) setMenuOpen(false);
458
394
  }, [isMobile]);
459
395
  const handleLink = (link) => {
@@ -723,7 +659,7 @@ var Footer = ({
723
659
  };
724
660
 
725
661
  // src/components/Sidebar/Sidebar.jsx
726
- import React7, { useState as useState5 } from "react";
662
+ import React7, { useState as useState4 } from "react";
727
663
  var Sidebar = ({
728
664
  logo = "VirtualAI",
729
665
  accent = "#6366f1",
@@ -751,8 +687,8 @@ var Sidebar = ({
751
687
  }
752
688
  ]
753
689
  }) => {
754
- const [active, setActive] = useState5(0);
755
- const [collapsed, setCollapsed] = useState5(false);
690
+ const [active, setActive] = useState4(0);
691
+ const [collapsed, setCollapsed] = useState4(false);
756
692
  const alpha = (hex, op) => {
757
693
  const r = parseInt(hex.slice(1, 3), 16);
758
694
  const g = parseInt(hex.slice(3, 5), 16);
@@ -901,7 +837,7 @@ var Sidebar = ({
901
837
  };
902
838
 
903
839
  // src/components/Charts/Charts.jsx
904
- import React8, { useState as useState6 } from "react";
840
+ import React8, { useState as useState5 } from "react";
905
841
  var Charts = ({
906
842
  type = "bar",
907
843
  data = [
@@ -921,7 +857,7 @@ var Charts = ({
921
857
  showGrid = true,
922
858
  showValues = true
923
859
  }) => {
924
- const [hovered, setHovered] = useState6(null);
860
+ const [hovered, setHovered] = useState5(null);
925
861
  const alpha = (hex, op) => {
926
862
  const r = parseInt(hex.slice(1, 3), 16);
927
863
  const g = parseInt(hex.slice(3, 5), 16);
@@ -1246,7 +1182,7 @@ var Charts = ({
1246
1182
  };
1247
1183
 
1248
1184
  // src/components/ImageCard/ImageCard.jsx
1249
- import React9, { useState as useState7 } from "react";
1185
+ import React9, { useState as useState6 } from "react";
1250
1186
  var ImageCard = ({
1251
1187
  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
1252
1188
  tag = "Travel",
@@ -1259,7 +1195,7 @@ var ImageCard = ({
1259
1195
  onButtonClick = () => {
1260
1196
  }
1261
1197
  }) => {
1262
- const [hovered, setHovered] = useState7(false);
1198
+ const [hovered, setHovered] = useState6(false);
1263
1199
  const alpha = (hex, op) => {
1264
1200
  const r = parseInt(hex.slice(1, 3), 16);
1265
1201
  const g = parseInt(hex.slice(3, 5), 16);
@@ -1350,7 +1286,7 @@ var ImageCard = ({
1350
1286
  };
1351
1287
 
1352
1288
  // src/components/ImageSlider/ImageSlider.jsx
1353
- import React10, { useState as useState8 } from "react";
1289
+ import React10, { useState as useState7 } from "react";
1354
1290
  var ImageSlider = ({
1355
1291
  images = [
1356
1292
  {
@@ -1381,8 +1317,8 @@ var ImageSlider = ({
1381
1317
  showCaption = true,
1382
1318
  autoPlay = false
1383
1319
  }) => {
1384
- const [current, setCurrent] = useState8(0);
1385
- const [dir, setDir] = useState8(null);
1320
+ const [current, setCurrent] = useState7(0);
1321
+ const [dir, setDir] = useState7(null);
1386
1322
  const alpha = (hex, op) => {
1387
1323
  const r = parseInt(hex.slice(1, 3), 16);
1388
1324
  const g = parseInt(hex.slice(3, 5), 16);
@@ -1564,7 +1500,7 @@ var ImageSlider = ({
1564
1500
  };
1565
1501
 
1566
1502
  // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
1567
- import React11, { useState as useState9, useEffect as useEffect4, useCallback } from "react";
1503
+ import React11, { useState as useState8, useEffect as useEffect3, useCallback } from "react";
1568
1504
  var BackgoundImageSlider = ({
1569
1505
  images = [
1570
1506
  {
@@ -1600,8 +1536,8 @@ var BackgoundImageSlider = ({
1600
1536
  autoPlay = false,
1601
1537
  autoPlayInterval = 4e3
1602
1538
  }) => {
1603
- const [current, setCurrent] = useState9(0);
1604
- const [animating, setAnimating] = useState9(false);
1539
+ const [current, setCurrent] = useState8(0);
1540
+ const [animating, setAnimating] = useState8(false);
1605
1541
  const alpha = (hex, op) => {
1606
1542
  const r = parseInt(hex.slice(1, 3), 16);
1607
1543
  const g = parseInt(hex.slice(3, 5), 16);
@@ -1616,7 +1552,7 @@ var BackgoundImageSlider = ({
1616
1552
  }, [animating, images.length]);
1617
1553
  const prev = () => go(current - 1);
1618
1554
  const next = () => go(current + 1);
1619
- useEffect4(() => {
1555
+ useEffect3(() => {
1620
1556
  if (!autoPlay) return;
1621
1557
  const t = setInterval(() => go(current + 1), autoPlayInterval);
1622
1558
  return () => clearInterval(t);
@@ -1827,7 +1763,7 @@ var BackgoundImageSlider = ({
1827
1763
  };
1828
1764
 
1829
1765
  // src/components/PageLoader/PageLoader.jsx
1830
- import React12, { useState as useState10, useEffect as useEffect5 } from "react";
1766
+ import React12, { useState as useState9, useEffect as useEffect4 } from "react";
1831
1767
  var PageLoader = ({
1832
1768
  logo = "VirtualAI",
1833
1769
  accent = "#6366f1",
@@ -1839,15 +1775,15 @@ var PageLoader = ({
1839
1775
  onComplete = () => {
1840
1776
  }
1841
1777
  }) => {
1842
- const [progress, setProgress] = useState10(0);
1843
- const [done, setDone] = useState10(false);
1778
+ const [progress, setProgress] = useState9(0);
1779
+ const [done, setDone] = useState9(false);
1844
1780
  const alpha = (hex, op) => {
1845
1781
  const r = parseInt(hex.slice(1, 3), 16);
1846
1782
  const g = parseInt(hex.slice(3, 5), 16);
1847
1783
  const b = parseInt(hex.slice(5, 7), 16);
1848
1784
  return `rgba(${r},${g},${b},${op})`;
1849
1785
  };
1850
- useEffect5(() => {
1786
+ useEffect4(() => {
1851
1787
  const steps = 100;
1852
1788
  const interval = duration / steps;
1853
1789
  let current = 0;
@@ -1996,7 +1932,7 @@ var PageLoader = ({
1996
1932
  };
1997
1933
 
1998
1934
  // src/components/OTPInput/OTPInput.jsx
1999
- import React13, { useState as useState11, useRef, useEffect as useEffect6 } from "react";
1935
+ import React13, { useState as useState10, useRef, useEffect as useEffect5 } from "react";
2000
1936
  var OTPInput = ({
2001
1937
  length = 6,
2002
1938
  onComplete = () => {
@@ -2013,10 +1949,10 @@ var OTPInput = ({
2013
1949
  onResend = () => {
2014
1950
  }
2015
1951
  }) => {
2016
- const [otp, setOtp] = useState11(Array(length).fill(""));
2017
- const [focused, setFocused] = useState11(0);
2018
- const [completed, setCompleted] = useState11(false);
2019
- const [resendTimer, setResendTimer] = useState11(30);
1952
+ const [otp, setOtp] = useState10(Array(length).fill(""));
1953
+ const [focused, setFocused] = useState10(0);
1954
+ const [completed, setCompleted] = useState10(false);
1955
+ const [resendTimer, setResendTimer] = useState10(30);
2020
1956
  const inputs = useRef([]);
2021
1957
  const alpha = (hex, op) => {
2022
1958
  const r = parseInt(hex.slice(1, 3), 16);
@@ -2024,11 +1960,11 @@ var OTPInput = ({
2024
1960
  const b = parseInt(hex.slice(5, 7), 16);
2025
1961
  return `rgba(${r},${g},${b},${op})`;
2026
1962
  };
2027
- useEffect6(() => {
1963
+ useEffect5(() => {
2028
1964
  var _a;
2029
1965
  (_a = inputs.current[0]) == null ? void 0 : _a.focus();
2030
1966
  }, []);
2031
- useEffect6(() => {
1967
+ useEffect5(() => {
2032
1968
  if (resendTimer <= 0) return;
2033
1969
  const t = setInterval(() => setResendTimer((s) => s - 1), 1e3);
2034
1970
  return () => clearInterval(t);
@@ -2227,7 +2163,7 @@ var OTPInput = ({
2227
2163
  };
2228
2164
 
2229
2165
  // src/components/InvoiceCard/InvoiceCard.jsx
2230
- import React14, { useState as useState12 } from "react";
2166
+ import React14, { useState as useState11 } from "react";
2231
2167
  var InvoiceCard = ({
2232
2168
  invoiceNumber = "INV-2024-001",
2233
2169
  date = "21 March 2024",
@@ -2258,7 +2194,7 @@ var InvoiceCard = ({
2258
2194
  onDownloadClick = () => {
2259
2195
  }
2260
2196
  }) => {
2261
- const [paid, setPaid] = useState12(status === "paid");
2197
+ const [paid, setPaid] = useState11(status === "paid");
2262
2198
  const alpha = (hex, op) => {
2263
2199
  const r = parseInt(hex.slice(1, 3), 16);
2264
2200
  const g = parseInt(hex.slice(3, 5), 16);
@@ -2448,7 +2384,7 @@ var InvoiceCard = ({
2448
2384
  };
2449
2385
 
2450
2386
  // src/components/FileUpload/FileUpload.jsx
2451
- import React15, { useState as useState13, useRef as useRef2 } from "react";
2387
+ import React15, { useState as useState12, useRef as useRef2 } from "react";
2452
2388
  var FileUpload = ({
2453
2389
  accept = "*",
2454
2390
  multiple = true,
@@ -2461,9 +2397,9 @@ var FileUpload = ({
2461
2397
  onUpload = () => {
2462
2398
  }
2463
2399
  }) => {
2464
- const [files, setFiles] = useState13([]);
2465
- const [dragging, setDragging] = useState13(false);
2466
- const [error, setError] = useState13("");
2400
+ const [files, setFiles] = useState12([]);
2401
+ const [dragging, setDragging] = useState12(false);
2402
+ const [error, setError] = useState12("");
2467
2403
  const inputRef = useRef2(null);
2468
2404
  const alpha = (hex, op) => {
2469
2405
  const r = parseInt(hex.slice(1, 3), 16);
@@ -2711,7 +2647,7 @@ var FileUpload = ({
2711
2647
  };
2712
2648
 
2713
2649
  // src/components/ColorPicker/ColorPicker.jsx
2714
- import React16, { useState as useState14 } from "react";
2650
+ import React16, { useState as useState13 } from "react";
2715
2651
  var ColorPicker = ({
2716
2652
  defaultColor = "#6366f1",
2717
2653
  showOpacity = true,
@@ -2745,11 +2681,11 @@ var ColorPicker = ({
2745
2681
  "#000000"
2746
2682
  ]
2747
2683
  }) => {
2748
- const [color, setColor] = useState14(defaultColor);
2749
- const [hex, setHex] = useState14(defaultColor);
2750
- const [opacity, setOpacity] = useState14(100);
2751
- const [inputErr, setInputErr] = useState14(false);
2752
- const [copied, setCopied] = useState14(false);
2684
+ const [color, setColor] = useState13(defaultColor);
2685
+ const [hex, setHex] = useState13(defaultColor);
2686
+ const [opacity, setOpacity] = useState13(100);
2687
+ const [inputErr, setInputErr] = useState13(false);
2688
+ const [copied, setCopied] = useState13(false);
2753
2689
  const alpha = (hexVal, op) => {
2754
2690
  const r = parseInt(hexVal.slice(1, 3), 16);
2755
2691
  const g = parseInt(hexVal.slice(3, 5), 16);
@@ -2945,7 +2881,7 @@ var ColorPicker = ({
2945
2881
  };
2946
2882
 
2947
2883
  // src/components/RatingStars/RatingStars.jsx
2948
- import React17, { useState as useState15 } from "react";
2884
+ import React17, { useState as useState14 } from "react";
2949
2885
  var RatingStars = ({
2950
2886
  defaultRating = 0,
2951
2887
  total = 5,
@@ -2961,8 +2897,8 @@ var RatingStars = ({
2961
2897
  onChange = () => {
2962
2898
  }
2963
2899
  }) => {
2964
- const [rating, setRating] = useState15(defaultRating);
2965
- const [hovered, setHovered] = useState15(0);
2900
+ const [rating, setRating] = useState14(defaultRating);
2901
+ const [hovered, setHovered] = useState14(0);
2966
2902
  const labels = ["", "Terrible", "Bad", "Okay", "Good", "Excellent"];
2967
2903
  const halfLabels = { 0.5: "Awful", 1: "Terrible", 1.5: "Very Bad", 2: "Bad", 2.5: "Below Average", 3: "Okay", 3.5: "Above Average", 4: "Good", 4.5: "Great", 5: "Excellent" };
2968
2904
  const alpha = (hex, op) => {
@@ -3061,7 +2997,7 @@ var RatingStars = ({
3061
2997
  };
3062
2998
 
3063
2999
  // src/components/StatCard/StatCard.jsx
3064
- import React18, { useEffect as useEffect7, useRef as useRef3, useState as useState16 } from "react";
3000
+ import React18, { useEffect as useEffect6, useRef as useRef3, useState as useState15 } from "react";
3065
3001
  var StatCard = ({
3066
3002
  title = "Active Users",
3067
3003
  value = "128K",
@@ -3076,12 +3012,12 @@ var StatCard = ({
3076
3012
  showIcon = true,
3077
3013
  barPercent = 68
3078
3014
  }) => {
3079
- const [count, setCount] = useState16(0);
3080
- const [barWidth, setBarWidth] = useState16(0);
3081
- const [visible, setVisible] = useState16(false);
3082
- const [entered, setEntered] = useState16(false);
3015
+ const [count, setCount] = useState15(0);
3016
+ const [barWidth, setBarWidth] = useState15(0);
3017
+ const [visible, setVisible] = useState15(false);
3018
+ const [entered, setEntered] = useState15(false);
3083
3019
  const ref = useRef3(null);
3084
- useEffect7(() => {
3020
+ useEffect6(() => {
3085
3021
  const observer = new IntersectionObserver(
3086
3022
  ([entry]) => {
3087
3023
  if (entry.isIntersecting) {
@@ -3094,7 +3030,7 @@ var StatCard = ({
3094
3030
  if (ref.current) observer.observe(ref.current);
3095
3031
  return () => observer.disconnect();
3096
3032
  }, []);
3097
- useEffect7(() => {
3033
+ useEffect6(() => {
3098
3034
  if (!visible) return;
3099
3035
  setEntered(true);
3100
3036
  const duration = 1400;
@@ -3107,7 +3043,7 @@ var StatCard = ({
3107
3043
  };
3108
3044
  requestAnimationFrame(step);
3109
3045
  }, [visible, numericValue]);
3110
- useEffect7(() => {
3046
+ useEffect6(() => {
3111
3047
  if (!visible) return;
3112
3048
  const t = setTimeout(() => setBarWidth(barPercent), 200);
3113
3049
  return () => clearTimeout(t);
@@ -3277,7 +3213,7 @@ var StatCard = ({
3277
3213
  };
3278
3214
 
3279
3215
  // src/components/ProgressBar/ProgressBar.jsx
3280
- import React19, { useEffect as useEffect8, useRef as useRef4, useState as useState17 } from "react";
3216
+ import React19, { useEffect as useEffect7, useRef as useRef4, useState as useState16 } from "react";
3281
3217
  var ProgressBar = ({
3282
3218
  label = "Progress",
3283
3219
  percentage = 75,
@@ -3291,10 +3227,10 @@ var ProgressBar = ({
3291
3227
  steps = 5
3292
3228
  // only for type="steps"
3293
3229
  }) => {
3294
- const [filled, setFilled] = useState17(0);
3295
- const [visible, setVisible] = useState17(false);
3230
+ const [filled, setFilled] = useState16(0);
3231
+ const [visible, setVisible] = useState16(false);
3296
3232
  const ref = useRef4(null);
3297
- useEffect8(() => {
3233
+ useEffect7(() => {
3298
3234
  const obs = new IntersectionObserver(
3299
3235
  ([e]) => {
3300
3236
  if (e.isIntersecting) {
@@ -3307,7 +3243,7 @@ var ProgressBar = ({
3307
3243
  if (ref.current) obs.observe(ref.current);
3308
3244
  return () => obs.disconnect();
3309
3245
  }, []);
3310
- useEffect8(() => {
3246
+ useEffect7(() => {
3311
3247
  if (!visible) return;
3312
3248
  const duration = 1200;
3313
3249
  const start = performance.now();
@@ -3524,7 +3460,7 @@ var ProgressBar = ({
3524
3460
  };
3525
3461
 
3526
3462
  // src/components/AnimatedForm/AnimatedForm.jsx
3527
- import React20, { useState as useState18 } from "react";
3463
+ import React20, { useState as useState17 } from "react";
3528
3464
  var AnimatedForm = ({
3529
3465
  title = "Contact Us",
3530
3466
  description = "We'll get back to you shortly",
@@ -3534,10 +3470,10 @@ var AnimatedForm = ({
3534
3470
  onSubmit = () => {
3535
3471
  }
3536
3472
  }) => {
3537
- const [name, setName] = useState18("");
3538
- const [email, setEmail] = useState18("");
3539
- const [message, setMessage] = useState18("");
3540
- const [hovered, setHovered] = useState18(false);
3473
+ const [name, setName] = useState17("");
3474
+ const [email, setEmail] = useState17("");
3475
+ const [message, setMessage] = useState17("");
3476
+ const [hovered, setHovered] = useState17(false);
3541
3477
  const alpha = (hex, op) => {
3542
3478
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
3543
3479
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -3671,7 +3607,7 @@ var ReviewCard = ({
3671
3607
  };
3672
3608
 
3673
3609
  // src/components/Card/Card.jsx
3674
- import React22, { useState as useState19 } from "react";
3610
+ import React22, { useState as useState18 } from "react";
3675
3611
  var Card = ({
3676
3612
  title = "Performance",
3677
3613
  description = "Real-time metrics with live dashboard updates every second.",
@@ -3679,7 +3615,7 @@ var Card = ({
3679
3615
  tag = "Active",
3680
3616
  onClick
3681
3617
  }) => {
3682
- const [hovered, setHovered] = useState19(false);
3618
+ const [hovered, setHovered] = useState18(false);
3683
3619
  return /* @__PURE__ */ React22.createElement(
3684
3620
  "div",
3685
3621
  {
@@ -3775,7 +3711,7 @@ var Button = ({ text = "Get Started", bg = "#7c3aed", color = "#fff", size = "md
3775
3711
  };
3776
3712
 
3777
3713
  // src/components/AnimatedButton/AnimatedButton.jsx
3778
- import React24, { useState as useState20 } from "react";
3714
+ import React24, { useState as useState19 } from "react";
3779
3715
  var AnimatedButton = ({
3780
3716
  text = "Click Me!",
3781
3717
  bg = "#7c3aed",
@@ -3789,7 +3725,7 @@ var AnimatedButton = ({
3789
3725
  onClick
3790
3726
  }) => {
3791
3727
  const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
3792
- const [hovered, setHovered] = useState20(false);
3728
+ const [hovered, setHovered] = useState19(false);
3793
3729
  return /* @__PURE__ */ React24.createElement(
3794
3730
  "button",
3795
3731
  {
@@ -3821,7 +3757,7 @@ var AnimatedButton = ({
3821
3757
  };
3822
3758
 
3823
3759
  // src/components/ECommerceCard/ECommerceCard.jsx
3824
- import React25, { useState as useState21 } from "react";
3760
+ import React25, { useState as useState20 } from "react";
3825
3761
  var ECommerceCard = ({
3826
3762
  title = "Wireless Headphones",
3827
3763
  description = "Experience immersive sound with noise cancellation.",
@@ -3836,7 +3772,7 @@ var ECommerceCard = ({
3836
3772
  onViewDetails = () => {
3837
3773
  }
3838
3774
  }) => {
3839
- const [hovered, setHovered] = useState21(false);
3775
+ const [hovered, setHovered] = useState20(false);
3840
3776
  const alpha = (hex, op) => {
3841
3777
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
3842
3778
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -3897,7 +3833,7 @@ var IDCard = ({
3897
3833
  };
3898
3834
 
3899
3835
  // src/components/DatePicker/DatePicker.jsx
3900
- import React27, { useState as useState22 } from "react";
3836
+ import React27, { useState as useState21 } from "react";
3901
3837
  var DatePicker = ({
3902
3838
  selectedDate = /* @__PURE__ */ new Date(),
3903
3839
  accent = "#6366f1",
@@ -3905,7 +3841,7 @@ var DatePicker = ({
3905
3841
  onDateChange = () => {
3906
3842
  }
3907
3843
  }) => {
3908
- const [date, setDate] = useState22(selectedDate);
3844
+ const [date, setDate] = useState21(selectedDate);
3909
3845
  const alpha = (hex, op) => {
3910
3846
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
3911
3847
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
@@ -3965,7 +3901,7 @@ var FacebookPost = ({
3965
3901
  };
3966
3902
 
3967
3903
  // src/components/TwitterPost/TwitterPost.jsx
3968
- import React29, { useState as useState23 } from "react";
3904
+ import React29, { useState as useState22 } from "react";
3969
3905
  var TwitterPost = ({
3970
3906
  username = "johndoe",
3971
3907
  handle = "@johndoe",
@@ -3978,7 +3914,7 @@ var TwitterPost = ({
3978
3914
  accent = "#1d9bf0",
3979
3915
  bg = "#0f172a"
3980
3916
  }) => {
3981
- const [liked, setLiked] = useState23(false);
3917
+ const [liked, setLiked] = useState22(false);
3982
3918
  const alpha = (hex, op) => {
3983
3919
  const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
3984
3920
  return "rgba(" + r + "," + g + "," + b + "," + op + ")";
package/package.json CHANGED
@@ -1,22 +1,22 @@
1
- {
2
- "name": "virtual-ui-project-lib",
3
- "version": "1.0.6",
4
- "description": "Virtual UI React Component Library",
5
- "author": "Rahul Kumar",
6
- "license": "ISC",
7
- "main": "dist/index.js",
8
- "module": "dist/index.mjs",
9
- "files": [
10
- "dist"
11
- ],
12
- "scripts": {
13
- "build": "tsup"
14
- },
15
- "peerDependencies": {
16
- "react": ">=18"
17
- },
18
- "devDependencies": {
19
- "tsup": "^8.5.1",
20
- "typescript": "^5.9.3"
21
- }
22
- }
1
+ {
2
+ "name": "virtual-ui-project-lib",
3
+ "version": "1.0.7",
4
+ "description": "Virtual UI React Component Library",
5
+ "author": "Rahul Kumar",
6
+ "license": "ISC",
7
+ "main": "dist/index.js",
8
+ "module": "dist/index.mjs",
9
+ "files": [
10
+ "dist"
11
+ ],
12
+ "scripts": {
13
+ "build": "tsup"
14
+ },
15
+ "peerDependencies": {
16
+ "react": ">=18"
17
+ },
18
+ "devDependencies": {
19
+ "tsup": "^8.5.1",
20
+ "typescript": "^5.9.3"
21
+ }
22
+ }
package/README.md DELETED
@@ -1,361 +0,0 @@
1
-
2
-
3
- # Virtual UI
4
-
5
- A modern and customizable **React UI Component Library** designed for fast development and clean design systems.
6
-
7
- ---
8
-
9
- ## 📦 Install
10
-
11
- ```bash
12
- npm install virtual-ui-project-lib
13
- ```
14
-
15
- ---
16
-
17
- ## 🚀 Usage
18
-
19
- ```jsx
20
- import {
21
- Navbar,
22
- Sidebar,
23
- AvatarCard,
24
- PricingCard,
25
- Loader,
26
- OTPInput
27
- } from "virtual-ui-project-lib"
28
-
29
- function App() {
30
- return (
31
- <>
32
- <Navbar />
33
- <Sidebar />
34
-
35
- <div style={{ padding: "20px" }}>
36
- <AvatarCard />
37
- <PricingCard />
38
- <OTPInput />
39
- <Loader />
40
- </div>
41
- </>
42
- )
43
- }
44
- ```
45
-
46
- ---
47
-
48
- # 🧩 Components
49
-
50
- Virtual UI includes the following components:
51
-
52
- * AvatarCard
53
- * BackgroundImageSlider
54
- * Charts
55
- * ColorPicker
56
- * FileUpload
57
- * Footer
58
- * ImageCard
59
- * ImageSlider
60
- * InvoiceCard
61
- * Loader
62
- * Navbar
63
- * NotificationToast
64
- * OTPInput
65
- * PageLoader
66
- * PricingCard
67
- * RatingStars
68
- * Sidebar
69
-
70
- ---
71
-
72
- # 📘 Component Details
73
-
74
- ---
75
-
76
- ## AvatarCard
77
-
78
- ```jsx
79
- <AvatarCard />
80
- ```
81
-
82
- ### Props
83
-
84
- | Prop | Description |
85
- | ----- | ------------ |
86
- | name | User name |
87
- | image | Avatar image |
88
- | role | User role |
89
- | size | Card size |
90
-
91
- ---
92
-
93
- ## Navbar
94
-
95
- ```jsx
96
- <Navbar />
97
- ```
98
-
99
- ### Props
100
-
101
- | Prop | Description |
102
- | ----- | ---------------- |
103
- | logo | Logo text/image |
104
- | links | Navigation links |
105
- | fixed | Sticky navbar |
106
-
107
- ---
108
-
109
- ## Sidebar
110
-
111
- ```jsx
112
- <Sidebar />
113
- ```
114
-
115
- ### Props
116
-
117
- | Prop | Description |
118
- | --------- | -------------- |
119
- | items | Sidebar items |
120
- | collapsed | Collapse state |
121
-
122
- ---
123
-
124
- ## PricingCard
125
-
126
- ```jsx
127
- <PricingCard />
128
- ```
129
-
130
- ### Props
131
-
132
- | Prop | Description |
133
- | ----------- | ---------------- |
134
- | title | Plan name |
135
- | price | Plan price |
136
- | features | List of features |
137
- | highlighted | Highlight plan |
138
-
139
- ---
140
-
141
- ## OTPInput
142
-
143
- ```jsx
144
- <OTPInput length={6} />
145
- ```
146
-
147
- ### Props
148
-
149
- | Prop | Description |
150
- | -------- | ------------------ |
151
- | length | Number of digits |
152
- | onChange | OTP change handler |
153
-
154
- ---
155
-
156
- ## Loader
157
-
158
- ```jsx
159
- <Loader />
160
- ```
161
-
162
- ### Props
163
-
164
- | Prop | Description |
165
- | ----- | ------------ |
166
- | size | Loader size |
167
- | color | Loader color |
168
-
169
- ---
170
-
171
- ## NotificationToast
172
-
173
- ```jsx
174
- <NotificationToast message="Saved!" />
175
- ```
176
-
177
- ### Props
178
-
179
- | Prop | Description |
180
- | ------- | ---------------------- |
181
- | message | Toast text |
182
- | type | success / error / info |
183
-
184
- ---
185
-
186
- ## Charts
187
-
188
- ```jsx
189
- <Charts />
190
- ```
191
-
192
- ### Props
193
-
194
- | Prop | Description |
195
- | ---- | ---------------- |
196
- | type | bar / line / pie |
197
- | data | Chart data |
198
-
199
- ---
200
-
201
- ## ColorPicker
202
-
203
- ```jsx
204
- <ColorPicker />
205
- ```
206
-
207
- ### Props
208
-
209
- | Prop | Description |
210
- | -------- | -------------- |
211
- | value | Selected color |
212
- | onChange | Change handler |
213
-
214
- ---
215
-
216
- ## FileUpload
217
-
218
- ```jsx
219
- <FileUpload />
220
- ```
221
-
222
- ### Props
223
-
224
- | Prop | Description |
225
- | -------- | -------------------- |
226
- | onUpload | Upload handler |
227
- | multiple | Allow multiple files |
228
-
229
- ---
230
-
231
- ## ImageCard
232
-
233
- ```jsx
234
- <ImageCard />
235
- ```
236
-
237
- ### Props
238
-
239
- | Prop | Description |
240
- | ----- | ------------ |
241
- | src | Image source |
242
- | title | Image title |
243
-
244
- ---
245
-
246
- ## ImageSlider
247
-
248
- ```jsx
249
- <ImageSlider />
250
- ```
251
-
252
- ### Props
253
-
254
- | Prop | Description |
255
- | -------- | ----------- |
256
- | images | Image array |
257
- | autoPlay | Auto slide |
258
-
259
- ---
260
-
261
- ## BackgroundImageSlider
262
-
263
- ```jsx
264
- <BackgroundImageSlider />
265
- ```
266
-
267
- ### Props
268
-
269
- | Prop | Description |
270
- | ------- | ----------------- |
271
- | images | Background images |
272
- | overlay | Overlay color |
273
-
274
- ---
275
-
276
- ## InvoiceCard
277
-
278
- ```jsx
279
- <InvoiceCard />
280
- ```
281
-
282
- ### Props
283
-
284
- | Prop | Description |
285
- | --------- | -------------- |
286
- | invoiceId | Invoice ID |
287
- | amount | Amount |
288
- | status | Paid / Pending |
289
-
290
- ---
291
-
292
- ## RatingStars
293
-
294
- ```jsx
295
- <RatingStars rating={4} />
296
- ```
297
-
298
- ### Props
299
-
300
- | Prop | Description |
301
- | -------- | --------------- |
302
- | rating | Number of stars |
303
- | onChange | Change handler |
304
-
305
- ---
306
-
307
- ## PageLoader
308
-
309
- ```jsx
310
- <PageLoader />
311
- ```
312
-
313
- ### Props
314
-
315
- | Prop | Description |
316
- | ---------- | ---------------- |
317
- | fullScreen | Full page loader |
318
-
319
- ---
320
-
321
- ## Footer
322
-
323
- ```jsx
324
- <Footer />
325
- ```
326
-
327
- ### Props
328
-
329
- | Prop | Description |
330
- | ----- | ------------ |
331
- | text | Footer text |
332
- | links | Footer links |
333
-
334
- ---
335
-
336
- # 🤝 Contributing
337
-
338
- Contributions are welcome!
339
-
340
- * Fork the repo
341
- * Create a new branch
342
- * Submit a pull request
343
-
344
- ---
345
-
346
- # 📄 License
347
-
348
- MIT License
349
-
350
- ---
351
-
352
- # 💡 Future Improvements
353
-
354
- * Theme system (dark/light mode)
355
- * Animation presets
356
- * Accessibility improvements
357
- * More enterprise components
358
-
359
- ---
360
-
361
- Made with ❤️ for developers