@lobehub/ui/es/LobeSelect/atoms.mjs

Lobe UI is an open-source UI component library for building AIGC web apps

'use client';

import { useNativeButton } from "../hooks/useNativeButton.mjs";
import { styles } from "../Menu/sharedStyle.mjs";
import { usePortalContainer } from "../hooks/usePortalContainer.mjs";
import { LOBE_SELECT_CONTAINER_ATTR } from "./constants.mjs";
import { styles as styles$1, triggerVariants } from "./style.mjs";
import { cloneElement, isValidElement } from "react";
import { jsx } from "react/jsx-runtime";
import { cx, useThemeMode } from "antd-style";
import { mergeProps } from "@base-ui/react/merge-props";
import { mergeRefs } from "react-merge-refs";
import { Select } from "@base-ui/react/select";

//#region src/LobeSelect/atoms.tsx
const mergeStateClassName = (base, className) => {
	if (typeof className === "function") return (state) => cx(base, className(state));
	return cx(base, className);
};
const LobeSelectRoot = Select.Root;
const LobeSelectBackdrop = Select.Backdrop;
const LobeSelectSeparator = Select.Separator;
const LobeSelectTrigger = ({ children, className, nativeButton, shadow, size = "middle", variant, ref: refProp, ...rest }) => {
	const { isDarkMode } = useThemeMode();
	const baseClassName = triggerVariants({
		shadow,
		size,
		variant: variant ?? (isDarkMode ? "filled" : "outlined")
	});
	const { isNativeButtonTriggerElement, resolvedNativeButton } = useNativeButton({
		children,
		nativeButton
	});
	if (isValidElement(children)) return /* @__PURE__ */ jsx(Select.Trigger, {
		...rest,
		nativeButton: resolvedNativeButton,
		render: (props, state) => {
			const resolvedProps = (() => {
				if (isNativeButtonTriggerElement) return props;
				const { type, ref: triggerRef, ...restProps } = props;
				return restProps;
			})();
			const mergedProps = mergeProps(children.props, resolvedProps);
			const childClassName = typeof mergedProps.className === "function" ? mergedProps.className(state) : mergedProps.className;
			const extraClassName = typeof className === "function" ? className(state) : className;
			return cloneElement(children, {
				...mergedProps,
				className: cx(baseClassName, childClassName, extraClassName),
				ref: mergeRefs([
					children.ref,
					props.ref,
					refProp
				])
			});
		}
	});
	return /* @__PURE__ */ jsx(Select.Trigger, {
		...rest,
		className: mergeStateClassName(baseClassName, className),
		nativeButton: resolvedNativeButton,
		ref: refProp,
		children
	});
};
LobeSelectTrigger.displayName = "LobeSelectTrigger";
const LobeSelectIcon = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Icon, {
		className: mergeStateClassName(styles$1.icon, className),
		...rest
	});
};
LobeSelectIcon.displayName = "LobeSelectIcon";
const LobeSelectValue = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Value, {
		className: mergeStateClassName(styles$1.value, className),
		...rest
	});
};
LobeSelectValue.displayName = "LobeSelectValue";
const LobeSelectPortal = ({ container, ...rest }) => {
	const defaultContainer = usePortalContainer(LOBE_SELECT_CONTAINER_ATTR);
	return /* @__PURE__ */ jsx(Select.Portal, {
		container: container ?? defaultContainer,
		...rest
	});
};
LobeSelectPortal.displayName = "LobeSelectPortal";
const LobeSelectPositioner = ({ align, alignItemWithTrigger, className, side, sideOffset, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Positioner, {
		align: align ?? "start",
		alignItemWithTrigger: alignItemWithTrigger ?? false,
		className: mergeStateClassName(styles$1.positioner, className),
		side: side ?? "bottom",
		sideOffset: sideOffset ?? 6,
		...rest
	});
};
LobeSelectPositioner.displayName = "LobeSelectPositioner";
const LobeSelectPopup = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Popup, {
		className: mergeStateClassName(cx(styles.popup, styles$1.popup), className),
		...rest
	});
};
LobeSelectPopup.displayName = "LobeSelectPopup";
const LobeSelectList = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.List, {
		className: mergeStateClassName(styles$1.list, className),
		...rest
	});
};
LobeSelectList.displayName = "LobeSelectList";
const LobeSelectItem = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Item, {
		className: mergeStateClassName(cx(styles.item, styles$1.item), className),
		...rest
	});
};
LobeSelectItem.displayName = "LobeSelectItem";
const LobeSelectItemText = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.ItemText, {
		className: mergeStateClassName(cx(styles.label, styles$1.itemText), className),
		...rest
	});
};
LobeSelectItemText.displayName = "LobeSelectItemText";
const LobeSelectItemIndicator = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.ItemIndicator, {
		className: mergeStateClassName(styles$1.itemIndicator, className),
		...rest
	});
};
LobeSelectItemIndicator.displayName = "LobeSelectItemIndicator";
const LobeSelectGroup = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Group, {
		className: mergeStateClassName(styles$1.group, className),
		...rest
	});
};
LobeSelectGroup.displayName = "LobeSelectGroup";
const LobeSelectGroupLabel = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.GroupLabel, {
		className: mergeStateClassName(cx(styles.groupLabel, styles$1.groupLabel), className),
		...rest
	});
};
LobeSelectGroupLabel.displayName = "LobeSelectGroupLabel";
const LobeSelectScrollUpArrow = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
		className: mergeStateClassName(styles$1.scrollArrow, className),
		...rest
	});
};
LobeSelectScrollUpArrow.displayName = "LobeSelectScrollUpArrow";
const LobeSelectScrollDownArrow = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
		className: mergeStateClassName(styles$1.scrollArrow, className),
		...rest
	});
};
LobeSelectScrollDownArrow.displayName = "LobeSelectScrollDownArrow";
const LobeSelectArrow = ({ className, ...rest }) => {
	return /* @__PURE__ */ jsx(Select.Arrow, {
		className: mergeStateClassName(styles$1.arrow, className),
		...rest
	});
};
LobeSelectArrow.displayName = "LobeSelectArrow";

//#endregion
export { LobeSelectArrow, LobeSelectBackdrop, LobeSelectGroup, LobeSelectGroupLabel, LobeSelectIcon, LobeSelectItem, LobeSelectItemIndicator, LobeSelectItemText, LobeSelectList, LobeSelectPopup, LobeSelectPortal, LobeSelectPositioner, LobeSelectRoot, LobeSelectScrollDownArrow, LobeSelectScrollUpArrow, LobeSelectSeparator, LobeSelectTrigger, LobeSelectValue };
//# sourceMappingURL=atoms.mjs.map