virtual-ui-lib 1.0.50 → 1.0.52

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 +51 -0
  2. package/dist/index.mjs +49 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -32,6 +32,7 @@ __export(index_exports, {
32
32
  Avatar: () => Avatar,
33
33
  CodeBlock: () => CodeBlock,
34
34
  CustomInputField: () => CustomInputField,
35
+ DividerLine: () => DividerLine,
35
36
  FileUpload: () => FileUpload,
36
37
  Loader: () => Loader,
37
38
  LoadingSpinner: () => LoadingSpinner,
@@ -41,6 +42,7 @@ __export(index_exports, {
41
42
  SkeletonLoader: () => SkeletonLoader,
42
43
  SmartButton: () => SmartButton,
43
44
  StatCard: () => StatCard,
45
+ Tabs: () => Tabs,
44
46
  TextArea: () => TextArea,
45
47
  ToastNotification: () => ToastNotification
46
48
  });
@@ -648,11 +650,59 @@ var Avatar = ({
648
650
  objectFit: "cover"
649
651
  } }));
650
652
  };
653
+
654
+ // src/components/DividerLine/DividerLine.jsx
655
+ var import_react15 = __toESM(require("react"));
656
+ var DividerLine = ({
657
+ text = "Section",
658
+ textColor = "#f1f5f9",
659
+ lineColor = "#334155",
660
+ spacing = "20px",
661
+ thickness = "2px",
662
+ borderRadius = "4px"
663
+ }) => {
664
+ return /* @__PURE__ */ import_react15.default.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ import_react15.default.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
665
+ };
666
+
667
+ // src/components/Tabs/Tabs.jsx
668
+ var import_react16 = __toESM(require("react"));
669
+ var Tabs = ({
670
+ tabs = [
671
+ { label: "Tab 1", content: "Content for Tab 1" },
672
+ { label: "Tab 2", content: "Content for Tab 2" },
673
+ { label: "Tab 3", content: "Content for Tab 3" }
674
+ ],
675
+ bg = "#0f172a",
676
+ accent = "#2563eb",
677
+ textColor = "#f1f5f9",
678
+ radius = "8px"
679
+ }) => {
680
+ const [activeTab, setActiveTab] = (0, import_react16.useState)(0);
681
+ return /* @__PURE__ */ import_react16.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ import_react16.default.createElement(
682
+ "button",
683
+ {
684
+ key: index,
685
+ onClick: () => setActiveTab(index),
686
+ style: {
687
+ padding: "10px 20px",
688
+ background: activeTab === index ? accent : "transparent",
689
+ color: activeTab === index ? "white" : textColor,
690
+ border: "none",
691
+ borderRadius: radius,
692
+ cursor: "pointer",
693
+ fontWeight: activeTab === index ? "700" : "400",
694
+ transition: "background 0.3s, color 0.3s"
695
+ }
696
+ },
697
+ tab.label
698
+ ))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ import_react16.default.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
699
+ };
651
700
  // Annotate the CommonJS export names for ESM import in node:
652
701
  0 && (module.exports = {
653
702
  Avatar,
654
703
  CodeBlock,
655
704
  CustomInputField,
705
+ DividerLine,
656
706
  FileUpload,
657
707
  Loader,
658
708
  LoadingSpinner,
@@ -662,6 +712,7 @@ var Avatar = ({
662
712
  SkeletonLoader,
663
713
  SmartButton,
664
714
  StatCard,
715
+ Tabs,
665
716
  TextArea,
666
717
  ToastNotification
667
718
  });
package/dist/index.mjs CHANGED
@@ -600,10 +600,58 @@ var Avatar = ({
600
600
  objectFit: "cover"
601
601
  } }));
602
602
  };
603
+
604
+ // src/components/DividerLine/DividerLine.jsx
605
+ import React15 from "react";
606
+ var DividerLine = ({
607
+ text = "Section",
608
+ textColor = "#f1f5f9",
609
+ lineColor = "#334155",
610
+ spacing = "20px",
611
+ thickness = "2px",
612
+ borderRadius = "4px"
613
+ }) => {
614
+ return /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ React15.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
615
+ };
616
+
617
+ // src/components/Tabs/Tabs.jsx
618
+ import React16, { useState as useState10 } from "react";
619
+ var Tabs = ({
620
+ tabs = [
621
+ { label: "Tab 1", content: "Content for Tab 1" },
622
+ { label: "Tab 2", content: "Content for Tab 2" },
623
+ { label: "Tab 3", content: "Content for Tab 3" }
624
+ ],
625
+ bg = "#0f172a",
626
+ accent = "#2563eb",
627
+ textColor = "#f1f5f9",
628
+ radius = "8px"
629
+ }) => {
630
+ const [activeTab, setActiveTab] = useState10(0);
631
+ return /* @__PURE__ */ React16.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React16.createElement(
632
+ "button",
633
+ {
634
+ key: index,
635
+ onClick: () => setActiveTab(index),
636
+ style: {
637
+ padding: "10px 20px",
638
+ background: activeTab === index ? accent : "transparent",
639
+ color: activeTab === index ? "white" : textColor,
640
+ border: "none",
641
+ borderRadius: radius,
642
+ cursor: "pointer",
643
+ fontWeight: activeTab === index ? "700" : "400",
644
+ transition: "background 0.3s, color 0.3s"
645
+ }
646
+ },
647
+ tab.label
648
+ ))), /* @__PURE__ */ React16.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React16.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React16.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
649
+ };
603
650
  export {
604
651
  Avatar,
605
652
  CodeBlock,
606
653
  CustomInputField,
654
+ DividerLine,
607
655
  FileUpload,
608
656
  Loader,
609
657
  LoadingSpinner,
@@ -613,6 +661,7 @@ export {
613
661
  SkeletonLoader,
614
662
  SmartButton,
615
663
  StatCard,
664
+ Tabs,
616
665
  TextArea,
617
666
  ToastNotification
618
667
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.50",
3
+ "version": "1.0.52",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",