premium-react-loaders 4.0.0 → 4.1.0

package/dist/index52.cjs

@@ -2,21 +2,21 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index64.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const Helix = react.forwardRef(
+const FlipCard = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor = "#8b5cf6",
-    particleCount = 12,
-    radius = 20,
+    direction = "horizontal",
+    frontColor,
+    backColor,
+    width,
     height,
-    turns = 1.5,
-    direction = "up",
-    particleSize = 6,
-    showLines = false,
+    interval,
+    perspective = 1e3,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -25,13 +25,17 @@ const Helix = react.forwardRef(
     transition,
     className,
     style,
-    testId = "helix",
+    testId = "flip-card",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
-    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const effectiveDuration = hooks.getEffectiveDuration(
+      interval !== void 0 ? interval : speed,
+      respectMotionPreference,
+      prefersReducedMotion
+    );
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -39,23 +43,11 @@ const Helix = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const containerSize = colors.normalizeSize(size);
-    const helixHeight = height ? colors.parseSizeToNumber(colors.normalizeSize(height), 80) : colors.parseSizeToNumber(containerSize, 40) * 1.5;
-    const particles = Array.from({ length: particleCount }, (_, index) => {
-      const angle = index / particleCount * Math.PI * 2 * turns;
-      const y = index / particleCount * helixHeight;
-      const x = Math.cos(angle) * radius;
-      const z = Math.sin(angle) * radius;
-      const isSecondStrand = index % 2 === 1;
-      return {
-        x,
-        y,
-        z,
-        angle,
-        color: isSecondStrand ? secondaryColor : color
-      };
-    });
-    const animationClass = direction === "up" ? "animate-helix-rotate-up" : "animate-helix-rotate-down";
+    const cardWidth = width ? colors.normalizeSize(width) : colors.normalizeSize(size);
+    const cardHeight = height ? colors.normalizeSize(height) : `calc(${colors.normalizeSize(size)} * 0.6)`;
+    const front = frontColor || color;
+    const back = backColor || secondaryColor;
+    const animationClass = direction === "horizontal" ? "animate-flip-card-horizontal" : "animate-flip-card-vertical";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -66,7 +58,7 @@ const Helix = react.forwardRef(
           ...style,
           opacity,
           transition: transitionStyle,
-          perspective: "600px"
+          perspective: `${perspective}px`
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -77,62 +69,36 @@ const Helix = react.forwardRef(
           {
             className: classNames.cn("relative", animationClass),
             style: {
-              width: `${radius * 2 + particleSize * 2}px`,
-              height: `${helixHeight}px`,
+              width: cardWidth,
+              height: cardHeight,
               transformStyle: "preserve-3d",
               animationDuration: effectiveDuration,
               animationDirection: reverse ? "reverse" : "normal"
             },
             children: [
-              showLines && particles.map((particle, index) => {
-                if (index === 0) return null;
-                const prevParticle = particles[index - 1];
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "svg",
-                  {
-                    className: "absolute",
-                    style: {
-                      left: "50%",
-                      top: "0",
-                      transform: "translateX(-50%)",
-                      width: `${radius * 2 + particleSize * 2}px`,
-                      height: `${helixHeight}px`,
-                      pointerEvents: "none"
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      "line",
-                      {
-                        x1: prevParticle.x + radius + particleSize,
-                        y1: prevParticle.y,
-                        x2: particle.x + radius + particleSize,
-                        y2: particle.y,
-                        stroke: particle.color,
-                        strokeWidth: "1",
-                        opacity: "0.3"
-                      }
-                    )
-                  },
-                  `line-${index}`
-                );
-              }),
-              particles.map((particle, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-md flex items-center justify-center",
+                  style: {
+                    backgroundColor: front,
+                    backfaceVisibility: "hidden",
+                    WebkitBackfaceVisibility: "hidden"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: "absolute animate-helix-particle-pulse",
+                  className: "absolute inset-0 rounded-md flex items-center justify-center",
                   style: {
-                    left: "50%",
-                    top: `${particle.y}px`,
-                    width: `${particleSize}px`,
-                    height: `${particleSize}px`,
-                    backgroundColor: particle.color,
-                    borderRadius: "50%",
-                    transform: `translate3d(${particle.x}px, 0, ${particle.z}px)`,
-                    animationDuration: "1s",
-                    animationDelay: `${index * 0.08}s`
+                    backgroundColor: back,
+                    backfaceVisibility: "hidden",
+                    WebkitBackfaceVisibility: "hidden",
+                    transform: direction === "horizontal" ? "rotateY(180deg)" : "rotateX(180deg)"
                   }
-                },
-                index
-              ))
+                }
+              )
             ]
           }
         )
@@ -140,5 +106,5 @@ const Helix = react.forwardRef(
     );
   }
 );
-Helix.displayName = "Helix";
-exports.Helix = Helix;
+FlipCard.displayName = "FlipCard";
+exports.FlipCard = FlipCard;

package/dist/index52.js

@@ -1,20 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-import { parseSizeToNumber, normalizeSize } from "./index4.js";
-const Helix = forwardRef(
+import { normalizeSize } from "./index4.js";
+const FlipCard = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
     secondaryColor = "#8b5cf6",
-    particleCount = 12,
-    radius = 20,
+    direction = "horizontal",
+    frontColor,
+    backColor,
+    width,
     height,
-    turns = 1.5,
-    direction = "up",
-    particleSize = 6,
-    showLines = false,
+    interval,
+    perspective = 1e3,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -23,13 +23,17 @@ const Helix = forwardRef(
     transition,
     className,
     style,
-    testId = "helix",
+    testId = "flip-card",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const effectiveDuration = getEffectiveDuration(
+      interval !== void 0 ? interval : speed,
+      respectMotionPreference,
+      prefersReducedMotion
+    );
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -37,23 +41,11 @@ const Helix = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const containerSize = normalizeSize(size);
-    const helixHeight = height ? parseSizeToNumber(normalizeSize(height), 80) : parseSizeToNumber(containerSize, 40) * 1.5;
-    const particles = Array.from({ length: particleCount }, (_, index) => {
-      const angle = index / particleCount * Math.PI * 2 * turns;
-      const y = index / particleCount * helixHeight;
-      const x = Math.cos(angle) * radius;
-      const z = Math.sin(angle) * radius;
-      const isSecondStrand = index % 2 === 1;
-      return {
-        x,
-        y,
-        z,
-        angle,
-        color: isSecondStrand ? secondaryColor : color
-      };
-    });
-    const animationClass = direction === "up" ? "animate-helix-rotate-up" : "animate-helix-rotate-down";
+    const cardWidth = width ? normalizeSize(width) : normalizeSize(size);
+    const cardHeight = height ? normalizeSize(height) : `calc(${normalizeSize(size)} * 0.6)`;
+    const front = frontColor || color;
+    const back = backColor || secondaryColor;
+    const animationClass = direction === "horizontal" ? "animate-flip-card-horizontal" : "animate-flip-card-vertical";
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -64,7 +56,7 @@ const Helix = forwardRef(
           ...style,
           opacity,
           transition: transitionStyle,
-          perspective: "600px"
+          perspective: `${perspective}px`
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -75,62 +67,36 @@ const Helix = forwardRef(
           {
             className: cn("relative", animationClass),
             style: {
-              width: `${radius * 2 + particleSize * 2}px`,
-              height: `${helixHeight}px`,
+              width: cardWidth,
+              height: cardHeight,
               transformStyle: "preserve-3d",
               animationDuration: effectiveDuration,
               animationDirection: reverse ? "reverse" : "normal"
             },
             children: [
-              showLines && particles.map((particle, index) => {
-                if (index === 0) return null;
-                const prevParticle = particles[index - 1];
-                return /* @__PURE__ */ jsx(
-                  "svg",
-                  {
-                    className: "absolute",
-                    style: {
-                      left: "50%",
-                      top: "0",
-                      transform: "translateX(-50%)",
-                      width: `${radius * 2 + particleSize * 2}px`,
-                      height: `${helixHeight}px`,
-                      pointerEvents: "none"
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      "line",
-                      {
-                        x1: prevParticle.x + radius + particleSize,
-                        y1: prevParticle.y,
-                        x2: particle.x + radius + particleSize,
-                        y2: particle.y,
-                        stroke: particle.color,
-                        strokeWidth: "1",
-                        opacity: "0.3"
-                      }
-                    )
-                  },
-                  `line-${index}`
-                );
-              }),
-              particles.map((particle, index) => /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 rounded-md flex items-center justify-center",
+                  style: {
+                    backgroundColor: front,
+                    backfaceVisibility: "hidden",
+                    WebkitBackfaceVisibility: "hidden"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute animate-helix-particle-pulse",
+                  className: "absolute inset-0 rounded-md flex items-center justify-center",
                   style: {
-                    left: "50%",
-                    top: `${particle.y}px`,
-                    width: `${particleSize}px`,
-                    height: `${particleSize}px`,
-                    backgroundColor: particle.color,
-                    borderRadius: "50%",
-                    transform: `translate3d(${particle.x}px, 0, ${particle.z}px)`,
-                    animationDuration: "1s",
-                    animationDelay: `${index * 0.08}s`
+                    backgroundColor: back,
+                    backfaceVisibility: "hidden",
+                    WebkitBackfaceVisibility: "hidden",
+                    transform: direction === "horizontal" ? "rotateY(180deg)" : "rotateX(180deg)"
                   }
-                },
-                index
-              ))
+                }
+              )
             ]
           }
         )
@@ -138,7 +104,7 @@ const Helix = forwardRef(
     );
   }
 );
-Helix.displayName = "Helix";
+FlipCard.displayName = "FlipCard";
 export {
-  Helix
+  FlipCard
 };

package/dist/index53.cjs

@@ -2,18 +2,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index64.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const PerspectiveRing = react.forwardRef(
+const PlaneRotate = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    tilt = 45,
-    thickness = 4,
-    showShadow = true,
-    shadowBlur = 10,
-    segments = 8,
+    planeCount = 3,
+    spacing = 6,
+    rotationType = "staggered",
+    opacity: planeOpacity = 0.6,
+    showAxis = false,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -22,23 +22,27 @@ const PerspectiveRing = react.forwardRef(
     transition,
     className,
     style,
-    testId = "perspective-ring",
+    testId = "plane-rotate",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = hooks.useReducedMotion();
     const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+    const { shouldRender, opacity: containerOpacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
       minDuration,
       transition
     );
     if (!shouldRender) return null;
-    const ringSize = colors.normalizeSize(size);
-    const tiltAngle = Math.min(Math.max(tilt, 0), 90);
-    const segmentCount = Math.min(Math.max(segments, 4), 24);
+    const planeSize = colors.normalizeSize(size);
+    const count = Math.min(Math.max(planeCount, 2), 6);
+    const animationClass = {
+      synchronized: "animate-plane-rotate-sync",
+      staggered: "animate-plane-rotate-stagger",
+      opposite: "animate-plane-rotate-opposite"
+    }[rotationType];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -47,66 +51,62 @@ const PerspectiveRing = react.forwardRef(
         className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
           ...style,
-          opacity,
+          opacity: containerOpacity,
           transition: transitionStyle,
-          perspective: "800px"
+          perspective: "600px"
         },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", style: { width: ringSize, height: ringSize }, children: [
-          showShadow && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-              style: {
-                width: `calc(${ringSize} * 0.8)`,
-                height: `calc(${ringSize} * 0.2)`,
-                borderRadius: "50%",
-                backgroundColor: "rgba(0, 0, 0, 0.2)",
-                filter: `blur(${shadowBlur}px)`,
-                transform: `translate(-50%, calc(${ringSize} * 0.3))`
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "absolute inset-0 animate-spinner-rotate",
-              style: {
-                transformStyle: "preserve-3d",
-                transform: `rotateX(${tiltAngle}deg)`,
-                animationDuration: effectiveDuration,
-                animationDirection: reverse ? "reverse" : "normal"
-              },
-              children: Array.from({ length: segmentCount }).map((_, index) => {
-                const angle = index / segmentCount * 360;
-                const segmentOpacity = 0.3 + (Math.cos(angle * Math.PI / 180) + 1) / 2 * 0.7;
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "relative",
+            style: {
+              width: planeSize,
+              height: planeSize,
+              transformStyle: "preserve-3d"
+            },
+            children: [
+              showAxis && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                  style: {
+                    width: "2px",
+                    height: planeSize,
+                    backgroundColor: color,
+                    opacity: 0.3
+                  }
+                }
+              ),
+              Array.from({ length: count }).map((_, index) => {
+                const delay2 = rotationType === "staggered" ? `${index * 0.15}s` : "0s";
+                const direction = rotationType === "opposite" && index % 2 === 1 ? reverse ? "normal" : "reverse" : reverse ? "reverse" : "normal";
                 return /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                    className: classNames.cn("absolute inset-0", animationClass),
                     style: {
-                      width: ringSize,
-                      height: ringSize,
-                      borderRadius: "50%",
-                      border: `${thickness}px solid ${color}`,
-                      borderColor: "transparent",
-                      borderTopColor: color,
-                      transform: `rotateZ(${angle}deg)`,
-                      opacity: segmentOpacity
+                      backgroundColor: color,
+                      opacity: planeOpacity,
+                      transformStyle: "preserve-3d",
+                      transform: `translateZ(${(index - count / 2) * spacing}px)`,
+                      animationDuration: effectiveDuration,
+                      animationDelay: delay2,
+                      animationDirection: direction
                     }
                   },
                   index
                 );
               })
-            }
-          )
-        ] })
+            ]
+          }
+        )
       }
     );
   }
 );
-PerspectiveRing.displayName = "PerspectiveRing";
-exports.PerspectiveRing = PerspectiveRing;
+PlaneRotate.displayName = "PlaneRotate";
+exports.PlaneRotate = PlaneRotate;