bhoomi-virtual-ui-library 1.0.7 → 1.0.8

package/dist/index.js

@@ -31,6 +31,7 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
+  DualRingLoader: () => DualRingLoader,
   ECommerceCard: () => ECommerceCard,
   PricingCard: () => PricingCard,
   Profilecard: () => Profilecard,
@@ -717,10 +718,88 @@ var ShoesCard = ({
     fontFamily: "system-ui,sans-serif"
   } }, "Buy Now")));
 };
+
+// src/components/DualRingLoader/DualRingLoader.jsx
+var import_react7 = __toESM(require("react"));
+var DualRingLoader = ({
+  size = 40,
+  outerColor = "#7F77DD",
+  innerColor = "#D85A30",
+  speed = 1,
+  label = null
+}) => {
+  const outerRef = (0, import_react7.useRef)(null);
+  const innerRef = (0, import_react7.useRef)(null);
+  const borderWidth = Math.max(2, Math.round(size * 0.08));
+  const innerInset = Math.round(size * 0.16);
+  const innerSize = size - innerInset * 2;
+  (0, import_react7.useEffect)(() => {
+    const outerDuration = (0.8 / speed).toFixed(2) + "s";
+    const innerDuration = (1.1 / speed).toFixed(2) + "s";
+    if (outerRef.current) {
+      outerRef.current.style.animation = "dual-ring-spin " + outerDuration + " linear infinite";
+    }
+    if (innerRef.current) {
+      innerRef.current.style.animation = "dual-ring-spin " + innerDuration + " linear infinite reverse";
+    }
+  }, [speed]);
+  return /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement("style", null, `
+        @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=DM+Mono:wght@400;500&display=swap');
+        @keyframes dual-ring-spin { to { transform: rotate(360deg); } }
+      `), /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "inline-flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ import_react7.default.createElement(
+    "div",
+    {
+      role: "status",
+      "aria-label": label || "Loading",
+      style: {
+        width: size + "px",
+        height: size + "px",
+        position: "relative",
+        flexShrink: 0
+      }
+    },
+    /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        ref: outerRef,
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: "50%",
+          border: borderWidth + "px solid transparent",
+          borderTopColor: outerColor
+        }
+      }
+    ),
+    /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        ref: innerRef,
+        style: {
+          position: "absolute",
+          top: innerInset + "px",
+          left: innerInset + "px",
+          width: innerSize + "px",
+          height: innerSize + "px",
+          borderRadius: "50%",
+          border: borderWidth + "px solid transparent",
+          borderBottomColor: innerColor
+        }
+      }
+    )
+  ), label && /* @__PURE__ */ import_react7.default.createElement("span", { style: {
+    fontFamily: "'DM Mono', monospace",
+    fontSize: "11px",
+    letterSpacing: "0.1em",
+    color: "#999",
+    textTransform: "uppercase"
+  } }, label)));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
   Card,
+  DualRingLoader,
   ECommerceCard,
   PricingCard,
   Profilecard,

package/dist/index.mjs

@@ -677,9 +677,87 @@ var ShoesCard = ({
     fontFamily: "system-ui,sans-serif"
   } }, "Buy Now")));
 };
+
+// src/components/DualRingLoader/DualRingLoader.jsx
+import React7, { useState as useState4, useEffect, useRef } from "react";
+var DualRingLoader = ({
+  size = 40,
+  outerColor = "#7F77DD",
+  innerColor = "#D85A30",
+  speed = 1,
+  label = null
+}) => {
+  const outerRef = useRef(null);
+  const innerRef = useRef(null);
+  const borderWidth = Math.max(2, Math.round(size * 0.08));
+  const innerInset = Math.round(size * 0.16);
+  const innerSize = size - innerInset * 2;
+  useEffect(() => {
+    const outerDuration = (0.8 / speed).toFixed(2) + "s";
+    const innerDuration = (1.1 / speed).toFixed(2) + "s";
+    if (outerRef.current) {
+      outerRef.current.style.animation = "dual-ring-spin " + outerDuration + " linear infinite";
+    }
+    if (innerRef.current) {
+      innerRef.current.style.animation = "dual-ring-spin " + innerDuration + " linear infinite reverse";
+    }
+  }, [speed]);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("style", null, `
+        @import url('https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=DM+Mono:wght@400;500&display=swap');
+        @keyframes dual-ring-spin { to { transform: rotate(360deg); } }
+      `), /* @__PURE__ */ React7.createElement("div", { style: { display: "inline-flex", flexDirection: "column", alignItems: "center", gap: "12px" } }, /* @__PURE__ */ React7.createElement(
+    "div",
+    {
+      role: "status",
+      "aria-label": label || "Loading",
+      style: {
+        width: size + "px",
+        height: size + "px",
+        position: "relative",
+        flexShrink: 0
+      }
+    },
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        ref: outerRef,
+        style: {
+          position: "absolute",
+          inset: 0,
+          borderRadius: "50%",
+          border: borderWidth + "px solid transparent",
+          borderTopColor: outerColor
+        }
+      }
+    ),
+    /* @__PURE__ */ React7.createElement(
+      "div",
+      {
+        ref: innerRef,
+        style: {
+          position: "absolute",
+          top: innerInset + "px",
+          left: innerInset + "px",
+          width: innerSize + "px",
+          height: innerSize + "px",
+          borderRadius: "50%",
+          border: borderWidth + "px solid transparent",
+          borderBottomColor: innerColor
+        }
+      }
+    )
+  ), label && /* @__PURE__ */ React7.createElement("span", { style: {
+    fontFamily: "'DM Mono', monospace",
+    fontSize: "11px",
+    letterSpacing: "0.1em",
+    color: "#999",
+    textTransform: "uppercase"
+  } }, label)));
+};
 export {
   Button,
   Card,
+  DualRingLoader,
   ECommerceCard,
   PricingCard,
   Profilecard,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bhoomi-virtual-ui-library",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "files": [