premium-react-loaders 2.0.0 → 2.1.0

package/dist/index10.js

@@ -1,15 +1,12 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Skeleton } from "./index5.js";
-import { useLoaderVisibility } from "./index30.js";
-import { normalizeSize } from "./index4.js";
-import { cn } from "./index3.js";
-const SkeletonList = forwardRef(
+import { Skeleton } from "./index7.js";
+import { useLoaderVisibility } from "./index32.js";
+const SkeletonImage = forwardRef(
   ({
-    items = 3,
-    itemHeight = "3rem",
-    gap = "0.75rem",
     width = "100%",
+    height = "200px",
+    aspectRatio,
     animate = true,
     baseColor,
     highlightColor,
@@ -19,7 +16,7 @@ const SkeletonList = forwardRef(
     transition,
     className,
     style,
-    testId = "skeleton-list",
+    testId = "skeleton-image",
     visible = true,
     ...rest
   }, ref) => {
@@ -31,39 +28,31 @@ const SkeletonList = forwardRef(
     );
     if (!shouldRender) return null;
     return /* @__PURE__ */ jsx(
-      "div",
+      Skeleton,
       {
         ref,
         "data-testid": testId,
-        className: cn("flex flex-col", className),
+        width,
+        height: aspectRatio ? "auto" : height,
+        variant: "rounded",
+        borderRadius,
+        animate,
+        baseColor,
+        highlightColor,
+        className,
         style: {
-          gap: normalizeSize(gap),
+          aspectRatio: aspectRatio || void 0,
           ...style,
           opacity,
           transition: transitionStyle
         },
-        role: "status",
-        "aria-label": "Loading list...",
-        "aria-busy": "true",
-        ...rest,
-        children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx(
-          Skeleton,
-          {
-            width,
-            height: itemHeight,
-            variant: "rounded",
-            borderRadius,
-            animate,
-            baseColor,
-            highlightColor
-          },
-          index
-        ))
+        "aria-label": "Loading image...",
+        ...rest
       }
     );
   }
 );
-SkeletonList.displayName = "SkeletonList";
+SkeletonImage.displayName = "SkeletonImage";
 export {
-  SkeletonList
+  SkeletonImage
 };

package/dist/index11.cjs

@@ -2,14 +2,16 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const Skeleton = require("./index5.cjs");
-const hooks = require("./index30.cjs");
+const Skeleton = require("./index7.cjs");
+const SkeletonAvatar = require("./index9.cjs");
+const hooks = require("./index32.cjs");
 const classNames = require("./index3.cjs");
-const SkeletonTable = react.forwardRef(
+const SkeletonCard = react.forwardRef(
   ({
-    rows = 5,
-    columns = 3,
-    showHeader = true,
+    hasAvatar = true,
+    titleWidth = "60%",
+    lines = 2,
+    avatarSize = 40,
     animate = true,
     baseColor,
     highlightColor,
@@ -18,7 +20,7 @@ const SkeletonTable = react.forwardRef(
     transition,
     className,
     style,
-    testId = "skeleton-table",
+    testId = "skeleton-card",
     visible = true,
     ...rest
   }, ref) => {
@@ -29,40 +31,60 @@ const SkeletonTable = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const renderRow = (isHeader = false) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-      Skeleton.Skeleton,
-      {
-        width: "100%",
-        height: isHeader ? "1.5rem" : "1.25rem",
-        variant: "text",
-        animate,
-        baseColor,
-        highlightColor
-      },
-      colIndex
-    )) });
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("flex flex-col gap-3", className),
+        className: classNames.cn("flex gap-3", className),
         style: {
           ...style,
           opacity,
           transition: transitionStyle
         },
         role: "status",
-        "aria-label": "Loading table...",
+        "aria-label": "Loading card...",
         "aria-busy": "true",
         ...rest,
         children: [
-          showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-200 pb-2", children: renderRow(true) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderRow(false) }, rowIndex)) })
+          hasAvatar && /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonAvatar.SkeletonAvatar,
+            {
+              size: avatarSize,
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: titleWidth,
+                height: "1.25rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+              Skeleton.Skeleton,
+              {
+                width: index === lines - 1 ? "70%" : "100%",
+                height: "1rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              },
+              index
+            ))
+          ] })
         ]
       }
     );
   }
 );
-SkeletonTable.displayName = "SkeletonTable";
-exports.SkeletonTable = SkeletonTable;
+SkeletonCard.displayName = "SkeletonCard";
+exports.SkeletonCard = SkeletonCard;

package/dist/index11.js

@@ -1,13 +1,15 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { Skeleton } from "./index5.js";
-import { useLoaderVisibility } from "./index30.js";
+import { Skeleton } from "./index7.js";
+import { SkeletonAvatar } from "./index9.js";
+import { useLoaderVisibility } from "./index32.js";
 import { cn } from "./index3.js";
-const SkeletonTable = forwardRef(
+const SkeletonCard = forwardRef(
   ({
-    rows = 5,
-    columns = 3,
-    showHeader = true,
+    hasAvatar = true,
+    titleWidth = "60%",
+    lines = 2,
+    avatarSize = 40,
     animate = true,
     baseColor,
     highlightColor,
@@ -16,7 +18,7 @@ const SkeletonTable = forwardRef(
     transition,
     className,
     style,
-    testId = "skeleton-table",
+    testId = "skeleton-card",
     visible = true,
     ...rest
   }, ref) => {
@@ -27,42 +29,62 @@ const SkeletonTable = forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const renderRow = (isHeader = false) => /* @__PURE__ */ jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
-      Skeleton,
-      {
-        width: "100%",
-        height: isHeader ? "1.5rem" : "1.25rem",
-        variant: "text",
-        animate,
-        baseColor,
-        highlightColor
-      },
-      colIndex
-    )) });
     return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("flex flex-col gap-3", className),
+        className: cn("flex gap-3", className),
         style: {
           ...style,
           opacity,
           transition: transitionStyle
         },
         role: "status",
-        "aria-label": "Loading table...",
+        "aria-label": "Loading card...",
         "aria-busy": "true",
         ...rest,
         children: [
-          showHeader && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 pb-2", children: renderRow(true) }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("div", { children: renderRow(false) }, rowIndex)) })
+          hasAvatar && /* @__PURE__ */ jsx(
+            SkeletonAvatar,
+            {
+              size: avatarSize,
+              animate,
+              baseColor,
+              highlightColor
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-2", children: [
+            /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: titleWidth,
+                height: "1.25rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              }
+            ),
+            Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: index === lines - 1 ? "70%" : "100%",
+                height: "1rem",
+                variant: "text",
+                animate,
+                baseColor,
+                highlightColor
+              },
+              index
+            ))
+          ] })
         ]
       }
     );
   }
 );
-SkeletonTable.displayName = "SkeletonTable";
+SkeletonCard.displayName = "SkeletonCard";
 export {
-  SkeletonTable
+  SkeletonCard
 };

package/dist/index12.cjs

@@ -2,23 +2,26 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const Skeleton = require("./index5.cjs");
-const SkeletonText = require("./index6.cjs");
-const SkeletonAvatar = require("./index7.cjs");
-const hooks = require("./index30.cjs");
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index32.cjs");
+const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
-const SkeletonPage = react.forwardRef(
+const SkeletonList = react.forwardRef(
   ({
-    variant = "default",
+    items = 3,
+    itemHeight = "3rem",
+    gap = "0.75rem",
+    width = "100%",
     animate = true,
-    baseColor = "#e0e0e0",
-    highlightColor = "#f5f5f5",
+    baseColor,
+    highlightColor,
+    borderRadius = "0.5rem",
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "skeleton-page",
+    testId = "skeleton-list",
     visible = true,
     ...rest
   }, ref) => {
@@ -29,137 +32,38 @@ const SkeletonPage = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
-    const commonProps = {
-      animate,
-      baseColor,
-      highlightColor
-    };
-    const renderDefault = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b pb-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 200, height: 32, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 40, ...commonProps })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 3, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 120, borderRadius: 8, ...commonProps })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 5, ...commonProps })
-      ] })
-    ] });
-    const renderDashboard = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 180, height: 28, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 120, height: 36, borderRadius: 6, ...commonProps })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded-lg space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 16, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 80, height: 32, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 60, height: 12, ...commonProps })
-        ] }, i)) })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 300, borderRadius: 8, ...commonProps }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps })
-        ] }),
-        [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps })
-        ] }, i))
-      ] })
-    ] });
-    const renderArticle = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: "80%", height: 40, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 48, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 flex-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 120, height: 16, ...commonProps }),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 180, height: 14, ...commonProps })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 400, borderRadius: 8, ...commonProps }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 4, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 200, borderRadius: 8, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 6, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 250, borderRadius: 8, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 4, ...commonProps })
-      ] })
-    ] });
-    const renderProfile = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-6 border-b pb-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 120, ...commonProps }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 200, height: 32, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 2, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
-            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps })
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 20, ...commonProps }),
-          [...Array(4)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 16, ...commonProps }, i))
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 space-y-4", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded-lg space-y-3", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 40, ...commonProps }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps }),
-              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 12, ...commonProps })
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 2, ...commonProps }),
-          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.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__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("w-full p-6", className),
+        className: classNames.cn("flex flex-col", className),
         style: {
+          gap: colors.normalizeSize(gap),
           ...style,
           opacity,
           transition: transitionStyle
         },
         role: "status",
-        "aria-label": "Loading page...",
+        "aria-label": "Loading list...",
         "aria-busy": "true",
         ...rest,
-        children: renderContent()
+        children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton.Skeleton,
+          {
+            width,
+            height: itemHeight,
+            variant: "rounded",
+            borderRadius,
+            animate,
+            baseColor,
+            highlightColor
+          },
+          index
+        ))
       }
     );
   }
 );
-SkeletonPage.displayName = "SkeletonPage";
-exports.SkeletonPage = SkeletonPage;
+SkeletonList.displayName = "SkeletonList";
+exports.SkeletonList = SkeletonList;