aura-glass/dist/esm/components/data-display/GlassSkeleton.js

A comprehensive glassmorphism design system for React applications with 142+ production-ready components

'use client';
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import '../../primitives/GlassCore.js';
import '../../primitives/glass/GlassAdvanced.js';
import { OptimizedGlassCore } from '../../primitives/OptimizedGlassCore.js';
import '../../primitives/glass/OptimizedGlassAdvanced.js';
import '../../primitives/MotionNative.js';
import '../../primitives/motion/MotionFramer.js';

// Animation keyframes
const skeletonKeyframes = `
  @keyframes skeleton-pulse {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0.6;
    }
  }

  @keyframes skeleton-wave {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }
`;
/**
 * GlassSkeleton component
 * A skeleton loader with glassmorphism styling for loading states
 */
const GlassSkeleton = /*#__PURE__*/forwardRef(({
  // TODO: Integrate ContrastGuard for table cells, list items, badges, card titles, and other text content for WCAG AA compliance
  variant = "text",
  width,
  height,
  animation = "pulse",
  className,
  lines = 1,
  spacing = "0.5rem",
  ...props
}, ref) => {
  const getBaseStyles = () => {
    const baseWidth = typeof width === "number" ? `${width}px` : width || "100%";
    const baseHeight = typeof height === "number" ? `${height}px` : height;
    switch (variant) {
      case "circular":
        const size = baseHeight || baseWidth || "2rem";
        return {
          width: size,
          height: size,
          borderRadius: "50%"
        };
      case "glass-radius-md":
        return {
          width: baseWidth,
          height: baseHeight || "1rem",
          borderRadius: "0.375rem"
        };
      case "rectangular":
        return {
          width: baseWidth,
          height: baseHeight || "1rem",
          borderRadius: "0.25rem"
        };
      case "text":
      default:
        return {
          width: baseWidth,
          height: baseHeight || "1rem",
          borderRadius: "0.125rem"
        };
    }
  };
  const getAnimationStyles = () => {
    switch (animation) {
      case "pulse":
        return {
          animation: "skeleton-pulse 2s ease-in-out infinite"
        };
      case "wave":
        return {
          position: "relative",
          overflow: "hidden",
          background: '/* Use createGlassStyle({ intent: "neutral", elevation: "level2" }) */',
          backgroundSize: "200% 100%",
          animation: "skeleton-wave 2s infinite"
        };
      case "none":
      default:
        return {};
    }
  };
  if (variant === "text" && lines > 1) {
    return jsxs(Fragment, {
      children: [jsx("style", {
        children: skeletonKeyframes
      }), jsx("div", {
        ref: ref,
        className: cn("glass-gap-2", className),
        ...props,
        children: Array.from({
          length: lines
        }, (_, index) => {
          const lineWidth = Array.isArray(width) ? width[index % width.length] : typeof width === "string" && width.includes(",") ? width.split(",")[index % width.split(",").length].trim() : index === lines - 1 ? "60%" : "100%";
          return jsx(OptimizedGlassCore, {
            "data-glass-component": true,
            elevation: "level1",
            intensity: "subtle",
            depth: 1,
            tint: "neutral",
            border: "subtle",
            animation: "none",
            performanceMode: "low",
            "data-glass-skeleton": "true",
            "data-skeleton-variant": variant,
            className: cn("block glass-skeleton", animation === "pulse" && "animate-pulse"),
            style: {
              ...getBaseStyles(),
              width: lineWidth,
              ...getAnimationStyles(),
              animationDelay: `${index * 0.1}s`
            }
          }, index);
        })
      })]
    });
  }
  return jsxs(Fragment, {
    children: [jsx("style", {
      children: skeletonKeyframes
    }), jsx(OptimizedGlassCore, {
      ref: ref,
      elevation: "level1",
      intensity: "subtle",
      depth: 1,
      tint: "neutral",
      border: "subtle",
      animation: "none",
      performanceMode: "low",
      "data-glass-skeleton": "true",
      "data-skeleton-variant": variant,
      "data-skeleton-animation": animation,
      className: cn("block glass-skeleton", animation === "pulse" && "animate-pulse", className),
      style: {
        ...getBaseStyles(),
        ...getAnimationStyles()
      },
      ...props
    })]
  });
});
GlassSkeleton.displayName = "GlassSkeleton";
// Pre-built skeleton components for common use cases
const GlassSkeletonAvatar = ({
  size = "md",
  className = ""
}) => {
  const sizeClasses = {
    sm: "w-8 h-8",
    md: "w-10 h-10",
    lg: "w-12 h-12",
    xl: "w-16 h-16"
  };
  return jsx(GlassSkeleton, {
    variant: "circular",
    className: `${sizeClasses[size]} ${className}`,
    animation: "pulse"
  });
};
const GlassSkeletonButton = ({
  width = "80px",
  className = ""
}) => {
  return jsx(GlassSkeleton, {
    variant: "glass-radius-md",
    width: width,
    height: "2.5rem",
    className: className,
    animation: "pulse"
  });
};

export { GlassSkeleton, GlassSkeletonAvatar, GlassSkeletonButton };
//# sourceMappingURL=GlassSkeleton.js.map