bhoomi-virtual-ui-library 1.0.6 → 1.0.8

package/dist/index.js

@@ -31,9 +31,11 @@ var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
   Card: () => Card,
+  DualRingLoader: () => DualRingLoader,
   ECommerceCard: () => ECommerceCard,
   PricingCard: () => PricingCard,
-  Profilecard: () => Profilecard
+  Profilecard: () => Profilecard,
+  ShoesCard: () => ShoesCard
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -668,11 +670,138 @@ var PricingCard = ({
   };
   return /* @__PURE__ */ import_react5.default.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "28px 24px", width: "300px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")" } }), badgeText && /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", padding: "4px 12px", borderRadius: "100px", marginBottom: "14px", background: alpha(accent, 0.12), border: "1px solid " + alpha(accent, 0.3), fontSize: "11px", fontWeight: "700", color: accent, textTransform: "uppercase", letterSpacing: "0.5px" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react5.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react5.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px" } }, description), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react5.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react5.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react5.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react5.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react5.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)", cursor: "pointer" } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { width: "18px", height: "18px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: alpha(accent, 0.18), border: "1px solid " + alpha(accent, 0.4), flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react5.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" }))), f))), /* @__PURE__ */ import_react5.default.createElement("button", { onClick: onCtaClick, 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: "system-ui,sans-serif" } }, ctaText));
 };
+
+// src/components/ShoesCard/ShoesCard.jsx
+var import_react6 = __toESM(require("react"));
+var ShoesCard = ({
+  image = "https://images.unsplash.com/photo-1524015436451-442ee98d8b0e?w=600&q=80",
+  title = "Sneaker for the Modern Athlete",
+  description = "Experience the perfect blend of style and performance in our latest sneaker release.",
+  price = 129,
+  currency = "$",
+  period = "per pair",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onButtonClick = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react6.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: "20px",
+    overflow: "hidden",
+    width: "300px",
+    border: "1px solid " + alpha(accent, 0.3),
+    fontFamily: "system-ui,sans-serif",
+    transition: "transform 0.25s, box-shadow 0.25s",
+    transform: "translateY(0px)",
+    boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
+  } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react6.default.createElement("img", { src: image, alt: title, style: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    transform: "scale(1)",
+    transition: "transform 0.4s ease"
+  } }), /* @__PURE__ */ import_react6.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })), /* @__PURE__ */ import_react6.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react6.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react6.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3px", fontSize: "15px", color: "rgba(255,255,255,0.5)", marginBottom: "4px" } }, /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700" } }, currency), /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800" } }, Math.round(price))), /* @__PURE__ */ import_react6.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react6.default.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: "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
+  Profilecard,
+  ShoesCard
 });

package/dist/index.mjs

@@ -629,10 +629,137 @@ var PricingCard = ({
   };
   return /* @__PURE__ */ React5.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "28px 24px", width: "300px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative", overflow: "hidden" } }, /* @__PURE__ */ React5.createElement("div", { style: { position: "absolute", top: 0, left: 0, right: 0, height: "3px", background: "linear-gradient(90deg, " + accent + ", " + alpha(accent, 0.3) + ")" } }), badgeText && /* @__PURE__ */ React5.createElement("div", { style: { display: "inline-flex", alignItems: "center", gap: "6px", padding: "4px 12px", borderRadius: "100px", marginBottom: "14px", background: alpha(accent, 0.12), border: "1px solid " + alpha(accent, 0.3), fontSize: "11px", fontWeight: "700", color: accent, textTransform: "uppercase", letterSpacing: "0.5px" } }, /* @__PURE__ */ React5.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px" } }, description), /* @__PURE__ */ React5.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ React5.createElement("span", { style: { fontSize: "52px", fontWeight: "800", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ React5.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React5.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ React5.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ React5.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)", cursor: "pointer" } }, /* @__PURE__ */ React5.createElement("div", { style: { width: "18px", height: "18px", borderRadius: "50%", display: "flex", alignItems: "center", justifyContent: "center", background: alpha(accent, 0.18), border: "1px solid " + alpha(accent, 0.4), flexShrink: 0 } }, /* @__PURE__ */ React5.createElement("svg", { width: "10", height: "10", viewBox: "0 0 12 12", fill: "none", stroke: "#fff", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React5.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" }))), f))), /* @__PURE__ */ React5.createElement("button", { onClick: onCtaClick, 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: "system-ui,sans-serif" } }, ctaText));
 };
+
+// src/components/ShoesCard/ShoesCard.jsx
+import React6 from "react";
+var ShoesCard = ({
+  image = "https://images.unsplash.com/photo-1524015436451-442ee98d8b0e?w=600&q=80",
+  title = "Sneaker for the Modern Athlete",
+  description = "Experience the perfect blend of style and performance in our latest sneaker release.",
+  price = 129,
+  currency = "$",
+  period = "per pair",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onButtonClick = () => {
+  }
+}) => {
+  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__ */ React6.createElement("div", { style: {
+    background: bg,
+    borderRadius: "20px",
+    overflow: "hidden",
+    width: "300px",
+    border: "1px solid " + alpha(accent, 0.3),
+    fontFamily: "system-ui,sans-serif",
+    transition: "transform 0.25s, box-shadow 0.25s",
+    transform: "translateY(0px)",
+    boxShadow: "0 4px 20px rgba(0,0,0,0.3)"
+  } }, /* @__PURE__ */ React6.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React6.createElement("img", { src: image, alt: title, style: {
+    width: "100%",
+    height: "100%",
+    objectFit: "cover",
+    transform: "scale(1)",
+    transition: "transform 0.4s ease"
+  } }), /* @__PURE__ */ React6.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })), /* @__PURE__ */ React6.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React6.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React6.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ React6.createElement("div", { style: { display: "flex", alignItems: "center", gap: "3px", fontSize: "15px", color: "rgba(255,255,255,0.5)", marginBottom: "4px" } }, /* @__PURE__ */ React6.createElement("span", { style: { fontSize: "18px", fontWeight: "700" } }, currency), /* @__PURE__ */ React6.createElement("span", { style: { fontSize: "52px", fontWeight: "800" } }, Math.round(price))), /* @__PURE__ */ React6.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ React6.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: "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
+  Profilecard,
+  ShoesCard
 };

package/package.json

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