hookery 0.0.1 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,14 +1,3276 @@
1
+ import * as react from 'react';
2
+ import { useEffect, EffectCallback, DependencyList, RefObject, UIEvent, MutableRefObject, FormEvent } from 'react';
3
+ import { AnimationConfig, AnimationItem } from 'lottie-web';
4
+ import * as THREE from 'three';
5
+ import * as _auth0_auth0_spa_js from '@auth0/auth0-spa-js';
6
+ import { AxiosError, AxiosResponse, AxiosRequestConfig } from 'axios';
7
+ export { useAuth, useClerk, useUser } from '@clerk/clerk-react';
8
+ import { Auth, User } from 'firebase/auth';
9
+ import { WritableAtom, Atom } from 'jotai';
10
+ export { useAtom, useAtomValue, useSetAtom } from 'jotai';
11
+ import * as motion_dom from 'motion-dom';
12
+ import { TypedUseSelectorHook } from 'react-redux';
13
+ import { Dispatch } from 'redux';
14
+ export { useActionData, useFetcher, useLoaderData, useNavigation, useSubmit } from '@remix-run/react';
15
+ import * as _stripe_stripe_js from '@stripe/stripe-js';
16
+ import { SupabaseClient, User as User$1 } from '@supabase/supabase-js';
17
+ export { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
18
+ import * as yup from 'yup';
19
+ import { z } from 'zod';
20
+ export { useAnimation, useMotionValue, useSpring, useTransform } from 'framer-motion';
21
+ export { useAuth0 } from '@auth0/auth0-react';
22
+ export { useElements, useStripe } from '@stripe/react-stripe-js';
23
+ export { usePathname, useRouter, useSearchParams } from 'next/navigation';
24
+
25
+ /**
26
+ * useIsomorphicLayoutEffect
27
+ *
28
+ * SSR-safe version of useLayoutEffect.
29
+ * Uses useEffect on the server and useLayoutEffect in the browser.
30
+ *
31
+ * @example
32
+ * ```tsx
33
+ * useIsomorphicLayoutEffect(() => {
34
+ * // DOM measurements or mutations
35
+ * }, [dependency]);
36
+ * ```
37
+ */
38
+ declare const useIsomorphicLayoutEffect: typeof useEffect;
39
+
40
+ interface UseToggleOptions {
41
+ /** Initial value for the toggle (default: false) */
42
+ initialValue?: boolean;
43
+ }
44
+ interface UseToggleReturn {
45
+ /** Current toggle value */
46
+ value: boolean;
47
+ /** Toggle the value */
48
+ toggle: () => void;
49
+ /** Set value to true */
50
+ setTrue: () => void;
51
+ /** Set value to false */
52
+ setFalse: () => void;
53
+ /** Set to specific value */
54
+ setValue: (value: boolean) => void;
55
+ }
56
+ /**
57
+ * useToggle
58
+ *
59
+ * A simple hook for managing boolean state with stable action handlers.
60
+ *
61
+ * @param options - Configuration options
62
+ * @returns Object with value and control functions
63
+ *
64
+ * @example
65
+ * ```tsx
66
+ * const { value, toggle, setTrue, setFalse } = useToggle();
67
+ *
68
+ * return (
69
+ * <div>
70
+ * <p>Value: {value ? 'ON' : 'OFF'}</p>
71
+ * <button onClick={toggle}>Toggle</button>
72
+ * <button onClick={setTrue}>Set ON</button>
73
+ * <button onClick={setFalse}>Set OFF</button>
74
+ * </div>
75
+ * );
76
+ * ```
77
+ */
78
+ declare function useToggle(options?: UseToggleOptions): UseToggleReturn;
79
+
80
+ interface UseCounterOptions {
81
+ /** Initial value (default: 0) */
82
+ initialValue?: number;
83
+ /** Minimum value (optional) */
84
+ min?: number;
85
+ /** Maximum value (optional) */
86
+ max?: number;
87
+ /** Step value for increment/decrement (default: 1) */
88
+ step?: number;
89
+ }
90
+ interface UseCounterReturn {
91
+ /** Current count value */
92
+ count: number;
93
+ /** Increment by step */
94
+ increment: () => void;
95
+ /** Decrement by step */
96
+ decrement: () => void;
97
+ /** Reset to initial value */
98
+ reset: () => void;
99
+ /** Set to specific value */
100
+ set: (value: number) => void;
101
+ }
102
+ /**
103
+ * useCounter
104
+ *
105
+ * A hook for managing numeric state with increment, decrement, and bounds.
106
+ *
107
+ * @param options - Configuration options
108
+ * @returns Object with count value and control functions
109
+ *
110
+ * @example
111
+ * ```tsx
112
+ * const { count, increment, decrement, reset } = useCounter({
113
+ * initialValue: 0,
114
+ * min: 0,
115
+ * max: 10,
116
+ * step: 1,
117
+ * });
118
+ *
119
+ * return (
120
+ * <div>
121
+ * <p>Count: {count}</p>
122
+ * <button onClick={decrement}>-</button>
123
+ * <button onClick={increment}>+</button>
124
+ * <button onClick={reset}>Reset</button>
125
+ * </div>
126
+ * );
127
+ * ```
128
+ */
129
+ declare function useCounter(options?: UseCounterOptions): UseCounterReturn;
130
+
131
+ /**
132
+ * usePrevious
133
+ *
134
+ * A hook that returns the previous value of a state or prop.
135
+ *
136
+ * @param value - The value to track
137
+ * @returns The previous value (undefined on first render)
138
+ *
139
+ * @example
140
+ * ```tsx
141
+ * const [count, setCount] = useState(0);
142
+ * const previousCount = usePrevious(count);
143
+ *
144
+ * console.log(`Current: ${count}, Previous: ${previousCount}`);
145
+ * ```
146
+ */
147
+ declare function usePrevious<T>(value: T): T | undefined;
148
+
149
+ /**
150
+ * useMount
151
+ *
152
+ * A hook that runs a callback once when the component mounts.
153
+ * Works correctly with React Strict Mode.
154
+ *
155
+ * @param callback - Function to run on mount
156
+ *
157
+ * @example
158
+ * ```tsx
159
+ * useMount(() => {
160
+ * console.log('Component mounted!');
161
+ * // Initialize analytics, fetch initial data, etc.
162
+ * });
163
+ * ```
164
+ */
165
+ declare function useMount(callback: () => void | (() => void)): void;
166
+
167
+ /**
168
+ * useUnmount
169
+ *
170
+ * A hook that runs a callback when the component unmounts.
171
+ * Always uses the latest callback reference.
172
+ *
173
+ * @param callback - Function to run on unmount
174
+ *
175
+ * @example
176
+ * ```tsx
177
+ * useUnmount(() => {
178
+ * console.log('Component unmounted!');
179
+ * // Cleanup subscriptions, cancel requests, etc.
180
+ * });
181
+ * ```
182
+ */
183
+ declare function useUnmount(callback: () => void): void;
184
+
185
+ interface UseDebounceOptions {
186
+ /** Delay in milliseconds (default: 500) */
187
+ delay?: number;
188
+ /** Maximum wait time in milliseconds (optional) */
189
+ maxWait?: number;
190
+ /** Leading edge execution (default: false) */
191
+ leading?: boolean;
192
+ /** Trailing edge execution (default: true) */
193
+ trailing?: boolean;
194
+ }
195
+ interface UseDebounceReturn<T> {
196
+ /** The debounced value */
197
+ debouncedValue: T;
198
+ /** Whether currently in debounce period */
199
+ isPending: boolean;
200
+ /** Cancel pending debounce */
201
+ cancel: () => void;
202
+ /** Flush debounced value immediately */
203
+ flush: () => void;
204
+ }
205
+ /**
206
+ * useDebounce
207
+ *
208
+ * A hook that debounces a value, delaying updates until after a specified delay.
209
+ *
210
+ * @param value - The value to debounce
211
+ * @param options - Configuration options
212
+ * @returns Object with debounced value and control functions
213
+ *
214
+ * @example
215
+ * ```tsx
216
+ * const [searchTerm, setSearchTerm] = useState('');
217
+ * const { debouncedValue } = useDebounce(searchTerm, { delay: 300 });
218
+ *
219
+ * useEffect(() => {
220
+ * // API call with debounced value
221
+ * fetchResults(debouncedValue);
222
+ * }, [debouncedValue]);
223
+ * ```
224
+ */
225
+ declare function useDebounce<T>(value: T, options?: UseDebounceOptions): UseDebounceReturn<T>;
226
+
227
+ interface UseThrottleOptions {
228
+ /** Throttle interval in milliseconds (default: 500) */
229
+ interval?: number;
230
+ /** Execute on leading edge (default: true) */
231
+ leading?: boolean;
232
+ /** Execute on trailing edge (default: true) */
233
+ trailing?: boolean;
234
+ }
235
+ interface UseThrottleReturn<T> {
236
+ /** The throttled value */
237
+ throttledValue: T;
238
+ /** Whether currently in throttle period */
239
+ isPending: boolean;
240
+ }
241
+ /**
242
+ * useThrottle
243
+ *
244
+ * A hook that throttles a value, limiting how often it can update.
245
+ *
246
+ * @param value - The value to throttle
247
+ * @param options - Configuration options
248
+ * @returns Object with throttled value and pending state
249
+ *
250
+ * @example
251
+ * ```tsx
252
+ * const [scrollY, setScrollY] = useState(0);
253
+ * const { throttledValue } = useThrottle(scrollY, { interval: 100 });
254
+ *
255
+ * useEffect(() => {
256
+ * // Update UI with throttled scroll position
257
+ * updateScrollIndicator(throttledValue);
258
+ * }, [throttledValue]);
259
+ * ```
260
+ */
261
+ declare function useThrottle<T>(value: T, options?: UseThrottleOptions): UseThrottleReturn<T>;
262
+
263
+ interface UseLocalStorageOptions<T> {
264
+ /** Serializer function (default: JSON.stringify) */
265
+ serializer?: (value: T) => string;
266
+ /** Deserializer function (default: JSON.parse) */
267
+ deserializer?: (value: string) => T;
268
+ /** Sync across tabs (default: true) */
269
+ syncAcrossTabs?: boolean;
270
+ }
271
+ interface UseLocalStorageReturn<T> {
272
+ /** Current stored value */
273
+ value: T;
274
+ /** Set the value */
275
+ setValue: (value: T | ((prev: T) => T)) => void;
276
+ /** Remove the value from storage */
277
+ remove: () => void;
278
+ /** Check if value exists in storage */
279
+ exists: boolean;
280
+ }
281
+ /**
282
+ * useLocalStorage
283
+ *
284
+ * A hook for persisting state in localStorage with SSR support and cross-tab sync.
285
+ *
286
+ * @param key - Storage key
287
+ * @param initialValue - Default value if key doesn't exist
288
+ * @param options - Configuration options
289
+ * @returns Object with value and control functions
290
+ *
291
+ * @example
292
+ * ```tsx
293
+ * interface AppSettings {
294
+ * theme: 'dark' | 'light';
295
+ * notifications: boolean;
296
+ * }
297
+ *
298
+ * // Default settings
299
+ * const defaults: AppSettings = { theme: 'light', notifications: true };
300
+ *
301
+ * export function SettingsPanel() {
302
+ * const {
303
+ * value: settings,
304
+ * setValue: setSettings,
305
+ * remove,
306
+ * exists
307
+ * } = useLocalStorage<AppSettings>('app-settings', defaults);
308
+ *
309
+ * const toggleTheme = () => {
310
+ * setSettings(prev => ({
311
+ * ...prev,
312
+ * theme: prev.theme === 'dark' ? 'light' : 'dark'
313
+ * }));
314
+ * };
315
+ *
316
+ * return (
317
+ * <div className={`panel ${settings.theme}`}>
318
+ * <h2>Settings {exists ? '(Saved)' : '(Default)'}</h2>
319
+ *
320
+ * <div className="option">
321
+ * <label>Theme: {settings.theme}</label>
322
+ * <button onClick={toggleTheme}>Toggle Theme</button>
323
+ * </div>
324
+ *
325
+ * <div className="option">
326
+ * <label>
327
+ * <input
328
+ * type="checkbox"
329
+ * checked={settings.notifications}
330
+ * onChange={e => setSettings(p => ({ ...p, notifications: e.target.checked }))}
331
+ * />
332
+ * Enable Notifications
333
+ * </label>
334
+ * </div>
335
+ *
336
+ * <button onClick={remove} className="danger">
337
+ * Reset to Defaults
338
+ * </button>
339
+ * </div>
340
+ * );
341
+ * }
342
+ * ```
343
+ */
344
+ declare function useLocalStorage<T>(key: string, initialValue: T, options?: UseLocalStorageOptions<T>): UseLocalStorageReturn<T>;
345
+
346
+ interface UseSessionStorageOptions<T> {
347
+ /** Serializer function (default: JSON.stringify) */
348
+ serializer?: (value: T) => string;
349
+ /** Deserializer function (default: JSON.parse) */
350
+ deserializer?: (value: string) => T;
351
+ /** Initialize even if key exists (default: false) */
352
+ initializeWithValue?: boolean;
353
+ }
354
+ /**
355
+ * useSessionStorage
356
+ *
357
+ * A hook for managing state in sessionStorage.
358
+ * Clears when the page session ends (tab close).
359
+ *
360
+ * @param key - Storage key
361
+ * @param initialValue - Initial value
362
+ * @param options - Configuration options
363
+ * @returns [value, setValue, removeValue]
364
+ *
365
+ * @example
366
+ * ```tsx
367
+ * interface FormData {
368
+ * step: number;
369
+ * data: Record<string, any>;
370
+ * }
371
+ *
372
+ * const initialForm: FormData = { step: 1, data: {} };
373
+ *
374
+ * export function MultiStepForm() {
375
+ * // Persist form state even if user refreshes, but clear on close
376
+ * const [formState, setFormState, clearSession] = useSessionStorage<FormData>(
377
+ * 'registration_form',
378
+ * initialForm
379
+ * );
380
+ *
381
+ * const nextStep = (newData: any) => {
382
+ * setFormState(prev => ({
383
+ * step: prev.step + 1,
384
+ * data: { ...prev.data, ...newData }
385
+ * }));
386
+ * };
387
+ *
388
+ * return (
389
+ * <div>
390
+ * <h1>Step {formState.step}</h1>
391
+ * <FormStep
392
+ * step={formState.step}
393
+ * onSubmit={nextStep}
394
+ * />
395
+ *
396
+ * <button onClick={clearSession}>
397
+ * Cancel & Clear Session
398
+ * </button>
399
+ * </div>
400
+ * );
401
+ * }
402
+ * ```
403
+ */
404
+ declare function useSessionStorage<T>(key: string, initialValue: T | (() => T), options?: UseSessionStorageOptions<T>): [T, (value: T | ((val: T) => T)) => void, () => void];
405
+
406
+ interface UseTimeoutOptions {
407
+ /** Delay in milliseconds */
408
+ delay: number;
409
+ /** Auto-start the timeout (default: true) */
410
+ autoStart?: boolean;
411
+ }
412
+ interface UseTimeoutReturn {
413
+ /** Whether the timeout is currently running */
414
+ isRunning: boolean;
415
+ /** Whether the timeout has completed */
416
+ isComplete: boolean;
417
+ /** Start or restart the timeout */
418
+ start: () => void;
419
+ /** Stop/cancel the timeout */
420
+ stop: () => void;
421
+ /** Reset the timeout to initial state */
422
+ reset: () => void;
423
+ }
424
+ /**
425
+ * useTimeout
426
+ *
427
+ * A declarative hook for managing timeouts.
428
+ *
429
+ * @param callback - Function to call when timeout completes
430
+ * @param options - Configuration options
431
+ * @returns Object with timeout state and control functions
432
+ *
433
+ * @example
434
+ * ```tsx
435
+ * const { isRunning, start, stop } = useTimeout(
436
+ * () => console.log('Timeout completed!'),
437
+ * { delay: 3000 }
438
+ * );
439
+ *
440
+ * return (
441
+ * <div>
442
+ * <p>Status: {isRunning ? 'Running' : 'Stopped'}</p>
443
+ * <button onClick={start}>Start</button>
444
+ * <button onClick={stop}>Stop</button>
445
+ * </div>
446
+ * );
447
+ * ```
448
+ */
449
+ declare function useTimeout(callback: () => void, options: UseTimeoutOptions): UseTimeoutReturn;
450
+
451
+ interface UseIntervalOptions {
452
+ /** Interval delay in milliseconds */
453
+ delay: number;
454
+ /** Auto-start the interval (default: true) */
455
+ autoStart?: boolean;
456
+ /** Execute callback immediately on start (default: false) */
457
+ immediate?: boolean;
458
+ }
459
+ interface UseIntervalReturn {
460
+ /** Whether the interval is currently running */
461
+ isRunning: boolean;
462
+ /** Number of times the callback has been called */
463
+ count: number;
464
+ /** Start the interval */
465
+ start: () => void;
466
+ /** Stop/pause the interval */
467
+ stop: () => void;
468
+ /** Reset count to 0 */
469
+ reset: () => void;
470
+ }
471
+ /**
472
+ * useInterval
473
+ *
474
+ * A declarative hook for managing intervals.
475
+ *
476
+ * @param callback - Function to call on each interval tick
477
+ * @param options - Configuration options
478
+ * @returns Object with interval state and control functions
479
+ *
480
+ * @example
481
+ * ```tsx
482
+ * const { count, isRunning, start, stop } = useInterval(
483
+ * () => console.log('Tick!'),
484
+ * { delay: 1000 }
485
+ * );
486
+ *
487
+ * return (
488
+ * <div>
489
+ * <p>Count: {count}</p>
490
+ * <button onClick={isRunning ? stop : start}>
491
+ * {isRunning ? 'Stop' : 'Start'}
492
+ * </button>
493
+ * </div>
494
+ * );
495
+ * ```
496
+ */
497
+ declare function useInterval(callback: () => void, options: UseIntervalOptions): UseIntervalReturn;
498
+
499
+ /**
500
+ * useUpdateEffect
501
+ *
502
+ * A hook that works like useEffect but skips the first render.
503
+ * Useful when you only want to run an effect on updates, not on mount.
504
+ *
505
+ * @param effect - Effect callback (same as useEffect)
506
+ * @param deps - Dependency array (same as useEffect)
507
+ *
508
+ * @example
509
+ * ```tsx
510
+ * const [count, setCount] = useState(0);
511
+ *
512
+ * useUpdateEffect(() => {
513
+ * console.log('Count updated to:', count);
514
+ * // This won't run on initial mount, only on updates
515
+ * }, [count]);
516
+ * ```
517
+ */
518
+ declare function useUpdateEffect(effect: EffectCallback, deps?: DependencyList): void;
519
+
520
+ /**
521
+ * useIsMounted
522
+ *
523
+ * A hook that returns a function to check if the component is still mounted.
524
+ * Useful for preventing state updates on unmounted components in async operations.
525
+ *
526
+ * @returns Function that returns true if component is mounted
527
+ *
528
+ * @example
529
+ * ```tsx
530
+ * const isMounted = useIsMounted();
531
+ *
532
+ * useEffect(() => {
533
+ * fetchData().then((data) => {
534
+ * if (isMounted()) {
535
+ * setData(data); // Safe - only updates if mounted
536
+ * }
537
+ * });
538
+ * }, []);
539
+ * ```
540
+ */
541
+ declare function useIsMounted(): () => boolean;
542
+
543
+ /**
544
+ * useStableCallback
545
+ *
546
+ * Creates a callback function that maintains a stable reference identity
547
+ * while accessing the latest props/state. Useful for avoiding
548
+ * unnecessary effect re-executions.
549
+ *
550
+ * @param callback - The function to stabilize
551
+ * @returns A stable callback function
552
+ *
553
+ * @example
554
+ * ```tsx
555
+ * const stableLog = useStableCallback(() => {
556
+ * console.log(count); // Alway access latest count
557
+ * });
558
+ *
559
+ * // stableLog identity never changes, safe to use in useEffect deps
560
+ * useEffect(() => {
561
+ * stableLog();
562
+ * }, [stableLog]);
563
+ * ```
564
+ */
565
+ declare function useStableCallback<T extends (...args: any[]) => any>(callback: T): T;
566
+
567
+ interface UseMediaQueryOptions {
568
+ /** Default value for SSR (default: false) */
569
+ defaultValue?: boolean;
570
+ /** Initialize on mount only (default: false) */
571
+ initializeOnMount?: boolean;
572
+ }
573
+ /**
574
+ * useMediaQuery
575
+ *
576
+ * A hook that tracks the state of a CSS media query.
577
+ * Supports SSR with default values and hydration mismatch prevention.
578
+ *
579
+ * @param query - CSS media query string
580
+ * @param options - Configuration options
581
+ * @returns Whether the media query matches
582
+ *
583
+ * @example
584
+ * ```tsx
585
+ * // Basic Mobile Detection
586
+ * const isMobile = useMediaQuery('(max-width: 768px)');
587
+ *
588
+ * // Advanced Usage with SSR support
589
+ * const isDarkMode = useMediaQuery('(prefers-color-scheme: dark)', {
590
+ * defaultValue: false, // Default value during server rendering
591
+ * initializeOnMount: true // Prevent hydration mismatch by initializing on mount
592
+ * });
593
+ *
594
+ * return (
595
+ * <div style={{ background: isDarkMode ? '#333' : '#FFF' }}>
596
+ * <h1>{isMobile ? 'Mobile View' : 'Desktop View'}</h1>
597
+ * <p>Current Theme: {isDarkMode ? 'Dark' : 'Light'}</p>
598
+ * </div>
599
+ * );
600
+ * ```
601
+ */
602
+ declare function useMediaQuery(query: string, options?: UseMediaQueryOptions): boolean;
603
+
604
+ interface WindowSize {
605
+ /** Window inner width */
606
+ width: number;
607
+ /** Window inner height */
608
+ height: number;
609
+ }
610
+ interface UseWindowSizeOptions {
611
+ /** Debounce delay in ms (default: 0) */
612
+ debounce?: number;
613
+ /** Initial width for SSR (default: 0) */
614
+ initialWidth?: number;
615
+ /** Initial height for SSR (default: 0) */
616
+ initialHeight?: number;
617
+ }
618
+ /**
619
+ * useWindowSize
620
+ *
621
+ * A hook that tracks the browser window dimensions.
622
+ * Handles debouncing to avoid performance issues during resize.
623
+ *
624
+ * @param options - Configuration options
625
+ * @returns Object with width and height
626
+ *
627
+ * @example
628
+ * ```tsx
629
+ * const { width, height } = useWindowSize({
630
+ * debounce: 100, // Wait 100ms after resize stops
631
+ * initialWidth: 1920, // Predictable server-side width
632
+ * initialHeight: 1080
633
+ * });
634
+ *
635
+ * const isLandscape = width > height;
636
+ *
637
+ * return (
638
+ * <div>
639
+ * <h2>Viewport Info</h2>
640
+ * <p>Dimensions: {width}px x {height}px</p>
641
+ * <p>Orientation: {isLandscape ? 'Landscape' : 'Portrait'}</p>
642
+ *
643
+ * {width < 768 && (
644
+ * <div className="mobile-warning">
645
+ * Optimized for Desktop
646
+ * </div>
647
+ * )}
648
+ * </div>
649
+ * );
650
+ * ```
651
+ */
652
+ declare function useWindowSize(options?: UseWindowSizeOptions): WindowSize;
653
+
654
+ interface UseClickOutsideOptions {
655
+ /** Events to listen for (default: ['mousedown', 'touchstart']) */
656
+ events?: Array<'mousedown' | 'mouseup' | 'touchstart' | 'touchend'>;
657
+ /** Whether the listener is active (default: true) */
658
+ enabled?: boolean;
659
+ }
660
+ /**
661
+ * useClickOutside
662
+ *
663
+ * A hook that detects clicks outside of a referenced element.
664
+ * Useful for closing modals, dropdowns, or popovers.
665
+ *
666
+ * @param ref - React ref to the element to monitor
667
+ * @param callback - Function to call when clicking outside
668
+ * @param options - Configuration options
669
+ *
670
+ * @example
671
+ * ```tsx
672
+ * const [isOpen, setIsOpen] = useState(false);
673
+ * const menuRef = useRef<HTMLDivElement>(null);
674
+ *
675
+ * useClickOutside(menuRef, () => {
676
+ * console.log('Clicked outside menu, closing...');
677
+ * setIsOpen(false);
678
+ * }, {
679
+ * enabled: isOpen, // Only listen when menu is open (performance)
680
+ * events: ['mousedown', 'touchstart'] // Handle touch devices too
681
+ * });
682
+ *
683
+ * return (
684
+ * <div className="relative">
685
+ * <button onClick={() => setIsOpen(!isOpen)}>Toggle Menu</button>
686
+ *
687
+ * {isOpen && (
688
+ * <div ref={menuRef} className="dropdown-menu">
689
+ * <p>Menu Item 1</p>
690
+ * <p>Menu Item 2</p>
691
+ * </div>
692
+ * )}
693
+ * </div>
694
+ * );
695
+ * ```
696
+ */
697
+ declare function useClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, callback: (event: MouseEvent | TouchEvent) => void, options?: UseClickOutsideOptions): void;
698
+
699
+ interface UseHoverReturn<T extends HTMLElement = HTMLElement> {
700
+ /** Whether the element is being hovered */
701
+ isHovered: boolean;
702
+ /** Ref to attach to the target element */
703
+ ref: React.RefCallback<T>;
704
+ /** Props to spread on the target element */
705
+ hoverProps: {
706
+ onMouseEnter: () => void;
707
+ onMouseLeave: () => void;
708
+ };
709
+ }
710
+ /**
711
+ * useHover
712
+ *
713
+ * A hook that tracks hover state of an element.
714
+ * Provides both a ref-based and prop-based API for flexibility.
715
+ *
716
+ * @returns Object with hover state, ref, and event handlers
717
+ *
718
+ * @example
719
+ * ```tsx
720
+ * // pattern 1: Using Ref (Recommended for access to DOM)
721
+ * const { isHovered: isCardHovered, ref: cardRef } = useHover<HTMLDivElement>();
722
+ *
723
+ * // pattern 2: Using Spread Props (Easier for simpler components)
724
+ * const { isHovered: isBtnHovered, hoverProps } = useHover();
725
+ *
726
+ * return (
727
+ * <div>
728
+ * <div
729
+ * ref={cardRef}
730
+ * style={{
731
+ * padding: 20,
732
+ * background: isCardHovered ? '#eee' : '#fff'
733
+ * }}
734
+ * >
735
+ * {isCardHovered ? 'Card Active!' : 'Hover Card'}
736
+ * </div>
737
+ *
738
+ * <button
739
+ * {...hoverProps}
740
+ * style={{ opacity: isBtnHovered ? 1 : 0.7 }}
741
+ * >
742
+ * {isBtnHovered ? 'Click Me!' : 'Button'}
743
+ * </button>
744
+ * </div>
745
+ * );
746
+ * ```
747
+ */
748
+ declare function useHover<T extends HTMLElement = HTMLElement>(): UseHoverReturn<T>;
749
+
750
+ interface UseKeyPressOptions {
751
+ /** Target element (default: window) */
752
+ target?: 'window' | 'document';
753
+ /** Event type (default: 'keydown') */
754
+ event?: 'keydown' | 'keyup' | 'keypress';
755
+ /** Whether to prevent default behavior */
756
+ preventDefault?: boolean;
757
+ /** Whether the listener is active (default: true) */
758
+ enabled?: boolean;
759
+ }
760
+ /**
761
+ * useKeyPress
762
+ *
763
+ * A hook that tracks whether a specific key is pressed.
764
+ *
765
+ * @param targetKey - The key to track (e.g., 'Enter', 'Escape', 'a')
766
+ * @param callback - Optional callback when key is pressed
767
+ * @param options - Configuration options
768
+ * @returns Whether the key is currently pressed
769
+ *
770
+ * @example
771
+ * ```tsx
772
+ * // Simple usage
773
+ * const isEnterPressed = useKeyPress('Enter');
774
+ *
775
+ * // With callback
776
+ * useKeyPress('Escape', () => {
777
+ * closeModal();
778
+ * });
779
+ *
780
+ * // With modifiers (check inside callback)
781
+ * useKeyPress('s', (event) => {
782
+ * if (event.ctrlKey) {
783
+ * event.preventDefault();
784
+ * saveDocument();
785
+ * }
786
+ * });
787
+ * ```
788
+ */
789
+ declare function useKeyPress(targetKey: string, callback?: (event: KeyboardEvent) => void, options?: UseKeyPressOptions): boolean;
790
+
791
+ interface ScrollPosition {
792
+ /** Horizontal scroll position */
793
+ x: number;
794
+ /** Vertical scroll position */
795
+ y: number;
796
+ }
797
+ interface UseScrollOptions {
798
+ /** Throttle delay in ms (default: 0) */
799
+ throttle?: number;
800
+ }
801
+ interface UseScrollReturn extends ScrollPosition {
802
+ /** Whether scroll is at the top */
803
+ isAtTop: boolean;
804
+ /** Whether scroll is at the bottom */
805
+ isAtBottom: boolean;
806
+ /** Whether scroll is at the left */
807
+ isAtLeft: boolean;
808
+ /** Whether scroll is at the right */
809
+ isAtRight: boolean;
810
+ /** Scroll direction */
811
+ direction: 'up' | 'down' | 'left' | 'right' | null;
812
+ }
813
+ /**
814
+ * useScroll
815
+ *
816
+ * A hook that tracks scroll position of window or an element.
817
+ * Provides coordinates, direction, and boundary detection (top/bottom/left/right).
818
+ *
819
+ * @param ref - Optional ref to track element scroll (defaults to window)
820
+ * @param options - Configuration options
821
+ * @returns Object with scroll position and state
822
+ *
823
+ * @example
824
+ * ```tsx
825
+ * // Track window scroll with progress bar
826
+ * const { y, direction, isAtTop, isAtBottom } = useScroll();
827
+ *
828
+ * // Track specific element
829
+ * const containerRef = useRef<HTMLDivElement>(null);
830
+ * const { x } = useScroll(containerRef, { throttle: 100 });
831
+ *
832
+ * return (
833
+ * <>
834
+ * <div className="fixed-header" style={{ opacity: isAtTop ? 1 : 0.8 }}>
835
+ * Scrolling: {direction}
836
+ * {isAtBottom && <span> (Reached Bottom!)</span>}
837
+ * </div>
838
+ *
839
+ * <div
840
+ * ref={containerRef}
841
+ * style={{ width: 300, overflowX: 'scroll', whiteSpace: 'nowrap' }}
842
+ * >
843
+ * {items.map(item => <Item key={item.id} {...item} />)}
844
+ * </div>
845
+ * </>
846
+ * );
847
+ * ```
848
+ */
849
+ declare function useScroll<T extends HTMLElement = HTMLElement>(ref?: RefObject<T | null>, options?: UseScrollOptions): UseScrollReturn;
850
+
851
+ interface UseIntersectionOptions {
852
+ /** Root element for intersection (default: viewport) */
853
+ root?: Element | null;
854
+ /** Root margin (default: '0px') */
855
+ rootMargin?: string;
856
+ /** Threshold(s) for intersection (default: 0) */
857
+ threshold?: number | number[];
858
+ /** Trigger only once (default: false) */
859
+ triggerOnce?: boolean;
860
+ /** Whether the observer is active (default: true) */
861
+ enabled?: boolean;
862
+ }
863
+ interface UseIntersectionReturn {
864
+ /** Whether the element is intersecting */
865
+ isIntersecting: boolean;
866
+ /** The intersection entry */
867
+ entry: IntersectionObserverEntry | null;
868
+ /** Ref to attach to the target element */
869
+ ref: RefObject<HTMLElement | null>;
870
+ }
871
+ /**
872
+ * useIntersection
873
+ *
874
+ * A hook that uses IntersectionObserver to detect element visibility.
875
+ * Perfect for lazy loading images, infinite scrolling, or animations.
876
+ *
877
+ * @param options - Configuration options
878
+ * @returns Object with intersection state and ref
879
+ *
880
+ * @example
881
+ * ```tsx
882
+ * const { ref, isIntersecting, entry } = useIntersection({
883
+ * threshold: 0.5, // Trigger when 50% visible
884
+ * triggerOnce: true, // Only trigger once (good for animations)
885
+ * rootMargin: '100px' // Pre-load before appearing on screen
886
+ * });
887
+ *
888
+ * return (
889
+ * <div
890
+ * ref={ref}
891
+ * className={`transition-opacity duration-500 ${
892
+ * isIntersecting ? 'opacity-100' : 'opacity-0'
893
+ * }`}
894
+ * >
895
+ * {isIntersecting ? (
896
+ * <img src="heavy-image.jpg" alt="Lazy loaded" />
897
+ * ) : (
898
+ * <div className="placeholder" />
899
+ * )}
900
+ * </div>
901
+ * );
902
+ * ```
903
+ */
904
+ declare function useIntersection(options?: UseIntersectionOptions): UseIntersectionReturn;
905
+
906
+ interface UseCopyToClipboardReturn {
907
+ /** The last copied value */
908
+ copiedValue: string | null;
909
+ /** Whether the copy was successful */
910
+ isSuccess: boolean;
911
+ /** Any error that occurred */
912
+ error: Error | null;
913
+ /** Function to copy text to clipboard */
914
+ copy: (text: string) => Promise<boolean>;
915
+ /** Reset state */
916
+ reset: () => void;
917
+ }
918
+ /**
919
+ * useCopyToClipboard
920
+ *
921
+ * A hook for copying text to the clipboard.
922
+ * Uses modern Clipboard API with fallback for legacy browsers.
923
+ *
924
+ * @returns Object with copy function and state
925
+ *
926
+ * @example
927
+ * ```tsx
928
+ * const { copy, copiedValue, isSuccess, error } = useCopyToClipboard();
929
+ *
930
+ * const handleCopy = async () => {
931
+ * const success = await copy('API_KEY_12345');
932
+ * if (success) {
933
+ * toast.success('Copied to clipboard!');
934
+ * }
935
+ * };
936
+ *
937
+ * return (
938
+ * <div className="api-key-box">
939
+ * <code>API_KEY_12345</code>
940
+ *
941
+ * <button onClick={handleCopy} disabled={isSuccess}>
942
+ * {isSuccess ? 'Copied!' : 'Copy Key'}
943
+ * </button>
944
+ *
945
+ * {error && <p className="error">Failed to copy: {error.message}</p>}
946
+ *
947
+ * {isSuccess && (
948
+ * <p className="hint">
949
+ * Last copied: {copiedValue}
950
+ * </p>
951
+ * )}
952
+ * </div>
953
+ * );
954
+ * ```
955
+ */
956
+ declare function useCopyToClipboard(): UseCopyToClipboardReturn;
957
+
958
+ interface UseDocumentTitleOptions {
959
+ /** Restore previous title on unmount (default: true) */
960
+ restoreOnUnmount?: boolean;
961
+ }
962
+ /**
963
+ * useDocumentTitle
964
+ *
965
+ * A hook that sets the document title.
966
+ *
967
+ * @param title - The title to set
968
+ * @param options - Configuration options
969
+ *
970
+ * @example
971
+ * ```tsx
972
+ * useDocumentTitle('Dashboard - My App');
973
+ *
974
+ * // With dynamic title
975
+ * useDocumentTitle(`${unreadCount} new messages`);
976
+ *
977
+ * // Don't restore on unmount
978
+ * useDocumentTitle('Settings', { restoreOnUnmount: false });
979
+ * ```
980
+ */
981
+ declare function useDocumentTitle(title: string, options?: UseDocumentTitleOptions): void;
982
+
983
+ /**
984
+ * useLockBodyScroll
985
+ *
986
+ * A hook that locks body scroll when active (useful for modals).
987
+ *
988
+ * @param lock - Whether to lock scroll (default: true)
989
+ *
990
+ * @example
991
+ * ```tsx
992
+ * const [isModalOpen, setIsModalOpen] = useState(false);
993
+ *
994
+ * useLockBodyScroll(isModalOpen);
995
+ *
996
+ * return (
997
+ * <>
998
+ * <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
999
+ * {isModalOpen && <Modal onClose={() => setIsModalOpen(false)} />}
1000
+ * </>
1001
+ * );
1002
+ * ```
1003
+ */
1004
+ declare function useLockBodyScroll(lock?: boolean): void;
1005
+
1006
+ type Theme = 'light' | 'dark' | 'system';
1007
+ interface UseThemeOptions {
1008
+ /** Key to store theme in localStorage (default: 'theme') */
1009
+ storageKey?: string;
1010
+ /** Attribute to apply to HTML element (default: 'data-theme') */
1011
+ attribute?: string;
1012
+ /** Default theme if storage is empty (default: 'system') */
1013
+ defaultTheme?: Theme;
1014
+ /** Disable transition on theme switch to prevent flicker (default: true) */
1015
+ disableTransitionOnChange?: boolean;
1016
+ }
1017
+ interface UseThemeReturn {
1018
+ /** Active theme (light/dark/system) */
1019
+ theme: Theme;
1020
+ /** Resolved theme (light/dark) */
1021
+ resolvedTheme: 'light' | 'dark';
1022
+ /** Set theme */
1023
+ setTheme: (theme: Theme) => void;
1024
+ /** Toggle between light and dark */
1025
+ toggleTheme: () => void;
1026
+ }
1027
+ /**
1028
+ * useTheme
1029
+ *
1030
+ * A hook for managing light/dark mode with system preference support
1031
+ * and no-flash-of-unstyled-content (FOUC).
1032
+ *
1033
+ * @param options - Configuration options
1034
+ * @returns Theme state and controls
1035
+ *
1036
+ * @example
1037
+ * ```tsx
1038
+ * const { theme, toggleTheme } = useTheme();
1039
+ *
1040
+ * return (
1041
+ * <button onClick={toggleTheme}>
1042
+ * Current: {theme}
1043
+ * </button>
1044
+ * );
1045
+ * ```
1046
+ */
1047
+ declare function useTheme(options?: UseThemeOptions): UseThemeReturn;
1048
+
1049
+ interface UseEventOptions {
1050
+ /** Capture phase (default: false) */
1051
+ capture?: boolean;
1052
+ /** Passive listener (default: false) */
1053
+ passive?: boolean;
1054
+ /** Once listener (default: false) */
1055
+ once?: boolean;
1056
+ }
1057
+ /**
1058
+ * useEvent
1059
+ *
1060
+ * A hook that attaches an event listener to a target element.
1061
+ * Handles adding/removing listeners automatically on cleanup.
1062
+ *
1063
+ * @param name - Event name
1064
+ * @param handler - Event handler function
1065
+ * @param target - Target element (default: window)
1066
+ * @param options - Event options
1067
+ *
1068
+ * @example
1069
+ * ```tsx
1070
+ * useEvent('click', handleClick);
1071
+ * useEvent('scroll', handleScroll, window, { passive: true });
1072
+ * ```
1073
+ */
1074
+ declare function useEvent<KD extends keyof DocumentEventMap>(name: KD, handler: (this: Document, ev: DocumentEventMap[KD]) => any, target?: Document | null, options?: UseEventOptions): void;
1075
+ declare function useEvent<KH extends keyof HTMLElementEventMap>(name: KH, handler: (this: HTMLElement, ev: HTMLElementEventMap[KH]) => any, target?: HTMLElement | null, options?: UseEventOptions): void;
1076
+ declare function useEvent<KW extends keyof WindowEventMap>(name: KW, handler: (this: Window, ev: WindowEventMap[KW]) => any, target?: Window | null, options?: UseEventOptions): void;
1077
+
1078
+ interface UseLongPressOptions {
1079
+ /** Time in ms to trigger long press (default: 500) */
1080
+ threshold?: number;
1081
+ /** Cancel on movement (default: true) */
1082
+ cancelOnMove?: boolean;
1083
+ /** Triggered when long press starts */
1084
+ onStart?: (event: AnyEvent) => void;
1085
+ /** Triggered when long press finishes successfully */
1086
+ onFinish?: (event: AnyEvent) => void;
1087
+ /** Triggered when long press is cancelled */
1088
+ onCancel?: (event: AnyEvent) => void;
1089
+ }
1090
+ type AnyEvent = MouseEvent | TouchEvent | React.MouseEvent | React.TouchEvent;
1091
+ interface UseLongPressReturn {
1092
+ onMouseDown: (e: any) => void;
1093
+ onTouchStart: (e: any) => void;
1094
+ onMouseUp: (e: any) => void;
1095
+ onMouseLeave: (e: any) => void;
1096
+ onTouchEnd: (e: any) => void;
1097
+ }
1098
+ /**
1099
+ * useLongPress
1100
+ *
1101
+ * A hook for detecting long press gestures.
1102
+ *
1103
+ * @param onLongPress - Callback fired when long press threshold is reached
1104
+ * @param options - Configuration options
1105
+ * @returns Event handlers to spread onto element
1106
+ *
1107
+ * @example
1108
+ * ```tsx
1109
+ * const onLongPress = () => {
1110
+ * console.log('Long pressed!');
1111
+ * };
1112
+ *
1113
+ * const bind = useLongPress(onLongPress);
1114
+ *
1115
+ * return <button {...bind}>Press me</button>;
1116
+ * ```
1117
+ */
1118
+ declare function useLongPress(onLongPress: (event: AnyEvent) => void, options?: UseLongPressOptions): UseLongPressReturn;
1119
+
1120
+ /**
1121
+ * useWindowFocus
1122
+ *
1123
+ * A hook that detects if the window currently has focus.
1124
+ *
1125
+ * @returns boolean - true if window is focused, false if blurred
1126
+ *
1127
+ * @example
1128
+ * ```tsx
1129
+ * const isFocused = useWindowFocus();
1130
+ *
1131
+ * useEffect(() => {
1132
+ * if (isFocused) {
1133
+ * // Resume polling
1134
+ * } else {
1135
+ * // Pause polling
1136
+ * }
1137
+ * }, [isFocused]);
1138
+ * ```
1139
+ */
1140
+ declare function useWindowFocus(): boolean;
1141
+
1142
+ interface UseResizeObserverOptions {
1143
+ /** Output only contentRect (default: true) */
1144
+ contentRect?: boolean;
1145
+ /** Throttling delay in ms (default: 0) */
1146
+ throttle?: number;
1147
+ }
1148
+ /**
1149
+ * useResizeObserver
1150
+ *
1151
+ * A hook that tracks element size changes using ResizeObserver.
1152
+ *
1153
+ * @param ref - Ref to the element to observe
1154
+ * @param options - Configuration options
1155
+ * @returns The resize observer entry's contentRect
1156
+ *
1157
+ * @example
1158
+ * ```tsx
1159
+ * const ref = useRef<HTMLDivElement>(null);
1160
+ * const rect = useResizeObserver(ref);
1161
+ *
1162
+ * return (
1163
+ * <div ref={ref}>
1164
+ * Width: {rect?.width}, Height: {rect?.height}
1165
+ * </div>
1166
+ * );
1167
+ * ```
1168
+ */
1169
+ declare function useResizeObserver<T extends HTMLElement = HTMLElement>(ref: RefObject<T | null>, options?: UseResizeObserverOptions): DOMRectReadOnly | undefined;
1170
+
1171
+ interface UseMutationObserverOptions extends MutationObserverInit {
1172
+ }
1173
+ /**
1174
+ * useMutationObserver
1175
+ *
1176
+ * A hook that tracks mutations in the DOM using MutationObserver.
1177
+ *
1178
+ * @param ref - Ref to the element to observe
1179
+ * @param callback - Function to call on mutation
1180
+ * @param options - MutationObserver options
1181
+ *
1182
+ * @example
1183
+ * ```tsx
1184
+ * const ref = useRef(null);
1185
+ * useMutationObserver(ref, (mutations) => {
1186
+ * console.log('DOM changed!', mutations);
1187
+ * }, { childList: true });
1188
+ * ```
1189
+ */
1190
+ declare function useMutationObserver<T extends HTMLElement>(ref: RefObject<T | null>, callback: MutationCallback, options?: UseMutationObserverOptions): void;
1191
+
1192
+ /**
1193
+ * usePageLeave
1194
+ *
1195
+ * It triggers a callback when the mouse leaves the page (e.g. intent to close tab).
1196
+ *
1197
+ * @param onPageLeave - Callback function
1198
+ *
1199
+ * @example
1200
+ * ```tsx
1201
+ * usePageLeave(() => {
1202
+ * console.log('User is leaving!');
1203
+ * });
1204
+ * ```
1205
+ */
1206
+ declare function usePageLeave(onPageLeave: () => void): void;
1207
+
1208
+ interface EyeDropperOpenOptions {
1209
+ signal?: AbortSignal;
1210
+ }
1211
+ interface UseEyeDropperReturn {
1212
+ isSupported: boolean;
1213
+ open: (options?: EyeDropperOpenOptions) => Promise<{
1214
+ sRGBHex: string;
1215
+ } | undefined>;
1216
+ }
1217
+ /**
1218
+ * useEyeDropper
1219
+ *
1220
+ * A hook for using the EyeDropper API to sample colors from the screen.
1221
+ *
1222
+ * @returns Object with support status and open function
1223
+ *
1224
+ * @example
1225
+ * ```tsx
1226
+ * const { open, isSupported } = useEyeDropper();
1227
+ *
1228
+ * const pickColor = async () => {
1229
+ * try {
1230
+ * const color = await open();
1231
+ * console.log(color?.sRGBHex);
1232
+ * } catch (e) {
1233
+ * console.error(e);
1234
+ * }
1235
+ * };
1236
+ * ```
1237
+ */
1238
+ declare function useEyeDropper(): UseEyeDropperReturn;
1239
+
1240
+ interface UseOnlineReturn {
1241
+ /** Whether the browser is online */
1242
+ isOnline: boolean;
1243
+ /** Whether the browser is offline */
1244
+ isOffline: boolean;
1245
+ /** Time since last status change (in ms) */
1246
+ since: number | null;
1247
+ }
1248
+ /**
1249
+ * useOnline
1250
+ *
1251
+ * A hook that tracks the browser's online/offline status.
1252
+ *
1253
+ * @returns Object with online status
1254
+ *
1255
+ * @example
1256
+ * ```tsx
1257
+ * const { isOnline, isOffline } = useOnline();
1258
+ *
1259
+ * return (
1260
+ * <div>
1261
+ * {isOnline ? '🟢 Online' : '🔴 Offline'}
1262
+ * </div>
1263
+ * );
1264
+ * ```
1265
+ */
1266
+ declare function useOnline(): UseOnlineReturn;
1267
+
1268
+ interface NetworkState {
1269
+ online: boolean;
1270
+ downlink?: number;
1271
+ downlinkMax?: number;
1272
+ effectiveType?: 'slow-2g' | '2g' | '3g' | '4g';
1273
+ rtt?: number;
1274
+ saveData?: boolean;
1275
+ type?: 'bluetooth' | 'cellular' | 'ethernet' | 'none' | 'wifi' | 'wimax' | 'other' | 'unknown';
1276
+ }
1277
+ /**
1278
+ * useNetworkState
1279
+ *
1280
+ * A hook that tracks detailed network connection information.
1281
+ * Note: Browser support varies for Navigator.connection.
1282
+ */
1283
+ declare function useNetworkState(): NetworkState;
1284
+
1285
+ interface UseFullscreenReturn {
1286
+ /** Whether fullscreen is active */
1287
+ isFullscreen: boolean;
1288
+ /** Whether fullscreen is supported */
1289
+ isSupported: boolean;
1290
+ /** Enter fullscreen mode */
1291
+ enter: () => Promise<void>;
1292
+ /** Exit fullscreen mode */
1293
+ exit: () => Promise<void>;
1294
+ /** Toggle fullscreen mode */
1295
+ toggle: () => Promise<void>;
1296
+ }
1297
+ /**
1298
+ * useFullscreen
1299
+ *
1300
+ * A hook for controlling the Fullscreen API.
1301
+ *
1302
+ * @param ref - Optional ref to element to make fullscreen (defaults to document.documentElement)
1303
+ * @returns Object with fullscreen state and controls
1304
+ *
1305
+ * @example
1306
+ * ```tsx
1307
+ * // Fullscreen the whole document
1308
+ * const { isFullscreen, toggle, isSupported } = useFullscreen();
1309
+ *
1310
+ * // Fullscreen a specific element
1311
+ * const videoRef = useRef<HTMLVideoElement>(null);
1312
+ * const { isFullscreen, enter, exit } = useFullscreen(videoRef);
1313
+ *
1314
+ * return (
1315
+ * <div>
1316
+ * <video ref={videoRef} />
1317
+ * <button onClick={toggle} disabled={!isSupported}>
1318
+ * {isFullscreen ? 'Exit' : 'Enter'} Fullscreen
1319
+ * </button>
1320
+ * </div>
1321
+ * );
1322
+ * ```
1323
+ */
1324
+ declare function useFullscreen<T extends HTMLElement = HTMLElement>(ref?: RefObject<T | null>): UseFullscreenReturn;
1325
+
1326
+ interface ShareData {
1327
+ /** Title of the shared content */
1328
+ title?: string;
1329
+ /** Text/description of the shared content */
1330
+ text?: string;
1331
+ /** URL to share */
1332
+ url?: string;
1333
+ }
1334
+ interface UseShareReturn {
1335
+ /** Whether Web Share API is supported */
1336
+ isSupported: boolean;
1337
+ /** Whether a share is currently in progress */
1338
+ isSharing: boolean;
1339
+ /** Whether share was successful */
1340
+ isSuccess: boolean;
1341
+ /** Any error that occurred */
1342
+ error: Error | null;
1343
+ /** Share data */
1344
+ share: (data: ShareData) => Promise<boolean>;
1345
+ /** Check if specific data can be shared */
1346
+ canShare: (data?: ShareData) => boolean;
1347
+ }
1348
+ /**
1349
+ * useShare
1350
+ *
1351
+ * A hook for using the Web Share API.
1352
+ *
1353
+ * @returns Object with share function and state
1354
+ *
1355
+ * @example
1356
+ * ```tsx
1357
+ * const { share, isSupported, isSharing } = useShare();
1358
+ *
1359
+ * const handleShare = async () => {
1360
+ * const success = await share({
1361
+ * title: 'Check this out!',
1362
+ * text: 'A very interesting article',
1363
+ * url: window.location.href,
1364
+ * });
1365
+ *
1366
+ * if (success) {
1367
+ * console.log('Shared successfully!');
1368
+ * }
1369
+ * };
1370
+ *
1371
+ * if (!isSupported) {
1372
+ * return <CopyLinkButton />;
1373
+ * }
1374
+ *
1375
+ * return (
1376
+ * <button onClick={handleShare} disabled={isSharing}>
1377
+ * {isSharing ? 'Sharing...' : 'Share'}
1378
+ * </button>
1379
+ * );
1380
+ * ```
1381
+ */
1382
+ declare function useShare(): UseShareReturn;
1383
+
1384
+ type PermissionName = 'geolocation' | 'notifications' | 'push' | 'midi' | 'camera' | 'microphone' | 'speaker-selection' | 'device-info' | 'background-fetch' | 'background-sync' | 'bluetooth' | 'persistent-storage' | 'ambient-light-sensor' | 'accelerometer' | 'gyroscope' | 'magnetometer' | 'clipboard-read' | 'clipboard-write' | 'display-capture' | 'nfc';
1385
+ type PermissionState = 'granted' | 'denied' | 'prompt' | 'unknown';
1386
+ /**
1387
+ * usePermissions
1388
+ *
1389
+ * A hook to query and track permission status for browser APIs.
1390
+ *
1391
+ * @param name - The name of the permission to query
1392
+ * @returns The current state of the permission
1393
+ *
1394
+ * @example
1395
+ * ```tsx
1396
+ * const status = usePermissions('geolocation');
1397
+ *
1398
+ * return <div>Location permission: {status}</div>;
1399
+ * ```
1400
+ */
1401
+ declare function usePermissions(name: PermissionName | string): PermissionState;
1402
+
1403
+ interface UseWakeLockReturn {
1404
+ isSupported: boolean;
1405
+ released: boolean;
1406
+ request: () => Promise<void>;
1407
+ release: () => Promise<void>;
1408
+ }
1409
+ /**
1410
+ * useWakeLock
1411
+ *
1412
+ * A hook to prevent the device screen from dimming/sleeping.
1413
+ *
1414
+ * @param onRequest - Callback when lock is acquired
1415
+ * @param onRelease - Callback when lock is released
1416
+ * @returns Object with lock status and controls
1417
+ */
1418
+ declare function useWakeLock({ onRequest, onRelease, onError, }?: {
1419
+ onRequest?: () => void;
1420
+ onRelease?: () => void;
1421
+ onError?: (err: Error) => void;
1422
+ }): UseWakeLockReturn;
1423
+
1424
+ interface UseMediaDevicesReturn {
1425
+ devices: MediaDeviceInfo[];
1426
+ isLoading: boolean;
1427
+ error: Error | null;
1428
+ isSupported: boolean;
1429
+ }
1430
+ /**
1431
+ * useMediaDevices
1432
+ *
1433
+ * A hook to list and track connected hardware (cameras, microphones, speakers).
1434
+ * Automatically updates when devices are plugged in or removed.
1435
+ *
1436
+ * @returns Object with devices list, loading state, and support status
1437
+ *
1438
+ * @example
1439
+ * ```tsx
1440
+ * const { devices, isLoading, error, isSupported } = useMediaDevices();
1441
+ *
1442
+ * if (!isSupported) return <p>Media Devices API not supported</p>;
1443
+ * if (isLoading) return <p>Scanning hardware...</p>;
1444
+ *
1445
+ * const cameras = devices.filter(d => d.kind === 'videoinput');
1446
+ * const mics = devices.filter(d => d.kind === 'audioinput');
1447
+ *
1448
+ * return (
1449
+ * <div className="device-manager">
1450
+ * <h3>Cameras ({cameras.length})</h3>
1451
+ * <ul>
1452
+ * {cameras.map(c => <li key={c.deviceId}>{c.label || 'Unknown Camera'}</li>)}
1453
+ * </ul>
1454
+ *
1455
+ * <h3>Microphones ({mics.length})</h3>
1456
+ * <ul>
1457
+ * {mics.map(m => <li key={m.deviceId}>{m.label || 'Unknown Mic'}</li>)}
1458
+ * </ul>
1459
+ *
1460
+ * {error && <p className="error">{error.message}</p>}
1461
+ * </div>
1462
+ * );
1463
+ * ```
1464
+ */
1465
+ declare function useMediaDevices(): UseMediaDevicesReturn;
1466
+
1467
+ type RecorderStatus = 'idle' | 'recording' | 'paused' | 'stopped';
1468
+ interface UseMediaRecorderReturn {
1469
+ status: RecorderStatus;
1470
+ start: (timeSlice?: number) => void;
1471
+ stop: () => void;
1472
+ pause: () => void;
1473
+ resume: () => void;
1474
+ isRecording: boolean;
1475
+ mediaBlob: Blob | undefined;
1476
+ mediaUrl: string | undefined;
1477
+ clear: () => void;
1478
+ error: Error | null;
1479
+ }
1480
+ /**
1481
+ * useMediaRecorder
1482
+ *
1483
+ * A hook to record media (audio/video) from a MediaStream.
1484
+ * Returns a Blob and URL for the recording.
1485
+ *
1486
+ * @param stream - The MediaStream to record (from useMediaDevices)
1487
+ * @param options - MediaRecorder options (mimeType, bitsPerSecond)
1488
+ * @returns Object with recording controls and data
1489
+ *
1490
+ * @example
1491
+ * ```tsx
1492
+ * const [stream, setStream] = useState<MediaStream | null>(null);
1493
+ * const {
1494
+ * status,
1495
+ * start,
1496
+ * stop,
1497
+ * mediaUrl,
1498
+ * clear
1499
+ * } = useMediaRecorder(stream);
1500
+ *
1501
+ * // Setup camera (simplified)
1502
+ * useEffect(() => {
1503
+ * navigator.mediaDevices.getUserMedia({ video: true, audio: true })
1504
+ * .then(setStream);
1505
+ * }, []);
1506
+ *
1507
+ * return (
1508
+ * <div>
1509
+ * <video
1510
+ * ref={v => v && (v.srcObject = stream)}
1511
+ * autoPlay muted
1512
+ * width={300}
1513
+ * />
1514
+ *
1515
+ * <div className="controls">
1516
+ * <button onClick={() => start()}>Record</button>
1517
+ * <button onClick={stop} disabled={status !== 'recording'}>Stop</button>
1518
+ * </div>
1519
+ *
1520
+ * {mediaUrl && (
1521
+ * <div className="preview">
1522
+ * <h3>Recorded Video</h3>
1523
+ * <video src={mediaUrl} controls width={300} />
1524
+ * <a href={mediaUrl} download="recording.webm">Download</a>
1525
+ * <button onClick={clear}>Clear</button>
1526
+ * </div>
1527
+ * )}
1528
+ * </div>
1529
+ * );
1530
+ * ```
1531
+ */
1532
+ declare function useMediaRecorder(stream: MediaStream | null, options?: MediaRecorderOptions): UseMediaRecorderReturn;
1533
+
1534
+ interface BatteryState {
1535
+ supported: boolean;
1536
+ loading: boolean;
1537
+ level: number;
1538
+ charging: boolean;
1539
+ chargingTime: number;
1540
+ dischargingTime: number;
1541
+ }
1542
+ /**
1543
+ * useBattery
1544
+ *
1545
+ * A hook that tracks battery status.
1546
+ *
1547
+ * @returns Battery state object
1548
+ */
1549
+ declare function useBattery(): BatteryState;
1550
+
1551
+ interface UseBluetoothReturn {
1552
+ isSupported: boolean;
1553
+ isConnected: boolean;
1554
+ isConnecting: boolean;
1555
+ device: BluetoothDevice | null;
1556
+ server: BluetoothRemoteGATTServer | null;
1557
+ error: Error | null;
1558
+ requestDevice: (options?: RequestDeviceOptions) => Promise<void>;
1559
+ disconnect: () => void;
1560
+ }
1
1561
  /**
2
- * HookForge - A collection of high-quality React hooks
3
- * @version 0.0.1
1562
+ * useBluetooth
1563
+ *
1564
+ * A hook for connecting to Bluetooth Low Energy (BLE) devices.
4
1565
  */
1566
+ declare function useBluetooth(): UseBluetoothReturn;
1567
+
1568
+ interface UseGamepadOptions {
1569
+ /** Enable polling loop (default: true) */
1570
+ enabled?: boolean;
1571
+ }
5
1572
  /**
6
- * A simple hook that returns the library version
7
- * This is a placeholder for the initial npm reservation
1573
+ * useGamepad
1574
+ *
1575
+ * A hook that tracks connected gamepads and their state.
1576
+ * Uses requestAnimationFrame for polling input state.
8
1577
  */
9
- declare function useVersion(): string;
10
- declare const _default: {
11
- version: string;
1578
+ declare function useGamepad(options?: UseGamepadOptions): {
1579
+ gamepads: (Gamepad | null)[];
12
1580
  };
13
1581
 
14
- export { _default as default, useVersion };
1582
+ interface UseFileSystemReturn {
1583
+ isSupported: boolean;
1584
+ file: File | null;
1585
+ fileHandle: FileSystemFileHandle | null;
1586
+ openFile: (options?: OpenFilePickerOptions) => Promise<void>;
1587
+ saveFile: (data: BlobPart, options?: SaveFilePickerOptions) => Promise<void>;
1588
+ error: Error | null;
1589
+ }
1590
+ /**
1591
+ * useFileSystem
1592
+ *
1593
+ * A hook for the File System Access API.
1594
+ */
1595
+ declare function useFileSystem(): UseFileSystemReturn;
1596
+
1597
+ interface StorageEstimateState {
1598
+ quota: number | undefined;
1599
+ usage: number | undefined;
1600
+ supported: boolean;
1601
+ loading: boolean;
1602
+ }
1603
+ /**
1604
+ * useStorageEstimate
1605
+ *
1606
+ * A hook to estimate storage quota and usage.
1607
+ */
1608
+ declare function useStorageEstimate(): StorageEstimateState;
1609
+
1610
+ type AsyncStatus = 'idle' | 'pending' | 'success' | 'error';
1611
+ interface UseAsyncOptions<T> {
1612
+ /** Execute immediately on mount (default: false) */
1613
+ immediate?: boolean;
1614
+ /** Initial data value */
1615
+ initialData?: T;
1616
+ /** Callback on success */
1617
+ onSuccess?: (data: T) => void;
1618
+ /** Callback on error */
1619
+ onError?: (error: Error) => void;
1620
+ }
1621
+ interface UseAsyncReturn<T, Args extends unknown[]> {
1622
+ /** The async function execution result */
1623
+ data: T | undefined;
1624
+ /** Any error that occurred */
1625
+ error: Error | null;
1626
+ /** Current status */
1627
+ status: AsyncStatus;
1628
+ /** Whether currently loading */
1629
+ isLoading: boolean;
1630
+ /** Whether request was successful */
1631
+ isSuccess: boolean;
1632
+ /** Whether request errored */
1633
+ isError: boolean;
1634
+ /** Execute the async function */
1635
+ execute: (...args: Args) => Promise<T | undefined>;
1636
+ /** Reset to initial state */
1637
+ reset: () => void;
1638
+ }
1639
+ /**
1640
+ * useAsync
1641
+ *
1642
+ * A hook for managing async function state.
1643
+ *
1644
+ * @param asyncFunction - The async function to execute
1645
+ * @param options - Configuration options
1646
+ * @returns Object with async state and execute function
1647
+ *
1648
+ * @example
1649
+ * ```tsx
1650
+ * const fetchUser = async (id: number) => {
1651
+ * const response = await fetch(`/api/users/${id}`);
1652
+ * return response.json();
1653
+ * };
1654
+ *
1655
+ * const { data, isLoading, execute } = useAsync(fetchUser);
1656
+ *
1657
+ * return (
1658
+ * <div>
1659
+ * <button onClick={() => execute(1)}>Load User</button>
1660
+ * {isLoading && <Spinner />}
1661
+ * {data && <UserCard user={data} />}
1662
+ * </div>
1663
+ * );
1664
+ * ```
1665
+ */
1666
+ declare function useAsync<T, Args extends unknown[] = []>(asyncFunction: (...args: Args) => Promise<T>, options?: UseAsyncOptions<T>): UseAsyncReturn<T, Args>;
1667
+
1668
+ type FetchStatus = 'idle' | 'loading' | 'success' | 'error';
1669
+ interface UseFetchOptions<T> extends Omit<RequestInit, 'signal'> {
1670
+ /** Execute immediately (default: true) */
1671
+ immediate?: boolean;
1672
+ /** Initial data value */
1673
+ initialData?: T;
1674
+ /** Transform response before setting data */
1675
+ transform?: (response: Response) => Promise<T>;
1676
+ /** Number of retry attempts (default: 0) */
1677
+ retries?: number;
1678
+ /** Retry delay in ms (default: 1000) */
1679
+ retryDelay?: number;
1680
+ /** Callback on success */
1681
+ onSuccess?: (data: T) => void;
1682
+ /** Callback on error */
1683
+ onError?: (error: Error) => void;
1684
+ /** Abort previous request (default: true) */
1685
+ abortPrevious?: boolean;
1686
+ }
1687
+ interface UseFetchReturn<T> {
1688
+ /** Fetched data */
1689
+ data: T | undefined;
1690
+ /** Error if any */
1691
+ error: Error | null;
1692
+ /** Current status */
1693
+ status: FetchStatus;
1694
+ /** Loading state */
1695
+ isLoading: boolean;
1696
+ /** Success state */
1697
+ isSuccess: boolean;
1698
+ /** Error state */
1699
+ isError: boolean;
1700
+ /** Refetch data */
1701
+ refetch: () => Promise<void>;
1702
+ /** Abort current request */
1703
+ abort: () => void;
1704
+ }
1705
+ /**
1706
+ * useFetch
1707
+ *
1708
+ * A powerful hook for data fetching with abort, retry, and race condition handling.
1709
+ *
1710
+ * @param url - URL to fetch
1711
+ * @param options - Fetch and hook options
1712
+ * @returns Object with data, status, and control functions
1713
+ *
1714
+ * @example
1715
+ * ```tsx
1716
+ * interface User { id: number; name: string; }
1717
+ *
1718
+ * const {
1719
+ * data,
1720
+ * isLoading,
1721
+ * error,
1722
+ * refetch,
1723
+ * abort
1724
+ * } = useFetch<User[]>('/api/users', {
1725
+ * retries: 3,
1726
+ * retryDelay: 2000,
1727
+ * immediate: true,
1728
+ * transform: async (res) => {
1729
+ * const json = await res.json();
1730
+ * return json.users; // Transform response structure
1731
+ * },
1732
+ * onSuccess: (data) => console.log('Fetched:', data.length),
1733
+ * onError: (err) => console.error('Failed:', err)
1734
+ * });
1735
+ *
1736
+ * if (isLoading) return <div>Loading... <button onClick={abort}>Cancel</button></div>;
1737
+ * if (error) return <ErrorDisplay message={error.message} onRetry={refetch} />;
1738
+ *
1739
+ * return (
1740
+ * <ul>
1741
+ * {data?.map(user => (
1742
+ * <li key={user.id}>{user.name}</li>
1743
+ * ))}
1744
+ * </ul>
1745
+ * );
1746
+ * ```
1747
+ */
1748
+ declare function useFetch<T = unknown>(url: string | null, options?: UseFetchOptions<T>): UseFetchReturn<T>;
1749
+
1750
+ type ScriptStatus = 'idle' | 'loading' | 'ready' | 'error';
1751
+ interface UseScriptOptions {
1752
+ /** Load script immediately (default: true) */
1753
+ immediate?: boolean;
1754
+ /** Remove script on unmount (default: false) */
1755
+ removeOnUnmount?: boolean;
1756
+ /** Script attributes */
1757
+ attributes?: Record<string, string>;
1758
+ }
1759
+ interface UseScriptReturn {
1760
+ /** Script loading status */
1761
+ status: ScriptStatus;
1762
+ /** Whether script is loading */
1763
+ isLoading: boolean;
1764
+ /** Whether script is ready */
1765
+ isReady: boolean;
1766
+ /** Whether script failed to load */
1767
+ isError: boolean;
1768
+ /** Load the script manually */
1769
+ load: () => void;
1770
+ }
1771
+ /**
1772
+ * useScript
1773
+ *
1774
+ * A hook for dynamically loading external scripts.
1775
+ *
1776
+ * @param src - Script source URL
1777
+ * @param options - Configuration options
1778
+ * @returns Object with script status and controls
1779
+ *
1780
+ * @example
1781
+ * ```tsx
1782
+ * const { isReady, isLoading, isError } = useScript(
1783
+ * 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY'
1784
+ * );
1785
+ *
1786
+ * if (isLoading) return <LoadingSpinner />;
1787
+ * if (isError) return <ErrorMessage />;
1788
+ * if (isReady) return <GoogleMap />;
1789
+ * ```
1790
+ */
1791
+ declare function useScript(src: string, options?: UseScriptOptions): UseScriptReturn;
1792
+
1793
+ type WorkerFunction<T, R> = (input: T) => R;
1794
+ type WorkerStatus = 'idle' | 'running' | 'error' | 'success';
1795
+ interface UseWorkerReturn<T, R> {
1796
+ result: R | undefined;
1797
+ error: Error | null;
1798
+ status: WorkerStatus;
1799
+ run: (input: T) => void;
1800
+ terminate: () => void;
1801
+ }
1802
+ /**
1803
+ * useWorker
1804
+ *
1805
+ * A hook to offload heavy computation to a Web Worker.
1806
+ *
1807
+ * @param workerScript - URL string or Function code to run in worker
1808
+ */
1809
+ declare function useWorker<T = any, R = any>(workerScript: string | WorkerFunction<T, R>): UseWorkerReturn<T, R>;
1810
+
1811
+ interface UseIndexedDBReturn<T> {
1812
+ value: T | undefined;
1813
+ set: (value: T) => Promise<void>;
1814
+ remove: () => Promise<void>;
1815
+ error: Error | null;
1816
+ isLoading: boolean;
1817
+ }
1818
+ /**
1819
+ * useIndexedDB
1820
+ *
1821
+ * A simple hook to persist data in IndexedDB.
1822
+ * Suitable for storing large objects/blobs that LocalStorage can't handle.
1823
+ */
1824
+ declare function useIndexedDB<T = any>(dbName: string, storeName: string, key: string): UseIndexedDBReturn<T>;
1825
+
1826
+ interface UseHistoryOptions {
1827
+ /** Maximum history size (default: 100) */
1828
+ maxSize?: number;
1829
+ }
1830
+ interface UseHistoryReturn<T> {
1831
+ /** Current value */
1832
+ value: T;
1833
+ /** Set new value (adds to history) */
1834
+ set: (value: T | ((prev: T) => T)) => void;
1835
+ /** Undo to previous value */
1836
+ undo: () => void;
1837
+ /** Redo to next value */
1838
+ redo: () => void;
1839
+ /** Clear history and set new value */
1840
+ reset: (value: T) => void;
1841
+ /** Whether undo is available */
1842
+ canUndo: boolean;
1843
+ /** Whether redo is available */
1844
+ canRedo: boolean;
1845
+ /** History array (past values) */
1846
+ history: T[];
1847
+ /** Current position in history */
1848
+ position: number;
1849
+ /** Go to specific position in history */
1850
+ go: (position: number) => void;
1851
+ }
1852
+ /**
1853
+ * useHistory
1854
+ *
1855
+ * A hook for managing state with undo/redo functionality.
1856
+ *
1857
+ * @param initialValue - Initial state value
1858
+ * @param options - Configuration options
1859
+ * @returns Object with value, history controls, and state
1860
+ *
1861
+ * @example
1862
+ * ```tsx
1863
+ * const { value, set, undo, redo, canUndo, canRedo } = useHistory('');
1864
+ *
1865
+ * return (
1866
+ * <div>
1867
+ * <input value={value} onChange={(e) => set(e.target.value)} />
1868
+ * <button onClick={undo} disabled={!canUndo}>Undo</button>
1869
+ * <button onClick={redo} disabled={!canRedo}>Redo</button>
1870
+ * </div>
1871
+ * );
1872
+ * ```
1873
+ */
1874
+ declare function useHistory<T>(initialValue: T, options?: UseHistoryOptions): UseHistoryReturn<T>;
1875
+
1876
+ interface UseStepOptions {
1877
+ /** Initial step (default: 0) */
1878
+ initialStep?: number;
1879
+ /** Total number of steps */
1880
+ maxStep: number;
1881
+ }
1882
+ interface UseStepReturn {
1883
+ /** Current step (0-indexed) */
1884
+ currentStep: number;
1885
+ /** Current step (1-indexed for display) */
1886
+ step: number;
1887
+ /** Go to next step */
1888
+ next: () => void;
1889
+ /** Go to previous step */
1890
+ prev: () => void;
1891
+ /** Go to specific step */
1892
+ goTo: (step: number) => void;
1893
+ /** Reset to initial step */
1894
+ reset: () => void;
1895
+ /** Whether at first step */
1896
+ isFirst: boolean;
1897
+ /** Whether at last step */
1898
+ isLast: boolean;
1899
+ /** Progress percentage (0-100) */
1900
+ progress: number;
1901
+ /** Total number of steps */
1902
+ totalSteps: number;
1903
+ /** Whether a specific step is completed */
1904
+ isStepComplete: (step: number) => boolean;
1905
+ }
1906
+ /**
1907
+ * useStep
1908
+ *
1909
+ * A hook for managing wizard/stepper flow.
1910
+ *
1911
+ * @param options - Configuration options
1912
+ * @returns Object with step state and control functions
1913
+ *
1914
+ * @example
1915
+ * ```tsx
1916
+ * const steps = ['Personal Info', 'Address', 'Payment', 'Confirm'];
1917
+ *
1918
+ * const { currentStep, step, next, prev, isFirst, isLast, progress } = useStep({
1919
+ * maxStep: steps.length,
1920
+ * });
1921
+ *
1922
+ * return (
1923
+ * <div>
1924
+ * <ProgressBar value={progress} />
1925
+ * <h2>Step {step}: {steps[currentStep]}</h2>
1926
+ * {currentStep === 0 && <PersonalInfoForm />}
1927
+ * {currentStep === 1 && <AddressForm />}
1928
+ * {currentStep === 2 && <PaymentForm />}
1929
+ * {currentStep === 3 && <ConfirmForm />}
1930
+ * <div>
1931
+ * <button onClick={prev} disabled={isFirst}>Back</button>
1932
+ * <button onClick={next} disabled={isLast}>Next</button>
1933
+ * </div>
1934
+ * </div>
1935
+ * );
1936
+ * ```
1937
+ */
1938
+ declare function useStep(options: UseStepOptions): UseStepReturn;
1939
+
1940
+ interface UsePaginationOptions {
1941
+ /** Total number of items */
1942
+ totalItems: number;
1943
+ /** Items per page (default: 10) */
1944
+ pageSize?: number;
1945
+ /** Initial page (1-indexed, default: 1) */
1946
+ initialPage?: number;
1947
+ /** Number of sibling pages to show (default: 1) */
1948
+ siblings?: number;
1949
+ }
1950
+ interface UsePaginationReturn {
1951
+ /** Current page (1-indexed) */
1952
+ page: number;
1953
+ /** Total number of pages */
1954
+ totalPages: number;
1955
+ /** Items per page */
1956
+ pageSize: number;
1957
+ /** Go to next page */
1958
+ next: () => void;
1959
+ /** Go to previous page */
1960
+ prev: () => void;
1961
+ /** Go to specific page */
1962
+ goTo: (page: number) => void;
1963
+ /** Go to first page */
1964
+ first: () => void;
1965
+ /** Go to last page */
1966
+ last: () => void;
1967
+ /** Whether at first page */
1968
+ isFirst: boolean;
1969
+ /** Whether at last page */
1970
+ isLast: boolean;
1971
+ /** Start index for current page (0-indexed) */
1972
+ startIndex: number;
1973
+ /** End index for current page (0-indexed, exclusive) */
1974
+ endIndex: number;
1975
+ /** Page range for pagination UI */
1976
+ range: (number | 'dots')[];
1977
+ /** Set page size */
1978
+ setPageSize: (size: number) => void;
1979
+ }
1980
+ /**
1981
+ * usePagination
1982
+ *
1983
+ * A hook for managing pagination state and logic.
1984
+ *
1985
+ * @param options - Configuration options
1986
+ * @returns Object with pagination state and controls
1987
+ *
1988
+ * @example
1989
+ * ```tsx
1990
+ * const { page, totalPages, next, prev, range, isFirst, isLast } = usePagination({
1991
+ * totalItems: 100,
1992
+ * pageSize: 10,
1993
+ * });
1994
+ *
1995
+ * return (
1996
+ * <div>
1997
+ * <button onClick={prev} disabled={isFirst}>Previous</button>
1998
+ *
1999
+ * {range.map((item, index) =>
2000
+ * item === 'dots' ? (
2001
+ * <span key={index}>...</span>
2002
+ * ) : (
2003
+ * <button
2004
+ * key={index}
2005
+ * onClick={() => goTo(item)}
2006
+ * className={item === page ? 'active' : ''}
2007
+ * >
2008
+ * {item}
2009
+ * </button>
2010
+ * )
2011
+ * )}
2012
+ *
2013
+ * <button onClick={next} disabled={isLast}>Next</button>
2014
+ * </div>
2015
+ * );
2016
+ * ```
2017
+ */
2018
+ declare function usePagination(options: UsePaginationOptions): UsePaginationReturn;
2019
+
2020
+ interface MachineState<S> {
2021
+ value: S;
2022
+ context?: any;
2023
+ }
2024
+ interface MachineConfig<S extends string, E extends string> {
2025
+ initial: S;
2026
+ states: {
2027
+ [key in S]: {
2028
+ on?: {
2029
+ [key in E]?: S | {
2030
+ target: S;
2031
+ action?: () => void;
2032
+ };
2033
+ };
2034
+ effect?: () => (() => void) | void;
2035
+ };
2036
+ };
2037
+ }
2038
+ /**
2039
+ * useMachine
2040
+ *
2041
+ * A lightweight state machine hook.
2042
+ */
2043
+ declare function useMachine<S extends string, E extends string>(config: MachineConfig<S, E>): [S, (event: E) => void];
2044
+
2045
+ interface UseVirtualListOptions {
2046
+ /** Height of individual item */
2047
+ itemHeight: number;
2048
+ /** Total number of items */
2049
+ itemCount: number;
2050
+ /** Height of scrollable container (viewport) */
2051
+ containerHeight: number;
2052
+ /** Number of items to render outside viewport (buffer) */
2053
+ overscan?: number;
2054
+ }
2055
+ interface VirtualItem {
2056
+ index: number;
2057
+ style: {
2058
+ position: 'absolute';
2059
+ top: number;
2060
+ height: number;
2061
+ width: '100%';
2062
+ };
2063
+ }
2064
+ interface UseVirtualListReturn {
2065
+ items: VirtualItem[];
2066
+ totalHeight: number;
2067
+ onScroll: (event: UIEvent<HTMLElement>) => void;
2068
+ }
2069
+ /**
2070
+ * useVirtualList
2071
+ *
2072
+ * A hook for efficiently rendering large lists by only rendering visible items.
2073
+ * Assumes fixed height items.
2074
+ */
2075
+ declare function useVirtualList(options: UseVirtualListOptions): UseVirtualListReturn;
2076
+
2077
+ interface UseInfiniteScrollOptions {
2078
+ /** Threshold for intersection (0.0 - 1.0) */
2079
+ threshold?: number;
2080
+ /** Root margin for intersection */
2081
+ rootMargin?: string;
2082
+ /** Whether loading is currently in progress */
2083
+ isLoading?: boolean;
2084
+ /** Whether there is more data to load */
2085
+ hasMore?: boolean;
2086
+ /** Disable the observer */
2087
+ disabled?: boolean;
2088
+ }
2089
+ /**
2090
+ * useInfiniteScroll
2091
+ *
2092
+ * A hook that triggers a callback when an element (target) becomes visible.
2093
+ * Useful for infinite scrolling.
2094
+ *
2095
+ * @param onLoadMore - Function to call when target is visible
2096
+ * @param options - Configuration options
2097
+ * @returns A ref to attach to the sentinel element (bottom of list)
2098
+ */
2099
+ declare function useInfiniteScroll(onLoadMore: () => void, options?: UseInfiniteScrollOptions): MutableRefObject<HTMLDivElement | null>;
2100
+
2101
+ interface AnthropicMessage {
2102
+ role: 'user' | 'assistant';
2103
+ content: string;
2104
+ }
2105
+ interface UseAnthropicOptions {
2106
+ apiKey?: string;
2107
+ model?: string;
2108
+ maxTokens?: number;
2109
+ temperature?: number;
2110
+ }
2111
+ declare function useAnthropic(options?: UseAnthropicOptions): {
2112
+ chat: (messages: AnthropicMessage[]) => Promise<any>;
2113
+ response: string | null;
2114
+ loading: boolean;
2115
+ error: any;
2116
+ };
2117
+
2118
+ interface UseEmbeddingsReturn {
2119
+ embeddings: number[][] | null;
2120
+ loading: boolean;
2121
+ error: any;
2122
+ generate: (texts: string[]) => Promise<number[][]>;
2123
+ }
2124
+ /**
2125
+ * useEmbeddings
2126
+ *
2127
+ * Generic hook to manage embedding generation.
2128
+ * The actual provider logic is passed via the `fetcher` callback.
2129
+ */
2130
+ declare function useEmbeddings(fetcher: (texts: string[]) => Promise<number[][]>): UseEmbeddingsReturn;
2131
+
2132
+ interface GeminiPart {
2133
+ text: string;
2134
+ }
2135
+ interface GeminiContent {
2136
+ role: 'user' | 'model';
2137
+ parts: GeminiPart[];
2138
+ }
2139
+ interface UseGeminiOptions {
2140
+ apiKey?: string;
2141
+ model?: string;
2142
+ }
2143
+ declare function useGemini(options?: UseGeminiOptions): {
2144
+ chat: (contents: GeminiContent[]) => Promise<any>;
2145
+ response: string | null;
2146
+ loading: boolean;
2147
+ error: any;
2148
+ };
2149
+
2150
+ interface UseLLMStreamOptions {
2151
+ onToken?: (token: string, fullText: string) => void;
2152
+ onComplete?: (fullText: string) => void;
2153
+ onError?: (error: any) => void;
2154
+ }
2155
+ interface UseLLMStreamReturn {
2156
+ stream: (url: string, fetchOptions?: RequestInit) => Promise<void>;
2157
+ cancel: () => void;
2158
+ data: string;
2159
+ loading: boolean;
2160
+ error: any;
2161
+ }
2162
+ /**
2163
+ * useLLMStream
2164
+ *
2165
+ * A hook for handling streaming responses (Server-Sent Events) from LLM APIs.
2166
+ * Simplifies the process of reading chunks and updating UI in real-time.
2167
+ *
2168
+ * @param options - Callbacks for token updates, completion, and errors
2169
+ * @returns Object with stream initiator, canceler, and current data
2170
+ *
2171
+ * @example
2172
+ * ```tsx
2173
+ * const { stream, data, loading, error } = useLLMStream({
2174
+ * onToken: (token) => console.log('Received token:', token),
2175
+ * onComplete: (fullText) => console.log('Stream finished:', fullText)
2176
+ * });
2177
+ *
2178
+ * const handleAsk = async (prompt: string) => {
2179
+ * await stream('/api/chat', {
2180
+ * method: 'POST',
2181
+ * body: JSON.stringify({ prompt }),
2182
+ * headers: { 'Content-Type': 'application/json' }
2183
+ * });
2184
+ * };
2185
+ *
2186
+ * return (
2187
+ * <div className="chat-box">
2188
+ * <div className="response">
2189
+ * {data || (loading ? 'Generating...' : 'Waiting for prompt...')}
2190
+ * </div>
2191
+ *
2192
+ * <button onClick={() => handleAsk('Write a React hook')}>
2193
+ * Ask AI
2194
+ * </button>
2195
+ *
2196
+ * {error && <div className="error">{error.message}</div>}
2197
+ * </div>
2198
+ * );
2199
+ * ```
2200
+ */
2201
+ declare function useLLMStream(options?: UseLLMStreamOptions): UseLLMStreamReturn;
2202
+
2203
+ interface Message {
2204
+ role: 'system' | 'user' | 'assistant';
2205
+ content: string;
2206
+ }
2207
+ interface UseOpenAIOptions {
2208
+ apiKey?: string;
2209
+ apiBase?: string;
2210
+ model?: string;
2211
+ temperature?: number;
2212
+ stream?: boolean;
2213
+ }
2214
+ declare function useOpenAI(options?: UseOpenAIOptions): {
2215
+ chat: (messages: Message[]) => Promise<any>;
2216
+ response: string | null;
2217
+ loading: boolean;
2218
+ error: any;
2219
+ };
2220
+
2221
+ interface RAGDocument {
2222
+ id: string;
2223
+ content: string;
2224
+ metadata?: Record<string, any>;
2225
+ }
2226
+ interface UseRAGOptions {
2227
+ retrieve: (query: string) => Promise<RAGDocument[]>;
2228
+ generate: (prompt: string, context: RAGDocument[]) => Promise<string>;
2229
+ }
2230
+ declare function useRAG(options: UseRAGOptions): {
2231
+ ask: (query: string) => Promise<string>;
2232
+ answer: string | null;
2233
+ retrievedDocs: RAGDocument[];
2234
+ loading: boolean;
2235
+ error: any;
2236
+ };
2237
+
2238
+ interface UseSearchHighlightOptions {
2239
+ highlightTag?: string;
2240
+ highlightClass?: string;
2241
+ caseSensitive?: boolean;
2242
+ }
2243
+ interface HighlightPart {
2244
+ text: string;
2245
+ isMatch: boolean;
2246
+ }
2247
+ /**
2248
+ * useSearchHighlight
2249
+ *
2250
+ * Splits text into parts based on a search query.
2251
+ */
2252
+ declare function useSearchHighlight(text: string, query: string, options?: UseSearchHighlightOptions): HighlightPart[];
2253
+
2254
+ type Vector = number[];
2255
+ interface SemanticResult<T> {
2256
+ item: T;
2257
+ score: number;
2258
+ }
2259
+ /**
2260
+ * useSemanticSearch
2261
+ *
2262
+ * Performs client-side vector similarity search (Cosine Similarity).
2263
+ * Assumes embeddings are already generated.
2264
+ */
2265
+ declare function useSemanticSearch<T>(queryEmbedding: Vector | null, items: T[], getItemEmbedding: (item: T) => Vector, topK?: number): SemanticResult<T>[];
2266
+
2267
+ interface UseSTTOptions {
2268
+ continuous?: boolean;
2269
+ interimResults?: boolean;
2270
+ lang?: string;
2271
+ onResult?: (transcript: string) => void;
2272
+ onError?: (error: any) => void;
2273
+ onEnd?: () => void;
2274
+ }
2275
+ interface UseSTTReturn {
2276
+ listen: () => void;
2277
+ stop: () => void;
2278
+ abort: () => void;
2279
+ listening: boolean;
2280
+ transcript: string;
2281
+ supported: boolean;
2282
+ }
2283
+ /**
2284
+ * useSTT
2285
+ *
2286
+ * A hook for Speech-to-Text (Recognition) integration.
2287
+ * Provides real-time transcription with controls for continuous or one-shot listening.
2288
+ *
2289
+ * @param options - Configuration options (lang, continuous, interimResults, etc.)
2290
+ * @returns Object with recognition controls and transcription state
2291
+ *
2292
+ * @example
2293
+ * ```tsx
2294
+ * const { listen, stop, transcript, listening, supported } = useSTT({
2295
+ * lang: 'en-US',
2296
+ * continuous: true,
2297
+ * interimResults: true
2298
+ * });
2299
+ *
2300
+ * if (!supported) return <p>Speech Recognition not supported in this browser</p>;
2301
+ *
2302
+ * return (
2303
+ * <div className="stt-container">
2304
+ * <div className="controls">
2305
+ * <button onClick={listen} disabled={listening}>Start Listening</button>
2306
+ * <button onClick={stop} disabled={!listening}>Stop</button>
2307
+ * </div>
2308
+ *
2309
+ * <div className={`status ${listening ? 'active' : ''}`}>
2310
+ * {listening ? '🎤 Listening...' : 'Mic Off'}
2311
+ * </div>
2312
+ *
2313
+ * <div className="transcript">
2314
+ * <h3>Transcript:</h3>
2315
+ * <p>{transcript || 'Start speaking to see transcription...'}</p>
2316
+ * </div>
2317
+ * </div>
2318
+ * );
2319
+ * ```
2320
+ */
2321
+ declare function useSTT(options?: UseSTTOptions): UseSTTReturn;
2322
+
2323
+ interface UseTTSOptions {
2324
+ volume?: number;
2325
+ rate?: number;
2326
+ pitch?: number;
2327
+ voiceURI?: string;
2328
+ onStart?: () => void;
2329
+ onEnd?: () => void;
2330
+ onError?: (event: SpeechSynthesisErrorEvent) => void;
2331
+ }
2332
+ /**
2333
+ * useTTS
2334
+ *
2335
+ * A hook for Text-to-Speech (Synthesis) integration.
2336
+ * Wraps the Web Speech API with a React-friendly interface.
2337
+ *
2338
+ * @param options - Configuration options (volume, rate, voice, etc.)
2339
+ * @returns Object with speech controls and state
2340
+ *
2341
+ * @example
2342
+ * ```tsx
2343
+ * const { speak, cancel, speaking, supported, voices } = useTTS({
2344
+ * volume: 1,
2345
+ * rate: 1,
2346
+ * });
2347
+ *
2348
+ * if (!supported) return <p>Text-to-Speech not supported</p>;
2349
+ *
2350
+ * return (
2351
+ * <div>
2352
+ * <textarea id="text-input" defaultValue="Hello world" />
2353
+ *
2354
+ * <div className="controls">
2355
+ * <button onClick={() => speak(document.querySelector('textarea')?.value || '')}>
2356
+ * Speak
2357
+ * </button>
2358
+ * <button onClick={cancel} disabled={!speaking}>
2359
+ * Stop
2360
+ * </button>
2361
+ * </div>
2362
+ *
2363
+ * <div className="status">
2364
+ * {speaking ? '🔊 Speaking...' : 'Idle'}
2365
+ * </div>
2366
+ *
2367
+ * <div className="voices">
2368
+ * <p>Available Voices: {voices.length}</p>
2369
+ * </div>
2370
+ * </div>
2371
+ * );
2372
+ * ```
2373
+ */
2374
+ declare function useTTS(options?: UseTTSOptions): {
2375
+ speak: (text: string, overrideOptions?: UseTTSOptions) => void;
2376
+ cancel: () => void;
2377
+ speaking: boolean;
2378
+ supported: boolean;
2379
+ voices: SpeechSynthesisVoice[];
2380
+ };
2381
+
2382
+ type AnimationCallback = (time: number, deltaTime: number) => void;
2383
+ declare function useAnimate(callback: AnimationCallback, running?: boolean): void;
2384
+
2385
+ interface UseMediaRefReturn<T extends HTMLMediaElement> {
2386
+ ref: React.RefObject<T>;
2387
+ controls: {
2388
+ play: () => Promise<void>;
2389
+ pause: () => void;
2390
+ toggle: () => void;
2391
+ seek: (time: number) => void;
2392
+ mute: () => void;
2393
+ unmute: () => void;
2394
+ setVolume: (val: number) => void;
2395
+ };
2396
+ state: {
2397
+ playing: boolean;
2398
+ paused: boolean;
2399
+ muted: boolean;
2400
+ volume: number;
2401
+ time: number;
2402
+ duration: number;
2403
+ buffered: number;
2404
+ waiting: boolean;
2405
+ ended: boolean;
2406
+ };
2407
+ }
2408
+ /**
2409
+ * useVideoRef
2410
+ *
2411
+ * A hook providing a declarative interface for HTML5 Video elements.
2412
+ * Returns a ref, easy-to-use controls, and real-time playback state.
2413
+ *
2414
+ * @returns Object with ref, controls (play, pause, volume), and state (time, duration, etc.)
2415
+ *
2416
+ * @example
2417
+ * ```tsx
2418
+ * const { ref, controls, state } = useVideoRef();
2419
+ *
2420
+ * return (
2421
+ * <div className="player">
2422
+ * <video ref={ref} src="movie.mp4" width="600" />
2423
+ *
2424
+ * <div className="ui">
2425
+ * <button onClick={controls.toggle}>
2426
+ * {state.paused ? '▶️ Play' : '⏸️ Pause'}
2427
+ * </button>
2428
+ *
2429
+ * <input
2430
+ * type="range"
2431
+ * min="0"
2432
+ * max={state.duration}
2433
+ * value={state.time}
2434
+ * onChange={(e) => controls.seek(Number(e.target.value))}
2435
+ * />
2436
+ *
2437
+ * <span>{Math.round(state.time)}s / {Math.round(state.duration)}s</span>
2438
+ *
2439
+ * <button onClick={controls.mute}>
2440
+ * {state.muted ? '🔈' : '🔊'}
2441
+ * </button>
2442
+ * </div>
2443
+ * </div>
2444
+ * );
2445
+ * ```
2446
+ */
2447
+ declare function useVideoRef(): UseMediaRefReturn<HTMLVideoElement>;
2448
+
2449
+ /**
2450
+ * useAudioRef
2451
+ *
2452
+ * Helper for audio elements.
2453
+ * Provides controls (play, pause, seek, volume) and state (time, duration, buffered).
2454
+ *
2455
+ * @returns Object with ref, controls, and state
2456
+ *
2457
+ * @example
2458
+ * ```tsx
2459
+ * const { ref, controls, state } = useAudioRef();
2460
+ *
2461
+ * return (
2462
+ * <div>
2463
+ * <audio ref={ref} src="song.mp3" />
2464
+ * <button onClick={controls.toggle}>
2465
+ * {state.paused ? 'Play' : 'Pause'}
2466
+ * </button>
2467
+ * </div>
2468
+ * );
2469
+ * ```
2470
+ */
2471
+ declare function useAudioRef(): UseMediaRefReturn<HTMLAudioElement>;
2472
+
2473
+ interface UseCanvasOptions {
2474
+ width?: number;
2475
+ height?: number;
2476
+ animate?: (context: CanvasRenderingContext2D, frameCount: number) => void;
2477
+ }
2478
+ declare function useCanvas(options?: UseCanvasOptions): react.RefObject<HTMLCanvasElement>;
2479
+
2480
+ declare function useFrameRate(running?: boolean): number;
2481
+
2482
+ interface UseLottieOptions extends Omit<AnimationConfig, 'container'> {
2483
+ path?: string;
2484
+ animationData?: any;
2485
+ speed?: number;
2486
+ direction?: 1 | -1;
2487
+ isPlaying?: boolean;
2488
+ }
2489
+ declare function useLottie(containerRef: React.RefObject<HTMLElement>, options: UseLottieOptions): AnimationItem | undefined;
2490
+
2491
+ interface UseParallaxOptions {
2492
+ speed?: number;
2493
+ axis?: 'y' | 'x';
2494
+ }
2495
+ /**
2496
+ * useParallax
2497
+ *
2498
+ * Returns a style object with transform to create a parallax effect.
2499
+ * Needs to be attached to the element style.
2500
+ */
2501
+ declare function useParallax(options?: UseParallaxOptions): {
2502
+ ref: react.RefObject<HTMLElement>;
2503
+ style: {
2504
+ transform: string;
2505
+ willChange: string;
2506
+ };
2507
+ };
2508
+
2509
+ interface SpringConfig {
2510
+ stiffness?: number;
2511
+ damping?: number;
2512
+ mass?: number;
2513
+ }
2514
+ interface UseSpringCoreOptions extends SpringConfig {
2515
+ initialValue?: number;
2516
+ }
2517
+ /**
2518
+ * useSpringCore
2519
+ *
2520
+ * A simplified spring physics implementation using a semi-implicit Euler integration
2521
+ * or basic RK4 (simplified here for performant React state updates).
2522
+ *
2523
+ * Note: For high frequency animation, use useAnimate directly with refs.
2524
+ * This hook is for state-based spring values.
2525
+ */
2526
+ declare function useSpringCore(targetValue: number, options?: UseSpringCoreOptions): number;
2527
+
2528
+ interface UseSVGAnimationOptions {
2529
+ duration?: number;
2530
+ delay?: number;
2531
+ easing?: (t: number) => number;
2532
+ }
2533
+ declare function useSVGAnimation(length: number, options?: UseSVGAnimationOptions): {
2534
+ strokeDasharray: number;
2535
+ strokeDashoffset: number;
2536
+ };
2537
+
2538
+ interface UseThreeJSOptions {
2539
+ init?: (scene: THREE.Scene, camera: THREE.PerspectiveCamera, renderer: THREE.WebGLRenderer) => void;
2540
+ animate?: (time: number, scene: THREE.Scene, camera: THREE.PerspectiveCamera) => void;
2541
+ resize?: boolean;
2542
+ }
2543
+ declare function useThreeJS(containerRef: React.RefObject<HTMLElement>, options?: UseThreeJSOptions): {
2544
+ scene: THREE.Scene<THREE.Object3DEventMap> | undefined;
2545
+ camera: THREE.PerspectiveCamera | undefined;
2546
+ renderer: THREE.WebGLRenderer | undefined;
2547
+ };
2548
+
2549
+ declare function useBroadcastChannel<T>(channelName: string): {
2550
+ postMessage: (message: T) => void;
2551
+ lastMessage: T | null;
2552
+ };
2553
+
2554
+ interface UseCalendarOptions {
2555
+ initialDate?: Date;
2556
+ }
2557
+ declare function useCalendar(options?: UseCalendarOptions): {
2558
+ date: Date;
2559
+ daysInMonth: number;
2560
+ firstDayOfMonth: number;
2561
+ nextMonth: () => void;
2562
+ prevMonth: () => void;
2563
+ setHeader: react.Dispatch<react.SetStateAction<Date>>;
2564
+ };
2565
+
2566
+ interface UseDragAndDropOptions {
2567
+ onDrop?: (files: File[]) => void;
2568
+ accept?: string[];
2569
+ }
2570
+ declare function useDragAndDrop(options?: UseDragAndDropOptions): {
2571
+ ref: react.RefObject<HTMLElement>;
2572
+ isDragging: boolean;
2573
+ };
2574
+
2575
+ interface UseFileProcessingOptions {
2576
+ limit?: number;
2577
+ accept?: string[];
2578
+ }
2579
+ declare function useFileProcessing(options?: UseFileProcessingOptions): {
2580
+ process: (file: File) => Promise<string>;
2581
+ processing: boolean;
2582
+ error: string | null;
2583
+ };
2584
+
2585
+ interface UseFormOptions<T> {
2586
+ /** Initial values for the form fields */
2587
+ initialValues: T;
2588
+ /** Callback function when form is submitted successfully */
2589
+ onSubmit: (values: T) => void | Promise<void>;
2590
+ /** Validation function that returns an object of error messages */
2591
+ validate?: (values: T) => Record<keyof T, string> | Promise<Record<keyof T, string>>;
2592
+ }
2593
+ interface UseFormReturn<T> {
2594
+ /** Current form values */
2595
+ values: T;
2596
+ /** Current validation errors */
2597
+ errors: Record<keyof T, string>;
2598
+ /** Touched fields status */
2599
+ touched: Record<keyof T, boolean>;
2600
+ /** Whether the form is currently submitting */
2601
+ isSubmitting: boolean;
2602
+ /** Handle input change events */
2603
+ handleChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => void;
2604
+ /** Handle input blur events */
2605
+ handleBlur: (e: React.FocusEvent<any>) => void;
2606
+ /** Handle form submission */
2607
+ handleSubmit: (e?: FormEvent) => Promise<void>;
2608
+ /** Manually set a field value */
2609
+ setFieldValue: (name: keyof T, value: any) => void;
2610
+ /** Manually set all form values */
2611
+ setValues: React.Dispatch<React.SetStateAction<T>>;
2612
+ }
2613
+ /**
2614
+ * useForm
2615
+ *
2616
+ * A simple yet powerful hook for managing form state, validation, and submission.
2617
+ * It handles values, errors, touched states, and provides handlers for inputs and forms.
2618
+ *
2619
+ * @param options - Configuration options for the form
2620
+ * @returns Object with form state and handlers
2621
+ *
2622
+ * @example
2623
+ * ```tsx
2624
+ * interface LoginForm {
2625
+ * email: string;
2626
+ * password: string;
2627
+ * }
2628
+ *
2629
+ * const {
2630
+ * values,
2631
+ * errors,
2632
+ * handleChange,
2633
+ * handleSubmit,
2634
+ * isSubmitting
2635
+ * } = useForm<LoginForm>({
2636
+ * initialValues: { email: '', password: '' },
2637
+ *
2638
+ * validate: (values) => {
2639
+ * const errors: Partial<Record<keyof LoginForm, string>> = {};
2640
+ * if (!values.email) errors.email = 'Email required';
2641
+ * if (!values.password) errors.password = 'Password required';
2642
+ * return errors as Record<keyof LoginForm, string>;
2643
+ * },
2644
+ *
2645
+ * onSubmit: async (values) => {
2646
+ * console.log('Logging in...', values);
2647
+ * await new Promise(r => setTimeout(r, 1000));
2648
+ * }
2649
+ * });
2650
+ *
2651
+ * return (
2652
+ * <form onSubmit={handleSubmit} className="login-form">
2653
+ * <div className="field">
2654
+ * <label>Email</label>
2655
+ * <input
2656
+ * name="email"
2657
+ * value={values.email}
2658
+ * onChange={handleChange}
2659
+ * className={errors.email ? 'invalid' : ''}
2660
+ * />
2661
+ * {errors.email && <span className="error">{errors.email}</span>}
2662
+ * </div>
2663
+ *
2664
+ * <div className="field">
2665
+ * <label>Password</label>
2666
+ * <input
2667
+ * name="password"
2668
+ * type="password"
2669
+ * value={values.password}
2670
+ * onChange={handleChange}
2671
+ * />
2672
+ * {errors.password && <span className="error">{errors.password}</span>}
2673
+ * </div>
2674
+ *
2675
+ * <button type="submit" disabled={isSubmitting}>
2676
+ * {isSubmitting ? 'Verifying...' : 'Login'}
2677
+ * </button>
2678
+ * </form>
2679
+ * );
2680
+ * ```
2681
+ */
2682
+ declare function useForm<T extends Record<string, any>>(options: UseFormOptions<T>): UseFormReturn<T>;
2683
+
2684
+ /**
2685
+ * useMarkdown
2686
+ *
2687
+ * Simple parser or wrapper typically.
2688
+ * Here we return a simple compilation function.
2689
+ */
2690
+ declare function useMarkdown(): {
2691
+ compile: (markdown: string) => string;
2692
+ };
2693
+
2694
+ declare function usePDF(): {
2695
+ generate: (content: string, filename?: string) => Promise<boolean>;
2696
+ generating: boolean;
2697
+ };
2698
+
2699
+ /**
2700
+ * usePresence
2701
+ *
2702
+ * Tracks basic user presence (online/idle) or remote presence list logic.
2703
+ */
2704
+ declare function usePresence(heartbeatInterval?: number): {
2705
+ isIdle: boolean;
2706
+ lastActive: number;
2707
+ };
2708
+
2709
+ interface CollabEvent {
2710
+ type: string;
2711
+ payload: any;
2712
+ timestamp: number;
2713
+ userId: string;
2714
+ }
2715
+ /**
2716
+ * useRealtimeCollab
2717
+ *
2718
+ * Logic stub for Operational Transformation or CRDTs.
2719
+ * Simple event log for now.
2720
+ */
2721
+ declare function useRealtimeCollab(userId: string): {
2722
+ events: CollabEvent[];
2723
+ emit: (type: string, payload: any) => void;
2724
+ applyRemote: (event: CollabEvent) => void;
2725
+ };
2726
+
2727
+ type ShortcutHandler = (event: KeyboardEvent) => void;
2728
+ interface ShortcutMap {
2729
+ [key: string]: ShortcutHandler;
2730
+ }
2731
+ /**
2732
+ * useShortcuts
2733
+ *
2734
+ * Defines keyboard shortcuts.
2735
+ * key combo format: 'Control+Shift+K', 'Enter', 'a'
2736
+ */
2737
+ declare function useShortcuts(shortcuts: ShortcutMap): void;
2738
+
2739
+ interface UseSortableOptions<T> {
2740
+ items: T[];
2741
+ onReorder: (newItems: T[]) => void;
2742
+ }
2743
+ declare function useSortable<T>(options: UseSortableOptions<T>): {
2744
+ draggedIndex: number | null;
2745
+ setDraggedIndex: react.Dispatch<react.SetStateAction<number | null>>;
2746
+ move: (fromIndex: number, toIndex: number) => void;
2747
+ };
2748
+
2749
+ type CellValue = string | number | null;
2750
+ type GridData = CellValue[][];
2751
+ interface UseSpreadsheetOptions {
2752
+ rows: number;
2753
+ cols: number;
2754
+ initialData?: GridData;
2755
+ }
2756
+ declare function useSpreadsheet(options: UseSpreadsheetOptions): {
2757
+ data: GridData;
2758
+ setCell: (r: number, c: number, value: CellValue) => void;
2759
+ selectedCell: {
2760
+ r: number;
2761
+ c: number;
2762
+ } | null;
2763
+ setSelectedCell: react.Dispatch<react.SetStateAction<{
2764
+ r: number;
2765
+ c: number;
2766
+ } | null>>;
2767
+ };
2768
+
2769
+ type SortDirection = 'asc' | 'desc';
2770
+ interface Column<T> {
2771
+ /** Property key of the data item */
2772
+ key: keyof T;
2773
+ /** Header label for the column */
2774
+ label: string;
2775
+ /** Whether the column is sortable */
2776
+ sortable?: boolean;
2777
+ }
2778
+ interface UseTableOptions<T> {
2779
+ /** Array of data items to display */
2780
+ data: T[];
2781
+ /** Array of column definitions */
2782
+ columns: Column<T>[];
2783
+ /** Initial sorting configuration */
2784
+ initialSort?: {
2785
+ key: keyof T;
2786
+ direction: SortDirection;
2787
+ };
2788
+ }
2789
+ interface UseTableReturn<T> {
2790
+ /** Sorted and filtered items */
2791
+ items: T[];
2792
+ /** Function to request sorting by a key */
2793
+ requestSort: (key: keyof T) => void;
2794
+ /** Current sort configuration */
2795
+ sortConfig: {
2796
+ key: keyof T;
2797
+ direction: SortDirection;
2798
+ } | null;
2799
+ /** Column definitions (passed through) */
2800
+ columns: Column<T>[];
2801
+ }
2802
+ /**
2803
+ * useTable
2804
+ *
2805
+ * A headless hook for managing table state, including sorting and column definitions.
2806
+ *
2807
+ * @param options - Table configuration options
2808
+ * @returns Object with sorted items and sort controls
2809
+ *
2810
+ * @example
2811
+ * ```tsx
2812
+ * interface User { id: number; name: string; age: number; email: string; }
2813
+ *
2814
+ * const data: User[] = [
2815
+ * { id: 1, name: 'Alice', age: 28, email: 'alice@example.com' },
2816
+ * { id: 2, name: 'Bob', age: 34, email: 'bob@example.com' },
2817
+ * ];
2818
+ *
2819
+ * const columns: Column<User>[] = [
2820
+ * { key: 'name', label: 'Full Name', sortable: true },
2821
+ * { key: 'age', label: 'Age', sortable: true },
2822
+ * { key: 'email', label: 'Email' },
2823
+ * ];
2824
+ *
2825
+ * export function DataTable() {
2826
+ * const { items, requestSort, sortConfig, columns: cols } = useTable({ data, columns });
2827
+ *
2828
+ * return (
2829
+ * <table className="data-table">
2830
+ * <thead>
2831
+ * <tr>
2832
+ * {cols.map(col => (
2833
+ * <th
2834
+ * key={col.key.toString()}
2835
+ * onClick={() => col.sortable && requestSort(col.key)}
2836
+ * className={col.sortable ? 'sortable' : ''}
2837
+ * >
2838
+ * {col.label}
2839
+ * {sortConfig?.key === col.key && (
2840
+ * <span>{sortConfig.direction === 'asc' ? ' ↑' : ' ↓'}</span>
2841
+ * )}
2842
+ * </th>
2843
+ * ))}
2844
+ * </tr>
2845
+ * </thead>
2846
+ * <tbody>
2847
+ * {items.map(user => (
2848
+ * <tr key={user.id}>
2849
+ * <td>{user.name}</td>
2850
+ * <td>{user.age}</td>
2851
+ * <td>{user.email}</td>
2852
+ * </tr>
2853
+ * ))}
2854
+ * </tbody>
2855
+ * </table>
2856
+ * );
2857
+ * }
2858
+ * ```
2859
+ */
2860
+ declare function useTable<T>(options: UseTableOptions<T>): UseTableReturn<T>;
2861
+
2862
+ interface UseWebRTCOptions {
2863
+ iceServers?: RTCIceServer[];
2864
+ }
2865
+ /**
2866
+ * useWebRTC
2867
+ *
2868
+ * Basic wrapper for RTCPeerConnection.
2869
+ */
2870
+ declare function useWebRTC(options?: UseWebRTCOptions): {
2871
+ pc: RTCPeerConnection | null;
2872
+ connectionState: RTCPeerConnectionState;
2873
+ signalingState: RTCSignalingState;
2874
+ };
2875
+
2876
+ interface UseWebSocketOptions {
2877
+ onOpen?: (event: Event) => void;
2878
+ onClose?: (event: CloseEvent) => void;
2879
+ onMessage?: (event: MessageEvent) => void;
2880
+ onError?: (event: Event) => void;
2881
+ reconnect?: boolean;
2882
+ reconnectAttempts?: number;
2883
+ reconnectInterval?: number;
2884
+ }
2885
+ declare function useWebSocket(url: string, options?: UseWebSocketOptions): {
2886
+ send: (data: string | ArrayBuffer | Blob | ArrayBufferView) => void;
2887
+ lastMessage: MessageEvent<any> | null;
2888
+ isConnected: boolean;
2889
+ ws: WebSocket | null;
2890
+ };
2891
+
2892
+ declare function useClickAnywhere(handler: (event: MouseEvent) => void): void;
2893
+
2894
+ interface UseCountdownOptions {
2895
+ countStart: number;
2896
+ intervalMs?: number;
2897
+ isIncrement?: boolean;
2898
+ countStop?: number;
2899
+ }
2900
+ interface UseCountdownReturn {
2901
+ count: number;
2902
+ startCountdown: () => void;
2903
+ stopCountdown: () => void;
2904
+ resetCountdown: () => void;
2905
+ }
2906
+ declare function useCountdown({ countStart, intervalMs, isIncrement, countStop, }: UseCountdownOptions): UseCountdownReturn;
2907
+
2908
+ interface DebounceOptions {
2909
+ leading?: boolean;
2910
+ trailing?: boolean;
2911
+ maxWait?: number;
2912
+ }
2913
+ interface ControlFunctions {
2914
+ cancel: () => void;
2915
+ flush: () => void;
2916
+ }
2917
+ declare function useDebounceCallback<T extends (...args: any[]) => any>(func: T, wait?: number, options?: DebounceOptions): ((...args: Parameters<T>) => void) & ControlFunctions;
2918
+
2919
+ declare function useIsClient(): boolean;
2920
+
2921
+ interface UseListActions<T> {
2922
+ set: (list: T[]) => void;
2923
+ push: (element: T) => void;
2924
+ updateAt: (index: number, element: T) => void;
2925
+ insertAt: (index: number, element: T) => void;
2926
+ update: (predicate: (a: T, b: T) => boolean, newElement: T) => void;
2927
+ removeAt: (index: number) => void;
2928
+ clear: () => void;
2929
+ reset: () => void;
2930
+ }
2931
+ type UseListReturn<T> = [T[], UseListActions<T>];
2932
+ declare function useList<T>(initialList?: T[]): UseListReturn<T>;
2933
+
2934
+ type MapOrEntries<K, V> = Map<K, V> | [K, V][];
2935
+ interface UseMapActions<K, V> {
2936
+ set: (key: K, value: V) => void;
2937
+ setAll: (entries: MapOrEntries<K, V>) => void;
2938
+ remove: (key: K) => void;
2939
+ reset: () => void;
2940
+ }
2941
+ type UseMapReturn<K, V> = [Map<K, V>, UseMapActions<K, V>];
2942
+ /**
2943
+ * useMap
2944
+ *
2945
+ * A specific hook for managing `Map` state in React.
2946
+ * Simplifies adding, removing, and updating Map entries while ensuring immutability.
2947
+ *
2948
+ * @param initialState - Initial Map entries
2949
+ * @returns [map, actions]
2950
+ *
2951
+ * @example
2952
+ * ```tsx
2953
+ * const initialData = [['key1', 'value1'], ['key2', 'value2']] as const;
2954
+ * const [map, mapActions] = useMap<string, string>(initialData);
2955
+ *
2956
+ * return (
2957
+ * <div>
2958
+ * <h3>Map Size: {map.size}</h3>
2959
+ *
2960
+ * <button onClick={() => mapActions.set('newKey', 'newValue')}>
2961
+ * Add/Update Key
2962
+ * </button>
2963
+ * <button onClick={() => mapActions.setAll([['fresh', 'start']])}>
2964
+ * Replace All
2965
+ * </button>
2966
+ * <button onClick={() => mapActions.reset()}>
2967
+ * Reset to Initial
2968
+ * </button>
2969
+ *
2970
+ * <ul>
2971
+ * {Array.from(map.entries()).map(([key, value]) => (
2972
+ * <li key={key}>
2973
+ * <strong>{key}:</strong> {value}
2974
+ * <button onClick={() => mapActions.remove(key)}>X</button>
2975
+ * </li>
2976
+ * ))}
2977
+ * </ul>
2978
+ * </div>
2979
+ * );
2980
+ * ```
2981
+ */
2982
+ declare function useMap<K, V>(initialState?: MapOrEntries<K, V>): UseMapReturn<K, V>;
2983
+
2984
+ interface UseQueueActions<T> {
2985
+ add: (element: T) => void;
2986
+ remove: () => T | undefined;
2987
+ clear: () => void;
2988
+ }
2989
+ type UseQueueReturn<T> = {
2990
+ queue: T[];
2991
+ first: T;
2992
+ last: T;
2993
+ size: number;
2994
+ } & UseQueueActions<T>;
2995
+ /**
2996
+ * useQueue
2997
+ *
2998
+ * A hook for managing a queue data structure (FIFO - First In First Out).
2999
+ *
3000
+ * @param initialValue - Initial elements in the queue
3001
+ * @returns Object with queue state and operations
3002
+ *
3003
+ * @example
3004
+ * ```tsx
3005
+ * const {
3006
+ * add,
3007
+ * remove,
3008
+ * clear,
3009
+ * first,
3010
+ * last,
3011
+ * size,
3012
+ * queue
3013
+ * } = useQueue<string>(['Task 1']);
3014
+ *
3015
+ * return (
3016
+ * <div>
3017
+ * <h2>Task Queue ({size})</h2>
3018
+ *
3019
+ * <div className="controls">
3020
+ * <button onClick={() => add(`Task ${Date.now()}`)}>Add Task</button>
3021
+ * <button onClick={() => remove()} disabled={size === 0}>Process Next</button>
3022
+ * <button onClick={clear}>Clear All</button>
3023
+ * </div>
3024
+ *
3025
+ * <div className="status">
3026
+ * <p>Next: {first || 'None'}</p>
3027
+ * <p>Newest: {last || 'None'}</p>
3028
+ * </div>
3029
+ *
3030
+ * <ul>
3031
+ * {queue.map((task, index) => (
3032
+ * <li key={index}>{task}</li>
3033
+ * ))}
3034
+ * </ul>
3035
+ * </div>
3036
+ * );
3037
+ * ```
3038
+ */
3039
+ /**
3040
+ * useQueue
3041
+ *
3042
+ * A hook for managing a queue data structure (FIFO - First In First Out).
3043
+ *
3044
+ * @param initialValue - Initial elements in the queue
3045
+ * @returns Object with queue state and operations
3046
+ *
3047
+ * @example
3048
+ * ```tsx
3049
+ * const {
3050
+ * add,
3051
+ * remove,
3052
+ * clear,
3053
+ * first,
3054
+ * last,
3055
+ * size,
3056
+ * queue
3057
+ * } = useQueue<string>(['Task 1']);
3058
+ *
3059
+ * return (
3060
+ * <div>
3061
+ * <h2>Task Queue ({size})</h2>
3062
+ *
3063
+ * <div className="controls">
3064
+ * <button onClick={() => add(`Task ${Date.now()}`)}>Add Task</button>
3065
+ * <button onClick={() => remove()} disabled={size === 0}>Process Next</button>
3066
+ * <button onClick={clear}>Clear All</button>
3067
+ * </div>
3068
+ *
3069
+ * <div className="status">
3070
+ * <p>Next: {first || 'None'}</p>
3071
+ * <p>Newest: {last || 'None'}</p>
3072
+ * </div>
3073
+ *
3074
+ * <ul>
3075
+ * {queue.map((task, index) => (
3076
+ * <li key={index}>{task}</li>
3077
+ * ))}
3078
+ * </ul>
3079
+ * </div>
3080
+ * );
3081
+ * ```
3082
+ */
3083
+ declare function useQueue<T>(initialValue?: T[]): UseQueueReturn<T>;
3084
+
3085
+ declare function useScreen(): Screen | undefined;
3086
+
3087
+ interface UseSetActions<K> {
3088
+ add: (key: K) => void;
3089
+ remove: (key: K) => void;
3090
+ toggle: (key: K) => void;
3091
+ reset: () => void;
3092
+ clear: () => void;
3093
+ }
3094
+ type UseSetReturn<K> = [Set<K>, UseSetActions<K>];
3095
+ /**
3096
+ * useSet
3097
+ *
3098
+ * A specific hook for managing `Set` state in React.
3099
+ * Useful for tracking selections, tags, or active filters.
3100
+ *
3101
+ * @param initialSet - Initial Set entries
3102
+ * @returns [set, actions]
3103
+ *
3104
+ * @example
3105
+ * ```tsx
3106
+ * const availableTags = ['React', 'Vue', 'Angular', 'Svelte'];
3107
+ * const [selectedTags, { toggle, has, clear }] = useSet<string>(new Set(['React']));
3108
+ *
3109
+ * return (
3110
+ * <div>
3111
+ * <h2>Select Frameworks ({selectedTags.size})</h2>
3112
+ *
3113
+ * <div className="tags">
3114
+ * {availableTags.map(tag => (
3115
+ * <button
3116
+ * key={tag}
3117
+ * onClick={() => toggle(tag)}
3118
+ * className={selectedTags.has(tag) ? 'active' : ''}
3119
+ * >
3120
+ * {tag} {selectedTags.has(tag) ? '✓' : ''}
3121
+ * </button>
3122
+ * ))}
3123
+ * </div>
3124
+ *
3125
+ * <button onClick={clear}>Clear Selection</button>
3126
+ *
3127
+ * <pre>
3128
+ * Selection: {JSON.stringify(Array.from(selectedTags))}
3129
+ * </pre>
3130
+ * </div>
3131
+ * );
3132
+ * ```
3133
+ */
3134
+ declare function useSet<K>(initialSet?: Set<K>): UseSetReturn<K>;
3135
+
3136
+ /**
3137
+ * Check if code is running on the server (SSR)
3138
+ */
3139
+ declare const isServer: boolean;
3140
+ /**
3141
+ * Check if code is running in the browser
3142
+ */
3143
+ declare const isBrowser: boolean;
3144
+ /**
3145
+ * No-operation function
3146
+ */
3147
+ declare const noop: () => void;
3148
+
3149
+ /**
3150
+ * useAuth0User
3151
+ *
3152
+ * Simplified access to user and loading state.
3153
+ */
3154
+ declare function useAuth0User(): {
3155
+ user: _auth0_auth0_spa_js.User | undefined;
3156
+ isAuthenticated: boolean;
3157
+ isLoading: boolean;
3158
+ error: Error | undefined;
3159
+ };
3160
+
3161
+ interface UseAxiosReturn<T> {
3162
+ data: T | null;
3163
+ loading: boolean;
3164
+ error: AxiosError | null;
3165
+ response: AxiosResponse<T> | null;
3166
+ execute: (config?: AxiosRequestConfig) => Promise<void>;
3167
+ }
3168
+ /**
3169
+ * useAxios
3170
+ *
3171
+ * A hook for Axios requests with state management.
3172
+ */
3173
+ declare function useAxios<T = any>(url: string, initialConfig?: AxiosRequestConfig, manual?: boolean): UseAxiosReturn<T>;
3174
+
3175
+ /**
3176
+ * useFirebaseAuth
3177
+ *
3178
+ * Tracks Firebase Auth state.
3179
+ */
3180
+ declare function useFirebaseAuth(auth: Auth): {
3181
+ user: User | null;
3182
+ loading: boolean;
3183
+ error: Error | null;
3184
+ };
3185
+
3186
+ /**
3187
+ * useJotai
3188
+ *
3189
+ * A bridge for Jotai providing unified access.
3190
+ */
3191
+ declare function useJotai<Value, Args extends unknown[], Result>(atom: WritableAtom<Value, Args, Result> | Atom<Value>): readonly [unknown, (...args: unknown[]) => unknown];
3192
+
3193
+ declare function useScrollProgress(): motion_dom.MotionValue<number>;
3194
+
3195
+ /**
3196
+ * useMounted
3197
+ *
3198
+ * Ensures component is mounted before rendering (avoids hydration mismatch).
3199
+ */
3200
+ declare function useMounted(): boolean;
3201
+
3202
+ /**
3203
+ * useRedux
3204
+ *
3205
+ * A combined hook for Redux accessing state and dispatch.
3206
+ */
3207
+ declare function useRedux<RootState = any, AppDispatch extends Dispatch<any> = Dispatch<any>>(): {
3208
+ dispatch: AppDispatch;
3209
+ useSelector: TypedUseSelectorHook<RootState>;
3210
+ select: TypedUseSelectorHook<RootState>;
3211
+ };
3212
+
3213
+ /**
3214
+ * useStripePayment
3215
+ *
3216
+ * Helper to consolidate Stripe objects.
3217
+ */
3218
+ declare function useStripePayment(): {
3219
+ stripe: _stripe_stripe_js.Stripe | null;
3220
+ elements: _stripe_stripe_js.StripeElements | null;
3221
+ ready: boolean;
3222
+ };
3223
+
3224
+ /**
3225
+ * useSupabaseUser
3226
+ *
3227
+ * Tracks Supabase Auth user.
3228
+ */
3229
+ declare function useSupabaseUser(client: SupabaseClient): {
3230
+ user: User$1 | null;
3231
+ loading: boolean;
3232
+ };
3233
+
3234
+ interface UseYupValidationReturn<T> {
3235
+ isValid: boolean;
3236
+ errors: Record<string, string> | null;
3237
+ error: yup.ValidationError | null;
3238
+ validate: (value: unknown) => Promise<boolean>;
3239
+ }
3240
+ /**
3241
+ * useYupValidation
3242
+ *
3243
+ * A hook to validate data using Yup schema.
3244
+ */
3245
+ declare function useYupValidation<T extends yup.AnySchema>(schema: T): UseYupValidationReturn<yup.InferType<T>>;
3246
+
3247
+ interface UseZodValidationReturn<T> {
3248
+ isValid: boolean;
3249
+ errors: Record<string, string> | null;
3250
+ error: z.ZodError | null;
3251
+ validate: (value: unknown) => boolean;
3252
+ }
3253
+ /**
3254
+ * useZodValidation
3255
+ *
3256
+ * A hook to validate data using Zod schema.
3257
+ *
3258
+ * @param schema - Zod schema
3259
+ * @returns Validation utilities
3260
+ */
3261
+ declare function useZodValidation<T extends z.ZodTypeAny>(schema: T): UseZodValidationReturn<z.infer<T>>;
3262
+
3263
+ /**
3264
+ * useZustand
3265
+ *
3266
+ * A bridge hook for Zustand.
3267
+ * Mainly a simplified re-export to align with Hookery patterns,
3268
+ * but allows for future extensibility (e.g. automatic persistence).
3269
+ */
3270
+ declare function useZustand<T, U>(store: {
3271
+ getState: () => T;
3272
+ subscribe: (listener: (state: T, prevState: T) => void) => () => void;
3273
+ getInitialState: () => T;
3274
+ }, selector: (state: T) => U): U;
3275
+
3276
+ export { type AnimationCallback, type AnthropicMessage, type AnyEvent, type AsyncStatus, type BatteryState, type CellValue, type CollabEvent, type Column, type EyeDropperOpenOptions, type FetchStatus, type GeminiContent, type GeminiPart, type GridData, type HighlightPart, type MachineConfig, type MachineState, type Message, type NetworkState, type PermissionName, type PermissionState, type RAGDocument, type RecorderStatus, type ScriptStatus, type ScrollPosition, type SemanticResult, type ShareData, type ShortcutHandler, type ShortcutMap, type SortDirection, type SpringConfig, type StorageEstimateState, type Theme, type UseAnthropicOptions, type UseAsyncOptions, type UseAsyncReturn, type UseAxiosReturn, type UseBluetoothReturn, type UseCalendarOptions, type UseCanvasOptions, type UseClickOutsideOptions, type UseCopyToClipboardReturn, type UseCountdownOptions, type UseCountdownReturn, type UseCounterOptions, type UseCounterReturn, type UseDebounceOptions, type UseDebounceReturn, type UseDocumentTitleOptions, type UseDragAndDropOptions, type UseEmbeddingsReturn, type UseEventOptions, type UseEyeDropperReturn, type UseFetchOptions, type UseFetchReturn, type UseFileProcessingOptions, type UseFileSystemReturn, type UseFormOptions, type UseFormReturn, type UseFullscreenReturn, type UseGamepadOptions, type UseGeminiOptions, type UseHistoryOptions, type UseHistoryReturn, type UseHoverReturn, type UseIndexedDBReturn, type UseInfiniteScrollOptions, type UseIntersectionOptions, type UseIntersectionReturn, type UseIntervalOptions, type UseIntervalReturn, type UseKeyPressOptions, type UseLLMStreamOptions, type UseLLMStreamReturn, type UseListActions, type UseListReturn, type UseLocalStorageOptions, type UseLocalStorageReturn, type UseLongPressOptions, type UseLongPressReturn, type UseLottieOptions, type UseMapActions, type UseMapReturn, type UseMediaQueryOptions, type UseMediaRecorderReturn, type UseMediaRefReturn, type UseMutationObserverOptions, type UseOnlineReturn, type UseOpenAIOptions, type UsePaginationOptions, type UsePaginationReturn, type UseParallaxOptions, type UseQueueActions, type UseQueueReturn, type UseRAGOptions, type UseResizeObserverOptions, type UseSTTOptions, type UseSTTReturn, type UseSVGAnimationOptions, type UseScriptOptions, type UseScriptReturn, type UseScrollOptions, type UseScrollReturn, type UseSearchHighlightOptions, type UseSessionStorageOptions, type UseSetActions, type UseSetReturn, type UseShareReturn, type UseSortableOptions, type UseSpreadsheetOptions, type UseSpringCoreOptions, type UseStepOptions, type UseStepReturn, type UseTTSOptions, type UseTableOptions, type UseTableReturn, type UseThemeOptions, type UseThemeReturn, type UseThreeJSOptions, type UseThrottleOptions, type UseThrottleReturn, type UseTimeoutOptions, type UseTimeoutReturn, type UseToggleOptions, type UseToggleReturn, type UseVirtualListOptions, type UseVirtualListReturn, type UseWakeLockReturn, type UseWebRTCOptions, type UseWebSocketOptions, type UseWindowSizeOptions, type UseWorkerReturn, type UseYupValidationReturn, type UseZodValidationReturn, type Vector, type VirtualItem, type WindowSize, type WorkerStatus, isBrowser, isServer, noop, useAnimate, useAnthropic, useAsync, useAudioRef, useAuth0User, useAxios, useBattery, useBluetooth, useBroadcastChannel, useCalendar, useCanvas, useClickAnywhere, useClickOutside, useCopyToClipboard, useCountdown, useCounter, useDebounce, useDebounceCallback, useDocumentTitle, useDragAndDrop, useEmbeddings, useEvent, useEyeDropper, useFetch, useFileProcessing, useFileSystem, useFirebaseAuth, useForm, useFrameRate, useFullscreen, useGamepad, useGemini, useHistory, useHover, useIndexedDB, useInfiniteScroll, useIntersection, useInterval, useIsClient, useIsMounted, useIsomorphicLayoutEffect, useJotai, useKeyPress, useLLMStream, useList, useLocalStorage, useLockBodyScroll, useLongPress, useLottie, useMachine, useMap, useMarkdown, useMediaDevices, useMediaQuery, useMediaRecorder, useMount, useMounted, useMutationObserver, useNetworkState, useOnline, useOpenAI, usePDF, usePageLeave, usePagination, useParallax, usePermissions, usePresence, usePrevious, useQueue, useRAG, useRealtimeCollab, useRedux, useResizeObserver, useSTT, useSVGAnimation, useScreen, useScript, useScroll, useScrollProgress, useSearchHighlight, useSemanticSearch, useSessionStorage, useSet, useShare, useShortcuts, useSortable, useSpreadsheet, useSpringCore, useStableCallback, useStep, useStorageEstimate, useStripePayment, useSupabaseUser, useTTS, useTable, useTheme, useThreeJS, useThrottle, useTimeout, useToggle, useUnmount, useUpdateEffect, useVideoRef, useVirtualList, useWakeLock, useWebRTC, useWebSocket, useWindowFocus, useWindowSize, useWorker, useYupValidation, useZodValidation, useZustand };