@veracity/vui/dist/range/range.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { rangeColors } from "./consts.js";
import { useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { Tooltip } from "../tooltip/tooltip.js";
import { useMemo, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import * as RadixSlider from "@radix-ui/react-slider";

//#region src/range/range.tsx
const SliderRoot = styled(Box)`
  align-items: center;
  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "pointer"};
  display: flex;
  position: relative;
  touch-action: none;
  user-select: none;
  width: 100%;
`;
const SliderTrack = styled(Box)`
  flex-grow: 1;
  height: 4px;
  position: relative;
`;
const SliderRange = styled(Box)`
  height: 100%;
  position: absolute;
`;
const SliderThumb = styled(Box)`
  cursor: ${({ $disabled }) => $disabled ? "not-allowed" : "grab"};
  display: block;
`;
const defaultFormatter = (value) => `${value}`;
const RangeThumb = ({ disabled, formatter, mainColor, portalRoot, showTooltip, showValue, styles, val }) => {
	const formattedVal = formatter(String(val));
	const thumbContent = /* @__PURE__ */ jsx(SliderThumb, {
		$disabled: disabled,
		className: "vui-range-thumb",
		...styles.thumb,
		borderColor: mainColor,
		children: showValue && /* @__PURE__ */ jsx(Box, {
			center: true,
			className: "vui-range-thumb-value",
			...styles.thumbValue,
			children: formattedVal
		})
	});
	const radixThumb = /* @__PURE__ */ jsx(RadixSlider.Thumb, {
		asChild: true,
		children: thumbContent
	});
	if (showTooltip === false || showTooltip === void 0 && showValue) return radixThumb;
	return /* @__PURE__ */ jsx(Tooltip, {
		disabled,
		text: formattedVal,
		visible: showTooltip === true,
		portalRoot,
		children: radixThumb
	});
};
const toArray = (val) => {
	if (val === void 0) return void 0;
	return Array.isArray(val) ? Array.from(val) : [val];
};
/** Implements a range input. */
const Range = vui((props, ref) => {
	const { className, value, defaultValue = 0, disabled, min = 0, minDistance = 0, max = 100, step = 1, showTooltip, showValue = false, formatter = defaultFormatter, onChange, ...rest } = props;
	const styles = useStyleConfig("Range", props);
	const [containerEl, setContainerEl] = useState(null);
	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
	const isSingleValue = typeof defaultValue !== "object" && typeof value !== "object";
	const mainColor = disabled ? rangeColors.disabled : rangeColors.main;
	const defaultArr = useMemo(() => toArray(defaultValue) ?? [0], [defaultValue]);
	const valueArr = toArray(value);
	const [internalValues, setInternalValues] = useState(defaultArr);
	const currentValues = valueArr ?? internalValues;
	const handleValueChange = (vals) => {
		if (!valueArr) setInternalValues(vals);
		onChange?.(isSingleValue ? vals[0] : vals);
	};
	return /* @__PURE__ */ jsx(Box, {
		className: cs("vui-range", isSingleValue ? "vui-range-single" : "vui-range-range", className),
		ref: (el) => {
			setContainerEl(el);
			if (typeof ref === "function") ref(el);
			else if (ref) ref.current = el;
		},
		...styles.container,
		...aliasedProps,
		...rest,
		children: /* @__PURE__ */ jsx(RadixSlider.Root, {
			asChild: true,
			disabled,
			max,
			min,
			minStepsBetweenThumbs: minDistance,
			onValueChange: handleValueChange,
			step,
			...valueArr ? { value: valueArr } : { defaultValue: defaultArr },
			children: /* @__PURE__ */ jsxs(SliderRoot, {
				$disabled: disabled,
				className: "vui-range-slider",
				children: [/* @__PURE__ */ jsx(RadixSlider.Track, {
					asChild: true,
					children: /* @__PURE__ */ jsx(SliderTrack, {
						bg: rangeColors.track,
						borderRadius: "24px",
						className: "vui-range-track",
						children: /* @__PURE__ */ jsx(RadixSlider.Range, {
							asChild: true,
							children: /* @__PURE__ */ jsx(SliderRange, {
								...styles.track,
								bg: mainColor
							})
						})
					})
				}), currentValues.map((val, index) => /* @__PURE__ */ jsx(RangeThumb, {
					disabled,
					formatter,
					mainColor,
					portalRoot: containerEl,
					showTooltip,
					showValue,
					styles,
					val
				}, index))]
			})
		})
	});
});
Range.displayName = "Range";

//#endregion
export { Range, Range as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=range.js.map