virtual-ui-lib 1.0.58 → 1.0.59

package/dist/index.js

@@ -623,8 +623,111 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
 
 // src/components/Loader/Loader.jsx
 var import_react13 = __toESM(require("react"));
-var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
-  return /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
+var Loader = ({
+  type = "spinner",
+  size = 48,
+  accent = "#6366f1",
+  bg = "transparent",
+  label = "",
+  speed = 1
+}) => {
+  const [dots, setDots] = (0, import_react13.useState)(0);
+  const [progress, setProgress] = (0, import_react13.useState)(0);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  (0, import_react13.useEffect)(() => {
+    if (type === "dots") {
+      const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
+      return () => clearInterval(t);
+    }
+    if (type === "bar") {
+      const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
+      return () => clearInterval(t);
+    }
+  }, [type, speed]);
+  const dur = `${1 / speed}s`;
+  const wrapStyle = {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px",
+    background: bg,
+    padding: bg !== "transparent" ? "24px" : "0",
+    borderRadius: "16px",
+    fontFamily: "system-ui, sans-serif"
+  };
+  const labelEl = label ? /* @__PURE__ */ import_react13.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
+  if (type === "spinner") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react13.default.createElement(
+    "circle",
+    {
+      cx: "24",
+      cy: "24",
+      r: "20",
+      fill: "none",
+      stroke: alpha(accent, 0.15),
+      strokeWidth: "4"
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement(
+    "circle",
+    {
+      cx: "24",
+      cy: "24",
+      r: "20",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeDasharray: "31.4 94.2",
+      style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
+    }
+  ), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
+  if (type === "pulse") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    background: alpha(accent, 0.2),
+    animation: `pulse ${dur} ease-out infinite`
+  } }), /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+    position: "absolute",
+    inset: "25%",
+    borderRadius: "50%",
+    background: accent
+  } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
+  if (type === "dots") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: {
+    width: size / 5,
+    height: size / 5,
+    borderRadius: "50%",
+    background: dots === i ? accent : alpha(accent, 0.25),
+    transition: "background 0.2s"
+  } }))), labelEl);
+  if (type === "bar") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+    width: size * 3,
+    height: size / 8,
+    background: alpha(accent, 0.15),
+    borderRadius: "99px",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+    height: "100%",
+    borderRadius: "99px",
+    background: accent,
+    width: `${progress}%`,
+    transition: "width 0.03s linear"
+  } })), labelEl);
+  if (type === "ring") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    border: `4px solid ${alpha(accent, 0.15)}`,
+    borderTop: `4px solid ${accent}`,
+    borderRight: `4px solid ${accent}`,
+    animation: `spin ${dur} linear infinite`
+  } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
+  return null;
 };
 
 // src/components/Avatar/Avatar.jsx

package/dist/index.mjs

@@ -569,9 +569,112 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
 };
 
 // src/components/Loader/Loader.jsx
-import React13 from "react";
-var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
-  return /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ React13.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
+import React13, { useEffect as useEffect4, useState as useState10 } from "react";
+var Loader = ({
+  type = "spinner",
+  size = 48,
+  accent = "#6366f1",
+  bg = "transparent",
+  label = "",
+  speed = 1
+}) => {
+  const [dots, setDots] = useState10(0);
+  const [progress, setProgress] = useState10(0);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    return `rgba(${r},${g},${b},${op})`;
+  };
+  useEffect4(() => {
+    if (type === "dots") {
+      const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
+      return () => clearInterval(t);
+    }
+    if (type === "bar") {
+      const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
+      return () => clearInterval(t);
+    }
+  }, [type, speed]);
+  const dur = `${1 / speed}s`;
+  const wrapStyle = {
+    display: "inline-flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "12px",
+    background: bg,
+    padding: bg !== "transparent" ? "24px" : "0",
+    borderRadius: "16px",
+    fontFamily: "system-ui, sans-serif"
+  };
+  const labelEl = label ? /* @__PURE__ */ React13.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
+  if (type === "spinner") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React13.createElement(
+    "circle",
+    {
+      cx: "24",
+      cy: "24",
+      r: "20",
+      fill: "none",
+      stroke: alpha(accent, 0.15),
+      strokeWidth: "4"
+    }
+  ), /* @__PURE__ */ React13.createElement(
+    "circle",
+    {
+      cx: "24",
+      cy: "24",
+      r: "20",
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "4",
+      strokeLinecap: "round",
+      strokeDasharray: "31.4 94.2",
+      style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
+    }
+  ), /* @__PURE__ */ React13.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
+  if (type === "pulse") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ React13.createElement("div", { style: {
+    position: "absolute",
+    inset: 0,
+    borderRadius: "50%",
+    background: alpha(accent, 0.2),
+    animation: `pulse ${dur} ease-out infinite`
+  } }), /* @__PURE__ */ React13.createElement("div", { style: {
+    position: "absolute",
+    inset: "25%",
+    borderRadius: "50%",
+    background: accent
+  } }), /* @__PURE__ */ React13.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
+  if (type === "dots") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React13.createElement("div", { key: i, style: {
+    width: size / 5,
+    height: size / 5,
+    borderRadius: "50%",
+    background: dots === i ? accent : alpha(accent, 0.25),
+    transition: "background 0.2s"
+  } }))), labelEl);
+  if (type === "bar") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: {
+    width: size * 3,
+    height: size / 8,
+    background: alpha(accent, 0.15),
+    borderRadius: "99px",
+    overflow: "hidden"
+  } }, /* @__PURE__ */ React13.createElement("div", { style: {
+    height: "100%",
+    borderRadius: "99px",
+    background: accent,
+    width: `${progress}%`,
+    transition: "width 0.03s linear"
+  } })), labelEl);
+  if (type === "ring") return /* @__PURE__ */ React13.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React13.createElement("div", { style: {
+    width: size,
+    height: size,
+    borderRadius: "50%",
+    border: `4px solid ${alpha(accent, 0.15)}`,
+    borderTop: `4px solid ${accent}`,
+    borderRight: `4px solid ${accent}`,
+    animation: `spin ${dur} linear infinite`
+  } }), /* @__PURE__ */ React13.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
+  return null;
 };
 
 // src/components/Avatar/Avatar.jsx
@@ -615,7 +718,7 @@ var DividerLine = ({
 };
 
 // src/components/Tabs/Tabs.jsx
-import React16, { useState as useState10 } from "react";
+import React16, { useState as useState11 } from "react";
 var Tabs = ({
   tabs = [
     { label: "Tab 1", content: "Content for Tab 1" },
@@ -627,7 +730,7 @@ var Tabs = ({
   textColor = "#f1f5f9",
   radius = "8px"
 }) => {
-  const [activeTab, setActiveTab] = useState10(0);
+  const [activeTab, setActiveTab] = useState11(0);
   return /* @__PURE__ */ React16.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React16.createElement(
     "button",
     {
@@ -649,7 +752,7 @@ var Tabs = ({
 };
 
 // src/components/NotificationToast/NotificationToast.jsx
-import React17, { useState as useState11, useEffect as useEffect4 } from "react";
+import React17, { useState as useState12, useEffect as useEffect5 } from "react";
 var NotificationToast = ({
   title = "New Message",
   message = "You have a new notification from the team.",
@@ -660,8 +763,8 @@ var NotificationToast = ({
   radius = "14px",
   showProgress = true
 }) => {
-  const [visible, setVisible] = useState11(true);
-  const [progress, setProgress] = useState11(100);
+  const [visible, setVisible] = useState12(true);
+  const [progress, setProgress] = useState12(100);
   const typeColors = {
     success: "#10b981",
     error: "#ef4444",
@@ -675,7 +778,7 @@ var NotificationToast = ({
     info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
   };
   const color = typeColors[type] || accent;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!showProgress) return;
     const step = 100 / (duration / 50);
     const timer = setInterval(() => {
@@ -769,7 +872,7 @@ var NotificationToast = ({
 };
 
 // src/components/AvatarCard/AvatarCard.jsx
-import React18, { useState as useState12 } from "react";
+import React18, { useState as useState13 } from "react";
 var AvatarCard = ({
   name = "Aryan Sharma",
   role = "Frontend Developer",
@@ -782,7 +885,7 @@ var AvatarCard = ({
   bg = "#0f172a",
   radius = "20px"
 }) => {
-  const [followed, setFollowed] = useState12(false);
+  const [followed, setFollowed] = useState13(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);

package/package.json

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