@hanamura/react-containers/dist/src/components/Stack.d.ts

Flexible container components for React

import { ReactNode } from 'react';
import { ContainerProps, DefaultSpacingType, CommonContainerOptions } from '../core';
/**
 * Configuration for where dividers should appear in Stack
 */
export interface DividerPositions {
    /** Show divider before the first item (default: false) */
    start?: boolean;
    /** Show dividers between items (default: true) */
    between?: boolean;
    /** Show divider after the last item (default: false) */
    end?: boolean;
}
/**
 * Position type for dividers in Stack component
 */
export type DividerPosition = 'start' | 'between' | 'end';
/**
 * Props passed to the divider rendering function
 */
export interface DividerProps {
    /** Index value: 0 for start, 1...n for between dividers, childCount for end */
    index: number;
    /** Position type of the divider */
    position: DividerPosition;
}
/**
 * Options for configuring the Stack component
 */
export interface StackOptions<S extends string | number = DefaultSpacingType> extends CommonContainerOptions<S> {
    /** Space between stacked items */
    gap?: S;
    /**
     * Divider element to insert between stack items
     * Can be either a ReactNode (for static dividers) or a function that returns a ReactNode (for dynamic dividers)
     */
    divider?: ReactNode | ((props: DividerProps) => ReactNode);
    /** Control where dividers appear */
    dividerPositions?: DividerPositions;
}
/**
 * Props for the Stack component
 */
export type StackProps<K extends string = string, S extends string | number = DefaultSpacingType> = ContainerProps<K, StackOptions<S>, S>;
/**
 * Stack component - arranges children in a vertical stack
 *
 * Features:
 * - Responsive spacing based on breakpoints
 * - Optional dividers at start, between items, and end
 * - Customizable divider rendering with position information
 * - Customizable HTML element via 'as' prop
 */
export declare function Stack<K extends string = string, S extends string | number = DefaultSpacingType>({ children, options, queries, adaptiveOptions, className, style, as, ...rest }: StackProps<K, S>): import("react/jsx-runtime").JSX.Element;