/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
import { cx, getStyles } from "../../styles/styler.js";
import { Box } from "../Box.js";
import { HStack } from "../HStack.js";
import { VStack } from "../VStack.js";
import { DividerLabel } from "./DividerLabel.js";
import { DividerLine } from "./DividerLine.js";
import { hasManualLine, renderManualChildren, shouldWrapInLabel } from "./utils.js";
import { forwardRef, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/Divider/Divider.tsx
const ORIENTATION_WIDTH_MAP = {
	horizontal: "w-full",
	vertical: ""
};
/**
* **📦 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.
*
* For custom composition, import `DividerLine` and `DividerLabel` from the same package entrypoint
* and compose them inside `Divider`, `HStack`, or `VStack`.
*
* @example
* ```tsx
* import { Divider, DividerLabel, DividerLine } 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" />
*
* // Manual composition.
* <Divider>
*   <DividerLine />
*   <DividerLabel>Section</DividerLabel>
*   <DividerLine />
* </Divider>
* ```
*
* @usage
* - Visually separating parts of a page. Usually used in conjuction with [HStack](./h-stack) or [VStack](./v-stack).
* - Use `DividerLine` and `DividerLabel` when a layout needs custom composition.
*
* @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({ variant = "primary", vertical = false, contentPosition = "center", className, slotProps, children, gap, ...boxProps }, ref) {
	const direction = vertical ? "vertical" : "horizontal";
	const InternalComponent = vertical ? VStack : HStack;
	const { className: rootClassName, ...rootSlotProps } = slotProps?.root ?? {};
	const { className: labelClassName, variant: labelTextVariant, ...labelSlotProps } = slotProps?.label ?? {};
	const { className: lineClassName, ...lineSlotProps } = slotProps?.line ?? {};
	const classNames = useMemo(() => ({
		root: cx(ORIENTATION_WIDTH_MAP[direction], variant !== "inherit" && getStyles({ dividerVariantRoot: variant }), className, rootClassName),
		label: labelClassName,
		line: lineClassName
	}), [
		className,
		direction,
		labelClassName,
		lineClassName,
		rootClassName,
		variant
	]);
	if (children !== void 0 && children !== null && children !== false) {
		const content = shouldWrapInLabel(children) ? /* @__PURE__ */ jsx(DividerLabel, {
			className: classNames.label,
			textVariant: labelTextVariant,
			variant,
			...labelSlotProps,
			children
		}) : renderManualChildren(children, variant, vertical);
		return /* @__PURE__ */ jsx(InternalComponent, {
			alignItems: "center",
			className: classNames.root,
			flex: "1",
			gap,
			ref,
			...boxProps,
			...rootSlotProps,
			children: hasManualLine(children) ? content : /* @__PURE__ */ jsxs(Fragment$1, { children: [
				contentPosition !== "start" && /* @__PURE__ */ jsx(DividerLine, {
					className: classNames.line,
					variant,
					vertical,
					...lineSlotProps
				}),
				content,
				contentPosition !== "end" && /* @__PURE__ */ jsx(DividerLine, {
					className: classNames.line,
					variant,
					vertical,
					...lineSlotProps
				})
			] })
		});
	}
	return /* @__PURE__ */ jsx(Box, {
		className: classNames.root,
		display: "flex",
		flex: "none",
		ref,
		...boxProps,
		...rootSlotProps,
		children: /* @__PURE__ */ jsx(DividerLine, {
			className: classNames.line,
			variant,
			vertical,
			...lineSlotProps
		})
	});
});
Divider.displayName = "Divider";
//#endregion
export { Divider };
