premium-react-loaders 2.3.1 → 3.1.0

package/dist/index52.js

@@ -0,0 +1,144 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { cn } from "./index3.js";
+import { parseSizeToNumber, normalizeSize } from "./index4.js";
+const Helix = forwardRef(
+  ({
+    size = "md",
+    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 = "helix",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    const prefersReducedMotion = useReducedMotion();
+    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      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";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("inline-flex items-center justify-center", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle,
+          perspective: "600px"
+        },
+        role: "status",
+        "aria-label": ariaLabel,
+        "aria-busy": "true",
+        ...rest,
+        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",
+                {
+                  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
+              ))
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+Helix.displayName = "Helix";
+export {
+  Helix
+};

package/dist/index53.cjs

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const hooks = require("./index56.cjs");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const PerspectiveRing = react.forwardRef(
+  ({
+    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 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,
+        "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
+                );
+              })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+PerspectiveRing.displayName = "PerspectiveRing";
+exports.PerspectiveRing = PerspectiveRing;

package/dist/index53.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index56.js";
+import { cn } from "./index3.js";
+import { normalizeSize } from "./index4.js";
+const PerspectiveRing = forwardRef(
+  ({
+    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 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,
+        "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
+                );
+              })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+PerspectiveRing.displayName = "PerspectiveRing";
+export {
+  PerspectiveRing
+};

package/dist/index54.cjs

@@ -0,0 +1,189 @@
+"use strict";
+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("./index56.cjs");
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const FormFieldLoader = react.forwardRef(
+  ({
+    size = "md",
+    fieldType = "text",
+    showLabel = true,
+    labelWidth = 100,
+    fieldWidth = "100%",
+    fieldHeight,
+    showValidation = false,
+    showRequired = false,
+    showHelperText = false,
+    delay = 0,
+    minDuration = 0,
+    transition,
+    className,
+    style,
+    testId = "form-field-loader",
+    visible = true,
+    ariaLabel = "Loading form field...",
+    ...rest
+  }, ref) => {
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      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(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("w-full", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        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,
+                {
+                  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
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormFieldLoader.displayName = "FormFieldLoader";
+exports.FormFieldLoader = FormFieldLoader;