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

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

// src/usecase/use-handle-style.ts
import { useCallback, useMemo } from "react";
var defaultSize = { width: 0, height: 0 };
var normalizeSize = (size) => size || defaultSize;
function useHandleStyle(options) {
  const {
    thumbSizes: thumbRects,
    orientation,
    isReversed,
    thumbPercents
  } = options;
  const getThumbStyle = useCallback(
    (i) => {
      var _a;
      const rect = (_a = thumbRects[i]) != null ? _a : defaultSize;
      return {
        position: "absolute",
        userSelect: "none",
        WebkitUserSelect: "none",
        MozUserSelect: "none",
        msUserSelect: "none",
        touchAction: "none",
        ...orientation === "vertical" ? { bottom: `calc(${thumbPercents[i]}% - ${rect.height / 2}px)` } : { left: `calc(${thumbPercents[i]}% - ${rect.width / 2}px)` }
      };
    },
    [orientation, thumbPercents, thumbRects]
  );
  const getMarkerStyle = useCallback(
    (percent) => {
      return {
        position: "absolute",
        pointerEvents: "none",
        ...orientation === "vertical" ? { bottom: `${percent}%`, transform: `translateY(-50%)` } : { left: `${percent}%`, transform: `translateX(-50%)` }
      };
    },
    [orientation]
  );
  const rootStyle = useMemo(() => {
    const size = normalizeSize(
      orientation === "vertical" ? thumbRects.reduce(
        (a, b) => normalizeSize(a).height > normalizeSize(b).height ? a : b,
        defaultSize
      ) : thumbRects.reduce(
        (a, b) => normalizeSize(a).width > normalizeSize(b).width ? a : b,
        defaultSize
      )
    );
    return {
      position: "relative",
      touchAction: "none",
      WebkitTapHighlightColor: "rgba(0,0,0,0)",
      userSelect: "none",
      outline: 0,
      ...orientation === "vertical" ? {
        paddingLeft: size.width / 2,
        paddingRight: size.width / 2,
        height: "100%"
      } : {
        paddingTop: size.height / 2,
        paddingBottom: size.height / 2,
        width: "100%"
      }
    };
  }, [orientation, thumbRects]);
  const trackStyle = useMemo(
    () => ({
      position: "absolute",
      ...orientation === "vertical" ? { left: "50%", transform: "translateX(-50%)", height: "100%" } : { top: "50%", transform: "translateY(-50%)", width: "100%" }
    }),
    [orientation]
  );
  const innerTrackStyle = useMemo(() => {
    const isSingleThumb = thumbPercents.length === 1;
    const fallback = [
      0,
      isReversed ? 100 - thumbPercents[0] : thumbPercents[0]
    ];
    const range = isSingleThumb ? fallback : thumbPercents;
    let start = range[0];
    if (!isSingleThumb && isReversed) {
      start = 100 - start;
    }
    const percent = Math.abs(range[range.length - 1] - range[0]);
    return {
      ...trackStyle,
      ...orientation === "vertical" ? isReversed ? { height: `${percent}%`, top: `${start}%` } : { height: `${percent}%`, bottom: `${start}%` } : isReversed ? { width: `${percent}%`, right: `${start}%` } : { width: `${percent}%`, left: `${start}%` }
    };
  }, [isReversed, orientation, thumbPercents, trackStyle]);
  return {
    getThumbStyle,
    rootStyle,
    trackStyle,
    innerTrackStyle,
    getMarkerStyle
  };
}
var use_handle_style_default = useHandleStyle;

export {
  use_handle_style_default
};