premium-react-loaders 4.0.0 → 4.1.1

package/dist/index54.js

@@ -1,30 +1,35 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index64.js";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const FormFieldLoader = forwardRef(
+import { parseSizeToNumber, normalizeSize } from "./index4.js";
+const Helix = 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 = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -32,158 +37,108 @@ const FormFieldLoader = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const getFieldHeight = () => {
-      if (fieldHeight) return normalizeSize(fieldHeight);
-      switch (fieldType) {
-        case "textarea":
-          return "80px";
-        case "select":
-          return "40px";
-        case "checkbox":
-        case "radio":
-          return "20px";
-        default:
-          return "40px";
-      }
-    };
-    return /* @__PURE__ */ jsxs(
+    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";
+    return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("w-full", className),
+        className: 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__ */ jsxs("div", { className: "flex items-center gap-1 mb-2", children: [
-            /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                width: normalizeSize(labelWidth),
-                height: 16,
-                borderRadius: 4
-              }
-            ),
-            showRequired && /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                width: 8,
-                height: 8,
-                variant: "circular"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "w-full", children: fieldType === "checkbox" || fieldType === "radio" ? (
-            // Checkbox/Radio with label on the right
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  width: 20,
-                  height: 20,
-                  variant: fieldType === "radio" ? "circular" : "rectangular",
-                  borderRadius: fieldType === "checkbox" ? 4 : void 0
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  width: 150,
-                  height: 16,
-                  borderRadius: 4
-                }
-              )
-            ] })
-          ) : fieldType === "select" ? (
-            // Select dropdown
-            /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  width: fieldWidth,
-                  height: getFieldHeight(),
-                  borderRadius: 6
-                }
-              ),
-              /* @__PURE__ */ jsx("div", { className: "absolute right-3 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  width: 12,
-                  height: 12,
-                  variant: "rectangular"
-                }
-              ) })
-            ] })
-          ) : fieldType === "file" ? (
-            // File input
-            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ jsx(
-                Skeleton,
-                {
-                  width: 120,
-                  height: 40,
-                  borderRadius: 6
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Skeleton,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: 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__ */ 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(
+                "div",
                 {
-                  width: "calc(100% - 132px)",
-                  height: 40,
-                  borderRadius: 6
-                }
-              )
-            ] })
-          ) : (
-            // Text, textarea, etc.
-            /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                width: fieldWidth,
-                height: getFieldHeight(),
-                borderRadius: 6
-              }
-            )
-          ) }),
-          showHelperText && /* @__PURE__ */ jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsx(
-            Skeleton,
-            {
-              width: 200,
-              height: 14,
-              borderRadius: 4
-            }
-          ) }),
-          showValidation && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mt-1", children: [
-            /* @__PURE__ */ jsx(
-              Skeleton,
-              {
-                width: 14,
-                height: 14,
-                variant: "circular"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              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";
+Helix.displayName = "Helix";
 export {
-  FormFieldLoader
+  Helix
 };

package/dist/index55.cjs

@@ -2,52 +2,111 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const LiveRegion = react.forwardRef(
+const colors = require("./index4.cjs");
+const PerspectiveRing = react.forwardRef(
   ({
-    message,
-    politeness = "polite",
-    clearAfter,
-    atomic = true,
-    relevant = "additions",
-    className
+    size = "md",
+    color = "#3b82f6",
+    tilt = 45,
+    thickness = 4,
+    showShadow = true,
+    shadowBlur = 10,
+    segments = 8,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "perspective-ring",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
   }, ref) => {
-    const [displayMessage, setDisplayMessage] = react.useState(message);
-    const clearTimerRef = react.useRef(null);
-    react.useEffect(() => {
-      setDisplayMessage(message);
-      if (clearTimerRef.current) {
-        clearTimeout(clearTimerRef.current);
-        clearTimerRef.current = null;
-      }
-      if (clearAfter && message) {
-        clearTimerRef.current = setTimeout(() => {
-          setDisplayMessage("");
-        }, clearAfter);
-      }
-      return () => {
-        if (clearTimerRef.current) {
-          clearTimeout(clearTimerRef.current);
-        }
-      };
-    }, [message, clearAfter]);
+    const prefersReducedMotion = hooks.useReducedMotion();
+    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, 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);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        className: classNames.cn(
-          // Visually hidden but accessible to screen readers
-          "sr-only absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0",
-          className
-        ),
-        role: politeness === "assertive" ? "alert" : "status",
-        "aria-live": politeness,
-        "aria-atomic": atomic,
-        "aria-relevant": relevant,
-        children: displayMessage
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle,
+          perspective: "800px"
+        },
+        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;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                    style: {
+                      width: ringSize,
+                      height: ringSize,
+                      borderRadius: "50%",
+                      border: `${thickness}px solid ${color}`,
+                      borderColor: "transparent",
+                      borderTopColor: color,
+                      transform: `rotateZ(${angle}deg)`,
+                      opacity: segmentOpacity
+                    }
+                  },
+                  index
+                );
+              })
+            }
+          )
+        ] })
       }
     );
   }
 );
-LiveRegion.displayName = "LiveRegion";
-exports.LiveRegion = LiveRegion;
+PerspectiveRing.displayName = "PerspectiveRing";
+exports.PerspectiveRing = PerspectiveRing;

package/dist/index55.js

@@ -1,53 +1,112 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index71.js";
 import { cn } from "./index3.js";
-const LiveRegion = forwardRef(
+import { normalizeSize } from "./index4.js";
+const PerspectiveRing = forwardRef(
   ({
-    message,
-    politeness = "polite",
-    clearAfter,
-    atomic = true,
-    relevant = "additions",
-    className
+    size = "md",
+    color = "#3b82f6",
+    tilt = 45,
+    thickness = 4,
+    showShadow = true,
+    shadowBlur = 10,
+    segments = 8,
+    speed = "normal",
+    reverse = false,
+    respectMotionPreference = true,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "perspective-ring",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
   }, ref) => {
-    const [displayMessage, setDisplayMessage] = useState(message);
-    const clearTimerRef = useRef(null);
-    useEffect(() => {
-      setDisplayMessage(message);
-      if (clearTimerRef.current) {
-        clearTimeout(clearTimerRef.current);
-        clearTimerRef.current = null;
-      }
-      if (clearAfter && message) {
-        clearTimerRef.current = setTimeout(() => {
-          setDisplayMessage("");
-        }, clearAfter);
-      }
-      return () => {
-        if (clearTimerRef.current) {
-          clearTimeout(clearTimerRef.current);
-        }
-      };
-    }, [message, clearAfter]);
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, 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);
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
-        className: cn(
-          // Visually hidden but accessible to screen readers
-          "sr-only absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0",
-          className
-        ),
-        role: politeness === "assertive" ? "alert" : "status",
-        "aria-live": politeness,
-        "aria-atomic": atomic,
-        "aria-relevant": relevant,
-        children: displayMessage
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle,
+          perspective: "800px"
+        },
+        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;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+                    style: {
+                      width: ringSize,
+                      height: ringSize,
+                      borderRadius: "50%",
+                      border: `${thickness}px solid ${color}`,
+                      borderColor: "transparent",
+                      borderTopColor: color,
+                      transform: `rotateZ(${angle}deg)`,
+                      opacity: segmentOpacity
+                    }
+                  },
+                  index
+                );
+              })
+            }
+          )
+        ] })
       }
     );
   }
 );
-LiveRegion.displayName = "LiveRegion";
+PerspectiveRing.displayName = "PerspectiveRing";
 export {
-  LiveRegion
+  PerspectiveRing
 };