@nim-ui/components 0.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.d.ts +1679 -0
- package/dist/index.js +2638 -0
- package/dist/index.js.map +1 -0
- package/dist/styles.css +2953 -0
- package/package.json +84 -0
- package/src/registry/index.json +1061 -0
- package/src/registry/schema.ts +34 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1679 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { VariantProps } from 'class-variance-authority';
|
|
4
|
+
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
5
|
+
import * as SwitchPrimitive from '@radix-ui/react-switch';
|
|
6
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
7
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
8
|
+
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
9
|
+
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
10
|
+
import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
|
|
11
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
12
|
+
import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
13
|
+
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
14
|
+
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
15
|
+
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
16
|
+
import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
|
|
17
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
18
|
+
import * as SeparatorPrimitive from '@radix-ui/react-separator';
|
|
19
|
+
import { ClassValue } from 'clsx';
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Button component with multiple variants and sizes
|
|
23
|
+
*
|
|
24
|
+
* @example
|
|
25
|
+
* // Default button
|
|
26
|
+
* <Button>Click me</Button>
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* // Button with variant and size
|
|
30
|
+
* <Button variant="outline" size="lg">Large Outline Button</Button>
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* // Destructive button
|
|
34
|
+
* <Button variant="destructive">Delete</Button>
|
|
35
|
+
*/
|
|
36
|
+
declare const buttonVariants: (props?: ({
|
|
37
|
+
variant?: "default" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
|
|
38
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
39
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
40
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
|
41
|
+
loading?: boolean;
|
|
42
|
+
}
|
|
43
|
+
declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Input component with validation states and sizes
|
|
47
|
+
*
|
|
48
|
+
* @example
|
|
49
|
+
* // Default input
|
|
50
|
+
* <Input placeholder="Enter text..." />
|
|
51
|
+
*
|
|
52
|
+
* @example
|
|
53
|
+
* // Input with error state
|
|
54
|
+
* <Input variant="error" placeholder="Invalid input" />
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* // Large success input
|
|
58
|
+
* <Input variant="success" size="lg" placeholder="Valid input" />
|
|
59
|
+
*/
|
|
60
|
+
declare const inputVariants: (props?: ({
|
|
61
|
+
variant?: "default" | "error" | "success" | null | undefined;
|
|
62
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
63
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
64
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
|
|
65
|
+
leftIcon?: React.ReactNode;
|
|
66
|
+
rightIcon?: React.ReactNode;
|
|
67
|
+
}
|
|
68
|
+
declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Textarea component with validation states and sizes
|
|
72
|
+
*
|
|
73
|
+
* @example
|
|
74
|
+
* // Default textarea
|
|
75
|
+
* <Textarea placeholder="Enter your message..." />
|
|
76
|
+
*
|
|
77
|
+
* @example
|
|
78
|
+
* // Textarea with error state
|
|
79
|
+
* <Textarea variant="error" placeholder="Invalid input" />
|
|
80
|
+
*
|
|
81
|
+
* @example
|
|
82
|
+
* // Large textarea with no resize
|
|
83
|
+
* <Textarea size="lg" resize={false} rows={6} />
|
|
84
|
+
*/
|
|
85
|
+
declare const textareaVariants: (props?: ({
|
|
86
|
+
variant?: "default" | "error" | "success" | null | undefined;
|
|
87
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
88
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
89
|
+
interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, VariantProps<typeof textareaVariants> {
|
|
90
|
+
resize?: boolean;
|
|
91
|
+
}
|
|
92
|
+
declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
93
|
+
|
|
94
|
+
/**
|
|
95
|
+
* Badge component for labels and status indicators
|
|
96
|
+
*
|
|
97
|
+
* @example
|
|
98
|
+
* // Default badge
|
|
99
|
+
* <Badge>New</Badge>
|
|
100
|
+
*
|
|
101
|
+
* @example
|
|
102
|
+
* // Outline badge with size
|
|
103
|
+
* <Badge variant="outline" size="lg">Featured</Badge>
|
|
104
|
+
*
|
|
105
|
+
* @example
|
|
106
|
+
* // Destructive badge
|
|
107
|
+
* <Badge variant="destructive">Deprecated</Badge>
|
|
108
|
+
*/
|
|
109
|
+
declare const badgeVariants: (props?: ({
|
|
110
|
+
variant?: "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
111
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
112
|
+
animate?: boolean | null | undefined;
|
|
113
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
114
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
|
|
115
|
+
}
|
|
116
|
+
declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Avatar component for displaying user profile images with fallback
|
|
120
|
+
*
|
|
121
|
+
* @example
|
|
122
|
+
* // Avatar with image
|
|
123
|
+
* <Avatar>
|
|
124
|
+
* <AvatarImage src="/user.jpg" alt="User" />
|
|
125
|
+
* <AvatarFallback>JD</AvatarFallback>
|
|
126
|
+
* </Avatar>
|
|
127
|
+
*
|
|
128
|
+
* @example
|
|
129
|
+
* // Large avatar with fallback
|
|
130
|
+
* <Avatar size="xl">
|
|
131
|
+
* <AvatarFallback>AB</AvatarFallback>
|
|
132
|
+
* </Avatar>
|
|
133
|
+
*
|
|
134
|
+
* @example
|
|
135
|
+
* // Small avatar with image
|
|
136
|
+
* <Avatar size="sm">
|
|
137
|
+
* <AvatarImage src="/profile.jpg" alt="Profile" />
|
|
138
|
+
* <AvatarFallback>U</AvatarFallback>
|
|
139
|
+
* </Avatar>
|
|
140
|
+
*/
|
|
141
|
+
declare const avatarVariants: (props?: ({
|
|
142
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
143
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
144
|
+
interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
|
|
145
|
+
}
|
|
146
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
147
|
+
declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
|
|
148
|
+
declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
149
|
+
|
|
150
|
+
/**
|
|
151
|
+
* Switch component built on Radix UI Switch
|
|
152
|
+
*
|
|
153
|
+
* @example
|
|
154
|
+
* // Basic switch
|
|
155
|
+
* <Switch id="airplane-mode" />
|
|
156
|
+
*
|
|
157
|
+
* @example
|
|
158
|
+
* // Switch with label
|
|
159
|
+
* <div className="flex items-center space-x-2">
|
|
160
|
+
* <Switch id="notifications" />
|
|
161
|
+
* <label htmlFor="notifications">Enable notifications</label>
|
|
162
|
+
* </div>
|
|
163
|
+
*
|
|
164
|
+
* @example
|
|
165
|
+
* // Controlled switch
|
|
166
|
+
* <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
|
|
167
|
+
*/
|
|
168
|
+
declare const switchVariants: (props?: ({
|
|
169
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
170
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
171
|
+
declare const switchThumbVariants: (props?: ({
|
|
172
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
173
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
174
|
+
interface SwitchProps extends React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, VariantProps<typeof switchVariants> {
|
|
175
|
+
}
|
|
176
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLButtonElement>>;
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* Container component for responsive max-width constraints
|
|
180
|
+
*
|
|
181
|
+
* @example
|
|
182
|
+
* // Default container
|
|
183
|
+
* <Container>Content here</Container>
|
|
184
|
+
*
|
|
185
|
+
* @example
|
|
186
|
+
* // Large container without padding
|
|
187
|
+
* <Container maxWidth="lg" padding={false}>Full width content</Container>
|
|
188
|
+
*
|
|
189
|
+
* @example
|
|
190
|
+
* // Small centered container
|
|
191
|
+
* <Container maxWidth="sm">Narrow content</Container>
|
|
192
|
+
*/
|
|
193
|
+
declare const containerVariants: (props?: ({
|
|
194
|
+
maxWidth?: "sm" | "md" | "lg" | "xl" | "2xl" | "full" | null | undefined;
|
|
195
|
+
padding?: boolean | null | undefined;
|
|
196
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
197
|
+
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof containerVariants> {
|
|
198
|
+
}
|
|
199
|
+
declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
|
|
200
|
+
|
|
201
|
+
/**
|
|
202
|
+
* Grid component for responsive CSS Grid layouts
|
|
203
|
+
*
|
|
204
|
+
* @example
|
|
205
|
+
* // 3-column grid
|
|
206
|
+
* <Grid cols={3} gap="md">
|
|
207
|
+
* <div>Item 1</div>
|
|
208
|
+
* <div>Item 2</div>
|
|
209
|
+
* <div>Item 3</div>
|
|
210
|
+
* </Grid>
|
|
211
|
+
*
|
|
212
|
+
* @example
|
|
213
|
+
* // Responsive 4-column grid
|
|
214
|
+
* <Grid cols={4} gap="lg" responsive>
|
|
215
|
+
* {items.map(item => <Card key={item.id} />)}
|
|
216
|
+
* </Grid>
|
|
217
|
+
*/
|
|
218
|
+
declare const gridVariants: (props?: ({
|
|
219
|
+
cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | null | undefined;
|
|
220
|
+
gap?: "sm" | "md" | "lg" | "xl" | "none" | null | undefined;
|
|
221
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
222
|
+
interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {
|
|
223
|
+
}
|
|
224
|
+
declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
|
|
225
|
+
|
|
226
|
+
/**
|
|
227
|
+
* Stack component for vertical or horizontal stacking with consistent spacing
|
|
228
|
+
*
|
|
229
|
+
* @example
|
|
230
|
+
* // Vertical stack
|
|
231
|
+
* <Stack spacing="md">
|
|
232
|
+
* <div>Item 1</div>
|
|
233
|
+
* <div>Item 2</div>
|
|
234
|
+
* </Stack>
|
|
235
|
+
*
|
|
236
|
+
* @example
|
|
237
|
+
* // Horizontal stack
|
|
238
|
+
* <Stack direction="horizontal" spacing="lg" align="center">
|
|
239
|
+
* <Button>Action 1</Button>
|
|
240
|
+
* <Button>Action 2</Button>
|
|
241
|
+
* </Stack>
|
|
242
|
+
*/
|
|
243
|
+
declare const stackVariants: (props?: ({
|
|
244
|
+
direction?: "horizontal" | "vertical" | null | undefined;
|
|
245
|
+
spacing?: "sm" | "md" | "lg" | "xl" | "none" | "xs" | null | undefined;
|
|
246
|
+
align?: "center" | "start" | "end" | "stretch" | null | undefined;
|
|
247
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
248
|
+
interface StackProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof stackVariants> {
|
|
249
|
+
}
|
|
250
|
+
declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* Flex component for common flexbox layout patterns
|
|
254
|
+
*
|
|
255
|
+
* @example
|
|
256
|
+
* // Space between
|
|
257
|
+
* <Flex justify="between" align="center">
|
|
258
|
+
* <span>Left</span>
|
|
259
|
+
* <span>Right</span>
|
|
260
|
+
* </Flex>
|
|
261
|
+
*
|
|
262
|
+
* @example
|
|
263
|
+
* // Centered column
|
|
264
|
+
* <Flex direction="column" justify="center" align="center">
|
|
265
|
+
* <h1>Title</h1>
|
|
266
|
+
* <p>Description</p>
|
|
267
|
+
* </Flex>
|
|
268
|
+
*/
|
|
269
|
+
declare const flexVariants: (props?: ({
|
|
270
|
+
direction?: "row" | "column" | "row-reverse" | "column-reverse" | null | undefined;
|
|
271
|
+
justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | null | undefined;
|
|
272
|
+
align?: "center" | "start" | "end" | "stretch" | "baseline" | null | undefined;
|
|
273
|
+
wrap?: boolean | null | undefined;
|
|
274
|
+
gap?: "sm" | "md" | "lg" | "xl" | "none" | "xs" | null | undefined;
|
|
275
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
276
|
+
interface FlexProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof flexVariants> {
|
|
277
|
+
}
|
|
278
|
+
declare const Flex: React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>>;
|
|
279
|
+
|
|
280
|
+
/**
|
|
281
|
+
* Spacer component for flexible spacing
|
|
282
|
+
*
|
|
283
|
+
* @example
|
|
284
|
+
* // Fixed spacer
|
|
285
|
+
* <Spacer size="md" />
|
|
286
|
+
*
|
|
287
|
+
* @example
|
|
288
|
+
* // Flex spacer (pushes siblings apart)
|
|
289
|
+
* <Flex>
|
|
290
|
+
* <div>Left</div>
|
|
291
|
+
* <Spacer flex />
|
|
292
|
+
* <div>Right</div>
|
|
293
|
+
* </Flex>
|
|
294
|
+
*/
|
|
295
|
+
declare const spacerVariants: (props?: ({
|
|
296
|
+
size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
|
|
297
|
+
flex?: boolean | null | undefined;
|
|
298
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
299
|
+
interface SpacerProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof spacerVariants> {
|
|
300
|
+
}
|
|
301
|
+
declare const Spacer: React.ForwardRefExoticComponent<SpacerProps & React.RefAttributes<HTMLDivElement>>;
|
|
302
|
+
|
|
303
|
+
/**
|
|
304
|
+
* Card component with header, content, and footer sections
|
|
305
|
+
*
|
|
306
|
+
* @example
|
|
307
|
+
* // Basic card
|
|
308
|
+
* <Card>
|
|
309
|
+
* <CardContent>Card content here</CardContent>
|
|
310
|
+
* </Card>
|
|
311
|
+
*
|
|
312
|
+
* @example
|
|
313
|
+
* // Full card with all sections
|
|
314
|
+
* <Card>
|
|
315
|
+
* <CardHeader>
|
|
316
|
+
* <h3>Card Title</h3>
|
|
317
|
+
* </CardHeader>
|
|
318
|
+
* <CardContent>
|
|
319
|
+
* <p>Card content goes here</p>
|
|
320
|
+
* </CardContent>
|
|
321
|
+
* <CardFooter>
|
|
322
|
+
* <button>Action</button>
|
|
323
|
+
* </CardFooter>
|
|
324
|
+
* </Card>
|
|
325
|
+
*
|
|
326
|
+
* @example
|
|
327
|
+
* // Card with custom styling
|
|
328
|
+
* <Card className="max-w-md">
|
|
329
|
+
* <CardHeader>Featured Content</CardHeader>
|
|
330
|
+
* <CardContent>This is a featured card</CardContent>
|
|
331
|
+
* </Card>
|
|
332
|
+
*/
|
|
333
|
+
declare const cardVariants: (props?: ({
|
|
334
|
+
variant?: "default" | "ghost" | "outlined" | "elevated" | null | undefined;
|
|
335
|
+
hoverable?: boolean | null | undefined;
|
|
336
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
337
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
338
|
+
}
|
|
339
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
340
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
341
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
342
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
343
|
+
|
|
344
|
+
/**
|
|
345
|
+
* Modal component built on Radix UI Dialog
|
|
346
|
+
*
|
|
347
|
+
* @example
|
|
348
|
+
* // Basic modal
|
|
349
|
+
* <Modal>
|
|
350
|
+
* <ModalTrigger>Open Modal</ModalTrigger>
|
|
351
|
+
* <ModalContent>
|
|
352
|
+
* <ModalHeader>
|
|
353
|
+
* <ModalTitle>Modal Title</ModalTitle>
|
|
354
|
+
* </ModalHeader>
|
|
355
|
+
* <ModalBody>Modal content goes here</ModalBody>
|
|
356
|
+
* </ModalContent>
|
|
357
|
+
* </Modal>
|
|
358
|
+
*
|
|
359
|
+
* @example
|
|
360
|
+
* // Modal with description
|
|
361
|
+
* <Modal>
|
|
362
|
+
* <ModalTrigger>Open</ModalTrigger>
|
|
363
|
+
* <ModalContent>
|
|
364
|
+
* <ModalHeader>
|
|
365
|
+
* <ModalTitle>Confirm Action</ModalTitle>
|
|
366
|
+
* <ModalDescription>Are you sure you want to proceed?</ModalDescription>
|
|
367
|
+
* </ModalHeader>
|
|
368
|
+
* <ModalBody>Additional details here</ModalBody>
|
|
369
|
+
* </ModalContent>
|
|
370
|
+
* </Modal>
|
|
371
|
+
*/
|
|
372
|
+
declare const Modal: React.FC<DialogPrimitive.DialogProps>;
|
|
373
|
+
declare const ModalTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
374
|
+
declare const ModalPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
375
|
+
declare const ModalClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
376
|
+
declare const ModalOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
377
|
+
declare const modalContentVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
378
|
+
interface ModalContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof modalContentVariants> {
|
|
379
|
+
}
|
|
380
|
+
declare const ModalContent: React.ForwardRefExoticComponent<ModalContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
381
|
+
declare const ModalHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
382
|
+
declare const ModalBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
383
|
+
declare const ModalTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
384
|
+
declare const ModalDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
385
|
+
|
|
386
|
+
/**
|
|
387
|
+
* Drawer component that slides in from the side
|
|
388
|
+
*
|
|
389
|
+
* @example
|
|
390
|
+
* // Right drawer
|
|
391
|
+
* <Drawer>
|
|
392
|
+
* <DrawerTrigger>Open Drawer</DrawerTrigger>
|
|
393
|
+
* <DrawerContent>
|
|
394
|
+
* <DrawerHeader>
|
|
395
|
+
* <DrawerTitle>Drawer Title</DrawerTitle>
|
|
396
|
+
* </DrawerHeader>
|
|
397
|
+
* <DrawerBody>Drawer content here</DrawerBody>
|
|
398
|
+
* </DrawerContent>
|
|
399
|
+
* </Drawer>
|
|
400
|
+
*
|
|
401
|
+
* @example
|
|
402
|
+
* // Left drawer
|
|
403
|
+
* <Drawer>
|
|
404
|
+
* <DrawerTrigger>Menu</DrawerTrigger>
|
|
405
|
+
* <DrawerContent side="left">
|
|
406
|
+
* <DrawerHeader>
|
|
407
|
+
* <DrawerTitle>Navigation</DrawerTitle>
|
|
408
|
+
* </DrawerHeader>
|
|
409
|
+
* <DrawerBody>Menu items here</DrawerBody>
|
|
410
|
+
* </DrawerContent>
|
|
411
|
+
* </Drawer>
|
|
412
|
+
*/
|
|
413
|
+
declare const Drawer: React.FC<DialogPrimitive.DialogProps>;
|
|
414
|
+
declare const DrawerTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
415
|
+
declare const DrawerPortal: React.FC<DialogPrimitive.DialogPortalProps>;
|
|
416
|
+
declare const DrawerClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
417
|
+
declare const DrawerOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
418
|
+
declare const drawerContentVariants: (props?: ({
|
|
419
|
+
side?: "left" | "right" | null | undefined;
|
|
420
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
421
|
+
interface DrawerContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof drawerContentVariants> {
|
|
422
|
+
}
|
|
423
|
+
declare const DrawerContent: React.ForwardRefExoticComponent<DrawerContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
424
|
+
declare const DrawerHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
425
|
+
declare const DrawerBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
426
|
+
declare const DrawerTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
427
|
+
declare const DrawerDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
428
|
+
|
|
429
|
+
/**
|
|
430
|
+
* Tabs component for organizing content into switchable panels
|
|
431
|
+
*
|
|
432
|
+
* @example
|
|
433
|
+
* // Basic tabs
|
|
434
|
+
* <Tabs defaultValue="tab1">
|
|
435
|
+
* <TabsList>
|
|
436
|
+
* <TabsTrigger value="tab1">Tab 1</TabsTrigger>
|
|
437
|
+
* <TabsTrigger value="tab2">Tab 2</TabsTrigger>
|
|
438
|
+
* </TabsList>
|
|
439
|
+
* <TabsContent value="tab1">Content 1</TabsContent>
|
|
440
|
+
* <TabsContent value="tab2">Content 2</TabsContent>
|
|
441
|
+
* </Tabs>
|
|
442
|
+
*
|
|
443
|
+
* @example
|
|
444
|
+
* // Tabs with multiple panels
|
|
445
|
+
* <Tabs defaultValue="overview">
|
|
446
|
+
* <TabsList>
|
|
447
|
+
* <TabsTrigger value="overview">Overview</TabsTrigger>
|
|
448
|
+
* <TabsTrigger value="details">Details</TabsTrigger>
|
|
449
|
+
* <TabsTrigger value="settings">Settings</TabsTrigger>
|
|
450
|
+
* </TabsList>
|
|
451
|
+
* <TabsContent value="overview">Overview content</TabsContent>
|
|
452
|
+
* <TabsContent value="details">Details content</TabsContent>
|
|
453
|
+
* <TabsContent value="settings">Settings content</TabsContent>
|
|
454
|
+
* </Tabs>
|
|
455
|
+
*/
|
|
456
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
|
|
457
|
+
declare const tabsListVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
458
|
+
interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
|
|
459
|
+
}
|
|
460
|
+
declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
461
|
+
declare const tabsTriggerVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
462
|
+
interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, VariantProps<typeof tabsTriggerVariants> {
|
|
463
|
+
}
|
|
464
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
465
|
+
declare const tabsContentVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
466
|
+
interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>, VariantProps<typeof tabsContentVariants> {
|
|
467
|
+
}
|
|
468
|
+
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
469
|
+
|
|
470
|
+
/**
|
|
471
|
+
* DataCard component for displaying metrics with optional trend indicators
|
|
472
|
+
*
|
|
473
|
+
* @example
|
|
474
|
+
* // Basic data card
|
|
475
|
+
* <DataCard value="1,234" label="Total Users" />
|
|
476
|
+
*
|
|
477
|
+
* @example
|
|
478
|
+
* // Data card with trend
|
|
479
|
+
* <DataCard value="$45,231" label="Revenue" trend="+12.5%" trendDirection="up" />
|
|
480
|
+
*
|
|
481
|
+
* @example
|
|
482
|
+
* // Data card with description
|
|
483
|
+
* <DataCard
|
|
484
|
+
* value="98.5%"
|
|
485
|
+
* label="Uptime"
|
|
486
|
+
* description="Last 30 days"
|
|
487
|
+
* trend="+2.3%"
|
|
488
|
+
* trendDirection="up"
|
|
489
|
+
* />
|
|
490
|
+
*/
|
|
491
|
+
declare const dataCardVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
492
|
+
interface DataCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof dataCardVariants> {
|
|
493
|
+
value: string | number;
|
|
494
|
+
label: string;
|
|
495
|
+
description?: string;
|
|
496
|
+
trend?: string;
|
|
497
|
+
trendDirection?: 'up' | 'down' | 'neutral';
|
|
498
|
+
}
|
|
499
|
+
declare const DataCard: React.ForwardRefExoticComponent<DataCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
500
|
+
|
|
501
|
+
/**
|
|
502
|
+
* DataTable component for displaying tabular data
|
|
503
|
+
*
|
|
504
|
+
* @example
|
|
505
|
+
* // Basic table
|
|
506
|
+
* <DataTable>
|
|
507
|
+
* <DataTableHeader>
|
|
508
|
+
* <DataTableRow>
|
|
509
|
+
* <DataTableHead>Name</DataTableHead>
|
|
510
|
+
* <DataTableHead>Status</DataTableHead>
|
|
511
|
+
* </DataTableRow>
|
|
512
|
+
* </DataTableHeader>
|
|
513
|
+
* <DataTableBody>
|
|
514
|
+
* <DataTableRow>
|
|
515
|
+
* <DataTableCell>John Doe</DataTableCell>
|
|
516
|
+
* <DataTableCell>Active</DataTableCell>
|
|
517
|
+
* </DataTableRow>
|
|
518
|
+
* </DataTableBody>
|
|
519
|
+
* </DataTable>
|
|
520
|
+
*
|
|
521
|
+
* @example
|
|
522
|
+
* // Table with footer
|
|
523
|
+
* <DataTable>
|
|
524
|
+
* <DataTableHeader>
|
|
525
|
+
* <DataTableRow>
|
|
526
|
+
* <DataTableHead>Product</DataTableHead>
|
|
527
|
+
* <DataTableHead>Price</DataTableHead>
|
|
528
|
+
* </DataTableRow>
|
|
529
|
+
* </DataTableHeader>
|
|
530
|
+
* <DataTableBody>
|
|
531
|
+
* <DataTableRow>
|
|
532
|
+
* <DataTableCell>Item 1</DataTableCell>
|
|
533
|
+
* <DataTableCell>$100</DataTableCell>
|
|
534
|
+
* </DataTableRow>
|
|
535
|
+
* </DataTableBody>
|
|
536
|
+
* <DataTableFooter>
|
|
537
|
+
* <DataTableRow>
|
|
538
|
+
* <DataTableCell>Total</DataTableCell>
|
|
539
|
+
* <DataTableCell>$100</DataTableCell>
|
|
540
|
+
* </DataTableRow>
|
|
541
|
+
* </DataTableFooter>
|
|
542
|
+
* </DataTable>
|
|
543
|
+
*/
|
|
544
|
+
declare const dataTableVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
545
|
+
interface DataTableProps extends React.TableHTMLAttributes<HTMLTableElement>, VariantProps<typeof dataTableVariants> {
|
|
546
|
+
}
|
|
547
|
+
declare const DataTable: React.ForwardRefExoticComponent<DataTableProps & React.RefAttributes<HTMLTableElement>>;
|
|
548
|
+
declare const DataTableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
549
|
+
declare const DataTableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
550
|
+
declare const DataTableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
|
|
551
|
+
declare const DataTableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
|
|
552
|
+
declare const DataTableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
553
|
+
declare const DataTableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
|
|
554
|
+
|
|
555
|
+
/**
|
|
556
|
+
* Stat component for displaying simple statistics
|
|
557
|
+
*
|
|
558
|
+
* @example
|
|
559
|
+
* // Basic stat
|
|
560
|
+
* <Stat value="1,234" label="Total Users" />
|
|
561
|
+
*
|
|
562
|
+
* @example
|
|
563
|
+
* // Stat with custom styling
|
|
564
|
+
* <Stat value="98%" label="Success Rate" className="text-green-600" />
|
|
565
|
+
*
|
|
566
|
+
* @example
|
|
567
|
+
* // Multiple stats in a group
|
|
568
|
+
* <div className="grid grid-cols-3 gap-4">
|
|
569
|
+
* <Stat value="1.2K" label="Followers" />
|
|
570
|
+
* <Stat value="456" label="Following" />
|
|
571
|
+
* <Stat value="89" label="Posts" />
|
|
572
|
+
* </div>
|
|
573
|
+
*/
|
|
574
|
+
declare const statVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
575
|
+
interface StatProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statVariants> {
|
|
576
|
+
value: string | number;
|
|
577
|
+
label: string;
|
|
578
|
+
}
|
|
579
|
+
declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
|
|
580
|
+
|
|
581
|
+
/**
|
|
582
|
+
* ProductCard component for displaying product information
|
|
583
|
+
*
|
|
584
|
+
* @example
|
|
585
|
+
* // Basic product card
|
|
586
|
+
* <ProductCard
|
|
587
|
+
* image="/product.jpg"
|
|
588
|
+
* title="Premium Headphones"
|
|
589
|
+
* price="$199.99"
|
|
590
|
+
* />
|
|
591
|
+
*
|
|
592
|
+
* @example
|
|
593
|
+
* // Product card with description
|
|
594
|
+
* <ProductCard
|
|
595
|
+
* image="/laptop.jpg"
|
|
596
|
+
* title="MacBook Pro"
|
|
597
|
+
* price="$1,999"
|
|
598
|
+
* description="Powerful laptop with M2 chip"
|
|
599
|
+
* />
|
|
600
|
+
*
|
|
601
|
+
* @example
|
|
602
|
+
* // Product card with custom action
|
|
603
|
+
* <ProductCard
|
|
604
|
+
* image="/shirt.jpg"
|
|
605
|
+
* title="Cotton T-Shirt"
|
|
606
|
+
* price="$29.99"
|
|
607
|
+
* description="Comfortable everyday wear"
|
|
608
|
+
* action={<button>Add to Cart</button>}
|
|
609
|
+
* />
|
|
610
|
+
*/
|
|
611
|
+
declare const productCardVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
612
|
+
interface ProductCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof productCardVariants> {
|
|
613
|
+
image: string;
|
|
614
|
+
title: string;
|
|
615
|
+
price: string | number;
|
|
616
|
+
description?: string;
|
|
617
|
+
action?: React.ReactNode;
|
|
618
|
+
imageAlt?: string;
|
|
619
|
+
}
|
|
620
|
+
declare const ProductCard: React.ForwardRefExoticComponent<ProductCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
621
|
+
|
|
622
|
+
/**
|
|
623
|
+
* CartItem component for displaying items in a shopping cart
|
|
624
|
+
*
|
|
625
|
+
* @example
|
|
626
|
+
* // Basic cart item
|
|
627
|
+
* <CartItem
|
|
628
|
+
* image="/product.jpg"
|
|
629
|
+
* title="Premium Headphones"
|
|
630
|
+
* price="$199.99"
|
|
631
|
+
* quantity={1}
|
|
632
|
+
* onRemove={() => console.log('Remove item')}
|
|
633
|
+
* />
|
|
634
|
+
*
|
|
635
|
+
* @example
|
|
636
|
+
* // Cart item with quantity control
|
|
637
|
+
* <CartItem
|
|
638
|
+
* image="/laptop.jpg"
|
|
639
|
+
* title="MacBook Pro"
|
|
640
|
+
* price="$1,999"
|
|
641
|
+
* quantity={2}
|
|
642
|
+
* onQuantityChange={(qty) => console.log('New quantity:', qty)}
|
|
643
|
+
* onRemove={() => console.log('Remove item')}
|
|
644
|
+
* />
|
|
645
|
+
*
|
|
646
|
+
* @example
|
|
647
|
+
* // Cart item with variant
|
|
648
|
+
* <CartItem
|
|
649
|
+
* image="/shirt.jpg"
|
|
650
|
+
* title="Cotton T-Shirt"
|
|
651
|
+
* price="$29.99"
|
|
652
|
+
* quantity={3}
|
|
653
|
+
* variant="Size: L, Color: Blue"
|
|
654
|
+
* onRemove={() => console.log('Remove item')}
|
|
655
|
+
* />
|
|
656
|
+
*/
|
|
657
|
+
declare const cartItemVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
658
|
+
interface CartItemProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cartItemVariants> {
|
|
659
|
+
image: string;
|
|
660
|
+
title: string;
|
|
661
|
+
price: string | number;
|
|
662
|
+
quantity: number;
|
|
663
|
+
variant?: string;
|
|
664
|
+
imageAlt?: string;
|
|
665
|
+
onRemove?: () => void;
|
|
666
|
+
onQuantityChange?: (quantity: number) => void;
|
|
667
|
+
}
|
|
668
|
+
declare const CartItem: React.ForwardRefExoticComponent<CartItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
669
|
+
|
|
670
|
+
/**
|
|
671
|
+
* PriceTag component for displaying prices with optional discounts
|
|
672
|
+
*
|
|
673
|
+
* @example
|
|
674
|
+
* // Basic price
|
|
675
|
+
* <PriceTag price="$99.99" />
|
|
676
|
+
*
|
|
677
|
+
* @example
|
|
678
|
+
* // Price with discount
|
|
679
|
+
* <PriceTag price="$79.99" originalPrice="$99.99" />
|
|
680
|
+
*
|
|
681
|
+
* @example
|
|
682
|
+
* // Large price with discount percentage
|
|
683
|
+
* <PriceTag
|
|
684
|
+
* price="$799"
|
|
685
|
+
* originalPrice="$999"
|
|
686
|
+
* discountPercent="20%"
|
|
687
|
+
* size="lg"
|
|
688
|
+
* />
|
|
689
|
+
*/
|
|
690
|
+
declare const priceTagVariants: (props?: ({
|
|
691
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
692
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
693
|
+
interface PriceTagProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof priceTagVariants> {
|
|
694
|
+
price: string | number;
|
|
695
|
+
originalPrice?: string | number;
|
|
696
|
+
discountPercent?: string;
|
|
697
|
+
}
|
|
698
|
+
declare const PriceTag: React.ForwardRefExoticComponent<PriceTagProps & React.RefAttributes<HTMLDivElement>>;
|
|
699
|
+
|
|
700
|
+
/**
|
|
701
|
+
* QuantitySelector component for selecting product quantities
|
|
702
|
+
*
|
|
703
|
+
* @example
|
|
704
|
+
* // Basic quantity selector
|
|
705
|
+
* <QuantitySelector value={1} onChange={(qty) => console.log(qty)} />
|
|
706
|
+
*
|
|
707
|
+
* @example
|
|
708
|
+
* // Quantity selector with min/max
|
|
709
|
+
* <QuantitySelector
|
|
710
|
+
* value={5}
|
|
711
|
+
* min={1}
|
|
712
|
+
* max={10}
|
|
713
|
+
* onChange={(qty) => console.log(qty)}
|
|
714
|
+
* />
|
|
715
|
+
*
|
|
716
|
+
* @example
|
|
717
|
+
* // Large quantity selector
|
|
718
|
+
* <QuantitySelector
|
|
719
|
+
* value={3}
|
|
720
|
+
* size="lg"
|
|
721
|
+
* onChange={(qty) => console.log(qty)}
|
|
722
|
+
* />
|
|
723
|
+
*/
|
|
724
|
+
declare const quantitySelectorVariants: (props?: ({
|
|
725
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
726
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
727
|
+
interface QuantitySelectorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>, VariantProps<typeof quantitySelectorVariants> {
|
|
728
|
+
value: number;
|
|
729
|
+
min?: number;
|
|
730
|
+
max?: number;
|
|
731
|
+
onChange?: (value: number) => void;
|
|
732
|
+
}
|
|
733
|
+
declare const QuantitySelector: React.ForwardRefExoticComponent<QuantitySelectorProps & React.RefAttributes<HTMLDivElement>>;
|
|
734
|
+
|
|
735
|
+
/**
|
|
736
|
+
* Hero component for landing page headers
|
|
737
|
+
*
|
|
738
|
+
* @example
|
|
739
|
+
* // Basic hero
|
|
740
|
+
* <Hero
|
|
741
|
+
* title="Welcome to Our Platform"
|
|
742
|
+
* subtitle="Build amazing things with our tools"
|
|
743
|
+
* />
|
|
744
|
+
*
|
|
745
|
+
* @example
|
|
746
|
+
* // Hero with CTA buttons
|
|
747
|
+
* <Hero
|
|
748
|
+
* title="Transform Your Business"
|
|
749
|
+
* subtitle="Get started today with our innovative solutions"
|
|
750
|
+
* primaryCta={{ label: "Get Started", onClick: () => {} }}
|
|
751
|
+
* secondaryCta={{ label: "Learn More", onClick: () => {} }}
|
|
752
|
+
* />
|
|
753
|
+
*
|
|
754
|
+
* @example
|
|
755
|
+
* // Hero with background image
|
|
756
|
+
* <Hero
|
|
757
|
+
* title="Beautiful Design"
|
|
758
|
+
* subtitle="Experience the future"
|
|
759
|
+
* backgroundImage="/hero-bg.jpg"
|
|
760
|
+
* primaryCta={{ label: "Try Now", onClick: () => {} }}
|
|
761
|
+
* />
|
|
762
|
+
*/
|
|
763
|
+
declare const heroVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
764
|
+
interface HeroProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof heroVariants> {
|
|
765
|
+
title: string;
|
|
766
|
+
subtitle?: string;
|
|
767
|
+
primaryCta?: {
|
|
768
|
+
label: string;
|
|
769
|
+
onClick?: () => void;
|
|
770
|
+
href?: string;
|
|
771
|
+
};
|
|
772
|
+
secondaryCta?: {
|
|
773
|
+
label: string;
|
|
774
|
+
onClick?: () => void;
|
|
775
|
+
href?: string;
|
|
776
|
+
};
|
|
777
|
+
backgroundImage?: string;
|
|
778
|
+
}
|
|
779
|
+
declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLDivElement>>;
|
|
780
|
+
|
|
781
|
+
/**
|
|
782
|
+
* FeatureGrid component for displaying features in a grid layout
|
|
783
|
+
*
|
|
784
|
+
* @example
|
|
785
|
+
* // Basic feature grid
|
|
786
|
+
* <FeatureGrid>
|
|
787
|
+
* <FeatureCard
|
|
788
|
+
* icon={<Icon />}
|
|
789
|
+
* title="Fast Performance"
|
|
790
|
+
* description="Lightning fast load times"
|
|
791
|
+
* />
|
|
792
|
+
* <FeatureCard
|
|
793
|
+
* icon={<Icon />}
|
|
794
|
+
* title="Secure"
|
|
795
|
+
* description="Enterprise-grade security"
|
|
796
|
+
* />
|
|
797
|
+
* </FeatureGrid>
|
|
798
|
+
*
|
|
799
|
+
* @example
|
|
800
|
+
* // Feature grid with custom columns
|
|
801
|
+
* <FeatureGrid columns={4}>
|
|
802
|
+
* <FeatureCard icon={<Icon />} title="Feature 1" description="Description 1" />
|
|
803
|
+
* <FeatureCard icon={<Icon />} title="Feature 2" description="Description 2" />
|
|
804
|
+
* <FeatureCard icon={<Icon />} title="Feature 3" description="Description 3" />
|
|
805
|
+
* <FeatureCard icon={<Icon />} title="Feature 4" description="Description 4" />
|
|
806
|
+
* </FeatureGrid>
|
|
807
|
+
*/
|
|
808
|
+
declare const featureGridVariants: (props?: ({
|
|
809
|
+
columns?: 2 | 3 | 4 | null | undefined;
|
|
810
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
811
|
+
interface FeatureGridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof featureGridVariants> {
|
|
812
|
+
}
|
|
813
|
+
declare const FeatureGrid: React.ForwardRefExoticComponent<FeatureGridProps & React.RefAttributes<HTMLDivElement>>;
|
|
814
|
+
declare const featureCardVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
815
|
+
interface FeatureCardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof featureCardVariants> {
|
|
816
|
+
icon?: React.ReactNode;
|
|
817
|
+
title: string;
|
|
818
|
+
description: string;
|
|
819
|
+
}
|
|
820
|
+
declare const FeatureCard: React.ForwardRefExoticComponent<FeatureCardProps & React.RefAttributes<HTMLDivElement>>;
|
|
821
|
+
|
|
822
|
+
/**
|
|
823
|
+
* CTA (Call to Action) component for landing pages
|
|
824
|
+
*
|
|
825
|
+
* @example
|
|
826
|
+
* // Basic CTA
|
|
827
|
+
* <CTA
|
|
828
|
+
* title="Ready to get started?"
|
|
829
|
+
* description="Join thousands of satisfied customers"
|
|
830
|
+
* buttonText="Sign Up Now"
|
|
831
|
+
* onButtonClick={() => console.log('clicked')}
|
|
832
|
+
* />
|
|
833
|
+
*
|
|
834
|
+
* @example
|
|
835
|
+
* // CTA with custom styling
|
|
836
|
+
* <CTA
|
|
837
|
+
* title="Start Your Free Trial"
|
|
838
|
+
* description="No credit card required"
|
|
839
|
+
* buttonText="Try for Free"
|
|
840
|
+
* buttonHref="/signup"
|
|
841
|
+
* variant="primary"
|
|
842
|
+
* />
|
|
843
|
+
*
|
|
844
|
+
* @example
|
|
845
|
+
* // CTA with secondary action
|
|
846
|
+
* <CTA
|
|
847
|
+
* title="Boost Your Productivity"
|
|
848
|
+
* description="Join our community today"
|
|
849
|
+
* buttonText="Get Started"
|
|
850
|
+
* onButtonClick={() => {}}
|
|
851
|
+
* secondaryAction={<a href="/learn-more">Learn More</a>}
|
|
852
|
+
* />
|
|
853
|
+
*/
|
|
854
|
+
declare const ctaVariants: (props?: ({
|
|
855
|
+
variant?: "default" | "primary" | "gradient" | null | undefined;
|
|
856
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
857
|
+
interface CTAProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof ctaVariants> {
|
|
858
|
+
title: string;
|
|
859
|
+
description?: string;
|
|
860
|
+
buttonText: string;
|
|
861
|
+
buttonHref?: string;
|
|
862
|
+
onButtonClick?: () => void;
|
|
863
|
+
secondaryAction?: React.ReactNode;
|
|
864
|
+
}
|
|
865
|
+
declare const CTA: React.ForwardRefExoticComponent<CTAProps & React.RefAttributes<HTMLDivElement>>;
|
|
866
|
+
|
|
867
|
+
/**
|
|
868
|
+
* Testimonial component for displaying customer reviews
|
|
869
|
+
*
|
|
870
|
+
* @example
|
|
871
|
+
* // Basic testimonial
|
|
872
|
+
* <Testimonial
|
|
873
|
+
* quote="This product changed my life!"
|
|
874
|
+
* author="John Doe"
|
|
875
|
+
* />
|
|
876
|
+
*
|
|
877
|
+
* @example
|
|
878
|
+
* // Testimonial with avatar and company
|
|
879
|
+
* <Testimonial
|
|
880
|
+
* quote="Excellent service and support. Highly recommended!"
|
|
881
|
+
* author="Jane Smith"
|
|
882
|
+
* company="Acme Corp"
|
|
883
|
+
* avatar="/avatar.jpg"
|
|
884
|
+
* />
|
|
885
|
+
*
|
|
886
|
+
* @example
|
|
887
|
+
* // Testimonial with role
|
|
888
|
+
* <Testimonial
|
|
889
|
+
* quote="The best tool we've ever used for our team."
|
|
890
|
+
* author="Mike Johnson"
|
|
891
|
+
* role="CEO"
|
|
892
|
+
* company="TechStart Inc"
|
|
893
|
+
* avatar="/mike.jpg"
|
|
894
|
+
* />
|
|
895
|
+
*/
|
|
896
|
+
declare const testimonialVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
897
|
+
interface TestimonialProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof testimonialVariants> {
|
|
898
|
+
quote: string;
|
|
899
|
+
author: string;
|
|
900
|
+
role?: string;
|
|
901
|
+
company?: string;
|
|
902
|
+
avatar?: string;
|
|
903
|
+
}
|
|
904
|
+
declare const Testimonial: React.ForwardRefExoticComponent<TestimonialProps & React.RefAttributes<HTMLDivElement>>;
|
|
905
|
+
|
|
906
|
+
/**
|
|
907
|
+
* Form component wrapper for form elements
|
|
908
|
+
*
|
|
909
|
+
* @example
|
|
910
|
+
* // Basic form
|
|
911
|
+
* <Form onSubmit={(e) => e.preventDefault()}>
|
|
912
|
+
* <input type="text" />
|
|
913
|
+
* <button type="submit">Submit</button>
|
|
914
|
+
* </Form>
|
|
915
|
+
*
|
|
916
|
+
* @example
|
|
917
|
+
* // Form with spacing
|
|
918
|
+
* <Form className="space-y-4">
|
|
919
|
+
* <FormField label="Name" name="name">
|
|
920
|
+
* <Input type="text" />
|
|
921
|
+
* </FormField>
|
|
922
|
+
* <Button type="submit">Submit</Button>
|
|
923
|
+
* </Form>
|
|
924
|
+
*
|
|
925
|
+
* @example
|
|
926
|
+
* // Controlled form with error handling
|
|
927
|
+
* <Form onSubmit={handleSubmit}>
|
|
928
|
+
* <FormField label="Email" name="email" error={errors.email}>
|
|
929
|
+
* <Input type="email" />
|
|
930
|
+
* </FormField>
|
|
931
|
+
* <FormField label="Password" name="password" error={errors.password}>
|
|
932
|
+
* <Input type="password" />
|
|
933
|
+
* </FormField>
|
|
934
|
+
* <Button type="submit">Login</Button>
|
|
935
|
+
* </Form>
|
|
936
|
+
*/
|
|
937
|
+
declare const formVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
938
|
+
interface FormProps extends React.FormHTMLAttributes<HTMLFormElement>, VariantProps<typeof formVariants> {
|
|
939
|
+
}
|
|
940
|
+
declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
|
|
941
|
+
|
|
942
|
+
/**
|
|
943
|
+
* FormField component for structured form inputs with label and error
|
|
944
|
+
*
|
|
945
|
+
* @example
|
|
946
|
+
* // Basic form field
|
|
947
|
+
* <FormField label="Username" name="username">
|
|
948
|
+
* <Input type="text" />
|
|
949
|
+
* </FormField>
|
|
950
|
+
*
|
|
951
|
+
* @example
|
|
952
|
+
* // Form field with error
|
|
953
|
+
* <FormField
|
|
954
|
+
* label="Email"
|
|
955
|
+
* name="email"
|
|
956
|
+
* error="Invalid email address"
|
|
957
|
+
* >
|
|
958
|
+
* <Input type="email" />
|
|
959
|
+
* </FormField>
|
|
960
|
+
*
|
|
961
|
+
* @example
|
|
962
|
+
* // Form field with helper text and required indicator
|
|
963
|
+
* <FormField
|
|
964
|
+
* label="Password"
|
|
965
|
+
* name="password"
|
|
966
|
+
* required
|
|
967
|
+
* helperText="Must be at least 8 characters"
|
|
968
|
+
* >
|
|
969
|
+
* <Input type="password" />
|
|
970
|
+
* </FormField>
|
|
971
|
+
*/
|
|
972
|
+
declare const formFieldVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
973
|
+
interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof formFieldVariants> {
|
|
974
|
+
label: string;
|
|
975
|
+
name: string;
|
|
976
|
+
error?: string;
|
|
977
|
+
helperText?: string;
|
|
978
|
+
required?: boolean;
|
|
979
|
+
}
|
|
980
|
+
declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
|
|
981
|
+
|
|
982
|
+
/**
|
|
983
|
+
* Select component built on Radix UI Select
|
|
984
|
+
*
|
|
985
|
+
* @example
|
|
986
|
+
* // Basic select
|
|
987
|
+
* <Select>
|
|
988
|
+
* <SelectTrigger>
|
|
989
|
+
* <SelectValue placeholder="Select an option" />
|
|
990
|
+
* </SelectTrigger>
|
|
991
|
+
* <SelectContent>
|
|
992
|
+
* <SelectItem value="option1">Option 1</SelectItem>
|
|
993
|
+
* <SelectItem value="option2">Option 2</SelectItem>
|
|
994
|
+
* </SelectContent>
|
|
995
|
+
* </Select>
|
|
996
|
+
*
|
|
997
|
+
* @example
|
|
998
|
+
* // Select with groups
|
|
999
|
+
* <Select>
|
|
1000
|
+
* <SelectTrigger>
|
|
1001
|
+
* <SelectValue placeholder="Choose a fruit" />
|
|
1002
|
+
* </SelectTrigger>
|
|
1003
|
+
* <SelectContent>
|
|
1004
|
+
* <SelectGroup>
|
|
1005
|
+
* <SelectLabel>Fruits</SelectLabel>
|
|
1006
|
+
* <SelectItem value="apple">Apple</SelectItem>
|
|
1007
|
+
* <SelectItem value="banana">Banana</SelectItem>
|
|
1008
|
+
* </SelectGroup>
|
|
1009
|
+
* </SelectContent>
|
|
1010
|
+
* </Select>
|
|
1011
|
+
*/
|
|
1012
|
+
declare const Select: React.FC<SelectPrimitive.SelectProps>;
|
|
1013
|
+
declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
1014
|
+
declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
|
|
1015
|
+
declare const selectTriggerVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1016
|
+
interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
|
|
1017
|
+
}
|
|
1018
|
+
declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1019
|
+
declare const selectContentVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1020
|
+
interface SelectContentProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>, VariantProps<typeof selectContentVariants> {
|
|
1021
|
+
}
|
|
1022
|
+
declare const SelectContent: React.ForwardRefExoticComponent<SelectContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1023
|
+
declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1024
|
+
declare const selectItemVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1025
|
+
interface SelectItemProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, VariantProps<typeof selectItemVariants> {
|
|
1026
|
+
}
|
|
1027
|
+
declare const SelectItem: React.ForwardRefExoticComponent<SelectItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
1028
|
+
|
|
1029
|
+
/**
|
|
1030
|
+
* Checkbox component built on Radix UI Checkbox
|
|
1031
|
+
*
|
|
1032
|
+
* @example
|
|
1033
|
+
* // Basic checkbox
|
|
1034
|
+
* <Checkbox id="terms" />
|
|
1035
|
+
*
|
|
1036
|
+
* @example
|
|
1037
|
+
* // Checkbox with label
|
|
1038
|
+
* <div className="flex items-center space-x-2">
|
|
1039
|
+
* <Checkbox id="terms" />
|
|
1040
|
+
* <label htmlFor="terms">Accept terms and conditions</label>
|
|
1041
|
+
* </div>
|
|
1042
|
+
*
|
|
1043
|
+
* @example
|
|
1044
|
+
* // Controlled checkbox
|
|
1045
|
+
* <Checkbox
|
|
1046
|
+
* checked={isChecked}
|
|
1047
|
+
* onCheckedChange={setIsChecked}
|
|
1048
|
+
* />
|
|
1049
|
+
*/
|
|
1050
|
+
declare const checkboxVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1051
|
+
interface CheckboxProps extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, VariantProps<typeof checkboxVariants> {
|
|
1052
|
+
}
|
|
1053
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1054
|
+
|
|
1055
|
+
/**
|
|
1056
|
+
* Radio component built on Radix UI RadioGroup
|
|
1057
|
+
*
|
|
1058
|
+
* @example
|
|
1059
|
+
* // Basic radio group
|
|
1060
|
+
* <RadioGroup defaultValue="option1">
|
|
1061
|
+
* <div className="flex items-center space-x-2">
|
|
1062
|
+
* <RadioGroupItem value="option1" id="r1" />
|
|
1063
|
+
* <label htmlFor="r1">Option 1</label>
|
|
1064
|
+
* </div>
|
|
1065
|
+
* <div className="flex items-center space-x-2">
|
|
1066
|
+
* <RadioGroupItem value="option2" id="r2" />
|
|
1067
|
+
* <label htmlFor="r2">Option 2</label>
|
|
1068
|
+
* </div>
|
|
1069
|
+
* </RadioGroup>
|
|
1070
|
+
*
|
|
1071
|
+
* @example
|
|
1072
|
+
* // Controlled radio group
|
|
1073
|
+
* <RadioGroup value={value} onValueChange={setValue}>
|
|
1074
|
+
* <div className="flex items-center space-x-2">
|
|
1075
|
+
* <RadioGroupItem value="yes" id="yes" />
|
|
1076
|
+
* <label htmlFor="yes">Yes</label>
|
|
1077
|
+
* </div>
|
|
1078
|
+
* <div className="flex items-center space-x-2">
|
|
1079
|
+
* <RadioGroupItem value="no" id="no" />
|
|
1080
|
+
* <label htmlFor="no">No</label>
|
|
1081
|
+
* </div>
|
|
1082
|
+
* </RadioGroup>
|
|
1083
|
+
*
|
|
1084
|
+
* @example
|
|
1085
|
+
* // Radio group with descriptions
|
|
1086
|
+
* <RadioGroup defaultValue="comfortable">
|
|
1087
|
+
* <div className="flex items-center space-x-2">
|
|
1088
|
+
* <RadioGroupItem value="default" id="r1" />
|
|
1089
|
+
* <label htmlFor="r1">Default</label>
|
|
1090
|
+
* </div>
|
|
1091
|
+
* <div className="flex items-center space-x-2">
|
|
1092
|
+
* <RadioGroupItem value="comfortable" id="r2" />
|
|
1093
|
+
* <label htmlFor="r2">Comfortable</label>
|
|
1094
|
+
* </div>
|
|
1095
|
+
* </RadioGroup>
|
|
1096
|
+
*/
|
|
1097
|
+
declare const radioGroupVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1098
|
+
interface RadioGroupProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, VariantProps<typeof radioGroupVariants> {
|
|
1099
|
+
}
|
|
1100
|
+
declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
1101
|
+
declare const radioGroupItemVariants: (props?: ({} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1102
|
+
interface RadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, VariantProps<typeof radioGroupItemVariants> {
|
|
1103
|
+
}
|
|
1104
|
+
declare const RadioGroupItem: React.ForwardRefExoticComponent<RadioGroupItemProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1105
|
+
|
|
1106
|
+
/**
|
|
1107
|
+
* Viewport position variants for toast placement on screen.
|
|
1108
|
+
*
|
|
1109
|
+
* @example
|
|
1110
|
+
* ```tsx
|
|
1111
|
+
* <ToastViewport position="top-right" />
|
|
1112
|
+
* ```
|
|
1113
|
+
*/
|
|
1114
|
+
declare const viewportVariants: (props?: ({
|
|
1115
|
+
position?: "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center" | null | undefined;
|
|
1116
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1117
|
+
/**
|
|
1118
|
+
* Toast variant styles with light and dark mode support.
|
|
1119
|
+
*
|
|
1120
|
+
* @example
|
|
1121
|
+
* ```tsx
|
|
1122
|
+
* <Toast variant="success">Saved!</Toast>
|
|
1123
|
+
* ```
|
|
1124
|
+
*/
|
|
1125
|
+
declare const toastVariants: (props?: ({
|
|
1126
|
+
variant?: "default" | "error" | "success" | "warning" | "info" | null | undefined;
|
|
1127
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1128
|
+
interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {
|
|
1129
|
+
}
|
|
1130
|
+
interface ToastViewportProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Viewport>, VariantProps<typeof viewportVariants> {
|
|
1131
|
+
}
|
|
1132
|
+
interface ToastProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, VariantProps<typeof toastVariants> {
|
|
1133
|
+
}
|
|
1134
|
+
interface ToastTitleProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Title> {
|
|
1135
|
+
}
|
|
1136
|
+
interface ToastDescriptionProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Description> {
|
|
1137
|
+
}
|
|
1138
|
+
interface ToastCloseProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Close> {
|
|
1139
|
+
}
|
|
1140
|
+
interface ToastActionProps extends React.ComponentPropsWithoutRef<typeof ToastPrimitive.Action> {
|
|
1141
|
+
}
|
|
1142
|
+
interface ToasterProps {
|
|
1143
|
+
/** Position of the toast viewport on screen */
|
|
1144
|
+
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
|
|
1145
|
+
/** Default auto-dismiss duration in milliseconds */
|
|
1146
|
+
duration?: number;
|
|
1147
|
+
/** Swipe direction to dismiss toasts */
|
|
1148
|
+
swipeDirection?: 'right' | 'left' | 'up' | 'down';
|
|
1149
|
+
}
|
|
1150
|
+
/**
|
|
1151
|
+
* Toast provider that wraps the application to enable toast notifications.
|
|
1152
|
+
* Delegates to Radix UI Toast.Provider for context management.
|
|
1153
|
+
*
|
|
1154
|
+
* @example
|
|
1155
|
+
* ```tsx
|
|
1156
|
+
* <ToastProvider duration={5000} swipeDirection="right">
|
|
1157
|
+
* <App />
|
|
1158
|
+
* <ToastViewport />
|
|
1159
|
+
* </ToastProvider>
|
|
1160
|
+
* ```
|
|
1161
|
+
*/
|
|
1162
|
+
declare const ToastProvider: React.FC<ToastPrimitive.ToastProviderProps>;
|
|
1163
|
+
/**
|
|
1164
|
+
* Viewport that renders toasts at a fixed position on screen.
|
|
1165
|
+
* Acts as an ARIA live region for screen reader announcements.
|
|
1166
|
+
*
|
|
1167
|
+
* @example
|
|
1168
|
+
* ```tsx
|
|
1169
|
+
* <ToastViewport position="top-right" />
|
|
1170
|
+
* <ToastViewport position="bottom-center" />
|
|
1171
|
+
* ```
|
|
1172
|
+
*/
|
|
1173
|
+
declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLOListElement>>;
|
|
1174
|
+
/**
|
|
1175
|
+
* Individual toast notification with variant styling and animations.
|
|
1176
|
+
* Built on Radix UI Toast.Root with CVA variants for visual styles.
|
|
1177
|
+
*
|
|
1178
|
+
* @example
|
|
1179
|
+
* ```tsx
|
|
1180
|
+
* <Toast variant="success">
|
|
1181
|
+
* <ToastTitle>Saved!</ToastTitle>
|
|
1182
|
+
* <ToastDescription>Your changes have been saved.</ToastDescription>
|
|
1183
|
+
* <ToastClose />
|
|
1184
|
+
* </Toast>
|
|
1185
|
+
* ```
|
|
1186
|
+
*
|
|
1187
|
+
* @example
|
|
1188
|
+
* ```tsx
|
|
1189
|
+
* <Toast variant="error" duration={10000}>
|
|
1190
|
+
* <ToastTitle>Error</ToastTitle>
|
|
1191
|
+
* <ToastDescription>Something went wrong.</ToastDescription>
|
|
1192
|
+
* <ToastAction altText="Retry the operation">Retry</ToastAction>
|
|
1193
|
+
* <ToastClose />
|
|
1194
|
+
* </Toast>
|
|
1195
|
+
* ```
|
|
1196
|
+
*/
|
|
1197
|
+
declare const Toast: React.ForwardRefExoticComponent<ToastProps & React.RefAttributes<HTMLLIElement>>;
|
|
1198
|
+
/**
|
|
1199
|
+
* Title text for a toast notification.
|
|
1200
|
+
*
|
|
1201
|
+
* @example
|
|
1202
|
+
* ```tsx
|
|
1203
|
+
* <ToastTitle>Operation successful</ToastTitle>
|
|
1204
|
+
* ```
|
|
1205
|
+
*/
|
|
1206
|
+
declare const ToastTitle: React.ForwardRefExoticComponent<ToastTitleProps & React.RefAttributes<HTMLDivElement>>;
|
|
1207
|
+
/**
|
|
1208
|
+
* Description text for a toast notification.
|
|
1209
|
+
*
|
|
1210
|
+
* @example
|
|
1211
|
+
* ```tsx
|
|
1212
|
+
* <ToastDescription>Your changes have been saved successfully.</ToastDescription>
|
|
1213
|
+
* ```
|
|
1214
|
+
*/
|
|
1215
|
+
declare const ToastDescription: React.ForwardRefExoticComponent<ToastDescriptionProps & React.RefAttributes<HTMLDivElement>>;
|
|
1216
|
+
/**
|
|
1217
|
+
* Close button for dismissing a toast notification.
|
|
1218
|
+
* Includes an accessible aria-label for screen readers.
|
|
1219
|
+
*
|
|
1220
|
+
* @example
|
|
1221
|
+
* ```tsx
|
|
1222
|
+
* <ToastClose />
|
|
1223
|
+
* ```
|
|
1224
|
+
*/
|
|
1225
|
+
declare const ToastClose: React.ForwardRefExoticComponent<ToastCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1226
|
+
/**
|
|
1227
|
+
* Action button within a toast notification.
|
|
1228
|
+
* Requires an `altText` prop for accessibility.
|
|
1229
|
+
*
|
|
1230
|
+
* @example
|
|
1231
|
+
* ```tsx
|
|
1232
|
+
* <ToastAction altText="Undo the last action" onClick={handleUndo}>
|
|
1233
|
+
* Undo
|
|
1234
|
+
* </ToastAction>
|
|
1235
|
+
* ```
|
|
1236
|
+
*/
|
|
1237
|
+
declare const ToastAction: React.ForwardRefExoticComponent<ToastActionProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1238
|
+
/**
|
|
1239
|
+
* Convenience component that combines ToastProvider, ToastViewport, and
|
|
1240
|
+
* renders toasts from the external store via `useSyncExternalStore`.
|
|
1241
|
+
*
|
|
1242
|
+
* Place once at the root of your application alongside the imperative
|
|
1243
|
+
* `toast()` API from `toast-store`.
|
|
1244
|
+
*
|
|
1245
|
+
* @example
|
|
1246
|
+
* ```tsx
|
|
1247
|
+
* import { Toaster, toast } from '@nim-ui/components';
|
|
1248
|
+
*
|
|
1249
|
+
* function App() {
|
|
1250
|
+
* return (
|
|
1251
|
+
* <>
|
|
1252
|
+
* <button onClick={() => toast.success('Saved!')}>Save</button>
|
|
1253
|
+
* <Toaster position="bottom-right" />
|
|
1254
|
+
* </>
|
|
1255
|
+
* );
|
|
1256
|
+
* }
|
|
1257
|
+
* ```
|
|
1258
|
+
*/
|
|
1259
|
+
declare function Toaster({ position, duration, swipeDirection, }: ToasterProps): react_jsx_runtime.JSX.Element;
|
|
1260
|
+
declare namespace Toaster {
|
|
1261
|
+
var displayName: string;
|
|
1262
|
+
}
|
|
1263
|
+
|
|
1264
|
+
/**
|
|
1265
|
+
* Toast data stored in the external store
|
|
1266
|
+
*/
|
|
1267
|
+
interface ToastData {
|
|
1268
|
+
id: string;
|
|
1269
|
+
title?: string;
|
|
1270
|
+
description?: string;
|
|
1271
|
+
variant: 'default' | 'success' | 'error' | 'warning' | 'info';
|
|
1272
|
+
duration?: number;
|
|
1273
|
+
action?: {
|
|
1274
|
+
label: string;
|
|
1275
|
+
altText: string;
|
|
1276
|
+
onClick: () => void;
|
|
1277
|
+
};
|
|
1278
|
+
}
|
|
1279
|
+
/**
|
|
1280
|
+
* Options for creating a toast via the imperative API
|
|
1281
|
+
*/
|
|
1282
|
+
type ToastOptions = Omit<ToastData, 'id' | 'variant'> & {
|
|
1283
|
+
variant?: ToastData['variant'];
|
|
1284
|
+
};
|
|
1285
|
+
/**
|
|
1286
|
+
* Toast store API interface
|
|
1287
|
+
*/
|
|
1288
|
+
interface ToastStoreAPI {
|
|
1289
|
+
getSnapshot: () => ToastData[];
|
|
1290
|
+
subscribe: (listener: () => void) => () => void;
|
|
1291
|
+
add: (toast: ToastData) => string;
|
|
1292
|
+
dismiss: (id: string) => void;
|
|
1293
|
+
clear: () => void;
|
|
1294
|
+
}
|
|
1295
|
+
/**
|
|
1296
|
+
* External store for managing toast state.
|
|
1297
|
+
* Compatible with React's `useSyncExternalStore` for safe concurrent rendering.
|
|
1298
|
+
*
|
|
1299
|
+
* @example
|
|
1300
|
+
* ```ts
|
|
1301
|
+
* toastStore.add({ id: '1', variant: 'success', title: 'Done!' });
|
|
1302
|
+
* toastStore.dismiss('1');
|
|
1303
|
+
* toastStore.clear();
|
|
1304
|
+
* ```
|
|
1305
|
+
*/
|
|
1306
|
+
declare const toastStore: ToastStoreAPI;
|
|
1307
|
+
/**
|
|
1308
|
+
* Create a toast notification via the imperative API.
|
|
1309
|
+
*
|
|
1310
|
+
* @example
|
|
1311
|
+
* ```ts
|
|
1312
|
+
* // With options object
|
|
1313
|
+
* toast({ title: 'Saved!', variant: 'success' });
|
|
1314
|
+
*
|
|
1315
|
+
* // Shorthand
|
|
1316
|
+
* toast.success('Saved!');
|
|
1317
|
+
* toast.error('Something went wrong');
|
|
1318
|
+
* toast.warning('Be careful');
|
|
1319
|
+
* toast.info('FYI');
|
|
1320
|
+
*
|
|
1321
|
+
* // Dismiss / clear
|
|
1322
|
+
* const id = toast.success('Done');
|
|
1323
|
+
* toast.dismiss(id);
|
|
1324
|
+
* toast.clear();
|
|
1325
|
+
* ```
|
|
1326
|
+
*/
|
|
1327
|
+
declare function createToast(options: ToastOptions): string;
|
|
1328
|
+
declare const toast: typeof createToast & {
|
|
1329
|
+
success: (titleOrOptions: string | ToastOptions) => string;
|
|
1330
|
+
error: (titleOrOptions: string | ToastOptions) => string;
|
|
1331
|
+
warning: (titleOrOptions: string | ToastOptions) => string;
|
|
1332
|
+
info: (titleOrOptions: string | ToastOptions) => string;
|
|
1333
|
+
dismiss: (id: string) => void;
|
|
1334
|
+
clear: () => void;
|
|
1335
|
+
};
|
|
1336
|
+
/**
|
|
1337
|
+
* React hook to subscribe to the toast store.
|
|
1338
|
+
* Uses `useSyncExternalStore` for safe concurrent rendering.
|
|
1339
|
+
*
|
|
1340
|
+
* @example
|
|
1341
|
+
* ```tsx
|
|
1342
|
+
* function Toaster() {
|
|
1343
|
+
* const toasts = useToastStore();
|
|
1344
|
+
* return toasts.map(t => <Toast key={t.id} {...t} />);
|
|
1345
|
+
* }
|
|
1346
|
+
* ```
|
|
1347
|
+
*/
|
|
1348
|
+
declare function useToastStore(): ToastData[];
|
|
1349
|
+
|
|
1350
|
+
declare const alertVariants: (props?: ({
|
|
1351
|
+
variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
|
|
1352
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1353
|
+
interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
|
|
1354
|
+
dismissible?: boolean;
|
|
1355
|
+
onDismiss?: () => void;
|
|
1356
|
+
}
|
|
1357
|
+
declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
|
|
1358
|
+
declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
1359
|
+
declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
1360
|
+
|
|
1361
|
+
declare const progressVariants: (props?: ({
|
|
1362
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
1363
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1364
|
+
declare const progressIndicatorVariants: (props?: ({
|
|
1365
|
+
variant?: "default" | "success" | "warning" | "info" | "danger" | null | undefined;
|
|
1366
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1367
|
+
interface ProgressProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof progressVariants>, VariantProps<typeof progressIndicatorVariants> {
|
|
1368
|
+
value: number;
|
|
1369
|
+
max?: number;
|
|
1370
|
+
showLabel?: boolean;
|
|
1371
|
+
}
|
|
1372
|
+
declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
|
|
1373
|
+
|
|
1374
|
+
declare const spinnerVariants: (props?: ({
|
|
1375
|
+
size?: "sm" | "md" | "lg" | "xl" | null | undefined;
|
|
1376
|
+
variant?: "default" | "secondary" | "destructive" | "success" | "info" | null | undefined;
|
|
1377
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1378
|
+
interface SpinnerProps extends React.SVGAttributes<SVGSVGElement>, VariantProps<typeof spinnerVariants> {
|
|
1379
|
+
label?: string;
|
|
1380
|
+
}
|
|
1381
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<SVGSVGElement>>;
|
|
1382
|
+
|
|
1383
|
+
interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1384
|
+
}
|
|
1385
|
+
declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
|
|
1386
|
+
|
|
1387
|
+
/**
|
|
1388
|
+
* Tooltip component built on Radix UI Tooltip primitive.
|
|
1389
|
+
* Displays informational text when hovering or focusing on an element.
|
|
1390
|
+
*
|
|
1391
|
+
* @example
|
|
1392
|
+
* ```tsx
|
|
1393
|
+
* <TooltipProvider>
|
|
1394
|
+
* <Tooltip>
|
|
1395
|
+
* <TooltipTrigger>Hover me</TooltipTrigger>
|
|
1396
|
+
* <TooltipContent>Tooltip text</TooltipContent>
|
|
1397
|
+
* </Tooltip>
|
|
1398
|
+
* </TooltipProvider>
|
|
1399
|
+
* ```
|
|
1400
|
+
*
|
|
1401
|
+
* @example
|
|
1402
|
+
* ```tsx
|
|
1403
|
+
* // With arrow and light variant
|
|
1404
|
+
* <TooltipProvider>
|
|
1405
|
+
* <Tooltip>
|
|
1406
|
+
* <TooltipTrigger>Hover me</TooltipTrigger>
|
|
1407
|
+
* <TooltipContent variant="light" showArrow>
|
|
1408
|
+
* Light tooltip with arrow
|
|
1409
|
+
* </TooltipContent>
|
|
1410
|
+
* </Tooltip>
|
|
1411
|
+
* </TooltipProvider>
|
|
1412
|
+
* ```
|
|
1413
|
+
*/
|
|
1414
|
+
interface TooltipProviderProps {
|
|
1415
|
+
children: React.ReactNode;
|
|
1416
|
+
/** Delay in ms before the tooltip opens. @default 300 */
|
|
1417
|
+
delayDuration?: number;
|
|
1418
|
+
/** Delay in ms before the next tooltip opens when one was recently visible. @default 300 */
|
|
1419
|
+
skipDelayDuration?: number;
|
|
1420
|
+
/** When true, hovering the tooltip content will not keep it open. */
|
|
1421
|
+
disableHoverableContent?: boolean;
|
|
1422
|
+
}
|
|
1423
|
+
declare const TooltipProvider: React.FC<TooltipProviderProps>;
|
|
1424
|
+
interface TooltipProps {
|
|
1425
|
+
children: React.ReactNode;
|
|
1426
|
+
/** Controlled open state. */
|
|
1427
|
+
open?: boolean;
|
|
1428
|
+
/** Uncontrolled default open state. */
|
|
1429
|
+
defaultOpen?: boolean;
|
|
1430
|
+
/** Callback when the open state changes. */
|
|
1431
|
+
onOpenChange?: (open: boolean) => void;
|
|
1432
|
+
/** Override the delay from the Provider for this tooltip. */
|
|
1433
|
+
delayDuration?: number;
|
|
1434
|
+
}
|
|
1435
|
+
declare const Tooltip: React.FC<TooltipPrimitive.TooltipProps>;
|
|
1436
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1437
|
+
declare const tooltipContentVariants: (props?: ({
|
|
1438
|
+
variant?: "default" | "light" | null | undefined;
|
|
1439
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1440
|
+
interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>, VariantProps<typeof tooltipContentVariants> {
|
|
1441
|
+
/** Show an arrow pointing to the trigger element. @default false */
|
|
1442
|
+
showArrow?: boolean;
|
|
1443
|
+
/** Distance in px between the tooltip and the trigger. @default 4 */
|
|
1444
|
+
sideOffset?: number;
|
|
1445
|
+
}
|
|
1446
|
+
declare const TooltipContent: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1447
|
+
interface TooltipArrowProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow> {
|
|
1448
|
+
/** Variant to match the parent TooltipContent color scheme. @default 'default' */
|
|
1449
|
+
variant?: 'default' | 'light';
|
|
1450
|
+
}
|
|
1451
|
+
declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
1452
|
+
|
|
1453
|
+
/**
|
|
1454
|
+
* Popover component built on Radix UI Popover primitive.
|
|
1455
|
+
* Displays rich content in a floating panel when clicking on a trigger element.
|
|
1456
|
+
*
|
|
1457
|
+
* @example
|
|
1458
|
+
* ```tsx
|
|
1459
|
+
* <Popover>
|
|
1460
|
+
* <PopoverTrigger>Click me</PopoverTrigger>
|
|
1461
|
+
* <PopoverContent>Popover content here</PopoverContent>
|
|
1462
|
+
* </Popover>
|
|
1463
|
+
* ```
|
|
1464
|
+
*
|
|
1465
|
+
* @example
|
|
1466
|
+
* ```tsx
|
|
1467
|
+
* // With arrow and outline variant
|
|
1468
|
+
* <Popover>
|
|
1469
|
+
* <PopoverTrigger>Click me</PopoverTrigger>
|
|
1470
|
+
* <PopoverContent variant="outline" showArrow>
|
|
1471
|
+
* <p>Rich content with close button</p>
|
|
1472
|
+
* <PopoverClose>Close</PopoverClose>
|
|
1473
|
+
* </PopoverContent>
|
|
1474
|
+
* </Popover>
|
|
1475
|
+
* ```
|
|
1476
|
+
*/
|
|
1477
|
+
interface PopoverProviderProps {
|
|
1478
|
+
children: React.ReactNode;
|
|
1479
|
+
}
|
|
1480
|
+
/**
|
|
1481
|
+
* Optional context wrapper for managing multiple popovers.
|
|
1482
|
+
* Not required for single popover usage — simply renders children directly.
|
|
1483
|
+
*/
|
|
1484
|
+
declare const PopoverProvider: React.FC<PopoverProviderProps>;
|
|
1485
|
+
interface PopoverProps {
|
|
1486
|
+
children: React.ReactNode;
|
|
1487
|
+
/** Controlled open state. */
|
|
1488
|
+
open?: boolean;
|
|
1489
|
+
/** Uncontrolled default open state. */
|
|
1490
|
+
defaultOpen?: boolean;
|
|
1491
|
+
/** Callback when the open state changes. */
|
|
1492
|
+
onOpenChange?: (open: boolean) => void;
|
|
1493
|
+
/** When true, interaction with outside elements is disabled and only popover content is visible to screen readers. */
|
|
1494
|
+
modal?: boolean;
|
|
1495
|
+
}
|
|
1496
|
+
declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
|
|
1497
|
+
type PopoverTriggerProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>;
|
|
1498
|
+
declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1499
|
+
declare const popoverContentVariants: (props?: ({
|
|
1500
|
+
variant?: "default" | "outline" | null | undefined;
|
|
1501
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1502
|
+
interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, VariantProps<typeof popoverContentVariants> {
|
|
1503
|
+
/** Show an arrow pointing to the trigger element. @default false */
|
|
1504
|
+
showArrow?: boolean;
|
|
1505
|
+
/** Distance in px between the popover and the trigger. @default 4 */
|
|
1506
|
+
sideOffset?: number;
|
|
1507
|
+
}
|
|
1508
|
+
declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1509
|
+
interface PopoverArrowProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow> {
|
|
1510
|
+
/** Variant to match the parent PopoverContent color scheme. @default 'default' */
|
|
1511
|
+
variant?: 'default' | 'outline';
|
|
1512
|
+
}
|
|
1513
|
+
declare const PopoverArrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
|
|
1514
|
+
interface PopoverCloseProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close> {
|
|
1515
|
+
}
|
|
1516
|
+
declare const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
|
|
1517
|
+
|
|
1518
|
+
interface DropdownMenuProps {
|
|
1519
|
+
children: React.ReactNode;
|
|
1520
|
+
/** Controlled open state. */
|
|
1521
|
+
open?: boolean;
|
|
1522
|
+
/** Uncontrolled default open state. */
|
|
1523
|
+
defaultOpen?: boolean;
|
|
1524
|
+
/** Callback when the open state changes. */
|
|
1525
|
+
onOpenChange?: (open: boolean) => void;
|
|
1526
|
+
/** Text direction. */
|
|
1527
|
+
dir?: 'ltr' | 'rtl';
|
|
1528
|
+
/** When true, interaction with outside elements is disabled. */
|
|
1529
|
+
modal?: boolean;
|
|
1530
|
+
}
|
|
1531
|
+
declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
|
|
1532
|
+
type DropdownMenuTriggerProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>;
|
|
1533
|
+
declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1534
|
+
declare const dropdownMenuContentVariants: (props?: ({
|
|
1535
|
+
variant?: "default" | "outline" | null | undefined;
|
|
1536
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1537
|
+
interface DropdownMenuContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>, VariantProps<typeof dropdownMenuContentVariants> {
|
|
1538
|
+
/** Distance in px between the menu and the trigger. @default 4 */
|
|
1539
|
+
sideOffset?: number;
|
|
1540
|
+
}
|
|
1541
|
+
declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1542
|
+
interface DropdownMenuItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
|
|
1543
|
+
/** Add left padding to align with labels. */
|
|
1544
|
+
inset?: boolean;
|
|
1545
|
+
}
|
|
1546
|
+
declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
1547
|
+
type DropdownMenuSeparatorProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
|
|
1548
|
+
declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1549
|
+
interface DropdownMenuLabelProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
|
|
1550
|
+
/** Add left padding to align with items that have icons. */
|
|
1551
|
+
inset?: boolean;
|
|
1552
|
+
}
|
|
1553
|
+
declare const DropdownMenuLabel: React.ForwardRefExoticComponent<DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
|
|
1554
|
+
interface DropdownMenuCheckboxItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> {
|
|
1555
|
+
}
|
|
1556
|
+
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
1557
|
+
type DropdownMenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>;
|
|
1558
|
+
declare const DropdownMenuRadioGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
1559
|
+
interface DropdownMenuRadioItemProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> {
|
|
1560
|
+
}
|
|
1561
|
+
declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
1562
|
+
type DropdownMenuSubProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Sub>;
|
|
1563
|
+
declare const DropdownMenuSub: React.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
|
|
1564
|
+
interface DropdownMenuSubTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
|
|
1565
|
+
/** Add left padding to align with labels. */
|
|
1566
|
+
inset?: boolean;
|
|
1567
|
+
}
|
|
1568
|
+
declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
|
|
1569
|
+
interface DropdownMenuSubContentProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>, VariantProps<typeof dropdownMenuContentVariants> {
|
|
1570
|
+
}
|
|
1571
|
+
declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1572
|
+
|
|
1573
|
+
/**
|
|
1574
|
+
* Alert Dialog component built on Radix UI AlertDialog primitive.
|
|
1575
|
+
* Displays a modal dialog for confirming destructive or important actions.
|
|
1576
|
+
* Unlike regular dialogs, alert dialogs require explicit user response
|
|
1577
|
+
* and cannot be dismissed by clicking the overlay.
|
|
1578
|
+
*
|
|
1579
|
+
* @example
|
|
1580
|
+
* ```tsx
|
|
1581
|
+
* <AlertDialog>
|
|
1582
|
+
* <AlertDialogTrigger>Delete</AlertDialogTrigger>
|
|
1583
|
+
* <AlertDialogContent>
|
|
1584
|
+
* <AlertDialogHeader>
|
|
1585
|
+
* <AlertDialogTitle>Are you sure?</AlertDialogTitle>
|
|
1586
|
+
* <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
|
|
1587
|
+
* </AlertDialogHeader>
|
|
1588
|
+
* <AlertDialogFooter>
|
|
1589
|
+
* <AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
1590
|
+
* <AlertDialogAction>Continue</AlertDialogAction>
|
|
1591
|
+
* </AlertDialogFooter>
|
|
1592
|
+
* </AlertDialogContent>
|
|
1593
|
+
* </AlertDialog>
|
|
1594
|
+
* ```
|
|
1595
|
+
*
|
|
1596
|
+
* @example
|
|
1597
|
+
* ```tsx
|
|
1598
|
+
* // Destructive variant
|
|
1599
|
+
* <AlertDialog>
|
|
1600
|
+
* <AlertDialogTrigger>Delete Account</AlertDialogTrigger>
|
|
1601
|
+
* <AlertDialogContent variant="destructive">
|
|
1602
|
+
* <AlertDialogHeader>
|
|
1603
|
+
* <AlertDialogTitle>Delete Account</AlertDialogTitle>
|
|
1604
|
+
* <AlertDialogDescription>
|
|
1605
|
+
* This will permanently delete your account and all data.
|
|
1606
|
+
* </AlertDialogDescription>
|
|
1607
|
+
* </AlertDialogHeader>
|
|
1608
|
+
* <AlertDialogFooter>
|
|
1609
|
+
* <AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
1610
|
+
* <AlertDialogAction>Delete</AlertDialogAction>
|
|
1611
|
+
* </AlertDialogFooter>
|
|
1612
|
+
* </AlertDialogContent>
|
|
1613
|
+
* </AlertDialog>
|
|
1614
|
+
* ```
|
|
1615
|
+
*/
|
|
1616
|
+
interface AlertDialogProps {
|
|
1617
|
+
children: React.ReactNode;
|
|
1618
|
+
/** Controlled open state. */
|
|
1619
|
+
open?: boolean;
|
|
1620
|
+
/** Uncontrolled default open state. */
|
|
1621
|
+
defaultOpen?: boolean;
|
|
1622
|
+
/** Callback when the open state changes. */
|
|
1623
|
+
onOpenChange?: (open: boolean) => void;
|
|
1624
|
+
}
|
|
1625
|
+
declare const AlertDialog: React.FC<AlertDialogPrimitive.AlertDialogProps>;
|
|
1626
|
+
type AlertDialogTriggerProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Trigger>;
|
|
1627
|
+
declare const AlertDialogTrigger: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1628
|
+
type AlertDialogOverlayProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
|
|
1629
|
+
declare const AlertDialogOverlay: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1630
|
+
declare const alertDialogContentVariants: (props?: ({
|
|
1631
|
+
variant?: "default" | "destructive" | null | undefined;
|
|
1632
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1633
|
+
interface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>, VariantProps<typeof alertDialogContentVariants> {
|
|
1634
|
+
}
|
|
1635
|
+
declare const AlertDialogContent: React.ForwardRefExoticComponent<AlertDialogContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1636
|
+
interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1637
|
+
}
|
|
1638
|
+
declare const AlertDialogHeader: React.ForwardRefExoticComponent<AlertDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
1639
|
+
interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1640
|
+
}
|
|
1641
|
+
declare const AlertDialogFooter: React.ForwardRefExoticComponent<AlertDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
|
|
1642
|
+
type AlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
|
|
1643
|
+
declare const AlertDialogTitle: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
|
|
1644
|
+
type AlertDialogDescriptionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
|
|
1645
|
+
declare const AlertDialogDescription: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
|
|
1646
|
+
type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
|
|
1647
|
+
declare const AlertDialogAction: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1648
|
+
type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
|
|
1649
|
+
declare const AlertDialogCancel: React.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1650
|
+
|
|
1651
|
+
declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
|
|
1652
|
+
declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1653
|
+
declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
1654
|
+
declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
1655
|
+
|
|
1656
|
+
interface SeparatorProps extends React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
|
|
1657
|
+
}
|
|
1658
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
1659
|
+
|
|
1660
|
+
declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
|
|
1661
|
+
declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
|
|
1662
|
+
declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
|
|
1663
|
+
declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
|
|
1664
|
+
declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
|
|
1665
|
+
interface BreadcrumbSeparatorProps extends React.ComponentPropsWithoutRef<'li'> {
|
|
1666
|
+
children?: React.ReactNode;
|
|
1667
|
+
}
|
|
1668
|
+
declare const BreadcrumbSeparator: {
|
|
1669
|
+
({ children, className, ...props }: BreadcrumbSeparatorProps): react_jsx_runtime.JSX.Element;
|
|
1670
|
+
displayName: string;
|
|
1671
|
+
};
|
|
1672
|
+
|
|
1673
|
+
/**
|
|
1674
|
+
* Utility function to merge Tailwind CSS classes
|
|
1675
|
+
* Handles conditional classes and prevents conflicts
|
|
1676
|
+
*/
|
|
1677
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
1678
|
+
|
|
1679
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, type AlertDialogProps, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertDialogTriggerProps, type AlertProps, AlertTitle, Avatar, AvatarFallback, AvatarImage, type AvatarProps, Badge, type BadgeProps, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, CTA, type CTAProps, Card, CardContent, CardFooter, CardHeader, type CardProps, CartItem, type CartItemProps, Checkbox, type CheckboxProps, Container, type ContainerProps, DataCard, type DataCardProps, DataTable, DataTableBody, DataTableCell, DataTableFooter, DataTableHead, DataTableHeader, type DataTableProps, DataTableRow, Drawer, DrawerBody, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, FeatureCard, type FeatureCardProps, FeatureGrid, type FeatureGridProps, Flex, type FlexProps, Form, FormField, type FormFieldProps, type FormProps, Grid, type GridProps, Hero, type HeroProps, Input, type InputProps, Modal, ModalBody, ModalClose, ModalContent, type ModalContentProps, ModalDescription, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Popover, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverProvider, type PopoverProviderProps, PopoverTrigger, type PopoverTriggerProps, PriceTag, type PriceTagProps, ProductCard, type ProductCardProps, Progress, type ProgressProps, QuantitySelector, type QuantitySelectorProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, type SelectItemProps, SelectLabel, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spacer, type SpacerProps, Spinner, type SpinnerProps, Stack, type StackProps, Stat, type StatProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, Testimonial, type TestimonialProps, Textarea, type TextareaProps, Toast, ToastAction, type ToastActionProps, ToastClose, type ToastCloseProps, type ToastData, ToastDescription, type ToastDescriptionProps, type ToastOptions, type ToastProps, ToastProvider, type ToastProviderProps, type ToastStoreAPI, ToastTitle, type ToastTitleProps, ToastViewport, type ToastViewportProps, Toaster, type ToasterProps, Tooltip, TooltipArrow, type TooltipArrowProps, TooltipContent, type TooltipContentProps, type TooltipProps, TooltipProvider, type TooltipProviderProps, TooltipTrigger, alertDialogContentVariants, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cartItemVariants, checkboxVariants, cn, containerVariants, ctaVariants, dataCardVariants, dataTableVariants, drawerContentVariants, dropdownMenuContentVariants, featureCardVariants, featureGridVariants, flexVariants, formFieldVariants, formVariants, gridVariants, heroVariants, inputVariants, modalContentVariants, popoverContentVariants, priceTagVariants, productCardVariants, progressIndicatorVariants, progressVariants, quantitySelectorVariants, radioGroupItemVariants, radioGroupVariants, selectContentVariants, selectItemVariants, selectTriggerVariants, spacerVariants, spinnerVariants, stackVariants, statVariants, switchThumbVariants, switchVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, testimonialVariants, textareaVariants, toast, toastStore, toastVariants, tooltipContentVariants, useToastStore, viewportVariants };
|