@chakra-ui/layout/dist/wrap.d.mts

Chakra UI layout components that give you massive speed

import * as _chakra_ui_system from '@chakra-ui/system';
import { HTMLChakraProps, SystemProps } from '@chakra-ui/system';

interface WrapProps extends HTMLChakraProps<"div"> {
    /**
     * The space between each child (even if it wraps)
     * @type SystemProps["margin"]
     */
    spacing?: SystemProps["margin"];
    /**
     * The horizontal space between the each child (even if it wraps). Defaults to `spacing` if not defined.
     * @type SystemProps["margin"]
     */
    spacingX?: SystemProps["margin"];
    /**
     * The vertical space between the each child (even if it wraps). Defaults to `spacing` if not defined.
     * @type SystemProps["margin"]
     */
    spacingY?: SystemProps["margin"];
    /**
     * The `justify-content` value (for cross-axis alignment)
     * @type SystemProps["justifyContent"]
     */
    justify?: SystemProps["justifyContent"];
    /**
     * The `align-items` value (for main axis alignment)
     * @type SystemProps["alignItems"]
     */
    align?: SystemProps["alignItems"];
    /**
     * The `flex-direction` value
     * @type SystemProps["flexDirection"]
     */
    direction?: SystemProps["flexDirection"];
    /**
     * If `true`, the children will be wrapped in a `WrapItem`
     * @default false
     */
    shouldWrapChildren?: boolean;
}
/**
 * Layout component used to stack elements that differ in length
 * and are liable to wrap.
 *
 * Common use cases:
 * - Buttons that appear together at the end of forms
 * - Lists of tags and chips
 *
 * @see Docs https://chakra-ui.com/wrap
 */
declare const Wrap: _chakra_ui_system.ComponentWithAs<"div", WrapProps>;
interface WrapItemProps extends HTMLChakraProps<"li"> {
}
declare const WrapItem: _chakra_ui_system.ComponentWithAs<"li", WrapItemProps>;

export { Wrap, WrapItem, WrapItemProps, WrapProps };