aura-glass/dist/esm/components/layout/Box.js

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

'use client';
import React from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useA11yId } from '../../utils/a11y.js';

const Box = /*#__PURE__*/React.forwardRef(({
  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
  as: Component = 'div',
  className,
  children,
  'aria-label': ariaLabel,
  role,
  respectMotionPreference = true,
  ...props
}, ref) => {
  const elementId = useA11yId();
  const a11yProps = {
    ...(ariaLabel && {
      'aria-label': ariaLabel
    }),
    ...(role && {
      role
    }),
    ...(ariaLabel && !props.id && {
      id: elementId
    })
  };
  return /*#__PURE__*/React.createElement(Component, {
    className: cn(
    // Motion preferences
    respectMotionPreference && 'motion-safe:transition-all motion-reduce:transition-none', className),
    ref,
    ...a11yProps,
    ...props
  }, children);
});
Box.displayName = 'Box';

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