@yamada-ui/react/dist/cjs/components/hue-slider/hue-slider.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_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_i18n_provider = require('../../providers/i18n-provider/i18n-provider.cjs');
const require_slider = require('../slider/slider.cjs');
const require_hue_slider_style = require('./hue-slider.style.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/hue-slider/hue-slider.tsx
const { ComponentContext, PropsContext: HueSliderPropsContext, useComponentContext, usePropsContext: useHueSliderPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("hue-slider", require_hue_slider_style.hueSliderStyle);
/**
* `HueSlider` is a component used to allow the user to select a color hue.
*
* @see https://yamada-ui.com/docs/components/hue-slider
*/
const HueSliderRoot = withProvider(({ children, max = 360, min = 0, orientation: orientationProp = "horizontal", overlayProps, thumbProps, trackProps,...rest }) => {
	const { t } = require_i18n_provider.useI18n("hueSlider");
	const orientation = require_hooks_use_value_index.useValue(orientationProp);
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(HueSliderTrack, {
			...trackProps,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HueSliderThumb, { ...thumbProps }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(HueSliderOverlay, { ...overlayProps })]
		});
	}, [
		children,
		overlayProps,
		thumbProps,
		trackProps
	]);
	const context = (0, react.useMemo)(() => ({
		max,
		min,
		orientation
	}), [
		max,
		min,
		orientation
	]);
	const getColorName = (0, react.useCallback)((hue) => {
		if (hue < 30 || hue >= 330) return t("Red");
		if (hue < 90) return t("Yellow");
		if (hue < 150) return t("Green");
		if (hue < 210) return t("Cyan");
		if (hue < 270) return t("Blue");
		return t("Magenta");
	}, [t]);
	const getAriaValueText = (0, react.useCallback)((hue) => `${hue}°, ${getColorName(hue)}`, [getColorName]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
		value: context,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_slider.SliderRoot, {
			getAriaValueText,
			max,
			min,
			orientation,
			...rest,
			children: computedChildren
		})
	});
}, "root")({
	"--thumb-fill": "transparent",
	"--track-fill": "transparent"
});
const HueSliderTrack = withContext(require_slider.SliderTrack, "track")();
const HueSliderOverlay = withContext(({ layers,...rest }) => {
	const { max, min, orientation } = useComponentContext();
	layers ??= [{
		bgGradient: `linear(${[orientation === "horizontal" ? "to-r" : "to-t", ...Array.from({ length: 7 }).map((_, index) => `hsl(${Math.round(min + (max - min) / 6 * index)}, 100%, 50%)`)].join(", ")})`,
		boxShadow: "inner"
	}];
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: layers.map((props, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
		"data-orientation": orientation,
		...rest,
		...props
	}, index)) });
}, "overlay")();
const HueSliderThumb = withContext(require_slider.SliderThumb, "thumb")();

//#endregion
exports.HueSliderOverlay = HueSliderOverlay;
exports.HueSliderPropsContext = HueSliderPropsContext;
exports.HueSliderRoot = HueSliderRoot;
exports.HueSliderThumb = HueSliderThumb;
exports.HueSliderTrack = HueSliderTrack;
exports.useHueSliderPropsContext = useHueSliderPropsContext;
//# sourceMappingURL=hue-slider.cjs.map