@yamada-ui/react/dist/esm/components/slider/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 { varAttr } from "../../core/system/var.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useValue } from "../../hooks/use-value/index.js";
import { sliderStyle } from "./slider.style.js";
import { useSlider } from "./use-slider.js";
import { useMemo } from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/slider/slider.tsx
const { ComponentContext, PropsContext: SliderPropsContext, useComponentContext, usePropsContext: useSliderPropsContext, withContext, withProvider } = createSlotComponent("slider", sliderStyle);
/**
* `Slider` is a component used for allowing users to select a value from a range.
*
* @see https://yamada-ui.com/docs/components/slider
*/
const SliderRoot = withProvider(({ children, marks, orientation: orientationProp, inputProps, marksProps, rangeProps, thumbProps, trackProps,...rest }) => {
	const { range, getInputProps, getMarkProps, getRangeProps, getRootProps, getThumbProps, getTrackProps } = useSlider({
		orientation: useValue(orientationProp),
		...rest
	});
	const computedChildren = useMemo(() => {
		if (children) return children;
		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(SliderTrack, {
			...trackProps,
			children: [/* @__PURE__ */ jsx(SliderRange, { ...rangeProps }), range ? /* @__PURE__ */ jsx(SliderThumbs, { ...thumbProps }) : /* @__PURE__ */ jsx(SliderThumb, { ...thumbProps })]
		}), marks ? /* @__PURE__ */ jsx(SliderMarks, {
			marks,
			...marksProps
		}) : null] });
	}, [
		children,
		marks,
		marksProps,
		range,
		rangeProps,
		thumbProps,
		trackProps
	]);
	return /* @__PURE__ */ jsx(ComponentContext, {
		value: useMemo(() => ({
			range,
			getInputProps,
			getMarkProps,
			getRangeProps,
			getThumbProps,
			getTrackProps
		}), [
			range,
			getInputProps,
			getMarkProps,
			getRangeProps,
			getThumbProps,
			getTrackProps
		]),
		children: /* @__PURE__ */ jsxs(styled.div, {
			...getRootProps(),
			children: [/* @__PURE__ */ jsx(SliderInput, { ...inputProps }), computedChildren]
		})
	});
}, "root", { transferProps: ["orientation"] })(void 0, ({ indicatorFill, indicatorRounded, rangeFill, thumbFill, thumbRounded, thumbSize, thumbStroke, trackFill, trackRounded, trackSize,...rest }) => ({
	"--indicator-fill": varAttr(indicatorFill, "colors"),
	"--indicator-rounded": varAttr(indicatorRounded, "radii"),
	"--range-fill": varAttr(rangeFill, "colors"),
	"--thumb-fill": varAttr(thumbFill, "colors"),
	"--thumb-rounded": varAttr(thumbRounded, "radii"),
	"--thumb-size": varAttr(thumbSize, "sizes"),
	"--thumb-stroke": varAttr(thumbStroke, "colors"),
	"--track-fill": varAttr(trackFill, "colors"),
	"--track-rounded": varAttr(trackRounded, "radii"),
	"--track-size": varAttr(trackSize, "sizes"),
	...rest
}));
const SliderInput = () => {
	const { range, getInputProps } = useComponentContext();
	return range ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(styled.input, { ...getInputProps({ index }) }, index)) : /* @__PURE__ */ jsx(styled.input, { ...getInputProps() });
};
const SliderTrack = withContext("div", "track")(void 0, (props) => {
	const { getTrackProps } = useComponentContext();
	return getTrackProps(props);
});
const SliderRange = withContext("div", "range")(void 0, (props) => {
	const { getRangeProps } = useComponentContext();
	return getRangeProps(props);
});
const SliderMark = withContext("div", "mark")(void 0, ({ indicator = true,...props }) => {
	const { getMarkProps } = useComponentContext();
	return getMarkProps({
		"data-indicator": (0, utils_exports.dataAttr)(indicator),
		...props
	});
});
const SliderMarks = ({ marks,...props }) => {
	return /* @__PURE__ */ jsx(Fragment$1, { children: marks.map((mark, index) => {
		if ((0, utils_exports.isNumber)(mark)) return /* @__PURE__ */ jsx(SliderMark, {
			value: mark,
			...props
		}, index);
		else {
			const { indicator, label, value } = mark;
			return /* @__PURE__ */ jsx(SliderMark, {
				indicator,
				value,
				children: label
			}, index);
		}
	}) });
};
const SliderThumb = withContext("div", "thumb")(void 0, (props) => {
	const { getThumbProps } = useComponentContext();
	return getThumbProps(props);
});
const SliderThumbs = (props) => {
	return /* @__PURE__ */ jsx(Fragment$1, { children: Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ jsx(SliderThumb, {
		index,
		...props
	}, index)) });
};

//#endregion
export { SliderMark, SliderMarks, SliderPropsContext, SliderRange, SliderRoot, SliderThumb, SliderThumbs, SliderTrack, useSliderPropsContext };
//# sourceMappingURL=slider.js.map