virtual-ui-lib 1.0.51 → 1.0.52

package/dist/index.js

@@ -42,6 +42,7 @@ __export(index_exports, {
   SkeletonLoader: () => SkeletonLoader,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
+  Tabs: () => Tabs,
   TextArea: () => TextArea,
   ToastNotification: () => ToastNotification
 });
@@ -662,6 +663,40 @@ var DividerLine = ({
 }) => {
   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 } }));
 };
+
+// src/components/Tabs/Tabs.jsx
+var import_react16 = __toESM(require("react"));
+var Tabs = ({
+  tabs = [
+    { label: "Tab 1", content: "Content for Tab 1" },
+    { label: "Tab 2", content: "Content for Tab 2" },
+    { label: "Tab 3", content: "Content for Tab 3" }
+  ],
+  bg = "#0f172a",
+  accent = "#2563eb",
+  textColor = "#f1f5f9",
+  radius = "8px"
+}) => {
+  const [activeTab, setActiveTab] = (0, import_react16.useState)(0);
+  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(
+    "button",
+    {
+      key: index,
+      onClick: () => setActiveTab(index),
+      style: {
+        padding: "10px 20px",
+        background: activeTab === index ? accent : "transparent",
+        color: activeTab === index ? "white" : textColor,
+        border: "none",
+        borderRadius: radius,
+        cursor: "pointer",
+        fontWeight: activeTab === index ? "700" : "400",
+        transition: "background 0.3s, color 0.3s"
+      }
+    },
+    tab.label
+  ))), /* @__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)));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -677,6 +712,7 @@ var DividerLine = ({
   SkeletonLoader,
   SmartButton,
   StatCard,
+  Tabs,
   TextArea,
   ToastNotification
 });

package/dist/index.mjs

@@ -613,6 +613,40 @@ var DividerLine = ({
 }) => {
   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 } }));
 };
+
+// src/components/Tabs/Tabs.jsx
+import React16, { useState as useState10 } from "react";
+var Tabs = ({
+  tabs = [
+    { label: "Tab 1", content: "Content for Tab 1" },
+    { label: "Tab 2", content: "Content for Tab 2" },
+    { label: "Tab 3", content: "Content for Tab 3" }
+  ],
+  bg = "#0f172a",
+  accent = "#2563eb",
+  textColor = "#f1f5f9",
+  radius = "8px"
+}) => {
+  const [activeTab, setActiveTab] = useState10(0);
+  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(
+    "button",
+    {
+      key: index,
+      onClick: () => setActiveTab(index),
+      style: {
+        padding: "10px 20px",
+        background: activeTab === index ? accent : "transparent",
+        color: activeTab === index ? "white" : textColor,
+        border: "none",
+        borderRadius: radius,
+        cursor: "pointer",
+        fontWeight: activeTab === index ? "700" : "400",
+        transition: "background 0.3s, color 0.3s"
+      }
+    },
+    tab.label
+  ))), /* @__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)));
+};
 export {
   Avatar,
   CodeBlock,
@@ -627,6 +661,7 @@ export {
   SkeletonLoader,
   SmartButton,
   StatCard,
+  Tabs,
   TextArea,
   ToastNotification
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib",
-  "version": "1.0.51",
+  "version": "1.0.52",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",