aura-glass/dist/esm/components/interactive/GlassFocusRing.js

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

'use client';
import { jsx } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import React from 'react';
import { useGlassFocus } from '../../hooks/extended/useGlassFocus.js';
import { ACCESSIBILITY } from '../../tokens/designConstants.js';
import styles from './GlassFocusRing.module.css.js';

// No longer need mergeRefs if attaching ref to wrapper div
// import { mergeRefs } from '../../utils/refUtils'; 
/**
 * A component that wraps a focusable element to provide an animated,
 * glass-styled focus indicator ring.
 */
const GlassFocusRing = ({
  children,
  color,
  ringStyle,
  offset,
  thickness,
  borderRadius,
  disabled,
  className
  // Extract other potential UseGlassFocusOptions if needed
}) => {
  const child = React.Children.only(children);
  // Determine effective color (fallback to accessibility token)
  const effectiveColor = color ?? ACCESSIBILITY.focusRing.color;
  // Hook manages focus classes and state; attach its ref to our wrapper
  const {
    ref,
    options
  } = useGlassFocus({
    color: effectiveColor,
    width: thickness ?? 2,
    offset,
    keyboardNavigation: true,
    enabled: !disabled
  });
  const focusVars = React.useMemo(() => ({
    '--glass-focus-color': options.color,
    '--glass-focus-width': `${options.width}px`,
    '--glass-focus-blur': `${options.blur}px`,
    '--glass-focus-offset': `${options.offset}px`,
    '--glass-focus-spread': `${options.spread}px`,
    '--glass-focus-duration': `${options.duration}ms`,
    borderRadius: borderRadius != null ? `${borderRadius}px` : undefined
  }), [options, borderRadius]);
  return (
    // Wrapper div to capture focus and position the ring
    jsx("div", {
      ref: ref,
      className: cn(styles.wrapper, 'glass-relative glass-inline-block glass-outline-none', className),
      style: focusVars,
      // Make wrapper focusable only if not disabled
      tabIndex: disabled ? -1 : 0,
      children: child
    })
  );
};

export { GlassFocusRing };
//# sourceMappingURL=GlassFocusRing.js.map