aura-glass/dist/esm/components/image-list/ImageListItemBar.js

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

'use client';
import { jsx, jsxs } from 'react/jsx-runtime';
import { forwardRef, useState } from 'react';
import { cn } from '../../lib/utilsComprehensive.js';
import { useReducedMotion } from '../../hooks/useReducedMotion.js';
import styles from './ImageListItemBar.module.css.js';

/**
 * ImageListItemBar Component Implementation
 */
function ImageListItemBarComponent(props, ref) {
  const {
    children,
    className,
    style,
    title,
    subtitle,
    position = 'bottom',
    glass = false,
    actionIcon,
    actionPosition = 'right',
    showOnHover = false,
    ...rest
  } = props;
  // Check if reduced motion is preferred
  const prefersReducedMotion = useReducedMotion();
  // State for hover
  const [isHovered, setIsHovered] = useState(false);
  const rootClassName = cn(styles.root, position === 'top' && styles.positionTop, position === 'bottom' && styles.positionBottom, position === 'below' && styles.positionBelow, glass && styles.glass, actionPosition === 'left' && styles.actionLeft, showOnHover && styles.showOnHover, showOnHover && (isHovered || prefersReducedMotion) && styles.visible, prefersReducedMotion && styles.noTransition, className);
  const actionClassName = cn(styles.action, actionPosition === 'left' && styles.actionLeftAction);
  return jsxs("div", {
    ref: ref,
    className: rootClassName,
    style: style,
    onMouseEnter: () => setIsHovered(true),
    onMouseLeave: () => setIsHovered(false),
    ...rest,
    children: [jsxs("div", {
      className: styles.titleWrapper,
      children: [title && jsx("div", {
        className: styles.title,
        children: title
      }), subtitle && jsx("div", {
        className: styles.subtitle,
        children: subtitle
      })]
    }), actionIcon && jsx("div", {
      className: actionClassName,
      children: actionIcon
    }), children]
  });
}
/**
 * ImageListItemBar Component
 *
 * A title bar for an ImageListItem.
 */
const ImageListItemBar = /*#__PURE__*/forwardRef(ImageListItemBarComponent);
/**
 * GlassImageListItemBar Component
 *
 * Glass variant of the ImageListItemBar component.
 */
const GlassImageListItemBar = /*#__PURE__*/forwardRef((props, ref) => jsx(ImageListItemBar, {
  ...props,
  glass: true,
  ref: ref
}));
GlassImageListItemBar.displayName = 'GlassImageListItemBar';

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