virtual-ui-lib 1.0.65 → 1.0.67

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,
@@ -44,6 +45,7 @@ __export(index_exports, {
   Navbar: () => Navbar,
   NotificationToast: () => NotificationToast,
   OtpInput: () => OtpInput,
+  PageLoader: () => PageLoader,
   PricingCard: () => PricingCard,
   ResponsiveNavbar: () => ResponsiveNavbar,
   SearchBar: () => SearchBar,
@@ -2265,10 +2267,443 @@ 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"
+      }
+    }
+  )))));
+};
+
+// src/components/PageLoader/PageLoader.jsx
+var import_react27 = __toESM(require("react"));
+var PageLoader = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "",
+  type = "spinner",
+  loadingText = "Loading...",
+  subText = "",
+  duration = 6e3,
+  onComplete = () => {
+  }
+}) => {
+  const [progress, setProgress] = (0, import_react27.useState)(0);
+  const [done, setDone] = (0, import_react27.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})`;
+  };
+  (0, import_react27.useEffect)(() => {
+    const steps = 100;
+    const interval = duration / steps;
+    let current = 0;
+    const timer = setInterval(() => {
+      current += 1;
+      setProgress(current);
+      if (current >= 100) {
+        clearInterval(timer);
+        setTimeout(() => {
+          setDone(true);
+          onComplete();
+        }, 300);
+      }
+    }, interval);
+    return () => clearInterval(timer);
+  }, [duration]);
+  if (done) return null;
+  return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement("style", null, `
+        @keyframes pl-spin  { to { transform: rotate(360deg); } }
+        @keyframes pl-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
+        @keyframes pl-dot   { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }
+        @keyframes pl-fade  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
+        @keyframes pl-bar   { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
+      `), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    width: "100%",
+    height: "100%",
+    background: bg,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "28px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    animation: "pl-fade 0.3s ease"
+  } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    position: "absolute",
+    top: "-100px",
+    left: "-100px",
+    width: "400px",
+    height: "400px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, ${alpha(accent, 0.12)}, transparent 70%)`,
+    filter: "blur(60px)",
+    pointerEvents: "none"
+  } }), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    position: "absolute",
+    bottom: "-100px",
+    right: "-100px",
+    width: "350px",
+    height: "350px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, ${alpha(accent, 0.08)}, transparent 70%)`,
+    filter: "blur(60px)",
+    pointerEvents: "none"
+  } }), /* @__PURE__ */ import_react27.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    width: "36px",
+    height: "36px",
+    borderRadius: "10px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    fontWeight: "800",
+    color: "#fff",
+    animation: type === "pulse" ? `pl-pulse 1.5s ease infinite` : "none"
+  } }, logo[0]), /* @__PURE__ */ import_react27.default.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ import_react27.default.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ import_react27.default.createElement(
+    "circle",
+    {
+      cx: "28",
+      cy: "28",
+      r: "22",
+      fill: "none",
+      stroke: alpha(accent, 0.12),
+      strokeWidth: "4"
+    }
+  ), /* @__PURE__ */ import_react27.default.createElement(
+    "circle",
+    {
+      cx: "28",
+      cy: "28",
+      r: "22",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeDasharray: "34.8 104.4",
+      style: { transformOrigin: "center", animation: "pl-spin 0.9s linear infinite" }
+    }
+  )), /* @__PURE__ */ import_react27.default.createElement("span", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    fontWeight: "700",
+    color: accent
+  } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react27.default.createElement("div", { key: i, style: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    background: accent,
+    animation: `pl-dot 1.2s ease infinite`,
+    animationDelay: `${i * 0.2}s`
+  } }))), type === "pulse" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ import_react27.default.createElement("div", { key: i, style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    background: alpha(accent, 0.3),
+    animation: `pl-pulse 1.5s ease infinite`,
+    animationDelay: `${i * 0.4}s`
+  } })), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    position: "absolute",
+    inset: "30%",
+    borderRadius: "50%",
+    background: accent
+  } })), type === "ring" && /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    width: "52px",
+    height: "52px",
+    borderRadius: "50%",
+    border: `4px solid ${alpha(accent, 0.15)}`,
+    borderTop: `4px solid ${accent}`,
+    borderRight: `4px solid ${accent}`,
+    animation: "pl-spin 0.9s linear infinite"
+  } }), type === "bar" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    width: "100%",
+    height: "4px",
+    background: alpha(accent, 0.15),
+    borderRadius: "2px",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    height: "100%",
+    width: `${progress}%`,
+    borderRadius: "2px",
+    background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.6)}, ${accent})`,
+    backgroundSize: "200% 100%",
+    animation: "pl-bar 1.2s linear infinite",
+    transition: "width 0.03s linear"
+  } })), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    fontSize: "11px",
+    color: "rgba(255,255,255,0.3)"
+  } }, /* @__PURE__ */ import_react27.default.createElement("span", null, loadingText), /* @__PURE__ */ import_react27.default.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ import_react27.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react27.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ import_react27.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
   AvatarCard,
+  BackgoundImageSlider,
   Charts,
   CodeBlock,
   CustomInputField,
@@ -2282,6 +2717,7 @@ var ImageSlider = ({
   Navbar,
   NotificationToast,
   OtpInput,
+  PageLoader,
   PricingCard,
   ResponsiveNavbar,
   SearchBar,

package/dist/index.mjs

@@ -2206,9 +2206,442 @@ 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"
+      }
+    }
+  )))));
+};
+
+// src/components/PageLoader/PageLoader.jsx
+import React27, { useState as useState20, useEffect as useEffect8 } from "react";
+var PageLoader = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "",
+  type = "spinner",
+  loadingText = "Loading...",
+  subText = "",
+  duration = 6e3,
+  onComplete = () => {
+  }
+}) => {
+  const [progress, setProgress] = useState20(0);
+  const [done, setDone] = useState20(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})`;
+  };
+  useEffect8(() => {
+    const steps = 100;
+    const interval = duration / steps;
+    let current = 0;
+    const timer = setInterval(() => {
+      current += 1;
+      setProgress(current);
+      if (current >= 100) {
+        clearInterval(timer);
+        setTimeout(() => {
+          setDone(true);
+          onComplete();
+        }, 300);
+      }
+    }, interval);
+    return () => clearInterval(timer);
+  }, [duration]);
+  if (done) return null;
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement("style", null, `
+        @keyframes pl-spin  { to { transform: rotate(360deg); } }
+        @keyframes pl-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
+        @keyframes pl-dot   { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }
+        @keyframes pl-fade  { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
+        @keyframes pl-bar   { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
+      `), /* @__PURE__ */ React27.createElement("div", { style: {
+    width: "100%",
+    height: "100%",
+    background: bg,
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "28px",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    animation: "pl-fade 0.3s ease"
+  } }, /* @__PURE__ */ React27.createElement("div", { style: {
+    position: "absolute",
+    top: "-100px",
+    left: "-100px",
+    width: "400px",
+    height: "400px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, ${alpha(accent, 0.12)}, transparent 70%)`,
+    filter: "blur(60px)",
+    pointerEvents: "none"
+  } }), /* @__PURE__ */ React27.createElement("div", { style: {
+    position: "absolute",
+    bottom: "-100px",
+    right: "-100px",
+    width: "350px",
+    height: "350px",
+    borderRadius: "50%",
+    background: `radial-gradient(circle, ${alpha(accent, 0.08)}, transparent 70%)`,
+    filter: "blur(60px)",
+    pointerEvents: "none"
+  } }), /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ React27.createElement("div", { style: {
+    width: "36px",
+    height: "36px",
+    borderRadius: "10px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "16px",
+    fontWeight: "800",
+    color: "#fff",
+    animation: type === "pulse" ? `pl-pulse 1.5s ease infinite` : "none"
+  } }, logo[0]), /* @__PURE__ */ React27.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ React27.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ React27.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ React27.createElement(
+    "circle",
+    {
+      cx: "28",
+      cy: "28",
+      r: "22",
+      fill: "none",
+      stroke: alpha(accent, 0.12),
+      strokeWidth: "4"
+    }
+  ), /* @__PURE__ */ React27.createElement(
+    "circle",
+    {
+      cx: "28",
+      cy: "28",
+      r: "22",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeDasharray: "34.8 104.4",
+      style: { transformOrigin: "center", animation: "pl-spin 0.9s linear infinite" }
+    }
+  )), /* @__PURE__ */ React27.createElement("span", { style: {
+    position: "absolute",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    fontWeight: "700",
+    color: accent
+  } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ React27.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React27.createElement("div", { key: i, style: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    background: accent,
+    animation: `pl-dot 1.2s ease infinite`,
+    animationDelay: `${i * 0.2}s`
+  } }))), type === "pulse" && /* @__PURE__ */ React27.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ React27.createElement("div", { key: i, style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    background: alpha(accent, 0.3),
+    animation: `pl-pulse 1.5s ease infinite`,
+    animationDelay: `${i * 0.4}s`
+  } })), /* @__PURE__ */ React27.createElement("div", { style: {
+    position: "absolute",
+    inset: "30%",
+    borderRadius: "50%",
+    background: accent
+  } })), type === "ring" && /* @__PURE__ */ React27.createElement("div", { style: {
+    width: "52px",
+    height: "52px",
+    borderRadius: "50%",
+    border: `4px solid ${alpha(accent, 0.15)}`,
+    borderTop: `4px solid ${accent}`,
+    borderRight: `4px solid ${accent}`,
+    animation: "pl-spin 0.9s linear infinite"
+  } }), type === "bar" && /* @__PURE__ */ React27.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React27.createElement("div", { style: {
+    width: "100%",
+    height: "4px",
+    background: alpha(accent, 0.15),
+    borderRadius: "2px",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ React27.createElement("div", { style: {
+    height: "100%",
+    width: `${progress}%`,
+    borderRadius: "2px",
+    background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.6)}, ${accent})`,
+    backgroundSize: "200% 100%",
+    animation: "pl-bar 1.2s linear infinite",
+    transition: "width 0.03s linear"
+  } })), /* @__PURE__ */ React27.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    fontSize: "11px",
+    color: "rgba(255,255,255,0.3)"
+  } }, /* @__PURE__ */ React27.createElement("span", null, loadingText), /* @__PURE__ */ React27.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ React27.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ React27.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ React27.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ React27.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
+};
 export {
   Avatar,
   AvatarCard,
+  BackgoundImageSlider,
   Charts,
   CodeBlock,
   CustomInputField,
@@ -2222,6 +2655,7 @@ export {
   Navbar,
   NotificationToast,
   OtpInput,
+  PageLoader,
   PricingCard,
   ResponsiveNavbar,
   SearchBar,

package/package.json

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