premium-react-loaders 2.1.0 → 2.2.0

package/dist/index8.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("./index32.cjs");
+const hooks = require("./index35.cjs");
 const colors = require("./index4.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonText = react.forwardRef(

package/dist/index8.js

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

package/dist/index9.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("./index32.cjs");
+const hooks = require("./index35.cjs");
 const colors = require("./index4.cjs");
 const SkeletonAvatar = react.forwardRef(
   ({

package/dist/index9.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index32.js";
+import { useLoaderVisibility } from "./index35.js";
 import { normalizeSize } from "./index4.js";
 const SkeletonAvatar = forwardRef(
   ({

package/dist/premium-react-loaders.css

@@ -325,6 +325,114 @@
     opacity: 1;
   }
 }
+/* Button loader animations */
+@keyframes button-dot-pulse {
+  0%,
+  80%,
+  100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes button-bar-pulse {
+  0%,
+  40%,
+  100% {
+    transform: scaleY(0.4);
+    opacity: 0.6;
+  }
+  20% {
+    transform: scaleY(1);
+    opacity: 1;
+  }
+}
+/* Success checkmark animations */
+@keyframes success-scale {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes success-circle {
+  0% {
+    stroke-dasharray: 0, 150;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 150, 150;
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes success-check {
+  0% {
+    stroke-dasharray: 0, 50;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 50, 50;
+    stroke-dashoffset: 0;
+  }
+}
+/* Error indicator animations */
+@keyframes error-shake {
+  0%,
+  100% {
+    transform: translateX(0) scale(1);
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    transform: translateX(-4px) scale(1);
+  }
+  20%,
+  40%,
+  60%,
+  80% {
+    transform: translateX(4px) scale(1);
+  }
+}
+@keyframes error-scale {
+  0% {
+    transform: scale(0);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes error-circle {
+  0% {
+    stroke-dasharray: 0, 150;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 150, 150;
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes error-x {
+  0% {
+    stroke-dasharray: 0, 50;
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dasharray: 50, 50;
+    stroke-dashoffset: 0;
+  }
+}
 /* Animation utility classes */
 .animate-skeleton {
   animation: skeleton-shimmer var(--animation-duration-normal, 1.5s) infinite;
@@ -332,6 +440,9 @@
 .animate-spinner {
   animation: spinner-rotate var(--animation-duration-normal, 1s) linear infinite;
 }
+.animate-spinner-rotate {
+  animation: spinner-rotate var(--animation-duration-normal, 1s) linear infinite;
+}
 .animate-pulse-scale {
   animation: pulse-scale var(--animation-duration-normal, 1.5s) ease-in-out infinite;
 }
@@ -341,6 +452,35 @@
 .animate-progress {
   animation: progress-indeterminate var(--animation-duration-normal, 1.5s) ease-in-out infinite;
 }
+/* Button loader animations */
+.animate-button-dot-pulse {
+  animation: button-dot-pulse var(--animation-duration-normal, 1.2s) ease-in-out infinite;
+}
+.animate-button-bar-pulse {
+  animation: button-bar-pulse var(--animation-duration-normal, 1s) ease-in-out infinite;
+}
+/* Success/Error animations */
+.animate-success-scale {
+  animation: success-scale var(--animation-duration-normal, 500ms) ease-out forwards;
+}
+.animate-success-circle {
+  animation: success-circle var(--animation-duration-normal, 500ms) ease-out forwards;
+}
+.animate-success-check {
+  animation: success-check var(--animation-duration-normal, 500ms) ease-out forwards;
+}
+.animate-error-shake {
+  animation: error-shake var(--animation-duration-normal, 500ms) ease-out forwards;
+}
+.animate-error-scale {
+  animation: error-scale var(--animation-duration-normal, 500ms) ease-out forwards;
+}
+.animate-error-circle {
+  animation: error-circle var(--animation-duration-normal, 500ms) ease-out forwards;
+}
+.animate-error-x {
+  animation: error-x var(--animation-duration-normal, 500ms) ease-out forwards;
+}
 /* Speed variants */
 .animate-slow {
   animation-duration: var(--animation-duration-slow, 2s);

package/dist/types/button.d.ts

@@ -0,0 +1,31 @@
+import { BaseLoaderProps } from './common';
+/**
+ * Position of the spinner relative to button content
+ */
+export type SpinnerPosition = 'left' | 'right' | 'center';
+/**
+ * Variant of the button spinner
+ */
+export type ButtonSpinnerVariant = 'circle' | 'dots' | 'bars';
+/**
+ * ButtonSpinner component props
+ */
+export interface ButtonSpinnerProps extends BaseLoaderProps {
+    /** Position of spinner relative to content (left, right, center) */
+    position?: SpinnerPosition;
+    /** Visual variant of the spinner */
+    variant?: ButtonSpinnerVariant;
+    /** Thickness of the spinner (for circle variant) */
+    thickness?: number;
+    /** Number of dots (for dots variant) */
+    dotCount?: number;
+    /** Number of bars (for bars variant) */
+    barCount?: number;
+    /** Content to display alongside the spinner (usually button text) */
+    children?: React.ReactNode;
+    /** Whether to show content when loading (if false, only spinner shows) */
+    showContent?: boolean;
+    /** Gap between spinner and content */
+    gap?: number | string;
+}
+//# sourceMappingURL=button.d.ts.map

package/dist/types/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../src/types/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE1D;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAE9D;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,eAAe;IACzD,oEAAoE;IACpE,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B,oCAAoC;IACpC,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACvB"}

package/dist/types/index.d.ts

@@ -4,4 +4,6 @@ export * from './spinner';
 export * from './progress';
 export * from './pulse';
 export * from './overlay';
+export * from './button';
+export * from './status';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AACA,cAAc,UAAU,CAAC;AAGzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dist/types/status.d.ts

@@ -0,0 +1,34 @@
+import { BaseLoaderProps } from './common';
+/**
+ * SuccessCheckmark component props
+ */
+export interface SuccessCheckmarkProps extends Omit<BaseLoaderProps, 'speed' | 'reverse' | 'respectMotionPreference'> {
+    /** Stroke width of the checkmark */
+    strokeWidth?: number;
+    /** Duration of the checkmark animation in milliseconds */
+    duration?: number;
+    /** Whether to show a circle background */
+    showCircle?: boolean;
+    /** Circle background color */
+    circleColor?: string;
+    /** Whether to fill the circle */
+    fillCircle?: boolean;
+}
+/**
+ * ErrorIndicator component props
+ */
+export interface ErrorIndicatorProps extends Omit<BaseLoaderProps, 'speed' | 'reverse' | 'respectMotionPreference'> {
+    /** Stroke width of the X mark */
+    strokeWidth?: number;
+    /** Duration of the X mark animation in milliseconds */
+    duration?: number;
+    /** Whether to show a circle background */
+    showCircle?: boolean;
+    /** Circle background color */
+    circleColor?: string;
+    /** Whether to fill the circle */
+    fillCircle?: boolean;
+    /** Whether to shake/bounce on appearance */
+    shake?: boolean;
+}
+//# sourceMappingURL=status.d.ts.map

package/dist/types/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/types/status.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE3C;;GAEG;AACH,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,yBAAyB,CAAC;IACnH,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,OAAO,GAAG,SAAS,GAAG,yBAAyB,CAAC;IACjH,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "premium-react-loaders",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Premium, production-ready loading components for React with TypeScript",
   "author": "Ishan Karunaratne",
   "license": "MIT",