flikkui 0.1.0-beta.11 → 0.1.0-beta.12

package/dist/hooks/useFormStateMachine.js

@@ -0,0 +1,72 @@
+import { __spreadArray, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import { useState, useMemo, useCallback } from 'react';
+import { transition } from '../utils/stateMachine.js';
+
+/**
+ * Hook to manage multi-step form logic via a state machine
+ */
+function useFormStateMachine(config, options) {
+    if (options === void 0) { options = {}; }
+    var _a = useState(config.initial), currentStep = _a[0], setCurrentStep = _a[1];
+    var _b = useState(options.initialData || {}), data = _b[0], setData = _b[1];
+    var _c = useState([config.initial]), history = _c[0], setHistory = _c[1];
+    // Calculate progress based on state index in config
+    var progress = useMemo(function () {
+        var keys = Object.keys(config.states);
+        var index = keys.indexOf(currentStep);
+        return index === -1 ? 0 : (index + 1) / keys.length;
+    }, [config.states, currentStep]);
+    var handleTransition = useCallback(function (event, context) {
+        var _a, _b;
+        var result = transition(config, currentStep, event, context);
+        if (result.changed) {
+            setCurrentStep(result.value);
+            setHistory(function (prev) { return __spreadArray(__spreadArray([], prev, true), [result.value], false); });
+            // Execute actions
+            result.actions.forEach(function (action) { return action(context); });
+            // Notify parent
+            (_a = options.onTransition) === null || _a === void 0 ? void 0 : _a.call(options, result.value, context);
+            // Check for completion (convention: 'complete' state)
+            if (result.value === "complete") {
+                (_b = options.onComplete) === null || _b === void 0 ? void 0 : _b.call(options, context);
+            }
+        }
+    }, [config, currentStep, options]);
+    var next = useCallback(function () {
+        handleTransition("NEXT", data);
+    }, [handleTransition, data]);
+    var previous = useCallback(function () {
+        var _a;
+        if (history.length > 1) {
+            var newHistory = __spreadArray([], history, true);
+            newHistory.pop(); // remove current
+            var prevStep = newHistory[newHistory.length - 1];
+            setCurrentStep(prevStep);
+            setHistory(newHistory);
+            (_a = options.onTransition) === null || _a === void 0 ? void 0 : _a.call(options, prevStep, data);
+        }
+    }, [history, data, options]);
+    var updateData = useCallback(function (newData) {
+        setData(function (prev) { return (__assign(__assign({}, prev), newData)); });
+    }, []);
+    var goTo = useCallback(function (state) {
+        var _a;
+        if (config.states[state]) {
+            setCurrentStep(state);
+            setHistory(function (prev) { return __spreadArray(__spreadArray([], prev, true), [state], false); });
+            (_a = options.onTransition) === null || _a === void 0 ? void 0 : _a.call(options, state, data);
+        }
+    }, [config.states, data, options]);
+    return {
+        currentStep: currentStep,
+        data: data,
+        progress: progress,
+        canGoBack: history.length > 1,
+        next: next,
+        previous: previous,
+        updateData: updateData,
+        goTo: goTo,
+    };
+}
+
+export { useFormStateMachine };

package/dist/hooks/useNetworkStatus.d.ts

@@ -0,0 +1,40 @@
+/**
+ * useNetworkStatus Hook
+ * Detects online/offline status and network quality
+ */
+/**
+ * Network status return type
+ */
+export interface NetworkStatusReturn {
+    /** Whether the browser is currently online */
+    isOnline: boolean;
+    /** Whether the browser was offline and just came back online */
+    wasOffline: boolean;
+    /** Network effective type (if available via Network Information API) */
+    effectiveType?: "slow-2g" | "2g" | "3g" | "4g";
+    /** Estimated downlink speed in Mbps (if available) */
+    downlink?: number;
+    /** Round-trip time estimate in ms (if available) */
+    rtt?: number;
+    /** Whether data saver mode is enabled (if available) */
+    saveData?: boolean;
+}
+/**
+ * Hook for detecting online/offline status and network quality
+ *
+ * @example
+ * const { isOnline, wasOffline, effectiveType } = useNetworkStatus();
+ *
+ * // Process queued actions when coming back online
+ * useEffect(() => {
+ *   if (wasOffline && isOnline) {
+ *     processQueuedActions();
+ *   }
+ * }, [wasOffline, isOnline]);
+ *
+ * // Show quality indicator
+ * if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+ *   return <SlowNetworkWarning />;
+ * }
+ */
+export declare const useNetworkStatus: () => NetworkStatusReturn;

package/dist/hooks/useNetworkStatus.js

@@ -0,0 +1,88 @@
+import { __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * useNetworkStatus Hook
+ * Detects online/offline status and network quality
+ */
+/**
+ * Get the Network Information API connection object
+ */
+var getConnection = function () {
+    if (typeof navigator === "undefined")
+        return undefined;
+    var nav = navigator;
+    return nav.connection || nav.mozConnection || nav.webkitConnection;
+};
+/**
+ * Hook for detecting online/offline status and network quality
+ *
+ * @example
+ * const { isOnline, wasOffline, effectiveType } = useNetworkStatus();
+ *
+ * // Process queued actions when coming back online
+ * useEffect(() => {
+ *   if (wasOffline && isOnline) {
+ *     processQueuedActions();
+ *   }
+ * }, [wasOffline, isOnline]);
+ *
+ * // Show quality indicator
+ * if (effectiveType === 'slow-2g' || effectiveType === '2g') {
+ *   return <SlowNetworkWarning />;
+ * }
+ */
+var useNetworkStatus = function () {
+    var _a = useState(function () {
+        return typeof navigator !== "undefined" ? navigator.onLine : true;
+    }), isOnline = _a[0], setIsOnline = _a[1];
+    var _b = useState(false), wasOffline = _b[0], setWasOffline = _b[1];
+    var _c = useState({}), networkInfo = _c[0], setNetworkInfo = _c[1];
+    var updateNetworkInfo = useCallback(function () {
+        var connection = getConnection();
+        if (connection) {
+            setNetworkInfo({
+                effectiveType: connection.effectiveType,
+                downlink: connection.downlink,
+                rtt: connection.rtt,
+                saveData: connection.saveData,
+            });
+        }
+    }, []);
+    useEffect(function () {
+        var handleOnline = function () {
+            setIsOnline(true);
+            setWasOffline(true);
+            updateNetworkInfo();
+            // Reset wasOffline after a short delay
+            // This gives consuming code time to react to the transition
+            var timer = setTimeout(function () { return setWasOffline(false); }, 1000);
+            return function () { return clearTimeout(timer); };
+        };
+        var handleOffline = function () {
+            setIsOnline(false);
+        };
+        var handleConnectionChange = function () {
+            updateNetworkInfo();
+        };
+        // Set up online/offline listeners
+        window.addEventListener("online", handleOnline);
+        window.addEventListener("offline", handleOffline);
+        // Set up Network Information API listener
+        var connection = getConnection();
+        if (connection) {
+            connection.addEventListener("change", handleConnectionChange);
+            updateNetworkInfo(); // Get initial values
+        }
+        return function () {
+            window.removeEventListener("online", handleOnline);
+            window.removeEventListener("offline", handleOffline);
+            if (connection) {
+                connection.removeEventListener("change", handleConnectionChange);
+            }
+        };
+    }, [updateNetworkInfo]);
+    return __assign({ isOnline: isOnline, wasOffline: wasOffline }, networkInfo);
+};
+
+export { useNetworkStatus };

package/dist/hooks/useOptimisticMutation.d.ts

@@ -0,0 +1,109 @@
+/**
+ * useOptimisticMutation Hook
+ * Provides instant UI updates with automatic rollback on error
+ */
+import { OptimisticError } from "../utils/optimisticErrors";
+import { type RetryConfig } from "../utils/retryUtils";
+import { type ActionQueue, type AddActionOptions } from "../utils/actionQueue";
+/**
+ * Mutation state
+ */
+export type MutationStatus = "idle" | "pending" | "success" | "error";
+/**
+ * Options for useOptimisticMutation hook
+ */
+export interface OptimisticMutationOptions<TData, TVariables, TContext = unknown> {
+    /**
+     * Called before mutation - return context for rollback
+     * Context is passed to onSuccess, onError, and onSettled
+     */
+    onMutate?: (variables: TVariables) => TContext | Promise<TContext>;
+    /**
+     * Apply optimistic update immediately
+     * Called synchronously before the mutation starts
+     */
+    onOptimisticUpdate?: (variables: TVariables, context: TContext) => void;
+    /**
+     * Called on success - replace optimistic data with real data
+     */
+    onSuccess?: (data: TData, variables: TVariables, context: TContext) => void;
+    /**
+     * Called on error - rollback optimistic update
+     * Use context to restore previous state
+     */
+    onError?: (error: OptimisticError, variables: TVariables, context: TContext) => void;
+    /**
+     * Called after success or error (cleanup)
+     */
+    onSettled?: (data: TData | undefined, error: OptimisticError | null, variables: TVariables, context: TContext) => void;
+    /**
+     * Retry configuration for failed mutations
+     */
+    retry?: RetryConfig;
+    /**
+     * Queue mutation when offline instead of failing immediately
+     */
+    offlineQueue?: boolean;
+    /**
+     * Custom action queue instance (defaults to global queue)
+     */
+    actionQueue?: ActionQueue;
+    /**
+     * Options for queued action (label, description)
+     */
+    queueOptions?: Omit<AddActionOptions, "maxRetries">;
+}
+/**
+ * Return value from useOptimisticMutation hook
+ */
+export interface OptimisticMutationReturn<TData, TVariables> {
+    /** Trigger the mutation */
+    mutate: (variables: TVariables) => void;
+    /** Trigger the mutation and return a Promise */
+    mutateAsync: (variables: TVariables) => Promise<TData>;
+    /** Response data from the last successful mutation */
+    data: TData | undefined;
+    /** Error from the last failed mutation */
+    error: OptimisticError | null;
+    /** Current mutation status */
+    status: MutationStatus;
+    /** True when no mutation is in progress or completed */
+    isIdle: boolean;
+    /** True when mutation is in progress */
+    isPending: boolean;
+    /** True when showing optimistic data (mutation in progress) */
+    isOptimistic: boolean;
+    /** True when mutation completed successfully */
+    isSuccess: boolean;
+    /** True when mutation failed */
+    isError: boolean;
+    /** True when error occurred and rollback was applied */
+    isRolledBack: boolean;
+    /** True when mutation was queued for offline processing */
+    isQueued: boolean;
+    /** Reset the mutation state */
+    reset: () => void;
+}
+/**
+ * Hook for optimistic UI mutations with automatic rollback
+ *
+ * @example
+ * const { mutate, isOptimistic, isPending } = useOptimisticMutation(
+ *   async (data) => api.createMessage(data),
+ *   {
+ *     onOptimisticUpdate: (newMessage) => {
+ *       setMessages(prev => [...prev, { ...newMessage, id: 'temp-id', isPending: true }]);
+ *     },
+ *     onSuccess: (response) => {
+ *       setMessages(prev => prev.map(m =>
+ *         m.id === 'temp-id' ? { ...response, isPending: false } : m
+ *       ));
+ *     },
+ *     onError: (error) => {
+ *       setMessages(prev => prev.filter(m => m.id !== 'temp-id'));
+ *       toast.error('Failed to send message');
+ *     }
+ *   }
+ * );
+ */
+export declare function useOptimisticMutation<TData, TVariables, TContext = unknown>(mutationFn: (variables: TVariables) => Promise<TData>, options?: OptimisticMutationOptions<TData, TVariables, TContext>): OptimisticMutationReturn<TData, TVariables>;

package/dist/hooks/useOptimisticMutation.js

@@ -0,0 +1,196 @@
+import { __awaiter, __spreadArray, __generator, __assign } from '/Users/ggn/Development/ui-flik/node_modules/tslib/tslib.es6.js';
+import { useState, useRef, useCallback } from 'react';
+import { normalizeOptimisticError, MutationError } from '../utils/optimisticErrors.js';
+import { shouldRetry, calculateRetryDelay } from '../utils/retryUtils.js';
+import { useNetworkStatus } from './useNetworkStatus.js';
+import { getDefaultQueue } from '../utils/actionQueue.js';
+
+/**
+ * useOptimisticMutation Hook
+ * Provides instant UI updates with automatic rollback on error
+ */
+/**
+ * Hook for optimistic UI mutations with automatic rollback
+ *
+ * @example
+ * const { mutate, isOptimistic, isPending } = useOptimisticMutation(
+ *   async (data) => api.createMessage(data),
+ *   {
+ *     onOptimisticUpdate: (newMessage) => {
+ *       setMessages(prev => [...prev, { ...newMessage, id: 'temp-id', isPending: true }]);
+ *     },
+ *     onSuccess: (response) => {
+ *       setMessages(prev => prev.map(m =>
+ *         m.id === 'temp-id' ? { ...response, isPending: false } : m
+ *       ));
+ *     },
+ *     onError: (error) => {
+ *       setMessages(prev => prev.filter(m => m.id !== 'temp-id'));
+ *       toast.error('Failed to send message');
+ *     }
+ *   }
+ * );
+ */
+function useOptimisticMutation(mutationFn, options) {
+    var _this = this;
+    var _a;
+    if (options === void 0) { options = {}; }
+    var _b = useState("idle"), status = _b[0], setStatus = _b[1];
+    var _c = useState(undefined), data = _c[0], setData = _c[1];
+    var _d = useState(null), error = _d[0], setError = _d[1];
+    var _e = useState(false), isRolledBack = _e[0], setIsRolledBack = _e[1];
+    var _f = useState(false), isQueued = _f[0], setIsQueued = _f[1];
+    // Track if we're showing optimistic data
+    var isOptimisticRef = useRef(false);
+    var _g = useState(false), isOptimistic = _g[0], setIsOptimistic = _g[1];
+    // Get network status for offline queueing
+    var isOnline = useNetworkStatus().isOnline;
+    // Get action queue
+    var actionQueue = (_a = options.actionQueue) !== null && _a !== void 0 ? _a : getDefaultQueue();
+    /**
+     * Reset mutation state
+     */
+    var reset = useCallback(function () {
+        setStatus("idle");
+        setData(undefined);
+        setError(null);
+        setIsRolledBack(false);
+        setIsQueued(false);
+        setIsOptimistic(false);
+        isOptimisticRef.current = false;
+    }, []);
+    /**
+     * Execute mutation with retry logic
+     */
+    var executeMutation = useCallback(function (variables_1, context_1) {
+        var args_1 = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args_1[_i - 2] = arguments[_i];
+        }
+        return __awaiter(_this, __spreadArray([variables_1, context_1], args_1, true), void 0, function (variables, context, attempt) {
+            var result, err_1, optimisticError, delay_1;
+            if (attempt === void 0) { attempt = 0; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 5]);
+                        return [4 /*yield*/, mutationFn(variables)];
+                    case 1:
+                        result = _a.sent();
+                        return [2 /*return*/, result];
+                    case 2:
+                        err_1 = _a.sent();
+                        optimisticError = normalizeOptimisticError(err_1, {
+                            originalData: variables,
+                        });
+                        if (!(options.retry &&
+                            shouldRetry(optimisticError, attempt, options.retry))) return [3 /*break*/, 4];
+                        delay_1 = calculateRetryDelay(attempt, options.retry);
+                        return [4 /*yield*/, new Promise(function (resolve) { return setTimeout(resolve, delay_1); })];
+                    case 3:
+                        _a.sent();
+                        return [2 /*return*/, executeMutation(variables, context, attempt + 1)];
+                    case 4: throw optimisticError;
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
+    }, [mutationFn, options.retry]);
+    /**
+     * Core mutation logic
+     */
+    var mutateAsync = useCallback(function (variables) { return __awaiter(_this, void 0, void 0, function () {
+        var queueId, context, err_2, mutateError, result, err_3, optimisticError;
+        var _a, _b, _c, _d, _e, _f;
+        return __generator(this, function (_g) {
+            switch (_g.label) {
+                case 0:
+                    // Handle offline queueing
+                    if (!isOnline && options.offlineQueue) {
+                        queueId = actionQueue.add(function () { return mutationFn(variables); }, __assign({ maxRetries: (_a = options.retry) === null || _a === void 0 ? void 0 : _a.maxAttempts }, options.queueOptions));
+                        setIsQueued(true);
+                        setStatus("pending");
+                        // Return a rejected promise with queue info
+                        throw new MutationError("Mutation queued for offline processing (ID: ".concat(queueId, ")"), true, // Will be retried when online
+                        variables);
+                    }
+                    // Reset previous state
+                    setError(null);
+                    setIsRolledBack(false);
+                    setIsQueued(false);
+                    setStatus("pending");
+                    _g.label = 1;
+                case 1:
+                    _g.trys.push([1, 3, , 4]);
+                    return [4 /*yield*/, ((_b = options.onMutate) === null || _b === void 0 ? void 0 : _b.call(options, variables))];
+                case 2:
+                    context = (_g.sent());
+                    return [3 /*break*/, 4];
+                case 3:
+                    err_2 = _g.sent();
+                    mutateError = normalizeOptimisticError(err_2);
+                    setError(mutateError);
+                    setStatus("error");
+                    throw mutateError;
+                case 4:
+                    // Apply optimistic update
+                    if (options.onOptimisticUpdate) {
+                        isOptimisticRef.current = true;
+                        setIsOptimistic(true);
+                        options.onOptimisticUpdate(variables, context);
+                    }
+                    _g.label = 5;
+                case 5:
+                    _g.trys.push([5, 7, , 8]);
+                    return [4 /*yield*/, executeMutation(variables, context)];
+                case 6:
+                    result = _g.sent();
+                    // Success - replace optimistic data
+                    isOptimisticRef.current = false;
+                    setIsOptimistic(false);
+                    setData(result);
+                    setStatus("success");
+                    (_c = options.onSuccess) === null || _c === void 0 ? void 0 : _c.call(options, result, variables, context);
+                    (_d = options.onSettled) === null || _d === void 0 ? void 0 : _d.call(options, result, null, variables, context);
+                    return [2 /*return*/, result];
+                case 7:
+                    err_3 = _g.sent();
+                    optimisticError = err_3 instanceof MutationError ? err_3 : normalizeOptimisticError(err_3);
+                    isOptimisticRef.current = false;
+                    setIsOptimistic(false);
+                    setError(optimisticError);
+                    setStatus("error");
+                    setIsRolledBack(true);
+                    (_e = options.onError) === null || _e === void 0 ? void 0 : _e.call(options, optimisticError, variables, context);
+                    (_f = options.onSettled) === null || _f === void 0 ? void 0 : _f.call(options, undefined, optimisticError, variables, context);
+                    throw optimisticError;
+                case 8: return [2 /*return*/];
+            }
+        });
+    }); }, [isOnline, options, actionQueue, mutationFn, executeMutation]);
+    /**
+     * Fire-and-forget mutation
+     */
+    var mutate = useCallback(function (variables) {
+        mutateAsync(variables).catch(function () {
+            // Error already handled in mutateAsync
+        });
+    }, [mutateAsync]);
+    return {
+        mutate: mutate,
+        mutateAsync: mutateAsync,
+        data: data,
+        error: error,
+        status: status,
+        isIdle: status === "idle",
+        isPending: status === "pending",
+        isOptimistic: isOptimistic,
+        isSuccess: status === "success",
+        isError: status === "error",
+        isRolledBack: isRolledBack,
+        isQueued: isQueued,
+        reset: reset,
+    };
+}
+
+export { useOptimisticMutation };

package/dist/hooks/usePresence.d.ts

@@ -0,0 +1,88 @@
+/**
+ * usePresence Hook
+ *
+ * Custom hook for accessing presence state and controls.
+ * Wraps usePresenceContext with additional features like filtering.
+ *
+ * @example
+ * ```tsx
+ * function CustomPresenceUI() {
+ *   const { users, typingUsers, isConnected, startTyping } = usePresence();
+ *
+ *   return (
+ *     <div>
+ *       <h2>{users.length} users online</h2>
+ *       {typingUsers.length > 0 && <p>Someone is typing...</p>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+import { PresenceUser, TypingUser, ConnectionStatus } from "../components/ai/PresenceProvider/PresenceProvider.types";
+/**
+ * Options for usePresence hook
+ */
+export interface UsePresenceOptions {
+    /** Filter users */
+    filter?: (user: PresenceUser) => boolean;
+}
+/**
+ * Return value from usePresence hook
+ */
+export interface UsePresenceReturn {
+    /** All users in channel (filtered if filter provided) */
+    users: PresenceUser[];
+    /** All users (unfiltered) */
+    allUsers: PresenceUser[];
+    /** Users currently typing */
+    typingUsers: TypingUser[];
+    /** Current user data */
+    currentUser: PresenceUser;
+    /** Current connection status */
+    connectionStatus: ConnectionStatus;
+    /** Is actively connected */
+    isConnected: boolean;
+    /** Is connecting or reconnecting */
+    isConnecting: boolean;
+    /** Connection error (if any) */
+    error: Error | null;
+    /** Manually connect to channel */
+    connect: () => Promise<void>;
+    /** Manually disconnect from channel */
+    disconnect: () => Promise<void>;
+    /** Start typing indicator */
+    startTyping: () => void;
+    /** Stop typing indicator */
+    stopTyping: () => void;
+    /** Update current user metadata */
+    updateUser: (updates: Partial<PresenceUser>) => void;
+    /** Send custom presence event */
+    sendEvent: (event: string, data?: unknown) => void;
+}
+/**
+ * Hook for accessing presence state and controls
+ *
+ * @param options - Hook options (filtering, etc.)
+ * @returns Presence state and control functions
+ *
+ * @throws Error if used outside PresenceProvider
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * const { users, isConnected } = usePresence();
+ *
+ * // With filtering (online users only)
+ * const { users } = usePresence({
+ *   filter: (user) => user.status === 'online',
+ * });
+ *
+ * // Typing controls
+ * const { startTyping, stopTyping } = usePresence();
+ * const handleInputChange = () => {
+ *   startTyping();
+ *   setTimeout(stopTyping, 3000);
+ * };
+ * ```
+ */
+export declare function usePresence(options?: UsePresenceOptions): UsePresenceReturn;

package/dist/hooks/useSlidingNumber.js

@@ -0,0 +1,67 @@
+import { useState, useRef, useEffect } from 'react';
+
+/**
+ * Custom hook for sliding number animations
+ * Detects direction of change and provides digit-level animation data
+ *
+ * @example
+ * ```tsx
+ * const { displayValue, direction, digits } = useSlidingNumber({
+ *   value: count,
+ *   enabled: true,
+ *   formatNumber: (n) => n.toFixed(2)
+ * });
+ *
+ * return (
+ *   <div>
+ *     {digits.map((digit, i) => (
+ *       <motion.span
+ *         key={i}
+ *         animate={{ y: digit.isChanging ? [10, 0] : 0 }}
+ *       >
+ *         {digit.value}
+ *       </motion.span>
+ *     ))}
+ *   </div>
+ * );
+ * ```
+ */
+var useSlidingNumber = function (_a) {
+    var value = _a.value, _b = _a.enabled, enabled = _b === void 0 ? true : _b, _c = _a.formatNumber, formatNumber = _c === void 0 ? function (n) { return n.toString(); } : _c;
+    var _d = useState(formatNumber(value)), displayValue = _d[0], setDisplayValue = _d[1];
+    var _e = useState(0), direction = _e[0], setDirection = _e[1];
+    var prevValueRef = useRef(value);
+    useEffect(function () {
+        var prevValue = prevValueRef.current;
+        var newDisplayValue = formatNumber(value);
+        // Determine direction
+        if (value > prevValue) {
+            setDirection(1);
+        }
+        else if (value < prevValue) {
+            setDirection(-1);
+        }
+        else {
+            setDirection(0);
+        }
+        setDisplayValue(newDisplayValue);
+        prevValueRef.current = value;
+    }, [value, formatNumber]);
+    // Split display value into individual digits for animation
+    var digits = displayValue.split('').map(function (char, index) {
+        // Check if this digit changed from previous value
+        var prevDisplay = formatNumber(prevValueRef.current);
+        var isChanging = enabled && prevDisplay[index] !== char;
+        return {
+            value: char,
+            isChanging: isChanging,
+        };
+    });
+    return {
+        displayValue: displayValue,
+        direction: direction,
+        digits: digits,
+    };
+};
+
+export { useSlidingNumber };