virtual-ui-lib 1.0.1 → 1.0.2

package/dist/index.js

@@ -29,9 +29,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  Alert: () => Alert,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
-  Input: () => Input
+  Input: () => Input,
+  Modal: () => Modal,
+  Spinner: () => Spinner
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -161,9 +166,159 @@ var Input = ({
     }
   );
 };
+
+// src/components/Badge/Badge.jsx
+var import_react4 = __toESM(require("react"));
+var Badge = ({
+  text = "Badge",
+  bg = "#111",
+  color = "white",
+  radius = "12px",
+  padding = "4px 10px",
+  size = "12px"
+}) => {
+  return /* @__PURE__ */ import_react4.default.createElement(
+    "span",
+    {
+      style: {
+        background: bg,
+        color,
+        padding,
+        borderRadius: radius,
+        fontSize: size,
+        display: "inline-block"
+      }
+    },
+    text
+  );
+};
+
+// src/components/Alert/Alert.jsx
+var import_react5 = __toESM(require("react"));
+var Alert = ({
+  text = "Alert message",
+  bg = "#facc15",
+  color = "#111",
+  radius = "6px",
+  padding = "10px",
+  width = "auto"
+}) => {
+  return /* @__PURE__ */ import_react5.default.createElement(
+    "div",
+    {
+      style: {
+        background: bg,
+        color,
+        padding,
+        borderRadius: radius,
+        width
+      }
+    },
+    text
+  );
+};
+
+// src/components/Avatar/Avatar.jsx
+var import_react6 = __toESM(require("react"));
+var Avatar = ({
+  src = "\u{1F464}",
+  size = "40px",
+  radius = "50%"
+}) => {
+  return /* @__PURE__ */ import_react6.default.createElement(
+    "img",
+    {
+      src,
+      alt: "avatar",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: radius,
+        objectFit: "cover"
+      }
+    }
+  );
+};
+
+// src/components/Spinner/Spinner.jsx
+var import_react7 = __toESM(require("react"));
+var Spinner = ({
+  size = "30px",
+  color = "#2563eb",
+  border = "3px"
+}) => {
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("style", null, `
+        @keyframes vui-spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        `), /* @__PURE__ */ import_react7.default.createElement(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        border: `${border} solid #eee`,
+        borderTop: `${border} solid ${color}`,
+        borderRadius: "50%",
+        animation: "vui-spin 1s linear infinite"
+      }
+    }
+  ));
+};
+
+// src/components/Modal/Modal.jsx
+var import_react8 = __toESM(require("react"));
+var Modal = ({
+  open = false,
+  title = "Modal Title",
+  children,
+  width = "300px",
+  bg = "white",
+  radius = "8px",
+  onClose
+}) => {
+  if (!open) return null;
+  return /* @__PURE__ */ import_react8.default.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(0,0,0,0.3)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ import_react8.default.createElement(
+      "div",
+      {
+        style: {
+          width,
+          background: bg,
+          borderRadius: radius,
+          padding: "20px"
+        }
+      },
+      /* @__PURE__ */ import_react8.default.createElement("h3", null, title),
+      children,
+      /* @__PURE__ */ import_react8.default.createElement("button", { onClick: onClose }, "Close")
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
+  Avatar,
+  Badge,
   Button,
   Card,
-  Input
+  Input,
+  Modal,
+  Spinner
 });

package/dist/index.mjs

@@ -124,8 +124,158 @@ var Input = ({
     }
   );
 };
+
+// src/components/Badge/Badge.jsx
+import React4 from "react";
+var Badge = ({
+  text = "Badge",
+  bg = "#111",
+  color = "white",
+  radius = "12px",
+  padding = "4px 10px",
+  size = "12px"
+}) => {
+  return /* @__PURE__ */ React4.createElement(
+    "span",
+    {
+      style: {
+        background: bg,
+        color,
+        padding,
+        borderRadius: radius,
+        fontSize: size,
+        display: "inline-block"
+      }
+    },
+    text
+  );
+};
+
+// src/components/Alert/Alert.jsx
+import React5 from "react";
+var Alert = ({
+  text = "Alert message",
+  bg = "#facc15",
+  color = "#111",
+  radius = "6px",
+  padding = "10px",
+  width = "auto"
+}) => {
+  return /* @__PURE__ */ React5.createElement(
+    "div",
+    {
+      style: {
+        background: bg,
+        color,
+        padding,
+        borderRadius: radius,
+        width
+      }
+    },
+    text
+  );
+};
+
+// src/components/Avatar/Avatar.jsx
+import React6 from "react";
+var Avatar = ({
+  src = "\u{1F464}",
+  size = "40px",
+  radius = "50%"
+}) => {
+  return /* @__PURE__ */ React6.createElement(
+    "img",
+    {
+      src,
+      alt: "avatar",
+      style: {
+        width: size,
+        height: size,
+        borderRadius: radius,
+        objectFit: "cover"
+      }
+    }
+  );
+};
+
+// src/components/Spinner/Spinner.jsx
+import React7 from "react";
+var Spinner = ({
+  size = "30px",
+  color = "#2563eb",
+  border = "3px"
+}) => {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("style", null, `
+        @keyframes vui-spin {
+          to {
+            transform: rotate(360deg);
+          }
+        }
+        `), /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        border: `${border} solid #eee`,
+        borderTop: `${border} solid ${color}`,
+        borderRadius: "50%",
+        animation: "vui-spin 1s linear infinite"
+      }
+    }
+  ));
+};
+
+// src/components/Modal/Modal.jsx
+import React8 from "react";
+var Modal = ({
+  open = false,
+  title = "Modal Title",
+  children,
+  width = "300px",
+  bg = "white",
+  radius = "8px",
+  onClose
+}) => {
+  if (!open) return null;
+  return /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        background: "rgba(0,0,0,0.3)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        style: {
+          width,
+          background: bg,
+          borderRadius: radius,
+          padding: "20px"
+        }
+      },
+      /* @__PURE__ */ React8.createElement("h3", null, title),
+      children,
+      /* @__PURE__ */ React8.createElement("button", { onClick: onClose }, "Close")
+    )
+  );
+};
 export {
+  Alert,
+  Avatar,
+  Badge,
   Button,
   Card,
-  Input
+  Input,
+  Modal,
+  Spinner
 };

package/package.json

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