premium-react-loaders 2.3.1 → 3.1.0

package/dist/index12.cjs

@@ -3,7 +3,7 @@ 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("./index36.cjs");
+const hooks = require("./index56.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonList = react.forwardRef(

package/dist/index12.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index56.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonList = forwardRef(

package/dist/index13.cjs

@@ -3,7 +3,7 @@ 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("./index36.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonTable = react.forwardRef(
   ({

package/dist/index13.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index56.js";
 import { cn } from "./index3.js";
 const SkeletonTable = forwardRef(
   ({

package/dist/index14.cjs

@@ -5,7 +5,7 @@ const react = require("react");
 const Skeleton = require("./index7.cjs");
 const SkeletonText = require("./index8.cjs");
 const SkeletonAvatar = require("./index9.cjs");
-const hooks = require("./index36.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonPage = react.forwardRef(
   ({

package/dist/index14.js

@@ -3,7 +3,7 @@ import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
 import { SkeletonText } from "./index8.js";
 import { SkeletonAvatar } from "./index9.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index56.js";
 import { cn } from "./index3.js";
 const SkeletonPage = forwardRef(
   ({

package/dist/index15.cjs

@@ -3,7 +3,7 @@ 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("./index36.cjs");
+const hooks = require("./index56.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonForm = react.forwardRef(

package/dist/index15.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index36.js";
+import { useLoaderVisibility } from "./index56.js";
 import { normalizeSize } from "./index4.js";
 import { cn } from "./index3.js";
 const SkeletonForm = forwardRef(

package/dist/index16.cjs

@@ -2,80 +2,145 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index36.cjs");
-const classNames = require("./index3.cjs");
-const colors = require("./index4.cjs");
-const SpinnerCircle = react.forwardRef(
+const SkeletonCard = require("./index11.cjs");
+const SkeletonTable = require("./index13.cjs");
+const SkeletonList = require("./index12.cjs");
+const SkeletonText = require("./index8.cjs");
+const SkeletonImage = require("./index10.cjs");
+const SkeletonForm = require("./index15.cjs");
+const SmartSkeleton = react.forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
-    delay = 0,
-    minDuration = 0,
-    transition,
+    contentType = "text",
+    referenceElement,
+    itemCount = 3,
+    detectionStrategy = "mixed",
+    width,
+    height,
+    animate = true,
+    baseColor,
+    highlightColor,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "smart-skeleton",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = hooks.useReducedMotion();
-    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
+    const [detectedType, setDetectedType] = react.useState(contentType);
+    react.useEffect(() => {
+      if (contentType !== "auto" || !referenceElement) return;
+      const detectContentType = () => {
+        if (detectionStrategy === "dom" || detectionStrategy === "mixed") {
+          const tagName = referenceElement.tagName.toLowerCase();
+          if (tagName === "table" || referenceElement.querySelector("table")) {
+            return "table";
+          }
+          if (tagName === "form" || referenceElement.querySelector("form")) {
+            return "form";
+          }
+          if (tagName === "ul" || tagName === "ol" || referenceElement.querySelector("ul, ol")) {
+            return "list";
+          }
+          if (tagName === "img" || referenceElement.querySelector("img")) {
+            return "image";
+          }
+          const hasImage = !!referenceElement.querySelector("img");
+          const hasText = referenceElement.textContent && referenceElement.textContent.length > 50;
+          if (hasImage && hasText) {
+            return "card";
+          }
+        }
+        if (detectionStrategy === "dimensions" || detectionStrategy === "mixed") {
+          const { width: width2, height: height2 } = referenceElement.getBoundingClientRect();
+          const aspectRatio = width2 / height2;
+          if (aspectRatio > 2 && height2 < 100) {
+            return "text";
+          }
+          if (aspectRatio >= 0.7 && aspectRatio <= 1.5 && width2 > 200) {
+            return "card";
+          }
+          if (aspectRatio > 3) {
+            return "table";
+          }
+          if (aspectRatio < 0.5) {
+            return "list";
+          }
+        }
+        return "text";
+      };
+      const type = detectContentType();
+      setDetectedType(type);
+    }, [contentType, referenceElement, detectionStrategy]);
+    const activeType = contentType === "auto" ? detectedType : contentType;
+    const commonProps = {
+      ref,
+      className,
+      style,
+      testId,
       visible,
-      delay,
-      minDuration,
-      transition
-    );
-    if (!shouldRender) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
-        style: {
-          ...style,
-          opacity,
-          transition: transitionStyle
-        },
-        role: "status",
-        "aria-label": ariaLabel,
-        "aria-busy": "true",
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
+      animate,
+      baseColor,
+      highlightColor,
+      ...rest
+    };
+    switch (activeType) {
+      case "card":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonCard.SkeletonCard,
+          {
+            ...commonProps,
+            width,
+            hasAvatar: true,
+            lines: 3
+          }
+        );
+      case "table":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonTable.SkeletonTable,
+          {
+            ...commonProps,
+            rows: itemCount,
+            columns: 4,
+            showHeader: true
+          }
+        );
+      case "list":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonList.SkeletonList,
+          {
+            ...commonProps,
+            items: itemCount,
+            itemHeight: 60
+          }
+        );
+      case "form":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonForm.SkeletonForm,
+          {
+            ...commonProps,
+            fields: itemCount || 4,
+            showLabels: true
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonImage.SkeletonImage,
+          {
+            ...commonProps,
+            width: width || "100%",
+            height: height || 200
+          }
+        );
+      case "text":
+      default:
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonText.SkeletonText,
           {
-            className: "animate-spinner-rotate",
-            style: {
-              width: colors.normalizeSize(size),
-              height: colors.normalizeSize(size),
-              animationDuration: effectiveDuration,
-              animationDirection: reverse ? "reverse" : "normal"
-            },
-            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"
-              }
-            )
+            ...commonProps,
+            lines: itemCount
           }
-        )
-      }
-    );
+        );
+    }
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
-exports.SpinnerCircle = SpinnerCircle;
+SmartSkeleton.displayName = "SmartSkeleton";
+exports.SmartSkeleton = SmartSkeleton;

package/dist/index16.js

@@ -1,81 +1,146 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
-import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const SpinnerCircle = forwardRef(
+import { forwardRef, useState, useEffect } from "react";
+import { SkeletonCard } from "./index11.js";
+import { SkeletonTable } from "./index13.js";
+import { SkeletonList } from "./index12.js";
+import { SkeletonText } from "./index8.js";
+import { SkeletonImage } from "./index10.js";
+import { SkeletonForm } from "./index15.js";
+const SmartSkeleton = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
-    delay = 0,
-    minDuration = 0,
-    transition,
+    contentType = "text",
+    referenceElement,
+    itemCount = 3,
+    detectionStrategy = "mixed",
+    width,
+    height,
+    animate = true,
+    baseColor,
+    highlightColor,
     className,
     style,
-    testId = "spinner-circle",
+    testId = "smart-skeleton",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
-    const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
+    const [detectedType, setDetectedType] = useState(contentType);
+    useEffect(() => {
+      if (contentType !== "auto" || !referenceElement) return;
+      const detectContentType = () => {
+        if (detectionStrategy === "dom" || detectionStrategy === "mixed") {
+          const tagName = referenceElement.tagName.toLowerCase();
+          if (tagName === "table" || referenceElement.querySelector("table")) {
+            return "table";
+          }
+          if (tagName === "form" || referenceElement.querySelector("form")) {
+            return "form";
+          }
+          if (tagName === "ul" || tagName === "ol" || referenceElement.querySelector("ul, ol")) {
+            return "list";
+          }
+          if (tagName === "img" || referenceElement.querySelector("img")) {
+            return "image";
+          }
+          const hasImage = !!referenceElement.querySelector("img");
+          const hasText = referenceElement.textContent && referenceElement.textContent.length > 50;
+          if (hasImage && hasText) {
+            return "card";
+          }
+        }
+        if (detectionStrategy === "dimensions" || detectionStrategy === "mixed") {
+          const { width: width2, height: height2 } = referenceElement.getBoundingClientRect();
+          const aspectRatio = width2 / height2;
+          if (aspectRatio > 2 && height2 < 100) {
+            return "text";
+          }
+          if (aspectRatio >= 0.7 && aspectRatio <= 1.5 && width2 > 200) {
+            return "card";
+          }
+          if (aspectRatio > 3) {
+            return "table";
+          }
+          if (aspectRatio < 0.5) {
+            return "list";
+          }
+        }
+        return "text";
+      };
+      const type = detectContentType();
+      setDetectedType(type);
+    }, [contentType, referenceElement, detectionStrategy]);
+    const activeType = contentType === "auto" ? detectedType : contentType;
+    const commonProps = {
+      ref,
+      className,
+      style,
+      testId,
       visible,
-      delay,
-      minDuration,
-      transition
-    );
-    if (!shouldRender) return null;
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
-        style: {
-          ...style,
-          opacity,
-          transition: transitionStyle
-        },
-        role: "status",
-        "aria-label": ariaLabel,
-        "aria-busy": "true",
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "svg",
+      animate,
+      baseColor,
+      highlightColor,
+      ...rest
+    };
+    switch (activeType) {
+      case "card":
+        return /* @__PURE__ */ jsx(
+          SkeletonCard,
+          {
+            ...commonProps,
+            width,
+            hasAvatar: true,
+            lines: 3
+          }
+        );
+      case "table":
+        return /* @__PURE__ */ jsx(
+          SkeletonTable,
+          {
+            ...commonProps,
+            rows: itemCount,
+            columns: 4,
+            showHeader: true
+          }
+        );
+      case "list":
+        return /* @__PURE__ */ jsx(
+          SkeletonList,
+          {
+            ...commonProps,
+            items: itemCount,
+            itemHeight: 60
+          }
+        );
+      case "form":
+        return /* @__PURE__ */ jsx(
+          SkeletonForm,
+          {
+            ...commonProps,
+            fields: itemCount || 4,
+            showLabels: true
+          }
+        );
+      case "image":
+        return /* @__PURE__ */ jsx(
+          SkeletonImage,
+          {
+            ...commonProps,
+            width: width || "100%",
+            height: height || 200
+          }
+        );
+      case "text":
+      default:
+        return /* @__PURE__ */ jsx(
+          SkeletonText,
           {
-            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"
-              }
-            )
+            ...commonProps,
+            lines: itemCount
           }
-        )
-      }
-    );
+        );
+    }
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
+SmartSkeleton.displayName = "SmartSkeleton";
 export {
-  SpinnerCircle
+  SmartSkeleton
 };