@mks2508/mks-ui 0.2.1 → 0.3.1

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"}

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

@@ -0,0 +1,57 @@
+/**
+ * Props for SlidingText component
+ *
+ * Character or word-by-word text animations with entrance/exit transitions and blur effects.
+ *
+ * @example
+ * ```tsx
+ * // Character animation (default)
+ * <SlidingText text="Hello World" mode="character" />
+ *
+ * // Word animation
+ * <SlidingText text="React Components" mode="word" />
+ *
+ * // Horizontal direction
+ * <SlidingText
+ *   text="Slide In"
+ *   direction="horizontal"
+ *   blur={false}
+ * />
+ * ```
+ */
+export interface ISlidingTextProps {
+    /** The text content to animate */
+    text: string;
+    /**
+     * Animation mode
+     * - 'character': Each character animates individually
+     * - 'word': The text animates as a unit
+     * - 'none': No animation
+     */
+    mode?: 'word' | 'character' | 'none';
+    /** Animation direction */
+    direction?: 'vertical' | 'horizontal';
+    /** Delay between each character/word in milliseconds */
+    staggerDelay?: number;
+    /** Animation duration in milliseconds */
+    duration?: number;
+    /** CSS easing function */
+    easing?: string;
+    /** Enable blur effect during animation */
+    blur?: boolean;
+    /** Animate width changes during animation */
+    widthAnimation?: boolean;
+    /** Initial animation state */
+    initial?: 'initial' | false;
+    /** Trigger animation state */
+    animate?: 'animate';
+    /** Exit animation state */
+    exit?: 'exit';
+    /** Callback when animation completes */
+    onAnimationComplete?: () => void;
+    /** Additional CSS class name */
+    className?: string;
+    /** Additional inline styles */
+    style?: React.CSSProperties;
+}
+//# sourceMappingURL=SlidingText.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SlidingText.types.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingText/SlidingText.types.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,WAAW,iBAAiB;IAChC,kCAAkC;IAClC,IAAI,EAAE,MAAM,CAAC;IAEb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,MAAM,CAAC;IAErC,0BAA0B;IAC1B,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IAEtC,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0CAA0C;IAC1C,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf,6CAA6C;IAC7C,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAE5B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,wCAAwC;IACxC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEjC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B"}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ISlidingTextProps } from './SlidingText.types';
+/**
+ * SlidingText - Character or word-by-word text animations
+ *
+ * Animated text component with entrance/exit transitions and blur effects.
+ * Supports character-level or word-level animation modes.
+ *
+ * @example
+ * ```tsx
+ * // Character animation (default)
+ * <SlidingText text="Hello World" mode="character" />
+ *
+ * // Word animation
+ * <SlidingText text="React Components" mode="word" />
+ *
+ * // Exit animation
+ * <SlidingText text="Goodbye" exit="exit" />
+ * ```
+ */
+export declare const SlidingText: {
+    ({ text, mode, direction, staggerDelay, duration, easing, blur, widthAnimation, initial, exit, className, style, }: ISlidingTextProps): React.ReactElement;
+    displayName: string;
+};
+export type { ISlidingTextProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react-ui/primitives/waapi/SlidingText/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAC5E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAG7D;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW;wHAarB,iBAAiB,GAAG,KAAK,CAAC,YAAY;;CAkGxC,CAAC;AAIF,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { cn } from "../../../lib/utils.js";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/react-ui/primitives/waapi/SlidingText/index.tsx
+/**
+* SlidingText - Character or word-by-word text animations
+*
+* Animated text component with entrance/exit transitions and blur effects.
+* Supports character-level or word-level animation modes.
+*
+* @example
+* ```tsx
+* // Character animation (default)
+* <SlidingText text="Hello World" mode="character" />
+*
+* // Word animation
+* <SlidingText text="React Components" mode="word" />
+*
+* // Exit animation
+* <SlidingText text="Goodbye" exit="exit" />
+* ```
+*/
+const SlidingText = ({ text, mode = "word", direction = "vertical", staggerDelay = 15, duration = 200, easing = "cubic-bezier(0.33, 1, 0.68, 1)", blur = true, widthAnimation = false, initial = "initial", exit, className = "", style }) => {
+	const containerRef = useRef(null);
+	const contentRef = useRef(null);
+	const hasTriggeredEnterRef = useRef(false);
+	const [showAnimate, setShowAnimate] = useState(initial !== "initial");
+	useEffect(() => {
+		if (initial === "initial" && !hasTriggeredEnterRef.current) {
+			hasTriggeredEnterRef.current = true;
+			requestAnimationFrame(() => {
+				setShowAnimate(true);
+			});
+		}
+	}, [initial]);
+	const visualState = exit === "exit" ? "exit" : showAnimate ? "animate" : "initial";
+	const elements = mode === "character" ? text.split("") : [text];
+	useLayoutEffect(() => {
+		if (!widthAnimation || !containerRef.current || !contentRef.current) return;
+		const container = containerRef.current;
+		const content = contentRef.current;
+		if (visualState === "initial") container.style.width = "0px";
+		else if (visualState === "animate") if (CSS.supports("interpolate-size", "allow-keywords")) {
+			container.style.width = "auto";
+			container.style.transition = `width ${duration}ms ${easing}`;
+		} else {
+			const targetWidth = content.scrollWidth;
+			container.style.width = `${targetWidth}px`;
+			container.style.transition = `width ${duration}ms ${easing}`;
+			const timer = setTimeout(() => {
+				container.style.width = "auto";
+			}, duration);
+			return () => clearTimeout(timer);
+		}
+		else if (visualState === "exit") {
+			const currentWidth = container.getBoundingClientRect().width;
+			container.style.width = `${currentWidth}px`;
+			container.getBoundingClientRect();
+			container.style.width = "0px";
+			container.style.transition = `width 180ms cubic-bezier(0.32, 0, 0.67, 0)`;
+		}
+	}, [
+		visualState,
+		widthAnimation,
+		duration,
+		easing,
+		text
+	]);
+	const getTransitionStyle = (index) => {
+		const delay = index * staggerDelay;
+		const isExit = visualState === "exit";
+		const currentDuration = isExit ? 180 : duration;
+		const currentEasing = isExit ? "cubic-bezier(0.32, 0, 0.67, 0)" : easing;
+		return {
+			transition: `
+        opacity ${currentDuration}ms ${currentEasing} ${delay}ms,
+        transform ${currentDuration}ms ${currentEasing} ${delay}ms,
+        filter ${currentDuration}ms ${currentEasing} ${delay}ms
+      `,
+			"--blur-amount": blur ? "4px" : "0px",
+			"--offset": direction === "vertical" ? "8px" : "16px"
+		};
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: cn("waapi-sliding-text-container", className),
+		style,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: cn("waapi-sliding-text-content", `waapi-direction-${direction}`),
+			children: elements.map((char, index) => /* @__PURE__ */ jsx("span", {
+				className: cn("waapi-sliding-text-token", visualState === "initial" && "enter-from", visualState === "animate" && "enter-to", visualState === "exit" && "exit-active"),
+				style: getTransitionStyle(index),
+				children: char
+			}, index))
+		})
+	});
+};
+SlidingText.displayName = "SlidingText";
+
+//#endregion
+export { SlidingText };