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

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

'use client';
import { jsx } from 'react/jsx-runtime';
import { useMotionPreferenceContext } from '../../contexts/MotionPreferenceContext.js';
import { forwardRef } from 'react';
import { GlassStack } from './GlassStack.js';

/**
 * Vertical Stack component
 * Wrapper around GlassStack with direction set to vertical
 */
const VStack = /*#__PURE__*/forwardRef(({
  spacing,
  space,
  respectMotionPreference = true,
  'aria-label': ariaLabel,
  role,
  ...props
}, ref) => {
  // TODO: Integrate ContrastGuard for any section titles, labels, and helper text for WCAG AA compliance
  const {
    prefersReducedMotion
  } = useMotionPreferenceContext();
  const shouldRespectMotion = respectMotionPreference && !prefersReducedMotion;
  const ariaLabelledBy = props['aria-labelledby'];
  const resolvedRole = role ?? (ariaLabel || ariaLabelledBy ? 'group' : undefined);
  return jsx(GlassStack, {
    ref: ref,
    direction: "vertical",
    space: spacing || space,
    respectMotionPreference: shouldRespectMotion,
    "aria-label": ariaLabel,
    role: resolvedRole,
    ...props
  });
});
VStack.displayName = 'VStack';

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