@mantine/core/esm/components/RollingNumber/RollingNumber.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { getDigitParts } from "./get-digit-parts.mjs";
import { buildValue } from "./build-value.mjs";
import { DigitColumn } from "./DigitColumn.mjs";
import { getRenderSlots } from "./get-render-slots.mjs";
import RollingNumber_module_default from "./RollingNumber.module.mjs";
import { useEffect, useRef } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/RollingNumber/RollingNumber.tsx
const defaultProps = {
	animationDuration: 600,
	timingFunction: "ease",
	decimalSeparator: ".",
	tabularNumbers: true
};
const varsResolver = createVarsResolver((_, { animationDuration, timingFunction }) => ({ root: {
	"--rn-duration": `${animationDuration}ms`,
	"--rn-timing-function": timingFunction
} }));
const RollingNumber = factory((_props) => {
	const props = useProps("RollingNumber", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, value, prefix, suffix, decimalSeparator, thousandSeparator, decimalScale, fixedDecimalScale, animationDuration, timingFunction, tabularNumbers, withLiveRegion, mod, attributes, ...others } = props;
	const getStyles = useStyles({
		name: "RollingNumber",
		classes: RollingNumber_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const previousValueRef = useRef(value);
	const previousValue = previousValueRef.current;
	useEffect(() => {
		previousValueRef.current = value;
	});
	const valueDirection = value >= previousValue ? "up" : "down";
	const slots = getRenderSlots({
		current: getDigitParts({
			value,
			decimalScale,
			fixedDecimalScale
		}),
		previous: getDigitParts({
			value: previousValue,
			decimalScale,
			fixedDecimalScale
		}),
		prefix,
		suffix,
		decimalSeparator,
		thousandSeparator
	});
	const accessibleValue = buildValue({
		value,
		prefix,
		suffix,
		decimalSeparator,
		thousandSeparator,
		decimalScale,
		fixedDecimalScale
	});
	return /* @__PURE__ */ jsx(Box, {
		...getStyles("root"),
		mod: [{ "tabular-numbers": tabularNumbers }, mod],
		role: withLiveRegion ? "status" : "img",
		"aria-label": accessibleValue,
		...others,
		children: slots.map((slot) => {
			if (slot.type === "digit") return /* @__PURE__ */ jsx(DigitColumn, {
				digit: slot.digit,
				previousDigit: slot.previousDigit,
				getStyles,
				empty: slot.empty,
				valueDirection
			}, slot.key);
			return /* @__PURE__ */ jsx("span", {
				...getStyles("char"),
				"data-empty": slot.empty || void 0,
				"aria-hidden": "true",
				children: slot.char
			}, slot.key);
		})
	});
});
RollingNumber.classes = RollingNumber_module_default;
RollingNumber.varsResolver = varsResolver;
RollingNumber.displayName = "@mantine/core/RollingNumber";
//#endregion
export { RollingNumber };

//# sourceMappingURL=RollingNumber.mjs.map