/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { Box } from "./Box.js";
import { intersperseReactChildren } from "../utils/intersperse.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/HStack.tsx
/**
* **📏 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)
**/
const HStack = forwardRef(function HStack({ gap, children, separator, ...props }, ref) {
	return /* @__PURE__ */ jsx(Box, {
		ref,
		flexDirection: "row",
		rowGap: gap,
		columnGap: gap,
		...props,
		children: separator ? intersperseReactChildren(children, separator) : children
	});
});
HStack.displayName = "HStack";
//#endregion
export { HStack };
