premium-react-loaders 2.3.1 → 3.1.0

package/dist/index17.cjs

@@ -2,30 +2,36 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const hooks = require("./index36.cjs");
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
-const colors = require("./index4.cjs");
-const SpinnerRing = react.forwardRef(
+const DataTableSkeleton = react.forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor = "rgba(0, 0, 0, 0.1)",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    rows = 5,
+    columns = 4,
+    showHeader = true,
+    showSortIndicators = false,
+    showFilters = false,
+    showPagination = false,
+    showSelection = false,
+    showActions = false,
+    columnWidths,
+    rowHeight = 48,
+    striped = false,
+    width = "100%",
+    animate = true,
+    baseColor,
+    highlightColor,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "spinner-ring",
+    testId = "data-table-skeleton",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading table...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = hooks.useReducedMotion();
-    const effectiveDuration = hooks.getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = hooks.useLoaderVisibility(
       visible,
       delay,
@@ -33,14 +39,22 @@ const SpinnerRing = react.forwardRef(
       transition
     );
     if (!shouldRender) return null;
+    const getColumnWidth = (index) => {
+      if (columnWidths && columnWidths[index]) {
+        const width2 = columnWidths[index];
+        return typeof width2 === "number" ? `${width2}px` : width2 === "auto" ? "auto" : width2;
+      }
+      return "auto";
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
+        className: classNames.cn("w-full", className),
         style: {
           ...style,
+          width,
           opacity,
           transition: transitionStyle
         },
@@ -48,23 +62,224 @@ const SpinnerRing = react.forwardRef(
         "aria-label": ariaLabel,
         "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: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
+          showHeader && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "border-b border-gray-200",
+              style: {
+                backgroundColor: baseColor || "var(--skeleton-base, #f3f4f6)",
+                padding: "12px"
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "grid gap-4",
+                  style: {
+                    gridTemplateColumns: [
+                      showSelection && "40px",
+                      ...Array.from({ length: columns }, (_, i) => getColumnWidth(i)),
+                      showActions && "80px"
+                    ].filter(Boolean).join(" ")
+                  },
+                  children: [
+                    showSelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Skeleton.Skeleton,
+                      {
+                        width: 18,
+                        height: 18,
+                        borderRadius: 3,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      }
+                    ) }),
+                    Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Skeleton.Skeleton,
+                        {
+                          width: "70%",
+                          height: 16,
+                          borderRadius: 4,
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      ),
+                      showSortIndicators && /* @__PURE__ */ jsxRuntime.jsx(
+                        Skeleton.Skeleton,
+                        {
+                          width: 12,
+                          height: 12,
+                          borderRadius: 2,
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      )
+                    ] }, index)),
+                    showActions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Skeleton.Skeleton,
+                      {
+                        width: 60,
+                        height: 16,
+                        borderRadius: 4,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      }
+                    ) })
+                  ]
+                }
+              )
+            }
+          ),
+          showFilters && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "border-b border-gray-200",
+              style: { padding: "8px 12px" },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "grid gap-4",
+                  style: {
+                    gridTemplateColumns: [
+                      showSelection && "40px",
+                      ...Array.from({ length: columns }, (_, i) => getColumnWidth(i)),
+                      showActions && "80px"
+                    ].filter(Boolean).join(" ")
+                  },
+                  children: [
+                    showSelection && /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+                    Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Skeleton.Skeleton,
+                      {
+                        width: "90%",
+                        height: 28,
+                        borderRadius: 4,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      },
+                      index
+                    )),
+                    showActions && /* @__PURE__ */ jsxRuntime.jsx("div", {})
+                  ]
+                }
+              )
+            }
+          ),
+          Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: classNames.cn(
+                "border-b border-gray-200 last:border-b-0",
+                striped && rowIndex % 2 === 1 && "bg-gray-50"
+              ),
+              style: { padding: "12px" },
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: "grid gap-4 items-center",
+                  style: {
+                    gridTemplateColumns: [
+                      showSelection && "40px",
+                      ...Array.from({ length: columns }, (_2, i) => getColumnWidth(i)),
+                      showActions && "80px"
+                    ].filter(Boolean).join(" "),
+                    height: `${rowHeight - 24}px`
+                  },
+                  children: [
+                    showSelection && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      Skeleton.Skeleton,
+                      {
+                        width: 18,
+                        height: 18,
+                        borderRadius: 3,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      }
+                    ) }),
+                    Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+                      Skeleton.Skeleton,
+                      {
+                        width: colIndex === 0 ? "80%" : "60%",
+                        height: 14,
+                        borderRadius: 4,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      },
+                      colIndex
+                    )),
+                    showActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Skeleton.Skeleton,
+                        {
+                          width: 24,
+                          height: 24,
+                          variant: "circular",
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        Skeleton.Skeleton,
+                        {
+                          width: 24,
+                          height: 24,
+                          variant: "circular",
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            },
+            rowIndex
+          )),
+          showPagination && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "border-t border-gray-200 flex items-center justify-between",
+              style: { padding: "12px" },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Skeleton.Skeleton,
+                  {
+                    width: 100,
+                    height: 14,
+                    borderRadius: 4,
+                    animate,
+                    baseColor,
+                    highlightColor
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Skeleton.Skeleton,
+                  {
+                    width: 32,
+                    height: 32,
+                    borderRadius: 4,
+                    animate,
+                    baseColor,
+                    highlightColor
+                  },
+                  index
+                )) })
+              ]
             }
-          }
-        )
+          )
+        ] })
       }
     );
   }
 );
-SpinnerRing.displayName = "SpinnerRing";
-exports.SpinnerRing = SpinnerRing;
+DataTableSkeleton.displayName = "DataTableSkeleton";
+exports.DataTableSkeleton = DataTableSkeleton;

package/dist/index17.js

@@ -1,29 +1,35 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useReducedMotion, useLoaderVisibility, getEffectiveDuration } from "./index36.js";
+import { Skeleton } from "./index7.js";
+import { useLoaderVisibility } from "./index56.js";
 import { cn } from "./index3.js";
-import { normalizeSize } from "./index4.js";
-const SpinnerRing = forwardRef(
+const DataTableSkeleton = forwardRef(
   ({
-    size = "md",
-    color = "#3b82f6",
-    secondaryColor = "rgba(0, 0, 0, 0.1)",
-    thickness = 4,
-    speed = "normal",
-    reverse = false,
-    respectMotionPreference = true,
+    rows = 5,
+    columns = 4,
+    showHeader = true,
+    showSortIndicators = false,
+    showFilters = false,
+    showPagination = false,
+    showSelection = false,
+    showActions = false,
+    columnWidths,
+    rowHeight = 48,
+    striped = false,
+    width = "100%",
+    animate = true,
+    baseColor,
+    highlightColor,
     delay = 0,
     minDuration = 0,
     transition,
     className,
     style,
-    testId = "spinner-ring",
+    testId = "data-table-skeleton",
     visible = true,
-    ariaLabel = "Loading...",
+    ariaLabel = "Loading table...",
     ...rest
   }, ref) => {
-    const prefersReducedMotion = useReducedMotion();
-    const effectiveDuration = getEffectiveDuration(speed, respectMotionPreference, prefersReducedMotion);
     const { shouldRender, opacity, transitionStyle } = useLoaderVisibility(
       visible,
       delay,
@@ -31,14 +37,22 @@ const SpinnerRing = forwardRef(
       transition
     );
     if (!shouldRender) return null;
+    const getColumnWidth = (index) => {
+      if (columnWidths && columnWidths[index]) {
+        const width2 = columnWidths[index];
+        return typeof width2 === "number" ? `${width2}px` : width2 === "auto" ? "auto" : width2;
+      }
+      return "auto";
+    };
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: cn("inline-flex items-center justify-center", className),
+        className: cn("w-full", className),
         style: {
           ...style,
+          width,
           opacity,
           transition: transitionStyle
         },
@@ -46,25 +60,226 @@ const SpinnerRing = forwardRef(
         "aria-label": ariaLabel,
         "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: /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded-lg overflow-hidden", children: [
+          showHeader && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "border-b border-gray-200",
+              style: {
+                backgroundColor: baseColor || "var(--skeleton-base, #f3f4f6)",
+                padding: "12px"
+              },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "grid gap-4",
+                  style: {
+                    gridTemplateColumns: [
+                      showSelection && "40px",
+                      ...Array.from({ length: columns }, (_, i) => getColumnWidth(i)),
+                      showActions && "80px"
+                    ].filter(Boolean).join(" ")
+                  },
+                  children: [
+                    showSelection && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                      Skeleton,
+                      {
+                        width: 18,
+                        height: 18,
+                        borderRadius: 3,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      }
+                    ) }),
+                    Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Skeleton,
+                        {
+                          width: "70%",
+                          height: 16,
+                          borderRadius: 4,
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      ),
+                      showSortIndicators && /* @__PURE__ */ jsx(
+                        Skeleton,
+                        {
+                          width: 12,
+                          height: 12,
+                          borderRadius: 2,
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      )
+                    ] }, index)),
+                    showActions && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                      Skeleton,
+                      {
+                        width: 60,
+                        height: 16,
+                        borderRadius: 4,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      }
+                    ) })
+                  ]
+                }
+              )
+            }
+          ),
+          showFilters && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "border-b border-gray-200",
+              style: { padding: "8px 12px" },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "grid gap-4",
+                  style: {
+                    gridTemplateColumns: [
+                      showSelection && "40px",
+                      ...Array.from({ length: columns }, (_, i) => getColumnWidth(i)),
+                      showActions && "80px"
+                    ].filter(Boolean).join(" ")
+                  },
+                  children: [
+                    showSelection && /* @__PURE__ */ jsx("div", {}),
+                    Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx(
+                      Skeleton,
+                      {
+                        width: "90%",
+                        height: 28,
+                        borderRadius: 4,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      },
+                      index
+                    )),
+                    showActions && /* @__PURE__ */ jsx("div", {})
+                  ]
+                }
+              )
+            }
+          ),
+          Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "border-b border-gray-200 last:border-b-0",
+                striped && rowIndex % 2 === 1 && "bg-gray-50"
+              ),
+              style: { padding: "12px" },
+              children: /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "grid gap-4 items-center",
+                  style: {
+                    gridTemplateColumns: [
+                      showSelection && "40px",
+                      ...Array.from({ length: columns }, (_2, i) => getColumnWidth(i)),
+                      showActions && "80px"
+                    ].filter(Boolean).join(" "),
+                    height: `${rowHeight - 24}px`
+                  },
+                  children: [
+                    showSelection && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(
+                      Skeleton,
+                      {
+                        width: 18,
+                        height: 18,
+                        borderRadius: 3,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      }
+                    ) }),
+                    Array.from({ length: columns }).map((_2, colIndex) => /* @__PURE__ */ jsx(
+                      Skeleton,
+                      {
+                        width: colIndex === 0 ? "80%" : "60%",
+                        height: 14,
+                        borderRadius: 4,
+                        animate,
+                        baseColor,
+                        highlightColor
+                      },
+                      colIndex
+                    )),
+                    showActions && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2", children: [
+                      /* @__PURE__ */ jsx(
+                        Skeleton,
+                        {
+                          width: 24,
+                          height: 24,
+                          variant: "circular",
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Skeleton,
+                        {
+                          width: 24,
+                          height: 24,
+                          variant: "circular",
+                          animate,
+                          baseColor,
+                          highlightColor
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            },
+            rowIndex
+          )),
+          showPagination && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "border-t border-gray-200 flex items-center justify-between",
+              style: { padding: "12px" },
+              children: [
+                /* @__PURE__ */ jsx(
+                  Skeleton,
+                  {
+                    width: 100,
+                    height: 14,
+                    borderRadius: 4,
+                    animate,
+                    baseColor,
+                    highlightColor
+                  }
+                ),
+                /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(
+                  Skeleton,
+                  {
+                    width: 32,
+                    height: 32,
+                    borderRadius: 4,
+                    animate,
+                    baseColor,
+                    highlightColor
+                  },
+                  index
+                )) })
+              ]
             }
-          }
-        )
+          )
+        ] })
       }
     );
   }
 );
-SpinnerRing.displayName = "SpinnerRing";
+DataTableSkeleton.displayName = "DataTableSkeleton";
 export {
-  SpinnerRing
+  DataTableSkeleton
 };