@trail-ui/react/dist/chunk-HYHRTVRF.mjs

// src/slider/slider.tsx
import { slider } from "@trail-ui/theme";
import { useMemo, useRef } from "react";
import { useSliderState } from "react-stately";
import {
  mergeProps,
  useFocusRing,
  useNumberFormatter,
  useSlider,
  useSliderThumb,
  VisuallyHidden
} from "react-aria";
import { jsx, jsxs } from "react/jsx-runtime";
function Slider({ label, formatOptions, name, classNames, ...props }) {
  const slots = useMemo(() => slider(), []);
  let trackRef = useRef(null);
  let numberFormatter = useNumberFormatter(formatOptions);
  let state = useSliderState({ ...props, numberFormatter });
  let { groupProps, trackProps, labelProps, outputProps } = useSlider(props, state, trackRef);
  return /* @__PURE__ */ jsxs("div", { ...groupProps, children: [
    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { ...labelProps, children: label }) }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })} ${state.isDisabled && slots.disableMouseEvents({ class: classNames == null ? void 0 : classNames.disableMouseEvents })}`,
        children: [
          /* @__PURE__ */ jsxs(
            "div",
            {
              ...trackProps,
              ref: trackRef,
              className: slots.trackWrapper({ class: classNames == null ? void 0 : classNames.trackWrapper }),
              children: [
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: `${slots.track({ class: classNames == null ? void 0 : classNames.track })} ${state.isDisabled && slots.disableTrack({ class: classNames == null ? void 0 : classNames.disableTrack })}`
                  }
                ),
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: `${slots.fillTrack({ class: classNames == null ? void 0 : classNames.fillTrack })} ${state.isDisabled && slots.disableFillTrack({ class: classNames == null ? void 0 : classNames.disableFillTrack })}`,
                    style: { width: state.getThumbPercent(0) * 100 + "%" }
                  }
                ),
                /* @__PURE__ */ jsx(Thumb, { index: 0, state, trackRef, name })
              ]
            }
          ),
          label && /* @__PURE__ */ jsx(
            "div",
            {
              className: `${slots.value({ class: classNames == null ? void 0 : classNames.value })} ${state.isDisabled && slots.disableValue({ class: classNames == null ? void 0 : classNames.disableValue })}`,
              children: /* @__PURE__ */ jsxs("output", { ...outputProps, children: [
                state.getThumbValueLabel(0),
                "%"
              ] })
            }
          )
        ]
      }
    )
  ] });
}
function Thumb(props) {
  const slots = useMemo(() => slider(), []);
  let inputRef = useRef(null);
  let { state, trackRef, index, name } = props;
  let { thumbProps, inputProps } = useSliderThumb(
    {
      index,
      trackRef,
      inputRef,
      name
    },
    state
  );
  let { focusProps, isFocusVisible } = useFocusRing();
  return /* @__PURE__ */ jsx(
    "div",
    {
      ...thumbProps,
      className: `${slots.sliderThumb()} ${state.isDisabled && slots.disableFillTrack()} ${isFocusVisible && slots.focusRing()}`,
      children: /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ref: inputRef, ...mergeProps(inputProps, focusProps) }) })
    }
  );
}
function MultiSlider({ label, formatOptions, name, classNames, ...props }) {
  let trackRef = useRef(null);
  const slots = useMemo(() => slider(), []);
  let numberFormatter = useNumberFormatter(formatOptions);
  let state = useSliderState({ ...props, numberFormatter });
  let { groupProps, trackProps, labelProps, outputProps } = useSlider(props, state, trackRef);
  return /* @__PURE__ */ jsxs("div", { ...groupProps, children: [
    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("label", { ...labelProps, children: label }) }),
    /* @__PURE__ */ jsxs(
      "div",
      {
        className: `${slots.base({ class: classNames == null ? void 0 : classNames.base })} ${state.isDisabled && slots.disableMouseEvents({ class: classNames == null ? void 0 : classNames.disableMouseEvents })}`,
        children: [
          label && /* @__PURE__ */ jsx(
            "div",
            {
              className: `${slots.value({ class: classNames == null ? void 0 : classNames.value })} ${state.isDisabled && slots.disableValue({ class: classNames == null ? void 0 : classNames.disableValue })}`,
              children: /* @__PURE__ */ jsx("output", { ...outputProps, children: state.getThumbValueLabel(0) })
            }
          ),
          /* @__PURE__ */ jsxs(
            "div",
            {
              ...trackProps,
              ref: trackRef,
              className: slots.trackWrapper({ class: classNames == null ? void 0 : classNames.trackWrapper }),
              children: [
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: `${slots.track({ class: classNames == null ? void 0 : classNames.track })} ${state.isDisabled && slots.disableTrack({ class: classNames == null ? void 0 : classNames.disableTrack })}`
                  }
                ),
                /* @__PURE__ */ jsx(
                  "div",
                  {
                    className: `${slots.fillTrack({ class: classNames == null ? void 0 : classNames.fillTrack })} ${state.isDisabled && slots.disableFillTrack({ class: classNames == null ? void 0 : classNames.disableFillTrack })}`,
                    style: {
                      left: `${state.getThumbPercent(0) * 100}%`,
                      width: `${(state.getThumbPercent(1) - state.getThumbPercent(0)) * 100}%`
                    }
                  }
                ),
                /* @__PURE__ */ jsx(Thumb, { index: 0, state, trackRef, name }),
                /* @__PURE__ */ jsx(Thumb, { index: 1, state, trackRef, name })
              ]
            }
          ),
          label && /* @__PURE__ */ jsx(
            "div",
            {
              className: `${slots.value({ class: classNames == null ? void 0 : classNames.value })} ${state.isDisabled && slots.disableValue({ class: classNames == null ? void 0 : classNames.disableValue })}`,
              children: /* @__PURE__ */ jsx("output", { ...outputProps, children: state.getThumbValueLabel(1) })
            }
          )
        ]
      }
    )
  ] });
}

export {
  Slider,
  MultiSlider
};