@reeverdev/ui 0.2.97 → 0.2.99
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.cjs +18 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2675 -333
- package/dist/index.d.ts +2675 -333
- package/dist/index.js +18 -18
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -34
package/dist/index.d.cts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
|
+
import { RefObject } from 'react';
|
|
3
4
|
import { VariantProps } from 'class-variance-authority';
|
|
4
5
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
5
6
|
import { Toaster as Toaster$1 } from 'sonner';
|
|
@@ -77,6 +78,8 @@ interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps
|
|
|
77
78
|
}
|
|
78
79
|
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
79
80
|
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
81
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
82
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
80
83
|
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
81
84
|
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
82
85
|
|
|
@@ -308,10 +311,9 @@ interface DropdownProps {
|
|
|
308
311
|
onOpenChange?: (open: boolean) => void;
|
|
309
312
|
}
|
|
310
313
|
declare const Dropdown: React$1.FC<DropdownProps>;
|
|
311
|
-
interface DropdownTriggerProps extends React$1.
|
|
312
|
-
asChild?: boolean;
|
|
314
|
+
interface DropdownTriggerProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
313
315
|
}
|
|
314
|
-
declare const DropdownTrigger: React$1.ForwardRefExoticComponent<DropdownTriggerProps & React$1.RefAttributes<
|
|
316
|
+
declare const DropdownTrigger: React$1.ForwardRefExoticComponent<DropdownTriggerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
315
317
|
interface DropdownContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
316
318
|
side?: Side$2;
|
|
317
319
|
sideOffset?: number;
|
|
@@ -327,28 +329,16 @@ interface DropdownItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
327
329
|
inset?: boolean;
|
|
328
330
|
disabled?: boolean;
|
|
329
331
|
onSelect?: () => void;
|
|
332
|
+
/** Icon or element to show before the content */
|
|
333
|
+
startContent?: React$1.ReactNode;
|
|
334
|
+
/** Icon or element to show after the content */
|
|
335
|
+
endContent?: React$1.ReactNode;
|
|
330
336
|
}
|
|
331
337
|
declare const DropdownItem: React$1.ForwardRefExoticComponent<DropdownItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
332
|
-
interface
|
|
333
|
-
checked?: boolean;
|
|
334
|
-
onCheckedChange?: (checked: boolean) => void;
|
|
335
|
-
disabled?: boolean;
|
|
336
|
-
}
|
|
337
|
-
declare const DropdownCheckboxItem: React$1.ForwardRefExoticComponent<DropdownCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
338
|
-
interface DropdownRadioGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
339
|
-
value?: string;
|
|
340
|
-
onValueChange?: (value: string) => void;
|
|
341
|
-
}
|
|
342
|
-
declare const DropdownRadioGroup: React$1.ForwardRefExoticComponent<DropdownRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
343
|
-
interface DropdownRadioItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
344
|
-
value: string;
|
|
345
|
-
disabled?: boolean;
|
|
346
|
-
}
|
|
347
|
-
declare const DropdownRadioItem: React$1.ForwardRefExoticComponent<DropdownRadioItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
348
|
-
interface DropdownLabelProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
338
|
+
interface DropdownSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
349
339
|
inset?: boolean;
|
|
350
340
|
}
|
|
351
|
-
declare const
|
|
341
|
+
declare const DropdownSection: React$1.ForwardRefExoticComponent<DropdownSectionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
352
342
|
interface DropdownSeparatorProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
353
343
|
}
|
|
354
344
|
declare const DropdownSeparator: React$1.ForwardRefExoticComponent<DropdownSeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
@@ -377,6 +367,7 @@ interface DropdownSubContentProps extends React$1.HTMLAttributes<HTMLDivElement>
|
|
|
377
367
|
collisionPadding?: number;
|
|
378
368
|
}
|
|
379
369
|
declare const DropdownSubContent: React$1.ForwardRefExoticComponent<DropdownSubContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
370
|
+
declare const DropdownLabel: React$1.ForwardRefExoticComponent<DropdownSectionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
380
371
|
|
|
381
372
|
interface PopoverProps {
|
|
382
373
|
children: React$1.ReactNode;
|
|
@@ -455,7 +446,7 @@ interface SheetOverlayProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
455
446
|
}
|
|
456
447
|
declare const SheetOverlay: React$1.ForwardRefExoticComponent<SheetOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
457
448
|
declare const sheetVariants: (props?: ({
|
|
458
|
-
side?: "left" | "right" | "
|
|
449
|
+
side?: "left" | "right" | "top" | "bottom" | null | undefined;
|
|
459
450
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
460
451
|
interface SheetContentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof sheetVariants> {
|
|
461
452
|
hideCloseButton?: boolean;
|
|
@@ -911,7 +902,7 @@ declare const DataTable: <T>(props: DataTableProps<T> & {
|
|
|
911
902
|
|
|
912
903
|
declare const spinnerVariants: (props?: ({
|
|
913
904
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
914
|
-
color?: "default" | "success" | "warning" | "danger" | "
|
|
905
|
+
color?: "default" | "success" | "warning" | "danger" | "primary" | "muted" | "white" | null | undefined;
|
|
915
906
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
916
907
|
interface SpinnerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "color">, VariantProps<typeof spinnerVariants> {
|
|
917
908
|
/** Accessibility label for screen readers */
|
|
@@ -1245,15 +1236,6 @@ interface ResizableHandleProps extends SeparatorProps$1 {
|
|
|
1245
1236
|
}
|
|
1246
1237
|
declare const ResizableHandle: ({ withHandle, className, ...props }: ResizableHandleProps) => react_jsx_runtime.JSX.Element;
|
|
1247
1238
|
|
|
1248
|
-
declare const dotsVariants: (props?: ({
|
|
1249
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
1250
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1251
|
-
interface DotsProps extends React$1.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof dotsVariants> {
|
|
1252
|
-
/** Number of dots to display */
|
|
1253
|
-
count?: 3 | 4 | 5;
|
|
1254
|
-
}
|
|
1255
|
-
declare const Dots: React$1.ForwardRefExoticComponent<DotsProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
1256
|
-
|
|
1257
1239
|
declare const circularProgressVariants: (props?: ({
|
|
1258
1240
|
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
1259
1241
|
color?: "default" | "success" | "warning" | "danger" | "primary" | null | undefined;
|
|
@@ -1441,7 +1423,7 @@ interface ListItemTextProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
|
1441
1423
|
declare const ListItemText: React$1.ForwardRefExoticComponent<ListItemTextProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1442
1424
|
|
|
1443
1425
|
declare const timelineVariants: (props?: ({
|
|
1444
|
-
position?: "
|
|
1426
|
+
position?: "left" | "right" | "alternate" | null | undefined;
|
|
1445
1427
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1446
1428
|
interface TimelineProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof timelineVariants> {
|
|
1447
1429
|
}
|
|
@@ -2700,28 +2682,6 @@ interface CloseButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
2700
2682
|
}
|
|
2701
2683
|
declare const CloseButton: React$1.ForwardRefExoticComponent<CloseButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2702
2684
|
|
|
2703
|
-
declare const actionIconVariants: (props?: ({
|
|
2704
|
-
variant?: "solid" | "ghost" | "outline" | "soft" | "surface" | null | undefined;
|
|
2705
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
2706
|
-
color?: "default" | "success" | "warning" | "danger" | "primary" | "secondary" | null | undefined;
|
|
2707
|
-
radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
|
|
2708
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2709
|
-
interface ActionIconProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "color">, VariantProps<typeof actionIconVariants> {
|
|
2710
|
-
/** Loading state */
|
|
2711
|
-
loading?: boolean;
|
|
2712
|
-
}
|
|
2713
|
-
declare const ActionIcon: React$1.ForwardRefExoticComponent<ActionIconProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
2714
|
-
|
|
2715
|
-
interface PortalProps {
|
|
2716
|
-
/** Content to render in the portal */
|
|
2717
|
-
children: React$1.ReactNode;
|
|
2718
|
-
/** Target container element or selector */
|
|
2719
|
-
container?: Element | string | null;
|
|
2720
|
-
/** Whether the portal is disabled (renders inline) */
|
|
2721
|
-
disabled?: boolean;
|
|
2722
|
-
}
|
|
2723
|
-
declare const Portal: React$1.FC<PortalProps>;
|
|
2724
|
-
|
|
2725
2685
|
declare const indicatorVariants: (props?: ({
|
|
2726
2686
|
color?: "default" | "success" | "warning" | "danger" | "primary" | "secondary" | null | undefined;
|
|
2727
2687
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -2754,10 +2714,6 @@ interface ScrollShadowProps extends React$1.HTMLAttributes<HTMLDivElement>, Vari
|
|
|
2754
2714
|
}
|
|
2755
2715
|
declare const ScrollShadow: React$1.ForwardRefExoticComponent<ScrollShadowProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2756
2716
|
|
|
2757
|
-
interface VisuallyHiddenProps extends React$1.HTMLAttributes<HTMLSpanElement> {
|
|
2758
|
-
}
|
|
2759
|
-
declare const VisuallyHidden: React$1.ForwardRefExoticComponent<VisuallyHiddenProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
2760
|
-
|
|
2761
2717
|
declare const kbdVariants: (props?: ({
|
|
2762
2718
|
variant?: "default" | "ghost" | "outline" | null | undefined;
|
|
2763
2719
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -2778,14 +2734,6 @@ declare function useKeyboardShortcut(keys: string | string[], callback: (e: Keyb
|
|
|
2778
2734
|
preventDefault?: boolean;
|
|
2779
2735
|
}): void;
|
|
2780
2736
|
|
|
2781
|
-
interface SpacerProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
2782
|
-
/** Fixed size in pixels or CSS value */
|
|
2783
|
-
size?: number | string;
|
|
2784
|
-
/** Axis direction */
|
|
2785
|
-
axis?: "horizontal" | "vertical" | "both";
|
|
2786
|
-
}
|
|
2787
|
-
declare const Spacer: React$1.ForwardRefExoticComponent<SpacerProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2788
|
-
|
|
2789
2737
|
declare const copyButtonVariants: (props?: ({
|
|
2790
2738
|
variant?: "solid" | "default" | "ghost" | "outline" | null | undefined;
|
|
2791
2739
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -2845,7 +2793,13 @@ declare const FullCalendar: React$1.ForwardRefExoticComponent<FullCalendarProps
|
|
|
2845
2793
|
declare const chartContainerVariants: (props?: ({
|
|
2846
2794
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
2847
2795
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
2796
|
+
/** Base data point for charts with arbitrary keys */
|
|
2848
2797
|
interface ChartDataPoint {
|
|
2798
|
+
name: string;
|
|
2799
|
+
[key: string]: string | number;
|
|
2800
|
+
}
|
|
2801
|
+
/** Data point for PieChart requiring a value property */
|
|
2802
|
+
interface PieChartDataPoint {
|
|
2849
2803
|
name: string;
|
|
2850
2804
|
value: number;
|
|
2851
2805
|
[key: string]: string | number;
|
|
@@ -2893,7 +2847,7 @@ interface BarChartProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantP
|
|
|
2893
2847
|
declare const BarChart: React$1.ForwardRefExoticComponent<BarChartProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
2894
2848
|
interface PieChartProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chartContainerVariants> {
|
|
2895
2849
|
/** Data to display */
|
|
2896
|
-
data:
|
|
2850
|
+
data: PieChartDataPoint[];
|
|
2897
2851
|
/** Data key for values */
|
|
2898
2852
|
dataKey?: string;
|
|
2899
2853
|
/** Name key for labels */
|
|
@@ -3371,19 +3325,6 @@ declare function useButtonGroup(): {
|
|
|
3371
3325
|
};
|
|
3372
3326
|
declare const ButtonGroup: React$1.ForwardRefExoticComponent<ButtonGroupProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3373
3327
|
|
|
3374
|
-
declare const iconButtonVariants: (props?: ({
|
|
3375
|
-
variant?: "solid" | "ghost" | "outline" | "soft" | "surface" | null | undefined;
|
|
3376
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
3377
|
-
radius?: "none" | "sm" | "md" | "lg" | "full" | null | undefined;
|
|
3378
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3379
|
-
interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
|
|
3380
|
-
/** Accessibility label */
|
|
3381
|
-
"aria-label": string;
|
|
3382
|
-
/** Loading state */
|
|
3383
|
-
isLoading?: boolean;
|
|
3384
|
-
}
|
|
3385
|
-
declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
3386
|
-
|
|
3387
3328
|
declare const actionGroupVariants: (props?: ({
|
|
3388
3329
|
variant?: "default" | "compact" | "attached" | null | undefined;
|
|
3389
3330
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
@@ -3458,7 +3399,7 @@ interface InlineAlertProps extends React$1.HTMLAttributes<HTMLDivElement>, Varia
|
|
|
3458
3399
|
declare const InlineAlert: React$1.ForwardRefExoticComponent<InlineAlertProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3459
3400
|
|
|
3460
3401
|
declare const actionBarVariants: (props?: ({
|
|
3461
|
-
position?: "bottom-right" | "bottom-left" | "
|
|
3402
|
+
position?: "bottom-right" | "bottom-left" | "top" | "bottom" | null | undefined;
|
|
3462
3403
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
3463
3404
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3464
3405
|
interface ActionBarProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof actionBarVariants> {
|
|
@@ -3478,45 +3419,6 @@ declare const ActionBarButton: React$1.ForwardRefExoticComponent<React$1.ButtonH
|
|
|
3478
3419
|
icon?: React$1.ReactNode;
|
|
3479
3420
|
} & React$1.RefAttributes<HTMLButtonElement>>;
|
|
3480
3421
|
|
|
3481
|
-
declare const actionMenuTriggerVariants: (props?: ({
|
|
3482
|
-
variant?: "ghost" | "outline" | "subtle" | null | undefined;
|
|
3483
|
-
size?: "sm" | "md" | "lg" | null | undefined;
|
|
3484
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3485
|
-
interface ActionMenuItem {
|
|
3486
|
-
key: string;
|
|
3487
|
-
label: string;
|
|
3488
|
-
icon?: React$1.ReactNode;
|
|
3489
|
-
shortcut?: string;
|
|
3490
|
-
isDisabled?: boolean;
|
|
3491
|
-
isDestructive?: boolean;
|
|
3492
|
-
onSelect?: () => void;
|
|
3493
|
-
}
|
|
3494
|
-
interface ActionMenuGroup {
|
|
3495
|
-
key: string;
|
|
3496
|
-
items: ActionMenuItem[];
|
|
3497
|
-
}
|
|
3498
|
-
interface ActionMenuProps extends VariantProps<typeof actionMenuTriggerVariants> {
|
|
3499
|
-
/** Menu items or groups */
|
|
3500
|
-
items: (ActionMenuItem | ActionMenuGroup)[];
|
|
3501
|
-
/** Menu alignment */
|
|
3502
|
-
align?: "start" | "center" | "end";
|
|
3503
|
-
/** Menu side */
|
|
3504
|
-
side?: "top" | "right" | "bottom" | "left";
|
|
3505
|
-
/** Icon orientation */
|
|
3506
|
-
iconOrientation?: "horizontal" | "vertical";
|
|
3507
|
-
/** Custom trigger */
|
|
3508
|
-
trigger?: React$1.ReactNode;
|
|
3509
|
-
/** Called when an item is selected */
|
|
3510
|
-
onAction?: (key: string) => void;
|
|
3511
|
-
/** Trigger aria-label */
|
|
3512
|
-
"aria-label"?: string;
|
|
3513
|
-
/** Additional trigger className */
|
|
3514
|
-
triggerClassName?: string;
|
|
3515
|
-
/** Disabled state */
|
|
3516
|
-
disabled?: boolean;
|
|
3517
|
-
}
|
|
3518
|
-
declare const ActionMenu: React$1.ForwardRefExoticComponent<ActionMenuProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
3519
|
-
|
|
3520
3422
|
declare const listViewVariants: (props?: ({
|
|
3521
3423
|
variant?: "bordered" | "default" | "cards" | null | undefined;
|
|
3522
3424
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -3730,7 +3632,7 @@ declare const BatteryMeter: React$1.ForwardRefExoticComponent<Omit<MeterProps, "
|
|
|
3730
3632
|
|
|
3731
3633
|
declare const colorSwatchVariants: (props?: ({
|
|
3732
3634
|
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
3733
|
-
shape?: "
|
|
3635
|
+
shape?: "circle" | "square" | null | undefined;
|
|
3734
3636
|
interactive?: boolean | null | undefined;
|
|
3735
3637
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3736
3638
|
interface ColorSwatchProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "color" | "onSelect">, VariantProps<typeof colorSwatchVariants> {
|
|
@@ -3847,74 +3749,6 @@ interface ColorWheelProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "
|
|
|
3847
3749
|
}
|
|
3848
3750
|
declare const ColorWheel: React$1.ForwardRefExoticComponent<ColorWheelProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3849
3751
|
|
|
3850
|
-
declare const flexVariants: (props?: ({
|
|
3851
|
-
direction?: "row" | "column" | "column-reverse" | "row-reverse" | null | undefined;
|
|
3852
|
-
align?: "end" | "center" | "stretch" | "start" | "baseline" | null | undefined;
|
|
3853
|
-
justify?: "end" | "center" | "start" | "between" | "around" | "evenly" | null | undefined;
|
|
3854
|
-
wrap?: "nowrap" | "wrap" | "wrap-reverse" | null | undefined;
|
|
3855
|
-
gap?: 0 | 1 | 2 | 3 | 4 | 8 | 5 | 6 | 10 | 12 | null | undefined;
|
|
3856
|
-
inline?: boolean | null | undefined;
|
|
3857
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3858
|
-
interface FlexProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
|
|
3859
|
-
/** Element to render as */
|
|
3860
|
-
as?: React$1.ElementType;
|
|
3861
|
-
}
|
|
3862
|
-
declare const Flex: React$1.ForwardRefExoticComponent<FlexProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3863
|
-
declare const HStack: React$1.ForwardRefExoticComponent<Omit<FlexProps, "direction"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
3864
|
-
declare const VStack: React$1.ForwardRefExoticComponent<Omit<FlexProps, "direction"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
3865
|
-
declare const Center: React$1.ForwardRefExoticComponent<Omit<FlexProps, "justify" | "align"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
3866
|
-
|
|
3867
|
-
declare const gridVariants: (props?: ({
|
|
3868
|
-
columns?: "none" | 1 | 2 | "auto" | 3 | 4 | 8 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | null | undefined;
|
|
3869
|
-
rows?: "none" | 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
|
|
3870
|
-
gap?: 0 | 1 | 2 | 3 | 4 | 8 | 5 | 6 | 10 | 12 | null | undefined;
|
|
3871
|
-
gapX?: 0 | 1 | 2 | 3 | 4 | 8 | 5 | 6 | 10 | 12 | null | undefined;
|
|
3872
|
-
gapY?: 0 | 1 | 2 | 3 | 4 | 8 | 5 | 6 | 10 | 12 | null | undefined;
|
|
3873
|
-
flow?: "row" | "col" | "dense" | "row-dense" | "col-dense" | null | undefined;
|
|
3874
|
-
align?: "end" | "center" | "stretch" | "start" | "baseline" | null | undefined;
|
|
3875
|
-
justify?: "end" | "center" | "stretch" | "start" | null | undefined;
|
|
3876
|
-
placeItems?: "end" | "center" | "stretch" | "start" | null | undefined;
|
|
3877
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3878
|
-
interface GridProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
|
|
3879
|
-
/** Element to render as */
|
|
3880
|
-
as?: React$1.ElementType;
|
|
3881
|
-
/** Min column width for auto columns */
|
|
3882
|
-
minChildWidth?: string;
|
|
3883
|
-
}
|
|
3884
|
-
declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3885
|
-
declare const gridItemVariants: (props?: ({
|
|
3886
|
-
colSpan?: "full" | 1 | 2 | 3 | 4 | 8 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | null | undefined;
|
|
3887
|
-
rowSpan?: "full" | 1 | 2 | 3 | 4 | 5 | 6 | null | undefined;
|
|
3888
|
-
colStart?: 1 | 2 | "auto" | 3 | 4 | 8 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | null | undefined;
|
|
3889
|
-
colEnd?: 1 | 2 | "auto" | 3 | 4 | 8 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | null | undefined;
|
|
3890
|
-
rowStart?: 1 | 2 | "auto" | 3 | 4 | 5 | 6 | 7 | null | undefined;
|
|
3891
|
-
rowEnd?: 1 | 2 | "auto" | 3 | 4 | 5 | 6 | 7 | null | undefined;
|
|
3892
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3893
|
-
interface GridItemProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridItemVariants> {
|
|
3894
|
-
/** Element to render as */
|
|
3895
|
-
as?: React$1.ElementType;
|
|
3896
|
-
}
|
|
3897
|
-
declare const GridItem: React$1.ForwardRefExoticComponent<GridItemProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3898
|
-
declare const SimpleGrid: React$1.ForwardRefExoticComponent<Omit<GridProps, "columns"> & {
|
|
3899
|
-
columns?: number | {
|
|
3900
|
-
sm?: number;
|
|
3901
|
-
md?: number;
|
|
3902
|
-
lg?: number;
|
|
3903
|
-
xl?: number;
|
|
3904
|
-
};
|
|
3905
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
3906
|
-
|
|
3907
|
-
declare const wellVariants: (props?: ({
|
|
3908
|
-
variant?: "default" | "filled" | "outline" | "subtle" | "sunken" | null | undefined;
|
|
3909
|
-
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
3910
|
-
radius?: "none" | "sm" | "md" | "lg" | "full" | "xl" | null | undefined;
|
|
3911
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
3912
|
-
interface WellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof wellVariants> {
|
|
3913
|
-
/** Element to render as */
|
|
3914
|
-
as?: React$1.ElementType;
|
|
3915
|
-
}
|
|
3916
|
-
declare const Well: React$1.ForwardRefExoticComponent<WellProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
3917
|
-
|
|
3918
3752
|
declare const labeledValueVariants: (props?: ({
|
|
3919
3753
|
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
3920
3754
|
size?: "sm" | "md" | "lg" | null | undefined;
|
|
@@ -4299,148 +4133,6 @@ interface PullToRefreshProps extends React$1.HTMLAttributes<HTMLDivElement>, Var
|
|
|
4299
4133
|
}
|
|
4300
4134
|
declare const PullToRefresh: React$1.ForwardRefExoticComponent<PullToRefreshProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4301
4135
|
|
|
4302
|
-
declare const appShellVariants: (props?: ({
|
|
4303
|
-
layout?: "default" | "sidebar" | null | undefined;
|
|
4304
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
4305
|
-
interface AppShellProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof appShellVariants> {
|
|
4306
|
-
/** Fixed header that stays at top */
|
|
4307
|
-
header?: React$1.ReactNode;
|
|
4308
|
-
/** Fixed footer that stays at bottom */
|
|
4309
|
-
footer?: React$1.ReactNode;
|
|
4310
|
-
/** Sidebar content (left side) */
|
|
4311
|
-
sidebar?: React$1.ReactNode;
|
|
4312
|
-
/** Right sidebar content */
|
|
4313
|
-
aside?: React$1.ReactNode;
|
|
4314
|
-
/** Whether sidebar is collapsed */
|
|
4315
|
-
sidebarCollapsed?: boolean;
|
|
4316
|
-
/** Width of sidebar when expanded */
|
|
4317
|
-
sidebarWidth?: string;
|
|
4318
|
-
/** Width of sidebar when collapsed */
|
|
4319
|
-
sidebarCollapsedWidth?: string;
|
|
4320
|
-
/** Width of aside */
|
|
4321
|
-
asideWidth?: string;
|
|
4322
|
-
/** Whether the layout is fixed (header/footer stick) */
|
|
4323
|
-
fixed?: boolean;
|
|
4324
|
-
}
|
|
4325
|
-
declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4326
|
-
interface AppShellHeaderProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
4327
|
-
fixed?: boolean;
|
|
4328
|
-
hasSidebar?: boolean;
|
|
4329
|
-
}
|
|
4330
|
-
declare const AppShellHeader: React$1.ForwardRefExoticComponent<AppShellHeaderProps & React$1.RefAttributes<HTMLElement>>;
|
|
4331
|
-
interface AppShellSidebarProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
4332
|
-
collapsed?: boolean;
|
|
4333
|
-
fixed?: boolean;
|
|
4334
|
-
}
|
|
4335
|
-
declare const AppShellSidebar: React$1.ForwardRefExoticComponent<AppShellSidebarProps & React$1.RefAttributes<HTMLElement>>;
|
|
4336
|
-
interface AppShellAsideProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
4337
|
-
fixed?: boolean;
|
|
4338
|
-
}
|
|
4339
|
-
declare const AppShellAside: React$1.ForwardRefExoticComponent<AppShellAsideProps & React$1.RefAttributes<HTMLElement>>;
|
|
4340
|
-
interface AppShellFooterProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
4341
|
-
fixed?: boolean;
|
|
4342
|
-
hasSidebar?: boolean;
|
|
4343
|
-
}
|
|
4344
|
-
declare const AppShellFooter: React$1.ForwardRefExoticComponent<AppShellFooterProps & React$1.RefAttributes<HTMLElement>>;
|
|
4345
|
-
declare const AppShellMain: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
4346
|
-
|
|
4347
|
-
declare const dashboardLayoutVariants: (props?: ({
|
|
4348
|
-
variant?: "bordered" | "default" | "filled" | null | undefined;
|
|
4349
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
4350
|
-
interface DashboardLayoutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dashboardLayoutVariants> {
|
|
4351
|
-
/** Navigation items for sidebar */
|
|
4352
|
-
navigation?: React$1.ReactNode;
|
|
4353
|
-
/** Logo/brand element */
|
|
4354
|
-
logo?: React$1.ReactNode;
|
|
4355
|
-
/** User menu/profile element */
|
|
4356
|
-
userMenu?: React$1.ReactNode;
|
|
4357
|
-
/** Header actions (notifications, etc) */
|
|
4358
|
-
headerActions?: React$1.ReactNode;
|
|
4359
|
-
/** Breadcrumb element */
|
|
4360
|
-
breadcrumb?: React$1.ReactNode;
|
|
4361
|
-
/** Default collapsed state */
|
|
4362
|
-
defaultCollapsed?: boolean;
|
|
4363
|
-
/** Controlled collapsed state */
|
|
4364
|
-
collapsed?: boolean;
|
|
4365
|
-
/** Callback when collapsed state changes */
|
|
4366
|
-
onCollapsedChange?: (collapsed: boolean) => void;
|
|
4367
|
-
}
|
|
4368
|
-
declare const DashboardLayout: React$1.ForwardRefExoticComponent<DashboardLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4369
|
-
declare const DashboardPage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
4370
|
-
interface DashboardPageHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
4371
|
-
title?: string;
|
|
4372
|
-
description?: string;
|
|
4373
|
-
actions?: React$1.ReactNode;
|
|
4374
|
-
}
|
|
4375
|
-
declare const DashboardPageHeader: React$1.ForwardRefExoticComponent<DashboardPageHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4376
|
-
declare const DashboardGrid: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
4377
|
-
columns?: 1 | 2 | 3 | 4;
|
|
4378
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
4379
|
-
|
|
4380
|
-
declare const authLayoutVariants: (props?: ({
|
|
4381
|
-
variant?: "split" | "cover" | "centered" | null | undefined;
|
|
4382
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
4383
|
-
interface AuthLayoutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof authLayoutVariants> {
|
|
4384
|
-
/** Logo element */
|
|
4385
|
-
logo?: React$1.ReactNode;
|
|
4386
|
-
/** Side panel content (for split variant) */
|
|
4387
|
-
sideContent?: React$1.ReactNode;
|
|
4388
|
-
/** Background image URL (for cover variant) */
|
|
4389
|
-
backgroundImage?: string;
|
|
4390
|
-
/** Side panel position */
|
|
4391
|
-
sidePosition?: "left" | "right";
|
|
4392
|
-
/** Footer content */
|
|
4393
|
-
footer?: React$1.ReactNode;
|
|
4394
|
-
}
|
|
4395
|
-
declare const AuthLayout: React$1.ForwardRefExoticComponent<AuthLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4396
|
-
declare const AuthForm: React$1.ForwardRefExoticComponent<React$1.FormHTMLAttributes<HTMLFormElement> & React$1.RefAttributes<HTMLFormElement>>;
|
|
4397
|
-
interface AuthHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
4398
|
-
title?: string;
|
|
4399
|
-
description?: string;
|
|
4400
|
-
}
|
|
4401
|
-
declare const AuthHeader: React$1.ForwardRefExoticComponent<AuthHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4402
|
-
declare const AuthFooterLinks: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
4403
|
-
declare const AuthDivider: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
|
|
4404
|
-
text?: string;
|
|
4405
|
-
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
4406
|
-
declare const AuthSocialButtons: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
4407
|
-
|
|
4408
|
-
declare const settingsLayoutVariants: (props?: ({
|
|
4409
|
-
variant?: "sidebar" | "stacked" | "tabs" | null | undefined;
|
|
4410
|
-
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
4411
|
-
interface SettingsLayoutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof settingsLayoutVariants> {
|
|
4412
|
-
/** Navigation element (sidebar or tabs) */
|
|
4413
|
-
navigation?: React$1.ReactNode;
|
|
4414
|
-
/** Page title */
|
|
4415
|
-
title?: string;
|
|
4416
|
-
/** Page description */
|
|
4417
|
-
description?: string;
|
|
4418
|
-
}
|
|
4419
|
-
declare const SettingsLayout: React$1.ForwardRefExoticComponent<SettingsLayoutProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4420
|
-
interface SettingsHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
4421
|
-
title?: string;
|
|
4422
|
-
description?: string;
|
|
4423
|
-
}
|
|
4424
|
-
declare const SettingsHeader: React$1.ForwardRefExoticComponent<SettingsHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4425
|
-
interface SettingsSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
4426
|
-
title?: string;
|
|
4427
|
-
description?: string;
|
|
4428
|
-
}
|
|
4429
|
-
declare const SettingsSection: React$1.ForwardRefExoticComponent<SettingsSectionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4430
|
-
declare const SettingsCard: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
4431
|
-
interface SettingsRowProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
4432
|
-
label?: string;
|
|
4433
|
-
description?: string;
|
|
4434
|
-
htmlFor?: string;
|
|
4435
|
-
}
|
|
4436
|
-
declare const SettingsRow: React$1.ForwardRefExoticComponent<SettingsRowProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
4437
|
-
interface SettingsNavItemProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
4438
|
-
active?: boolean;
|
|
4439
|
-
icon?: React$1.ReactNode;
|
|
4440
|
-
}
|
|
4441
|
-
declare const SettingsNavItem: React$1.ForwardRefExoticComponent<SettingsNavItemProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
4442
|
-
declare const SettingsSeparator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
4443
|
-
|
|
4444
4136
|
interface TransitionProps {
|
|
4445
4137
|
/** Whether the component is visible */
|
|
4446
4138
|
show?: boolean;
|
|
@@ -4943,10 +4635,2660 @@ interface ULProps extends React$1.HTMLAttributes<HTMLUListElement> {
|
|
|
4943
4635
|
}
|
|
4944
4636
|
declare const UL: React$1.ForwardRefExoticComponent<ULProps & React$1.RefAttributes<HTMLUListElement>>;
|
|
4945
4637
|
|
|
4638
|
+
/**
|
|
4639
|
+
* Hook to detect if a media query matches
|
|
4640
|
+
* @param query - CSS media query string (e.g., "(min-width: 768px)")
|
|
4641
|
+
* @returns boolean indicating if the media query matches
|
|
4642
|
+
*
|
|
4643
|
+
* @example
|
|
4644
|
+
* ```tsx
|
|
4645
|
+
* const isMobile = useMediaQuery("(max-width: 767px)");
|
|
4646
|
+
* const isTablet = useMediaQuery("(min-width: 768px) and (max-width: 1023px)");
|
|
4647
|
+
* const isDesktop = useMediaQuery("(min-width: 1024px)");
|
|
4648
|
+
* const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
|
|
4649
|
+
* ```
|
|
4650
|
+
*/
|
|
4651
|
+
declare function useMediaQuery(query: string): boolean;
|
|
4652
|
+
declare function useIsMobile(): boolean;
|
|
4653
|
+
declare function useIsTablet(): boolean;
|
|
4654
|
+
declare function useIsDesktop(): boolean;
|
|
4655
|
+
declare function usePrefersColorScheme(): "light" | "dark";
|
|
4656
|
+
declare function usePrefersReducedMotion(): boolean;
|
|
4657
|
+
|
|
4658
|
+
interface WindowSize {
|
|
4659
|
+
width: number;
|
|
4660
|
+
height: number;
|
|
4661
|
+
}
|
|
4662
|
+
interface UseWindowSizeOptions {
|
|
4663
|
+
/** Initial width for SSR (default: 0) */
|
|
4664
|
+
initialWidth?: number;
|
|
4665
|
+
/** Initial height for SSR (default: 0) */
|
|
4666
|
+
initialHeight?: number;
|
|
4667
|
+
/** Debounce delay in ms (default: 0) */
|
|
4668
|
+
debounce?: number;
|
|
4669
|
+
/** Whether to include scrollbar in measurements (default: true) */
|
|
4670
|
+
includeScrollbar?: boolean;
|
|
4671
|
+
}
|
|
4672
|
+
/**
|
|
4673
|
+
* Hook to track window size
|
|
4674
|
+
* @param options - configuration options
|
|
4675
|
+
* @returns current window width and height
|
|
4676
|
+
*
|
|
4677
|
+
* @example
|
|
4678
|
+
* ```tsx
|
|
4679
|
+
* function ResponsiveComponent() {
|
|
4680
|
+
* const { width, height } = useWindowSize();
|
|
4681
|
+
*
|
|
4682
|
+
* return (
|
|
4683
|
+
* <div>
|
|
4684
|
+
* Window size: {width} x {height}
|
|
4685
|
+
* </div>
|
|
4686
|
+
* );
|
|
4687
|
+
* }
|
|
4688
|
+
* ```
|
|
4689
|
+
*/
|
|
4690
|
+
declare function useWindowSize(options?: UseWindowSizeOptions): WindowSize;
|
|
4691
|
+
/**
|
|
4692
|
+
* Hook to get window width only
|
|
4693
|
+
* @returns window width
|
|
4694
|
+
*
|
|
4695
|
+
* @example
|
|
4696
|
+
* ```tsx
|
|
4697
|
+
* const width = useWindowWidth();
|
|
4698
|
+
* const columns = width > 1024 ? 4 : width > 768 ? 3 : 2;
|
|
4699
|
+
* ```
|
|
4700
|
+
*/
|
|
4701
|
+
declare function useWindowWidth(): number;
|
|
4702
|
+
/**
|
|
4703
|
+
* Hook to get window height only
|
|
4704
|
+
* @returns window height
|
|
4705
|
+
*
|
|
4706
|
+
* @example
|
|
4707
|
+
* ```tsx
|
|
4708
|
+
* const height = useWindowHeight();
|
|
4709
|
+
* const rowHeight = height > 800 ? 60 : 40;
|
|
4710
|
+
* ```
|
|
4711
|
+
*/
|
|
4712
|
+
declare function useWindowHeight(): number;
|
|
4713
|
+
/**
|
|
4714
|
+
* Hook to check if window matches a breakpoint
|
|
4715
|
+
* @param breakpoint - min-width breakpoint value
|
|
4716
|
+
* @returns whether window width is >= breakpoint
|
|
4717
|
+
*
|
|
4718
|
+
* @example
|
|
4719
|
+
* ```tsx
|
|
4720
|
+
* const isLargeScreen = useBreakpoint(1024);
|
|
4721
|
+
* ```
|
|
4722
|
+
*/
|
|
4723
|
+
declare function useBreakpoint(breakpoint: number): boolean;
|
|
4724
|
+
/**
|
|
4725
|
+
* Hook for responsive breakpoints
|
|
4726
|
+
* @returns object with common breakpoint checks
|
|
4727
|
+
*
|
|
4728
|
+
* @example
|
|
4729
|
+
* ```tsx
|
|
4730
|
+
* const { isSm, isMd, isLg, isXl, is2xl } = useBreakpoints();
|
|
4731
|
+
* ```
|
|
4732
|
+
*/
|
|
4733
|
+
declare function useBreakpoints(): {
|
|
4734
|
+
isSm: boolean;
|
|
4735
|
+
isMd: boolean;
|
|
4736
|
+
isLg: boolean;
|
|
4737
|
+
isXl: boolean;
|
|
4738
|
+
is2xl: boolean;
|
|
4739
|
+
};
|
|
4740
|
+
|
|
4741
|
+
type SetValue$1<T> = T | ((prevValue: T) => T);
|
|
4742
|
+
/**
|
|
4743
|
+
* Hook to sync state with localStorage
|
|
4744
|
+
* @param key - localStorage key
|
|
4745
|
+
* @param initialValue - initial value if key doesn't exist
|
|
4746
|
+
* @returns [value, setValue, removeValue] tuple
|
|
4747
|
+
*
|
|
4748
|
+
* @example
|
|
4749
|
+
* ```tsx
|
|
4750
|
+
* const [theme, setTheme, removeTheme] = useLocalStorage("theme", "light");
|
|
4751
|
+
* const [user, setUser] = useLocalStorage<User | null>("user", null);
|
|
4752
|
+
* ```
|
|
4753
|
+
*/
|
|
4754
|
+
declare function useLocalStorage<T>(key: string, initialValue: T): [T, (value: SetValue$1<T>) => void, () => void];
|
|
4755
|
+
|
|
4756
|
+
type SetValue<T> = T | ((prevValue: T) => T);
|
|
4757
|
+
/**
|
|
4758
|
+
* Hook to sync state with sessionStorage
|
|
4759
|
+
* @param key - sessionStorage key
|
|
4760
|
+
* @param initialValue - initial value if key doesn't exist
|
|
4761
|
+
* @returns [value, setValue, removeValue] tuple
|
|
4762
|
+
*
|
|
4763
|
+
* @example
|
|
4764
|
+
* ```tsx
|
|
4765
|
+
* const [formData, setFormData] = useSessionStorage("checkout-form", {});
|
|
4766
|
+
* const [step, setStep, resetStep] = useSessionStorage("wizard-step", 0);
|
|
4767
|
+
* ```
|
|
4768
|
+
*/
|
|
4769
|
+
declare function useSessionStorage<T>(key: string, initialValue: T): [T, (value: SetValue<T>) => void, () => void];
|
|
4770
|
+
|
|
4771
|
+
/**
|
|
4772
|
+
* Hook to debounce a value
|
|
4773
|
+
* @param value - value to debounce
|
|
4774
|
+
* @param delay - delay in milliseconds (default: 500ms)
|
|
4775
|
+
* @returns debounced value
|
|
4776
|
+
*
|
|
4777
|
+
* @example
|
|
4778
|
+
* ```tsx
|
|
4779
|
+
* const [searchTerm, setSearchTerm] = useState("");
|
|
4780
|
+
* const debouncedSearch = useDebounce(searchTerm, 300);
|
|
4781
|
+
*
|
|
4782
|
+
* useEffect(() => {
|
|
4783
|
+
* // This will only run 300ms after user stops typing
|
|
4784
|
+
* fetchSearchResults(debouncedSearch);
|
|
4785
|
+
* }, [debouncedSearch]);
|
|
4786
|
+
* ```
|
|
4787
|
+
*/
|
|
4788
|
+
declare function useDebounce<T>(value: T, delay?: number): T;
|
|
4789
|
+
|
|
4790
|
+
/**
|
|
4791
|
+
* Hook to debounce a callback function
|
|
4792
|
+
* @param callback - function to debounce
|
|
4793
|
+
* @param delay - delay in milliseconds (default: 500ms)
|
|
4794
|
+
* @returns debounced callback
|
|
4795
|
+
*
|
|
4796
|
+
* @example
|
|
4797
|
+
* ```tsx
|
|
4798
|
+
* const debouncedSave = useDebouncedCallback((data) => {
|
|
4799
|
+
* saveToServer(data);
|
|
4800
|
+
* }, 1000);
|
|
4801
|
+
*
|
|
4802
|
+
* // This will only call saveToServer 1 second after last call
|
|
4803
|
+
* <input onChange={(e) => debouncedSave(e.target.value)} />
|
|
4804
|
+
* ```
|
|
4805
|
+
*/
|
|
4806
|
+
declare function useDebouncedCallback<T extends (...args: unknown[]) => unknown>(callback: T, delay?: number): (...args: Parameters<T>) => void;
|
|
4807
|
+
/**
|
|
4808
|
+
* Hook to debounce a callback with cancel and flush capabilities
|
|
4809
|
+
*/
|
|
4810
|
+
declare function useDebouncedCallbackWithControls<T extends (...args: unknown[]) => unknown>(callback: T, delay?: number): {
|
|
4811
|
+
debouncedCallback: (...args: Parameters<T>) => void;
|
|
4812
|
+
cancel: () => void;
|
|
4813
|
+
flush: () => void;
|
|
4814
|
+
isPending: () => boolean;
|
|
4815
|
+
};
|
|
4816
|
+
|
|
4817
|
+
/**
|
|
4818
|
+
* Hook to throttle a value
|
|
4819
|
+
* @param value - value to throttle
|
|
4820
|
+
* @param interval - throttle interval in milliseconds (default: 500ms)
|
|
4821
|
+
* @returns throttled value
|
|
4822
|
+
*
|
|
4823
|
+
* @example
|
|
4824
|
+
* ```tsx
|
|
4825
|
+
* const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
|
|
4826
|
+
* const throttledPosition = useThrottle(mousePosition, 100);
|
|
4827
|
+
*
|
|
4828
|
+
* // throttledPosition updates at most every 100ms
|
|
4829
|
+
* ```
|
|
4830
|
+
*/
|
|
4831
|
+
declare function useThrottle<T>(value: T, interval?: number): T;
|
|
4832
|
+
/**
|
|
4833
|
+
* Hook to throttle a callback function
|
|
4834
|
+
* @param callback - function to throttle
|
|
4835
|
+
* @param interval - throttle interval in milliseconds (default: 500ms)
|
|
4836
|
+
* @returns throttled callback
|
|
4837
|
+
*
|
|
4838
|
+
* @example
|
|
4839
|
+
* ```tsx
|
|
4840
|
+
* const throttledScroll = useThrottledCallback((e) => {
|
|
4841
|
+
* console.log("Scroll position:", window.scrollY);
|
|
4842
|
+
* }, 100);
|
|
4843
|
+
*
|
|
4844
|
+
* useEffect(() => {
|
|
4845
|
+
* window.addEventListener("scroll", throttledScroll);
|
|
4846
|
+
* return () => window.removeEventListener("scroll", throttledScroll);
|
|
4847
|
+
* }, [throttledScroll]);
|
|
4848
|
+
* ```
|
|
4849
|
+
*/
|
|
4850
|
+
declare function useThrottledCallback<T extends (...args: unknown[]) => unknown>(callback: T, interval?: number): (...args: Parameters<T>) => void;
|
|
4851
|
+
|
|
4852
|
+
type Handler = (event: MouseEvent | TouchEvent) => void;
|
|
4853
|
+
/**
|
|
4854
|
+
* Hook to detect clicks outside of an element
|
|
4855
|
+
* @param handler - callback when click outside is detected
|
|
4856
|
+
* @param enabled - whether the hook is enabled (default: true)
|
|
4857
|
+
* @returns ref to attach to the element
|
|
4858
|
+
*
|
|
4859
|
+
* @example
|
|
4860
|
+
* ```tsx
|
|
4861
|
+
* function Dropdown() {
|
|
4862
|
+
* const [isOpen, setIsOpen] = useState(false);
|
|
4863
|
+
* const ref = useClickOutside(() => setIsOpen(false));
|
|
4864
|
+
*
|
|
4865
|
+
* return (
|
|
4866
|
+
* <div ref={ref}>
|
|
4867
|
+
* <button onClick={() => setIsOpen(true)}>Open</button>
|
|
4868
|
+
* {isOpen && <div>Dropdown content</div>}
|
|
4869
|
+
* </div>
|
|
4870
|
+
* );
|
|
4871
|
+
* }
|
|
4872
|
+
* ```
|
|
4873
|
+
*/
|
|
4874
|
+
declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: Handler, enabled?: boolean): RefObject<T | null>;
|
|
4875
|
+
/**
|
|
4876
|
+
* Hook to detect clicks outside of multiple elements
|
|
4877
|
+
* @param refs - array of refs to check
|
|
4878
|
+
* @param handler - callback when click outside is detected
|
|
4879
|
+
* @param enabled - whether the hook is enabled (default: true)
|
|
4880
|
+
*
|
|
4881
|
+
* @example
|
|
4882
|
+
* ```tsx
|
|
4883
|
+
* function Menu() {
|
|
4884
|
+
* const buttonRef = useRef<HTMLButtonElement>(null);
|
|
4885
|
+
* const menuRef = useRef<HTMLDivElement>(null);
|
|
4886
|
+
*
|
|
4887
|
+
* useClickOutsideMultiple([buttonRef, menuRef], () => setIsOpen(false));
|
|
4888
|
+
*
|
|
4889
|
+
* return (
|
|
4890
|
+
* <>
|
|
4891
|
+
* <button ref={buttonRef}>Toggle</button>
|
|
4892
|
+
* <div ref={menuRef}>Menu content</div>
|
|
4893
|
+
* </>
|
|
4894
|
+
* );
|
|
4895
|
+
* }
|
|
4896
|
+
* ```
|
|
4897
|
+
*/
|
|
4898
|
+
declare function useClickOutsideMultiple<T extends HTMLElement = HTMLElement>(refs: RefObject<T | null>[], handler: Handler, enabled?: boolean): void;
|
|
4899
|
+
|
|
4900
|
+
interface UseCopyToClipboardResult {
|
|
4901
|
+
/** The copied value */
|
|
4902
|
+
copiedValue: string | null;
|
|
4903
|
+
/** Whether the copy was successful */
|
|
4904
|
+
success: boolean;
|
|
4905
|
+
/** Whether a copy operation is in progress */
|
|
4906
|
+
isLoading: boolean;
|
|
4907
|
+
/** Copy text to clipboard */
|
|
4908
|
+
copy: (text: string) => Promise<boolean>;
|
|
4909
|
+
/** Reset the copied state */
|
|
4910
|
+
reset: () => void;
|
|
4911
|
+
}
|
|
4912
|
+
/**
|
|
4913
|
+
* Hook to copy text to clipboard
|
|
4914
|
+
* @param resetDelay - delay in ms before resetting success state (default: 2000, set to 0 to disable)
|
|
4915
|
+
* @returns object with copy function and state
|
|
4916
|
+
*
|
|
4917
|
+
* @example
|
|
4918
|
+
* ```tsx
|
|
4919
|
+
* function CopyButton({ text }: { text: string }) {
|
|
4920
|
+
* const { copy, success, copiedValue } = useCopyToClipboard();
|
|
4921
|
+
*
|
|
4922
|
+
* return (
|
|
4923
|
+
* <button onClick={() => copy(text)}>
|
|
4924
|
+
* {success ? "Copied!" : "Copy"}
|
|
4925
|
+
* </button>
|
|
4926
|
+
* );
|
|
4927
|
+
* }
|
|
4928
|
+
* ```
|
|
4929
|
+
*/
|
|
4930
|
+
declare function useCopyToClipboard(resetDelay?: number): UseCopyToClipboardResult;
|
|
4931
|
+
/**
|
|
4932
|
+
* Simple hook that just returns a copy function
|
|
4933
|
+
* @returns copy function
|
|
4934
|
+
*
|
|
4935
|
+
* @example
|
|
4936
|
+
* ```tsx
|
|
4937
|
+
* const copyToClipboard = useCopy();
|
|
4938
|
+
* <button onClick={() => copyToClipboard("Hello!")}>Copy</button>
|
|
4939
|
+
* ```
|
|
4940
|
+
*/
|
|
4941
|
+
declare function useCopy(): (text: string) => Promise<boolean>;
|
|
4942
|
+
|
|
4943
|
+
type KeyHandler = (event: KeyboardEvent) => void;
|
|
4944
|
+
interface HotkeyOptions {
|
|
4945
|
+
/** Whether the hotkey is enabled (default: true) */
|
|
4946
|
+
enabled?: boolean;
|
|
4947
|
+
/** Whether to prevent default browser behavior (default: true) */
|
|
4948
|
+
preventDefault?: boolean;
|
|
4949
|
+
/** Whether to stop event propagation (default: false) */
|
|
4950
|
+
stopPropagation?: boolean;
|
|
4951
|
+
/** Target element (default: document) */
|
|
4952
|
+
target?: HTMLElement | null;
|
|
4953
|
+
/** Only trigger when these modifiers are pressed */
|
|
4954
|
+
modifiers?: {
|
|
4955
|
+
ctrl?: boolean;
|
|
4956
|
+
alt?: boolean;
|
|
4957
|
+
shift?: boolean;
|
|
4958
|
+
meta?: boolean;
|
|
4959
|
+
};
|
|
4960
|
+
}
|
|
4961
|
+
/**
|
|
4962
|
+
* Hook to handle keyboard shortcuts
|
|
4963
|
+
* @param hotkey - keyboard shortcut (e.g., "ctrl+k", "cmd+shift+p", "escape")
|
|
4964
|
+
* @param handler - callback when hotkey is pressed
|
|
4965
|
+
* @param options - configuration options
|
|
4966
|
+
*
|
|
4967
|
+
* @example
|
|
4968
|
+
* ```tsx
|
|
4969
|
+
* // Single hotkey
|
|
4970
|
+
* useHotkeys("ctrl+k", () => setSearchOpen(true));
|
|
4971
|
+
*
|
|
4972
|
+
* // With options
|
|
4973
|
+
* useHotkeys("escape", () => closeModal(), { enabled: isModalOpen });
|
|
4974
|
+
*
|
|
4975
|
+
* // Mac command key (meta)
|
|
4976
|
+
* useHotkeys("cmd+s", () => saveDocument(), { preventDefault: true });
|
|
4977
|
+
* ```
|
|
4978
|
+
*/
|
|
4979
|
+
declare function useHotkeys(hotkey: string, handler: KeyHandler, options?: HotkeyOptions): void;
|
|
4980
|
+
/**
|
|
4981
|
+
* Hook to handle multiple keyboard shortcuts
|
|
4982
|
+
* @param hotkeys - map of hotkey to handler
|
|
4983
|
+
* @param options - shared configuration options
|
|
4984
|
+
*
|
|
4985
|
+
* @example
|
|
4986
|
+
* ```tsx
|
|
4987
|
+
* useHotkeysMap({
|
|
4988
|
+
* "ctrl+k": () => openSearch(),
|
|
4989
|
+
* "ctrl+b": () => toggleBold(),
|
|
4990
|
+
* "ctrl+i": () => toggleItalic(),
|
|
4991
|
+
* "escape": () => closeModal(),
|
|
4992
|
+
* });
|
|
4993
|
+
* ```
|
|
4994
|
+
*/
|
|
4995
|
+
declare function useHotkeysMap(hotkeys: Record<string, KeyHandler>, options?: HotkeyOptions): void;
|
|
4996
|
+
/**
|
|
4997
|
+
* Hook to check if a specific key is currently pressed
|
|
4998
|
+
* @param key - key to check
|
|
4999
|
+
* @returns whether the key is pressed
|
|
5000
|
+
*
|
|
5001
|
+
* @example
|
|
5002
|
+
* ```tsx
|
|
5003
|
+
* const isShiftPressed = useKeyPressed("Shift");
|
|
5004
|
+
* ```
|
|
5005
|
+
*/
|
|
5006
|
+
declare function useKeyPressed(key: string): boolean;
|
|
5007
|
+
|
|
5008
|
+
/**
|
|
5009
|
+
* Hook to add event listener to window/document/element
|
|
5010
|
+
* @param eventName - event name
|
|
5011
|
+
* @param handler - event handler
|
|
5012
|
+
* @param element - target element (default: window)
|
|
5013
|
+
* @param options - addEventListener options
|
|
5014
|
+
*
|
|
5015
|
+
* @example
|
|
5016
|
+
* ```tsx
|
|
5017
|
+
* // Window event
|
|
5018
|
+
* function KeyboardListener() {
|
|
5019
|
+
* useEventListener('keydown', (event) => {
|
|
5020
|
+
* console.log('Key pressed:', event.key);
|
|
5021
|
+
* });
|
|
5022
|
+
*
|
|
5023
|
+
* return <div>Press any key</div>;
|
|
5024
|
+
* }
|
|
5025
|
+
*
|
|
5026
|
+
* // Element event
|
|
5027
|
+
* function ClickTracker() {
|
|
5028
|
+
* const ref = useRef<HTMLButtonElement>(null);
|
|
5029
|
+
*
|
|
5030
|
+
* useEventListener('click', (event) => {
|
|
5031
|
+
* console.log('Button clicked!');
|
|
5032
|
+
* }, ref);
|
|
5033
|
+
*
|
|
5034
|
+
* return <button ref={ref}>Click me</button>;
|
|
5035
|
+
* }
|
|
5036
|
+
* ```
|
|
5037
|
+
*/
|
|
5038
|
+
declare function useEventListener<K extends keyof WindowEventMap>(eventName: K, handler: (event: WindowEventMap[K]) => void, element?: undefined, options?: boolean | AddEventListenerOptions): void;
|
|
5039
|
+
declare function useEventListener<K extends keyof DocumentEventMap>(eventName: K, handler: (event: DocumentEventMap[K]) => void, element: Document | null, options?: boolean | AddEventListenerOptions): void;
|
|
5040
|
+
declare function useEventListener<K extends keyof HTMLElementEventMap, T extends HTMLElement = HTMLElement>(eventName: K, handler: (event: HTMLElementEventMap[K]) => void, element: RefObject<T | null>, options?: boolean | AddEventListenerOptions): void;
|
|
5041
|
+
/**
|
|
5042
|
+
* Hook to add event listener with element ref
|
|
5043
|
+
* @param eventName - event name
|
|
5044
|
+
* @param handler - event handler
|
|
5045
|
+
* @param options - addEventListener options
|
|
5046
|
+
* @returns ref to attach to element
|
|
5047
|
+
*
|
|
5048
|
+
* @example
|
|
5049
|
+
* ```tsx
|
|
5050
|
+
* function ClickTracker() {
|
|
5051
|
+
* const ref = useEventListenerRef<HTMLButtonElement>('click', () => {
|
|
5052
|
+
* console.log('Button clicked!');
|
|
5053
|
+
* });
|
|
5054
|
+
*
|
|
5055
|
+
* return <button ref={ref}>Click me</button>;
|
|
5056
|
+
* }
|
|
5057
|
+
* ```
|
|
5058
|
+
*/
|
|
5059
|
+
declare function useEventListenerRef<T extends HTMLElement = HTMLElement>(eventName: string, handler: (event: Event) => void, options?: boolean | AddEventListenerOptions): RefObject<T | null>;
|
|
5060
|
+
/**
|
|
5061
|
+
* Hook to run callback when specific key is pressed
|
|
5062
|
+
* @param key - key to listen for
|
|
5063
|
+
* @param callback - function to call when key is pressed
|
|
5064
|
+
* @param options - configuration options
|
|
5065
|
+
*
|
|
5066
|
+
* @example
|
|
5067
|
+
* ```tsx
|
|
5068
|
+
* function SearchShortcut() {
|
|
5069
|
+
* useKeyPress('/', () => openSearch());
|
|
5070
|
+
* useKeyPress('Escape', () => closeSearch());
|
|
5071
|
+
* }
|
|
5072
|
+
* ```
|
|
5073
|
+
*/
|
|
5074
|
+
declare function useKeyPress(key: string, callback: (event: KeyboardEvent) => void, options?: {
|
|
5075
|
+
target?: RefObject<HTMLElement | null>;
|
|
5076
|
+
event?: "keydown" | "keyup" | "keypress";
|
|
5077
|
+
enabled?: boolean;
|
|
5078
|
+
}): void;
|
|
5079
|
+
|
|
5080
|
+
interface LongPressOptions {
|
|
5081
|
+
/** Duration in ms before long press triggers (default: 500) */
|
|
5082
|
+
threshold?: number;
|
|
5083
|
+
/** Callback when long press starts */
|
|
5084
|
+
onStart?: (event: React.MouseEvent | React.TouchEvent) => void;
|
|
5085
|
+
/** Callback when long press ends (before threshold) */
|
|
5086
|
+
onCancel?: (event: React.MouseEvent | React.TouchEvent) => void;
|
|
5087
|
+
/** Whether the hook is enabled (default: true) */
|
|
5088
|
+
enabled?: boolean;
|
|
5089
|
+
}
|
|
5090
|
+
interface LongPressResult {
|
|
5091
|
+
onMouseDown: (event: React.MouseEvent) => void;
|
|
5092
|
+
onMouseUp: (event: React.MouseEvent) => void;
|
|
5093
|
+
onMouseLeave: (event: React.MouseEvent) => void;
|
|
5094
|
+
onTouchStart: (event: React.TouchEvent) => void;
|
|
5095
|
+
onTouchEnd: (event: React.TouchEvent) => void;
|
|
5096
|
+
}
|
|
5097
|
+
/**
|
|
5098
|
+
* Hook to detect long press gestures
|
|
5099
|
+
* @param callback - function called when long press is detected
|
|
5100
|
+
* @param options - configuration options
|
|
5101
|
+
* @returns event handlers to spread on target element
|
|
5102
|
+
*
|
|
5103
|
+
* @example
|
|
5104
|
+
* ```tsx
|
|
5105
|
+
* function DeleteButton() {
|
|
5106
|
+
* const longPressProps = useLongPress(
|
|
5107
|
+
* () => deleteItem(),
|
|
5108
|
+
* { threshold: 1000 }
|
|
5109
|
+
* );
|
|
5110
|
+
*
|
|
5111
|
+
* return (
|
|
5112
|
+
* <button {...longPressProps}>
|
|
5113
|
+
* Hold to delete
|
|
5114
|
+
* </button>
|
|
5115
|
+
* );
|
|
5116
|
+
* }
|
|
5117
|
+
* ```
|
|
5118
|
+
*/
|
|
5119
|
+
declare function useLongPress(callback: (event: React.MouseEvent | React.TouchEvent) => void, options?: LongPressOptions): LongPressResult;
|
|
5120
|
+
|
|
5121
|
+
interface HoverCallbacks {
|
|
5122
|
+
onHoverStart?: () => void;
|
|
5123
|
+
onHoverEnd?: () => void;
|
|
5124
|
+
}
|
|
5125
|
+
/**
|
|
5126
|
+
* Hook to detect hover state
|
|
5127
|
+
* @param callbacks - optional callbacks for hover start/end
|
|
5128
|
+
* @returns ref and hover state
|
|
5129
|
+
*
|
|
5130
|
+
* @example
|
|
5131
|
+
* ```tsx
|
|
5132
|
+
* function HoverCard() {
|
|
5133
|
+
* const { ref, isHovered } = useHover<HTMLDivElement>();
|
|
5134
|
+
*
|
|
5135
|
+
* return (
|
|
5136
|
+
* <div
|
|
5137
|
+
* ref={ref}
|
|
5138
|
+
* className={isHovered ? 'shadow-lg scale-105' : ''}
|
|
5139
|
+
* >
|
|
5140
|
+
* Card content
|
|
5141
|
+
* </div>
|
|
5142
|
+
* );
|
|
5143
|
+
* }
|
|
5144
|
+
* ```
|
|
5145
|
+
*/
|
|
5146
|
+
declare function useHover<T extends HTMLElement = HTMLElement>(callbacks?: HoverCallbacks): {
|
|
5147
|
+
ref: RefObject<T | null>;
|
|
5148
|
+
isHovered: boolean;
|
|
5149
|
+
};
|
|
5150
|
+
/**
|
|
5151
|
+
* Hook to detect hover state on existing ref
|
|
5152
|
+
* @param ref - element ref
|
|
5153
|
+
* @param callbacks - optional callbacks
|
|
5154
|
+
* @returns whether element is hovered
|
|
5155
|
+
*
|
|
5156
|
+
* @example
|
|
5157
|
+
* ```tsx
|
|
5158
|
+
* function Component() {
|
|
5159
|
+
* const buttonRef = useRef<HTMLButtonElement>(null);
|
|
5160
|
+
* const isHovered = useHoverRef(buttonRef);
|
|
5161
|
+
*
|
|
5162
|
+
* return <button ref={buttonRef}>Hover me</button>;
|
|
5163
|
+
* }
|
|
5164
|
+
* ```
|
|
5165
|
+
*/
|
|
5166
|
+
declare function useHoverRef<T extends HTMLElement>(ref: RefObject<T | null>, callbacks?: HoverCallbacks): boolean;
|
|
5167
|
+
/**
|
|
5168
|
+
* Returns props to spread on element for hover detection
|
|
5169
|
+
* @returns hover state and event handlers
|
|
5170
|
+
*
|
|
5171
|
+
* @example
|
|
5172
|
+
* ```tsx
|
|
5173
|
+
* function Button() {
|
|
5174
|
+
* const { isHovered, hoverProps } = useHoverProps();
|
|
5175
|
+
*
|
|
5176
|
+
* return (
|
|
5177
|
+
* <button {...hoverProps} className={isHovered ? 'bg-blue-600' : 'bg-blue-500'}>
|
|
5178
|
+
* Hover me
|
|
5179
|
+
* </button>
|
|
5180
|
+
* );
|
|
5181
|
+
* }
|
|
5182
|
+
* ```
|
|
5183
|
+
*/
|
|
5184
|
+
declare function useHoverProps(): {
|
|
5185
|
+
isHovered: boolean;
|
|
5186
|
+
hoverProps: {
|
|
5187
|
+
onMouseEnter: () => void;
|
|
5188
|
+
onMouseLeave: () => void;
|
|
5189
|
+
};
|
|
5190
|
+
};
|
|
5191
|
+
/**
|
|
5192
|
+
* Hook to detect hover with delay
|
|
5193
|
+
* @param delay - delay in ms before hover state changes
|
|
5194
|
+
* @returns ref and hover state
|
|
5195
|
+
*
|
|
5196
|
+
* @example
|
|
5197
|
+
* ```tsx
|
|
5198
|
+
* function Tooltip() {
|
|
5199
|
+
* const { ref, isHovered } = useHoverDelay<HTMLSpanElement>(300);
|
|
5200
|
+
*
|
|
5201
|
+
* return (
|
|
5202
|
+
* <span ref={ref}>
|
|
5203
|
+
* Hover for tooltip
|
|
5204
|
+
* {isHovered && <div className="tooltip">Content</div>}
|
|
5205
|
+
* </span>
|
|
5206
|
+
* );
|
|
5207
|
+
* }
|
|
5208
|
+
* ```
|
|
5209
|
+
*/
|
|
5210
|
+
declare function useHoverDelay<T extends HTMLElement = HTMLElement>(delay?: number): {
|
|
5211
|
+
ref: RefObject<T | null>;
|
|
5212
|
+
isHovered: boolean;
|
|
5213
|
+
};
|
|
5214
|
+
|
|
5215
|
+
interface MousePosition {
|
|
5216
|
+
x: number;
|
|
5217
|
+
y: number;
|
|
5218
|
+
elementX: number;
|
|
5219
|
+
elementY: number;
|
|
5220
|
+
elementPositionX: number;
|
|
5221
|
+
elementPositionY: number;
|
|
5222
|
+
pageX: number;
|
|
5223
|
+
pageY: number;
|
|
5224
|
+
}
|
|
5225
|
+
interface UseMouseOptions {
|
|
5226
|
+
/** Whether to track mouse (default: true) */
|
|
5227
|
+
enabled?: boolean;
|
|
5228
|
+
/** Reset position when mouse leaves (default: false) */
|
|
5229
|
+
resetOnLeave?: boolean;
|
|
5230
|
+
}
|
|
5231
|
+
/**
|
|
5232
|
+
* Hook to track mouse position relative to window
|
|
5233
|
+
* @returns mouse position coordinates
|
|
5234
|
+
*
|
|
5235
|
+
* @example
|
|
5236
|
+
* ```tsx
|
|
5237
|
+
* function Cursor() {
|
|
5238
|
+
* const { x, y } = useMouse();
|
|
5239
|
+
*
|
|
5240
|
+
* return (
|
|
5241
|
+
* <div
|
|
5242
|
+
* className="custom-cursor"
|
|
5243
|
+
* style={{ left: x, top: y }}
|
|
5244
|
+
* />
|
|
5245
|
+
* );
|
|
5246
|
+
* }
|
|
5247
|
+
* ```
|
|
5248
|
+
*/
|
|
5249
|
+
declare function useMouse(): {
|
|
5250
|
+
x: number;
|
|
5251
|
+
y: number;
|
|
5252
|
+
};
|
|
5253
|
+
/**
|
|
5254
|
+
* Hook to track mouse position relative to an element
|
|
5255
|
+
* @param options - configuration options
|
|
5256
|
+
* @returns ref and mouse position
|
|
5257
|
+
*
|
|
5258
|
+
* @example
|
|
5259
|
+
* ```tsx
|
|
5260
|
+
* function Canvas() {
|
|
5261
|
+
* const { ref, x, y, elementX, elementY } = useMouseElement<HTMLDivElement>();
|
|
5262
|
+
*
|
|
5263
|
+
* return (
|
|
5264
|
+
* <div ref={ref} className="canvas">
|
|
5265
|
+
* Position in canvas: {elementX}, {elementY}
|
|
5266
|
+
* </div>
|
|
5267
|
+
* );
|
|
5268
|
+
* }
|
|
5269
|
+
* ```
|
|
5270
|
+
*/
|
|
5271
|
+
declare function useMouseElement<T extends HTMLElement = HTMLElement>(options?: UseMouseOptions): MousePosition & {
|
|
5272
|
+
ref: RefObject<T | null>;
|
|
5273
|
+
};
|
|
5274
|
+
/**
|
|
5275
|
+
* Hook to track mouse position on existing ref
|
|
5276
|
+
* @param ref - element ref
|
|
5277
|
+
* @param options - configuration options
|
|
5278
|
+
* @returns mouse position
|
|
5279
|
+
*/
|
|
5280
|
+
declare function useMouseElementRef<T extends HTMLElement>(ref: RefObject<T | null>, options?: UseMouseOptions): MousePosition;
|
|
5281
|
+
|
|
5282
|
+
interface UseFocusTrapOptions {
|
|
5283
|
+
/** Whether the trap is active (default: true) */
|
|
5284
|
+
enabled?: boolean;
|
|
5285
|
+
/** Element to focus initially */
|
|
5286
|
+
initialFocus?: RefObject<HTMLElement | null>;
|
|
5287
|
+
/** Element to focus when trap is deactivated */
|
|
5288
|
+
returnFocus?: boolean;
|
|
5289
|
+
/** Whether to auto-focus first focusable element (default: true) */
|
|
5290
|
+
autoFocus?: boolean;
|
|
5291
|
+
}
|
|
5292
|
+
/**
|
|
5293
|
+
* Hook to trap focus within an element
|
|
5294
|
+
* @param options - configuration options
|
|
5295
|
+
* @returns ref to attach to trap container
|
|
5296
|
+
*
|
|
5297
|
+
* @example
|
|
5298
|
+
* ```tsx
|
|
5299
|
+
* function Modal({ isOpen }) {
|
|
5300
|
+
* const focusTrapRef = useFocusTrap<HTMLDivElement>({
|
|
5301
|
+
* enabled: isOpen,
|
|
5302
|
+
* returnFocus: true,
|
|
5303
|
+
* });
|
|
5304
|
+
*
|
|
5305
|
+
* return (
|
|
5306
|
+
* <div ref={focusTrapRef} role="dialog">
|
|
5307
|
+
* <input placeholder="First input" />
|
|
5308
|
+
* <button>Action</button>
|
|
5309
|
+
* </div>
|
|
5310
|
+
* );
|
|
5311
|
+
* }
|
|
5312
|
+
* ```
|
|
5313
|
+
*/
|
|
5314
|
+
declare function useFocusTrap<T extends HTMLElement = HTMLElement>(options?: UseFocusTrapOptions): RefObject<T | null>;
|
|
5315
|
+
/**
|
|
5316
|
+
* Hook to trap focus with existing ref
|
|
5317
|
+
* @param ref - container ref
|
|
5318
|
+
* @param options - configuration options
|
|
5319
|
+
*/
|
|
5320
|
+
declare function useFocusTrapRef<T extends HTMLElement>(ref: RefObject<T | null>, options?: UseFocusTrapOptions): void;
|
|
5321
|
+
|
|
5322
|
+
interface ScrollPosition {
|
|
5323
|
+
x: number;
|
|
5324
|
+
y: number;
|
|
5325
|
+
}
|
|
5326
|
+
interface ScrollInfo extends ScrollPosition {
|
|
5327
|
+
/** Whether scrolled past the top threshold */
|
|
5328
|
+
isScrolled: boolean;
|
|
5329
|
+
/** Scroll direction (1 = down/right, -1 = up/left, 0 = initial) */
|
|
5330
|
+
directionY: -1 | 0 | 1;
|
|
5331
|
+
directionX: -1 | 0 | 1;
|
|
5332
|
+
/** Whether at the bottom of the page/element */
|
|
5333
|
+
isAtBottom: boolean;
|
|
5334
|
+
/** Whether at the top of the page/element */
|
|
5335
|
+
isAtTop: boolean;
|
|
5336
|
+
/** Scroll progress (0-1) */
|
|
5337
|
+
progress: number;
|
|
5338
|
+
}
|
|
5339
|
+
interface UseScrollPositionOptions {
|
|
5340
|
+
/** Threshold for isScrolled state (default: 0) */
|
|
5341
|
+
threshold?: number;
|
|
5342
|
+
/** Throttle delay in ms (default: 0) */
|
|
5343
|
+
throttle?: number;
|
|
5344
|
+
/** Element ref to track (default: window) */
|
|
5345
|
+
element?: RefObject<HTMLElement | null>;
|
|
5346
|
+
}
|
|
5347
|
+
/**
|
|
5348
|
+
* Hook to track scroll position
|
|
5349
|
+
* @param options - configuration options
|
|
5350
|
+
* @returns scroll position and related info
|
|
5351
|
+
*
|
|
5352
|
+
* @example
|
|
5353
|
+
* ```tsx
|
|
5354
|
+
* function Header() {
|
|
5355
|
+
* const { isScrolled, y, directionY } = useScrollPosition({ threshold: 100 });
|
|
5356
|
+
*
|
|
5357
|
+
* return (
|
|
5358
|
+
* <header className={isScrolled ? 'shadow-lg' : ''}>
|
|
5359
|
+
* {directionY === -1 && <BackToTop />}
|
|
5360
|
+
* </header>
|
|
5361
|
+
* );
|
|
5362
|
+
* }
|
|
5363
|
+
* ```
|
|
5364
|
+
*/
|
|
5365
|
+
declare function useScrollPosition(options?: UseScrollPositionOptions): ScrollInfo;
|
|
5366
|
+
/**
|
|
5367
|
+
* Simple hook to get window scroll position
|
|
5368
|
+
* @returns x and y scroll coordinates
|
|
5369
|
+
*
|
|
5370
|
+
* @example
|
|
5371
|
+
* ```tsx
|
|
5372
|
+
* function Component() {
|
|
5373
|
+
* const { x, y } = useWindowScroll();
|
|
5374
|
+
* return <div>Scroll: {y}px</div>;
|
|
5375
|
+
* }
|
|
5376
|
+
* ```
|
|
5377
|
+
*/
|
|
5378
|
+
declare function useWindowScroll(): ScrollPosition;
|
|
5379
|
+
|
|
5380
|
+
interface ScrollLockOptions {
|
|
5381
|
+
/** Whether to lock scroll initially (default: false) */
|
|
5382
|
+
autoLock?: boolean;
|
|
5383
|
+
/** Lock horizontal scroll too (default: true) */
|
|
5384
|
+
lockX?: boolean;
|
|
5385
|
+
}
|
|
5386
|
+
interface ScrollLockReturn {
|
|
5387
|
+
/** Lock the scroll */
|
|
5388
|
+
lock: () => void;
|
|
5389
|
+
/** Unlock the scroll */
|
|
5390
|
+
unlock: () => void;
|
|
5391
|
+
/** Whether scroll is currently locked */
|
|
5392
|
+
isLocked: boolean;
|
|
5393
|
+
}
|
|
5394
|
+
/**
|
|
5395
|
+
* Hook to lock/unlock body scroll
|
|
5396
|
+
* @param options - configuration options
|
|
5397
|
+
* @returns lock controls
|
|
5398
|
+
*
|
|
5399
|
+
* @example
|
|
5400
|
+
* ```tsx
|
|
5401
|
+
* function Modal({ isOpen }) {
|
|
5402
|
+
* const { lock, unlock } = useScrollLock();
|
|
5403
|
+
*
|
|
5404
|
+
* useEffect(() => {
|
|
5405
|
+
* if (isOpen) lock();
|
|
5406
|
+
* else unlock();
|
|
5407
|
+
* }, [isOpen]);
|
|
5408
|
+
*
|
|
5409
|
+
* return <div>Modal content</div>;
|
|
5410
|
+
* }
|
|
5411
|
+
* ```
|
|
5412
|
+
*/
|
|
5413
|
+
declare function useScrollLock(options?: ScrollLockOptions): ScrollLockReturn;
|
|
5414
|
+
/**
|
|
5415
|
+
* Simpler hook that auto-locks when mounted
|
|
5416
|
+
* @param enabled - whether to lock scroll (default: true)
|
|
5417
|
+
*
|
|
5418
|
+
* @example
|
|
5419
|
+
* ```tsx
|
|
5420
|
+
* function Modal({ isOpen }) {
|
|
5421
|
+
* useBodyScrollLock(isOpen);
|
|
5422
|
+
* return <div>Modal</div>;
|
|
5423
|
+
* }
|
|
5424
|
+
* ```
|
|
5425
|
+
*/
|
|
5426
|
+
declare function useBodyScrollLock(enabled?: boolean): void;
|
|
5427
|
+
|
|
5428
|
+
interface UseIntersectionObserverOptions {
|
|
5429
|
+
/** Root element for intersection (default: viewport) */
|
|
5430
|
+
root?: Element | null;
|
|
5431
|
+
/** Margin around root (default: "0px") */
|
|
5432
|
+
rootMargin?: string;
|
|
5433
|
+
/** Threshold(s) at which callback is invoked (default: 0) */
|
|
5434
|
+
threshold?: number | number[];
|
|
5435
|
+
/** Whether to disconnect after first intersection */
|
|
5436
|
+
once?: boolean;
|
|
5437
|
+
/** Whether observer is enabled (default: true) */
|
|
5438
|
+
enabled?: boolean;
|
|
5439
|
+
}
|
|
5440
|
+
interface IntersectionResult {
|
|
5441
|
+
/** Whether element is intersecting */
|
|
5442
|
+
isIntersecting: boolean;
|
|
5443
|
+
/** The IntersectionObserverEntry */
|
|
5444
|
+
entry: IntersectionObserverEntry | null;
|
|
5445
|
+
}
|
|
5446
|
+
/**
|
|
5447
|
+
* Hook to observe element intersection with viewport
|
|
5448
|
+
* @param options - IntersectionObserver options
|
|
5449
|
+
* @returns ref to attach and intersection state
|
|
5450
|
+
*
|
|
5451
|
+
* @example
|
|
5452
|
+
* ```tsx
|
|
5453
|
+
* function LazyImage({ src }) {
|
|
5454
|
+
* const { ref, isIntersecting } = useIntersectionObserver({
|
|
5455
|
+
* threshold: 0.1,
|
|
5456
|
+
* once: true,
|
|
5457
|
+
* });
|
|
5458
|
+
*
|
|
5459
|
+
* return (
|
|
5460
|
+
* <div ref={ref}>
|
|
5461
|
+
* {isIntersecting && <img src={src} />}
|
|
5462
|
+
* </div>
|
|
5463
|
+
* );
|
|
5464
|
+
* }
|
|
5465
|
+
* ```
|
|
5466
|
+
*/
|
|
5467
|
+
declare function useIntersectionObserver<T extends HTMLElement = HTMLElement>(options?: UseIntersectionObserverOptions): IntersectionResult & {
|
|
5468
|
+
ref: RefObject<T | null>;
|
|
5469
|
+
};
|
|
5470
|
+
/**
|
|
5471
|
+
* Hook to observe intersection with existing ref
|
|
5472
|
+
* @param ref - ref to observe
|
|
5473
|
+
* @param options - IntersectionObserver options
|
|
5474
|
+
* @returns intersection state
|
|
5475
|
+
*
|
|
5476
|
+
* @example
|
|
5477
|
+
* ```tsx
|
|
5478
|
+
* function Component() {
|
|
5479
|
+
* const containerRef = useRef<HTMLDivElement>(null);
|
|
5480
|
+
* const { isIntersecting } = useIntersectionObserverRef(containerRef, {
|
|
5481
|
+
* threshold: 0.5,
|
|
5482
|
+
* });
|
|
5483
|
+
*
|
|
5484
|
+
* return <div ref={containerRef}>...</div>;
|
|
5485
|
+
* }
|
|
5486
|
+
* ```
|
|
5487
|
+
*/
|
|
5488
|
+
declare function useIntersectionObserverRef<T extends HTMLElement>(ref: RefObject<T | null>, options?: UseIntersectionObserverOptions): IntersectionResult;
|
|
5489
|
+
/**
|
|
5490
|
+
* Hook for lazy loading (intersection triggers once)
|
|
5491
|
+
* @param rootMargin - margin for early triggering
|
|
5492
|
+
* @returns ref and whether visible
|
|
5493
|
+
*
|
|
5494
|
+
* @example
|
|
5495
|
+
* ```tsx
|
|
5496
|
+
* function LazySection() {
|
|
5497
|
+
* const { ref, isVisible } = useLazyLoad("100px");
|
|
5498
|
+
*
|
|
5499
|
+
* return (
|
|
5500
|
+
* <div ref={ref}>
|
|
5501
|
+
* {isVisible ? <HeavyComponent /> : <Placeholder />}
|
|
5502
|
+
* </div>
|
|
5503
|
+
* );
|
|
5504
|
+
* }
|
|
5505
|
+
* ```
|
|
5506
|
+
*/
|
|
5507
|
+
declare function useLazyLoad<T extends HTMLElement = HTMLElement>(rootMargin?: string): {
|
|
5508
|
+
ref: RefObject<T | null>;
|
|
5509
|
+
isVisible: boolean;
|
|
5510
|
+
};
|
|
5511
|
+
|
|
5512
|
+
interface UseMutationObserverOptions extends MutationObserverInit {
|
|
5513
|
+
/** Whether observer is enabled (default: true) */
|
|
5514
|
+
enabled?: boolean;
|
|
5515
|
+
}
|
|
5516
|
+
/**
|
|
5517
|
+
* Hook to observe DOM mutations
|
|
5518
|
+
* @param callback - function called on mutation
|
|
5519
|
+
* @param options - MutationObserver options
|
|
5520
|
+
* @returns ref to attach to target element
|
|
5521
|
+
*
|
|
5522
|
+
* @example
|
|
5523
|
+
* ```tsx
|
|
5524
|
+
* function LiveEditor() {
|
|
5525
|
+
* const ref = useMutationObserver(
|
|
5526
|
+
* (mutations) => {
|
|
5527
|
+
* console.log('DOM changed:', mutations);
|
|
5528
|
+
* },
|
|
5529
|
+
* { childList: true, subtree: true }
|
|
5530
|
+
* );
|
|
5531
|
+
*
|
|
5532
|
+
* return <div ref={ref} contentEditable />;
|
|
5533
|
+
* }
|
|
5534
|
+
* ```
|
|
5535
|
+
*/
|
|
5536
|
+
declare function useMutationObserver<T extends HTMLElement = HTMLElement>(callback: MutationCallback, options?: UseMutationObserverOptions): RefObject<T | null>;
|
|
5537
|
+
/**
|
|
5538
|
+
* Hook to observe DOM mutations on existing ref
|
|
5539
|
+
* @param ref - ref to observe
|
|
5540
|
+
* @param callback - function called on mutation
|
|
5541
|
+
* @param options - MutationObserver options
|
|
5542
|
+
*
|
|
5543
|
+
* @example
|
|
5544
|
+
* ```tsx
|
|
5545
|
+
* function Component() {
|
|
5546
|
+
* const containerRef = useRef<HTMLDivElement>(null);
|
|
5547
|
+
*
|
|
5548
|
+
* useMutationObserverRef(
|
|
5549
|
+
* containerRef,
|
|
5550
|
+
* (mutations) => logChanges(mutations),
|
|
5551
|
+
* { childList: true }
|
|
5552
|
+
* );
|
|
5553
|
+
*
|
|
5554
|
+
* return <div ref={containerRef}>...</div>;
|
|
5555
|
+
* }
|
|
5556
|
+
* ```
|
|
5557
|
+
*/
|
|
5558
|
+
declare function useMutationObserverRef<T extends HTMLElement>(ref: RefObject<T | null>, callback: MutationCallback, options?: UseMutationObserverOptions): void;
|
|
5559
|
+
|
|
5560
|
+
interface Size {
|
|
5561
|
+
width: number;
|
|
5562
|
+
height: number;
|
|
5563
|
+
}
|
|
5564
|
+
interface UseResizeObserverOptions {
|
|
5565
|
+
/** Whether observer is enabled (default: true) */
|
|
5566
|
+
enabled?: boolean;
|
|
5567
|
+
/** Box model to observe (default: "content-box") */
|
|
5568
|
+
box?: "content-box" | "border-box" | "device-pixel-content-box";
|
|
5569
|
+
/** Debounce delay in ms (default: 0) */
|
|
5570
|
+
debounce?: number;
|
|
5571
|
+
}
|
|
5572
|
+
/**
|
|
5573
|
+
* Hook to observe element size changes
|
|
5574
|
+
* @param options - configuration options
|
|
5575
|
+
* @returns ref and current size
|
|
5576
|
+
*
|
|
5577
|
+
* @example
|
|
5578
|
+
* ```tsx
|
|
5579
|
+
* function ResponsiveChart() {
|
|
5580
|
+
* const { ref, width, height } = useResizeObserver<HTMLDivElement>();
|
|
5581
|
+
*
|
|
5582
|
+
* return (
|
|
5583
|
+
* <div ref={ref} className="w-full">
|
|
5584
|
+
* <Chart width={width} height={height} />
|
|
5585
|
+
* </div>
|
|
5586
|
+
* );
|
|
5587
|
+
* }
|
|
5588
|
+
* ```
|
|
5589
|
+
*/
|
|
5590
|
+
declare function useResizeObserver<T extends HTMLElement = HTMLElement>(options?: UseResizeObserverOptions): Size & {
|
|
5591
|
+
ref: RefObject<T | null>;
|
|
5592
|
+
};
|
|
5593
|
+
/**
|
|
5594
|
+
* Hook to observe size changes on existing ref
|
|
5595
|
+
* @param ref - ref to observe
|
|
5596
|
+
* @param options - configuration options
|
|
5597
|
+
* @returns current size
|
|
5598
|
+
*
|
|
5599
|
+
* @example
|
|
5600
|
+
* ```tsx
|
|
5601
|
+
* function Component() {
|
|
5602
|
+
* const containerRef = useRef<HTMLDivElement>(null);
|
|
5603
|
+
* const { width, height } = useResizeObserverRef(containerRef);
|
|
5604
|
+
*
|
|
5605
|
+
* return <div ref={containerRef}>Size: {width}x{height}</div>;
|
|
5606
|
+
* }
|
|
5607
|
+
* ```
|
|
5608
|
+
*/
|
|
5609
|
+
declare function useResizeObserverRef<T extends HTMLElement>(ref: RefObject<T | null>, options?: UseResizeObserverOptions): Size;
|
|
5610
|
+
/**
|
|
5611
|
+
* Hook to get element size (one-time measurement)
|
|
5612
|
+
* @returns ref and size measuring function
|
|
5613
|
+
*
|
|
5614
|
+
* @example
|
|
5615
|
+
* ```tsx
|
|
5616
|
+
* function Component() {
|
|
5617
|
+
* const { ref, measure } = useElementSize<HTMLDivElement>();
|
|
5618
|
+
*
|
|
5619
|
+
* useEffect(() => {
|
|
5620
|
+
* const size = measure();
|
|
5621
|
+
* console.log('Size:', size);
|
|
5622
|
+
* }, []);
|
|
5623
|
+
*
|
|
5624
|
+
* return <div ref={ref}>Content</div>;
|
|
5625
|
+
* }
|
|
5626
|
+
* ```
|
|
5627
|
+
*/
|
|
5628
|
+
declare function useElementSize<T extends HTMLElement = HTMLElement>(): {
|
|
5629
|
+
ref: RefObject<T | null>;
|
|
5630
|
+
measure: () => Size;
|
|
5631
|
+
};
|
|
5632
|
+
|
|
5633
|
+
interface UseDisclosureReturn {
|
|
5634
|
+
/** Whether the disclosure is open */
|
|
5635
|
+
isOpen: boolean;
|
|
5636
|
+
/** Open the disclosure */
|
|
5637
|
+
open: () => void;
|
|
5638
|
+
/** Close the disclosure */
|
|
5639
|
+
close: () => void;
|
|
5640
|
+
/** Toggle the disclosure */
|
|
5641
|
+
toggle: () => void;
|
|
5642
|
+
/** Set the disclosure state directly */
|
|
5643
|
+
setIsOpen: (value: boolean) => void;
|
|
5644
|
+
/** Props to spread on trigger element */
|
|
5645
|
+
getButtonProps: () => {
|
|
5646
|
+
onClick: () => void;
|
|
5647
|
+
"aria-expanded": boolean;
|
|
5648
|
+
};
|
|
5649
|
+
/** Props to spread on disclosure panel */
|
|
5650
|
+
getDisclosureProps: () => {
|
|
5651
|
+
hidden: boolean;
|
|
5652
|
+
};
|
|
5653
|
+
}
|
|
5654
|
+
interface UseDisclosureOptions {
|
|
5655
|
+
/** Initial open state */
|
|
5656
|
+
defaultOpen?: boolean;
|
|
5657
|
+
/** Controlled open state */
|
|
5658
|
+
isOpen?: boolean;
|
|
5659
|
+
/** Callback when open state changes */
|
|
5660
|
+
onOpen?: () => void;
|
|
5661
|
+
/** Callback when close state changes */
|
|
5662
|
+
onClose?: () => void;
|
|
5663
|
+
/** Callback when state changes */
|
|
5664
|
+
onChange?: (isOpen: boolean) => void;
|
|
5665
|
+
/** ID for ARIA attributes */
|
|
5666
|
+
id?: string;
|
|
5667
|
+
}
|
|
5668
|
+
/**
|
|
5669
|
+
* Hook to manage open/close state for modals, dropdowns, etc.
|
|
5670
|
+
* @param options - configuration options
|
|
5671
|
+
* @returns disclosure state and controls
|
|
5672
|
+
*
|
|
5673
|
+
* @example
|
|
5674
|
+
* ```tsx
|
|
5675
|
+
* // Basic usage
|
|
5676
|
+
* function Modal() {
|
|
5677
|
+
* const { isOpen, open, close, toggle } = useDisclosure();
|
|
5678
|
+
*
|
|
5679
|
+
* return (
|
|
5680
|
+
* <>
|
|
5681
|
+
* <button onClick={open}>Open Modal</button>
|
|
5682
|
+
* {isOpen && (
|
|
5683
|
+
* <div>
|
|
5684
|
+
* Modal content
|
|
5685
|
+
* <button onClick={close}>Close</button>
|
|
5686
|
+
* </div>
|
|
5687
|
+
* )}
|
|
5688
|
+
* </>
|
|
5689
|
+
* );
|
|
5690
|
+
* }
|
|
5691
|
+
*
|
|
5692
|
+
* // With spread props
|
|
5693
|
+
* function Dropdown() {
|
|
5694
|
+
* const { isOpen, getButtonProps, getDisclosureProps } = useDisclosure();
|
|
5695
|
+
*
|
|
5696
|
+
* return (
|
|
5697
|
+
* <>
|
|
5698
|
+
* <button {...getButtonProps()}>Toggle</button>
|
|
5699
|
+
* <div {...getDisclosureProps()}>Dropdown content</div>
|
|
5700
|
+
* </>
|
|
5701
|
+
* );
|
|
5702
|
+
* }
|
|
5703
|
+
*
|
|
5704
|
+
* // Controlled
|
|
5705
|
+
* function ControlledModal({ isOpen, onOpenChange }) {
|
|
5706
|
+
* const disclosure = useDisclosure({
|
|
5707
|
+
* isOpen,
|
|
5708
|
+
* onChange: onOpenChange,
|
|
5709
|
+
* });
|
|
5710
|
+
* }
|
|
5711
|
+
* ```
|
|
5712
|
+
*/
|
|
5713
|
+
declare function useDisclosure(options?: UseDisclosureOptions): UseDisclosureReturn;
|
|
5714
|
+
/**
|
|
5715
|
+
* Shorthand for useDisclosure with initial open state
|
|
5716
|
+
*/
|
|
5717
|
+
declare function useDisclosureOpen(options?: Omit<UseDisclosureOptions, "defaultOpen">): UseDisclosureReturn;
|
|
5718
|
+
|
|
5719
|
+
/**
|
|
5720
|
+
* Hook to toggle a boolean value
|
|
5721
|
+
* @param initialValue - initial boolean state (default: false)
|
|
5722
|
+
* @returns tuple of [value, toggle, setValue]
|
|
5723
|
+
*
|
|
5724
|
+
* @example
|
|
5725
|
+
* ```tsx
|
|
5726
|
+
* function Toggle() {
|
|
5727
|
+
* const [isOn, toggle] = useToggle(false);
|
|
5728
|
+
*
|
|
5729
|
+
* return (
|
|
5730
|
+
* <button onClick={toggle}>
|
|
5731
|
+
* {isOn ? 'ON' : 'OFF'}
|
|
5732
|
+
* </button>
|
|
5733
|
+
* );
|
|
5734
|
+
* }
|
|
5735
|
+
* ```
|
|
5736
|
+
*/
|
|
5737
|
+
declare function useToggle(initialValue?: boolean): [boolean, () => void, (value: boolean) => void];
|
|
5738
|
+
/**
|
|
5739
|
+
* Hook to cycle through values
|
|
5740
|
+
* @param values - array of values to cycle through
|
|
5741
|
+
* @param initialIndex - starting index (default: 0)
|
|
5742
|
+
* @returns current value and controls
|
|
5743
|
+
*
|
|
5744
|
+
* @example
|
|
5745
|
+
* ```tsx
|
|
5746
|
+
* function ThemeToggle() {
|
|
5747
|
+
* const { value, next, prev, setIndex } = useCycle(['light', 'dark', 'system']);
|
|
5748
|
+
*
|
|
5749
|
+
* return (
|
|
5750
|
+
* <button onClick={next}>
|
|
5751
|
+
* Theme: {value}
|
|
5752
|
+
* </button>
|
|
5753
|
+
* );
|
|
5754
|
+
* }
|
|
5755
|
+
* ```
|
|
5756
|
+
*/
|
|
5757
|
+
declare function useCycle<T>(values: T[], initialIndex?: number): {
|
|
5758
|
+
value: T;
|
|
5759
|
+
index: number;
|
|
5760
|
+
next: () => void;
|
|
5761
|
+
prev: () => void;
|
|
5762
|
+
setIndex: (index: number) => void;
|
|
5763
|
+
setValue: (value: T) => void;
|
|
5764
|
+
};
|
|
5765
|
+
/**
|
|
5766
|
+
* Hook for boolean toggle with extended controls
|
|
5767
|
+
* @param initialValue - initial value (default: false)
|
|
5768
|
+
* @returns object with value and control functions
|
|
5769
|
+
*
|
|
5770
|
+
* @example
|
|
5771
|
+
* ```tsx
|
|
5772
|
+
* function Modal() {
|
|
5773
|
+
* const { value: isOpen, on: open, off: close, toggle } = useBooleanToggle();
|
|
5774
|
+
*
|
|
5775
|
+
* return (
|
|
5776
|
+
* <>
|
|
5777
|
+
* <button onClick={open}>Open</button>
|
|
5778
|
+
* {isOpen && (
|
|
5779
|
+
* <div>
|
|
5780
|
+
* Modal content
|
|
5781
|
+
* <button onClick={close}>Close</button>
|
|
5782
|
+
* </div>
|
|
5783
|
+
* )}
|
|
5784
|
+
* </>
|
|
5785
|
+
* );
|
|
5786
|
+
* }
|
|
5787
|
+
* ```
|
|
5788
|
+
*/
|
|
5789
|
+
declare function useBooleanToggle(initialValue?: boolean): {
|
|
5790
|
+
value: boolean;
|
|
5791
|
+
toggle: () => void;
|
|
5792
|
+
on: () => void;
|
|
5793
|
+
off: () => void;
|
|
5794
|
+
set: (value: boolean) => void;
|
|
5795
|
+
};
|
|
5796
|
+
|
|
5797
|
+
interface UseCounterOptions {
|
|
5798
|
+
/** Minimum value (default: -Infinity) */
|
|
5799
|
+
min?: number;
|
|
5800
|
+
/** Maximum value (default: Infinity) */
|
|
5801
|
+
max?: number;
|
|
5802
|
+
/** Step value for increment/decrement (default: 1) */
|
|
5803
|
+
step?: number;
|
|
5804
|
+
}
|
|
5805
|
+
interface UseCounterReturn {
|
|
5806
|
+
/** Current count value */
|
|
5807
|
+
count: number;
|
|
5808
|
+
/** Increment by step */
|
|
5809
|
+
increment: () => void;
|
|
5810
|
+
/** Decrement by step */
|
|
5811
|
+
decrement: () => void;
|
|
5812
|
+
/** Set to specific value */
|
|
5813
|
+
set: (value: number) => void;
|
|
5814
|
+
/** Reset to initial value */
|
|
5815
|
+
reset: () => void;
|
|
5816
|
+
/** Whether at minimum value */
|
|
5817
|
+
isMin: boolean;
|
|
5818
|
+
/** Whether at maximum value */
|
|
5819
|
+
isMax: boolean;
|
|
5820
|
+
}
|
|
5821
|
+
/**
|
|
5822
|
+
* Hook for counter with min/max bounds
|
|
5823
|
+
* @param initialValue - starting value (default: 0)
|
|
5824
|
+
* @param options - configuration options
|
|
5825
|
+
* @returns counter state and controls
|
|
5826
|
+
*
|
|
5827
|
+
* @example
|
|
5828
|
+
* ```tsx
|
|
5829
|
+
* function QuantitySelector() {
|
|
5830
|
+
* const { count, increment, decrement, isMin, isMax } = useCounter(1, {
|
|
5831
|
+
* min: 1,
|
|
5832
|
+
* max: 10,
|
|
5833
|
+
* });
|
|
5834
|
+
*
|
|
5835
|
+
* return (
|
|
5836
|
+
* <div>
|
|
5837
|
+
* <button onClick={decrement} disabled={isMin}>-</button>
|
|
5838
|
+
* <span>{count}</span>
|
|
5839
|
+
* <button onClick={increment} disabled={isMax}>+</button>
|
|
5840
|
+
* </div>
|
|
5841
|
+
* );
|
|
5842
|
+
* }
|
|
5843
|
+
* ```
|
|
5844
|
+
*/
|
|
5845
|
+
declare function useCounter(initialValue?: number, options?: UseCounterOptions): UseCounterReturn;
|
|
5846
|
+
/**
|
|
5847
|
+
* Simple increment-only counter
|
|
5848
|
+
* @param initialValue - starting value
|
|
5849
|
+
* @returns count and increment function
|
|
5850
|
+
*
|
|
5851
|
+
* @example
|
|
5852
|
+
* ```tsx
|
|
5853
|
+
* function ClickCounter() {
|
|
5854
|
+
* const [clicks, addClick] = useIncrementCounter(0);
|
|
5855
|
+
* return <button onClick={addClick}>Clicks: {clicks}</button>;
|
|
5856
|
+
* }
|
|
5857
|
+
* ```
|
|
5858
|
+
*/
|
|
5859
|
+
declare function useIncrementCounter(initialValue?: number): [number, () => void];
|
|
5860
|
+
|
|
5861
|
+
/**
|
|
5862
|
+
* Hook to get previous value of a variable
|
|
5863
|
+
* @param value - current value
|
|
5864
|
+
* @returns previous value (undefined on first render)
|
|
5865
|
+
*
|
|
5866
|
+
* @example
|
|
5867
|
+
* ```tsx
|
|
5868
|
+
* function Counter() {
|
|
5869
|
+
* const [count, setCount] = useState(0);
|
|
5870
|
+
* const previousCount = usePrevious(count);
|
|
5871
|
+
*
|
|
5872
|
+
* return (
|
|
5873
|
+
* <div>
|
|
5874
|
+
* Current: {count}, Previous: {previousCount}
|
|
5875
|
+
* <button onClick={() => setCount(count + 1)}>+</button>
|
|
5876
|
+
* </div>
|
|
5877
|
+
* );
|
|
5878
|
+
* }
|
|
5879
|
+
* ```
|
|
5880
|
+
*/
|
|
5881
|
+
declare function usePrevious<T>(value: T): T | undefined;
|
|
5882
|
+
/**
|
|
5883
|
+
* Hook to get previous value with initial value
|
|
5884
|
+
* @param value - current value
|
|
5885
|
+
* @param initialValue - initial value to return on first render
|
|
5886
|
+
* @returns previous value
|
|
5887
|
+
*
|
|
5888
|
+
* @example
|
|
5889
|
+
* ```tsx
|
|
5890
|
+
* function Component() {
|
|
5891
|
+
* const [value, setValue] = useState(10);
|
|
5892
|
+
* const previousValue = usePreviousWithInitial(value, 0);
|
|
5893
|
+
* // First render: previousValue = 0
|
|
5894
|
+
* // After update: previousValue = previous value
|
|
5895
|
+
* }
|
|
5896
|
+
* ```
|
|
5897
|
+
*/
|
|
5898
|
+
declare function usePreviousWithInitial<T>(value: T, initialValue: T): T;
|
|
5899
|
+
/**
|
|
5900
|
+
* Hook to compare current and previous values
|
|
5901
|
+
* @param value - current value
|
|
5902
|
+
* @returns object with current, previous and hasChanged
|
|
5903
|
+
*
|
|
5904
|
+
* @example
|
|
5905
|
+
* ```tsx
|
|
5906
|
+
* function Component() {
|
|
5907
|
+
* const [query, setQuery] = useState('');
|
|
5908
|
+
* const { current, previous, hasChanged } = usePreviousDistinct(query);
|
|
5909
|
+
*
|
|
5910
|
+
* useEffect(() => {
|
|
5911
|
+
* if (hasChanged) {
|
|
5912
|
+
* fetchResults(current);
|
|
5913
|
+
* }
|
|
5914
|
+
* }, [current, hasChanged]);
|
|
5915
|
+
* }
|
|
5916
|
+
* ```
|
|
5917
|
+
*/
|
|
5918
|
+
declare function usePreviousDistinct<T>(value: T): {
|
|
5919
|
+
current: T;
|
|
5920
|
+
previous: T | undefined;
|
|
5921
|
+
hasChanged: boolean;
|
|
5922
|
+
};
|
|
5923
|
+
|
|
5924
|
+
interface UseListReturn<T> {
|
|
5925
|
+
/** Current list */
|
|
5926
|
+
list: T[];
|
|
5927
|
+
/** Set entire list */
|
|
5928
|
+
set: (newList: T[]) => void;
|
|
5929
|
+
/** Add item to end */
|
|
5930
|
+
push: (item: T) => void;
|
|
5931
|
+
/** Add items to end */
|
|
5932
|
+
pushMany: (items: T[]) => void;
|
|
5933
|
+
/** Add item at index */
|
|
5934
|
+
insertAt: (index: number, item: T) => void;
|
|
5935
|
+
/** Update item at index */
|
|
5936
|
+
updateAt: (index: number, item: T) => void;
|
|
5937
|
+
/** Remove item at index */
|
|
5938
|
+
removeAt: (index: number) => void;
|
|
5939
|
+
/** Remove first occurrence of item */
|
|
5940
|
+
remove: (item: T) => void;
|
|
5941
|
+
/** Remove items matching predicate */
|
|
5942
|
+
removeWhere: (predicate: (item: T) => boolean) => void;
|
|
5943
|
+
/** Remove and return first item */
|
|
5944
|
+
shift: () => T | undefined;
|
|
5945
|
+
/** Add item to beginning */
|
|
5946
|
+
unshift: (item: T) => void;
|
|
5947
|
+
/** Remove and return last item */
|
|
5948
|
+
pop: () => T | undefined;
|
|
5949
|
+
/** Clear all items */
|
|
5950
|
+
clear: () => void;
|
|
5951
|
+
/** Reset to initial list */
|
|
5952
|
+
reset: () => void;
|
|
5953
|
+
/** Move item from one index to another */
|
|
5954
|
+
move: (from: number, to: number) => void;
|
|
5955
|
+
/** Swap two items */
|
|
5956
|
+
swap: (indexA: number, indexB: number) => void;
|
|
5957
|
+
/** Filter list (does not mutate) */
|
|
5958
|
+
filter: (predicate: (item: T) => boolean) => T[];
|
|
5959
|
+
/** Find item */
|
|
5960
|
+
find: (predicate: (item: T) => boolean) => T | undefined;
|
|
5961
|
+
/** Check if list includes item */
|
|
5962
|
+
includes: (item: T) => boolean;
|
|
5963
|
+
/** Get list length */
|
|
5964
|
+
length: number;
|
|
5965
|
+
/** Check if list is empty */
|
|
5966
|
+
isEmpty: boolean;
|
|
5967
|
+
}
|
|
5968
|
+
/**
|
|
5969
|
+
* Hook for list state management
|
|
5970
|
+
* @param initialList - initial list (default: [])
|
|
5971
|
+
* @returns list state and manipulation functions
|
|
5972
|
+
*
|
|
5973
|
+
* @example
|
|
5974
|
+
* ```tsx
|
|
5975
|
+
* function TodoList() {
|
|
5976
|
+
* const { list, push, removeAt, updateAt } = useList<string>([
|
|
5977
|
+
* 'Buy groceries',
|
|
5978
|
+
* 'Walk dog',
|
|
5979
|
+
* ]);
|
|
5980
|
+
*
|
|
5981
|
+
* return (
|
|
5982
|
+
* <ul>
|
|
5983
|
+
* {list.map((item, index) => (
|
|
5984
|
+
* <li key={index}>
|
|
5985
|
+
* {item}
|
|
5986
|
+
* <button onClick={() => removeAt(index)}>Delete</button>
|
|
5987
|
+
* </li>
|
|
5988
|
+
* ))}
|
|
5989
|
+
* <button onClick={() => push('New todo')}>Add</button>
|
|
5990
|
+
* </ul>
|
|
5991
|
+
* );
|
|
5992
|
+
* }
|
|
5993
|
+
* ```
|
|
5994
|
+
*/
|
|
5995
|
+
declare function useList<T>(initialList?: T[]): UseListReturn<T>;
|
|
5996
|
+
|
|
5997
|
+
interface UseMapReturn<K, V> {
|
|
5998
|
+
/** Current map as Map object */
|
|
5999
|
+
map: Map<K, V>;
|
|
6000
|
+
/** Get value by key */
|
|
6001
|
+
get: (key: K) => V | undefined;
|
|
6002
|
+
/** Set value for key */
|
|
6003
|
+
set: (key: K, value: V) => void;
|
|
6004
|
+
/** Set multiple entries */
|
|
6005
|
+
setMany: (entries: [K, V][]) => void;
|
|
6006
|
+
/** Check if key exists */
|
|
6007
|
+
has: (key: K) => boolean;
|
|
6008
|
+
/** Delete by key */
|
|
6009
|
+
delete: (key: K) => void;
|
|
6010
|
+
/** Clear all entries */
|
|
6011
|
+
clear: () => void;
|
|
6012
|
+
/** Reset to initial map */
|
|
6013
|
+
reset: () => void;
|
|
6014
|
+
/** Get all keys */
|
|
6015
|
+
keys: () => K[];
|
|
6016
|
+
/** Get all values */
|
|
6017
|
+
values: () => V[];
|
|
6018
|
+
/** Get all entries */
|
|
6019
|
+
entries: () => [K, V][];
|
|
6020
|
+
/** Map size */
|
|
6021
|
+
size: number;
|
|
6022
|
+
/** Whether map is empty */
|
|
6023
|
+
isEmpty: boolean;
|
|
6024
|
+
}
|
|
6025
|
+
/**
|
|
6026
|
+
* Hook for Map state management
|
|
6027
|
+
* @param initialMap - initial entries (default: [])
|
|
6028
|
+
* @returns map state and manipulation functions
|
|
6029
|
+
*
|
|
6030
|
+
* @example
|
|
6031
|
+
* ```tsx
|
|
6032
|
+
* function UserPreferences() {
|
|
6033
|
+
* const { map, get, set, delete: remove } = useMap<string, boolean>([
|
|
6034
|
+
* ['darkMode', true],
|
|
6035
|
+
* ['notifications', false],
|
|
6036
|
+
* ]);
|
|
6037
|
+
*
|
|
6038
|
+
* return (
|
|
6039
|
+
* <div>
|
|
6040
|
+
* <label>
|
|
6041
|
+
* <input
|
|
6042
|
+
* type="checkbox"
|
|
6043
|
+
* checked={get('darkMode') ?? false}
|
|
6044
|
+
* onChange={(e) => set('darkMode', e.target.checked)}
|
|
6045
|
+
* />
|
|
6046
|
+
* Dark Mode
|
|
6047
|
+
* </label>
|
|
6048
|
+
* </div>
|
|
6049
|
+
* );
|
|
6050
|
+
* }
|
|
6051
|
+
* ```
|
|
6052
|
+
*/
|
|
6053
|
+
declare function useMap<K, V>(initialEntries?: [K, V][]): UseMapReturn<K, V>;
|
|
6054
|
+
/**
|
|
6055
|
+
* Hook for simple object-based key-value store
|
|
6056
|
+
* @param initialObject - initial object
|
|
6057
|
+
* @returns object state and manipulation functions
|
|
6058
|
+
*
|
|
6059
|
+
* @example
|
|
6060
|
+
* ```tsx
|
|
6061
|
+
* function Settings() {
|
|
6062
|
+
* const { value, get, set, remove } = useRecord<boolean>({
|
|
6063
|
+
* darkMode: true,
|
|
6064
|
+
* notifications: false,
|
|
6065
|
+
* });
|
|
6066
|
+
*
|
|
6067
|
+
* return <pre>{JSON.stringify(value, null, 2)}</pre>;
|
|
6068
|
+
* }
|
|
6069
|
+
* ```
|
|
6070
|
+
*/
|
|
6071
|
+
declare function useRecord<T>(initialObject?: Record<string, T>): {
|
|
6072
|
+
value: Record<string, T>;
|
|
6073
|
+
get: (key: string) => T | undefined;
|
|
6074
|
+
set: (key: string, value: T) => void;
|
|
6075
|
+
setAll: (obj: Record<string, T>) => void;
|
|
6076
|
+
remove: (key: string) => void;
|
|
6077
|
+
clear: () => void;
|
|
6078
|
+
reset: () => void;
|
|
6079
|
+
has: (key: string) => boolean;
|
|
6080
|
+
keys: string[];
|
|
6081
|
+
values: T[];
|
|
6082
|
+
};
|
|
6083
|
+
|
|
6084
|
+
interface UseSetReturn<T> {
|
|
6085
|
+
/** Current set */
|
|
6086
|
+
set: Set<T>;
|
|
6087
|
+
/** Add item to set */
|
|
6088
|
+
add: (item: T) => void;
|
|
6089
|
+
/** Add multiple items */
|
|
6090
|
+
addMany: (items: T[]) => void;
|
|
6091
|
+
/** Remove item from set */
|
|
6092
|
+
remove: (item: T) => void;
|
|
6093
|
+
/** Check if item exists */
|
|
6094
|
+
has: (item: T) => boolean;
|
|
6095
|
+
/** Toggle item (add if not exists, remove if exists) */
|
|
6096
|
+
toggle: (item: T) => void;
|
|
6097
|
+
/** Clear all items */
|
|
6098
|
+
clear: () => void;
|
|
6099
|
+
/** Reset to initial set */
|
|
6100
|
+
reset: () => void;
|
|
6101
|
+
/** Get all values as array */
|
|
6102
|
+
values: () => T[];
|
|
6103
|
+
/** Set size */
|
|
6104
|
+
size: number;
|
|
6105
|
+
/** Whether set is empty */
|
|
6106
|
+
isEmpty: boolean;
|
|
6107
|
+
}
|
|
6108
|
+
/**
|
|
6109
|
+
* Hook for Set state management
|
|
6110
|
+
* @param initialSet - initial values (default: [])
|
|
6111
|
+
* @returns set state and manipulation functions
|
|
6112
|
+
*
|
|
6113
|
+
* @example
|
|
6114
|
+
* ```tsx
|
|
6115
|
+
* function TagSelector() {
|
|
6116
|
+
* const { set, add, remove, has, toggle } = useSet<string>(['react']);
|
|
6117
|
+
*
|
|
6118
|
+
* const tags = ['react', 'vue', 'angular', 'svelte'];
|
|
6119
|
+
*
|
|
6120
|
+
* return (
|
|
6121
|
+
* <div>
|
|
6122
|
+
* {tags.map((tag) => (
|
|
6123
|
+
* <button
|
|
6124
|
+
* key={tag}
|
|
6125
|
+
* onClick={() => toggle(tag)}
|
|
6126
|
+
* className={has(tag) ? 'selected' : ''}
|
|
6127
|
+
* >
|
|
6128
|
+
* {tag}
|
|
6129
|
+
* </button>
|
|
6130
|
+
* ))}
|
|
6131
|
+
* </div>
|
|
6132
|
+
* );
|
|
6133
|
+
* }
|
|
6134
|
+
* ```
|
|
6135
|
+
*/
|
|
6136
|
+
declare function useSet<T>(initialValues?: T[]): UseSetReturn<T>;
|
|
6137
|
+
/**
|
|
6138
|
+
* Hook for managing selected items (common UI pattern)
|
|
6139
|
+
* @param initialSelection - initial selected items
|
|
6140
|
+
* @returns selection state and controls
|
|
6141
|
+
*
|
|
6142
|
+
* @example
|
|
6143
|
+
* ```tsx
|
|
6144
|
+
* function MultiSelect() {
|
|
6145
|
+
* const {
|
|
6146
|
+
* selected,
|
|
6147
|
+
* isSelected,
|
|
6148
|
+
* select,
|
|
6149
|
+
* deselect,
|
|
6150
|
+
* toggle,
|
|
6151
|
+
* selectAll,
|
|
6152
|
+
* deselectAll,
|
|
6153
|
+
* } = useSelection<string>();
|
|
6154
|
+
*
|
|
6155
|
+
* const items = ['Item 1', 'Item 2', 'Item 3'];
|
|
6156
|
+
*
|
|
6157
|
+
* return (
|
|
6158
|
+
* <div>
|
|
6159
|
+
* <button onClick={() => selectAll(items)}>Select All</button>
|
|
6160
|
+
* <button onClick={deselectAll}>Clear</button>
|
|
6161
|
+
* {items.map((item) => (
|
|
6162
|
+
* <label key={item}>
|
|
6163
|
+
* <input
|
|
6164
|
+
* type="checkbox"
|
|
6165
|
+
* checked={isSelected(item)}
|
|
6166
|
+
* onChange={() => toggle(item)}
|
|
6167
|
+
* />
|
|
6168
|
+
* {item}
|
|
6169
|
+
* </label>
|
|
6170
|
+
* ))}
|
|
6171
|
+
* </div>
|
|
6172
|
+
* );
|
|
6173
|
+
* }
|
|
6174
|
+
* ```
|
|
6175
|
+
*/
|
|
6176
|
+
declare function useSelection<T>(initialSelection?: T[]): {
|
|
6177
|
+
selected: T[];
|
|
6178
|
+
isSelected: (item: T) => boolean;
|
|
6179
|
+
select: (item: T) => void;
|
|
6180
|
+
deselect: (item: T) => void;
|
|
6181
|
+
toggle: (item: T) => void;
|
|
6182
|
+
selectAll: (items: T[]) => void;
|
|
6183
|
+
deselectAll: () => void;
|
|
6184
|
+
count: number;
|
|
6185
|
+
isEmpty: boolean;
|
|
6186
|
+
};
|
|
6187
|
+
|
|
6188
|
+
interface UseQueueReturn<T> {
|
|
6189
|
+
/** Current queue */
|
|
6190
|
+
queue: T[];
|
|
6191
|
+
/** Add item to end of queue */
|
|
6192
|
+
enqueue: (item: T) => void;
|
|
6193
|
+
/** Add multiple items to queue */
|
|
6194
|
+
enqueueMany: (items: T[]) => void;
|
|
6195
|
+
/** Remove and return first item */
|
|
6196
|
+
dequeue: () => T | undefined;
|
|
6197
|
+
/** View first item without removing */
|
|
6198
|
+
peek: () => T | undefined;
|
|
6199
|
+
/** View last item */
|
|
6200
|
+
peekLast: () => T | undefined;
|
|
6201
|
+
/** Clear all items */
|
|
6202
|
+
clear: () => void;
|
|
6203
|
+
/** Queue size */
|
|
6204
|
+
size: number;
|
|
6205
|
+
/** Whether queue is empty */
|
|
6206
|
+
isEmpty: boolean;
|
|
6207
|
+
/** Whether queue has items */
|
|
6208
|
+
hasItems: boolean;
|
|
6209
|
+
}
|
|
6210
|
+
/**
|
|
6211
|
+
* Hook for FIFO queue state management
|
|
6212
|
+
* @param initialQueue - initial queue items
|
|
6213
|
+
* @returns queue state and manipulation functions
|
|
6214
|
+
*
|
|
6215
|
+
* @example
|
|
6216
|
+
* ```tsx
|
|
6217
|
+
* function NotificationQueue() {
|
|
6218
|
+
* const { queue, enqueue, dequeue, peek, isEmpty } = useQueue<string>();
|
|
6219
|
+
*
|
|
6220
|
+
* return (
|
|
6221
|
+
* <div>
|
|
6222
|
+
* <button onClick={() => enqueue(`Notification ${Date.now()}`)}>
|
|
6223
|
+
* Add Notification
|
|
6224
|
+
* </button>
|
|
6225
|
+
* {!isEmpty && (
|
|
6226
|
+
* <div>
|
|
6227
|
+
* <p>Current: {peek()}</p>
|
|
6228
|
+
* <button onClick={dequeue}>Dismiss</button>
|
|
6229
|
+
* </div>
|
|
6230
|
+
* )}
|
|
6231
|
+
* </div>
|
|
6232
|
+
* );
|
|
6233
|
+
* }
|
|
6234
|
+
* ```
|
|
6235
|
+
*/
|
|
6236
|
+
declare function useQueue<T>(initialQueue?: T[]): UseQueueReturn<T>;
|
|
6237
|
+
/**
|
|
6238
|
+
* Hook for LIFO stack state management
|
|
6239
|
+
* @param initialStack - initial stack items
|
|
6240
|
+
* @returns stack state and manipulation functions
|
|
6241
|
+
*
|
|
6242
|
+
* @example
|
|
6243
|
+
* ```tsx
|
|
6244
|
+
* function UndoStack() {
|
|
6245
|
+
* const { stack, push, pop, peek, isEmpty } = useStack<Action>();
|
|
6246
|
+
*
|
|
6247
|
+
* const undo = () => {
|
|
6248
|
+
* const action = pop();
|
|
6249
|
+
* if (action) revertAction(action);
|
|
6250
|
+
* };
|
|
6251
|
+
*
|
|
6252
|
+
* return <button onClick={undo} disabled={isEmpty}>Undo</button>;
|
|
6253
|
+
* }
|
|
6254
|
+
* ```
|
|
6255
|
+
*/
|
|
6256
|
+
declare function useStack<T>(initialStack?: T[]): {
|
|
6257
|
+
stack: T[];
|
|
6258
|
+
push: (item: T) => void;
|
|
6259
|
+
pushMany: (items: T[]) => void;
|
|
6260
|
+
pop: () => T | undefined;
|
|
6261
|
+
peek: () => T | undefined;
|
|
6262
|
+
clear: () => void;
|
|
6263
|
+
size: number;
|
|
6264
|
+
isEmpty: boolean;
|
|
6265
|
+
};
|
|
6266
|
+
|
|
6267
|
+
interface AsyncState<T> {
|
|
6268
|
+
/** Resolved data */
|
|
6269
|
+
data: T | null;
|
|
6270
|
+
/** Error if rejected */
|
|
6271
|
+
error: Error | null;
|
|
6272
|
+
/** Loading state */
|
|
6273
|
+
isLoading: boolean;
|
|
6274
|
+
/** Whether resolved successfully */
|
|
6275
|
+
isSuccess: boolean;
|
|
6276
|
+
/** Whether rejected with error */
|
|
6277
|
+
isError: boolean;
|
|
6278
|
+
/** Whether idle (not yet executed) */
|
|
6279
|
+
isIdle: boolean;
|
|
6280
|
+
}
|
|
6281
|
+
interface UseAsyncReturn<T, Args extends unknown[]> extends AsyncState<T> {
|
|
6282
|
+
/** Execute the async function */
|
|
6283
|
+
execute: (...args: Args) => Promise<T | null>;
|
|
6284
|
+
/** Reset to initial state */
|
|
6285
|
+
reset: () => void;
|
|
6286
|
+
}
|
|
6287
|
+
/**
|
|
6288
|
+
* Hook for managing async function state
|
|
6289
|
+
* @param asyncFunction - async function to manage
|
|
6290
|
+
* @param immediate - whether to execute immediately (default: false)
|
|
6291
|
+
* @returns async state and controls
|
|
6292
|
+
*
|
|
6293
|
+
* @example
|
|
6294
|
+
* ```tsx
|
|
6295
|
+
* function UserProfile({ userId }) {
|
|
6296
|
+
* const { data, isLoading, error, execute } = useAsync(
|
|
6297
|
+
* async (id: string) => fetchUser(id),
|
|
6298
|
+
* false
|
|
6299
|
+
* );
|
|
6300
|
+
*
|
|
6301
|
+
* useEffect(() => {
|
|
6302
|
+
* execute(userId);
|
|
6303
|
+
* }, [userId, execute]);
|
|
6304
|
+
*
|
|
6305
|
+
* if (isLoading) return <Spinner />;
|
|
6306
|
+
* if (error) return <Error message={error.message} />;
|
|
6307
|
+
* return <div>{data?.name}</div>;
|
|
6308
|
+
* }
|
|
6309
|
+
* ```
|
|
6310
|
+
*/
|
|
6311
|
+
declare function useAsync<T, Args extends unknown[] = []>(asyncFunction: (...args: Args) => Promise<T>, immediate?: boolean): UseAsyncReturn<T, Args>;
|
|
6312
|
+
/**
|
|
6313
|
+
* Hook for async function with automatic retry
|
|
6314
|
+
* @param asyncFunction - async function
|
|
6315
|
+
* @param retries - number of retries (default: 3)
|
|
6316
|
+
* @param delay - delay between retries in ms (default: 1000)
|
|
6317
|
+
* @returns async state with retry capability
|
|
6318
|
+
*
|
|
6319
|
+
* @example
|
|
6320
|
+
* ```tsx
|
|
6321
|
+
* function DataLoader() {
|
|
6322
|
+
* const { data, isLoading, execute, retryCount } = useAsyncRetry(
|
|
6323
|
+
* () => fetchData(),
|
|
6324
|
+
* 3,
|
|
6325
|
+
* 1000
|
|
6326
|
+
* );
|
|
6327
|
+
*
|
|
6328
|
+
* return (
|
|
6329
|
+
* <div>
|
|
6330
|
+
* {isLoading && `Loading... (attempt ${retryCount + 1})`}
|
|
6331
|
+
* {data && <DataView data={data} />}
|
|
6332
|
+
* </div>
|
|
6333
|
+
* );
|
|
6334
|
+
* }
|
|
6335
|
+
* ```
|
|
6336
|
+
*/
|
|
6337
|
+
declare function useAsyncRetry<T, Args extends unknown[] = []>(asyncFunction: (...args: Args) => Promise<T>, retries?: number, delay?: number): UseAsyncReturn<T, Args> & {
|
|
6338
|
+
retryCount: number;
|
|
6339
|
+
};
|
|
6340
|
+
|
|
6341
|
+
interface FetchState<T> {
|
|
6342
|
+
data: T | null;
|
|
6343
|
+
error: Error | null;
|
|
6344
|
+
isLoading: boolean;
|
|
6345
|
+
isSuccess: boolean;
|
|
6346
|
+
isError: boolean;
|
|
6347
|
+
}
|
|
6348
|
+
interface UseFetchOptions<T> {
|
|
6349
|
+
/** Whether to fetch immediately (default: true) */
|
|
6350
|
+
immediate?: boolean;
|
|
6351
|
+
/** Request init options */
|
|
6352
|
+
init?: RequestInit;
|
|
6353
|
+
/** Transform response before setting data */
|
|
6354
|
+
transform?: (data: unknown) => T;
|
|
6355
|
+
/** Dependencies that trigger refetch */
|
|
6356
|
+
deps?: unknown[];
|
|
6357
|
+
/** Whether hook is enabled (default: true) */
|
|
6358
|
+
enabled?: boolean;
|
|
6359
|
+
/** Refetch interval in ms */
|
|
6360
|
+
refetchInterval?: number;
|
|
6361
|
+
/** Cache key for deduplication */
|
|
6362
|
+
cacheKey?: string;
|
|
6363
|
+
}
|
|
6364
|
+
interface UseFetchReturn<T> extends FetchState<T> {
|
|
6365
|
+
/** Refetch data */
|
|
6366
|
+
refetch: () => Promise<void>;
|
|
6367
|
+
/** Abort current request */
|
|
6368
|
+
abort: () => void;
|
|
6369
|
+
}
|
|
6370
|
+
/**
|
|
6371
|
+
* Hook for data fetching
|
|
6372
|
+
* @param url - URL to fetch
|
|
6373
|
+
* @param options - fetch options
|
|
6374
|
+
* @returns fetch state and controls
|
|
6375
|
+
*
|
|
6376
|
+
* @example
|
|
6377
|
+
* ```tsx
|
|
6378
|
+
* function UserList() {
|
|
6379
|
+
* const { data, isLoading, error, refetch } = useFetch<User[]>(
|
|
6380
|
+
* '/api/users',
|
|
6381
|
+
* { immediate: true }
|
|
6382
|
+
* );
|
|
6383
|
+
*
|
|
6384
|
+
* if (isLoading) return <Spinner />;
|
|
6385
|
+
* if (error) return <Error message={error.message} />;
|
|
6386
|
+
*
|
|
6387
|
+
* return (
|
|
6388
|
+
* <div>
|
|
6389
|
+
* <button onClick={refetch}>Refresh</button>
|
|
6390
|
+
* {data?.map(user => <UserCard key={user.id} user={user} />)}
|
|
6391
|
+
* </div>
|
|
6392
|
+
* );
|
|
6393
|
+
* }
|
|
6394
|
+
* ```
|
|
6395
|
+
*/
|
|
6396
|
+
declare function useFetch<T>(url: string | null, options?: UseFetchOptions<T>): UseFetchReturn<T>;
|
|
6397
|
+
/**
|
|
6398
|
+
* Hook for POST/PUT/PATCH/DELETE mutations
|
|
6399
|
+
* @param url - URL to mutate
|
|
6400
|
+
* @param options - mutation options
|
|
6401
|
+
* @returns mutation function and state
|
|
6402
|
+
*
|
|
6403
|
+
* @example
|
|
6404
|
+
* ```tsx
|
|
6405
|
+
* function CreateUser() {
|
|
6406
|
+
* const { mutate, isLoading, error } = useMutation<User>('/api/users', {
|
|
6407
|
+
* method: 'POST',
|
|
6408
|
+
* });
|
|
6409
|
+
*
|
|
6410
|
+
* const handleSubmit = async (data: CreateUserData) => {
|
|
6411
|
+
* const result = await mutate(data);
|
|
6412
|
+
* if (result) {
|
|
6413
|
+
* // Success
|
|
6414
|
+
* }
|
|
6415
|
+
* };
|
|
6416
|
+
*
|
|
6417
|
+
* return <form onSubmit={handleSubmit}>...</form>;
|
|
6418
|
+
* }
|
|
6419
|
+
* ```
|
|
6420
|
+
*/
|
|
6421
|
+
declare function useMutation<T, Body = unknown>(url: string, options?: Omit<RequestInit, "body"> & {
|
|
6422
|
+
transform?: (data: unknown) => T;
|
|
6423
|
+
}): FetchState<T> & {
|
|
6424
|
+
mutate: (body?: Body) => Promise<T | null>;
|
|
6425
|
+
reset: () => void;
|
|
6426
|
+
};
|
|
6427
|
+
|
|
6428
|
+
/**
|
|
6429
|
+
* Hook to run callback at interval
|
|
6430
|
+
* @param callback - function to run
|
|
6431
|
+
* @param delay - interval in ms (null to pause)
|
|
6432
|
+
*
|
|
6433
|
+
* @example
|
|
6434
|
+
* ```tsx
|
|
6435
|
+
* function Timer() {
|
|
6436
|
+
* const [seconds, setSeconds] = useState(0);
|
|
6437
|
+
*
|
|
6438
|
+
* useInterval(() => {
|
|
6439
|
+
* setSeconds(s => s + 1);
|
|
6440
|
+
* }, 1000);
|
|
6441
|
+
*
|
|
6442
|
+
* return <div>Elapsed: {seconds}s</div>;
|
|
6443
|
+
* }
|
|
6444
|
+
* ```
|
|
6445
|
+
*/
|
|
6446
|
+
declare function useInterval(callback: () => void, delay: number | null): void;
|
|
6447
|
+
/**
|
|
6448
|
+
* Hook to run interval with controls
|
|
6449
|
+
* @param callback - function to run
|
|
6450
|
+
* @param delay - interval in ms
|
|
6451
|
+
* @returns interval controls
|
|
6452
|
+
*
|
|
6453
|
+
* @example
|
|
6454
|
+
* ```tsx
|
|
6455
|
+
* function StopWatch() {
|
|
6456
|
+
* const [time, setTime] = useState(0);
|
|
6457
|
+
* const { start, stop, isRunning, toggle } = useIntervalControls(
|
|
6458
|
+
* () => setTime(t => t + 100),
|
|
6459
|
+
* 100
|
|
6460
|
+
* );
|
|
6461
|
+
*
|
|
6462
|
+
* return (
|
|
6463
|
+
* <div>
|
|
6464
|
+
* <span>{time}ms</span>
|
|
6465
|
+
* <button onClick={toggle}>{isRunning ? 'Pause' : 'Start'}</button>
|
|
6466
|
+
* <button onClick={() => { stop(); setTime(0); }}>Reset</button>
|
|
6467
|
+
* </div>
|
|
6468
|
+
* );
|
|
6469
|
+
* }
|
|
6470
|
+
* ```
|
|
6471
|
+
*/
|
|
6472
|
+
declare function useIntervalControls(callback: () => void, delay: number): {
|
|
6473
|
+
start: () => void;
|
|
6474
|
+
stop: () => void;
|
|
6475
|
+
toggle: () => void;
|
|
6476
|
+
isRunning: boolean;
|
|
6477
|
+
};
|
|
6478
|
+
/**
|
|
6479
|
+
* Hook for countdown timer
|
|
6480
|
+
* @param initialSeconds - starting seconds
|
|
6481
|
+
* @param options - configuration options
|
|
6482
|
+
* @returns countdown state and controls
|
|
6483
|
+
*
|
|
6484
|
+
* @example
|
|
6485
|
+
* ```tsx
|
|
6486
|
+
* function Countdown() {
|
|
6487
|
+
* const {
|
|
6488
|
+
* seconds,
|
|
6489
|
+
* isRunning,
|
|
6490
|
+
* isComplete,
|
|
6491
|
+
* start,
|
|
6492
|
+
* pause,
|
|
6493
|
+
* reset,
|
|
6494
|
+
* } = useCountdown(60);
|
|
6495
|
+
*
|
|
6496
|
+
* return (
|
|
6497
|
+
* <div>
|
|
6498
|
+
* <span>{seconds}s</span>
|
|
6499
|
+
* {!isRunning && !isComplete && <button onClick={start}>Start</button>}
|
|
6500
|
+
* {isRunning && <button onClick={pause}>Pause</button>}
|
|
6501
|
+
* <button onClick={() => reset(60)}>Reset</button>
|
|
6502
|
+
* </div>
|
|
6503
|
+
* );
|
|
6504
|
+
* }
|
|
6505
|
+
* ```
|
|
6506
|
+
*/
|
|
6507
|
+
declare function useCountdown(initialSeconds: number, options?: {
|
|
6508
|
+
interval?: number;
|
|
6509
|
+
onComplete?: () => void;
|
|
6510
|
+
autoStart?: boolean;
|
|
6511
|
+
}): {
|
|
6512
|
+
seconds: number;
|
|
6513
|
+
isRunning: boolean;
|
|
6514
|
+
isComplete: boolean;
|
|
6515
|
+
start: () => void;
|
|
6516
|
+
pause: () => void;
|
|
6517
|
+
reset: (newSeconds?: number) => void;
|
|
6518
|
+
};
|
|
6519
|
+
/**
|
|
6520
|
+
* Hook for count-up timer
|
|
6521
|
+
* @param options - configuration options
|
|
6522
|
+
* @returns timer state and controls
|
|
6523
|
+
*
|
|
6524
|
+
* @example
|
|
6525
|
+
* ```tsx
|
|
6526
|
+
* function Timer() {
|
|
6527
|
+
* const { seconds, start, stop, reset } = useTimer();
|
|
6528
|
+
*
|
|
6529
|
+
* return (
|
|
6530
|
+
* <div>
|
|
6531
|
+
* {Math.floor(seconds / 60)}:{String(seconds % 60).padStart(2, '0')}
|
|
6532
|
+
* </div>
|
|
6533
|
+
* );
|
|
6534
|
+
* }
|
|
6535
|
+
* ```
|
|
6536
|
+
*/
|
|
6537
|
+
declare function useTimer(options?: {
|
|
6538
|
+
interval?: number;
|
|
6539
|
+
maxSeconds?: number;
|
|
6540
|
+
autoStart?: boolean;
|
|
6541
|
+
}): {
|
|
6542
|
+
seconds: number;
|
|
6543
|
+
isRunning: boolean;
|
|
6544
|
+
start: () => void;
|
|
6545
|
+
stop: () => void;
|
|
6546
|
+
reset: () => void;
|
|
6547
|
+
toggle: () => void;
|
|
6548
|
+
};
|
|
6549
|
+
|
|
6550
|
+
/**
|
|
6551
|
+
* Hook to run callback after delay
|
|
6552
|
+
* @param callback - function to run
|
|
6553
|
+
* @param delay - delay in ms (null to not run)
|
|
6554
|
+
*
|
|
6555
|
+
* @example
|
|
6556
|
+
* ```tsx
|
|
6557
|
+
* function Notification() {
|
|
6558
|
+
* const [visible, setVisible] = useState(true);
|
|
6559
|
+
*
|
|
6560
|
+
* useTimeout(() => {
|
|
6561
|
+
* setVisible(false);
|
|
6562
|
+
* }, 5000);
|
|
6563
|
+
*
|
|
6564
|
+
* return visible ? <div>Notification</div> : null;
|
|
6565
|
+
* }
|
|
6566
|
+
* ```
|
|
6567
|
+
*/
|
|
6568
|
+
declare function useTimeout(callback: () => void, delay: number | null): void;
|
|
6569
|
+
/**
|
|
6570
|
+
* Hook to run timeout with controls
|
|
6571
|
+
* @param callback - function to run
|
|
6572
|
+
* @param delay - delay in ms
|
|
6573
|
+
* @returns timeout controls
|
|
6574
|
+
*
|
|
6575
|
+
* @example
|
|
6576
|
+
* ```tsx
|
|
6577
|
+
* function AutoSave() {
|
|
6578
|
+
* const { start, cancel, isScheduled } = useTimeoutControls(
|
|
6579
|
+
* () => saveData(),
|
|
6580
|
+
* 3000
|
|
6581
|
+
* );
|
|
6582
|
+
*
|
|
6583
|
+
* const handleChange = () => {
|
|
6584
|
+
* cancel(); // Cancel previous
|
|
6585
|
+
* start(); // Schedule new
|
|
6586
|
+
* };
|
|
6587
|
+
*
|
|
6588
|
+
* return <input onChange={handleChange} />;
|
|
6589
|
+
* }
|
|
6590
|
+
* ```
|
|
6591
|
+
*/
|
|
6592
|
+
declare function useTimeoutControls(callback: () => void, delay: number): {
|
|
6593
|
+
start: () => void;
|
|
6594
|
+
cancel: () => void;
|
|
6595
|
+
reset: () => void;
|
|
6596
|
+
isScheduled: boolean;
|
|
6597
|
+
};
|
|
6598
|
+
/**
|
|
6599
|
+
* Hook for delayed state updates
|
|
6600
|
+
* @param value - value to delay
|
|
6601
|
+
* @param delay - delay in ms
|
|
6602
|
+
* @returns delayed value
|
|
6603
|
+
*
|
|
6604
|
+
* @example
|
|
6605
|
+
* ```tsx
|
|
6606
|
+
* function SearchInput() {
|
|
6607
|
+
* const [query, setQuery] = useState('');
|
|
6608
|
+
* const delayedQuery = useDelayedValue(query, 500);
|
|
6609
|
+
*
|
|
6610
|
+
* useEffect(() => {
|
|
6611
|
+
* // Only search after user stops typing
|
|
6612
|
+
* if (delayedQuery) {
|
|
6613
|
+
* searchApi(delayedQuery);
|
|
6614
|
+
* }
|
|
6615
|
+
* }, [delayedQuery]);
|
|
6616
|
+
*
|
|
6617
|
+
* return <input value={query} onChange={e => setQuery(e.target.value)} />;
|
|
6618
|
+
* }
|
|
6619
|
+
* ```
|
|
6620
|
+
*/
|
|
6621
|
+
declare function useDelayedValue<T>(value: T, delay: number): T;
|
|
6622
|
+
/**
|
|
6623
|
+
* Hook that returns true after delay
|
|
6624
|
+
* @param delay - delay in ms
|
|
6625
|
+
* @param immediate - whether to start immediately (default: true)
|
|
6626
|
+
* @returns whether delay has passed
|
|
6627
|
+
*
|
|
6628
|
+
* @example
|
|
6629
|
+
* ```tsx
|
|
6630
|
+
* function LazyLoad() {
|
|
6631
|
+
* const ready = useTimeoutFlag(1000);
|
|
6632
|
+
*
|
|
6633
|
+
* return ready ? <HeavyComponent /> : <Skeleton />;
|
|
6634
|
+
* }
|
|
6635
|
+
* ```
|
|
6636
|
+
*/
|
|
6637
|
+
declare function useTimeoutFlag(delay: number, immediate?: boolean): boolean;
|
|
6638
|
+
|
|
6639
|
+
interface RafLoopReturn {
|
|
6640
|
+
/** Start the animation loop */
|
|
6641
|
+
start: () => void;
|
|
6642
|
+
/** Stop the animation loop */
|
|
6643
|
+
stop: () => void;
|
|
6644
|
+
/** Whether loop is running */
|
|
6645
|
+
isRunning: boolean;
|
|
6646
|
+
/** Current frame count */
|
|
6647
|
+
frameCount: number;
|
|
6648
|
+
/** FPS (frames per second) */
|
|
6649
|
+
fps: number;
|
|
6650
|
+
}
|
|
6651
|
+
/**
|
|
6652
|
+
* Hook to run callback on each animation frame
|
|
6653
|
+
* @param callback - function called each frame with delta time
|
|
6654
|
+
* @param autoStart - whether to start immediately (default: true)
|
|
6655
|
+
* @returns loop controls
|
|
6656
|
+
*
|
|
6657
|
+
* @example
|
|
6658
|
+
* ```tsx
|
|
6659
|
+
* function Animation() {
|
|
6660
|
+
* const { start, stop, isRunning, fps } = useRafLoop((deltaTime) => {
|
|
6661
|
+
* // Update animation based on deltaTime
|
|
6662
|
+
* positionRef.current += velocity * deltaTime;
|
|
6663
|
+
* });
|
|
6664
|
+
*
|
|
6665
|
+
* return (
|
|
6666
|
+
* <div>
|
|
6667
|
+
* <span>FPS: {fps.toFixed(0)}</span>
|
|
6668
|
+
* <button onClick={isRunning ? stop : start}>
|
|
6669
|
+
* {isRunning ? 'Pause' : 'Play'}
|
|
6670
|
+
* </button>
|
|
6671
|
+
* </div>
|
|
6672
|
+
* );
|
|
6673
|
+
* }
|
|
6674
|
+
* ```
|
|
6675
|
+
*/
|
|
6676
|
+
declare function useRafLoop(callback: (deltaTime: number, timestamp: number) => void, autoStart?: boolean): RafLoopReturn;
|
|
6677
|
+
/**
|
|
6678
|
+
* Hook for smooth value animation using RAF
|
|
6679
|
+
* @param targetValue - value to animate to
|
|
6680
|
+
* @param options - animation options
|
|
6681
|
+
* @returns current animated value
|
|
6682
|
+
*
|
|
6683
|
+
* @example
|
|
6684
|
+
* ```tsx
|
|
6685
|
+
* function ProgressBar() {
|
|
6686
|
+
* const [progress, setProgress] = useState(0);
|
|
6687
|
+
* const animatedProgress = useAnimatedValue(progress, {
|
|
6688
|
+
* duration: 500,
|
|
6689
|
+
* easing: 'easeOutCubic',
|
|
6690
|
+
* });
|
|
6691
|
+
*
|
|
6692
|
+
* return (
|
|
6693
|
+
* <div>
|
|
6694
|
+
* <div style={{ width: `${animatedProgress}%` }} />
|
|
6695
|
+
* <button onClick={() => setProgress(p => p + 25)}>+25%</button>
|
|
6696
|
+
* </div>
|
|
6697
|
+
* );
|
|
6698
|
+
* }
|
|
6699
|
+
* ```
|
|
6700
|
+
*/
|
|
6701
|
+
declare function useAnimatedValue(targetValue: number, options?: {
|
|
6702
|
+
duration?: number;
|
|
6703
|
+
easing?: "linear" | "easeInCubic" | "easeOutCubic" | "easeInOutCubic";
|
|
6704
|
+
}): number;
|
|
6705
|
+
/**
|
|
6706
|
+
* Hook for spring-like animations
|
|
6707
|
+
* @param targetValue - value to animate to
|
|
6708
|
+
* @param config - spring configuration
|
|
6709
|
+
* @returns current animated value
|
|
6710
|
+
*
|
|
6711
|
+
* @example
|
|
6712
|
+
* ```tsx
|
|
6713
|
+
* function SpringBox() {
|
|
6714
|
+
* const [target, setTarget] = useState(0);
|
|
6715
|
+
* const x = useSpringValue(target, { stiffness: 200, damping: 20 });
|
|
6716
|
+
*
|
|
6717
|
+
* return (
|
|
6718
|
+
* <div style={{ transform: `translateX(${x}px)` }}>
|
|
6719
|
+
* <button onClick={() => setTarget(t => t + 50)}>Move</button>
|
|
6720
|
+
* </div>
|
|
6721
|
+
* );
|
|
6722
|
+
* }
|
|
6723
|
+
* ```
|
|
6724
|
+
*/
|
|
6725
|
+
declare function useSpringValue(targetValue: number, config?: {
|
|
6726
|
+
stiffness?: number;
|
|
6727
|
+
damping?: number;
|
|
6728
|
+
mass?: number;
|
|
6729
|
+
}): number;
|
|
6730
|
+
|
|
6731
|
+
interface UseIdleOptions {
|
|
6732
|
+
/** Events that reset the idle timer */
|
|
6733
|
+
events?: (keyof WindowEventMap)[];
|
|
6734
|
+
/** Initial idle state (default: false) */
|
|
6735
|
+
initialState?: boolean;
|
|
6736
|
+
/** Whether the hook is enabled (default: true) */
|
|
6737
|
+
enabled?: boolean;
|
|
6738
|
+
}
|
|
6739
|
+
/**
|
|
6740
|
+
* Hook to detect user idle state
|
|
6741
|
+
* @param timeout - idle timeout in milliseconds
|
|
6742
|
+
* @param options - configuration options
|
|
6743
|
+
* @returns whether the user is idle
|
|
6744
|
+
*
|
|
6745
|
+
* @example
|
|
6746
|
+
* ```tsx
|
|
6747
|
+
* function App() {
|
|
6748
|
+
* const isIdle = useIdle(60000); // 1 minute
|
|
6749
|
+
*
|
|
6750
|
+
* if (isIdle) {
|
|
6751
|
+
* return <SessionTimeoutWarning />;
|
|
6752
|
+
* }
|
|
6753
|
+
*
|
|
6754
|
+
* return <MainContent />;
|
|
6755
|
+
* }
|
|
6756
|
+
* ```
|
|
6757
|
+
*/
|
|
6758
|
+
declare function useIdle(timeout: number, options?: UseIdleOptions): boolean;
|
|
6759
|
+
/**
|
|
6760
|
+
* Hook to detect user idle state with callbacks
|
|
6761
|
+
* @param timeout - idle timeout in milliseconds
|
|
6762
|
+
* @param onIdle - callback when user becomes idle
|
|
6763
|
+
* @param onActive - callback when user becomes active
|
|
6764
|
+
* @param options - configuration options
|
|
6765
|
+
* @returns whether the user is idle
|
|
6766
|
+
*
|
|
6767
|
+
* @example
|
|
6768
|
+
* ```tsx
|
|
6769
|
+
* function App() {
|
|
6770
|
+
* const isIdle = useIdleCallback(
|
|
6771
|
+
* 60000,
|
|
6772
|
+
* () => pauseVideo(),
|
|
6773
|
+
* () => resumeVideo()
|
|
6774
|
+
* );
|
|
6775
|
+
* }
|
|
6776
|
+
* ```
|
|
6777
|
+
*/
|
|
6778
|
+
declare function useIdleCallback(timeout: number, onIdle?: () => void, onActive?: () => void, options?: UseIdleOptions): boolean;
|
|
6779
|
+
|
|
6780
|
+
type VisibilityState = "visible" | "hidden" | "prerender";
|
|
6781
|
+
/**
|
|
6782
|
+
* Hook to detect document visibility state
|
|
6783
|
+
* @returns current visibility state
|
|
6784
|
+
*
|
|
6785
|
+
* @example
|
|
6786
|
+
* ```tsx
|
|
6787
|
+
* function VideoPlayer() {
|
|
6788
|
+
* const visibility = useDocumentVisibility();
|
|
6789
|
+
*
|
|
6790
|
+
* useEffect(() => {
|
|
6791
|
+
* if (visibility === 'hidden') {
|
|
6792
|
+
* pauseVideo();
|
|
6793
|
+
* }
|
|
6794
|
+
* }, [visibility]);
|
|
6795
|
+
*
|
|
6796
|
+
* return <video />;
|
|
6797
|
+
* }
|
|
6798
|
+
* ```
|
|
6799
|
+
*/
|
|
6800
|
+
declare function useDocumentVisibility(): VisibilityState;
|
|
6801
|
+
/**
|
|
6802
|
+
* Hook to detect if document is visible
|
|
6803
|
+
* @returns whether document is visible
|
|
6804
|
+
*
|
|
6805
|
+
* @example
|
|
6806
|
+
* ```tsx
|
|
6807
|
+
* function Timer() {
|
|
6808
|
+
* const isVisible = useDocumentIsVisible();
|
|
6809
|
+
*
|
|
6810
|
+
* // Pause timer when tab is not visible
|
|
6811
|
+
* useEffect(() => {
|
|
6812
|
+
* if (!isVisible) return;
|
|
6813
|
+
* const interval = setInterval(() => tick(), 1000);
|
|
6814
|
+
* return () => clearInterval(interval);
|
|
6815
|
+
* }, [isVisible]);
|
|
6816
|
+
* }
|
|
6817
|
+
* ```
|
|
6818
|
+
*/
|
|
6819
|
+
declare function useDocumentIsVisible(): boolean;
|
|
6820
|
+
/**
|
|
6821
|
+
* Hook to run callback when visibility changes
|
|
6822
|
+
* @param onVisible - callback when document becomes visible
|
|
6823
|
+
* @param onHidden - callback when document becomes hidden
|
|
6824
|
+
*
|
|
6825
|
+
* @example
|
|
6826
|
+
* ```tsx
|
|
6827
|
+
* function App() {
|
|
6828
|
+
* useDocumentVisibilityCallback(
|
|
6829
|
+
* () => refetchData(),
|
|
6830
|
+
* () => saveState()
|
|
6831
|
+
* );
|
|
6832
|
+
* }
|
|
6833
|
+
* ```
|
|
6834
|
+
*/
|
|
6835
|
+
declare function useDocumentVisibilityCallback(onVisible?: () => void, onHidden?: () => void): void;
|
|
6836
|
+
|
|
6837
|
+
/**
|
|
6838
|
+
* Hook to detect online/offline status
|
|
6839
|
+
* @returns whether the browser is online
|
|
6840
|
+
*
|
|
6841
|
+
* @example
|
|
6842
|
+
* ```tsx
|
|
6843
|
+
* function App() {
|
|
6844
|
+
* const isOnline = useOnlineStatus();
|
|
6845
|
+
*
|
|
6846
|
+
* if (!isOnline) {
|
|
6847
|
+
* return <OfflineWarning />;
|
|
6848
|
+
* }
|
|
6849
|
+
*
|
|
6850
|
+
* return <MainApp />;
|
|
6851
|
+
* }
|
|
6852
|
+
* ```
|
|
6853
|
+
*/
|
|
6854
|
+
declare function useOnlineStatus(): boolean;
|
|
6855
|
+
/**
|
|
6856
|
+
* Hook to run callbacks on online/offline status change
|
|
6857
|
+
* @param onOnline - callback when going online
|
|
6858
|
+
* @param onOffline - callback when going offline
|
|
6859
|
+
* @returns whether the browser is online
|
|
6860
|
+
*
|
|
6861
|
+
* @example
|
|
6862
|
+
* ```tsx
|
|
6863
|
+
* function App() {
|
|
6864
|
+
* const isOnline = useOnlineStatusCallback(
|
|
6865
|
+
* () => syncData(),
|
|
6866
|
+
* () => showOfflineToast()
|
|
6867
|
+
* );
|
|
6868
|
+
* }
|
|
6869
|
+
* ```
|
|
6870
|
+
*/
|
|
6871
|
+
declare function useOnlineStatusCallback(onOnline?: () => void, onOffline?: () => void): boolean;
|
|
6872
|
+
|
|
6873
|
+
interface UseFullscreenReturn {
|
|
6874
|
+
/** Whether currently in fullscreen */
|
|
6875
|
+
isFullscreen: boolean;
|
|
6876
|
+
/** Enter fullscreen */
|
|
6877
|
+
enter: () => Promise<void>;
|
|
6878
|
+
/** Exit fullscreen */
|
|
6879
|
+
exit: () => Promise<void>;
|
|
6880
|
+
/** Toggle fullscreen */
|
|
6881
|
+
toggle: () => Promise<void>;
|
|
6882
|
+
/** Whether fullscreen is supported */
|
|
6883
|
+
isSupported: boolean;
|
|
6884
|
+
}
|
|
6885
|
+
/**
|
|
6886
|
+
* Hook for fullscreen API
|
|
6887
|
+
* @param ref - element to make fullscreen (default: document)
|
|
6888
|
+
* @returns fullscreen state and controls
|
|
6889
|
+
*
|
|
6890
|
+
* @example
|
|
6891
|
+
* ```tsx
|
|
6892
|
+
* function VideoPlayer() {
|
|
6893
|
+
* const videoRef = useRef<HTMLVideoElement>(null);
|
|
6894
|
+
* const { isFullscreen, toggle, isSupported } = useFullscreen(videoRef);
|
|
6895
|
+
*
|
|
6896
|
+
* return (
|
|
6897
|
+
* <div>
|
|
6898
|
+
* <video ref={videoRef} src="/video.mp4" />
|
|
6899
|
+
* {isSupported && (
|
|
6900
|
+
* <button onClick={toggle}>
|
|
6901
|
+
* {isFullscreen ? 'Exit' : 'Enter'} Fullscreen
|
|
6902
|
+
* </button>
|
|
6903
|
+
* )}
|
|
6904
|
+
* </div>
|
|
6905
|
+
* );
|
|
6906
|
+
* }
|
|
6907
|
+
* ```
|
|
6908
|
+
*/
|
|
6909
|
+
declare function useFullscreen<T extends HTMLElement = HTMLElement>(ref?: RefObject<T | null>): UseFullscreenReturn;
|
|
6910
|
+
/**
|
|
6911
|
+
* Hook for fullscreen with automatic element ref
|
|
6912
|
+
* @returns ref to attach and fullscreen controls
|
|
6913
|
+
*
|
|
6914
|
+
* @example
|
|
6915
|
+
* ```tsx
|
|
6916
|
+
* function Gallery() {
|
|
6917
|
+
* const { ref, isFullscreen, toggle } = useFullscreenRef<HTMLDivElement>();
|
|
6918
|
+
*
|
|
6919
|
+
* return (
|
|
6920
|
+
* <div ref={ref}>
|
|
6921
|
+
* <img src="/photo.jpg" />
|
|
6922
|
+
* <button onClick={toggle}>Fullscreen</button>
|
|
6923
|
+
* </div>
|
|
6924
|
+
* );
|
|
6925
|
+
* }
|
|
6926
|
+
* ```
|
|
6927
|
+
*/
|
|
6928
|
+
declare function useFullscreenRef<T extends HTMLElement = HTMLElement>(): UseFullscreenReturn & {
|
|
6929
|
+
ref: RefObject<T | null>;
|
|
6930
|
+
};
|
|
6931
|
+
|
|
6932
|
+
interface GeolocationState {
|
|
6933
|
+
/** Whether currently loading */
|
|
6934
|
+
isLoading: boolean;
|
|
6935
|
+
/** Current position */
|
|
6936
|
+
position: GeolocationPosition | null;
|
|
6937
|
+
/** Error if failed */
|
|
6938
|
+
error: GeolocationPositionError | null;
|
|
6939
|
+
/** Latitude */
|
|
6940
|
+
latitude: number | null;
|
|
6941
|
+
/** Longitude */
|
|
6942
|
+
longitude: number | null;
|
|
6943
|
+
/** Accuracy in meters */
|
|
6944
|
+
accuracy: number | null;
|
|
6945
|
+
/** Altitude in meters */
|
|
6946
|
+
altitude: number | null;
|
|
6947
|
+
/** Altitude accuracy in meters */
|
|
6948
|
+
altitudeAccuracy: number | null;
|
|
6949
|
+
/** Heading in degrees */
|
|
6950
|
+
heading: number | null;
|
|
6951
|
+
/** Speed in m/s */
|
|
6952
|
+
speed: number | null;
|
|
6953
|
+
/** Timestamp of position */
|
|
6954
|
+
timestamp: number | null;
|
|
6955
|
+
}
|
|
6956
|
+
interface UseGeolocationOptions extends PositionOptions {
|
|
6957
|
+
/** Whether to watch position continuously (default: false) */
|
|
6958
|
+
watch?: boolean;
|
|
6959
|
+
/** Whether to get position immediately (default: true) */
|
|
6960
|
+
immediate?: boolean;
|
|
6961
|
+
}
|
|
6962
|
+
interface UseGeolocationReturn extends GeolocationState {
|
|
6963
|
+
/** Manually get current position */
|
|
6964
|
+
getCurrentPosition: () => void;
|
|
6965
|
+
/** Whether geolocation is supported */
|
|
6966
|
+
isSupported: boolean;
|
|
6967
|
+
}
|
|
6968
|
+
/**
|
|
6969
|
+
* Hook for Geolocation API
|
|
6970
|
+
* @param options - geolocation options
|
|
6971
|
+
* @returns geolocation state and controls
|
|
6972
|
+
*
|
|
6973
|
+
* @example
|
|
6974
|
+
* ```tsx
|
|
6975
|
+
* function LocationDisplay() {
|
|
6976
|
+
* const {
|
|
6977
|
+
* latitude,
|
|
6978
|
+
* longitude,
|
|
6979
|
+
* isLoading,
|
|
6980
|
+
* error,
|
|
6981
|
+
* getCurrentPosition,
|
|
6982
|
+
* } = useGeolocation({ immediate: false });
|
|
6983
|
+
*
|
|
6984
|
+
* if (isLoading) return <Spinner />;
|
|
6985
|
+
* if (error) return <Error message={error.message} />;
|
|
6986
|
+
*
|
|
6987
|
+
* return (
|
|
6988
|
+
* <div>
|
|
6989
|
+
* {latitude && longitude ? (
|
|
6990
|
+
* <p>Lat: {latitude}, Lng: {longitude}</p>
|
|
6991
|
+
* ) : (
|
|
6992
|
+
* <button onClick={getCurrentPosition}>Get Location</button>
|
|
6993
|
+
* )}
|
|
6994
|
+
* </div>
|
|
6995
|
+
* );
|
|
6996
|
+
* }
|
|
6997
|
+
* ```
|
|
6998
|
+
*/
|
|
6999
|
+
declare function useGeolocation(options?: UseGeolocationOptions): UseGeolocationReturn;
|
|
7000
|
+
/**
|
|
7001
|
+
* Hook to calculate distance between two coordinates
|
|
7002
|
+
* @param lat1 - latitude of first point
|
|
7003
|
+
* @param lon1 - longitude of first point
|
|
7004
|
+
* @param lat2 - latitude of second point
|
|
7005
|
+
* @param lon2 - longitude of second point
|
|
7006
|
+
* @returns distance in meters
|
|
7007
|
+
*
|
|
7008
|
+
* @example
|
|
7009
|
+
* ```tsx
|
|
7010
|
+
* function DistanceCalculator() {
|
|
7011
|
+
* const { latitude, longitude } = useGeolocation();
|
|
7012
|
+
* const targetLat = 40.7128;
|
|
7013
|
+
* const targetLon = -74.0060;
|
|
7014
|
+
*
|
|
7015
|
+
* const distance = useDistance(latitude, longitude, targetLat, targetLon);
|
|
7016
|
+
*
|
|
7017
|
+
* return <p>Distance to NYC: {(distance / 1000).toFixed(1)} km</p>;
|
|
7018
|
+
* }
|
|
7019
|
+
* ```
|
|
7020
|
+
*/
|
|
7021
|
+
declare function useDistance(lat1: number | null, lon1: number | null, lat2: number | null, lon2: number | null): number | null;
|
|
7022
|
+
|
|
7023
|
+
type PermissionNameType = "geolocation" | "notifications" | "push" | "midi" | "camera" | "microphone" | "speaker" | "device-info" | "background-fetch" | "background-sync" | "bluetooth" | "persistent-storage" | "ambient-light-sensor" | "accelerometer" | "gyroscope" | "magnetometer" | "clipboard-read" | "clipboard-write" | "display-capture" | "nfc";
|
|
7024
|
+
interface UsePermissionReturn {
|
|
7025
|
+
/** Current permission state */
|
|
7026
|
+
state: PermissionState | null;
|
|
7027
|
+
/** Whether permission is granted */
|
|
7028
|
+
isGranted: boolean;
|
|
7029
|
+
/** Whether permission is denied */
|
|
7030
|
+
isDenied: boolean;
|
|
7031
|
+
/** Whether permission requires prompt */
|
|
7032
|
+
isPrompt: boolean;
|
|
7033
|
+
/** Whether loading */
|
|
7034
|
+
isLoading: boolean;
|
|
7035
|
+
/** Whether supported */
|
|
7036
|
+
isSupported: boolean;
|
|
7037
|
+
/** Query permission status */
|
|
7038
|
+
query: () => Promise<PermissionState | null>;
|
|
7039
|
+
}
|
|
7040
|
+
/**
|
|
7041
|
+
* Hook for Permissions API
|
|
7042
|
+
* @param permissionName - name of permission to check
|
|
7043
|
+
* @returns permission state and controls
|
|
7044
|
+
*
|
|
7045
|
+
* @example
|
|
7046
|
+
* ```tsx
|
|
7047
|
+
* function NotificationButton() {
|
|
7048
|
+
* const { state, isGranted, isDenied, isPrompt } = usePermission('notifications');
|
|
7049
|
+
*
|
|
7050
|
+
* if (isDenied) {
|
|
7051
|
+
* return <p>Notifications are blocked. Please enable in settings.</p>;
|
|
7052
|
+
* }
|
|
7053
|
+
*
|
|
7054
|
+
* if (isPrompt) {
|
|
7055
|
+
* return (
|
|
7056
|
+
* <button onClick={() => Notification.requestPermission()}>
|
|
7057
|
+
* Enable Notifications
|
|
7058
|
+
* </button>
|
|
7059
|
+
* );
|
|
7060
|
+
* }
|
|
7061
|
+
*
|
|
7062
|
+
* if (isGranted) {
|
|
7063
|
+
* return <p>Notifications are enabled!</p>;
|
|
7064
|
+
* }
|
|
7065
|
+
*
|
|
7066
|
+
* return null;
|
|
7067
|
+
* }
|
|
7068
|
+
* ```
|
|
7069
|
+
*/
|
|
7070
|
+
declare function usePermission(permissionName: PermissionNameType): UsePermissionReturn;
|
|
7071
|
+
/**
|
|
7072
|
+
* Hook to request notification permission
|
|
7073
|
+
* @returns permission state and request function
|
|
7074
|
+
*
|
|
7075
|
+
* @example
|
|
7076
|
+
* ```tsx
|
|
7077
|
+
* function NotificationSetup() {
|
|
7078
|
+
* const { permission, request, isSupported } = useNotificationPermission();
|
|
7079
|
+
*
|
|
7080
|
+
* if (!isSupported) {
|
|
7081
|
+
* return <p>Notifications not supported</p>;
|
|
7082
|
+
* }
|
|
7083
|
+
*
|
|
7084
|
+
* return (
|
|
7085
|
+
* <button onClick={request} disabled={permission !== 'default'}>
|
|
7086
|
+
* {permission === 'granted' ? 'Enabled' : 'Enable Notifications'}
|
|
7087
|
+
* </button>
|
|
7088
|
+
* );
|
|
7089
|
+
* }
|
|
7090
|
+
* ```
|
|
7091
|
+
*/
|
|
7092
|
+
declare function useNotificationPermission(): {
|
|
7093
|
+
permission: NotificationPermission;
|
|
7094
|
+
request: () => Promise<NotificationPermission>;
|
|
7095
|
+
isSupported: boolean;
|
|
7096
|
+
};
|
|
7097
|
+
/**
|
|
7098
|
+
* Hook to request camera/microphone permission
|
|
7099
|
+
* @param constraints - MediaStreamConstraints
|
|
7100
|
+
* @returns stream state and request function
|
|
7101
|
+
*
|
|
7102
|
+
* @example
|
|
7103
|
+
* ```tsx
|
|
7104
|
+
* function VideoChat() {
|
|
7105
|
+
* const { stream, error, request, stop } = useMediaPermission({
|
|
7106
|
+
* video: true,
|
|
7107
|
+
* audio: true,
|
|
7108
|
+
* });
|
|
7109
|
+
*
|
|
7110
|
+
* return (
|
|
7111
|
+
* <div>
|
|
7112
|
+
* {error && <p>Permission denied: {error.message}</p>}
|
|
7113
|
+
* {!stream && <button onClick={request}>Start Camera</button>}
|
|
7114
|
+
* {stream && (
|
|
7115
|
+
* <>
|
|
7116
|
+
* <video autoPlay ref={(el) => el && (el.srcObject = stream)} />
|
|
7117
|
+
* <button onClick={stop}>Stop</button>
|
|
7118
|
+
* </>
|
|
7119
|
+
* )}
|
|
7120
|
+
* </div>
|
|
7121
|
+
* );
|
|
7122
|
+
* }
|
|
7123
|
+
* ```
|
|
7124
|
+
*/
|
|
7125
|
+
declare function useMediaPermission(constraints: MediaStreamConstraints): {
|
|
7126
|
+
stream: MediaStream | null;
|
|
7127
|
+
error: Error | null;
|
|
7128
|
+
isLoading: boolean;
|
|
7129
|
+
request: () => Promise<MediaStream | null>;
|
|
7130
|
+
stop: () => void;
|
|
7131
|
+
isSupported: boolean;
|
|
7132
|
+
};
|
|
7133
|
+
|
|
7134
|
+
declare global {
|
|
7135
|
+
interface Window {
|
|
7136
|
+
SpeechRecognition?: any;
|
|
7137
|
+
webkitSpeechRecognition?: any;
|
|
7138
|
+
}
|
|
7139
|
+
}
|
|
7140
|
+
interface UseSpeechSynthesisOptions {
|
|
7141
|
+
/** Voice to use */
|
|
7142
|
+
voice?: SpeechSynthesisVoice | null;
|
|
7143
|
+
/** Speech rate (0.1 - 10) */
|
|
7144
|
+
rate?: number;
|
|
7145
|
+
/** Speech pitch (0 - 2) */
|
|
7146
|
+
pitch?: number;
|
|
7147
|
+
/** Speech volume (0 - 1) */
|
|
7148
|
+
volume?: number;
|
|
7149
|
+
/** Language code */
|
|
7150
|
+
lang?: string;
|
|
7151
|
+
}
|
|
7152
|
+
interface UseSpeechSynthesisReturn {
|
|
7153
|
+
/** Speak text */
|
|
7154
|
+
speak: (text: string) => void;
|
|
7155
|
+
/** Stop speaking */
|
|
7156
|
+
stop: () => void;
|
|
7157
|
+
/** Pause speaking */
|
|
7158
|
+
pause: () => void;
|
|
7159
|
+
/** Resume speaking */
|
|
7160
|
+
resume: () => void;
|
|
7161
|
+
/** Whether currently speaking */
|
|
7162
|
+
isSpeaking: boolean;
|
|
7163
|
+
/** Whether paused */
|
|
7164
|
+
isPaused: boolean;
|
|
7165
|
+
/** Whether supported */
|
|
7166
|
+
isSupported: boolean;
|
|
7167
|
+
/** Available voices */
|
|
7168
|
+
voices: SpeechSynthesisVoice[];
|
|
7169
|
+
}
|
|
7170
|
+
/**
|
|
7171
|
+
* Hook for Speech Synthesis (Text-to-Speech)
|
|
7172
|
+
* @param options - speech options
|
|
7173
|
+
* @returns speech controls and state
|
|
7174
|
+
*
|
|
7175
|
+
* @example
|
|
7176
|
+
* ```tsx
|
|
7177
|
+
* function TextReader() {
|
|
7178
|
+
* const { speak, stop, isSpeaking, voices } = useSpeechSynthesis({
|
|
7179
|
+
* rate: 1,
|
|
7180
|
+
* pitch: 1,
|
|
7181
|
+
* });
|
|
7182
|
+
*
|
|
7183
|
+
* return (
|
|
7184
|
+
* <div>
|
|
7185
|
+
* <select onChange={(e) => setVoice(voices.find(v => v.name === e.target.value))}>
|
|
7186
|
+
* {voices.map((voice) => (
|
|
7187
|
+
* <option key={voice.name} value={voice.name}>{voice.name}</option>
|
|
7188
|
+
* ))}
|
|
7189
|
+
* </select>
|
|
7190
|
+
* <button onClick={() => speak("Hello, world!")}>
|
|
7191
|
+
* {isSpeaking ? 'Speaking...' : 'Speak'}
|
|
7192
|
+
* </button>
|
|
7193
|
+
* {isSpeaking && <button onClick={stop}>Stop</button>}
|
|
7194
|
+
* </div>
|
|
7195
|
+
* );
|
|
7196
|
+
* }
|
|
7197
|
+
* ```
|
|
7198
|
+
*/
|
|
7199
|
+
declare function useSpeechSynthesis(options?: UseSpeechSynthesisOptions): UseSpeechSynthesisReturn;
|
|
7200
|
+
interface UseSpeechRecognitionOptions {
|
|
7201
|
+
/** Language code (default: 'en-US') */
|
|
7202
|
+
lang?: string;
|
|
7203
|
+
/** Continuous listening (default: false) */
|
|
7204
|
+
continuous?: boolean;
|
|
7205
|
+
/** Interim results (default: true) */
|
|
7206
|
+
interimResults?: boolean;
|
|
7207
|
+
}
|
|
7208
|
+
interface UseSpeechRecognitionReturn {
|
|
7209
|
+
/** Start listening */
|
|
7210
|
+
start: () => void;
|
|
7211
|
+
/** Stop listening */
|
|
7212
|
+
stop: () => void;
|
|
7213
|
+
/** Abort listening */
|
|
7214
|
+
abort: () => void;
|
|
7215
|
+
/** Whether currently listening */
|
|
7216
|
+
isListening: boolean;
|
|
7217
|
+
/** Recognized transcript */
|
|
7218
|
+
transcript: string;
|
|
7219
|
+
/** Interim transcript */
|
|
7220
|
+
interimTranscript: string;
|
|
7221
|
+
/** Whether supported */
|
|
7222
|
+
isSupported: boolean;
|
|
7223
|
+
/** Error if any */
|
|
7224
|
+
error: Error | null;
|
|
7225
|
+
/** Reset transcript */
|
|
7226
|
+
reset: () => void;
|
|
7227
|
+
}
|
|
7228
|
+
/**
|
|
7229
|
+
* Hook for Speech Recognition (Speech-to-Text)
|
|
7230
|
+
* @param options - recognition options
|
|
7231
|
+
* @returns recognition controls and state
|
|
7232
|
+
*
|
|
7233
|
+
* @example
|
|
7234
|
+
* ```tsx
|
|
7235
|
+
* function VoiceInput() {
|
|
7236
|
+
* const {
|
|
7237
|
+
* transcript,
|
|
7238
|
+
* isListening,
|
|
7239
|
+
* start,
|
|
7240
|
+
* stop,
|
|
7241
|
+
* reset,
|
|
7242
|
+
* isSupported,
|
|
7243
|
+
* } = useSpeechRecognition({ lang: 'en-US' });
|
|
7244
|
+
*
|
|
7245
|
+
* if (!isSupported) {
|
|
7246
|
+
* return <p>Speech recognition not supported</p>;
|
|
7247
|
+
* }
|
|
7248
|
+
*
|
|
7249
|
+
* return (
|
|
7250
|
+
* <div>
|
|
7251
|
+
* <p>{transcript || 'Start speaking...'}</p>
|
|
7252
|
+
* <button onClick={isListening ? stop : start}>
|
|
7253
|
+
* {isListening ? '🔴 Stop' : '🎤 Start'}
|
|
7254
|
+
* </button>
|
|
7255
|
+
* <button onClick={reset}>Clear</button>
|
|
7256
|
+
* </div>
|
|
7257
|
+
* );
|
|
7258
|
+
* }
|
|
7259
|
+
* ```
|
|
7260
|
+
*/
|
|
7261
|
+
declare function useSpeechRecognition(options?: UseSpeechRecognitionOptions): UseSpeechRecognitionReturn;
|
|
7262
|
+
|
|
4946
7263
|
/**
|
|
4947
7264
|
* Combines class names with Tailwind CSS class merging
|
|
4948
7265
|
* @example cn("px-2 py-1", "px-4") => "py-1 px-4"
|
|
4949
7266
|
*/
|
|
4950
7267
|
declare function cn(...inputs: ClassValue[]): string;
|
|
4951
7268
|
|
|
4952
|
-
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionBar, ActionBarButton, type ActionBarProps, ActionGroup, type ActionGroupItem, type ActionGroupProps, ActionIcon, type ActionIconProps, ActionMenu, type ActionMenuGroup, type ActionMenuItem, type ActionMenuProps, ActionSheet, type ActionSheetItem, type ActionSheetProps, Alert, AlertDescription, type AlertRadius, AlertTitle, type AlertType, type AlertVariant, type AllowDropInfo, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, type AppShellProps, AppShellSidebar, AreaChart, type AreaChartProps, AspectRatio, AuthDivider, AuthFooterLinks, AuthForm, AuthHeader, AuthLayout, type AuthLayoutProps, AuthSocialButtons, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, AvatarImage, BackTop, type BackTopProps, Badge, type BadgeProps, Banner, type BannerProps, BarChart, type BarChartProps, BatteryMeter, Blockquote, type BlockquoteProps, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, Bounce, type BounceProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COUNTRIES, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardContent, CardFooter, CardHeader, Carousel, type CarouselApi, CarouselContent, CarouselItem, type CarouselItemProps, CarouselNext, CarouselPrevious, type CarouselProps, Center, type ChartDataPoint, type CheckInfo, Checkbox, Checkmark, type CheckmarkProps, type CheckmarkSize, type CheckmarkVariant, Chip, type ChipProps, CircularProgress, CloseButton, type CloseButtonProps, Code, Collapse, type CollapseProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorArea, type ColorAreaProps, type ColorAreaValue, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderChannel, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Confetti, type ConfettiOptions, type ConfettiProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextualHelp, type ContextualHelpProps, CopyButton, type CopyButtonProps, Counter, type CounterProps, type Country, CurrencyInput, type CurrencyInputProps, DEFAULT_COLORS, DashboardGrid, DashboardLayout, type DashboardLayoutProps, DashboardPage, DashboardPageHeader, DataTable, type DataTableProps, DateField, type DateFieldProps, type DateFormat, DateInput, type DateInputProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DefaultErrorFallback, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiskUsageMeter, Dots, type DragInfo, type DraggableConfig, Drawer, type DrawerBackdrop, DrawerBody, DrawerClose, type DrawerCollapsible, DrawerContent, DrawerDescription, DrawerFooter, DrawerGroup, DrawerGroupLabel, DrawerHeader, DrawerInset, DrawerMenu, DrawerMenuButton, DrawerMenuItem, type DrawerMode, type DrawerPlacement, type DrawerProps, DrawerProvider, DrawerSeparator, DrawerSidebar, type DrawerSidebarProps, type DrawerSize, DrawerTitle, DrawerToggle, DrawerTrigger, type DrawerVariant, type DropInfo, Dropdown, DropdownCheckboxItem, type DropdownCheckboxItemProps, DropdownContent, type DropdownContentProps, DropdownGroup, type DropdownGroupProps, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownLabelProps, type DropdownProps, DropdownRadioGroup, type DropdownRadioGroupProps, DropdownRadioItem, type DropdownRadioItemProps, DropdownSeparator, type DropdownSeparatorProps, DropdownShortcut, DropdownSub, DropdownSubContent, type DropdownSubContentProps, type DropdownSubProps, DropdownSubTrigger, type DropdownSubTriggerProps, DropdownTrigger, type DropdownTriggerProps, EMOJIS, EMOJI_CATEGORIES, EmojiPicker, type EmojiPickerProps, EmptyState, ErrorBoundary, type ErrorBoundaryProps, Expand, type ExpandInfo, type ExpandProps, FAB, type FABAction, Fade, type FadeProps, FieldContext, type FieldContextValue, type FieldState, type FileRejection, FileUpload, type FileUploadProps, type FlatCheckInfo, type FlatSelectInfo, Flex, type FlexProps, Flip, type FlipDirection, type FlipProps, FloatingActionButton, type FloatingActionButtonProps, Form, FormContext, type FormContextValue, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormItem, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, type FormState, FullCalendar, type FullCalendarProps, Glow, type GlowProps, Grid, GridItem, type GridItemProps, GridList, type GridListItem, type GridListProps, type GridProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, H4, type H4Props, HStack, HoverCard, HoverCardContent, HoverCardTrigger, IconButton, type IconButtonProps, IllustratedMessage, type IllustratedMessageProps, Image, ImageCropper, type ImageCropperProps, ImageViewer, type ImageViewerProps, ImageViewerTrigger, type ImageViewerTriggerProps, Indicator, type IndicatorProps, IndicatorWrapper, type IndicatorWrapperProps, InfiniteScroll, type InfiniteScrollProps, InlineAlert, type InlineAlertProps, InlineCode, type InlineCodeProps, Input, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, type KbdProps, Label, LabeledValue, LabeledValueGroup, type LabeledValueGroupProps, type LabeledValueProps, Large, type LargeProps, Lead, type LeadProps, LineChart, type LineChartProps, Link, type LinkProps, List, type ListDataItem, ListItemComponent as ListItem, type ListItemComponentProps, ListItemText, type ListItemTextProps, type ListProps, ListView, type ListViewItem, type ListViewProps, Listbox, ListboxItem, type ListboxOption, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, MASK_PRESETS, type MaskChar, type MaskDefinition, type MaskPreset, MaskedInput, type MaskedInputProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Meter, type MeterProps, Modal, type ModalBackdrop, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, type ModalPlacement, ModalPortal, type ModalProps, ModalRoot, type ModalScrollBehavior, ModalTitle, ModalTrigger, Muted, type MutedProps, NProgress, type NProgressProps, Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarLink, type NavbarProps, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type Notification, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, type NotificationCenterProps, NotificationCenterProvider, type NotificationCenterProviderProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NotificationList, type NotificationListProps, NumberField, type NumberFieldProps, NumberInput, type NumberInputProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationState, Paragraph, type ParagraphProps, Parallax, type ParallaxProps, PasswordInput, type PasswordInputProps, PhoneInput, type PhoneInputProps, PieChart, type PieChartProps, Pop, type PopProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Portal, type PortalProps, Progress, PullToRefresh, type PullToRefreshProps, Pulse, type PulseProps, type PulseSpeed, QRCode, type QRCodeProps, RadioGroup, RadioGroupItem, RangeSlider, type RangeSliderProps, Rating, type RatingProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, RichTextEditor, type RichTextEditorProps, Ripple, type RippleProps, Rotate, type RotateProps, Scale, type ScaleOrigin, type ScaleProps, ScrollArea, type ScrollAreaProps, ScrollProgress, type ScrollProgressPosition, type ScrollProgressProps, ScrollReveal, type ScrollRevealDirection, type ScrollRevealProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchField, type SearchFieldProps, type SearchSuggestion, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, type SelectInfo, type SelectOption, type SelectProps, Separator, type SeparatorProps, SettingsCard, SettingsHeader, SettingsLayout, type SettingsLayoutProps, SettingsNavItem, SettingsRow, SettingsSection, SettingsSeparator, Shake, type ShakeIntensity, type ShakeProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shimmer, type ShimmerDirection, type ShimmerProps, SimpleGrid, Skeleton, Slide, type SlideDirection, type SlideProps, Slider, Small, type SmallProps, Snippet, type SortDirection, type SortState, type SortableItem, SortableList, Spacer, type SpacerProps, Sparkles, type SparklesProps, Spinner, type SpotlightItem, SpotlightSearch, type SpotlightSearchProps, StatCard, StatusLight, type StatusLightProps, Step, type StepProps, Steps, type StepsProps, type SwipeAction, SwipeActions, type SwipeActionsProps, Switch, type SwitchColor, type SwitchProps, type SwitchSize, Table, TableBody, TableCaption, TableCell, type TableColumn, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, TextBadge, type TextBadgeProps, TextField, type TextFieldProps, TextReveal, type TextRevealDirection, type TextRevealProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, TimeField, type TimeFieldProps, TimeInput, type TimeInputProps, TimePicker, type TimePickerProps, type TimeValue, Timeline, TimelineContent, TimelineItem, TimelineOpposite, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TransitionProps, Tree, type TreeNode, type TreeProps, Typewriter, type TypewriterProps, UL, type ULProps, type UploadedFile, User, VStack, type ValidationRule, type ViewerImage, VirtualList, type VirtualListProps, VisuallyHidden, type VisuallyHiddenProps, Well, type WellProps, Wiggle, type WiggleProps, WordRotate, type WordRotateProps, actionBarVariants, actionGroupVariants, actionIconVariants, actionMenuTriggerVariants, actionSheetItemVariants, alertVariants, appShellVariants, applyMask, authLayoutVariants, autocompleteInputVariants, avatarGroupVariants, backTopVariants, badgeIndicatorVariants, bannerVariants, bottomNavigationVariants, buttonGroupVariants, buttonVariants, cardVariants, carouselVariants, chartContainerVariants, chipVariants, circularProgressVariants, closeButtonVariants, cn, codeVariants, colorAreaVariants, colorFieldVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, colorWheelVariants, confirmDialogIconVariants, contextualHelpTriggerVariants, copyButtonVariants, currencyInputVariants, dashboardLayoutVariants, dateFieldVariants, dateInputVariants, dotsVariants, drawerMenuButtonVariants, emojiPickerVariants, emptyStateVariants, fabVariants, fileUploadVariants, flexVariants, formatCurrency, formatDate, formatFileSize, formatPhoneNumber, fullCalendarVariants, getFileIcon, getMaskPlaceholder, gridItemVariants, gridListItemVariants, gridListVariants, gridVariants, hexToRgb, hsvToRgb, iconButtonVariants, illustratedMessageVariants, imageCropperVariants, imageVariants, indicatorVariants, infiniteScrollLoaderVariants, infiniteScrollVariants, inlineAlertVariants, inputOTPVariants, inputSizeVariants, kanbanBoardVariants, kanbanCardVariants, kanbanColumnVariants, kbdVariants, labelSizeVariants, labeledValueGroupVariants, labeledValueVariants, linkVariants, listItemVariants, listVariants, listViewItemVariants, listViewVariants, listboxItemVariants, listboxVariants, loadingOverlayVariants, loadingVariants, maskedInputVariants, meterVariants, modalContentVariants, navbarVariants, navigationMenuLinkStyle, navigationMenuTriggerStyle, nprogressVariants, numberFieldVariants, parseDate, parseFormattedValue, phoneInputVariants, pullToRefreshVariants, qrCodeVariants, rangeSliderVariants, ratingVariants, rgbToHex, rgbToHsv, richTextEditorVariants, scrollShadowVariants, searchBarVariants, searchFieldVariants, segmentedControlItemVariants, segmentedControlVariants, selectVariants, settingsLayoutVariants, sheetVariants, skeletonVariants, snippetVariants, sortableItemVariants, sortableListVariants, spinnerVariants, statCardVariants, statusLightVariants, stepVariants, stepsVariants, swipeActionVariants, swipeActionsVariants, colorMap as switchColors, tagGroupItemVariants, tagGroupVariants, tagVariants, textBadgeVariants, textFieldVariants, themeToggleVariants, timeFieldVariants, timeInputVariants, timelineItemVariants, timelineVariants, toggleVariants, treeItemVariants, treeVariants, unmask, useButtonGroup, useCarousel, useConfetti, useConfirmDialog, useDrawer, useFieldContext, useFormContext, useKeyboardShortcut, useNotificationCenter, useSpotlight, userVariants, validateFile, validators, virtualListVariants, wellVariants };
|
|
7269
|
+
/**
|
|
7270
|
+
* Password validation utilities for consistent validation across components
|
|
7271
|
+
*/
|
|
7272
|
+
interface PasswordRequirement {
|
|
7273
|
+
label: string;
|
|
7274
|
+
test: (password: string) => boolean;
|
|
7275
|
+
}
|
|
7276
|
+
/**
|
|
7277
|
+
* Default password requirements for strong passwords
|
|
7278
|
+
*/
|
|
7279
|
+
declare const defaultPasswordRequirements: PasswordRequirement[];
|
|
7280
|
+
/**
|
|
7281
|
+
* Calculate password strength based on requirements
|
|
7282
|
+
* @returns Number between 0 and 1 representing strength
|
|
7283
|
+
*/
|
|
7284
|
+
declare function calculatePasswordStrength(password: string, requirements?: PasswordRequirement[]): number;
|
|
7285
|
+
/**
|
|
7286
|
+
* Get password strength color based on strength percentage
|
|
7287
|
+
*/
|
|
7288
|
+
declare function getPasswordStrengthColor(strength: number): string;
|
|
7289
|
+
/**
|
|
7290
|
+
* Get password strength label
|
|
7291
|
+
*/
|
|
7292
|
+
declare function getPasswordStrengthLabel(strength: number): string;
|
|
7293
|
+
|
|
7294
|
+
export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps, ActionBar, ActionBarButton, type ActionBarProps, ActionGroup, type ActionGroupItem, type ActionGroupProps, ActionSheet, type ActionSheetItem, type ActionSheetProps, Alert, AlertDescription, type AlertRadius, AlertTitle, type AlertType, type AlertVariant, type AllowDropInfo, AreaChart, type AreaChartProps, AspectRatio, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarFallback, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, AvatarImage, BackTop, type BackTopProps, Badge, type BadgeProps, Banner, type BannerProps, BarChart, type BarChartProps, BatteryMeter, Blockquote, type BlockquoteProps, BottomNavigation, type BottomNavigationItem, type BottomNavigationProps, Bounce, type BounceProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, COUNTRIES, Calendar, type CalendarEvent, type CalendarProps, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, type CarouselApi, CarouselContent, CarouselItem, type CarouselItemProps, CarouselNext, CarouselPrevious, type CarouselProps, type ChartDataPoint, type CheckInfo, Checkbox, Checkmark, type CheckmarkProps, type CheckmarkSize, type CheckmarkVariant, Chip, type ChipProps, CircularProgress, CloseButton, type CloseButtonProps, Code, Collapse, type CollapseProps, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorArea, type ColorAreaProps, type ColorAreaValue, ColorField, type ColorFieldProps, ColorPicker, type ColorPickerProps, ColorSlider, type ColorSliderChannel, type ColorSliderProps, ColorSwatch, ColorSwatchPicker, type ColorSwatchPickerProps, type ColorSwatchProps, ColorWheel, type ColorWheelProps, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Confetti, type ConfettiOptions, type ConfettiProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ContextualHelp, type ContextualHelpProps, CopyButton, type CopyButtonProps, Counter, type CounterProps, type Country, CurrencyInput, type CurrencyInputProps, DEFAULT_COLORS, DataTable, type DataTableProps, DateField, type DateFieldProps, type DateFormat, DateInput, type DateInputProps, DatePicker, type DatePickerProps, DateRangePicker, type DateRangePickerProps, DefaultErrorFallback, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiskUsageMeter, type DragInfo, type DraggableConfig, Drawer, type DrawerBackdrop, DrawerBody, DrawerClose, type DrawerCollapsible, DrawerContent, DrawerDescription, DrawerFooter, DrawerGroup, DrawerGroupLabel, DrawerHeader, DrawerInset, DrawerMenu, DrawerMenuButton, DrawerMenuItem, type DrawerMode, type DrawerPlacement, type DrawerProps, DrawerProvider, DrawerSeparator, DrawerSidebar, type DrawerSidebarProps, type DrawerSize, DrawerTitle, DrawerToggle, DrawerTrigger, type DrawerVariant, type DropInfo, Dropdown, DropdownContent, type DropdownContentProps, DropdownGroup, type DropdownGroupProps, DropdownItem, type DropdownItemProps, DropdownLabel, type DropdownProps, DropdownSection, type DropdownSectionProps, DropdownSeparator, type DropdownSeparatorProps, DropdownShortcut, DropdownSub, DropdownSubContent, type DropdownSubContentProps, type DropdownSubProps, DropdownSubTrigger, type DropdownSubTriggerProps, DropdownTrigger, type DropdownTriggerProps, EMOJIS, EMOJI_CATEGORIES, EmojiPicker, type EmojiPickerProps, EmptyState, ErrorBoundary, type ErrorBoundaryProps, Expand, type ExpandInfo, type ExpandProps, FAB, type FABAction, Fade, type FadeProps, FieldContext, type FieldContextValue, type FieldState, type FileRejection, FileUpload, type FileUploadProps, type FlatCheckInfo, type FlatSelectInfo, Flip, type FlipDirection, type FlipProps, FloatingActionButton, type FloatingActionButtonProps, Form, FormContext, type FormContextValue, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormItem, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, type FormState, FullCalendar, type FullCalendarProps, Glow, type GlowProps, GridList, type GridListItem, type GridListProps, H1, type H1Props, H2, type H2Props, H3, type H3Props, H4, type H4Props, HoverCard, HoverCardContent, HoverCardTrigger, IllustratedMessage, type IllustratedMessageProps, Image, ImageCropper, type ImageCropperProps, ImageViewer, type ImageViewerProps, ImageViewerTrigger, type ImageViewerTriggerProps, Indicator, type IndicatorProps, IndicatorWrapper, type IndicatorWrapperProps, InfiniteScroll, type InfiniteScrollProps, InlineAlert, type InlineAlertProps, InlineCode, type InlineCodeProps, Input, InputOTP, InputOTPGroup, type InputOTPProps, InputOTPSeparator, InputOTPSlot, type InputOTPSlotProps, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Kbd, type KbdProps, Label, LabeledValue, LabeledValueGroup, type LabeledValueGroupProps, type LabeledValueProps, Large, type LargeProps, Lead, type LeadProps, LineChart, type LineChartProps, Link, type LinkProps, List, type ListDataItem, ListItemComponent as ListItem, type ListItemComponentProps, ListItemText, type ListItemTextProps, type ListProps, ListView, type ListViewItem, type ListViewProps, Listbox, ListboxItem, type ListboxOption, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, MASK_PRESETS, type MaskChar, type MaskDefinition, type MaskPreset, MaskedInput, type MaskedInputProps, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Meter, type MeterProps, Modal, type ModalBackdrop, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, type ModalPlacement, ModalPortal, type ModalProps, ModalRoot, type ModalScrollBehavior, ModalTitle, ModalTrigger, Muted, type MutedProps, NProgress, type NProgressProps, Navbar, NavbarBrand, NavbarContent, NavbarItem, NavbarLink, type NavbarProps, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type Notification, NotificationCenter, NotificationCenterContent, type NotificationCenterContentProps, type NotificationCenterProps, NotificationCenterProvider, type NotificationCenterProviderProps, NotificationCenterTrigger, type NotificationCenterTriggerProps, NotificationItem, type NotificationItemProps, NotificationList, type NotificationListProps, NumberField, type NumberFieldProps, NumberInput, type NumberInputProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, type PaginationState, Paragraph, type ParagraphProps, Parallax, type ParallaxProps, PasswordInput, type PasswordInputProps, type PasswordRequirement, PhoneInput, type PhoneInputProps, PieChart, type PieChartProps, Pop, type PopProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, PullToRefresh, type PullToRefreshProps, Pulse, type PulseProps, type PulseSpeed, QRCode, type QRCodeProps, RadioGroup, RadioGroupItem, RangeSlider, type RangeSliderProps, Rating, type RatingProps, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, RichTextEditor, type RichTextEditorProps, Ripple, type RippleProps, Rotate, type RotateProps, Scale, type ScaleOrigin, type ScaleProps, ScrollArea, type ScrollAreaProps, ScrollProgress, type ScrollProgressPosition, type ScrollProgressProps, ScrollReveal, type ScrollRevealDirection, type ScrollRevealProps, ScrollShadow, type ScrollShadowProps, SearchBar, type SearchBarProps, SearchField, type SearchFieldProps, type SearchSuggestion, SegmentedControl, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, Select, type SelectInfo, type SelectOption, type SelectProps, Separator, type SeparatorProps, Shake, type ShakeIntensity, type ShakeProps, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shimmer, type ShimmerDirection, type ShimmerProps, Skeleton, Slide, type SlideDirection, type SlideProps, Slider, Small, type SmallProps, Snippet, type SortDirection, type SortState, type SortableItem, SortableList, Sparkles, type SparklesProps, Spinner, type SpotlightItem, SpotlightSearch, type SpotlightSearchProps, StatCard, StatusLight, type StatusLightProps, Step, type StepProps, Steps, type StepsProps, type SwipeAction, SwipeActions, type SwipeActionsProps, Switch, type SwitchColor, type SwitchProps, type SwitchSize, Table, TableBody, TableCaption, TableCell, type TableColumn, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, type Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, TextBadge, type TextBadgeProps, TextField, type TextFieldProps, TextReveal, type TextRevealDirection, type TextRevealProps, Textarea, type TextareaProps, ThemeProvider, type ThemeProviderProps, ThemeToggle, type ThemeToggleProps, TimeField, type TimeFieldProps, TimeInput, type TimeInputProps, TimePicker, type TimePickerProps, type TimeValue, Timeline, TimelineContent, TimelineItem, TimelineOpposite, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type TransitionProps, Tree, type TreeNode, type TreeProps, Typewriter, type TypewriterProps, UL, type ULProps, type UploadedFile, User, type ValidationRule, type ViewerImage, VirtualList, type VirtualListProps, Wiggle, type WiggleProps, WordRotate, type WordRotateProps, actionBarVariants, actionGroupVariants, actionSheetItemVariants, alertVariants, applyMask, autocompleteInputVariants, avatarGroupVariants, backTopVariants, badgeIndicatorVariants, bannerVariants, bottomNavigationVariants, buttonGroupVariants, buttonVariants, calculatePasswordStrength, cardVariants, carouselVariants, chartContainerVariants, chipVariants, circularProgressVariants, closeButtonVariants, cn, codeVariants, colorAreaVariants, colorFieldVariants, colorSliderVariants, colorSwatchPickerVariants, colorSwatchVariants, colorWheelVariants, confirmDialogIconVariants, contextualHelpTriggerVariants, copyButtonVariants, currencyInputVariants, dateFieldVariants, dateInputVariants, defaultPasswordRequirements, drawerMenuButtonVariants, emojiPickerVariants, emptyStateVariants, fabVariants, fileUploadVariants, formatCurrency, formatDate, formatFileSize, formatPhoneNumber, fullCalendarVariants, getFileIcon, getMaskPlaceholder, getPasswordStrengthColor, getPasswordStrengthLabel, gridListItemVariants, gridListVariants, hexToRgb, hsvToRgb, illustratedMessageVariants, imageCropperVariants, imageVariants, indicatorVariants, infiniteScrollLoaderVariants, infiniteScrollVariants, inlineAlertVariants, inputOTPVariants, inputSizeVariants, kanbanBoardVariants, kanbanCardVariants, kanbanColumnVariants, kbdVariants, labelSizeVariants, labeledValueGroupVariants, labeledValueVariants, linkVariants, listItemVariants, listVariants, listViewItemVariants, listViewVariants, listboxItemVariants, listboxVariants, loadingOverlayVariants, loadingVariants, maskedInputVariants, meterVariants, modalContentVariants, navbarVariants, navigationMenuLinkStyle, navigationMenuTriggerStyle, nprogressVariants, numberFieldVariants, parseDate, parseFormattedValue, phoneInputVariants, pullToRefreshVariants, qrCodeVariants, rangeSliderVariants, ratingVariants, rgbToHex, rgbToHsv, richTextEditorVariants, scrollShadowVariants, searchBarVariants, searchFieldVariants, segmentedControlItemVariants, segmentedControlVariants, selectVariants, sheetVariants, skeletonVariants, snippetVariants, sortableItemVariants, sortableListVariants, spinnerVariants, statCardVariants, statusLightVariants, stepVariants, stepsVariants, swipeActionVariants, swipeActionsVariants, colorMap as switchColors, tagGroupItemVariants, tagGroupVariants, tagVariants, textBadgeVariants, textFieldVariants, themeToggleVariants, timeFieldVariants, timeInputVariants, timelineItemVariants, timelineVariants, toggleVariants, treeItemVariants, treeVariants, unmask, useAnimatedValue, useAsync, useAsyncRetry, useBodyScrollLock, useBooleanToggle, useBreakpoint, useBreakpoints, useButtonGroup, useCarousel, useClickOutside, useClickOutsideMultiple, useConfetti, useConfirmDialog, useCopy, useCopyToClipboard, useCountdown, useCounter, useCycle, useDebounce, useDebouncedCallback, useDebouncedCallbackWithControls, useDelayedValue, useDisclosure, useDisclosureOpen, useDistance, useDocumentIsVisible, useDocumentVisibility, useDocumentVisibilityCallback, useDrawer, useElementSize, useEventListener, useEventListenerRef, useFetch, useFieldContext, useFocusTrap, useFocusTrapRef, useFormContext, useFullscreen, useFullscreenRef, useGeolocation, useHotkeys, useHotkeysMap, useHover, useHoverDelay, useHoverProps, useHoverRef, useIdle, useIdleCallback, useIncrementCounter, useIntersectionObserver, useIntersectionObserverRef, useInterval, useIntervalControls, useIsDesktop, useIsMobile, useIsTablet, useKeyPress, useKeyPressed, useKeyboardShortcut, useLazyLoad, useList, useLocalStorage, useLongPress, useMap, useMediaPermission, useMediaQuery, useMouse, useMouseElement, useMouseElementRef, useMutation, useMutationObserver, useMutationObserverRef, useNotificationCenter, useNotificationPermission, useOnlineStatus, useOnlineStatusCallback, usePermission, usePrefersColorScheme, usePrefersReducedMotion, usePrevious, usePreviousDistinct, usePreviousWithInitial, useQueue, useRafLoop, useRecord, useResizeObserver, useResizeObserverRef, useScrollLock, useScrollPosition, useSelection, useSessionStorage, useSet, useSpeechRecognition, useSpeechSynthesis, useSpotlight, useSpringValue, useStack, useThrottle, useThrottledCallback, useTimeout, useTimeoutControls, useTimeoutFlag, useTimer, useToggle, useWindowHeight, useWindowScroll, useWindowSize, useWindowWidth, userVariants, validateFile, validators, virtualListVariants };
|