virtual-ui-lib 1.0.63 → 1.0.64

package/dist/index.js

@@ -37,6 +37,7 @@ __export(index_exports, {
   DividerLine: () => DividerLine,
   FileUpload: () => FileUpload,
   Footer: () => Footer,
+  ImageCard: () => ImageCard,
   Loader: () => Loader,
   LoadingSpinner: () => LoadingSpinner,
   Navbar: () => Navbar,
@@ -1945,6 +1946,110 @@ var Charts = ({
     textTransform: "capitalize"
   } }, type)), renderChart());
 };
+
+// src/components/ImageCard/ImageCard.jsx
+var import_react24 = __toESM(require("react"));
+var ImageCard = ({
+  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
+  tag = "Travel",
+  title = "Discover the Hidden Peaks of the Himalayas",
+  description = "A breathtaking journey through untouched landscapes, ancient monasteries, and snow-capped summits that few have ever seen.",
+  buttonText = "Read More",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  onButtonClick = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react24.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  return /* @__PURE__ */ import_react24.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: radius,
+        overflow: "hidden",
+        width: "300px",
+        border: `1px solid ${hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"}`,
+        fontFamily: "system-ui, sans-serif",
+        transition: "border-color 0.25s, transform 0.25s",
+        transform: hovered ? "translateY(-4px)" : "none",
+        boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ import_react24.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react24.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_react24.default.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
+    } }), tag && /* @__PURE__ */ import_react24.default.createElement("div", { style: {
+      position: "absolute",
+      top: "12px",
+      left: "12px",
+      padding: "4px 10px",
+      borderRadius: "20px",
+      background: alpha(accent, 0.85),
+      fontSize: "10px",
+      fontWeight: "700",
+      color: "#fff",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase"
+    } }, tag)),
+    /* @__PURE__ */ import_react24.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react24.default.createElement("h3", { style: {
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px",
+      lineHeight: 1.4
+    } }, title), /* @__PURE__ */ import_react24.default.createElement("p", { style: {
+      fontSize: "13px",
+      color: "rgba(255,255,255,0.45)",
+      lineHeight: 1.65,
+      margin: "0 0 18px"
+    } }, description), /* @__PURE__ */ import_react24.default.createElement(
+      "button",
+      {
+        onClick: onButtonClick,
+        style: {
+          width: "100%",
+          padding: "11px",
+          borderRadius: "12px",
+          border: "none",
+          background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
+          color: "#fff",
+          fontSize: "13px",
+          fontWeight: "700",
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "opacity 0.2s"
+        },
+        onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
+        onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
+      },
+      buttonText
+    ))
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -1955,6 +2060,7 @@ var Charts = ({
   DividerLine,
   FileUpload,
   Footer,
+  ImageCard,
   Loader,
   LoadingSpinner,
   Navbar,

package/dist/index.mjs

@@ -1888,6 +1888,110 @@ var Charts = ({
     textTransform: "capitalize"
   } }, type)), renderChart());
 };
+
+// src/components/ImageCard/ImageCard.jsx
+import React24, { useState as useState17 } from "react";
+var ImageCard = ({
+  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
+  tag = "Travel",
+  title = "Discover the Hidden Peaks of the Himalayas",
+  description = "A breathtaking journey through untouched landscapes, ancient monasteries, and snow-capped summits that few have ever seen.",
+  buttonText = "Read More",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  onButtonClick = () => {
+  }
+}) => {
+  const [hovered, setHovered] = useState17(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  return /* @__PURE__ */ React24.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: radius,
+        overflow: "hidden",
+        width: "300px",
+        border: `1px solid ${hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"}`,
+        fontFamily: "system-ui, sans-serif",
+        transition: "border-color 0.25s, transform 0.25s",
+        transform: hovered ? "translateY(-4px)" : "none",
+        boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ React24.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React24.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__ */ React24.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
+    } }), tag && /* @__PURE__ */ React24.createElement("div", { style: {
+      position: "absolute",
+      top: "12px",
+      left: "12px",
+      padding: "4px 10px",
+      borderRadius: "20px",
+      background: alpha(accent, 0.85),
+      fontSize: "10px",
+      fontWeight: "700",
+      color: "#fff",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase"
+    } }, tag)),
+    /* @__PURE__ */ React24.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React24.createElement("h3", { style: {
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px",
+      lineHeight: 1.4
+    } }, title), /* @__PURE__ */ React24.createElement("p", { style: {
+      fontSize: "13px",
+      color: "rgba(255,255,255,0.45)",
+      lineHeight: 1.65,
+      margin: "0 0 18px"
+    } }, description), /* @__PURE__ */ React24.createElement(
+      "button",
+      {
+        onClick: onButtonClick,
+        style: {
+          width: "100%",
+          padding: "11px",
+          borderRadius: "12px",
+          border: "none",
+          background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
+          color: "#fff",
+          fontSize: "13px",
+          fontWeight: "700",
+          cursor: "pointer",
+          fontFamily: "inherit",
+          transition: "opacity 0.2s"
+        },
+        onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
+        onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
+      },
+      buttonText
+    ))
+  );
+};
 export {
   Avatar,
   AvatarCard,
@@ -1897,6 +2001,7 @@ export {
   DividerLine,
   FileUpload,
   Footer,
+  ImageCard,
   Loader,
   LoadingSpinner,
   Navbar,

package/package.json

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