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

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

'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { cn } from '../../lib/utilsComprehensive.js';
import { forwardRef, useMemo } from 'react';

const GlassSpotlight = /*#__PURE__*/forwardRef(({
  targetRect,
  onClose,
  className,
  children,
  padding = 8,
  ...rest
}, ref) => {
  const holeStyle = useMemo(() => {
    if (!targetRect) return undefined;
    return {
      position: 'absolute',
      left: targetRect.left - padding,
      top: targetRect.top - padding,
      width: targetRect.width + padding * 2,
      height: targetRect.height + padding * 2,
      borderRadius: 12,
      boxShadow: '0 0 0 9999px var(--glass-text-tertiary-dark)',
      pointerEvents: 'none'
    };
  }, [targetRect, padding]);
  return jsxs("div", {
    ref: ref,
    "data-glass-component": true,
    className: cn('fixed inset-0', className),
    style: {
      background: targetRect ? 'transparent' : 'linear-gradient(135deg, rgba(15,23,42,0.7), rgba(15,23,42,0.85))'
    },
    onClick: onClose,
    ...rest,
    children: [holeStyle ? jsx("div", {
      style: holeStyle
    }) : jsx("span", {
      className: "sr-only",
      children: "Glass spotlight inactive"
    }), children]
  });
});
GlassSpotlight.displayName = 'GlassSpotlight';

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