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

Flexible container components for React

'use client';
import { jsx as _jsx } from "react/jsx-runtime";
import { useAdaptiveContainer, normalizeSpacingValue, } from '../core';
/**
 * Tile component - creates a responsive grid layout
 *
 * Features:
 * - Responsive column count based on breakpoints
 * - Configurable gap between grid items
 * - Uses CSS Grid for modern layout capabilities
 * - Customizable HTML element via 'as' prop
 */
export function Tile({ 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 tile grid container
    const containerStyle = {
        display: 'grid',
        gridTemplateColumns: typeof mergedOptions.columns === 'number' && mergedOptions.columns > 1
            ? `repeat(${mergedOptions.columns}, minmax(0, 1fr))`
            : 'repeat(1, minmax(0, 1fr))',
        gap: normalizeSpacingValue(mergedOptions.gap) ?? 0,
        paddingInline: normalizeSpacingValue(mergedOptions.paddingInline),
        paddingBlock: normalizeSpacingValue(mergedOptions.paddingBlock),
        ...style,
    };
    const Component = as;
    return (_jsx(Component, { className: className, style: containerStyle, ...rest, children: children }));
}
//# sourceMappingURL=Tile.js.map