@yamada-ui/react/dist/esm/components/alpha-slider/alpha-slider.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 { alphaSliderStyle } from "./alpha-slider.style.js";
import { useValue } from "../../hooks/use-value/index.js";
import { checkersProps } from "../color-swatch/color-swatch.js";
import { HueSliderOverlay, HueSliderRoot, HueSliderThumb, HueSliderTrack } from "../hue-slider/hue-slider.js";
import { useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/alpha-slider/alpha-slider.tsx
const getAriaValueText = (alpha) => `${alpha * 100}%`;
const { ComponentContext, PropsContext: AlphaSliderPropsContext, useComponentContext, usePropsContext: useAlphaSliderPropsContext, withContext, withProvider } = createSlotComponent("alpha-slider", alphaSliderStyle);
/**
* `AlphaSlider` is a component used to allow the user to select color transparency.
*
* @see https://yamada-ui.com/docs/components/alpha-slider
*/
const AlphaSliderRoot = withProvider(({ children, color, max = 1, min = 0, orientation: orientationProp = "horizontal", overlayProps, thumbProps, trackProps,...rest }) => {
	const orientation = useValue(orientationProp);
	const computedChildren = useMemo(() => {
		if (children) return children;
		return /* @__PURE__ */ jsxs(AlphaSliderTrack, {
			...trackProps,
			children: [/* @__PURE__ */ jsx(AlphaSliderThumb, { ...thumbProps }), /* @__PURE__ */ jsx(AlphaSliderOverlay, { ...overlayProps })]
		});
	}, [
		children,
		overlayProps,
		thumbProps,
		trackProps
	]);
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({
			color,
			max,
			min,
			orientation
		}), [
			color,
			min,
			max,
			orientation
		]),
		children: /* @__PURE__ */ jsx(HueSliderRoot, {
			max,
			min,
			orientation,
			...rest,
			children: computedChildren
		})
	});
}, "root")({
	getAriaValueText,
	step: .01
});
const AlphaSliderOverlay = withContext(HueSliderOverlay, "overlay")(void 0, ({ layers,...rest }) => {
	const { color, max, min, orientation } = useComponentContext();
	layers ??= [checkersProps, {
		bgGradient: `linear(${[
			orientation === "horizontal" ? "to-r" : "to-t",
			(0, utils_exports.convertColor)(color)("hex") + (0, utils_exports.alphaToHex)(min),
			(0, utils_exports.convertColor)(color)("hex") + (0, utils_exports.alphaToHex)(max)
		].join(", ")})`,
		boxShadow: "inner"
	}];
	return {
		layers,
		...rest
	};
});
const AlphaSliderTrack = withContext(HueSliderTrack, "track")();
const AlphaSliderThumb = withContext(HueSliderThumb, "thumb")();

//#endregion
export { AlphaSliderOverlay, AlphaSliderPropsContext, AlphaSliderRoot, AlphaSliderThumb, AlphaSliderTrack, useAlphaSliderPropsContext };
//# sourceMappingURL=alpha-slider.js.map