/*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
"use client";
"use client";
import { getStyles } from "../../../styles/styler.js";
import { Divider } from "../../Divider/Divider.js";
import { forwardRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region src/components/client/Select/SelectDivider.tsx
/**
* **▾ Select divider**
*
* @componentType Client component
*
* @description
* A divider for separating groups of select options inside `SelectContent`.
*
* @example
* ```tsx
* 'use client';
*
* import { Select, SelectContent, SelectDivider, SelectItem } from '@yahoo/uds';
*
* <Select label="Country" placeholder="Select a country" defaultValue="us">
*   <SelectContent>
*     <SelectItem value="us">United States</SelectItem>
*     <SelectItem value="ca">Canada</SelectItem>
*     <SelectDivider>Other regions</SelectDivider>
*     <SelectItem value="mx">Mexico</SelectItem>
*   </SelectContent>
* </Select>
* ```
*
* @usage
* Use `SelectDivider` to separate groups of select options.
*
* @related [Select](https://uds.build/docs/components/select), [SelectItem](https://uds.build/docs/components/select-item), [Divider](https://uds.build/docs/components/divider)
*/
const SelectDivider = forwardRef(function SelectDivider({ "aria-hidden": ariaHidden = true, contentPosition = "start", gap = "4", children, spacingVertical = children ? "2" : "0", spacingHorizontal = children ? "4" : "0", className, ...props }, ref) {
	return /* @__PURE__ */ jsx(Divider, {
		ref,
		"aria-hidden": ariaHidden,
		variant: "inherit",
		contentPosition,
		gap,
		spacingVertical,
		spacingHorizontal,
		slotProps: {
			root: { className: getStyles({
				selectitemDividerVariantRoot: "default",
				className
			}) },
			label: { className: getStyles({ selectitemDividerVariantText: "default" }) },
			line: { className: getStyles({ selectitemDividerVariantLine: "default" }) }
		},
		...props,
		children
	});
});
SelectDivider.displayName = "SelectDivider";
//#endregion
export { SelectDivider };
