@yamada-ui/react/dist/esm/components/hue-slider/hue-slider.js

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useValue } from "../../hooks/use-value/index.js";
import { useI18n } from "../../providers/i18n-provider/i18n-provider.js";
import { SliderRoot, SliderThumb, SliderTrack } from "../slider/slider.js";
import { hueSliderStyle } from "./hue-slider.style.js";
import { useCallback, useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/hue-slider/hue-slider.tsx
const { ComponentContext, PropsContext: HueSliderPropsContext, useComponentContext, usePropsContext: useHueSliderPropsContext, withContext, withProvider } = createSlotComponent("hue-slider", 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 } = useI18n("hueSlider");
	const orientation = useValue(orientationProp);
	const computedChildren = useMemo(() => {
		if (children) return children;
		return /* @__PURE__ */ jsxs(HueSliderTrack, {
			...trackProps,
			children: [/* @__PURE__ */ jsx(HueSliderThumb, { ...thumbProps }), /* @__PURE__ */ jsx(HueSliderOverlay, { ...overlayProps })]
		});
	}, [
		children,
		overlayProps,
		thumbProps,
		trackProps
	]);
	const context = useMemo(() => ({
		max,
		min,
		orientation
	}), [
		max,
		min,
		orientation
	]);
	const getColorName = 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 = useCallback((hue) => `${hue}°, ${getColorName(hue)}`, [getColorName]);
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: context,
		children: /* @__PURE__ */ jsx(SliderRoot, {
			getAriaValueText,
			max,
			min,
			orientation,
			...rest,
			children: computedChildren
		})
	});
}, "root")({
	"--thumb-fill": "transparent",
	"--track-fill": "transparent"
});
const HueSliderTrack = withContext(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__ */ jsx(Fragment$1, { children: layers.map((props, index) => /* @__PURE__ */ jsx(styled.div, {
		"data-orientation": orientation,
		...rest,
		...props
	}, index)) });
}, "overlay")();
const HueSliderThumb = withContext(SliderThumb, "thumb")();

//#endregion
export { HueSliderOverlay, HueSliderPropsContext, HueSliderRoot, HueSliderThumb, HueSliderTrack, useHueSliderPropsContext };
//# sourceMappingURL=hue-slider.js.map