aura-glass/dist/esm/components/visual-feedback/StateIndicator.js

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

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useMemo } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import { createGlassStyle } from '../../utils/createGlassStyle.js';
import styles from './StateIndicator.module.css.js';

// Convert color string to RGB values
const colorToRgb = color => {
  // Convert named colors to their RGB values
  switch (color) {
    case 'primary':
      return '99, 102, 241';
    // Indigo
    case 'secondary':
      return '156, 39, 176';
    // Purple
    case 'error':
      return '240, 82, 82';
    // Red
    case 'info':
      return '3, 169, 244';
    // Light Blue
    case 'success':
      return '76, 175, 80';
    // Green
    case 'warning':
      return '255, 152, 0';
    // Orange
    default:
      // If it's already an RGB value in format 'r, g, b'
      if (/^\d+,\s*\d+,\s*\d+$/.test(color)) {
        return color;
      }
      // Default color (white)
      return '255, 255, 255';
  }
};
// Get color for each state
const getStateColor = (state, color) => {
  const userColor = colorToRgb(color);
  switch (state) {
    case 'hover':
      return `rgba(${userColor}, 0.15)`;
    case 'active':
      return `rgba(${userColor}, 0.3)`;
    case 'focus':
      return `rgba(${userColor}, 0.2)`;
    case 'disabled':
      return 'rgba(148, 163, 184, 0.2)';
    case 'loading':
      return `rgba(${userColor}, 0.2)`;
    case 'success':
      return 'rgba(76, 175, 80, 0.15)';
    case 'error':
      return 'rgba(240, 82, 82, 0.15)';
    case 'default':
    default:
      return 'transparent';
  }
};
/**
 * StateIndicator Component Implementation
 */
function StateIndicatorComponent(props, ref) {
  const {
    children,
    state = 'default',
    glass = false,
    blend = true,
    intensity = 0.7,
    color = 'primary',
    animationDuration = 1500,
    className,
    style,
    ...rest
  } = props;
  // Check if reduced motion is preferred
  const prefersReducedMotion = useReducedMotion();
  const overlayStyle = useMemo(() => {
    if (state === 'default') {
      return {};
    }
    const glassBase = glass ? createGlassStyle({
      elev: 2,
      variant: 'default'
    }) : undefined;
    const {
      position,
      overflow,
      ...rest
    } = glassBase ?? {};
    const style = {
      ...rest,
      backgroundColor: getStateColor(state, color),
      opacity: intensity,
      mixBlendMode: blend ? 'overlay' : 'normal'
    };
    if (state === 'loading') {
      style.animationDuration = `${animationDuration}ms`;
    }
    return style;
  }, [state, color, intensity, blend, glass, animationDuration]);
  return jsxs("div", {
    ref: ref,
    className: cn(styles.container, 'glass-state-indicator', className),
    style: style,
    ...rest,
    children: [children, state !== 'default' && jsx("div", {
      className: cn(styles.overlay, state === 'loading' && !prefersReducedMotion && styles.loading, state === 'disabled' && styles.disabled),
      style: overlayStyle
    })]
  });
}
/**
 * StateIndicator Component
 *
 * A component that visually indicates the current state of a UI element.
 */
const StateIndicator = /*#__PURE__*/forwardRef(StateIndicatorComponent);

export { StateIndicator as default };
//# sourceMappingURL=StateIndicator.js.map