import { cs, ellipsisOverflow } from "../utils/styles.js";
import { useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import Button from "../button/button.js";
import { LineButton } from "../button/buttons.js";
import PopoverTrigger from "../popover/popoverTrigger.js";
import { useSelectContext } from "./context.js";
import { jsx } from "react/jsx-runtime";

//#region src/select/selectButton.tsx
/**
* Displays a custom button component, which opens a popover on click.
* Text within the button is either selected value or placeholder.
* Includes special styling for disabled, readOnly and invalid states.
*/
const SelectButton = vui((props, ref) => {
	const { className, ...rest } = props;
	const { disabled, isInvalid, placeholder, readOnly, valueText } = useSelectContext() ?? {};
	const styles = useStyleConfig("Select", useSelectContext());
	const text = valueText || placeholder;
	const disabledProps = disabled ? {
		activeBg: "sandstone.79",
		cursor: "not-allowed",
		backgroundColor: "sandstone.79",
		borderColor: "sandstone.79",
		hoverBg: "sandstone.79",
		hoverBorderColor: "sandstone.79",
		activeBorderColor: "sandstone.79"
	} : void 0;
	const readOnlyProps = readOnly ? {
		activeBg: "sandstone.95",
		bg: "sandstone.95",
		color: "seaBlue.main",
		cursor: "auto",
		disabled: true,
		hoverBg: "sandstone.95",
		opacity: 1
	} : void 0;
	const isInvalidProps = isInvalid ? {
		borderColor: "energyRed.45",
		hoverBorderColor: "energyRed.45"
	} : void 0;
	const textColor = "sandstone.10";
	const iconColor = disabled ? "sandstone.10" : "seaBlue.main";
	return /* @__PURE__ */ jsx(PopoverTrigger, {
		as: LineButton,
		bg: "white",
		className: cs("vui-selectButton", className),
		disabled,
		focusRing: 2,
		fontWeight: "regular",
		iconRight: /* @__PURE__ */ jsx(Button.Icon, {
			color: iconColor,
			ml: "auto",
			name: "uiAngleDown"
		}),
		isFullWidth: true,
		px: 1,
		ref,
		text: /* @__PURE__ */ jsx(Button.Text, {
			color: textColor,
			...ellipsisOverflow,
			children: text
		}),
		userSelect: "text",
		...styles.button,
		...disabledProps,
		...readOnlyProps,
		...isInvalidProps,
		...rest
	});
});
SelectButton.displayName = "SelectButton";

//#endregion
export { SelectButton as default };
globalThis.__vuiVersion__ = "4.0.0"
//# sourceMappingURL=selectButton.js.map