
import { UniversalStackProps } from "../types/dist/index.js";
import { DivProps } from "./Box.js";
import * as _$react from "react";

//#region src/components/VStack.d.ts
type VStackProps = UniversalStackProps & DivProps;
/**
 * **🥞 A layout component that arranges its children in rows using flexbox**
 *
 * @description
 * VStack is a layout component that arranges its children in rows using [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
 * and can be used to compose larger layouts. VStack is similar to [Box](./box) but provides additional features like a `gap` property to
 * add spacing between children.
 *
 * @example
 * ```tsx
 * import { VStack, Text } from '@yahoo/uds';
 *
 * <VStack gap="6">
 *   <Text variant="body1" color="primary">First</Text>
 *   <Text variant="body1" color="primary">Second</Text>
 *   <Text variant="body1" color="primary">Third</Text>
 * </VStack>
 * ```
 *
 * @usage
 * - Create a column of items, optionally with gaps between.
 * - Create rows that are sized to their content (height only). By default each child will fill the width of the VStack.
 * - Create rows that fill the available space within the parent container.
 * - Create rows of proportionate size to each other (also known as a ratio-based layout).
 *
 * @see The {@link https://uds.build/docs/components/v-stack VStack Docs} for more info
 *
 * @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack)
 **/
declare const VStack: _$react.ForwardRefExoticComponent<UniversalStackProps & DivProps & _$react.RefAttributes<HTMLDivElement>>;
//#endregion
export { VStack, type VStackProps };