@mks2508/mks-ui 0.2.0 → 0.3.1

package/dist/react-ui/primitives/waapi/Reorder/utils/separatorCoordination.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Utility functions for separator animation coordination.
+ *
+ * When a token exits, determines which separators should animate:
+ * 1. The exiting token's own separator (if it has one)
+ * 2. If the exiting token is the last visible, the previous token's separator
+ *
+ * @module primitives/waapi/Reorder/utils/separatorCoordination
+ */
+/**
+ * Calculate which separator IDs should animate along with an exiting item.
+ *
+ * Logic:
+ * - If the exiting item is NOT the last in the list, animate its own separator
+ * - If the exiting item IS the last in the list, animate the previous item's separator
+ *   (because the previous item will become the new last and shouldn't have a separator)
+ *
+ * @param exitingId - The ID of the item being removed
+ * @param currentKeys - Set of all current (non-exiting) item keys
+ * @param exitingIds - Set of all currently exiting item IDs
+ * @param orderedKeys - Array of keys in render order
+ * @returns Array of separator IDs to animate
+ *
+ * @example
+ * ```ts
+ * // Items: [A, B, C, D] with separators after A, B, C
+ * // Removing C (not last):
+ * calculateSeparatorCoordination('C', {'A','B','D'}, {'C'}, ['A','B','C','D'])
+ * // Returns: ['C'] - animate C's separator
+ *
+ * // Removing D (last item):
+ * calculateSeparatorCoordination('D', {'A','B','C'}, {'D'}, ['A','B','C','D'])
+ * // Returns: ['C'] - animate C's separator (C becomes new last)
+ * ```
+ */
+export declare function calculateSeparatorCoordination(exitingId: string, currentKeys: Set<string>, exitingIds: Set<string>, orderedKeys: string[]): string[];
+/**
+ * Determine if a separator should be visible based on position and animation state.
+ *
+ * @param _tokenId - The token ID to check (unused, kept for API compatibility)
+ * @param tokenIndex - Index of the token in the visible list
+ * @param totalVisible - Total number of visible tokens
+ * @param separatorPhase - Current animation phase of the separator
+ * @returns Whether the separator should be rendered
+ */
+export declare function shouldShowSeparator(_tokenId: string, tokenIndex: number, totalVisible: number, separatorPhase?: 'idle' | 'exit-coordinated' | 'flip-coordinated' | 'completed'): boolean;
+//# sourceMappingURL=separatorCoordination.d.ts.map

package/dist/react-ui/primitives/waapi/Reorder/utils/separatorCoordination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"separatorCoordination.d.ts","sourceRoot":"","sources":["../../../../../../src/react-ui/primitives/waapi/Reorder/utils/separatorCoordination.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,8BAA8B,CAC5C,SAAS,EAAE,MAAM,EACjB,WAAW,EAAE,GAAG,CAAC,MAAM,CAAC,EACxB,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,EACvB,WAAW,EAAE,MAAM,EAAE,GACpB,MAAM,EAAE,CA2BV;AAED;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,MAAM,EAChB,UAAU,EAAE,MAAM,EAClB,YAAY,EAAE,MAAM,EACpB,cAAc,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,kBAAkB,GAAG,WAAW,GAC9E,OAAO,CAmBT"}

package/dist/react-ui/primitives/waapi/Reorder/utils/separatorCoordination.js

@@ -0,0 +1,72 @@
+//#region src/react-ui/primitives/waapi/Reorder/utils/separatorCoordination.ts
+/**
+* Utility functions for separator animation coordination.
+*
+* When a token exits, determines which separators should animate:
+* 1. The exiting token's own separator (if it has one)
+* 2. If the exiting token is the last visible, the previous token's separator
+*
+* @module primitives/waapi/Reorder/utils/separatorCoordination
+*/
+/**
+* Calculate which separator IDs should animate along with an exiting item.
+*
+* Logic:
+* - If the exiting item is NOT the last in the list, animate its own separator
+* - If the exiting item IS the last in the list, animate the previous item's separator
+*   (because the previous item will become the new last and shouldn't have a separator)
+*
+* @param exitingId - The ID of the item being removed
+* @param currentKeys - Set of all current (non-exiting) item keys
+* @param exitingIds - Set of all currently exiting item IDs
+* @param orderedKeys - Array of keys in render order
+* @returns Array of separator IDs to animate
+*
+* @example
+* ```ts
+* // Items: [A, B, C, D] with separators after A, B, C
+* // Removing C (not last):
+* calculateSeparatorCoordination('C', {'A','B','D'}, {'C'}, ['A','B','C','D'])
+* // Returns: ['C'] - animate C's separator
+*
+* // Removing D (last item):
+* calculateSeparatorCoordination('D', {'A','B','C'}, {'D'}, ['A','B','C','D'])
+* // Returns: ['C'] - animate C's separator (C becomes new last)
+* ```
+*/
+function calculateSeparatorCoordination(exitingId, currentKeys, exitingIds, orderedKeys) {
+	const additionalSeparators = [];
+	const visibleKeys = orderedKeys.filter((key) => currentKeys.has(key) || exitingIds.has(key));
+	const indexInVisible = visibleKeys.indexOf(exitingId);
+	if (indexInVisible === -1) return additionalSeparators;
+	const isLastVisible = indexInVisible === visibleKeys.length - 1;
+	if (indexInVisible < visibleKeys.length - 1) additionalSeparators.push(exitingId);
+	if (isLastVisible && indexInVisible > 0) {
+		const previousKey = visibleKeys[indexInVisible - 1];
+		if (previousKey && !exitingIds.has(previousKey)) additionalSeparators.push(previousKey);
+	}
+	return additionalSeparators;
+}
+/**
+* Determine if a separator should be visible based on position and animation state.
+*
+* @param _tokenId - The token ID to check (unused, kept for API compatibility)
+* @param tokenIndex - Index of the token in the visible list
+* @param totalVisible - Total number of visible tokens
+* @param separatorPhase - Current animation phase of the separator
+* @returns Whether the separator should be rendered
+*/
+function shouldShowSeparator(_tokenId, tokenIndex, totalVisible, separatorPhase) {
+	if (tokenIndex >= totalVisible - 1) return false;
+	if (!separatorPhase) return true;
+	switch (separatorPhase) {
+		case "idle":
+		case "exit-coordinated":
+		case "flip-coordinated": return true;
+		case "completed": return false;
+		default: return true;
+	}
+}
+
+//#endregion
+export { calculateSeparatorCoordination, shouldShowSeparator };

package/dist/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.styles.d.ts

@@ -0,0 +1,10 @@
+import type { StyleSlots } from '../../../../core/types';
+/**
+ * Style slots for SlidingNumber component
+ */
+export type SlidingNumberSlot = 'root';
+/**
+ * Base styles for SlidingNumber component
+ */
+export declare const slidingNumberBaseStyles: StyleSlots<SlidingNumberSlot>;
+//# sourceMappingURL=SlidingNumber.styles.d.ts.map

package/dist/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlidingNumber.styles.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.styles.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,MAAM,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAE,UAAU,CAAC,iBAAiB,CAEjE,CAAC"}

package/dist/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.types.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Format options for number display using Intl.NumberFormat
+ */
+export interface IFormatOptions {
+    /** Number formatting style */
+    style?: 'decimal' | 'currency' | 'percent';
+    /** Currency code (required when style is 'currency') */
+    currency?: string;
+    /** Locale for formatting (e.g., 'en-US', 'es-ES') */
+    locale?: string;
+    /** Minimum fraction digits */
+    minimumFractionDigits?: number;
+    /** Maximum fraction digits */
+    maximumFractionDigits?: number;
+    /** Whether to use grouping separators */
+    useGrouping?: boolean;
+}
+/**
+ * Props for SlidingNumber component
+ *
+ * Animated number transitions with format preservation using WAAPI slot-machine-style animation.
+ *
+ * @example
+ * ```tsx
+ * // Basic counter
+ * <SlidingNumber value={1234} duration={700} />
+ *
+ * // Currency
+ * <SlidingNumber
+ *   value={99.99}
+ *   format={{ style: 'currency', currency: 'USD' }}
+ * />
+ *
+ * // With motion blur
+ * <SlidingNumber value={500} motionBlur={true} digitHeight={60} />
+ * ```
+ */
+export interface ISlidingNumberProps {
+    /** The numeric value to display */
+    value: number;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** Font size for the number display */
+    fontSize?: string;
+    /** Font weight for the number display */
+    fontWeight?: string;
+    /** Text color */
+    color?: string;
+    /** Height of each digit row in pixels */
+    digitHeight?: number;
+    /** Delay between digit animations in milliseconds */
+    stagger?: number;
+    /** Enable motion blur effect during animation */
+    motionBlur?: boolean;
+    /** Number formatting options */
+    format?: IFormatOptions;
+    /**
+     * Animation direction trend
+     * - 1: Always animate upward (increasing)
+     * - -1: Always animate downward (decreasing)
+     * - 0: Auto (shorter path)
+     */
+    trend?: -1 | 0 | 1;
+    /** Physics-based animation configuration */
+    animationConfig?: {
+        /** Overshoot amount (higher = more bounce) */
+        overshoot?: number;
+        /** Mass of the animated object */
+        mass?: number;
+        /** Spring stiffness */
+        stiffness?: number;
+    };
+}
+//# sourceMappingURL=SlidingNumber.types.d.ts.map

package/dist/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlidingNumber.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingNumber/SlidingNumber.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;IAC3C,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,8BAA8B;IAC9B,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,yCAAyC;IACzC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,mBAAmB;IAClC,mCAAmC;IACnC,KAAK,EAAE,MAAM,CAAC;IAEd,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,yCAAyC;IACzC,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,qDAAqD;IACrD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gCAAgC;IAChC,MAAM,CAAC,EAAE,cAAc,CAAC;IAExB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAEnB,4CAA4C;IAC5C,eAAe,CAAC,EAAE;QAChB,8CAA8C;QAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,kCAAkC;QAClC,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,uBAAuB;QACvB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}

package/dist/react-ui/primitives/waapi/SlidingNumber/index.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { ISlidingNumberProps, IFormatOptions } from './SlidingNumber.types';
+/**
+ * SlidingNumber - Animated number transitions with format preservation
+ *
+ * Uses WAAPI slot-machine-style animation with optional motion blur.
+ * Supports Intl.NumberFormat for currency, percentage, and decimal formatting.
+ *
+ * @example
+ * ```tsx
+ * // Basic counter
+ * <SlidingNumber value={1234} />
+ *
+ * // Currency with animation
+ * <SlidingNumber
+ *   value={99.99}
+ *   format={{ style: 'currency', currency: 'USD' }}
+ *   duration={700}
+ * />
+ *
+ * // Percentage
+ * <SlidingNumber
+ *   value={75.5}
+ *   format={{ style: 'percent' }}
+ * />
+ * ```
+ */
+export declare const SlidingNumber: {
+    ({ value, duration, fontSize, fontWeight, color, digitHeight, stagger, motionBlur, format, trend, animationConfig, }: ISlidingNumberProps): React.ReactElement;
+    displayName: string;
+};
+export type { ISlidingNumberProps, IFormatOptions };
+//# sourceMappingURL=index.d.ts.map

package/dist/react-ui/primitives/waapi/SlidingNumber/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingNumber/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAC3E,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGjF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa;0HAYvB,mBAAmB,GAAG,KAAK,CAAC,YAAY;;CA4E1C,CAAC;AAkWF,YAAY,EAAE,mBAAmB,EAAE,cAAc,EAAE,CAAC"}

package/dist/react-ui/primitives/waapi/SlidingNumber/index.js

@@ -0,0 +1,354 @@
+"use client";
+
+import { cn } from "../../../lib/utils.js";
+import React, { useEffect, useLayoutEffect, useMemo, useRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/SlidingNumber/index.tsx
+/**
+* SlidingNumber - Animated number transitions with format preservation
+*
+* Uses WAAPI slot-machine-style animation with optional motion blur.
+* Supports Intl.NumberFormat for currency, percentage, and decimal formatting.
+*
+* @example
+* ```tsx
+* // Basic counter
+* <SlidingNumber value={1234} />
+*
+* // Currency with animation
+* <SlidingNumber
+*   value={99.99}
+*   format={{ style: 'currency', currency: 'USD' }}
+*   duration={700}
+* />
+*
+* // Percentage
+* <SlidingNumber
+*   value={75.5}
+*   format={{ style: 'percent' }}
+* />
+* ```
+*/
+const SlidingNumber = ({ value, duration = 700, fontSize = "3rem", fontWeight = "700", color = "#000", digitHeight = 60, stagger = 30, motionBlur = true, format, trend = 0, animationConfig }) => {
+	const computedEasing = useMemo(() => {
+		if (animationConfig) {
+			const { overshoot = 1, stiffness = 1, mass = 1 } = animationConfig;
+			const p1 = .34 * stiffness;
+			const p2 = 1 + .56 * overshoot;
+			const p3 = .64 / mass;
+			return `cubic-bezier(${Math.min(p1, 1).toFixed(2)}, ${Math.min(p2, 2).toFixed(2)}, ${Math.min(p3, 1).toFixed(2)}, 1)`;
+		}
+		return "cubic-bezier(0.34, 1.56, 0.64, 1)";
+	}, [animationConfig]);
+	const currentChars = useMemo(() => parseNumberToChars(value, format), [value, format]);
+	const prevKeysRef = useRef(/* @__PURE__ */ new Set());
+	const isFirstRenderRef = useRef(true);
+	const enteringKeys = useMemo(() => {
+		if (isFirstRenderRef.current) return /* @__PURE__ */ new Set();
+		const entering = /* @__PURE__ */ new Set();
+		currentChars.forEach((c) => {
+			if (!prevKeysRef.current.has(c.key)) entering.add(c.key);
+		});
+		return entering;
+	}, [currentChars]);
+	useEffect(() => {
+		isFirstRenderRef.current = false;
+		prevKeysRef.current = new Set(currentChars.map((c) => c.key));
+	}, [currentChars]);
+	const getDelay = (position) => {
+		return (Math.abs(position) - 1) * stagger;
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("waapi-sliding-number"),
+		style: {
+			display: "inline-flex",
+			alignItems: "center",
+			fontSize,
+			fontWeight,
+			color,
+			fontVariantNumeric: "tabular-nums",
+			fontFamily: "system-ui, -apple-system, sans-serif",
+			overflow: "hidden"
+		},
+		children: currentChars.map((item) => {
+			const isEntering = enteringKeys.has(item.key);
+			if (item.isDigit) return /* @__PURE__ */ jsx(Digit, {
+				digit: Number.parseInt(item.char),
+				duration,
+				digitHeight,
+				delay: getDelay(item.position),
+				motionBlur,
+				easing: computedEasing,
+				isEntering,
+				trend
+			}, item.key);
+			return /* @__PURE__ */ jsx(Symbol, {
+				char: item.char,
+				isEntering,
+				duration,
+				easing: computedEasing
+			}, item.key);
+		})
+	});
+};
+SlidingNumber.displayName = "SlidingNumber";
+function parseNumberToChars(value, format) {
+	const locale = format?.locale || "en-US";
+	const options = {
+		style: format?.style || "decimal",
+		minimumFractionDigits: format?.minimumFractionDigits,
+		maximumFractionDigits: format?.maximumFractionDigits,
+		useGrouping: format?.useGrouping ?? true
+	};
+	if (format?.style === "currency" && format?.currency) options.currency = format.currency;
+	const parts = new Intl.NumberFormat(locale, options).formatToParts(value);
+	const result = [];
+	let integerDigitCount = 0;
+	parts.forEach((part) => {
+		if (part.type === "integer") integerDigitCount += part.value.length;
+	});
+	let integerIndex = integerDigitCount;
+	let fractionIndex = 0;
+	let groupCount = 0;
+	parts.forEach((part, partIdx) => {
+		if (part.type === "integer") for (const char of part.value) {
+			result.push({
+				char,
+				key: `int-${integerIndex}`,
+				isDigit: true,
+				position: integerIndex
+			});
+			integerIndex--;
+		}
+		else if (part.type === "fraction") for (const char of part.value) {
+			fractionIndex++;
+			result.push({
+				char,
+				key: `frac-${fractionIndex}`,
+				isDigit: true,
+				position: -fractionIndex
+			});
+		}
+		else if (part.type === "decimal") result.push({
+			char: part.value,
+			key: "decimal",
+			isDigit: false,
+			position: 0
+		});
+		else if (part.type === "group") {
+			groupCount++;
+			result.push({
+				char: part.value,
+				key: `group-${groupCount}`,
+				isDigit: false,
+				position: 0
+			});
+		} else if (part.type === "currency") result.push({
+			char: part.value,
+			key: `currency-${partIdx}`,
+			isDigit: false,
+			position: 0
+		});
+		else if (part.type === "percentSign") result.push({
+			char: part.value,
+			key: "percent",
+			isDigit: false,
+			position: 0
+		});
+		else result.push({
+			char: part.value,
+			key: `symbol-${partIdx}`,
+			isDigit: false,
+			position: 0
+		});
+	});
+	return result;
+}
+function Symbol({ char, isEntering, duration, easing }) {
+	const ref = useRef(null);
+	const hasAnimatedRef = useRef(false);
+	useLayoutEffect(() => {
+		if (!ref.current || !isEntering || hasAnimatedRef.current) return;
+		hasAnimatedRef.current = true;
+		ref.current.animate([{
+			opacity: 0,
+			transform: "scale(0.8)"
+		}, {
+			opacity: 1,
+			transform: "scale(1)"
+		}], {
+			duration: duration * .3,
+			easing,
+			fill: "forwards"
+		});
+	}, [
+		isEntering,
+		duration,
+		easing
+	]);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		style: {
+			display: "inline-block",
+			whiteSpace: "pre",
+			opacity: isEntering ? 0 : 1
+		},
+		children: char
+	});
+}
+function Digit({ digit, duration, digitHeight, delay, motionBlur, easing, isEntering, trend }) {
+	const columnRef = useRef(null);
+	const containerRef = useRef(null);
+	const animationRef = useRef(null);
+	const filterId = useRef(`blur-${Math.random().toString(36).slice(2, 9)}`).current;
+	const currentOffsetRef = useRef(null);
+	const targetDigitRef = useRef(digit);
+	const hasInitializedRef = useRef(false);
+	const sequence = useMemo(() => {
+		const seq = [];
+		for (let cycle = -1; cycle <= 1; cycle++) for (let d = 0; d <= 9; d++) seq.push(d);
+		return seq;
+	}, []);
+	useLayoutEffect(() => {
+		if (!hasInitializedRef.current) {
+			hasInitializedRef.current = true;
+			const offset = -(digit + 10) * digitHeight;
+			currentOffsetRef.current = offset;
+			targetDigitRef.current = digit;
+			if (columnRef.current) columnRef.current.style.transform = `translateY(${offset}px)`;
+		}
+	}, [digit, digitHeight]);
+	useLayoutEffect(() => {
+		if (!containerRef.current || !isEntering) return;
+		containerRef.current.animate([{
+			opacity: 0,
+			transform: "scale(0.5) translateY(-20px)"
+		}, {
+			opacity: 1,
+			transform: "scale(1) translateY(0)"
+		}], {
+			duration: duration * .4,
+			easing,
+			fill: "forwards"
+		});
+	}, [
+		isEntering,
+		duration,
+		easing
+	]);
+	useEffect(() => {
+		targetDigitRef.current = digit;
+		if (!hasInitializedRef.current) return;
+		if (digit === (currentOffsetRef.current !== null ? ((Math.round(-currentOffsetRef.current / digitHeight) - 10) % 10 + 10) % 10 : digit) && currentOffsetRef.current !== null) return;
+		animateToDigit(digit);
+	}, [digit, digitHeight]);
+	const animateToDigit = (target) => {
+		if (!columnRef.current || !containerRef.current) return;
+		if (animationRef.current) {
+			const computedStyle = getComputedStyle(columnRef.current);
+			currentOffsetRef.current = new DOMMatrix(computedStyle.transform).m42;
+			animationRef.current.cancel();
+			animationRef.current = null;
+			columnRef.current.style.transform = `translateY(${currentOffsetRef.current}px)`;
+		}
+		const rawIndex = currentOffsetRef.current !== null ? -currentOffsetRef.current / digitHeight : target + 10;
+		const from = ((Math.round(rawIndex) - 10) % 10 + 10) % 10;
+		if (target === from && currentOffsetRef.current !== null) {
+			const normalizedOffset = -(target + 10) * digitHeight;
+			if (columnRef.current) {
+				const currentAnim = animationRef.current;
+				if (currentAnim) currentAnim.cancel();
+				columnRef.current.style.transform = `translateY(${normalizedOffset}px)`;
+			}
+			currentOffsetRef.current = normalizedOffset;
+			return;
+		}
+		let diff;
+		if (trend === 1) diff = target >= from ? target - from : 10 - from + target;
+		else if (trend === -1) diff = target <= from ? target - from : target - from - 10;
+		else {
+			diff = target - from;
+			if (diff > 5) diff -= 10;
+			else if (diff < -5) diff += 10;
+		}
+		const startOffset = currentOffsetRef.current ?? -(from + 10) * digitHeight;
+		const endOffset = startOffset - diff * digitHeight;
+		const blurEl = document.getElementById(filterId)?.querySelector("feGaussianBlur");
+		if (motionBlur && blurEl) {
+			const intensity = Math.min(Math.abs(diff) * 1.2, 6);
+			blurEl.setAttribute("stdDeviation", `0,${intensity}`);
+			containerRef.current.style.filter = `url(#${filterId})`;
+		}
+		const anim = columnRef.current.animate([{ transform: `translateY(${startOffset}px)` }, { transform: `translateY(${endOffset}px)` }], {
+			duration,
+			delay,
+			easing,
+			fill: "forwards"
+		});
+		animationRef.current = anim;
+		anim.onfinish = () => {
+			const normalizedOffset = -(target + 10) * digitHeight;
+			if (columnRef.current) {
+				anim.cancel();
+				columnRef.current.style.transform = `translateY(${normalizedOffset}px)`;
+			}
+			currentOffsetRef.current = normalizedOffset;
+			if (containerRef.current) containerRef.current.style.filter = "none";
+			if (blurEl) blurEl.setAttribute("stdDeviation", "0,0");
+			animationRef.current = null;
+			if (targetDigitRef.current !== target) requestAnimationFrame(() => {
+				animateToDigit(targetDigitRef.current);
+			});
+		};
+		anim.oncancel = () => {
+			animationRef.current = null;
+		};
+	};
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("svg", {
+		style: {
+			position: "absolute",
+			width: 0,
+			height: 0
+		},
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("filter", {
+			id: filterId,
+			children: /* @__PURE__ */ jsx("feGaussianBlur", {
+				in: "SourceGraphic",
+				stdDeviation: "0,0"
+			})
+		}) })
+	}), /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		style: {
+			position: "relative",
+			height: `${digitHeight}px`,
+			overflow: "hidden",
+			width: "0.65em",
+			textAlign: "center",
+			opacity: isEntering ? 0 : 1
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref: columnRef,
+			style: {
+				position: "absolute",
+				left: 0,
+				right: 0,
+				willChange: "transform"
+			},
+			children: sequence.map((d, i) => /* @__PURE__ */ jsx("div", {
+				style: {
+					height: `${digitHeight}px`,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center"
+				},
+				children: d
+			}, i))
+		})
+	})] });
+}
+
+//#endregion
+export { SlidingNumber };

package/dist/react-ui/primitives/waapi/SlidingText/SlidingText.styles.d.ts

@@ -0,0 +1,25 @@
+import type { StyleSlots } from '../../../../core/types';
+/**
+ * Style slots for SlidingText component
+ */
+export type SlidingTextSlot = 'root' | 'content' | 'token';
+/**
+ * Base styles for SlidingText component
+ */
+export declare const slidingTextBaseStyles: StyleSlots<SlidingTextSlot>;
+/**
+ * CSS classes for animation states
+ */
+export declare const slidingTextAnimationClasses: {
+    readonly enterFrom: "enter-from";
+    readonly enterTo: "enter-to";
+    readonly exitActive: "exit-active";
+};
+/**
+ * CSS classes for direction variants
+ */
+export declare const slidingTextDirectionClasses: {
+    readonly vertical: "waapi-direction-vertical";
+    readonly horizontal: "waapi-direction-horizontal";
+};
+//# sourceMappingURL=SlidingText.styles.d.ts.map

package/dist/react-ui/primitives/waapi/SlidingText/SlidingText.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlidingText.styles.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingText/SlidingText.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,UAAU,CAAC,eAAe,CAI7D,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,2BAA2B;;;;CAI9B,CAAC;AAEX;;GAEG;AACH,eAAO,MAAM,2BAA2B;;;CAG9B,CAAC"}