virtual-ui-lib 1.0.69 → 1.0.71

package/dist/index.js

@@ -32,6 +32,8 @@ __export(index_exports, {
   AvatarCard: () => AvatarCard,
   BackgoundImageSlider: () => BackgoundImageSlider,
   Charts: () => Charts,
+  ColorPicker: () => ColorPicker,
+  FileUpload: () => FileUpload,
   Footer: () => Footer,
   ImageCard: () => ImageCard,
   ImageSlider: () => ImageSlider,
@@ -2494,11 +2496,510 @@ var InvoiceCard = ({
     )
   )));
 };
+
+// src/components/FileUpload/FileUpload.jsx
+var import_react15 = __toESM(require("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] = (0, import_react15.useState)([]);
+  const [dragging, setDragging] = (0, import_react15.useState)(false);
+  const [error, setError] = (0, import_react15.useState)("");
+  const inputRef = (0, import_react15.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__ */ import_react15.default.createElement("div", { style: { width: "320px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        style: { display: "none" },
+        onChange: (e) => processFiles(Array.from(e.target.files))
+      }
+    ),
+    /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+      "svg",
+      {
+        width: "22",
+        height: "22",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ import_react15.default.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" })
+    )),
+    /* @__PURE__ */ import_react15.default.createElement("p", { style: { fontSize: "13px", fontWeight: "600", color: "#fff", margin: "0 0 4px" } }, label),
+    /* @__PURE__ */ import_react15.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, subLabel, " ", maxSizeMB, "MB")
+  ), error && /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#f87171",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ import_react15.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ import_react15.default.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ import_react15.default.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ), /* @__PURE__ */ import_react15.default.createElement("span", { style: { fontSize: "11px", color: "#f87171" } }, error)), files.length > 0 && /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.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__ */ import_react15.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: icon.color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ import_react15.default.createElement("path", { d: icon.path })
+    )), /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react15.default.createElement("p", { style: {
+      fontSize: "12px",
+      fontWeight: "600",
+      color: "#fff",
+      margin: "0 0 2px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } }, file.name), /* @__PURE__ */ import_react15.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.3)", margin: 0 } }, formatSize(file.size))), done ? /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+      "svg",
+      {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "#34d399",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ import_react15.default.createElement("polyline", { points: "20 6 9 17 4 12" })
+    )) : /* @__PURE__ */ import_react15.default.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__ */ import_react15.default.createElement(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round"
+        },
+        /* @__PURE__ */ import_react15.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+      )
+    )), !done && /* @__PURE__ */ import_react15.default.createElement("div", { style: {
+      marginTop: "8px",
+      height: "3px",
+      background: "rgba(255,255,255,0.06)",
+      borderRadius: "2px",
+      overflow: "hidden"
+    } }, /* @__PURE__ */ import_react15.default.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
+var import_react16 = __toESM(require("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] = (0, import_react16.useState)(defaultColor);
+  const [hex, setHex] = (0, import_react16.useState)(defaultColor);
+  const [opacity, setOpacity] = (0, import_react16.useState)(100);
+  const [inputErr, setInputErr] = (0, import_react16.useState)(false);
+  const [copied, setCopied] = (0, import_react16.useState)(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__ */ import_react16.default.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__ */ import_react16.default.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__ */ import_react16.default.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__ */ import_react16.default.createElement("div", { style: { position: "absolute", inset: 0, background: alpha(color, opacity / 100) } })), /* @__PURE__ */ import_react16.default.createElement("div", { style: { position: "relative", marginBottom: "12px" } }, /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "4px" } }, /* @__PURE__ */ import_react16.default.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)" } }, "Opacity"), /* @__PURE__ */ import_react16.default.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.45)", fontWeight: "600" } }, opacity, "%"))), showInput && /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", gap: "8px", marginBottom: "16px", alignItems: "center" } }, /* @__PURE__ */ import_react16.default.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: color,
+    border: "1px solid rgba(255,255,255,0.1)"
+  } }), /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.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__ */ import_react16.default.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ import_react16.default.createElement("polyline", { points: "20 6 9 17 4 12" })) : /* @__PURE__ */ import_react16.default.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ import_react16.default.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), /* @__PURE__ */ import_react16.default.createElement("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" }))
+  )), /* @__PURE__ */ import_react16.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.06)", marginBottom: "14px" } }), /* @__PURE__ */ import_react16.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "7px" } }, swatches.map((s) => /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.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__ */ import_react16.default.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "RGBA"), /* @__PURE__ */ import_react16.default.createElement("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "rgba(255,255,255,0.5)" } }, alpha(color, opacity / 100))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarCard,
   BackgoundImageSlider,
   Charts,
+  ColorPicker,
+  FileUpload,
   Footer,
   ImageCard,
   ImageSlider,

package/dist/index.mjs

@@ -2446,10 +2446,509 @@ var InvoiceCard = ({
     )
   )));
 };
+
+// src/components/FileUpload/FileUpload.jsx
+import React15, { useState as useState13, useRef as useRef2 } 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] = useState13([]);
+  const [dragging, setDragging] = useState13(false);
+  const [error, setError] = useState13("");
+  const inputRef = useRef2(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__ */ React15.createElement("div", { style: { width: "320px", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React15.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__ */ React15.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        style: { display: "none" },
+        onChange: (e) => processFiles(Array.from(e.target.files))
+      }
+    ),
+    /* @__PURE__ */ React15.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__ */ React15.createElement(
+      "svg",
+      {
+        width: "22",
+        height: "22",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: accent,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React15.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12" })
+    )),
+    /* @__PURE__ */ React15.createElement("p", { style: { fontSize: "13px", fontWeight: "600", color: "#fff", margin: "0 0 4px" } }, label),
+    /* @__PURE__ */ React15.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, subLabel, " ", maxSizeMB, "MB")
+  ), error && /* @__PURE__ */ React15.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__ */ React15.createElement(
+    "svg",
+    {
+      width: "13",
+      height: "13",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "#f87171",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ React15.createElement("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ React15.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+    /* @__PURE__ */ React15.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+  ), /* @__PURE__ */ React15.createElement("span", { style: { fontSize: "11px", color: "#f87171" } }, error)), files.length > 0 && /* @__PURE__ */ React15.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__ */ React15.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__ */ React15.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px" } }, /* @__PURE__ */ React15.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__ */ React15.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: icon.color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React15.createElement("path", { d: icon.path })
+    )), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ React15.createElement("p", { style: {
+      fontSize: "12px",
+      fontWeight: "600",
+      color: "#fff",
+      margin: "0 0 2px",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    } }, file.name), /* @__PURE__ */ React15.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.3)", margin: 0 } }, formatSize(file.size))), done ? /* @__PURE__ */ React15.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__ */ React15.createElement(
+      "svg",
+      {
+        width: "10",
+        height: "10",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "#34d399",
+        strokeWidth: "3",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React15.createElement("polyline", { points: "20 6 9 17 4 12" })
+    )) : /* @__PURE__ */ React15.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__ */ React15.createElement(
+        "svg",
+        {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2.5",
+          strokeLinecap: "round"
+        },
+        /* @__PURE__ */ React15.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
+      )
+    )), !done && /* @__PURE__ */ React15.createElement("div", { style: {
+      marginTop: "8px",
+      height: "3px",
+      background: "rgba(255,255,255,0.06)",
+      borderRadius: "2px",
+      overflow: "hidden"
+    } }, /* @__PURE__ */ React15.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 React16, { useState as useState14 } 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] = useState14(defaultColor);
+  const [hex, setHex] = useState14(defaultColor);
+  const [opacity, setOpacity] = useState14(100);
+  const [inputErr, setInputErr] = useState14(false);
+  const [copied, setCopied] = useState14(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__ */ React16.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__ */ React16.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__ */ React16.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__ */ React16.createElement("div", { style: { position: "absolute", inset: 0, background: alpha(color, opacity / 100) } })), /* @__PURE__ */ React16.createElement("div", { style: { position: "relative", marginBottom: "12px" } }, /* @__PURE__ */ React16.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__ */ React16.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React16.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__ */ React16.createElement("div", { style: { display: "flex", justifyContent: "space-between", marginTop: "4px" } }, /* @__PURE__ */ React16.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)" } }, "Opacity"), /* @__PURE__ */ React16.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.45)", fontWeight: "600" } }, opacity, "%"))), showInput && /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", gap: "8px", marginBottom: "16px", alignItems: "center" } }, /* @__PURE__ */ React16.createElement("div", { style: {
+    width: "32px",
+    height: "32px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: color,
+    border: "1px solid rgba(255,255,255,0.1)"
+  } }), /* @__PURE__ */ React16.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__ */ React16.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__ */ React16.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }, /* @__PURE__ */ React16.createElement("polyline", { points: "20 6 9 17 4 12" })) : /* @__PURE__ */ React16.createElement("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }, /* @__PURE__ */ React16.createElement("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2" }), /* @__PURE__ */ React16.createElement("path", { d: "M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" }))
+  )), /* @__PURE__ */ React16.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.06)", marginBottom: "14px" } }), /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", flexWrap: "wrap", gap: "7px" } }, swatches.map((s) => /* @__PURE__ */ React16.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__ */ React16.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__ */ React16.createElement("span", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", fontWeight: "600", textTransform: "uppercase", letterSpacing: "0.5px" } }, "RGBA"), /* @__PURE__ */ React16.createElement("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "rgba(255,255,255,0.5)" } }, alpha(color, opacity / 100))));
+};
 export {
   AvatarCard,
   BackgoundImageSlider,
   Charts,
+  ColorPicker,
+  FileUpload,
   Footer,
   ImageCard,
   ImageSlider,

package/package.json

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