premium-react-loaders 1.3.0 → 2.1.0

package/dist/index14.js

@@ -1,28 +1,25 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
+import { Skeleton } from "./index7.js";
+import { SkeletonText } from "./index8.js";
+import { SkeletonAvatar } from "./index9.js";
+import { useLoaderVisibility } from "./index32.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const SpinnerCircle = forwardRef(
+const SkeletonPage = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    variant = "default",
+    animate = true,
+    baseColor = "#e0e0e0",
+    highlightColor = "#f5f5f5",
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-page",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -30,53 +27,139 @@ const SpinnerCircle = forwardRef(
       transition
     );
     if (!shouldRender) return null;
+    const commonProps = {
+      animate,
+      baseColor,
+      highlightColor
+    };
+    const renderDefault = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b pb-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 200, height: 32, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
+          /* @__PURE__ */ jsx(SkeletonAvatar, { size: 40, ...commonProps })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 3, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 120, borderRadius: 8, ...commonProps })
+        ] }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 5, ...commonProps })
+      ] })
+    ] });
+    const renderDashboard = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 180, height: 28, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 120, height: 36, borderRadius: 6, ...commonProps })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 80, height: 32, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 60, height: 12, ...commonProps })
+        ] }, i)) })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 300, borderRadius: 8, ...commonProps }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps })
+        ] }),
+        [...Array(5)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps })
+        ] }, i))
+      ] })
+    ] });
+    const renderArticle = () => /* @__PURE__ */ jsxs("div", { className: "max-w-3xl mx-auto space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "80%", height: 40, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsx(SkeletonAvatar, { size: 48, ...commonProps }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-2 flex-1", children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 120, height: 16, ...commonProps }),
+            /* @__PURE__ */ jsx(Skeleton, { width: 180, height: 14, ...commonProps })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(Skeleton, { height: 400, borderRadius: 8, ...commonProps }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 4, ...commonProps }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 200, borderRadius: 8, ...commonProps }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 6, ...commonProps }),
+        /* @__PURE__ */ jsx(Skeleton, { height: 250, borderRadius: 8, ...commonProps }),
+        /* @__PURE__ */ jsx(SkeletonText, { lines: 4, ...commonProps })
+      ] })
+    ] });
+    const renderProfile = () => /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-6 border-b pb-6", children: [
+        /* @__PURE__ */ jsx(SkeletonAvatar, { size: 120, ...commonProps }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-3", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 200, height: 32, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines: 2, ...commonProps }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
+            /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 20, ...commonProps }),
+          [...Array(4)].map((_, i) => /* @__PURE__ */ jsx(Skeleton, { height: 16, ...commonProps }, i))
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "col-span-2 space-y-4", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsxs("div", { className: "p-4 border rounded-lg space-y-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx(SkeletonAvatar, { size: 40, ...commonProps }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsx(Skeleton, { width: 150, height: 16, ...commonProps }),
+              /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 12, ...commonProps })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(SkeletonText, { lines: 2, ...commonProps }),
+          /* @__PURE__ */ jsx(Skeleton, { height: 200, borderRadius: 6, ...commonProps })
+        ] }, i)) })
+      ] })
+    ] });
+    const renderContent = () => {
+      switch (variant) {
+        case "dashboard":
+          return renderDashboard();
+        case "article":
+          return renderArticle();
+        case "profile":
+          return renderProfile();
+        default:
+          return renderDefault();
+      }
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("w-full p-6", className),
         style: {
           ...style,
           opacity,
           transition: transitionStyle
         },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading page...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            className: "animate-spinner-rotate",
-            style: {
-              width: normalizeSize(size),
-              height: normalizeSize(size),
-              animationDuration: effectiveDuration,
-              animationDirection: reverse ? "reverse" : "normal"
-            },
-            viewBox: "0 0 50 50",
-            children: /* @__PURE__ */ jsx(
-              "circle",
-              {
-                cx: "25",
-                cy: "25",
-                r: 25 - thickness * 2,
-                fill: "none",
-                stroke: color,
-                strokeWidth: thickness,
-                strokeDasharray: "80, 200",
-                strokeLinecap: "round"
-              }
-            )
-          }
-        )
+        children: renderContent()
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
+SkeletonPage.displayName = "SkeletonPage";
 export {
-  SpinnerCircle
+  SkeletonPage
 };
-//# sourceMappingURL=index14.js.map

package/dist/index15.cjs

@@ -2,30 +2,30 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index31.cjs");
-const classNames = require("./index3.cjs");
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index32.cjs");
 const colors = require("./index4.cjs");
-const SpinnerRing = react.forwardRef(
+const classNames = require("./index3.cjs");
+const SkeletonForm = react.forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor = "rgba(0, 0, 0, 0.1)",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    fields = 3,
+    showLabels = true,
+    showButton = true,
+    gap = 16,
+    buttonWidth = "120px",
+    buttonPosition = "left",
+    animate = true,
+    baseColor,
+    highlightColor,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "spinner-ring",
+    testId = "skeleton-form",
     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,
@@ -33,39 +33,59 @@ const SpinnerRing = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const gapValue = colors.normalizeSize(gap);
+    const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
-        style: {
-          ...style,
-          opacity,
-          transition: transitionStyle
-        },
+        className: classNames.cn("w-full", className),
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue, opacity, transition: transitionStyle },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading form...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "rounded-full",
-            style: {
-              width: colors.normalizeSize(size),
-              height: colors.normalizeSize(size),
-              border: `${thickness}px solid ${secondaryColor}`,
-              borderTopColor: color,
-              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
-              animationDirection: reverse ? "reverse" : "normal"
+        children: [
+          Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            showLabels && /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: "30%",
+                height: "0.875rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: "100%",
+                height: "2.5rem",
+                variant: "rectangular",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            )
+          ] }, index)),
+          showButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames.cn("flex", buttonAlign), style: { marginTop: "8px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            Skeleton.Skeleton,
+            {
+              width: buttonWidth,
+              height: "2.5rem",
+              variant: "rounded",
+              animate,
+              baseColor,
+              highlightColor
             }
-          }
-        )
+          ) })
+        ]
       }
     );
   }
 );
-SpinnerRing.displayName = "SpinnerRing";
-exports.SpinnerRing = SpinnerRing;
-//# sourceMappingURL=index15.cjs.map
+SkeletonForm.displayName = "SkeletonForm";
+exports.SkeletonForm = SkeletonForm;

package/dist/index15.js

@@ -1,29 +1,29 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index31.js";
-import { cn } from "./index3.js";
+import { Skeleton } from "./index7.js";
+import { useLoaderVisibility } from "./index32.js";
 import { normalizeSize } from "./index4.js";
-const SpinnerRing = forwardRef(
+import { cn } from "./index3.js";
+const SkeletonForm = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor = "rgba(0, 0, 0, 0.1)",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    fields = 3,
+    showLabels = true,
+    showButton = true,
+    gap = 16,
+    buttonWidth = "120px",
+    buttonPosition = "left",
+    animate = true,
+    baseColor,
+    highlightColor,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "spinner-ring",
+    testId = "skeleton-form",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -31,41 +31,61 @@ const SpinnerRing = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    return /* @__PURE__ */ jsx(
+    const gapValue = normalizeSize(gap);
+    const buttonAlign = buttonPosition === "left" ? "justify-start" : buttonPosition === "right" ? "justify-end" : "justify-center";
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
-        style: {
-          ...style,
-          opacity,
-          transition: transitionStyle
-        },
+        className: cn("w-full", className),
+        style: { ...style, display: "flex", flexDirection: "column", gap: gapValue, opacity, transition: transitionStyle },
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading form...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "rounded-full",
-            style: {
-              width: normalizeSize(size),
-              height: normalizeSize(size),
-              border: `${thickness}px solid ${secondaryColor}`,
-              borderTopColor: color,
-              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
-              animationDirection: reverse ? "reverse" : "normal"
+        children: [
+          Array.from({ length: fields }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "w-full", style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+            showLabels && /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: "30%",
+                height: "0.875rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: "100%",
+                height: "2.5rem",
+                variant: "rectangular",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            )
+          ] }, index)),
+          showButton && /* @__PURE__ */ jsx("div", { className: cn("flex", buttonAlign), style: { marginTop: "8px" }, children: /* @__PURE__ */ jsx(
+            Skeleton,
+            {
+              width: buttonWidth,
+              height: "2.5rem",
+              variant: "rounded",
+              animate,
+              baseColor,
+              highlightColor
             }
-          }
-        )
+          ) })
+        ]
       }
     );
   }
 );
-SpinnerRing.displayName = "SpinnerRing";
+SkeletonForm.displayName = "SkeletonForm";
 export {
-  SpinnerRing
+  SkeletonForm
 };
-//# sourceMappingURL=index15.js.map

package/dist/index16.cjs

@@ -2,15 +2,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
-const hooks = require("./index31.cjs");
+const hooks = require("./index32.cjs");
 const classNames = require("./index3.cjs");
-const SpinnerDots = react.forwardRef(
+const colors = require("./index4.cjs");
+const SpinnerCircle = react.forwardRef(
   ({
     size = "md",
     color = "#3b82f6",
-    dotCount = 8,
-    dotSize = 4,
+    thickness = 4,
     speed = "normal",
     reverse = false,
     respectMotionPreference = true,
@@ -19,7 +18,7 @@ const SpinnerDots = react.forwardRef(
     transition,
     className,
     style,
-    testId = "spinner-dots",
+    testId = "spinner-circle",
     visible = true,
     ariaLabel = "Loading...",
     ...rest
@@ -33,9 +32,6 @@ const SpinnerDots = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const sizeValue = colors.parseSizeToNumber(size, 40);
-    const dotSizeValue = colors.parseSizeToNumber(dotSize, 4);
-    const radius = (sizeValue - dotSizeValue) / 2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -52,43 +48,34 @@ const SpinnerDots = react.forwardRef(
         "aria-busy": "true",
         ...rest,
         children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+          "svg",
           {
-            className: "relative",
+            className: "animate-spinner-rotate",
             style: {
               width: colors.normalizeSize(size),
               height: colors.normalizeSize(size),
-              animation: `spinner-rotate ${effectiveDuration} linear infinite`,
+              animationDuration: effectiveDuration,
               animationDirection: reverse ? "reverse" : "normal"
             },
-            children: Array.from({ length: dotCount }).map((_, index) => {
-              const angle = 360 / dotCount * index;
-              const radian = angle * Math.PI / 180;
-              const x = radius * Math.cos(radian) + radius;
-              const y = radius * Math.sin(radian) + radius;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute rounded-full",
-                  style: {
-                    width: colors.normalizeSize(dotSize),
-                    height: colors.normalizeSize(dotSize),
-                    backgroundColor: color,
-                    left: `${x}px`,
-                    top: `${y}px`,
-                    opacity: 1 - index / dotCount * 0.7
-                    // Fade effect
-                  }
-                },
-                index
-              );
-            })
+            viewBox: "0 0 50 50",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                cx: "25",
+                cy: "25",
+                r: 25 - thickness * 2,
+                fill: "none",
+                stroke: color,
+                strokeWidth: thickness,
+                strokeDasharray: "80, 200",
+                strokeLinecap: "round"
+              }
+            )
           }
         )
       }
     );
   }
 );
-SpinnerDots.displayName = "SpinnerDots";
-exports.SpinnerDots = SpinnerDots;
-//# sourceMappingURL=index16.cjs.map
+SpinnerCircle.displayName = "SpinnerCircle";
+exports.SpinnerCircle = SpinnerCircle;