virtual-ui-lib 1.0.74 → 1.0.76

package/dist/index.js

@@ -29,10 +29,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
+  AnimatedForm: () => AnimatedForm,
   AvatarCard: () => AvatarCard,
   BackgoundImageSlider: () => BackgoundImageSlider,
   Charts: () => Charts,
   ColorPicker: () => ColorPicker,
+  EcommerceCard: () => EcommerceCard,
   FileUpload: () => FileUpload,
   Footer: () => Footer,
   ImageCard: () => ImageCard,
@@ -3575,12 +3577,197 @@ var ProgressBar = ({
   }
   return null;
 };
+
+// src/components/EcommerceCard/EcommerceCard.jsx
+var import_react20 = __toESM(require("react"));
+var EcommerceCard = ({
+  image = "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&q=80",
+  title = "Wireless Headphones",
+  description = "Premium noise-cancelling headphones with 40 hours battery life.",
+  price = 199,
+  currency = "$",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onAddToCart = () => {
+  },
+  onViewDetails = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react20.useState)(false);
+  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_react20.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: "300px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden" } }, /* @__PURE__ */ import_react20.default.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ import_react20.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })),
+    /* @__PURE__ */ import_react20.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react20.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "18px" } }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { fontSize: "24px", fontWeight: "800", color: "#fff" } }, currency, price), /* @__PURE__ */ import_react20.default.createElement(
+      "button",
+      {
+        onClick: onAddToCart,
+        style: { padding: "8px 16px", borderRadius: "12px", border: "none", background: accent, color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "Add to Cart"
+    )), /* @__PURE__ */ import_react20.default.createElement(
+      "button",
+      {
+        onClick: onViewDetails,
+        style: { width: "100%", padding: "11px", borderRadius: "12px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "View Details"
+    ))
+  );
+};
+
+// src/components/AnimatedForm/AnimatedForm.jsx
+var import_react21 = __toESM(require("react"));
+var AnimatedForm = ({
+  title = "Contact Us",
+  description = "We'll get back to you shortly",
+  submitText = "Send Message",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onSubmit = () => {
+  }
+}) => {
+  const [name, setName] = (0, import_react21.useState)("");
+  const [email, setEmail] = (0, import_react21.useState)("");
+  const [message, setMessage] = (0, import_react21.useState)("");
+  const [hovered, setHovered] = (0, import_react21.useState)(false);
+  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_react21.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        padding: "28px",
+        width: "400px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ import_react21.default.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
+    /* @__PURE__ */ import_react21.default.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
+    /* @__PURE__ */ import_react21.default.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "Your Name",
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "16px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react21.default.createElement(
+      "input",
+      {
+        type: "email",
+        placeholder: "Your Email",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "16px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react21.default.createElement(
+      "textarea",
+      {
+        placeholder: "Your Message",
+        value: message,
+        onChange: (e) => setMessage(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "24px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit",
+          minHeight: "120px",
+          resize: "vertical"
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react21.default.createElement(
+      "button",
+      {
+        onClick: () => onSubmit({ name, email, message }),
+        style: {
+          width: "100%",
+          padding: "13px",
+          borderRadius: "12px",
+          border: "none",
+          background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+          color: "#fff",
+          fontSize: "14px",
+          fontWeight: "700",
+          cursor: "pointer",
+          fontFamily: "inherit"
+        }
+      },
+      submitText
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedForm,
   AvatarCard,
   BackgoundImageSlider,
   Charts,
   ColorPicker,
+  EcommerceCard,
   FileUpload,
   Footer,
   ImageCard,

package/dist/index.mjs

@@ -3522,11 +3522,196 @@ var ProgressBar = ({
   }
   return null;
 };
+
+// src/components/EcommerceCard/EcommerceCard.jsx
+import React20, { useState as useState18 } from "react";
+var EcommerceCard = ({
+  image = "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&q=80",
+  title = "Wireless Headphones",
+  description = "Premium noise-cancelling headphones with 40 hours battery life.",
+  price = 199,
+  currency = "$",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onAddToCart = () => {
+  },
+  onViewDetails = () => {
+  }
+}) => {
+  const [hovered, setHovered] = useState18(false);
+  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__ */ React20.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: "300px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden" } }, /* @__PURE__ */ React20.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ React20.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })),
+    /* @__PURE__ */ React20.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React20.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React20.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "18px" } }, /* @__PURE__ */ React20.createElement("span", { style: { fontSize: "24px", fontWeight: "800", color: "#fff" } }, currency, price), /* @__PURE__ */ React20.createElement(
+      "button",
+      {
+        onClick: onAddToCart,
+        style: { padding: "8px 16px", borderRadius: "12px", border: "none", background: accent, color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "Add to Cart"
+    )), /* @__PURE__ */ React20.createElement(
+      "button",
+      {
+        onClick: onViewDetails,
+        style: { width: "100%", padding: "11px", borderRadius: "12px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "View Details"
+    ))
+  );
+};
+
+// src/components/AnimatedForm/AnimatedForm.jsx
+import React21, { useState as useState19 } from "react";
+var AnimatedForm = ({
+  title = "Contact Us",
+  description = "We'll get back to you shortly",
+  submitText = "Send Message",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onSubmit = () => {
+  }
+}) => {
+  const [name, setName] = useState19("");
+  const [email, setEmail] = useState19("");
+  const [message, setMessage] = useState19("");
+  const [hovered, setHovered] = useState19(false);
+  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__ */ React21.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        padding: "28px",
+        width: "400px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ React21.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
+    /* @__PURE__ */ React21.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
+    /* @__PURE__ */ React21.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "Your Name",
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "16px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ React21.createElement(
+      "input",
+      {
+        type: "email",
+        placeholder: "Your Email",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "16px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ React21.createElement(
+      "textarea",
+      {
+        placeholder: "Your Message",
+        value: message,
+        onChange: (e) => setMessage(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "24px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit",
+          minHeight: "120px",
+          resize: "vertical"
+        }
+      }
+    ),
+    /* @__PURE__ */ React21.createElement(
+      "button",
+      {
+        onClick: () => onSubmit({ name, email, message }),
+        style: {
+          width: "100%",
+          padding: "13px",
+          borderRadius: "12px",
+          border: "none",
+          background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+          color: "#fff",
+          fontSize: "14px",
+          fontWeight: "700",
+          cursor: "pointer",
+          fontFamily: "inherit"
+        }
+      },
+      submitText
+    )
+  );
+};
 export {
+  AnimatedForm,
   AvatarCard,
   BackgoundImageSlider,
   Charts,
   ColorPicker,
+  EcommerceCard,
   FileUpload,
   Footer,
   ImageCard,

package/package.json

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