premium-react-loaders 2.0.0 → 2.2.0

package/dist/index.cjs

@@ -3,35 +3,43 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css         */
 const classNames = require("./index3.cjs");
 const colors = require("./index4.cjs");
-const Skeleton = require("./index5.cjs");
-const SkeletonText = require("./index6.cjs");
-const SkeletonAvatar = require("./index7.cjs");
-const SkeletonImage = require("./index8.cjs");
-const SkeletonCard = require("./index9.cjs");
-const SkeletonList = require("./index10.cjs");
-const SkeletonTable = require("./index11.cjs");
-const SkeletonPage = require("./index12.cjs");
-const SkeletonForm = require("./index13.cjs");
-const SpinnerCircle = require("./index14.cjs");
-const SpinnerRing = require("./index15.cjs");
-const SpinnerDots = require("./index16.cjs");
-const SpinnerBars = require("./index17.cjs");
-const SpinnerGrid = require("./index18.cjs");
-const SpinnerWave = require("./index19.cjs");
-const SpinnerPulse = require("./index20.cjs");
-const ProgressBar = require("./index21.cjs");
-const ProgressCircle = require("./index22.cjs");
-const ProgressRing = require("./index23.cjs");
-const ProgressSteps = require("./index24.cjs");
-const PulseDots = require("./index25.cjs");
-const PulseWave = require("./index26.cjs");
-const PulseBars = require("./index27.cjs");
-const TypingIndicator = require("./index28.cjs");
-const LoaderOverlay = require("./index29.cjs");
-const version = "1.1.0";
+const ThemeContext = require("./index5.cjs");
+const useLoader = require("./index6.cjs");
+const Skeleton = require("./index7.cjs");
+const SkeletonText = require("./index8.cjs");
+const SkeletonAvatar = require("./index9.cjs");
+const SkeletonImage = require("./index10.cjs");
+const SkeletonCard = require("./index11.cjs");
+const SkeletonList = require("./index12.cjs");
+const SkeletonTable = require("./index13.cjs");
+const SkeletonPage = require("./index14.cjs");
+const SkeletonForm = require("./index15.cjs");
+const SpinnerCircle = require("./index16.cjs");
+const SpinnerRing = require("./index17.cjs");
+const SpinnerDots = require("./index18.cjs");
+const SpinnerBars = require("./index19.cjs");
+const SpinnerGrid = require("./index20.cjs");
+const SpinnerWave = require("./index21.cjs");
+const SpinnerPulse = require("./index22.cjs");
+const ProgressBar = require("./index23.cjs");
+const ProgressCircle = require("./index24.cjs");
+const ProgressRing = require("./index25.cjs");
+const ProgressSteps = require("./index26.cjs");
+const PulseDots = require("./index27.cjs");
+const PulseWave = require("./index28.cjs");
+const PulseBars = require("./index29.cjs");
+const TypingIndicator = require("./index30.cjs");
+const LoaderOverlay = require("./index31.cjs");
+const ButtonSpinner = require("./index32.cjs");
+const SuccessCheckmark = require("./index33.cjs");
+const ErrorIndicator = require("./index34.cjs");
+const version = "2.1.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
 exports.normalizeSize = colors.normalizeSize;
+exports.ThemeProvider = ThemeContext.ThemeProvider;
+exports.useTheme = ThemeContext.useTheme;
+exports.useLoader = useLoader.useLoader;
 exports.Skeleton = Skeleton.Skeleton;
 exports.SkeletonText = SkeletonText.SkeletonText;
 exports.SkeletonAvatar = SkeletonAvatar.SkeletonAvatar;
@@ -57,4 +65,7 @@ exports.PulseWave = PulseWave.PulseWave;
 exports.PulseBars = PulseBars.PulseBars;
 exports.TypingIndicator = TypingIndicator.TypingIndicator;
 exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
+exports.ButtonSpinner = ButtonSpinner.ButtonSpinner;
+exports.SuccessCheckmark = SuccessCheckmark.SuccessCheckmark;
+exports.ErrorIndicator = ErrorIndicator.ErrorIndicator;
 exports.version = version;

package/dist/index.d.ts

@@ -1,6 +1,10 @@
 export * from './components';
 export type * from './types';
+export { ThemeProvider, useTheme } from './context';
+export type { LoaderTheme, ThemeProviderProps } from './context';
+export { useLoader } from './hooks';
+export type { UseLoaderOptions, UseLoaderReturn } from './hooks';
 export { cn } from './utils/classNames';
 export { getAnimationDuration, normalizeSize } from './utils/colors';
-export declare const version = "1.1.0";
+export declare const version = "2.1.0";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,cAAc,cAAc,CAAC;AAG7B,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrE,eAAO,MAAM,OAAO,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,cAAc,cAAc,CAAC;AAG7B,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAGjE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrE,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/dist/index.js

@@ -1,33 +1,40 @@
 /* empty css       */
 import { cn } from "./index3.js";
 import { getAnimationDuration, normalizeSize } from "./index4.js";
-import { Skeleton } from "./index5.js";
-import { SkeletonText } from "./index6.js";
-import { SkeletonAvatar } from "./index7.js";
-import { SkeletonImage } from "./index8.js";
-import { SkeletonCard } from "./index9.js";
-import { SkeletonList } from "./index10.js";
-import { SkeletonTable } from "./index11.js";
-import { SkeletonPage } from "./index12.js";
-import { SkeletonForm } from "./index13.js";
-import { SpinnerCircle } from "./index14.js";
-import { SpinnerRing } from "./index15.js";
-import { SpinnerDots } from "./index16.js";
-import { SpinnerBars } from "./index17.js";
-import { SpinnerGrid } from "./index18.js";
-import { SpinnerWave } from "./index19.js";
-import { SpinnerPulse } from "./index20.js";
-import { ProgressBar } from "./index21.js";
-import { ProgressCircle } from "./index22.js";
-import { ProgressRing } from "./index23.js";
-import { ProgressSteps } from "./index24.js";
-import { PulseDots } from "./index25.js";
-import { PulseWave } from "./index26.js";
-import { PulseBars } from "./index27.js";
-import { TypingIndicator } from "./index28.js";
-import { LoaderOverlay } from "./index29.js";
-const version = "1.1.0";
+import { ThemeProvider, useTheme } from "./index5.js";
+import { useLoader } from "./index6.js";
+import { Skeleton } from "./index7.js";
+import { SkeletonText } from "./index8.js";
+import { SkeletonAvatar } from "./index9.js";
+import { SkeletonImage } from "./index10.js";
+import { SkeletonCard } from "./index11.js";
+import { SkeletonList } from "./index12.js";
+import { SkeletonTable } from "./index13.js";
+import { SkeletonPage } from "./index14.js";
+import { SkeletonForm } from "./index15.js";
+import { SpinnerCircle } from "./index16.js";
+import { SpinnerRing } from "./index17.js";
+import { SpinnerDots } from "./index18.js";
+import { SpinnerBars } from "./index19.js";
+import { SpinnerGrid } from "./index20.js";
+import { SpinnerWave } from "./index21.js";
+import { SpinnerPulse } from "./index22.js";
+import { ProgressBar } from "./index23.js";
+import { ProgressCircle } from "./index24.js";
+import { ProgressRing } from "./index25.js";
+import { ProgressSteps } from "./index26.js";
+import { PulseDots } from "./index27.js";
+import { PulseWave } from "./index28.js";
+import { PulseBars } from "./index29.js";
+import { TypingIndicator } from "./index30.js";
+import { LoaderOverlay } from "./index31.js";
+import { ButtonSpinner } from "./index32.js";
+import { SuccessCheckmark } from "./index33.js";
+import { ErrorIndicator } from "./index34.js";
+const version = "2.1.0";
 export {
+  ButtonSpinner,
+  ErrorIndicator,
   LoaderOverlay,
   ProgressBar,
   ProgressCircle,
@@ -52,9 +59,13 @@ export {
   SpinnerPulse,
   SpinnerRing,
   SpinnerWave,
+  SuccessCheckmark,
+  ThemeProvider,
   TypingIndicator,
   cn,
   getAnimationDuration,
   normalizeSize,
+  useLoader,
+  useTheme,
   version
 };

package/dist/index10.cjs

@@ -2,16 +2,13 @@
 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 colors = require("./index4.cjs");
-const classNames = require("./index3.cjs");
-const SkeletonList = react.forwardRef(
+const Skeleton = require("./index7.cjs");
+const hooks = require("./index35.cjs");
+const SkeletonImage = react.forwardRef(
   ({
-    items = 3,
-    itemHeight = "3rem",
-    gap = "0.75rem",
     width = "100%",
+    height = "200px",
+    aspectRatio,
     animate = true,
     baseColor,
     highlightColor,
@@ -21,7 +18,7 @@ const SkeletonList = react.forwardRef(
     transition,
     className,
     style,
-    testId = "skeleton-list",
+    testId = "skeleton-image",
     visible = true,
     ...rest
   }, ref) => {
@@ -33,37 +30,29 @@ const SkeletonList = react.forwardRef(
     );
     if (!shouldRender) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Skeleton.Skeleton,
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("flex flex-col", className),
+        width,
+        height: aspectRatio ? "auto" : height,
+        variant: "rounded",
+        borderRadius,
+        animate,
+        baseColor,
+        highlightColor,
+        className,
         style: {
-          gap: colors.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__ */ jsxRuntime.jsx(
-          Skeleton.Skeleton,
-          {
-            width,
-            height: itemHeight,
-            variant: "rounded",
-            borderRadius,
-            animate,
-            baseColor,
-            highlightColor
-          },
-          index
-        ))
+        "aria-label": "Loading image...",
+        ...rest
       }
     );
   }
 );
-SkeletonList.displayName = "SkeletonList";
-exports.SkeletonList = SkeletonList;
+SkeletonImage.displayName = "SkeletonImage";
+exports.SkeletonImage = SkeletonImage;

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 "./index35.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("./index35.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 "./index35.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
 };