@yamada-ui/react/dist/cjs/components/native-select/native-select.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
const require_use_input_border = require('../input/use-input-border.cjs');
const require_input = require('../input/input.cjs');
const require_input_element = require('../input/input-element.cjs');
const require_use_group = require('../group/use-group.cjs');
const require_input_group = require('../input/input-group.cjs');
const require_native_select_style = require('./native-select.style.cjs');
const require_use_native_select = require('./use-native-select.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/native-select/native-select.tsx
const { component, PropsContext: NativeSelectPropsContext, usePropsContext: useNativeSelectPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("native-select", require_native_select_style.nativeSelectStyle);
/**
* `NativeSelect` is a component used for allowing users to select one option from a list. It displays a native dropdown list provided by the browser (user agent).
*
* @see https://yamada-ui.com/docs/components/native-select
*/
const NativeSelectRoot = withProvider((props) => {
	const [groupItemProps, { className, css, colorScheme, errorBorderColor, focusBorderColor, icon, elementProps, iconProps, rootProps,...rest }] = require_use_group.useGroupItemProps(props);
	const { getFieldProps, getIconProps, getRootProps } = require_use_native_select.useNativeSelect(rest);
	const varProps = require_use_input_border.useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
		className,
		css,
		colorScheme,
		...getRootProps({
			...groupItemProps,
			...rootProps
		}),
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeSelectField, { ...getFieldProps(varProps) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
			...elementProps,
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NativeSelectIcon, {
				icon,
				...getIconProps(iconProps)
			})
		})]
	});
}, "root")((props) => {
	return {
		...require_input.useInputPropsContext(),
		...props
	};
});
const NativeSelectField = withContext("select", "field")({ "data-group-propagate": "" });
const NativeSelectIcon = withContext("div", "icon")(void 0, ({ children, icon,...rest }) => ({
	children: icon || children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}),
	...rest
}));
const NativeSelectGroup = component("optgroup", "group")();
const NativeSelectOption = component("option", "option")();
const NativeSelectSeparator = component("hr", "separator")();

//#endregion
exports.NativeSelectGroup = NativeSelectGroup;
exports.NativeSelectOption = NativeSelectOption;
exports.NativeSelectPropsContext = NativeSelectPropsContext;
exports.NativeSelectRoot = NativeSelectRoot;
exports.NativeSelectSeparator = NativeSelectSeparator;
exports.useNativeSelectPropsContext = useNativeSelectPropsContext;
//# sourceMappingURL=native-select.cjs.map