virtual-ui-lib 1.0.0

package/dist/index.js

@@ -0,0 +1,169 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card,
+  Input: () => Input
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.jsx
+var import_react = __toESM(require("react"));
+var Button = ({
+  text = "Button",
+  bg = "#2563eb",
+  color = "white",
+  size = "md",
+  width = "auto",
+  radius = "6px",
+  border = "none",
+  weight = "500",
+  shadow = "none",
+  disabled = false,
+  loading = false,
+  icon = null,
+  onClick
+}) => {
+  const sizes = {
+    sm: "6px 12px",
+    md: "8px 16px",
+    lg: "12px 20px"
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      style: {
+        background: bg,
+        color,
+        padding: sizes[size],
+        width,
+        border,
+        borderRadius: radius,
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontWeight: weight,
+        boxShadow: shadow,
+        opacity: disabled ? 0.6 : 1,
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        justifyContent: "center"
+      }
+    },
+    loading ? "Loading..." : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, icon, text)
+  );
+};
+
+// src/components/Card/Card.jsx
+var import_react2 = __toESM(require("react"));
+var Card = ({
+  title = "Card Title",
+  text = "Card description",
+  width = "250px",
+  bg = "white",
+  border = "1px solid #eee",
+  radius = "8px",
+  padding = "16px",
+  shadow = "0 2px 6px rgba(0,0,0,0.05)",
+  titleSize = "18px",
+  textSize = "14px",
+  align = "left",
+  children
+}) => {
+  return /* @__PURE__ */ import_react2.default.createElement(
+    "div",
+    {
+      style: {
+        width,
+        background: bg,
+        border,
+        borderRadius: radius,
+        padding,
+        boxShadow: shadow,
+        textAlign: align
+      }
+    },
+    /* @__PURE__ */ import_react2.default.createElement("h3", { style: { fontSize: titleSize, marginBottom: "8px" } }, title),
+    /* @__PURE__ */ import_react2.default.createElement("p", { style: { fontSize: textSize, marginBottom: "10px" } }, text),
+    children
+  );
+};
+
+// src/components/Input/Input.jsx
+var import_react3 = __toESM(require("react"));
+var Input = ({
+  placeholder = "Enter text",
+  type = "text",
+  width = "200px",
+  bg = "white",
+  color = "#111",
+  border = "1px solid #ccc",
+  radius = "6px",
+  shadow = "none",
+  size = "md",
+  disabled = false,
+  value,
+  onChange
+}) => {
+  const sizes = {
+    sm: "6px",
+    md: "8px",
+    lg: "12px"
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "input",
+    {
+      type,
+      placeholder,
+      value,
+      onChange,
+      disabled,
+      style: {
+        width,
+        padding: sizes[size],
+        background: bg,
+        color,
+        border,
+        borderRadius: radius,
+        boxShadow: shadow,
+        outline: "none",
+        opacity: disabled ? 0.6 : 1
+      }
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Card,
+  Input
+});

package/dist/index.mjs

@@ -0,0 +1,131 @@
+// src/components/Button/Button.jsx
+import React from "react";
+var Button = ({
+  text = "Button",
+  bg = "#2563eb",
+  color = "white",
+  size = "md",
+  width = "auto",
+  radius = "6px",
+  border = "none",
+  weight = "500",
+  shadow = "none",
+  disabled = false,
+  loading = false,
+  icon = null,
+  onClick
+}) => {
+  const sizes = {
+    sm: "6px 12px",
+    md: "8px 16px",
+    lg: "12px 20px"
+  };
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      style: {
+        background: bg,
+        color,
+        padding: sizes[size],
+        width,
+        border,
+        borderRadius: radius,
+        cursor: disabled ? "not-allowed" : "pointer",
+        fontWeight: weight,
+        boxShadow: shadow,
+        opacity: disabled ? 0.6 : 1,
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        justifyContent: "center"
+      }
+    },
+    loading ? "Loading..." : /* @__PURE__ */ React.createElement(React.Fragment, null, icon, text)
+  );
+};
+
+// src/components/Card/Card.jsx
+import React2 from "react";
+var Card = ({
+  title = "Card Title",
+  text = "Card description",
+  width = "250px",
+  bg = "white",
+  border = "1px solid #eee",
+  radius = "8px",
+  padding = "16px",
+  shadow = "0 2px 6px rgba(0,0,0,0.05)",
+  titleSize = "18px",
+  textSize = "14px",
+  align = "left",
+  children
+}) => {
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: {
+        width,
+        background: bg,
+        border,
+        borderRadius: radius,
+        padding,
+        boxShadow: shadow,
+        textAlign: align
+      }
+    },
+    /* @__PURE__ */ React2.createElement("h3", { style: { fontSize: titleSize, marginBottom: "8px" } }, title),
+    /* @__PURE__ */ React2.createElement("p", { style: { fontSize: textSize, marginBottom: "10px" } }, text),
+    children
+  );
+};
+
+// src/components/Input/Input.jsx
+import React3 from "react";
+var Input = ({
+  placeholder = "Enter text",
+  type = "text",
+  width = "200px",
+  bg = "white",
+  color = "#111",
+  border = "1px solid #ccc",
+  radius = "6px",
+  shadow = "none",
+  size = "md",
+  disabled = false,
+  value,
+  onChange
+}) => {
+  const sizes = {
+    sm: "6px",
+    md: "8px",
+    lg: "12px"
+  };
+  return /* @__PURE__ */ React3.createElement(
+    "input",
+    {
+      type,
+      placeholder,
+      value,
+      onChange,
+      disabled,
+      style: {
+        width,
+        padding: sizes[size],
+        background: bg,
+        color,
+        border,
+        borderRadius: radius,
+        boxShadow: shadow,
+        outline: "none",
+        opacity: disabled ? 0.6 : 1
+      }
+    }
+  );
+};
+export {
+  Button,
+  Card,
+  Input
+};

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "virtual-ui-lib",
+  "version": "1.0.0",
+  "description": "Virtual UI React Component Library",
+  "author": "Ankush",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}