@classic-homes/theme-react 0.1.52 → 0.1.53
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.css +12 -10
- package/dist/index.d.mts +750 -53
- package/dist/index.d.ts +750 -53
- package/dist/index.js +1451 -217
- package/dist/index.mjs +1447 -233
- package/package.json +13 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
-
import * as React from 'react';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
5
5
|
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
@@ -14,42 +14,99 @@ declare const buttonVariants: (props?: ({
|
|
|
14
14
|
variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
|
|
15
15
|
size?: "default" | "sm" | "lg" | "icon" | null | undefined;
|
|
16
16
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
17
|
-
|
|
17
|
+
/** Base button props without size */
|
|
18
|
+
interface BaseButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, 'size'> {
|
|
18
19
|
asChild?: boolean;
|
|
19
20
|
}
|
|
20
|
-
|
|
21
|
+
/**
|
|
22
|
+
* Icon-only buttons MUST have an aria-label for WCAG compliance.
|
|
23
|
+
* This provides the accessible name since there's no visible text.
|
|
24
|
+
*/
|
|
25
|
+
interface IconButtonProps extends BaseButtonProps {
|
|
26
|
+
size: 'icon';
|
|
27
|
+
'aria-label': string;
|
|
28
|
+
}
|
|
29
|
+
/** Regular buttons with visible text content */
|
|
30
|
+
interface NonIconButtonProps extends BaseButtonProps {
|
|
31
|
+
size?: 'default' | 'sm' | 'lg';
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Button component props.
|
|
35
|
+
* When size="icon", aria-label is required at compile time.
|
|
36
|
+
*/
|
|
37
|
+
type ButtonProps = IconButtonProps | NonIconButtonProps;
|
|
38
|
+
declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
21
39
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
40
|
+
interface CardProps extends React$1.HTMLAttributes<HTMLElement> {
|
|
41
|
+
/**
|
|
42
|
+
* The semantic HTML element to render.
|
|
43
|
+
* Use 'article' for standalone, self-contained content.
|
|
44
|
+
* Use 'section' for a thematic grouping with a heading.
|
|
45
|
+
* Use 'aside' for tangentially related content.
|
|
46
|
+
* @default 'div'
|
|
47
|
+
*/
|
|
48
|
+
as?: 'div' | 'article' | 'section' | 'aside';
|
|
49
|
+
}
|
|
50
|
+
declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLElement>>;
|
|
51
|
+
declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
52
|
+
interface CardTitleProps extends React$1.HTMLAttributes<HTMLHeadingElement> {
|
|
53
|
+
/** Heading level (h2 for page sections, h3 for nested, etc.) */
|
|
54
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
55
|
+
}
|
|
56
|
+
declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
57
|
+
declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
58
|
+
declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
59
|
+
declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
|
|
28
60
|
|
|
29
|
-
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
61
|
+
interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
|
|
62
|
+
/**
|
|
63
|
+
* When true, applies destructive styling (red border/ring) to indicate an error state.
|
|
64
|
+
* Use with aria-describedby pointing to an error message element for full accessibility.
|
|
65
|
+
*/
|
|
66
|
+
'aria-invalid'?: boolean | 'true' | 'false';
|
|
67
|
+
/**
|
|
68
|
+
* ID of the element(s) that describe this input (e.g., error messages, hints).
|
|
69
|
+
* Multiple IDs can be space-separated.
|
|
70
|
+
* @example aria-describedby="email-error email-hint"
|
|
71
|
+
*/
|
|
72
|
+
'aria-describedby'?: string;
|
|
30
73
|
}
|
|
31
|
-
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
74
|
+
declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
32
75
|
|
|
33
|
-
interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
76
|
+
interface PasswordInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'type'> {
|
|
34
77
|
/** Label for the toggle button when password is hidden */
|
|
35
78
|
showLabel?: string;
|
|
36
79
|
/** Label for the toggle button when password is visible */
|
|
37
80
|
hideLabel?: string;
|
|
81
|
+
/** Screen reader announcement when password becomes visible */
|
|
82
|
+
visibleAnnouncement?: string;
|
|
83
|
+
/** Screen reader announcement when password becomes hidden */
|
|
84
|
+
hiddenAnnouncement?: string;
|
|
38
85
|
}
|
|
39
|
-
declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
86
|
+
declare const PasswordInput: React$1.ForwardRefExoticComponent<PasswordInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
40
87
|
|
|
41
|
-
declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React.RefAttributes<HTMLLabelElement>>;
|
|
88
|
+
declare const Label: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & VariantProps<(props?: class_variance_authority_types.ClassProp | undefined) => string> & React$1.RefAttributes<HTMLLabelElement>>;
|
|
42
89
|
|
|
43
90
|
declare const badgeVariants: (props?: ({
|
|
44
91
|
variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
|
|
45
92
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
46
|
-
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
93
|
+
interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
94
|
+
/** When true, adds role="status" and aria-live="polite" for dynamic content announcements */
|
|
95
|
+
live?: boolean;
|
|
96
|
+
/**
|
|
97
|
+
* Screen reader-only label providing context for the badge content.
|
|
98
|
+
* Useful for count badges (e.g., "unread messages" for a badge showing "5").
|
|
99
|
+
* @example label="unread notifications"
|
|
100
|
+
*/
|
|
101
|
+
label?: string;
|
|
47
102
|
}
|
|
48
|
-
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
103
|
+
declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
49
104
|
|
|
50
|
-
|
|
105
|
+
interface SeparatorProps extends React$1.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
|
|
106
|
+
}
|
|
107
|
+
declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
51
108
|
|
|
52
|
-
interface SwitchProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
109
|
+
interface SwitchProps extends React$1.ComponentPropsWithoutRef<'button'> {
|
|
53
110
|
/** Whether the switch is checked (controlled) */
|
|
54
111
|
checked?: boolean;
|
|
55
112
|
/** Default checked state (uncontrolled) */
|
|
@@ -58,29 +115,63 @@ interface SwitchProps extends React.ComponentPropsWithoutRef<'button'> {
|
|
|
58
115
|
onCheckedChange?: (checked: boolean) => void;
|
|
59
116
|
/** Size variant for the switch */
|
|
60
117
|
size?: 'default' | 'sm';
|
|
118
|
+
/**
|
|
119
|
+
* Accessible label for the switch. Required when not using an external label.
|
|
120
|
+
* Use aria-labelledby instead if you have an external label element.
|
|
121
|
+
* @see https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html
|
|
122
|
+
*/
|
|
123
|
+
'aria-label'?: string;
|
|
124
|
+
/**
|
|
125
|
+
* ID of the element that labels this switch.
|
|
126
|
+
* Use this when you have an external label element.
|
|
127
|
+
*/
|
|
128
|
+
'aria-labelledby'?: string;
|
|
129
|
+
/**
|
|
130
|
+
* ID of the element that describes this switch (e.g., hint text).
|
|
131
|
+
*/
|
|
132
|
+
'aria-describedby'?: string;
|
|
61
133
|
}
|
|
62
|
-
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
134
|
+
declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
63
135
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
136
|
+
interface AvatarProps extends React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
|
|
137
|
+
/**
|
|
138
|
+
* Name of the person or entity the avatar represents.
|
|
139
|
+
* When provided, auto-generates aria-label if not explicitly set.
|
|
140
|
+
* @example name="John Doe"
|
|
141
|
+
*/
|
|
142
|
+
name?: string;
|
|
143
|
+
/**
|
|
144
|
+
* Accessible label for the avatar.
|
|
145
|
+
* Use this when the avatar represents a user or entity.
|
|
146
|
+
* Takes precedence over auto-generated label from name prop.
|
|
147
|
+
* @example aria-label="Profile picture of John Doe"
|
|
148
|
+
*/
|
|
149
|
+
'aria-label'?: string;
|
|
150
|
+
}
|
|
151
|
+
declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & React$1.RefAttributes<HTMLSpanElement>>;
|
|
152
|
+
interface AvatarImageProps extends Omit<React$1.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>, 'alt'> {
|
|
153
|
+
/** Required alt text for accessibility */
|
|
154
|
+
alt: string;
|
|
155
|
+
}
|
|
156
|
+
declare const AvatarImage: React$1.ForwardRefExoticComponent<AvatarImageProps & React$1.RefAttributes<HTMLImageElement>>;
|
|
157
|
+
declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
|
|
67
158
|
|
|
68
|
-
declare const Dialog: React.FC<DialogPrimitive.DialogProps>;
|
|
69
|
-
declare const DialogTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
70
|
-
declare const DialogPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
71
|
-
declare const DialogClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
72
|
-
declare const DialogOverlay: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>>;
|
|
73
|
-
declare const DialogContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
159
|
+
declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
|
|
160
|
+
declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
161
|
+
declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
|
|
162
|
+
declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
163
|
+
declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
164
|
+
declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
74
165
|
declare const DialogHeader: {
|
|
75
|
-
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
166
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
76
167
|
displayName: string;
|
|
77
168
|
};
|
|
78
169
|
declare const DialogFooter: {
|
|
79
|
-
({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
170
|
+
({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
|
|
80
171
|
displayName: string;
|
|
81
172
|
};
|
|
82
|
-
declare const DialogTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
|
|
83
|
-
declare const DialogDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
|
|
173
|
+
declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
|
|
174
|
+
declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
|
|
84
175
|
|
|
85
176
|
/**
|
|
86
177
|
* PageHeader - Hero/page header component
|
|
@@ -106,15 +197,22 @@ declare const pageHeaderSubtitleVariants: (props?: ({
|
|
|
106
197
|
declare const pageHeaderActionsVariants: (props?: ({
|
|
107
198
|
variant?: "default" | "hero" | "centered" | null | undefined;
|
|
108
199
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
109
|
-
interface PageHeaderProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof pageHeaderContainerVariants> {
|
|
200
|
+
interface PageHeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof pageHeaderContainerVariants> {
|
|
110
201
|
/** Main title text */
|
|
111
202
|
title: string;
|
|
112
203
|
/** Optional subtitle text */
|
|
113
204
|
subtitle?: string;
|
|
114
205
|
/** Optional action buttons/content */
|
|
115
|
-
actions?: React.ReactNode;
|
|
206
|
+
actions?: React$1.ReactNode;
|
|
207
|
+
/**
|
|
208
|
+
* Heading level for the title. Defaults to 'h1'.
|
|
209
|
+
* Use appropriate level based on page hierarchy for proper accessibility.
|
|
210
|
+
* Note: There should typically be only one h1 per page.
|
|
211
|
+
* @see https://www.w3.org/WAI/tutorials/page-structure/headings/
|
|
212
|
+
*/
|
|
213
|
+
as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
116
214
|
}
|
|
117
|
-
declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;
|
|
215
|
+
declare const PageHeader: React$1.ForwardRefExoticComponent<PageHeaderProps & React$1.RefAttributes<HTMLElement>>;
|
|
118
216
|
|
|
119
217
|
interface DataPanelProps {
|
|
120
218
|
/** Panel visibility */
|
|
@@ -138,7 +236,7 @@ interface DataPanelProps {
|
|
|
138
236
|
/** Panel subtitle */
|
|
139
237
|
subtitle?: string;
|
|
140
238
|
/** Content inside the panel */
|
|
141
|
-
children: React.ReactNode;
|
|
239
|
+
children: React$1.ReactNode;
|
|
142
240
|
/** Footer action buttons */
|
|
143
241
|
actions?: DataPanelAction[];
|
|
144
242
|
/** Size constraints */
|
|
@@ -158,13 +256,13 @@ interface DataPanelProps {
|
|
|
158
256
|
/** Distance in pixels to drag before detaching from pinned mode (0 to disable) */
|
|
159
257
|
detachThreshold?: number;
|
|
160
258
|
/** Custom header content (replaces title/subtitle) */
|
|
161
|
-
headerContent?: React.ReactNode;
|
|
259
|
+
headerContent?: React$1.ReactNode;
|
|
162
260
|
/** Custom header actions */
|
|
163
|
-
headerActions?: React.ReactNode;
|
|
261
|
+
headerActions?: React$1.ReactNode;
|
|
164
262
|
/** Custom footer content */
|
|
165
|
-
footerContent?: React.ReactNode;
|
|
263
|
+
footerContent?: React$1.ReactNode;
|
|
166
264
|
/** Custom footer actions */
|
|
167
|
-
footerActions?: React.ReactNode;
|
|
265
|
+
footerActions?: React$1.ReactNode;
|
|
168
266
|
/** Additional class */
|
|
169
267
|
className?: string;
|
|
170
268
|
}
|
|
@@ -179,9 +277,9 @@ declare function useDataPanel(options?: UseDataPanelOptions): {
|
|
|
179
277
|
mode: PanelMode;
|
|
180
278
|
setMode: (newMode: PanelMode) => void;
|
|
181
279
|
edge: PanelEdge;
|
|
182
|
-
setEdge: React.Dispatch<React.SetStateAction<PanelEdge>>;
|
|
280
|
+
setEdge: React$1.Dispatch<React$1.SetStateAction<PanelEdge>>;
|
|
183
281
|
isExpanded: boolean;
|
|
184
|
-
setIsExpanded: React.Dispatch<React.SetStateAction<boolean>>;
|
|
282
|
+
setIsExpanded: React$1.Dispatch<React$1.SetStateAction<boolean>>;
|
|
185
283
|
detachedPosition: Position;
|
|
186
284
|
setDetachedPosition: (position: Position) => void;
|
|
187
285
|
detachedSize: Size;
|
|
@@ -192,6 +290,8 @@ declare function useDataPanel(options?: UseDataPanelOptions): {
|
|
|
192
290
|
interface DataPanelHeaderProps {
|
|
193
291
|
title?: string;
|
|
194
292
|
subtitle?: string;
|
|
293
|
+
/** ID for the title element (for aria-labelledby) */
|
|
294
|
+
titleId?: string;
|
|
195
295
|
mode: PanelMode;
|
|
196
296
|
edge: PanelEdge;
|
|
197
297
|
isExpanded: boolean;
|
|
@@ -201,32 +301,629 @@ interface DataPanelHeaderProps {
|
|
|
201
301
|
onClose?: () => void;
|
|
202
302
|
disableClose?: boolean;
|
|
203
303
|
disableModeSwitch?: boolean;
|
|
204
|
-
headerContent?: React.ReactNode;
|
|
205
|
-
headerActions?: React.ReactNode;
|
|
304
|
+
headerContent?: React$1.ReactNode;
|
|
305
|
+
headerActions?: React$1.ReactNode;
|
|
206
306
|
className?: string;
|
|
207
307
|
draggable?: boolean;
|
|
208
308
|
}
|
|
209
|
-
declare const DataPanelHeader: React.ForwardRefExoticComponent<DataPanelHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
309
|
+
declare const DataPanelHeader: React$1.ForwardRefExoticComponent<DataPanelHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
210
310
|
interface DataPanelContentProps {
|
|
211
|
-
children: React.ReactNode;
|
|
311
|
+
children: React$1.ReactNode;
|
|
212
312
|
className?: string;
|
|
313
|
+
/**
|
|
314
|
+
* Accessible label for the panel content region.
|
|
315
|
+
* Required for WCAG compliance when using role="region".
|
|
316
|
+
* @default "Panel content"
|
|
317
|
+
*/
|
|
318
|
+
'aria-label'?: string;
|
|
213
319
|
}
|
|
214
|
-
declare const DataPanelContent: React.ForwardRefExoticComponent<DataPanelContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
320
|
+
declare const DataPanelContent: React$1.ForwardRefExoticComponent<DataPanelContentProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
215
321
|
interface DataPanelFooterProps {
|
|
216
322
|
actions?: DataPanelAction[];
|
|
217
|
-
footerContent?: React.ReactNode;
|
|
218
|
-
footerActions?: React.ReactNode;
|
|
323
|
+
footerContent?: React$1.ReactNode;
|
|
324
|
+
footerActions?: React$1.ReactNode;
|
|
219
325
|
className?: string;
|
|
220
326
|
}
|
|
221
|
-
declare const DataPanelFooter: React.ForwardRefExoticComponent<DataPanelFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
327
|
+
declare const DataPanelFooter: React$1.ForwardRefExoticComponent<DataPanelFooterProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
222
328
|
interface DataPanelTabProps {
|
|
223
329
|
title?: string;
|
|
224
330
|
edge: PanelEdge;
|
|
225
331
|
onClick?: () => void;
|
|
226
332
|
className?: string;
|
|
227
333
|
}
|
|
228
|
-
declare const DataPanelTab: React.ForwardRefExoticComponent<DataPanelTabProps & React.RefAttributes<HTMLButtonElement>>;
|
|
229
|
-
declare const DataPanel: React.ForwardRefExoticComponent<DataPanelProps & React.RefAttributes<HTMLDivElement>>;
|
|
334
|
+
declare const DataPanelTab: React$1.ForwardRefExoticComponent<DataPanelTabProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
335
|
+
declare const DataPanel: React$1.ForwardRefExoticComponent<DataPanelProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
336
|
+
|
|
337
|
+
declare const skeletonVariants: (props?: ({
|
|
338
|
+
variant?: "default" | "title" | "button" | "text" | "card" | "avatar" | null | undefined;
|
|
339
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
340
|
+
interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof skeletonVariants> {
|
|
341
|
+
/** Animation style for the skeleton */
|
|
342
|
+
animation?: 'pulse' | 'shimmer' | 'none';
|
|
343
|
+
}
|
|
344
|
+
declare const Skeleton: React$1.ForwardRefExoticComponent<SkeletonProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
345
|
+
|
|
346
|
+
declare const spinnerVariants: (props?: ({
|
|
347
|
+
size?: "sm" | "lg" | "md" | "xl" | null | undefined;
|
|
348
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
349
|
+
interface SpinnerProps extends React$1.SVGAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
|
|
350
|
+
/** Accessible label for the spinner */
|
|
351
|
+
label?: string;
|
|
352
|
+
}
|
|
353
|
+
declare const Spinner: React$1.ForwardRefExoticComponent<SpinnerProps & React$1.RefAttributes<SVGSVGElement>>;
|
|
354
|
+
|
|
355
|
+
interface LoadingLogoProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
356
|
+
/** Width in pixels */
|
|
357
|
+
width?: number;
|
|
358
|
+
/** Height in pixels */
|
|
359
|
+
height?: number;
|
|
360
|
+
/** Enables loading animation */
|
|
361
|
+
loading?: boolean;
|
|
362
|
+
/** Color variant for different backgrounds */
|
|
363
|
+
variant?: 'light' | 'dark';
|
|
364
|
+
}
|
|
365
|
+
declare const LoadingLogo: React$1.ForwardRefExoticComponent<LoadingLogoProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
366
|
+
|
|
367
|
+
declare const progressBarVariants: (props?: ({
|
|
368
|
+
size?: "sm" | "lg" | "md" | null | undefined;
|
|
369
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
370
|
+
declare const progressFillVariants: (props?: ({
|
|
371
|
+
variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
|
|
372
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
373
|
+
interface ProgressBarProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'role'>, VariantProps<typeof progressBarVariants>, VariantProps<typeof progressFillVariants> {
|
|
374
|
+
/** Progress value 0-100. Omit for indeterminate */
|
|
375
|
+
value?: number;
|
|
376
|
+
/** Maximum value */
|
|
377
|
+
max?: number;
|
|
378
|
+
/** Accessible label */
|
|
379
|
+
label?: string;
|
|
380
|
+
/** Show percentage text */
|
|
381
|
+
showValue?: boolean;
|
|
382
|
+
}
|
|
383
|
+
declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
384
|
+
|
|
385
|
+
interface LoadingOverlayProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
386
|
+
/** Whether loading is active */
|
|
387
|
+
loading?: boolean;
|
|
388
|
+
/** Which indicator to show */
|
|
389
|
+
variant?: 'spinner' | 'logo' | 'progress' | 'skeleton';
|
|
390
|
+
/** Positioning mode */
|
|
391
|
+
mode?: 'fullscreen' | 'overlay' | 'inline';
|
|
392
|
+
/** Indicator size */
|
|
393
|
+
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
394
|
+
/** Loading message text */
|
|
395
|
+
message?: string;
|
|
396
|
+
/** Progress value for progress variant */
|
|
397
|
+
progress?: number;
|
|
398
|
+
/** Backdrop blur (overlay/fullscreen) */
|
|
399
|
+
blur?: boolean;
|
|
400
|
+
/** Fully opaque background */
|
|
401
|
+
opaque?: boolean;
|
|
402
|
+
/** Delay in ms before showing */
|
|
403
|
+
delay?: number;
|
|
404
|
+
}
|
|
405
|
+
declare const LoadingOverlay: React$1.ForwardRefExoticComponent<LoadingOverlayProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
406
|
+
|
|
407
|
+
interface LoadingPageProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
408
|
+
/** Whether loading is active */
|
|
409
|
+
loading?: boolean;
|
|
410
|
+
/** Loading message text */
|
|
411
|
+
message?: string;
|
|
412
|
+
/** Determinate progress value */
|
|
413
|
+
progress?: number;
|
|
414
|
+
/** Show branded LoadingLogo */
|
|
415
|
+
showLogo?: boolean;
|
|
416
|
+
/** Logo color variant */
|
|
417
|
+
logoVariant?: 'light' | 'dark';
|
|
418
|
+
/** Delay before showing (prevents flash) */
|
|
419
|
+
delay?: number;
|
|
420
|
+
}
|
|
421
|
+
declare const LoadingPage: React$1.ForwardRefExoticComponent<LoadingPageProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
422
|
+
|
|
423
|
+
interface LoadingSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
|
|
424
|
+
/** Whether loading is active */
|
|
425
|
+
loading?: boolean;
|
|
426
|
+
/** Indicator type */
|
|
427
|
+
variant?: 'spinner' | 'skeleton' | 'logo' | 'progress';
|
|
428
|
+
/** Loading message */
|
|
429
|
+
message?: string;
|
|
430
|
+
/** Progress value */
|
|
431
|
+
progress?: number;
|
|
432
|
+
/** Minimum height to preserve layout */
|
|
433
|
+
minHeight?: string;
|
|
434
|
+
/** Backdrop blur */
|
|
435
|
+
blur?: boolean;
|
|
436
|
+
/** Delay before showing */
|
|
437
|
+
delay?: number;
|
|
438
|
+
}
|
|
439
|
+
declare const LoadingSection: React$1.ForwardRefExoticComponent<LoadingSectionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
440
|
+
|
|
441
|
+
interface LiveRegionProps {
|
|
442
|
+
/** Text to announce to screen readers */
|
|
443
|
+
message?: string;
|
|
444
|
+
/** Interruption level - 'polite' waits for idle, 'assertive' interrupts immediately */
|
|
445
|
+
politeness?: 'polite' | 'assertive';
|
|
446
|
+
/** Whether to announce the entire region on updates (default: true) */
|
|
447
|
+
atomic?: boolean;
|
|
448
|
+
/** Whether to hide the region visually (default: true) */
|
|
449
|
+
visuallyHidden?: boolean;
|
|
450
|
+
/** Additional class names */
|
|
451
|
+
className?: string;
|
|
452
|
+
/** Child elements to render in the live region */
|
|
453
|
+
children?: React$1.ReactNode;
|
|
454
|
+
}
|
|
455
|
+
/**
|
|
456
|
+
* LiveRegion announces dynamic content changes to screen readers.
|
|
457
|
+
*
|
|
458
|
+
* Use this component when content updates need to be communicated to assistive technology users,
|
|
459
|
+
* such as form validation messages, status updates, or notifications.
|
|
460
|
+
*
|
|
461
|
+
* @example
|
|
462
|
+
* ```tsx
|
|
463
|
+
* // Simple message announcement
|
|
464
|
+
* <LiveRegion message={errorMessage} politeness="assertive" />
|
|
465
|
+
*
|
|
466
|
+
* // With children content
|
|
467
|
+
* <LiveRegion politeness="polite">
|
|
468
|
+
* <span>Status: {status}</span>
|
|
469
|
+
* </LiveRegion>
|
|
470
|
+
*
|
|
471
|
+
* // Visible status region
|
|
472
|
+
* <LiveRegion visuallyHidden={false} message="Loading..." />
|
|
473
|
+
* ```
|
|
474
|
+
*/
|
|
475
|
+
declare const LiveRegion: React$1.ForwardRefExoticComponent<LiveRegionProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
476
|
+
|
|
477
|
+
interface SkipLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
478
|
+
/**
|
|
479
|
+
* ID of the target element to skip to (without the # prefix).
|
|
480
|
+
* @example targetId="main-content"
|
|
481
|
+
*/
|
|
482
|
+
targetId: string;
|
|
483
|
+
/**
|
|
484
|
+
* Custom class name for the skip link.
|
|
485
|
+
* Note: The component uses the `.skip-link` class from @classic-homes/theme-styles
|
|
486
|
+
* which handles the visually hidden to visible transition on focus.
|
|
487
|
+
*/
|
|
488
|
+
className?: string;
|
|
489
|
+
}
|
|
490
|
+
/**
|
|
491
|
+
* SkipLink - Accessible skip navigation link
|
|
492
|
+
*
|
|
493
|
+
* Provides keyboard users a way to skip repetitive navigation and jump directly
|
|
494
|
+
* to the main content. The link is visually hidden until focused.
|
|
495
|
+
*
|
|
496
|
+
* @see https://www.w3.org/WAI/WCAG21/Techniques/general/G1
|
|
497
|
+
*
|
|
498
|
+
* @example
|
|
499
|
+
* // Basic usage - place at the very beginning of your page/layout
|
|
500
|
+
* <SkipLink targetId="main-content">Skip to main content</SkipLink>
|
|
501
|
+
*
|
|
502
|
+
* // Then add the target ID to your main content
|
|
503
|
+
* <main id="main-content" tabIndex={-1}>
|
|
504
|
+
* ...
|
|
505
|
+
* </main>
|
|
506
|
+
*/
|
|
507
|
+
declare const SkipLink: React$1.ForwardRefExoticComponent<SkipLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
|
|
508
|
+
|
|
509
|
+
interface UseFocusTrapOptions {
|
|
510
|
+
/** Whether the focus trap is active */
|
|
511
|
+
active?: boolean;
|
|
512
|
+
/** Element to return focus to when trap is deactivated */
|
|
513
|
+
returnFocusTo?: HTMLElement | null;
|
|
514
|
+
/** Selector for the element to focus initially (defaults to first focusable) */
|
|
515
|
+
initialFocus?: string;
|
|
516
|
+
/** Whether to prevent scrolling when focusing elements */
|
|
517
|
+
preventScroll?: boolean;
|
|
518
|
+
}
|
|
519
|
+
/**
|
|
520
|
+
* Hook to create a focus trap within a container element.
|
|
521
|
+
*
|
|
522
|
+
* Traps focus within the container so Tab/Shift+Tab cycles through
|
|
523
|
+
* focusable elements without escaping. Useful for modals, dialogs,
|
|
524
|
+
* and dropdown menus.
|
|
525
|
+
*
|
|
526
|
+
* @example
|
|
527
|
+
* ```tsx
|
|
528
|
+
* function Modal({ open, onClose }) {
|
|
529
|
+
* const containerRef = useFocusTrap<HTMLDivElement>({ active: open });
|
|
530
|
+
*
|
|
531
|
+
* return open ? (
|
|
532
|
+
* <div ref={containerRef} role="dialog">
|
|
533
|
+
* <button>First</button>
|
|
534
|
+
* <button>Second</button>
|
|
535
|
+
* <button onClick={onClose}>Close</button>
|
|
536
|
+
* </div>
|
|
537
|
+
* ) : null;
|
|
538
|
+
* }
|
|
539
|
+
* ```
|
|
540
|
+
*/
|
|
541
|
+
declare function useFocusTrap<T extends HTMLElement = HTMLElement>(options?: UseFocusTrapOptions): React$1.MutableRefObject<T | null>;
|
|
542
|
+
|
|
543
|
+
interface UseFocusRefOptions {
|
|
544
|
+
/** Whether to focus the element on mount */
|
|
545
|
+
focusOnMount?: boolean;
|
|
546
|
+
/** Whether to prevent scroll when focusing */
|
|
547
|
+
preventScroll?: boolean;
|
|
548
|
+
/** Delay in ms before focusing (useful for animations) */
|
|
549
|
+
delay?: number;
|
|
550
|
+
}
|
|
551
|
+
/**
|
|
552
|
+
* Hook that returns a ref that can optionally auto-focus on mount.
|
|
553
|
+
*
|
|
554
|
+
* Useful for focusing form fields, dialog close buttons, or other
|
|
555
|
+
* elements that should receive focus when they appear.
|
|
556
|
+
*
|
|
557
|
+
* @example
|
|
558
|
+
* ```tsx
|
|
559
|
+
* function SearchForm() {
|
|
560
|
+
* const inputRef = useFocusRef<HTMLInputElement>({ focusOnMount: true });
|
|
561
|
+
* return <input ref={inputRef} type="search" />;
|
|
562
|
+
* }
|
|
563
|
+
* ```
|
|
564
|
+
*
|
|
565
|
+
* @example with delay (for animations)
|
|
566
|
+
* ```tsx
|
|
567
|
+
* function Modal() {
|
|
568
|
+
* const closeRef = useFocusRef<HTMLButtonElement>({
|
|
569
|
+
* focusOnMount: true,
|
|
570
|
+
* delay: 200, // Wait for animation
|
|
571
|
+
* });
|
|
572
|
+
* return <button ref={closeRef}>Close</button>;
|
|
573
|
+
* }
|
|
574
|
+
* ```
|
|
575
|
+
*/
|
|
576
|
+
declare function useFocusRef<T extends HTMLElement = HTMLElement>(options?: UseFocusRefOptions): React$1.MutableRefObject<T | null>;
|
|
577
|
+
|
|
578
|
+
/**
|
|
579
|
+
* Hook to detect user's reduced motion preference from system settings.
|
|
580
|
+
*
|
|
581
|
+
* Responds to the CSS media query `prefers-reduced-motion: reduce` which users
|
|
582
|
+
* can set in their operating system accessibility settings to indicate they
|
|
583
|
+
* prefer minimal motion/animation.
|
|
584
|
+
*
|
|
585
|
+
* Use this hook to disable or reduce animations for users who have this preference,
|
|
586
|
+
* which is important for accessibility (vestibular disorders, motion sensitivity, etc.).
|
|
587
|
+
*
|
|
588
|
+
* @returns boolean - true if user prefers reduced motion, false otherwise
|
|
589
|
+
*
|
|
590
|
+
* @example
|
|
591
|
+
* ```tsx
|
|
592
|
+
* function AnimatedComponent() {
|
|
593
|
+
* const reducedMotion = useReducedMotion();
|
|
594
|
+
*
|
|
595
|
+
* return (
|
|
596
|
+
* <div
|
|
597
|
+
* style={{
|
|
598
|
+
* transition: reducedMotion ? 'none' : 'transform 0.3s ease',
|
|
599
|
+
* }}
|
|
600
|
+
* >
|
|
601
|
+
* Content
|
|
602
|
+
* </div>
|
|
603
|
+
* );
|
|
604
|
+
* }
|
|
605
|
+
* ```
|
|
606
|
+
*
|
|
607
|
+
* @example with framer-motion
|
|
608
|
+
* ```tsx
|
|
609
|
+
* function AnimatedCard() {
|
|
610
|
+
* const reducedMotion = useReducedMotion();
|
|
611
|
+
*
|
|
612
|
+
* return (
|
|
613
|
+
* <motion.div
|
|
614
|
+
* initial={{ opacity: 0, y: reducedMotion ? 0 : 20 }}
|
|
615
|
+
* animate={{ opacity: 1, y: 0 }}
|
|
616
|
+
* transition={{ duration: reducedMotion ? 0 : 0.3 }}
|
|
617
|
+
* >
|
|
618
|
+
* Card content
|
|
619
|
+
* </motion.div>
|
|
620
|
+
* );
|
|
621
|
+
* }
|
|
622
|
+
* ```
|
|
623
|
+
*/
|
|
624
|
+
declare function useReducedMotion(): boolean;
|
|
625
|
+
|
|
626
|
+
type ArrowNavigationOrientation = 'horizontal' | 'vertical' | 'both';
|
|
627
|
+
interface UseArrowNavigationOptions {
|
|
628
|
+
/** Navigation orientation - determines which arrow keys work */
|
|
629
|
+
orientation?: ArrowNavigationOrientation;
|
|
630
|
+
/** Whether navigation wraps from end to start (and vice versa) */
|
|
631
|
+
loop?: boolean;
|
|
632
|
+
/** Selector for focusable items within the container */
|
|
633
|
+
itemSelector?: string;
|
|
634
|
+
/** Callback when focus changes */
|
|
635
|
+
onFocusChange?: (index: number, element: HTMLElement) => void;
|
|
636
|
+
}
|
|
637
|
+
/**
|
|
638
|
+
* Hook for arrow key navigation within a container of items.
|
|
639
|
+
*
|
|
640
|
+
* Implements keyboard navigation patterns for menus, listboxes, tabs,
|
|
641
|
+
* and other composite widgets per WAI-ARIA Authoring Practices.
|
|
642
|
+
*
|
|
643
|
+
* @example
|
|
644
|
+
* ```tsx
|
|
645
|
+
* function Menu() {
|
|
646
|
+
* const { containerProps, getItemProps } = useArrowNavigation({
|
|
647
|
+
* orientation: 'vertical',
|
|
648
|
+
* loop: true,
|
|
649
|
+
* });
|
|
650
|
+
*
|
|
651
|
+
* return (
|
|
652
|
+
* <ul {...containerProps} role="menu">
|
|
653
|
+
* {items.map((item, i) => (
|
|
654
|
+
* <li key={item.id} {...getItemProps(i)} role="menuitem">
|
|
655
|
+
* {item.label}
|
|
656
|
+
* </li>
|
|
657
|
+
* ))}
|
|
658
|
+
* </ul>
|
|
659
|
+
* );
|
|
660
|
+
* }
|
|
661
|
+
* ```
|
|
662
|
+
*/
|
|
663
|
+
declare function useArrowNavigation(options?: UseArrowNavigationOptions): {
|
|
664
|
+
containerProps: {
|
|
665
|
+
ref: (node: HTMLElement | null) => void;
|
|
666
|
+
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
667
|
+
onFocus: (event: React.FocusEvent) => void;
|
|
668
|
+
};
|
|
669
|
+
getItemProps: (index: number) => {
|
|
670
|
+
tabIndex: number;
|
|
671
|
+
onFocus: () => void;
|
|
672
|
+
};
|
|
673
|
+
focusItem: (index: number) => void;
|
|
674
|
+
getFocusedIndex: () => number;
|
|
675
|
+
};
|
|
676
|
+
|
|
677
|
+
interface UseRovingTabindexOptions {
|
|
678
|
+
/** Whether navigation wraps from end to start */
|
|
679
|
+
loop?: boolean;
|
|
680
|
+
/** Selector for focusable items */
|
|
681
|
+
itemSelector?: string;
|
|
682
|
+
/** Initial focused index */
|
|
683
|
+
initialIndex?: number;
|
|
684
|
+
/** Callback when active index changes */
|
|
685
|
+
onIndexChange?: (index: number) => void;
|
|
686
|
+
}
|
|
687
|
+
/**
|
|
688
|
+
* Hook implementing roving tabindex pattern for composite widgets.
|
|
689
|
+
*
|
|
690
|
+
* Only one item in the group has tabindex="0" at a time, while
|
|
691
|
+
* others have tabindex="-1". Arrow keys move focus within the group.
|
|
692
|
+
*
|
|
693
|
+
* This is the recommended pattern for widgets like toolbars, menus,
|
|
694
|
+
* listboxes, tree views, and tabs.
|
|
695
|
+
*
|
|
696
|
+
* @see https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
|
|
697
|
+
*
|
|
698
|
+
* @example
|
|
699
|
+
* ```tsx
|
|
700
|
+
* function Toolbar() {
|
|
701
|
+
* const { getItemProps, activeIndex } = useRovingTabindex();
|
|
702
|
+
*
|
|
703
|
+
* return (
|
|
704
|
+
* <div role="toolbar">
|
|
705
|
+
* {tools.map((tool, i) => (
|
|
706
|
+
* <button
|
|
707
|
+
* key={tool.id}
|
|
708
|
+
* data-roving-tabindex-item
|
|
709
|
+
* {...getItemProps(i)}
|
|
710
|
+
* >
|
|
711
|
+
* {tool.label}
|
|
712
|
+
* </button>
|
|
713
|
+
* ))}
|
|
714
|
+
* </div>
|
|
715
|
+
* );
|
|
716
|
+
* }
|
|
717
|
+
* ```
|
|
718
|
+
*/
|
|
719
|
+
declare function useRovingTabindex(options?: UseRovingTabindexOptions): {
|
|
720
|
+
containerProps: {
|
|
721
|
+
ref: (node: HTMLElement | null) => void;
|
|
722
|
+
onKeyDown: (event: React.KeyboardEvent) => void;
|
|
723
|
+
};
|
|
724
|
+
getItemProps: (index: number) => {
|
|
725
|
+
'data-roving-tabindex-item': boolean;
|
|
726
|
+
tabIndex: number;
|
|
727
|
+
ref: (node: HTMLElement | null) => void;
|
|
728
|
+
onClick: () => void;
|
|
729
|
+
onFocus: () => void;
|
|
730
|
+
};
|
|
731
|
+
activeIndex: number;
|
|
732
|
+
setActiveIndex: (index: number) => void;
|
|
733
|
+
focusNext: () => void;
|
|
734
|
+
focusPrevious: () => void;
|
|
735
|
+
focusFirst: () => void;
|
|
736
|
+
focusLast: () => void;
|
|
737
|
+
};
|
|
738
|
+
|
|
739
|
+
/**
|
|
740
|
+
* Options for the useAnnounce hook
|
|
741
|
+
*/
|
|
742
|
+
interface UseAnnounceOptions {
|
|
743
|
+
/**
|
|
744
|
+
* Politeness level for the announcement.
|
|
745
|
+
* - 'polite': Waits for the user to be idle before announcing (default)
|
|
746
|
+
* - 'assertive': Interrupts the user immediately
|
|
747
|
+
*/
|
|
748
|
+
politeness?: 'polite' | 'assertive';
|
|
749
|
+
/**
|
|
750
|
+
* Delay in milliseconds before clearing the announcement.
|
|
751
|
+
* Set to 0 to never auto-clear. Default is 1000ms.
|
|
752
|
+
*/
|
|
753
|
+
clearDelay?: number;
|
|
754
|
+
}
|
|
755
|
+
/**
|
|
756
|
+
* Return type for useAnnounce hook
|
|
757
|
+
*/
|
|
758
|
+
interface UseAnnounceReturn {
|
|
759
|
+
/**
|
|
760
|
+
* Function to make an announcement to screen readers
|
|
761
|
+
*/
|
|
762
|
+
announce: (message: string, options?: UseAnnounceOptions) => void;
|
|
763
|
+
/**
|
|
764
|
+
* Current announcement message (for rendering in a live region)
|
|
765
|
+
*/
|
|
766
|
+
message: string;
|
|
767
|
+
/**
|
|
768
|
+
* Current politeness level
|
|
769
|
+
*/
|
|
770
|
+
politeness: 'polite' | 'assertive';
|
|
771
|
+
/**
|
|
772
|
+
* Clear the current announcement
|
|
773
|
+
*/
|
|
774
|
+
clear: () => void;
|
|
775
|
+
}
|
|
776
|
+
/**
|
|
777
|
+
* useAnnounce - Hook for imperative screen reader announcements
|
|
778
|
+
*
|
|
779
|
+
* Creates a live region that can be used to announce dynamic content
|
|
780
|
+
* to screen reader users. Useful for status updates, form validation,
|
|
781
|
+
* and other dynamic content changes.
|
|
782
|
+
*
|
|
783
|
+
* @see https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA22
|
|
784
|
+
*
|
|
785
|
+
* @example
|
|
786
|
+
* ```tsx
|
|
787
|
+
* function MyComponent() {
|
|
788
|
+
* const { announce, message, politeness } = useAnnounce();
|
|
789
|
+
*
|
|
790
|
+
* const handleSave = async () => {
|
|
791
|
+
* await saveData();
|
|
792
|
+
* announce('Data saved successfully');
|
|
793
|
+
* };
|
|
794
|
+
*
|
|
795
|
+
* return (
|
|
796
|
+
* <>
|
|
797
|
+
* <button onClick={handleSave}>Save</button>
|
|
798
|
+
* <div role="status" aria-live={politeness} aria-atomic="true" className="sr-only">
|
|
799
|
+
* {message}
|
|
800
|
+
* </div>
|
|
801
|
+
* </>
|
|
802
|
+
* );
|
|
803
|
+
* }
|
|
804
|
+
* ```
|
|
805
|
+
*/
|
|
806
|
+
declare function useAnnounce(defaultOptions?: UseAnnounceOptions): UseAnnounceReturn;
|
|
807
|
+
|
|
808
|
+
/**
|
|
809
|
+
* Options for the useEscapeKey hook
|
|
810
|
+
*/
|
|
811
|
+
interface UseEscapeKeyOptions {
|
|
812
|
+
/**
|
|
813
|
+
* Whether the escape key handler is enabled.
|
|
814
|
+
* Useful for conditionally enabling based on component state (e.g., dialog open).
|
|
815
|
+
* Default: true
|
|
816
|
+
*/
|
|
817
|
+
enabled?: boolean;
|
|
818
|
+
/**
|
|
819
|
+
* Whether to prevent default behavior when Escape is pressed.
|
|
820
|
+
* Default: true
|
|
821
|
+
*/
|
|
822
|
+
preventDefault?: boolean;
|
|
823
|
+
/**
|
|
824
|
+
* Whether to stop propagation when Escape is pressed.
|
|
825
|
+
* Default: false
|
|
826
|
+
*/
|
|
827
|
+
stopPropagation?: boolean;
|
|
828
|
+
}
|
|
829
|
+
/**
|
|
830
|
+
* useEscapeKey - Hook for handling Escape key press
|
|
831
|
+
*
|
|
832
|
+
* Registers a global keydown listener for the Escape key.
|
|
833
|
+
* Useful for closing modals, dialogs, dropdowns, etc.
|
|
834
|
+
*
|
|
835
|
+
* @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
|
|
836
|
+
*
|
|
837
|
+
* @example
|
|
838
|
+
* ```tsx
|
|
839
|
+
* function Modal({ isOpen, onClose }) {
|
|
840
|
+
* useEscapeKey(onClose, { enabled: isOpen });
|
|
841
|
+
*
|
|
842
|
+
* if (!isOpen) return null;
|
|
843
|
+
* return <div>Modal content</div>;
|
|
844
|
+
* }
|
|
845
|
+
* ```
|
|
846
|
+
*
|
|
847
|
+
* @example With ref for scoped handling
|
|
848
|
+
* ```tsx
|
|
849
|
+
* function Dropdown({ isOpen, onClose }) {
|
|
850
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
851
|
+
*
|
|
852
|
+
* useEscapeKey(onClose, {
|
|
853
|
+
* enabled: isOpen,
|
|
854
|
+
* });
|
|
855
|
+
*
|
|
856
|
+
* return <div ref={ref}>Dropdown content</div>;
|
|
857
|
+
* }
|
|
858
|
+
* ```
|
|
859
|
+
*/
|
|
860
|
+
declare function useEscapeKey(callback: (event: KeyboardEvent) => void, options?: UseEscapeKeyOptions): void;
|
|
861
|
+
|
|
862
|
+
/**
|
|
863
|
+
* Options for the useClickOutside hook
|
|
864
|
+
*/
|
|
865
|
+
interface UseClickOutsideOptions {
|
|
866
|
+
/**
|
|
867
|
+
* Whether the click outside handler is enabled.
|
|
868
|
+
* Default: true
|
|
869
|
+
*/
|
|
870
|
+
enabled?: boolean;
|
|
871
|
+
/**
|
|
872
|
+
* Event types to listen for.
|
|
873
|
+
* Default: ['mousedown', 'touchstart']
|
|
874
|
+
*/
|
|
875
|
+
events?: ('mousedown' | 'mouseup' | 'touchstart' | 'touchend')[];
|
|
876
|
+
/**
|
|
877
|
+
* Elements that should be considered as "inside" even if not descendants.
|
|
878
|
+
* Useful for portaled elements like tooltips or dropdowns.
|
|
879
|
+
*/
|
|
880
|
+
ignoreElements?: React$1.RefObject<HTMLElement | null>[];
|
|
881
|
+
}
|
|
882
|
+
/**
|
|
883
|
+
* useClickOutside - Hook for detecting clicks outside an element
|
|
884
|
+
*
|
|
885
|
+
* Useful for closing dropdowns, dialogs, and other overlay components
|
|
886
|
+
* when clicking outside of them.
|
|
887
|
+
*
|
|
888
|
+
* Accessibility note: This hook should be used in conjunction with
|
|
889
|
+
* keyboard escape handling for full accessibility. Users should be
|
|
890
|
+
* able to close overlays with both mouse clicks and the Escape key.
|
|
891
|
+
*
|
|
892
|
+
* @see useEscapeKey
|
|
893
|
+
*
|
|
894
|
+
* @example
|
|
895
|
+
* ```tsx
|
|
896
|
+
* function Dropdown({ isOpen, onClose }) {
|
|
897
|
+
* const ref = useRef<HTMLDivElement>(null);
|
|
898
|
+
*
|
|
899
|
+
* useClickOutside(ref, onClose, { enabled: isOpen });
|
|
900
|
+
* useEscapeKey(onClose, { enabled: isOpen });
|
|
901
|
+
*
|
|
902
|
+
* return <div ref={ref}>Dropdown content</div>;
|
|
903
|
+
* }
|
|
904
|
+
* ```
|
|
905
|
+
*
|
|
906
|
+
* @example With ignore elements for portals
|
|
907
|
+
* ```tsx
|
|
908
|
+
* function Popover({ isOpen, onClose }) {
|
|
909
|
+
* const triggerRef = useRef<HTMLButtonElement>(null);
|
|
910
|
+
* const contentRef = useRef<HTMLDivElement>(null);
|
|
911
|
+
*
|
|
912
|
+
* useClickOutside(contentRef, onClose, {
|
|
913
|
+
* enabled: isOpen,
|
|
914
|
+
* ignoreElements: [triggerRef], // Don't close when clicking the trigger
|
|
915
|
+
* });
|
|
916
|
+
*
|
|
917
|
+
* return (
|
|
918
|
+
* <>
|
|
919
|
+
* <button ref={triggerRef}>Toggle</button>
|
|
920
|
+
* {isOpen && <div ref={contentRef}>Popover content</div>}
|
|
921
|
+
* </>
|
|
922
|
+
* );
|
|
923
|
+
* }
|
|
924
|
+
* ```
|
|
925
|
+
*/
|
|
926
|
+
declare function useClickOutside<T extends HTMLElement>(ref: React$1.RefObject<T | null>, callback: (event: MouseEvent | TouchEvent) => void, options?: UseClickOutsideOptions): void;
|
|
230
927
|
|
|
231
928
|
/**
|
|
232
929
|
* Utility function to merge Tailwind CSS classes
|
|
@@ -234,4 +931,4 @@ declare const DataPanel: React.ForwardRefExoticComponent<DataPanelProps & React.
|
|
|
234
931
|
*/
|
|
235
932
|
declare function cn(...inputs: ClassValue[]): string;
|
|
236
933
|
|
|
237
|
-
export { Avatar, AvatarFallback, AvatarImage, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, DataPanel, DataPanelContent, type DataPanelContentProps, DataPanelFooter, type DataPanelFooterProps, DataPanelHeader, type DataPanelProps, DataPanelTab, type DataPanelTabProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, PageHeader, type PageHeaderProps, PasswordInput, type PasswordInputProps, Separator, Switch, type SwitchProps, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants, useDataPanel };
|
|
934
|
+
export { type ArrowNavigationOrientation, Avatar, AvatarFallback, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, DataPanel, DataPanelContent, type DataPanelContentProps, DataPanelFooter, type DataPanelFooterProps, DataPanelHeader, type DataPanelProps, DataPanelTab, type DataPanelTabProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Input, type InputProps, Label, LiveRegion, type LiveRegionProps, LoadingLogo, type LoadingLogoProps, LoadingOverlay, type LoadingOverlayProps, LoadingPage, type LoadingPageProps, LoadingSection, type LoadingSectionProps, PageHeader, type PageHeaderProps, PasswordInput, type PasswordInputProps, ProgressBar, type ProgressBarProps, Separator, type SeparatorProps, Skeleton, type SkeletonProps, SkipLink, type SkipLinkProps, Spinner, type SpinnerProps, Switch, type SwitchProps, type UseAnnounceOptions, type UseAnnounceReturn, type UseArrowNavigationOptions, type UseClickOutsideOptions, type UseEscapeKeyOptions, type UseFocusRefOptions, type UseFocusTrapOptions, type UseRovingTabindexOptions, badgeVariants, buttonVariants, cn, pageHeaderActionsVariants, pageHeaderContainerVariants, pageHeaderSubtitleVariants, pageHeaderTitleVariants, progressBarVariants, skeletonVariants, spinnerVariants, useAnnounce, useArrowNavigation, useClickOutside, useDataPanel, useEscapeKey, useFocusRef, useFocusTrap, useReducedMotion, useRovingTabindex };
|