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

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

'use client';
import { jsx } from 'react/jsx-runtime';
import React, { forwardRef } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useA11yId } from '../../utils/a11y.js';
import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';

/**
 * GlassMasonry component
 * CSS Masonry layout for displaying content in a column-based grid
 */
const GlassMasonry = /*#__PURE__*/forwardRef(({
  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
  columns = 3,
  gap = 12,
  children,
  className,
  respectMotionPreference = true,
  'aria-label': ariaLabel = 'Masonry layout',
  role = 'grid',
  ...props
}, ref) => {
  const masonryId = useA11yId();
  const {
    prefersReducedMotion
  } = useMotionPreferenceContext();
  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
  return jsx("div", {
    ref: ref,
    id: masonryId,
    className: cn('w-full',
    // Motion preferences
    shouldRespectMotion && 'motion-safe:transition-all motion-reduce:transition-none', className),
    style: {
      columnCount: columns,
      columnGap: gap
    },
    "aria-label": ariaLabel,
    role: role,
    ...props,
    children: React.Children.map(children, (child, i) => jsx("div", {
      role: "gridcell",
      style: {
        breakInside: 'avoid',
        marginBottom: gap
      },
      className: shouldRespectMotion ? 'motion-safe:transition-all motion-reduce:transition-none' : '',
      children: child
    }, i))
  });
});
GlassMasonry.displayName = 'GlassMasonry';

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