premium-react-loaders 3.0.0 → 3.1.0

package/dist/hooks/useSmartLoader.d.ts

@@ -0,0 +1,98 @@
+export type ConnectionSpeed = 'slow' | 'medium' | 'fast';
+export interface SmartLoaderOptions {
+    /** Auto-detect slow connections and adjust behavior */
+    adaptToConnection?: boolean;
+    /** Show estimated progress based on historical data */
+    estimateProgress?: boolean;
+    /** Automatically retry on failure */
+    autoRetry?: boolean;
+    /** Maximum retry attempts */
+    maxRetries?: number;
+    /** Use intelligent delay based on connection speed */
+    intelligentDelay?: boolean;
+    /** Callback when loading starts */
+    onLoadingStart?: () => void;
+    /** Callback when loading completes */
+    onLoadingComplete?: () => void;
+    /** Callback on retry */
+    onRetry?: (attempt: number) => void;
+}
+export interface UseSmartLoaderReturn {
+    /** Current loading state */
+    loading: boolean;
+    /** Progress percentage (0-100) */
+    progress: number;
+    /** Estimated time remaining in seconds */
+    estimatedTimeRemaining: number;
+    /** Detected connection speed */
+    connectionSpeed: ConnectionSpeed;
+    /** Whether loader should be shown (accounts for intelligent delay) */
+    shouldShowLoader: boolean;
+    /** Current retry attempt */
+    retryAttempt: number;
+    /** Start loading */
+    startLoading: () => void;
+    /** Stop loading */
+    stopLoading: (success?: boolean) => void;
+    /** Update progress manually */
+    updateProgress: (value: number) => void;
+    /** Retry the operation */
+    retry: () => void;
+}
+/**
+ * useSmartLoader - Intelligent loader with adaptive UX
+ *
+ * Combines multiple smart loading features: connection detection, progress estimation,
+ * intelligent delays, and automatic retry logic for optimal user experience.
+ *
+ * @param options - Configuration options
+ * @returns Smart loading state and controls
+ *
+ * @example
+ * ```tsx
+ * function SmartDataLoader() {
+ *   const {
+ *     loading,
+ *     progress,
+ *     estimatedTimeRemaining,
+ *     connectionSpeed,
+ *     shouldShowLoader,
+ *     startLoading,
+ *     stopLoading,
+ *     updateProgress,
+ *   } = useSmartLoader({
+ *     adaptToConnection: true,
+ *     estimateProgress: true,
+ *     autoRetry: true,
+ *     maxRetries: 3,
+ *     intelligentDelay: true,
+ *   });
+ *
+ *   const loadData = async () => {
+ *     startLoading();
+ *     try {
+ *       const data = await fetchData((progress) => {
+ *         updateProgress(progress);
+ *       });
+ *       stopLoading(true);
+ *     } catch (error) {
+ *       stopLoading(false);
+ *     }
+ *   };
+ *
+ *   return (
+ *     <>
+ *       {shouldShowLoader && (
+ *         <div>
+ *           <ProgressBar value={progress} />
+ *           <p>Connection: {connectionSpeed}</p>
+ *           <p>ETA: {estimatedTimeRemaining}s</p>
+ *         </div>
+ *       )}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+export declare function useSmartLoader(options?: SmartLoaderOptions): UseSmartLoaderReturn;
+//# sourceMappingURL=useSmartLoader.d.ts.map

package/dist/hooks/useSmartLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSmartLoader.d.ts","sourceRoot":"","sources":["../../src/hooks/useSmartLoader.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IACjC,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,uDAAuD;IACvD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,qCAAqC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,sCAAsC;IACtC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,MAAM,WAAW,oBAAoB;IACnC,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,kCAAkC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,0CAA0C;IAC1C,sBAAsB,EAAE,MAAM,CAAC;IAC/B,gCAAgC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,sEAAsE;IACtE,gBAAgB,EAAE,OAAO,CAAC;IAC1B,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,mBAAmB;IACnB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,+BAA+B;IAC/B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,0BAA0B;IAC1B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,wBAAgB,cAAc,CAC5B,OAAO,GAAE,kBAAuB,GAC/B,oBAAoB,CA6OtB"}

package/dist/index.cjs

@@ -14,37 +14,46 @@ 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 LoaderTransition = require("./index35.cjs");
-const ShimmerBox = require("./index36.cjs");
-const ShimmerText = require("./index37.cjs");
-const ShimmerButton = require("./index38.cjs");
-const OrbitDots = require("./index39.cjs");
-const OrbitRings = require("./index40.cjs");
-const AtomLoader = require("./index41.cjs");
-const BouncingDots = require("./index42.cjs");
-const BouncingBalls = require("./index43.cjs");
-const InfinityLoader = require("./index44.cjs");
-const MobiusLoader = require("./index45.cjs");
-const LoadingText = require("./index46.cjs");
+const SmartSkeleton = require("./index16.cjs");
+const DataTableSkeleton = require("./index17.cjs");
+const SpinnerCircle = require("./index18.cjs");
+const SpinnerRing = require("./index19.cjs");
+const SpinnerDots = require("./index20.cjs");
+const SpinnerBars = require("./index21.cjs");
+const SpinnerGrid = require("./index22.cjs");
+const SpinnerWave = require("./index23.cjs");
+const SpinnerPulse = require("./index24.cjs");
+const ProgressBar = require("./index25.cjs");
+const ProgressCircle = require("./index26.cjs");
+const ProgressRing = require("./index27.cjs");
+const ProgressSteps = require("./index28.cjs");
+const PulseDots = require("./index29.cjs");
+const PulseWave = require("./index30.cjs");
+const PulseBars = require("./index31.cjs");
+const TypingIndicator = require("./index32.cjs");
+const LoaderOverlay = require("./index33.cjs");
+const ButtonSpinner = require("./index34.cjs");
+const SuccessCheckmark = require("./index35.cjs");
+const ErrorIndicator = require("./index36.cjs");
+const LoaderTransition = require("./index37.cjs");
+const ShimmerBox = require("./index38.cjs");
+const ShimmerText = require("./index39.cjs");
+const ShimmerButton = require("./index40.cjs");
+const OrbitDots = require("./index41.cjs");
+const OrbitRings = require("./index42.cjs");
+const AtomLoader = require("./index43.cjs");
+const BouncingDots = require("./index44.cjs");
+const BouncingBalls = require("./index45.cjs");
+const InfinityLoader = require("./index46.cjs");
+const MobiusLoader = require("./index47.cjs");
+const LoadingText = require("./index48.cjs");
+const CubeSpinner = require("./index49.cjs");
+const FlipCard = require("./index50.cjs");
+const PlaneRotate = require("./index51.cjs");
+const Helix = require("./index52.cjs");
+const PerspectiveRing = require("./index53.cjs");
+const FormFieldLoader = require("./index54.cjs");
+const LiveRegion = require("./index55.cjs");
 const version = "2.1.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
@@ -61,6 +70,8 @@ exports.SkeletonList = SkeletonList.SkeletonList;
 exports.SkeletonTable = SkeletonTable.SkeletonTable;
 exports.SkeletonPage = SkeletonPage.SkeletonPage;
 exports.SkeletonForm = SkeletonForm.SkeletonForm;
+exports.SmartSkeleton = SmartSkeleton.SmartSkeleton;
+exports.DataTableSkeleton = DataTableSkeleton.DataTableSkeleton;
 exports.SpinnerCircle = SpinnerCircle.SpinnerCircle;
 exports.SpinnerRing = SpinnerRing.SpinnerRing;
 exports.SpinnerDots = SpinnerDots.SpinnerDots;
@@ -92,4 +103,11 @@ exports.BouncingBalls = BouncingBalls.BouncingBalls;
 exports.InfinityLoader = InfinityLoader.InfinityLoader;
 exports.MobiusLoader = MobiusLoader.MobiusLoader;
 exports.LoadingText = LoadingText.LoadingText;
+exports.CubeSpinner = CubeSpinner.CubeSpinner;
+exports.FlipCard = FlipCard.FlipCard;
+exports.PlaneRotate = PlaneRotate.PlaneRotate;
+exports.Helix = Helix.Helix;
+exports.PerspectiveRing = PerspectiveRing.PerspectiveRing;
+exports.FormFieldLoader = FormFieldLoader.FormFieldLoader;
+exports.LiveRegion = LiveRegion.LiveRegion;
 exports.version = version;

package/dist/index.js

@@ -12,51 +12,68 @@ 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";
-import { LoaderTransition } from "./index35.js";
-import { ShimmerBox } from "./index36.js";
-import { ShimmerText } from "./index37.js";
-import { ShimmerButton } from "./index38.js";
-import { OrbitDots } from "./index39.js";
-import { OrbitRings } from "./index40.js";
-import { AtomLoader } from "./index41.js";
-import { BouncingDots } from "./index42.js";
-import { BouncingBalls } from "./index43.js";
-import { InfinityLoader } from "./index44.js";
-import { MobiusLoader } from "./index45.js";
-import { LoadingText } from "./index46.js";
+import { SmartSkeleton } from "./index16.js";
+import { DataTableSkeleton } from "./index17.js";
+import { SpinnerCircle } from "./index18.js";
+import { SpinnerRing } from "./index19.js";
+import { SpinnerDots } from "./index20.js";
+import { SpinnerBars } from "./index21.js";
+import { SpinnerGrid } from "./index22.js";
+import { SpinnerWave } from "./index23.js";
+import { SpinnerPulse } from "./index24.js";
+import { ProgressBar } from "./index25.js";
+import { ProgressCircle } from "./index26.js";
+import { ProgressRing } from "./index27.js";
+import { ProgressSteps } from "./index28.js";
+import { PulseDots } from "./index29.js";
+import { PulseWave } from "./index30.js";
+import { PulseBars } from "./index31.js";
+import { TypingIndicator } from "./index32.js";
+import { LoaderOverlay } from "./index33.js";
+import { ButtonSpinner } from "./index34.js";
+import { SuccessCheckmark } from "./index35.js";
+import { ErrorIndicator } from "./index36.js";
+import { LoaderTransition } from "./index37.js";
+import { ShimmerBox } from "./index38.js";
+import { ShimmerText } from "./index39.js";
+import { ShimmerButton } from "./index40.js";
+import { OrbitDots } from "./index41.js";
+import { OrbitRings } from "./index42.js";
+import { AtomLoader } from "./index43.js";
+import { BouncingDots } from "./index44.js";
+import { BouncingBalls } from "./index45.js";
+import { InfinityLoader } from "./index46.js";
+import { MobiusLoader } from "./index47.js";
+import { LoadingText } from "./index48.js";
+import { CubeSpinner } from "./index49.js";
+import { FlipCard } from "./index50.js";
+import { PlaneRotate } from "./index51.js";
+import { Helix } from "./index52.js";
+import { PerspectiveRing } from "./index53.js";
+import { FormFieldLoader } from "./index54.js";
+import { LiveRegion } from "./index55.js";
 const version = "2.1.0";
 export {
   AtomLoader,
   BouncingBalls,
   BouncingDots,
   ButtonSpinner,
+  CubeSpinner,
+  DataTableSkeleton,
   ErrorIndicator,
+  FlipCard,
+  FormFieldLoader,
+  Helix,
   InfinityLoader,
+  LiveRegion,
   LoaderOverlay,
   LoaderTransition,
   LoadingText,
   MobiusLoader,
   OrbitDots,
   OrbitRings,
+  PerspectiveRing,
+  PlaneRotate,
   ProgressBar,
   ProgressCircle,
   ProgressRing,
@@ -76,6 +93,7 @@ export {
   SkeletonPage,
   SkeletonTable,
   SkeletonText,
+  SmartSkeleton,
   SpinnerBars,
   SpinnerCircle,
   SpinnerDots,

package/dist/index10.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("./index47.cjs");
+const hooks = require("./index56.cjs");
 const SkeletonImage = react.forwardRef(
   ({
     width = "100%",

package/dist/index10.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
-import { useLoaderVisibility } from "./index47.js";
+import { useLoaderVisibility } from "./index56.js";
 const SkeletonImage = forwardRef(
   ({
     width = "100%",

package/dist/index11.cjs

@@ -4,7 +4,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
 const Skeleton = require("./index7.cjs");
 const SkeletonAvatar = require("./index9.cjs");
-const hooks = require("./index47.cjs");
+const hooks = require("./index56.cjs");
 const classNames = require("./index3.cjs");
 const SkeletonCard = react.forwardRef(
   ({

package/dist/index11.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Skeleton } from "./index7.js";
 import { SkeletonAvatar } from "./index9.js";
-import { useLoaderVisibility } from "./index47.js";
+import { useLoaderVisibility } from "./index56.js";
 import { cn } from "./index3.js";
 const SkeletonCard = forwardRef(
   ({

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