uiverseplus-lib 1.0.1 → 1.0.3

package/dist/index.js

@@ -1411,215 +1411,25 @@ var ImageCard = ({
 // src/components/ImageSlider/ImageSlider.jsx
 var import_react10 = __toESM(require("react"));
 var ImageSlider = ({
-  images = [
-    {
-      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
-      title: "Hidden Peaks of Himalayas",
-      tag: "Travel"
-    },
-    {
-      src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&q=80",
-      title: "City Lights at Night",
-      tag: "Urban"
-    },
-    {
-      src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=600&q=80",
-      title: "Tropical Beach Paradise",
-      tag: "Nature"
-    },
-    {
-      src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=600&q=80",
-      title: "Starry Mountain Night",
-      tag: "Adventure"
-    }
-  ],
+  images = ["https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80", "https://images.unsplash.com/photo-1506744038136-46273834b3cd?w=600&q=80", "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=600&q=80"],
+  interval = 5e3,
   accent = "#6366f1",
   bg = "#0f172a",
-  radius = "20px",
-  showDots = true,
-  showCaption = true,
-  autoPlay = false
+  width = "600px",
+  height = "400px"
 }) => {
-  const [current, setCurrent] = (0, import_react10.useState)(0);
-  const [dir, setDir] = (0, import_react10.useState)(null);
+  const [currentIndex, setCurrentIndex] = (0, import_react10.useState)(0);
   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 prev = () => {
-    setDir("left");
-    setCurrent((c) => (c - 1 + images.length) % images.length);
-  };
-  const next = () => {
-    setDir("right");
-    setCurrent((c) => (c + 1) % images.length);
-  };
-  const goTo = (i) => {
-    setDir(i > current ? "right" : "left");
-    setCurrent(i);
+    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 + ")";
   };
-  const img = images[current];
-  return /* @__PURE__ */ import_react10.default.createElement("div", { style: {
-    background: bg,
-    borderRadius: radius,
-    overflow: "hidden",
-    width: "300px",
-    border: "1px solid rgba(255,255,255,0.07)",
-    fontFamily: "system-ui, sans-serif",
-    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
-  } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react10.default.createElement(
-    "img",
-    {
-      key: current,
-      src: img.src,
-      alt: img.title,
-      style: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        animation: `sliderFade 0.35s ease`
-      }
-    }
-  ), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
-    position: "absolute",
-    inset: 0,
-    background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
-  } }), img.tag && /* @__PURE__ */ import_react10.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"
-  } }, img.tag), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
-    position: "absolute",
-    top: "12px",
-    right: "12px",
-    padding: "4px 10px",
-    borderRadius: "20px",
-    background: "rgba(0,0,0,0.5)",
-    fontSize: "10px",
-    fontWeight: "600",
-    color: "rgba(255,255,255,0.7)"
-  } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react10.default.createElement(
-    "button",
-    {
-      onClick: prev,
-      style: {
-        position: "absolute",
-        left: "10px",
-        top: "50%",
-        transform: "translateY(-50%)",
-        width: "34px",
-        height: "34px",
-        borderRadius: "50%",
-        background: "rgba(0,0,0,0.5)",
-        border: "1px solid rgba(255,255,255,0.15)",
-        color: "#fff",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "background 0.2s",
-        padding: 0
-      },
-      onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
-      onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
-    },
-    /* @__PURE__ */ import_react10.default.createElement(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        strokeLinecap: "round"
-      },
-      /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "15 18 9 12 15 6" })
-    )
-  ), /* @__PURE__ */ import_react10.default.createElement(
-    "button",
-    {
-      onClick: next,
-      style: {
-        position: "absolute",
-        right: "10px",
-        top: "50%",
-        transform: "translateY(-50%)",
-        width: "34px",
-        height: "34px",
-        borderRadius: "50%",
-        background: "rgba(0,0,0,0.5)",
-        border: "1px solid rgba(255,255,255,0.15)",
-        color: "#fff",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "background 0.2s",
-        padding: 0
-      },
-      onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
-      onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
-    },
-    /* @__PURE__ */ import_react10.default.createElement(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        strokeLinecap: "round"
-      },
-      /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "9 18 15 12 9 6" })
-    )
-  )), showCaption && /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react10.default.createElement(
-    "p",
-    {
-      style: {
-        fontSize: "14px",
-        fontWeight: "700",
-        color: "#fff",
-        margin: 0,
-        lineHeight: 1.4,
-        animation: "sliderFade 0.3s ease"
-      },
-      key: current + "-title"
-    },
-    img.title
-  )), showDots && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
-    display: "flex",
-    justifyContent: "center",
-    gap: "6px",
-    padding: "12px 16px 16px"
-  } }, images.map((_, i) => /* @__PURE__ */ import_react10.default.createElement(
-    "button",
-    {
-      key: i,
-      onClick: () => goTo(i),
-      style: {
-        width: i === current ? "20px" : "6px",
-        height: "6px",
-        borderRadius: "3px",
-        border: "none",
-        cursor: "pointer",
-        padding: 0,
-        background: i === current ? accent : "rgba(255,255,255,0.2)",
-        transition: "all 0.25s ease"
-      }
-    }
-  ))));
+  (0, import_react10.useEffect)(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [images.length, interval]);
+  return /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "relative", width, height, borderRadius: "20px", overflow: "hidden", background: bg, boxShadow: "0 10px 40px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "absolute", inset: 0, display: "flex", transition: "transform 0.5s ease", transform: "translateX(" + -currentIndex * 100 + "%)" } }, images.map((img, i) => /* @__PURE__ */ import_react10.default.createElement("div", { key: i, style: { flex: "0 0 100%", height: "100%", position: "relative" } }, /* @__PURE__ */ import_react10.default.createElement("img", { src: img, alt: "Slider", style: { width: "100%", height: "100%", objectFit: "cover" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })))), /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "absolute", bottom: "20px", left: "50%", transform: "translateX(-50%)", display: "flex", gap: "8px" } }, images.map((_, i) => /* @__PURE__ */ import_react10.default.createElement("button", { key: i, onClick: () => setCurrentIndex(i), style: { width: "10px", height: "10px", borderRadius: "50%", border: "none", background: currentIndex === i ? accent : "rgba(255,255,255,0.3)", cursor: "pointer", transition: "background 0.2s" } }))), /* @__PURE__ */ import_react10.default.createElement("button", { onClick: () => setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length), style: { position: "absolute", left: "20px", top: "50%", transform: "translateY(-50%)", background: alpha(bg, 0.7), border: "none", width: "40px", height: "40px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 4px 12px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ import_react10.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "15 18 9 12 15 6" }))), /* @__PURE__ */ import_react10.default.createElement("button", { onClick: () => setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length), style: { position: "absolute", right: "20px", top: "50%", transform: "translateY(-50%)", background: alpha(bg, 0.7), border: "none", width: "40px", height: "40px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 4px 12px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ import_react10.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "9 18 15 12 9 6" }))));
 };
 
 // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
@@ -3788,75 +3598,83 @@ var ReviewCard = ({
 // src/components/Card/Card.jsx
 var import_react23 = __toESM(require("react"));
 var Card = ({
-  title = "Performance",
-  description = "Real-time metrics with live dashboard updates every second.",
-  icon = "\u26A1",
-  tag = "Active",
-  onClick
+  title = "Premium Design",
+  description = "Elevate your project with our high-quality UI components and templates.",
+  icon = "\u2605",
+  accent = "#7c3aed",
+  bg = "#0f172a",
+  borderColor = "rgba(255,255,255,0.1)",
+  onAction = () => {
+  }
 }) => {
   const [hovered, setHovered] = (0, import_react23.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_react23.default.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      onClick,
       style: {
-        background: "#ffffff",
-        border: `0.5px solid ${hovered ? "#00000033" : "#0000001a"}`,
-        borderRadius: "12px",
-        padding: "1.25rem",
-        transition: "border-color 0.2s, transform 0.2s",
-        transform: hovered ? "translateY(-2px)" : "translateY(0)",
-        cursor: onClick ? "pointer" : "default",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: "sans-serif",
-        width: "260px"
+        background: bg,
+        borderRadius: "16px",
+        padding: "24px",
+        width: "280px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : borderColor),
+        fontFamily: "system-ui,sans-serif",
+        transition: "all 0.2s ease",
+        boxShadow: hovered ? "0 10px 30px rgba(0,0,0,0.5)" : "0 5px 15px rgba(0,0,0,0.3)",
+        transform: hovered ? "translateY(-4px)" : "translateY(0)"
       }
     },
     /* @__PURE__ */ import_react23.default.createElement("div", { style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      height: "3px",
-      background: "#1D9E75",
-      borderRadius: "12px 12px 0 0"
-    } }),
-    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
-      width: 40,
-      height: 40,
-      borderRadius: 8,
-      background: "#E1F5EE",
+      width: "48px",
+      height: "48px",
+      borderRadius: "12px",
+      background: alpha(accent, 0.15),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      fontSize: 18,
-      marginBottom: 14
+      marginBottom: "16px",
+      border: "1px solid " + alpha(accent, 0.3),
+      color: accent,
+      fontSize: "20px",
+      fontWeight: "bold"
     } }, icon),
-    /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
-    /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
-    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      borderTop: "0.5px solid #0000001a",
-      paddingTop: 12
-    } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: {
-      fontSize: 11,
-      fontWeight: 500,
-      padding: "3px 9px",
-      borderRadius: 20,
-      background: "#E1F5EE",
-      color: "#0F6E56"
-    } }, tag), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
-      fontSize: 14,
-      color: "#999",
-      display: "inline-block",
-      transition: "transform 0.2s",
-      transform: hovered ? "translateX(3px)" : "translateX(0)"
-    } }, "\u2192"))
+    /* @__PURE__ */ import_react23.default.createElement("h3", { style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px 0",
+      lineHeight: 1.3
+    } }, title),
+    /* @__PURE__ */ import_react23.default.createElement("p", { style: {
+      fontSize: "14px",
+      color: "rgba(255,255,255,0.6)",
+      margin: "0 0 20px 0",
+      lineHeight: 1.5
+    } }, description),
+    /* @__PURE__ */ import_react23.default.createElement(
+      "button",
+      {
+        onClick: onAction,
+        style: {
+          padding: "10px 18px",
+          borderRadius: "10px",
+          border: "none",
+          background: hovered ? "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.8) + ")" : alpha(accent, 0.1),
+          color: hovered ? "#fff" : accent,
+          fontSize: "13px",
+          fontWeight: "600",
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          fontFamily: "inherit"
+        }
+      },
+      "Learn More"
+    )
   );
 };
 

package/dist/index.mjs

@@ -1350,221 +1350,31 @@ var ImageCard = ({
 };
 
 // src/components/ImageSlider/ImageSlider.jsx
-import React10, { useState as useState8 } from "react";
+import React10, { useState as useState8, useEffect as useEffect4 } from "react";
 var ImageSlider = ({
-  images = [
-    {
-      src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
-      title: "Hidden Peaks of Himalayas",
-      tag: "Travel"
-    },
-    {
-      src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&q=80",
-      title: "City Lights at Night",
-      tag: "Urban"
-    },
-    {
-      src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=600&q=80",
-      title: "Tropical Beach Paradise",
-      tag: "Nature"
-    },
-    {
-      src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=600&q=80",
-      title: "Starry Mountain Night",
-      tag: "Adventure"
-    }
-  ],
+  images = ["https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80", "https://images.unsplash.com/photo-1506744038136-46273834b3cd?w=600&q=80", "https://images.unsplash.com/photo-1501785888041-af3ef285b470?w=600&q=80"],
+  interval = 5e3,
   accent = "#6366f1",
   bg = "#0f172a",
-  radius = "20px",
-  showDots = true,
-  showCaption = true,
-  autoPlay = false
+  width = "600px",
+  height = "400px"
 }) => {
-  const [current, setCurrent] = useState8(0);
-  const [dir, setDir] = useState8(null);
+  const [currentIndex, setCurrentIndex] = useState8(0);
   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 prev = () => {
-    setDir("left");
-    setCurrent((c) => (c - 1 + images.length) % images.length);
-  };
-  const next = () => {
-    setDir("right");
-    setCurrent((c) => (c + 1) % images.length);
-  };
-  const goTo = (i) => {
-    setDir(i > current ? "right" : "left");
-    setCurrent(i);
+    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 + ")";
   };
-  const img = images[current];
-  return /* @__PURE__ */ React10.createElement("div", { style: {
-    background: bg,
-    borderRadius: radius,
-    overflow: "hidden",
-    width: "300px",
-    border: "1px solid rgba(255,255,255,0.07)",
-    fontFamily: "system-ui, sans-serif",
-    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
-  } }, /* @__PURE__ */ React10.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ React10.createElement(
-    "img",
-    {
-      key: current,
-      src: img.src,
-      alt: img.title,
-      style: {
-        width: "100%",
-        height: "100%",
-        objectFit: "cover",
-        animation: `sliderFade 0.35s ease`
-      }
-    }
-  ), /* @__PURE__ */ React10.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ React10.createElement("div", { style: {
-    position: "absolute",
-    inset: 0,
-    background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
-  } }), img.tag && /* @__PURE__ */ React10.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"
-  } }, img.tag), /* @__PURE__ */ React10.createElement("div", { style: {
-    position: "absolute",
-    top: "12px",
-    right: "12px",
-    padding: "4px 10px",
-    borderRadius: "20px",
-    background: "rgba(0,0,0,0.5)",
-    fontSize: "10px",
-    fontWeight: "600",
-    color: "rgba(255,255,255,0.7)"
-  } }, current + 1, " / ", images.length), /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      onClick: prev,
-      style: {
-        position: "absolute",
-        left: "10px",
-        top: "50%",
-        transform: "translateY(-50%)",
-        width: "34px",
-        height: "34px",
-        borderRadius: "50%",
-        background: "rgba(0,0,0,0.5)",
-        border: "1px solid rgba(255,255,255,0.15)",
-        color: "#fff",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "background 0.2s",
-        padding: 0
-      },
-      onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
-      onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
-    },
-    /* @__PURE__ */ React10.createElement(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        strokeLinecap: "round"
-      },
-      /* @__PURE__ */ React10.createElement("polyline", { points: "15 18 9 12 15 6" })
-    )
-  ), /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      onClick: next,
-      style: {
-        position: "absolute",
-        right: "10px",
-        top: "50%",
-        transform: "translateY(-50%)",
-        width: "34px",
-        height: "34px",
-        borderRadius: "50%",
-        background: "rgba(0,0,0,0.5)",
-        border: "1px solid rgba(255,255,255,0.15)",
-        color: "#fff",
-        cursor: "pointer",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        transition: "background 0.2s",
-        padding: 0
-      },
-      onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
-      onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
-    },
-    /* @__PURE__ */ React10.createElement(
-      "svg",
-      {
-        width: "14",
-        height: "14",
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: "currentColor",
-        strokeWidth: "2.5",
-        strokeLinecap: "round"
-      },
-      /* @__PURE__ */ React10.createElement("polyline", { points: "9 18 15 12 9 6" })
-    )
-  )), showCaption && /* @__PURE__ */ React10.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ React10.createElement(
-    "p",
-    {
-      style: {
-        fontSize: "14px",
-        fontWeight: "700",
-        color: "#fff",
-        margin: 0,
-        lineHeight: 1.4,
-        animation: "sliderFade 0.3s ease"
-      },
-      key: current + "-title"
-    },
-    img.title
-  )), showDots && /* @__PURE__ */ React10.createElement("div", { style: {
-    display: "flex",
-    justifyContent: "center",
-    gap: "6px",
-    padding: "12px 16px 16px"
-  } }, images.map((_, i) => /* @__PURE__ */ React10.createElement(
-    "button",
-    {
-      key: i,
-      onClick: () => goTo(i),
-      style: {
-        width: i === current ? "20px" : "6px",
-        height: "6px",
-        borderRadius: "3px",
-        border: "none",
-        cursor: "pointer",
-        padding: 0,
-        background: i === current ? accent : "rgba(255,255,255,0.2)",
-        transition: "all 0.25s ease"
-      }
-    }
-  ))));
+  useEffect4(() => {
+    const timer = setInterval(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
+    }, interval);
+    return () => clearInterval(timer);
+  }, [images.length, interval]);
+  return /* @__PURE__ */ React10.createElement("div", { style: { position: "relative", width, height, borderRadius: "20px", overflow: "hidden", background: bg, boxShadow: "0 10px 40px rgba(0,0,0,0.5)" } }, /* @__PURE__ */ React10.createElement("div", { style: { position: "absolute", inset: 0, display: "flex", transition: "transform 0.5s ease", transform: "translateX(" + -currentIndex * 100 + "%)" } }, images.map((img, i) => /* @__PURE__ */ React10.createElement("div", { key: i, style: { flex: "0 0 100%", height: "100%", position: "relative" } }, /* @__PURE__ */ React10.createElement("img", { src: img, alt: "Slider", style: { width: "100%", height: "100%", objectFit: "cover" } }), /* @__PURE__ */ React10.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })))), /* @__PURE__ */ React10.createElement("div", { style: { position: "absolute", bottom: "20px", left: "50%", transform: "translateX(-50%)", display: "flex", gap: "8px" } }, images.map((_, i) => /* @__PURE__ */ React10.createElement("button", { key: i, onClick: () => setCurrentIndex(i), style: { width: "10px", height: "10px", borderRadius: "50%", border: "none", background: currentIndex === i ? accent : "rgba(255,255,255,0.3)", cursor: "pointer", transition: "background 0.2s" } }))), /* @__PURE__ */ React10.createElement("button", { onClick: () => setCurrentIndex((prevIndex) => (prevIndex - 1 + images.length) % images.length), style: { position: "absolute", left: "20px", top: "50%", transform: "translateY(-50%)", background: alpha(bg, 0.7), border: "none", width: "40px", height: "40px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 4px 12px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React10.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React10.createElement("polyline", { points: "15 18 9 12 15 6" }))), /* @__PURE__ */ React10.createElement("button", { onClick: () => setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length), style: { position: "absolute", right: "20px", top: "50%", transform: "translateY(-50%)", background: alpha(bg, 0.7), border: "none", width: "40px", height: "40px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", cursor: "pointer", boxShadow: "0 4px 12px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React10.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React10.createElement("polyline", { points: "9 18 15 12 9 6" }))));
 };
 
 // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
-import React11, { useState as useState9, useEffect as useEffect4, useCallback } from "react";
+import React11, { useState as useState9, useEffect as useEffect5, useCallback } from "react";
 var BackgoundImageSlider = ({
   images = [
     {
@@ -1616,7 +1426,7 @@ var BackgoundImageSlider = ({
   }, [animating, images.length]);
   const prev = () => go(current - 1);
   const next = () => go(current + 1);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!autoPlay) return;
     const t = setInterval(() => go(current + 1), autoPlayInterval);
     return () => clearInterval(t);
@@ -1827,7 +1637,7 @@ var BackgoundImageSlider = ({
 };
 
 // src/components/PageLoader/PageLoader.jsx
-import React12, { useState as useState10, useEffect as useEffect5 } from "react";
+import React12, { useState as useState10, useEffect as useEffect6 } from "react";
 var PageLoader = ({
   logo = "VirtualAI",
   accent = "#6366f1",
@@ -1847,7 +1657,7 @@ var PageLoader = ({
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect5(() => {
+  useEffect6(() => {
     const steps = 100;
     const interval = duration / steps;
     let current = 0;
@@ -1996,7 +1806,7 @@ var PageLoader = ({
 };
 
 // src/components/OTPInput/OTPInput.jsx
-import React13, { useState as useState11, useRef, useEffect as useEffect6 } from "react";
+import React13, { useState as useState11, useRef, useEffect as useEffect7 } from "react";
 var OTPInput = ({
   length = 6,
   onComplete = () => {
@@ -2024,11 +1834,11 @@ var OTPInput = ({
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect6(() => {
+  useEffect7(() => {
     var _a;
     (_a = inputs.current[0]) == null ? void 0 : _a.focus();
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (resendTimer <= 0) return;
     const t = setInterval(() => setResendTimer((s) => s - 1), 1e3);
     return () => clearInterval(t);
@@ -3061,7 +2871,7 @@ var RatingStars = ({
 };
 
 // src/components/StatCard/StatCard.jsx
-import React18, { useEffect as useEffect7, useRef as useRef3, useState as useState16 } from "react";
+import React18, { useEffect as useEffect8, useRef as useRef3, useState as useState16 } from "react";
 var StatCard = ({
   title = "Active Users",
   value = "128K",
@@ -3081,7 +2891,7 @@ var StatCard = ({
   const [visible, setVisible] = useState16(false);
   const [entered, setEntered] = useState16(false);
   const ref = useRef3(null);
-  useEffect7(() => {
+  useEffect8(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3094,7 +2904,7 @@ var StatCard = ({
     if (ref.current) observer.observe(ref.current);
     return () => observer.disconnect();
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!visible) return;
     setEntered(true);
     const duration = 1400;
@@ -3107,7 +2917,7 @@ var StatCard = ({
     };
     requestAnimationFrame(step);
   }, [visible, numericValue]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!visible) return;
     const t = setTimeout(() => setBarWidth(barPercent), 200);
     return () => clearTimeout(t);
@@ -3277,7 +3087,7 @@ var StatCard = ({
 };
 
 // src/components/ProgressBar/ProgressBar.jsx
-import React19, { useEffect as useEffect8, useRef as useRef4, useState as useState17 } from "react";
+import React19, { useEffect as useEffect9, useRef as useRef4, useState as useState17 } from "react";
 var ProgressBar = ({
   label = "Progress",
   percentage = 75,
@@ -3294,7 +3104,7 @@ var ProgressBar = ({
   const [filled, setFilled] = useState17(0);
   const [visible, setVisible] = useState17(false);
   const ref = useRef4(null);
-  useEffect8(() => {
+  useEffect9(() => {
     const obs = new IntersectionObserver(
       ([e]) => {
         if (e.isIntersecting) {
@@ -3307,7 +3117,7 @@ var ProgressBar = ({
     if (ref.current) obs.observe(ref.current);
     return () => obs.disconnect();
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!visible) return;
     const duration = 1200;
     const start = performance.now();
@@ -3729,75 +3539,83 @@ var ReviewCard = ({
 // src/components/Card/Card.jsx
 import React23, { useState as useState20 } from "react";
 var Card = ({
-  title = "Performance",
-  description = "Real-time metrics with live dashboard updates every second.",
-  icon = "\u26A1",
-  tag = "Active",
-  onClick
+  title = "Premium Design",
+  description = "Elevate your project with our high-quality UI components and templates.",
+  icon = "\u2605",
+  accent = "#7c3aed",
+  bg = "#0f172a",
+  borderColor = "rgba(255,255,255,0.1)",
+  onAction = () => {
+  }
 }) => {
   const [hovered, setHovered] = useState20(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__ */ React23.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
-      onClick,
       style: {
-        background: "#ffffff",
-        border: `0.5px solid ${hovered ? "#00000033" : "#0000001a"}`,
-        borderRadius: "12px",
-        padding: "1.25rem",
-        transition: "border-color 0.2s, transform 0.2s",
-        transform: hovered ? "translateY(-2px)" : "translateY(0)",
-        cursor: onClick ? "pointer" : "default",
-        position: "relative",
-        overflow: "hidden",
-        fontFamily: "sans-serif",
-        width: "260px"
+        background: bg,
+        borderRadius: "16px",
+        padding: "24px",
+        width: "280px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : borderColor),
+        fontFamily: "system-ui,sans-serif",
+        transition: "all 0.2s ease",
+        boxShadow: hovered ? "0 10px 30px rgba(0,0,0,0.5)" : "0 5px 15px rgba(0,0,0,0.3)",
+        transform: hovered ? "translateY(-4px)" : "translateY(0)"
       }
     },
     /* @__PURE__ */ React23.createElement("div", { style: {
-      position: "absolute",
-      top: 0,
-      left: 0,
-      right: 0,
-      height: "3px",
-      background: "#1D9E75",
-      borderRadius: "12px 12px 0 0"
-    } }),
-    /* @__PURE__ */ React23.createElement("div", { style: {
-      width: 40,
-      height: 40,
-      borderRadius: 8,
-      background: "#E1F5EE",
+      width: "48px",
+      height: "48px",
+      borderRadius: "12px",
+      background: alpha(accent, 0.15),
       display: "flex",
       alignItems: "center",
       justifyContent: "center",
-      fontSize: 18,
-      marginBottom: 14
+      marginBottom: "16px",
+      border: "1px solid " + alpha(accent, 0.3),
+      color: accent,
+      fontSize: "20px",
+      fontWeight: "bold"
     } }, icon),
-    /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
-    /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
-    /* @__PURE__ */ React23.createElement("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "space-between",
-      borderTop: "0.5px solid #0000001a",
-      paddingTop: 12
-    } }, /* @__PURE__ */ React23.createElement("span", { style: {
-      fontSize: 11,
-      fontWeight: 500,
-      padding: "3px 9px",
-      borderRadius: 20,
-      background: "#E1F5EE",
-      color: "#0F6E56"
-    } }, tag), /* @__PURE__ */ React23.createElement("span", { style: {
-      fontSize: 14,
-      color: "#999",
-      display: "inline-block",
-      transition: "transform 0.2s",
-      transform: hovered ? "translateX(3px)" : "translateX(0)"
-    } }, "\u2192"))
+    /* @__PURE__ */ React23.createElement("h3", { style: {
+      fontSize: "18px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px 0",
+      lineHeight: 1.3
+    } }, title),
+    /* @__PURE__ */ React23.createElement("p", { style: {
+      fontSize: "14px",
+      color: "rgba(255,255,255,0.6)",
+      margin: "0 0 20px 0",
+      lineHeight: 1.5
+    } }, description),
+    /* @__PURE__ */ React23.createElement(
+      "button",
+      {
+        onClick: onAction,
+        style: {
+          padding: "10px 18px",
+          borderRadius: "10px",
+          border: "none",
+          background: hovered ? "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.8) + ")" : alpha(accent, 0.1),
+          color: hovered ? "#fff" : accent,
+          fontSize: "13px",
+          fontWeight: "600",
+          cursor: "pointer",
+          transition: "all 0.2s ease",
+          fontFamily: "inherit"
+        }
+      },
+      "Learn More"
+    )
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uiverseplus-lib",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "",
   "license": "ISC",
   "author": "Chitranjan Rana",