flikkui 0.1.0-beta.8 → 0.2.0-beta.1

package/dist/components/forms/index.d.ts

@@ -1,12 +1,59 @@
-export * from './Input';
-export * from './InputOTP';
-export * from './Select';
-export * from './Textarea';
-export * from './FormLabel';
-export * from './InputAddress';
-export * from './Radio';
-export * from './Checkbox';
-export * from './Switch';
-export * from './TimePicker';
-export * from './Signature';
-export { default as formsBaseTheme } from './forms.theme';
+export { Input } from "./Input";
+export type { InputProps, InputSize, InputState, InputTheme, InputType, PasswordStrength, PasswordStrengthIndicator, } from "./Input";
+export { inputTheme } from "./Input";
+export { Select, SelectButton, SelectOptions, SelectOption } from "./Select";
+export type { SelectProps, SelectOptionType, SelectSize, SelectState, SelectThemeOverrides, } from "./Select";
+export { selectTheme } from "./Select";
+export { Textarea } from "./Textarea";
+export type { TextareaProps, TextareaSize, TextareaState, TextareaThemeOverrides, } from "./Textarea";
+export { textareaTheme } from "./Textarea";
+export { FormLabel } from "./FormLabel";
+export type { FormLabelProps, FormLabelState, FormLabelTheme, } from "./FormLabel";
+export { formLabelTheme } from "./FormLabel";
+export { Radio } from "./Radio";
+export type { RadioProps, RadioSize, RadioState } from "./Radio";
+export { radioTheme } from "./Radio";
+export { Checkbox } from "./Checkbox";
+export type { CheckboxProps, CheckboxSize, CheckboxState } from "./Checkbox";
+export { checkboxTheme } from "./Checkbox";
+export { Switch } from "./Switch";
+export type { SwitchProps, SwitchThemeOverrides } from "./Switch";
+export { switchTheme } from "./Switch";
+export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets, } from "./DatePicker";
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from "./DatePicker";
+export { datePickerTheme } from "./DatePicker";
+export { FileUpload } from "./FileUpload";
+export type { FileUploadProps, FileUploadThemeOverrides, UploadedFile, } from "./FileUpload";
+export { fileUploadTheme } from "./FileUpload";
+export { TimePicker } from "./TimePicker";
+export type { TimePickerProps, TimePickerSize, TimePickerState, TimePickerThemeOverrides, } from "./TimePicker";
+export { timePickerTheme } from "./TimePicker";
+export { Slider } from "./Slider";
+export type { SliderProps, SliderState, SliderThemeOverrides } from "./Slider";
+export { sliderTheme } from "./Slider";
+export { Signature } from "./Signature";
+export type { SignatureProps, SignatureTheme, SignatureThemeOverrides, } from "./Signature";
+export { signatureTheme } from "./Signature";
+export { RichTextEditor } from "./RichTextEditor";
+export type { RichTextEditorProps, RichTextEditorThemeOverrides, } from "./RichTextEditor";
+export { richTextEditorTheme } from "./RichTextEditor";
+export { InputOTP } from "./InputOTP";
+export type { InputOTPProps, InputOTPTheme } from "./InputOTP";
+export { inputOTPTheme } from "./InputOTP";
+export { InputCreditCard } from "./InputCreditCard";
+export type { InputCreditCardProps, InputCreditCardThemeOverrides, } from "./InputCreditCard";
+export { inputCreditCardTheme } from "./InputCreditCard";
+export { InputAddress } from "./InputAddress";
+export type { InputAddressProps, InputAddressThemeOverrides, } from "./InputAddress";
+export { inputAddressTheme } from "./InputAddress";
+export { InputDate } from "./InputDate";
+export type { InputDateProps, DateFormat } from "./InputDate";
+export { inputDateTheme } from "./InputDate";
+export { InputCounter } from "./InputCounter";
+export type { InputCounterProps, InputCounterTheme } from "./InputCounter";
+export { inputCounterTheme } from "./InputCounter";
+export { formsBaseTheme } from "./forms.theme";
+export { OptimisticForm } from "./OptimisticForm";
+export type { OptimisticFormProps, OptimisticFormState, OptimisticFormStatus, OptimisticFormTheme, } from "./OptimisticForm";
+export { optimisticFormTheme } from "./OptimisticForm";
+export * from "./StepperForm";

package/dist/components/forms/index.js

@@ -0,0 +1,51 @@
+export { Input } from './Input/Input.js';
+export { inputTheme } from './Input/Input.theme.js';
+export { Select, SelectButton, SelectOption, SelectOptions } from './Select/Select.js';
+export { selectTheme } from './Select/Select.theme.js';
+export { Textarea } from './Textarea/Textarea.js';
+export { textareaTheme } from './Textarea/Textarea.theme.js';
+export { FormLabel } from './FormLabel/FormLabel.js';
+export { formLabelTheme } from './FormLabel/FormLabel.theme.js';
+export { Radio } from './Radio/Radio.js';
+export { radioTheme } from './Radio/Radio.theme.js';
+export { Checkbox } from './Checkbox/Checkbox.js';
+export { checkboxTheme } from './Checkbox/Checkbox.theme.js';
+export { Switch } from './Switch/Switch.js';
+export { switchTheme } from './Switch/Switch.theme.js';
+export { DatePicker } from './DatePicker/DatePicker.js';
+export { datePickerTheme } from './DatePicker/DatePicker.theme.js';
+export { FileUpload } from './FileUpload/FileUpload.js';
+export { fileUploadTheme } from './FileUpload/FileUpload.theme.js';
+export { TimePicker } from './TimePicker/TimePicker.js';
+import 'react';
+import '@heroicons/react/24/outline';
+import 'clsx';
+import 'tailwind-merge';
+import 'motion/react';
+import 'react-dom';
+export { timePickerTheme } from './TimePicker/TimePicker.theme.js';
+export { Slider } from './Slider/Slider.js';
+export { sliderTheme } from './Slider/Slider.theme.js';
+export { Signature } from './Signature/Signature.js';
+export { signatureTheme } from './Signature/Signature.theme.js';
+export { RichTextEditor } from './RichTextEditor/RichTextEditor.js';
+export { richTextEditorTheme } from './RichTextEditor/RichTextEditor.theme.js';
+export { InputOTP } from './InputOTP/InputOTP.js';
+export { inputOTPTheme } from './InputOTP/InputOTP.theme.js';
+export { InputCreditCard } from './InputCreditCard/InputCreditCard.js';
+export { inputCreditCardTheme } from './InputCreditCard/InputCreditCard.theme.js';
+export { InputAddress } from './InputAddress/InputAddress.js';
+export { inputAddressTheme } from './InputAddress/InputAddress.theme.js';
+export { InputDate } from './InputDate/InputDate.js';
+export { inputDateTheme } from './InputDate/InputDate.theme.js';
+export { InputCounter } from './InputCounter/InputCounter.js';
+export { inputCounterTheme } from './InputCounter/InputCounter.theme.js';
+export { formsBaseTheme } from './forms.theme.js';
+export { OptimisticForm } from './OptimisticForm/OptimisticForm.js';
+export { optimisticFormTheme } from './OptimisticForm/OptimisticForm.theme.js';
+export { StepperForm } from './StepperForm/StepperForm.js';
+export { StepperFormContext, useStepperFormContext } from './StepperForm/StepperForm.types.js';
+export { stepperFormTheme } from './StepperForm/StepperForm.theme.js';
+export { DatePickerTrigger } from './DatePicker/DatePickerTrigger.js';
+export { DatePickerContent } from './DatePicker/DatePickerContent.js';
+export { DatePickerPresets } from './DatePicker/DatePickerPresets.js';

package/dist/hooks/index.d.ts

@@ -0,0 +1,14 @@
+export { useOverlay } from "./useOverlay";
+export type { UseOverlayOptions, UseOverlayReturn } from "./useOverlay";
+export { useSelectPortal } from "./useSelectPortal";
+export { useSlidingNumber } from "./useSlidingNumber";
+export { useTypewriter } from "./useTypewriter";
+export { useStreamingSSE } from "./useStreamingSSE";
+export type { UseStreamingSSEOptions, UseStreamingSSEReturn, } from "./useStreamingSSE";
+export { useNetworkStatus } from "./useNetworkStatus";
+export type { NetworkStatusReturn } from "./useNetworkStatus";
+export { useOptimisticMutation } from "./useOptimisticMutation";
+export * from "./useFormStateMachine";
+export type { OptimisticMutationOptions, OptimisticMutationReturn, MutationStatus, } from "./useOptimisticMutation";
+export { usePresence } from "./usePresence";
+export type { UsePresenceOptions, UsePresenceReturn } from "./usePresence";

package/dist/hooks/useFormStateMachine.d.ts

@@ -0,0 +1,31 @@
+import { StateMachineConfig, StateIdentifier } from "../utils/stateMachine";
+export interface UseFormStateMachineOptions<TData = any> {
+    /** Initial form data */
+    initialData?: TData;
+    /** Callback when state changes */
+    onTransition?: (state: StateIdentifier, data: TData) => void;
+    /** Callback when form is completed */
+    onComplete?: (data: TData) => void;
+}
+export interface FormStateMachineResult<TData> {
+    /** Name of the current step/state */
+    currentStep: StateIdentifier;
+    /** Current form data */
+    data: TData;
+    /** Progress (0 to 1) */
+    progress: number;
+    /** Whether we can go back */
+    canGoBack: boolean;
+    /** Transition to the next valid state based on 'NEXT' event */
+    next: () => void;
+    /** Move to previous state (if history is managed) */
+    previous: () => void;
+    /** Update form data for the current step */
+    updateData: (newData: Partial<TData>) => void;
+    /** Jump to a specific state (if allowed) */
+    goTo: (state: StateIdentifier) => void;
+}
+/**
+ * Hook to manage multi-step form logic via a state machine
+ */
+export declare function useFormStateMachine<TData extends Record<string, any>>(config: StateMachineConfig<TData>, options?: UseFormStateMachineOptions<TData>): FormStateMachineResult<TData>;

package/dist/hooks/useFormStateMachine.js

@@ -0,0 +1,70 @@
+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 = {}) {
+    const [currentStep, setCurrentStep] = useState(config.initial);
+    const [data, setData] = useState(options.initialData || {});
+    const [history, setHistory] = useState([config.initial]);
+    // Calculate progress based on state index in config
+    const progress = useMemo(() => {
+        const keys = Object.keys(config.states);
+        const index = keys.indexOf(currentStep);
+        return index === -1 ? 0 : (index + 1) / keys.length;
+    }, [config.states, currentStep]);
+    const handleTransition = useCallback((event, context) => {
+        var _a, _b;
+        const result = transition(config, currentStep, event, context);
+        if (result.changed) {
+            setCurrentStep(result.value);
+            setHistory((prev) => [...prev, result.value]);
+            // Execute actions
+            result.actions.forEach((action) => 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]);
+    const next = useCallback(() => {
+        handleTransition("NEXT", data);
+    }, [handleTransition, data]);
+    const previous = useCallback(() => {
+        var _a;
+        if (history.length > 1) {
+            const newHistory = [...history];
+            newHistory.pop(); // remove current
+            const 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]);
+    const updateData = useCallback((newData) => {
+        setData((prev) => ({ ...prev, ...newData }));
+    }, []);
+    const goTo = useCallback((state) => {
+        var _a;
+        if (config.states[state]) {
+            setCurrentStep(state);
+            setHistory((prev) => [...prev, state]);
+            (_a = options.onTransition) === null || _a === void 0 ? void 0 : _a.call(options, state, data);
+        }
+    }, [config.states, data, options]);
+    return {
+        currentStep,
+        data,
+        progress,
+        canGoBack: history.length > 1,
+        next,
+        previous,
+        updateData,
+        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,89 @@
+import { useState, useCallback, useEffect } from 'react';
+
+/**
+ * useNetworkStatus Hook
+ * Detects online/offline status and network quality
+ */
+/**
+ * Get the Network Information API connection object
+ */
+const getConnection = () => {
+    if (typeof navigator === "undefined")
+        return undefined;
+    const 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 />;
+ * }
+ */
+const useNetworkStatus = () => {
+    const [isOnline, setIsOnline] = useState(() => typeof navigator !== "undefined" ? navigator.onLine : true);
+    const [wasOffline, setWasOffline] = useState(false);
+    const [networkInfo, setNetworkInfo] = useState({});
+    const updateNetworkInfo = useCallback(() => {
+        const connection = getConnection();
+        if (connection) {
+            setNetworkInfo({
+                effectiveType: connection.effectiveType,
+                downlink: connection.downlink,
+                rtt: connection.rtt,
+                saveData: connection.saveData,
+            });
+        }
+    }, []);
+    useEffect(() => {
+        const handleOnline = () => {
+            setIsOnline(true);
+            setWasOffline(true);
+            updateNetworkInfo();
+            // Reset wasOffline after a short delay
+            // This gives consuming code time to react to the transition
+            const timer = setTimeout(() => setWasOffline(false), 1000);
+            return () => clearTimeout(timer);
+        };
+        const handleOffline = () => {
+            setIsOnline(false);
+        };
+        const handleConnectionChange = () => {
+            updateNetworkInfo();
+        };
+        // Set up online/offline listeners
+        window.addEventListener("online", handleOnline);
+        window.addEventListener("offline", handleOffline);
+        // Set up Network Information API listener
+        const connection = getConnection();
+        if (connection) {
+            connection.addEventListener("change", handleConnectionChange);
+            updateNetworkInfo(); // Get initial values
+        }
+        return () => {
+            window.removeEventListener("online", handleOnline);
+            window.removeEventListener("offline", handleOffline);
+            if (connection) {
+                connection.removeEventListener("change", handleConnectionChange);
+            }
+        };
+    }, [updateNetworkInfo]);
+    return {
+        isOnline,
+        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,171 @@
+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 _a;
+    const [status, setStatus] = useState("idle");
+    const [data, setData] = useState(undefined);
+    const [error, setError] = useState(null);
+    const [isRolledBack, setIsRolledBack] = useState(false);
+    const [isQueued, setIsQueued] = useState(false);
+    // Track if we're showing optimistic data
+    const isOptimisticRef = useRef(false);
+    const [isOptimistic, setIsOptimistic] = useState(false);
+    // Get network status for offline queueing
+    const { isOnline } = useNetworkStatus();
+    // Get action queue
+    const actionQueue = (_a = options.actionQueue) !== null && _a !== void 0 ? _a : getDefaultQueue();
+    /**
+     * Reset mutation state
+     */
+    const reset = useCallback(() => {
+        setStatus("idle");
+        setData(undefined);
+        setError(null);
+        setIsRolledBack(false);
+        setIsQueued(false);
+        setIsOptimistic(false);
+        isOptimisticRef.current = false;
+    }, []);
+    /**
+     * Execute mutation with retry logic
+     */
+    const executeMutation = useCallback(async (variables, context, attempt = 0) => {
+        try {
+            const result = await mutationFn(variables);
+            return result;
+        }
+        catch (err) {
+            const optimisticError = normalizeOptimisticError(err, {
+                originalData: variables,
+            });
+            // Check if we should retry
+            if (options.retry &&
+                shouldRetry(optimisticError, attempt, options.retry)) {
+                const delay = calculateRetryDelay(attempt, options.retry);
+                await new Promise((resolve) => setTimeout(resolve, delay));
+                return executeMutation(variables, context, attempt + 1);
+            }
+            throw optimisticError;
+        }
+    }, [mutationFn, options.retry]);
+    /**
+     * Core mutation logic
+     */
+    const mutateAsync = useCallback(async (variables) => {
+        var _a, _b, _c, _d, _e, _f;
+        // Handle offline queueing
+        if (!isOnline && options.offlineQueue) {
+            const queueId = actionQueue.add(() => mutationFn(variables), {
+                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: ${queueId})`, true, // Will be retried when online
+            variables);
+        }
+        // Reset previous state
+        setError(null);
+        setIsRolledBack(false);
+        setIsQueued(false);
+        setStatus("pending");
+        // Get context from onMutate
+        let context;
+        try {
+            context = (await ((_b = options.onMutate) === null || _b === void 0 ? void 0 : _b.call(options, variables)));
+        }
+        catch (err) {
+            // onMutate failed - don't proceed
+            const mutateError = normalizeOptimisticError(err);
+            setError(mutateError);
+            setStatus("error");
+            throw mutateError;
+        }
+        // Apply optimistic update
+        if (options.onOptimisticUpdate) {
+            isOptimisticRef.current = true;
+            setIsOptimistic(true);
+            options.onOptimisticUpdate(variables, context);
+        }
+        try {
+            // Execute the mutation
+            const result = await executeMutation(variables, context);
+            // 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 result;
+        }
+        catch (err) {
+            // Error - rollback optimistic update
+            const optimisticError = err instanceof MutationError ? err : normalizeOptimisticError(err);
+            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;
+        }
+    }, [isOnline, options, actionQueue, mutationFn, executeMutation]);
+    /**
+     * Fire-and-forget mutation
+     */
+    const mutate = useCallback((variables) => {
+        mutateAsync(variables).catch(() => {
+            // Error already handled in mutateAsync
+        });
+    }, [mutateAsync]);
+    return {
+        mutate,
+        mutateAsync,
+        data,
+        error,
+        status,
+        isIdle: status === "idle",
+        isPending: status === "pending",
+        isOptimistic,
+        isSuccess: status === "success",
+        isError: status === "error",
+        isRolledBack,
+        isQueued,
+        reset,
+    };
+}
+
+export { useOptimisticMutation };