virtual-ui-lib 1.0.22 → 1.0.23
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 +51 -0
- package/dist/index.mjs +50 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -38,6 +38,7 @@ __export(index_exports, {
|
|
|
38
38
|
FormInput: () => FormInput,
|
|
39
39
|
GridLayout: () => GridLayout,
|
|
40
40
|
ImageUploadPreview: () => ImageUploadPreview,
|
|
41
|
+
Loader: () => Loader,
|
|
41
42
|
Navbar: () => Navbar
|
|
42
43
|
});
|
|
43
44
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -597,6 +598,55 @@ var CopyButton = ({
|
|
|
597
598
|
copied ? "Copied!" : text
|
|
598
599
|
);
|
|
599
600
|
};
|
|
601
|
+
|
|
602
|
+
// src/components/Loader/Loader.jsx
|
|
603
|
+
var import_react11 = __toESM(require("react"));
|
|
604
|
+
var Loader = ({
|
|
605
|
+
size = "medium",
|
|
606
|
+
fullScreen = false,
|
|
607
|
+
color = "#7c3aed",
|
|
608
|
+
backgroundColor = "#0f172a",
|
|
609
|
+
duration = "1s"
|
|
610
|
+
}) => {
|
|
611
|
+
const sizes = { small: "40px", medium: "60px", large: "80px" };
|
|
612
|
+
const [fadeIn, setFadeIn] = (0, import_react11.useState)(false);
|
|
613
|
+
(0, import_react11.useEffect)(() => {
|
|
614
|
+
setFadeIn(true);
|
|
615
|
+
}, []);
|
|
616
|
+
return /* @__PURE__ */ import_react11.default.createElement(
|
|
617
|
+
"div",
|
|
618
|
+
{
|
|
619
|
+
style: {
|
|
620
|
+
display: "flex",
|
|
621
|
+
justifyContent: "center",
|
|
622
|
+
alignItems: "center",
|
|
623
|
+
height: fullScreen ? "100vh" : "auto",
|
|
624
|
+
background: fullScreen ? backgroundColor : "transparent",
|
|
625
|
+
transition: "opacity 0.5s",
|
|
626
|
+
opacity: fadeIn ? 1 : 0
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
/* @__PURE__ */ import_react11.default.createElement(
|
|
630
|
+
"div",
|
|
631
|
+
{
|
|
632
|
+
style: {
|
|
633
|
+
width: sizes[size],
|
|
634
|
+
height: sizes[size],
|
|
635
|
+
border: `8px solid ${color}`,
|
|
636
|
+
borderTop: `8px solid transparent`,
|
|
637
|
+
borderRadius: "50%",
|
|
638
|
+
animation: `spin ${duration} linear infinite`
|
|
639
|
+
}
|
|
640
|
+
}
|
|
641
|
+
),
|
|
642
|
+
/* @__PURE__ */ import_react11.default.createElement("style", null, `
|
|
643
|
+
@keyframes spin {
|
|
644
|
+
0% { transform: rotate(0deg); }
|
|
645
|
+
100% { transform: rotate(360deg); }
|
|
646
|
+
}
|
|
647
|
+
`)
|
|
648
|
+
);
|
|
649
|
+
};
|
|
600
650
|
// Annotate the CommonJS export names for ESM import in node:
|
|
601
651
|
0 && (module.exports = {
|
|
602
652
|
AlertBanner,
|
|
@@ -608,5 +658,6 @@ var CopyButton = ({
|
|
|
608
658
|
FormInput,
|
|
609
659
|
GridLayout,
|
|
610
660
|
ImageUploadPreview,
|
|
661
|
+
Loader,
|
|
611
662
|
Navbar
|
|
612
663
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -553,6 +553,55 @@ var CopyButton = ({
|
|
|
553
553
|
copied ? "Copied!" : text
|
|
554
554
|
);
|
|
555
555
|
};
|
|
556
|
+
|
|
557
|
+
// src/components/Loader/Loader.jsx
|
|
558
|
+
import React11, { useEffect as useEffect5, useState as useState8 } from "react";
|
|
559
|
+
var Loader = ({
|
|
560
|
+
size = "medium",
|
|
561
|
+
fullScreen = false,
|
|
562
|
+
color = "#7c3aed",
|
|
563
|
+
backgroundColor = "#0f172a",
|
|
564
|
+
duration = "1s"
|
|
565
|
+
}) => {
|
|
566
|
+
const sizes = { small: "40px", medium: "60px", large: "80px" };
|
|
567
|
+
const [fadeIn, setFadeIn] = useState8(false);
|
|
568
|
+
useEffect5(() => {
|
|
569
|
+
setFadeIn(true);
|
|
570
|
+
}, []);
|
|
571
|
+
return /* @__PURE__ */ React11.createElement(
|
|
572
|
+
"div",
|
|
573
|
+
{
|
|
574
|
+
style: {
|
|
575
|
+
display: "flex",
|
|
576
|
+
justifyContent: "center",
|
|
577
|
+
alignItems: "center",
|
|
578
|
+
height: fullScreen ? "100vh" : "auto",
|
|
579
|
+
background: fullScreen ? backgroundColor : "transparent",
|
|
580
|
+
transition: "opacity 0.5s",
|
|
581
|
+
opacity: fadeIn ? 1 : 0
|
|
582
|
+
}
|
|
583
|
+
},
|
|
584
|
+
/* @__PURE__ */ React11.createElement(
|
|
585
|
+
"div",
|
|
586
|
+
{
|
|
587
|
+
style: {
|
|
588
|
+
width: sizes[size],
|
|
589
|
+
height: sizes[size],
|
|
590
|
+
border: `8px solid ${color}`,
|
|
591
|
+
borderTop: `8px solid transparent`,
|
|
592
|
+
borderRadius: "50%",
|
|
593
|
+
animation: `spin ${duration} linear infinite`
|
|
594
|
+
}
|
|
595
|
+
}
|
|
596
|
+
),
|
|
597
|
+
/* @__PURE__ */ React11.createElement("style", null, `
|
|
598
|
+
@keyframes spin {
|
|
599
|
+
0% { transform: rotate(0deg); }
|
|
600
|
+
100% { transform: rotate(360deg); }
|
|
601
|
+
}
|
|
602
|
+
`)
|
|
603
|
+
);
|
|
604
|
+
};
|
|
556
605
|
export {
|
|
557
606
|
AlertBanner,
|
|
558
607
|
Button,
|
|
@@ -563,5 +612,6 @@ export {
|
|
|
563
612
|
FormInput,
|
|
564
613
|
GridLayout,
|
|
565
614
|
ImageUploadPreview,
|
|
615
|
+
Loader,
|
|
566
616
|
Navbar
|
|
567
617
|
};
|