virtual-ui-lib 1.0.65 → 1.0.66

package/dist/index.js

@@ -31,6 +31,7 @@ var index_exports = {};
 __export(index_exports, {
   Avatar: () => Avatar,
   AvatarCard: () => AvatarCard,
+  BackgoundImageSlider: () => BackgoundImageSlider,
   Charts: () => Charts,
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
@@ -2265,10 +2266,274 @@ var ImageSlider = ({
     }
   ))));
 };
+
+// src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
+var import_react26 = __toESM(require("react"));
+var BackgoundImageSlider = ({
+  images = [
+    {
+      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1400&q=80",
+      tag: "Travel",
+      title: "Hidden Peaks of the Himalayas",
+      description: "A breathtaking journey through untouched landscapes and ancient monasteries."
+    },
+    {
+      src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1400&q=80",
+      tag: "Urban",
+      title: "City Lights at Night",
+      description: "Explore the vibrant energy of the world's most iconic skylines after dark."
+    },
+    {
+      src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=1400&q=80",
+      tag: "Nature",
+      title: "Tropical Beach Paradise",
+      description: "Crystal clear waters and white sand beaches that feel like the edge of the world."
+    },
+    {
+      src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1400&q=80",
+      tag: "Adventure",
+      title: "Starry Mountain Night",
+      description: "Where silence meets the cosmos \u2014 a night sky like you've never seen before."
+    }
+  ],
+  width = "100%",
+  height = "520px",
+  accent = "#6366f1",
+  radius = "0px",
+  showDots = true,
+  autoPlay = false,
+  autoPlayInterval = 4e3
+}) => {
+  const [current, setCurrent] = (0, import_react26.useState)(0);
+  const [animating, setAnimating] = (0, import_react26.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})`;
+  };
+  const go = (0, import_react26.useCallback)((index) => {
+    if (animating) return;
+    setAnimating(true);
+    setCurrent((index + images.length) % images.length);
+    setTimeout(() => setAnimating(false), 400);
+  }, [animating, images.length]);
+  const prev = () => go(current - 1);
+  const next = () => go(current + 1);
+  (0, import_react26.useEffect)(() => {
+    if (!autoPlay) return;
+    const t = setInterval(() => go(current + 1), autoPlayInterval);
+    return () => clearInterval(t);
+  }, [autoPlay, autoPlayInterval, current, go]);
+  const img = images[current];
+  return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement("style", null, `
+        @keyframes hs-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
+        @keyframes hs-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
+        .hs-prev:hover, .hs-next:hover { background: rgba(0,0,0,0.65) !important; border-color: rgba(255,255,255,0.35) !important; }
+      `), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+    position: "relative",
+    width,
+    height,
+    borderRadius: radius,
+    overflow: "hidden",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    userSelect: "none"
+  } }, /* @__PURE__ */ import_react26.default.createElement(
+    "img",
+    {
+      key: current,
+      src: img.src,
+      alt: img.title,
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        animation: "hs-fade 0.4s ease"
+      }
+    }
+  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+    position: "absolute",
+    inset: 0,
+    background: "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%)"
+  } }), img.tag && /* @__PURE__ */ import_react26.default.createElement(
+    "div",
+    {
+      key: current + "-tag",
+      style: {
+        position: "absolute",
+        top: "24px",
+        left: "28px",
+        padding: "5px 14px",
+        borderRadius: "20px",
+        background: alpha(accent, 0.85),
+        fontSize: "11px",
+        fontWeight: "700",
+        color: "#fff",
+        letterSpacing: "0.6px",
+        textTransform: "uppercase",
+        animation: "hs-up 0.4s ease"
+      }
+    },
+    img.tag
+  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+    position: "absolute",
+    top: "24px",
+    right: "28px",
+    padding: "5px 12px",
+    borderRadius: "20px",
+    background: "rgba(0,0,0,0.45)",
+    fontSize: "11px",
+    fontWeight: "600",
+    color: "rgba(255,255,255,0.7)"
+  } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react26.default.createElement(
+    "button",
+    {
+      className: "hs-prev",
+      onClick: prev,
+      style: {
+        position: "absolute",
+        left: "20px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        background: "rgba(0,0,0,0.4)",
+        border: "1px solid rgba(255,255,255,0.2)",
+        color: "#fff",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s",
+        padding: 0,
+        zIndex: 10
+      }
+    },
+    /* @__PURE__ */ import_react26.default.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ import_react26.default.createElement("polyline", { points: "15 18 9 12 15 6" })
+    )
+  ), /* @__PURE__ */ import_react26.default.createElement(
+    "button",
+    {
+      className: "hs-next",
+      onClick: next,
+      style: {
+        position: "absolute",
+        right: "20px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        background: "rgba(0,0,0,0.4)",
+        border: "1px solid rgba(255,255,255,0.2)",
+        color: "#fff",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s",
+        padding: 0,
+        zIndex: 10
+      }
+    },
+    /* @__PURE__ */ import_react26.default.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ import_react26.default.createElement("polyline", { points: "9 18 15 12 9 6" })
+    )
+  ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+    position: "absolute",
+    bottom: showDots ? "56px" : "28px",
+    left: "28px",
+    right: "28px",
+    zIndex: 5
+  } }, /* @__PURE__ */ import_react26.default.createElement(
+    "h2",
+    {
+      key: current + "-title",
+      style: {
+        fontSize: "clamp(20px, 4vw, 36px)",
+        fontWeight: "800",
+        color: "#fff",
+        margin: "0 0 8px",
+        lineHeight: 1.25,
+        textShadow: "0 2px 12px rgba(0,0,0,0.4)",
+        animation: "hs-up 0.45s ease",
+        maxWidth: "600px"
+      }
+    },
+    img.title
+  ), /* @__PURE__ */ import_react26.default.createElement(
+    "p",
+    {
+      key: current + "-desc",
+      style: {
+        fontSize: "clamp(13px, 2vw, 15px)",
+        color: "rgba(255,255,255,0.7)",
+        margin: 0,
+        lineHeight: 1.6,
+        textShadow: "0 1px 6px rgba(0,0,0,0.5)",
+        animation: "hs-up 0.5s ease",
+        maxWidth: "500px"
+      }
+    },
+    img.description
+  )), showDots && /* @__PURE__ */ import_react26.default.createElement("div", { style: {
+    position: "absolute",
+    bottom: "20px",
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    gap: "6px",
+    zIndex: 5
+  } }, images.map((_, i) => /* @__PURE__ */ import_react26.default.createElement(
+    "button",
+    {
+      key: i,
+      onClick: () => go(i),
+      style: {
+        width: i === current ? "24px" : "7px",
+        height: "7px",
+        borderRadius: "4px",
+        border: "none",
+        padding: 0,
+        cursor: "pointer",
+        background: i === current ? accent : "rgba(255,255,255,0.4)",
+        transition: "all 0.3s ease"
+      }
+    }
+  )))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
   AvatarCard,
+  BackgoundImageSlider,
   Charts,
   CodeBlock,
   CustomInputField,

package/dist/index.mjs

@@ -2206,9 +2206,273 @@ var ImageSlider = ({
     }
   ))));
 };
+
+// src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
+import React26, { useState as useState19, useEffect as useEffect7, useCallback } from "react";
+var BackgoundImageSlider = ({
+  images = [
+    {
+      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1400&q=80",
+      tag: "Travel",
+      title: "Hidden Peaks of the Himalayas",
+      description: "A breathtaking journey through untouched landscapes and ancient monasteries."
+    },
+    {
+      src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=1400&q=80",
+      tag: "Urban",
+      title: "City Lights at Night",
+      description: "Explore the vibrant energy of the world's most iconic skylines after dark."
+    },
+    {
+      src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=1400&q=80",
+      tag: "Nature",
+      title: "Tropical Beach Paradise",
+      description: "Crystal clear waters and white sand beaches that feel like the edge of the world."
+    },
+    {
+      src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1400&q=80",
+      tag: "Adventure",
+      title: "Starry Mountain Night",
+      description: "Where silence meets the cosmos \u2014 a night sky like you've never seen before."
+    }
+  ],
+  width = "100%",
+  height = "520px",
+  accent = "#6366f1",
+  radius = "0px",
+  showDots = true,
+  autoPlay = false,
+  autoPlayInterval = 4e3
+}) => {
+  const [current, setCurrent] = useState19(0);
+  const [animating, setAnimating] = useState19(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})`;
+  };
+  const go = useCallback((index) => {
+    if (animating) return;
+    setAnimating(true);
+    setCurrent((index + images.length) % images.length);
+    setTimeout(() => setAnimating(false), 400);
+  }, [animating, images.length]);
+  const prev = () => go(current - 1);
+  const next = () => go(current + 1);
+  useEffect7(() => {
+    if (!autoPlay) return;
+    const t = setInterval(() => go(current + 1), autoPlayInterval);
+    return () => clearInterval(t);
+  }, [autoPlay, autoPlayInterval, current, go]);
+  const img = images[current];
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement("style", null, `
+        @keyframes hs-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
+        @keyframes hs-up   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
+        .hs-prev:hover, .hs-next:hover { background: rgba(0,0,0,0.65) !important; border-color: rgba(255,255,255,0.35) !important; }
+      `), /* @__PURE__ */ React26.createElement("div", { style: {
+    position: "relative",
+    width,
+    height,
+    borderRadius: radius,
+    overflow: "hidden",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    userSelect: "none"
+  } }, /* @__PURE__ */ React26.createElement(
+    "img",
+    {
+      key: current,
+      src: img.src,
+      alt: img.title,
+      style: {
+        position: "absolute",
+        inset: 0,
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+        animation: "hs-fade 0.4s ease"
+      }
+    }
+  ), /* @__PURE__ */ React26.createElement("div", { style: {
+    position: "absolute",
+    inset: 0,
+    background: "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%)"
+  } }), img.tag && /* @__PURE__ */ React26.createElement(
+    "div",
+    {
+      key: current + "-tag",
+      style: {
+        position: "absolute",
+        top: "24px",
+        left: "28px",
+        padding: "5px 14px",
+        borderRadius: "20px",
+        background: alpha(accent, 0.85),
+        fontSize: "11px",
+        fontWeight: "700",
+        color: "#fff",
+        letterSpacing: "0.6px",
+        textTransform: "uppercase",
+        animation: "hs-up 0.4s ease"
+      }
+    },
+    img.tag
+  ), /* @__PURE__ */ React26.createElement("div", { style: {
+    position: "absolute",
+    top: "24px",
+    right: "28px",
+    padding: "5px 12px",
+    borderRadius: "20px",
+    background: "rgba(0,0,0,0.45)",
+    fontSize: "11px",
+    fontWeight: "600",
+    color: "rgba(255,255,255,0.7)"
+  } }, current + 1, " / ", images.length), /* @__PURE__ */ React26.createElement(
+    "button",
+    {
+      className: "hs-prev",
+      onClick: prev,
+      style: {
+        position: "absolute",
+        left: "20px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        background: "rgba(0,0,0,0.4)",
+        border: "1px solid rgba(255,255,255,0.2)",
+        color: "#fff",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s",
+        padding: 0,
+        zIndex: 10
+      }
+    },
+    /* @__PURE__ */ React26.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React26.createElement("polyline", { points: "15 18 9 12 15 6" })
+    )
+  ), /* @__PURE__ */ React26.createElement(
+    "button",
+    {
+      className: "hs-next",
+      onClick: next,
+      style: {
+        position: "absolute",
+        right: "20px",
+        top: "50%",
+        transform: "translateY(-50%)",
+        width: "44px",
+        height: "44px",
+        borderRadius: "50%",
+        background: "rgba(0,0,0,0.4)",
+        border: "1px solid rgba(255,255,255,0.2)",
+        color: "#fff",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s",
+        padding: 0,
+        zIndex: 10
+      }
+    },
+    /* @__PURE__ */ React26.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React26.createElement("polyline", { points: "9 18 15 12 9 6" })
+    )
+  ), /* @__PURE__ */ React26.createElement("div", { style: {
+    position: "absolute",
+    bottom: showDots ? "56px" : "28px",
+    left: "28px",
+    right: "28px",
+    zIndex: 5
+  } }, /* @__PURE__ */ React26.createElement(
+    "h2",
+    {
+      key: current + "-title",
+      style: {
+        fontSize: "clamp(20px, 4vw, 36px)",
+        fontWeight: "800",
+        color: "#fff",
+        margin: "0 0 8px",
+        lineHeight: 1.25,
+        textShadow: "0 2px 12px rgba(0,0,0,0.4)",
+        animation: "hs-up 0.45s ease",
+        maxWidth: "600px"
+      }
+    },
+    img.title
+  ), /* @__PURE__ */ React26.createElement(
+    "p",
+    {
+      key: current + "-desc",
+      style: {
+        fontSize: "clamp(13px, 2vw, 15px)",
+        color: "rgba(255,255,255,0.7)",
+        margin: 0,
+        lineHeight: 1.6,
+        textShadow: "0 1px 6px rgba(0,0,0,0.5)",
+        animation: "hs-up 0.5s ease",
+        maxWidth: "500px"
+      }
+    },
+    img.description
+  )), showDots && /* @__PURE__ */ React26.createElement("div", { style: {
+    position: "absolute",
+    bottom: "20px",
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    gap: "6px",
+    zIndex: 5
+  } }, images.map((_, i) => /* @__PURE__ */ React26.createElement(
+    "button",
+    {
+      key: i,
+      onClick: () => go(i),
+      style: {
+        width: i === current ? "24px" : "7px",
+        height: "7px",
+        borderRadius: "4px",
+        border: "none",
+        padding: 0,
+        cursor: "pointer",
+        background: i === current ? accent : "rgba(255,255,255,0.4)",
+        transition: "all 0.3s ease"
+      }
+    }
+  )))));
+};
 export {
   Avatar,
   AvatarCard,
+  BackgoundImageSlider,
   Charts,
   CodeBlock,
   CustomInputField,

package/package.json

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