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

//#region src/components/HStack.d.ts
interface HStackProps extends UniversalStackProps, DivProps {}
/**
 * **📏 A layout component that arranges its children in columns using flexbox**
 *
 * @description
 * HStack is a layout primitive that arranges its children in a columns [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
 * and can be used to compose larger layouts. HStack is similar to [Box](./box) but provides additional features like a `gap` property to
 * add spacing between children.
 *
 * @example
 * ```tsx
 * import { HStack, Text } from '@yahoo/uds';

 * <HStack gap="6">
 *   <Text variant="body1" color="primary">First</Text>
 *   <Text variant="body1" color="primary">Second</Text>
 *   <Text variant="body1" color="primary">Third</Text>
 * </HStack>
 * ```
 *
 * @usage
 * - Create a row of items, optionally with gaps between items.
 * - Create columns that are sized to their content.
 * - Create columns that fill the available space within the parent container.
 * - Create columns of proportionate size to each other (also known as a ratio-based layout).
 *
 * @see The {@link https://uds.build/docs/components/h-stack HStack Docs} for more info
 *
 * @related [Box](https://uds.build/docs/components/box), [VStack](https://uds.build/docs/components/v-stack)
 **/
declare const HStack: react.ForwardRefExoticComponent<HStackProps & react.RefAttributes<HTMLDivElement>>;
//#endregion
export { HStack, type HStackProps };