@yamada-ui/react/dist/cjs/components/color-picker/color-picker.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_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_pipette_icon = require('../icon/icons/pipette-icon.cjs');
const require_color_swatch = require('../color-swatch/color-swatch.cjs');
const require_popover = require('../popover/popover.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_color_picker_style = require('./color-picker.style.cjs');
const require_color_selector = require('../color-selector/color-selector.cjs');
const require_use_color_picker = require('./use-color-picker.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/color-picker/color-picker.tsx
const { ComponentContext, PropsContext: ColorPickerPropsContext, useComponentContext, usePropsContext: useColorPickerPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("color-picker", require_color_picker_style.colorPickerStyle);
/**
* `ColorPicker` is a component used by the user to select a color or enter an arbitrary color value.
*
* @see https://yamada-ui.com/docs/components/color-picker
*/
const ColorPicker = withProvider((props) => {
	const [groupItemProps, { className, css, colorScheme, size, animationScheme = "block-start", colorSwatches, colorSwatchGroupColumns, colorSwatchGroupLabel, duration, errorBorderColor, focusBorderColor, withColorSwatch = true, withEyeDropper = true, alphaSliderProps, colorSwatchGroupLabelProps, colorSwatchGroupProps, colorSwatchItemProps, colorSwatchProps, contentProps, elementProps, endElementProps, eyeDropperProps, fieldProps, hueSliderProps, inputProps, rootProps, saturationSliderProps, selectorProps, startElementProps,...rest }] = require_use_group.useGroupItemProps(props);
	const { value, getContentProps, getEyeDropperProps, getFieldProps, getInputProps, getRootProps, getSelectorProps, popoverProps } = require_use_color_picker.useColorPicker(rest);
	const mergedPopoverProps = (0, react.useMemo)(() => ({
		animationScheme,
		duration,
		...popoverProps
	}), [
		animationScheme,
		duration,
		popoverProps
	]);
	const varProps = require_use_input_border.useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
		value: (0, react.useMemo)(() => ({
			value,
			getEyeDropperProps,
			getInputProps,
			inputProps
		}), [
			getEyeDropperProps,
			getInputProps,
			inputProps,
			value
		]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_popover.PopoverRoot, {
			...mergedPopoverProps,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_input_group.InputGroupRoot, {
				className,
				css,
				colorScheme,
				...getRootProps({
					...groupItemProps,
					...rootProps
				}),
				children: [
					withColorSwatch ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
						...elementProps,
						...startElementProps,
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerColorSwatch, { ...colorSwatchProps })
					}) : null,
					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_popover.PopoverTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerField, { ...getFieldProps({
						...varProps,
						...fieldProps
					}) }) }),
					withEyeDropper ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input_element.InputElement, {
						clickable: true,
						...elementProps,
						...endElementProps,
						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerEyeDropper, { ...getEyeDropperProps(eyeDropperProps) })
					}) : null
				]
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerContent, {
				...(0, require_utils_index.utils_exports.cast)(getContentProps((0, require_utils_index.utils_exports.cast)(contentProps))),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_color_selector.ColorSelectorRoot, {
					size,
					...getSelectorProps({
						colorSwatches,
						colorSwatchGroupColumns,
						colorSwatchGroupLabel,
						alphaSliderProps,
						colorSwatchGroupLabelProps,
						colorSwatchGroupProps,
						colorSwatchItemProps,
						hueSliderProps,
						saturationSliderProps,
						...selectorProps
					})
				})
			})]
		})
	});
}, "root", { transferProps: ["size"] })((props) => {
	return {
		...require_input.useInputPropsContext(),
		...props
	};
});
const ColorPickerField = withContext("div", "field")({ "data-group-propagate": "" }, (props) => {
	const { getInputProps, inputProps } = useComponentContext();
	return {
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ColorPickerInput, { ...getInputProps(inputProps) }),
		...props
	};
});
const ColorPickerInput = withContext("input", "input")();
const ColorPickerColorSwatch = withContext(require_color_swatch.ColorSwatch, "colorSwatch")(void 0, (props) => {
	const { value } = useComponentContext();
	return {
		variant: "circle",
		color: value,
		...props
	};
});
const ColorPickerEyeDropper = withContext("div", "eyeDropper")(void 0, ({ children, icon,...rest }) => {
	const { getEyeDropperProps } = useComponentContext();
	return getEyeDropperProps({
		children: icon || children || /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_pipette_icon.PipetteIcon, {}),
		...rest
	});
});
const ColorPickerContent = withContext(require_popover.PopoverContent, "content")();

//#endregion
exports.ColorPicker = ColorPicker;
exports.ColorPickerPropsContext = ColorPickerPropsContext;
exports.useColorPickerPropsContext = useColorPickerPropsContext;
//# sourceMappingURL=color-picker.cjs.map