premium-react-loaders 3.1.1 → 4.1.0

package/dist/index56.cjs

@@ -1,125 +1,189 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-function useReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(false);
-  react.useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handleChange = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-      return () => mediaQuery.removeEventListener("change", handleChange);
-    } else {
-      mediaQuery.addListener(handleChange);
-      return () => mediaQuery.removeListener(handleChange);
-    }
-  }, []);
-  return prefersReducedMotion;
-}
-function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
-  if (respectMotionPreference && prefersReducedMotion) {
-    return "0.01ms";
-  }
-  if (typeof speed === "number") {
-    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
-    return `${validSpeed}ms`;
-  }
-  const speedMap = {
-    slow: "2s",
-    normal: "1s",
-    fast: "0.5s"
-  };
-  return speedMap[speed] || speedMap.normal;
-}
-function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
-  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
-  const hasTransition = transitionDuration > 0;
-  const [shouldRender, setShouldRender] = react.useState(visible && delay === 0);
-  const [isTransitioning, setIsTransitioning] = react.useState(visible && delay === 0 && hasTransition);
-  const showTimeRef = react.useRef(visible && delay === 0 ? Date.now() : null);
-  const delayTimerRef = react.useRef(null);
-  const minDurationTimerRef = react.useRef(null);
-  const transitionTimerRef = react.useRef(null);
-  react.useEffect(() => {
-    if (delayTimerRef.current) {
-      clearTimeout(delayTimerRef.current);
-      delayTimerRef.current = null;
-    }
-    if (minDurationTimerRef.current) {
-      clearTimeout(minDurationTimerRef.current);
-      minDurationTimerRef.current = null;
-    }
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current);
-      transitionTimerRef.current = null;
-    }
-    if (visible) {
-      if (delay > 0) {
-        delayTimerRef.current = setTimeout(() => {
-          setShouldRender(true);
-          showTimeRef.current = Date.now();
-          if (hasTransition) {
-            setIsTransitioning(true);
-          }
-        }, delay);
-      } else {
-        setShouldRender(true);
-        showTimeRef.current = Date.now();
-        if (hasTransition) {
-          setIsTransitioning(true);
-        }
-      }
-    } else {
-      const hideLoader = () => {
-        if (hasTransition) {
-          setIsTransitioning(false);
-          transitionTimerRef.current = setTimeout(() => {
-            setShouldRender(false);
-            showTimeRef.current = null;
-          }, transitionDuration);
-        } else {
-          setShouldRender(false);
-          showTimeRef.current = null;
-        }
-      };
-      if (showTimeRef.current !== null && minDuration > 0) {
-        const elapsedTime = Date.now() - showTimeRef.current;
-        const remainingTime = minDuration - elapsedTime;
-        if (remainingTime > 0) {
-          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
-        } else {
-          hideLoader();
-        }
-      } else {
-        hideLoader();
-      }
-    }
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
-      }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
-      }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index71.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";
       }
     };
-  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
-  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
-  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
-  return {
-    shouldRender,
-    opacity,
-    transitionStyle
-  };
-}
-exports.getEffectiveDuration = getEffectiveDuration;
-exports.useLoaderVisibility = useLoaderVisibility;
-exports.useReducedMotion = useReducedMotion;
+    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;

package/dist/index56.js

@@ -1,125 +1,189 @@
-import { useState, useRef, useEffect } from "react";
-function useReducedMotion() {
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined" || !window.matchMedia) {
-      return;
-    }
-    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
-    setPrefersReducedMotion(mediaQuery.matches);
-    const handleChange = (event) => {
-      setPrefersReducedMotion(event.matches);
-    };
-    if (mediaQuery.addEventListener) {
-      mediaQuery.addEventListener("change", handleChange);
-      return () => mediaQuery.removeEventListener("change", handleChange);
-    } else {
-      mediaQuery.addListener(handleChange);
-      return () => mediaQuery.removeListener(handleChange);
-    }
-  }, []);
-  return prefersReducedMotion;
-}
-function getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion) {
-  if (respectMotionPreference && prefersReducedMotion) {
-    return "0.01ms";
-  }
-  if (typeof speed === "number") {
-    const validSpeed = !isNaN(speed) && speed > 0 ? Math.max(50, Math.min(1e4, speed)) : 1e3;
-    return `${validSpeed}ms`;
-  }
-  const speedMap = {
-    slow: "2s",
-    normal: "1s",
-    fast: "0.5s"
-  };
-  return speedMap[speed] || speedMap.normal;
-}
-function useLoaderVisibility(visible = true, delay = 0, minDuration = 0, transition) {
-  const transitionDuration = transition === true ? 150 : typeof transition === "number" ? transition : 0;
-  const hasTransition = transitionDuration > 0;
-  const [shouldRender, setShouldRender] = useState(visible && delay === 0);
-  const [isTransitioning, setIsTransitioning] = useState(visible && delay === 0 && hasTransition);
-  const showTimeRef = useRef(visible && delay === 0 ? Date.now() : null);
-  const delayTimerRef = useRef(null);
-  const minDurationTimerRef = useRef(null);
-  const transitionTimerRef = useRef(null);
-  useEffect(() => {
-    if (delayTimerRef.current) {
-      clearTimeout(delayTimerRef.current);
-      delayTimerRef.current = null;
-    }
-    if (minDurationTimerRef.current) {
-      clearTimeout(minDurationTimerRef.current);
-      minDurationTimerRef.current = null;
-    }
-    if (transitionTimerRef.current) {
-      clearTimeout(transitionTimerRef.current);
-      transitionTimerRef.current = null;
-    }
-    if (visible) {
-      if (delay > 0) {
-        delayTimerRef.current = setTimeout(() => {
-          setShouldRender(true);
-          showTimeRef.current = Date.now();
-          if (hasTransition) {
-            setIsTransitioning(true);
-          }
-        }, delay);
-      } else {
-        setShouldRender(true);
-        showTimeRef.current = Date.now();
-        if (hasTransition) {
-          setIsTransitioning(true);
-        }
-      }
-    } else {
-      const hideLoader = () => {
-        if (hasTransition) {
-          setIsTransitioning(false);
-          transitionTimerRef.current = setTimeout(() => {
-            setShouldRender(false);
-            showTimeRef.current = null;
-          }, transitionDuration);
-        } else {
-          setShouldRender(false);
-          showTimeRef.current = null;
-        }
-      };
-      if (showTimeRef.current !== null && minDuration > 0) {
-        const elapsedTime = Date.now() - showTimeRef.current;
-        const remainingTime = minDuration - elapsedTime;
-        if (remainingTime > 0) {
-          minDurationTimerRef.current = setTimeout(hideLoader, remainingTime);
-        } else {
-          hideLoader();
-        }
-      } else {
-        hideLoader();
-      }
-    }
-    return () => {
-      if (delayTimerRef.current) {
-        clearTimeout(delayTimerRef.current);
-      }
-      if (minDurationTimerRef.current) {
-        clearTimeout(minDurationTimerRef.current);
-      }
-      if (transitionTimerRef.current) {
-        clearTimeout(transitionTimerRef.current);
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index7.js";
+import { useLoaderVisibility } from "./index71.js";
+import { cn } from "./index3.js";
+import { normalizeSize } from "./index4.js";
+const FormFieldLoader = 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 } = useLoaderVisibility(
+      visible,
+      delay,
+      minDuration,
+      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";
       }
     };
-  }, [visible, delay, minDuration, hasTransition, transitionDuration]);
-  const opacity = hasTransition ? isTransitioning ? 1 : 0 : 1;
-  const transitionStyle = hasTransition ? `opacity ${transitionDuration}ms ease-in-out` : "none";
-  return {
-    shouldRender,
-    opacity,
-    transitionStyle
-  };
-}
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("w-full", className),
+        style: {
+          ...style,
+          opacity,
+          transition: transitionStyle
+        },
+        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,
+                {
+                  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
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+FormFieldLoader.displayName = "FormFieldLoader";
 export {
-  getEffectiveDuration,
-  useLoaderVisibility,
-  useReducedMotion
+  FormFieldLoader
 };

package/dist/index57.cjs

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const classNames = require("./index3.cjs");
+const LiveRegion = react.forwardRef(
+  ({
+    message,
+    politeness = "polite",
+    clearAfter,
+    atomic = true,
+    relevant = "additions",
+    className
+  }, 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]);
+    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
+      }
+    );
+  }
+);
+LiveRegion.displayName = "LiveRegion";
+exports.LiveRegion = LiveRegion;