@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
60 lines (56 loc) • 2.85 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_saturation_slider_style = require('./saturation-slider.style.cjs');
const require_use_saturation_slider = require('./use-saturation-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/saturation-slider/saturation-slider.tsx
const { ComponentContext, PropsContext: SaturationSliderPropsContext, useComponentContext, usePropsContext: useSaturationSliderPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("saturation-slider", require_saturation_slider_style.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 } = require_use_saturation_slider.useSaturationSlider(rest);
const computedChildren = (0, react.useMemo)(() => {
if (children) return children;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaturationSliderTrack, {
...trackProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SaturationSliderThumb, { ...thumbProps })
});
}, [
children,
thumbProps,
trackProps
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
value: (0, react.useMemo)(() => ({
getThumbProps,
getTrackProps
}), [getThumbProps, getTrackProps]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getRootProps(),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.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
exports.SaturationSliderPropsContext = SaturationSliderPropsContext;
exports.SaturationSliderRoot = SaturationSliderRoot;
exports.SaturationSliderThumb = SaturationSliderThumb;
exports.SaturationSliderTrack = SaturationSliderTrack;
exports.useSaturationSliderPropsContext = useSaturationSliderPropsContext;
//# sourceMappingURL=saturation-slider.cjs.map