aura-glass 2.0.39 → 2.1.0

package/dist/esm/components/visual-feedback/FocusIndicator.js

@@ -0,0 +1,143 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { useAnimationContext } from '../../contexts/AnimationContext.js';
+import { useAccessibilitySettings } from '../../hooks/useAccessibilitySettings.js';
+import { useMultiSpring } from '../../animations/hooks/useMultiSpringBasic.js';
+import { SpringPresets } from '../../animations/physics/springPhysics.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';
+  }
+};
+/**
+ * FocusIndicator Component Implementation
+ */
+function FocusIndicatorComponent(props, ref) {
+  const {
+    children,
+    visible = false,
+    color: propColor,
+    thickness: propThickness,
+    style: propFocusStyle,
+    glass = false,
+    highContrast: propHighContrast,
+    className,
+    componentStyle,
+    disableAnimation: propDisableAnimation,
+    animationConfig: propAnimationConfig,
+    ...rest
+  } = props;
+  // --- Get Context Defaults ---
+  const {
+    defaultSpring
+  } = useAnimationContext();
+  const {
+    settings: accessibilitySettings
+  } = useAccessibilitySettings();
+  // --- Determine Final Values --- 
+  const finalFocusStyle = propFocusStyle ?? 'solid';
+  const finalColor = propColor ?? 'primary';
+  const finalHighContrast = propHighContrast ?? accessibilitySettings.highContrast ?? false;
+  useReducedMotion();
+  // --- Calculate Spring Config ---
+  const finalSpringConfig = useMemo(() => {
+    const baseConfig = SpringPresets.default;
+    let contextResolvedConfig = {};
+    if (typeof defaultSpring === 'object' && defaultSpring !== null) {
+      contextResolvedConfig = defaultSpring;
+    }
+    let propResolvedConfig = {};
+    if (typeof propAnimationConfig === 'string' && propAnimationConfig in SpringPresets) {
+      propResolvedConfig = SpringPresets[propAnimationConfig];
+    } else if (typeof propAnimationConfig === 'object' && propAnimationConfig !== null) {
+      propResolvedConfig = propAnimationConfig;
+    }
+    return {
+      ...baseConfig,
+      ...contextResolvedConfig,
+      ...propResolvedConfig
+    };
+  }, [defaultSpring, propAnimationConfig]);
+  // --- Initialize Spring Hook ---
+  const {
+    values: animatedValues,
+    start: startFocusAnimation
+  } = useMultiSpring({
+    shadowSpread1: 0,
+    shadowSpread2: 0,
+    shadowOpacity: 0,
+    outlineWidth: 0,
+    outlineOpacity: 0
+  }, {
+    config: finalSpringConfig
+  });
+  // --- Construct Animated Style --- 
+  const animatedStyle = useMemo(() => {
+    const rgbColor = colorToRgb(finalColor);
+    const hcColor = finalHighContrast ? '255, 255, 0' : rgbColor;
+    const outlineStyle = finalFocusStyle === 'dashed' ? 'dashed' : finalFocusStyle === 'dotted' ? 'dotted' : 'solid';
+    const style = {
+      ...componentStyle,
+      boxShadow: `0 0 0 ${animatedValues.shadowSpread1}px rgba(${rgbColor}, ${animatedValues.shadowOpacity * 0.5}), 0 0 ${animatedValues.shadowSpread2}px rgba(${rgbColor}, ${animatedValues.shadowOpacity})`,
+      outline: `${animatedValues.outlineWidth}px ${outlineStyle} rgba(${hcColor}, ${animatedValues.outlineOpacity})`,
+      outlineOffset: '2px'
+    };
+    // Add blur for glow + glass
+    if (finalFocusStyle === 'glow' && glass) {
+      style.backdropFilter = 'blur(var(--glass-blur-sm))';
+    }
+    return style;
+  }, [componentStyle, animatedValues, finalFocusStyle, finalColor, finalHighContrast, glass]);
+  return jsx("div", {
+    ref: ref,
+    className: cn('glass-focus-indicator', className),
+    style: {
+      position: 'relative',
+      display: 'inline-block',
+      outline: 'none',
+      willChange: 'box-shadow, outline, opacity',
+      ...animatedStyle
+    },
+    ...rest,
+    children: children
+  });
+}
+/**
+ * FocusIndicator Component
+ *
+ * A component that provides accessible focus indicators.
+ */
+const FocusIndicator = /*#__PURE__*/forwardRef(FocusIndicatorComponent);
+
+export { FocusIndicator, FocusIndicator as default };
+//# sourceMappingURL=FocusIndicator.js.map

package/dist/esm/components/visual-feedback/FocusIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FocusIndicator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/visual-feedback/RippleButton.js

@@ -0,0 +1,198 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef, useCallback, useMemo } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { GlassButton } from '../button/GlassButton.js';
+import '../button/GlassFab.js';
+import '../button/GlassMagneticButton.js';
+import { createGlassStyle } from '../../core/mixins/glassMixins.js';
+import styles from './RippleButton.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
+    case 'white':
+      return '255, 255, 255';
+    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 ripple size based on button size
+const getRippleSize = size => {
+  switch (size) {
+    case 'small':
+      return 100;
+    case 'large':
+      return 200;
+    case 'medium':
+    default:
+      return 150;
+  }
+};
+// Get ripple duration based on speed - Adjusted default
+const getRippleDuration = speed => {
+  switch (speed) {
+    case 'slow':
+      return 900;
+    case 'fast':
+      return 400;
+    case 'medium':
+    default:
+      return 300;
+    // Shortened default duration further for better sync with physics
+  }
+};
+/**
+ * RippleButton Component Implementation
+ * Wraps the base Button component to add a ripple effect.
+ */
+function RippleButtonComponent(
+// Inherit ButtonProps and add Ripple-specific props
+props, ref) {
+  const {
+    children,
+    disabled = false,
+    rippleColor = 'white',
+    rippleSize: rippleSizeProp,
+    // Rename prop to avoid conflict
+    rippleSpeed = 'medium',
+    centerRipple = false,
+    onClick,
+    onMouseDown,
+    // Capture original onMouseDown
+    // Extract Button props
+    variant = 'primary',
+    size = 'md',
+    fullWidth = false,
+    className,
+    style,
+    ...rest // Rest are Button props
+  } = props;
+  const prefersReducedMotion = useReducedMotion();
+  const [ripples, setRipples] = useState([]);
+  const rippleCount = useRef(0);
+  const wrapperRef = useRef(null); // Ref for the wrapper
+  // Handle ripple creation on mouse down
+  const handleMouseDown = useCallback(event => {
+    if (disabled || prefersReducedMotion) {
+      if (onMouseDown) onMouseDown(event); // Call original handler
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const rect = wrapper.getBoundingClientRect();
+    let x, y;
+    if (centerRipple) {
+      x = rect.width / 2;
+      y = rect.height / 2;
+    } else {
+      x = event.clientX - rect.left;
+      y = event.clientY - rect.top;
+    }
+    const id = rippleCount.current++;
+    const duration = getRippleDuration(rippleSpeed);
+    // Start ripple animation
+    setRipples(prev => [...prev, {
+      id,
+      x,
+      y
+    }]);
+    // Schedule ripple removal after animation duration
+    setTimeout(() => {
+      setRipples(prev => prev.filter(r => r.id !== id));
+    }, duration);
+    // Call the original onMouseDown handler if provided
+    if (onMouseDown) {
+      onMouseDown(event);
+    }
+  }, [disabled, prefersReducedMotion, centerRipple, rippleSpeed, onMouseDown]); // Added dependencies
+  const rippleSizeValue = rippleSizeProp ? getRippleSize(rippleSizeProp) : getRippleSize(size); // Use prop or button size
+  const rippleDuration = getRippleDuration(rippleSpeed);
+  const rippleColorRgb = colorToRgb(rippleColor);
+  const wrapperStyle = useMemo(() => {
+    const base = createGlassStyle({
+      intent: 'neutral',
+      elevation: 'level2',
+      tier: 'high'
+    });
+    const {
+      position,
+      ...rest
+    } = base;
+    return {
+      ...rest,
+      '--ripple-color-rgb': rippleColorRgb
+    };
+  }, [rippleColorRgb]);
+  return (
+    // Apply ripple color CSS variable to the wrapper
+    jsxs("div", {
+      ref: wrapperRef,
+      style: wrapperStyle,
+      className: cn(styles.wrapper, 'glass-ripple-button glass-contrast-guard', className),
+      children: [jsx(GlassButton, {
+        ref: ref,
+        variant: variant,
+        size: size,
+        disabled: disabled,
+        fullWidth: fullWidth,
+        className: "glass-focus glass-touch-target",
+        style: style,
+        onClick: onClick,
+        onMouseDown: handleMouseDown,
+        ...rest,
+        'aria-pressed': rest['aria-pressed'] === 'true' ? true : rest['aria-pressed'] === 'false' ? false : rest['aria-pressed'] === 'mixed' ? undefined : rest['aria-pressed'],
+        'aria-expanded': rest['aria-expanded'] === 'true' ? true : rest['aria-expanded'] === 'false' ? false : rest['aria-expanded'],
+        children: children
+      }), !prefersReducedMotion && jsx("div", {
+        className: styles.ripples,
+        "aria-hidden": "true",
+        children: ripples.map(ripple => jsx("span", {
+          className: styles.ripple,
+          style: {
+            left: ripple.x - rippleSizeValue / 2,
+            top: ripple.y - rippleSizeValue / 2,
+            width: rippleSizeValue,
+            height: rippleSizeValue,
+            animationDuration: `${rippleDuration}ms`
+          }
+        }, ripple.id))
+      })]
+    })
+  );
+}
+/**
+ * RippleButton Component
+ *
+ * A button component that wraps the base Button to add a ripple effect feedback.
+ * It inherits physics interactions from the base Button.
+ */
+const RippleButton = /*#__PURE__*/forwardRef(RippleButtonComponent);
+
+export { RippleButton as default };
+//# sourceMappingURL=RippleButton.js.map

package/dist/esm/components/visual-feedback/RippleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RippleButton.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/visual-feedback/RippleButton.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"wrapper":"RippleButton-module_wrapper__P-uSJ","ripples":"RippleButton-module_ripples__uAAUJ","ripple":"RippleButton-module_ripple__LEStZ","auraRippleButton":"RippleButton-module_auraRippleButton__bGPyv","content":"RippleButton-module_content__5QtsG"};
+
+export { styles as default };
+//# sourceMappingURL=RippleButton.module.css.js.map

package/dist/esm/components/visual-feedback/RippleButton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RippleButton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/visual-feedback/StateIndicator.js

@@ -0,0 +1,124 @@
+'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

package/dist/esm/components/visual-feedback/StateIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateIndicator.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/visual-feedback/StateIndicator.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"container":"StateIndicator-module_container__0WOv1","overlay":"StateIndicator-module_overlay__xeVeH","loading":"StateIndicator-module_loading__LriHn","auraStateIndicatorPulse":"StateIndicator-module_auraStateIndicatorPulse__zrhPX","disabled":"StateIndicator-module_disabled__whkam"};
+
+export { styles as default };
+//# sourceMappingURL=StateIndicator.module.css.js.map

package/dist/esm/components/visual-feedback/StateIndicator.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StateIndicator.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/visual-feedback/VisualFeedback.js

@@ -0,0 +1,169 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useEffect, useMemo } from 'react';
+import { cn } from '../../lib/utilsComprehensive.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+import { createGlassStyle } from '../../core/mixins/glassMixins.js';
+import styles from './VisualFeedback.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';
+  }
+};
+/**
+ * VisualFeedback Component Implementation
+ */
+function VisualFeedbackComponent(props, ref) {
+  const {
+    children,
+    effect = 'highlight',
+    active = false,
+    color = 'primary',
+    duration = 1000,
+    glass = false,
+    intensity = 0.5,
+    className,
+    style,
+    ...rest
+  } = props;
+  // Check if reduced motion is preferred
+  const prefersReducedMotion = useReducedMotion();
+  // Refs
+  const containerRef = useRef(null);
+  // State for ripple effect
+  const [ripples, setRipples] = useState([]);
+  const rippleCount = useRef(0);
+  // Handle ripple effect
+  const handleRipple = event => {
+    if (effect !== 'ripple' || !active || prefersReducedMotion) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const size = Math.max(rect.width, rect.height);
+    const x = event.clientX - rect.left;
+    const y = event.clientY - rect.top;
+    // Add new ripple
+    const id = rippleCount.current;
+    rippleCount.current += 1;
+    const newRipple = {
+      id,
+      x,
+      y,
+      size
+    };
+    setRipples(prevRipples => [...prevRipples, newRipple]);
+    // Remove ripple after animation completes
+    setTimeout(() => {
+      setRipples(prevRipples => prevRipples.filter(r => r.id !== id));
+    }, duration);
+  };
+  // Clean up ripples when component unmounts
+  useEffect(() => {
+    return () => {
+      setRipples([]);
+    };
+  }, []);
+  // Handle forwarded ref
+  const setRefs = element => {
+    containerRef.current = element;
+    // Handle the forwarded ref
+    if (typeof ref === 'function') {
+      ref(element);
+    } else if (ref) {
+      ref.current = element;
+    }
+  };
+  const animationClass = useMemo(() => {
+    if (!active || effect === 'none' || prefersReducedMotion) {
+      return undefined;
+    }
+    switch (effect) {
+      case 'pulse':
+        return styles.pulse;
+      case 'glow':
+        return styles.glow;
+      case 'highlight':
+        return styles.highlight;
+      case 'bounce':
+        return styles.bounce;
+      case 'shake':
+        return styles.shake;
+      default:
+        return undefined;
+    }
+  }, [active, effect, prefersReducedMotion]);
+  const containerClassName = cn(styles.container, effect === 'ripple' && styles.rippleOverflow, animationClass, 'glass-visual-feedback', className);
+  const containerStyle = useMemo(() => ({
+    '--feedback-color-rgb': colorToRgb(color),
+    animationDuration: `${duration}ms`,
+    ...style
+  }), [color, duration, style]);
+  return jsxs("div", {
+    ref: setRefs,
+    className: containerClassName,
+    style: containerStyle,
+    onClick: effect === 'ripple' ? handleRipple : undefined,
+    ...rest,
+    children: [glass && active && !prefersReducedMotion ? jsx("div", {
+      className: styles.glassOverlay,
+      style: {
+        opacity: intensity * 0.5,
+        ...createGlassStyle({
+          intent: 'neutral',
+          elevation: 'level2'
+        })
+      }
+    }) : null, jsx("div", {
+      className: styles.content,
+      children: children
+    }), effect === 'ripple' && jsx("div", {
+      className: styles.ripples,
+      children: ripples.map(ripple => jsx("div", {
+        className: styles.ripple,
+        style: {
+          top: ripple.y,
+          left: ripple.x,
+          width: ripple.size,
+          height: ripple.size,
+          animationDuration: `${duration}ms`
+        }
+      }, ripple.id))
+    })]
+  });
+}
+/**
+ * VisualFeedback Component
+ *
+ * A component that provides visual feedback effects.
+ */
+const VisualFeedback = /*#__PURE__*/forwardRef(VisualFeedbackComponent);
+
+export { VisualFeedback as default };
+//# sourceMappingURL=VisualFeedback.js.map

package/dist/esm/components/visual-feedback/VisualFeedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualFeedback.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/components/visual-feedback/VisualFeedback.module.css.js

@@ -0,0 +1,4 @@
+var styles = {"container":"VisualFeedback-module_container__rXmZY","rippleOverflow":"VisualFeedback-module_rippleOverflow__8EC5F","pulse":"VisualFeedback-module_pulse__giTuG","auraPulse":"VisualFeedback-module_auraPulse__TNoMa","glow":"VisualFeedback-module_glow__ubMp3","auraGlow":"VisualFeedback-module_auraGlow__SLG9h","highlight":"VisualFeedback-module_highlight__Z1-R9","auraHighlight":"VisualFeedback-module_auraHighlight__643lT","bounce":"VisualFeedback-module_bounce__Id9QE","auraBounce":"VisualFeedback-module_auraBounce__QwIXr","shake":"VisualFeedback-module_shake__IOigw","auraShake":"VisualFeedback-module_auraShake__9Wv0o","glassOverlay":"VisualFeedback-module_glassOverlay__5trIw","content":"VisualFeedback-module_content__cDZnK","ripples":"VisualFeedback-module_ripples__84sKg","ripple":"VisualFeedback-module_ripple__WfFpm","auraRipple":"VisualFeedback-module_auraRipple__1-uPn"};
+
+export { styles as default };
+//# sourceMappingURL=VisualFeedback.module.css.js.map

package/dist/esm/components/visual-feedback/VisualFeedback.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisualFeedback.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}