premium-react-loaders 3.1.1 → 4.1.0

package/dist/index51.js

@@ -1,17 +1,17 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
 import { normalizeSize } from "./index4.js";
-const PlaneRotate = forwardRef(
+const CubeSpinner = forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    planeCount = 3,
-    spacing = 6,
-    rotationType = "staggered",
-    opacity: planeOpacity = 0.6,
-    showAxis = false,
+    faceColors,
+    rotationAxis = "diagonal",
+    perspective = 600,
+    showEdges = false,
+    edgeColor = "#000000",
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -20,27 +20,46 @@ const PlaneRotate = forwardRef(
     transition,
     className,
     style,
-    testId = "plane-rotate",
+    testId = "cube-spinner",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity: containerOpacity, transitionStyle } = useLoaderVisibility(
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
       minDuration,
       transition
     );
     if (!shouldRender) return null;
-    const planeSize = normalizeSize(size);
-    const count = Math.min(Math.max(planeCount, 2), 6);
+    const cubeSize = normalizeSize(size);
+    const halfSize = `calc(${cubeSize} / 2)`;
+    const defaultFaceColors = [
+      color,
+      // front
+      color,
+      // back
+      color,
+      // right
+      color,
+      // left
+      color,
+      // top
+      color
+      // bottom
+    ];
+    const colors = faceColors && faceColors.length === 6 ? faceColors : defaultFaceColors;
     const animationClass = {
-      synchronized: "animate-plane-rotate-sync",
-      staggered: "animate-plane-rotate-stagger",
-      opposite: "animate-plane-rotate-opposite"
-    }[rotationType];
+      x: "animate-cube-rotate-x",
+      y: "animate-cube-rotate-y",
+      z: "animate-cube-rotate-z",
+      diagonal: "animate-cube-rotate-diagonal"
+    }[rotationAxis];
+    const edgeStyle = showEdges ? {
+      border: `1px solid ${edgeColor}`
+    } : {};
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -49,9 +68,9 @@ const PlaneRotate = forwardRef(
         className: cn("inline-flex items-center justify-center", className),
         style: {
           ...style,
-          opacity: containerOpacity,
+          opacity,
           transition: transitionStyle,
-          perspective: "600px"
+          perspective: `${perspective}px`
         },
         role: "status",
         "aria-label": ariaLabel,
@@ -60,45 +79,81 @@ const PlaneRotate = forwardRef(
         children: /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "relative",
+            className: cn("relative", animationClass),
             style: {
-              width: planeSize,
-              height: planeSize,
-              transformStyle: "preserve-3d"
+              width: cubeSize,
+              height: cubeSize,
+              transformStyle: "preserve-3d",
+              animationDuration: effectiveDuration,
+              animationDirection: reverse ? "reverse" : "normal"
             },
             children: [
-              showAxis && /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                  className: "absolute inset-0",
                   style: {
-                    width: "2px",
-                    height: planeSize,
-                    backgroundColor: color,
-                    opacity: 0.3
+                    backgroundColor: colors[0],
+                    transform: `translateZ(${halfSize})`,
+                    ...edgeStyle
                   }
                 }
               ),
-              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__ */ jsx(
-                  "div",
-                  {
-                    className: cn("absolute inset-0", animationClass),
-                    style: {
-                      backgroundColor: color,
-                      opacity: planeOpacity,
-                      transformStyle: "preserve-3d",
-                      transform: `translateZ(${(index - count / 2) * spacing}px)`,
-                      animationDuration: effectiveDuration,
-                      animationDelay: delay2,
-                      animationDirection: direction
-                    }
-                  },
-                  index
-                );
-              })
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[1],
+                    transform: `translateZ(calc(-${halfSize})) rotateY(180deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[2],
+                    transform: `translateX(${halfSize}) rotateY(90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[3],
+                    transform: `translateX(calc(-${halfSize})) rotateY(-90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[4],
+                    transform: `translateY(calc(-${halfSize})) rotateX(90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0",
+                  style: {
+                    backgroundColor: colors[5],
+                    transform: `translateY(${halfSize}) rotateX(-90deg)`,
+                    ...edgeStyle
+                  }
+                }
+              )
             ]
           }
         )
@@ -106,7 +161,7 @@ const PlaneRotate = forwardRef(
     );
   }
 );
-PlaneRotate.displayName = "PlaneRotate";
+CubeSpinner.displayName = "CubeSpinner";
 export {
-  PlaneRotate
+  CubeSpinner
 };

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("./index56.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 "./index56.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
 };