@hanamura/react-containers/dist/Cluster.d.ts

Flexible container components for React

import { ContainerProps, DefaultSpacingType, CommonContainerOptions, SpacingValue } from './core/types';
/**
 * Options for configuring the Cluster component
 */
export interface ClusterOptions<S extends string | number = DefaultSpacingType> extends CommonContainerOptions<S> {
    /** Space between flex items (single value or [rowGap, columnGap]) */
    gap?: SpacingValue<S>;
    /** Cross-axis alignment for flex items */
    align?: 'start' | 'center' | 'end' | 'stretch';
    /** Main-axis alignment for flex items */
    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
}
/**
 * Props for the Cluster component
 */
export type ClusterProps<K extends string = string, S extends string | number = DefaultSpacingType> = ContainerProps<K, ClusterOptions<S>, S>;
/**
 * 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
 */
export declare function Cluster<K extends string = string, S extends string | number = DefaultSpacingType>({ children, defaultOptions, queries, adaptiveOptions, className, style, }: ClusterProps<K, S>): import("react/jsx-runtime").JSX.Element;