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

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

import {
  DefaultSliderThumbIcon_default
} from "./chunk-WWCXBV52.mjs";
import {
  useSliderContext
} from "./chunk-EJ53FKC3.mjs";
import {
  rootSliderThumbCx
} from "./chunk-LWMHZUTO.mjs";

// src/slider/components/slider-thumb/SliderThumb.tsx
import { cx, forwardRef, julo } from "@julo-ui/system";
import { jsx } from "react/jsx-runtime";
var SliderThumb = forwardRef((props, ref) => {
  const {
    children = /* @__PURE__ */ jsx(DefaultSliderThumbIcon_default, {}),
    sx,
    className,
    ...resProps
  } = props;
  const { getThumbProps, state } = useSliderContext(
    "SliderThumb should be within Slider or SliderProvider"
  );
  return /* @__PURE__ */ jsx(
    julo.div,
    {
      className: cx("julo-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(resProps, ref),
      __css: rootSliderThumbCx,
      children
    }
  );
});
SliderThumb.displayName = "SliderThumb";
var SliderThumb_default = SliderThumb;

export {
  SliderThumb_default
};