premium-react-loaders 4.0.0 → 4.1.0

package/dist/index56.cjs

@@ -2,54 +2,188 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index64.cjs");
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index71.cjs");
 const classNames = require("./index3.cjs");
-const MorphBlob = react.forwardRef(
+const colors = require("./index4.cjs");
+const FormFieldLoader = react.forwardRef(
   ({
-    size = 80,
-    color = "#3b82f6",
-    speed = "normal",
-    respectMotionPreference = true,
+    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 = "morph-blob",
+    testId = "form-field-loader",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading form field...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = hooks.useReducedMotion();
-    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(visible, delay, minDuration, transition);
+    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
     if (!shouldRender) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    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("inline-flex items-center justify-center", className),
-        style: { opacity, transition: transitionStyle, ...style },
+        className: classNames.cn("w-full", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              width: size,
-              height: size,
-              backgroundColor: color,
-              borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%",
-              animation: `morph-blob ${effectiveDuration} ease-in-out infinite`
+        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
+              }
+            )
+          ] })
+        ]
       }
     );
   }
 );
-MorphBlob.displayName = "MorphBlob";
-exports.MorphBlob = MorphBlob;
+FormFieldLoader.displayName = "FormFieldLoader";
+exports.FormFieldLoader = FormFieldLoader;

package/dist/index56.js

@@ -1,55 +1,189 @@
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index64.js";
+import { Skeleton } from "./index7.js";
+import { useLoaderVisibility } from "./index71.js";
 import { cn } from "./index3.js";
-const MorphBlob = forwardRef(
+import { normalizeSize } from "./index4.js";
+const FormFieldLoader = forwardRef(
   ({
-    size = 80,
-    color = "#3b82f6",
-    speed = "normal",
-    respectMotionPreference = true,
+    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 = "morph-blob",
+    testId = "form-field-loader",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading form field...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(visible, delay, minDuration, transition);
+    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      transition
+    );
     if (!shouldRender) return null;
-    return /* @__PURE__ */ jsx(
+    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(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
-        style: { opacity, transition: transitionStyle, ...style },
+        className: cn("w-full", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
         role: "status",
         "aria-label": ariaLabel,
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: size,
-              height: size,
-              backgroundColor: color,
-              borderRadius: "60% 40% 30% 70% / 60% 30% 70% 40%",
-              animation: `morph-blob ${effectiveDuration} ease-in-out infinite`
+        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,
+                {
+                  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
+              }
+            )
+          ] })
+        ]
       }
     );
   }
 );
-MorphBlob.displayName = "MorphBlob";
+FormFieldLoader.displayName = "FormFieldLoader";
 export {
-  MorphBlob
+  FormFieldLoader
 };

package/dist/index57.cjs

@@ -2,118 +2,52 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index64.cjs");
 const classNames = require("./index3.cjs");
-const LiquidFill = react.forwardRef(
+const LiveRegion = react.forwardRef(
   ({
-    value,
-    size = 80,
-    color = "#3b82f6",
-    waveAmplitude = 4,
-    onComplete,
-    speed = "normal",
-    respectMotionPreference = true,
-    delay = 0,
-    minDuration = 0,
-    transition,
-    className,
-    style,
-    testId = "liquid-fill",
-    visible = true,
-    ariaLabel,
-    ...rest
+    message,
+    politeness = "polite",
+    clearAfter,
+    atomic = true,
+    relevant = "additions",
+    className
   }, ref) => {
-    const prefersReducedMotion = hooks.useReducedMotion();
-    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(visible, delay, minDuration, transition);
-    const onCompleteRef = react.useRef(onComplete);
-    onCompleteRef.current = onComplete;
-    const isIndeterminate = value === void 0;
-    const clampedValue = isIndeterminate ? 50 : Math.min(100, Math.max(0, value));
+    const [displayMessage, setDisplayMessage] = react.useState(message);
+    const clearTimerRef = react.useRef(null);
     react.useEffect(() => {
-      if (!isIndeterminate && clampedValue === 100 && onCompleteRef.current) {
-        onCompleteRef.current();
+      setDisplayMessage(message);
+      if (clearTimerRef.current) {
+        clearTimeout(clearTimerRef.current);
+        clearTimerRef.current = null;
       }
-    }, [clampedValue, isIndeterminate]);
-    if (!shouldRender) return null;
-    const progressLabel = ariaLabel || (isIndeterminate ? "Loading..." : `Loading ${clampedValue}%`);
-    const fillBottom = `${clampedValue}%`;
+      if (clearAfter && message) {
+        clearTimerRef.current = setTimeout(() => {
+          setDisplayMessage("");
+        }, clearAfter);
+      }
+      return () => {
+        if (clearTimerRef.current) {
+          clearTimeout(clearTimerRef.current);
+        }
+      };
+    }, [message, clearAfter]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
-        "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
-        style: { opacity, transition: transitionStyle, ...style },
-        role: "status",
-        "aria-label": progressLabel,
-        "aria-busy": "true",
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: "relative overflow-hidden rounded-full",
-            style: { width: size, height: size },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  className: "absolute inset-0 rounded-full",
-                  style: { backgroundColor: `${color}20` }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  className: "absolute left-0 right-0 bottom-0",
-                  style: {
-                    height: fillBottom,
-                    transition: isIndeterminate ? void 0 : "height 0.4s ease-in-out",
-                    overflow: "hidden"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        style: {
-                          position: "absolute",
-                          top: -waveAmplitude * 2,
-                          left: 0,
-                          width: "200%",
-                          height: waveAmplitude * 4,
-                          backgroundColor: color,
-                          borderRadius: "40%",
-                          animation: `liquid-wave ${effectiveDuration} linear infinite`
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: "absolute bottom-0 left-0 right-0",
-                        style: { backgroundColor: color, top: waveAmplitude * 2 }
-                      }
-                    )
-                  ]
-                }
-              ),
-              !isIndeterminate && /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
-                {
-                  className: "absolute inset-0 flex items-center justify-center text-xs font-bold",
-                  style: { color: clampedValue > 50 ? "#fff" : color },
-                  children: [
-                    clampedValue,
-                    "%"
-                  ]
-                }
-              )
-            ]
-          }
-        )
+        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
       }
     );
   }
 );
-LiquidFill.displayName = "LiquidFill";
-exports.LiquidFill = LiquidFill;
+LiveRegion.displayName = "LiveRegion";
+exports.LiveRegion = LiveRegion;