@brickslab./ui-web 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +15310 -0
- package/dist/index.d.cts +2140 -0
- package/dist/index.d.ts +2140 -0
- package/dist/index.js +15134 -0
- package/package.json +37 -0
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,2140 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React, { ReactNode, ElementType, CSSProperties } from 'react';
|
|
3
|
+
|
|
4
|
+
interface HeadingProps {
|
|
5
|
+
title: string;
|
|
6
|
+
level?: 1 | 2 | 3 | 4 | 5 | 6;
|
|
7
|
+
align?: "left" | "center" | "right";
|
|
8
|
+
opacity?: number;
|
|
9
|
+
blurPx?: number;
|
|
10
|
+
tone?: "brand" | "muted";
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
declare function Heading({ title, level, align, opacity, blurPx, tone, }: HeadingProps): react_jsx_runtime.JSX.Element;
|
|
14
|
+
|
|
15
|
+
interface TextProps {
|
|
16
|
+
texte: string;
|
|
17
|
+
variant?: "body-sm" | "body-md" | "body-lg" | "caption";
|
|
18
|
+
align?: "left" | "center" | "right";
|
|
19
|
+
tone?: "default" | "muted" | "brand";
|
|
20
|
+
opacity?: number;
|
|
21
|
+
blurPx?: number;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
declare function Text({ texte, variant, align, tone, opacity, blurPx, }: TextProps): react_jsx_runtime.JSX.Element;
|
|
25
|
+
|
|
26
|
+
interface TextBlockProps {
|
|
27
|
+
content: string;
|
|
28
|
+
align?: "left" | "center" | "right";
|
|
29
|
+
tone?: "default" | "muted" | "brand";
|
|
30
|
+
maxWidth?: string;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
declare function TextBlock({ content, align, tone, maxWidth, }: TextBlockProps): react_jsx_runtime.JSX.Element;
|
|
34
|
+
|
|
35
|
+
interface TextCardProps {
|
|
36
|
+
cardtitle?: string;
|
|
37
|
+
texte: string;
|
|
38
|
+
variant?: "default" | "opaque" | "blurred";
|
|
39
|
+
opacity?: number;
|
|
40
|
+
blurPx?: number;
|
|
41
|
+
width?: number;
|
|
42
|
+
height?: number;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
declare function TextCard({ cardtitle, texte, variant, opacity, blurPx, width, height, }: TextCardProps): react_jsx_runtime.JSX.Element;
|
|
46
|
+
|
|
47
|
+
interface IntroCardProps {
|
|
48
|
+
title: string;
|
|
49
|
+
description?: string;
|
|
50
|
+
highlight?: string;
|
|
51
|
+
cta?: {
|
|
52
|
+
label: string;
|
|
53
|
+
href: string;
|
|
54
|
+
};
|
|
55
|
+
background?: string;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
declare function IntroCard({ title, description, highlight, cta, background, }: IntroCardProps): react_jsx_runtime.JSX.Element;
|
|
59
|
+
|
|
60
|
+
interface BentoCardProps {
|
|
61
|
+
name: string;
|
|
62
|
+
description?: string;
|
|
63
|
+
Icon?: React.ElementType;
|
|
64
|
+
href?: string;
|
|
65
|
+
cta?: string;
|
|
66
|
+
background?: React.ReactNode;
|
|
67
|
+
className?: string;
|
|
68
|
+
style?: React.CSSProperties;
|
|
69
|
+
as?: React.ElementType;
|
|
70
|
+
onClick?: () => void;
|
|
71
|
+
target?: "_self" | "_blank";
|
|
72
|
+
rel?: string;
|
|
73
|
+
interactive?: boolean;
|
|
74
|
+
hoverEffect?: "lift" | "glow" | "none";
|
|
75
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
76
|
+
colSpan?: number;
|
|
77
|
+
rowSpan?: number;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
declare function BentoCard({ name, description, Icon, href, cta, background, className, style, as: Component, onClick, target, rel, interactive, hoverEffect, reducedMotion, colSpan, rowSpan, }: BentoCardProps): react_jsx_runtime.JSX.Element;
|
|
81
|
+
|
|
82
|
+
interface SocialPostCardProps {
|
|
83
|
+
platform?: "x" | "linkedin" | "custom";
|
|
84
|
+
author: {
|
|
85
|
+
name: string;
|
|
86
|
+
handle?: string;
|
|
87
|
+
avatarUrl?: string;
|
|
88
|
+
url?: string;
|
|
89
|
+
};
|
|
90
|
+
content: string;
|
|
91
|
+
date?: string | Date;
|
|
92
|
+
media?: {
|
|
93
|
+
type: "image" | "video";
|
|
94
|
+
src: string;
|
|
95
|
+
alt?: string;
|
|
96
|
+
}[];
|
|
97
|
+
metrics?: {
|
|
98
|
+
likes?: number;
|
|
99
|
+
reposts?: number;
|
|
100
|
+
replies?: number;
|
|
101
|
+
};
|
|
102
|
+
href?: string;
|
|
103
|
+
className?: string;
|
|
104
|
+
variant?: "glass" | "solid";
|
|
105
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
declare function SocialPostCard({ platform, author, content, date, media, metrics, href, className, variant, reducedMotion, }: SocialPostCardProps): react_jsx_runtime.JSX.Element;
|
|
109
|
+
|
|
110
|
+
interface AppShellProps {
|
|
111
|
+
header?: React.ReactNode;
|
|
112
|
+
sidebar?: React.ReactNode;
|
|
113
|
+
footer?: React.ReactNode;
|
|
114
|
+
children: React.ReactNode;
|
|
115
|
+
sidebarWidth?: number;
|
|
116
|
+
headerHeight?: number;
|
|
117
|
+
footerHeight?: number;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
declare function AppShell({ header, sidebar, footer, children, sidebarWidth, headerHeight, footerHeight, }: AppShellProps): react_jsx_runtime.JSX.Element;
|
|
121
|
+
|
|
122
|
+
interface HeaderBarProps {
|
|
123
|
+
logo?: React.ReactNode;
|
|
124
|
+
nav?: React.ReactNode;
|
|
125
|
+
actions?: React.ReactNode;
|
|
126
|
+
height?: number;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
declare function HeaderBar({ logo, nav, actions, height }: HeaderBarProps): react_jsx_runtime.JSX.Element;
|
|
130
|
+
|
|
131
|
+
interface SidebarNavItem {
|
|
132
|
+
label: string;
|
|
133
|
+
href: string;
|
|
134
|
+
}
|
|
135
|
+
interface SidebarNavSection {
|
|
136
|
+
title: string;
|
|
137
|
+
items: SidebarNavItem[];
|
|
138
|
+
}
|
|
139
|
+
interface SidebarNavProps {
|
|
140
|
+
sections: SidebarNavSection[];
|
|
141
|
+
activePath?: string;
|
|
142
|
+
width?: number | string;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
declare function SidebarNav({ sections, activePath, width }: SidebarNavProps): react_jsx_runtime.JSX.Element;
|
|
146
|
+
|
|
147
|
+
interface SidebarItem {
|
|
148
|
+
label: string;
|
|
149
|
+
href: string;
|
|
150
|
+
}
|
|
151
|
+
interface SidebarSection {
|
|
152
|
+
title: string;
|
|
153
|
+
items: SidebarItem[];
|
|
154
|
+
}
|
|
155
|
+
interface SidebarProps {
|
|
156
|
+
sections: SidebarSection[];
|
|
157
|
+
activePath?: string;
|
|
158
|
+
width?: number;
|
|
159
|
+
topOffset?: number;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
declare function Sidebar({ sections, activePath, width, topOffset, }: SidebarProps): react_jsx_runtime.JSX.Element;
|
|
163
|
+
|
|
164
|
+
interface TopbarProps {
|
|
165
|
+
logo?: ReactNode;
|
|
166
|
+
title?: string;
|
|
167
|
+
search?: ReactNode;
|
|
168
|
+
actions?: ReactNode;
|
|
169
|
+
height?: number;
|
|
170
|
+
onBurgerClick?: () => void;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
declare function Topbar({ logo, title, search, actions, height, onBurgerClick, }: TopbarProps): react_jsx_runtime.JSX.Element;
|
|
174
|
+
|
|
175
|
+
interface BurgerMenuSection {
|
|
176
|
+
title: string;
|
|
177
|
+
items: BurgerMenuItemType[];
|
|
178
|
+
}
|
|
179
|
+
interface BurgerMenuItemType {
|
|
180
|
+
label: string;
|
|
181
|
+
href: string;
|
|
182
|
+
onClick?: () => void;
|
|
183
|
+
}
|
|
184
|
+
interface BurgerMenuProps {
|
|
185
|
+
isOpen: boolean;
|
|
186
|
+
onClose: () => void;
|
|
187
|
+
sections: BurgerMenuSection[];
|
|
188
|
+
activePath?: string;
|
|
189
|
+
width?: number;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
declare function BurgerMenu({ isOpen, onClose, sections, activePath, width, }: BurgerMenuProps): react_jsx_runtime.JSX.Element | null;
|
|
193
|
+
|
|
194
|
+
interface TopNavItem {
|
|
195
|
+
label: string;
|
|
196
|
+
href: string;
|
|
197
|
+
}
|
|
198
|
+
interface TopNavProps {
|
|
199
|
+
items: TopNavItem[];
|
|
200
|
+
activePath?: string;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
declare function TopNav({ items, activePath }: TopNavProps): react_jsx_runtime.JSX.Element;
|
|
204
|
+
|
|
205
|
+
interface FooterBarProps {
|
|
206
|
+
left?: React.ReactNode;
|
|
207
|
+
center?: React.ReactNode;
|
|
208
|
+
right?: React.ReactNode;
|
|
209
|
+
height?: number;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
declare function FooterBar({ left, center, right, height }: FooterBarProps): react_jsx_runtime.JSX.Element;
|
|
213
|
+
|
|
214
|
+
interface BentoGridProps {
|
|
215
|
+
children: React.ReactNode;
|
|
216
|
+
className?: string;
|
|
217
|
+
style?: React.CSSProperties;
|
|
218
|
+
as?: React.ElementType;
|
|
219
|
+
columns?: number | "auto";
|
|
220
|
+
minWidth?: number | string;
|
|
221
|
+
gap?: number | string;
|
|
222
|
+
dense?: boolean;
|
|
223
|
+
autoRows?: string;
|
|
224
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
declare const BentoGridContext: React.Context<{
|
|
228
|
+
reducedMotion: boolean;
|
|
229
|
+
}>;
|
|
230
|
+
declare function BentoGrid({ children, className, style, as: Component, columns, minWidth, gap, dense, autoRows, reducedMotion, }: BentoGridProps): react_jsx_runtime.JSX.Element;
|
|
231
|
+
|
|
232
|
+
interface LogoMarkProps {
|
|
233
|
+
size?: "sm" | "md" | "lg";
|
|
234
|
+
variant?: "full" | "icon";
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
declare function LogoMark({ size, variant }: LogoMarkProps): react_jsx_runtime.JSX.Element;
|
|
238
|
+
|
|
239
|
+
interface SearchBarProps {
|
|
240
|
+
value: string;
|
|
241
|
+
onChange: (value: string) => void;
|
|
242
|
+
placeholder?: string;
|
|
243
|
+
onSubmit?: () => void;
|
|
244
|
+
onClear?: () => void;
|
|
245
|
+
elevated?: boolean;
|
|
246
|
+
variant?: "default" | "glass";
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
declare function SearchBar({ value, onChange, placeholder, onSubmit, onClear, elevated, variant }: SearchBarProps): react_jsx_runtime.JSX.Element;
|
|
250
|
+
|
|
251
|
+
interface SearchResult {
|
|
252
|
+
label: string;
|
|
253
|
+
href: string;
|
|
254
|
+
description?: string;
|
|
255
|
+
section?: string;
|
|
256
|
+
type?: "web" | "mobile";
|
|
257
|
+
}
|
|
258
|
+
interface SearchResultsProps {
|
|
259
|
+
results: SearchResult[];
|
|
260
|
+
query: string;
|
|
261
|
+
onSelect?: (result: SearchResult) => void;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
declare function SearchResults({ results, query, onSelect }: SearchResultsProps): react_jsx_runtime.JSX.Element | null;
|
|
265
|
+
|
|
266
|
+
interface MenuTreeItem {
|
|
267
|
+
label: string;
|
|
268
|
+
href?: string;
|
|
269
|
+
children?: MenuTreeItem[];
|
|
270
|
+
}
|
|
271
|
+
interface MenuTreeProps {
|
|
272
|
+
items: MenuTreeItem[];
|
|
273
|
+
activePath?: string;
|
|
274
|
+
level?: number;
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
declare function MenuTree({ items, activePath, level }: MenuTreeProps): react_jsx_runtime.JSX.Element;
|
|
278
|
+
|
|
279
|
+
interface BreadcrumbItem {
|
|
280
|
+
label: string;
|
|
281
|
+
href?: string;
|
|
282
|
+
}
|
|
283
|
+
interface BreadcrumbProps {
|
|
284
|
+
items: BreadcrumbItem[];
|
|
285
|
+
separator?: string;
|
|
286
|
+
}
|
|
287
|
+
|
|
288
|
+
declare function Breadcrumb({ items, separator }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
|
|
289
|
+
|
|
290
|
+
interface PropDef {
|
|
291
|
+
name: string;
|
|
292
|
+
type: string;
|
|
293
|
+
default?: string;
|
|
294
|
+
required?: boolean;
|
|
295
|
+
description: string;
|
|
296
|
+
}
|
|
297
|
+
interface PropsTableProps {
|
|
298
|
+
props: PropDef[];
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
declare function PropsTable({ props }: {
|
|
302
|
+
props: PropDef[];
|
|
303
|
+
}): react_jsx_runtime.JSX.Element;
|
|
304
|
+
|
|
305
|
+
interface CodeBlockProps {
|
|
306
|
+
code: string;
|
|
307
|
+
language?: string;
|
|
308
|
+
variant?: "modern" | "simple";
|
|
309
|
+
filename?: string;
|
|
310
|
+
}
|
|
311
|
+
|
|
312
|
+
declare function CodeBlock({ code, language, variant, filename }: CodeBlockProps): react_jsx_runtime.JSX.Element;
|
|
313
|
+
|
|
314
|
+
interface CopyButtonProps {
|
|
315
|
+
onCopy: () => void;
|
|
316
|
+
copied?: boolean;
|
|
317
|
+
label?: string;
|
|
318
|
+
copiedLabel?: string;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
declare function CopyButton({ onCopy, copied, label, copiedLabel, }: CopyButtonProps): react_jsx_runtime.JSX.Element;
|
|
322
|
+
|
|
323
|
+
interface LinkListItem {
|
|
324
|
+
label: string;
|
|
325
|
+
href: string;
|
|
326
|
+
description?: string;
|
|
327
|
+
}
|
|
328
|
+
interface LinkListProps {
|
|
329
|
+
links: LinkListItem[];
|
|
330
|
+
title?: string;
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
declare function LinkList({ links, title }: LinkListProps): react_jsx_runtime.JSX.Element;
|
|
334
|
+
|
|
335
|
+
interface SectionGalleryProps {
|
|
336
|
+
title?: string;
|
|
337
|
+
items: React.ReactNode[];
|
|
338
|
+
columns?: 1 | 2 | 3 | 4;
|
|
339
|
+
gap?: number;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
declare function SectionGallery({ title, items, columns, gap }: SectionGalleryProps): react_jsx_runtime.JSX.Element;
|
|
343
|
+
|
|
344
|
+
interface SectionExampleCardProps {
|
|
345
|
+
title: string;
|
|
346
|
+
description?: string;
|
|
347
|
+
preview?: React.ReactNode;
|
|
348
|
+
href?: string;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
declare function SectionExampleCard({ title, description, preview, href, }: SectionExampleCardProps): react_jsx_runtime.JSX.Element;
|
|
352
|
+
|
|
353
|
+
interface ComponentDetailPanelProps {
|
|
354
|
+
name: string;
|
|
355
|
+
description?: string;
|
|
356
|
+
preview?: React.ReactNode;
|
|
357
|
+
code?: string;
|
|
358
|
+
badge?: string;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
declare function ComponentDetailPanel({ name, description, preview, code, badge, }: ComponentDetailPanelProps): react_jsx_runtime.JSX.Element;
|
|
362
|
+
|
|
363
|
+
interface ComponentCardProps {
|
|
364
|
+
label: string;
|
|
365
|
+
section: string;
|
|
366
|
+
description: string;
|
|
367
|
+
href: string;
|
|
368
|
+
type?: "web" | "mobile";
|
|
369
|
+
preview?: React.ReactNode;
|
|
370
|
+
isNew?: boolean;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
declare function ComponentCard({ label, section, description, href, type, preview, isNew, }: ComponentCardProps): react_jsx_runtime.JSX.Element;
|
|
374
|
+
|
|
375
|
+
type DocPageHeaderBadgeVariant = "default" | "brand" | "success" | "warning" | "error";
|
|
376
|
+
interface DocPageHeaderBadge {
|
|
377
|
+
label: string;
|
|
378
|
+
variant?: DocPageHeaderBadgeVariant;
|
|
379
|
+
}
|
|
380
|
+
interface DocPageHeaderProps {
|
|
381
|
+
name: string;
|
|
382
|
+
description: string;
|
|
383
|
+
packageName?: string;
|
|
384
|
+
badges?: DocPageHeaderBadge[];
|
|
385
|
+
}
|
|
386
|
+
|
|
387
|
+
declare function DocPageHeader({ name, description, packageName, badges, }: DocPageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
388
|
+
|
|
389
|
+
interface PageHeroStat {
|
|
390
|
+
value: string | number;
|
|
391
|
+
label: string;
|
|
392
|
+
color?: string;
|
|
393
|
+
}
|
|
394
|
+
interface PageHeroProps {
|
|
395
|
+
title: string;
|
|
396
|
+
subtitle?: string;
|
|
397
|
+
eyebrow?: string;
|
|
398
|
+
stats?: PageHeroStat[];
|
|
399
|
+
children?: React.ReactNode;
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
declare function PageHero({ title, subtitle, eyebrow, stats, children }: PageHeroProps): react_jsx_runtime.JSX.Element;
|
|
403
|
+
|
|
404
|
+
interface CarouselItem {
|
|
405
|
+
src: string;
|
|
406
|
+
alt: string;
|
|
407
|
+
caption?: string;
|
|
408
|
+
}
|
|
409
|
+
interface MediaCarouselProps {
|
|
410
|
+
items: CarouselItem[];
|
|
411
|
+
currentIndex: number;
|
|
412
|
+
onNext: () => void;
|
|
413
|
+
onPrev: () => void;
|
|
414
|
+
showDots?: boolean;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
declare function MediaCarousel({ items, currentIndex, onNext, onPrev, showDots, }: MediaCarouselProps): react_jsx_runtime.JSX.Element;
|
|
418
|
+
|
|
419
|
+
interface MarqueeProps {
|
|
420
|
+
children: React.ReactNode;
|
|
421
|
+
className?: string;
|
|
422
|
+
reverse?: boolean;
|
|
423
|
+
pauseOnHover?: boolean;
|
|
424
|
+
vertical?: boolean;
|
|
425
|
+
repeat?: number;
|
|
426
|
+
speed?: number;
|
|
427
|
+
fadeEdges?: boolean;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
declare function Marquee({ children, className, reverse, pauseOnHover, vertical, repeat, speed, fadeEdges, }: MarqueeProps): react_jsx_runtime.JSX.Element;
|
|
431
|
+
|
|
432
|
+
interface AnimatedListProps {
|
|
433
|
+
items: React.ReactNode[];
|
|
434
|
+
className?: string;
|
|
435
|
+
itemClassName?: string;
|
|
436
|
+
delay?: number;
|
|
437
|
+
stagger?: number;
|
|
438
|
+
duration?: number;
|
|
439
|
+
direction?: "up" | "down";
|
|
440
|
+
loop?: boolean;
|
|
441
|
+
loopDelay?: number;
|
|
442
|
+
maxVisible?: number;
|
|
443
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
444
|
+
onCycle?: () => void;
|
|
445
|
+
}
|
|
446
|
+
|
|
447
|
+
declare function AnimatedList({ items, className, itemClassName, delay, stagger, duration, direction, loop, loopDelay, maxVisible, reducedMotion, onCycle, }: AnimatedListProps): react_jsx_runtime.JSX.Element;
|
|
448
|
+
|
|
449
|
+
interface AnimatedStackProps {
|
|
450
|
+
items: React.ReactNode[];
|
|
451
|
+
className?: string;
|
|
452
|
+
itemClassName?: string;
|
|
453
|
+
maxVisible?: number;
|
|
454
|
+
stackOffset?: number;
|
|
455
|
+
scaleDecrement?: number;
|
|
456
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
457
|
+
}
|
|
458
|
+
|
|
459
|
+
declare function AnimatedStack({ items, className, itemClassName, maxVisible, stackOffset, scaleDecrement, reducedMotion, }: AnimatedStackProps): react_jsx_runtime.JSX.Element;
|
|
460
|
+
|
|
461
|
+
interface ProjectLink {
|
|
462
|
+
label: string;
|
|
463
|
+
href: string;
|
|
464
|
+
}
|
|
465
|
+
interface ProjectDescriptionPanelProps {
|
|
466
|
+
title: string;
|
|
467
|
+
description: string;
|
|
468
|
+
tags?: string[];
|
|
469
|
+
links?: ProjectLink[];
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
declare function ProjectDescriptionPanel({ title, description, tags, links, }: ProjectDescriptionPanelProps): react_jsx_runtime.JSX.Element;
|
|
473
|
+
|
|
474
|
+
type ButtonVariant = "primary" | "secondary" | "ghost" | "danger";
|
|
475
|
+
type ButtonSize = "sm" | "md" | "lg";
|
|
476
|
+
interface ButtonProps {
|
|
477
|
+
variant?: ButtonVariant;
|
|
478
|
+
size?: ButtonSize;
|
|
479
|
+
disabled?: boolean;
|
|
480
|
+
isLoading?: boolean;
|
|
481
|
+
leftIcon?: React.ReactNode;
|
|
482
|
+
rightIcon?: React.ReactNode;
|
|
483
|
+
fullWidth?: boolean;
|
|
484
|
+
onClick?: () => void;
|
|
485
|
+
type?: "button" | "submit" | "reset";
|
|
486
|
+
children: React.ReactNode;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
declare function Button({ variant, size, disabled, isLoading, leftIcon, rightIcon, fullWidth, onClick, type, children, }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
490
|
+
|
|
491
|
+
type InputSize = "sm" | "md" | "lg";
|
|
492
|
+
interface InputProps {
|
|
493
|
+
value: string;
|
|
494
|
+
onChange: (value: string) => void;
|
|
495
|
+
type?: "text" | "email" | "password" | "number" | "search" | "url";
|
|
496
|
+
label?: string;
|
|
497
|
+
placeholder?: string;
|
|
498
|
+
helperText?: string;
|
|
499
|
+
errorText?: string;
|
|
500
|
+
disabled?: boolean;
|
|
501
|
+
readOnly?: boolean;
|
|
502
|
+
leftIcon?: React.ReactNode;
|
|
503
|
+
rightIcon?: React.ReactNode;
|
|
504
|
+
size?: InputSize;
|
|
505
|
+
fullWidth?: boolean;
|
|
506
|
+
id?: string;
|
|
507
|
+
name?: string;
|
|
508
|
+
required?: boolean;
|
|
509
|
+
autoFocus?: boolean;
|
|
510
|
+
maxLength?: number;
|
|
511
|
+
}
|
|
512
|
+
|
|
513
|
+
declare function Input({ value, onChange, type, label, placeholder, helperText, errorText, disabled, readOnly, leftIcon, rightIcon, size, fullWidth, id, name, required, autoFocus, maxLength, }: InputProps): react_jsx_runtime.JSX.Element;
|
|
514
|
+
|
|
515
|
+
type SelectSize = "sm" | "md" | "lg";
|
|
516
|
+
interface SelectOption {
|
|
517
|
+
value: string;
|
|
518
|
+
label: string;
|
|
519
|
+
disabled?: boolean;
|
|
520
|
+
}
|
|
521
|
+
interface SelectProps {
|
|
522
|
+
value: string;
|
|
523
|
+
onChange: (value: string) => void;
|
|
524
|
+
options: SelectOption[];
|
|
525
|
+
label?: string;
|
|
526
|
+
placeholder?: string;
|
|
527
|
+
helperText?: string;
|
|
528
|
+
errorText?: string;
|
|
529
|
+
disabled?: boolean;
|
|
530
|
+
size?: SelectSize;
|
|
531
|
+
fullWidth?: boolean;
|
|
532
|
+
id?: string;
|
|
533
|
+
name?: string;
|
|
534
|
+
required?: boolean;
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
declare function Select({ value, onChange, options, label, placeholder, helperText, errorText, disabled, size, fullWidth, id, name, required, }: SelectProps): react_jsx_runtime.JSX.Element;
|
|
538
|
+
|
|
539
|
+
type TextareaSize = "sm" | "md" | "lg";
|
|
540
|
+
type TextareaResize = "none" | "vertical" | "both";
|
|
541
|
+
interface TextareaProps {
|
|
542
|
+
value: string;
|
|
543
|
+
onChange: (value: string) => void;
|
|
544
|
+
label?: string;
|
|
545
|
+
placeholder?: string;
|
|
546
|
+
helperText?: string;
|
|
547
|
+
errorText?: string;
|
|
548
|
+
disabled?: boolean;
|
|
549
|
+
readOnly?: boolean;
|
|
550
|
+
size?: TextareaSize;
|
|
551
|
+
fullWidth?: boolean;
|
|
552
|
+
id?: string;
|
|
553
|
+
name?: string;
|
|
554
|
+
required?: boolean;
|
|
555
|
+
rows?: number;
|
|
556
|
+
maxLength?: number;
|
|
557
|
+
resize?: TextareaResize;
|
|
558
|
+
autoResize?: boolean;
|
|
559
|
+
}
|
|
560
|
+
|
|
561
|
+
declare function Textarea({ value, onChange, label, placeholder, helperText, errorText, disabled, readOnly, size, fullWidth, id, name, required, rows, maxLength, resize, autoResize, }: TextareaProps): react_jsx_runtime.JSX.Element;
|
|
562
|
+
|
|
563
|
+
type TooltipPosition = "top" | "bottom" | "left" | "right";
|
|
564
|
+
interface TooltipProps {
|
|
565
|
+
content: React.ReactNode;
|
|
566
|
+
children: React.ReactNode;
|
|
567
|
+
position?: TooltipPosition;
|
|
568
|
+
delay?: boolean;
|
|
569
|
+
maxWidth?: number;
|
|
570
|
+
disabled?: boolean;
|
|
571
|
+
}
|
|
572
|
+
|
|
573
|
+
declare function Tooltip({ content, children, position, delay, maxWidth, disabled, }: TooltipProps): react_jsx_runtime.JSX.Element;
|
|
574
|
+
|
|
575
|
+
type AlertVariant = "info" | "success" | "warning" | "error";
|
|
576
|
+
interface AlertProps {
|
|
577
|
+
variant?: AlertVariant;
|
|
578
|
+
title?: string;
|
|
579
|
+
children: React.ReactNode;
|
|
580
|
+
dismissible?: boolean;
|
|
581
|
+
onDismiss?: () => void;
|
|
582
|
+
icon?: boolean;
|
|
583
|
+
fullWidth?: boolean;
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
declare function Alert({ variant, title, children, dismissible, onDismiss, icon, fullWidth, }: AlertProps): react_jsx_runtime.JSX.Element;
|
|
587
|
+
|
|
588
|
+
type BadgeVariant = "default" | "info" | "success" | "warning" | "error";
|
|
589
|
+
type BadgeSize = "sm" | "md" | "lg";
|
|
590
|
+
interface BadgeProps {
|
|
591
|
+
variant?: BadgeVariant;
|
|
592
|
+
size?: BadgeSize;
|
|
593
|
+
children?: React.ReactNode;
|
|
594
|
+
dot?: boolean;
|
|
595
|
+
outlined?: boolean;
|
|
596
|
+
max?: number;
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
declare function Badge({ variant, size, children, dot, outlined, max, }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
600
|
+
|
|
601
|
+
type SpinnerSize = "sm" | "md" | "lg" | "xl";
|
|
602
|
+
type SpinnerVariant = "default" | "brand" | "success" | "warning" | "error" | "white";
|
|
603
|
+
type SpinnerSpeed = "slow" | "normal" | "fast";
|
|
604
|
+
interface SpinnerProps {
|
|
605
|
+
size?: SpinnerSize;
|
|
606
|
+
variant?: SpinnerVariant;
|
|
607
|
+
speed?: SpinnerSpeed;
|
|
608
|
+
label?: string;
|
|
609
|
+
}
|
|
610
|
+
|
|
611
|
+
declare function Spinner({ size, variant, speed, label, }: SpinnerProps): react_jsx_runtime.JSX.Element;
|
|
612
|
+
|
|
613
|
+
type CheckboxSize = "sm" | "md" | "lg";
|
|
614
|
+
interface CheckboxProps {
|
|
615
|
+
checked?: boolean;
|
|
616
|
+
defaultChecked?: boolean;
|
|
617
|
+
onChange?: (checked: boolean) => void;
|
|
618
|
+
label?: React.ReactNode;
|
|
619
|
+
disabled?: boolean;
|
|
620
|
+
size?: CheckboxSize;
|
|
621
|
+
id?: string;
|
|
622
|
+
name?: string;
|
|
623
|
+
value?: string;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
declare function Checkbox({ checked, defaultChecked, onChange, label, disabled, size, id, name, value, }: CheckboxProps): react_jsx_runtime.JSX.Element;
|
|
627
|
+
|
|
628
|
+
type RadioSize = "sm" | "md" | "lg";
|
|
629
|
+
interface RadioProps {
|
|
630
|
+
value: string;
|
|
631
|
+
checked?: boolean;
|
|
632
|
+
onChange?: (value: string) => void;
|
|
633
|
+
label?: React.ReactNode;
|
|
634
|
+
name?: string;
|
|
635
|
+
disabled?: boolean;
|
|
636
|
+
size?: RadioSize;
|
|
637
|
+
id?: string;
|
|
638
|
+
}
|
|
639
|
+
interface RadioGroupProps {
|
|
640
|
+
name: string;
|
|
641
|
+
value?: string;
|
|
642
|
+
onChange?: (value: string) => void;
|
|
643
|
+
children: React.ReactNode;
|
|
644
|
+
direction?: "vertical" | "horizontal";
|
|
645
|
+
gap?: number;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
declare function Radio({ value, checked, onChange, label, name, disabled, size, id, }: RadioProps): react_jsx_runtime.JSX.Element;
|
|
649
|
+
declare function RadioGroup({ name, value, onChange, children, direction, gap, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
|
|
650
|
+
|
|
651
|
+
type TabsVariant = "underline" | "pills" | "boxed";
|
|
652
|
+
type TabsSize = "sm" | "md" | "lg";
|
|
653
|
+
interface TabItem {
|
|
654
|
+
value: string;
|
|
655
|
+
label: React.ReactNode;
|
|
656
|
+
icon?: React.ReactNode;
|
|
657
|
+
disabled?: boolean;
|
|
658
|
+
}
|
|
659
|
+
interface TabsProps {
|
|
660
|
+
tabs: TabItem[];
|
|
661
|
+
value: string;
|
|
662
|
+
onChange: (value: string) => void;
|
|
663
|
+
variant?: TabsVariant;
|
|
664
|
+
size?: TabsSize;
|
|
665
|
+
fullWidth?: boolean;
|
|
666
|
+
}
|
|
667
|
+
interface TabPanelProps {
|
|
668
|
+
value: string;
|
|
669
|
+
activeValue: string;
|
|
670
|
+
children: React.ReactNode;
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
declare function Tabs({ tabs, value, onChange, variant, size, fullWidth, }: TabsProps): react_jsx_runtime.JSX.Element;
|
|
674
|
+
declare function TabPanel({ value, activeValue, children }: TabPanelProps): react_jsx_runtime.JSX.Element | null;
|
|
675
|
+
|
|
676
|
+
type AccordionVariant = "bordered" | "separated" | "ghost";
|
|
677
|
+
type AccordionSize = "sm" | "md" | "lg";
|
|
678
|
+
interface AccordionProps {
|
|
679
|
+
children: React.ReactNode;
|
|
680
|
+
variant?: AccordionVariant;
|
|
681
|
+
size?: AccordionSize;
|
|
682
|
+
}
|
|
683
|
+
interface AccordionItemProps {
|
|
684
|
+
title: React.ReactNode;
|
|
685
|
+
children: React.ReactNode;
|
|
686
|
+
open?: boolean;
|
|
687
|
+
onToggle?: (open: boolean) => void;
|
|
688
|
+
disabled?: boolean;
|
|
689
|
+
icon?: React.ReactNode;
|
|
690
|
+
}
|
|
691
|
+
|
|
692
|
+
declare function Accordion({ children, variant, size, }: AccordionProps): react_jsx_runtime.JSX.Element;
|
|
693
|
+
declare function AccordionItem({ title, children, open, onToggle, disabled, icon, }: AccordionItemProps): react_jsx_runtime.JSX.Element;
|
|
694
|
+
|
|
695
|
+
interface ToggleSwitchProps {
|
|
696
|
+
checked: boolean;
|
|
697
|
+
onChange: (checked: boolean) => void;
|
|
698
|
+
label?: string;
|
|
699
|
+
disabled?: boolean;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
declare function ToggleSwitch({ checked, onChange, label, disabled }: ToggleSwitchProps): react_jsx_runtime.JSX.Element;
|
|
703
|
+
|
|
704
|
+
interface ThemeToggleProps {
|
|
705
|
+
onThemeChange?: (theme: "light" | "dark") => void;
|
|
706
|
+
lightLabel?: string;
|
|
707
|
+
darkLabel?: string;
|
|
708
|
+
storageKey?: string;
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
declare function ThemeToggle({ onThemeChange, lightLabel, darkLabel, storageKey, }: ThemeToggleProps): react_jsx_runtime.JSX.Element | null;
|
|
712
|
+
|
|
713
|
+
type ProgressBarColorScheme = "brand" | "green" | "amber" | "red";
|
|
714
|
+
type ProgressBarSize = "sm" | "md";
|
|
715
|
+
interface ProgressBarProps {
|
|
716
|
+
value: number;
|
|
717
|
+
max?: number;
|
|
718
|
+
label?: string;
|
|
719
|
+
colorScheme?: ProgressBarColorScheme;
|
|
720
|
+
size?: ProgressBarSize;
|
|
721
|
+
showValue?: boolean;
|
|
722
|
+
animate?: boolean;
|
|
723
|
+
duration?: number;
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
declare function ProgressBar({ value, max, label, colorScheme, size, showValue, animate, duration, }: ProgressBarProps): react_jsx_runtime.JSX.Element;
|
|
727
|
+
|
|
728
|
+
type CalloutVariant = "info" | "warning" | "tip" | "danger";
|
|
729
|
+
interface CalloutProps {
|
|
730
|
+
variant?: CalloutVariant;
|
|
731
|
+
title?: string;
|
|
732
|
+
children?: React.ReactNode;
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
declare function Callout({ variant, title, children }: CalloutProps): react_jsx_runtime.JSX.Element;
|
|
736
|
+
|
|
737
|
+
interface TagChipProps {
|
|
738
|
+
label: string;
|
|
739
|
+
variant?: "default" | "brand" | "muted";
|
|
740
|
+
size?: "sm" | "md";
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
declare function TagChip({ label, variant, size }: TagChipProps): react_jsx_runtime.JSX.Element;
|
|
744
|
+
|
|
745
|
+
type StatusVariant = "active" | "inactive" | "pending" | "error";
|
|
746
|
+
interface StatusLabelProps {
|
|
747
|
+
status: StatusVariant;
|
|
748
|
+
label?: string;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
declare function StatusLabel({ status, label }: StatusLabelProps): react_jsx_runtime.JSX.Element;
|
|
752
|
+
|
|
753
|
+
interface MediaImageProps {
|
|
754
|
+
src: string;
|
|
755
|
+
alt: string;
|
|
756
|
+
width?: number | string;
|
|
757
|
+
height?: number | string;
|
|
758
|
+
objectFit?: "cover" | "contain" | "fill" | "none";
|
|
759
|
+
borderRadius?: string;
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
declare function MediaImage({ src, alt, width, height, objectFit, borderRadius, }: MediaImageProps): react_jsx_runtime.JSX.Element;
|
|
763
|
+
|
|
764
|
+
interface AvatarCirclesProps {
|
|
765
|
+
avatarUrls: {
|
|
766
|
+
imageUrl: string;
|
|
767
|
+
profileUrl?: string;
|
|
768
|
+
}[];
|
|
769
|
+
numPeople?: number;
|
|
770
|
+
className?: string;
|
|
771
|
+
size?: number;
|
|
772
|
+
overlap?: number;
|
|
773
|
+
max?: number;
|
|
774
|
+
showTooltip?: boolean;
|
|
775
|
+
}
|
|
776
|
+
|
|
777
|
+
declare function AvatarCircles({ avatarUrls, numPeople, className, size, overlap, max, showTooltip, }: AvatarCirclesProps): react_jsx_runtime.JSX.Element;
|
|
778
|
+
|
|
779
|
+
interface ConfettiProps {
|
|
780
|
+
particleCount?: number;
|
|
781
|
+
angle?: number;
|
|
782
|
+
spread?: number;
|
|
783
|
+
startVelocity?: number;
|
|
784
|
+
decay?: number;
|
|
785
|
+
gravity?: number;
|
|
786
|
+
drift?: number;
|
|
787
|
+
flat?: boolean;
|
|
788
|
+
ticks?: number;
|
|
789
|
+
origin?: {
|
|
790
|
+
x: number;
|
|
791
|
+
y: number;
|
|
792
|
+
};
|
|
793
|
+
colors?: string[];
|
|
794
|
+
shapes?: ("square" | "circle" | "star" | string)[];
|
|
795
|
+
zIndex?: number;
|
|
796
|
+
disableForReducedMotion?: boolean;
|
|
797
|
+
useWorker?: boolean;
|
|
798
|
+
resize?: boolean;
|
|
799
|
+
canvas?: HTMLCanvasElement | null;
|
|
800
|
+
scalar?: number;
|
|
801
|
+
className?: string;
|
|
802
|
+
onFire?: (opts: object) => void;
|
|
803
|
+
}
|
|
804
|
+
|
|
805
|
+
declare function Confetti({ particleCount, angle, spread, startVelocity, decay, gravity, drift, flat, ticks, origin, colors, shapes, zIndex, disableForReducedMotion, scalar, className, onFire, }: ConfettiProps): react_jsx_runtime.JSX.Element;
|
|
806
|
+
|
|
807
|
+
interface ConfettiButtonProps {
|
|
808
|
+
options?: Partial<ConfettiProps>;
|
|
809
|
+
children?: React.ReactNode;
|
|
810
|
+
className?: string;
|
|
811
|
+
disabled?: boolean;
|
|
812
|
+
onClick?: () => void;
|
|
813
|
+
}
|
|
814
|
+
|
|
815
|
+
declare function ConfettiButton({ options, children, className, disabled, onClick, }: ConfettiButtonProps): react_jsx_runtime.JSX.Element;
|
|
816
|
+
|
|
817
|
+
interface ThemeToggleSimpleProps {
|
|
818
|
+
className?: string;
|
|
819
|
+
mode?: "light" | "dark" | "system";
|
|
820
|
+
onChange?: (mode: "light" | "dark" | "system") => void;
|
|
821
|
+
label?: string;
|
|
822
|
+
}
|
|
823
|
+
|
|
824
|
+
declare function ThemeToggleSimple({ className, mode: initialMode, onChange, label, }: ThemeToggleSimpleProps): react_jsx_runtime.JSX.Element | null;
|
|
825
|
+
|
|
826
|
+
interface ThemeTogglerProps {
|
|
827
|
+
className?: string;
|
|
828
|
+
duration?: number;
|
|
829
|
+
mode?: "light" | "dark" | "system";
|
|
830
|
+
onChange?: (mode: "light" | "dark" | "system") => void;
|
|
831
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
832
|
+
/** Controls whether the ripple wave passes over (opaque overlay) or under (reveals real content via View Transitions) page elements. Default: "over". */
|
|
833
|
+
rippleLayer?: "over" | "under";
|
|
834
|
+
}
|
|
835
|
+
|
|
836
|
+
declare function ThemeToggler({ className, duration, mode: initialMode, onChange, reducedMotion, rippleLayer, }: ThemeTogglerProps): react_jsx_runtime.JSX.Element | null;
|
|
837
|
+
|
|
838
|
+
interface FooterLinksItem {
|
|
839
|
+
label: string;
|
|
840
|
+
href: string;
|
|
841
|
+
}
|
|
842
|
+
interface FooterLinksProps {
|
|
843
|
+
title?: string;
|
|
844
|
+
links: FooterLinksItem[];
|
|
845
|
+
}
|
|
846
|
+
|
|
847
|
+
declare function FooterLinks({ title, links }: FooterLinksProps): react_jsx_runtime.JSX.Element;
|
|
848
|
+
|
|
849
|
+
type SocialPlatform = "github" | "twitter" | "linkedin" | "instagram" | "youtube";
|
|
850
|
+
interface SocialLink {
|
|
851
|
+
platform: SocialPlatform;
|
|
852
|
+
href: string;
|
|
853
|
+
}
|
|
854
|
+
interface SocialLinksProps {
|
|
855
|
+
links: SocialLink[];
|
|
856
|
+
size?: "sm" | "md" | "lg";
|
|
857
|
+
}
|
|
858
|
+
|
|
859
|
+
declare function SocialLinks({ links, size }: SocialLinksProps): react_jsx_runtime.JSX.Element;
|
|
860
|
+
|
|
861
|
+
interface FooterContactProps {
|
|
862
|
+
email?: string;
|
|
863
|
+
phone?: string;
|
|
864
|
+
address?: string;
|
|
865
|
+
title?: string;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
declare function FooterContact({ email, phone, address, title, }: FooterContactProps): react_jsx_runtime.JSX.Element;
|
|
869
|
+
|
|
870
|
+
interface FooterLegalLink {
|
|
871
|
+
label: string;
|
|
872
|
+
href: string;
|
|
873
|
+
}
|
|
874
|
+
interface FooterLegalProps {
|
|
875
|
+
copyright?: string;
|
|
876
|
+
year?: number;
|
|
877
|
+
links?: FooterLegalLink[];
|
|
878
|
+
}
|
|
879
|
+
|
|
880
|
+
declare function FooterLegal({ copyright, year, links, }: FooterLegalProps): react_jsx_runtime.JSX.Element;
|
|
881
|
+
|
|
882
|
+
interface BrandSloganProps {
|
|
883
|
+
slogan?: string;
|
|
884
|
+
company?: string;
|
|
885
|
+
}
|
|
886
|
+
|
|
887
|
+
declare function BrandSlogan({ slogan, company, }: BrandSloganProps): react_jsx_runtime.JSX.Element;
|
|
888
|
+
|
|
889
|
+
interface HeroCtaSectionProps {
|
|
890
|
+
title: string;
|
|
891
|
+
subtitle?: string;
|
|
892
|
+
ctaLabel?: string;
|
|
893
|
+
onCtaClick?: () => void;
|
|
894
|
+
secondaryLabel?: string;
|
|
895
|
+
onSecondaryClick?: () => void;
|
|
896
|
+
align?: "left" | "center";
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
declare function HeroCtaSection({ title, subtitle, ctaLabel, onCtaClick, secondaryLabel, onSecondaryClick, align, }: HeroCtaSectionProps): react_jsx_runtime.JSX.Element;
|
|
900
|
+
|
|
901
|
+
interface Feature {
|
|
902
|
+
title: string;
|
|
903
|
+
description: string;
|
|
904
|
+
icon?: React.ReactNode;
|
|
905
|
+
}
|
|
906
|
+
interface FeatureListSectionProps {
|
|
907
|
+
title?: string;
|
|
908
|
+
subtitle?: string;
|
|
909
|
+
features: Feature[];
|
|
910
|
+
columns?: 2 | 3 | 4;
|
|
911
|
+
}
|
|
912
|
+
|
|
913
|
+
declare function FeatureListSection({ title, subtitle, features, columns, }: FeatureListSectionProps): react_jsx_runtime.JSX.Element;
|
|
914
|
+
|
|
915
|
+
interface SectionHeaderProps {
|
|
916
|
+
title: string;
|
|
917
|
+
subtitle?: string;
|
|
918
|
+
align?: "left" | "center" | "right";
|
|
919
|
+
eyebrow?: string;
|
|
920
|
+
variant?: "default" | "compact";
|
|
921
|
+
count?: number;
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
declare function SectionHeader({ title, subtitle, align, eyebrow, variant, count }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
|
|
925
|
+
|
|
926
|
+
interface CarouselWithTextSectionProps {
|
|
927
|
+
title: string;
|
|
928
|
+
description?: string;
|
|
929
|
+
carousel: React.ReactNode;
|
|
930
|
+
actions?: React.ReactNode;
|
|
931
|
+
imageLeft?: boolean;
|
|
932
|
+
variant?: 'default' | 'overlay';
|
|
933
|
+
}
|
|
934
|
+
|
|
935
|
+
declare function CarouselWithTextSection({ title, description, carousel, actions, imageLeft, variant, }: CarouselWithTextSectionProps): react_jsx_runtime.JSX.Element;
|
|
936
|
+
|
|
937
|
+
interface ComponentPresentationSectionProps {
|
|
938
|
+
name: string;
|
|
939
|
+
description: string;
|
|
940
|
+
preview: React.ReactNode;
|
|
941
|
+
children?: React.ReactNode;
|
|
942
|
+
}
|
|
943
|
+
|
|
944
|
+
declare function ComponentPresentationSection({ name, description, preview, children, }: ComponentPresentationSectionProps): react_jsx_runtime.JSX.Element;
|
|
945
|
+
|
|
946
|
+
interface WarpBackgroundProps {
|
|
947
|
+
children?: React.ReactNode;
|
|
948
|
+
className?: string;
|
|
949
|
+
intensity?: number;
|
|
950
|
+
speed?: number;
|
|
951
|
+
quality?: "low" | "medium" | "high";
|
|
952
|
+
mask?: "none" | "radial" | "vignette";
|
|
953
|
+
interactive?: boolean;
|
|
954
|
+
theme?: "light" | "dark" | "auto";
|
|
955
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
956
|
+
}
|
|
957
|
+
|
|
958
|
+
declare function WarpBackground({ children, className, intensity, speed, quality, mask, interactive, theme, reducedMotion, }: WarpBackgroundProps): react_jsx_runtime.JSX.Element;
|
|
959
|
+
|
|
960
|
+
interface FlickeringGridProps {
|
|
961
|
+
className?: string;
|
|
962
|
+
cellSize?: number;
|
|
963
|
+
gap?: number;
|
|
964
|
+
opacity?: number;
|
|
965
|
+
flickerRate?: number;
|
|
966
|
+
rounded?: boolean;
|
|
967
|
+
color?: string;
|
|
968
|
+
quality?: "low" | "medium" | "high";
|
|
969
|
+
mask?: "none" | "radial" | "vignette";
|
|
970
|
+
interactive?: boolean;
|
|
971
|
+
theme?: "light" | "dark" | "auto";
|
|
972
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
973
|
+
}
|
|
974
|
+
|
|
975
|
+
declare function FlickeringGrid({ className, cellSize, gap, opacity, flickerRate, rounded, color, quality, mask, interactive, theme, reducedMotion, }: FlickeringGridProps): react_jsx_runtime.JSX.Element;
|
|
976
|
+
|
|
977
|
+
interface AnimatedGridPatternProps {
|
|
978
|
+
className?: string;
|
|
979
|
+
size?: number;
|
|
980
|
+
speed?: number;
|
|
981
|
+
strokeWidth?: number;
|
|
982
|
+
color?: string;
|
|
983
|
+
quality?: "low" | "medium" | "high";
|
|
984
|
+
mask?: "none" | "radial" | "vignette";
|
|
985
|
+
intensity?: number;
|
|
986
|
+
interactive?: boolean;
|
|
987
|
+
theme?: "light" | "dark" | "auto";
|
|
988
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
declare function AnimatedGridPattern({ className, size, speed, strokeWidth, color, quality, mask, intensity, interactive, theme, reducedMotion, }: AnimatedGridPatternProps): react_jsx_runtime.JSX.Element;
|
|
992
|
+
|
|
993
|
+
interface RetroGridProps {
|
|
994
|
+
className?: string;
|
|
995
|
+
perspective?: number;
|
|
996
|
+
lineThickness?: number;
|
|
997
|
+
glow?: boolean;
|
|
998
|
+
speed?: number;
|
|
999
|
+
color?: string;
|
|
1000
|
+
quality?: "low" | "medium" | "high";
|
|
1001
|
+
intensity?: number;
|
|
1002
|
+
interactive?: boolean;
|
|
1003
|
+
theme?: "light" | "dark" | "auto";
|
|
1004
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1005
|
+
}
|
|
1006
|
+
|
|
1007
|
+
declare function RetroGrid({ className, perspective, lineThickness, glow, speed, color, quality, intensity, interactive, theme, reducedMotion, }: RetroGridProps): react_jsx_runtime.JSX.Element;
|
|
1008
|
+
|
|
1009
|
+
interface RippleBackgroundProps {
|
|
1010
|
+
className?: string;
|
|
1011
|
+
center?: {
|
|
1012
|
+
x: number;
|
|
1013
|
+
y: number;
|
|
1014
|
+
};
|
|
1015
|
+
amplitude?: number;
|
|
1016
|
+
frequency?: number;
|
|
1017
|
+
speed?: number;
|
|
1018
|
+
quality?: "low" | "medium" | "high";
|
|
1019
|
+
interactive?: boolean;
|
|
1020
|
+
theme?: "light" | "dark" | "auto";
|
|
1021
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
declare function RippleBackground({ className, center, amplitude, frequency, speed, quality, interactive, theme, reducedMotion, }: RippleBackgroundProps): react_jsx_runtime.JSX.Element;
|
|
1025
|
+
|
|
1026
|
+
interface DotPatternProps {
|
|
1027
|
+
className?: string;
|
|
1028
|
+
dotSize?: number;
|
|
1029
|
+
dotWeight?: "very-thin" | "thin" | "medium";
|
|
1030
|
+
gap?: number;
|
|
1031
|
+
offset?: number;
|
|
1032
|
+
color?: string;
|
|
1033
|
+
quality?: "low" | "medium" | "high";
|
|
1034
|
+
mask?: "none" | "radial" | "vignette";
|
|
1035
|
+
opacity?: number;
|
|
1036
|
+
interactive?: boolean;
|
|
1037
|
+
theme?: "light" | "dark" | "auto";
|
|
1038
|
+
}
|
|
1039
|
+
|
|
1040
|
+
declare function DotPattern({ className, dotSize, dotWeight, gap, offset, color, quality, mask, opacity, interactive, theme, }: DotPatternProps): react_jsx_runtime.JSX.Element;
|
|
1041
|
+
|
|
1042
|
+
interface GridPatternProps {
|
|
1043
|
+
className?: string;
|
|
1044
|
+
size?: number;
|
|
1045
|
+
strokeWidth?: number;
|
|
1046
|
+
dashed?: boolean;
|
|
1047
|
+
lineStyle?: "solid" | "dashed";
|
|
1048
|
+
contrastMode?: "custom" | "black-on-white" | "white-on-black";
|
|
1049
|
+
color?: string;
|
|
1050
|
+
opacity?: number;
|
|
1051
|
+
quality?: "low" | "medium" | "high";
|
|
1052
|
+
mask?: "none" | "radial" | "vignette";
|
|
1053
|
+
interactive?: boolean;
|
|
1054
|
+
theme?: "light" | "dark" | "auto";
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
declare function GridPattern({ className, size, strokeWidth, dashed, lineStyle, contrastMode, color, opacity, quality, mask, interactive, theme, }: GridPatternProps): react_jsx_runtime.JSX.Element;
|
|
1058
|
+
|
|
1059
|
+
interface StripedPatternProps {
|
|
1060
|
+
className?: string;
|
|
1061
|
+
angle?: number;
|
|
1062
|
+
stripeWidth?: number;
|
|
1063
|
+
gap?: number;
|
|
1064
|
+
color?: string;
|
|
1065
|
+
opacity?: number;
|
|
1066
|
+
animate?: boolean;
|
|
1067
|
+
speed?: number;
|
|
1068
|
+
quality?: "low" | "medium" | "high";
|
|
1069
|
+
mask?: "none" | "radial" | "vignette";
|
|
1070
|
+
interactive?: boolean;
|
|
1071
|
+
theme?: "light" | "dark" | "auto";
|
|
1072
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
declare function StripedPattern({ className, angle, stripeWidth, gap, color, opacity, animate, speed, quality, mask, interactive, theme, reducedMotion, }: StripedPatternProps): react_jsx_runtime.JSX.Element;
|
|
1076
|
+
|
|
1077
|
+
interface InteractiveGridPatternProps {
|
|
1078
|
+
className?: string;
|
|
1079
|
+
cellSize?: number;
|
|
1080
|
+
radius?: number;
|
|
1081
|
+
intensity?: number;
|
|
1082
|
+
quality?: "low" | "medium" | "high";
|
|
1083
|
+
mask?: "none" | "radial" | "vignette";
|
|
1084
|
+
color?: string;
|
|
1085
|
+
interactive?: boolean;
|
|
1086
|
+
theme?: "light" | "dark" | "auto";
|
|
1087
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
declare function InteractiveGridPattern({ className, cellSize, radius, intensity, quality, mask, color, interactive, theme, reducedMotion, }: InteractiveGridPatternProps): react_jsx_runtime.JSX.Element;
|
|
1091
|
+
|
|
1092
|
+
interface LightRaysBackgroundProps {
|
|
1093
|
+
className?: string;
|
|
1094
|
+
rayCount?: number;
|
|
1095
|
+
speed?: number;
|
|
1096
|
+
blur?: number;
|
|
1097
|
+
opacity?: number;
|
|
1098
|
+
color?: string;
|
|
1099
|
+
quality?: "low" | "medium" | "high";
|
|
1100
|
+
mask?: "none" | "radial" | "vignette";
|
|
1101
|
+
interactive?: boolean;
|
|
1102
|
+
theme?: "light" | "dark" | "auto";
|
|
1103
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1104
|
+
}
|
|
1105
|
+
|
|
1106
|
+
declare function LightRaysBackground({ className, rayCount, speed, blur, opacity, color, quality, mask, interactive, theme, reducedMotion, }: LightRaysBackgroundProps): react_jsx_runtime.JSX.Element;
|
|
1107
|
+
|
|
1108
|
+
interface NoiseMeshBackgroundProps {
|
|
1109
|
+
className?: string;
|
|
1110
|
+
colors?: string[];
|
|
1111
|
+
noise?: number;
|
|
1112
|
+
grainSize?: number;
|
|
1113
|
+
animate?: boolean;
|
|
1114
|
+
speed?: number;
|
|
1115
|
+
quality?: "low" | "medium" | "high";
|
|
1116
|
+
mask?: "none" | "radial" | "vignette";
|
|
1117
|
+
interactive?: boolean;
|
|
1118
|
+
theme?: "light" | "dark" | "auto";
|
|
1119
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1120
|
+
}
|
|
1121
|
+
|
|
1122
|
+
declare function NoiseMeshBackground({ className, colors, noise, grainSize, animate, speed, quality, mask, interactive, theme, reducedMotion, }: NoiseMeshBackgroundProps): react_jsx_runtime.JSX.Element;
|
|
1123
|
+
|
|
1124
|
+
interface GlassAuroraBackgroundProps {
|
|
1125
|
+
className?: string;
|
|
1126
|
+
colors?: string[];
|
|
1127
|
+
blur?: number;
|
|
1128
|
+
intensity?: number;
|
|
1129
|
+
speed?: number;
|
|
1130
|
+
quality?: "low" | "medium" | "high";
|
|
1131
|
+
border?: boolean;
|
|
1132
|
+
interactive?: boolean;
|
|
1133
|
+
theme?: "light" | "dark" | "auto";
|
|
1134
|
+
reducedMotion?: "auto" | "always" | "never";
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
declare function GlassAuroraBackground({ className, colors, blur, intensity, speed, quality, border, interactive, theme, reducedMotion, }: GlassAuroraBackgroundProps): react_jsx_runtime.JSX.Element;
|
|
1138
|
+
|
|
1139
|
+
type ReducedMotion = "auto" | "always" | "never";
|
|
1140
|
+
|
|
1141
|
+
interface TextAnimateProps {
|
|
1142
|
+
children: string;
|
|
1143
|
+
as?: ElementType;
|
|
1144
|
+
by?: "text" | "word" | "character" | "line";
|
|
1145
|
+
className?: string;
|
|
1146
|
+
segmentClassName?: string;
|
|
1147
|
+
preset?: "fade" | "blur" | "slide" | "scale" | "rise";
|
|
1148
|
+
delay?: number;
|
|
1149
|
+
stagger?: number;
|
|
1150
|
+
duration?: number;
|
|
1151
|
+
easing?: string | number[];
|
|
1152
|
+
startOnView?: boolean;
|
|
1153
|
+
once?: boolean;
|
|
1154
|
+
viewportMargin?: string;
|
|
1155
|
+
reducedMotion?: ReducedMotion;
|
|
1156
|
+
onStart?: () => void;
|
|
1157
|
+
onComplete?: () => void;
|
|
1158
|
+
id?: string;
|
|
1159
|
+
ariaLabel?: string;
|
|
1160
|
+
style?: CSSProperties;
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
declare function TextAnimate({ children, as, by, className, segmentClassName, preset, delay, stagger, duration, easing, startOnView, once, viewportMargin, reducedMotion, onStart, onComplete, id, ariaLabel, style, }: TextAnimateProps): react_jsx_runtime.JSX.Element;
|
|
1164
|
+
|
|
1165
|
+
interface TypingAnimationProps {
|
|
1166
|
+
text?: string;
|
|
1167
|
+
words?: string[];
|
|
1168
|
+
as?: ElementType;
|
|
1169
|
+
className?: string;
|
|
1170
|
+
typeSpeed?: number;
|
|
1171
|
+
deleteSpeed?: number;
|
|
1172
|
+
startDelay?: number;
|
|
1173
|
+
wordPause?: number;
|
|
1174
|
+
loop?: boolean;
|
|
1175
|
+
loopDelay?: number;
|
|
1176
|
+
showCursor?: boolean;
|
|
1177
|
+
cursor?: "line" | "block" | "underscore";
|
|
1178
|
+
cursorBlinkSpeed?: number;
|
|
1179
|
+
startOnView?: boolean;
|
|
1180
|
+
viewportMargin?: string;
|
|
1181
|
+
reducedMotion?: ReducedMotion;
|
|
1182
|
+
onWordChange?: (index: number) => void;
|
|
1183
|
+
onComplete?: () => void;
|
|
1184
|
+
ariaLabel?: string;
|
|
1185
|
+
style?: CSSProperties;
|
|
1186
|
+
}
|
|
1187
|
+
|
|
1188
|
+
declare function TypingAnimation({ text, words, as, className, typeSpeed, deleteSpeed, startDelay, wordPause, loop, loopDelay, showCursor, cursor, cursorBlinkSpeed, startOnView, viewportMargin, reducedMotion, onWordChange, onComplete, ariaLabel, style, }: TypingAnimationProps): react_jsx_runtime.JSX.Element;
|
|
1189
|
+
|
|
1190
|
+
interface AuroraTextProps {
|
|
1191
|
+
children: ReactNode;
|
|
1192
|
+
as?: ElementType;
|
|
1193
|
+
className?: string;
|
|
1194
|
+
colors?: string[];
|
|
1195
|
+
speed?: number;
|
|
1196
|
+
angle?: number;
|
|
1197
|
+
intensity?: number;
|
|
1198
|
+
blendMode?: "normal" | "screen" | "overlay";
|
|
1199
|
+
reducedMotion?: ReducedMotion;
|
|
1200
|
+
onComplete?: () => void;
|
|
1201
|
+
style?: CSSProperties;
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
declare function AuroraText({ children, as, className, colors, speed, angle, intensity, blendMode, reducedMotion, style, }: AuroraTextProps): react_jsx_runtime.JSX.Element;
|
|
1205
|
+
|
|
1206
|
+
interface NumberTickerProps {
|
|
1207
|
+
value: number;
|
|
1208
|
+
startValue?: number;
|
|
1209
|
+
direction?: "up" | "down";
|
|
1210
|
+
duration?: number;
|
|
1211
|
+
delay?: number;
|
|
1212
|
+
easing?: string | number[];
|
|
1213
|
+
decimalPlaces?: number;
|
|
1214
|
+
locale?: string;
|
|
1215
|
+
prefix?: string;
|
|
1216
|
+
suffix?: string;
|
|
1217
|
+
separator?: boolean;
|
|
1218
|
+
startOnView?: boolean;
|
|
1219
|
+
viewportMargin?: string;
|
|
1220
|
+
reducedMotion?: ReducedMotion;
|
|
1221
|
+
onComplete?: () => void;
|
|
1222
|
+
ariaLabel?: string;
|
|
1223
|
+
style?: CSSProperties;
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
declare function NumberTicker({ value, startValue, direction, duration, delay, decimalPlaces, locale, prefix, suffix, separator, startOnView, viewportMargin, reducedMotion, onComplete, ariaLabel, style, }: NumberTickerProps): react_jsx_runtime.JSX.Element;
|
|
1227
|
+
|
|
1228
|
+
interface AnimatedGradientTextProps {
|
|
1229
|
+
children: ReactNode;
|
|
1230
|
+
as?: ElementType;
|
|
1231
|
+
className?: string;
|
|
1232
|
+
colorStops?: string[];
|
|
1233
|
+
speed?: number;
|
|
1234
|
+
angle?: number;
|
|
1235
|
+
mode?: "linear" | "radial";
|
|
1236
|
+
animate?: "shift" | "rotate" | "pulse";
|
|
1237
|
+
reducedMotion?: ReducedMotion;
|
|
1238
|
+
style?: CSSProperties;
|
|
1239
|
+
}
|
|
1240
|
+
|
|
1241
|
+
declare function AnimatedGradientText({ children, as, className, colorStops, speed, angle, mode, animate, reducedMotion, style, }: AnimatedGradientTextProps): react_jsx_runtime.JSX.Element;
|
|
1242
|
+
|
|
1243
|
+
interface TextRevealProps {
|
|
1244
|
+
children: string;
|
|
1245
|
+
as?: ElementType;
|
|
1246
|
+
className?: string;
|
|
1247
|
+
by?: "word" | "character" | "line";
|
|
1248
|
+
fade?: boolean;
|
|
1249
|
+
blur?: boolean;
|
|
1250
|
+
duration?: number;
|
|
1251
|
+
stagger?: number;
|
|
1252
|
+
startOnView?: boolean;
|
|
1253
|
+
viewportMargin?: string;
|
|
1254
|
+
threshold?: number;
|
|
1255
|
+
reducedMotion?: ReducedMotion;
|
|
1256
|
+
onComplete?: () => void;
|
|
1257
|
+
style?: CSSProperties;
|
|
1258
|
+
}
|
|
1259
|
+
|
|
1260
|
+
declare function TextReveal({ children, as, className, by, fade, blur, duration, stagger, startOnView, viewportMargin, threshold, reducedMotion, onComplete, style, }: TextRevealProps): react_jsx_runtime.JSX.Element;
|
|
1261
|
+
|
|
1262
|
+
interface WordRotateProps {
|
|
1263
|
+
words: string[];
|
|
1264
|
+
as?: ElementType;
|
|
1265
|
+
className?: string;
|
|
1266
|
+
interval?: number;
|
|
1267
|
+
transition?: "slide" | "fade" | "flip";
|
|
1268
|
+
duration?: number;
|
|
1269
|
+
easing?: string | number[];
|
|
1270
|
+
pauseOnHover?: boolean;
|
|
1271
|
+
loop?: boolean;
|
|
1272
|
+
reducedMotion?: ReducedMotion;
|
|
1273
|
+
onChange?: (index: number) => void;
|
|
1274
|
+
style?: CSSProperties;
|
|
1275
|
+
}
|
|
1276
|
+
|
|
1277
|
+
declare function WordRotate({ words, as, className, interval, transition, duration, easing, pauseOnHover, loop, reducedMotion, onChange, style, }: WordRotateProps): react_jsx_runtime.JSX.Element;
|
|
1278
|
+
|
|
1279
|
+
interface HyperTextProps {
|
|
1280
|
+
children: string;
|
|
1281
|
+
as?: ElementType;
|
|
1282
|
+
className?: string;
|
|
1283
|
+
duration?: number;
|
|
1284
|
+
delay?: number;
|
|
1285
|
+
intensity?: number;
|
|
1286
|
+
characterSet?: string[];
|
|
1287
|
+
trigger?: "hover" | "tap" | "auto" | "view";
|
|
1288
|
+
startOnView?: boolean;
|
|
1289
|
+
viewportMargin?: string;
|
|
1290
|
+
reducedMotion?: ReducedMotion;
|
|
1291
|
+
onComplete?: () => void;
|
|
1292
|
+
style?: CSSProperties;
|
|
1293
|
+
}
|
|
1294
|
+
|
|
1295
|
+
declare function HyperText({ children, as, className, duration, delay, intensity, characterSet, trigger, startOnView, viewportMargin, reducedMotion, onComplete, style, }: HyperTextProps): react_jsx_runtime.JSX.Element;
|
|
1296
|
+
|
|
1297
|
+
interface SparklesTextProps {
|
|
1298
|
+
children: string;
|
|
1299
|
+
as?: ElementType;
|
|
1300
|
+
className?: string;
|
|
1301
|
+
count?: number;
|
|
1302
|
+
size?: number;
|
|
1303
|
+
speed?: number;
|
|
1304
|
+
colors?: string[];
|
|
1305
|
+
area?: "text" | "bounds";
|
|
1306
|
+
reducedMotion?: ReducedMotion;
|
|
1307
|
+
style?: CSSProperties;
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
declare function SparklesText({ children, as, className, count, size, speed, colors, area, reducedMotion, style, }: SparklesTextProps): react_jsx_runtime.JSX.Element;
|
|
1311
|
+
|
|
1312
|
+
interface TextHighlighterProps {
|
|
1313
|
+
children: ReactNode;
|
|
1314
|
+
as?: ElementType;
|
|
1315
|
+
className?: string;
|
|
1316
|
+
color?: string;
|
|
1317
|
+
action?: "highlight" | "underline" | "box" | "circle" | "strike";
|
|
1318
|
+
strokeWidth?: number;
|
|
1319
|
+
padding?: number;
|
|
1320
|
+
duration?: number;
|
|
1321
|
+
iterations?: number;
|
|
1322
|
+
multiline?: boolean;
|
|
1323
|
+
trigger?: "view" | "hover" | "manual";
|
|
1324
|
+
startOnView?: boolean;
|
|
1325
|
+
viewportMargin?: string;
|
|
1326
|
+
reducedMotion?: ReducedMotion;
|
|
1327
|
+
onComplete?: () => void;
|
|
1328
|
+
style?: CSSProperties;
|
|
1329
|
+
}
|
|
1330
|
+
|
|
1331
|
+
declare function TextHighlighter({ children, as, className, color, action, strokeWidth, padding, duration, iterations, multiline, trigger, startOnView, viewportMargin, reducedMotion, onComplete, style, }: TextHighlighterProps): react_jsx_runtime.JSX.Element;
|
|
1332
|
+
|
|
1333
|
+
interface NoiseRevealTextProps {
|
|
1334
|
+
children: string;
|
|
1335
|
+
as?: ElementType;
|
|
1336
|
+
className?: string;
|
|
1337
|
+
duration?: number;
|
|
1338
|
+
intensity?: number;
|
|
1339
|
+
noiseScale?: number;
|
|
1340
|
+
direction?: "left" | "right" | "up" | "down";
|
|
1341
|
+
startOnView?: boolean;
|
|
1342
|
+
viewportMargin?: string;
|
|
1343
|
+
reducedMotion?: ReducedMotion;
|
|
1344
|
+
onComplete?: () => void;
|
|
1345
|
+
style?: CSSProperties;
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1348
|
+
declare function NoiseRevealText({ children, as, className, duration, intensity, noiseScale, direction, startOnView, viewportMargin, reducedMotion, onComplete, style, }: NoiseRevealTextProps): react_jsx_runtime.JSX.Element;
|
|
1349
|
+
|
|
1350
|
+
interface FontAxes {
|
|
1351
|
+
wght?: [number, number];
|
|
1352
|
+
wdth?: [number, number];
|
|
1353
|
+
slnt?: [number, number];
|
|
1354
|
+
}
|
|
1355
|
+
interface VariableFontWarpTextProps {
|
|
1356
|
+
children: string;
|
|
1357
|
+
as?: ElementType;
|
|
1358
|
+
className?: string;
|
|
1359
|
+
axes?: FontAxes;
|
|
1360
|
+
trigger?: "hover" | "scroll" | "view";
|
|
1361
|
+
duration?: number;
|
|
1362
|
+
easing?: string | number[];
|
|
1363
|
+
clamp?: boolean;
|
|
1364
|
+
reducedMotion?: ReducedMotion;
|
|
1365
|
+
style?: CSSProperties;
|
|
1366
|
+
}
|
|
1367
|
+
|
|
1368
|
+
declare function VariableFontWarpText({ children, as, className, axes, trigger, duration, easing, clamp, reducedMotion, style, }: VariableFontWarpTextProps): react_jsx_runtime.JSX.Element;
|
|
1369
|
+
|
|
1370
|
+
interface MagneticTextProps {
|
|
1371
|
+
children: ReactNode;
|
|
1372
|
+
as?: ElementType;
|
|
1373
|
+
className?: string;
|
|
1374
|
+
strength?: number;
|
|
1375
|
+
radius?: number;
|
|
1376
|
+
friction?: number;
|
|
1377
|
+
trigger?: "pointer" | "tilt";
|
|
1378
|
+
disabledOnTouch?: boolean;
|
|
1379
|
+
reducedMotion?: ReducedMotion;
|
|
1380
|
+
style?: CSSProperties;
|
|
1381
|
+
}
|
|
1382
|
+
|
|
1383
|
+
declare function MagneticText({ children, as, className, strength, radius, friction, trigger, disabledOnTouch, reducedMotion, style, }: MagneticTextProps): react_jsx_runtime.JSX.Element;
|
|
1384
|
+
|
|
1385
|
+
interface KineticUnderlineTextProps {
|
|
1386
|
+
children: ReactNode;
|
|
1387
|
+
as?: ElementType;
|
|
1388
|
+
className?: string;
|
|
1389
|
+
underlineClassName?: string;
|
|
1390
|
+
thickness?: number;
|
|
1391
|
+
offset?: number;
|
|
1392
|
+
duration?: number;
|
|
1393
|
+
easing?: string | number[];
|
|
1394
|
+
trigger?: "hover" | "focus" | "active";
|
|
1395
|
+
reducedMotion?: ReducedMotion;
|
|
1396
|
+
style?: CSSProperties;
|
|
1397
|
+
}
|
|
1398
|
+
|
|
1399
|
+
declare function KineticUnderlineText({ children, as, className, underlineClassName, thickness, offset, duration, easing, trigger, reducedMotion, style, }: KineticUnderlineTextProps): react_jsx_runtime.JSX.Element;
|
|
1400
|
+
|
|
1401
|
+
interface ShimmerBorderTextProps {
|
|
1402
|
+
children: string;
|
|
1403
|
+
as?: ElementType;
|
|
1404
|
+
className?: string;
|
|
1405
|
+
strokeWidth?: number;
|
|
1406
|
+
strokeColor?: string;
|
|
1407
|
+
shimmerColor?: string;
|
|
1408
|
+
speed?: number;
|
|
1409
|
+
fillMode?: "solid" | "transparent";
|
|
1410
|
+
reducedMotion?: ReducedMotion;
|
|
1411
|
+
style?: CSSProperties;
|
|
1412
|
+
}
|
|
1413
|
+
|
|
1414
|
+
declare function ShimmerBorderText({ children, as, className, strokeWidth, strokeColor, shimmerColor, speed, fillMode, reducedMotion, style, }: ShimmerBorderTextProps): react_jsx_runtime.JSX.Element;
|
|
1415
|
+
|
|
1416
|
+
interface GlowPulseTextProps {
|
|
1417
|
+
children: ReactNode;
|
|
1418
|
+
as?: ElementType;
|
|
1419
|
+
className?: string;
|
|
1420
|
+
glowColor?: string;
|
|
1421
|
+
intensity?: number;
|
|
1422
|
+
pulse?: boolean;
|
|
1423
|
+
pulseRate?: number;
|
|
1424
|
+
trigger?: "always" | "hover" | "view";
|
|
1425
|
+
reducedMotion?: ReducedMotion;
|
|
1426
|
+
style?: CSSProperties;
|
|
1427
|
+
}
|
|
1428
|
+
|
|
1429
|
+
declare function GlowPulseText({ children, as, className, glowColor, intensity, pulse, pulseRate, trigger, reducedMotion, style, }: GlowPulseTextProps): react_jsx_runtime.JSX.Element;
|
|
1430
|
+
|
|
1431
|
+
interface SegmentHighlight {
|
|
1432
|
+
match: string | RegExp;
|
|
1433
|
+
className?: string;
|
|
1434
|
+
effect?: "raise" | "glow" | "underline" | "gradient";
|
|
1435
|
+
}
|
|
1436
|
+
interface SegmentEmphasisTextProps {
|
|
1437
|
+
children: string;
|
|
1438
|
+
as?: ElementType;
|
|
1439
|
+
className?: string;
|
|
1440
|
+
highlights: SegmentHighlight[];
|
|
1441
|
+
by?: "word" | "match";
|
|
1442
|
+
duration?: number;
|
|
1443
|
+
stagger?: number;
|
|
1444
|
+
startOnView?: boolean;
|
|
1445
|
+
reducedMotion?: ReducedMotion;
|
|
1446
|
+
style?: CSSProperties;
|
|
1447
|
+
}
|
|
1448
|
+
|
|
1449
|
+
declare function SegmentEmphasisText({ children, as, className, highlights, by, duration, stagger, startOnView, reducedMotion, style, }: SegmentEmphasisTextProps): react_jsx_runtime.JSX.Element;
|
|
1450
|
+
|
|
1451
|
+
interface ProgressiveBlurTextProps {
|
|
1452
|
+
children: string;
|
|
1453
|
+
as?: ElementType;
|
|
1454
|
+
className?: string;
|
|
1455
|
+
maxBlur?: number;
|
|
1456
|
+
duration?: number;
|
|
1457
|
+
trigger?: "scroll" | "view";
|
|
1458
|
+
startOnView?: boolean;
|
|
1459
|
+
viewportMargin?: string;
|
|
1460
|
+
reducedMotion?: ReducedMotion;
|
|
1461
|
+
onComplete?: () => void;
|
|
1462
|
+
style?: CSSProperties;
|
|
1463
|
+
}
|
|
1464
|
+
|
|
1465
|
+
declare function ProgressiveBlurText({ children, as, className, maxBlur, duration, trigger, startOnView, viewportMargin, reducedMotion, onComplete, style, }: ProgressiveBlurTextProps): react_jsx_runtime.JSX.Element;
|
|
1466
|
+
|
|
1467
|
+
type QuestionType = "single" | "multi" | "scale" | "rating" | "nps" | "range" | "text" | "matrix" | "rank" | "date" | "file";
|
|
1468
|
+
interface QuestionOption {
|
|
1469
|
+
id: string;
|
|
1470
|
+
label: string;
|
|
1471
|
+
description?: string;
|
|
1472
|
+
disabled?: boolean;
|
|
1473
|
+
}
|
|
1474
|
+
interface Question {
|
|
1475
|
+
id: string;
|
|
1476
|
+
type: QuestionType;
|
|
1477
|
+
label: string;
|
|
1478
|
+
description?: string;
|
|
1479
|
+
required?: boolean;
|
|
1480
|
+
points?: number;
|
|
1481
|
+
hint?: string;
|
|
1482
|
+
options?: QuestionOption[];
|
|
1483
|
+
min?: number;
|
|
1484
|
+
max?: number;
|
|
1485
|
+
step?: number;
|
|
1486
|
+
minLabel?: string;
|
|
1487
|
+
maxLabel?: string;
|
|
1488
|
+
maxLength?: number;
|
|
1489
|
+
minLength?: number;
|
|
1490
|
+
multiline?: boolean;
|
|
1491
|
+
rows?: {
|
|
1492
|
+
id: string;
|
|
1493
|
+
label: string;
|
|
1494
|
+
}[];
|
|
1495
|
+
cols?: {
|
|
1496
|
+
id: string;
|
|
1497
|
+
label: string;
|
|
1498
|
+
}[];
|
|
1499
|
+
maxSelected?: number;
|
|
1500
|
+
minSelected?: number;
|
|
1501
|
+
maxRank?: number;
|
|
1502
|
+
allowHalf?: boolean;
|
|
1503
|
+
range?: boolean;
|
|
1504
|
+
unit?: string;
|
|
1505
|
+
}
|
|
1506
|
+
type Answer = string | string[] | number | number[] | Record<string, string | number> | null;
|
|
1507
|
+
interface QuizSectionSchema {
|
|
1508
|
+
id: string;
|
|
1509
|
+
title: string;
|
|
1510
|
+
description?: string;
|
|
1511
|
+
required?: boolean;
|
|
1512
|
+
helperText?: string;
|
|
1513
|
+
questions: Question[];
|
|
1514
|
+
}
|
|
1515
|
+
type LogicOperator = "eq" | "neq" | "gt" | "gte" | "lt" | "lte" | "contains" | "answered";
|
|
1516
|
+
type LogicAction = "show" | "hide" | "jump" | "score" | "branch";
|
|
1517
|
+
interface LogicCondition {
|
|
1518
|
+
questionId: string;
|
|
1519
|
+
operator: LogicOperator;
|
|
1520
|
+
value?: Answer;
|
|
1521
|
+
}
|
|
1522
|
+
interface LogicRule {
|
|
1523
|
+
id: string;
|
|
1524
|
+
conditions: LogicCondition[];
|
|
1525
|
+
conditionMode?: "all" | "any";
|
|
1526
|
+
action: LogicAction;
|
|
1527
|
+
targetId?: string;
|
|
1528
|
+
scoreValue?: number;
|
|
1529
|
+
}
|
|
1530
|
+
interface ValidationResult {
|
|
1531
|
+
valid: boolean;
|
|
1532
|
+
errors: {
|
|
1533
|
+
path: string;
|
|
1534
|
+
message: string;
|
|
1535
|
+
}[];
|
|
1536
|
+
}
|
|
1537
|
+
interface QuizSchema {
|
|
1538
|
+
id: string;
|
|
1539
|
+
title: string;
|
|
1540
|
+
description?: string;
|
|
1541
|
+
sections: QuizSectionSchema[];
|
|
1542
|
+
logic?: LogicRule[];
|
|
1543
|
+
locale?: string;
|
|
1544
|
+
}
|
|
1545
|
+
interface QuizBadge {
|
|
1546
|
+
id: string;
|
|
1547
|
+
label: string;
|
|
1548
|
+
icon?: string;
|
|
1549
|
+
}
|
|
1550
|
+
interface QuizRecommendation {
|
|
1551
|
+
label: string;
|
|
1552
|
+
description?: string;
|
|
1553
|
+
href?: string;
|
|
1554
|
+
}
|
|
1555
|
+
interface QuizResult {
|
|
1556
|
+
score?: number;
|
|
1557
|
+
maxScore?: number;
|
|
1558
|
+
percent?: number;
|
|
1559
|
+
timeSpent?: number;
|
|
1560
|
+
badges?: QuizBadge[];
|
|
1561
|
+
recommendations?: QuizRecommendation[];
|
|
1562
|
+
completedAt?: Date | string;
|
|
1563
|
+
}
|
|
1564
|
+
type AnswerMap = Record<string, Answer>;
|
|
1565
|
+
interface Correction {
|
|
1566
|
+
correct: boolean;
|
|
1567
|
+
correctAnswer?: Answer;
|
|
1568
|
+
feedback?: string;
|
|
1569
|
+
points?: number;
|
|
1570
|
+
}
|
|
1571
|
+
type CorrectionMap = Record<string, Correction>;
|
|
1572
|
+
interface ResponseRow {
|
|
1573
|
+
id: string;
|
|
1574
|
+
[key: string]: unknown;
|
|
1575
|
+
}
|
|
1576
|
+
interface ColumnDef {
|
|
1577
|
+
id: string;
|
|
1578
|
+
label: string;
|
|
1579
|
+
type?: "text" | "number" | "date" | "badge";
|
|
1580
|
+
width?: number;
|
|
1581
|
+
sortable?: boolean;
|
|
1582
|
+
}
|
|
1583
|
+
interface FilterDef {
|
|
1584
|
+
id: string;
|
|
1585
|
+
label: string;
|
|
1586
|
+
type: "text" | "select" | "date" | "number";
|
|
1587
|
+
options?: {
|
|
1588
|
+
id: string;
|
|
1589
|
+
label: string;
|
|
1590
|
+
}[];
|
|
1591
|
+
}
|
|
1592
|
+
|
|
1593
|
+
interface QuizSectionProps {
|
|
1594
|
+
id: string;
|
|
1595
|
+
title: string;
|
|
1596
|
+
description?: string;
|
|
1597
|
+
collapsible?: boolean;
|
|
1598
|
+
defaultCollapsed?: boolean;
|
|
1599
|
+
required?: boolean;
|
|
1600
|
+
helperText?: string;
|
|
1601
|
+
children: React.ReactNode;
|
|
1602
|
+
className?: string;
|
|
1603
|
+
}
|
|
1604
|
+
|
|
1605
|
+
declare function QuizSection({ id, title, description, collapsible, defaultCollapsed, required, helperText, children, }: QuizSectionProps): react_jsx_runtime.JSX.Element;
|
|
1606
|
+
|
|
1607
|
+
type QuestionStatus = "default" | "success" | "warning" | "error";
|
|
1608
|
+
interface QuestionCardProps {
|
|
1609
|
+
id: string;
|
|
1610
|
+
label: string;
|
|
1611
|
+
description?: string;
|
|
1612
|
+
required?: boolean;
|
|
1613
|
+
points?: number;
|
|
1614
|
+
status?: QuestionStatus;
|
|
1615
|
+
error?: string;
|
|
1616
|
+
hint?: string;
|
|
1617
|
+
actions?: React.ReactNode;
|
|
1618
|
+
children: React.ReactNode;
|
|
1619
|
+
className?: string;
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
declare function QuestionCard({ id, label, description, required, points, status, error, hint, actions, children, }: QuestionCardProps): react_jsx_runtime.JSX.Element;
|
|
1623
|
+
|
|
1624
|
+
type QuestionLayout = "stack" | "inline" | "grid";
|
|
1625
|
+
interface QuestionRendererProps {
|
|
1626
|
+
question: Question;
|
|
1627
|
+
value: Answer;
|
|
1628
|
+
onChange: (answer: Answer) => void;
|
|
1629
|
+
disabled?: boolean;
|
|
1630
|
+
showValidation?: boolean;
|
|
1631
|
+
layout?: QuestionLayout;
|
|
1632
|
+
className?: string;
|
|
1633
|
+
}
|
|
1634
|
+
|
|
1635
|
+
declare function QuestionRenderer({ question, value, onChange, disabled, layout, }: QuestionRendererProps): react_jsx_runtime.JSX.Element;
|
|
1636
|
+
|
|
1637
|
+
interface QuestionIndex {
|
|
1638
|
+
id: string;
|
|
1639
|
+
label: string;
|
|
1640
|
+
type: string;
|
|
1641
|
+
}
|
|
1642
|
+
interface ConditionalLogicProps {
|
|
1643
|
+
rules: LogicRule[];
|
|
1644
|
+
onChange: (rules: LogicRule[]) => void;
|
|
1645
|
+
questionsIndex: QuestionIndex[];
|
|
1646
|
+
className?: string;
|
|
1647
|
+
}
|
|
1648
|
+
|
|
1649
|
+
declare function ConditionalLogic({ rules, onChange, questionsIndex }: ConditionalLogicProps): react_jsx_runtime.JSX.Element;
|
|
1650
|
+
|
|
1651
|
+
type QuizBuilderMode = "builder" | "preview" | "split";
|
|
1652
|
+
interface QuizBuilderProps {
|
|
1653
|
+
value: QuizSchema;
|
|
1654
|
+
onChange: (v: QuizSchema) => void;
|
|
1655
|
+
mode?: QuizBuilderMode;
|
|
1656
|
+
locale?: string;
|
|
1657
|
+
readOnly?: boolean;
|
|
1658
|
+
autosave?: boolean;
|
|
1659
|
+
onAutosave?: (v: QuizSchema) => Promise<void>;
|
|
1660
|
+
validate?: (v: QuizSchema) => ValidationResult;
|
|
1661
|
+
className?: string;
|
|
1662
|
+
}
|
|
1663
|
+
|
|
1664
|
+
declare function QuizBuilder({ value, onChange, mode, readOnly, autosave, onAutosave, validate, }: QuizBuilderProps): react_jsx_runtime.JSX.Element;
|
|
1665
|
+
|
|
1666
|
+
interface SingleChoiceOption {
|
|
1667
|
+
id: string;
|
|
1668
|
+
label: string;
|
|
1669
|
+
description?: string;
|
|
1670
|
+
disabled?: boolean;
|
|
1671
|
+
}
|
|
1672
|
+
type SingleChoiceVariant = "radio" | "card";
|
|
1673
|
+
interface SingleChoiceProps {
|
|
1674
|
+
value?: string;
|
|
1675
|
+
onChange: (v: string) => void;
|
|
1676
|
+
options: SingleChoiceOption[];
|
|
1677
|
+
variant?: SingleChoiceVariant;
|
|
1678
|
+
allowOther?: boolean;
|
|
1679
|
+
otherLabel?: string;
|
|
1680
|
+
disabled?: boolean;
|
|
1681
|
+
className?: string;
|
|
1682
|
+
}
|
|
1683
|
+
|
|
1684
|
+
declare function SingleChoice({ value, onChange, options, variant, allowOther, otherLabel, disabled, }: SingleChoiceProps): react_jsx_runtime.JSX.Element;
|
|
1685
|
+
|
|
1686
|
+
interface MultiChoiceOption {
|
|
1687
|
+
id: string;
|
|
1688
|
+
label: string;
|
|
1689
|
+
disabled?: boolean;
|
|
1690
|
+
}
|
|
1691
|
+
type MultiChoiceVariant = "checkbox" | "tag";
|
|
1692
|
+
interface MultiChoiceProps {
|
|
1693
|
+
value: string[];
|
|
1694
|
+
onChange: (v: string[]) => void;
|
|
1695
|
+
options: MultiChoiceOption[];
|
|
1696
|
+
variant?: MultiChoiceVariant;
|
|
1697
|
+
maxSelected?: number;
|
|
1698
|
+
minSelected?: number;
|
|
1699
|
+
disabled?: boolean;
|
|
1700
|
+
className?: string;
|
|
1701
|
+
}
|
|
1702
|
+
|
|
1703
|
+
declare function MultiChoice({ value, onChange, options, variant, maxSelected, minSelected, disabled, }: MultiChoiceProps): react_jsx_runtime.JSX.Element;
|
|
1704
|
+
|
|
1705
|
+
interface ScaleLikertProps {
|
|
1706
|
+
value?: number;
|
|
1707
|
+
onChange: (v: number) => void;
|
|
1708
|
+
min?: number;
|
|
1709
|
+
max?: number;
|
|
1710
|
+
step?: number;
|
|
1711
|
+
minLabel?: string;
|
|
1712
|
+
maxLabel?: string;
|
|
1713
|
+
showTicks?: boolean;
|
|
1714
|
+
disabled?: boolean;
|
|
1715
|
+
className?: string;
|
|
1716
|
+
}
|
|
1717
|
+
|
|
1718
|
+
declare function ScaleLikert({ value, onChange, min, max, step, minLabel, maxLabel, showTicks, disabled, }: ScaleLikertProps): react_jsx_runtime.JSX.Element;
|
|
1719
|
+
|
|
1720
|
+
type RatingIcon = "star" | "heart" | "bolt";
|
|
1721
|
+
interface RatingStarsProps {
|
|
1722
|
+
value?: number;
|
|
1723
|
+
onChange: (v: number) => void;
|
|
1724
|
+
max?: number;
|
|
1725
|
+
allowHalf?: boolean;
|
|
1726
|
+
icon?: RatingIcon;
|
|
1727
|
+
disabled?: boolean;
|
|
1728
|
+
className?: string;
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
declare function RatingStars({ value, onChange, max, allowHalf, icon, disabled, }: RatingStarsProps): react_jsx_runtime.JSX.Element;
|
|
1732
|
+
|
|
1733
|
+
interface NPSLabels {
|
|
1734
|
+
left?: string;
|
|
1735
|
+
right?: string;
|
|
1736
|
+
}
|
|
1737
|
+
interface NPSQuestionProps {
|
|
1738
|
+
value?: number;
|
|
1739
|
+
onChange: (v: number) => void;
|
|
1740
|
+
labels?: NPSLabels;
|
|
1741
|
+
showBuckets?: boolean;
|
|
1742
|
+
disabled?: boolean;
|
|
1743
|
+
className?: string;
|
|
1744
|
+
}
|
|
1745
|
+
|
|
1746
|
+
declare function NPSQuestion({ value, onChange, labels, showBuckets, disabled, }: NPSQuestionProps): react_jsx_runtime.JSX.Element;
|
|
1747
|
+
|
|
1748
|
+
interface RangeSliderQuestionProps {
|
|
1749
|
+
value?: number | [number, number];
|
|
1750
|
+
onChange: (v: number | [number, number]) => void;
|
|
1751
|
+
min?: number;
|
|
1752
|
+
max?: number;
|
|
1753
|
+
step?: number;
|
|
1754
|
+
unit?: string;
|
|
1755
|
+
range?: boolean;
|
|
1756
|
+
showValue?: boolean;
|
|
1757
|
+
disabled?: boolean;
|
|
1758
|
+
className?: string;
|
|
1759
|
+
}
|
|
1760
|
+
|
|
1761
|
+
declare function RangeSliderQuestion({ value, onChange, min, max, step, unit, range, showValue, disabled, }: RangeSliderQuestionProps): react_jsx_runtime.JSX.Element;
|
|
1762
|
+
|
|
1763
|
+
interface FreeTextQuestionProps {
|
|
1764
|
+
value?: string;
|
|
1765
|
+
onChange: (v: string) => void;
|
|
1766
|
+
multiline?: boolean;
|
|
1767
|
+
minLength?: number;
|
|
1768
|
+
maxLength?: number;
|
|
1769
|
+
placeholder?: string;
|
|
1770
|
+
showCount?: boolean;
|
|
1771
|
+
disabled?: boolean;
|
|
1772
|
+
className?: string;
|
|
1773
|
+
}
|
|
1774
|
+
|
|
1775
|
+
declare function FreeTextQuestion({ value, onChange, multiline, minLength, maxLength, placeholder, showCount, disabled, }: FreeTextQuestionProps): react_jsx_runtime.JSX.Element;
|
|
1776
|
+
|
|
1777
|
+
interface MatrixRow {
|
|
1778
|
+
id: string;
|
|
1779
|
+
label: string;
|
|
1780
|
+
}
|
|
1781
|
+
interface MatrixCol {
|
|
1782
|
+
id: string;
|
|
1783
|
+
label: string;
|
|
1784
|
+
}
|
|
1785
|
+
type MatrixType = "single" | "multi";
|
|
1786
|
+
interface MatrixQuestionProps {
|
|
1787
|
+
value: Record<string, string | number>;
|
|
1788
|
+
onChange: (v: Record<string, string | number>) => void;
|
|
1789
|
+
rows: MatrixRow[];
|
|
1790
|
+
cols: MatrixCol[];
|
|
1791
|
+
type?: MatrixType;
|
|
1792
|
+
requiredRows?: boolean;
|
|
1793
|
+
disabled?: boolean;
|
|
1794
|
+
className?: string;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
declare function MatrixQuestion({ value, onChange, rows, cols, type, requiredRows, disabled, }: MatrixQuestionProps): react_jsx_runtime.JSX.Element;
|
|
1798
|
+
|
|
1799
|
+
interface RankOption {
|
|
1800
|
+
id: string;
|
|
1801
|
+
label: string;
|
|
1802
|
+
}
|
|
1803
|
+
interface RankOrderQuestionProps {
|
|
1804
|
+
value: string[];
|
|
1805
|
+
onChange: (v: string[]) => void;
|
|
1806
|
+
options: RankOption[];
|
|
1807
|
+
maxRank?: number;
|
|
1808
|
+
disabled?: boolean;
|
|
1809
|
+
className?: string;
|
|
1810
|
+
}
|
|
1811
|
+
|
|
1812
|
+
declare function RankOrderQuestion({ value, onChange, options, maxRank, disabled, }: RankOrderQuestionProps): react_jsx_runtime.JSX.Element;
|
|
1813
|
+
|
|
1814
|
+
type QuizProgressMode = "steps" | "bar" | "ring";
|
|
1815
|
+
interface QuizProgressProps {
|
|
1816
|
+
current: number;
|
|
1817
|
+
total: number;
|
|
1818
|
+
mode?: QuizProgressMode;
|
|
1819
|
+
showLabel?: boolean;
|
|
1820
|
+
className?: string;
|
|
1821
|
+
}
|
|
1822
|
+
|
|
1823
|
+
declare function QuizProgress({ current, total, mode, showLabel, }: QuizProgressProps): react_jsx_runtime.JSX.Element;
|
|
1824
|
+
|
|
1825
|
+
type QuizTimerMode = "total" | "section";
|
|
1826
|
+
type QuizTimerExpireAction = "submit" | "lock" | "warn";
|
|
1827
|
+
interface QuizTimerProps {
|
|
1828
|
+
durationSec: number;
|
|
1829
|
+
mode?: QuizTimerMode;
|
|
1830
|
+
onExpire?: QuizTimerExpireAction;
|
|
1831
|
+
onExpireAction?: () => void;
|
|
1832
|
+
warnAtSec?: number;
|
|
1833
|
+
className?: string;
|
|
1834
|
+
}
|
|
1835
|
+
|
|
1836
|
+
declare function QuizTimer({ durationSec, mode, onExpire, onExpireAction, warnAtSec, }: QuizTimerProps): react_jsx_runtime.JSX.Element;
|
|
1837
|
+
|
|
1838
|
+
interface QuizNavSummaryItem {
|
|
1839
|
+
id: string;
|
|
1840
|
+
label: string;
|
|
1841
|
+
completed?: boolean;
|
|
1842
|
+
}
|
|
1843
|
+
interface QuizNavigationProps {
|
|
1844
|
+
canNext?: boolean;
|
|
1845
|
+
canPrev?: boolean;
|
|
1846
|
+
onNext: () => void;
|
|
1847
|
+
onPrev: () => void;
|
|
1848
|
+
onJump?: (id: string) => void;
|
|
1849
|
+
showSummary?: boolean;
|
|
1850
|
+
summaryItems?: QuizNavSummaryItem[];
|
|
1851
|
+
className?: string;
|
|
1852
|
+
}
|
|
1853
|
+
|
|
1854
|
+
declare function QuizNavigation({ canNext, canPrev, onNext, onPrev, onJump, showSummary, summaryItems, }: QuizNavigationProps): react_jsx_runtime.JSX.Element;
|
|
1855
|
+
|
|
1856
|
+
type QuizSubmitBarState = "idle" | "saving" | "submitting" | "success" | "error";
|
|
1857
|
+
interface QuizSubmitBarProps {
|
|
1858
|
+
onSaveDraft?: () => Promise<void>;
|
|
1859
|
+
onSubmit: () => Promise<void>;
|
|
1860
|
+
onReset?: () => void;
|
|
1861
|
+
state?: QuizSubmitBarState;
|
|
1862
|
+
error?: string;
|
|
1863
|
+
className?: string;
|
|
1864
|
+
}
|
|
1865
|
+
|
|
1866
|
+
declare function QuizSubmitBar({ onSaveDraft, onSubmit, onReset, state, error, }: QuizSubmitBarProps): react_jsx_runtime.JSX.Element;
|
|
1867
|
+
|
|
1868
|
+
type QuizResultVariant = "compact" | "detailed";
|
|
1869
|
+
interface QuizResultSummaryProps {
|
|
1870
|
+
result: QuizResult;
|
|
1871
|
+
variant?: QuizResultVariant;
|
|
1872
|
+
showAnswers?: boolean;
|
|
1873
|
+
onRetake?: () => void;
|
|
1874
|
+
className?: string;
|
|
1875
|
+
}
|
|
1876
|
+
|
|
1877
|
+
declare function QuizResultSummary({ result, variant, onRetake, }: QuizResultSummaryProps): react_jsx_runtime.JSX.Element;
|
|
1878
|
+
|
|
1879
|
+
type AnswerReviewMode = "review" | "correction";
|
|
1880
|
+
interface AnswerReviewProps {
|
|
1881
|
+
questions: Question[];
|
|
1882
|
+
answers: AnswerMap;
|
|
1883
|
+
corrections?: CorrectionMap;
|
|
1884
|
+
mode?: AnswerReviewMode;
|
|
1885
|
+
className?: string;
|
|
1886
|
+
}
|
|
1887
|
+
|
|
1888
|
+
declare function AnswerReview({ questions, answers, corrections, mode, }: AnswerReviewProps): react_jsx_runtime.JSX.Element;
|
|
1889
|
+
|
|
1890
|
+
interface ResponseTablePagination {
|
|
1891
|
+
page: number;
|
|
1892
|
+
pageSize: number;
|
|
1893
|
+
total: number;
|
|
1894
|
+
}
|
|
1895
|
+
interface ResponseTableProps {
|
|
1896
|
+
rows: ResponseRow[];
|
|
1897
|
+
columns: ColumnDef[];
|
|
1898
|
+
pagination?: ResponseTablePagination;
|
|
1899
|
+
onPageChange?: (page: number) => void;
|
|
1900
|
+
filters?: FilterDef[];
|
|
1901
|
+
onExport?: (format: "csv" | "xlsx") => void;
|
|
1902
|
+
className?: string;
|
|
1903
|
+
}
|
|
1904
|
+
|
|
1905
|
+
declare function ResponseTable({ rows, columns, pagination, onPageChange, filters, onExport, }: ResponseTableProps): react_jsx_runtime.JSX.Element;
|
|
1906
|
+
|
|
1907
|
+
type FilterFieldType = "text" | "select" | "date" | "daterange" | "tag";
|
|
1908
|
+
interface FilterFieldOption {
|
|
1909
|
+
id: string;
|
|
1910
|
+
label: string;
|
|
1911
|
+
}
|
|
1912
|
+
interface FilterField {
|
|
1913
|
+
id: string;
|
|
1914
|
+
label: string;
|
|
1915
|
+
type: FilterFieldType;
|
|
1916
|
+
options?: FilterFieldOption[];
|
|
1917
|
+
}
|
|
1918
|
+
type FilterState = Record<string, string | string[] | null>;
|
|
1919
|
+
interface FilterPreset {
|
|
1920
|
+
id: string;
|
|
1921
|
+
label: string;
|
|
1922
|
+
value: FilterState;
|
|
1923
|
+
}
|
|
1924
|
+
interface WidgetLayout {
|
|
1925
|
+
id: string;
|
|
1926
|
+
colSpan?: number;
|
|
1927
|
+
rowSpan?: number;
|
|
1928
|
+
component: React.ReactNode;
|
|
1929
|
+
}
|
|
1930
|
+
interface DistributionDataPoint {
|
|
1931
|
+
label: string;
|
|
1932
|
+
value: number;
|
|
1933
|
+
series?: Record<string, number>;
|
|
1934
|
+
}
|
|
1935
|
+
interface TrendPoint {
|
|
1936
|
+
x: string | Date;
|
|
1937
|
+
y: number;
|
|
1938
|
+
}
|
|
1939
|
+
interface TrendSeries {
|
|
1940
|
+
name: string;
|
|
1941
|
+
points: TrendPoint[];
|
|
1942
|
+
}
|
|
1943
|
+
type KPIFormat = "number" | "percent" | "currency" | "time";
|
|
1944
|
+
type TrendDirection = "up" | "down" | "flat";
|
|
1945
|
+
type AnomalyLevel = "info" | "warn" | "critical";
|
|
1946
|
+
|
|
1947
|
+
interface InsightCardItem {
|
|
1948
|
+
label: string;
|
|
1949
|
+
value: string | number;
|
|
1950
|
+
delta?: number;
|
|
1951
|
+
trend?: TrendDirection;
|
|
1952
|
+
format?: KPIFormat;
|
|
1953
|
+
}
|
|
1954
|
+
type InsightCardsVariant = "solid" | "glass";
|
|
1955
|
+
interface InsightCardsProps {
|
|
1956
|
+
items: InsightCardItem[];
|
|
1957
|
+
variant?: InsightCardsVariant;
|
|
1958
|
+
className?: string;
|
|
1959
|
+
}
|
|
1960
|
+
|
|
1961
|
+
declare function InsightCards({ items, variant }: InsightCardsProps): react_jsx_runtime.JSX.Element;
|
|
1962
|
+
|
|
1963
|
+
interface FunnelStep {
|
|
1964
|
+
id: string;
|
|
1965
|
+
label: string;
|
|
1966
|
+
started: number;
|
|
1967
|
+
completed: number;
|
|
1968
|
+
}
|
|
1969
|
+
type FunnelMode = "bar" | "step";
|
|
1970
|
+
interface SurveyFunnelProps {
|
|
1971
|
+
steps: FunnelStep[];
|
|
1972
|
+
mode?: FunnelMode;
|
|
1973
|
+
showRates?: boolean;
|
|
1974
|
+
className?: string;
|
|
1975
|
+
}
|
|
1976
|
+
|
|
1977
|
+
declare function SurveyFunnel({ steps, mode, showRates }: SurveyFunnelProps): react_jsx_runtime.JSX.Element;
|
|
1978
|
+
|
|
1979
|
+
type DistributionChartType = "bar" | "stack" | "hist";
|
|
1980
|
+
interface DistributionChartProps {
|
|
1981
|
+
data: DistributionDataPoint[];
|
|
1982
|
+
type?: DistributionChartType;
|
|
1983
|
+
normalize?: boolean;
|
|
1984
|
+
showLegend?: boolean;
|
|
1985
|
+
className?: string;
|
|
1986
|
+
}
|
|
1987
|
+
|
|
1988
|
+
declare function DistributionChart({ data, type, normalize, showLegend }: DistributionChartProps): react_jsx_runtime.JSX.Element;
|
|
1989
|
+
|
|
1990
|
+
interface HeatmapMatrixProps {
|
|
1991
|
+
rows: string[];
|
|
1992
|
+
cols: string[];
|
|
1993
|
+
values: number[][];
|
|
1994
|
+
min?: number;
|
|
1995
|
+
max?: number;
|
|
1996
|
+
showScale?: boolean;
|
|
1997
|
+
className?: string;
|
|
1998
|
+
}
|
|
1999
|
+
|
|
2000
|
+
declare function HeatmapMatrix({ rows, cols, values, min, max, showScale }: HeatmapMatrixProps): react_jsx_runtime.JSX.Element;
|
|
2001
|
+
|
|
2002
|
+
type CohortGranularity = "day" | "week" | "month";
|
|
2003
|
+
interface CohortTrendsProps {
|
|
2004
|
+
series: TrendSeries[];
|
|
2005
|
+
metric: string;
|
|
2006
|
+
granularity?: CohortGranularity;
|
|
2007
|
+
className?: string;
|
|
2008
|
+
}
|
|
2009
|
+
|
|
2010
|
+
declare function CohortTrends({ series, metric, granularity }: CohortTrendsProps): react_jsx_runtime.JSX.Element | null;
|
|
2011
|
+
|
|
2012
|
+
interface SegmentFilterBarProps {
|
|
2013
|
+
value: FilterState;
|
|
2014
|
+
onChange: (v: FilterState) => void;
|
|
2015
|
+
fields: FilterField[];
|
|
2016
|
+
presets?: FilterPreset[];
|
|
2017
|
+
className?: string;
|
|
2018
|
+
}
|
|
2019
|
+
|
|
2020
|
+
declare function SegmentFilterBar({ value, onChange, fields, presets }: SegmentFilterBarProps): react_jsx_runtime.JSX.Element;
|
|
2021
|
+
|
|
2022
|
+
interface DashboardGridProps {
|
|
2023
|
+
items: WidgetLayout[];
|
|
2024
|
+
onLayoutChange?: (layout: WidgetLayout[]) => void;
|
|
2025
|
+
cols?: number;
|
|
2026
|
+
rowHeight?: number;
|
|
2027
|
+
gap?: number;
|
|
2028
|
+
editable?: boolean;
|
|
2029
|
+
className?: string;
|
|
2030
|
+
}
|
|
2031
|
+
|
|
2032
|
+
declare function DashboardGrid({ items, onLayoutChange, cols, rowHeight, gap, editable, }: DashboardGridProps): react_jsx_runtime.JSX.Element;
|
|
2033
|
+
|
|
2034
|
+
interface KPITrendWidgetProps {
|
|
2035
|
+
title: string;
|
|
2036
|
+
value: number | string;
|
|
2037
|
+
delta?: number;
|
|
2038
|
+
target?: number;
|
|
2039
|
+
sparkline?: number[];
|
|
2040
|
+
format?: KPIFormat;
|
|
2041
|
+
timeframe?: string;
|
|
2042
|
+
loading?: boolean;
|
|
2043
|
+
className?: string;
|
|
2044
|
+
}
|
|
2045
|
+
|
|
2046
|
+
declare function KPITrendWidget({ title, value, delta, target, sparkline, format, timeframe, loading, }: KPITrendWidgetProps): react_jsx_runtime.JSX.Element;
|
|
2047
|
+
|
|
2048
|
+
interface AnomalyBadgeProps {
|
|
2049
|
+
level?: AnomalyLevel;
|
|
2050
|
+
message: string;
|
|
2051
|
+
confidence?: number;
|
|
2052
|
+
onClick?: () => void;
|
|
2053
|
+
className?: string;
|
|
2054
|
+
}
|
|
2055
|
+
|
|
2056
|
+
declare function AnomalyBadge({ level, message, confidence, onClick }: AnomalyBadgeProps): react_jsx_runtime.JSX.Element;
|
|
2057
|
+
|
|
2058
|
+
interface DrilldownPanelProps {
|
|
2059
|
+
open: boolean;
|
|
2060
|
+
onOpenChange: (v: boolean) => void;
|
|
2061
|
+
title?: string;
|
|
2062
|
+
context?: unknown;
|
|
2063
|
+
children: React.ReactNode;
|
|
2064
|
+
className?: string;
|
|
2065
|
+
}
|
|
2066
|
+
|
|
2067
|
+
declare function DrilldownPanel({ open, onOpenChange, title, children }: DrilldownPanelProps): react_jsx_runtime.JSX.Element;
|
|
2068
|
+
|
|
2069
|
+
declare function HelloBrickslab(): react_jsx_runtime.JSX.Element;
|
|
2070
|
+
|
|
2071
|
+
type ComponentsCountCardSection = {
|
|
2072
|
+
label: string;
|
|
2073
|
+
count: number;
|
|
2074
|
+
};
|
|
2075
|
+
type ComponentsCountCardProps = {
|
|
2076
|
+
count: number;
|
|
2077
|
+
subtitle?: string;
|
|
2078
|
+
variant?: "default" | "dark";
|
|
2079
|
+
animate?: boolean;
|
|
2080
|
+
sections?: ComponentsCountCardSection[];
|
|
2081
|
+
cta?: string;
|
|
2082
|
+
};
|
|
2083
|
+
|
|
2084
|
+
declare function ComponentsCountCard({ count, subtitle, variant, animate, sections, cta, }: ComponentsCountCardProps): react_jsx_runtime.JSX.Element;
|
|
2085
|
+
|
|
2086
|
+
type KpiColorScheme = "auto" | "brand" | "green" | "amber" | "red";
|
|
2087
|
+
type KpiCardProps = {
|
|
2088
|
+
label: string;
|
|
2089
|
+
value: string;
|
|
2090
|
+
helper?: string;
|
|
2091
|
+
eyebrow?: string;
|
|
2092
|
+
icon?: ReactNode;
|
|
2093
|
+
suffix?: string;
|
|
2094
|
+
progress?: number;
|
|
2095
|
+
loading?: boolean;
|
|
2096
|
+
animate?: boolean;
|
|
2097
|
+
colorScheme?: KpiColorScheme;
|
|
2098
|
+
};
|
|
2099
|
+
|
|
2100
|
+
declare function KpiCard({ label, value, helper, eyebrow, icon, suffix, progress, loading, animate, colorScheme }: KpiCardProps): react_jsx_runtime.JSX.Element;
|
|
2101
|
+
|
|
2102
|
+
type LatestComponentItem = {
|
|
2103
|
+
label: string;
|
|
2104
|
+
href?: string;
|
|
2105
|
+
section?: string;
|
|
2106
|
+
type?: "web" | "mobile";
|
|
2107
|
+
};
|
|
2108
|
+
type TestResultItem = {
|
|
2109
|
+
label: string;
|
|
2110
|
+
percent: number;
|
|
2111
|
+
};
|
|
2112
|
+
|
|
2113
|
+
type LatestComponentsListProps = {
|
|
2114
|
+
items: LatestComponentItem[];
|
|
2115
|
+
title?: string;
|
|
2116
|
+
ctaLabel?: string;
|
|
2117
|
+
ctaHref?: string;
|
|
2118
|
+
};
|
|
2119
|
+
|
|
2120
|
+
declare function LatestComponentsList({ items, title, ctaLabel, ctaHref, }: LatestComponentsListProps): react_jsx_runtime.JSX.Element;
|
|
2121
|
+
|
|
2122
|
+
type TestResultsCardProps = {
|
|
2123
|
+
results: TestResultItem[];
|
|
2124
|
+
title?: string;
|
|
2125
|
+
};
|
|
2126
|
+
|
|
2127
|
+
declare function TestResultsCard({ results, title }: TestResultsCardProps): react_jsx_runtime.JSX.Element;
|
|
2128
|
+
|
|
2129
|
+
type DashboardHeroProps = {
|
|
2130
|
+
totalComponents: number;
|
|
2131
|
+
subtitle?: string;
|
|
2132
|
+
primaryLabel?: string;
|
|
2133
|
+
primaryHref?: string;
|
|
2134
|
+
secondaryLabel?: string;
|
|
2135
|
+
secondaryHref?: string;
|
|
2136
|
+
};
|
|
2137
|
+
|
|
2138
|
+
declare function DashboardHero({ totalComponents, subtitle, primaryLabel, primaryHref, secondaryLabel, secondaryHref, }: DashboardHeroProps): react_jsx_runtime.JSX.Element;
|
|
2139
|
+
|
|
2140
|
+
export { Accordion, AccordionItem, Alert, AnimatedGradientText, AnimatedGridPattern, type AnimatedGridPatternProps, AnimatedList, type AnimatedListProps, AnimatedStack, type AnimatedStackProps, AnomalyBadge, type AnomalyBadgeProps, type AnomalyLevel, type Answer, type AnswerMap, AnswerReview, type AnswerReviewMode, type AnswerReviewProps, AppShell, AuroraText, AvatarCircles, type AvatarCirclesProps, Badge, BentoCard, type BentoCardProps, BentoGrid, BentoGridContext, type BentoGridProps, BrandSlogan, Breadcrumb, BurgerMenu, type BurgerMenuItemType, type BurgerMenuProps, type BurgerMenuSection, Button, Callout, type CalloutProps, type CalloutVariant, CarouselWithTextSection, Checkbox, CodeBlock, type CohortGranularity, CohortTrends, type CohortTrendsProps, type ColumnDef, ComponentCard, type ComponentCardProps, ComponentDetailPanel, ComponentPresentationSection, ComponentsCountCard, type ComponentsCountCardProps, type ComponentsCountCardSection, ConditionalLogic, type ConditionalLogicProps, Confetti, ConfettiButton, type ConfettiButtonProps, type ConfettiProps, CopyButton, type Correction, type CorrectionMap, DashboardGrid, type DashboardGridProps, DashboardHero, type DashboardHeroProps, DistributionChart, type DistributionChartProps, type DistributionChartType, type DistributionDataPoint, DocPageHeader, type DocPageHeaderBadge, type DocPageHeaderBadgeVariant, type DocPageHeaderProps, DotPattern, type DotPatternProps, DrilldownPanel, type DrilldownPanelProps, FeatureListSection, type FilterDef, type FilterField, type FilterFieldOption, type FilterFieldType, type FilterPreset, type FilterState, FlickeringGrid, type FlickeringGridProps, type FontAxes, FooterBar, FooterContact, FooterLegal, FooterLinks, FreeTextQuestion, type FreeTextQuestionProps, type FunnelMode, type FunnelStep, GlassAuroraBackground, type GlassAuroraBackgroundProps, GlowPulseText, GridPattern, type GridPatternProps, HeaderBar, Heading, HeatmapMatrix, type HeatmapMatrixProps, HelloBrickslab, HeroCtaSection, HyperText, Input, type InsightCardItem, InsightCards, type InsightCardsProps, type InsightCardsVariant, InteractiveGridPattern, type InteractiveGridPatternProps, IntroCard, type IntroCardProps, type KPIFormat, KPITrendWidget, type KPITrendWidgetProps, KineticUnderlineText, KpiCard, type KpiCardProps, type KpiColorScheme, type LatestComponentItem, LatestComponentsList, type LatestComponentsListProps, LightRaysBackground, type LightRaysBackgroundProps, LinkList, type LogicAction, type LogicCondition, type LogicOperator, type LogicRule, LogoMark, MagneticText, Marquee, type MarqueeProps, type MatrixCol, MatrixQuestion, type MatrixQuestionProps, type MatrixRow, type MatrixType, MediaCarousel, MediaImage, MenuTree, MultiChoice, type MultiChoiceOption, type MultiChoiceProps, type MultiChoiceVariant, type NPSLabels, NPSQuestion, type NPSQuestionProps, NoiseMeshBackground, type NoiseMeshBackgroundProps, NoiseRevealText, NumberTicker, PageHero, type PageHeroProps, type PageHeroStat, ProgressBar, type ProgressBarColorScheme, type ProgressBarProps, type ProgressBarSize, ProgressiveBlurText, ProjectDescriptionPanel, type PropDef, PropsTable, type PropsTableProps, type Question, QuestionCard, type QuestionCardProps, type QuestionIndex, type QuestionLayout, type QuestionOption, QuestionRenderer, type QuestionRendererProps, type QuestionStatus, type QuestionType, type QuizBadge, QuizBuilder, type QuizBuilderMode, type QuizBuilderProps, type QuizNavSummaryItem, QuizNavigation, type QuizNavigationProps, QuizProgress, type QuizProgressMode, type QuizProgressProps, type QuizRecommendation, type QuizResult, QuizResultSummary, type QuizResultSummaryProps, type QuizResultVariant, type QuizSchema, QuizSection, type QuizSectionProps, type QuizSectionSchema, QuizSubmitBar, type QuizSubmitBarProps, type QuizSubmitBarState, QuizTimer, type QuizTimerExpireAction, type QuizTimerMode, type QuizTimerProps, Radio, RadioGroup, RangeSliderQuestion, type RangeSliderQuestionProps, type RankOption, RankOrderQuestion, type RankOrderQuestionProps, type RatingIcon, RatingStars, type RatingStarsProps, type ReducedMotion, type ResponseRow, ResponseTable, type ResponseTablePagination, type ResponseTableProps, RetroGrid, type RetroGridProps, RippleBackground, type RippleBackgroundProps, ScaleLikert, type ScaleLikertProps, SearchBar, type SearchResult, SearchResults, type SearchResultsProps, SectionExampleCard, SectionGallery, SectionHeader, SegmentEmphasisText, type SegmentEmphasisTextProps, SegmentFilterBar, type SegmentFilterBarProps, type SegmentHighlight, Select, type SelectOption, type SelectProps, type SelectSize, ShimmerBorderText, Sidebar, type SidebarItem, SidebarNav, type SidebarProps, type SidebarSection, SingleChoice, type SingleChoiceOption, type SingleChoiceProps, type SingleChoiceVariant, SocialLinks, SocialPostCard, type SocialPostCardProps, SparklesText, Spinner, StatusLabel, StripedPattern, type StripedPatternProps, SurveyFunnel, type SurveyFunnelProps, TabPanel, Tabs, TagChip, type TestResultItem, TestResultsCard, type TestResultsCardProps, Text, TextAnimate, TextBlock, TextCard, TextHighlighter, TextReveal, Textarea, ThemeToggle, type ThemeToggleProps, ThemeToggleSimple, type ThemeToggleSimpleProps, ThemeToggler, type ThemeTogglerProps, ToggleSwitch, Tooltip, TopNav, Topbar, type TopbarProps, type TrendDirection, type TrendPoint, type TrendSeries, TypingAnimation, type ValidationResult, VariableFontWarpText, type VariableFontWarpTextProps, WarpBackground, type WarpBackgroundProps, type WidgetLayout, WordRotate };
|