@yamada-ui/react/dist/esm/components/color-picker/color-picker.js

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

"use client";


import { utils_exports } from "../../utils/index.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { PipetteIcon } from "../icon/icons/pipette-icon.js";
import { ColorSwatch } from "../color-swatch/color-swatch.js";
import { PopoverContent, PopoverRoot, PopoverTrigger } from "../popover/popover.js";
import { useInputBorder } from "../input/use-input-border.js";
import { useInputPropsContext } from "../input/input.js";
import { InputElement } from "../input/input-element.js";
import { useGroupItemProps } from "../group/use-group.js";
import { InputGroupRoot } from "../input/input-group.js";
import { colorPickerStyle } from "./color-picker.style.js";
import { ColorSelectorRoot } from "../color-selector/color-selector.js";
import { useColorPicker } from "./use-color-picker.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/color-picker/color-picker.tsx
const { ComponentContext, PropsContext: ColorPickerPropsContext, useComponentContext, usePropsContext: useColorPickerPropsContext, withContext, withProvider } = createSlotComponent("color-picker", 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 }] = useGroupItemProps(props);
	const { value, getContentProps, getEyeDropperProps, getFieldProps, getInputProps, getRootProps, getSelectorProps, popoverProps } = useColorPicker(rest);
	const mergedPopoverProps = useMemo(() => ({
		animationScheme,
		duration,
		...popoverProps
	}), [
		animationScheme,
		duration,
		popoverProps
	]);
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({
			value,
			getEyeDropperProps,
			getInputProps,
			inputProps
		}), [
			getEyeDropperProps,
			getInputProps,
			inputProps,
			value
		]),
		children: /* @__PURE__ */ jsxs(PopoverRoot, {
			...mergedPopoverProps,
			children: [/* @__PURE__ */ jsxs(InputGroupRoot, {
				className,
				css,
				colorScheme,
				...getRootProps({
					...groupItemProps,
					...rootProps
				}),
				children: [
					withColorSwatch ? /* @__PURE__ */ jsx(InputElement, {
						...elementProps,
						...startElementProps,
						children: /* @__PURE__ */ jsx(ColorPickerColorSwatch, { ...colorSwatchProps })
					}) : null,
					/* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(ColorPickerField, { ...getFieldProps({
						...varProps,
						...fieldProps
					}) }) }),
					withEyeDropper ? /* @__PURE__ */ jsx(InputElement, {
						clickable: true,
						...elementProps,
						...endElementProps,
						children: /* @__PURE__ */ jsx(ColorPickerEyeDropper, { ...getEyeDropperProps(eyeDropperProps) })
					}) : null
				]
			}), /* @__PURE__ */ jsx(ColorPickerContent, {
				...(0, utils_exports.cast)(getContentProps((0, utils_exports.cast)(contentProps))),
				children: /* @__PURE__ */ jsx(ColorSelectorRoot, {
					size,
					...getSelectorProps({
						colorSwatches,
						colorSwatchGroupColumns,
						colorSwatchGroupLabel,
						alphaSliderProps,
						colorSwatchGroupLabelProps,
						colorSwatchGroupProps,
						colorSwatchItemProps,
						hueSliderProps,
						saturationSliderProps,
						...selectorProps
					})
				})
			})]
		})
	});
}, "root", { transferProps: ["size"] })((props) => {
	return {
		...useInputPropsContext(),
		...props
	};
});
const ColorPickerField = withContext("div", "field")({ "data-group-propagate": "" }, (props) => {
	const { getInputProps, inputProps } = useComponentContext();
	return {
		children: /* @__PURE__ */ jsx(ColorPickerInput, { ...getInputProps(inputProps) }),
		...props
	};
});
const ColorPickerInput = withContext("input", "input")();
const ColorPickerColorSwatch = withContext(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__ */ jsx(PipetteIcon, {}),
		...rest
	});
});
const ColorPickerContent = withContext(PopoverContent, "content")();

//#endregion
export { ColorPicker, ColorPickerPropsContext, useColorPickerPropsContext };
//# sourceMappingURL=color-picker.js.map