@julo-ui/sliders/dist/chunk-IZYYKSSB.mjs

A React Slider component that implements input[type='range']

import {
  useSlider
} from "./chunk-NFBI2IDX.mjs";
import {
  SliderProvider
} from "./chunk-EJ53FKC3.mjs";
import {
  sliderCx
} from "./chunk-UW3DSFZW.mjs";
import {
  rootSliderCx
} from "./chunk-LWMHZUTO.mjs";

// src/slider/Slider.tsx
import { cx, forwardRef, julo } from "@julo-ui/system";
import { jsx, jsxs } from "react/jsx-runtime";
var Slider = forwardRef((props, ref) => {
  const {
    children,
    className,
    orientation = "horizontal",
    inputRef,
    inputProps,
    ...resProps
  } = props;
  const { getInputProps, getRootProps, ...sliderContext } = useSlider({
    direction: "ltr",
    orientation,
    ...resProps
  });
  return /* @__PURE__ */ jsx(SliderProvider, { value: sliderContext, children: /* @__PURE__ */ jsxs(
    julo.div,
    {
      className: cx("julo-slider", className),
      ...getRootProps({}, ref),
      __css: [rootSliderCx, sliderCx],
      children: [
        children,
        /* @__PURE__ */ jsx(
          julo.input,
          {
            className: "julo-slider__input",
            ...getInputProps(inputProps, inputRef)
          }
        )
      ]
    }
  ) });
});
Slider.displayName = "Slider";
var Slider_default = Slider;

export {
  Slider_default
};