@hanamura/react-containers/dist/src/components/Cluster.js

Flexible container components for React

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useAdaptiveContainer, normalizeSpacingValue, } from '../core';
/**
 * Cluster component - arranges children in a wrapping flex layout
 *
 * Features:
 * - Responsive spacing and alignment based on breakpoints
 * - Configurable alignment and justification
 * - Flexible wrapping behavior for responsive layouts
 * - Customizable HTML element via 'as' prop
 */
export function Cluster({ children, options, queries, adaptiveOptions, className, style, as = 'div', ...rest }) {
    // Get the current options based on active breakpoint
    const { options: mergedOptions } = useAdaptiveContainer(options, queries, adaptiveOptions);
    // Create the base style for the cluster container
    const containerStyle = {
        display: 'flex',
        flexWrap: 'wrap',
        gap: normalizeSpacingValue(mergedOptions.gap) ?? 0,
        alignItems: mergedOptions.align,
        justifyContent: mergedOptions.justify,
        paddingInline: normalizeSpacingValue(mergedOptions.paddingInline),
        paddingBlock: normalizeSpacingValue(mergedOptions.paddingBlock),
        ...style,
    };
    const Component = as;
    return (_jsx(Component, { className: className, style: containerStyle, ...rest, children: children }));
}
//# sourceMappingURL=Cluster.js.map