@yamada-ui/react/dist/cjs/components/slider/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_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.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_slider_style = require('./slider.style.cjs');
const require_use_slider = require('./use-slider.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/slider/slider.tsx
const { ComponentContext, PropsContext: SliderPropsContext, useComponentContext, usePropsContext: useSliderPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("slider", require_slider_style.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 } = require_use_slider.useSlider({
		orientation: require_hooks_use_value_index.useValue(orientationProp),
		...rest
	});
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SliderTrack, {
			...trackProps,
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderRange, { ...rangeProps }), range ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderThumbs, { ...thumbProps }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderThumb, { ...thumbProps })]
		}), marks ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderMarks, {
			marks,
			...marksProps
		}) : null] });
	}, [
		children,
		marks,
		marksProps,
		range,
		rangeProps,
		thumbProps,
		trackProps
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
		value: (0, react.useMemo)(() => ({
			range,
			getInputProps,
			getMarkProps,
			getRangeProps,
			getThumbProps,
			getTrackProps
		}), [
			range,
			getInputProps,
			getMarkProps,
			getRangeProps,
			getThumbProps,
			getTrackProps
		]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
			...getRootProps(),
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderInput, { ...inputProps }), computedChildren]
		})
	});
}, "root", { transferProps: ["orientation"] })(void 0, ({ indicatorFill, indicatorRounded, rangeFill, thumbFill, thumbRounded, thumbSize, thumbStroke, trackFill, trackRounded, trackSize,...rest }) => ({
	"--indicator-fill": require_var.varAttr(indicatorFill, "colors"),
	"--indicator-rounded": require_var.varAttr(indicatorRounded, "radii"),
	"--range-fill": require_var.varAttr(rangeFill, "colors"),
	"--thumb-fill": require_var.varAttr(thumbFill, "colors"),
	"--thumb-rounded": require_var.varAttr(thumbRounded, "radii"),
	"--thumb-size": require_var.varAttr(thumbSize, "sizes"),
	"--thumb-stroke": require_var.varAttr(thumbStroke, "colors"),
	"--track-fill": require_var.varAttr(trackFill, "colors"),
	"--track-rounded": require_var.varAttr(trackRounded, "radii"),
	"--track-size": require_var.varAttr(trackSize, "sizes"),
	...rest
}));
const SliderInput = () => {
	const { range, getInputProps } = useComponentContext();
	return range ? Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.input, { ...getInputProps({ index }) }, index)) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.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, require_utils_index.utils_exports.dataAttr)(indicator),
		...props
	});
});
const SliderMarks = ({ marks,...props }) => {
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: marks.map((mark, index) => {
		if ((0, require_utils_index.utils_exports.isNumber)(mark)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderMark, {
			value: mark,
			...props
		}, index);
		else {
			const { indicator, label, value } = mark;
			return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: Array.from({ length: 2 }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderThumb, {
		index,
		...props
	}, index)) });
};

//#endregion
exports.SliderMark = SliderMark;
exports.SliderMarks = SliderMarks;
exports.SliderPropsContext = SliderPropsContext;
exports.SliderRange = SliderRange;
exports.SliderRoot = SliderRoot;
exports.SliderThumb = SliderThumb;
exports.SliderThumbs = SliderThumbs;
exports.SliderTrack = SliderTrack;
exports.useSliderPropsContext = useSliderPropsContext;
//# sourceMappingURL=slider.cjs.map