virtual-ui-lib 1.0.45 → 1.0.46
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 +21 -0
- package/dist/index.mjs +20 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -34,6 +34,7 @@ __export(index_exports, {
|
|
|
34
34
|
LoadingSpinner: () => LoadingSpinner,
|
|
35
35
|
OtpInput: () => OtpInput,
|
|
36
36
|
SearchBar: () => SearchBar,
|
|
37
|
+
SkeletonLoader: () => SkeletonLoader,
|
|
37
38
|
SmartButton: () => SmartButton,
|
|
38
39
|
StatCard: () => StatCard,
|
|
39
40
|
TextArea: () => TextArea,
|
|
@@ -474,6 +475,25 @@ var import_react9 = __toESM(require("react"));
|
|
|
474
475
|
var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
|
|
475
476
|
return /* @__PURE__ */ import_react9.default.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
|
|
476
477
|
};
|
|
478
|
+
|
|
479
|
+
// src/components/SkeletonLoader/SkeletonLoader.jsx
|
|
480
|
+
var import_react10 = __toESM(require("react"));
|
|
481
|
+
var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
|
|
482
|
+
const shimmerStyle = {
|
|
483
|
+
background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
|
|
484
|
+
backgroundSize: "200% 100%",
|
|
485
|
+
animation: "shimmer 1.5s infinite",
|
|
486
|
+
borderRadius: radius
|
|
487
|
+
};
|
|
488
|
+
return /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes shimmer {
|
|
489
|
+
0% {
|
|
490
|
+
background-position: 200% 0;
|
|
491
|
+
}
|
|
492
|
+
100% {
|
|
493
|
+
background-position: 0 0;
|
|
494
|
+
}
|
|
495
|
+
}`));
|
|
496
|
+
};
|
|
477
497
|
// Annotate the CommonJS export names for ESM import in node:
|
|
478
498
|
0 && (module.exports = {
|
|
479
499
|
CodeBlock,
|
|
@@ -481,6 +501,7 @@ var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
|
|
|
481
501
|
LoadingSpinner,
|
|
482
502
|
OtpInput,
|
|
483
503
|
SearchBar,
|
|
504
|
+
SkeletonLoader,
|
|
484
505
|
SmartButton,
|
|
485
506
|
StatCard,
|
|
486
507
|
TextArea,
|
package/dist/index.mjs
CHANGED
|
@@ -431,12 +431,32 @@ import React9 from "react";
|
|
|
431
431
|
var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
|
|
432
432
|
return /* @__PURE__ */ React9.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
|
|
433
433
|
};
|
|
434
|
+
|
|
435
|
+
// src/components/SkeletonLoader/SkeletonLoader.jsx
|
|
436
|
+
import React10 from "react";
|
|
437
|
+
var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
|
|
438
|
+
const shimmerStyle = {
|
|
439
|
+
background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
|
|
440
|
+
backgroundSize: "200% 100%",
|
|
441
|
+
animation: "shimmer 1.5s infinite",
|
|
442
|
+
borderRadius: radius
|
|
443
|
+
};
|
|
444
|
+
return /* @__PURE__ */ React10.createElement("div", { style: { padding } }, /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React10.createElement("style", null, `@keyframes shimmer {
|
|
445
|
+
0% {
|
|
446
|
+
background-position: 200% 0;
|
|
447
|
+
}
|
|
448
|
+
100% {
|
|
449
|
+
background-position: 0 0;
|
|
450
|
+
}
|
|
451
|
+
}`));
|
|
452
|
+
};
|
|
434
453
|
export {
|
|
435
454
|
CodeBlock,
|
|
436
455
|
CustomInputField,
|
|
437
456
|
LoadingSpinner,
|
|
438
457
|
OtpInput,
|
|
439
458
|
SearchBar,
|
|
459
|
+
SkeletonLoader,
|
|
440
460
|
SmartButton,
|
|
441
461
|
StatCard,
|
|
442
462
|
TextArea,
|