@mks2508/mks-ui 0.2.1 → 0.3.1

package/dist/react-ui/primitives/waapi/Reorder/useReorderPresence.js

@@ -0,0 +1,137 @@
+import { useReorder } from "./useReorder.js";
+import { Children, cloneElement, isValidElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+
+//#region src/react-ui/primitives/waapi/Reorder/useReorderPresence.ts
+/**
+* Hook for managing presence animations in reorderable lists.
+*
+* Follows the pattern where elements stay in DOM until animation completes.
+* Consumer must keep items in their state until onAnimationComplete fires.
+* No "ghost" cloning — animations run on actual DOM elements.
+*
+* @param children - React children with unique keys
+* @param config - Presence animation configuration
+* @returns Presence API with presentChildren, triggerExit, and state queries
+*
+* @example
+* ```tsx
+* const [items, setItems] = useState(INITIAL_ITEMS);
+*
+* const { presentChildren, triggerExit } = useReorderPresence(
+*   items.map(item => <div key={item.id}>{item.name}</div>),
+*   {
+*     onAnimationComplete: (id) => {
+*       setItems(prev => prev.filter(item => item.id !== id));
+*     }
+*   }
+* );
+*
+* const handleDelete = (id: string) => {
+*   triggerExit(id);
+* };
+* ```
+*/
+function useReorderPresence(children, config = {}) {
+	const { autoAnimate = true, stagger, enterDuration, exitDuration, flipDuration, enterEasing, exitEasing, flipEasing } = config;
+	const configRef = useRef(config);
+	useEffect(() => {
+		configRef.current = config;
+	}, [config]);
+	const exitingIdsRef = useRef(/* @__PURE__ */ new Set());
+	const enteringIdsRef = useRef(/* @__PURE__ */ new Set());
+	const prevKeysRef = useRef(/* @__PURE__ */ new Set());
+	const getStaggerDelay = useCallback((index, type) => {
+		if (!stagger) return 0;
+		if (typeof stagger === "number") return stagger * index;
+		return (stagger[type] ?? 0) * index;
+	}, [stagger]);
+	const reorder = useReorder({
+		enterDuration,
+		exitDuration,
+		flipDuration,
+		enterEasing,
+		exitEasing,
+		flipEasing,
+		onComplete: useCallback((id) => {
+			exitingIdsRef.current.delete(id);
+			configRef.current.onAnimationComplete?.(id);
+		}, [])
+	});
+	const currentKeys = useMemo(() => {
+		const keys = /* @__PURE__ */ new Set();
+		Children.forEach(children, (child) => {
+			if (isValidElement(child) && child.key != null) keys.add(String(child.key));
+		});
+		return keys;
+	}, [children]);
+	useLayoutEffect(() => {
+		const prevKeys = prevKeysRef.current;
+		const added = [];
+		currentKeys.forEach((key) => {
+			if (!prevKeys.has(key) && !enteringIdsRef.current.has(key)) added.push(key);
+		});
+		if (added.length > 0) added.forEach((key, index) => {
+			const delay = getStaggerDelay(index, "enter");
+			const processEnter = () => {
+				enteringIdsRef.current.add(key);
+				configRef.current.onItemEnter?.(key);
+				requestAnimationFrame(() => {
+					reorder.startItemEnter(key).then(() => {
+						enteringIdsRef.current.delete(key);
+					});
+				});
+			};
+			if (delay > 0) setTimeout(processEnter, delay);
+			else processEnter();
+		});
+		prevKeysRef.current = new Set(currentKeys);
+	}, [
+		currentKeys,
+		autoAnimate,
+		reorder,
+		getStaggerDelay
+	]);
+	const triggerExit = useCallback((id) => {
+		if (exitingIdsRef.current.has(id)) return;
+		if (!reorder.registry.has(id)) return;
+		exitingIdsRef.current.add(id);
+		configRef.current.onItemExit?.(id);
+		reorder.startItemExit(id);
+	}, [reorder]);
+	const isExiting = useCallback((id) => {
+		return exitingIdsRef.current.has(id);
+	}, []);
+	const isEntering = useCallback((id) => {
+		return enteringIdsRef.current.has(id);
+	}, []);
+	const getExitingIds = useCallback(() => {
+		return Array.from(exitingIdsRef.current);
+	}, []);
+	const getEnteringIds = useCallback(() => {
+		return Array.from(enteringIdsRef.current);
+	}, []);
+	return {
+		presentChildren: useMemo(() => {
+			const result = [];
+			Children.forEach(children, (child) => {
+				if (!isValidElement(child)) {
+					result.push(child);
+					return;
+				}
+				const key = child.key != null ? String(child.key) : null;
+				if (key != null && exitingIdsRef.current.has(key)) result.push(cloneElement(child, { "data-reorder-state": "exiting" }));
+				else result.push(child);
+			});
+			return result;
+		}, [children]),
+		triggerExit,
+		isExiting,
+		isEntering,
+		exitingIds: getExitingIds(),
+		enteringIds: getEnteringIds(),
+		reorder
+	};
+}
+
+//#endregion
+export { useReorderPresence };

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