aura-glass/dist/esm/components/image-list/ImageList.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, useRef, useEffect, useMemo, createContext } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import styles from './ImageList.module.css.js';

const ImageListContext = /*#__PURE__*/createContext({
  variant: 'standard',
  rowHeight: 'auto',
  gap: 8,
  cols: 2,
  glass: false,
  variableSize: false,
  glassRadiusMd: false
});
/**
 * ImageList Component Implementation
 */
function ImageListComponent(props, ref) {
  const {
    children,
    className,
    style,
    cols = 2,
    gap = 8,
    rowHeight = 'auto',
    variant = 'standard',
    glass = false,
    glassRadiusMd = false,
    variableSize = false,
    enableEntranceAnimation = true,
    animationConfig,
    disableAnimation,
    motionSensitivity,
    ...rest
  } = props;
  // Ref for the root ul element
  const rootRef = useRef(null);
  // Assign forwarded ref to internal ref if provided
  useEffect(() => {
    if (!ref) return;
    if (typeof ref === 'function') {
      ref(rootRef.current);
    } else {
      ref.current = rootRef.current;
    }
  }, [ref]);
  // Create context value
  const contextValue = useMemo(() => ({
    variant,
    rowHeight,
    gap,
    cols,
    glass,
    variableSize,
    glassRadiusMd
  }), [variant, rowHeight, gap, cols, glass, variableSize, glassRadiusMd]);
  const styleVars = useMemo(() => {
    const normalizedCols = Math.max(1, cols);
    const gapValue = `${gap}px`;
    const rowHeightValue = typeof rowHeight === 'number' ? `${rowHeight}px` : rowHeight;
    return {
      '--image-list-gap': gapValue,
      '--image-list-cols': String(normalizedCols),
      '--image-list-row-height': rowHeightValue === undefined ? 'auto' : rowHeightValue,
      '--image-list-padding': glass ? gapValue : '0px'
    };
  }, [cols, gap, rowHeight, glass]);
  const rootClassName = cn(styles.root, variant === 'masonry' ? styles.masonry : styles.grid, variant === 'standard' && styles.variantStandard, variant === 'quilted' && styles.variantQuilted, variant === 'woven' && styles.variantWoven, glass && styles.glass, glassRadiusMd && styles.radiusMd, className);
  return jsx(ImageListContext.Provider, {
    value: contextValue,
    children: jsx("ul", {
      ref: rootRef,
      className: rootClassName,
      style: {
        ...style,
        ...styleVars
      },
      ...rest,
      children: React.Children.map(children, child => {
        if (/*#__PURE__*/React.isValidElement(child)) {
          // Clone element, merging className
          return /*#__PURE__*/React.cloneElement(child, {
            className: `${child.props?.className || ''} galileo-image-list-item`
          });
        }
        return child;
      })
    })
  });
}
/**
 * ImageList Component
 *
 * A grid of images.
 */
const ImageList = /*#__PURE__*/forwardRef(ImageListComponent);
/**
 * GlassImageList Component
 *
 * Glass variant of the ImageList component.
 */
const GlassImageList = /*#__PURE__*/forwardRef((props, ref) => jsx(ImageList, {
  ...props,
  glass: true,
  ref: ref
}));
GlassImageList.displayName = 'GlassImageList';

export { GlassImageList, ImageList, ImageListContext, ImageList as default };
//# sourceMappingURL=ImageList.js.map