virtual-ui-component-own 1.0.0 → 1.0.1

package/README.md

@@ -1,8 +1,3 @@
-# 🌐 Live Demo
-
-👉 https://virtual-ui-client.onrender.com
-
----
 
 # Virtual UI
 
@@ -13,7 +8,7 @@ A modern and customizable **React UI Component Library** designed for fast devel
 ## 📦 Install
 
 ```bash
-npm install virtual-ui-lib
+npm i virtual-ui-component-own
 ```
 
 ---

package/dist/index.js

@@ -3863,83 +3863,78 @@ var Card = ({
 // src/components/Button/Button.jsx
 var import_react24 = __toESM(require("react"));
 var Button = ({
-  text = "Click Me",
-  variant = "gradient",
-  // primary | outline | ghost | gradient
+  text = "Click me",
+  bg = "#6366f1",
+  color = "#ffffff",
   size = "md",
-  // sm | md | lg
-  icon,
-  loading = false,
+  rounded = "10px",
   disabled = false,
-  onClick
+  loading = false,
+  onClick = () => {
+  },
+  shadow = true
 }) => {
-  const [hovered, setHovered] = (0, import_react24.useState)(false);
-  const variants = {
-    primary: {
-      background: "#2563eb",
-      color: "#fff",
-      border: "none"
-    },
-    outline: {
-      background: "transparent",
-      color: "#2563eb",
-      border: "1px solid #2563eb"
-    },
-    ghost: {
-      background: "transparent",
-      color: "#111",
-      border: "none"
-    },
-    gradient: {
-      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
-      color: "#fff",
-      border: "none"
-    }
-  };
   const sizes = {
-    sm: { padding: "6px 12px", fontSize: "12px" },
-    md: { padding: "10px 18px", fontSize: "14px" },
-    lg: { padding: "14px 24px", fontSize: "16px" }
+    sm: { padding: "8px 16px", fontSize: "13px" },
+    md: { padding: "12px 24px", fontSize: "15px" },
+    lg: { padding: "16px 32px", fontSize: "17px" }
+  };
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
   return /* @__PURE__ */ import_react24.default.createElement(
     "button",
     {
       onClick,
       disabled: disabled || loading,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
       style: {
-        ...variants[variant],
-        ...sizes[size],
-        borderRadius: "10px",
+        background: bg,
+        color,
+        padding: sizes[size].padding,
+        borderRadius: rounded,
+        border: "none",
         cursor: disabled ? "not-allowed" : "pointer",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        fontWeight: 600,
-        fontFamily: "sans-serif",
-        // 🔥 Animation
-        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
-        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
+        fontWeight: "600",
+        fontSize: sizes[size].fontSize,
+        fontFamily: "system-ui, sans-serif",
+        boxShadow: shadow ? "0 4px 14px " + alpha(bg, 0.4) : "none",
+        opacity: disabled ? 0.7 : 1,
         transition: "all 0.2s ease",
-        opacity: disabled ? 0.6 : 1,
         position: "relative",
-        overflow: "hidden"
-      }
-    },
-    /* @__PURE__ */ import_react24.default.createElement(
-      "span",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "rgba(255,255,255,0.2)",
-          opacity: hovered ? 1 : 0,
-          transition: "opacity 0.3s"
+        overflow: "hidden",
+        transform: "translateY(0)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px"
+      },
+      onMouseDown: (e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.transform = "translateY(2px)";
+        }
+      },
+      onMouseUp: (e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.transform = "translateY(0)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.transform = "translateY(0)";
         }
       }
-    ),
-    loading ? /* @__PURE__ */ import_react24.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, icon && /* @__PURE__ */ import_react24.default.createElement("span", null, icon), /* @__PURE__ */ import_react24.default.createElement("span", null, text))
+    },
+    loading ? /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, /* @__PURE__ */ import_react24.default.createElement("span", { style: {
+      width: "14px",
+      height: "14px",
+      border: "2px solid rgba(255,255,255,0.3)",
+      borderTopColor: "#fff",
+      borderRadius: "50%",
+      animation: "spin 1s linear infinite",
+      display: "inline-block"
+    } }), /* @__PURE__ */ import_react24.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)) : null,
+    loading ? "Processing..." : text
   );
 };
 

package/dist/index.mjs

@@ -3802,90 +3802,85 @@ var Card = ({
 };
 
 // src/components/Button/Button.jsx
-import React24, { useState as useState21 } from "react";
+import React24 from "react";
 var Button = ({
-  text = "Click Me",
-  variant = "gradient",
-  // primary | outline | ghost | gradient
+  text = "Click me",
+  bg = "#6366f1",
+  color = "#ffffff",
   size = "md",
-  // sm | md | lg
-  icon,
-  loading = false,
+  rounded = "10px",
   disabled = false,
-  onClick
+  loading = false,
+  onClick = () => {
+  },
+  shadow = true
 }) => {
-  const [hovered, setHovered] = useState21(false);
-  const variants = {
-    primary: {
-      background: "#2563eb",
-      color: "#fff",
-      border: "none"
-    },
-    outline: {
-      background: "transparent",
-      color: "#2563eb",
-      border: "1px solid #2563eb"
-    },
-    ghost: {
-      background: "transparent",
-      color: "#111",
-      border: "none"
-    },
-    gradient: {
-      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
-      color: "#fff",
-      border: "none"
-    }
-  };
   const sizes = {
-    sm: { padding: "6px 12px", fontSize: "12px" },
-    md: { padding: "10px 18px", fontSize: "14px" },
-    lg: { padding: "14px 24px", fontSize: "16px" }
+    sm: { padding: "8px 16px", fontSize: "13px" },
+    md: { padding: "12px 24px", fontSize: "15px" },
+    lg: { padding: "16px 32px", fontSize: "17px" }
+  };
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
   };
   return /* @__PURE__ */ React24.createElement(
     "button",
     {
       onClick,
       disabled: disabled || loading,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
       style: {
-        ...variants[variant],
-        ...sizes[size],
-        borderRadius: "10px",
+        background: bg,
+        color,
+        padding: sizes[size].padding,
+        borderRadius: rounded,
+        border: "none",
         cursor: disabled ? "not-allowed" : "pointer",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        fontWeight: 600,
-        fontFamily: "sans-serif",
-        // 🔥 Animation
-        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
-        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
+        fontWeight: "600",
+        fontSize: sizes[size].fontSize,
+        fontFamily: "system-ui, sans-serif",
+        boxShadow: shadow ? "0 4px 14px " + alpha(bg, 0.4) : "none",
+        opacity: disabled ? 0.7 : 1,
         transition: "all 0.2s ease",
-        opacity: disabled ? 0.6 : 1,
         position: "relative",
-        overflow: "hidden"
-      }
-    },
-    /* @__PURE__ */ React24.createElement(
-      "span",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "rgba(255,255,255,0.2)",
-          opacity: hovered ? 1 : 0,
-          transition: "opacity 0.3s"
+        overflow: "hidden",
+        transform: "translateY(0)",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "8px"
+      },
+      onMouseDown: (e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.transform = "translateY(2px)";
+        }
+      },
+      onMouseUp: (e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.transform = "translateY(0)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (!disabled && !loading) {
+          e.currentTarget.style.transform = "translateY(0)";
         }
       }
-    ),
-    loading ? /* @__PURE__ */ React24.createElement("span", null, "Loading...") : /* @__PURE__ */ React24.createElement(React24.Fragment, null, icon && /* @__PURE__ */ React24.createElement("span", null, icon), /* @__PURE__ */ React24.createElement("span", null, text))
+    },
+    loading ? /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement("span", { style: {
+      width: "14px",
+      height: "14px",
+      border: "2px solid rgba(255,255,255,0.3)",
+      borderTopColor: "#fff",
+      borderRadius: "50%",
+      animation: "spin 1s linear infinite",
+      display: "inline-block"
+    } }), /* @__PURE__ */ React24.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)) : null,
+    loading ? "Processing..." : text
   );
 };
 
 // src/components/AnimatedButton/AnimatedButton.jsx
-import React25, { useState as useState22 } from "react";
+import React25, { useState as useState21 } from "react";
 var AnimatedButton = ({
   text = "Click Me!",
   bg = "#7c3aed",
@@ -3899,7 +3894,7 @@ var AnimatedButton = ({
   onClick
 }) => {
   const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
-  const [hovered, setHovered] = useState22(false);
+  const [hovered, setHovered] = useState21(false);
   return /* @__PURE__ */ React25.createElement(
     "button",
     {

package/package.json

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