@julo-ui/sliders/dist/usecase/index.js

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

"use strict";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/usecase/index.ts
var usecase_exports = {};
__export(usecase_exports, {
  useHandleDragging: () => use_handle_dragging_default,
  useHandleFocus: () => use_handle_focus_default,
  useHandleReversed: () => use_handle_reversed_default,
  useHandleStyle: () => use_handle_style_default
});
module.exports = __toCommonJS(usecase_exports);

// src/usecase/use-handle-dragging.ts
var import_react = require("react");
function useHandleDragging() {
  const [isDragging, setIsDragging] = (0, import_react.useState)(false);
  const onDraggingStart = (0, import_react.useCallback)(() => {
    setIsDragging(true);
  }, []);
  const onDraggingEnd = (0, import_react.useCallback)(() => {
    setIsDragging(false);
  }, []);
  return { isDragging, onDraggingStart, onDraggingEnd };
}
var use_handle_dragging_default = useHandleDragging;

// src/usecase/use-handle-focus.ts
var import_react2 = require("react");
function useHandleFocus() {
  const [isFocused, setIsFocused] = (0, import_react2.useState)(false);
  const onFocus = (0, import_react2.useCallback)(() => {
    setIsFocused(true);
  }, []);
  const onBlur = (0, import_react2.useCallback)(() => {
    setIsFocused(false);
  }, []);
  return { isFocused, onFocus, onBlur };
}
var use_handle_focus_default = useHandleFocus;

// src/usecase/use-handle-reversed.ts
function useHandleReversed(options) {
  const { isReversed = false, direction, orientation } = options;
  if (direction === "ltr" || orientation === "vertical") {
    return isReversed;
  }
  return !isReversed;
}
var use_handle_reversed_default = useHandleReversed;

// src/usecase/use-handle-style.ts
var import_react3 = require("react");
var defaultSize = { width: 0, height: 0 };
var normalizeSize = (size) => size || defaultSize;
function useHandleStyle(options) {
  const {
    thumbSizes: thumbRects,
    orientation,
    isReversed,
    thumbPercents
  } = options;
  const getThumbStyle = (0, import_react3.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 = (0, import_react3.useCallback)(
    (percent) => {
      return {
        position: "absolute",
        pointerEvents: "none",
        ...orientation === "vertical" ? { bottom: `${percent}%`, transform: `translateY(-50%)` } : { left: `${percent}%`, transform: `translateX(-50%)` }
      };
    },
    [orientation]
  );
  const rootStyle = (0, import_react3.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 = (0, import_react3.useMemo)(
    () => ({
      position: "absolute",
      ...orientation === "vertical" ? { left: "50%", transform: "translateX(-50%)", height: "100%" } : { top: "50%", transform: "translateY(-50%)", width: "100%" }
    }),
    [orientation]
  );
  const innerTrackStyle = (0, import_react3.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;
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  useHandleDragging,
  useHandleFocus,
  useHandleReversed,
  useHandleStyle
});