/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { DividerInternal } from "./DividerInternal.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/components/Divider/Divider.tsx
/**
* **📦 A divider component that can be used to visually separate components**
*
* @description
* The Divider component is a visual element used to separate content and create clear groupings within a layout. It helps establish hierarchy, improve readability, and guide users through sections of an interface. Dividers can appear as horizontal or vertical lines and are commonly used between related content blocks, within menus, or in dense UI areas to reduce visual clutter.
*
* @example
* ```tsx
* import { Divider } from '@yahoo/uds';
*
* // Default primary horizontal divider. Similar to <hr />
* <Divider />
*
* // A vertical divider.
* <Divider vertical />
*
* // A horizontal divider with the secondary styling.
* <Divider variant="secondary" />
*
* // A vertical divider with the tertiary styling.
* <Divider vertical variant="tertiary" />
* ```
*
* @usage
* - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
*
* @see The {@link https://uds.build/docs/components/divider Divider Docs} for more info
*
* @related [Box](https://uds.build/docs/components/box), [HStack](https://uds.build/docs/components/h-stack), [VStack](https://uds.build/docs/components/v-stack)
*/
const Divider = forwardRef(function Divider(props, ref) {
	return /* @__PURE__ */ jsx(DividerInternal, {
		ref,
		...props
	});
});
Divider.displayName = "Divider";

//#endregion
export { Divider };