import { IHtmlDivProps } from "../../html/types";
/**
 * A horizontal stack layout component.
 *
 * This component is a thin wrapper around the Div component, with some default styles set
 * to create a horizontal stack layout. It can be used as a drop-in replacement for the Div
 * component when you want to create a horizontal stack layout.
 *
 * @example
 * <HStack>
 *     <Div className="bg-red-500" style={{ width: 50, height: 50 }} />
 *     <Div className="bg-green-500" style={{ width: 50, height: 50 }} />
 *     <Div className="bg-blue-500" style={{ width: 50, height: 50 }} />
 * </HStack>
 *
 * @param {IHtmlDivProps} props - The properties for the HStack component.
 * @returns {ReactElement} A JSX element representing the HStack component.
 */
export declare function HStack(props: IHtmlDivProps): import("react/jsx-runtime").JSX.Element;
/*************  ✨ Windsurf Command ⭐  *************/
/**
 * VStack is a component that arranges its children in a vertical stack.
 * This component leverages the flexbox layout model to align children one below the other.
 *
 * It inherits all properties from the HtmlDiv component, allowing for extensive customization.
 *
 * @param {IHtmlDivProps} props - The properties for the VStack, including any valid HtmlDiv properties.
 *   - **style**: Optional additional styles to apply to the component.
 *   - **...props**: Any additional props that should be passed to the underlying HtmlDiv.
 *
 * @returns {ReactElement} A JSX element representing the VStack, styled as a vertical stack.
 *
 *
 * @example
 * <VStack>
 *     <Div className="bg-red-500" style={{ width: 50, height: 50 }} />
 *     <Div className="bg-green-500" style={{ width: 50, height: 50 }} />
 *     <Div className="bg-blue-500" style={{ width: 50, height: 50 }} />
 * </VStack>
 */
export declare function VStack(props: IHtmlDivProps): import("react/jsx-runtime").JSX.Element;