pre-react-ui-lib 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1855 @@
+// src/components/Navbar/Navbar.jsx
+import React, { useState, useEffect } from "react";
+var Navbar = ({
+  logo = "VirtualAI",
+  links = ["Home", "Features", "Pricing", "Blog"],
+  ctaText = "Get Started",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onCtaClick = () => {
+  },
+  onLinkClick = () => {
+  }
+}) => {
+  const [scrolled, setScrolled] = useState(false);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [active, setActive] = useState("Home");
+  const [isMobile, setIsMobile] = 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})`;
+  };
+  useEffect(() => {
+    const checkMobile = () => setIsMobile(window.innerWidth < 768);
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+  useEffect(() => {
+    const handler = () => setScrolled(window.scrollY > 10);
+    window.addEventListener("scroll", handler);
+    return () => window.removeEventListener("scroll", handler);
+  }, []);
+  useEffect(() => {
+    if (!isMobile) setMenuOpen(false);
+  }, [isMobile]);
+  const handleLink = (link) => {
+    setActive(link);
+    setMenuOpen(false);
+    onLinkClick(link);
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, `
+        @keyframes nbSlideDown {
+          from { opacity: 0; transform: translateY(-8px); }
+          to   { opacity: 1; transform: translateY(0); }
+        }
+        .nb-link:hover { color: rgba(255,255,255,0.9) !important; background: rgba(255,255,255,0.05) !important; }
+        .nb-cta:hover  { opacity: 0.85 !important; }
+        .nb-ham:hover  { background: rgba(255,255,255,0.1) !important; }
+        .nb-mlink:hover { background: rgba(255,255,255,0.06) !important; }
+      `), /* @__PURE__ */ React.createElement("nav", { style: {
+    position: "sticky",
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1e3,
+    background: scrolled ? alpha(bg, 0.96) : bg,
+    borderBottom: `1px solid ${scrolled ? "rgba(255,255,255,0.09)" : "rgba(255,255,255,0.04)"}`,
+    backdropFilter: scrolled ? "blur(12px)" : "none",
+    WebkitBackdropFilter: scrolled ? "blur(12px)" : "none",
+    transition: "all 0.3s ease",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    width: "100%",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ React.createElement("div", { style: {
+    maxWidth: "1200px",
+    margin: "0 auto",
+    padding: "0 20px",
+    height: isMobile ? "56px" : "64px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "16px",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ React.createElement("div", { style: {
+    width: isMobile ? "26px" : "30px",
+    height: isMobile ? "26px" : "30px",
+    borderRadius: "8px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: isMobile ? "12px" : "14px",
+    fontWeight: "800",
+    color: "#fff",
+    flexShrink: 0
+  } }, logo[0]), /* @__PURE__ */ React.createElement("span", { style: {
+    fontSize: isMobile ? "14px" : "16px",
+    fontWeight: "800",
+    color: "#fff",
+    letterSpacing: "-0.3px"
+  } }, logo)), !isMobile && /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: link,
+      className: "nb-link",
+      onClick: () => handleLink(link),
+      style: {
+        background: active === link ? alpha(accent, 0.12) : "transparent",
+        border: "none",
+        padding: "7px 16px",
+        borderRadius: "9px",
+        fontSize: "14px",
+        fontWeight: active === link ? "700" : "500",
+        color: active === link ? accent : "rgba(255,255,255,0.5)",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        whiteSpace: "nowrap"
+      }
+    },
+    link
+  ))), /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "nb-cta",
+      onClick: onCtaClick,
+      style: {
+        padding: isMobile ? "7px 14px" : "9px 20px",
+        borderRadius: "10px",
+        border: "none",
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.75)})`,
+        color: "#fff",
+        fontSize: isMobile ? "12px" : "13px",
+        fontWeight: "700",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "opacity 0.2s",
+        whiteSpace: "nowrap"
+      }
+    },
+    ctaText
+  ), isMobile && /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      className: "nb-ham",
+      onClick: () => setMenuOpen((o) => !o),
+      style: {
+        background: "rgba(255,255,255,0.06)",
+        border: "1px solid rgba(255,255,255,0.1)",
+        borderRadius: "8px",
+        width: "34px",
+        height: "34px",
+        cursor: "pointer",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "5px",
+        transition: "background 0.2s",
+        flexShrink: 0,
+        padding: 0
+      }
+    },
+    /* @__PURE__ */ React.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
+      transition: "transform 0.25s"
+    } }),
+    /* @__PURE__ */ React.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      opacity: menuOpen ? 0 : 1,
+      transition: "opacity 0.2s"
+    } }),
+    /* @__PURE__ */ React.createElement("div", { style: {
+      width: "16px",
+      height: "1.5px",
+      background: "rgba(255,255,255,0.7)",
+      borderRadius: "2px",
+      transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
+      transition: "transform 0.25s"
+    } })
+  ))), isMobile && menuOpen && /* @__PURE__ */ React.createElement("div", { style: {
+    animation: "nbSlideDown 0.2s ease",
+    borderTop: "1px solid rgba(255,255,255,0.06)",
+    padding: "10px 16px 16px",
+    display: "flex",
+    flexDirection: "column",
+    gap: "3px",
+    background: alpha(bg, 0.98)
+  } }, links.map((link) => /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      key: link,
+      className: "nb-mlink",
+      onClick: () => handleLink(link),
+      style: {
+        background: active === link ? alpha(accent, 0.1) : "transparent",
+        border: "none",
+        padding: "11px 14px",
+        borderRadius: "10px",
+        fontSize: "14px",
+        fontWeight: active === link ? "700" : "500",
+        color: active === link ? accent : "rgba(255,255,255,0.55)",
+        cursor: "pointer",
+        textAlign: "left",
+        fontFamily: "inherit",
+        width: "100%",
+        transition: "all 0.15s",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }
+    },
+    link,
+    active === link && /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        width: "14",
+        height: "14",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "2.5",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React.createElement("polyline", { points: "9 18 15 12 9 6" })
+    )
+  )), /* @__PURE__ */ React.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      onClick: () => {
+        setMenuOpen(false);
+        onCtaClick();
+      },
+      style: {
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.75)})`,
+        border: "none",
+        padding: "12px",
+        borderRadius: "12px",
+        fontSize: "14px",
+        fontWeight: "700",
+        color: "#fff",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        width: "100%"
+      }
+    },
+    ctaText
+  ))));
+};
+
+// src/components/Footer/Footer.jsx
+import React2 from "react";
+var Footer = ({
+  logo = "VirtualAI",
+  links = ["Home", "Features", "Pricing", "Blog", "Contact"],
+  copyright = "VirtualAI",
+  accent = "#6366f1",
+  bg = "#0f172a"
+}) => {
+  return /* @__PURE__ */ React2.createElement("footer", { style: {
+    background: bg,
+    borderTop: "1px solid rgba(255,255,255,0.06)",
+    fontFamily: "system-ui, sans-serif",
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "28px 24px"
+  } }, /* @__PURE__ */ React2.createElement("div", { style: {
+    maxWidth: "900px",
+    margin: "0 auto",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "20px"
+  } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React2.createElement("div", { style: {
+    width: "26px",
+    height: "26px",
+    borderRadius: "7px",
+    background: `linear-gradient(135deg, ${accent}, rgba(99,102,241,0.5))`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "12px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, logo[0]), /* @__PURE__ */ React2.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ React2.createElement(
+    "a",
+    {
+      key: link,
+      href: "#",
+      style: {
+        fontSize: "13px",
+        color: "rgba(255,255,255,0.4)",
+        textDecoration: "none",
+        padding: "4px 12px",
+        borderRadius: "8px",
+        transition: "color 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.85)",
+      onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
+    },
+    link
+  ))), /* @__PURE__ */ React2.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ React2.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
+};
+
+// src/components/Charts/Charts.jsx
+import React3, { useState as useState2 } from "react";
+var Charts = ({
+  type = "bar",
+  data = [
+    { label: "Jan", value: 40 },
+    { label: "Feb", value: 70 },
+    { label: "Mar", value: 55 },
+    { label: "Apr", value: 90 },
+    { label: "May", value: 65 },
+    { label: "Jun", value: 80 },
+    { label: "Jul", value: 100 },
+    { label: "Aug", value: 30 }
+  ],
+  title = "Monthly Stats",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "16px",
+  showGrid = true,
+  showValues = true
+}) => {
+  const [hovered, setHovered] = useState2(null);
+  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 max = Math.max(...data.map((d) => d.value));
+  const min = Math.min(...data.map((d) => d.value));
+  const W = 320;
+  const H = 160;
+  const padL = 28;
+  const padR = 12;
+  const padT = 16;
+  const padB = 28;
+  const chartW = W - padL - padR;
+  const chartH = H - padT - padB;
+  const getX = (i) => padL + i / (data.length - 1) * chartW;
+  const getY = (v) => padT + chartH - (v - min) / (max - min || 1) * chartH;
+  const points = data.map((d, i) => `${getX(i)},${getY(d.value)}`).join(" ");
+  const areaPoints = `${padL},${padT + chartH} ` + points + ` ${getX(data.length - 1)},${padT + chartH}`;
+  const gridLines = [0, 0.25, 0.5, 0.75, 1].map((t) => ({
+    y: padT + chartH * (1 - t),
+    val: Math.round(min + t * (max - min))
+  }));
+  const BarChart = () => {
+    const barW = Math.min(28, chartW / data.length * 0.55);
+    return /* @__PURE__ */ React3.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ React3.createElement("g", { key: i }, /* @__PURE__ */ React3.createElement(
+      "line",
+      {
+        x1: padL,
+        y1: g.y,
+        x2: W - padR,
+        y2: g.y,
+        stroke: "rgba(255,255,255,0.05)",
+        strokeWidth: "1"
+      }
+    ), /* @__PURE__ */ React3.createElement(
+      "text",
+      {
+        x: padL - 4,
+        y: g.y + 4,
+        textAnchor: "end",
+        fill: "rgba(255,255,255,0.25)",
+        fontSize: "9"
+      },
+      g.val
+    ))), data.map((d, i) => {
+      const x = padL + i / data.length * chartW + (chartW / data.length - barW) / 2;
+      const barH = (d.value - min) / (max - min || 1) * chartH;
+      const y = padT + chartH - barH;
+      const isH = hovered === i;
+      return /* @__PURE__ */ React3.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React3.createElement(
+        "rect",
+        {
+          x,
+          y: padT,
+          width: barW,
+          height: chartH,
+          fill: "transparent",
+          rx: "4"
+        }
+      ), /* @__PURE__ */ React3.createElement(
+        "rect",
+        {
+          x,
+          y,
+          width: barW,
+          height: barH,
+          fill: isH ? accent : alpha(accent, 0.55),
+          rx: "4",
+          style: { transition: "fill 0.15s" }
+        }
+      ), showValues && isH && /* @__PURE__ */ React3.createElement(
+        "text",
+        {
+          x: x + barW / 2,
+          y: y - 5,
+          textAnchor: "middle",
+          fill: "#fff",
+          fontSize: "9",
+          fontWeight: "700"
+        },
+        d.value
+      ), /* @__PURE__ */ React3.createElement(
+        "text",
+        {
+          x: x + barW / 2,
+          y: H - 6,
+          textAnchor: "middle",
+          fill: "rgba(255,255,255,0.3)",
+          fontSize: "9"
+        },
+        d.label
+      ));
+    }));
+  };
+  const LineChart = () => /* @__PURE__ */ React3.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React3.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ React3.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React3.createElement("g", { key: i }, /* @__PURE__ */ React3.createElement(
+    "line",
+    {
+      x1: padL,
+      y1: g.y,
+      x2: W - padR,
+      y2: g.y,
+      stroke: "rgba(255,255,255,0.05)",
+      strokeWidth: "1"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    "text",
+    {
+      x: padL - 4,
+      y: g.y + 4,
+      textAnchor: "end",
+      fill: "rgba(255,255,255,0.25)",
+      fontSize: "9"
+    },
+    g.val
+  ))), /* @__PURE__ */ React3.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ React3.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "2",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ), data.map((d, i) => {
+    const isH = hovered === i;
+    return /* @__PURE__ */ React3.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React3.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ React3.createElement(
+      "circle",
+      {
+        cx: getX(i),
+        cy: getY(d.value),
+        r: isH ? 5 : 3,
+        fill: isH ? "#fff" : accent,
+        stroke: accent,
+        strokeWidth: "2",
+        style: { transition: "all 0.15s" }
+      }
+    ), showValues && isH && /* @__PURE__ */ React3.createElement(
+      "text",
+      {
+        x: getX(i),
+        y: getY(d.value) - 10,
+        textAnchor: "middle",
+        fill: "#fff",
+        fontSize: "9",
+        fontWeight: "700"
+      },
+      d.value
+    ), /* @__PURE__ */ React3.createElement(
+      "text",
+      {
+        x: getX(i),
+        y: H - 6,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.3)",
+        fontSize: "9"
+      },
+      d.label
+    ));
+  }));
+  const PieChart = () => {
+    var _a, _b;
+    const cx = W / 2, cy = H / 2 - 4, r = Math.min(H, W) / 2 - 24;
+    const total = data.reduce((s, d) => s + d.value, 0);
+    const colors = [
+      accent,
+      alpha(accent, 0.75),
+      alpha(accent, 0.55),
+      alpha(accent, 0.4),
+      alpha(accent, 0.3),
+      alpha(accent, 0.2),
+      alpha(accent, 0.12)
+    ];
+    let startAngle = -Math.PI / 2;
+    const slices = data.map((d, i) => {
+      const angle = d.value / total * 2 * Math.PI;
+      const x1 = cx + r * Math.cos(startAngle);
+      const y1 = cy + r * Math.sin(startAngle);
+      const x2 = cx + r * Math.cos(startAngle + angle);
+      const y2 = cy + r * Math.sin(startAngle + angle);
+      const lx = cx + (r + 14) * Math.cos(startAngle + angle / 2);
+      const ly = cy + (r + 14) * Math.sin(startAngle + angle / 2);
+      const large = angle > Math.PI ? 1 : 0;
+      const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+      const slice = { path, color: colors[i % colors.length], d, angle, lx, ly, i };
+      startAngle += angle;
+      return slice;
+    });
+    return /* @__PURE__ */ React3.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ React3.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React3.createElement(
+      "path",
+      {
+        d: s.path,
+        fill: s.color,
+        stroke: bg,
+        strokeWidth: "2",
+        transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
+        style: { transition: "transform 0.15s", cursor: "pointer" }
+      }
+    ))), hovered !== null && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy - 8,
+        textAnchor: "middle",
+        fill: "#fff",
+        fontSize: "16",
+        fontWeight: "800"
+      },
+      (_a = data[hovered]) == null ? void 0 : _a.value
+    ), /* @__PURE__ */ React3.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 10,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.4)",
+        fontSize: "9"
+      },
+      (_b = data[hovered]) == null ? void 0 : _b.label
+    )), hovered === null && /* @__PURE__ */ React3.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 5,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.2)",
+        fontSize: "9"
+      },
+      "Hover slice"
+    ));
+  };
+  const AreaChart = () => /* @__PURE__ */ React3.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React3.createElement("defs", null, /* @__PURE__ */ React3.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React3.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ React3.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React3.createElement("g", { key: i }, /* @__PURE__ */ React3.createElement(
+    "line",
+    {
+      x1: padL,
+      y1: g.y,
+      x2: W - padR,
+      y2: g.y,
+      stroke: "rgba(255,255,255,0.05)",
+      strokeWidth: "1"
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    "text",
+    {
+      x: padL - 4,
+      y: g.y + 4,
+      textAnchor: "end",
+      fill: "rgba(255,255,255,0.25)",
+      fontSize: "9"
+    },
+    g.val
+  ))), /* @__PURE__ */ React3.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ React3.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ), data.map((d, i) => /* @__PURE__ */ React3.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React3.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(
+    "line",
+    {
+      x1: getX(i),
+      y1: padT,
+      x2: getX(i),
+      y2: padT + chartH,
+      stroke: "rgba(255,255,255,0.1)",
+      strokeWidth: "1",
+      strokeDasharray: "3 3"
+    }
+  ), showValues && /* @__PURE__ */ React3.createElement(
+    "text",
+    {
+      x: getX(i),
+      y: getY(d.value) - 10,
+      textAnchor: "middle",
+      fill: "#fff",
+      fontSize: "9",
+      fontWeight: "700"
+    },
+    d.value
+  )), /* @__PURE__ */ React3.createElement(
+    "text",
+    {
+      x: getX(i),
+      y: H - 6,
+      textAnchor: "middle",
+      fill: "rgba(255,255,255,0.3)",
+      fontSize: "9"
+    },
+    d.label
+  ))));
+  const renderChart = () => {
+    if (type === "line") return /* @__PURE__ */ React3.createElement(LineChart, null);
+    if (type === "pie") return /* @__PURE__ */ React3.createElement(PieChart, null);
+    if (type === "area") return /* @__PURE__ */ React3.createElement(AreaChart, null);
+    return /* @__PURE__ */ React3.createElement(BarChart, null);
+  };
+  return /* @__PURE__ */ React3.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "20px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    width: "100%",
+    maxWidth: "360px",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ React3.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ React3.createElement("span", { style: {
+    fontSize: "10px",
+    fontWeight: "700",
+    padding: "3px 9px",
+    borderRadius: "6px",
+    background: alpha(accent, 0.12),
+    color: accent,
+    border: `1px solid ${alpha(accent, 0.25)}`,
+    textTransform: "capitalize"
+  } }, type)), renderChart());
+};
+
+// src/components/ImageCard/ImageCard.jsx
+import React4, { useState as useState3 } 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] = useState3(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__ */ React4.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__ */ React4.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React4.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__ */ React4.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
+    } }), tag && /* @__PURE__ */ React4.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__ */ React4.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React4.createElement("h3", { style: {
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px",
+      lineHeight: 1.4
+    } }, title), /* @__PURE__ */ React4.createElement("p", { style: {
+      fontSize: "13px",
+      color: "rgba(255,255,255,0.45)",
+      lineHeight: 1.65,
+      margin: "0 0 18px"
+    } }, description), /* @__PURE__ */ React4.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
+    ))
+  );
+};
+
+// src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
+import React5, { useState as useState4, useEffect as useEffect2, 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] = useState4(0);
+  const [animating, setAnimating] = useState4(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);
+  useEffect2(() => {
+    if (!autoPlay) return;
+    const t = setInterval(() => go(current + 1), autoPlayInterval);
+    return () => clearInterval(t);
+  }, [autoPlay, autoPlayInterval, current, go]);
+  const img = images[current];
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.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__ */ React5.createElement("div", { style: {
+    position: "relative",
+    width,
+    height,
+    borderRadius: radius,
+    overflow: "hidden",
+    fontFamily: "system-ui, -apple-system, sans-serif",
+    userSelect: "none"
+  } }, /* @__PURE__ */ React5.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__ */ React5.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__ */ React5.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__ */ React5.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__ */ React5.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__ */ React5.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React5.createElement("polyline", { points: "15 18 9 12 15 6" })
+    )
+  ), /* @__PURE__ */ React5.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__ */ React5.createElement(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React5.createElement("polyline", { points: "9 18 15 12 9 6" })
+    )
+  ), /* @__PURE__ */ React5.createElement("div", { style: {
+    position: "absolute",
+    bottom: showDots ? "56px" : "28px",
+    left: "28px",
+    right: "28px",
+    zIndex: 5
+  } }, /* @__PURE__ */ React5.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__ */ React5.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__ */ React5.createElement("div", { style: {
+    position: "absolute",
+    bottom: "20px",
+    left: 0,
+    right: 0,
+    display: "flex",
+    justifyContent: "center",
+    gap: "6px",
+    zIndex: 5
+  } }, images.map((_, i) => /* @__PURE__ */ React5.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/FileUpload/FileUpload.jsx
+import React6, { useState as useState5, useRef } from "react";
+var FileUpload = ({
+  accept = "*",
+  multiple = true,
+  maxSizeMB = 5,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "16px",
+  label = "Drop files here or click to upload",
+  subLabel = "Supports any file up to",
+  onUpload = () => {
+  }
+}) => {
+  const [files, setFiles] = useState5([]);
+  const [dragging, setDragging] = useState5(false);
+  const [error, setError] = useState5("");
+  const inputRef = useRef(null);
+  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 formatSize = (bytes) => {
+    if (bytes < 1024) return bytes + " B";
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
+    return (bytes / (1024 * 1024)).toFixed(1) + " MB";
+  };
+  const getIcon = (type) => {
+    if (type.startsWith("image/")) return { path: "M21 19V5a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2zM8.5 13.5l2.5 3 3.5-4.5 4.5 6H5l3.5-4.5z", color: "#a78bfa" };
+    if (type.includes("pdf")) return { path: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6M16 13H8M16 17H8M10 9H8", color: "#f87171" };
+    if (type.includes("video")) return { path: "M23 7l-7 5 7 5V7zM1 5h15a2 2 0 012 2v10a2 2 0 01-2 2H1a2 2 0 01-2-2V7a2 2 0 012-2z", color: "#34d399" };
+    if (type.includes("audio")) return { path: "M9 18V5l12-2v13M9 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm12-2c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2z", color: "#fbbf24" };
+    return { path: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8zM14 2v6h6", color: "#94a3b8" };
+  };
+  const processFiles = (incoming) => {
+    setError("");
+    const valid = [];
+    for (const f of incoming) {
+      if (f.size > maxSizeMB * 1024 * 1024) {
+        setError(`"${f.name}" exceeds ${maxSizeMB}MB limit.`);
+        continue;
+      }
+      valid.push({ file: f, id: Math.random().toString(36).slice(2), progress: 0, done: false });
+    }
+    if (!valid.length) return;
+    const newFiles = multiple ? [...files, ...valid] : valid;
+    setFiles(newFiles);
+    valid.forEach(({ id }) => {
+      let p = 0;
+      const t = setInterval(() => {
+        p += Math.floor(Math.random() * 15) + 5;
+        if (p >= 100) {
+          p = 100;
+          clearInterval(t);
+          setFiles((prev) => prev.map((f) => f.id === id ? { ...f, progress: 100, done: true } : f));
+          onUpload(id);
+        } else {
+          setFiles((prev) => prev.map((f) => f.id === id ? { ...f, progress: p } : f));
+        }
+      }, 200);
+    });
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setDragging(false);
+    processFiles(Array.from(e.dataTransfer.files));
+  };
+  const removeFile = (id) => setFiles((prev) => prev.filter((f) => f.id !== id));
+  return /* @__PURE__ */ React6.createElement("div", { style: { width: "320px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.click();
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: handleDrop,
+      style: {
+        background: dragging ? alpha(accent, 0.1) : "rgba(255,255,255,0.03)",
+        border: `2px dashed ${dragging ? accent : "rgba(255,255,255,0.1)"}`,
+        borderRadius: radius,
+        padding: "32px 20px",
+        textAlign: "center",
+        cursor: "pointer",
+        transition: "all 0.2s"
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        style: { display: "none" },
+        onChange: (e) => processFiles(Array.from(e.target.files))
+      }
+    ),
+    /* @__PURE__ */ React6.createElement("div", { style: {
+      width: "48px",
+      height: "48px",
+      borderRadius: "14px",
+      background: alpha(accent, 0.12),
+      border: `1px solid ${alpha(accent, 0.25)}`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      margin: "0 auto 14px",
+      transition: "all 0.2s",
+      transform: dragging ? "scale(1.1)" : "scale(1)"
+    } }, /* @__PURE__ */ React6.createElement(
+      "svg",
+      {
+        width: "22",
+        height: "22",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React6.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" })
+    )),
+    /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "13px", fontWeight: "600", color: "#fff", margin: "0 0 4px" } }, label),
+    /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, subLabel, " ", maxSizeMB, "MB")
+  ), error && /* @__PURE__ */ React6.createElement("div", { style: {
+    marginTop: "10px",
+    padding: "9px 12px",
+    borderRadius: "10px",
+    background: "rgba(239,68,68,0.08)",
+    border: "1px solid rgba(239,68,68,0.2)",
+    display: "flex",
+    alignItems: "center",
+    gap: "8px"
+  } }, /* @__PURE__ */ React6.createElement(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#f87171",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ React6.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ React6.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ), /* @__PURE__ */ React6.createElement("span", { style: { fontSize: "11px", color: "#f87171" } }, error)), files.length > 0 && /* @__PURE__ */ React6.createElement("div", { style: { marginTop: "12px", display: "flex", flexDirection: "column", gap: "8px" } }, files.map(({ file, id, progress, done }) => {
+    const icon = getIcon(file.type);
+    const preview = file.type.startsWith("image/") ? URL.createObjectURL(file) : null;
+    return /* @__PURE__ */ React6.createElement("div", { key: id, style: {
+      background: "rgba(255,255,255,0.03)",
+      border: `1px solid ${done ? alpha(accent, 0.2) : "rgba(255,255,255,0.07)"}`,
+      borderRadius: "12px",
+      padding: "10px 12px",
+      transition: "border-color 0.3s"
+    } }, /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, /* @__PURE__ */ React6.createElement("div", { style: {
+      width: "36px",
+      height: "36px",
+      borderRadius: "8px",
+      flexShrink: 0,
+      background: preview ? `url(${preview}) center/cover` : alpha(icon.color, 0.12),
+      border: `1px solid ${alpha(icon.color, 0.2)}`,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden"
+    } }, !preview && /* @__PURE__ */ React6.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: icon.color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React6.createElement("path", { d: icon.path })
+    )), /* @__PURE__ */ React6.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React6.createElement("p", { style: {
+      fontSize: "12px",
+      fontWeight: "600",
+      color: "#fff",
+      margin: "0 0 2px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } }, file.name), /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.3)", margin: 0 } }, formatSize(file.size))), done ? /* @__PURE__ */ React6.createElement("div", { style: {
+      width: "22px",
+      height: "22px",
+      borderRadius: "50%",
+      background: "rgba(16,185,129,0.15)",
+      border: "1px solid rgba(16,185,129,0.3)",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0
+    } }, /* @__PURE__ */ React6.createElement(
+      "svg",
+      {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "#34d399",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React6.createElement("polyline", { points: "20 6 9 17 4 12" })
+    )) : /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        onClick: () => removeFile(id),
+        style: {
+          background: "transparent",
+          border: "none",
+          padding: "2px",
+          cursor: "pointer",
+          color: "rgba(255,255,255,0.25)",
+          flexShrink: 0,
+          transition: "color 0.2s"
+        },
+        onMouseEnter: (e) => e.currentTarget.style.color = "#f87171",
+        onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.25)"
+      },
+      /* @__PURE__ */ React6.createElement(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round"
+        },
+        /* @__PURE__ */ React6.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+      )
+    )), !done && /* @__PURE__ */ React6.createElement("div", { style: {
+      marginTop: "8px",
+      height: "3px",
+      background: "rgba(255,255,255,0.06)",
+      borderRadius: "2px",
+      overflow: "hidden"
+    } }, /* @__PURE__ */ React6.createElement("div", { style: {
+      height: "100%",
+      borderRadius: "2px",
+      width: `${progress}%`,
+      background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.6)})`,
+      transition: "width 0.2s ease"
+    } })));
+  })));
+};
+
+// src/components/ColorPicker/ColorPicker.jsx
+import React7, { useState as useState6 } from "react";
+var ColorPicker = ({
+  defaultColor = "#6366f1",
+  showOpacity = true,
+  showEyedropper = true,
+  showInput = true,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "16px",
+  onChange = () => {
+  },
+  swatches = [
+    "#6366f1",
+    "#8b5cf6",
+    "#a855f7",
+    "#ec4899",
+    "#f43f5e",
+    "#ef4444",
+    "#f97316",
+    "#f59e0b",
+    "#eab308",
+    "#84cc16",
+    "#22c55e",
+    "#10b981",
+    "#14b8a6",
+    "#06b6d4",
+    "#3b82f6",
+    "#0ea5e9",
+    "#64748b",
+    "#94a3b8",
+    "#ffffff",
+    "#000000"
+  ]
+}) => {
+  const [color, setColor] = useState6(defaultColor);
+  const [hex, setHex] = useState6(defaultColor);
+  const [opacity, setOpacity] = useState6(100);
+  const [inputErr, setInputErr] = useState6(false);
+  const [copied, setCopied] = useState6(false);
+  const alpha = (hexVal, op) => {
+    const r = parseInt(hexVal.slice(1, 3), 16);
+    const g = parseInt(hexVal.slice(3, 5), 16);
+    const b = parseInt(hexVal.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  const isValidHex = (v) => /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(v);
+  const applyColor = (val) => {
+    if (!isValidHex(val)) {
+      setInputErr(true);
+      return;
+    }
+    setInputErr(false);
+    setColor(val);
+    setHex(val);
+    onChange({ hex: val, opacity, rgba: alpha(val, opacity / 100) });
+  };
+  const pickSwatch = (val) => {
+    setColor(val);
+    setHex(val);
+    setInputErr(false);
+    onChange({ hex: val, opacity, rgba: alpha(val, opacity / 100) });
+  };
+  const handleOpacity = (v) => {
+    setOpacity(v);
+    onChange({ hex: color, opacity: v, rgba: alpha(color, v / 100) });
+  };
+  const copyHex = () => {
+    var _a;
+    (_a = navigator.clipboard) == null ? void 0 : _a.writeText(hex).catch(() => {
+    });
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  const hueGradient = "linear-gradient(90deg,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)";
+  return /* @__PURE__ */ React7.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "20px",
+    width: "260px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
+    height: "52px",
+    borderRadius: "12px",
+    marginBottom: "16px",
+    background: alpha(color, opacity / 100),
+    border: "1px solid rgba(255,255,255,0.08)",
+    position: "relative",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ React7.createElement("div", { style: {
+    position: "absolute",
+    inset: 0,
+    zIndex: 0,
+    backgroundImage: "linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%)",
+    backgroundSize: "10px 10px",
+    backgroundPosition: "0 0,0 5px,5px -5px,-5px 0",
+    opacity: 0.3
+  } }), /* @__PURE__ */ React7.createElement("div", { style: { position: "absolute", inset: 0, background: alpha(color, opacity / 100) } })), /* @__PURE__ */ React7.createElement("div", { style: { position: "relative", marginBottom: "12px" } }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "range",
+      min: "0",
+      max: "360",
+      defaultValue: "240",
+      onChange: (e) => {
+        const h = e.target.value;
+        const c = `hsl(${h},80%,60%)`;
+        const el = document.createElement("div");
+        el.style.color = c;
+        document.body.appendChild(el);
+        const rgb = getComputedStyle(el).color;
+        document.body.removeChild(el);
+        const [r, g, b] = rgb.match(/\d+/g).map(Number);
+        const hex6 = "#" + [r, g, b].map((n) => n.toString(16).padStart(2, "0")).join("");
+        pickSwatch(hex6);
+      },
+      style: {
+        width: "100%",
+        height: "10px",
+        borderRadius: "5px",
+        appearance: "none",
+        WebkitAppearance: "none",
+        background: hueGradient,
+        cursor: "pointer",
+        outline: "none",
+        border: "none"
+      }
+    }
+  )), showOpacity && /* @__PURE__ */ React7.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      type: "range",
+      min: "0",
+      max: "100",
+      value: opacity,
+      onChange: (e) => handleOpacity(Number(e.target.value)),
+      style: {
+        width: "100%",
+        height: "10px",
+        borderRadius: "5px",
+        appearance: "none",
+        WebkitAppearance: "none",
+        background: `linear-gradient(90deg, transparent, ${color})`,
+        cursor: "pointer",
+        outline: "none",
+        border: "none"
+      }
+    }
+  ), /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "4px" } }, /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)" } }, "Opacity"), /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.45)", fontWeight: "600" } }, opacity, "%"))), showInput && /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", gap: "8px", marginBottom: "16px", alignItems: "center" } }, /* @__PURE__ */ React7.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: color,
+    border: "1px solid rgba(255,255,255,0.1)"
+  } }), /* @__PURE__ */ React7.createElement(
+    "input",
+    {
+      value: hex,
+      onChange: (e) => {
+        setHex(e.target.value);
+        setInputErr(false);
+      },
+      onBlur: (e) => applyColor(e.target.value),
+      onKeyDown: (e) => e.key === "Enter" && applyColor(hex),
+      placeholder: "#000000",
+      style: {
+        flex: 1,
+        background: "rgba(255,255,255,0.05)",
+        border: `1px solid ${inputErr ? "rgba(239,68,68,0.6)" : "rgba(255,255,255,0.1)"}`,
+        borderRadius: "8px",
+        padding: "7px 10px",
+        fontSize: "12px",
+        fontFamily: "monospace",
+        color: inputErr ? "#f87171" : "#fff",
+        outline: "none"
+      }
+    }
+  ), /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      onClick: copyHex,
+      title: "Copy hex",
+      style: {
+        width: "32px",
+        height: "32px",
+        borderRadius: "8px",
+        flexShrink: 0,
+        background: copied ? "rgba(16,185,129,0.15)" : "rgba(255,255,255,0.05)",
+        border: `1px solid ${copied ? "rgba(16,185,129,0.3)" : "rgba(255,255,255,0.1)"}`,
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: copied ? "#34d399" : "rgba(255,255,255,0.4)",
+        transition: "all 0.2s"
+      }
+    },
+    copied ? /* @__PURE__ */ React7.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React7.createElement("polyline", { points: "20 6 9 17 4 12" })) : /* @__PURE__ */ React7.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ React7.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), /* @__PURE__ */ React7.createElement("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" }))
+  )), /* @__PURE__ */ React7.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.06)", marginBottom: "14px" } }), /* @__PURE__ */ React7.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "7px" } }, swatches.map((s) => /* @__PURE__ */ React7.createElement(
+    "button",
+    {
+      key: s,
+      onClick: () => pickSwatch(s),
+      title: s,
+      style: {
+        width: "22px",
+        height: "22px",
+        borderRadius: "6px",
+        background: s,
+        border: `2px solid ${color === s ? "#fff" : "transparent"}`,
+        cursor: "pointer",
+        padding: 0,
+        transition: "transform 0.15s, border-color 0.15s",
+        outline: "none",
+        boxShadow: s === "#ffffff" ? "inset 0 0 0 1px rgba(0,0,0,0.15)" : "none"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.2)",
+      onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)"
+    }
+  ))), /* @__PURE__ */ React7.createElement("div", { style: {
+    marginTop: "14px",
+    padding: "8px 10px",
+    borderRadius: "8px",
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center"
+  } }, /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "RGBA"), /* @__PURE__ */ React7.createElement("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "rgba(255,255,255,0.5)" } }, alpha(color, opacity / 100))));
+};
+
+// src/components/AnimatedForm/AnimatedForm.jsx
+import React8, { useState as useState7 } from "react";
+var AnimatedForm = ({
+  title = "Contact Us",
+  description = "We'll get back to you shortly",
+  submitText = "Send Message",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onSubmit = () => {
+  }
+}) => {
+  const [name, setName] = useState7("");
+  const [email, setEmail] = useState7("");
+  const [message, setMessage] = useState7("");
+  const [hovered, setHovered] = useState7(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__ */ React8.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        padding: "28px",
+        width: "400px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ React8.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
+    /* @__PURE__ */ React8.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
+    /* @__PURE__ */ React8.createElement(
+      "input",
+      {
+        type: "text",
+        placeholder: "Your Name",
+        value: name,
+        onChange: (e) => setName(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "16px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ React8.createElement(
+      "input",
+      {
+        type: "email",
+        placeholder: "Your Email",
+        value: email,
+        onChange: (e) => setEmail(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "16px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit"
+        }
+      }
+    ),
+    /* @__PURE__ */ React8.createElement(
+      "textarea",
+      {
+        placeholder: "Your Message",
+        value: message,
+        onChange: (e) => setMessage(e.target.value),
+        style: {
+          width: "100%",
+          padding: "12px",
+          borderRadius: "10px",
+          border: "1px solid rgba(255,255,255,0.1)",
+          background: "#1e293b",
+          color: "#fff",
+          fontSize: "14px",
+          marginBottom: "24px",
+          outline: "none",
+          transition: "border-color 0.2s",
+          fontFamily: "inherit",
+          minHeight: "120px",
+          resize: "vertical"
+        }
+      }
+    ),
+    /* @__PURE__ */ React8.createElement(
+      "button",
+      {
+        onClick: () => onSubmit({ name, email, message }),
+        style: {
+          width: "100%",
+          padding: "13px",
+          borderRadius: "12px",
+          border: "none",
+          background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
+          color: "#fff",
+          fontSize: "14px",
+          fontWeight: "700",
+          cursor: "pointer",
+          fontFamily: "inherit"
+        }
+      },
+      submitText
+    )
+  );
+};
+
+// src/components/Card/Card.jsx
+import React9, { useState as useState8 } from "react";
+var Card = ({
+  title = "Performance",
+  description = "Real-time metrics with live dashboard updates every second.",
+  icon = "\u26A1",
+  tag = "Active",
+  onClick
+}) => {
+  const [hovered, setHovered] = useState8(false);
+  return /* @__PURE__ */ React9.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"
+      }
+    },
+    /* @__PURE__ */ React9.createElement("div", { style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      height: "3px",
+      background: "#1D9E75",
+      borderRadius: "12px 12px 0 0"
+    } }),
+    /* @__PURE__ */ React9.createElement("div", { style: {
+      width: 40,
+      height: 40,
+      borderRadius: 8,
+      background: "#E1F5EE",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: 18,
+      marginBottom: 14
+    } }, icon),
+    /* @__PURE__ */ React9.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
+    /* @__PURE__ */ React9.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
+    /* @__PURE__ */ React9.createElement("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      borderTop: "0.5px solid #0000001a",
+      paddingTop: 12
+    } }, /* @__PURE__ */ React9.createElement("span", { style: {
+      fontSize: 11,
+      fontWeight: 500,
+      padding: "3px 9px",
+      borderRadius: 20,
+      background: "#E1F5EE",
+      color: "#0F6E56"
+    } }, tag), /* @__PURE__ */ React9.createElement("span", { style: {
+      fontSize: 14,
+      color: "#999",
+      display: "inline-block",
+      transition: "transform 0.2s",
+      transform: hovered ? "translateX(3px)" : "translateX(0)"
+    } }, "\u2192"))
+  );
+};
+
+// src/components/Button/Button.jsx
+import React10, { useState as useState9 } from "react";
+var Button = ({
+  text = "Click Me",
+  variant = "gradient",
+  // primary | outline | ghost | gradient
+  size = "md",
+  // sm | md | lg
+  icon,
+  loading = false,
+  disabled = false,
+  onClick
+}) => {
+  const [hovered, setHovered] = useState9(false);
+  const variants = {
+    primary: {
+      background: "#2563eb",
+      color: "#fff",
+      border: "none"
+    },
+    outline: {
+      background: "transparent",
+      color: "#2563eb",
+      border: "1px solid #2563eb"
+    },
+    ghost: {
+      background: "transparent",
+      color: "#111",
+      border: "none"
+    },
+    gradient: {
+      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
+      color: "#fff",
+      border: "none"
+    }
+  };
+  const sizes = {
+    sm: { padding: "6px 12px", fontSize: "12px" },
+    md: { padding: "10px 18px", fontSize: "14px" },
+    lg: { padding: "14px 24px", fontSize: "16px" }
+  };
+  return /* @__PURE__ */ React10.createElement(
+    "button",
+    {
+      onClick,
+      disabled: disabled || loading,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        ...variants[variant],
+        ...sizes[size],
+        borderRadius: "10px",
+        cursor: disabled ? "not-allowed" : "pointer",
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        fontWeight: 600,
+        fontFamily: "sans-serif",
+        // 🔥 Animation
+        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
+        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
+        transition: "all 0.2s ease",
+        opacity: disabled ? 0.6 : 1,
+        position: "relative",
+        overflow: "hidden"
+      }
+    },
+    /* @__PURE__ */ React10.createElement(
+      "span",
+      {
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: "rgba(255,255,255,0.2)",
+          opacity: hovered ? 1 : 0,
+          transition: "opacity 0.3s"
+        }
+      }
+    ),
+    loading ? /* @__PURE__ */ React10.createElement("span", null, "Loading...") : /* @__PURE__ */ React10.createElement(React10.Fragment, null, icon && /* @__PURE__ */ React10.createElement("span", null, icon), /* @__PURE__ */ React10.createElement("span", null, text))
+  );
+};
+
+// src/components/AnimatedButton/AnimatedButton.jsx
+import React11, { useState as useState10 } from "react";
+var AnimatedButton = ({
+  text = "Click Me!",
+  bg = "#7c3aed",
+  color = "white",
+  size = "md",
+  width = "auto",
+  radius = "12px",
+  border = "none",
+  weight = "600",
+  shadow = "0 4px 14px rgba(124,58,237,0.4)",
+  onClick
+}) => {
+  const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
+  const [hovered, setHovered] = useState10(false);
+  return /* @__PURE__ */ React11.createElement(
+    "button",
+    {
+      onClick,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: hovered ? "#6b21a8" : bg,
+        color,
+        padding: sizes[size],
+        width,
+        border,
+        borderRadius: radius,
+        cursor: "pointer",
+        fontWeight: weight,
+        fontSize: "15px",
+        boxShadow: shadow,
+        transform: hovered ? "scale(1.05)" : "scale(1)",
+        transition: "transform 0.2s ease, background 0.2s ease",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: "system-ui, sans-serif",
+        letterSpacing: "0.02em"
+      }
+    },
+    text
+  );
+};
+export {
+  AnimatedButton,
+  AnimatedForm,
+  BackgoundImageSlider,
+  Button,
+  Card,
+  Charts,
+  ColorPicker,
+  FileUpload,
+  Footer,
+  ImageCard,
+  Navbar
+};