premium-react-loaders 4.0.0 → 4.1.1

package/dist/index53.js

@@ -1,17 +1,17 @@
 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 { normalizeSize } from "./index4.js";
-const PerspectiveRing = forwardRef(
+const PlaneRotate = 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,
@@ -20,23 +20,27 @@ const PerspectiveRing = forwardRef(
     transition,
     className,
     style,
-    testId = "perspective-ring",
+    testId = "plane-rotate",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     const prefersReducedMotion = useReducedMotion();
     const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+    const { shouldRender, opacity: containerOpacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
       minDuration,
       transition
     );
     if (!shouldRender) return null;
-    const ringSize = normalizeSize(size);
-    const tiltAngle = Math.min(Math.max(tilt, 0), 90);
-    const segmentCount = Math.min(Math.max(segments, 4), 24);
+    const planeSize = 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__ */ jsx(
       "div",
       {
@@ -45,68 +49,64 @@ const PerspectiveRing = forwardRef(
         className: 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__ */ jsxs("div", { className: "relative", style: { width: ringSize, height: ringSize }, children: [
-          showShadow && /* @__PURE__ */ 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__ */ 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__ */ jsxs(
+          "div",
+          {
+            className: "relative",
+            style: {
+              width: planeSize,
+              height: planeSize,
+              transformStyle: "preserve-3d"
+            },
+            children: [
+              showAxis && /* @__PURE__ */ 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__ */ jsx(
                   "div",
                   {
-                    className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                    className: 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";
+PlaneRotate.displayName = "PlaneRotate";
 export {
-  PerspectiveRing
+  PlaneRotate
 };

package/dist/index54.cjs

@@ -2,31 +2,36 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const Skeleton = require("./index7.cjs");
-const hooks = require("./index64.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const FormFieldLoader = react.forwardRef(
+const Helix = react.forwardRef(
   ({
     size = "md",
-    fieldType = "text",
-    showLabel = true,
-    labelWidth = 100,
-    fieldWidth = "100%",
-    fieldHeight,
-    showValidation = false,
-    showRequired = false,
-    showHelperText = false,
+    color = "#3b82f6",
+    secondaryColor = "#8b5cf6",
+    particleCount = 12,
+    radius = 20,
+    height,
+    turns = 1.5,
+    direction = "up",
+    particleSize = 6,
+    showLines = false,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "form-field-loader",
+    testId = "helix",
     visible = true,
-    ariaLabel = "Loading form field...",
+    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -34,156 +39,106 @@ const FormFieldLoader = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const getFieldHeight = () => {
-      if (fieldHeight) return colors.normalizeSize(fieldHeight);
-      switch (fieldType) {
-        case "textarea":
-          return "80px";
-        case "select":
-          return "40px";
-        case "checkbox":
-        case "radio":
-          return "20px";
-        default:
-          return "40px";
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs(
+    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";
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("w-full", className),
+        className: classNames.cn("inline-flex items-center justify-center", className),
         style: {
           ...style,
           opacity,
-          transition: transitionStyle
+          transition: transitionStyle,
+          perspective: "600px"
         },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: [
-          showLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Skeleton.Skeleton,
-              {
-                width: colors.normalizeSize(labelWidth),
-                height: 16,
-                borderRadius: 4
-              }
-            ),
-            showRequired && /* @__PURE__ */ jsxRuntime.jsx(
-              Skeleton.Skeleton,
-              {
-                width: 8,
-                height: 8,
-                variant: "circular"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: fieldType === "checkbox" || fieldType === "radio" ? (
-            // Checkbox/Radio with label on the right
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Skeleton,
-                {
-                  width: 20,
-                  height: 20,
-                  variant: fieldType === "radio" ? "circular" : "rectangular",
-                  borderRadius: fieldType === "checkbox" ? 4 : void 0
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Skeleton,
-                {
-                  width: 150,
-                  height: 16,
-                  borderRadius: 4
-                }
-              )
-            ] })
-          ) : fieldType === "select" ? (
-            // Select dropdown
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Skeleton,
-                {
-                  width: fieldWidth,
-                  height: getFieldHeight(),
-                  borderRadius: 6
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Skeleton,
-                {
-                  width: 12,
-                  height: 12,
-                  variant: "rectangular"
-                }
-              ) })
-            ] })
-          ) : fieldType === "file" ? (
-            // File input
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Skeleton,
-                {
-                  width: 120,
-                  height: 40,
-                  borderRadius: 6
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Skeleton.Skeleton,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: classNames.cn("relative", animationClass),
+            style: {
+              width: `${radius * 2 + particleSize * 2}px`,
+              height: `${helixHeight}px`,
+              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(
+                "div",
                 {
-                  width: "calc(100% - 132px)",
-                  height: 40,
-                  borderRadius: 6
-                }
-              )
-            ] })
-          ) : (
-            // Text, textarea, etc.
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Skeleton.Skeleton,
-              {
-                width: fieldWidth,
-                height: getFieldHeight(),
-                borderRadius: 6
-              }
-            )
-          ) }),
-          showHelperText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Skeleton.Skeleton,
-            {
-              width: 200,
-              height: 14,
-              borderRadius: 4
-            }
-          ) }),
-          showValidation && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 mt-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Skeleton.Skeleton,
-              {
-                width: 14,
-                height: 14,
-                variant: "circular"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Skeleton.Skeleton,
-              {
-                width: 180,
-                height: 14,
-                borderRadius: 4
-              }
-            )
-          ] })
-        ]
+                  className: "absolute animate-helix-particle-pulse",
+                  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`
+                  }
+                },
+                index
+              ))
+            ]
+          }
+        )
       }
     );
   }
 );
-FormFieldLoader.displayName = "FormFieldLoader";
-exports.FormFieldLoader = FormFieldLoader;
+Helix.displayName = "Helix";
+exports.Helix = Helix;