@lzzjokerzzl/react-ui-components 1.0.2 → 1.1.2
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 +3396 -1
- package/dist/react-ui-components.css +1 -0
- package/package.json +3 -2
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,3396 @@
|
|
|
1
|
-
|
|
1
|
+
import { AnchorHTMLAttributes } from 'react';
|
|
2
|
+
import { ChangeEvent } from 'react';
|
|
3
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
4
|
+
import { default as default_2 } from 'react';
|
|
5
|
+
import { ElementType } from 'react';
|
|
6
|
+
import { FocusEvent as FocusEvent_2 } from 'react';
|
|
7
|
+
import { ForwardRefExoticComponent } from 'react';
|
|
8
|
+
import { HTMLAttributes } from 'react';
|
|
9
|
+
import { HTMLMotionProps } from 'framer-motion';
|
|
10
|
+
import { JSX } from 'react/jsx-runtime';
|
|
11
|
+
import { Key } from 'react';
|
|
12
|
+
import { KeyboardEvent as KeyboardEvent_2 } from 'react';
|
|
13
|
+
import { LegacyAnimationControls } from 'motion-dom';
|
|
14
|
+
import { MotionProps } from 'framer-motion';
|
|
15
|
+
import { MotionValue } from 'motion-dom';
|
|
16
|
+
import { MouseEvent as MouseEvent_2 } from 'react';
|
|
17
|
+
import * as React_2 from 'react';
|
|
18
|
+
import { ReactEventHandler } from 'react';
|
|
19
|
+
import { ReactNode } from 'react';
|
|
20
|
+
import { ReactPortal } from 'react';
|
|
21
|
+
import { RefAttributes } from 'react';
|
|
22
|
+
import { RefObject } from 'react';
|
|
23
|
+
import { Transition } from 'framer-motion';
|
|
24
|
+
import { Variants } from 'framer-motion';
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Main Accordion component that provides accordion functionality with HeroUI styling
|
|
28
|
+
*/
|
|
29
|
+
export declare const Accordion: default_2.FC<AccordionProps>;
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Animation configuration for accordion components
|
|
33
|
+
*/
|
|
34
|
+
declare interface AccordionAnimationConfig {
|
|
35
|
+
/** Animation preset */
|
|
36
|
+
preset?: AccordionAnimationPreset;
|
|
37
|
+
/** Custom spring configuration */
|
|
38
|
+
spring?: {
|
|
39
|
+
stiffness?: number;
|
|
40
|
+
damping?: number;
|
|
41
|
+
duration?: number;
|
|
42
|
+
};
|
|
43
|
+
/** Stagger delay between items (in seconds) */
|
|
44
|
+
staggerDelay?: number;
|
|
45
|
+
/** Enable stagger animation for multiple items */
|
|
46
|
+
enableStagger?: boolean;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/**
|
|
50
|
+
* Animation preset types for framer-motion
|
|
51
|
+
*/
|
|
52
|
+
declare type AccordionAnimationPreset = "spring" | "tween" | "smooth" | "bouncy" | "slow";
|
|
53
|
+
|
|
54
|
+
/**
|
|
55
|
+
* Color variants for Accordion component
|
|
56
|
+
*/
|
|
57
|
+
export declare type AccordionColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* Accordion content component with smooth animations
|
|
61
|
+
*/
|
|
62
|
+
export declare const AccordionContent: default_2.FC<AccordionContentProps>;
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Props for AccordionContent component
|
|
66
|
+
*/
|
|
67
|
+
export declare interface AccordionContentProps {
|
|
68
|
+
/** Content to display */
|
|
69
|
+
children: ReactNode;
|
|
70
|
+
/** Whether the content is expanded */
|
|
71
|
+
isExpanded: boolean;
|
|
72
|
+
/** Additional CSS classes */
|
|
73
|
+
className?: string;
|
|
74
|
+
/** Custom styles */
|
|
75
|
+
style?: React.CSSProperties;
|
|
76
|
+
/** Test ID for testing */
|
|
77
|
+
"data-testid"?: string;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Accordion header component with click handling and accessibility
|
|
82
|
+
*/
|
|
83
|
+
export declare const AccordionHeader: default_2.FC<AccordionHeaderProps>;
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Props for AccordionHeader component
|
|
87
|
+
*/
|
|
88
|
+
export declare interface AccordionHeaderProps {
|
|
89
|
+
/** Header content */
|
|
90
|
+
children: ReactNode;
|
|
91
|
+
/** Whether the item is expanded */
|
|
92
|
+
isExpanded: boolean;
|
|
93
|
+
/** Whether the item is disabled */
|
|
94
|
+
isDisabled?: boolean;
|
|
95
|
+
/** Click handler */
|
|
96
|
+
onClick?: () => void;
|
|
97
|
+
/** Additional CSS classes */
|
|
98
|
+
className?: string;
|
|
99
|
+
/** ARIA label */
|
|
100
|
+
ariaLabel?: string;
|
|
101
|
+
/** Test ID for testing */
|
|
102
|
+
"data-testid"?: string;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Indicator positions for the expand/collapse icon
|
|
107
|
+
*/
|
|
108
|
+
declare type AccordionIndicatorPlacement = "start" | "end";
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Individual accordion item component
|
|
112
|
+
*/
|
|
113
|
+
export declare const AccordionItem: default_2.FC<AccordionItemProps>;
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Individual accordion item configuration
|
|
117
|
+
*/
|
|
118
|
+
declare interface AccordionItemConfig {
|
|
119
|
+
/** Unique key for the item */
|
|
120
|
+
key: string;
|
|
121
|
+
/** Title content for the header */
|
|
122
|
+
title: ReactNode;
|
|
123
|
+
/** Content to display when expanded */
|
|
124
|
+
content: ReactNode;
|
|
125
|
+
/** Whether this item starts expanded */
|
|
126
|
+
defaultExpanded?: boolean;
|
|
127
|
+
/** Whether this item is disabled */
|
|
128
|
+
isDisabled?: boolean;
|
|
129
|
+
/** Custom header content */
|
|
130
|
+
header?: ReactNode;
|
|
131
|
+
/** ARIA label for the item */
|
|
132
|
+
ariaLabel?: string;
|
|
133
|
+
/** Additional CSS classes for the item */
|
|
134
|
+
className?: string;
|
|
135
|
+
/** Custom styles for the item */
|
|
136
|
+
style?: React.CSSProperties;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* Item placement positions
|
|
141
|
+
*/
|
|
142
|
+
declare type AccordionItemPlacement = "start" | "end" | "outside";
|
|
143
|
+
|
|
144
|
+
/**
|
|
145
|
+
* Props for individual AccordionItem component
|
|
146
|
+
*/
|
|
147
|
+
export declare interface AccordionItemProps {
|
|
148
|
+
/** Unique identifier for the item */
|
|
149
|
+
itemKey: string;
|
|
150
|
+
/** Title content for the header */
|
|
151
|
+
title: ReactNode;
|
|
152
|
+
/** Content to display when expanded */
|
|
153
|
+
children: ReactNode;
|
|
154
|
+
/** Whether this item is expanded */
|
|
155
|
+
isExpanded?: boolean;
|
|
156
|
+
/** Whether this item is disabled */
|
|
157
|
+
isDisabled?: boolean;
|
|
158
|
+
/** Whether to show divider */
|
|
159
|
+
showDivider?: boolean;
|
|
160
|
+
/** Custom header content */
|
|
161
|
+
header?: ReactNode;
|
|
162
|
+
/** Click handler for the item */
|
|
163
|
+
onToggle?: (key: string) => void;
|
|
164
|
+
/** Additional CSS classes */
|
|
165
|
+
className?: string;
|
|
166
|
+
/** Custom styles */
|
|
167
|
+
style?: React.CSSProperties;
|
|
168
|
+
/** ARIA label for accessibility */
|
|
169
|
+
ariaLabel?: string;
|
|
170
|
+
/** Test ID for testing */
|
|
171
|
+
"data-testid"?: string;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Main accordion component props
|
|
176
|
+
*/
|
|
177
|
+
export declare interface AccordionProps {
|
|
178
|
+
/** Accordion items configuration */
|
|
179
|
+
items?: AccordionItemConfig[];
|
|
180
|
+
/** Children components (AccordionItem) */
|
|
181
|
+
children?: ReactNode;
|
|
182
|
+
/** Selection mode */
|
|
183
|
+
selectionMode?: AccordionSelectionMode;
|
|
184
|
+
/** Default expanded items (for uncontrolled) */
|
|
185
|
+
defaultExpandedKeys?: string[];
|
|
186
|
+
/** Expanded items (for controlled) */
|
|
187
|
+
expandedKeys?: string[];
|
|
188
|
+
/** Callback when expansion changes */
|
|
189
|
+
onExpandedChange?: (keys: string[]) => void;
|
|
190
|
+
/** Callback when a single selection changes */
|
|
191
|
+
onSelectionChange?: (key: string) => void;
|
|
192
|
+
/** Size variant */
|
|
193
|
+
size?: AccordionSize;
|
|
194
|
+
/** Color variant */
|
|
195
|
+
color?: AccordionColor;
|
|
196
|
+
/** Visual variant */
|
|
197
|
+
variant?: AccordionVariant;
|
|
198
|
+
/** Border radius */
|
|
199
|
+
radius?: AccordionRadius;
|
|
200
|
+
/** Whether the accordion is disabled */
|
|
201
|
+
isDisabled?: boolean;
|
|
202
|
+
/** Whether to show dividers between items */
|
|
203
|
+
showDivider?: boolean;
|
|
204
|
+
/** Whether to disable animations */
|
|
205
|
+
disableAnimation?: boolean;
|
|
206
|
+
/** Whether to disable the indicator icons */
|
|
207
|
+
disableIndicatorAnimation?: boolean;
|
|
208
|
+
/** Whether to keep content mounted when collapsed */
|
|
209
|
+
keepContentMounted?: boolean;
|
|
210
|
+
/** Animation configuration for framer-motion */
|
|
211
|
+
animationConfig?: AccordionAnimationConfig;
|
|
212
|
+
/** Indicator placement */
|
|
213
|
+
indicatorPlacement?: AccordionIndicatorPlacement;
|
|
214
|
+
/** Item placement */
|
|
215
|
+
itemPlacement?: AccordionItemPlacement;
|
|
216
|
+
/** Whether to compact mode */
|
|
217
|
+
isCompact?: boolean;
|
|
218
|
+
/** Additional CSS classes */
|
|
219
|
+
className?: string;
|
|
220
|
+
/** Custom styles */
|
|
221
|
+
style?: React.CSSProperties;
|
|
222
|
+
/** ARIA label for the accordion */
|
|
223
|
+
"aria-label"?: string;
|
|
224
|
+
/** Test ID for testing */
|
|
225
|
+
"data-testid"?: string;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/**
|
|
229
|
+
* Border radius variants for Accordion component
|
|
230
|
+
*/
|
|
231
|
+
export declare type AccordionRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
|
|
232
|
+
|
|
233
|
+
/**
|
|
234
|
+
* Selection modes for Accordion
|
|
235
|
+
*/
|
|
236
|
+
export declare type AccordionSelectionMode = "single" | "multiple" | "none";
|
|
237
|
+
|
|
238
|
+
/**
|
|
239
|
+
* Size variants for Accordion component
|
|
240
|
+
*/
|
|
241
|
+
export declare type AccordionSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Visual variants for Accordion component
|
|
245
|
+
*/
|
|
246
|
+
export declare type AccordionVariant = "flat" | "bordered" | "shadow" | "splitted";
|
|
247
|
+
|
|
248
|
+
export declare interface AnimatedContainerConfig {
|
|
249
|
+
respectReducedMotion?: boolean;
|
|
250
|
+
defaultDuration?: number;
|
|
251
|
+
defaultEasing?: EasingType;
|
|
252
|
+
defaultTrigger?: TriggerType;
|
|
253
|
+
debugMode?: boolean;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
declare type AnimationIntensity = 'low' | 'medium' | 'high';
|
|
257
|
+
|
|
258
|
+
declare type AnimationType = 'fadeIn' | 'slideIn' | 'scaleIn' | 'rotateIn' | 'bounce' | 'stagger';
|
|
259
|
+
|
|
260
|
+
export declare interface AnimationVariants {
|
|
261
|
+
initial: any;
|
|
262
|
+
animate: any;
|
|
263
|
+
exit?: any;
|
|
264
|
+
hover?: any;
|
|
265
|
+
tap?: any;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* Main Autocomplete component following HeroUI design system
|
|
270
|
+
*/
|
|
271
|
+
export declare const Autocomplete: ForwardRefExoticComponent<AutocompleteProps<AutocompleteItemData> & RefAttributes<HTMLDivElement>>;
|
|
272
|
+
|
|
273
|
+
/**
|
|
274
|
+
* Autocomplete color variants following HeroUI design system
|
|
275
|
+
*/
|
|
276
|
+
declare type AutocompleteColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
|
|
277
|
+
|
|
278
|
+
/**
|
|
279
|
+
* AutocompleteItem component for individual list items in the autocomplete dropdown
|
|
280
|
+
*/
|
|
281
|
+
export declare const AutocompleteItem: default_2.ForwardRefExoticComponent<AutocompleteItemProps & {
|
|
282
|
+
/** Whether this item is currently selected */
|
|
283
|
+
isSelected?: boolean;
|
|
284
|
+
/** Whether this item is currently focused */
|
|
285
|
+
isFocused?: boolean;
|
|
286
|
+
/** Whether this item is disabled */
|
|
287
|
+
isDisabled?: boolean;
|
|
288
|
+
/** Whether to show divider after this item */
|
|
289
|
+
showDivider?: boolean;
|
|
290
|
+
/** Current autocomplete variant for styling context */
|
|
291
|
+
variant?: "flat" | "bordered" | "faded" | "solid" | "light" | "shadow";
|
|
292
|
+
/** Current autocomplete color for styling context */
|
|
293
|
+
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
294
|
+
/** Current autocomplete size for styling context */
|
|
295
|
+
size?: "sm" | "md" | "lg";
|
|
296
|
+
/** Item key for selection handling */
|
|
297
|
+
itemKey?: Key;
|
|
298
|
+
/** Selection handler */
|
|
299
|
+
onSelectionChange?: (key: Key) => void;
|
|
300
|
+
} & default_2.RefAttributes<HTMLLIElement>>;
|
|
301
|
+
|
|
302
|
+
/**
|
|
303
|
+
* Generic item type for collections
|
|
304
|
+
*/
|
|
305
|
+
declare interface AutocompleteItemData {
|
|
306
|
+
key: Key;
|
|
307
|
+
label: string;
|
|
308
|
+
value?: string;
|
|
309
|
+
description?: string;
|
|
310
|
+
isDisabled?: boolean;
|
|
311
|
+
startContent?: ReactNode;
|
|
312
|
+
endContent?: ReactNode;
|
|
313
|
+
className?: string;
|
|
314
|
+
textValue?: string;
|
|
315
|
+
}
|
|
316
|
+
|
|
317
|
+
/**
|
|
318
|
+
* AutocompleteItem component props
|
|
319
|
+
*/
|
|
320
|
+
export declare interface AutocompleteItemProps extends ComponentPropsWithoutRef<"li"> {
|
|
321
|
+
/** Unique key for the item */
|
|
322
|
+
key?: Key;
|
|
323
|
+
/** Item text value for filtering */
|
|
324
|
+
textValue?: string;
|
|
325
|
+
/** Start content */
|
|
326
|
+
startContent?: ReactNode;
|
|
327
|
+
/** End content */
|
|
328
|
+
endContent?: ReactNode;
|
|
329
|
+
/** Description text */
|
|
330
|
+
description?: ReactNode;
|
|
331
|
+
/** Custom class names for slots */
|
|
332
|
+
classNames?: Partial<Record<keyof AutocompleteItemSlots, string>>;
|
|
333
|
+
/** Event handlers */
|
|
334
|
+
onPress?: () => void;
|
|
335
|
+
onPressStart?: () => void;
|
|
336
|
+
onPressEnd?: () => void;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
/**
|
|
340
|
+
* AutocompleteItem slots
|
|
341
|
+
*/
|
|
342
|
+
declare interface AutocompleteItemSlots {
|
|
343
|
+
/** Base wrapper for the item */
|
|
344
|
+
base: string;
|
|
345
|
+
/** Content wrapper */
|
|
346
|
+
wrapper: string;
|
|
347
|
+
/** Title text */
|
|
348
|
+
title: string;
|
|
349
|
+
/** Description text */
|
|
350
|
+
description: string;
|
|
351
|
+
/** Start content wrapper */
|
|
352
|
+
startContent: string;
|
|
353
|
+
/** End content wrapper */
|
|
354
|
+
endContent: string;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
/**
|
|
358
|
+
* Autocomplete label placement options
|
|
359
|
+
*/
|
|
360
|
+
declare type AutocompleteLabelPlacement = 'inside' | 'outside' | 'outside-left';
|
|
361
|
+
|
|
362
|
+
/**
|
|
363
|
+
* Base Autocomplete component props
|
|
364
|
+
*/
|
|
365
|
+
export declare interface AutocompleteProps<T = AutocompleteItemData> extends Omit<ComponentPropsWithoutRef<"input">, "color" | "size" | "children" | "onChange" | "onSelect"> {
|
|
366
|
+
/** Content items (for static lists) */
|
|
367
|
+
children?: ReactNode;
|
|
368
|
+
/** Label for the autocomplete */
|
|
369
|
+
label?: ReactNode;
|
|
370
|
+
/** Visual variant */
|
|
371
|
+
variant?: AutocompleteVariant;
|
|
372
|
+
/** Color theme */
|
|
373
|
+
color?: AutocompleteColor;
|
|
374
|
+
/** Size variant */
|
|
375
|
+
size?: AutocompleteSize;
|
|
376
|
+
/** Items collection (for dynamic lists) */
|
|
377
|
+
items?: Iterable<T>;
|
|
378
|
+
/** Default items for uncontrolled usage */
|
|
379
|
+
defaultItems?: Iterable<T>;
|
|
380
|
+
/** Controlled input value */
|
|
381
|
+
inputValue?: string;
|
|
382
|
+
/** Default input value for uncontrolled usage */
|
|
383
|
+
defaultInputValue?: string;
|
|
384
|
+
/** Allow custom values not in the list */
|
|
385
|
+
allowsCustomValue?: boolean;
|
|
386
|
+
/** Allow empty collections */
|
|
387
|
+
allowsEmptyCollection?: boolean;
|
|
388
|
+
/** Close popover on blur */
|
|
389
|
+
shouldCloseOnBlur?: boolean;
|
|
390
|
+
/** Placeholder text */
|
|
391
|
+
placeholder?: string;
|
|
392
|
+
/** Description text */
|
|
393
|
+
description?: ReactNode;
|
|
394
|
+
/** When to trigger menu opening */
|
|
395
|
+
menuTrigger?: MenuTriggerAction;
|
|
396
|
+
/** Label placement */
|
|
397
|
+
labelPlacement?: AutocompleteLabelPlacement;
|
|
398
|
+
/** Controlled selected key */
|
|
399
|
+
selectedKey?: Key;
|
|
400
|
+
/** Default selected key for uncontrolled usage */
|
|
401
|
+
defaultSelectedKey?: Key;
|
|
402
|
+
/** Disabled item keys */
|
|
403
|
+
disabledKeys?: 'all' | Key[];
|
|
404
|
+
/** Error message */
|
|
405
|
+
errorMessage?: ReactNode | ((v: ValidationResult_2) => ReactNode);
|
|
406
|
+
/** Validation function */
|
|
407
|
+
validate?: (value: {
|
|
408
|
+
inputValue: string;
|
|
409
|
+
selectedKey: Key;
|
|
410
|
+
}) => ValidationError_2 | true | null | undefined;
|
|
411
|
+
/** Validation behavior */
|
|
412
|
+
validationBehavior?: ValidationBehavior_2;
|
|
413
|
+
/** Start content */
|
|
414
|
+
startContent?: ReactNode;
|
|
415
|
+
/** End content */
|
|
416
|
+
endContent?: ReactNode;
|
|
417
|
+
/** Auto focus */
|
|
418
|
+
autoFocus?: boolean;
|
|
419
|
+
/** Custom filter function */
|
|
420
|
+
defaultFilter?: FilterFunction;
|
|
421
|
+
/** Filter options for Intl.Collator */
|
|
422
|
+
filterOptions?: Intl.CollatorOptions;
|
|
423
|
+
/** Maximum listbox height for virtualization */
|
|
424
|
+
maxListboxHeight?: number;
|
|
425
|
+
/** Item height for virtualization */
|
|
426
|
+
itemHeight?: number;
|
|
427
|
+
/** Enable virtualization */
|
|
428
|
+
isVirtualized?: boolean;
|
|
429
|
+
/** Read-only state */
|
|
430
|
+
isReadOnly?: boolean;
|
|
431
|
+
/** Required state */
|
|
432
|
+
isRequired?: boolean;
|
|
433
|
+
/** Invalid state */
|
|
434
|
+
isInvalid?: boolean;
|
|
435
|
+
/** Disabled state */
|
|
436
|
+
isDisabled?: boolean;
|
|
437
|
+
/** Full width */
|
|
438
|
+
fullWidth?: boolean;
|
|
439
|
+
/** Custom selector icon */
|
|
440
|
+
selectorIcon?: ReactNode;
|
|
441
|
+
/** Custom clear icon */
|
|
442
|
+
clearIcon?: ReactNode;
|
|
443
|
+
/** Show scroll indicators */
|
|
444
|
+
showScrollIndicators?: boolean;
|
|
445
|
+
/** Allow clearing */
|
|
446
|
+
isClearable?: boolean;
|
|
447
|
+
/** Disable animations */
|
|
448
|
+
disableAnimation?: boolean;
|
|
449
|
+
/** Disable selector icon rotation */
|
|
450
|
+
disableSelectorIconRotation?: boolean;
|
|
451
|
+
/** Custom class names for slots */
|
|
452
|
+
classNames?: Partial<Record<keyof AutocompleteSlots, string>>;
|
|
453
|
+
/** Custom popover props */
|
|
454
|
+
popoverProps?: ComponentPropsWithoutRef<"div"> & {
|
|
455
|
+
isOpen?: boolean;
|
|
456
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
457
|
+
placement?: string;
|
|
458
|
+
offset?: number;
|
|
459
|
+
};
|
|
460
|
+
/** Custom listbox props */
|
|
461
|
+
listboxProps?: ComponentPropsWithoutRef<"ul"> & {
|
|
462
|
+
emptyContent?: ReactNode;
|
|
463
|
+
};
|
|
464
|
+
/** Custom input props */
|
|
465
|
+
inputProps?: ComponentPropsWithoutRef<"input">;
|
|
466
|
+
/** Custom scroll shadow props */
|
|
467
|
+
scrollShadowProps?: ComponentPropsWithoutRef<"div"> & {
|
|
468
|
+
hideScrollBar?: boolean;
|
|
469
|
+
};
|
|
470
|
+
/** Custom selector button props */
|
|
471
|
+
selectorButtonProps?: ComponentPropsWithoutRef<"button">;
|
|
472
|
+
/** Custom clear button props */
|
|
473
|
+
clearButtonProps?: ComponentPropsWithoutRef<"button">;
|
|
474
|
+
/** Event Handlers */
|
|
475
|
+
onOpenChange?: (isOpen: boolean, menuTrigger?: MenuTriggerAction) => void;
|
|
476
|
+
onInputChange?: (value: string) => void;
|
|
477
|
+
onSelectionChange?: (key: Key) => void;
|
|
478
|
+
onFocus?: (e: FocusEvent_2<HTMLInputElement>) => void;
|
|
479
|
+
onBlur?: (e: FocusEvent_2<HTMLInputElement>) => void;
|
|
480
|
+
onFocusChange?: (isFocused: boolean) => void;
|
|
481
|
+
onKeyDown?: (e: KeyboardEvent_2) => void;
|
|
482
|
+
onKeyUp?: (e: KeyboardEvent_2) => void;
|
|
483
|
+
onClose?: () => void;
|
|
484
|
+
onClear?: () => void;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
/**
|
|
488
|
+
* AutocompleteSection component for grouping items in the autocomplete dropdown
|
|
489
|
+
*/
|
|
490
|
+
export declare const AutocompleteSection: ForwardRefExoticComponent<AutocompleteSectionProps & {
|
|
491
|
+
/** Whether to show divider after this section */
|
|
492
|
+
showDivider?: boolean;
|
|
493
|
+
} & RefAttributes<HTMLDivElement>>;
|
|
494
|
+
|
|
495
|
+
/**
|
|
496
|
+
* AutocompleteSection component props
|
|
497
|
+
*/
|
|
498
|
+
export declare interface AutocompleteSectionProps extends Omit<ComponentPropsWithoutRef<"div">, "title"> {
|
|
499
|
+
/** Section title */
|
|
500
|
+
title?: ReactNode;
|
|
501
|
+
/** Show divider */
|
|
502
|
+
showDivider?: boolean;
|
|
503
|
+
/** Custom class names for slots */
|
|
504
|
+
classNames?: Partial<Record<keyof AutocompleteSectionSlots, string>>;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
/**
|
|
508
|
+
* AutocompleteSection slots
|
|
509
|
+
*/
|
|
510
|
+
declare interface AutocompleteSectionSlots {
|
|
511
|
+
/** Base wrapper for the section */
|
|
512
|
+
base: string;
|
|
513
|
+
/** Section heading */
|
|
514
|
+
heading: string;
|
|
515
|
+
/** Group of items */
|
|
516
|
+
group: string;
|
|
517
|
+
/** Divider */
|
|
518
|
+
divider: string;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
/**
|
|
522
|
+
* Autocomplete size variants
|
|
523
|
+
*/
|
|
524
|
+
declare type AutocompleteSize = 'sm' | 'md' | 'lg';
|
|
525
|
+
|
|
526
|
+
/**
|
|
527
|
+
* Autocomplete slots for styling customization
|
|
528
|
+
*/
|
|
529
|
+
declare interface AutocompleteSlots {
|
|
530
|
+
/** Main wrapper around input and popover */
|
|
531
|
+
base: string;
|
|
532
|
+
/** Input wrapper around the input field */
|
|
533
|
+
inputWrapper: string;
|
|
534
|
+
/** Wrapper around the listbox content */
|
|
535
|
+
listboxWrapper: string;
|
|
536
|
+
/** Popover content container */
|
|
537
|
+
popoverContent: string;
|
|
538
|
+
/** Wrapper for end content (clear + selector buttons) */
|
|
539
|
+
endContentWrapper: string;
|
|
540
|
+
/** Clear button styling */
|
|
541
|
+
clearButton: string;
|
|
542
|
+
/** Selector button styling */
|
|
543
|
+
selectorButton: string;
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
/**
|
|
547
|
+
* Autocomplete variant styles
|
|
548
|
+
*/
|
|
549
|
+
declare type AutocompleteVariant = 'flat' | 'bordered' | 'faded' | 'underlined';
|
|
550
|
+
|
|
551
|
+
/**
|
|
552
|
+
* Avatar component following HeroUI design system
|
|
553
|
+
* Displays user profile picture, initials, or fallback icon
|
|
554
|
+
*/
|
|
555
|
+
export declare const Avatar: default_2.ForwardRefExoticComponent<AvatarProps & default_2.RefAttributes<HTMLDivElement>>;
|
|
556
|
+
|
|
557
|
+
/**
|
|
558
|
+
* Avatar color variants following HeroUI design system
|
|
559
|
+
*/
|
|
560
|
+
export declare type AvatarColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
|
|
561
|
+
|
|
562
|
+
/**
|
|
563
|
+
* AvatarGroup component following HeroUI design system
|
|
564
|
+
* Groups multiple avatars with overflow handling and consistent styling
|
|
565
|
+
*/
|
|
566
|
+
export declare const AvatarGroup: default_2.ForwardRefExoticComponent<AvatarGroupProps & default_2.RefAttributes<HTMLDivElement>>;
|
|
567
|
+
|
|
568
|
+
/**
|
|
569
|
+
* Avatar Group context value
|
|
570
|
+
*/
|
|
571
|
+
declare interface AvatarGroupContextValue {
|
|
572
|
+
/** Size applied to all avatars in the group */
|
|
573
|
+
size?: AvatarSize;
|
|
574
|
+
/** Color applied to all avatars in the group */
|
|
575
|
+
color?: AvatarColor;
|
|
576
|
+
/** Radius applied to all avatars in the group */
|
|
577
|
+
radius?: AvatarRadius;
|
|
578
|
+
/** Whether all avatars in the group are disabled */
|
|
579
|
+
isDisabled?: boolean;
|
|
580
|
+
/** Whether all avatars in the group should have borders */
|
|
581
|
+
isBordered?: boolean;
|
|
582
|
+
/** Maximum number of avatars to display */
|
|
583
|
+
max?: number;
|
|
584
|
+
/** Total number of avatars */
|
|
585
|
+
total?: number;
|
|
586
|
+
/** Whether to display avatars in a grid layout */
|
|
587
|
+
isGrid?: boolean;
|
|
588
|
+
/** Custom function to render the count indicator */
|
|
589
|
+
renderCount?: (count: number) => ReactNode;
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
/**
|
|
593
|
+
* Avatar Group component props
|
|
594
|
+
*/
|
|
595
|
+
export declare interface AvatarGroupProps extends Omit<ComponentPropsWithoutRef<"div">, "color"> {
|
|
596
|
+
/** Maximum number of avatars to display */
|
|
597
|
+
max?: number;
|
|
598
|
+
/** Total number of avatars (for count display) */
|
|
599
|
+
total?: number;
|
|
600
|
+
/** Size applied to all avatars in the group */
|
|
601
|
+
size?: AvatarSize;
|
|
602
|
+
/** Color applied to all avatars in the group */
|
|
603
|
+
color?: AvatarColor;
|
|
604
|
+
/** Radius applied to all avatars in the group */
|
|
605
|
+
radius?: AvatarRadius;
|
|
606
|
+
/** Whether to display avatars in a grid layout */
|
|
607
|
+
isGrid?: boolean;
|
|
608
|
+
/** Whether all avatars in the group are disabled */
|
|
609
|
+
isDisabled?: boolean;
|
|
610
|
+
/** Whether all avatars in the group should have borders */
|
|
611
|
+
isBordered?: boolean;
|
|
612
|
+
/** Custom function to render the count indicator */
|
|
613
|
+
renderCount?: (count: number) => ReactNode;
|
|
614
|
+
/** Custom class names for avatar group slots */
|
|
615
|
+
classNames?: Partial<Record<keyof AvatarGroupSlots, string>>;
|
|
616
|
+
/** Data test id for testing */
|
|
617
|
+
"data-testid"?: string;
|
|
618
|
+
}
|
|
619
|
+
|
|
620
|
+
/**
|
|
621
|
+
* Avatar Group slots for styling customization
|
|
622
|
+
*/
|
|
623
|
+
declare interface AvatarGroupSlots {
|
|
624
|
+
/** Base wrapper for the avatar group */
|
|
625
|
+
base: string;
|
|
626
|
+
/** Count indicator showing additional avatars */
|
|
627
|
+
count: string;
|
|
628
|
+
}
|
|
629
|
+
|
|
630
|
+
/**
|
|
631
|
+
* Default Avatar Icon component
|
|
632
|
+
* Used as fallback when no image or name is provided
|
|
633
|
+
*/
|
|
634
|
+
export declare const AvatarIcon: default_2.FC<AvatarIconProps>;
|
|
635
|
+
|
|
636
|
+
/**
|
|
637
|
+
* Default Avatar Icon component props
|
|
638
|
+
*/
|
|
639
|
+
export declare interface AvatarIconProps extends ComponentPropsWithoutRef<"svg"> {
|
|
640
|
+
/** Size of the icon */
|
|
641
|
+
size?: number;
|
|
642
|
+
/** Custom class name */
|
|
643
|
+
className?: string;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
/**
|
|
647
|
+
* Base Avatar component props
|
|
648
|
+
*/
|
|
649
|
+
export declare interface AvatarProps extends Omit<ComponentPropsWithoutRef<"div">, "color"> {
|
|
650
|
+
/** Image source URL for the avatar */
|
|
651
|
+
src?: string;
|
|
652
|
+
/** Color theme of the avatar */
|
|
653
|
+
color?: AvatarColor;
|
|
654
|
+
/** Border radius of the avatar */
|
|
655
|
+
radius?: AvatarRadius;
|
|
656
|
+
/** Size of the avatar */
|
|
657
|
+
size?: AvatarSize;
|
|
658
|
+
/** Name for generating initials and accessible background color */
|
|
659
|
+
name?: string;
|
|
660
|
+
/** Custom icon to display as fallback */
|
|
661
|
+
icon?: ReactNode;
|
|
662
|
+
/** Custom fallback component when image fails to load */
|
|
663
|
+
fallback?: ReactNode;
|
|
664
|
+
/** Whether the avatar should have a border */
|
|
665
|
+
isBordered?: boolean;
|
|
666
|
+
/** Whether the avatar is disabled */
|
|
667
|
+
isDisabled?: boolean;
|
|
668
|
+
/** Whether the avatar can receive focus */
|
|
669
|
+
isFocusable?: boolean;
|
|
670
|
+
/** Whether to show fallback when image fails to load */
|
|
671
|
+
showFallback?: boolean;
|
|
672
|
+
/** Custom component to use for the image element */
|
|
673
|
+
ImgComponent?: ElementType;
|
|
674
|
+
/** Props to pass to the image component */
|
|
675
|
+
imgProps?: ComponentPropsWithoutRef<"img">;
|
|
676
|
+
/** Custom function to generate initials from name */
|
|
677
|
+
getInitials?: GetInitialsFunction;
|
|
678
|
+
/** Custom class names for avatar slots */
|
|
679
|
+
classNames?: Partial<Record<keyof AvatarSlots, string>>;
|
|
680
|
+
/** Component to render as (default: "div") */
|
|
681
|
+
as?: ElementType;
|
|
682
|
+
/** Data test id for testing */
|
|
683
|
+
"data-testid"?: string;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/**
|
|
687
|
+
* Avatar props interface (based on common avatar patterns)
|
|
688
|
+
*/
|
|
689
|
+
declare interface AvatarProps_2 {
|
|
690
|
+
/** Source URL for the avatar image */
|
|
691
|
+
src?: string;
|
|
692
|
+
/** Alt text for accessibility */
|
|
693
|
+
alt?: string;
|
|
694
|
+
/** Name to display when image is not available (shows initials) */
|
|
695
|
+
name?: string;
|
|
696
|
+
/** Size variant of the avatar */
|
|
697
|
+
size?: "sm" | "md" | "lg";
|
|
698
|
+
/** Custom CSS classes */
|
|
699
|
+
className?: string;
|
|
700
|
+
/** Whether the avatar should be squared */
|
|
701
|
+
isSquared?: boolean;
|
|
702
|
+
/** Color variant */
|
|
703
|
+
color?: "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
704
|
+
/** Whether the avatar is disabled */
|
|
705
|
+
isDisabled?: boolean;
|
|
706
|
+
/** Custom fallback element */
|
|
707
|
+
fallback?: ReactNode;
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/**
|
|
711
|
+
* Avatar radius variants
|
|
712
|
+
*/
|
|
713
|
+
export declare type AvatarRadius = 'none' | 'sm' | 'md' | 'lg' | 'full';
|
|
714
|
+
|
|
715
|
+
/**
|
|
716
|
+
* Avatar size variants
|
|
717
|
+
*/
|
|
718
|
+
export declare type AvatarSize = 'sm' | 'md' | 'lg';
|
|
719
|
+
|
|
720
|
+
/**
|
|
721
|
+
* Avatar slots for styling customization
|
|
722
|
+
*/
|
|
723
|
+
declare interface AvatarSlots {
|
|
724
|
+
/** Avatar wrapper, includes styles for focus ring, position, and general appearance */
|
|
725
|
+
base: string;
|
|
726
|
+
/** Image element within the avatar, includes styles for opacity transition and size */
|
|
727
|
+
img: string;
|
|
728
|
+
/** Fallback content when the image fails to load or is not provided */
|
|
729
|
+
fallback: string;
|
|
730
|
+
/** Initials displayed when image is not provided or fails to load */
|
|
731
|
+
name: string;
|
|
732
|
+
/** Icon element within the avatar, includes styles for centering and size */
|
|
733
|
+
icon: string;
|
|
734
|
+
}
|
|
735
|
+
|
|
736
|
+
/**
|
|
737
|
+
* Badge component following HeroUI design system
|
|
738
|
+
* A badge is a small component that represents a status or notification
|
|
739
|
+
*/
|
|
740
|
+
export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLDivElement>>;
|
|
741
|
+
|
|
742
|
+
export declare type BadgeColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
743
|
+
|
|
744
|
+
export declare type BadgePlacement = "top-right" | "top-left" | "bottom-right" | "bottom-left";
|
|
745
|
+
|
|
746
|
+
export declare interface BadgeProps {
|
|
747
|
+
/**
|
|
748
|
+
* The children to wrap with the badge
|
|
749
|
+
*/
|
|
750
|
+
children?: ReactNode;
|
|
751
|
+
/**
|
|
752
|
+
* The content to display in the badge
|
|
753
|
+
*/
|
|
754
|
+
content?: ReactNode;
|
|
755
|
+
/**
|
|
756
|
+
* The variant of the badge
|
|
757
|
+
* @default "solid"
|
|
758
|
+
*/
|
|
759
|
+
variant?: BadgeVariant;
|
|
760
|
+
/**
|
|
761
|
+
* The color of the badge
|
|
762
|
+
* @default "default"
|
|
763
|
+
*/
|
|
764
|
+
color?: BadgeColor;
|
|
765
|
+
/**
|
|
766
|
+
* The size of the badge
|
|
767
|
+
* @default "md"
|
|
768
|
+
*/
|
|
769
|
+
size?: BadgeSize;
|
|
770
|
+
/**
|
|
771
|
+
* The shape of the badge
|
|
772
|
+
* @default "rectangle"
|
|
773
|
+
*/
|
|
774
|
+
shape?: BadgeShape;
|
|
775
|
+
/**
|
|
776
|
+
* The placement of the badge relative to its children
|
|
777
|
+
* @default "top-right"
|
|
778
|
+
*/
|
|
779
|
+
placement?: BadgePlacement;
|
|
780
|
+
/**
|
|
781
|
+
* Whether the badge is visible
|
|
782
|
+
* @default true
|
|
783
|
+
*/
|
|
784
|
+
isOneChar?: boolean;
|
|
785
|
+
/**
|
|
786
|
+
* Whether to show an outline around the badge
|
|
787
|
+
* @default false
|
|
788
|
+
*/
|
|
789
|
+
showOutline?: boolean;
|
|
790
|
+
/**
|
|
791
|
+
* Whether the badge should be invisible
|
|
792
|
+
* @default false
|
|
793
|
+
*/
|
|
794
|
+
isInvisible?: boolean;
|
|
795
|
+
/**
|
|
796
|
+
* Whether to disable the scale animation
|
|
797
|
+
* @default false
|
|
798
|
+
*/
|
|
799
|
+
disableAnimation?: boolean;
|
|
800
|
+
/**
|
|
801
|
+
* Custom class names for different slots
|
|
802
|
+
*/
|
|
803
|
+
classNames?: BadgeSlots;
|
|
804
|
+
/**
|
|
805
|
+
* Custom class name for the base element
|
|
806
|
+
*/
|
|
807
|
+
className?: string;
|
|
808
|
+
}
|
|
809
|
+
|
|
810
|
+
export declare type BadgeShape = "circle" | "rectangle";
|
|
811
|
+
|
|
812
|
+
export declare type BadgeSize = "sm" | "md" | "lg";
|
|
813
|
+
|
|
814
|
+
declare interface BadgeSlots {
|
|
815
|
+
/**
|
|
816
|
+
* Container element that wraps the content and badge
|
|
817
|
+
*/
|
|
818
|
+
base?: string;
|
|
819
|
+
/**
|
|
820
|
+
* Badge element that displays the badge content
|
|
821
|
+
*/
|
|
822
|
+
badge?: string;
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
export declare type BadgeVariant = "solid" | "flat" | "faded" | "shadow";
|
|
826
|
+
|
|
827
|
+
export declare interface BaseAnimatedContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
828
|
+
children: ReactNode;
|
|
829
|
+
trigger?: TriggerType;
|
|
830
|
+
delay?: number;
|
|
831
|
+
duration?: number;
|
|
832
|
+
easing?: EasingType;
|
|
833
|
+
disabled?: boolean;
|
|
834
|
+
variants?: Variants;
|
|
835
|
+
transition?: Transition;
|
|
836
|
+
className?: string;
|
|
837
|
+
style?: React.CSSProperties;
|
|
838
|
+
onAnimationStart?: () => void;
|
|
839
|
+
onAnimationComplete?: () => void;
|
|
840
|
+
}
|
|
841
|
+
|
|
842
|
+
export declare interface BaseAnimationProps {
|
|
843
|
+
children: ReactNode;
|
|
844
|
+
className?: string;
|
|
845
|
+
delay?: number;
|
|
846
|
+
duration?: number;
|
|
847
|
+
disabled?: boolean;
|
|
848
|
+
trigger?: 'hover' | 'tap' | 'inView' | 'manual';
|
|
849
|
+
once?: boolean;
|
|
850
|
+
threshold?: number;
|
|
851
|
+
style?: React.CSSProperties;
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
declare interface BaseSpinnerProps extends Omit<HTMLMotionProps<'div'>, 'children'> {
|
|
855
|
+
/** Type of spinner animation */
|
|
856
|
+
type?: SpinnerType;
|
|
857
|
+
/** Size of the spinner */
|
|
858
|
+
size?: SpinnerSize;
|
|
859
|
+
/** Color theme of the spinner */
|
|
860
|
+
color?: SpinnerColor;
|
|
861
|
+
/** Animation speed */
|
|
862
|
+
speed?: SpinnerSpeed;
|
|
863
|
+
/** Whether the spinner is visible */
|
|
864
|
+
visible?: boolean;
|
|
865
|
+
/** Custom animation configuration */
|
|
866
|
+
animationConfig?: Partial<SpinnerAnimationConfig>;
|
|
867
|
+
/** Additional CSS classes */
|
|
868
|
+
className?: string;
|
|
869
|
+
/** ARIA label for accessibility */
|
|
870
|
+
'aria-label'?: string;
|
|
871
|
+
/** Test ID for testing */
|
|
872
|
+
'data-testid'?: string;
|
|
873
|
+
}
|
|
874
|
+
|
|
875
|
+
/**
|
|
876
|
+
* Base props shared by all text animation components
|
|
877
|
+
*/
|
|
878
|
+
export declare interface BaseTextProps {
|
|
879
|
+
/** Text content to animate */
|
|
880
|
+
text: string;
|
|
881
|
+
/** Additional CSS classes */
|
|
882
|
+
className?: string;
|
|
883
|
+
/** Animation trigger type */
|
|
884
|
+
trigger?: TextTrigger;
|
|
885
|
+
/** Whether to repeat the animation */
|
|
886
|
+
repeat?: boolean;
|
|
887
|
+
/** Delay before animation starts (in seconds) */
|
|
888
|
+
delay?: number;
|
|
889
|
+
/** Whether animation is disabled */
|
|
890
|
+
disabled?: boolean;
|
|
891
|
+
/** Manual trigger control when trigger is 'manual' */
|
|
892
|
+
isActive?: boolean;
|
|
893
|
+
/** Callback when animation completes */
|
|
894
|
+
onComplete?: () => void;
|
|
895
|
+
/** Callback when animation starts */
|
|
896
|
+
onStart?: () => void;
|
|
897
|
+
/** Test ID for testing */
|
|
898
|
+
'data-testid'?: string;
|
|
899
|
+
}
|
|
900
|
+
|
|
901
|
+
/**
|
|
902
|
+
* Base tooltip props
|
|
903
|
+
*/
|
|
904
|
+
declare interface BaseTooltipProps {
|
|
905
|
+
/** Tooltip content */
|
|
906
|
+
content: ReactNode;
|
|
907
|
+
/** Placement of tooltip */
|
|
908
|
+
placement?: TooltipPlacement;
|
|
909
|
+
/** How tooltip is triggered */
|
|
910
|
+
trigger?: TooltipTrigger;
|
|
911
|
+
/** Size variant */
|
|
912
|
+
size?: TooltipSize;
|
|
913
|
+
/** Color variant */
|
|
914
|
+
variant?: TooltipVariant;
|
|
915
|
+
/** Animation type */
|
|
916
|
+
animation?: TooltipAnimation;
|
|
917
|
+
/** Advanced animation configuration */
|
|
918
|
+
animationConfig?: TooltipAnimationConfig;
|
|
919
|
+
/** Custom offset */
|
|
920
|
+
offset?: TooltipOffset;
|
|
921
|
+
/** Arrow configuration */
|
|
922
|
+
arrow?: TooltipArrow;
|
|
923
|
+
/** Show/hide delays */
|
|
924
|
+
delay?: TooltipDelay;
|
|
925
|
+
/** Whether tooltip is disabled */
|
|
926
|
+
disabled?: boolean;
|
|
927
|
+
/** Whether tooltip is open (for manual trigger) */
|
|
928
|
+
open?: boolean;
|
|
929
|
+
/** Default open state (for uncontrolled) */
|
|
930
|
+
defaultOpen?: boolean;
|
|
931
|
+
/** Callback when open state changes */
|
|
932
|
+
onOpenChange?: (open: boolean) => void;
|
|
933
|
+
/** Custom z-index */
|
|
934
|
+
zIndex?: number;
|
|
935
|
+
/** Whether to render in portal */
|
|
936
|
+
portal?: boolean;
|
|
937
|
+
/** Portal container */
|
|
938
|
+
portalContainer?: Element | DocumentFragment;
|
|
939
|
+
/** Custom CSS classes */
|
|
940
|
+
className?: string;
|
|
941
|
+
/** Custom styles */
|
|
942
|
+
style?: React.CSSProperties;
|
|
943
|
+
/** ARIA label for accessibility */
|
|
944
|
+
'aria-label'?: string;
|
|
945
|
+
/** ARIA described by for accessibility */
|
|
946
|
+
'aria-describedby'?: string;
|
|
947
|
+
/** Custom ID */
|
|
948
|
+
id?: string;
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
/**
|
|
952
|
+
* Bounce Animation Component
|
|
953
|
+
*
|
|
954
|
+
* Creates a bouncing animation effect with customizable amplitude and frequency
|
|
955
|
+
*/
|
|
956
|
+
export declare const Bounce: React.FC<BounceProps>;
|
|
957
|
+
|
|
958
|
+
export declare const BounceContainer: default_2.FC<BounceContainerProps>;
|
|
959
|
+
|
|
960
|
+
export declare interface BounceContainerProps extends BaseAnimatedContainerProps {
|
|
961
|
+
intensity?: AnimationIntensity;
|
|
962
|
+
bounceCount?: number;
|
|
963
|
+
startScale?: number;
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
export declare interface BounceProps extends BaseAnimationProps {
|
|
967
|
+
amplitude?: number;
|
|
968
|
+
frequency?: number;
|
|
969
|
+
damping?: number;
|
|
970
|
+
}
|
|
971
|
+
|
|
972
|
+
export declare const Breadcrumb: default_2.ForwardRefExoticComponent<BreadcrumbProps & default_2.RefAttributes<HTMLElement>>;
|
|
973
|
+
|
|
974
|
+
declare type BreadcrumbColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
|
|
975
|
+
|
|
976
|
+
export declare const BreadcrumbItem: default_2.ForwardRefExoticComponent<BreadcrumbItemProps & default_2.RefAttributes<HTMLAnchorElement>>;
|
|
977
|
+
|
|
978
|
+
export declare interface BreadcrumbItemProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'color'> {
|
|
979
|
+
children: ReactNode;
|
|
980
|
+
href?: string;
|
|
981
|
+
isDisabled?: boolean;
|
|
982
|
+
isCurrent?: boolean;
|
|
983
|
+
startContent?: ReactNode;
|
|
984
|
+
endContent?: ReactNode;
|
|
985
|
+
className?: string;
|
|
986
|
+
itemClassName?: string;
|
|
987
|
+
linkClassName?: string;
|
|
988
|
+
size?: BreadcrumbSize;
|
|
989
|
+
color?: BreadcrumbColor;
|
|
990
|
+
variant?: BreadcrumbVariant;
|
|
991
|
+
onPress?: (event: default_2.MouseEvent<HTMLAnchorElement>) => void;
|
|
992
|
+
}
|
|
993
|
+
|
|
994
|
+
export declare interface BreadcrumbProps extends Omit<HTMLAttributes<HTMLElement>, 'color'> {
|
|
995
|
+
children: ReactNode;
|
|
996
|
+
size?: BreadcrumbSize;
|
|
997
|
+
color?: BreadcrumbColor;
|
|
998
|
+
variant?: BreadcrumbVariant;
|
|
999
|
+
separator?: SeparatorType | ReactNode;
|
|
1000
|
+
separatorClassName?: string;
|
|
1001
|
+
itemsClassName?: string;
|
|
1002
|
+
hideSeparator?: boolean;
|
|
1003
|
+
maxItems?: number;
|
|
1004
|
+
showRoot?: boolean;
|
|
1005
|
+
isDisabled?: boolean;
|
|
1006
|
+
itemsBeforeCollapse?: number;
|
|
1007
|
+
itemsAfterCollapse?: number;
|
|
1008
|
+
renderEllipsis?: (hiddenItems: number) => ReactNode;
|
|
1009
|
+
className?: string;
|
|
1010
|
+
listProps?: HTMLAttributes<HTMLOListElement>;
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
export declare const BreadcrumbSeparator: default_2.ForwardRefExoticComponent<BreadcrumbSeparatorProps & default_2.RefAttributes<HTMLSpanElement>>;
|
|
1014
|
+
|
|
1015
|
+
export declare interface BreadcrumbSeparatorProps {
|
|
1016
|
+
type?: SeparatorType;
|
|
1017
|
+
customIcon?: ReactNode;
|
|
1018
|
+
className?: string;
|
|
1019
|
+
size?: BreadcrumbSize;
|
|
1020
|
+
color?: BreadcrumbColor;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
declare type BreadcrumbSize = 'sm' | 'md' | 'lg';
|
|
1024
|
+
|
|
1025
|
+
declare type BreadcrumbVariant = 'solid' | 'bordered' | 'light' | 'flat';
|
|
1026
|
+
|
|
1027
|
+
/**
|
|
1028
|
+
* Enhanced Button component with Framer Motion animations
|
|
1029
|
+
* Supports multiple variants, colors, sizes, and interactive states
|
|
1030
|
+
* @param props - Button component properties
|
|
1031
|
+
* @returns JSX element representing a styled button
|
|
1032
|
+
*/
|
|
1033
|
+
export declare const Button: ({ children, className, ariaLabel, color, disabled, isLoading, onClick, type, size, variant, radius, startIcon, endIcon, fullWidth, disableAnimation, hoverAnimation, clickAnimation, "data-testid": dataTestId, }: ButtonProps) => JSX.Element;
|
|
1034
|
+
|
|
1035
|
+
/**
|
|
1036
|
+
* Click animation variants for Button component
|
|
1037
|
+
*/
|
|
1038
|
+
export declare type ButtonClickAnimation = "none" | "scale" | "bounce" | "ripple" | "press" | "punch" | "wiggle";
|
|
1039
|
+
|
|
1040
|
+
/**
|
|
1041
|
+
* Color variants for Button component
|
|
1042
|
+
*/
|
|
1043
|
+
export declare type ButtonColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
1044
|
+
|
|
1045
|
+
/**
|
|
1046
|
+
* ButtonContent component for button text content
|
|
1047
|
+
* @param props - ButtonContent component properties
|
|
1048
|
+
* @returns JSX element representing button content
|
|
1049
|
+
*/
|
|
1050
|
+
export declare const ButtonContent: ({ children, className, "data-testid": dataTestId, }: ButtonContentProps) => JSX.Element;
|
|
1051
|
+
|
|
1052
|
+
/**
|
|
1053
|
+
* Props interface for ButtonContent component
|
|
1054
|
+
*/
|
|
1055
|
+
export declare interface ButtonContentProps {
|
|
1056
|
+
/** Content to render inside the button content */
|
|
1057
|
+
children: ReactNode;
|
|
1058
|
+
/** Additional CSS classes to apply */
|
|
1059
|
+
className?: string;
|
|
1060
|
+
/** Test ID for testing frameworks */
|
|
1061
|
+
"data-testid"?: string;
|
|
1062
|
+
}
|
|
1063
|
+
|
|
1064
|
+
/**
|
|
1065
|
+
* ButtonGroup component for grouping multiple buttons
|
|
1066
|
+
* @param props - ButtonGroup component properties
|
|
1067
|
+
* @returns JSX element representing a group of buttons
|
|
1068
|
+
*/
|
|
1069
|
+
export declare const ButtonGroup: ({ children, className, size, color, variant, radius, isAttached, disabled, disableAnimation, "data-testid": dataTestId, }: ButtonGroupProps) => JSX.Element;
|
|
1070
|
+
|
|
1071
|
+
/**
|
|
1072
|
+
* Props interface for ButtonGroup component
|
|
1073
|
+
*/
|
|
1074
|
+
export declare interface ButtonGroupProps {
|
|
1075
|
+
/** Button components to render inside the group */
|
|
1076
|
+
children: ReactNode;
|
|
1077
|
+
/** Additional CSS classes to apply */
|
|
1078
|
+
className?: string;
|
|
1079
|
+
/** Size variant for all buttons in group */
|
|
1080
|
+
size?: ButtonSize;
|
|
1081
|
+
/** Color theme for all buttons in group */
|
|
1082
|
+
color?: ButtonColor;
|
|
1083
|
+
/** Visual style variant for all buttons in group */
|
|
1084
|
+
variant?: ButtonVariant;
|
|
1085
|
+
/** Border radius for all buttons in group */
|
|
1086
|
+
radius?: ButtonRadius;
|
|
1087
|
+
/** Whether buttons are attached (no spacing) */
|
|
1088
|
+
isAttached?: boolean;
|
|
1089
|
+
/** Whether the group is disabled */
|
|
1090
|
+
disabled?: boolean;
|
|
1091
|
+
/** Whether to disable hover and focus animations for all buttons */
|
|
1092
|
+
disableAnimation?: boolean;
|
|
1093
|
+
/** Test ID for testing frameworks */
|
|
1094
|
+
"data-testid"?: string;
|
|
1095
|
+
}
|
|
1096
|
+
|
|
1097
|
+
/**
|
|
1098
|
+
* Hover animation variants for Button component
|
|
1099
|
+
*/
|
|
1100
|
+
export declare type ButtonHoverAnimation = "none" | "scale" | "lift" | "bounce" | "pulse" | "shake" | "rotate" | "glow";
|
|
1101
|
+
|
|
1102
|
+
/**
|
|
1103
|
+
* ButtonIcon component for button icons
|
|
1104
|
+
* @param props - ButtonIcon component properties
|
|
1105
|
+
* @returns JSX element representing button icon
|
|
1106
|
+
*/
|
|
1107
|
+
export declare const ButtonIcon: ({ children, className, position, "data-testid": dataTestId, }: ButtonIconProps) => JSX.Element;
|
|
1108
|
+
|
|
1109
|
+
/**
|
|
1110
|
+
* Props interface for ButtonIcon component
|
|
1111
|
+
*/
|
|
1112
|
+
export declare interface ButtonIconProps {
|
|
1113
|
+
/** Icon element to render */
|
|
1114
|
+
children: ReactNode;
|
|
1115
|
+
/** Additional CSS classes to apply */
|
|
1116
|
+
className?: string;
|
|
1117
|
+
/** Position of the icon */
|
|
1118
|
+
position?: "start" | "end";
|
|
1119
|
+
/** Test ID for testing frameworks */
|
|
1120
|
+
"data-testid"?: string;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
/**
|
|
1124
|
+
* Props interface for the main Button component
|
|
1125
|
+
*/
|
|
1126
|
+
export declare interface ButtonProps {
|
|
1127
|
+
/** Content to render inside the button */
|
|
1128
|
+
children: ReactNode;
|
|
1129
|
+
/** Additional CSS classes to apply */
|
|
1130
|
+
className?: string;
|
|
1131
|
+
/** Accessibility label for screen readers */
|
|
1132
|
+
ariaLabel?: string;
|
|
1133
|
+
/** Color theme of the button */
|
|
1134
|
+
color?: ButtonColor;
|
|
1135
|
+
/** Whether the button is disabled */
|
|
1136
|
+
disabled?: boolean;
|
|
1137
|
+
/** Whether the button is in loading state */
|
|
1138
|
+
isLoading?: boolean;
|
|
1139
|
+
/** Click handler function */
|
|
1140
|
+
onClick?: () => void;
|
|
1141
|
+
/** HTML button type attribute */
|
|
1142
|
+
type?: "button" | "submit" | "reset";
|
|
1143
|
+
/** Size variant of the button */
|
|
1144
|
+
size?: ButtonSize;
|
|
1145
|
+
/** Visual style variant */
|
|
1146
|
+
variant?: ButtonVariant;
|
|
1147
|
+
/** Border radius of the button */
|
|
1148
|
+
radius?: ButtonRadius;
|
|
1149
|
+
/** Icon to display before text */
|
|
1150
|
+
startIcon?: ReactNode;
|
|
1151
|
+
/** Icon to display after text */
|
|
1152
|
+
endIcon?: ReactNode;
|
|
1153
|
+
/** Whether to show full width */
|
|
1154
|
+
fullWidth?: boolean;
|
|
1155
|
+
/** Whether to disable hover and focus animations */
|
|
1156
|
+
disableAnimation?: boolean;
|
|
1157
|
+
/** Hover animation type - Framer Motion powered */
|
|
1158
|
+
hoverAnimation?: ButtonHoverAnimation;
|
|
1159
|
+
/** Click animation type - Framer Motion powered */
|
|
1160
|
+
clickAnimation?: ButtonClickAnimation;
|
|
1161
|
+
/** Test ID for testing frameworks */
|
|
1162
|
+
"data-testid"?: string;
|
|
1163
|
+
}
|
|
1164
|
+
|
|
1165
|
+
/**
|
|
1166
|
+
* Radius variants for Button component
|
|
1167
|
+
*/
|
|
1168
|
+
export declare type ButtonRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
|
|
1169
|
+
|
|
1170
|
+
/**
|
|
1171
|
+
* Size variants for Button component
|
|
1172
|
+
*/
|
|
1173
|
+
export declare type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
1174
|
+
|
|
1175
|
+
/**
|
|
1176
|
+
* ButtonText component for button text
|
|
1177
|
+
* @param props - ButtonText component properties
|
|
1178
|
+
* @returns JSX element representing button text
|
|
1179
|
+
*/
|
|
1180
|
+
export declare const ButtonText: ({ children, className, "data-testid": dataTestId, }: ButtonTextProps) => JSX.Element;
|
|
1181
|
+
|
|
1182
|
+
/**
|
|
1183
|
+
* Props interface for ButtonText component
|
|
1184
|
+
*/
|
|
1185
|
+
export declare interface ButtonTextProps {
|
|
1186
|
+
/** Text content to render */
|
|
1187
|
+
children: ReactNode;
|
|
1188
|
+
/** Additional CSS classes to apply */
|
|
1189
|
+
className?: string;
|
|
1190
|
+
/** Test ID for testing frameworks */
|
|
1191
|
+
"data-testid"?: string;
|
|
1192
|
+
}
|
|
1193
|
+
|
|
1194
|
+
/**
|
|
1195
|
+
* Visual variants for Button component
|
|
1196
|
+
*/
|
|
1197
|
+
export declare type ButtonVariant = "solid" | "outline" | "ghost" | "link" | "gradient" | "faded" | "light" | "bordered" | "outlined";
|
|
1198
|
+
|
|
1199
|
+
/**
|
|
1200
|
+
* Reusable Card component with multiple variants, colors, and sizes
|
|
1201
|
+
* Supports accessibility features and consistent styling across the application
|
|
1202
|
+
* @param props - Card component properties
|
|
1203
|
+
* @returns JSX element representing a styled card
|
|
1204
|
+
*/
|
|
1205
|
+
export declare const Card: ({ children, className, size, variant, color, radius, isClickable, isDisabled, isHoverable, onClick, "data-testid": dataTestId, }: CardProps) => JSX.Element;
|
|
1206
|
+
|
|
1207
|
+
/**
|
|
1208
|
+
* Color variants for Card component
|
|
1209
|
+
*/
|
|
1210
|
+
declare type CardColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
1211
|
+
|
|
1212
|
+
/**
|
|
1213
|
+
* Props interface for the main Card component
|
|
1214
|
+
*/
|
|
1215
|
+
export declare interface CardProps {
|
|
1216
|
+
/** Content to render inside the card */
|
|
1217
|
+
children: ReactNode;
|
|
1218
|
+
/** Additional CSS classes to apply */
|
|
1219
|
+
className?: string;
|
|
1220
|
+
/** Size variant of the card */
|
|
1221
|
+
size?: CardSize;
|
|
1222
|
+
/** Visual style variant */
|
|
1223
|
+
variant?: CardVariant;
|
|
1224
|
+
/** Color theme of the card */
|
|
1225
|
+
color?: CardColor;
|
|
1226
|
+
/** Border radius of the card */
|
|
1227
|
+
radius?: CardRadius;
|
|
1228
|
+
/** Whether the card is clickable */
|
|
1229
|
+
isClickable?: boolean;
|
|
1230
|
+
/** Whether the card is disabled */
|
|
1231
|
+
isDisabled?: boolean;
|
|
1232
|
+
/** Whether the card is hoverable */
|
|
1233
|
+
isHoverable?: boolean;
|
|
1234
|
+
/** Click handler function */
|
|
1235
|
+
onClick?: () => void;
|
|
1236
|
+
/** Test ID for testing frameworks */
|
|
1237
|
+
"data-testid"?: string;
|
|
1238
|
+
}
|
|
1239
|
+
|
|
1240
|
+
/**
|
|
1241
|
+
* Radius variants for Card component
|
|
1242
|
+
*/
|
|
1243
|
+
declare type CardRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
|
|
1244
|
+
|
|
1245
|
+
/**
|
|
1246
|
+
* Size variants for Card component
|
|
1247
|
+
*/
|
|
1248
|
+
declare type CardSize = "sm" | "md" | "lg" | "xl";
|
|
1249
|
+
|
|
1250
|
+
/**
|
|
1251
|
+
* Visual variants for Card component
|
|
1252
|
+
*/
|
|
1253
|
+
declare type CardVariant = "elevated" | "bordered" | "shadow" | "flat";
|
|
1254
|
+
|
|
1255
|
+
/**
|
|
1256
|
+
* Enhanced Checkbox component with comprehensive features
|
|
1257
|
+
* Supports multiple sizes, colors, states, and custom icons
|
|
1258
|
+
* @param props - Checkbox component properties
|
|
1259
|
+
* @returns JSX element representing a styled checkbox
|
|
1260
|
+
*/
|
|
1261
|
+
export declare const Checkbox: ({ children, icon: IconComponent, value, name, size, color, radius, lineThrough, isSelected: controlledSelected, defaultSelected, isRequired, isReadOnly, isDisabled, isIndeterminate, isInvalid, validationState, disableAnimation, className, classNames, onChange, onValueChange, "data-testid": dataTestId, }: CheckboxProps) => JSX.Element;
|
|
1262
|
+
|
|
1263
|
+
/**
|
|
1264
|
+
* Color variants for Checkbox component
|
|
1265
|
+
*/
|
|
1266
|
+
declare type CheckboxColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
1267
|
+
|
|
1268
|
+
/**
|
|
1269
|
+
* Props interface for custom checkbox icon
|
|
1270
|
+
*/
|
|
1271
|
+
declare interface CheckboxIconProps {
|
|
1272
|
+
/** Whether the checkbox is selected */
|
|
1273
|
+
isSelected?: boolean;
|
|
1274
|
+
/** Whether the checkbox is indeterminate */
|
|
1275
|
+
isIndeterminate?: boolean;
|
|
1276
|
+
/** Whether animations are disabled */
|
|
1277
|
+
disableAnimation?: boolean;
|
|
1278
|
+
/** Additional CSS classes */
|
|
1279
|
+
className?: string;
|
|
1280
|
+
}
|
|
1281
|
+
|
|
1282
|
+
/**
|
|
1283
|
+
* Props interface for the main Checkbox component
|
|
1284
|
+
*/
|
|
1285
|
+
export declare interface CheckboxProps {
|
|
1286
|
+
/** Content to render as checkbox label */
|
|
1287
|
+
children?: ReactNode;
|
|
1288
|
+
/** Custom icon component for checkbox */
|
|
1289
|
+
icon?: React.ComponentType<CheckboxIconProps>;
|
|
1290
|
+
/** Value attribute for the checkbox input */
|
|
1291
|
+
value?: string;
|
|
1292
|
+
/** Name attribute for the checkbox input */
|
|
1293
|
+
name?: string;
|
|
1294
|
+
/** Size variant of the checkbox */
|
|
1295
|
+
size?: CheckboxSize;
|
|
1296
|
+
/** Color theme of the checkbox */
|
|
1297
|
+
color?: CheckboxColor;
|
|
1298
|
+
/** Border radius of the checkbox */
|
|
1299
|
+
radius?: CheckboxRadius;
|
|
1300
|
+
/** Whether to show line-through effect on label when checked */
|
|
1301
|
+
lineThrough?: boolean;
|
|
1302
|
+
/** Whether the checkbox is selected (controlled) */
|
|
1303
|
+
isSelected?: boolean;
|
|
1304
|
+
/** Default selected state (uncontrolled) */
|
|
1305
|
+
defaultSelected?: boolean;
|
|
1306
|
+
/** Whether the checkbox is required */
|
|
1307
|
+
isRequired?: boolean;
|
|
1308
|
+
/** Whether the checkbox is read-only */
|
|
1309
|
+
isReadOnly?: boolean;
|
|
1310
|
+
/** Whether the checkbox is disabled */
|
|
1311
|
+
isDisabled?: boolean;
|
|
1312
|
+
/** Whether the checkbox is in indeterminate state */
|
|
1313
|
+
isIndeterminate?: boolean;
|
|
1314
|
+
/** Whether the checkbox is invalid */
|
|
1315
|
+
isInvalid?: boolean;
|
|
1316
|
+
/** Validation state of the checkbox */
|
|
1317
|
+
validationState?: CheckboxValidationState;
|
|
1318
|
+
/** Whether to disable hover and focus animations */
|
|
1319
|
+
disableAnimation?: boolean;
|
|
1320
|
+
/** Additional CSS classes to apply */
|
|
1321
|
+
className?: string;
|
|
1322
|
+
/** Custom class names for different slots */
|
|
1323
|
+
classNames?: Partial<Record<"base" | "wrapper" | "icon" | "label" | "hiddenInput", string>>;
|
|
1324
|
+
/** Native change event handler */
|
|
1325
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
1326
|
+
/** Value change event handler */
|
|
1327
|
+
onValueChange?: (isSelected: boolean) => void;
|
|
1328
|
+
/** Test ID for testing frameworks */
|
|
1329
|
+
"data-testid"?: string;
|
|
1330
|
+
}
|
|
1331
|
+
|
|
1332
|
+
/**
|
|
1333
|
+
* Radius variants for Checkbox component
|
|
1334
|
+
*/
|
|
1335
|
+
declare type CheckboxRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
1336
|
+
|
|
1337
|
+
/**
|
|
1338
|
+
* Size variants for Checkbox component
|
|
1339
|
+
*/
|
|
1340
|
+
declare type CheckboxSize = "sm" | "md" | "lg";
|
|
1341
|
+
|
|
1342
|
+
/**
|
|
1343
|
+
* Validation state for Checkbox component
|
|
1344
|
+
*/
|
|
1345
|
+
declare type CheckboxValidationState = "valid" | "invalid";
|
|
1346
|
+
|
|
1347
|
+
/**
|
|
1348
|
+
* Chip component following HeroUI design system
|
|
1349
|
+
* A small block of essential information that represents an input, attribute, or action
|
|
1350
|
+
*/
|
|
1351
|
+
export declare const Chip: ForwardRefExoticComponent<ChipProps & RefAttributes<HTMLDivElement>>;
|
|
1352
|
+
|
|
1353
|
+
export declare type ChipColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
1354
|
+
|
|
1355
|
+
export declare interface ChipProps {
|
|
1356
|
+
/**
|
|
1357
|
+
* The content to display inside the chip
|
|
1358
|
+
*/
|
|
1359
|
+
children?: ReactNode;
|
|
1360
|
+
/**
|
|
1361
|
+
* The variant of the chip
|
|
1362
|
+
* @default "solid"
|
|
1363
|
+
*/
|
|
1364
|
+
variant?: ChipVariant;
|
|
1365
|
+
/**
|
|
1366
|
+
* The color of the chip
|
|
1367
|
+
* @default "default"
|
|
1368
|
+
*/
|
|
1369
|
+
color?: ChipColor;
|
|
1370
|
+
/**
|
|
1371
|
+
* The size of the chip
|
|
1372
|
+
* @default "md"
|
|
1373
|
+
*/
|
|
1374
|
+
size?: ChipSize;
|
|
1375
|
+
/**
|
|
1376
|
+
* The radius of the chip
|
|
1377
|
+
* @default "full"
|
|
1378
|
+
*/
|
|
1379
|
+
radius?: ChipRadius;
|
|
1380
|
+
/**
|
|
1381
|
+
* Avatar element to display on the left side
|
|
1382
|
+
*/
|
|
1383
|
+
avatar?: ReactNode;
|
|
1384
|
+
/**
|
|
1385
|
+
* Content to display at the start of the chip
|
|
1386
|
+
*/
|
|
1387
|
+
startContent?: ReactNode;
|
|
1388
|
+
/**
|
|
1389
|
+
* Content to display at the end of the chip
|
|
1390
|
+
*/
|
|
1391
|
+
endContent?: ReactNode;
|
|
1392
|
+
/**
|
|
1393
|
+
* Whether the chip is disabled
|
|
1394
|
+
* @default false
|
|
1395
|
+
*/
|
|
1396
|
+
isDisabled?: boolean;
|
|
1397
|
+
/**
|
|
1398
|
+
* Custom class names for different slots
|
|
1399
|
+
*/
|
|
1400
|
+
classNames?: ChipSlots;
|
|
1401
|
+
/**
|
|
1402
|
+
* Custom class name for the chip
|
|
1403
|
+
*/
|
|
1404
|
+
className?: string;
|
|
1405
|
+
/**
|
|
1406
|
+
* Handler called when the close button is clicked
|
|
1407
|
+
*/
|
|
1408
|
+
onClose?: (e: MouseEvent_2<HTMLButtonElement>) => void;
|
|
1409
|
+
}
|
|
1410
|
+
|
|
1411
|
+
declare type ChipRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
1412
|
+
|
|
1413
|
+
export declare type ChipSize = "sm" | "md" | "lg";
|
|
1414
|
+
|
|
1415
|
+
declare interface ChipSlots {
|
|
1416
|
+
/**
|
|
1417
|
+
* The base slot of the chip, it is the container of the chip
|
|
1418
|
+
*/
|
|
1419
|
+
base?: string;
|
|
1420
|
+
/**
|
|
1421
|
+
* The content slot of the chip, it is the container of the chip children
|
|
1422
|
+
*/
|
|
1423
|
+
content?: string;
|
|
1424
|
+
/**
|
|
1425
|
+
* Small dot on the left side of the chip. Visible when variant=dot
|
|
1426
|
+
*/
|
|
1427
|
+
dot?: string;
|
|
1428
|
+
/**
|
|
1429
|
+
* Avatar classes of the chip. Visible when avatar prop is passed
|
|
1430
|
+
*/
|
|
1431
|
+
avatar?: string;
|
|
1432
|
+
/**
|
|
1433
|
+
* Close button classes of the chip. Visible when onClose prop is passed
|
|
1434
|
+
*/
|
|
1435
|
+
closeButton?: string;
|
|
1436
|
+
}
|
|
1437
|
+
|
|
1438
|
+
export declare type ChipVariant = "solid" | "bordered" | "light" | "flat" | "faded" | "shadow" | "dot";
|
|
1439
|
+
|
|
1440
|
+
/**
|
|
1441
|
+
* Column alignment options
|
|
1442
|
+
*/
|
|
1443
|
+
declare type ColumnAlign = "start" | "center" | "end";
|
|
1444
|
+
|
|
1445
|
+
/**
|
|
1446
|
+
* Column definition interface
|
|
1447
|
+
*/
|
|
1448
|
+
declare interface ColumnDef<T = any> {
|
|
1449
|
+
key: Key;
|
|
1450
|
+
label: ReactNode;
|
|
1451
|
+
align?: ColumnAlign;
|
|
1452
|
+
allowsSorting?: boolean;
|
|
1453
|
+
hideHeader?: boolean;
|
|
1454
|
+
isRowHeader?: boolean;
|
|
1455
|
+
sortIcon?: ReactNode;
|
|
1456
|
+
width?: string | number;
|
|
1457
|
+
minWidth?: string | number;
|
|
1458
|
+
maxWidth?: string | number;
|
|
1459
|
+
render?: (item: T) => ReactNode;
|
|
1460
|
+
}
|
|
1461
|
+
|
|
1462
|
+
/**
|
|
1463
|
+
* Content placement options
|
|
1464
|
+
*/
|
|
1465
|
+
declare type ContentPlacement = "inside" | "outside";
|
|
1466
|
+
|
|
1467
|
+
/**
|
|
1468
|
+
* CounterText Component
|
|
1469
|
+
*
|
|
1470
|
+
* Animates a number from one value to another with formatting options
|
|
1471
|
+
* and customizable animation effects.
|
|
1472
|
+
*
|
|
1473
|
+
* @example
|
|
1474
|
+
* <CounterText
|
|
1475
|
+
* from={0}
|
|
1476
|
+
* to={1000}
|
|
1477
|
+
* duration={2}
|
|
1478
|
+
* format="currency"
|
|
1479
|
+
* currency="USD"
|
|
1480
|
+
* decimals={2}
|
|
1481
|
+
* />
|
|
1482
|
+
*/
|
|
1483
|
+
export declare const CounterText: React_2.FC<CounterTextProps>;
|
|
1484
|
+
|
|
1485
|
+
/**
|
|
1486
|
+
* CounterText component props
|
|
1487
|
+
*/
|
|
1488
|
+
export declare interface CounterTextProps extends Omit<BaseTextProps, 'text'> {
|
|
1489
|
+
/** Starting number */
|
|
1490
|
+
from: number;
|
|
1491
|
+
/** Ending number */
|
|
1492
|
+
to: number;
|
|
1493
|
+
/** Animation duration in seconds */
|
|
1494
|
+
duration?: number;
|
|
1495
|
+
/** Number of decimal places */
|
|
1496
|
+
decimals?: number;
|
|
1497
|
+
/** Number format (e.g., currency, percentage) */
|
|
1498
|
+
format?: 'number' | 'currency' | 'percentage';
|
|
1499
|
+
/** Currency symbol for currency format */
|
|
1500
|
+
currency?: string;
|
|
1501
|
+
/** Locale for number formatting */
|
|
1502
|
+
locale?: string;
|
|
1503
|
+
/** Custom formatter function */
|
|
1504
|
+
formatter?: (value: number) => string;
|
|
1505
|
+
/** Animation easing */
|
|
1506
|
+
easing?: TextEasing;
|
|
1507
|
+
/** Prefix text */
|
|
1508
|
+
prefix?: string;
|
|
1509
|
+
/** Suffix text */
|
|
1510
|
+
suffix?: string;
|
|
1511
|
+
}
|
|
1512
|
+
|
|
1513
|
+
/**
|
|
1514
|
+
* Typewriter cursor styles
|
|
1515
|
+
*/
|
|
1516
|
+
export declare type CursorStyle = 'block' | 'line' | 'underscore' | 'none';
|
|
1517
|
+
|
|
1518
|
+
/**
|
|
1519
|
+
* Disabled behavior types
|
|
1520
|
+
*/
|
|
1521
|
+
declare type DisabledBehavior = "selection" | "all";
|
|
1522
|
+
|
|
1523
|
+
declare type EasingType = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'backIn' | 'backOut' | 'backInOut' | 'bounceIn' | 'bounceOut' | 'bounceInOut' | 'elasticIn' | 'elasticOut' | 'elasticInOut';
|
|
1524
|
+
|
|
1525
|
+
declare type EasingType_2 = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'circIn' | 'circOut' | 'circInOut' | 'backIn' | 'backOut' | 'backInOut' | 'anticipate';
|
|
1526
|
+
|
|
1527
|
+
export declare interface EffectConfig {
|
|
1528
|
+
shadow?: boolean;
|
|
1529
|
+
shadowColor?: string;
|
|
1530
|
+
shadowBlur?: number;
|
|
1531
|
+
glow?: boolean;
|
|
1532
|
+
glowColor?: string;
|
|
1533
|
+
glowIntensity?: number;
|
|
1534
|
+
}
|
|
1535
|
+
|
|
1536
|
+
export declare const FadeContainer: default_2.FC<FadeContainerProps>;
|
|
1537
|
+
|
|
1538
|
+
export declare interface FadeContainerProps extends BaseAnimatedContainerProps {
|
|
1539
|
+
startOpacity?: number;
|
|
1540
|
+
endOpacity?: number;
|
|
1541
|
+
blur?: boolean;
|
|
1542
|
+
blurAmount?: number;
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
/**
|
|
1546
|
+
* FadeIn Animation Component
|
|
1547
|
+
*
|
|
1548
|
+
* Animates opacity from transparent to opaque with customizable timing and triggers
|
|
1549
|
+
*/
|
|
1550
|
+
export declare const FadeIn: React.FC<FadeInProps>;
|
|
1551
|
+
|
|
1552
|
+
export declare interface FadeInProps extends BaseAnimationProps {
|
|
1553
|
+
from?: number;
|
|
1554
|
+
to?: number;
|
|
1555
|
+
}
|
|
1556
|
+
|
|
1557
|
+
/**
|
|
1558
|
+
* Filter function type
|
|
1559
|
+
*/
|
|
1560
|
+
declare type FilterFunction = (textValue: string, inputValue: string) => boolean;
|
|
1561
|
+
|
|
1562
|
+
export declare const FlipContainer: default_2.FC<FlipContainerProps>;
|
|
1563
|
+
|
|
1564
|
+
export declare interface FlipContainerProps extends BaseAnimatedContainerProps {
|
|
1565
|
+
direction?: FlipDirection;
|
|
1566
|
+
perspective?: number;
|
|
1567
|
+
backfaceVisible?: boolean;
|
|
1568
|
+
}
|
|
1569
|
+
|
|
1570
|
+
declare type FlipDirection = 'horizontal' | 'vertical' | 'both';
|
|
1571
|
+
|
|
1572
|
+
/**
|
|
1573
|
+
* Function to generate custom initials from name
|
|
1574
|
+
*/
|
|
1575
|
+
declare type GetInitialsFunction = (name: string) => string;
|
|
1576
|
+
|
|
1577
|
+
/**
|
|
1578
|
+
* Glitch intensity levels
|
|
1579
|
+
*/
|
|
1580
|
+
export declare type GlitchIntensity = 'low' | 'medium' | 'high' | 'extreme';
|
|
1581
|
+
|
|
1582
|
+
/**
|
|
1583
|
+
* GlitchText Component
|
|
1584
|
+
*
|
|
1585
|
+
* Creates a glitch effect on text with customizable intensity levels,
|
|
1586
|
+
* colors, and corruption effects. Supports continuous animation and
|
|
1587
|
+
* various trigger modes.
|
|
1588
|
+
*
|
|
1589
|
+
* @example
|
|
1590
|
+
* <GlitchText
|
|
1591
|
+
* text="GLITCH EFFECT"
|
|
1592
|
+
* intensity="high"
|
|
1593
|
+
* continuous={true}
|
|
1594
|
+
* colors={['#ff0000', '#00ff00', '#0000ff']}
|
|
1595
|
+
* corruptData={true}
|
|
1596
|
+
* />
|
|
1597
|
+
*/
|
|
1598
|
+
export declare const GlitchText: React_2.FC<GlitchTextProps>;
|
|
1599
|
+
|
|
1600
|
+
/**
|
|
1601
|
+
* GlitchText component props
|
|
1602
|
+
*/
|
|
1603
|
+
export declare interface GlitchTextProps extends BaseTextProps {
|
|
1604
|
+
/** Glitch effect intensity */
|
|
1605
|
+
intensity?: GlitchIntensity;
|
|
1606
|
+
/** Animation duration in seconds */
|
|
1607
|
+
duration?: number;
|
|
1608
|
+
/** Whether to animate continuously */
|
|
1609
|
+
continuous?: boolean;
|
|
1610
|
+
/** Glitch colors array */
|
|
1611
|
+
colors?: string[];
|
|
1612
|
+
/** Whether to include data corruption effect */
|
|
1613
|
+
corruptData?: boolean;
|
|
1614
|
+
/** Custom glitch characters */
|
|
1615
|
+
glitchChars?: string;
|
|
1616
|
+
/** Number of glitch layers */
|
|
1617
|
+
layers?: number;
|
|
1618
|
+
}
|
|
1619
|
+
|
|
1620
|
+
/**
|
|
1621
|
+
* Gradient animation directions
|
|
1622
|
+
*/
|
|
1623
|
+
export declare type GradientDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
|
|
1624
|
+
|
|
1625
|
+
/**
|
|
1626
|
+
* GradientText Component
|
|
1627
|
+
*
|
|
1628
|
+
* Displays text with animated color gradients that can move in different directions.
|
|
1629
|
+
* Supports continuous animation and various gradient styles.
|
|
1630
|
+
*
|
|
1631
|
+
* @example
|
|
1632
|
+
* <GradientText
|
|
1633
|
+
* text="Texto con gradiente animado"
|
|
1634
|
+
* colors={['#ff0000', '#00ff00', '#0000ff']}
|
|
1635
|
+
* direction="horizontal"
|
|
1636
|
+
* animate={true}
|
|
1637
|
+
* duration={3}
|
|
1638
|
+
* />
|
|
1639
|
+
*/
|
|
1640
|
+
export declare const GradientText: React_2.FC<GradientTextProps>;
|
|
1641
|
+
|
|
1642
|
+
/**
|
|
1643
|
+
* GradientText component props
|
|
1644
|
+
*/
|
|
1645
|
+
export declare interface GradientTextProps extends BaseTextProps {
|
|
1646
|
+
/** Gradient colors array */
|
|
1647
|
+
colors: string[];
|
|
1648
|
+
/** Gradient animation direction */
|
|
1649
|
+
direction?: GradientDirection;
|
|
1650
|
+
/** Animation duration in seconds */
|
|
1651
|
+
duration?: number;
|
|
1652
|
+
/** Animation speed multiplier */
|
|
1653
|
+
speed?: number;
|
|
1654
|
+
/** Whether to animate continuously */
|
|
1655
|
+
animate?: boolean;
|
|
1656
|
+
/** Background size for gradient animation */
|
|
1657
|
+
backgroundSize?: string;
|
|
1658
|
+
/** Custom gradient stops */
|
|
1659
|
+
stops?: number[];
|
|
1660
|
+
}
|
|
1661
|
+
|
|
1662
|
+
/**
|
|
1663
|
+
* Enhanced Image component with comprehensive features
|
|
1664
|
+
* Supports lazy loading, fallback images, zoom effects, and blur effects
|
|
1665
|
+
* @param props - Image component properties
|
|
1666
|
+
* @returns JSX element representing a styled image
|
|
1667
|
+
*/
|
|
1668
|
+
declare const Image_2: ({ src, srcSet, sizes, alt, width, height, radius, shadow, loading, fallbackSrc, isBlurred, isZoomed, removeWrapper, disableSkeleton, className, classNames, onLoad, onError, "data-testid": dataTestId, }: ImageProps) => JSX.Element;
|
|
1669
|
+
export { Image_2 as Image }
|
|
1670
|
+
|
|
1671
|
+
/**
|
|
1672
|
+
* Loading behavior for Image component
|
|
1673
|
+
*/
|
|
1674
|
+
export declare type ImageLoading = "eager" | "lazy";
|
|
1675
|
+
|
|
1676
|
+
/**
|
|
1677
|
+
* Props interface for the main Image component
|
|
1678
|
+
*/
|
|
1679
|
+
export declare interface ImageProps {
|
|
1680
|
+
/** Image source URL */
|
|
1681
|
+
src: string;
|
|
1682
|
+
/** Image source set for responsive images */
|
|
1683
|
+
srcSet?: string;
|
|
1684
|
+
/** Image sizes attribute for responsive images */
|
|
1685
|
+
sizes?: string;
|
|
1686
|
+
/** Alternative text for the image */
|
|
1687
|
+
alt: string;
|
|
1688
|
+
/** Image width */
|
|
1689
|
+
width?: number;
|
|
1690
|
+
/** Image height */
|
|
1691
|
+
height?: number;
|
|
1692
|
+
/** Border radius variant */
|
|
1693
|
+
radius?: ImageRadius;
|
|
1694
|
+
/** Shadow variant */
|
|
1695
|
+
shadow?: ImageShadow;
|
|
1696
|
+
/** Loading behavior */
|
|
1697
|
+
loading?: ImageLoading;
|
|
1698
|
+
/** Fallback image source URL when main image fails to load */
|
|
1699
|
+
fallbackSrc?: string;
|
|
1700
|
+
/** Whether to apply blur effect */
|
|
1701
|
+
isBlurred?: boolean;
|
|
1702
|
+
/** Whether to enable zoom on hover */
|
|
1703
|
+
isZoomed?: boolean;
|
|
1704
|
+
/** Whether to remove the wrapper div */
|
|
1705
|
+
removeWrapper?: boolean;
|
|
1706
|
+
/** Whether to disable skeleton loading animation */
|
|
1707
|
+
disableSkeleton?: boolean;
|
|
1708
|
+
/** Additional CSS classes to apply */
|
|
1709
|
+
className?: string;
|
|
1710
|
+
/** Custom class names for different slots */
|
|
1711
|
+
classNames?: Partial<Record<"img" | "wrapper" | "zoomedWrapper" | "blurredImg", string>>;
|
|
1712
|
+
/** Image load event handler */
|
|
1713
|
+
onLoad?: ReactEventHandler<HTMLImageElement>;
|
|
1714
|
+
/** Image error event handler */
|
|
1715
|
+
onError?: () => void;
|
|
1716
|
+
/** Test ID for testing frameworks */
|
|
1717
|
+
"data-testid"?: string;
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
/**
|
|
1721
|
+
* Radius variants for Image component
|
|
1722
|
+
*/
|
|
1723
|
+
export declare type ImageRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
1724
|
+
|
|
1725
|
+
/**
|
|
1726
|
+
* Shadow variants for Image component
|
|
1727
|
+
*/
|
|
1728
|
+
export declare type ImageShadow = "none" | "sm" | "md" | "lg";
|
|
1729
|
+
|
|
1730
|
+
/**
|
|
1731
|
+
* Input Component
|
|
1732
|
+
*
|
|
1733
|
+
* A comprehensive input component based on HeroUI design system.
|
|
1734
|
+
* Supports multiple variants, sizes, colors, validation, and advanced features.
|
|
1735
|
+
*
|
|
1736
|
+
* Features:
|
|
1737
|
+
* - Multiple variants (flat, bordered, faded, underlined)
|
|
1738
|
+
* - Color themes and sizes
|
|
1739
|
+
* - Label positioning (inside, outside, outside-left)
|
|
1740
|
+
* - Validation with error messages
|
|
1741
|
+
* - Clear button functionality
|
|
1742
|
+
* - Start and end content slots
|
|
1743
|
+
* - Password visibility toggle
|
|
1744
|
+
* - Full accessibility support
|
|
1745
|
+
*
|
|
1746
|
+
* @param props - Input component props
|
|
1747
|
+
* @returns JSX element representing the input
|
|
1748
|
+
*/
|
|
1749
|
+
export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
|
|
1750
|
+
|
|
1751
|
+
/**
|
|
1752
|
+
* Input class names for different slots
|
|
1753
|
+
*/
|
|
1754
|
+
declare interface InputClassNames {
|
|
1755
|
+
/** Base wrapper element */
|
|
1756
|
+
base?: string;
|
|
1757
|
+
/** Label element */
|
|
1758
|
+
label?: string;
|
|
1759
|
+
/** Main wrapper for outside label placements */
|
|
1760
|
+
mainWrapper?: string;
|
|
1761
|
+
/** Input wrapper element */
|
|
1762
|
+
inputWrapper?: string;
|
|
1763
|
+
/** Inner wrapper for input and content */
|
|
1764
|
+
innerWrapper?: string;
|
|
1765
|
+
/** Input element itself */
|
|
1766
|
+
input?: string;
|
|
1767
|
+
/** Clear button element */
|
|
1768
|
+
clearButton?: string;
|
|
1769
|
+
/** Helper wrapper for description and error */
|
|
1770
|
+
helperWrapper?: string;
|
|
1771
|
+
/** Description text element */
|
|
1772
|
+
description?: string;
|
|
1773
|
+
/** Error message element */
|
|
1774
|
+
errorMessage?: string;
|
|
1775
|
+
}
|
|
1776
|
+
|
|
1777
|
+
/**
|
|
1778
|
+
* Input color variants
|
|
1779
|
+
*/
|
|
1780
|
+
declare type InputColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
1781
|
+
|
|
1782
|
+
/**
|
|
1783
|
+
* Label placement options
|
|
1784
|
+
*/
|
|
1785
|
+
declare type InputLabelPlacement = "inside" | "outside" | "outside-left";
|
|
1786
|
+
|
|
1787
|
+
/**
|
|
1788
|
+
* Main Input component props interface
|
|
1789
|
+
* Based on HeroUI Input component API
|
|
1790
|
+
*/
|
|
1791
|
+
export declare interface InputProps {
|
|
1792
|
+
/** Input label */
|
|
1793
|
+
label?: ReactNode;
|
|
1794
|
+
/** Input placeholder text */
|
|
1795
|
+
placeholder?: string;
|
|
1796
|
+
/** Input description text */
|
|
1797
|
+
description?: ReactNode;
|
|
1798
|
+
/** Error message - can be static or function */
|
|
1799
|
+
errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);
|
|
1800
|
+
/** Content to display at the start of the input */
|
|
1801
|
+
startContent?: ReactNode;
|
|
1802
|
+
/** Content to display at the end of the input */
|
|
1803
|
+
endContent?: ReactNode;
|
|
1804
|
+
/** Controlled input value */
|
|
1805
|
+
value?: string;
|
|
1806
|
+
/** Default value for uncontrolled input */
|
|
1807
|
+
defaultValue?: string;
|
|
1808
|
+
/** Visual variant of the input */
|
|
1809
|
+
variant?: InputVariant;
|
|
1810
|
+
/** Color theme */
|
|
1811
|
+
color?: InputColor;
|
|
1812
|
+
/** Size variant */
|
|
1813
|
+
size?: InputSize;
|
|
1814
|
+
/** Border radius */
|
|
1815
|
+
radius?: InputRadius;
|
|
1816
|
+
/** Label placement */
|
|
1817
|
+
labelPlacement?: InputLabelPlacement;
|
|
1818
|
+
/** Whether input takes full width */
|
|
1819
|
+
fullWidth?: boolean;
|
|
1820
|
+
/** Input type */
|
|
1821
|
+
type?: InputType;
|
|
1822
|
+
/** Minimum length validation */
|
|
1823
|
+
minLength?: number;
|
|
1824
|
+
/** Maximum length validation */
|
|
1825
|
+
maxLength?: number;
|
|
1826
|
+
/** Pattern for validation */
|
|
1827
|
+
pattern?: string;
|
|
1828
|
+
/** Whether the input is required */
|
|
1829
|
+
isRequired?: boolean;
|
|
1830
|
+
/** Whether the input is disabled */
|
|
1831
|
+
isDisabled?: boolean;
|
|
1832
|
+
/** Whether the input is read-only */
|
|
1833
|
+
isReadOnly?: boolean;
|
|
1834
|
+
/** Whether the input has validation errors */
|
|
1835
|
+
isInvalid?: boolean;
|
|
1836
|
+
/** Whether to show clear button */
|
|
1837
|
+
isClearable?: boolean;
|
|
1838
|
+
/** Whether to disable animations */
|
|
1839
|
+
disableAnimation?: boolean;
|
|
1840
|
+
/** Custom class names for different parts */
|
|
1841
|
+
classNames?: Partial<InputClassNames>;
|
|
1842
|
+
/** Additional CSS class */
|
|
1843
|
+
className?: string;
|
|
1844
|
+
/** Custom validation function */
|
|
1845
|
+
validate?: (value: string) => ValidationError | true | null | undefined;
|
|
1846
|
+
/** Validation behavior mode */
|
|
1847
|
+
validationBehavior?: ValidationBehavior;
|
|
1848
|
+
/** Ref to the base wrapper element */
|
|
1849
|
+
baseRef?: RefObject<HTMLDivElement>;
|
|
1850
|
+
/** Native change event handler */
|
|
1851
|
+
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
1852
|
+
/** Value change handler (HeroUI style) */
|
|
1853
|
+
onValueChange?: (value: string) => void;
|
|
1854
|
+
/** Clear button click handler */
|
|
1855
|
+
onClear?: () => void;
|
|
1856
|
+
/** Focus event handler */
|
|
1857
|
+
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
1858
|
+
/** Blur event handler */
|
|
1859
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
1860
|
+
/** Key down event handler */
|
|
1861
|
+
onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
1862
|
+
/** Key up event handler */
|
|
1863
|
+
onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
1864
|
+
/** Test ID for automated testing */
|
|
1865
|
+
"data-testid"?: string;
|
|
1866
|
+
/** ARIA label */
|
|
1867
|
+
"aria-label"?: string;
|
|
1868
|
+
/** ARIA labelledby */
|
|
1869
|
+
"aria-labelledby"?: string;
|
|
1870
|
+
/** ARIA describedby */
|
|
1871
|
+
"aria-describedby"?: string;
|
|
1872
|
+
}
|
|
1873
|
+
|
|
1874
|
+
/**
|
|
1875
|
+
* Input radius variants
|
|
1876
|
+
*/
|
|
1877
|
+
declare type InputRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
1878
|
+
|
|
1879
|
+
/**
|
|
1880
|
+
* Input size variants
|
|
1881
|
+
*/
|
|
1882
|
+
declare type InputSize = "sm" | "md" | "lg";
|
|
1883
|
+
|
|
1884
|
+
/**
|
|
1885
|
+
* Input type variants
|
|
1886
|
+
*/
|
|
1887
|
+
declare type InputType = "text" | "email" | "url" | "password" | "tel" | "search" | "file" | "number";
|
|
1888
|
+
|
|
1889
|
+
/**
|
|
1890
|
+
* Input visual variants
|
|
1891
|
+
*/
|
|
1892
|
+
declare type InputVariant = "flat" | "bordered" | "faded" | "underlined";
|
|
1893
|
+
|
|
1894
|
+
/**
|
|
1895
|
+
* Menu trigger behavior
|
|
1896
|
+
*/
|
|
1897
|
+
declare type MenuTriggerAction = 'focus' | 'input' | 'manual';
|
|
1898
|
+
|
|
1899
|
+
export declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>;
|
|
1900
|
+
|
|
1901
|
+
declare type ModalBackdrop = 'transparent' | 'opaque' | 'blur';
|
|
1902
|
+
|
|
1903
|
+
declare type ModalPlacement = 'auto' | 'top' | 'top-center' | 'center' | 'bottom' | 'bottom-center';
|
|
1904
|
+
|
|
1905
|
+
export declare interface ModalProps {
|
|
1906
|
+
children?: ReactNode;
|
|
1907
|
+
size?: ModalSize;
|
|
1908
|
+
radius?: ModalRadius;
|
|
1909
|
+
shadow?: ModalShadow;
|
|
1910
|
+
backdrop?: ModalBackdrop;
|
|
1911
|
+
scrollBehavior?: ModalScrollBehavior;
|
|
1912
|
+
placement?: ModalPlacement;
|
|
1913
|
+
isOpen?: boolean;
|
|
1914
|
+
defaultOpen?: boolean;
|
|
1915
|
+
isDismissable?: boolean;
|
|
1916
|
+
isKeyboardDismissDisabled?: boolean;
|
|
1917
|
+
shouldBlockScroll?: boolean;
|
|
1918
|
+
hideCloseButton?: boolean;
|
|
1919
|
+
closeButton?: ReactNode;
|
|
1920
|
+
motionProps?: MotionProps;
|
|
1921
|
+
portalContainer?: HTMLElement;
|
|
1922
|
+
disableAnimation?: boolean;
|
|
1923
|
+
classNames?: Partial<ModalSlots>;
|
|
1924
|
+
className?: string;
|
|
1925
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
1926
|
+
onClose?: () => void;
|
|
1927
|
+
isDraggable?: boolean;
|
|
1928
|
+
allowOverflow?: boolean;
|
|
1929
|
+
}
|
|
1930
|
+
|
|
1931
|
+
declare type ModalRadius = 'none' | 'sm' | 'md' | 'lg';
|
|
1932
|
+
|
|
1933
|
+
declare type ModalScrollBehavior = 'normal' | 'inside' | 'outside';
|
|
1934
|
+
|
|
1935
|
+
declare type ModalShadow = 'none' | 'sm' | 'md' | 'lg';
|
|
1936
|
+
|
|
1937
|
+
declare type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full';
|
|
1938
|
+
|
|
1939
|
+
declare interface ModalSlots {
|
|
1940
|
+
wrapper?: string;
|
|
1941
|
+
base?: string;
|
|
1942
|
+
backdrop?: string;
|
|
1943
|
+
header?: string;
|
|
1944
|
+
body?: string;
|
|
1945
|
+
footer?: string;
|
|
1946
|
+
closeButton?: string;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
export declare const MorphingContainer: default_2.FC<MorphingContainerProps>;
|
|
1950
|
+
|
|
1951
|
+
export declare interface MorphingContainerProps extends BaseAnimatedContainerProps {
|
|
1952
|
+
morphStates?: Array<{
|
|
1953
|
+
width?: string | number;
|
|
1954
|
+
height?: string | number;
|
|
1955
|
+
borderRadius?: string | number;
|
|
1956
|
+
backgroundColor?: string;
|
|
1957
|
+
transform?: string;
|
|
1958
|
+
}>;
|
|
1959
|
+
morphInterval?: number;
|
|
1960
|
+
autoMorph?: boolean;
|
|
1961
|
+
}
|
|
1962
|
+
|
|
1963
|
+
/**
|
|
1964
|
+
* MorphingText Component
|
|
1965
|
+
*
|
|
1966
|
+
* Animates between different texts with morphing transitions.
|
|
1967
|
+
* Supports multiple morph styles including fade, slide, and scramble effects.
|
|
1968
|
+
*
|
|
1969
|
+
* @example
|
|
1970
|
+
* <MorphingText
|
|
1971
|
+
* texts={['Hola', 'Mundo', 'Texto']}
|
|
1972
|
+
* displayDuration={2000}
|
|
1973
|
+
* morphDuration={800}
|
|
1974
|
+
* morphStyle="scramble"
|
|
1975
|
+
* loop={true}
|
|
1976
|
+
* />
|
|
1977
|
+
*/
|
|
1978
|
+
export declare const MorphingText: React_2.FC<MorphingTextProps>;
|
|
1979
|
+
|
|
1980
|
+
/**
|
|
1981
|
+
* MorphingText component props
|
|
1982
|
+
*/
|
|
1983
|
+
export declare interface MorphingTextProps extends Omit<BaseTextProps, 'text'> {
|
|
1984
|
+
/** Array of texts to morph between */
|
|
1985
|
+
texts: string[];
|
|
1986
|
+
/** Duration to show each text */
|
|
1987
|
+
displayDuration?: number;
|
|
1988
|
+
/** Morphing animation duration */
|
|
1989
|
+
morphDuration?: number;
|
|
1990
|
+
/** Whether to loop through texts */
|
|
1991
|
+
loop?: boolean;
|
|
1992
|
+
/** Morphing animation easing */
|
|
1993
|
+
easing?: TextEasing;
|
|
1994
|
+
/** Character morphing style */
|
|
1995
|
+
morphStyle?: 'fade' | 'slide' | 'scramble';
|
|
1996
|
+
}
|
|
1997
|
+
|
|
1998
|
+
export declare const Navbar: ForwardRefExoticComponent<NavbarProps & RefAttributes<HTMLElement>>;
|
|
1999
|
+
|
|
2000
|
+
declare type NavbarMaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
2001
|
+
|
|
2002
|
+
declare type NavbarPosition = 'static' | 'sticky';
|
|
2003
|
+
|
|
2004
|
+
export declare interface NavbarProps {
|
|
2005
|
+
children?: ReactNode;
|
|
2006
|
+
height?: string | number;
|
|
2007
|
+
position?: NavbarPosition;
|
|
2008
|
+
maxWidth?: NavbarMaxWidth;
|
|
2009
|
+
parentRef?: React.RefObject<HTMLElement>;
|
|
2010
|
+
isBordered?: boolean;
|
|
2011
|
+
isBlurred?: boolean;
|
|
2012
|
+
isMenuOpen?: boolean;
|
|
2013
|
+
isMenuDefaultOpen?: boolean;
|
|
2014
|
+
shouldHideOnScroll?: boolean;
|
|
2015
|
+
disableScrollHandler?: boolean;
|
|
2016
|
+
disableAnimation?: boolean;
|
|
2017
|
+
classNames?: Partial<NavbarSlots>;
|
|
2018
|
+
className?: string;
|
|
2019
|
+
onMenuOpenChange?: (isOpen: boolean) => void;
|
|
2020
|
+
onScrollPositionChange?: (position: number) => void;
|
|
2021
|
+
}
|
|
2022
|
+
|
|
2023
|
+
declare interface NavbarSlots {
|
|
2024
|
+
base?: string;
|
|
2025
|
+
wrapper?: string;
|
|
2026
|
+
brand?: string;
|
|
2027
|
+
content?: string;
|
|
2028
|
+
item?: string;
|
|
2029
|
+
toggle?: string;
|
|
2030
|
+
toggleIcon?: string;
|
|
2031
|
+
menu?: string;
|
|
2032
|
+
menuItem?: string;
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
/**
|
|
2036
|
+
* Main Pagination component that provides pagination functionality
|
|
2037
|
+
*/
|
|
2038
|
+
export declare const Pagination: default_2.FC<PaginationProps>;
|
|
2039
|
+
|
|
2040
|
+
/**
|
|
2041
|
+
* Color variants for Pagination component
|
|
2042
|
+
*/
|
|
2043
|
+
declare type PaginationColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
2044
|
+
|
|
2045
|
+
/**
|
|
2046
|
+
* Pagination context value
|
|
2047
|
+
*/
|
|
2048
|
+
declare interface PaginationContextValue {
|
|
2049
|
+
/** Current page */
|
|
2050
|
+
activePage: number;
|
|
2051
|
+
/** Total pages */
|
|
2052
|
+
totalPages: number;
|
|
2053
|
+
/** Set page function */
|
|
2054
|
+
setPage: (page: number) => void;
|
|
2055
|
+
/** Size variant */
|
|
2056
|
+
size: PaginationSize;
|
|
2057
|
+
/** Color variant */
|
|
2058
|
+
color: PaginationColor;
|
|
2059
|
+
/** Visual variant */
|
|
2060
|
+
variant: PaginationVariant;
|
|
2061
|
+
/** Border radius */
|
|
2062
|
+
radius: PaginationRadius;
|
|
2063
|
+
/** Whether disabled */
|
|
2064
|
+
isDisabled: boolean;
|
|
2065
|
+
/** Whether animations are disabled */
|
|
2066
|
+
disableAnimation: boolean;
|
|
2067
|
+
/** Controls configuration */
|
|
2068
|
+
controls: Required<PaginationControlsConfig>;
|
|
2069
|
+
/** Display configuration */
|
|
2070
|
+
display: Required<PaginationDisplayConfig>;
|
|
2071
|
+
}
|
|
2072
|
+
|
|
2073
|
+
/**
|
|
2074
|
+
* Configuration for pagination controls
|
|
2075
|
+
*/
|
|
2076
|
+
declare interface PaginationControlsConfig {
|
|
2077
|
+
/** Show previous/next buttons */
|
|
2078
|
+
showControls?: boolean;
|
|
2079
|
+
/** Show first/last page buttons */
|
|
2080
|
+
showFirstLast?: boolean;
|
|
2081
|
+
/** Placement of control buttons */
|
|
2082
|
+
placement?: PaginationControlsPlacement;
|
|
2083
|
+
/** Custom labels for controls */
|
|
2084
|
+
labels?: {
|
|
2085
|
+
prev?: string | ReactNode;
|
|
2086
|
+
next?: string | ReactNode;
|
|
2087
|
+
first?: string | ReactNode;
|
|
2088
|
+
last?: string | ReactNode;
|
|
2089
|
+
};
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
/**
|
|
2093
|
+
* Placement options for pagination controls
|
|
2094
|
+
*/
|
|
2095
|
+
declare type PaginationControlsPlacement = "start" | "end" | "both";
|
|
2096
|
+
|
|
2097
|
+
/**
|
|
2098
|
+
* Props for pagination cursor (prev/next buttons)
|
|
2099
|
+
*/
|
|
2100
|
+
declare interface PaginationCursorProps {
|
|
2101
|
+
/** Direction of the cursor */
|
|
2102
|
+
direction: "prev" | "next";
|
|
2103
|
+
/** Whether the cursor is disabled */
|
|
2104
|
+
isDisabled?: boolean;
|
|
2105
|
+
/** Click handler */
|
|
2106
|
+
onClick?: () => void;
|
|
2107
|
+
/** Custom content to render */
|
|
2108
|
+
children?: ReactNode;
|
|
2109
|
+
/** Additional CSS classes */
|
|
2110
|
+
className?: string;
|
|
2111
|
+
/** Size variant */
|
|
2112
|
+
size?: PaginationSize;
|
|
2113
|
+
/** Color variant */
|
|
2114
|
+
color?: PaginationColor;
|
|
2115
|
+
/** Visual variant */
|
|
2116
|
+
variant?: PaginationVariant;
|
|
2117
|
+
/** Border radius */
|
|
2118
|
+
radius?: PaginationRadius;
|
|
2119
|
+
/** ARIA label for accessibility */
|
|
2120
|
+
"aria-label"?: string;
|
|
2121
|
+
/** Test ID for testing */
|
|
2122
|
+
"data-testid"?: string;
|
|
2123
|
+
}
|
|
2124
|
+
|
|
2125
|
+
/**
|
|
2126
|
+
* Configuration for pagination display
|
|
2127
|
+
*/
|
|
2128
|
+
declare interface PaginationDisplayConfig {
|
|
2129
|
+
/** Whether to show page numbers */
|
|
2130
|
+
showPages?: boolean;
|
|
2131
|
+
/** Maximum number of page buttons to show */
|
|
2132
|
+
siblings?: number;
|
|
2133
|
+
/** Show dots when pages are collapsed */
|
|
2134
|
+
showDots?: boolean;
|
|
2135
|
+
/** Whether to loop from last to first page */
|
|
2136
|
+
loop?: boolean;
|
|
2137
|
+
/** Compact mode with minimal spacing */
|
|
2138
|
+
compact?: boolean;
|
|
2139
|
+
/** Show shadow effect */
|
|
2140
|
+
showShadow?: boolean;
|
|
2141
|
+
}
|
|
2142
|
+
|
|
2143
|
+
/**
|
|
2144
|
+
* Props for dots separator component
|
|
2145
|
+
*/
|
|
2146
|
+
declare interface PaginationDotsProps {
|
|
2147
|
+
/** Additional CSS classes */
|
|
2148
|
+
className?: string;
|
|
2149
|
+
/** Size variant */
|
|
2150
|
+
size?: PaginationSize;
|
|
2151
|
+
/** Custom content */
|
|
2152
|
+
children?: ReactNode;
|
|
2153
|
+
/** Test ID for testing */
|
|
2154
|
+
"data-testid"?: string;
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
/**
|
|
2158
|
+
* Pagination ellipsis/dots component for collapsed pages
|
|
2159
|
+
*/
|
|
2160
|
+
export declare const PaginationEllipsis: ForwardRefExoticComponent<PaginationDotsProps & RefAttributes<HTMLSpanElement>>;
|
|
2161
|
+
|
|
2162
|
+
/**
|
|
2163
|
+
* First page button component
|
|
2164
|
+
*/
|
|
2165
|
+
export declare const PaginationFirst: ForwardRefExoticComponent<Omit<PaginationCursorProps, "direction"> & RefAttributes<HTMLButtonElement>>;
|
|
2166
|
+
|
|
2167
|
+
/**
|
|
2168
|
+
* Individual pagination item component
|
|
2169
|
+
*/
|
|
2170
|
+
export declare const PaginationItem: ForwardRefExoticComponent<PaginationItemProps & RefAttributes<HTMLButtonElement>>;
|
|
2171
|
+
|
|
2172
|
+
/**
|
|
2173
|
+
* Pagination item data structure
|
|
2174
|
+
*/
|
|
2175
|
+
declare interface PaginationItemData {
|
|
2176
|
+
/** Type of the item */
|
|
2177
|
+
type: PaginationItemType;
|
|
2178
|
+
/** Value (page number for pages) */
|
|
2179
|
+
value: number | string;
|
|
2180
|
+
/** Whether the item is active */
|
|
2181
|
+
isActive: boolean;
|
|
2182
|
+
/** Whether the item is disabled */
|
|
2183
|
+
isDisabled: boolean;
|
|
2184
|
+
/** Key for React rendering */
|
|
2185
|
+
key: string;
|
|
2186
|
+
}
|
|
2187
|
+
|
|
2188
|
+
/**
|
|
2189
|
+
* Props for individual pagination item
|
|
2190
|
+
*/
|
|
2191
|
+
export declare interface PaginationItemProps {
|
|
2192
|
+
/** Page number or item identifier */
|
|
2193
|
+
value: number | string;
|
|
2194
|
+
/** Type of pagination item */
|
|
2195
|
+
type: PaginationItemType;
|
|
2196
|
+
/** Whether the item is currently active */
|
|
2197
|
+
isActive?: boolean;
|
|
2198
|
+
/** Whether the item is disabled */
|
|
2199
|
+
isDisabled?: boolean;
|
|
2200
|
+
/** Click handler for the item */
|
|
2201
|
+
onClick?: (value: number | string) => void;
|
|
2202
|
+
/** Custom content to render */
|
|
2203
|
+
children?: ReactNode;
|
|
2204
|
+
/** Additional CSS classes */
|
|
2205
|
+
className?: string;
|
|
2206
|
+
/** Size variant */
|
|
2207
|
+
size?: PaginationSize;
|
|
2208
|
+
/** Color variant */
|
|
2209
|
+
color?: PaginationColor;
|
|
2210
|
+
/** Visual variant */
|
|
2211
|
+
variant?: PaginationVariant;
|
|
2212
|
+
/** Border radius */
|
|
2213
|
+
radius?: PaginationRadius;
|
|
2214
|
+
/** ARIA label for accessibility */
|
|
2215
|
+
"aria-label"?: string;
|
|
2216
|
+
/** Test ID for testing */
|
|
2217
|
+
"data-testid"?: string;
|
|
2218
|
+
}
|
|
2219
|
+
|
|
2220
|
+
/**
|
|
2221
|
+
* Item type for pagination items
|
|
2222
|
+
*/
|
|
2223
|
+
declare type PaginationItemType = "page" | "prev" | "next" | "dots" | "first" | "last";
|
|
2224
|
+
|
|
2225
|
+
/**
|
|
2226
|
+
* Last page button component
|
|
2227
|
+
*/
|
|
2228
|
+
export declare const PaginationLast: ForwardRefExoticComponent<Omit<PaginationCursorProps, "direction"> & RefAttributes<HTMLButtonElement>>;
|
|
2229
|
+
|
|
2230
|
+
/**
|
|
2231
|
+
* Next page button component
|
|
2232
|
+
*/
|
|
2233
|
+
export declare const PaginationNext: ForwardRefExoticComponent<Omit<PaginationCursorProps, "direction"> & RefAttributes<HTMLButtonElement>>;
|
|
2234
|
+
|
|
2235
|
+
/**
|
|
2236
|
+
* Previous page button component
|
|
2237
|
+
*/
|
|
2238
|
+
export declare const PaginationPrevious: ForwardRefExoticComponent<Omit<PaginationCursorProps, "direction"> & RefAttributes<HTMLButtonElement>>;
|
|
2239
|
+
|
|
2240
|
+
/**
|
|
2241
|
+
* Main pagination component props
|
|
2242
|
+
*/
|
|
2243
|
+
export declare interface PaginationProps {
|
|
2244
|
+
/** Total number of pages */
|
|
2245
|
+
total: number;
|
|
2246
|
+
/** Current active page (1-based) */
|
|
2247
|
+
page?: number;
|
|
2248
|
+
/** Default page for uncontrolled component */
|
|
2249
|
+
defaultPage?: number;
|
|
2250
|
+
/** Initial page (alias for defaultPage) */
|
|
2251
|
+
initialPage?: number;
|
|
2252
|
+
/** Callback when page changes */
|
|
2253
|
+
onChange?: (page: number) => void;
|
|
2254
|
+
/** Callback when page is clicked */
|
|
2255
|
+
onPageChange?: (page: number) => void;
|
|
2256
|
+
/** Size variant */
|
|
2257
|
+
size?: PaginationSize;
|
|
2258
|
+
/** Color variant */
|
|
2259
|
+
color?: PaginationColor;
|
|
2260
|
+
/** Visual variant */
|
|
2261
|
+
variant?: PaginationVariant;
|
|
2262
|
+
/** Border radius */
|
|
2263
|
+
radius?: PaginationRadius;
|
|
2264
|
+
/** Whether the pagination is disabled */
|
|
2265
|
+
isDisabled?: boolean;
|
|
2266
|
+
/** Whether to disable animations */
|
|
2267
|
+
disableAnimation?: boolean;
|
|
2268
|
+
/** Controls configuration */
|
|
2269
|
+
controls?: PaginationControlsConfig;
|
|
2270
|
+
/** Display configuration */
|
|
2271
|
+
display?: PaginationDisplayConfig;
|
|
2272
|
+
/** Additional CSS classes */
|
|
2273
|
+
className?: string;
|
|
2274
|
+
/** Custom styles */
|
|
2275
|
+
style?: React.CSSProperties;
|
|
2276
|
+
/** ARIA label for the pagination */
|
|
2277
|
+
"aria-label"?: string;
|
|
2278
|
+
/** Test ID for testing */
|
|
2279
|
+
"data-testid"?: string;
|
|
2280
|
+
}
|
|
2281
|
+
|
|
2282
|
+
/**
|
|
2283
|
+
* Radius variants for Pagination component
|
|
2284
|
+
*/
|
|
2285
|
+
declare type PaginationRadius = "none" | "sm" | "md" | "lg" | "xl" | "full";
|
|
2286
|
+
|
|
2287
|
+
/**
|
|
2288
|
+
* Size variants for Pagination component
|
|
2289
|
+
*/
|
|
2290
|
+
declare type PaginationSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
2291
|
+
|
|
2292
|
+
/**
|
|
2293
|
+
* Visual variants for Pagination component
|
|
2294
|
+
*/
|
|
2295
|
+
declare type PaginationVariant = "flat" | "bordered" | "light" | "faded";
|
|
2296
|
+
|
|
2297
|
+
export declare const ParallaxContainer: default_2.FC<ParallaxContainerProps>;
|
|
2298
|
+
|
|
2299
|
+
export declare interface ParallaxContainerProps extends BaseAnimatedContainerProps {
|
|
2300
|
+
speed?: number;
|
|
2301
|
+
direction?: 'vertical' | 'horizontal' | 'both';
|
|
2302
|
+
offset?: number;
|
|
2303
|
+
enableOnMobile?: boolean;
|
|
2304
|
+
}
|
|
2305
|
+
|
|
2306
|
+
export declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
|
|
2307
|
+
|
|
2308
|
+
declare type ProgressColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
2309
|
+
|
|
2310
|
+
export declare interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
|
|
2311
|
+
/**
|
|
2312
|
+
* The current progress value (0-100)
|
|
2313
|
+
*/
|
|
2314
|
+
value?: number;
|
|
2315
|
+
/**
|
|
2316
|
+
* The maximum value for progress calculation
|
|
2317
|
+
* @default 100
|
|
2318
|
+
*/
|
|
2319
|
+
maxValue?: number;
|
|
2320
|
+
/**
|
|
2321
|
+
* The minimum value for progress calculation
|
|
2322
|
+
* @default 0
|
|
2323
|
+
*/
|
|
2324
|
+
minValue?: number;
|
|
2325
|
+
/**
|
|
2326
|
+
* The color theme of the progress bar
|
|
2327
|
+
* @default "primary"
|
|
2328
|
+
*/
|
|
2329
|
+
color?: ProgressColor;
|
|
2330
|
+
/**
|
|
2331
|
+
* The size of the progress bar
|
|
2332
|
+
* @default "md"
|
|
2333
|
+
*/
|
|
2334
|
+
size?: ProgressSize;
|
|
2335
|
+
/**
|
|
2336
|
+
* The radius of the progress bar
|
|
2337
|
+
* @default "full"
|
|
2338
|
+
*/
|
|
2339
|
+
radius?: ProgressRadius;
|
|
2340
|
+
/**
|
|
2341
|
+
* Whether to show the progress percentage as text
|
|
2342
|
+
* @default false
|
|
2343
|
+
*/
|
|
2344
|
+
showValueLabel?: boolean;
|
|
2345
|
+
/**
|
|
2346
|
+
* Custom label to display instead of percentage
|
|
2347
|
+
*/
|
|
2348
|
+
label?: string;
|
|
2349
|
+
/**
|
|
2350
|
+
* Whether to show a striped pattern
|
|
2351
|
+
* @default false
|
|
2352
|
+
*/
|
|
2353
|
+
isStriped?: boolean;
|
|
2354
|
+
/**
|
|
2355
|
+
* Whether the progress is in an indeterminate state
|
|
2356
|
+
* @default false
|
|
2357
|
+
*/
|
|
2358
|
+
isIndeterminate?: boolean;
|
|
2359
|
+
/**
|
|
2360
|
+
* Whether to disable the progress bar
|
|
2361
|
+
* @default false
|
|
2362
|
+
*/
|
|
2363
|
+
isDisabled?: boolean;
|
|
2364
|
+
/**
|
|
2365
|
+
* Custom class name for the progress bar
|
|
2366
|
+
*/
|
|
2367
|
+
className?: string;
|
|
2368
|
+
/**
|
|
2369
|
+
* Custom class name for the progress bar track
|
|
2370
|
+
*/
|
|
2371
|
+
classNames?: {
|
|
2372
|
+
base?: string;
|
|
2373
|
+
track?: string;
|
|
2374
|
+
indicator?: string;
|
|
2375
|
+
label?: string;
|
|
2376
|
+
value?: string;
|
|
2377
|
+
};
|
|
2378
|
+
}
|
|
2379
|
+
|
|
2380
|
+
declare type ProgressRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
2381
|
+
|
|
2382
|
+
declare type ProgressSize = "sm" | "md" | "lg";
|
|
2383
|
+
|
|
2384
|
+
/**
|
|
2385
|
+
* Text reveal modes
|
|
2386
|
+
*/
|
|
2387
|
+
export declare type RevealMode = 'letter' | 'word' | 'line';
|
|
2388
|
+
|
|
2389
|
+
/**
|
|
2390
|
+
* RevealText Component
|
|
2391
|
+
*
|
|
2392
|
+
* Reveals text character by character, word by word, or line by line
|
|
2393
|
+
* with customizable animation effects and directions.
|
|
2394
|
+
*
|
|
2395
|
+
* @example
|
|
2396
|
+
* <RevealText
|
|
2397
|
+
* text="Texto que se revela gradualmente"
|
|
2398
|
+
* mode="letter"
|
|
2399
|
+
* direction="up"
|
|
2400
|
+
* staggerDelay={0.05}
|
|
2401
|
+
* />
|
|
2402
|
+
*/
|
|
2403
|
+
export declare const RevealText: React_2.FC<RevealTextProps>;
|
|
2404
|
+
|
|
2405
|
+
/**
|
|
2406
|
+
* RevealText component props
|
|
2407
|
+
*/
|
|
2408
|
+
export declare interface RevealTextProps extends BaseTextProps {
|
|
2409
|
+
/** How to reveal the text */
|
|
2410
|
+
mode?: RevealMode;
|
|
2411
|
+
/** Animation duration per unit (letter/word) */
|
|
2412
|
+
duration?: number;
|
|
2413
|
+
/** Stagger delay between units */
|
|
2414
|
+
staggerDelay?: number;
|
|
2415
|
+
/** Direction of reveal animation */
|
|
2416
|
+
direction?: TextDirection;
|
|
2417
|
+
/** Initial opacity of hidden text */
|
|
2418
|
+
initialOpacity?: number;
|
|
2419
|
+
/** Animation easing */
|
|
2420
|
+
easing?: TextEasing;
|
|
2421
|
+
/** Reveal with blur effect */
|
|
2422
|
+
withBlur?: boolean;
|
|
2423
|
+
/** Reveal with scale effect */
|
|
2424
|
+
withScale?: boolean;
|
|
2425
|
+
/** Reveal with rotation effect */
|
|
2426
|
+
withRotation?: boolean;
|
|
2427
|
+
}
|
|
2428
|
+
|
|
2429
|
+
declare type RotateDirection = 'clockwise' | 'counterclockwise';
|
|
2430
|
+
|
|
2431
|
+
/**
|
|
2432
|
+
* RotateIn Animation Component
|
|
2433
|
+
*
|
|
2434
|
+
* Animates elements rotating into view with customizable direction and rotation degrees
|
|
2435
|
+
*/
|
|
2436
|
+
export declare const RotateIn: React.FC<RotateInProps>;
|
|
2437
|
+
|
|
2438
|
+
export declare interface RotateInProps extends BaseAnimationProps {
|
|
2439
|
+
direction?: RotateDirection;
|
|
2440
|
+
degrees?: number;
|
|
2441
|
+
transformOrigin?: string;
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
/**
|
|
2445
|
+
* Row data interface
|
|
2446
|
+
*/
|
|
2447
|
+
declare interface RowData {
|
|
2448
|
+
key: Key;
|
|
2449
|
+
[key: string]: any;
|
|
2450
|
+
}
|
|
2451
|
+
|
|
2452
|
+
export declare const ScaleContainer: default_2.FC<ScaleContainerProps>;
|
|
2453
|
+
|
|
2454
|
+
export declare interface ScaleContainerProps extends BaseAnimatedContainerProps {
|
|
2455
|
+
startScale?: number;
|
|
2456
|
+
endScale?: number;
|
|
2457
|
+
scaleOrigin?: string;
|
|
2458
|
+
bounce?: boolean;
|
|
2459
|
+
}
|
|
2460
|
+
|
|
2461
|
+
/**
|
|
2462
|
+
* ScaleIn Animation Component
|
|
2463
|
+
*
|
|
2464
|
+
* Animates elements scaling from small to full size with optional hover/tap effects
|
|
2465
|
+
*/
|
|
2466
|
+
export declare const ScaleIn: React.FC<ScaleInProps>;
|
|
2467
|
+
|
|
2468
|
+
export declare interface ScaleInProps extends BaseAnimationProps {
|
|
2469
|
+
from?: number;
|
|
2470
|
+
to?: number;
|
|
2471
|
+
transformOrigin?: string;
|
|
2472
|
+
}
|
|
2473
|
+
|
|
2474
|
+
export declare interface ScrollConfig {
|
|
2475
|
+
target?: React.RefObject<HTMLElement>;
|
|
2476
|
+
offset?: [string, string];
|
|
2477
|
+
smooth?: boolean;
|
|
2478
|
+
}
|
|
2479
|
+
|
|
2480
|
+
/**
|
|
2481
|
+
* Selection type - can be "all" or a Set of keys
|
|
2482
|
+
*/
|
|
2483
|
+
declare type Selection_2 = "all" | Set<Key>;
|
|
2484
|
+
|
|
2485
|
+
/**
|
|
2486
|
+
* Selection behavior types
|
|
2487
|
+
*/
|
|
2488
|
+
declare type SelectionBehavior = "toggle" | "replace";
|
|
2489
|
+
|
|
2490
|
+
/**
|
|
2491
|
+
* Selection modes for table rows
|
|
2492
|
+
*/
|
|
2493
|
+
declare type SelectionMode_2 = "none" | "single" | "multiple";
|
|
2494
|
+
|
|
2495
|
+
declare type SeparatorType = 'slash' | 'chevron' | 'arrow' | 'dot' | 'custom';
|
|
2496
|
+
|
|
2497
|
+
export declare const SlideContainer: default_2.FC<SlideContainerProps>;
|
|
2498
|
+
|
|
2499
|
+
export declare interface SlideContainerProps extends BaseAnimatedContainerProps {
|
|
2500
|
+
direction?: SlideDirection;
|
|
2501
|
+
distance?: number;
|
|
2502
|
+
overshoot?: boolean;
|
|
2503
|
+
}
|
|
2504
|
+
|
|
2505
|
+
declare type SlideDirection = 'up' | 'down' | 'left' | 'right' | 'upLeft' | 'upRight' | 'downLeft' | 'downRight';
|
|
2506
|
+
|
|
2507
|
+
declare type SlideDirection_2 = 'up' | 'down' | 'left' | 'right';
|
|
2508
|
+
|
|
2509
|
+
/**
|
|
2510
|
+
* SlideIn Animation Component
|
|
2511
|
+
*
|
|
2512
|
+
* Animates elements sliding in from different directions (up, down, left, right)
|
|
2513
|
+
*/
|
|
2514
|
+
export declare const SlideIn: React.FC<SlideInProps>;
|
|
2515
|
+
|
|
2516
|
+
export declare interface SlideInProps extends BaseAnimationProps {
|
|
2517
|
+
direction?: SlideDirection_2;
|
|
2518
|
+
distance?: number;
|
|
2519
|
+
}
|
|
2520
|
+
|
|
2521
|
+
/**
|
|
2522
|
+
* Sort descriptor interface
|
|
2523
|
+
*/
|
|
2524
|
+
declare interface SortDescriptor {
|
|
2525
|
+
column?: Key;
|
|
2526
|
+
direction?: "ascending" | "descending";
|
|
2527
|
+
}
|
|
2528
|
+
|
|
2529
|
+
export declare const Spinner: default_2.FC<SpinnerProps>;
|
|
2530
|
+
|
|
2531
|
+
declare interface SpinnerAnimationConfig {
|
|
2532
|
+
duration?: number;
|
|
2533
|
+
delay?: number;
|
|
2534
|
+
repeat?: number;
|
|
2535
|
+
repeatType?: 'loop' | 'reverse' | 'mirror';
|
|
2536
|
+
repeatDelay?: number;
|
|
2537
|
+
}
|
|
2538
|
+
|
|
2539
|
+
declare type SpinnerColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'neutral';
|
|
2540
|
+
|
|
2541
|
+
export declare interface SpinnerProps extends BaseSpinnerProps {
|
|
2542
|
+
/** Optional label text to display below spinner */
|
|
2543
|
+
label?: string;
|
|
2544
|
+
/** Optional overlay mode */
|
|
2545
|
+
overlay?: boolean;
|
|
2546
|
+
/** Overlay background opacity (0-1) */
|
|
2547
|
+
overlayOpacity?: number;
|
|
2548
|
+
/** Custom overlay background color */
|
|
2549
|
+
overlayColor?: string;
|
|
2550
|
+
}
|
|
2551
|
+
|
|
2552
|
+
declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
2553
|
+
|
|
2554
|
+
declare type SpinnerSpeed = 'slow' | 'normal' | 'fast';
|
|
2555
|
+
|
|
2556
|
+
declare type SpinnerType = 'rotating' | 'pulse' | 'bounce' | 'wave' | 'grid' | 'ring' | 'dots' | 'bars';
|
|
2557
|
+
|
|
2558
|
+
/**
|
|
2559
|
+
* Stagger Animation Component
|
|
2560
|
+
*
|
|
2561
|
+
* Animates multiple children with a staggered delay effect
|
|
2562
|
+
*/
|
|
2563
|
+
export declare const Stagger: React.FC<StaggerProps>;
|
|
2564
|
+
|
|
2565
|
+
export declare const StaggerContainer: default_2.FC<StaggerContainerProps>;
|
|
2566
|
+
|
|
2567
|
+
export declare interface StaggerContainerProps extends BaseAnimatedContainerProps {
|
|
2568
|
+
staggerDelay?: number;
|
|
2569
|
+
staggerDirection?: 'normal' | 'reverse' | 'alternate';
|
|
2570
|
+
childSelector?: string;
|
|
2571
|
+
}
|
|
2572
|
+
|
|
2573
|
+
export declare interface StaggerProps {
|
|
2574
|
+
children: ReactNode[];
|
|
2575
|
+
className?: string;
|
|
2576
|
+
staggerDelay?: number;
|
|
2577
|
+
animationType?: AnimationType;
|
|
2578
|
+
direction?: SlideDirection_2;
|
|
2579
|
+
duration?: number;
|
|
2580
|
+
threshold?: number;
|
|
2581
|
+
}
|
|
2582
|
+
|
|
2583
|
+
/**
|
|
2584
|
+
* Enhanced Switch component with framer-motion animations
|
|
2585
|
+
* Supports multiple sizes, colors, states, and custom icons
|
|
2586
|
+
* @param props - Switch component properties
|
|
2587
|
+
* @returns JSX element representing a styled switch with smooth animations
|
|
2588
|
+
*/
|
|
2589
|
+
export declare const Switch: ({ children, value, name, size, color, thumbIcon: ThumbIconComponent, startContent, endContent, isSelected: controlledSelected, defaultSelected, isReadOnly, isDisabled, disableAnimation, className, classNames, onChange, onValueChange, "data-testid": dataTestId, }: SwitchProps) => JSX.Element;
|
|
2590
|
+
|
|
2591
|
+
/**
|
|
2592
|
+
* Color variants for Switch component
|
|
2593
|
+
*/
|
|
2594
|
+
declare type SwitchColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
2595
|
+
|
|
2596
|
+
/**
|
|
2597
|
+
* Props interface for the main Switch component
|
|
2598
|
+
*/
|
|
2599
|
+
export declare interface SwitchProps {
|
|
2600
|
+
/** Content to render as switch label */
|
|
2601
|
+
children?: ReactNode;
|
|
2602
|
+
/** Value attribute for the switch input */
|
|
2603
|
+
value?: string;
|
|
2604
|
+
/** Name attribute for the switch input */
|
|
2605
|
+
name?: string;
|
|
2606
|
+
/** Size variant of the switch */
|
|
2607
|
+
size?: SwitchSize;
|
|
2608
|
+
/** Color theme of the switch */
|
|
2609
|
+
color?: SwitchColor;
|
|
2610
|
+
/** Custom icon component for thumb */
|
|
2611
|
+
thumbIcon?: React.ComponentType<ThumbIconProps>;
|
|
2612
|
+
/** Content to display at the start of the switch */
|
|
2613
|
+
startContent?: ReactNode;
|
|
2614
|
+
/** Content to display at the end of the switch */
|
|
2615
|
+
endContent?: ReactNode;
|
|
2616
|
+
/** Whether the switch is selected (controlled) */
|
|
2617
|
+
isSelected?: boolean;
|
|
2618
|
+
/** Default selected state (uncontrolled) */
|
|
2619
|
+
defaultSelected?: boolean;
|
|
2620
|
+
/** Whether the switch is read-only */
|
|
2621
|
+
isReadOnly?: boolean;
|
|
2622
|
+
/** Whether the switch is disabled */
|
|
2623
|
+
isDisabled?: boolean;
|
|
2624
|
+
/** Whether to disable animations */
|
|
2625
|
+
disableAnimation?: boolean;
|
|
2626
|
+
/** Additional CSS classes to apply */
|
|
2627
|
+
className?: string;
|
|
2628
|
+
/** Custom class names for different slots */
|
|
2629
|
+
classNames?: Partial<Record<"base" | "wrapper" | "thumb" | "label" | "startContent" | "endContent" | "thumbIcon" | "hiddenInput", string>>;
|
|
2630
|
+
/** Native change event handler */
|
|
2631
|
+
onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
2632
|
+
/** Value change event handler */
|
|
2633
|
+
onValueChange?: (isSelected: boolean) => void;
|
|
2634
|
+
/** Test ID for testing frameworks */
|
|
2635
|
+
"data-testid"?: string;
|
|
2636
|
+
}
|
|
2637
|
+
|
|
2638
|
+
/**
|
|
2639
|
+
* Size variants for Switch component
|
|
2640
|
+
*/
|
|
2641
|
+
declare type SwitchSize = "sm" | "md" | "lg";
|
|
2642
|
+
|
|
2643
|
+
export declare const Table: <T extends Record<string, any> = any>({ children, className, color, layout, radius, shadow, maxTableHeight, rowHeight, isVirtualized, hideHeader, isStriped, isCompact, isHeaderSticky, fullWidth, removeWrapper, topContent, bottomContent, topContentPlacement, bottomContentPlacement, showSelectionCheckboxes, sortDescriptor, selectedKeys, defaultSelectedKeys, disabledKeys, disallowEmptySelection, selectionMode, selectionBehavior, disabledBehavior, allowDuplicateSelectionEvents, disableAnimation, isKeyboardNavigationDisabled, columns, items, onRowAction, onCellAction, onSelectionChange, onSortChange, "data-testid": testId, ...props }: TableProps<T>) => JSX.Element;
|
|
2644
|
+
|
|
2645
|
+
/**
|
|
2646
|
+
* Table color variants
|
|
2647
|
+
*/
|
|
2648
|
+
declare type TableColor = "default" | "primary" | "secondary" | "success" | "warning" | "danger";
|
|
2649
|
+
|
|
2650
|
+
/**
|
|
2651
|
+
* Table layout types
|
|
2652
|
+
*/
|
|
2653
|
+
declare type TableLayout = "auto" | "fixed";
|
|
2654
|
+
|
|
2655
|
+
/**
|
|
2656
|
+
* Table main component props
|
|
2657
|
+
*/
|
|
2658
|
+
export declare interface TableProps<T = RowData> {
|
|
2659
|
+
children?: ReactNode;
|
|
2660
|
+
className?: string;
|
|
2661
|
+
color?: TableColor;
|
|
2662
|
+
layout?: TableLayout;
|
|
2663
|
+
radius?: TableRadius;
|
|
2664
|
+
shadow?: TableShadow;
|
|
2665
|
+
maxTableHeight?: number;
|
|
2666
|
+
rowHeight?: number;
|
|
2667
|
+
isVirtualized?: boolean;
|
|
2668
|
+
hideHeader?: boolean;
|
|
2669
|
+
isStriped?: boolean;
|
|
2670
|
+
isCompact?: boolean;
|
|
2671
|
+
isHeaderSticky?: boolean;
|
|
2672
|
+
fullWidth?: boolean;
|
|
2673
|
+
removeWrapper?: boolean;
|
|
2674
|
+
topContent?: ReactNode;
|
|
2675
|
+
bottomContent?: ReactNode;
|
|
2676
|
+
topContentPlacement?: ContentPlacement;
|
|
2677
|
+
bottomContentPlacement?: ContentPlacement;
|
|
2678
|
+
showSelectionCheckboxes?: boolean;
|
|
2679
|
+
sortDescriptor?: SortDescriptor;
|
|
2680
|
+
selectedKeys?: Selection_2;
|
|
2681
|
+
defaultSelectedKeys?: Selection_2;
|
|
2682
|
+
disabledKeys?: Selection_2;
|
|
2683
|
+
disallowEmptySelection?: boolean;
|
|
2684
|
+
selectionMode?: SelectionMode_2;
|
|
2685
|
+
selectionBehavior?: SelectionBehavior;
|
|
2686
|
+
disabledBehavior?: DisabledBehavior;
|
|
2687
|
+
allowDuplicateSelectionEvents?: boolean;
|
|
2688
|
+
disableAnimation?: boolean;
|
|
2689
|
+
isKeyboardNavigationDisabled?: boolean;
|
|
2690
|
+
columns?: ColumnDef<T>[];
|
|
2691
|
+
items?: T[];
|
|
2692
|
+
onRowAction?: (key: Key) => void;
|
|
2693
|
+
onCellAction?: (key: Key) => void;
|
|
2694
|
+
onSelectionChange?: (keys: Selection_2) => void;
|
|
2695
|
+
onSortChange?: (descriptor: SortDescriptor) => void;
|
|
2696
|
+
"data-testid"?: string;
|
|
2697
|
+
}
|
|
2698
|
+
|
|
2699
|
+
/**
|
|
2700
|
+
* Table radius options
|
|
2701
|
+
*/
|
|
2702
|
+
declare type TableRadius = "none" | "sm" | "md" | "lg";
|
|
2703
|
+
|
|
2704
|
+
export declare const TableRow: <T extends Record<string, any> = any>({ children, className, textValue, item, "data-testid": testId, ...props }: TableRowProps<T>) => JSX.Element;
|
|
2705
|
+
|
|
2706
|
+
/**
|
|
2707
|
+
* Table row props
|
|
2708
|
+
*/
|
|
2709
|
+
declare interface TableRowProps<T = any> {
|
|
2710
|
+
children?: ReactNode;
|
|
2711
|
+
className?: string;
|
|
2712
|
+
textValue?: string;
|
|
2713
|
+
item?: T;
|
|
2714
|
+
"data-testid"?: string;
|
|
2715
|
+
}
|
|
2716
|
+
|
|
2717
|
+
/**
|
|
2718
|
+
* Table shadow options
|
|
2719
|
+
*/
|
|
2720
|
+
declare type TableShadow = "none" | "sm" | "md" | "lg";
|
|
2721
|
+
|
|
2722
|
+
/**
|
|
2723
|
+
* Animation directions for text reveals
|
|
2724
|
+
*/
|
|
2725
|
+
export declare type TextDirection = 'left' | 'right' | 'up' | 'down' | 'center';
|
|
2726
|
+
|
|
2727
|
+
/**
|
|
2728
|
+
* Easing types for text animations
|
|
2729
|
+
*/
|
|
2730
|
+
export declare type TextEasing = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'backIn' | 'backOut' | 'backInOut' | 'bounceIn' | 'bounceOut' | 'bounceInOut';
|
|
2731
|
+
|
|
2732
|
+
/**
|
|
2733
|
+
* Animation trigger types for text animations
|
|
2734
|
+
*/
|
|
2735
|
+
export declare type TextTrigger = 'inView' | 'hover' | 'focus' | 'manual' | 'immediate';
|
|
2736
|
+
|
|
2737
|
+
/**
|
|
2738
|
+
* Props interface for custom thumb icon
|
|
2739
|
+
*/
|
|
2740
|
+
declare interface ThumbIconProps {
|
|
2741
|
+
/** Whether the switch is selected */
|
|
2742
|
+
isSelected?: boolean;
|
|
2743
|
+
/** Additional CSS classes */
|
|
2744
|
+
className?: string;
|
|
2745
|
+
}
|
|
2746
|
+
|
|
2747
|
+
/**
|
|
2748
|
+
* Toast component for displaying notifications
|
|
2749
|
+
* @param props - Toast component properties
|
|
2750
|
+
* @returns JSX element representing a toast notification
|
|
2751
|
+
*/
|
|
2752
|
+
export declare const Toast: ({ id, type, title, description, closable, action, icon, size, variant, radius, position, className, onRemove, onClose, "data-testid": dataTestId, }: ToastProps) => JSX.Element;
|
|
2753
|
+
|
|
2754
|
+
/**
|
|
2755
|
+
* ToastContainer component that renders all active toasts
|
|
2756
|
+
* @param props - ToastContainer component properties
|
|
2757
|
+
* @returns JSX element representing the toast container
|
|
2758
|
+
*/
|
|
2759
|
+
export declare const ToastContainer: ({ position, className, maxToasts, "data-testid": dataTestId, }: ToastContainerProps) => ReactPortal | null;
|
|
2760
|
+
|
|
2761
|
+
/**
|
|
2762
|
+
* Toast container props
|
|
2763
|
+
*/
|
|
2764
|
+
export declare interface ToastContainerProps {
|
|
2765
|
+
position?: ToastPosition;
|
|
2766
|
+
className?: string;
|
|
2767
|
+
maxToasts?: number;
|
|
2768
|
+
"data-testid"?: string;
|
|
2769
|
+
}
|
|
2770
|
+
|
|
2771
|
+
/**
|
|
2772
|
+
* Individual toast item interface
|
|
2773
|
+
*/
|
|
2774
|
+
declare interface ToastItem {
|
|
2775
|
+
id: string;
|
|
2776
|
+
type: ToastType;
|
|
2777
|
+
title?: string;
|
|
2778
|
+
description?: string;
|
|
2779
|
+
duration?: number;
|
|
2780
|
+
closable?: boolean;
|
|
2781
|
+
action?: ReactNode;
|
|
2782
|
+
icon?: ReactNode;
|
|
2783
|
+
position?: ToastPosition;
|
|
2784
|
+
size?: ToastSize;
|
|
2785
|
+
variant?: ToastVariant;
|
|
2786
|
+
radius?: ToastRadius;
|
|
2787
|
+
className?: string;
|
|
2788
|
+
onClose?: (id: string) => void;
|
|
2789
|
+
}
|
|
2790
|
+
|
|
2791
|
+
/**
|
|
2792
|
+
* Toast options for quick methods
|
|
2793
|
+
*/
|
|
2794
|
+
declare interface ToastOptions {
|
|
2795
|
+
title?: string;
|
|
2796
|
+
description?: string;
|
|
2797
|
+
duration?: number;
|
|
2798
|
+
closable?: boolean;
|
|
2799
|
+
action?: ReactNode;
|
|
2800
|
+
icon?: ReactNode;
|
|
2801
|
+
position?: ToastPosition;
|
|
2802
|
+
size?: ToastSize;
|
|
2803
|
+
variant?: ToastVariant;
|
|
2804
|
+
radius?: ToastRadius;
|
|
2805
|
+
className?: string;
|
|
2806
|
+
onClose?: (id: string) => void;
|
|
2807
|
+
}
|
|
2808
|
+
|
|
2809
|
+
/**
|
|
2810
|
+
* Toast positions on the screen
|
|
2811
|
+
*/
|
|
2812
|
+
declare type ToastPosition = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right";
|
|
2813
|
+
|
|
2814
|
+
/**
|
|
2815
|
+
* Toast component props
|
|
2816
|
+
*/
|
|
2817
|
+
export declare interface ToastProps extends ToastItem {
|
|
2818
|
+
onRemove: (id: string) => void;
|
|
2819
|
+
"data-testid"?: string;
|
|
2820
|
+
}
|
|
2821
|
+
|
|
2822
|
+
/**
|
|
2823
|
+
* Toast Provider component
|
|
2824
|
+
* Provides toast functionality to the application
|
|
2825
|
+
* @param props - ToastProvider component properties
|
|
2826
|
+
* @returns JSX element representing the toast provider
|
|
2827
|
+
*/
|
|
2828
|
+
export declare const ToastProvider: ({ children, position, maxToasts, defaultDuration, }: ToastProviderProps) => JSX.Element;
|
|
2829
|
+
|
|
2830
|
+
/**
|
|
2831
|
+
* Toast provider props
|
|
2832
|
+
*/
|
|
2833
|
+
export declare interface ToastProviderProps {
|
|
2834
|
+
children: ReactNode;
|
|
2835
|
+
position?: ToastPosition;
|
|
2836
|
+
maxToasts?: number;
|
|
2837
|
+
defaultDuration?: number;
|
|
2838
|
+
className?: string;
|
|
2839
|
+
}
|
|
2840
|
+
|
|
2841
|
+
/**
|
|
2842
|
+
* Toast radius options
|
|
2843
|
+
*/
|
|
2844
|
+
declare type ToastRadius = "none" | "sm" | "md" | "lg" | "full";
|
|
2845
|
+
|
|
2846
|
+
/**
|
|
2847
|
+
* Toast sizes
|
|
2848
|
+
*/
|
|
2849
|
+
declare type ToastSize = "sm" | "md" | "lg";
|
|
2850
|
+
|
|
2851
|
+
/**
|
|
2852
|
+
* Toast types for different notification styles
|
|
2853
|
+
*/
|
|
2854
|
+
declare type ToastType = "success" | "error" | "warning" | "info" | "default";
|
|
2855
|
+
|
|
2856
|
+
/**
|
|
2857
|
+
* Toast variants
|
|
2858
|
+
*/
|
|
2859
|
+
declare type ToastVariant = "solid" | "bordered" | "flat" | "faded" | "shadow";
|
|
2860
|
+
|
|
2861
|
+
export declare const Tooltip: default_2.FC<TooltipProps>;
|
|
2862
|
+
|
|
2863
|
+
/**
|
|
2864
|
+
* Animation types for tooltip entrance/exit
|
|
2865
|
+
*/
|
|
2866
|
+
declare type TooltipAnimation = 'fade' | 'scale' | 'shift' | 'bounce' | 'rotate' | 'slide' | 'zoom' | 'flip' | 'elastic' | 'none';
|
|
2867
|
+
|
|
2868
|
+
/**
|
|
2869
|
+
* Advanced animation configuration
|
|
2870
|
+
*/
|
|
2871
|
+
declare interface TooltipAnimationConfig {
|
|
2872
|
+
/** Animation type */
|
|
2873
|
+
type?: TooltipAnimation;
|
|
2874
|
+
/** Animation speed */
|
|
2875
|
+
speed?: TooltipAnimationSpeed;
|
|
2876
|
+
/** Animation easing */
|
|
2877
|
+
easing?: TooltipAnimationEasing;
|
|
2878
|
+
/** Custom duration in seconds */
|
|
2879
|
+
duration?: number;
|
|
2880
|
+
/** Delay before animation starts */
|
|
2881
|
+
delay?: number;
|
|
2882
|
+
/** Spring configuration for bouncy animations */
|
|
2883
|
+
spring?: {
|
|
2884
|
+
tension?: number;
|
|
2885
|
+
friction?: number;
|
|
2886
|
+
mass?: number;
|
|
2887
|
+
};
|
|
2888
|
+
}
|
|
2889
|
+
|
|
2890
|
+
/**
|
|
2891
|
+
* Animation easing types
|
|
2892
|
+
*/
|
|
2893
|
+
declare type TooltipAnimationEasing = 'linear' | 'easeIn' | 'easeOut' | 'easeInOut' | 'backIn' | 'backOut' | 'backInOut' | 'elasticIn' | 'elasticOut' | 'elasticInOut' | 'bounceIn' | 'bounceOut' | 'bounceInOut';
|
|
2894
|
+
|
|
2895
|
+
/**
|
|
2896
|
+
* Animation speed configuration
|
|
2897
|
+
*/
|
|
2898
|
+
declare type TooltipAnimationSpeed = 'slow' | 'normal' | 'fast' | 'instant';
|
|
2899
|
+
|
|
2900
|
+
/**
|
|
2901
|
+
* Arrow configuration
|
|
2902
|
+
*/
|
|
2903
|
+
declare interface TooltipArrow {
|
|
2904
|
+
/** Whether to show arrow */
|
|
2905
|
+
enabled?: boolean;
|
|
2906
|
+
/** Arrow size in pixels */
|
|
2907
|
+
size?: number;
|
|
2908
|
+
/** Arrow offset from edge */
|
|
2909
|
+
offset?: number;
|
|
2910
|
+
}
|
|
2911
|
+
|
|
2912
|
+
/**
|
|
2913
|
+
* Delay configuration for tooltip show/hide
|
|
2914
|
+
*/
|
|
2915
|
+
declare interface TooltipDelay {
|
|
2916
|
+
/** Delay before showing tooltip (ms) */
|
|
2917
|
+
show?: number;
|
|
2918
|
+
/** Delay before hiding tooltip (ms) */
|
|
2919
|
+
hide?: number;
|
|
2920
|
+
}
|
|
2921
|
+
|
|
2922
|
+
/**
|
|
2923
|
+
* Offset configuration for tooltip positioning
|
|
2924
|
+
*/
|
|
2925
|
+
declare interface TooltipOffset {
|
|
2926
|
+
mainAxis?: number;
|
|
2927
|
+
crossAxis?: number;
|
|
2928
|
+
}
|
|
2929
|
+
|
|
2930
|
+
/**
|
|
2931
|
+
* Tooltip placement positions
|
|
2932
|
+
*/
|
|
2933
|
+
declare type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
|
|
2934
|
+
|
|
2935
|
+
/**
|
|
2936
|
+
* Main Tooltip component props
|
|
2937
|
+
*/
|
|
2938
|
+
export declare interface TooltipProps extends BaseTooltipProps {
|
|
2939
|
+
/** Children to render as trigger */
|
|
2940
|
+
children: ReactNode;
|
|
2941
|
+
/** Whether children should be wrapped in span */
|
|
2942
|
+
asChild?: boolean;
|
|
2943
|
+
}
|
|
2944
|
+
|
|
2945
|
+
export declare const TooltipProvider: default_2.FC<TooltipProviderProps>;
|
|
2946
|
+
|
|
2947
|
+
/**
|
|
2948
|
+
* Tooltip provider context props
|
|
2949
|
+
*/
|
|
2950
|
+
export declare interface TooltipProviderProps {
|
|
2951
|
+
/** Default delay configuration */
|
|
2952
|
+
delayDuration?: number;
|
|
2953
|
+
/** Skip delay when moving between tooltips */
|
|
2954
|
+
skipDelayDuration?: number;
|
|
2955
|
+
/** Disable hover card globally */
|
|
2956
|
+
disableHoverableContent?: boolean;
|
|
2957
|
+
/** Children */
|
|
2958
|
+
children: ReactNode;
|
|
2959
|
+
}
|
|
2960
|
+
|
|
2961
|
+
/**
|
|
2962
|
+
* Size variants for tooltip
|
|
2963
|
+
*/
|
|
2964
|
+
declare type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
2965
|
+
|
|
2966
|
+
/**
|
|
2967
|
+
* Tooltip trigger types
|
|
2968
|
+
*/
|
|
2969
|
+
declare type TooltipTrigger = 'hover' | 'click' | 'focus' | 'manual';
|
|
2970
|
+
|
|
2971
|
+
/**
|
|
2972
|
+
* Color variants for tooltip
|
|
2973
|
+
*/
|
|
2974
|
+
declare type TooltipVariant = 'dark' | 'light' | 'primary' | 'success' | 'warning' | 'error';
|
|
2975
|
+
|
|
2976
|
+
export declare interface TransitionConfig {
|
|
2977
|
+
type?: 'spring' | 'tween' | 'keyframes' | 'inertia';
|
|
2978
|
+
duration?: number;
|
|
2979
|
+
delay?: number;
|
|
2980
|
+
ease?: EasingType_2 | number[];
|
|
2981
|
+
damping?: number;
|
|
2982
|
+
stiffness?: number;
|
|
2983
|
+
mass?: number;
|
|
2984
|
+
bounce?: number;
|
|
2985
|
+
}
|
|
2986
|
+
|
|
2987
|
+
export declare type TriggerType = 'inView' | 'hover' | 'focus' | 'manual' | 'immediate';
|
|
2988
|
+
|
|
2989
|
+
/**
|
|
2990
|
+
* TypeWriter Component
|
|
2991
|
+
*
|
|
2992
|
+
* Creates a typewriter effect where text appears character by character,
|
|
2993
|
+
* with optional cursor, deletion, and multiple text cycling.
|
|
2994
|
+
*
|
|
2995
|
+
* @example
|
|
2996
|
+
* <TypeWriter
|
|
2997
|
+
* text="Hola mundo"
|
|
2998
|
+
* speed={2}
|
|
2999
|
+
* showCursor={true}
|
|
3000
|
+
* cursor="line"
|
|
3001
|
+
* />
|
|
3002
|
+
*/
|
|
3003
|
+
export declare const TypeWriter: React_2.FC<TypeWriterProps>;
|
|
3004
|
+
|
|
3005
|
+
/**
|
|
3006
|
+
* TypeWriter component props
|
|
3007
|
+
*/
|
|
3008
|
+
export declare interface TypeWriterProps extends BaseTextProps {
|
|
3009
|
+
/** Typing speed in characters per second */
|
|
3010
|
+
speed?: number;
|
|
3011
|
+
/** Cursor style */
|
|
3012
|
+
cursor?: CursorStyle;
|
|
3013
|
+
/** Cursor color */
|
|
3014
|
+
cursorColor?: string;
|
|
3015
|
+
/** Whether to show blinking cursor */
|
|
3016
|
+
showCursor?: boolean;
|
|
3017
|
+
/** Whether to delete text after typing */
|
|
3018
|
+
deleteAfter?: boolean;
|
|
3019
|
+
/** Deletion speed in characters per second */
|
|
3020
|
+
deleteSpeed?: number;
|
|
3021
|
+
/** Pause duration before deletion (in seconds) */
|
|
3022
|
+
pauseBeforeDelete?: number;
|
|
3023
|
+
/** Multiple texts to cycle through */
|
|
3024
|
+
texts?: string[];
|
|
3025
|
+
/** Loop through texts infinitely */
|
|
3026
|
+
loop?: boolean;
|
|
3027
|
+
}
|
|
3028
|
+
|
|
3029
|
+
/**
|
|
3030
|
+
* Custom hook for managing accordion state and behavior
|
|
3031
|
+
*/
|
|
3032
|
+
export declare const useAccordion: (config?: UseAccordionConfig) => UseAccordionReturn;
|
|
3033
|
+
|
|
3034
|
+
/**
|
|
3035
|
+
* Configuration for useAccordion hook
|
|
3036
|
+
*/
|
|
3037
|
+
declare interface UseAccordionConfig {
|
|
3038
|
+
/** Selection mode */
|
|
3039
|
+
selectionMode?: AccordionSelectionMode;
|
|
3040
|
+
/** Default expanded keys */
|
|
3041
|
+
defaultExpandedKeys?: string[];
|
|
3042
|
+
/** Controlled expanded keys */
|
|
3043
|
+
expandedKeys?: string[];
|
|
3044
|
+
/** Change handler */
|
|
3045
|
+
onExpandedChange?: (keys: string[]) => void;
|
|
3046
|
+
/** Single selection change handler */
|
|
3047
|
+
onSelectionChange?: (key: string) => void;
|
|
3048
|
+
/** Whether disabled */
|
|
3049
|
+
isDisabled?: boolean;
|
|
3050
|
+
}
|
|
3051
|
+
|
|
3052
|
+
/**
|
|
3053
|
+
* Return type for useAccordion hook
|
|
3054
|
+
*/
|
|
3055
|
+
declare interface UseAccordionReturn {
|
|
3056
|
+
/** Currently expanded keys */
|
|
3057
|
+
expandedKeys: string[];
|
|
3058
|
+
/** Check if an item is expanded */
|
|
3059
|
+
isExpanded: (key: string) => boolean;
|
|
3060
|
+
/** Toggle a specific item */
|
|
3061
|
+
toggle: (key: string) => void;
|
|
3062
|
+
/** Expand a specific item */
|
|
3063
|
+
expand: (key: string) => void;
|
|
3064
|
+
/** Collapse a specific item */
|
|
3065
|
+
collapse: (key: string) => void;
|
|
3066
|
+
/** Expand all items */
|
|
3067
|
+
expandAll: () => void;
|
|
3068
|
+
/** Collapse all items */
|
|
3069
|
+
collapseAll: () => void;
|
|
3070
|
+
/** Set expanded keys directly */
|
|
3071
|
+
setExpandedKeys: (keys: string[]) => void;
|
|
3072
|
+
}
|
|
3073
|
+
|
|
3074
|
+
/**
|
|
3075
|
+
* Custom useAutocomplete hook for managing autocomplete state and behavior
|
|
3076
|
+
*/
|
|
3077
|
+
export declare function useAutocomplete<T = AutocompleteItemData>(props: AutocompleteProps<T>): UseAutocompleteReturn<T>;
|
|
3078
|
+
|
|
3079
|
+
/**
|
|
3080
|
+
* Hook return type for useAutocomplete
|
|
3081
|
+
*/
|
|
3082
|
+
declare interface UseAutocompleteReturn<T = AutocompleteItemData> {
|
|
3083
|
+
/** Input value state */
|
|
3084
|
+
inputValue: string;
|
|
3085
|
+
/** Selected key state */
|
|
3086
|
+
selectedKey: Key | null;
|
|
3087
|
+
/** Open state */
|
|
3088
|
+
isOpen: boolean;
|
|
3089
|
+
/** Loading state */
|
|
3090
|
+
isLoading: boolean;
|
|
3091
|
+
/** Filtered items */
|
|
3092
|
+
filteredItems: T[];
|
|
3093
|
+
/** Focused item key */
|
|
3094
|
+
focusedKey: Key | null;
|
|
3095
|
+
/** Input props */
|
|
3096
|
+
inputProps: ComponentPropsWithoutRef<"input"> & {
|
|
3097
|
+
ref: default_2.RefObject<HTMLInputElement | null>;
|
|
3098
|
+
};
|
|
3099
|
+
/** Listbox props */
|
|
3100
|
+
listboxProps: ComponentPropsWithoutRef<"ul">;
|
|
3101
|
+
/** Popover props */
|
|
3102
|
+
popoverProps: {
|
|
3103
|
+
isOpen: boolean;
|
|
3104
|
+
onOpenChange: (isOpen: boolean) => void;
|
|
3105
|
+
};
|
|
3106
|
+
/** Clear button props */
|
|
3107
|
+
clearButtonProps: ComponentPropsWithoutRef<"button">;
|
|
3108
|
+
/** Selector button props */
|
|
3109
|
+
selectorButtonProps: ComponentPropsWithoutRef<"button">;
|
|
3110
|
+
/** Container ref for click outside detection */
|
|
3111
|
+
containerRef: default_2.RefObject<HTMLDivElement | null>;
|
|
3112
|
+
/** Methods */
|
|
3113
|
+
clearValue: () => void;
|
|
3114
|
+
selectItem: (key: Key) => void;
|
|
3115
|
+
close: () => void;
|
|
3116
|
+
open: () => void;
|
|
3117
|
+
/** State setters */
|
|
3118
|
+
setInputValue: (value: string) => void;
|
|
3119
|
+
setSelectedKey: (key: Key | null) => void;
|
|
3120
|
+
setIsOpen: (isOpen: boolean) => void;
|
|
3121
|
+
}
|
|
3122
|
+
|
|
3123
|
+
/**
|
|
3124
|
+
* useAvatar hook for custom Avatar implementations
|
|
3125
|
+
* Handles image loading, fallback logic, and initials generation
|
|
3126
|
+
*/
|
|
3127
|
+
export declare const useAvatar: (props: AvatarProps) => UseAvatarReturn;
|
|
3128
|
+
|
|
3129
|
+
/**
|
|
3130
|
+
* useAvatarGroup hook for custom AvatarGroup implementations
|
|
3131
|
+
* Handles child counting, context creation, and overflow logic
|
|
3132
|
+
*/
|
|
3133
|
+
export declare const useAvatarGroup: (props: AvatarGroupProps) => UseAvatarGroupReturn;
|
|
3134
|
+
|
|
3135
|
+
/**
|
|
3136
|
+
* Avatar Group hook return type for custom implementations
|
|
3137
|
+
*/
|
|
3138
|
+
declare interface UseAvatarGroupReturn {
|
|
3139
|
+
/** Context value for child avatars */
|
|
3140
|
+
context: AvatarGroupContextValue;
|
|
3141
|
+
/** Number of remaining avatars not displayed */
|
|
3142
|
+
remainingCount: number;
|
|
3143
|
+
/** Whether to show the count indicator */
|
|
3144
|
+
shouldShowCount: boolean;
|
|
3145
|
+
/** Props for the base wrapper element */
|
|
3146
|
+
baseProps: ComponentPropsWithoutRef<"div">;
|
|
3147
|
+
/** Props for the count element */
|
|
3148
|
+
countProps: ComponentPropsWithoutRef<"div">;
|
|
3149
|
+
}
|
|
3150
|
+
|
|
3151
|
+
/**
|
|
3152
|
+
* Avatar hook return type for custom implementations
|
|
3153
|
+
*/
|
|
3154
|
+
declare interface UseAvatarReturn {
|
|
3155
|
+
/** Whether the image has loaded successfully */
|
|
3156
|
+
isImgLoaded: boolean;
|
|
3157
|
+
/** Whether to show the fallback content */
|
|
3158
|
+
shouldShowFallback: boolean;
|
|
3159
|
+
/** Generated initials from name */
|
|
3160
|
+
initials: string;
|
|
3161
|
+
/** Props for the image element */
|
|
3162
|
+
imgProps: ComponentPropsWithoutRef<"img">;
|
|
3163
|
+
/** Props for the base wrapper element */
|
|
3164
|
+
baseProps: ComponentPropsWithoutRef<"div">;
|
|
3165
|
+
/** Props for the fallback element */
|
|
3166
|
+
fallbackProps: ComponentPropsWithoutRef<"div">;
|
|
3167
|
+
}
|
|
3168
|
+
|
|
3169
|
+
export declare function useModal(props?: UseModalProps): UseModalReturn;
|
|
3170
|
+
|
|
3171
|
+
declare interface UseModalProps {
|
|
3172
|
+
isOpen?: boolean;
|
|
3173
|
+
defaultOpen?: boolean;
|
|
3174
|
+
onOpenChange?: (isOpen: boolean) => void;
|
|
3175
|
+
onClose?: () => void;
|
|
3176
|
+
}
|
|
3177
|
+
|
|
3178
|
+
declare interface UseModalReturn {
|
|
3179
|
+
isOpen: boolean;
|
|
3180
|
+
onOpen: () => void;
|
|
3181
|
+
onClose: () => void;
|
|
3182
|
+
onOpenChange: (isOpen: boolean) => void;
|
|
3183
|
+
}
|
|
3184
|
+
|
|
3185
|
+
export declare const useMorphingContainer: (morphStates: any[]) => {
|
|
3186
|
+
currentIndex: number;
|
|
3187
|
+
controls: LegacyAnimationControls;
|
|
3188
|
+
morphToNext: () => void;
|
|
3189
|
+
morphToPrevious: () => void;
|
|
3190
|
+
morphToIndex: (index: number) => void;
|
|
3191
|
+
};
|
|
3192
|
+
|
|
3193
|
+
/**
|
|
3194
|
+
* Custom hook for pagination logic and state management
|
|
3195
|
+
* @param config - Pagination configuration
|
|
3196
|
+
* @returns Pagination state and methods
|
|
3197
|
+
*/
|
|
3198
|
+
export declare function usePagination(config: UsePaginationConfig): UsePaginationReturn;
|
|
3199
|
+
|
|
3200
|
+
/**
|
|
3201
|
+
* Hook configuration for usePagination
|
|
3202
|
+
*/
|
|
3203
|
+
declare interface UsePaginationConfig {
|
|
3204
|
+
/** Total number of pages */
|
|
3205
|
+
total: number;
|
|
3206
|
+
/** Current page */
|
|
3207
|
+
page?: number;
|
|
3208
|
+
/** Default page */
|
|
3209
|
+
defaultPage?: number;
|
|
3210
|
+
/** Initial page */
|
|
3211
|
+
initialPage?: number;
|
|
3212
|
+
/** Number of siblings to show */
|
|
3213
|
+
siblings?: number;
|
|
3214
|
+
/** Whether to show dots */
|
|
3215
|
+
showDots?: boolean;
|
|
3216
|
+
/** Whether to loop pages */
|
|
3217
|
+
loop?: boolean;
|
|
3218
|
+
/** Callback when page changes */
|
|
3219
|
+
onChange?: (page: number) => void;
|
|
3220
|
+
}
|
|
3221
|
+
|
|
3222
|
+
/**
|
|
3223
|
+
* Hook to access pagination context
|
|
3224
|
+
*/
|
|
3225
|
+
export declare const usePaginationContext: () => PaginationContextValue;
|
|
3226
|
+
|
|
3227
|
+
/**
|
|
3228
|
+
* Return type for usePagination hook
|
|
3229
|
+
*/
|
|
3230
|
+
declare interface UsePaginationReturn {
|
|
3231
|
+
/** Current active page */
|
|
3232
|
+
activePage: number;
|
|
3233
|
+
/** Array of pagination items */
|
|
3234
|
+
range: PaginationItemData[];
|
|
3235
|
+
/** Go to specific page */
|
|
3236
|
+
setPage: (page: number) => void;
|
|
3237
|
+
/** Go to next page */
|
|
3238
|
+
next: () => void;
|
|
3239
|
+
/** Go to previous page */
|
|
3240
|
+
previous: () => void;
|
|
3241
|
+
/** Go to first page */
|
|
3242
|
+
first: () => void;
|
|
3243
|
+
/** Go to last page */
|
|
3244
|
+
last: () => void;
|
|
3245
|
+
/** Whether on first page */
|
|
3246
|
+
isFirst: boolean;
|
|
3247
|
+
/** Whether on last page */
|
|
3248
|
+
isLast: boolean;
|
|
3249
|
+
/** Total number of pages */
|
|
3250
|
+
totalPages: number;
|
|
3251
|
+
}
|
|
3252
|
+
|
|
3253
|
+
export declare const useParallaxContainer: (options?: {
|
|
3254
|
+
speed?: number;
|
|
3255
|
+
direction?: "vertical" | "horizontal" | "both";
|
|
3256
|
+
enableOnMobile?: boolean;
|
|
3257
|
+
}) => {
|
|
3258
|
+
isActive: boolean;
|
|
3259
|
+
isMobile: boolean;
|
|
3260
|
+
scrollY: MotionValue<number>;
|
|
3261
|
+
transformValue: {
|
|
3262
|
+
x?: undefined;
|
|
3263
|
+
y?: undefined;
|
|
3264
|
+
} | {
|
|
3265
|
+
x: MotionValue<number>;
|
|
3266
|
+
y?: undefined;
|
|
3267
|
+
} | {
|
|
3268
|
+
x: MotionValue<number>;
|
|
3269
|
+
y: MotionValue<number>;
|
|
3270
|
+
} | {
|
|
3271
|
+
y: MotionValue<number>;
|
|
3272
|
+
x?: undefined;
|
|
3273
|
+
};
|
|
3274
|
+
smoothY: MotionValue<number>;
|
|
3275
|
+
smoothX: MotionValue<number>;
|
|
3276
|
+
};
|
|
3277
|
+
|
|
3278
|
+
/**
|
|
3279
|
+
* User component - Display user information with avatar and name
|
|
3280
|
+
*
|
|
3281
|
+
* Features:
|
|
3282
|
+
* - Avatar with image, initials, or fallback icon
|
|
3283
|
+
* - Name and description text
|
|
3284
|
+
* - Focusable interaction support
|
|
3285
|
+
* - Customizable styling through classNames
|
|
3286
|
+
* - Responsive design
|
|
3287
|
+
*
|
|
3288
|
+
* @param props - User component properties
|
|
3289
|
+
* @returns JSX element representing a user display
|
|
3290
|
+
*/
|
|
3291
|
+
export declare const User: ForwardRefExoticComponent<UserProps & RefAttributes<HTMLDivElement>>;
|
|
3292
|
+
|
|
3293
|
+
/**
|
|
3294
|
+
* Props interface for the User component
|
|
3295
|
+
*/
|
|
3296
|
+
export declare interface UserProps {
|
|
3297
|
+
/** Name of the user */
|
|
3298
|
+
name?: string;
|
|
3299
|
+
/** Description or subtitle of the user */
|
|
3300
|
+
description?: ReactNode;
|
|
3301
|
+
/** Whether the user component is focusable */
|
|
3302
|
+
isFocusable?: boolean;
|
|
3303
|
+
/** Props to pass to the avatar component */
|
|
3304
|
+
avatarProps?: AvatarProps_2;
|
|
3305
|
+
/** Additional CSS classes to apply */
|
|
3306
|
+
className?: string;
|
|
3307
|
+
/** Custom class names for different slots */
|
|
3308
|
+
classNames?: Partial<Record<"base" | "wrapper" | "name" | "description", string>>;
|
|
3309
|
+
/** Click handler for the user component */
|
|
3310
|
+
onClick?: () => void;
|
|
3311
|
+
/** Test ID for testing frameworks */
|
|
3312
|
+
"data-testid"?: string;
|
|
3313
|
+
}
|
|
3314
|
+
|
|
3315
|
+
/**
|
|
3316
|
+
* Custom hook for easy toast management
|
|
3317
|
+
* Provides convenient methods for showing different types of toasts
|
|
3318
|
+
* @returns Object with toast methods
|
|
3319
|
+
*/
|
|
3320
|
+
export declare const useToast: () => UseToastReturn;
|
|
3321
|
+
|
|
3322
|
+
/**
|
|
3323
|
+
* UseToast hook return type
|
|
3324
|
+
*/
|
|
3325
|
+
declare interface UseToastReturn {
|
|
3326
|
+
toast: (message: string, options?: ToastOptions) => string;
|
|
3327
|
+
success: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
3328
|
+
error: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
3329
|
+
warning: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
3330
|
+
info: (message: string, options?: Omit<ToastOptions, "type">) => string;
|
|
3331
|
+
dismiss: (id: string) => void;
|
|
3332
|
+
dismissAll: () => void;
|
|
3333
|
+
update: (id: string, updates: Partial<ToastItem>) => void;
|
|
3334
|
+
}
|
|
3335
|
+
|
|
3336
|
+
/**
|
|
3337
|
+
* Validation behavior options
|
|
3338
|
+
*/
|
|
3339
|
+
declare type ValidationBehavior = "native" | "aria";
|
|
3340
|
+
|
|
3341
|
+
/**
|
|
3342
|
+
* Validation behavior types
|
|
3343
|
+
*/
|
|
3344
|
+
declare type ValidationBehavior_2 = 'native' | 'aria';
|
|
3345
|
+
|
|
3346
|
+
/**
|
|
3347
|
+
* Custom validation error type
|
|
3348
|
+
*/
|
|
3349
|
+
declare type ValidationError = string | string[];
|
|
3350
|
+
|
|
3351
|
+
/**
|
|
3352
|
+
* Validation error type
|
|
3353
|
+
*/
|
|
3354
|
+
declare type ValidationError_2 = string | string[];
|
|
3355
|
+
|
|
3356
|
+
/**
|
|
3357
|
+
* Validation result interface
|
|
3358
|
+
*/
|
|
3359
|
+
declare interface ValidationResult {
|
|
3360
|
+
/** Indicates whether the field value is valid */
|
|
3361
|
+
isInvalid: boolean;
|
|
3362
|
+
/** Array of validation errors */
|
|
3363
|
+
validationErrors: string[];
|
|
3364
|
+
/** Details about native validation state */
|
|
3365
|
+
validationDetails: {
|
|
3366
|
+
badInput?: boolean;
|
|
3367
|
+
patternMismatch?: boolean;
|
|
3368
|
+
rangeOverflow?: boolean;
|
|
3369
|
+
rangeUnderflow?: boolean;
|
|
3370
|
+
stepMismatch?: boolean;
|
|
3371
|
+
tooLong?: boolean;
|
|
3372
|
+
tooShort?: boolean;
|
|
3373
|
+
typeMismatch?: boolean;
|
|
3374
|
+
valueMissing?: boolean;
|
|
3375
|
+
valid?: boolean;
|
|
3376
|
+
};
|
|
3377
|
+
}
|
|
3378
|
+
|
|
3379
|
+
/**
|
|
3380
|
+
* Validation result interface
|
|
3381
|
+
*/
|
|
3382
|
+
declare interface ValidationResult_2 {
|
|
3383
|
+
isInvalid: boolean;
|
|
3384
|
+
validationErrors: string[];
|
|
3385
|
+
validationDetails: Record<string, any>;
|
|
3386
|
+
}
|
|
3387
|
+
|
|
3388
|
+
export { Variants }
|
|
3389
|
+
|
|
3390
|
+
export declare interface ViewportConfig {
|
|
3391
|
+
once?: boolean;
|
|
3392
|
+
margin?: string;
|
|
3393
|
+
amount?: number | 'some' | 'all';
|
|
3394
|
+
}
|
|
3395
|
+
|
|
3396
|
+
export { }
|