@reeverdev/ui 0.2.98 → 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.d.ts 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.ButtonHTMLAttributes<HTMLButtonElement> {
312
- asChild?: boolean;
314
+ interface DropdownTriggerProps extends React$1.HTMLAttributes<HTMLDivElement> {
313
315
  }
314
- declare const DropdownTrigger: React$1.ForwardRefExoticComponent<DropdownTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
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 DropdownCheckboxItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
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 DropdownLabel: React$1.ForwardRefExoticComponent<DropdownLabelProps & React$1.RefAttributes<HTMLDivElement>>;
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;
@@ -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;
@@ -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: ChartDataPoint[];
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;
@@ -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;
@@ -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 };