@yamada-ui/react/dist/esm/components/saturation-slider/saturation-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 { saturationSliderStyle } from "./saturation-slider.style.js";
import { useSaturationSlider } from "./use-saturation-slider.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/saturation-slider/saturation-slider.tsx
const { ComponentContext, PropsContext: SaturationSliderPropsContext, useComponentContext, usePropsContext: useSaturationSliderPropsContext, withContext, withProvider } = createSlotComponent("saturation-slider", saturationSliderStyle);
/**
* `SaturationSlider` is a component used to allow the user to select a color saturation.
*
* @see https://yamada-ui.com/docs/components/saturation-slider
*/
const SaturationSliderRoot = withProvider(({ children, inputProps, thumbProps, trackProps,...rest }) => {
	const { getInputProps, getRootProps, getThumbProps, getTrackProps } = useSaturationSlider(rest);
	const computedChildren = useMemo(() => {
		if (children) return children;
		return /* @__PURE__ */ jsx(SaturationSliderTrack, {
			...trackProps,
			children: /* @__PURE__ */ jsx(SaturationSliderThumb, { ...thumbProps })
		});
	}, [
		children,
		thumbProps,
		trackProps
	]);
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({
			getThumbProps,
			getTrackProps
		}), [getThumbProps, getTrackProps]),
		children: /* @__PURE__ */ jsxs(styled.div, {
			...getRootProps(),
			children: [/* @__PURE__ */ jsx(styled.input, { ...getInputProps(inputProps) }), computedChildren]
		})
	});
}, "root")();
const SaturationSliderTrack = withContext("div", "track")(void 0, (props) => {
	const { getTrackProps } = useComponentContext();
	return getTrackProps(props);
});
const SaturationSliderThumb = withContext("div", "thumb")(void 0, (props) => {
	const { getThumbProps } = useComponentContext();
	return getThumbProps(props);
});

//#endregion
export { SaturationSliderPropsContext, SaturationSliderRoot, SaturationSliderThumb, SaturationSliderTrack, useSaturationSliderPropsContext };
//# sourceMappingURL=saturation-slider.js.map