@mantine/core/cjs/components/RollingNumber/RollingNumber.cjs

React components library focused on usability, accessibility and developer experience

"use client";
require("../../_virtual/_rolldown/runtime.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_Box = require("../../core/Box/Box.cjs");
const require_get_digit_parts = require("./get-digit-parts.cjs");
const require_build_value = require("./build-value.cjs");
const require_DigitColumn = require("./DigitColumn.cjs");
const require_get_render_slots = require("./get-render-slots.cjs");
const require_RollingNumber_module = require("./RollingNumber.module.cjs");
let react = require("react");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/RollingNumber/RollingNumber.tsx
const defaultProps = {
	animationDuration: 600,
	timingFunction: "ease",
	decimalSeparator: ".",
	tabularNumbers: true
};
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { animationDuration, timingFunction }) => ({ root: {
	"--rn-duration": `${animationDuration}ms`,
	"--rn-timing-function": timingFunction
} }));
const RollingNumber = require_factory.factory((_props) => {
	const props = require_use_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 = require_use_styles.useStyles({
		name: "RollingNumber",
		classes: require_RollingNumber_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const previousValueRef = (0, react.useRef)(value);
	const previousValue = previousValueRef.current;
	(0, react.useEffect)(() => {
		previousValueRef.current = value;
	});
	const valueDirection = value >= previousValue ? "up" : "down";
	const slots = require_get_render_slots.getRenderSlots({
		current: require_get_digit_parts.getDigitParts({
			value,
			decimalScale,
			fixedDecimalScale
		}),
		previous: require_get_digit_parts.getDigitParts({
			value: previousValue,
			decimalScale,
			fixedDecimalScale
		}),
		prefix,
		suffix,
		decimalSeparator,
		thousandSeparator
	});
	const accessibleValue = require_build_value.buildValue({
		value,
		prefix,
		suffix,
		decimalSeparator,
		thousandSeparator,
		decimalScale,
		fixedDecimalScale
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.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__ */ (0, react_jsx_runtime.jsx)(require_DigitColumn.DigitColumn, {
				digit: slot.digit,
				previousDigit: slot.previousDigit,
				getStyles,
				empty: slot.empty,
				valueDirection
			}, slot.key);
			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
				...getStyles("char"),
				"data-empty": slot.empty || void 0,
				"aria-hidden": "true",
				children: slot.char
			}, slot.key);
		})
	});
});
RollingNumber.classes = require_RollingNumber_module.default;
RollingNumber.varsResolver = varsResolver;
RollingNumber.displayName = "@mantine/core/RollingNumber";
//#endregion
exports.RollingNumber = RollingNumber;

//# sourceMappingURL=RollingNumber.cjs.map