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

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

import {
  DefaultSliderThumbIcon_default
} from "./chunk-GCKH4GU3.mjs";
import {
  rangeSliderThumbCx
} from "./chunk-JKITDTMT.mjs";
import {
  rootSliderThumbCx
} from "./chunk-LWMHZUTO.mjs";
import {
  useRangeSliderContext
} from "./chunk-S4H3EXHT.mjs";

// src/range-slider/components/range-slider-thumb/RangeSliderThumb.tsx
import { cx, forwardRef, julo } from "@julo-ui/system";
import { jsx, jsxs } from "react/jsx-runtime";
var RangeSliderThumb = forwardRef(
  (props, ref) => {
    const {
      className,
      children = /* @__PURE__ */ jsx(DefaultSliderThumbIcon_default, {}),
      index,
      sx,
      inputProps,
      inputRef,
      ...resProps
    } = props;
    const { getThumbProps, getInputProps, state } = useRangeSliderContext(
      "RangeSliderThumb should be within RangeSlider or RangeSliderProvider"
    );
    return /* @__PURE__ */ jsxs(
      julo.div,
      {
        className: cx("julo-range-slider__thumb", className),
        sx: {
          ...children && {
            padding: "0.25rem",
            width: "fit-content",
            height: "auto"
          },
          ...state.orientation === "horizontal" ? { top: "50%", transform: "translateY(-50%);" } : { left: "50%", transform: "translateX(-50%);" },
          ...sx
        },
        ...getThumbProps({ index, ...resProps }, ref),
        __css: [rootSliderThumbCx, rangeSliderThumbCx],
        children: [
          children,
          /* @__PURE__ */ jsx(julo.input, { ...getInputProps({ index, ...inputProps }, inputRef) })
        ]
      }
    );
  }
);
RangeSliderThumb.displayName = "RangeSliderThumb";
var RangeSliderThumb_default = RangeSliderThumb;

export {
  RangeSliderThumb_default
};