@epilot/volt-ui-mcp 0.1.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/README.md +24 -0
- package/index.js +316 -0
- package/package.json +19 -0
- package/registry.json +3819 -0
package/registry.json
ADDED
|
@@ -0,0 +1,3819 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"generatedAt": "2026-01-06T16:31:06.877Z",
|
|
4
|
+
"components": [
|
|
5
|
+
{
|
|
6
|
+
"name": "Accordion",
|
|
7
|
+
"title": "Accordion",
|
|
8
|
+
"description": "Accordion is a vertically stacked set of panels, only one of which can be expanded at a time.",
|
|
9
|
+
"docsPath": "docs/content/docs/components/accordion.mdx",
|
|
10
|
+
"docSlug": "accordion",
|
|
11
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/accordion",
|
|
12
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/accordion#api-reference",
|
|
13
|
+
"sourcePaths": [
|
|
14
|
+
"src/components/accordion/accordion.tsx"
|
|
15
|
+
],
|
|
16
|
+
"props": [
|
|
17
|
+
{
|
|
18
|
+
"name": "`type`",
|
|
19
|
+
"type": "`\"single\"` | `\"multiple\"`",
|
|
20
|
+
"default": "`\"single\"`",
|
|
21
|
+
"description": "Determines whether one or multiple items can be opened at the same time."
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
"name": "`value`",
|
|
25
|
+
"type": "`string` | `string[]`",
|
|
26
|
+
"default": "-",
|
|
27
|
+
"description": "The controlled value of the accordion."
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
"name": "`defaultValue`",
|
|
31
|
+
"type": "`string` | `string[]`",
|
|
32
|
+
"default": "-",
|
|
33
|
+
"description": "The value of the accordion when initially rendered."
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"name": "`onValueChange`",
|
|
37
|
+
"type": "`(value: string | string[]) => void`",
|
|
38
|
+
"default": "-",
|
|
39
|
+
"description": "Event handler called when the value changes."
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "`collapsible`",
|
|
43
|
+
"type": "`boolean`",
|
|
44
|
+
"default": "`false`",
|
|
45
|
+
"description": "When `type` is `\"single\"`, allows closing content when clicking trigger for an open item."
|
|
46
|
+
},
|
|
47
|
+
{
|
|
48
|
+
"name": "`disabled`",
|
|
49
|
+
"type": "`boolean`",
|
|
50
|
+
"default": "`false`",
|
|
51
|
+
"description": "When set to `true`, the accordion is disabled."
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
"name": "`dir`",
|
|
55
|
+
"type": "`\"ltr\"` | `\"rtl\"`",
|
|
56
|
+
"default": "-",
|
|
57
|
+
"description": "The reading direction of the accordion."
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "`orientation`",
|
|
61
|
+
"type": "`\"horizontal\"` | `\"vertical\"`",
|
|
62
|
+
"default": "`\"vertical\"`",
|
|
63
|
+
"description": "The orientation of the accordion."
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"name": "`className`",
|
|
67
|
+
"type": "`string`",
|
|
68
|
+
"default": "-",
|
|
69
|
+
"description": "Additional CSS classes."
|
|
70
|
+
}
|
|
71
|
+
],
|
|
72
|
+
"examples": [
|
|
73
|
+
{
|
|
74
|
+
"language": "tsx",
|
|
75
|
+
"meta": "lineNumbers",
|
|
76
|
+
"code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n\n <Separator />\n \n <AccordionItem value=\"item-2\">\n <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n</Accordion>"
|
|
77
|
+
}
|
|
78
|
+
]
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"name": "AccordionContent",
|
|
82
|
+
"title": "Accordion",
|
|
83
|
+
"description": "Accordion is a vertically stacked set of panels, only one of which can be expanded at a time.",
|
|
84
|
+
"docsPath": "docs/content/docs/components/accordion.mdx",
|
|
85
|
+
"docSlug": "accordion",
|
|
86
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/accordion",
|
|
87
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/accordion#api-reference",
|
|
88
|
+
"sourcePaths": [
|
|
89
|
+
"src/components/accordion/accordion.tsx"
|
|
90
|
+
],
|
|
91
|
+
"props": [
|
|
92
|
+
{
|
|
93
|
+
"name": "`className`",
|
|
94
|
+
"type": "`string`",
|
|
95
|
+
"default": "-",
|
|
96
|
+
"description": "Additional CSS classes."
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"name": "`children`",
|
|
100
|
+
"type": "`React.ReactNode`",
|
|
101
|
+
"default": "-",
|
|
102
|
+
"description": "The content to display when the accordion item is open."
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"name": "`animate`",
|
|
106
|
+
"type": "`boolean`",
|
|
107
|
+
"default": "`true`",
|
|
108
|
+
"description": "Whether to animate the content when the accordion item is open."
|
|
109
|
+
}
|
|
110
|
+
],
|
|
111
|
+
"examples": [
|
|
112
|
+
{
|
|
113
|
+
"language": "tsx",
|
|
114
|
+
"meta": "lineNumbers",
|
|
115
|
+
"code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n\n <Separator />\n \n <AccordionItem value=\"item-2\">\n <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n</Accordion>"
|
|
116
|
+
}
|
|
117
|
+
]
|
|
118
|
+
},
|
|
119
|
+
{
|
|
120
|
+
"name": "AccordionItem",
|
|
121
|
+
"title": "Accordion",
|
|
122
|
+
"description": "Accordion is a vertically stacked set of panels, only one of which can be expanded at a time.",
|
|
123
|
+
"docsPath": "docs/content/docs/components/accordion.mdx",
|
|
124
|
+
"docSlug": "accordion",
|
|
125
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/accordion",
|
|
126
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/accordion#api-reference",
|
|
127
|
+
"sourcePaths": [
|
|
128
|
+
"src/components/accordion/accordion.tsx"
|
|
129
|
+
],
|
|
130
|
+
"props": [
|
|
131
|
+
{
|
|
132
|
+
"name": "`value`",
|
|
133
|
+
"type": "`string`",
|
|
134
|
+
"default": "-",
|
|
135
|
+
"description": "A unique value for the item."
|
|
136
|
+
},
|
|
137
|
+
{
|
|
138
|
+
"name": "`disabled`",
|
|
139
|
+
"type": "`boolean`",
|
|
140
|
+
"default": "`false`",
|
|
141
|
+
"description": "When set to `true`, the item is disabled."
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
"name": "`className`",
|
|
145
|
+
"type": "`string`",
|
|
146
|
+
"default": "-",
|
|
147
|
+
"description": "Additional CSS classes."
|
|
148
|
+
}
|
|
149
|
+
],
|
|
150
|
+
"examples": [
|
|
151
|
+
{
|
|
152
|
+
"language": "tsx",
|
|
153
|
+
"meta": "lineNumbers",
|
|
154
|
+
"code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n\n <Separator />\n \n <AccordionItem value=\"item-2\">\n <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n</Accordion>"
|
|
155
|
+
}
|
|
156
|
+
]
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"name": "AccordionTrigger",
|
|
160
|
+
"title": "Accordion",
|
|
161
|
+
"description": "Accordion is a vertically stacked set of panels, only one of which can be expanded at a time.",
|
|
162
|
+
"docsPath": "docs/content/docs/components/accordion.mdx",
|
|
163
|
+
"docSlug": "accordion",
|
|
164
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/accordion",
|
|
165
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/accordion#api-reference",
|
|
166
|
+
"sourcePaths": [
|
|
167
|
+
"src/components/accordion/accordion.tsx"
|
|
168
|
+
],
|
|
169
|
+
"props": [
|
|
170
|
+
{
|
|
171
|
+
"name": "`align`",
|
|
172
|
+
"type": "`\"start\"` | `\"end\"`",
|
|
173
|
+
"default": "`\"start\"`",
|
|
174
|
+
"description": "Alignment of the chevron icon. When `\"start\"`, the icon appears before the content. When `\"end\"`, the icon appears after the content."
|
|
175
|
+
},
|
|
176
|
+
{
|
|
177
|
+
"name": "`disabled`",
|
|
178
|
+
"type": "`boolean`",
|
|
179
|
+
"default": "`false`",
|
|
180
|
+
"description": "When set to `true`, the trigger is disabled."
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"name": "`asChild`",
|
|
184
|
+
"type": "`boolean`",
|
|
185
|
+
"default": "`false`",
|
|
186
|
+
"description": "Change the component to the HTML tag or custom component."
|
|
187
|
+
},
|
|
188
|
+
{
|
|
189
|
+
"name": "`className`",
|
|
190
|
+
"type": "`string`",
|
|
191
|
+
"default": "-",
|
|
192
|
+
"description": "Additional CSS classes."
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
"name": "`children`",
|
|
196
|
+
"type": "`React.ReactNode`",
|
|
197
|
+
"default": "-",
|
|
198
|
+
"description": "The content of the trigger."
|
|
199
|
+
}
|
|
200
|
+
],
|
|
201
|
+
"examples": [
|
|
202
|
+
{
|
|
203
|
+
"language": "tsx",
|
|
204
|
+
"meta": "lineNumbers",
|
|
205
|
+
"code": "import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@epilot/volt-ui\"\n\n<Accordion type=\"multiple\" className=\"w-96 flex flex-col\">\n <AccordionItem value=\"item-1\">\n <AccordionTrigger align=\"start\">Product Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n\n <Separator />\n \n <AccordionItem value=\"item-2\">\n <AccordionTrigger align=\"start\">Shipping Information</AccordionTrigger>\n <AccordionContent>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</AccordionContent>\n </AccordionItem>\n</Accordion>"
|
|
206
|
+
}
|
|
207
|
+
]
|
|
208
|
+
},
|
|
209
|
+
{
|
|
210
|
+
"name": "AlertDialog",
|
|
211
|
+
"title": "Alert Dialog",
|
|
212
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
213
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
214
|
+
"docSlug": "alert-dialog",
|
|
215
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
216
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
217
|
+
"sourcePaths": [
|
|
218
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
219
|
+
],
|
|
220
|
+
"props": [
|
|
221
|
+
{
|
|
222
|
+
"name": "`open`",
|
|
223
|
+
"type": "boolean",
|
|
224
|
+
"default": "-",
|
|
225
|
+
"description": "Controlled open state."
|
|
226
|
+
},
|
|
227
|
+
{
|
|
228
|
+
"name": "`defaultOpen`",
|
|
229
|
+
"type": "boolean",
|
|
230
|
+
"default": "-",
|
|
231
|
+
"description": "Uncontrolled initial open state."
|
|
232
|
+
},
|
|
233
|
+
{
|
|
234
|
+
"name": "`onOpenChange`",
|
|
235
|
+
"type": "`(open: boolean) => void`",
|
|
236
|
+
"default": "-",
|
|
237
|
+
"description": "Called when the open state changes."
|
|
238
|
+
}
|
|
239
|
+
],
|
|
240
|
+
"examples": [
|
|
241
|
+
{
|
|
242
|
+
"language": "tsx",
|
|
243
|
+
"meta": "lineNumbers",
|
|
244
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
245
|
+
}
|
|
246
|
+
]
|
|
247
|
+
},
|
|
248
|
+
{
|
|
249
|
+
"name": "AlertDialogAction",
|
|
250
|
+
"title": "Alert Dialog",
|
|
251
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
252
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
253
|
+
"docSlug": "alert-dialog",
|
|
254
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
255
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
256
|
+
"sourcePaths": [
|
|
257
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
258
|
+
],
|
|
259
|
+
"props": [
|
|
260
|
+
{
|
|
261
|
+
"name": "`variant`",
|
|
262
|
+
"type": "`\"primary\" | \"secondary\" | \"tertiary\" | \"destructive\"`",
|
|
263
|
+
"default": "`\"primary\"`",
|
|
264
|
+
"description": "Button style for the confirm action."
|
|
265
|
+
},
|
|
266
|
+
{
|
|
267
|
+
"name": "`className`",
|
|
268
|
+
"type": "string",
|
|
269
|
+
"default": "-",
|
|
270
|
+
"description": "Additional classes for the button."
|
|
271
|
+
}
|
|
272
|
+
],
|
|
273
|
+
"examples": [
|
|
274
|
+
{
|
|
275
|
+
"language": "tsx",
|
|
276
|
+
"meta": "lineNumbers",
|
|
277
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
278
|
+
}
|
|
279
|
+
]
|
|
280
|
+
},
|
|
281
|
+
{
|
|
282
|
+
"name": "AlertDialogCancel",
|
|
283
|
+
"title": "Alert Dialog",
|
|
284
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
285
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
286
|
+
"docSlug": "alert-dialog",
|
|
287
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
288
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
289
|
+
"sourcePaths": [
|
|
290
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
291
|
+
],
|
|
292
|
+
"props": [
|
|
293
|
+
{
|
|
294
|
+
"name": "`variant`",
|
|
295
|
+
"type": "`\"primary\" | \"secondary\" | \"tertiary\" | \"destructive\"`",
|
|
296
|
+
"default": "`\"secondary\"`",
|
|
297
|
+
"description": "Button style for the cancel action."
|
|
298
|
+
},
|
|
299
|
+
{
|
|
300
|
+
"name": "`className`",
|
|
301
|
+
"type": "string",
|
|
302
|
+
"default": "-",
|
|
303
|
+
"description": "Additional classes for the button."
|
|
304
|
+
}
|
|
305
|
+
],
|
|
306
|
+
"examples": [
|
|
307
|
+
{
|
|
308
|
+
"language": "tsx",
|
|
309
|
+
"meta": "lineNumbers",
|
|
310
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
311
|
+
}
|
|
312
|
+
]
|
|
313
|
+
},
|
|
314
|
+
{
|
|
315
|
+
"name": "AlertDialogContent",
|
|
316
|
+
"title": "Alert Dialog",
|
|
317
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
318
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
319
|
+
"docSlug": "alert-dialog",
|
|
320
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
321
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
322
|
+
"sourcePaths": [
|
|
323
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
324
|
+
],
|
|
325
|
+
"props": [
|
|
326
|
+
{
|
|
327
|
+
"name": "`className`",
|
|
328
|
+
"type": "string",
|
|
329
|
+
"default": "-",
|
|
330
|
+
"description": "Additional classes for the content."
|
|
331
|
+
}
|
|
332
|
+
],
|
|
333
|
+
"examples": [
|
|
334
|
+
{
|
|
335
|
+
"language": "tsx",
|
|
336
|
+
"meta": "lineNumbers",
|
|
337
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
338
|
+
}
|
|
339
|
+
]
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
"name": "AlertDialogDescription",
|
|
343
|
+
"title": "Alert Dialog",
|
|
344
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
345
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
346
|
+
"docSlug": "alert-dialog",
|
|
347
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
348
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
349
|
+
"sourcePaths": [
|
|
350
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
351
|
+
],
|
|
352
|
+
"props": [
|
|
353
|
+
{
|
|
354
|
+
"name": "`className`",
|
|
355
|
+
"type": "string",
|
|
356
|
+
"default": "-",
|
|
357
|
+
"description": "Additional classes for the description."
|
|
358
|
+
}
|
|
359
|
+
],
|
|
360
|
+
"examples": [
|
|
361
|
+
{
|
|
362
|
+
"language": "tsx",
|
|
363
|
+
"meta": "lineNumbers",
|
|
364
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
365
|
+
}
|
|
366
|
+
]
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
"name": "AlertDialogFooter",
|
|
370
|
+
"title": "Alert Dialog",
|
|
371
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
372
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
373
|
+
"docSlug": "alert-dialog",
|
|
374
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
375
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
376
|
+
"sourcePaths": [
|
|
377
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
378
|
+
],
|
|
379
|
+
"props": [
|
|
380
|
+
{
|
|
381
|
+
"name": "`className`",
|
|
382
|
+
"type": "string",
|
|
383
|
+
"default": "-",
|
|
384
|
+
"description": "Additional classes for the footer."
|
|
385
|
+
}
|
|
386
|
+
],
|
|
387
|
+
"examples": [
|
|
388
|
+
{
|
|
389
|
+
"language": "tsx",
|
|
390
|
+
"meta": "lineNumbers",
|
|
391
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
392
|
+
}
|
|
393
|
+
]
|
|
394
|
+
},
|
|
395
|
+
{
|
|
396
|
+
"name": "AlertDialogHeader",
|
|
397
|
+
"title": "Alert Dialog",
|
|
398
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
399
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
400
|
+
"docSlug": "alert-dialog",
|
|
401
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
402
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
403
|
+
"sourcePaths": [
|
|
404
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
405
|
+
],
|
|
406
|
+
"props": [
|
|
407
|
+
{
|
|
408
|
+
"name": "`className`",
|
|
409
|
+
"type": "string",
|
|
410
|
+
"default": "-",
|
|
411
|
+
"description": "Additional classes for the header."
|
|
412
|
+
}
|
|
413
|
+
],
|
|
414
|
+
"examples": [
|
|
415
|
+
{
|
|
416
|
+
"language": "tsx",
|
|
417
|
+
"meta": "lineNumbers",
|
|
418
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
419
|
+
}
|
|
420
|
+
]
|
|
421
|
+
},
|
|
422
|
+
{
|
|
423
|
+
"name": "AlertDialogOverlay",
|
|
424
|
+
"title": "Alert Dialog",
|
|
425
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
426
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
427
|
+
"docSlug": "alert-dialog",
|
|
428
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
429
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
430
|
+
"sourcePaths": [
|
|
431
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
432
|
+
],
|
|
433
|
+
"props": [
|
|
434
|
+
{
|
|
435
|
+
"name": "`className`",
|
|
436
|
+
"type": "string",
|
|
437
|
+
"default": "-",
|
|
438
|
+
"description": "Additional classes for the overlay."
|
|
439
|
+
}
|
|
440
|
+
],
|
|
441
|
+
"examples": [
|
|
442
|
+
{
|
|
443
|
+
"language": "tsx",
|
|
444
|
+
"meta": "lineNumbers",
|
|
445
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
446
|
+
}
|
|
447
|
+
]
|
|
448
|
+
},
|
|
449
|
+
{
|
|
450
|
+
"name": "AlertDialogPortal",
|
|
451
|
+
"title": "Alert Dialog",
|
|
452
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
453
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
454
|
+
"docSlug": "alert-dialog",
|
|
455
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
456
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
457
|
+
"sourcePaths": [
|
|
458
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
459
|
+
],
|
|
460
|
+
"props": [
|
|
461
|
+
{
|
|
462
|
+
"name": "`forceMount`",
|
|
463
|
+
"type": "boolean",
|
|
464
|
+
"default": "`false`",
|
|
465
|
+
"description": "Keep content mounted when closed."
|
|
466
|
+
},
|
|
467
|
+
{
|
|
468
|
+
"name": "`container`",
|
|
469
|
+
"type": "`HTMLElement | null`",
|
|
470
|
+
"default": "`null`",
|
|
471
|
+
"description": "DOM node to render the portal into."
|
|
472
|
+
}
|
|
473
|
+
],
|
|
474
|
+
"examples": [
|
|
475
|
+
{
|
|
476
|
+
"language": "tsx",
|
|
477
|
+
"meta": "lineNumbers",
|
|
478
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
479
|
+
}
|
|
480
|
+
]
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
"name": "AlertDialogTitle",
|
|
484
|
+
"title": "Alert Dialog",
|
|
485
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
486
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
487
|
+
"docSlug": "alert-dialog",
|
|
488
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
489
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
490
|
+
"sourcePaths": [
|
|
491
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
492
|
+
],
|
|
493
|
+
"props": [
|
|
494
|
+
{
|
|
495
|
+
"name": "`className`",
|
|
496
|
+
"type": "string",
|
|
497
|
+
"default": "-",
|
|
498
|
+
"description": "Additional classes for the title."
|
|
499
|
+
}
|
|
500
|
+
],
|
|
501
|
+
"examples": [
|
|
502
|
+
{
|
|
503
|
+
"language": "tsx",
|
|
504
|
+
"meta": "lineNumbers",
|
|
505
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
506
|
+
}
|
|
507
|
+
]
|
|
508
|
+
},
|
|
509
|
+
{
|
|
510
|
+
"name": "AlertDialogTrigger",
|
|
511
|
+
"title": "Alert Dialog",
|
|
512
|
+
"description": "An alert dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
513
|
+
"docsPath": "docs/content/docs/components/alert-dialog.mdx",
|
|
514
|
+
"docSlug": "alert-dialog",
|
|
515
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog",
|
|
516
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/alert-dialog#api-reference",
|
|
517
|
+
"sourcePaths": [
|
|
518
|
+
"src/components/alert-dialog/alert-dialog.tsx"
|
|
519
|
+
],
|
|
520
|
+
"props": [
|
|
521
|
+
{
|
|
522
|
+
"name": "`asChild`",
|
|
523
|
+
"type": "boolean",
|
|
524
|
+
"default": "`false`",
|
|
525
|
+
"description": "Render the trigger as its child (e.g., custom button)."
|
|
526
|
+
}
|
|
527
|
+
],
|
|
528
|
+
"examples": [
|
|
529
|
+
{
|
|
530
|
+
"language": "tsx",
|
|
531
|
+
"meta": "lineNumbers",
|
|
532
|
+
"code": "import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Button } from \"@epilot/volt-ui\"\n\n<AlertDialog>\n <AlertDialogTrigger asChild>\n <Button variant=\"destructive\">Delete Account</Button>\n </AlertDialogTrigger>\n <AlertDialogContent>\n <AlertDialogHeader>\n <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n <AlertDialogDescription>\n This action cannot be undone. This will permanently delete your\n account and remove your data from our servers.\n </AlertDialogDescription>\n </AlertDialogHeader>\n <AlertDialogFooter>\n <AlertDialogCancel>Cancel</AlertDialogCancel>\n <AlertDialogAction variant=\"primary\">Confirm</AlertDialogAction>\n </AlertDialogFooter>\n </AlertDialogContent>\n</AlertDialog>"
|
|
533
|
+
}
|
|
534
|
+
]
|
|
535
|
+
},
|
|
536
|
+
{
|
|
537
|
+
"name": "Badge",
|
|
538
|
+
"title": "Badge",
|
|
539
|
+
"description": "A Badge is a small label that can be used to display a status or a value",
|
|
540
|
+
"docsPath": "docs/content/docs/components/badge.mdx",
|
|
541
|
+
"docSlug": "badge",
|
|
542
|
+
"documentationUrl": null,
|
|
543
|
+
"apiReferenceUrl": null,
|
|
544
|
+
"sourcePaths": [
|
|
545
|
+
"src/components/badge/badge.tsx"
|
|
546
|
+
],
|
|
547
|
+
"props": [
|
|
548
|
+
{
|
|
549
|
+
"name": "`color`",
|
|
550
|
+
"type": "\"blue\" | \"sky\" | \"mint\" | \"green\" | \"teal\" | \"cyan\" | \"indigo\" | \"purple\" | \"pink\" | \"red\" | \"orange\" | \"yellow\" | \"bronze\" | \"gray\"",
|
|
551
|
+
"default": "`\"blue\"`",
|
|
552
|
+
"description": "The color variant of the badge."
|
|
553
|
+
},
|
|
554
|
+
{
|
|
555
|
+
"name": "`style`",
|
|
556
|
+
"type": "\"soft\" | \"solid\" | \"surface\"",
|
|
557
|
+
"default": "`\"soft\"`",
|
|
558
|
+
"description": "The style variant of the badge."
|
|
559
|
+
},
|
|
560
|
+
{
|
|
561
|
+
"name": "`shape`",
|
|
562
|
+
"type": "\"default\" | \"rounded\"",
|
|
563
|
+
"default": "`\"default\"`",
|
|
564
|
+
"description": "The shape variant of the badge. \"default\" uses rounded corners, \"rounded\" uses a pill shape."
|
|
565
|
+
},
|
|
566
|
+
{
|
|
567
|
+
"name": "`asChild`",
|
|
568
|
+
"type": "boolean",
|
|
569
|
+
"default": "`false`",
|
|
570
|
+
"description": "When true, the badge will render as its child element instead of a span."
|
|
571
|
+
},
|
|
572
|
+
{
|
|
573
|
+
"name": "`className`",
|
|
574
|
+
"type": "string",
|
|
575
|
+
"default": "-",
|
|
576
|
+
"description": "Additional CSS classes to apply to the badge."
|
|
577
|
+
}
|
|
578
|
+
],
|
|
579
|
+
"examples": [
|
|
580
|
+
{
|
|
581
|
+
"language": "tsx",
|
|
582
|
+
"meta": "lineNumbers",
|
|
583
|
+
"code": "import { Badge } from \"@epilot/volt-ui\"\n\n<Badge color=\"blue\" style=\"solid\">Blue</Badge>"
|
|
584
|
+
}
|
|
585
|
+
]
|
|
586
|
+
},
|
|
587
|
+
{
|
|
588
|
+
"name": "Button",
|
|
589
|
+
"title": "Button",
|
|
590
|
+
"description": "Displays a button or a component that looks like a button.",
|
|
591
|
+
"docsPath": "docs/content/docs/components/button.mdx",
|
|
592
|
+
"docSlug": "button",
|
|
593
|
+
"documentationUrl": null,
|
|
594
|
+
"apiReferenceUrl": null,
|
|
595
|
+
"sourcePaths": [
|
|
596
|
+
"src/components/button/button.tsx"
|
|
597
|
+
],
|
|
598
|
+
"props": [
|
|
599
|
+
{
|
|
600
|
+
"name": "`variant`",
|
|
601
|
+
"type": "\"primary\" | \"secondary\" | \"tertiary\" | \"destructive\"",
|
|
602
|
+
"default": "\"primary\"",
|
|
603
|
+
"description": "The visual style variant of the button."
|
|
604
|
+
},
|
|
605
|
+
{
|
|
606
|
+
"name": "`size`",
|
|
607
|
+
"type": "\"xs\" | \"sm\" | \"base\" | \"lg\" | \"icon\" | \"icon-xs\" | \"icon-sm\" | \"icon-lg\"",
|
|
608
|
+
"default": "\"base\"",
|
|
609
|
+
"description": "The size of the button."
|
|
610
|
+
},
|
|
611
|
+
{
|
|
612
|
+
"name": "`shape`",
|
|
613
|
+
"type": "\"normal\" | \"rounded\"",
|
|
614
|
+
"default": "\"rounded\"",
|
|
615
|
+
"description": "The shape of the button."
|
|
616
|
+
},
|
|
617
|
+
{
|
|
618
|
+
"name": "`asChild`",
|
|
619
|
+
"type": "boolean",
|
|
620
|
+
"default": "false",
|
|
621
|
+
"description": "When true, the button will render as its child element instead of a button."
|
|
622
|
+
}
|
|
623
|
+
],
|
|
624
|
+
"examples": [
|
|
625
|
+
{
|
|
626
|
+
"language": "tsx",
|
|
627
|
+
"meta": "lineNumbers",
|
|
628
|
+
"code": "import { Button } from \"@epilot/volt-ui\";\n\n<Button variant=\"primary\">Primary</Button>\n<Button variant=\"secondary\" shape=\"normal\">Secondary</Button>\n<Button variant=\"tertiary\" shape=\"normal\">Tertiary</Button>\n<Button variant=\"destructive\" shape=\"normal\">Destructive</Button>\n<Button size=\"icon\"><PlusIcon /></Button>"
|
|
629
|
+
},
|
|
630
|
+
{
|
|
631
|
+
"language": "tsx",
|
|
632
|
+
"meta": "lineNumbers",
|
|
633
|
+
"code": "import { Button } from \"@epilot/volt-ui\";\n\n<Button size=\"xs\">Extra Small</Button>\n<Button size=\"sm\">Small</Button>\n<Button size=\"base\">Base</Button>\n<Button size=\"lg\">Large</Button>\n\n<Button size=\"icon-xs\"><PlusIcon /></Button>\n<Button size=\"icon-sm\"><PlusIcon /></Button>\n<Button size=\"icon\"><PlusIcon /></Button>\n<Button size=\"icon-lg\"><PlusIcon /></Button>"
|
|
634
|
+
},
|
|
635
|
+
{
|
|
636
|
+
"language": "tsx",
|
|
637
|
+
"meta": null,
|
|
638
|
+
"code": "<Button asChild variant=\"primary\">\n <a href=\"/docs/get-started\">Documentation <ExternalLink /></a>\n</Button>"
|
|
639
|
+
}
|
|
640
|
+
]
|
|
641
|
+
},
|
|
642
|
+
{
|
|
643
|
+
"name": "ButtonGroup",
|
|
644
|
+
"title": "Button Group",
|
|
645
|
+
"description": "A group of buttons that can be used to group related actions.",
|
|
646
|
+
"docsPath": "docs/content/docs/components/button-group.mdx",
|
|
647
|
+
"docSlug": "button-group",
|
|
648
|
+
"documentationUrl": null,
|
|
649
|
+
"apiReferenceUrl": null,
|
|
650
|
+
"sourcePaths": [
|
|
651
|
+
"src/components/button/button-group.tsx"
|
|
652
|
+
],
|
|
653
|
+
"props": [
|
|
654
|
+
{
|
|
655
|
+
"name": "`orientation`",
|
|
656
|
+
"type": "`\"horizontal\"` | `\"vertical\"`",
|
|
657
|
+
"default": "`\"horizontal\"`",
|
|
658
|
+
"description": "The orientation of the button group. When `\"horizontal\"`, buttons are arranged in a row. When `\"vertical\"`, buttons are arranged in a column."
|
|
659
|
+
},
|
|
660
|
+
{
|
|
661
|
+
"name": "`className`",
|
|
662
|
+
"type": "`string`",
|
|
663
|
+
"default": "-",
|
|
664
|
+
"description": "Additional CSS classes."
|
|
665
|
+
},
|
|
666
|
+
{
|
|
667
|
+
"name": "`children`",
|
|
668
|
+
"type": "`React.ReactNode`",
|
|
669
|
+
"default": "-",
|
|
670
|
+
"description": "The buttons and separators to display in the group."
|
|
671
|
+
}
|
|
672
|
+
],
|
|
673
|
+
"examples": [
|
|
674
|
+
{
|
|
675
|
+
"language": "tsx",
|
|
676
|
+
"meta": "lineNumbers",
|
|
677
|
+
"code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui\";\n\n<ButtonGroup>\n <Button><PlusIcon /></Button>\n <ButtonGroupSeparator />\n <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n <Button variant=\"secondary\">Action</Button>\n <ButtonGroupSeparator />\n <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n <Button variant=\"destructive\">Action</Button>\n <ButtonGroupSeparator />\n <Button variant=\"destructive\"><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n <Button><PlusIcon /></Button>\n <ButtonGroupSeparator orientation=\"vertical\" />\n <Button><MinusIcon /></Button>\n</ButtonGroup>"
|
|
678
|
+
}
|
|
679
|
+
]
|
|
680
|
+
},
|
|
681
|
+
{
|
|
682
|
+
"name": "ButtonGroupSeparator",
|
|
683
|
+
"title": "Button Group",
|
|
684
|
+
"description": "A group of buttons that can be used to group related actions.",
|
|
685
|
+
"docsPath": "docs/content/docs/components/button-group.mdx",
|
|
686
|
+
"docSlug": "button-group",
|
|
687
|
+
"documentationUrl": null,
|
|
688
|
+
"apiReferenceUrl": null,
|
|
689
|
+
"sourcePaths": [
|
|
690
|
+
"src/components/button/button-group.tsx"
|
|
691
|
+
],
|
|
692
|
+
"props": [
|
|
693
|
+
{
|
|
694
|
+
"name": "`orientation`",
|
|
695
|
+
"type": "`\"horizontal\"` | `\"vertical\"`",
|
|
696
|
+
"default": "`\"vertical\"`",
|
|
697
|
+
"description": "The orientation of the separator. When used in a horizontal ButtonGroup, use `\"vertical\"`. When used in a vertical ButtonGroup, use `\"horizontal\"`."
|
|
698
|
+
},
|
|
699
|
+
{
|
|
700
|
+
"name": "`className`",
|
|
701
|
+
"type": "`string`",
|
|
702
|
+
"default": "-",
|
|
703
|
+
"description": "Additional CSS classes."
|
|
704
|
+
}
|
|
705
|
+
],
|
|
706
|
+
"examples": [
|
|
707
|
+
{
|
|
708
|
+
"language": "tsx",
|
|
709
|
+
"meta": "lineNumbers",
|
|
710
|
+
"code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui\";\n\n<ButtonGroup>\n <Button><PlusIcon /></Button>\n <ButtonGroupSeparator />\n <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n <Button variant=\"secondary\">Action</Button>\n <ButtonGroupSeparator />\n <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n <Button variant=\"destructive\">Action</Button>\n <ButtonGroupSeparator />\n <Button variant=\"destructive\"><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n <Button><PlusIcon /></Button>\n <ButtonGroupSeparator orientation=\"vertical\" />\n <Button><MinusIcon /></Button>\n</ButtonGroup>"
|
|
711
|
+
}
|
|
712
|
+
]
|
|
713
|
+
},
|
|
714
|
+
{
|
|
715
|
+
"name": "ButtonGroupText",
|
|
716
|
+
"title": "Button Group",
|
|
717
|
+
"description": "A group of buttons that can be used to group related actions.",
|
|
718
|
+
"docsPath": "docs/content/docs/components/button-group.mdx",
|
|
719
|
+
"docSlug": "button-group",
|
|
720
|
+
"documentationUrl": null,
|
|
721
|
+
"apiReferenceUrl": null,
|
|
722
|
+
"sourcePaths": [
|
|
723
|
+
"src/components/button/button-group.tsx"
|
|
724
|
+
],
|
|
725
|
+
"props": [
|
|
726
|
+
{
|
|
727
|
+
"name": "`asChild`",
|
|
728
|
+
"type": "`boolean`",
|
|
729
|
+
"default": "`false`",
|
|
730
|
+
"description": "When `true`, the component will render as its child element instead of a div."
|
|
731
|
+
},
|
|
732
|
+
{
|
|
733
|
+
"name": "`className`",
|
|
734
|
+
"type": "`string`",
|
|
735
|
+
"default": "-",
|
|
736
|
+
"description": "Additional CSS classes."
|
|
737
|
+
},
|
|
738
|
+
{
|
|
739
|
+
"name": "`children`",
|
|
740
|
+
"type": "`React.ReactNode`",
|
|
741
|
+
"default": "-",
|
|
742
|
+
"description": "The text content to display."
|
|
743
|
+
}
|
|
744
|
+
],
|
|
745
|
+
"examples": [
|
|
746
|
+
{
|
|
747
|
+
"language": "tsx",
|
|
748
|
+
"meta": "lineNumbers",
|
|
749
|
+
"code": "import { ButtonGroup, ButtonGroupSeparator, Button } from \"@epilot/volt-ui\";\n\n<ButtonGroup>\n <Button><PlusIcon /></Button>\n <ButtonGroupSeparator />\n <Button>Add dashboard</Button>\n</ButtonGroup>\n\n<ButtonGroup>\n <Button variant=\"secondary\">Action</Button>\n <ButtonGroupSeparator />\n <Button variant=\"secondary\"><ChevronDownIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup>\n <Button variant=\"destructive\">Action</Button>\n <ButtonGroupSeparator />\n <Button variant=\"destructive\"><EllipsisIcon /></Button>\n</ButtonGroup>\n\n<ButtonGroup orientation=\"vertical\">\n <Button><PlusIcon /></Button>\n <ButtonGroupSeparator orientation=\"vertical\" />\n <Button><MinusIcon /></Button>\n</ButtonGroup>"
|
|
750
|
+
}
|
|
751
|
+
]
|
|
752
|
+
},
|
|
753
|
+
{
|
|
754
|
+
"name": "Callout",
|
|
755
|
+
"title": "Callout",
|
|
756
|
+
"description": "A Callout is a container that displays a message or notification",
|
|
757
|
+
"docsPath": "docs/content/docs/components/callout.mdx",
|
|
758
|
+
"docSlug": "callout",
|
|
759
|
+
"documentationUrl": null,
|
|
760
|
+
"apiReferenceUrl": null,
|
|
761
|
+
"sourcePaths": [
|
|
762
|
+
"src/components/callout/callout.tsx"
|
|
763
|
+
],
|
|
764
|
+
"props": [
|
|
765
|
+
{
|
|
766
|
+
"name": "`variant`",
|
|
767
|
+
"type": "`\"info\"` | `\"gray\"` | `\"success\"` | `\"warning\"` | `\"destructive\"`",
|
|
768
|
+
"default": "`\"info\"`",
|
|
769
|
+
"description": "The visual variant of the callout. Determines the background color and text color."
|
|
770
|
+
},
|
|
771
|
+
{
|
|
772
|
+
"name": "`className`",
|
|
773
|
+
"type": "`string`",
|
|
774
|
+
"default": "-",
|
|
775
|
+
"description": "Additional CSS classes to apply to the callout container."
|
|
776
|
+
},
|
|
777
|
+
{
|
|
778
|
+
"name": "`hideIcon`",
|
|
779
|
+
"type": "`boolean`",
|
|
780
|
+
"default": "`false`",
|
|
781
|
+
"description": "Whether to hide the icon."
|
|
782
|
+
}
|
|
783
|
+
],
|
|
784
|
+
"examples": [
|
|
785
|
+
{
|
|
786
|
+
"language": "tsx",
|
|
787
|
+
"meta": "lineNumbers",
|
|
788
|
+
"code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n <CalloutTitle>Info</CalloutTitle>\n <CalloutDescription>This is an information message.</CalloutDescription>\n <CalloutAction>\n <Button variant=\"secondary\">Close</Button>\n </CalloutAction>\n</Callout>"
|
|
789
|
+
}
|
|
790
|
+
]
|
|
791
|
+
},
|
|
792
|
+
{
|
|
793
|
+
"name": "CalloutAction",
|
|
794
|
+
"title": "Callout",
|
|
795
|
+
"description": "A Callout is a container that displays a message or notification",
|
|
796
|
+
"docsPath": "docs/content/docs/components/callout.mdx",
|
|
797
|
+
"docSlug": "callout",
|
|
798
|
+
"documentationUrl": null,
|
|
799
|
+
"apiReferenceUrl": null,
|
|
800
|
+
"sourcePaths": [
|
|
801
|
+
"src/components/callout/callout.tsx"
|
|
802
|
+
],
|
|
803
|
+
"props": [
|
|
804
|
+
{
|
|
805
|
+
"name": "`align`",
|
|
806
|
+
"type": "`\"start\"` | `\"end\"`",
|
|
807
|
+
"default": "`\"start\"`",
|
|
808
|
+
"description": "The horizontal alignment of the action content."
|
|
809
|
+
},
|
|
810
|
+
{
|
|
811
|
+
"name": "`className`",
|
|
812
|
+
"type": "`string`",
|
|
813
|
+
"default": "-",
|
|
814
|
+
"description": "Additional CSS classes to apply to the action container."
|
|
815
|
+
}
|
|
816
|
+
],
|
|
817
|
+
"examples": [
|
|
818
|
+
{
|
|
819
|
+
"language": "tsx",
|
|
820
|
+
"meta": "lineNumbers",
|
|
821
|
+
"code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n <CalloutTitle>Info</CalloutTitle>\n <CalloutDescription>This is an information message.</CalloutDescription>\n <CalloutAction>\n <Button variant=\"secondary\">Close</Button>\n </CalloutAction>\n</Callout>"
|
|
822
|
+
}
|
|
823
|
+
]
|
|
824
|
+
},
|
|
825
|
+
{
|
|
826
|
+
"name": "CalloutDescription",
|
|
827
|
+
"title": "Callout",
|
|
828
|
+
"description": "A Callout is a container that displays a message or notification",
|
|
829
|
+
"docsPath": "docs/content/docs/components/callout.mdx",
|
|
830
|
+
"docSlug": "callout",
|
|
831
|
+
"documentationUrl": null,
|
|
832
|
+
"apiReferenceUrl": null,
|
|
833
|
+
"sourcePaths": [
|
|
834
|
+
"src/components/callout/callout.tsx"
|
|
835
|
+
],
|
|
836
|
+
"props": [
|
|
837
|
+
{
|
|
838
|
+
"name": "`className`",
|
|
839
|
+
"type": "`string`",
|
|
840
|
+
"default": "-",
|
|
841
|
+
"description": "Additional CSS classes to apply to the description."
|
|
842
|
+
}
|
|
843
|
+
],
|
|
844
|
+
"examples": [
|
|
845
|
+
{
|
|
846
|
+
"language": "tsx",
|
|
847
|
+
"meta": "lineNumbers",
|
|
848
|
+
"code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n <CalloutTitle>Info</CalloutTitle>\n <CalloutDescription>This is an information message.</CalloutDescription>\n <CalloutAction>\n <Button variant=\"secondary\">Close</Button>\n </CalloutAction>\n</Callout>"
|
|
849
|
+
}
|
|
850
|
+
]
|
|
851
|
+
},
|
|
852
|
+
{
|
|
853
|
+
"name": "CalloutTitle",
|
|
854
|
+
"title": "Callout",
|
|
855
|
+
"description": "A Callout is a container that displays a message or notification",
|
|
856
|
+
"docsPath": "docs/content/docs/components/callout.mdx",
|
|
857
|
+
"docSlug": "callout",
|
|
858
|
+
"documentationUrl": null,
|
|
859
|
+
"apiReferenceUrl": null,
|
|
860
|
+
"sourcePaths": [
|
|
861
|
+
"src/components/callout/callout.tsx"
|
|
862
|
+
],
|
|
863
|
+
"props": [
|
|
864
|
+
{
|
|
865
|
+
"name": "`className`",
|
|
866
|
+
"type": "`string`",
|
|
867
|
+
"default": "-",
|
|
868
|
+
"description": "Additional CSS classes to apply to the title."
|
|
869
|
+
}
|
|
870
|
+
],
|
|
871
|
+
"examples": [
|
|
872
|
+
{
|
|
873
|
+
"language": "tsx",
|
|
874
|
+
"meta": "lineNumbers",
|
|
875
|
+
"code": "import { Callout, CalloutTitle, CalloutDescription } from \"@epilot/volt-ui\"\n\n<Callout variant=\"info\">\n <CalloutTitle>Info</CalloutTitle>\n <CalloutDescription>This is an information message.</CalloutDescription>\n <CalloutAction>\n <Button variant=\"secondary\">Close</Button>\n </CalloutAction>\n</Callout>"
|
|
876
|
+
}
|
|
877
|
+
]
|
|
878
|
+
},
|
|
879
|
+
{
|
|
880
|
+
"name": "Card",
|
|
881
|
+
"title": "Card",
|
|
882
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
883
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
884
|
+
"docSlug": "card",
|
|
885
|
+
"documentationUrl": null,
|
|
886
|
+
"apiReferenceUrl": null,
|
|
887
|
+
"sourcePaths": [
|
|
888
|
+
"src/components/card/card.tsx"
|
|
889
|
+
],
|
|
890
|
+
"props": [
|
|
891
|
+
{
|
|
892
|
+
"name": "`className`",
|
|
893
|
+
"type": "string",
|
|
894
|
+
"default": "-",
|
|
895
|
+
"description": "Additional classes for the container."
|
|
896
|
+
}
|
|
897
|
+
],
|
|
898
|
+
"examples": [
|
|
899
|
+
{
|
|
900
|
+
"language": "tsx",
|
|
901
|
+
"meta": "lineNumbers",
|
|
902
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
903
|
+
}
|
|
904
|
+
]
|
|
905
|
+
},
|
|
906
|
+
{
|
|
907
|
+
"name": "CardAction",
|
|
908
|
+
"title": "Card",
|
|
909
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
910
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
911
|
+
"docSlug": "card",
|
|
912
|
+
"documentationUrl": null,
|
|
913
|
+
"apiReferenceUrl": null,
|
|
914
|
+
"sourcePaths": [
|
|
915
|
+
"src/components/card/card.tsx"
|
|
916
|
+
],
|
|
917
|
+
"props": [
|
|
918
|
+
{
|
|
919
|
+
"name": "`className`",
|
|
920
|
+
"type": "string",
|
|
921
|
+
"default": "-",
|
|
922
|
+
"description": "Additional classes for the action."
|
|
923
|
+
}
|
|
924
|
+
],
|
|
925
|
+
"examples": [
|
|
926
|
+
{
|
|
927
|
+
"language": "tsx",
|
|
928
|
+
"meta": "lineNumbers",
|
|
929
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
930
|
+
}
|
|
931
|
+
]
|
|
932
|
+
},
|
|
933
|
+
{
|
|
934
|
+
"name": "CardContent",
|
|
935
|
+
"title": "Card",
|
|
936
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
937
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
938
|
+
"docSlug": "card",
|
|
939
|
+
"documentationUrl": null,
|
|
940
|
+
"apiReferenceUrl": null,
|
|
941
|
+
"sourcePaths": [
|
|
942
|
+
"src/components/card/card.tsx"
|
|
943
|
+
],
|
|
944
|
+
"props": [
|
|
945
|
+
{
|
|
946
|
+
"name": "`className`",
|
|
947
|
+
"type": "string",
|
|
948
|
+
"default": "-",
|
|
949
|
+
"description": "Additional classes for the body."
|
|
950
|
+
}
|
|
951
|
+
],
|
|
952
|
+
"examples": [
|
|
953
|
+
{
|
|
954
|
+
"language": "tsx",
|
|
955
|
+
"meta": "lineNumbers",
|
|
956
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
957
|
+
}
|
|
958
|
+
]
|
|
959
|
+
},
|
|
960
|
+
{
|
|
961
|
+
"name": "CardDescription",
|
|
962
|
+
"title": "Card",
|
|
963
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
964
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
965
|
+
"docSlug": "card",
|
|
966
|
+
"documentationUrl": null,
|
|
967
|
+
"apiReferenceUrl": null,
|
|
968
|
+
"sourcePaths": [
|
|
969
|
+
"src/components/card/card.tsx"
|
|
970
|
+
],
|
|
971
|
+
"props": [
|
|
972
|
+
{
|
|
973
|
+
"name": "`className`",
|
|
974
|
+
"type": "string",
|
|
975
|
+
"default": "-",
|
|
976
|
+
"description": "Additional classes for the description."
|
|
977
|
+
}
|
|
978
|
+
],
|
|
979
|
+
"examples": [
|
|
980
|
+
{
|
|
981
|
+
"language": "tsx",
|
|
982
|
+
"meta": "lineNumbers",
|
|
983
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
984
|
+
}
|
|
985
|
+
]
|
|
986
|
+
},
|
|
987
|
+
{
|
|
988
|
+
"name": "CardFooter",
|
|
989
|
+
"title": "Card",
|
|
990
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
991
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
992
|
+
"docSlug": "card",
|
|
993
|
+
"documentationUrl": null,
|
|
994
|
+
"apiReferenceUrl": null,
|
|
995
|
+
"sourcePaths": [
|
|
996
|
+
"src/components/card/card.tsx"
|
|
997
|
+
],
|
|
998
|
+
"props": [
|
|
999
|
+
{
|
|
1000
|
+
"name": "`className`",
|
|
1001
|
+
"type": "string",
|
|
1002
|
+
"default": "-",
|
|
1003
|
+
"description": "Additional classes for the footer."
|
|
1004
|
+
}
|
|
1005
|
+
],
|
|
1006
|
+
"examples": [
|
|
1007
|
+
{
|
|
1008
|
+
"language": "tsx",
|
|
1009
|
+
"meta": "lineNumbers",
|
|
1010
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
1011
|
+
}
|
|
1012
|
+
]
|
|
1013
|
+
},
|
|
1014
|
+
{
|
|
1015
|
+
"name": "CardHeader",
|
|
1016
|
+
"title": "Card",
|
|
1017
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
1018
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
1019
|
+
"docSlug": "card",
|
|
1020
|
+
"documentationUrl": null,
|
|
1021
|
+
"apiReferenceUrl": null,
|
|
1022
|
+
"sourcePaths": [
|
|
1023
|
+
"src/components/card/card.tsx"
|
|
1024
|
+
],
|
|
1025
|
+
"props": [
|
|
1026
|
+
{
|
|
1027
|
+
"name": "`className`",
|
|
1028
|
+
"type": "string",
|
|
1029
|
+
"default": "-",
|
|
1030
|
+
"description": "Additional classes for the header."
|
|
1031
|
+
}
|
|
1032
|
+
],
|
|
1033
|
+
"examples": [
|
|
1034
|
+
{
|
|
1035
|
+
"language": "tsx",
|
|
1036
|
+
"meta": "lineNumbers",
|
|
1037
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
1038
|
+
}
|
|
1039
|
+
]
|
|
1040
|
+
},
|
|
1041
|
+
{
|
|
1042
|
+
"name": "CardTitle",
|
|
1043
|
+
"title": "Card",
|
|
1044
|
+
"description": "A container for grouping related content with optional header, actions, and footer.",
|
|
1045
|
+
"docsPath": "docs/content/docs/components/card.mdx",
|
|
1046
|
+
"docSlug": "card",
|
|
1047
|
+
"documentationUrl": null,
|
|
1048
|
+
"apiReferenceUrl": null,
|
|
1049
|
+
"sourcePaths": [
|
|
1050
|
+
"src/components/card/card.tsx"
|
|
1051
|
+
],
|
|
1052
|
+
"props": [
|
|
1053
|
+
{
|
|
1054
|
+
"name": "`className`",
|
|
1055
|
+
"type": "string",
|
|
1056
|
+
"default": "-",
|
|
1057
|
+
"description": "Additional classes for the title."
|
|
1058
|
+
}
|
|
1059
|
+
],
|
|
1060
|
+
"examples": [
|
|
1061
|
+
{
|
|
1062
|
+
"language": "tsx",
|
|
1063
|
+
"meta": "lineNumbers",
|
|
1064
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\n\n<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n</Card>"
|
|
1065
|
+
}
|
|
1066
|
+
]
|
|
1067
|
+
},
|
|
1068
|
+
{
|
|
1069
|
+
"name": "Checkbox",
|
|
1070
|
+
"title": "Checkbox",
|
|
1071
|
+
"description": "A Checkbox is a form control that allows the user to select a value from a set of options",
|
|
1072
|
+
"docsPath": "docs/content/docs/components/checkbox.mdx",
|
|
1073
|
+
"docSlug": "checkbox",
|
|
1074
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/checkbox",
|
|
1075
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/checkbox#api-reference",
|
|
1076
|
+
"sourcePaths": [
|
|
1077
|
+
"src/components/checkbox/checkbox.tsx"
|
|
1078
|
+
],
|
|
1079
|
+
"props": [
|
|
1080
|
+
{
|
|
1081
|
+
"name": "`checked`",
|
|
1082
|
+
"type": "boolean | \"indeterminate\"",
|
|
1083
|
+
"default": "-",
|
|
1084
|
+
"description": "Controlled checked state of the checkbox."
|
|
1085
|
+
},
|
|
1086
|
+
{
|
|
1087
|
+
"name": "`defaultChecked`",
|
|
1088
|
+
"type": "boolean | \"indeterminate\"",
|
|
1089
|
+
"default": "`false`",
|
|
1090
|
+
"description": "Uncontrolled default checked state."
|
|
1091
|
+
},
|
|
1092
|
+
{
|
|
1093
|
+
"name": "`onCheckedChange`",
|
|
1094
|
+
"type": "(checked: boolean | \"indeterminate\") => void",
|
|
1095
|
+
"default": "-",
|
|
1096
|
+
"description": "Callback fired when the checked state changes."
|
|
1097
|
+
},
|
|
1098
|
+
{
|
|
1099
|
+
"name": "`disabled`",
|
|
1100
|
+
"type": "boolean",
|
|
1101
|
+
"default": "`false`",
|
|
1102
|
+
"description": "When true, prevents the checkbox from being interacted with."
|
|
1103
|
+
},
|
|
1104
|
+
{
|
|
1105
|
+
"name": "`required`",
|
|
1106
|
+
"type": "boolean",
|
|
1107
|
+
"default": "`false`",
|
|
1108
|
+
"description": "When true, indicates that the checkbox must be checked before form submission."
|
|
1109
|
+
},
|
|
1110
|
+
{
|
|
1111
|
+
"name": "`name`",
|
|
1112
|
+
"type": "string",
|
|
1113
|
+
"default": "-",
|
|
1114
|
+
"description": "The name of the checkbox, used when submitting a form."
|
|
1115
|
+
},
|
|
1116
|
+
{
|
|
1117
|
+
"name": "`value`",
|
|
1118
|
+
"type": "string | number | readonly string[]",
|
|
1119
|
+
"default": "-",
|
|
1120
|
+
"description": "The value of the checkbox, used when submitting a form."
|
|
1121
|
+
},
|
|
1122
|
+
{
|
|
1123
|
+
"name": "`id`",
|
|
1124
|
+
"type": "string",
|
|
1125
|
+
"default": "-",
|
|
1126
|
+
"description": "The unique identifier for the checkbox element."
|
|
1127
|
+
},
|
|
1128
|
+
{
|
|
1129
|
+
"name": "`className`",
|
|
1130
|
+
"type": "string",
|
|
1131
|
+
"default": "-",
|
|
1132
|
+
"description": "Additional CSS classes to apply to the checkbox."
|
|
1133
|
+
}
|
|
1134
|
+
],
|
|
1135
|
+
"examples": [
|
|
1136
|
+
{
|
|
1137
|
+
"language": "tsx",
|
|
1138
|
+
"meta": "lineNumbers",
|
|
1139
|
+
"code": "import { Checkbox, Label } from \"@epilot/volt-ui\"\n\n<div>\n <Checkbox id=\"agree-to-terms\" />\n <Label htmlFor=\"agree-to-terms\">Accept terms and conditions.</Label>\n</div>\n\n<div>\n <Checkbox id=\"enable-notifications\" checked />\n <Label htmlFor=\"enable-notifications\">\n Notifications enabled\n </Label>\n</div>\n\n<div>\n <Checkbox id=\"some-items-selected\" checked=\"indeterminate\" />\n <Label htmlFor=\"some-items-selected\">\n Some items selected\n </Label>\n</div>"
|
|
1140
|
+
}
|
|
1141
|
+
]
|
|
1142
|
+
},
|
|
1143
|
+
{
|
|
1144
|
+
"name": "Dialog",
|
|
1145
|
+
"title": "Dialog",
|
|
1146
|
+
"description": "A Dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
1147
|
+
"docsPath": "docs/content/docs/components/dialog.mdx",
|
|
1148
|
+
"docSlug": "dialog",
|
|
1149
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/dialog",
|
|
1150
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/dialog#api-reference",
|
|
1151
|
+
"sourcePaths": [
|
|
1152
|
+
"src/components/dialog/dialog.tsx"
|
|
1153
|
+
],
|
|
1154
|
+
"props": [
|
|
1155
|
+
{
|
|
1156
|
+
"name": "`open`",
|
|
1157
|
+
"type": "boolean",
|
|
1158
|
+
"default": "-",
|
|
1159
|
+
"description": "Controlled open state of the dialog."
|
|
1160
|
+
},
|
|
1161
|
+
{
|
|
1162
|
+
"name": "`defaultOpen`",
|
|
1163
|
+
"type": "boolean",
|
|
1164
|
+
"default": "`false`",
|
|
1165
|
+
"description": "Uncontrolled default open state."
|
|
1166
|
+
},
|
|
1167
|
+
{
|
|
1168
|
+
"name": "`onOpenChange`",
|
|
1169
|
+
"type": "(open: boolean) => void",
|
|
1170
|
+
"default": "-",
|
|
1171
|
+
"description": "Callback fired when the open state changes."
|
|
1172
|
+
},
|
|
1173
|
+
{
|
|
1174
|
+
"name": "`modal`",
|
|
1175
|
+
"type": "boolean",
|
|
1176
|
+
"default": "`true`",
|
|
1177
|
+
"description": "When true, focus is trapped within the dialog and outside interaction is disabled."
|
|
1178
|
+
}
|
|
1179
|
+
],
|
|
1180
|
+
"examples": [
|
|
1181
|
+
{
|
|
1182
|
+
"language": "tsx",
|
|
1183
|
+
"meta": "lineNumbers",
|
|
1184
|
+
"code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Dialog>\n <DialogOverlay />\n <DialogTrigger asChild>\n <Button variant=\"outline\">Open</Button>\n </DialogTrigger>\n <DialogPortal>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you're\n done.\n </DialogDescription>\n </DialogHeader>\n \n <div>Content</div>\n \n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n</div>"
|
|
1185
|
+
}
|
|
1186
|
+
]
|
|
1187
|
+
},
|
|
1188
|
+
{
|
|
1189
|
+
"name": "DialogClose",
|
|
1190
|
+
"title": null,
|
|
1191
|
+
"description": null,
|
|
1192
|
+
"docsPath": null,
|
|
1193
|
+
"docSlug": null,
|
|
1194
|
+
"documentationUrl": null,
|
|
1195
|
+
"apiReferenceUrl": null,
|
|
1196
|
+
"sourcePaths": [
|
|
1197
|
+
"src/components/dialog/dialog.tsx"
|
|
1198
|
+
],
|
|
1199
|
+
"props": [],
|
|
1200
|
+
"examples": []
|
|
1201
|
+
},
|
|
1202
|
+
{
|
|
1203
|
+
"name": "DialogContent",
|
|
1204
|
+
"title": null,
|
|
1205
|
+
"description": null,
|
|
1206
|
+
"docsPath": null,
|
|
1207
|
+
"docSlug": null,
|
|
1208
|
+
"documentationUrl": null,
|
|
1209
|
+
"apiReferenceUrl": null,
|
|
1210
|
+
"sourcePaths": [
|
|
1211
|
+
"src/components/dialog/dialog.tsx"
|
|
1212
|
+
],
|
|
1213
|
+
"props": [],
|
|
1214
|
+
"examples": []
|
|
1215
|
+
},
|
|
1216
|
+
{
|
|
1217
|
+
"name": "DialogDescription",
|
|
1218
|
+
"title": null,
|
|
1219
|
+
"description": null,
|
|
1220
|
+
"docsPath": null,
|
|
1221
|
+
"docSlug": null,
|
|
1222
|
+
"documentationUrl": null,
|
|
1223
|
+
"apiReferenceUrl": null,
|
|
1224
|
+
"sourcePaths": [
|
|
1225
|
+
"src/components/dialog/dialog.tsx"
|
|
1226
|
+
],
|
|
1227
|
+
"props": [],
|
|
1228
|
+
"examples": []
|
|
1229
|
+
},
|
|
1230
|
+
{
|
|
1231
|
+
"name": "DialogFooter",
|
|
1232
|
+
"title": null,
|
|
1233
|
+
"description": null,
|
|
1234
|
+
"docsPath": null,
|
|
1235
|
+
"docSlug": null,
|
|
1236
|
+
"documentationUrl": null,
|
|
1237
|
+
"apiReferenceUrl": null,
|
|
1238
|
+
"sourcePaths": [
|
|
1239
|
+
"src/components/dialog/dialog.tsx"
|
|
1240
|
+
],
|
|
1241
|
+
"props": [],
|
|
1242
|
+
"examples": []
|
|
1243
|
+
},
|
|
1244
|
+
{
|
|
1245
|
+
"name": "DialogHeader",
|
|
1246
|
+
"title": null,
|
|
1247
|
+
"description": null,
|
|
1248
|
+
"docsPath": null,
|
|
1249
|
+
"docSlug": null,
|
|
1250
|
+
"documentationUrl": null,
|
|
1251
|
+
"apiReferenceUrl": null,
|
|
1252
|
+
"sourcePaths": [
|
|
1253
|
+
"src/components/dialog/dialog.tsx"
|
|
1254
|
+
],
|
|
1255
|
+
"props": [],
|
|
1256
|
+
"examples": []
|
|
1257
|
+
},
|
|
1258
|
+
{
|
|
1259
|
+
"name": "DialogOverlay",
|
|
1260
|
+
"title": "Dialog",
|
|
1261
|
+
"description": "A Dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
1262
|
+
"docsPath": "docs/content/docs/components/dialog.mdx",
|
|
1263
|
+
"docSlug": "dialog",
|
|
1264
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/dialog",
|
|
1265
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/dialog#api-reference",
|
|
1266
|
+
"sourcePaths": [
|
|
1267
|
+
"src/components/dialog/dialog.tsx"
|
|
1268
|
+
],
|
|
1269
|
+
"props": [
|
|
1270
|
+
{
|
|
1271
|
+
"name": "`className`",
|
|
1272
|
+
"type": "string",
|
|
1273
|
+
"default": "-",
|
|
1274
|
+
"description": "Additional CSS classes to apply to the overlay."
|
|
1275
|
+
}
|
|
1276
|
+
],
|
|
1277
|
+
"examples": [
|
|
1278
|
+
{
|
|
1279
|
+
"language": "tsx",
|
|
1280
|
+
"meta": "lineNumbers",
|
|
1281
|
+
"code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Dialog>\n <DialogOverlay />\n <DialogTrigger asChild>\n <Button variant=\"outline\">Open</Button>\n </DialogTrigger>\n <DialogPortal>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you're\n done.\n </DialogDescription>\n </DialogHeader>\n \n <div>Content</div>\n \n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n</div>"
|
|
1282
|
+
}
|
|
1283
|
+
]
|
|
1284
|
+
},
|
|
1285
|
+
{
|
|
1286
|
+
"name": "DialogPortal",
|
|
1287
|
+
"title": "Dialog",
|
|
1288
|
+
"description": "A Dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
1289
|
+
"docsPath": "docs/content/docs/components/dialog.mdx",
|
|
1290
|
+
"docSlug": "dialog",
|
|
1291
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/dialog",
|
|
1292
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/dialog#api-reference",
|
|
1293
|
+
"sourcePaths": [
|
|
1294
|
+
"src/components/dialog/dialog.tsx"
|
|
1295
|
+
],
|
|
1296
|
+
"props": [
|
|
1297
|
+
{
|
|
1298
|
+
"name": "`forceMount`",
|
|
1299
|
+
"type": "boolean",
|
|
1300
|
+
"default": "`false`",
|
|
1301
|
+
"description": "When true, the dialog content is always mounted."
|
|
1302
|
+
},
|
|
1303
|
+
{
|
|
1304
|
+
"name": "`container`",
|
|
1305
|
+
"type": "HTMLElement | null",
|
|
1306
|
+
"default": "`null`",
|
|
1307
|
+
"description": "The container to render the portal in."
|
|
1308
|
+
}
|
|
1309
|
+
],
|
|
1310
|
+
"examples": [
|
|
1311
|
+
{
|
|
1312
|
+
"language": "tsx",
|
|
1313
|
+
"meta": "lineNumbers",
|
|
1314
|
+
"code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Dialog>\n <DialogOverlay />\n <DialogTrigger asChild>\n <Button variant=\"outline\">Open</Button>\n </DialogTrigger>\n <DialogPortal>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you're\n done.\n </DialogDescription>\n </DialogHeader>\n \n <div>Content</div>\n \n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n</div>"
|
|
1315
|
+
}
|
|
1316
|
+
]
|
|
1317
|
+
},
|
|
1318
|
+
{
|
|
1319
|
+
"name": "DialogTitle",
|
|
1320
|
+
"title": null,
|
|
1321
|
+
"description": null,
|
|
1322
|
+
"docsPath": null,
|
|
1323
|
+
"docSlug": null,
|
|
1324
|
+
"documentationUrl": null,
|
|
1325
|
+
"apiReferenceUrl": null,
|
|
1326
|
+
"sourcePaths": [
|
|
1327
|
+
"src/components/dialog/dialog.tsx"
|
|
1328
|
+
],
|
|
1329
|
+
"props": [],
|
|
1330
|
+
"examples": []
|
|
1331
|
+
},
|
|
1332
|
+
{
|
|
1333
|
+
"name": "DialogTrigger",
|
|
1334
|
+
"title": "Dialog",
|
|
1335
|
+
"description": "A Dialog is a modal surface that appears above the main interface to capture the user’s attention",
|
|
1336
|
+
"docsPath": "docs/content/docs/components/dialog.mdx",
|
|
1337
|
+
"docSlug": "dialog",
|
|
1338
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/dialog",
|
|
1339
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/dialog#api-reference",
|
|
1340
|
+
"sourcePaths": [
|
|
1341
|
+
"src/components/dialog/dialog.tsx"
|
|
1342
|
+
],
|
|
1343
|
+
"props": [
|
|
1344
|
+
{
|
|
1345
|
+
"name": "`asChild`",
|
|
1346
|
+
"type": "boolean",
|
|
1347
|
+
"default": "`false`",
|
|
1348
|
+
"description": "When true, merges props with the child element instead of rendering a button."
|
|
1349
|
+
}
|
|
1350
|
+
],
|
|
1351
|
+
"examples": [
|
|
1352
|
+
{
|
|
1353
|
+
"language": "tsx",
|
|
1354
|
+
"meta": "lineNumbers",
|
|
1355
|
+
"code": "import { Dialog, DialogTrigger, DialogContent, DialogPortal, DialogFooter, DialogClose, Button, DialogHeader, DialogTitle, DialogDescription } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Dialog>\n <DialogOverlay />\n <DialogTrigger asChild>\n <Button variant=\"outline\">Open</Button>\n </DialogTrigger>\n <DialogPortal>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Edit profile</DialogTitle>\n <DialogDescription>\n Make changes to your profile here. Click save when you're\n done.\n </DialogDescription>\n </DialogHeader>\n \n <div>Content</div>\n \n <DialogFooter>\n <DialogClose asChild>\n <Button variant=\"outline\">Cancel</Button>\n </DialogClose>\n <Button type=\"submit\">Save changes</Button>\n </DialogFooter>\n </DialogContent>\n </DialogPortal>\n </Dialog>\n</div>"
|
|
1356
|
+
}
|
|
1357
|
+
]
|
|
1358
|
+
},
|
|
1359
|
+
{
|
|
1360
|
+
"name": "Field",
|
|
1361
|
+
"title": "Field",
|
|
1362
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
1363
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
1364
|
+
"docSlug": "field/index",
|
|
1365
|
+
"documentationUrl": null,
|
|
1366
|
+
"apiReferenceUrl": null,
|
|
1367
|
+
"sourcePaths": [
|
|
1368
|
+
"src/components/field/field.tsx"
|
|
1369
|
+
],
|
|
1370
|
+
"props": [
|
|
1371
|
+
{
|
|
1372
|
+
"name": "`children`",
|
|
1373
|
+
"type": "React.ReactNode",
|
|
1374
|
+
"default": "-",
|
|
1375
|
+
"description": "The field content such as FieldLabel, FieldInput etc,."
|
|
1376
|
+
},
|
|
1377
|
+
{
|
|
1378
|
+
"name": "`variant`",
|
|
1379
|
+
"type": "\"default\" | \"highlight\" | \"destructive\"",
|
|
1380
|
+
"default": "`\"default\"`",
|
|
1381
|
+
"description": "The variant of the field."
|
|
1382
|
+
}
|
|
1383
|
+
],
|
|
1384
|
+
"examples": [
|
|
1385
|
+
{
|
|
1386
|
+
"language": "tsx",
|
|
1387
|
+
"meta": "lineNumbers",
|
|
1388
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
1389
|
+
},
|
|
1390
|
+
{
|
|
1391
|
+
"language": "tsx",
|
|
1392
|
+
"meta": "lineNumbers",
|
|
1393
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
1394
|
+
},
|
|
1395
|
+
{
|
|
1396
|
+
"language": "tsx",
|
|
1397
|
+
"meta": "lineNumbers",
|
|
1398
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
1399
|
+
}
|
|
1400
|
+
]
|
|
1401
|
+
},
|
|
1402
|
+
{
|
|
1403
|
+
"name": "FieldCombobox",
|
|
1404
|
+
"title": "Field Combobox",
|
|
1405
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1406
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1407
|
+
"docSlug": "field/field-combobox",
|
|
1408
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1409
|
+
"apiReferenceUrl": null,
|
|
1410
|
+
"sourcePaths": [
|
|
1411
|
+
"src/components/field/field-combobox.tsx"
|
|
1412
|
+
],
|
|
1413
|
+
"props": [
|
|
1414
|
+
{
|
|
1415
|
+
"name": "`open`",
|
|
1416
|
+
"type": "boolean",
|
|
1417
|
+
"default": "-",
|
|
1418
|
+
"description": "Controlled open state of the combobox."
|
|
1419
|
+
},
|
|
1420
|
+
{
|
|
1421
|
+
"name": "`defaultOpen`",
|
|
1422
|
+
"type": "boolean",
|
|
1423
|
+
"default": "`false`",
|
|
1424
|
+
"description": "Whether the combobox is open on initial render."
|
|
1425
|
+
},
|
|
1426
|
+
{
|
|
1427
|
+
"name": "`onOpenChange`",
|
|
1428
|
+
"type": "(open: boolean) => void",
|
|
1429
|
+
"default": "-",
|
|
1430
|
+
"description": "Invoked when the popover opens or closes."
|
|
1431
|
+
},
|
|
1432
|
+
{
|
|
1433
|
+
"name": "`modal`",
|
|
1434
|
+
"type": "boolean",
|
|
1435
|
+
"default": "`false`",
|
|
1436
|
+
"description": "If `true`, focus is trapped inside the popover."
|
|
1437
|
+
}
|
|
1438
|
+
],
|
|
1439
|
+
"examples": [
|
|
1440
|
+
{
|
|
1441
|
+
"language": "tsx",
|
|
1442
|
+
"meta": "lineNumbers",
|
|
1443
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1444
|
+
}
|
|
1445
|
+
]
|
|
1446
|
+
},
|
|
1447
|
+
{
|
|
1448
|
+
"name": "FieldComboboxClear",
|
|
1449
|
+
"title": null,
|
|
1450
|
+
"description": null,
|
|
1451
|
+
"docsPath": null,
|
|
1452
|
+
"docSlug": null,
|
|
1453
|
+
"documentationUrl": null,
|
|
1454
|
+
"apiReferenceUrl": null,
|
|
1455
|
+
"sourcePaths": [
|
|
1456
|
+
"src/components/field/field-combobox.tsx"
|
|
1457
|
+
],
|
|
1458
|
+
"props": [],
|
|
1459
|
+
"examples": []
|
|
1460
|
+
},
|
|
1461
|
+
{
|
|
1462
|
+
"name": "FieldComboboxClearValue",
|
|
1463
|
+
"title": null,
|
|
1464
|
+
"description": null,
|
|
1465
|
+
"docsPath": null,
|
|
1466
|
+
"docSlug": null,
|
|
1467
|
+
"documentationUrl": null,
|
|
1468
|
+
"apiReferenceUrl": null,
|
|
1469
|
+
"sourcePaths": [
|
|
1470
|
+
"src/components/field/field-combobox.tsx"
|
|
1471
|
+
],
|
|
1472
|
+
"props": [],
|
|
1473
|
+
"examples": []
|
|
1474
|
+
},
|
|
1475
|
+
{
|
|
1476
|
+
"name": "FieldComboboxContent",
|
|
1477
|
+
"title": "Field Combobox",
|
|
1478
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1479
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1480
|
+
"docSlug": "field/field-combobox",
|
|
1481
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1482
|
+
"apiReferenceUrl": null,
|
|
1483
|
+
"sourcePaths": [
|
|
1484
|
+
"src/components/field/field-combobox.tsx"
|
|
1485
|
+
],
|
|
1486
|
+
"props": [
|
|
1487
|
+
{
|
|
1488
|
+
"name": "`side`",
|
|
1489
|
+
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
1490
|
+
"default": "`\"bottom\"`",
|
|
1491
|
+
"description": "Preferred side to render against the trigger."
|
|
1492
|
+
},
|
|
1493
|
+
{
|
|
1494
|
+
"name": "`align`",
|
|
1495
|
+
"type": "\"start\" | \"center\" | \"end\"",
|
|
1496
|
+
"default": "`\"center\"`",
|
|
1497
|
+
"description": "Horizontal alignment relative to the trigger."
|
|
1498
|
+
},
|
|
1499
|
+
{
|
|
1500
|
+
"name": "`sideOffset`",
|
|
1501
|
+
"type": "number",
|
|
1502
|
+
"default": "`4`",
|
|
1503
|
+
"description": "Gap between trigger and content."
|
|
1504
|
+
},
|
|
1505
|
+
{
|
|
1506
|
+
"name": "`className`",
|
|
1507
|
+
"type": "string",
|
|
1508
|
+
"default": "-",
|
|
1509
|
+
"description": "Customize the popover container."
|
|
1510
|
+
}
|
|
1511
|
+
],
|
|
1512
|
+
"examples": [
|
|
1513
|
+
{
|
|
1514
|
+
"language": "tsx",
|
|
1515
|
+
"meta": "lineNumbers",
|
|
1516
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1517
|
+
}
|
|
1518
|
+
]
|
|
1519
|
+
},
|
|
1520
|
+
{
|
|
1521
|
+
"name": "FieldComboboxEmpty",
|
|
1522
|
+
"title": "Field Combobox",
|
|
1523
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1524
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1525
|
+
"docSlug": "field/field-combobox",
|
|
1526
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1527
|
+
"apiReferenceUrl": null,
|
|
1528
|
+
"sourcePaths": [
|
|
1529
|
+
"src/components/field/field-combobox.tsx"
|
|
1530
|
+
],
|
|
1531
|
+
"props": [
|
|
1532
|
+
{
|
|
1533
|
+
"name": "`children`",
|
|
1534
|
+
"type": "ReactNode",
|
|
1535
|
+
"default": "-",
|
|
1536
|
+
"description": "Content displayed when the list is empty."
|
|
1537
|
+
},
|
|
1538
|
+
{
|
|
1539
|
+
"name": "`className`",
|
|
1540
|
+
"type": "string",
|
|
1541
|
+
"default": "-",
|
|
1542
|
+
"description": "Adjust typography or spacing."
|
|
1543
|
+
}
|
|
1544
|
+
],
|
|
1545
|
+
"examples": [
|
|
1546
|
+
{
|
|
1547
|
+
"language": "tsx",
|
|
1548
|
+
"meta": "lineNumbers",
|
|
1549
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1550
|
+
}
|
|
1551
|
+
]
|
|
1552
|
+
},
|
|
1553
|
+
{
|
|
1554
|
+
"name": "FieldComboboxGroup",
|
|
1555
|
+
"title": "Field Combobox",
|
|
1556
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1557
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1558
|
+
"docSlug": "field/field-combobox",
|
|
1559
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1560
|
+
"apiReferenceUrl": null,
|
|
1561
|
+
"sourcePaths": [
|
|
1562
|
+
"src/components/field/field-combobox.tsx"
|
|
1563
|
+
],
|
|
1564
|
+
"props": [
|
|
1565
|
+
{
|
|
1566
|
+
"name": "`heading`",
|
|
1567
|
+
"type": "string",
|
|
1568
|
+
"default": "-",
|
|
1569
|
+
"description": "Accessible text describing the group."
|
|
1570
|
+
},
|
|
1571
|
+
{
|
|
1572
|
+
"name": "`className`",
|
|
1573
|
+
"type": "string",
|
|
1574
|
+
"default": "-",
|
|
1575
|
+
"description": "Customize spacing or typography."
|
|
1576
|
+
}
|
|
1577
|
+
],
|
|
1578
|
+
"examples": [
|
|
1579
|
+
{
|
|
1580
|
+
"language": "tsx",
|
|
1581
|
+
"meta": "lineNumbers",
|
|
1582
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1583
|
+
}
|
|
1584
|
+
]
|
|
1585
|
+
},
|
|
1586
|
+
{
|
|
1587
|
+
"name": "FieldComboboxGroupLabel",
|
|
1588
|
+
"title": "Field Combobox",
|
|
1589
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1590
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1591
|
+
"docSlug": "field/field-combobox",
|
|
1592
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1593
|
+
"apiReferenceUrl": null,
|
|
1594
|
+
"sourcePaths": [
|
|
1595
|
+
"src/components/field/field-combobox.tsx"
|
|
1596
|
+
],
|
|
1597
|
+
"props": [
|
|
1598
|
+
{
|
|
1599
|
+
"name": "`children`",
|
|
1600
|
+
"type": "ReactNode",
|
|
1601
|
+
"default": "-",
|
|
1602
|
+
"description": "Text shown inside the label."
|
|
1603
|
+
},
|
|
1604
|
+
{
|
|
1605
|
+
"name": "`className`",
|
|
1606
|
+
"type": "string",
|
|
1607
|
+
"default": "-",
|
|
1608
|
+
"description": "Extend the preset label classes."
|
|
1609
|
+
}
|
|
1610
|
+
],
|
|
1611
|
+
"examples": [
|
|
1612
|
+
{
|
|
1613
|
+
"language": "tsx",
|
|
1614
|
+
"meta": "lineNumbers",
|
|
1615
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1616
|
+
}
|
|
1617
|
+
]
|
|
1618
|
+
},
|
|
1619
|
+
{
|
|
1620
|
+
"name": "FieldComboboxInput",
|
|
1621
|
+
"title": "Field Combobox",
|
|
1622
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1623
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1624
|
+
"docSlug": "field/field-combobox",
|
|
1625
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1626
|
+
"apiReferenceUrl": null,
|
|
1627
|
+
"sourcePaths": [
|
|
1628
|
+
"src/components/field/field-combobox.tsx"
|
|
1629
|
+
],
|
|
1630
|
+
"props": [
|
|
1631
|
+
{
|
|
1632
|
+
"name": "`placeholder`",
|
|
1633
|
+
"type": "string",
|
|
1634
|
+
"default": "`\"Search...\"`",
|
|
1635
|
+
"description": "Hint text shown inside the input."
|
|
1636
|
+
},
|
|
1637
|
+
{
|
|
1638
|
+
"name": "`value`",
|
|
1639
|
+
"type": "string",
|
|
1640
|
+
"default": "-",
|
|
1641
|
+
"description": "Controlled search query."
|
|
1642
|
+
},
|
|
1643
|
+
{
|
|
1644
|
+
"name": "`onValueChange`",
|
|
1645
|
+
"type": "(value: string) => void",
|
|
1646
|
+
"default": "-",
|
|
1647
|
+
"description": "Fired whenever the query changes."
|
|
1648
|
+
},
|
|
1649
|
+
{
|
|
1650
|
+
"name": "`className`",
|
|
1651
|
+
"type": "string",
|
|
1652
|
+
"default": "-",
|
|
1653
|
+
"description": "Extend the input styling."
|
|
1654
|
+
}
|
|
1655
|
+
],
|
|
1656
|
+
"examples": [
|
|
1657
|
+
{
|
|
1658
|
+
"language": "tsx",
|
|
1659
|
+
"meta": "lineNumbers",
|
|
1660
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1661
|
+
}
|
|
1662
|
+
]
|
|
1663
|
+
},
|
|
1664
|
+
{
|
|
1665
|
+
"name": "FieldComboboxItem",
|
|
1666
|
+
"title": "Field Combobox",
|
|
1667
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1668
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1669
|
+
"docSlug": "field/field-combobox",
|
|
1670
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1671
|
+
"apiReferenceUrl": null,
|
|
1672
|
+
"sourcePaths": [
|
|
1673
|
+
"src/components/field/field-combobox.tsx"
|
|
1674
|
+
],
|
|
1675
|
+
"props": [
|
|
1676
|
+
{
|
|
1677
|
+
"name": "`value`",
|
|
1678
|
+
"type": "string",
|
|
1679
|
+
"default": "**required**",
|
|
1680
|
+
"description": "Machine-friendly value emitted on selection."
|
|
1681
|
+
},
|
|
1682
|
+
{
|
|
1683
|
+
"name": "`disabled`",
|
|
1684
|
+
"type": "boolean",
|
|
1685
|
+
"default": "`false`",
|
|
1686
|
+
"description": "Prevents hover/selection behavior."
|
|
1687
|
+
},
|
|
1688
|
+
{
|
|
1689
|
+
"name": "`className`",
|
|
1690
|
+
"type": "string",
|
|
1691
|
+
"default": "-",
|
|
1692
|
+
"description": "Extend hover/active styles."
|
|
1693
|
+
},
|
|
1694
|
+
{
|
|
1695
|
+
"name": "`children`",
|
|
1696
|
+
"type": "ReactNode",
|
|
1697
|
+
"default": "-",
|
|
1698
|
+
"description": "Label rendered inside the row."
|
|
1699
|
+
}
|
|
1700
|
+
],
|
|
1701
|
+
"examples": [
|
|
1702
|
+
{
|
|
1703
|
+
"language": "tsx",
|
|
1704
|
+
"meta": "lineNumbers",
|
|
1705
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1706
|
+
}
|
|
1707
|
+
]
|
|
1708
|
+
},
|
|
1709
|
+
{
|
|
1710
|
+
"name": "FieldComboboxItemCheckIcon",
|
|
1711
|
+
"title": "Field Combobox",
|
|
1712
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1713
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1714
|
+
"docSlug": "field/field-combobox",
|
|
1715
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1716
|
+
"apiReferenceUrl": null,
|
|
1717
|
+
"sourcePaths": [
|
|
1718
|
+
"src/components/field/field-combobox.tsx"
|
|
1719
|
+
],
|
|
1720
|
+
"props": [
|
|
1721
|
+
{
|
|
1722
|
+
"name": "`className`",
|
|
1723
|
+
"type": "string",
|
|
1724
|
+
"default": "-",
|
|
1725
|
+
"description": "Customize icon size or color."
|
|
1726
|
+
}
|
|
1727
|
+
],
|
|
1728
|
+
"examples": [
|
|
1729
|
+
{
|
|
1730
|
+
"language": "tsx",
|
|
1731
|
+
"meta": "lineNumbers",
|
|
1732
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1733
|
+
}
|
|
1734
|
+
]
|
|
1735
|
+
},
|
|
1736
|
+
{
|
|
1737
|
+
"name": "FieldComboboxList",
|
|
1738
|
+
"title": "Field Combobox",
|
|
1739
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1740
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1741
|
+
"docSlug": "field/field-combobox",
|
|
1742
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1743
|
+
"apiReferenceUrl": null,
|
|
1744
|
+
"sourcePaths": [
|
|
1745
|
+
"src/components/field/field-combobox.tsx"
|
|
1746
|
+
],
|
|
1747
|
+
"props": [
|
|
1748
|
+
{
|
|
1749
|
+
"name": "`className`",
|
|
1750
|
+
"type": "string",
|
|
1751
|
+
"default": "-",
|
|
1752
|
+
"description": "Adjust padding or height of the list."
|
|
1753
|
+
}
|
|
1754
|
+
],
|
|
1755
|
+
"examples": [
|
|
1756
|
+
{
|
|
1757
|
+
"language": "tsx",
|
|
1758
|
+
"meta": "lineNumbers",
|
|
1759
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1760
|
+
}
|
|
1761
|
+
]
|
|
1762
|
+
},
|
|
1763
|
+
{
|
|
1764
|
+
"name": "FieldComboboxLoading",
|
|
1765
|
+
"title": "Field Combobox",
|
|
1766
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1767
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1768
|
+
"docSlug": "field/field-combobox",
|
|
1769
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1770
|
+
"apiReferenceUrl": null,
|
|
1771
|
+
"sourcePaths": [
|
|
1772
|
+
"src/components/field/field-combobox.tsx"
|
|
1773
|
+
],
|
|
1774
|
+
"props": [
|
|
1775
|
+
{
|
|
1776
|
+
"name": "`children`",
|
|
1777
|
+
"type": "ReactNode",
|
|
1778
|
+
"default": "-",
|
|
1779
|
+
"description": "Content displayed when the list is loading."
|
|
1780
|
+
},
|
|
1781
|
+
{
|
|
1782
|
+
"name": "`className`",
|
|
1783
|
+
"type": "string",
|
|
1784
|
+
"default": "-",
|
|
1785
|
+
"description": "Customize spacing or typography."
|
|
1786
|
+
}
|
|
1787
|
+
],
|
|
1788
|
+
"examples": [
|
|
1789
|
+
{
|
|
1790
|
+
"language": "tsx",
|
|
1791
|
+
"meta": "lineNumbers",
|
|
1792
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1793
|
+
}
|
|
1794
|
+
]
|
|
1795
|
+
},
|
|
1796
|
+
{
|
|
1797
|
+
"name": "FieldComboboxPlaceholder",
|
|
1798
|
+
"title": "Field Combobox",
|
|
1799
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1800
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1801
|
+
"docSlug": "field/field-combobox",
|
|
1802
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1803
|
+
"apiReferenceUrl": null,
|
|
1804
|
+
"sourcePaths": [
|
|
1805
|
+
"src/components/field/field-combobox.tsx"
|
|
1806
|
+
],
|
|
1807
|
+
"props": [
|
|
1808
|
+
{
|
|
1809
|
+
"name": "`className`",
|
|
1810
|
+
"type": "string",
|
|
1811
|
+
"default": "-",
|
|
1812
|
+
"description": "Customize typography or spacing."
|
|
1813
|
+
}
|
|
1814
|
+
],
|
|
1815
|
+
"examples": [
|
|
1816
|
+
{
|
|
1817
|
+
"language": "tsx",
|
|
1818
|
+
"meta": "lineNumbers",
|
|
1819
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1820
|
+
}
|
|
1821
|
+
]
|
|
1822
|
+
},
|
|
1823
|
+
{
|
|
1824
|
+
"name": "FieldComboboxSeparator",
|
|
1825
|
+
"title": "Field Combobox",
|
|
1826
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1827
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1828
|
+
"docSlug": "field/field-combobox",
|
|
1829
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1830
|
+
"apiReferenceUrl": null,
|
|
1831
|
+
"sourcePaths": [
|
|
1832
|
+
"src/components/field/field-combobox.tsx"
|
|
1833
|
+
],
|
|
1834
|
+
"props": [
|
|
1835
|
+
{
|
|
1836
|
+
"name": "`className`",
|
|
1837
|
+
"type": "string",
|
|
1838
|
+
"default": "-",
|
|
1839
|
+
"description": "Customize spacing or color of the separator."
|
|
1840
|
+
}
|
|
1841
|
+
],
|
|
1842
|
+
"examples": [
|
|
1843
|
+
{
|
|
1844
|
+
"language": "tsx",
|
|
1845
|
+
"meta": "lineNumbers",
|
|
1846
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1847
|
+
}
|
|
1848
|
+
]
|
|
1849
|
+
},
|
|
1850
|
+
{
|
|
1851
|
+
"name": "FieldComboboxTrigger",
|
|
1852
|
+
"title": "Field Combobox",
|
|
1853
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1854
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1855
|
+
"docSlug": "field/field-combobox",
|
|
1856
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1857
|
+
"apiReferenceUrl": null,
|
|
1858
|
+
"sourcePaths": [
|
|
1859
|
+
"src/components/field/field-combobox.tsx"
|
|
1860
|
+
],
|
|
1861
|
+
"props": [
|
|
1862
|
+
{
|
|
1863
|
+
"name": "`asChild`",
|
|
1864
|
+
"type": "boolean",
|
|
1865
|
+
"default": "`false`",
|
|
1866
|
+
"description": "Render the trigger as its child component."
|
|
1867
|
+
},
|
|
1868
|
+
{
|
|
1869
|
+
"name": "`disabled`",
|
|
1870
|
+
"type": "boolean",
|
|
1871
|
+
"default": "`false`",
|
|
1872
|
+
"description": "Disable pointer and keyboard interaction."
|
|
1873
|
+
},
|
|
1874
|
+
{
|
|
1875
|
+
"name": "`className`",
|
|
1876
|
+
"type": "string",
|
|
1877
|
+
"default": "-",
|
|
1878
|
+
"description": "Extend the default Tailwind classes."
|
|
1879
|
+
}
|
|
1880
|
+
],
|
|
1881
|
+
"examples": [
|
|
1882
|
+
{
|
|
1883
|
+
"language": "tsx",
|
|
1884
|
+
"meta": "lineNumbers",
|
|
1885
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1886
|
+
}
|
|
1887
|
+
]
|
|
1888
|
+
},
|
|
1889
|
+
{
|
|
1890
|
+
"name": "FieldComboboxValue",
|
|
1891
|
+
"title": "Field Combobox",
|
|
1892
|
+
"description": "A Combobox is a form control that allows the user to select a value from a list of options.",
|
|
1893
|
+
"docsPath": "docs/content/docs/components/field/field-combobox.mdx",
|
|
1894
|
+
"docSlug": "field/field-combobox",
|
|
1895
|
+
"documentationUrl": "https://github.com/dip/cmdk?tab=readme-ov-file#use",
|
|
1896
|
+
"apiReferenceUrl": null,
|
|
1897
|
+
"sourcePaths": [
|
|
1898
|
+
"src/components/field/field-combobox.tsx"
|
|
1899
|
+
],
|
|
1900
|
+
"props": [
|
|
1901
|
+
{
|
|
1902
|
+
"name": "`placeholder`",
|
|
1903
|
+
"type": "string",
|
|
1904
|
+
"default": "**required**",
|
|
1905
|
+
"description": "Text shown when no value is provided."
|
|
1906
|
+
},
|
|
1907
|
+
{
|
|
1908
|
+
"name": "`children`",
|
|
1909
|
+
"type": "ReactNode",
|
|
1910
|
+
"default": "-",
|
|
1911
|
+
"description": "Optional custom label to display."
|
|
1912
|
+
},
|
|
1913
|
+
{
|
|
1914
|
+
"name": "`className`",
|
|
1915
|
+
"type": "string",
|
|
1916
|
+
"default": "-",
|
|
1917
|
+
"description": "Extend typography or layout classes."
|
|
1918
|
+
}
|
|
1919
|
+
],
|
|
1920
|
+
"examples": [
|
|
1921
|
+
{
|
|
1922
|
+
"language": "tsx",
|
|
1923
|
+
"meta": "lineNumbers",
|
|
1924
|
+
"code": "import { Field, FieldLabel, FieldCombobox, FieldComboboxTrigger, FieldComboboxValue, FieldComboboxContent, FieldComboboxInput, FieldComboboxList, FieldComboboxEmpty, FieldComboboxGroup, FieldComboboxGroupLabel, FieldComboboxItem, FieldComboboxSeparator, FieldComboboxLoading, Spinner } from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Items</FieldLabel>\n <FieldCombobox>\n <FieldComboboxTrigger>\n <FieldComboboxValue placeholder=\"Select an item\">\n {value.label}\n </FieldComboboxValue>\n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search items\" />\n <FieldComboboxLoading>\n <Spinner />\n </FieldComboboxLoading>\n <FieldComboboxList>\n <FieldComboboxEmpty>No items found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>List</FieldComboboxGroupLabel>\n <FieldComboboxItem value=\"1\">1</FieldComboboxItem>\n <FieldComboboxItem value=\"2\">2</FieldComboboxItem>\n <FieldComboboxItem value=\"3\">3</FieldComboboxItem>\n </FieldComboboxGroup>\n \n </FieldComboboxList>\n </FieldComboboxContent>\n </FieldCombobox>\n</Field>"
|
|
1925
|
+
}
|
|
1926
|
+
]
|
|
1927
|
+
},
|
|
1928
|
+
{
|
|
1929
|
+
"name": "FieldContent",
|
|
1930
|
+
"title": "Field",
|
|
1931
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
1932
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
1933
|
+
"docSlug": "field/index",
|
|
1934
|
+
"documentationUrl": null,
|
|
1935
|
+
"apiReferenceUrl": null,
|
|
1936
|
+
"sourcePaths": [
|
|
1937
|
+
"src/components/field/field.tsx"
|
|
1938
|
+
],
|
|
1939
|
+
"props": [
|
|
1940
|
+
{
|
|
1941
|
+
"name": "`children`",
|
|
1942
|
+
"type": "React.ReactNode",
|
|
1943
|
+
"default": "-",
|
|
1944
|
+
"description": "Field content elements."
|
|
1945
|
+
},
|
|
1946
|
+
{
|
|
1947
|
+
"name": "`className`",
|
|
1948
|
+
"type": "string",
|
|
1949
|
+
"default": "-",
|
|
1950
|
+
"description": "Additional CSS classes."
|
|
1951
|
+
}
|
|
1952
|
+
],
|
|
1953
|
+
"examples": [
|
|
1954
|
+
{
|
|
1955
|
+
"language": "tsx",
|
|
1956
|
+
"meta": "lineNumbers",
|
|
1957
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
1958
|
+
},
|
|
1959
|
+
{
|
|
1960
|
+
"language": "tsx",
|
|
1961
|
+
"meta": "lineNumbers",
|
|
1962
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
1963
|
+
},
|
|
1964
|
+
{
|
|
1965
|
+
"language": "tsx",
|
|
1966
|
+
"meta": "lineNumbers",
|
|
1967
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
1968
|
+
}
|
|
1969
|
+
]
|
|
1970
|
+
},
|
|
1971
|
+
{
|
|
1972
|
+
"name": "FieldDescription",
|
|
1973
|
+
"title": "Field",
|
|
1974
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
1975
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
1976
|
+
"docSlug": "field/index",
|
|
1977
|
+
"documentationUrl": null,
|
|
1978
|
+
"apiReferenceUrl": null,
|
|
1979
|
+
"sourcePaths": [
|
|
1980
|
+
"src/components/field/field.tsx"
|
|
1981
|
+
],
|
|
1982
|
+
"props": [
|
|
1983
|
+
{
|
|
1984
|
+
"name": "`children`",
|
|
1985
|
+
"type": "React.ReactNode",
|
|
1986
|
+
"default": "-",
|
|
1987
|
+
"description": "Description text."
|
|
1988
|
+
},
|
|
1989
|
+
{
|
|
1990
|
+
"name": "`className`",
|
|
1991
|
+
"type": "string",
|
|
1992
|
+
"default": "-",
|
|
1993
|
+
"description": "Additional CSS classes."
|
|
1994
|
+
}
|
|
1995
|
+
],
|
|
1996
|
+
"examples": [
|
|
1997
|
+
{
|
|
1998
|
+
"language": "tsx",
|
|
1999
|
+
"meta": "lineNumbers",
|
|
2000
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
2001
|
+
},
|
|
2002
|
+
{
|
|
2003
|
+
"language": "tsx",
|
|
2004
|
+
"meta": "lineNumbers",
|
|
2005
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
2006
|
+
},
|
|
2007
|
+
{
|
|
2008
|
+
"language": "tsx",
|
|
2009
|
+
"meta": "lineNumbers",
|
|
2010
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
2011
|
+
}
|
|
2012
|
+
]
|
|
2013
|
+
},
|
|
2014
|
+
{
|
|
2015
|
+
"name": "FieldError",
|
|
2016
|
+
"title": "Field",
|
|
2017
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
2018
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
2019
|
+
"docSlug": "field/index",
|
|
2020
|
+
"documentationUrl": null,
|
|
2021
|
+
"apiReferenceUrl": null,
|
|
2022
|
+
"sourcePaths": [
|
|
2023
|
+
"src/components/field/field.tsx"
|
|
2024
|
+
],
|
|
2025
|
+
"props": [
|
|
2026
|
+
{
|
|
2027
|
+
"name": "`children`",
|
|
2028
|
+
"type": "React.ReactNode",
|
|
2029
|
+
"default": "-",
|
|
2030
|
+
"description": "Custom error message."
|
|
2031
|
+
},
|
|
2032
|
+
{
|
|
2033
|
+
"name": "`errors`",
|
|
2034
|
+
"type": "Array<{ message?: string }> | undefined",
|
|
2035
|
+
"default": "-",
|
|
2036
|
+
"description": "Array of error objects with optional message property."
|
|
2037
|
+
},
|
|
2038
|
+
{
|
|
2039
|
+
"name": "`className`",
|
|
2040
|
+
"type": "string",
|
|
2041
|
+
"default": "-",
|
|
2042
|
+
"description": "Additional CSS classes."
|
|
2043
|
+
}
|
|
2044
|
+
],
|
|
2045
|
+
"examples": [
|
|
2046
|
+
{
|
|
2047
|
+
"language": "tsx",
|
|
2048
|
+
"meta": "lineNumbers",
|
|
2049
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
2050
|
+
},
|
|
2051
|
+
{
|
|
2052
|
+
"language": "tsx",
|
|
2053
|
+
"meta": "lineNumbers",
|
|
2054
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
2055
|
+
},
|
|
2056
|
+
{
|
|
2057
|
+
"language": "tsx",
|
|
2058
|
+
"meta": "lineNumbers",
|
|
2059
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
2060
|
+
}
|
|
2061
|
+
]
|
|
2062
|
+
},
|
|
2063
|
+
{
|
|
2064
|
+
"name": "FieldGroup",
|
|
2065
|
+
"title": "Field",
|
|
2066
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
2067
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
2068
|
+
"docSlug": "field/index",
|
|
2069
|
+
"documentationUrl": null,
|
|
2070
|
+
"apiReferenceUrl": null,
|
|
2071
|
+
"sourcePaths": [
|
|
2072
|
+
"src/components/field/field.tsx"
|
|
2073
|
+
],
|
|
2074
|
+
"props": [
|
|
2075
|
+
{
|
|
2076
|
+
"name": "`children`",
|
|
2077
|
+
"type": "React.ReactNode",
|
|
2078
|
+
"default": "-",
|
|
2079
|
+
"description": "Multiple Field components."
|
|
2080
|
+
},
|
|
2081
|
+
{
|
|
2082
|
+
"name": "`className`",
|
|
2083
|
+
"type": "string",
|
|
2084
|
+
"default": "-",
|
|
2085
|
+
"description": "Additional CSS classes."
|
|
2086
|
+
}
|
|
2087
|
+
],
|
|
2088
|
+
"examples": [
|
|
2089
|
+
{
|
|
2090
|
+
"language": "tsx",
|
|
2091
|
+
"meta": "lineNumbers",
|
|
2092
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
2093
|
+
},
|
|
2094
|
+
{
|
|
2095
|
+
"language": "tsx",
|
|
2096
|
+
"meta": "lineNumbers",
|
|
2097
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
2098
|
+
},
|
|
2099
|
+
{
|
|
2100
|
+
"language": "tsx",
|
|
2101
|
+
"meta": "lineNumbers",
|
|
2102
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
2103
|
+
}
|
|
2104
|
+
]
|
|
2105
|
+
},
|
|
2106
|
+
{
|
|
2107
|
+
"name": "FieldGroupAddon",
|
|
2108
|
+
"title": null,
|
|
2109
|
+
"description": null,
|
|
2110
|
+
"docsPath": null,
|
|
2111
|
+
"docSlug": null,
|
|
2112
|
+
"documentationUrl": null,
|
|
2113
|
+
"apiReferenceUrl": null,
|
|
2114
|
+
"sourcePaths": [
|
|
2115
|
+
"src/components/field/field-addon.tsx"
|
|
2116
|
+
],
|
|
2117
|
+
"props": [],
|
|
2118
|
+
"examples": []
|
|
2119
|
+
},
|
|
2120
|
+
{
|
|
2121
|
+
"name": "FieldInput",
|
|
2122
|
+
"title": "Field Input",
|
|
2123
|
+
"description": "A input field component for the Field component.",
|
|
2124
|
+
"docsPath": "docs/content/docs/components/field/field-input.mdx",
|
|
2125
|
+
"docSlug": "field/field-input",
|
|
2126
|
+
"documentationUrl": null,
|
|
2127
|
+
"apiReferenceUrl": null,
|
|
2128
|
+
"sourcePaths": [
|
|
2129
|
+
"src/components/field/field-input.tsx"
|
|
2130
|
+
],
|
|
2131
|
+
"props": [
|
|
2132
|
+
{
|
|
2133
|
+
"name": "`type`",
|
|
2134
|
+
"type": "string",
|
|
2135
|
+
"default": "`\"text\"`",
|
|
2136
|
+
"description": "Input type"
|
|
2137
|
+
},
|
|
2138
|
+
{
|
|
2139
|
+
"name": "`className`",
|
|
2140
|
+
"type": "string",
|
|
2141
|
+
"default": "-",
|
|
2142
|
+
"description": "Additional CSS classes."
|
|
2143
|
+
},
|
|
2144
|
+
{
|
|
2145
|
+
"name": "`readOnly`",
|
|
2146
|
+
"type": "boolean",
|
|
2147
|
+
"default": "false",
|
|
2148
|
+
"description": "When set to `true`, the input is read-only."
|
|
2149
|
+
},
|
|
2150
|
+
{
|
|
2151
|
+
"name": "`disabled`",
|
|
2152
|
+
"type": "boolean",
|
|
2153
|
+
"default": "false",
|
|
2154
|
+
"description": "When set to `true`, the input is disabled."
|
|
2155
|
+
},
|
|
2156
|
+
{
|
|
2157
|
+
"name": "`aria-invalid`",
|
|
2158
|
+
"type": "boolean",
|
|
2159
|
+
"default": "false",
|
|
2160
|
+
"description": "When set to `true`, the input is invalid."
|
|
2161
|
+
}
|
|
2162
|
+
],
|
|
2163
|
+
"examples": [
|
|
2164
|
+
{
|
|
2165
|
+
"language": "tsx",
|
|
2166
|
+
"meta": "lineNumbers",
|
|
2167
|
+
"code": "import { Field, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n <FieldGroup>\n <Field variant=\"destructive\">\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Password</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"password\" placeholder=\"********\" />\n <FieldError>Password is required</FieldError>\n </Field>\n </FieldGroup>\n</FieldSet>"
|
|
2168
|
+
},
|
|
2169
|
+
{
|
|
2170
|
+
"language": "tsx",
|
|
2171
|
+
"meta": "lineNumbers",
|
|
2172
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
2173
|
+
}
|
|
2174
|
+
]
|
|
2175
|
+
},
|
|
2176
|
+
{
|
|
2177
|
+
"name": "FieldInputGroup",
|
|
2178
|
+
"title": null,
|
|
2179
|
+
"description": null,
|
|
2180
|
+
"docsPath": null,
|
|
2181
|
+
"docSlug": null,
|
|
2182
|
+
"documentationUrl": null,
|
|
2183
|
+
"apiReferenceUrl": null,
|
|
2184
|
+
"sourcePaths": [
|
|
2185
|
+
"src/components/field/field-input.tsx"
|
|
2186
|
+
],
|
|
2187
|
+
"props": [],
|
|
2188
|
+
"examples": []
|
|
2189
|
+
},
|
|
2190
|
+
{
|
|
2191
|
+
"name": "FieldLabel",
|
|
2192
|
+
"title": "Field",
|
|
2193
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
2194
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
2195
|
+
"docSlug": "field/index",
|
|
2196
|
+
"documentationUrl": null,
|
|
2197
|
+
"apiReferenceUrl": null,
|
|
2198
|
+
"sourcePaths": [
|
|
2199
|
+
"src/components/field/field.tsx"
|
|
2200
|
+
],
|
|
2201
|
+
"props": [
|
|
2202
|
+
{
|
|
2203
|
+
"name": "`children`",
|
|
2204
|
+
"type": "React.ReactNode",
|
|
2205
|
+
"default": "-",
|
|
2206
|
+
"description": "Label text."
|
|
2207
|
+
},
|
|
2208
|
+
{
|
|
2209
|
+
"name": "`className`",
|
|
2210
|
+
"type": "string",
|
|
2211
|
+
"default": "-",
|
|
2212
|
+
"description": "Additional CSS classes."
|
|
2213
|
+
},
|
|
2214
|
+
{
|
|
2215
|
+
"name": "`htmlFor`",
|
|
2216
|
+
"type": "string",
|
|
2217
|
+
"default": "-",
|
|
2218
|
+
"description": "The `id` of the associated form control."
|
|
2219
|
+
}
|
|
2220
|
+
],
|
|
2221
|
+
"examples": [
|
|
2222
|
+
{
|
|
2223
|
+
"language": "tsx",
|
|
2224
|
+
"meta": "lineNumbers",
|
|
2225
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
2226
|
+
},
|
|
2227
|
+
{
|
|
2228
|
+
"language": "tsx",
|
|
2229
|
+
"meta": "lineNumbers",
|
|
2230
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
2231
|
+
},
|
|
2232
|
+
{
|
|
2233
|
+
"language": "tsx",
|
|
2234
|
+
"meta": "lineNumbers",
|
|
2235
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
2236
|
+
}
|
|
2237
|
+
]
|
|
2238
|
+
},
|
|
2239
|
+
{
|
|
2240
|
+
"name": "FieldLabelContent",
|
|
2241
|
+
"title": null,
|
|
2242
|
+
"description": null,
|
|
2243
|
+
"docsPath": null,
|
|
2244
|
+
"docSlug": null,
|
|
2245
|
+
"documentationUrl": null,
|
|
2246
|
+
"apiReferenceUrl": null,
|
|
2247
|
+
"sourcePaths": [
|
|
2248
|
+
"src/components/field/field.tsx"
|
|
2249
|
+
],
|
|
2250
|
+
"props": [],
|
|
2251
|
+
"examples": []
|
|
2252
|
+
},
|
|
2253
|
+
{
|
|
2254
|
+
"name": "FieldSet",
|
|
2255
|
+
"title": "Field",
|
|
2256
|
+
"description": "A flexible form field component system with built-in label, description, error handling, and input grouping.",
|
|
2257
|
+
"docsPath": "docs/content/docs/components/field/index.mdx",
|
|
2258
|
+
"docSlug": "field/index",
|
|
2259
|
+
"documentationUrl": null,
|
|
2260
|
+
"apiReferenceUrl": null,
|
|
2261
|
+
"sourcePaths": [
|
|
2262
|
+
"src/components/field/field.tsx"
|
|
2263
|
+
],
|
|
2264
|
+
"props": [
|
|
2265
|
+
{
|
|
2266
|
+
"name": "`children`",
|
|
2267
|
+
"type": "React.ReactNode",
|
|
2268
|
+
"default": "-",
|
|
2269
|
+
"description": "Multiple FieldGroup components."
|
|
2270
|
+
},
|
|
2271
|
+
{
|
|
2272
|
+
"name": "`className`",
|
|
2273
|
+
"type": "string",
|
|
2274
|
+
"default": "-",
|
|
2275
|
+
"description": "Additional CSS classes."
|
|
2276
|
+
}
|
|
2277
|
+
],
|
|
2278
|
+
"examples": [
|
|
2279
|
+
{
|
|
2280
|
+
"language": "tsx",
|
|
2281
|
+
"meta": "lineNumbers",
|
|
2282
|
+
"code": "import { Field, FieldSet, FieldGroup, FieldLabel, FieldDescription, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldSet className=\"flex flex-col w-96\">\n <FieldGroup>\n <Field>\n <div className=\"flex items-center gap-2\">\n <FieldLabel>Email address</FieldLabel>\n <FieldLabelContent>...</FieldLabelContent>\n </div>\n <FieldInput type=\"email\" placeholder=\"tim@apple.com\" />\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n </Field>\n </FieldGroup>\n\n <Field variant=\"highlight\">\n <FieldLabel>Your message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n</FieldSet>"
|
|
2283
|
+
},
|
|
2284
|
+
{
|
|
2285
|
+
"language": "tsx",
|
|
2286
|
+
"meta": "lineNumbers",
|
|
2287
|
+
"code": "import { Field, FieldLabel, FieldInputGroup, FieldGroupAddon, FieldInput } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Website</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">https://</FieldGroupAddon>\n <FieldInput type=\"text\" placeholder=\"example.com\" />\n </FieldInputGroup>\n </Field>\n\n <Field>\n <FieldLabel>Price</FieldLabel>\n <FieldInputGroup>\n <FieldGroupAddon align=\"start\">$</FieldGroupAddon>\n <FieldInput placeholder=\"10.00\" />\n </FieldInputGroup>\n </Field>\n</FieldGroup>"
|
|
2288
|
+
},
|
|
2289
|
+
{
|
|
2290
|
+
"language": "tsx",
|
|
2291
|
+
"meta": "lineNumbers",
|
|
2292
|
+
"code": "import { Field, FieldLabel, FieldInput, FieldError } from \"@epilot/volt-ui\"\n\n<Field className=\"w-96!\" variant=\"destructive\">\n <FieldLabel htmlFor=\"email\">Email address</FieldLabel>\n <FieldInput id=\"email\" type=\"email\" aria-invalid=\"true\" placeholder=\"tim@apple.com\" />\n <FieldError>Email address is required</FieldError>\n</Field>"
|
|
2293
|
+
}
|
|
2294
|
+
]
|
|
2295
|
+
},
|
|
2296
|
+
{
|
|
2297
|
+
"name": "FieldTextarea",
|
|
2298
|
+
"title": "Field Textarea",
|
|
2299
|
+
"description": "A textarea field component for the Field component.",
|
|
2300
|
+
"docsPath": "docs/content/docs/components/field/field-textarea.mdx",
|
|
2301
|
+
"docSlug": "field/field-textarea",
|
|
2302
|
+
"documentationUrl": null,
|
|
2303
|
+
"apiReferenceUrl": null,
|
|
2304
|
+
"sourcePaths": [
|
|
2305
|
+
"src/components/field/field-textarea.tsx"
|
|
2306
|
+
],
|
|
2307
|
+
"props": [
|
|
2308
|
+
{
|
|
2309
|
+
"name": "`rows`",
|
|
2310
|
+
"type": "number",
|
|
2311
|
+
"default": "`3`",
|
|
2312
|
+
"description": "Number of rows."
|
|
2313
|
+
},
|
|
2314
|
+
{
|
|
2315
|
+
"name": "`cols`",
|
|
2316
|
+
"type": "number",
|
|
2317
|
+
"default": "`3`",
|
|
2318
|
+
"description": "Number of columns."
|
|
2319
|
+
},
|
|
2320
|
+
{
|
|
2321
|
+
"name": "`className`",
|
|
2322
|
+
"type": "string",
|
|
2323
|
+
"default": "-",
|
|
2324
|
+
"description": "Additional CSS classes."
|
|
2325
|
+
},
|
|
2326
|
+
{
|
|
2327
|
+
"name": "`readOnly`",
|
|
2328
|
+
"type": "boolean",
|
|
2329
|
+
"default": "false",
|
|
2330
|
+
"description": "When set to `true`, the textarea is read-only."
|
|
2331
|
+
},
|
|
2332
|
+
{
|
|
2333
|
+
"name": "`disabled`",
|
|
2334
|
+
"type": "boolean",
|
|
2335
|
+
"default": "false",
|
|
2336
|
+
"description": "When set to `true`, the textarea is disabled."
|
|
2337
|
+
},
|
|
2338
|
+
{
|
|
2339
|
+
"name": "`resize`",
|
|
2340
|
+
"type": "\"none\"",
|
|
2341
|
+
"default": "\"vertical\"",
|
|
2342
|
+
"description": "\"horizontal\""
|
|
2343
|
+
}
|
|
2344
|
+
],
|
|
2345
|
+
"examples": [
|
|
2346
|
+
{
|
|
2347
|
+
"language": "tsx",
|
|
2348
|
+
"meta": "lineNumbers",
|
|
2349
|
+
"code": "import { Field, FieldLabel, FieldDescription, FieldTextarea } from \"@epilot/volt-ui\"\n\n<FieldGroup>\n <Field>\n <FieldLabel>Message</FieldLabel>\n <FieldTextarea placeholder=\"Hello, how are you?\" rows={5} />\n </Field>\n <FieldDescription>We'll never share your email with anyone else.</FieldDescription>\n</FieldGroup>"
|
|
2350
|
+
}
|
|
2351
|
+
]
|
|
2352
|
+
},
|
|
2353
|
+
{
|
|
2354
|
+
"name": "Label",
|
|
2355
|
+
"title": "Label",
|
|
2356
|
+
"description": "Accessible text labels for form controls with built-in spacing, disabled styling, and peer support.",
|
|
2357
|
+
"docsPath": "docs/content/docs/components/label.mdx",
|
|
2358
|
+
"docSlug": "label",
|
|
2359
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/label",
|
|
2360
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/label#api-reference",
|
|
2361
|
+
"sourcePaths": [
|
|
2362
|
+
"src/components/label/label.tsx"
|
|
2363
|
+
],
|
|
2364
|
+
"props": [
|
|
2365
|
+
{
|
|
2366
|
+
"name": "`variant`",
|
|
2367
|
+
"type": "\"primary\" | \"destructive\"",
|
|
2368
|
+
"default": "`\"primary\"`",
|
|
2369
|
+
"description": "The visual style variant of the label."
|
|
2370
|
+
},
|
|
2371
|
+
{
|
|
2372
|
+
"name": "`size`",
|
|
2373
|
+
"type": "\"sm\" | \"base\" | \"lg\"",
|
|
2374
|
+
"default": "`\"base\"`",
|
|
2375
|
+
"description": "The size of the label."
|
|
2376
|
+
},
|
|
2377
|
+
{
|
|
2378
|
+
"name": "`children`",
|
|
2379
|
+
"type": "React.ReactNode",
|
|
2380
|
+
"default": "-",
|
|
2381
|
+
"description": "Content for the label. Supports inline elements like icons or status text."
|
|
2382
|
+
},
|
|
2383
|
+
{
|
|
2384
|
+
"name": "`className`",
|
|
2385
|
+
"type": "string",
|
|
2386
|
+
"default": "-",
|
|
2387
|
+
"description": "Additional Tailwind classes merged with the defaults."
|
|
2388
|
+
}
|
|
2389
|
+
],
|
|
2390
|
+
"examples": [
|
|
2391
|
+
{
|
|
2392
|
+
"language": "tsx",
|
|
2393
|
+
"meta": "lineNumbers",
|
|
2394
|
+
"code": "import { Label } from \"@epilot/volt-ui\"\n\n<Label size=\"sm\">Email address</Label>\n<Label size=\"base\">Email address</Label>\n<Label size=\"lg\">Email address</Label>"
|
|
2395
|
+
}
|
|
2396
|
+
]
|
|
2397
|
+
},
|
|
2398
|
+
{
|
|
2399
|
+
"name": "Popover",
|
|
2400
|
+
"title": "Popover",
|
|
2401
|
+
"description": "A popup that displays content when triggered by a button or popover trigger.",
|
|
2402
|
+
"docsPath": "docs/content/docs/components/popover.mdx",
|
|
2403
|
+
"docSlug": "popover",
|
|
2404
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/popover",
|
|
2405
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/popover#api-reference",
|
|
2406
|
+
"sourcePaths": [
|
|
2407
|
+
"src/components/popover/popover.tsx"
|
|
2408
|
+
],
|
|
2409
|
+
"props": [
|
|
2410
|
+
{
|
|
2411
|
+
"name": "`open`",
|
|
2412
|
+
"type": "boolean",
|
|
2413
|
+
"default": "-",
|
|
2414
|
+
"description": "Controlled open state of the popover."
|
|
2415
|
+
},
|
|
2416
|
+
{
|
|
2417
|
+
"name": "`defaultOpen`",
|
|
2418
|
+
"type": "boolean",
|
|
2419
|
+
"default": "`false`",
|
|
2420
|
+
"description": "Uncontrolled default open state."
|
|
2421
|
+
},
|
|
2422
|
+
{
|
|
2423
|
+
"name": "`onOpenChange`",
|
|
2424
|
+
"type": "(open: boolean) => void",
|
|
2425
|
+
"default": "-",
|
|
2426
|
+
"description": "Callback fired when the open state changes."
|
|
2427
|
+
},
|
|
2428
|
+
{
|
|
2429
|
+
"name": "`modal`",
|
|
2430
|
+
"type": "boolean",
|
|
2431
|
+
"default": "`true`",
|
|
2432
|
+
"description": "When true, focus is trapped within the popover and outside interaction is disabled."
|
|
2433
|
+
}
|
|
2434
|
+
],
|
|
2435
|
+
"examples": [
|
|
2436
|
+
{
|
|
2437
|
+
"language": "tsx",
|
|
2438
|
+
"meta": "lineNumbers",
|
|
2439
|
+
"code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Popover>\n <PopoverTrigger asChild>\n <Button>Edit Profile</Button>\n </PopoverTrigger>\n <PopoverPortal>\n <PopoverContent>\n Content\n </PopoverContent>\n </PopoverPortal>\n </Popover>\n</div>"
|
|
2440
|
+
}
|
|
2441
|
+
]
|
|
2442
|
+
},
|
|
2443
|
+
{
|
|
2444
|
+
"name": "PopoverAnchor",
|
|
2445
|
+
"title": "Popover",
|
|
2446
|
+
"description": "A popup that displays content when triggered by a button or popover trigger.",
|
|
2447
|
+
"docsPath": "docs/content/docs/components/popover.mdx",
|
|
2448
|
+
"docSlug": "popover",
|
|
2449
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/popover",
|
|
2450
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/popover#api-reference",
|
|
2451
|
+
"sourcePaths": [
|
|
2452
|
+
"src/components/popover/popover.tsx"
|
|
2453
|
+
],
|
|
2454
|
+
"props": [
|
|
2455
|
+
{
|
|
2456
|
+
"name": "asChild",
|
|
2457
|
+
"type": "boolean",
|
|
2458
|
+
"default": "`false`",
|
|
2459
|
+
"description": "When true, merges props with the child element instead of rendering a button."
|
|
2460
|
+
}
|
|
2461
|
+
],
|
|
2462
|
+
"examples": [
|
|
2463
|
+
{
|
|
2464
|
+
"language": "tsx",
|
|
2465
|
+
"meta": "lineNumbers",
|
|
2466
|
+
"code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Popover>\n <PopoverTrigger asChild>\n <Button>Edit Profile</Button>\n </PopoverTrigger>\n <PopoverPortal>\n <PopoverContent>\n Content\n </PopoverContent>\n </PopoverPortal>\n </Popover>\n</div>"
|
|
2467
|
+
}
|
|
2468
|
+
]
|
|
2469
|
+
},
|
|
2470
|
+
{
|
|
2471
|
+
"name": "PopoverContent",
|
|
2472
|
+
"title": "Popover",
|
|
2473
|
+
"description": "A popup that displays content when triggered by a button or popover trigger.",
|
|
2474
|
+
"docsPath": "docs/content/docs/components/popover.mdx",
|
|
2475
|
+
"docSlug": "popover",
|
|
2476
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/popover",
|
|
2477
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/popover#api-reference",
|
|
2478
|
+
"sourcePaths": [
|
|
2479
|
+
"src/components/popover/popover.tsx"
|
|
2480
|
+
],
|
|
2481
|
+
"props": [
|
|
2482
|
+
{
|
|
2483
|
+
"name": "`side`",
|
|
2484
|
+
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
2485
|
+
"default": "`\"bottom\"`",
|
|
2486
|
+
"description": "The preferred side of the trigger to render against."
|
|
2487
|
+
},
|
|
2488
|
+
{
|
|
2489
|
+
"name": "`sideOffset`",
|
|
2490
|
+
"type": "number",
|
|
2491
|
+
"default": "`4`",
|
|
2492
|
+
"description": "The distance in pixels from the trigger."
|
|
2493
|
+
},
|
|
2494
|
+
{
|
|
2495
|
+
"name": "`align`",
|
|
2496
|
+
"type": "\"start\" | \"center\" | \"end\"",
|
|
2497
|
+
"default": "`\"center\"`",
|
|
2498
|
+
"description": "The preferred alignment against the trigger."
|
|
2499
|
+
},
|
|
2500
|
+
{
|
|
2501
|
+
"name": "`alignOffset`",
|
|
2502
|
+
"type": "number",
|
|
2503
|
+
"default": "`0`",
|
|
2504
|
+
"description": "An offset in pixels from the \"start\" or \"end\" alignment options."
|
|
2505
|
+
},
|
|
2506
|
+
{
|
|
2507
|
+
"name": "`className`",
|
|
2508
|
+
"type": "string",
|
|
2509
|
+
"default": "-",
|
|
2510
|
+
"description": "Additional CSS classes to apply to the popover content."
|
|
2511
|
+
}
|
|
2512
|
+
],
|
|
2513
|
+
"examples": [
|
|
2514
|
+
{
|
|
2515
|
+
"language": "tsx",
|
|
2516
|
+
"meta": "lineNumbers",
|
|
2517
|
+
"code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Popover>\n <PopoverTrigger asChild>\n <Button>Edit Profile</Button>\n </PopoverTrigger>\n <PopoverPortal>\n <PopoverContent>\n Content\n </PopoverContent>\n </PopoverPortal>\n </Popover>\n</div>"
|
|
2518
|
+
}
|
|
2519
|
+
]
|
|
2520
|
+
},
|
|
2521
|
+
{
|
|
2522
|
+
"name": "PopoverPortal",
|
|
2523
|
+
"title": "Popover",
|
|
2524
|
+
"description": "A popup that displays content when triggered by a button or popover trigger.",
|
|
2525
|
+
"docsPath": "docs/content/docs/components/popover.mdx",
|
|
2526
|
+
"docSlug": "popover",
|
|
2527
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/popover",
|
|
2528
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/popover#api-reference",
|
|
2529
|
+
"sourcePaths": [
|
|
2530
|
+
"src/components/popover/popover.tsx"
|
|
2531
|
+
],
|
|
2532
|
+
"props": [
|
|
2533
|
+
{
|
|
2534
|
+
"name": "`forceMount`",
|
|
2535
|
+
"type": "boolean",
|
|
2536
|
+
"default": "`false`",
|
|
2537
|
+
"description": "When true, the popover content is always mounted."
|
|
2538
|
+
},
|
|
2539
|
+
{
|
|
2540
|
+
"name": "`children`",
|
|
2541
|
+
"type": "React.ReactNode",
|
|
2542
|
+
"default": "-",
|
|
2543
|
+
"description": "The content to render inside the portal."
|
|
2544
|
+
},
|
|
2545
|
+
{
|
|
2546
|
+
"name": "`container`",
|
|
2547
|
+
"type": "HTMLElement | null",
|
|
2548
|
+
"default": "`null`",
|
|
2549
|
+
"description": "The container to render the portal in."
|
|
2550
|
+
}
|
|
2551
|
+
],
|
|
2552
|
+
"examples": [
|
|
2553
|
+
{
|
|
2554
|
+
"language": "tsx",
|
|
2555
|
+
"meta": "lineNumbers",
|
|
2556
|
+
"code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Popover>\n <PopoverTrigger asChild>\n <Button>Edit Profile</Button>\n </PopoverTrigger>\n <PopoverPortal>\n <PopoverContent>\n Content\n </PopoverContent>\n </PopoverPortal>\n </Popover>\n</div>"
|
|
2557
|
+
}
|
|
2558
|
+
]
|
|
2559
|
+
},
|
|
2560
|
+
{
|
|
2561
|
+
"name": "PopoverTrigger",
|
|
2562
|
+
"title": "Popover",
|
|
2563
|
+
"description": "A popup that displays content when triggered by a button or popover trigger.",
|
|
2564
|
+
"docsPath": "docs/content/docs/components/popover.mdx",
|
|
2565
|
+
"docSlug": "popover",
|
|
2566
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/popover",
|
|
2567
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/popover#api-reference",
|
|
2568
|
+
"sourcePaths": [
|
|
2569
|
+
"src/components/popover/popover.tsx"
|
|
2570
|
+
],
|
|
2571
|
+
"props": [
|
|
2572
|
+
{
|
|
2573
|
+
"name": "`asChild`",
|
|
2574
|
+
"type": "boolean",
|
|
2575
|
+
"default": "`false`",
|
|
2576
|
+
"description": "When true, merges props with the child element instead of rendering a button."
|
|
2577
|
+
}
|
|
2578
|
+
],
|
|
2579
|
+
"examples": [
|
|
2580
|
+
{
|
|
2581
|
+
"language": "tsx",
|
|
2582
|
+
"meta": "lineNumbers",
|
|
2583
|
+
"code": "import { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPortal, Button } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <Popover>\n <PopoverTrigger asChild>\n <Button>Edit Profile</Button>\n </PopoverTrigger>\n <PopoverPortal>\n <PopoverContent>\n Content\n </PopoverContent>\n </PopoverPortal>\n </Popover>\n</div>"
|
|
2584
|
+
}
|
|
2585
|
+
]
|
|
2586
|
+
},
|
|
2587
|
+
{
|
|
2588
|
+
"name": "RadioGroup",
|
|
2589
|
+
"title": "Radio",
|
|
2590
|
+
"description": "A Radio is a form control that allows the user to select a value from a set of options",
|
|
2591
|
+
"docsPath": "docs/content/docs/components/radio.mdx",
|
|
2592
|
+
"docSlug": "radio",
|
|
2593
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/radio-group",
|
|
2594
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference",
|
|
2595
|
+
"sourcePaths": [
|
|
2596
|
+
"src/components/radio/radio.tsx"
|
|
2597
|
+
],
|
|
2598
|
+
"props": [
|
|
2599
|
+
{
|
|
2600
|
+
"name": "`value`",
|
|
2601
|
+
"type": "string",
|
|
2602
|
+
"default": "-",
|
|
2603
|
+
"description": "Controlled value of the selected radio item."
|
|
2604
|
+
},
|
|
2605
|
+
{
|
|
2606
|
+
"name": "`defaultValue`",
|
|
2607
|
+
"type": "string",
|
|
2608
|
+
"default": "-",
|
|
2609
|
+
"description": "Uncontrolled default value of the selected radio item."
|
|
2610
|
+
},
|
|
2611
|
+
{
|
|
2612
|
+
"name": "`onValueChange`",
|
|
2613
|
+
"type": "(value: string) => void",
|
|
2614
|
+
"default": "-",
|
|
2615
|
+
"description": "Callback fired when the selected value changes."
|
|
2616
|
+
},
|
|
2617
|
+
{
|
|
2618
|
+
"name": "`disabled`",
|
|
2619
|
+
"type": "boolean",
|
|
2620
|
+
"default": "`false`",
|
|
2621
|
+
"description": "When true, prevents all radio items in the group from being interacted with."
|
|
2622
|
+
},
|
|
2623
|
+
{
|
|
2624
|
+
"name": "`required`",
|
|
2625
|
+
"type": "boolean",
|
|
2626
|
+
"default": "`false`",
|
|
2627
|
+
"description": "When true, indicates that a radio item must be selected before form submission."
|
|
2628
|
+
},
|
|
2629
|
+
{
|
|
2630
|
+
"name": "`name`",
|
|
2631
|
+
"type": "string",
|
|
2632
|
+
"default": "-",
|
|
2633
|
+
"description": "The name of the radio group, used when submitting a form."
|
|
2634
|
+
},
|
|
2635
|
+
{
|
|
2636
|
+
"name": "`className`",
|
|
2637
|
+
"type": "string",
|
|
2638
|
+
"default": "-",
|
|
2639
|
+
"description": "Additional CSS classes to apply to the radio group container."
|
|
2640
|
+
}
|
|
2641
|
+
],
|
|
2642
|
+
"examples": [
|
|
2643
|
+
{
|
|
2644
|
+
"language": "tsx",
|
|
2645
|
+
"meta": "lineNumbers",
|
|
2646
|
+
"code": "import { RadioGroup, RadioGroupItem, Label } from \"@epilot/volt-ui\"\n\n<RadioGroup defaultValue=\"daily\">\n <div className=\"flex items-center gap-2\">\n <RadioGroupItem value=\"daily\" id=\"daily\" />\n <Label htmlFor=\"daily\">Daily</Label>\n </div>\n <div className=\"flex items-center gap-2\">\n <RadioGroupItem value=\"weekly\" id=\"weekly\" />\n <Label htmlFor=\"weekly\">Weekly</Label>\n </div>\n <div className=\"flex items-center gap-2\">\n <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n <Label htmlFor=\"monthly\">Monthly</Label>\n </div>\n</RadioGroup>"
|
|
2647
|
+
}
|
|
2648
|
+
]
|
|
2649
|
+
},
|
|
2650
|
+
{
|
|
2651
|
+
"name": "RadioGroupItem",
|
|
2652
|
+
"title": "Radio",
|
|
2653
|
+
"description": "A Radio is a form control that allows the user to select a value from a set of options",
|
|
2654
|
+
"docsPath": "docs/content/docs/components/radio.mdx",
|
|
2655
|
+
"docSlug": "radio",
|
|
2656
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/radio-group",
|
|
2657
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/radio-group#api-reference",
|
|
2658
|
+
"sourcePaths": [
|
|
2659
|
+
"src/components/radio/radio.tsx"
|
|
2660
|
+
],
|
|
2661
|
+
"props": [
|
|
2662
|
+
{
|
|
2663
|
+
"name": "`value`",
|
|
2664
|
+
"type": "string",
|
|
2665
|
+
"default": "-",
|
|
2666
|
+
"description": "The value of the radio item (required). Must be unique within the radio group."
|
|
2667
|
+
},
|
|
2668
|
+
{
|
|
2669
|
+
"name": "`disabled`",
|
|
2670
|
+
"type": "boolean",
|
|
2671
|
+
"default": "`false`",
|
|
2672
|
+
"description": "When true, prevents the radio item from being interacted with."
|
|
2673
|
+
},
|
|
2674
|
+
{
|
|
2675
|
+
"name": "`id`",
|
|
2676
|
+
"type": "string",
|
|
2677
|
+
"default": "-",
|
|
2678
|
+
"description": "The unique identifier for the radio item element."
|
|
2679
|
+
},
|
|
2680
|
+
{
|
|
2681
|
+
"name": "`className`",
|
|
2682
|
+
"type": "string",
|
|
2683
|
+
"default": "-",
|
|
2684
|
+
"description": "Additional CSS classes to apply to the radio item."
|
|
2685
|
+
},
|
|
2686
|
+
{
|
|
2687
|
+
"name": "`aria-invalid`",
|
|
2688
|
+
"type": "boolean",
|
|
2689
|
+
"default": "`false`",
|
|
2690
|
+
"description": "When true, indicates that the radio item is invalid."
|
|
2691
|
+
}
|
|
2692
|
+
],
|
|
2693
|
+
"examples": [
|
|
2694
|
+
{
|
|
2695
|
+
"language": "tsx",
|
|
2696
|
+
"meta": "lineNumbers",
|
|
2697
|
+
"code": "import { RadioGroup, RadioGroupItem, Label } from \"@epilot/volt-ui\"\n\n<RadioGroup defaultValue=\"daily\">\n <div className=\"flex items-center gap-2\">\n <RadioGroupItem value=\"daily\" id=\"daily\" />\n <Label htmlFor=\"daily\">Daily</Label>\n </div>\n <div className=\"flex items-center gap-2\">\n <RadioGroupItem value=\"weekly\" id=\"weekly\" />\n <Label htmlFor=\"weekly\">Weekly</Label>\n </div>\n <div className=\"flex items-center gap-2\">\n <RadioGroupItem value=\"monthly\" id=\"monthly\" />\n <Label htmlFor=\"monthly\">Monthly</Label>\n </div>\n</RadioGroup>"
|
|
2698
|
+
}
|
|
2699
|
+
]
|
|
2700
|
+
},
|
|
2701
|
+
{
|
|
2702
|
+
"name": "Select",
|
|
2703
|
+
"title": "Field Select",
|
|
2704
|
+
"description": "A select field component for the Field component.",
|
|
2705
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2706
|
+
"docSlug": "field/field-select",
|
|
2707
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2708
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2709
|
+
"sourcePaths": [
|
|
2710
|
+
"src/components/field/field-select.tsx"
|
|
2711
|
+
],
|
|
2712
|
+
"props": [
|
|
2713
|
+
{
|
|
2714
|
+
"name": "`value`",
|
|
2715
|
+
"type": "string",
|
|
2716
|
+
"default": "-",
|
|
2717
|
+
"description": "The controlled value of the select."
|
|
2718
|
+
},
|
|
2719
|
+
{
|
|
2720
|
+
"name": "`defaultValue`",
|
|
2721
|
+
"type": "string",
|
|
2722
|
+
"default": "-",
|
|
2723
|
+
"description": "The value of the select when initially rendered."
|
|
2724
|
+
},
|
|
2725
|
+
{
|
|
2726
|
+
"name": "`onValueChange`",
|
|
2727
|
+
"type": "(value: string) => void",
|
|
2728
|
+
"default": "-",
|
|
2729
|
+
"description": "Event handler called when the value changes."
|
|
2730
|
+
},
|
|
2731
|
+
{
|
|
2732
|
+
"name": "`open`",
|
|
2733
|
+
"type": "boolean",
|
|
2734
|
+
"default": "-",
|
|
2735
|
+
"description": "The controlled open state of the select."
|
|
2736
|
+
},
|
|
2737
|
+
{
|
|
2738
|
+
"name": "`defaultOpen`",
|
|
2739
|
+
"type": "boolean",
|
|
2740
|
+
"default": "-",
|
|
2741
|
+
"description": "The open state of the select when initially rendered."
|
|
2742
|
+
},
|
|
2743
|
+
{
|
|
2744
|
+
"name": "`onOpenChange`",
|
|
2745
|
+
"type": "(open: boolean) => void",
|
|
2746
|
+
"default": "-",
|
|
2747
|
+
"description": "Event handler called when the open state changes."
|
|
2748
|
+
},
|
|
2749
|
+
{
|
|
2750
|
+
"name": "`disabled`",
|
|
2751
|
+
"type": "boolean",
|
|
2752
|
+
"default": "false",
|
|
2753
|
+
"description": "When set to `true`, the select is disabled."
|
|
2754
|
+
},
|
|
2755
|
+
{
|
|
2756
|
+
"name": "`name`",
|
|
2757
|
+
"type": "string",
|
|
2758
|
+
"default": "-",
|
|
2759
|
+
"description": "The name of the select. Submitted with its owning form as part of a name/value pair."
|
|
2760
|
+
},
|
|
2761
|
+
{
|
|
2762
|
+
"name": "`required`",
|
|
2763
|
+
"type": "boolean",
|
|
2764
|
+
"default": "false",
|
|
2765
|
+
"description": "When set to `true`, the select is required."
|
|
2766
|
+
},
|
|
2767
|
+
{
|
|
2768
|
+
"name": "`container`",
|
|
2769
|
+
"type": "React.ReactNode",
|
|
2770
|
+
"default": "-",
|
|
2771
|
+
"description": "The container to render the select content in."
|
|
2772
|
+
}
|
|
2773
|
+
],
|
|
2774
|
+
"examples": [
|
|
2775
|
+
{
|
|
2776
|
+
"language": "tsx",
|
|
2777
|
+
"meta": "lineNumbers",
|
|
2778
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
2779
|
+
}
|
|
2780
|
+
]
|
|
2781
|
+
},
|
|
2782
|
+
{
|
|
2783
|
+
"name": "SelectContent",
|
|
2784
|
+
"title": "Field Select",
|
|
2785
|
+
"description": "A select field component for the Field component.",
|
|
2786
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2787
|
+
"docSlug": "field/field-select",
|
|
2788
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2789
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2790
|
+
"sourcePaths": [
|
|
2791
|
+
"src/components/field/field-select.tsx"
|
|
2792
|
+
],
|
|
2793
|
+
"props": [
|
|
2794
|
+
{
|
|
2795
|
+
"name": "`className`",
|
|
2796
|
+
"type": "string",
|
|
2797
|
+
"default": "-",
|
|
2798
|
+
"description": "Additional CSS classes."
|
|
2799
|
+
},
|
|
2800
|
+
{
|
|
2801
|
+
"name": "`position`",
|
|
2802
|
+
"type": "\"popper\" | \"item-aligned\"",
|
|
2803
|
+
"default": "`\"popper\"`",
|
|
2804
|
+
"description": "The positioning strategy to use."
|
|
2805
|
+
},
|
|
2806
|
+
{
|
|
2807
|
+
"name": "`align`",
|
|
2808
|
+
"type": "\"start\" | \"center\" | \"end\"",
|
|
2809
|
+
"default": "`\"center\"`",
|
|
2810
|
+
"description": "The alignment of the content relative to the trigger."
|
|
2811
|
+
},
|
|
2812
|
+
{
|
|
2813
|
+
"name": "`side`",
|
|
2814
|
+
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
2815
|
+
"default": "`\"bottom\"`",
|
|
2816
|
+
"description": "The side of the trigger to render against."
|
|
2817
|
+
},
|
|
2818
|
+
{
|
|
2819
|
+
"name": "`sideOffset`",
|
|
2820
|
+
"type": "number",
|
|
2821
|
+
"default": "4",
|
|
2822
|
+
"description": "The distance in pixels from the trigger."
|
|
2823
|
+
}
|
|
2824
|
+
],
|
|
2825
|
+
"examples": [
|
|
2826
|
+
{
|
|
2827
|
+
"language": "tsx",
|
|
2828
|
+
"meta": "lineNumbers",
|
|
2829
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
2830
|
+
}
|
|
2831
|
+
]
|
|
2832
|
+
},
|
|
2833
|
+
{
|
|
2834
|
+
"name": "SelectGroup",
|
|
2835
|
+
"title": "Field Select",
|
|
2836
|
+
"description": "A select field component for the Field component.",
|
|
2837
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2838
|
+
"docSlug": "field/field-select",
|
|
2839
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2840
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2841
|
+
"sourcePaths": [
|
|
2842
|
+
"src/components/field/field-select.tsx"
|
|
2843
|
+
],
|
|
2844
|
+
"props": [
|
|
2845
|
+
{
|
|
2846
|
+
"name": "`className`",
|
|
2847
|
+
"type": "string",
|
|
2848
|
+
"default": "-",
|
|
2849
|
+
"description": "Additional CSS classes."
|
|
2850
|
+
}
|
|
2851
|
+
],
|
|
2852
|
+
"examples": [
|
|
2853
|
+
{
|
|
2854
|
+
"language": "tsx",
|
|
2855
|
+
"meta": "lineNumbers",
|
|
2856
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
2857
|
+
}
|
|
2858
|
+
]
|
|
2859
|
+
},
|
|
2860
|
+
{
|
|
2861
|
+
"name": "SelectItem",
|
|
2862
|
+
"title": "Field Select",
|
|
2863
|
+
"description": "A select field component for the Field component.",
|
|
2864
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2865
|
+
"docSlug": "field/field-select",
|
|
2866
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2867
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2868
|
+
"sourcePaths": [
|
|
2869
|
+
"src/components/field/field-select.tsx"
|
|
2870
|
+
],
|
|
2871
|
+
"props": [
|
|
2872
|
+
{
|
|
2873
|
+
"name": "`value`",
|
|
2874
|
+
"type": "string",
|
|
2875
|
+
"default": "-",
|
|
2876
|
+
"description": "The value of the item (required)."
|
|
2877
|
+
},
|
|
2878
|
+
{
|
|
2879
|
+
"name": "`className`",
|
|
2880
|
+
"type": "string",
|
|
2881
|
+
"default": "-",
|
|
2882
|
+
"description": "Additional CSS classes."
|
|
2883
|
+
},
|
|
2884
|
+
{
|
|
2885
|
+
"name": "`disabled`",
|
|
2886
|
+
"type": "boolean",
|
|
2887
|
+
"default": "false",
|
|
2888
|
+
"description": "When set to `true`, the item is disabled."
|
|
2889
|
+
}
|
|
2890
|
+
],
|
|
2891
|
+
"examples": [
|
|
2892
|
+
{
|
|
2893
|
+
"language": "tsx",
|
|
2894
|
+
"meta": "lineNumbers",
|
|
2895
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
2896
|
+
}
|
|
2897
|
+
]
|
|
2898
|
+
},
|
|
2899
|
+
{
|
|
2900
|
+
"name": "SelectLabel",
|
|
2901
|
+
"title": "Field Select",
|
|
2902
|
+
"description": "A select field component for the Field component.",
|
|
2903
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2904
|
+
"docSlug": "field/field-select",
|
|
2905
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2906
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2907
|
+
"sourcePaths": [
|
|
2908
|
+
"src/components/field/field-select.tsx"
|
|
2909
|
+
],
|
|
2910
|
+
"props": [
|
|
2911
|
+
{
|
|
2912
|
+
"name": "`className`",
|
|
2913
|
+
"type": "string",
|
|
2914
|
+
"default": "-",
|
|
2915
|
+
"description": "Additional CSS classes."
|
|
2916
|
+
}
|
|
2917
|
+
],
|
|
2918
|
+
"examples": [
|
|
2919
|
+
{
|
|
2920
|
+
"language": "tsx",
|
|
2921
|
+
"meta": "lineNumbers",
|
|
2922
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
2923
|
+
}
|
|
2924
|
+
]
|
|
2925
|
+
},
|
|
2926
|
+
{
|
|
2927
|
+
"name": "SelectScrollDownButton",
|
|
2928
|
+
"title": null,
|
|
2929
|
+
"description": null,
|
|
2930
|
+
"docsPath": null,
|
|
2931
|
+
"docSlug": null,
|
|
2932
|
+
"documentationUrl": null,
|
|
2933
|
+
"apiReferenceUrl": null,
|
|
2934
|
+
"sourcePaths": [
|
|
2935
|
+
"src/components/field/field-select.tsx"
|
|
2936
|
+
],
|
|
2937
|
+
"props": [],
|
|
2938
|
+
"examples": []
|
|
2939
|
+
},
|
|
2940
|
+
{
|
|
2941
|
+
"name": "SelectScrollUpButton",
|
|
2942
|
+
"title": null,
|
|
2943
|
+
"description": null,
|
|
2944
|
+
"docsPath": null,
|
|
2945
|
+
"docSlug": null,
|
|
2946
|
+
"documentationUrl": null,
|
|
2947
|
+
"apiReferenceUrl": null,
|
|
2948
|
+
"sourcePaths": [
|
|
2949
|
+
"src/components/field/field-select.tsx"
|
|
2950
|
+
],
|
|
2951
|
+
"props": [],
|
|
2952
|
+
"examples": []
|
|
2953
|
+
},
|
|
2954
|
+
{
|
|
2955
|
+
"name": "SelectSeparator",
|
|
2956
|
+
"title": "Field Select",
|
|
2957
|
+
"description": "A select field component for the Field component.",
|
|
2958
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2959
|
+
"docSlug": "field/field-select",
|
|
2960
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2961
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2962
|
+
"sourcePaths": [
|
|
2963
|
+
"src/components/field/field-select.tsx"
|
|
2964
|
+
],
|
|
2965
|
+
"props": [
|
|
2966
|
+
{
|
|
2967
|
+
"name": "`className`",
|
|
2968
|
+
"type": "string",
|
|
2969
|
+
"default": "-",
|
|
2970
|
+
"description": "Additional CSS classes."
|
|
2971
|
+
}
|
|
2972
|
+
],
|
|
2973
|
+
"examples": [
|
|
2974
|
+
{
|
|
2975
|
+
"language": "tsx",
|
|
2976
|
+
"meta": "lineNumbers",
|
|
2977
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
2978
|
+
}
|
|
2979
|
+
]
|
|
2980
|
+
},
|
|
2981
|
+
{
|
|
2982
|
+
"name": "SelectTrigger",
|
|
2983
|
+
"title": "Field Select",
|
|
2984
|
+
"description": "A select field component for the Field component.",
|
|
2985
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
2986
|
+
"docSlug": "field/field-select",
|
|
2987
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
2988
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
2989
|
+
"sourcePaths": [
|
|
2990
|
+
"src/components/field/field-select.tsx"
|
|
2991
|
+
],
|
|
2992
|
+
"props": [
|
|
2993
|
+
{
|
|
2994
|
+
"name": "`className`",
|
|
2995
|
+
"type": "string",
|
|
2996
|
+
"default": "-",
|
|
2997
|
+
"description": "Additional CSS classes."
|
|
2998
|
+
},
|
|
2999
|
+
{
|
|
3000
|
+
"name": "`disabled`",
|
|
3001
|
+
"type": "boolean",
|
|
3002
|
+
"default": "false",
|
|
3003
|
+
"description": "When set to `true`, the trigger is disabled."
|
|
3004
|
+
},
|
|
3005
|
+
{
|
|
3006
|
+
"name": "`asChild`",
|
|
3007
|
+
"type": "boolean",
|
|
3008
|
+
"default": "false",
|
|
3009
|
+
"description": "Change the component to the HTML tag or custom component."
|
|
3010
|
+
}
|
|
3011
|
+
],
|
|
3012
|
+
"examples": [
|
|
3013
|
+
{
|
|
3014
|
+
"language": "tsx",
|
|
3015
|
+
"meta": "lineNumbers",
|
|
3016
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
3017
|
+
}
|
|
3018
|
+
]
|
|
3019
|
+
},
|
|
3020
|
+
{
|
|
3021
|
+
"name": "SelectTriggerClear",
|
|
3022
|
+
"title": null,
|
|
3023
|
+
"description": null,
|
|
3024
|
+
"docsPath": null,
|
|
3025
|
+
"docSlug": null,
|
|
3026
|
+
"documentationUrl": null,
|
|
3027
|
+
"apiReferenceUrl": null,
|
|
3028
|
+
"sourcePaths": [
|
|
3029
|
+
"src/components/field/field-select.tsx"
|
|
3030
|
+
],
|
|
3031
|
+
"props": [],
|
|
3032
|
+
"examples": []
|
|
3033
|
+
},
|
|
3034
|
+
{
|
|
3035
|
+
"name": "SelectValue",
|
|
3036
|
+
"title": "Field Select",
|
|
3037
|
+
"description": "A select field component for the Field component.",
|
|
3038
|
+
"docsPath": "docs/content/docs/components/field/field-select.mdx",
|
|
3039
|
+
"docSlug": "field/field-select",
|
|
3040
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/select",
|
|
3041
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/select#api-reference",
|
|
3042
|
+
"sourcePaths": [
|
|
3043
|
+
"src/components/field/field-select.tsx"
|
|
3044
|
+
],
|
|
3045
|
+
"props": [
|
|
3046
|
+
{
|
|
3047
|
+
"name": "`placeholder`",
|
|
3048
|
+
"type": "string",
|
|
3049
|
+
"default": "-",
|
|
3050
|
+
"description": "The placeholder text shown when no value is selected."
|
|
3051
|
+
},
|
|
3052
|
+
{
|
|
3053
|
+
"name": "`className`",
|
|
3054
|
+
"type": "string",
|
|
3055
|
+
"default": "-",
|
|
3056
|
+
"description": "Additional CSS classes."
|
|
3057
|
+
}
|
|
3058
|
+
],
|
|
3059
|
+
"examples": [
|
|
3060
|
+
{
|
|
3061
|
+
"language": "tsx",
|
|
3062
|
+
"meta": "lineNumbers",
|
|
3063
|
+
"code": "import {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n SelectGroup,\n SelectLabel,\n} from \"@epilot/volt-ui\"\n\n<Field>\n <FieldLabel>Theme</FieldLabel>\n <Select>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n</Field>"
|
|
3064
|
+
}
|
|
3065
|
+
]
|
|
3066
|
+
},
|
|
3067
|
+
{
|
|
3068
|
+
"name": "Separator",
|
|
3069
|
+
"title": "Separator",
|
|
3070
|
+
"description": "A visual separator component for dividing content into distinct sections.",
|
|
3071
|
+
"docsPath": "docs/content/docs/components/seperator.mdx",
|
|
3072
|
+
"docSlug": "seperator",
|
|
3073
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/separator",
|
|
3074
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/separator#api-reference",
|
|
3075
|
+
"sourcePaths": [
|
|
3076
|
+
"src/components/separator/seperator.tsx"
|
|
3077
|
+
],
|
|
3078
|
+
"props": [
|
|
3079
|
+
{
|
|
3080
|
+
"name": "`orientation`",
|
|
3081
|
+
"type": "\"horizontal\" | \"vertical\"",
|
|
3082
|
+
"default": "`\"horizontal\"`",
|
|
3083
|
+
"description": "The orientation of the separator."
|
|
3084
|
+
},
|
|
3085
|
+
{
|
|
3086
|
+
"name": "`decorative`",
|
|
3087
|
+
"type": "boolean",
|
|
3088
|
+
"default": "`true`",
|
|
3089
|
+
"description": "When true, the separator is purely decorative and not announced by screen readers."
|
|
3090
|
+
},
|
|
3091
|
+
{
|
|
3092
|
+
"name": "`className`",
|
|
3093
|
+
"type": "string",
|
|
3094
|
+
"default": "-",
|
|
3095
|
+
"description": "Additional CSS classes to apply to the separator."
|
|
3096
|
+
}
|
|
3097
|
+
],
|
|
3098
|
+
"examples": [
|
|
3099
|
+
{
|
|
3100
|
+
"language": "tsx",
|
|
3101
|
+
"meta": "lineNumbers",
|
|
3102
|
+
"code": "import { Separator } from \"@epilot/volt-ui\"\n\n<div className=\"flex flex-col gap-4\">\n <div>Content above</div>\n <Separator />\n <div>Content below</div>\n</div>"
|
|
3103
|
+
}
|
|
3104
|
+
]
|
|
3105
|
+
},
|
|
3106
|
+
{
|
|
3107
|
+
"name": "Spinner",
|
|
3108
|
+
"title": "Spinner",
|
|
3109
|
+
"description": "Displays a loading indicator in line or circular form.",
|
|
3110
|
+
"docsPath": "docs/content/docs/components/spinner.mdx",
|
|
3111
|
+
"docSlug": "spinner",
|
|
3112
|
+
"documentationUrl": null,
|
|
3113
|
+
"apiReferenceUrl": null,
|
|
3114
|
+
"sourcePaths": [
|
|
3115
|
+
"src/components/spinner/spinner.tsx"
|
|
3116
|
+
],
|
|
3117
|
+
"props": [
|
|
3118
|
+
{
|
|
3119
|
+
"name": "`size`",
|
|
3120
|
+
"type": "\"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\"",
|
|
3121
|
+
"default": "\"base\"",
|
|
3122
|
+
"description": "Controls the spinner dimensions."
|
|
3123
|
+
},
|
|
3124
|
+
{
|
|
3125
|
+
"name": "`variant`",
|
|
3126
|
+
"type": "\"circle\" | \"line\"",
|
|
3127
|
+
"default": "\"line\"",
|
|
3128
|
+
"description": "Visual style of the spinner."
|
|
3129
|
+
},
|
|
3130
|
+
{
|
|
3131
|
+
"name": "`className`",
|
|
3132
|
+
"type": "string",
|
|
3133
|
+
"default": "-",
|
|
3134
|
+
"description": "Additional classes for custom styling."
|
|
3135
|
+
}
|
|
3136
|
+
],
|
|
3137
|
+
"examples": [
|
|
3138
|
+
{
|
|
3139
|
+
"language": "tsx",
|
|
3140
|
+
"meta": "lineNumbers",
|
|
3141
|
+
"code": "import { Spinner } from \"@epilot/volt-ui\"\n\n<Spinner variant=\"line\" />\n<Spinner variant=\"circle\" />"
|
|
3142
|
+
}
|
|
3143
|
+
]
|
|
3144
|
+
},
|
|
3145
|
+
{
|
|
3146
|
+
"name": "Switch",
|
|
3147
|
+
"title": "Switch",
|
|
3148
|
+
"description": "A control that allows users to toggle between checked and unchecked states.",
|
|
3149
|
+
"docsPath": "docs/content/docs/components/switch.mdx",
|
|
3150
|
+
"docSlug": "switch",
|
|
3151
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/switch",
|
|
3152
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/switch#api-reference",
|
|
3153
|
+
"sourcePaths": [
|
|
3154
|
+
"src/components/switch/switch.tsx"
|
|
3155
|
+
],
|
|
3156
|
+
"props": [
|
|
3157
|
+
{
|
|
3158
|
+
"name": "`variant`",
|
|
3159
|
+
"type": "\"primary\" | \"destructive\"",
|
|
3160
|
+
"default": "`\"primary\"`",
|
|
3161
|
+
"description": "The visual style variant of the switch."
|
|
3162
|
+
},
|
|
3163
|
+
{
|
|
3164
|
+
"name": "`size`",
|
|
3165
|
+
"type": "\"sm\" | \"base\" | \"lg\"",
|
|
3166
|
+
"default": "`\"base\"`",
|
|
3167
|
+
"description": "The size of the switch."
|
|
3168
|
+
},
|
|
3169
|
+
{
|
|
3170
|
+
"name": "`checked`",
|
|
3171
|
+
"type": "boolean",
|
|
3172
|
+
"default": "-",
|
|
3173
|
+
"description": "Controlled checked state of the switch."
|
|
3174
|
+
},
|
|
3175
|
+
{
|
|
3176
|
+
"name": "`defaultChecked`",
|
|
3177
|
+
"type": "boolean",
|
|
3178
|
+
"default": "`false`",
|
|
3179
|
+
"description": "Uncontrolled default checked state."
|
|
3180
|
+
},
|
|
3181
|
+
{
|
|
3182
|
+
"name": "`onCheckedChange`",
|
|
3183
|
+
"type": "(checked: boolean) => void",
|
|
3184
|
+
"default": "-",
|
|
3185
|
+
"description": "Callback fired when the checked state changes."
|
|
3186
|
+
},
|
|
3187
|
+
{
|
|
3188
|
+
"name": "`disabled`",
|
|
3189
|
+
"type": "boolean",
|
|
3190
|
+
"default": "`false`",
|
|
3191
|
+
"description": "When true, prevents the user from interacting with the switch."
|
|
3192
|
+
},
|
|
3193
|
+
{
|
|
3194
|
+
"name": "`name`",
|
|
3195
|
+
"type": "string",
|
|
3196
|
+
"default": "-",
|
|
3197
|
+
"description": "The name of the switch, used when submitting a form."
|
|
3198
|
+
},
|
|
3199
|
+
{
|
|
3200
|
+
"name": "`value`",
|
|
3201
|
+
"type": "string",
|
|
3202
|
+
"default": "`\"on\"`",
|
|
3203
|
+
"description": "The value of the switch when checked, used when submitting a form."
|
|
3204
|
+
},
|
|
3205
|
+
{
|
|
3206
|
+
"name": "`showThumbIcon`",
|
|
3207
|
+
"type": "boolean",
|
|
3208
|
+
"default": "`false`",
|
|
3209
|
+
"description": "Whether to show the thumb icon."
|
|
3210
|
+
}
|
|
3211
|
+
],
|
|
3212
|
+
"examples": [
|
|
3213
|
+
{
|
|
3214
|
+
"language": "tsx",
|
|
3215
|
+
"meta": "lineNumbers",
|
|
3216
|
+
"code": "import { Switch, Label } from \"@epilot/volt-ui\"\n\n<div className=\"flex items-center gap-2\">\n <Switch id=\"notifications\" />\n <Label htmlFor=\"notifications\">Enable notifications</Label>\n</div>"
|
|
3217
|
+
},
|
|
3218
|
+
{
|
|
3219
|
+
"language": "tsx",
|
|
3220
|
+
"meta": "lineNumbers",
|
|
3221
|
+
"code": "import { Switch, Label } from \"@epilot/volt-ui\"\n\n<Switch variant=\"primary\" size=\"sm\" />\n<Switch variant=\"primary\" size=\"base\" />\n<Switch variant=\"primary\" size=\"lg\" />\n\n<Switch variant=\"destructive\" size=\"sm\" />\n<Switch variant=\"destructive\" size=\"base\" />\n<Switch variant=\"destructive\" size=\"lg\" />"
|
|
3222
|
+
}
|
|
3223
|
+
]
|
|
3224
|
+
},
|
|
3225
|
+
{
|
|
3226
|
+
"name": "Tabs",
|
|
3227
|
+
"title": "Tabs",
|
|
3228
|
+
"description": "A set of layered sections of content known as tab panels that are displayed one at a time.",
|
|
3229
|
+
"docsPath": "docs/content/docs/components/tabs.mdx",
|
|
3230
|
+
"docSlug": "tabs",
|
|
3231
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tabs",
|
|
3232
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tabs#api-reference",
|
|
3233
|
+
"sourcePaths": [
|
|
3234
|
+
"src/components/tabs/tabs.tsx"
|
|
3235
|
+
],
|
|
3236
|
+
"props": [
|
|
3237
|
+
{
|
|
3238
|
+
"name": "`defaultValue`",
|
|
3239
|
+
"type": "`string`",
|
|
3240
|
+
"default": "-",
|
|
3241
|
+
"description": "The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs."
|
|
3242
|
+
},
|
|
3243
|
+
{
|
|
3244
|
+
"name": "`value`",
|
|
3245
|
+
"type": "`string`",
|
|
3246
|
+
"default": "-",
|
|
3247
|
+
"description": "The controlled value of the tab to activate. Should be used with `onValueChange`."
|
|
3248
|
+
},
|
|
3249
|
+
{
|
|
3250
|
+
"name": "`onValueChange`",
|
|
3251
|
+
"type": "`(value: string) => void`",
|
|
3252
|
+
"default": "-",
|
|
3253
|
+
"description": "Event handler called when the value changes."
|
|
3254
|
+
},
|
|
3255
|
+
{
|
|
3256
|
+
"name": "`orientation`",
|
|
3257
|
+
"type": "`\"horizontal\"` | `\"vertical\"`",
|
|
3258
|
+
"default": "`\"horizontal\"`",
|
|
3259
|
+
"description": "The orientation of the component."
|
|
3260
|
+
},
|
|
3261
|
+
{
|
|
3262
|
+
"name": "`size`",
|
|
3263
|
+
"type": "`\"sm\"` | `\"base\"` | `\"lg\"`",
|
|
3264
|
+
"default": "`\"base\"`",
|
|
3265
|
+
"description": "The size of the tabs triggers."
|
|
3266
|
+
},
|
|
3267
|
+
{
|
|
3268
|
+
"name": "`variant`",
|
|
3269
|
+
"type": "`\"default\"` | `\"highlight\"`",
|
|
3270
|
+
"default": "`\"default\"`",
|
|
3271
|
+
"description": "The variant of the tabs."
|
|
3272
|
+
}
|
|
3273
|
+
],
|
|
3274
|
+
"examples": [
|
|
3275
|
+
{
|
|
3276
|
+
"language": "tsx",
|
|
3277
|
+
"meta": "lineNumbers",
|
|
3278
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n <TabsList>\n <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3279
|
+
},
|
|
3280
|
+
{
|
|
3281
|
+
"language": "tsx",
|
|
3282
|
+
"meta": "lineNumbers",
|
|
3283
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n <TabsList>\n <TabsTrigger value=\"account\">Account</TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3284
|
+
}
|
|
3285
|
+
]
|
|
3286
|
+
},
|
|
3287
|
+
{
|
|
3288
|
+
"name": "TabsContent",
|
|
3289
|
+
"title": "Tabs",
|
|
3290
|
+
"description": "A set of layered sections of content known as tab panels that are displayed one at a time.",
|
|
3291
|
+
"docsPath": "docs/content/docs/components/tabs.mdx",
|
|
3292
|
+
"docSlug": "tabs",
|
|
3293
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tabs",
|
|
3294
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tabs#api-reference",
|
|
3295
|
+
"sourcePaths": [
|
|
3296
|
+
"src/components/tabs/tabs.tsx"
|
|
3297
|
+
],
|
|
3298
|
+
"props": [
|
|
3299
|
+
{
|
|
3300
|
+
"name": "`value`",
|
|
3301
|
+
"type": "`string`",
|
|
3302
|
+
"default": "-",
|
|
3303
|
+
"description": "A unique value that associates the content with a trigger."
|
|
3304
|
+
},
|
|
3305
|
+
{
|
|
3306
|
+
"name": "`className`",
|
|
3307
|
+
"type": "`string`",
|
|
3308
|
+
"default": "-",
|
|
3309
|
+
"description": "Additional CSS classes to apply."
|
|
3310
|
+
}
|
|
3311
|
+
],
|
|
3312
|
+
"examples": [
|
|
3313
|
+
{
|
|
3314
|
+
"language": "tsx",
|
|
3315
|
+
"meta": "lineNumbers",
|
|
3316
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n <TabsList>\n <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3317
|
+
},
|
|
3318
|
+
{
|
|
3319
|
+
"language": "tsx",
|
|
3320
|
+
"meta": "lineNumbers",
|
|
3321
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n <TabsList>\n <TabsTrigger value=\"account\">Account</TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3322
|
+
}
|
|
3323
|
+
]
|
|
3324
|
+
},
|
|
3325
|
+
{
|
|
3326
|
+
"name": "TabsList",
|
|
3327
|
+
"title": "Tabs",
|
|
3328
|
+
"description": "A set of layered sections of content known as tab panels that are displayed one at a time.",
|
|
3329
|
+
"docsPath": "docs/content/docs/components/tabs.mdx",
|
|
3330
|
+
"docSlug": "tabs",
|
|
3331
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tabs",
|
|
3332
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tabs#api-reference",
|
|
3333
|
+
"sourcePaths": [
|
|
3334
|
+
"src/components/tabs/tabs.tsx"
|
|
3335
|
+
],
|
|
3336
|
+
"props": [
|
|
3337
|
+
{
|
|
3338
|
+
"name": "`loop`",
|
|
3339
|
+
"type": "`boolean`",
|
|
3340
|
+
"default": "`true`",
|
|
3341
|
+
"description": "When true, keyboard navigation will loop from last tab to first, and vice versa."
|
|
3342
|
+
},
|
|
3343
|
+
{
|
|
3344
|
+
"name": "`className`",
|
|
3345
|
+
"type": "`string`",
|
|
3346
|
+
"default": "-",
|
|
3347
|
+
"description": "Additional CSS classes to apply."
|
|
3348
|
+
}
|
|
3349
|
+
],
|
|
3350
|
+
"examples": [
|
|
3351
|
+
{
|
|
3352
|
+
"language": "tsx",
|
|
3353
|
+
"meta": "lineNumbers",
|
|
3354
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n <TabsList>\n <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3355
|
+
},
|
|
3356
|
+
{
|
|
3357
|
+
"language": "tsx",
|
|
3358
|
+
"meta": "lineNumbers",
|
|
3359
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n <TabsList>\n <TabsTrigger value=\"account\">Account</TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3360
|
+
}
|
|
3361
|
+
]
|
|
3362
|
+
},
|
|
3363
|
+
{
|
|
3364
|
+
"name": "TabsTrigger",
|
|
3365
|
+
"title": "Tabs",
|
|
3366
|
+
"description": "A set of layered sections of content known as tab panels that are displayed one at a time.",
|
|
3367
|
+
"docsPath": "docs/content/docs/components/tabs.mdx",
|
|
3368
|
+
"docSlug": "tabs",
|
|
3369
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tabs",
|
|
3370
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tabs#api-reference",
|
|
3371
|
+
"sourcePaths": [
|
|
3372
|
+
"src/components/tabs/tabs.tsx"
|
|
3373
|
+
],
|
|
3374
|
+
"props": [
|
|
3375
|
+
{
|
|
3376
|
+
"name": "`value`",
|
|
3377
|
+
"type": "`string`",
|
|
3378
|
+
"default": "-",
|
|
3379
|
+
"description": "A unique value that associates the trigger with a content panel."
|
|
3380
|
+
},
|
|
3381
|
+
{
|
|
3382
|
+
"name": "`disabled`",
|
|
3383
|
+
"type": "`boolean`",
|
|
3384
|
+
"default": "`false`",
|
|
3385
|
+
"description": "When true, prevents the user from interacting with the tab."
|
|
3386
|
+
},
|
|
3387
|
+
{
|
|
3388
|
+
"name": "`className`",
|
|
3389
|
+
"type": "`string`",
|
|
3390
|
+
"default": "-",
|
|
3391
|
+
"description": "Additional CSS classes to apply."
|
|
3392
|
+
}
|
|
3393
|
+
],
|
|
3394
|
+
"examples": [
|
|
3395
|
+
{
|
|
3396
|
+
"language": "tsx",
|
|
3397
|
+
"meta": "lineNumbers",
|
|
3398
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContent, Badge } from \"@epilot/volt-ui\"\n\n<Tabs variant=\"highlight\" defaultValue=\"account\">\n <TabsList>\n <TabsTrigger value=\"account\">Account <Badge size=\"sm\">1</Badge></TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3399
|
+
},
|
|
3400
|
+
{
|
|
3401
|
+
"language": "tsx",
|
|
3402
|
+
"meta": "lineNumbers",
|
|
3403
|
+
"code": "import { Tabs, TabsList, TabsTrigger, TabsContentm } from \"@epilot/volt-ui\"\n\n<Tabs defaultValue=\"account\" orientation=\"vertical\">\n <TabsList>\n <TabsTrigger value=\"account\">Account</TabsTrigger>\n <TabsTrigger value=\"password\">Password</TabsTrigger>\n <TabsTrigger value=\"settings\">Settings</TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\"></TabsContent>\n <TabsContent value=\"password\"></TabsContent>\n <TabsContent value=\"settings\"></TabsContent>\n</Tabs>"
|
|
3404
|
+
}
|
|
3405
|
+
]
|
|
3406
|
+
},
|
|
3407
|
+
{
|
|
3408
|
+
"name": "Text",
|
|
3409
|
+
"title": "Text",
|
|
3410
|
+
"description": "A text component with typography variants.",
|
|
3411
|
+
"docsPath": "docs/content/docs/components/text.mdx",
|
|
3412
|
+
"docSlug": "text",
|
|
3413
|
+
"documentationUrl": null,
|
|
3414
|
+
"apiReferenceUrl": null,
|
|
3415
|
+
"sourcePaths": [
|
|
3416
|
+
"src/components/text/text.tsx"
|
|
3417
|
+
],
|
|
3418
|
+
"props": [
|
|
3419
|
+
{
|
|
3420
|
+
"name": "`variant`",
|
|
3421
|
+
"type": "See variants below",
|
|
3422
|
+
"default": "`\"body2\"`",
|
|
3423
|
+
"description": "The typography variant from the design system."
|
|
3424
|
+
},
|
|
3425
|
+
{
|
|
3426
|
+
"name": "`asChild`",
|
|
3427
|
+
"type": "boolean",
|
|
3428
|
+
"default": "`false`",
|
|
3429
|
+
"description": "When `true`, merges props onto the child element instead of rendering a `<span>`. Useful for applying Text styles to semantic HTML elements."
|
|
3430
|
+
},
|
|
3431
|
+
{
|
|
3432
|
+
"name": "`className`",
|
|
3433
|
+
"type": "string",
|
|
3434
|
+
"default": "-",
|
|
3435
|
+
"description": "Additional Tailwind classes merged with the defaults."
|
|
3436
|
+
}
|
|
3437
|
+
],
|
|
3438
|
+
"examples": [
|
|
3439
|
+
{
|
|
3440
|
+
"language": "tsx",
|
|
3441
|
+
"meta": "lineNumbers",
|
|
3442
|
+
"code": "import { Text } from \"@epilot/volt-ui\"\n\n<Text variant=\"title3\">Title 3</Text>\n<Text variant=\"body2\">Body text</Text>\n<Text variant=\"body1\">Small emphasized text</Text>"
|
|
3443
|
+
},
|
|
3444
|
+
{
|
|
3445
|
+
"language": "tsx",
|
|
3446
|
+
"meta": "lineNumbers",
|
|
3447
|
+
"code": "import { Text } from \"@epilot/volt-ui\"\n\n<Text asChild variant=\"title1\"><h1>Title 1</h1></Text>\n<Text asChild variant=\"heading1\"><h2>Heading 1</h2></Text>"
|
|
3448
|
+
},
|
|
3449
|
+
{
|
|
3450
|
+
"language": "tsx",
|
|
3451
|
+
"meta": null,
|
|
3452
|
+
"code": "<Text className=\"volt-text-accent-default volt-text-center\">\n Centered accent text\n</Text>\n<Text variant=\"heading2\" className=\"volt-text-error-default\">\n Error message heading\n</Text>"
|
|
3453
|
+
}
|
|
3454
|
+
]
|
|
3455
|
+
},
|
|
3456
|
+
{
|
|
3457
|
+
"name": "Toaster",
|
|
3458
|
+
"title": "Toast",
|
|
3459
|
+
"description": "A toast notification that displays a brief message to the user, typically used for feedback or alerts.",
|
|
3460
|
+
"docsPath": "docs/content/docs/components/toast.mdx",
|
|
3461
|
+
"docSlug": "toast",
|
|
3462
|
+
"documentationUrl": "https://sonner.emilkowal.ski/",
|
|
3463
|
+
"apiReferenceUrl": null,
|
|
3464
|
+
"sourcePaths": [
|
|
3465
|
+
"src/components/toast/toast.tsx"
|
|
3466
|
+
],
|
|
3467
|
+
"props": [
|
|
3468
|
+
{
|
|
3469
|
+
"name": "`theme`",
|
|
3470
|
+
"type": "`\"light\"` | `\"dark\"`",
|
|
3471
|
+
"default": "-",
|
|
3472
|
+
"description": "The color theme of the toasts."
|
|
3473
|
+
},
|
|
3474
|
+
{
|
|
3475
|
+
"name": "`position`",
|
|
3476
|
+
"type": "`\"top-left\"` | `\"top-center\"` | `\"top-right\"` | `\"bottom-left\"` | `\"bottom-center\"` | `\"bottom-right\"`",
|
|
3477
|
+
"default": "`\"bottom-right\"`",
|
|
3478
|
+
"description": "The position where toasts appear on the screen."
|
|
3479
|
+
},
|
|
3480
|
+
{
|
|
3481
|
+
"name": "`duration`",
|
|
3482
|
+
"type": "`number`",
|
|
3483
|
+
"default": "`4000`",
|
|
3484
|
+
"description": "The duration in milliseconds before the toast auto-dismisses."
|
|
3485
|
+
},
|
|
3486
|
+
{
|
|
3487
|
+
"name": "`closeButton`",
|
|
3488
|
+
"type": "`boolean`",
|
|
3489
|
+
"default": "`false`",
|
|
3490
|
+
"description": "Whether to show a close button on each toast."
|
|
3491
|
+
},
|
|
3492
|
+
{
|
|
3493
|
+
"name": "`richColors`",
|
|
3494
|
+
"type": "`boolean`",
|
|
3495
|
+
"default": "`true`",
|
|
3496
|
+
"description": "Whether to use rich colors for different toast types."
|
|
3497
|
+
},
|
|
3498
|
+
{
|
|
3499
|
+
"name": "`expand`",
|
|
3500
|
+
"type": "`boolean`",
|
|
3501
|
+
"default": "`false`",
|
|
3502
|
+
"description": "Whether toasts should be expanded by default."
|
|
3503
|
+
},
|
|
3504
|
+
{
|
|
3505
|
+
"name": "`visibleToasts`",
|
|
3506
|
+
"type": "`number`",
|
|
3507
|
+
"default": "`3`",
|
|
3508
|
+
"description": "Maximum number of toasts visible at once."
|
|
3509
|
+
},
|
|
3510
|
+
{
|
|
3511
|
+
"name": "`offset`",
|
|
3512
|
+
"type": "`string`",
|
|
3513
|
+
"default": "-",
|
|
3514
|
+
"description": "Offset from the edges of the screen."
|
|
3515
|
+
}
|
|
3516
|
+
],
|
|
3517
|
+
"examples": [
|
|
3518
|
+
{
|
|
3519
|
+
"language": "tsx",
|
|
3520
|
+
"meta": "lineNumbers",
|
|
3521
|
+
"code": "import { Toaster, toast } from \"@epilot/volt-ui\"\n\n// Add Toaster to your app root\n<Toaster />\n\n// Success toast\ntoast.success(\"Successfully saved!\")\n\n// Info toast\ntoast.info(\"Did you know?\")\n\n// Warning toast\ntoast.warning(\"Please review your changes\")\n\n// Error toast\ntoast.error(\"Something went wrong\")"
|
|
3522
|
+
},
|
|
3523
|
+
{
|
|
3524
|
+
"language": "tsx",
|
|
3525
|
+
"meta": "lineNumbers",
|
|
3526
|
+
"code": "toast(\"Event deleted\", {\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo clicked\")\n }\n})"
|
|
3527
|
+
},
|
|
3528
|
+
{
|
|
3529
|
+
"language": "tsx",
|
|
3530
|
+
"meta": "lineNumbers",
|
|
3531
|
+
"code": "const promise = fetchData()\n\ntoast.promise(promise, {\n loading: \"Loading...\",\n success: \"Data loaded successfully!\",\n error: \"Failed to load data\"\n})"
|
|
3532
|
+
},
|
|
3533
|
+
{
|
|
3534
|
+
"language": "tsx",
|
|
3535
|
+
"meta": "lineNumbers",
|
|
3536
|
+
"code": "// Light theme (default)\n<Toaster theme=\"light\" />\n\n// Dark theme\n<Toaster theme=\"dark\" />"
|
|
3537
|
+
}
|
|
3538
|
+
]
|
|
3539
|
+
},
|
|
3540
|
+
{
|
|
3541
|
+
"name": "Tooltip",
|
|
3542
|
+
"title": "Tooltip",
|
|
3543
|
+
"description": "A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
|
|
3544
|
+
"docsPath": "docs/content/docs/components/tooltip.mdx",
|
|
3545
|
+
"docSlug": "tooltip",
|
|
3546
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip",
|
|
3547
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference",
|
|
3548
|
+
"sourcePaths": [
|
|
3549
|
+
"src/components/tooltip/tooltip.tsx"
|
|
3550
|
+
],
|
|
3551
|
+
"props": [
|
|
3552
|
+
{
|
|
3553
|
+
"name": "`open`",
|
|
3554
|
+
"type": "boolean",
|
|
3555
|
+
"default": "-",
|
|
3556
|
+
"description": "Controlled open state of the tooltip."
|
|
3557
|
+
},
|
|
3558
|
+
{
|
|
3559
|
+
"name": "`defaultOpen`",
|
|
3560
|
+
"type": "boolean",
|
|
3561
|
+
"default": "`false`",
|
|
3562
|
+
"description": "Uncontrolled default open state."
|
|
3563
|
+
},
|
|
3564
|
+
{
|
|
3565
|
+
"name": "`onOpenChange`",
|
|
3566
|
+
"type": "(open: boolean) => void",
|
|
3567
|
+
"default": "-",
|
|
3568
|
+
"description": "Callback fired when the open state changes."
|
|
3569
|
+
},
|
|
3570
|
+
{
|
|
3571
|
+
"name": "`disabled`",
|
|
3572
|
+
"type": "boolean",
|
|
3573
|
+
"default": "`false`",
|
|
3574
|
+
"description": "When true, prevents the tooltip from opening."
|
|
3575
|
+
},
|
|
3576
|
+
{
|
|
3577
|
+
"name": "`delayDuration`",
|
|
3578
|
+
"type": "number",
|
|
3579
|
+
"default": "`700`",
|
|
3580
|
+
"description": "The duration in milliseconds to wait before showing the tooltip."
|
|
3581
|
+
},
|
|
3582
|
+
{
|
|
3583
|
+
"name": "`variant`",
|
|
3584
|
+
"type": "\"default\" | \"destructive\"",
|
|
3585
|
+
"default": "`\"default\"`",
|
|
3586
|
+
"description": "The visual style variant of the tooltip."
|
|
3587
|
+
}
|
|
3588
|
+
],
|
|
3589
|
+
"examples": [
|
|
3590
|
+
{
|
|
3591
|
+
"language": "tsx",
|
|
3592
|
+
"meta": "lineNumbers",
|
|
3593
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n </TooltipTrigger>\n <TooltipContent>\n content\n </TooltipContent>\n </Tooltip>\n</TooltipProvider>"
|
|
3594
|
+
},
|
|
3595
|
+
{
|
|
3596
|
+
"language": "tsx",
|
|
3597
|
+
"meta": "lineNumbers",
|
|
3598
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button variant=\"secondary\">Top</Button>\n </TooltipTrigger>\n <TooltipContent side=\"top\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3599
|
+
},
|
|
3600
|
+
{
|
|
3601
|
+
"language": "tsx",
|
|
3602
|
+
"meta": "lineNumbers",
|
|
3603
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"destructive\"><IconAlertTriangle /></Button>\n </TooltipTrigger>\n <TooltipContent variant=\"destructive\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3604
|
+
},
|
|
3605
|
+
{
|
|
3606
|
+
"language": "tsx",
|
|
3607
|
+
"meta": "lineNumbers",
|
|
3608
|
+
"code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n <TooltipTrigger asChild>\n <Button variant=\"tertiary\">Delayed tooltip</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>This tooltip appears after 2 seconds</p>\n </TooltipContent>\n</Tooltip>"
|
|
3609
|
+
}
|
|
3610
|
+
]
|
|
3611
|
+
},
|
|
3612
|
+
{
|
|
3613
|
+
"name": "TooltipContent",
|
|
3614
|
+
"title": "Tooltip",
|
|
3615
|
+
"description": "A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
|
|
3616
|
+
"docsPath": "docs/content/docs/components/tooltip.mdx",
|
|
3617
|
+
"docSlug": "tooltip",
|
|
3618
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip",
|
|
3619
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference",
|
|
3620
|
+
"sourcePaths": [
|
|
3621
|
+
"src/components/tooltip/tooltip.tsx"
|
|
3622
|
+
],
|
|
3623
|
+
"props": [
|
|
3624
|
+
{
|
|
3625
|
+
"name": "`side`",
|
|
3626
|
+
"type": "\"top\" | \"right\" | \"bottom\" | \"left\"",
|
|
3627
|
+
"default": "\"top\"",
|
|
3628
|
+
"description": "The preferred side of the trigger to render against."
|
|
3629
|
+
},
|
|
3630
|
+
{
|
|
3631
|
+
"name": "`sideOffset`",
|
|
3632
|
+
"type": "number",
|
|
3633
|
+
"default": "`2`",
|
|
3634
|
+
"description": "The distance in pixels from the trigger."
|
|
3635
|
+
},
|
|
3636
|
+
{
|
|
3637
|
+
"name": "`align`",
|
|
3638
|
+
"type": "\"start\" | \"center\" | \"end\"",
|
|
3639
|
+
"default": "`\"center\"`",
|
|
3640
|
+
"description": "The preferred alignment against the trigger."
|
|
3641
|
+
},
|
|
3642
|
+
{
|
|
3643
|
+
"name": "`alignOffset`",
|
|
3644
|
+
"type": "number",
|
|
3645
|
+
"default": "`0`",
|
|
3646
|
+
"description": "An offset in pixels from the \"start\" or \"end\" alignment options."
|
|
3647
|
+
},
|
|
3648
|
+
{
|
|
3649
|
+
"name": "`className`",
|
|
3650
|
+
"type": "string",
|
|
3651
|
+
"default": "-",
|
|
3652
|
+
"description": "Additional CSS classes to apply to the tooltip content."
|
|
3653
|
+
},
|
|
3654
|
+
{
|
|
3655
|
+
"name": "`hideArrow`",
|
|
3656
|
+
"type": "boolean",
|
|
3657
|
+
"default": "-",
|
|
3658
|
+
"description": "Whether to hide the arrow indicator."
|
|
3659
|
+
}
|
|
3660
|
+
],
|
|
3661
|
+
"examples": [
|
|
3662
|
+
{
|
|
3663
|
+
"language": "tsx",
|
|
3664
|
+
"meta": "lineNumbers",
|
|
3665
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n </TooltipTrigger>\n <TooltipContent>\n content\n </TooltipContent>\n </Tooltip>\n</TooltipProvider>"
|
|
3666
|
+
},
|
|
3667
|
+
{
|
|
3668
|
+
"language": "tsx",
|
|
3669
|
+
"meta": "lineNumbers",
|
|
3670
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button variant=\"secondary\">Top</Button>\n </TooltipTrigger>\n <TooltipContent side=\"top\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3671
|
+
},
|
|
3672
|
+
{
|
|
3673
|
+
"language": "tsx",
|
|
3674
|
+
"meta": "lineNumbers",
|
|
3675
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"destructive\"><IconAlertTriangle /></Button>\n </TooltipTrigger>\n <TooltipContent variant=\"destructive\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3676
|
+
},
|
|
3677
|
+
{
|
|
3678
|
+
"language": "tsx",
|
|
3679
|
+
"meta": "lineNumbers",
|
|
3680
|
+
"code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n <TooltipTrigger asChild>\n <Button variant=\"tertiary\">Delayed tooltip</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>This tooltip appears after 2 seconds</p>\n </TooltipContent>\n</Tooltip>"
|
|
3681
|
+
}
|
|
3682
|
+
]
|
|
3683
|
+
},
|
|
3684
|
+
{
|
|
3685
|
+
"name": "TooltipProvider",
|
|
3686
|
+
"title": "Tooltip",
|
|
3687
|
+
"description": "A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
|
|
3688
|
+
"docsPath": "docs/content/docs/components/tooltip.mdx",
|
|
3689
|
+
"docSlug": "tooltip",
|
|
3690
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip",
|
|
3691
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference",
|
|
3692
|
+
"sourcePaths": [
|
|
3693
|
+
"src/components/tooltip/tooltip.tsx"
|
|
3694
|
+
],
|
|
3695
|
+
"props": [
|
|
3696
|
+
{
|
|
3697
|
+
"name": "`delayDuration`",
|
|
3698
|
+
"type": "number",
|
|
3699
|
+
"default": "`700`",
|
|
3700
|
+
"description": "The duration in milliseconds to wait before showing the tooltip."
|
|
3701
|
+
},
|
|
3702
|
+
{
|
|
3703
|
+
"name": "`skipDelayDuration`",
|
|
3704
|
+
"type": "number",
|
|
3705
|
+
"default": "`0`",
|
|
3706
|
+
"description": "The duration in milliseconds to wait before hiding the tooltip."
|
|
3707
|
+
}
|
|
3708
|
+
],
|
|
3709
|
+
"examples": [
|
|
3710
|
+
{
|
|
3711
|
+
"language": "tsx",
|
|
3712
|
+
"meta": "lineNumbers",
|
|
3713
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n </TooltipTrigger>\n <TooltipContent>\n content\n </TooltipContent>\n </Tooltip>\n</TooltipProvider>"
|
|
3714
|
+
},
|
|
3715
|
+
{
|
|
3716
|
+
"language": "tsx",
|
|
3717
|
+
"meta": "lineNumbers",
|
|
3718
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button variant=\"secondary\">Top</Button>\n </TooltipTrigger>\n <TooltipContent side=\"top\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3719
|
+
},
|
|
3720
|
+
{
|
|
3721
|
+
"language": "tsx",
|
|
3722
|
+
"meta": "lineNumbers",
|
|
3723
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"destructive\"><IconAlertTriangle /></Button>\n </TooltipTrigger>\n <TooltipContent variant=\"destructive\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3724
|
+
},
|
|
3725
|
+
{
|
|
3726
|
+
"language": "tsx",
|
|
3727
|
+
"meta": "lineNumbers",
|
|
3728
|
+
"code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n <TooltipTrigger asChild>\n <Button variant=\"tertiary\">Delayed tooltip</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>This tooltip appears after 2 seconds</p>\n </TooltipContent>\n</Tooltip>"
|
|
3729
|
+
}
|
|
3730
|
+
]
|
|
3731
|
+
},
|
|
3732
|
+
{
|
|
3733
|
+
"name": "TooltipTrigger",
|
|
3734
|
+
"title": "Tooltip",
|
|
3735
|
+
"description": "A tooltip that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
|
|
3736
|
+
"docsPath": "docs/content/docs/components/tooltip.mdx",
|
|
3737
|
+
"docSlug": "tooltip",
|
|
3738
|
+
"documentationUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip",
|
|
3739
|
+
"apiReferenceUrl": "https://www.radix-ui.com/docs/primitives/components/tooltip#api-reference",
|
|
3740
|
+
"sourcePaths": [
|
|
3741
|
+
"src/components/tooltip/tooltip.tsx"
|
|
3742
|
+
],
|
|
3743
|
+
"props": [
|
|
3744
|
+
{
|
|
3745
|
+
"name": "`asChild`",
|
|
3746
|
+
"type": "boolean",
|
|
3747
|
+
"default": "`false`",
|
|
3748
|
+
"description": "When true, merges props with the child element instead of rendering a button."
|
|
3749
|
+
}
|
|
3750
|
+
],
|
|
3751
|
+
"examples": [
|
|
3752
|
+
{
|
|
3753
|
+
"language": "tsx",
|
|
3754
|
+
"meta": "lineNumbers",
|
|
3755
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"tertiary\"><IconCopy /></Button>\n </TooltipTrigger>\n <TooltipContent>\n content\n </TooltipContent>\n </Tooltip>\n</TooltipProvider>"
|
|
3756
|
+
},
|
|
3757
|
+
{
|
|
3758
|
+
"language": "tsx",
|
|
3759
|
+
"meta": "lineNumbers",
|
|
3760
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button variant=\"secondary\">Top</Button>\n </TooltipTrigger>\n <TooltipContent side=\"top\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3761
|
+
},
|
|
3762
|
+
{
|
|
3763
|
+
"language": "tsx",
|
|
3764
|
+
"meta": "lineNumbers",
|
|
3765
|
+
"code": "import { Tooltip, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"destructive\"><IconAlertTriangle /></Button>\n </TooltipTrigger>\n <TooltipContent variant=\"destructive\">\n content\n </TooltipContent>\n</Tooltip>"
|
|
3766
|
+
},
|
|
3767
|
+
{
|
|
3768
|
+
"language": "tsx",
|
|
3769
|
+
"meta": "lineNumbers",
|
|
3770
|
+
"code": "import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent, Button } from \"@epilot/volt-ui\"\n\n<Tooltip delayDuration={2000}>\n <TooltipTrigger asChild>\n <Button variant=\"tertiary\">Delayed tooltip</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>This tooltip appears after 2 seconds</p>\n </TooltipContent>\n</Tooltip>"
|
|
3771
|
+
}
|
|
3772
|
+
]
|
|
3773
|
+
}
|
|
3774
|
+
],
|
|
3775
|
+
"blocks": [
|
|
3776
|
+
{
|
|
3777
|
+
"name": "card-example",
|
|
3778
|
+
"title": "Card Example",
|
|
3779
|
+
"sourcePath": "docs/examples/card-example.tsx",
|
|
3780
|
+
"code": "import { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, Button, Text } from \"@epilot/volt-ui\"\nimport { IconDotsVertical } from \"@tabler/icons-react\"\n\nexport const CardExample = () => {\n return (<Card className=\"max-w-lg\">\n <CardHeader>\n <CardTitle>Project status</CardTitle>\n <CardDescription>Latest deployment and uptime.</CardDescription>\n <CardAction>\n <Button variant=\"tertiary\" size=\"icon-sm\"><IconDotsVertical /></Button>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Text variant=\"body2\">All systems operational. Next maintenance window scheduled for Sunday 02:00 UTC.</Text>\n </CardContent>\n <CardFooter>\n <Text variant=\"helper1\">Updated 2h ago</Text>\n </CardFooter>\n </Card>)\n}"
|
|
3781
|
+
},
|
|
3782
|
+
{
|
|
3783
|
+
"name": "field-actions",
|
|
3784
|
+
"title": "Field Actions",
|
|
3785
|
+
"sourcePath": "docs/examples/field-actions.tsx",
|
|
3786
|
+
"code": "\"use client\"\n\nimport { FieldLabelContent, Button, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from \"@epilot/volt-ui\"\nimport { IconCopy, IconBraces, IconCheck } from \"@tabler/icons-react\"\nimport { useCallback, useEffect, useRef, useState } from \"react\"\n\ntype ActionId = \"copy\" | \"variable\"\n\ntype ActionConfig = {\n id: ActionId\n icon: React.ReactNode\n label: string\n copiedLabel?: string\n}\n\nconst ACTIONS: ActionConfig[] = [\n { id: \"copy\", icon: <IconCopy />, label: \"Copy value\", copiedLabel: \"Copied\" },\n { id: \"variable\", icon: <IconBraces />, label: \"Copy variable\", copiedLabel: \"Copied\" },\n]\n\nconst COPIED_TIMEOUT_MS = 1000\n\nconst FieldActions = () => {\n const [activeTooltip, setActiveTooltip] = useState<ActionId | null>(null)\n const [copiedAction, setCopiedAction] = useState<ActionId | null>(null)\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n const clearTimer = useCallback(() => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n timeoutRef.current = null\n }\n }, [])\n\n useEffect(() => clearTimer, [clearTimer])\n\n const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n }\n\n const handleActionClick = (actionId: ActionId) => (event: React.PointerEvent<HTMLButtonElement>) => {\n event.preventDefault()\n event.stopPropagation()\n \n clearTimer()\n setCopiedAction(actionId)\n setActiveTooltip(actionId)\n\n timeoutRef.current = setTimeout(() => {\n setCopiedAction(null)\n setActiveTooltip(null)\n }, COPIED_TIMEOUT_MS)\n }\n\n const handleOpenChange = (actionId: ActionId) => (open: boolean) => {\n if (open) {\n clearTimer()\n setCopiedAction(null)\n setActiveTooltip(actionId)\n } else if (copiedAction !== actionId) {\n setActiveTooltip((prev) => (prev === actionId ? null : prev))\n }\n }\n\n const isOpen = useCallback((actionId: ActionId) => activeTooltip === actionId, [activeTooltip])\n const getLabel = (action: ActionConfig) => \n copiedAction === action.id ? (action.copiedLabel ?? \"Copied\") : action.label\n\n return (\n <FieldLabelContent>\n <TooltipProvider delayDuration={500} skipDelayDuration={500}>\n {ACTIONS.map((action) => (\n <Tooltip\n key={action.id}\n open={isOpen(action.id)}\n onOpenChange={handleOpenChange(action.id)}\n >\n <TooltipTrigger asChild>\n <Button\n tabIndex={-1}\n onMouseDown={handleMouseDown}\n onPointerDown={handleActionClick(action.id)}\n variant=\"tertiary\"\n size=\"icon-xs\"\n >\n {copiedAction === action.id ? <IconCheck /> : action.icon}\n </Button>\n </TooltipTrigger>\n <TooltipContent>{getLabel(action)}</TooltipContent>\n </Tooltip>\n ))}\n </TooltipProvider>\n </FieldLabelContent>\n )\n}\n\nexport default FieldActions"
|
|
3787
|
+
},
|
|
3788
|
+
{
|
|
3789
|
+
"name": "field-combobox",
|
|
3790
|
+
"title": "Field Combobox",
|
|
3791
|
+
"sourcePath": "docs/examples/field-combobox.tsx",
|
|
3792
|
+
"code": "'use client'\n\nimport {\n Field,\n FieldLabel,\n FieldCombobox,\n FieldComboboxGroup,\n FieldComboboxGroupLabel,\n FieldComboboxValue,\n FieldComboboxTrigger,\n FieldComboboxContent,\n FieldComboboxItem,\n FieldComboboxItemCheckIcon,\n FieldComboboxEmpty,\n FieldComboboxSeparator,\n FieldComboboxInput,\n FieldComboboxList,\n FieldComboboxLoading,\n FieldComboboxPlaceholder,\n FieldComboboxClear,\n Spinner\n} from \"@epilot/volt-ui\"\nimport { useEffect, useState } from \"react\";\n\nconst countries1 = [\n { value: \"in\", label: \"India\" },\n { value: \"jp\", label: \"Japan\" },\n { value: \"sg\", label: \"Singapore\" },\n { value: \"mal\", label: \"Malaysia\" },\n { value: \"th\", label: \"Thailand\" },\n { value: \"ph\", label: \"Philippines\" },\n { value: \"hk\", label: \"Hong Kong\" },\n];\n\nconst countries2 = [\n { value: \"de\", label: \"Germany\" },\n { value: \"fr\", label: \"France\" },\n { value: \"se\", label: \"Sweden\" },\n];\n\nconst FieldComboboxExample = () => {\n const [value, setValue] = useState<{ label: string | undefined, value: string | undefined }>({\n label: undefined,\n value: undefined,\n })\n \n const [open, setOpen] = useState(false)\n const [loading, setLoading] = useState(false)\n\n useEffect(() => {\n setLoading(true)\n setTimeout(() => {\n setLoading(false)\n }, 1000)\n }, [])\n\n const handleSelect = (value: { label: unknown, value: unknown }) => {\n setValue(value as { label: string | undefined, value: string | undefined })\n setOpen(false)\n }\n\n\n const handleClear = () => {\n setValue({ label: undefined, value: undefined })\n }\n\n return (<div className=\"w-96 flex flex-col gap-2\"><Field>\n <FieldLabel>Country</FieldLabel>\n <FieldCombobox open={open} onOpenChange={setOpen}>\n <FieldComboboxTrigger>\n <FieldComboboxValue>\n {value?.label ?? <FieldComboboxPlaceholder>Select a country</FieldComboboxPlaceholder>}\n </FieldComboboxValue>\n {value?.label && <FieldComboboxClear onClick={handleClear} />} \n </FieldComboboxTrigger>\n <FieldComboboxContent className=\"max-h-56\">\n <FieldComboboxInput placeholder=\"Search countries\" />\n {loading ? <FieldComboboxLoading className=\"flex justify-center items-center my-2\"><Spinner /></FieldComboboxLoading> : (\n <FieldComboboxList>\n <FieldComboboxEmpty>No countries found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>Asia</FieldComboboxGroupLabel>\n {countries1.map((item) => (\n <FieldComboboxItem data-checked={value?.value === item.value} key={item.value} value={item.value} onSelect={() => handleSelect(item)}>\n {item.label}\n {value?.value === item.value && <FieldComboboxItemCheckIcon />}\n </FieldComboboxItem>\n ))}\n </FieldComboboxGroup>\n <FieldComboboxSeparator />\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>Europe</FieldComboboxGroupLabel>\n {countries2.map((item) => (\n <FieldComboboxItem data-checked={value?.value === item.value} key={item.value} value={item.value} onSelect={() => {\n handleSelect(item)\n }}>\n {item.label}\n {value?.value === item.value && <FieldComboboxItemCheckIcon />}\n </FieldComboboxItem>\n ))}\n </FieldComboboxGroup>\n </FieldComboboxList>\n )}\n </FieldComboboxContent>\n </FieldCombobox>\n </Field></div>)\n}\n\nexport { FieldComboboxExample }"
|
|
3793
|
+
},
|
|
3794
|
+
{
|
|
3795
|
+
"name": "field-combobox-multi-select",
|
|
3796
|
+
"title": "Field Combobox Multi Select",
|
|
3797
|
+
"sourcePath": "docs/examples/field-combobox-multi-select.tsx",
|
|
3798
|
+
"code": "'use client'\n\nimport {\n Field,\n FieldLabel,\n FieldCombobox,\n FieldComboboxGroup,\n FieldComboboxGroupLabel,\n FieldComboboxValue,\n FieldComboboxTrigger,\n FieldComboboxContent,\n FieldComboboxItem,\n FieldComboboxItemCheckIcon,\n FieldComboboxEmpty,\n FieldComboboxSeparator,\n FieldComboboxInput,\n FieldComboboxList,\n FieldComboboxLoading,\n FieldComboboxPlaceholder,\n Badge,\n FieldComboboxClear,\n FieldComboboxClearValue\n} from \"@epilot/volt-ui\"\nimport { useEffect, useState } from \"react\";\n\nconst countries1 = [\n { value: \"in\", label: \"India\" },\n { value: \"jp\", label: \"Japan\" },\n { value: \"sg\", label: \"Singapore\" },\n];\n\nconst countries2 = [\n { value: \"de\", label: \"Germany\" },\n { value: \"fr\", label: \"France\" },\n { value: \"se\", label: \"Sweden\" },\n];\n\nconst FieldComboboxMultiSelectExample = () => {\n const [value, setValue] = useState<{ label: string | undefined, value: string | undefined }[]>([{\n label: \"India\",\n value: \"in\",\n }, {\n label: \"Japan\",\n value: \"jp\",\n }, {\n label: \"Singapore\",\n value: \"sg\",\n }])\n \n const [open, setOpen] = useState(false)\n const [loading, setLoading] = useState(false)\n\n useEffect(() => {\n setLoading(true)\n setTimeout(() => {\n setLoading(false)\n }, 1000)\n }, [])\n\n const handleSelect = (newValue: { label: string | undefined, value: string | undefined }) => {\n if (value.some((v) => v.value === newValue.value)) {\n setValue(value.filter((v) => v.value !== newValue.value))\n } else { \n setValue([...value, newValue])\n setOpen(false)\n }\n }\n\n const handleClearAll = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n event.preventDefault()\n event.stopPropagation()\n setValue([])\n }\n\n const handleClear = (item: {\n label: string | undefined,\n value: string | undefined\n }) => {\n setValue(value.filter((v) => v.value !== item.value))\n }\n\n return (<div className=\"w-96 flex flex-col gap-2\"><Field>\n <FieldLabel>Country</FieldLabel>\n <FieldCombobox open={open} onOpenChange={setOpen}>\n <FieldComboboxTrigger>\n {value.length > 0 ? <FieldComboboxValue>\n {value.map((item) => (\n <Badge color=\"blue\" style=\"surface\" key={item.value}>\n {item.label} \n <FieldComboboxClearValue onClick={() => handleClear(item)} />\n </Badge>\n ))}\n </FieldComboboxValue> : <FieldComboboxPlaceholder>Select a country</FieldComboboxPlaceholder>}\n {value.length > 0 && <FieldComboboxClear onClick={handleClearAll} />}\n </FieldComboboxTrigger>\n <FieldComboboxContent>\n <FieldComboboxInput placeholder=\"Search countries\" />\n {loading ? <FieldComboboxLoading className=\"text-center\">Loading…</FieldComboboxLoading> : (\n <FieldComboboxList>\n <FieldComboboxEmpty>No countries found</FieldComboboxEmpty>\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>Asia</FieldComboboxGroupLabel>\n {countries1.map((item) => {\n const isSelected = value.some((v) => v.value === item.value)\n return (\n <FieldComboboxItem data-checked={isSelected} key={item.value} value={item.value} onSelect={() => handleSelect(item)}>\n {item.label}\n {isSelected && <FieldComboboxItemCheckIcon />}\n </FieldComboboxItem>\n )})}\n </FieldComboboxGroup>\n <FieldComboboxSeparator />\n <FieldComboboxGroup>\n <FieldComboboxGroupLabel>Europe</FieldComboboxGroupLabel>\n {countries2.map((item) => {\n const isSelected = value.some((v) => v.value === item.value)\n return (\n <FieldComboboxItem data-checked={isSelected} key={item.value} value={item.value} onSelect={() => {\n handleSelect(item)\n }}>\n {item.label}\n {isSelected && <FieldComboboxItemCheckIcon />}\n </FieldComboboxItem>\n )})}\n </FieldComboboxGroup>\n </FieldComboboxList>\n )}\n </FieldComboboxContent>\n </FieldCombobox>\n </Field></div>)\n}\n\nexport { FieldComboboxMultiSelectExample }"
|
|
3799
|
+
},
|
|
3800
|
+
{
|
|
3801
|
+
"name": "field-select-example",
|
|
3802
|
+
"title": "Field Select Example",
|
|
3803
|
+
"sourcePath": "docs/examples/field-select-example.tsx",
|
|
3804
|
+
"code": "'use client'\n\nimport {\n Field,\n FieldLabel,\n Select,\n SelectContent,\n SelectItem,\n SelectGroup,\n SelectLabel,\n SelectTrigger,\n SelectTriggerClear,\n SelectValue\n} from \"@epilot/volt-ui\"\nimport { useState } from \"react\"\n\nexport const FieldSelectExample = () => {\n const [value, setValue] = useState<string>(\"\")\n\n const handleClear = () => {\n setValue(\"\")\n }\n\n return (\n <div className=\"w-96 flex flex-col gap-2\">\n <Field>\n <FieldLabel>Theme</FieldLabel>\n <Select value={value} onValueChange={setValue}>\n <SelectTrigger>\n <SelectValue placeholder=\"Select a theme\" />\n {value !== \"\" && <SelectTriggerClear onClick={handleClear} />}\n </SelectTrigger>\n <SelectContent>\n <SelectGroup>\n <SelectLabel>Themes</SelectLabel>\n <SelectItem value=\"system\">System</SelectItem>\n <SelectItem value=\"light\">Light</SelectItem>\n <SelectItem value=\"dark\">Dark</SelectItem>\n </SelectGroup>\n </SelectContent>\n </Select>\n </Field>\n </div>\n )\n}"
|
|
3805
|
+
},
|
|
3806
|
+
{
|
|
3807
|
+
"name": "tabs-example",
|
|
3808
|
+
"title": "Tabs Example",
|
|
3809
|
+
"sourcePath": "docs/examples/tabs-example.tsx",
|
|
3810
|
+
"code": "\"use client\"\n\nimport { Tabs, TabsList, TabsTrigger, TabsContent, Badge, Text } from \"@epilot/volt-ui\"\nimport { useState } from \"react\";\nimport { IconUser, IconLock, IconSettings } from \"@tabler/icons-react\";\n\nexport const TabsBasic = () => {\n const [activeTab, setActiveTab] = useState(\"account\")\n const [activeTabHighlight, setActiveTabHighlight] = useState(\"account\")\n return (\n <div className=\"flex flex-col gap-4 w-full max-w-lg\">\n <Tabs value={activeTab} onValueChange={setActiveTab}>\n <TabsList>\n <TabsTrigger value=\"account\">\n <IconUser size={16} />\n Account\n <Badge size=\"sm\" color=\"gray\" style=\"soft\">1</Badge>\n </TabsTrigger>\n <TabsTrigger value=\"password\">\n <IconLock size={16} />\n Password\n </TabsTrigger>\n <TabsTrigger value=\"settings\">\n <IconSettings size={16} />\n Settings\n </TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\">\n <div className=\"flex flex-col gap-1 rounded-lg border p-4\">\n <Text variant='heading3'>Account Settings</Text>\n <Text variant='body2'>\n Make changes to your account here. Click save when you're done.\n </Text>\n </div>\n </TabsContent>\n <TabsContent value=\"password\">\n <div className=\"flex flex-col gap-1 rounded-lg border p-4\">\n <Text variant='heading3'>Password Settings</Text>\n <Text variant='body2'>\n Change your password here. After saving, you'll be logged out.\n </Text>\n </div>\n </TabsContent>\n <TabsContent value=\"settings\">\n <div className=\"flex flex-col gap-1 rounded-lg border p-4\">\n <Text variant='heading3'>General Settings</Text>\n <Text variant='body2'>\n Configure your general preferences and application settings.\n </Text>\n </div>\n </TabsContent>\n </Tabs>\n\n <Tabs variant=\"highlight\" value={activeTabHighlight} onValueChange={setActiveTabHighlight}>\n <TabsList>\n <TabsTrigger value=\"account\">\n <IconUser size={16} />\n Account\n <Badge size=\"sm\" style=\"soft\">1</Badge>\n </TabsTrigger>\n <TabsTrigger value=\"password\">\n <IconLock size={16} />\n Password\n </TabsTrigger>\n <TabsTrigger value=\"settings\">\n <IconSettings size={16} />\n Settings\n </TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\">\n <div className=\"flex flex-col gap-1 rounded-lg border p-4\">\n <Text variant='heading3'>Account Settings</Text>\n <Text variant='body2'>\n Make changes to your account here. Click save when you're done.\n </Text>\n </div>\n </TabsContent>\n <TabsContent value=\"password\">\n <div className=\"flex flex-col gap-1 rounded-lg border p-4\">\n <Text variant='heading3'>Password Settings</Text>\n <Text variant='body2'>\n Change your password here. After saving, you'll be logged out.\n </Text>\n </div>\n </TabsContent>\n <TabsContent value=\"settings\">\n <div className=\"flex flex-col gap-1 rounded-lg border p-4\">\n <Text variant='heading3'>General Settings</Text>\n <Text variant='body2'>\n Configure your general preferences and application settings.\n </Text>\n </div>\n </TabsContent>\n </Tabs>\n </div>\n );\n}\n\nexport const TabsOrientation = () => {\n const [activeTab, setActiveTab] = useState(\"account\")\n return (\n <Tabs size=\"sm\" orientation=\"vertical\" value={activeTab} onValueChange={setActiveTab} className=\"w-full max-w-lg\">\n <TabsList>\n <TabsTrigger value=\"account\">\n <IconUser size={16} />\n Account\n <Badge size=\"sm\" style=\"soft\">10</Badge>\n </TabsTrigger>\n <TabsTrigger value=\"password\">\n <IconLock size={16} />\n Password\n </TabsTrigger>\n <TabsTrigger value=\"settings\">\n <IconSettings size={16} />\n Settings\n </TabsTrigger>\n </TabsList>\n <TabsContent value=\"account\">\n <div className=\"flex flex-col gap-1 rounded-lg p-4 border\">\n <Text variant='heading3'>Account Settings</Text>\n <Text variant='body2'>\n Make changes to your account here. Click save when you're done.\n </Text>\n </div>\n </TabsContent>\n <TabsContent value=\"password\">\n <div className=\"flex flex-col gap-1 rounded-lg p-4 border\">\n <Text variant='heading3'>Password Settings</Text>\n <Text variant='body2'>\n Change your password here. After saving, you'll be logged out.\n </Text>\n </div>\n </TabsContent>\n <TabsContent value=\"settings\">\n <div className=\"flex flex-col gap-1 rounded-lg p-4 border\">\n <Text variant='heading3'>General Settings</Text>\n <Text variant='body2'>\n Configure your general preferences and application settings.\n </Text>\n </div>\n </TabsContent>\n </Tabs>\n );\n}"
|
|
3811
|
+
},
|
|
3812
|
+
{
|
|
3813
|
+
"name": "toast-example",
|
|
3814
|
+
"title": "Toast Example",
|
|
3815
|
+
"sourcePath": "docs/examples/toast-example.tsx",
|
|
3816
|
+
"code": "\"use client\"\n\nimport { Button, Toaster, toast } from \"@epilot/volt-ui\"\n\nexport const ToastTypes = () => (\n <div className=\"flex flex-wrap items-center justify-center gap-4\">\n <Toaster />\n <Button onClick={() => toast(\"New message\", {\n description: \"Do not forget to reply to the message.\",\n })}>\n Default\n </Button>\n <Button onClick={() => toast.success(\"Successfully saved!\", {\n description: \"Your profile has been updated successfully.\",\n })}>\n Success\n </Button>\n <Button onClick={() => toast.info(\"Did you know?\")}>\n Info\n </Button>\n <Button variant='destructive' onClick={() => toast.warning(\"Please review your changes\")}>\n Warning\n </Button>\n <Button variant='destructive' onClick={() => toast.error(\"Something went wrong\")}>\n Error\n </Button>\n </div>\n)\n\nexport const ToastWithDescription = () => (\n <div className=\"flex items-center justify-center gap-4\">\n <Button\n onClick={() =>\n toast.success(\"Changes saved\", {\n description: \"Your profile has been updated successfully.\",\n })\n }\n >\n With description\n </Button>\n </div>\n)\n\nexport const ToastWithAction = () => (\n <div className=\"flex items-center justify-center gap-4\">\n <Button\n onClick={() =>\n toast(\"Event created\", {\n description: \"The event has been created successfully.\",\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo\"),\n },\n })\n }\n >\n Default\n </Button>\n\n <Button\n onClick={() =>\n toast.success(\"Event created\", {\n description: \"The event has been created successfully.\",\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo\"),\n },\n })\n }\n >\n Success\n </Button>\n\n <Button\n onClick={() =>\n toast.info(\"Event created\", {\n description: \"The event has been created successfully.\",\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo\"),\n },\n })\n }\n >\n Info\n </Button>\n\n <Button\n variant='destructive'\n onClick={() =>\n toast.warning(\"Event created\", {\n description: \"The event has been created successfully.\",\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo\"),\n },\n })\n }\n >\n Warning\n </Button>\n\n <Button\n variant='destructive'\n onClick={() =>\n toast.error(\"Event created\", {\n description: \"The event has been created successfully.\",\n action: {\n label: \"Undo\",\n onClick: () => console.log(\"Undo\"),\n },\n })\n }\n >\n Error\n </Button>\n\n </div>\n)\n\nexport const ToastPromise = () => (\n <div className=\"flex items-center justify-center gap-4\">\n <Button\n onClick={() => {\n const promise = new Promise((resolve) => setTimeout(resolve, 2000))\n toast.promise(promise, {\n loading: \"Loading...\",\n success: \"Data loaded successfully!\",\n error: \"Failed to load data\",\n })\n }}\n >\n Success\n </Button>\n\n <Button\n variant='destructive'\n onClick={() => {\n const promise = new Promise((_resolve, reject) => setTimeout(reject, 2000))\n toast.promise(promise, {\n loading: \"Loading...\",\n success: \"Data loaded successfully!\",\n error: \"Failed to load data\",\n })\n }}\n >\n Error\n </Button>\n </div>\n)"
|
|
3817
|
+
}
|
|
3818
|
+
]
|
|
3819
|
+
}
|