@ngrok/mantle 0.27.2 → 0.27.4

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.
Files changed (33) hide show
  1. package/dist/alert-dialog.js +1 -1
  2. package/dist/badge.js +1 -1
  3. package/dist/badge.js.map +1 -1
  4. package/dist/chunk-EG5SROPQ.js +2 -0
  5. package/dist/chunk-EG5SROPQ.js.map +1 -0
  6. package/dist/chunk-PLUW72NW.js +2 -0
  7. package/dist/chunk-PLUW72NW.js.map +1 -0
  8. package/dist/{chunk-DDMTW6XB.js → chunk-UBD43AUE.js} +2 -2
  9. package/dist/{chunk-DOTYPWKO.js → chunk-XN5RN6JW.js} +4 -4
  10. package/dist/chunk-XN5RN6JW.js.map +1 -0
  11. package/dist/data-table.d.ts +4 -4
  12. package/dist/data-table.js +1 -1
  13. package/dist/data-table.js.map +1 -1
  14. package/dist/dialog.js +1 -1
  15. package/dist/icons.js +1 -1
  16. package/dist/radio-group.js +1 -1
  17. package/dist/radio-group.js.map +1 -1
  18. package/dist/sheet.js +1 -1
  19. package/dist/table.d.ts +268 -209
  20. package/dist/table.js +1 -1
  21. package/dist/tailwind-preset.cjs +1 -1
  22. package/dist/tailwind-preset.cjs.map +1 -1
  23. package/dist/tailwind-preset.js +1 -1
  24. package/dist/tailwind-preset.js.map +1 -1
  25. package/dist/theme-provider.js +1 -1
  26. package/dist/toast.js +1 -1
  27. package/package.json +20 -21
  28. package/dist/chunk-DD3VIOV5.js +0 -2
  29. package/dist/chunk-DD3VIOV5.js.map +0 -1
  30. package/dist/chunk-DOTYPWKO.js.map +0 -1
  31. package/dist/chunk-FHW7SSNY.js +0 -2
  32. package/dist/chunk-FHW7SSNY.js.map +0 -1
  33. /package/dist/{chunk-DDMTW6XB.js.map → chunk-UBD43AUE.js.map} +0 -0
package/dist/table.d.ts CHANGED
@@ -1,5 +1,48 @@
1
1
  import * as react from 'react';
2
2
 
3
+ /**
4
+ * The `<TableRoot>` is the root container element for all `<Table>`s.
5
+ * It provides styling and additional functionality, such as horizontal overflow
6
+ * detection.
7
+ *
8
+ * Must be used as the parent of a `<Table>`.
9
+ *
10
+ * @example
11
+ * ```tsx
12
+ * <TableRoot>
13
+ * <Table>
14
+ * <TableCaption>A list of your recent invoices.</TableCaption>
15
+ * <TableHead>
16
+ * <TableRow>
17
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
18
+ * <TableHeader>Status</TableHeader>
19
+ * <TableHeader>Method</TableHeader>
20
+ * <TableHeader className="text-right">Amount</TableHeader>
21
+ * </TableRow>
22
+ * </TableHead>
23
+ * <TableBody>
24
+ * {invoices.map((invoice) => (
25
+ * <TableRow key={invoice.invoice}>
26
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
27
+ * <TableCell>{invoice.paymentStatus}</TableCell>
28
+ * <TableCell>{invoice.paymentMethod}</TableCell>
29
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
30
+ * </TableRow>
31
+ * ))}
32
+ * </TableBody>
33
+ * <TableFoot>
34
+ * <TableRow>
35
+ * <TableCell colSpan={3}>Total</TableCell>
36
+ * <TableCell className="text-right">$2,500.00</TableCell>
37
+ * </TableRow>
38
+ * </TableFoot>
39
+ * </Table>
40
+ * </TableRoot>
41
+ * ```
42
+ *
43
+ * @see https://mantle.ngrok.com/components/table#api-table-root
44
+ */
45
+ declare const TableRoot: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
3
46
  /**
4
47
  * The `<Table>` is a structured way to display data in rows and columns. The API
5
48
  * matches the HTML `<table>` element 1:1.
@@ -32,33 +75,35 @@ import * as react from 'react';
32
75
  *
33
76
  * @example
34
77
  * ```tsx
35
- * <Table>
36
- * <TableCaption>A list of your recent invoices.</TableCaption>
37
- * <TableHead>
38
- * <TableRow>
39
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
40
- * <TableHeader>Status</TableHeader>
41
- * <TableHeader>Method</TableHeader>
42
- * <TableHeader className="text-right">Amount</TableHeader>
43
- * </TableRow>
44
- * </TableHead>
45
- * <TableBody>
46
- * {invoices.map((invoice) => (
47
- * <TableRow key={invoice.invoice}>
48
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
49
- * <TableCell>{invoice.paymentStatus}</TableCell>
50
- * <TableCell>{invoice.paymentMethod}</TableCell>
51
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
78
+ * <TableRoot>
79
+ * <Table>
80
+ * <TableCaption>A list of your recent invoices.</TableCaption>
81
+ * <TableHead>
82
+ * <TableRow>
83
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
84
+ * <TableHeader>Status</TableHeader>
85
+ * <TableHeader>Method</TableHeader>
86
+ * <TableHeader className="text-right">Amount</TableHeader>
87
+ * </TableRow>
88
+ * </TableHead>
89
+ * <TableBody>
90
+ * {invoices.map((invoice) => (
91
+ * <TableRow key={invoice.invoice}>
92
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
93
+ * <TableCell>{invoice.paymentStatus}</TableCell>
94
+ * <TableCell>{invoice.paymentMethod}</TableCell>
95
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
96
+ * </TableRow>
97
+ * ))}
98
+ * </TableBody>
99
+ * <TableFoot>
100
+ * <TableRow>
101
+ * <TableCell colSpan={3}>Total</TableCell>
102
+ * <TableCell className="text-right">$2,500.00</TableCell>
52
103
  * </TableRow>
53
- * ))}
54
- * </TableBody>
55
- * <TableFoot>
56
- * <TableRow>
57
- * <TableCell colSpan={3}>Total</TableCell>
58
- * <TableCell className="text-right">$2,500.00</TableCell>
59
- * </TableRow>
60
- * </TableFoot>
61
- * </Table>
104
+ * </TableFoot>
105
+ * </Table>
106
+ * </TableRoot>
62
107
  * ```
63
108
  *
64
109
  * @see https://mantle.ngrok.com/components/table#api-table
@@ -78,33 +123,35 @@ declare const Table: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
78
123
  *
79
124
  * @example
80
125
  * ```tsx
81
- * <Table>
82
- * <TableCaption>A list of your recent invoices.</TableCaption>
83
- * <TableHead>
84
- * <TableRow>
85
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
86
- * <TableHeader>Status</TableHeader>
87
- * <TableHeader>Method</TableHeader>
88
- * <TableHeader className="text-right">Amount</TableHeader>
89
- * </TableRow>
90
- * </TableHead>
91
- * <TableBody>
92
- * {invoices.map((invoice) => (
93
- * <TableRow key={invoice.invoice}>
94
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
95
- * <TableCell>{invoice.paymentStatus}</TableCell>
96
- * <TableCell>{invoice.paymentMethod}</TableCell>
97
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
126
+ * <TableRoot>
127
+ * <Table>
128
+ * <TableCaption>A list of your recent invoices.</TableCaption>
129
+ * <TableHead>
130
+ * <TableRow>
131
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
132
+ * <TableHeader>Status</TableHeader>
133
+ * <TableHeader>Method</TableHeader>
134
+ * <TableHeader className="text-right">Amount</TableHeader>
135
+ * </TableRow>
136
+ * </TableHead>
137
+ * <TableBody>
138
+ * {invoices.map((invoice) => (
139
+ * <TableRow key={invoice.invoice}>
140
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
141
+ * <TableCell>{invoice.paymentStatus}</TableCell>
142
+ * <TableCell>{invoice.paymentMethod}</TableCell>
143
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
144
+ * </TableRow>
145
+ * ))}
146
+ * </TableBody>
147
+ * <TableFoot>
148
+ * <TableRow>
149
+ * <TableCell colSpan={3}>Total</TableCell>
150
+ * <TableCell className="text-right">$2,500.00</TableCell>
98
151
  * </TableRow>
99
- * ))}
100
- * </TableBody>
101
- * <TableFoot>
102
- * <TableRow>
103
- * <TableCell colSpan={3}>Total</TableCell>
104
- * <TableCell className="text-right">$2,500.00</TableCell>
105
- * </TableRow>
106
- * </TableFoot>
107
- * </Table>
152
+ * </TableFoot>
153
+ * </Table>
154
+ * </TableRoot>
108
155
  * ```
109
156
  *
110
157
  * @see https://mantle.ngrok.com/components/table#api-table-header
@@ -122,33 +169,35 @@ declare const TableHead: react.ForwardRefExoticComponent<Omit<react.DetailedHTML
122
169
  *
123
170
  * @example
124
171
  * ```tsx
125
- * <Table>
126
- * <TableCaption>A list of your recent invoices.</TableCaption>
127
- * <TableHead>
128
- * <TableRow>
129
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
130
- * <TableHeader>Status</TableHeader>
131
- * <TableHeader>Method</TableHeader>
132
- * <TableHeader className="text-right">Amount</TableHeader>
133
- * </TableRow>
134
- * </TableHead>
135
- * <TableBody>
136
- * {invoices.map((invoice) => (
137
- * <TableRow key={invoice.invoice}>
138
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
139
- * <TableCell>{invoice.paymentStatus}</TableCell>
140
- * <TableCell>{invoice.paymentMethod}</TableCell>
141
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
172
+ * <TableRoot>
173
+ * <Table>
174
+ * <TableCaption>A list of your recent invoices.</TableCaption>
175
+ * <TableHead>
176
+ * <TableRow>
177
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
178
+ * <TableHeader>Status</TableHeader>
179
+ * <TableHeader>Method</TableHeader>
180
+ * <TableHeader className="text-right">Amount</TableHeader>
142
181
  * </TableRow>
143
- * ))}
144
- * </TableBody>
145
- * <TableFoot>
146
- * <TableRow>
147
- * <TableCell colSpan={3}>Total</TableCell>
148
- * <TableCell className="text-right">$2,500.00</TableCell>
149
- * </TableRow>
150
- * </TableFoot>
151
- * </Table>
182
+ * </TableHead>
183
+ * <TableBody>
184
+ * {invoices.map((invoice) => (
185
+ * <TableRow key={invoice.invoice}>
186
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
187
+ * <TableCell>{invoice.paymentStatus}</TableCell>
188
+ * <TableCell>{invoice.paymentMethod}</TableCell>
189
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
190
+ * </TableRow>
191
+ * ))}
192
+ * </TableBody>
193
+ * <TableFoot>
194
+ * <TableRow>
195
+ * <TableCell colSpan={3}>Total</TableCell>
196
+ * <TableCell className="text-right">$2,500.00</TableCell>
197
+ * </TableRow>
198
+ * </TableFoot>
199
+ * </Table>
200
+ * </TableRoot>
152
201
  * ```
153
202
  *
154
203
  * @see https://mantle.ngrok.com/components/table#api-table-body
@@ -168,33 +217,35 @@ declare const TableBody: react.ForwardRefExoticComponent<Omit<react.DetailedHTML
168
217
  *
169
218
  * @example
170
219
  * ```tsx
171
- * <Table>
172
- * <TableCaption>A list of your recent invoices.</TableCaption>
173
- * <TableHead>
174
- * <TableRow>
175
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
176
- * <TableHeader>Status</TableHeader>
177
- * <TableHeader>Method</TableHeader>
178
- * <TableHeader className="text-right">Amount</TableHeader>
179
- * </TableRow>
180
- * </TableHead>
181
- * <TableBody>
182
- * {invoices.map((invoice) => (
183
- * <TableRow key={invoice.invoice}>
184
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
185
- * <TableCell>{invoice.paymentStatus}</TableCell>
186
- * <TableCell>{invoice.paymentMethod}</TableCell>
187
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
220
+ * <TableRoot>
221
+ * <Table>
222
+ * <TableCaption>A list of your recent invoices.</TableCaption>
223
+ * <TableHead>
224
+ * <TableRow>
225
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
226
+ * <TableHeader>Status</TableHeader>
227
+ * <TableHeader>Method</TableHeader>
228
+ * <TableHeader className="text-right">Amount</TableHeader>
229
+ * </TableRow>
230
+ * </TableHead>
231
+ * <TableBody>
232
+ * {invoices.map((invoice) => (
233
+ * <TableRow key={invoice.invoice}>
234
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
235
+ * <TableCell>{invoice.paymentStatus}</TableCell>
236
+ * <TableCell>{invoice.paymentMethod}</TableCell>
237
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
238
+ * </TableRow>
239
+ * ))}
240
+ * </TableBody>
241
+ * <TableFoot>
242
+ * <TableRow>
243
+ * <TableCell colSpan={3}>Total</TableCell>
244
+ * <TableCell className="text-right">$2,500.00</TableCell>
188
245
  * </TableRow>
189
- * ))}
190
- * </TableBody>
191
- * <TableFoot>
192
- * <TableRow>
193
- * <TableCell colSpan={3}>Total</TableCell>
194
- * <TableCell className="text-right">$2,500.00</TableCell>
195
- * </TableRow>
196
- * </TableFoot>
197
- * </Table>
246
+ * </TableFoot>
247
+ * </Table>
248
+ * </TableRoot>
198
249
  * ```
199
250
  *
200
251
  * @see https://mantle.ngrok.com/components/table#api-table-foot
@@ -211,33 +262,35 @@ declare const TableFoot: react.ForwardRefExoticComponent<Omit<react.DetailedHTML
211
262
  *
212
263
  * @example
213
264
  * ```tsx
214
- * <Table>
215
- * <TableCaption>A list of your recent invoices.</TableCaption>
216
- * <TableHead>
217
- * <TableRow>
218
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
219
- * <TableHeader>Status</TableHeader>
220
- * <TableHeader>Method</TableHeader>
221
- * <TableHeader className="text-right">Amount</TableHeader>
222
- * </TableRow>
223
- * </TableHead>
224
- * <TableBody>
225
- * {invoices.map((invoice) => (
226
- * <TableRow key={invoice.invoice}>
227
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
228
- * <TableCell>{invoice.paymentStatus}</TableCell>
229
- * <TableCell>{invoice.paymentMethod}</TableCell>
230
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
265
+ * <TableRoot>
266
+ * <Table>
267
+ * <TableCaption>A list of your recent invoices.</TableCaption>
268
+ * <TableHead>
269
+ * <TableRow>
270
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
271
+ * <TableHeader>Status</TableHeader>
272
+ * <TableHeader>Method</TableHeader>
273
+ * <TableHeader className="text-right">Amount</TableHeader>
231
274
  * </TableRow>
232
- * ))}
233
- * </TableBody>
234
- * <TableFoot>
235
- * <TableRow>
236
- * <TableCell colSpan={3}>Total</TableCell>
237
- * <TableCell className="text-right">$2,500.00</TableCell>
238
- * </TableRow>
239
- * </TableFoot>
240
- * </Table>
275
+ * </TableHead>
276
+ * <TableBody>
277
+ * {invoices.map((invoice) => (
278
+ * <TableRow key={invoice.invoice}>
279
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
280
+ * <TableCell>{invoice.paymentStatus}</TableCell>
281
+ * <TableCell>{invoice.paymentMethod}</TableCell>
282
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
283
+ * </TableRow>
284
+ * ))}
285
+ * </TableBody>
286
+ * <TableFoot>
287
+ * <TableRow>
288
+ * <TableCell colSpan={3}>Total</TableCell>
289
+ * <TableCell className="text-right">$2,500.00</TableCell>
290
+ * </TableRow>
291
+ * </TableFoot>
292
+ * </Table>
293
+ * </TableRoot>
241
294
  * ```
242
295
  *
243
296
  * @see https://mantle.ngrok.com/components/table#api-table-row
@@ -256,33 +309,35 @@ declare const TableRow: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLP
256
309
  *
257
310
  * @example
258
311
  * ```tsx
259
- * <Table>
260
- * <TableCaption>A list of your recent invoices.</TableCaption>
261
- * <TableHead>
262
- * <TableRow>
263
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
264
- * <TableHeader>Status</TableHeader>
265
- * <TableHeader>Method</TableHeader>
266
- * <TableHeader className="text-right">Amount</TableHeader>
267
- * </TableRow>
268
- * </TableHead>
269
- * <TableBody>
270
- * {invoices.map((invoice) => (
271
- * <TableRow key={invoice.invoice}>
272
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
273
- * <TableCell>{invoice.paymentStatus}</TableCell>
274
- * <TableCell>{invoice.paymentMethod}</TableCell>
275
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
312
+ * <TableRoot>
313
+ * <Table>
314
+ * <TableCaption>A list of your recent invoices.</TableCaption>
315
+ * <TableHead>
316
+ * <TableRow>
317
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
318
+ * <TableHeader>Status</TableHeader>
319
+ * <TableHeader>Method</TableHeader>
320
+ * <TableHeader className="text-right">Amount</TableHeader>
321
+ * </TableRow>
322
+ * </TableHead>
323
+ * <TableBody>
324
+ * {invoices.map((invoice) => (
325
+ * <TableRow key={invoice.invoice}>
326
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
327
+ * <TableCell>{invoice.paymentStatus}</TableCell>
328
+ * <TableCell>{invoice.paymentMethod}</TableCell>
329
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
330
+ * </TableRow>
331
+ * ))}
332
+ * </TableBody>
333
+ * <TableFoot>
334
+ * <TableRow>
335
+ * <TableCell colSpan={3}>Total</TableCell>
336
+ * <TableCell className="text-right">$2,500.00</TableCell>
276
337
  * </TableRow>
277
- * ))}
278
- * </TableBody>
279
- * <TableFoot>
280
- * <TableRow>
281
- * <TableCell colSpan={3}>Total</TableCell>
282
- * <TableCell className="text-right">$2,500.00</TableCell>
283
- * </TableRow>
284
- * </TableFoot>
285
- * </Table>
338
+ * </TableFoot>
339
+ * </Table>
340
+ * </TableRoot>
286
341
  * ```
287
342
  *
288
343
  * @see https://mantle.ngrok.com/components/table#api-table-header
@@ -299,33 +354,35 @@ declare const TableHeader: react.ForwardRefExoticComponent<Omit<react.DetailedHT
299
354
  *
300
355
  * @example
301
356
  * ```tsx
302
- * <Table>
303
- * <TableCaption>A list of your recent invoices.</TableCaption>
304
- * <TableHead>
305
- * <TableRow>
306
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
307
- * <TableHeader>Status</TableHeader>
308
- * <TableHeader>Method</TableHeader>
309
- * <TableHeader className="text-right">Amount</TableHeader>
310
- * </TableRow>
311
- * </TableHead>
312
- * <TableBody>
313
- * {invoices.map((invoice) => (
314
- * <TableRow key={invoice.invoice}>
315
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
316
- * <TableCell>{invoice.paymentStatus}</TableCell>
317
- * <TableCell>{invoice.paymentMethod}</TableCell>
318
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
357
+ * <TableRoot>
358
+ * <Table>
359
+ * <TableCaption>A list of your recent invoices.</TableCaption>
360
+ * <TableHead>
361
+ * <TableRow>
362
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
363
+ * <TableHeader>Status</TableHeader>
364
+ * <TableHeader>Method</TableHeader>
365
+ * <TableHeader className="text-right">Amount</TableHeader>
319
366
  * </TableRow>
320
- * ))}
321
- * </TableBody>
322
- * <TableFoot>
323
- * <TableRow>
324
- * <TableCell colSpan={3}>Total</TableCell>
325
- * <TableCell className="text-right">$2,500.00</TableCell>
326
- * </TableRow>
327
- * </TableFoot>
328
- * </Table>
367
+ * </TableHead>
368
+ * <TableBody>
369
+ * {invoices.map((invoice) => (
370
+ * <TableRow key={invoice.invoice}>
371
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
372
+ * <TableCell>{invoice.paymentStatus}</TableCell>
373
+ * <TableCell>{invoice.paymentMethod}</TableCell>
374
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
375
+ * </TableRow>
376
+ * ))}
377
+ * </TableBody>
378
+ * <TableFoot>
379
+ * <TableRow>
380
+ * <TableCell colSpan={3}>Total</TableCell>
381
+ * <TableCell className="text-right">$2,500.00</TableCell>
382
+ * </TableRow>
383
+ * </TableFoot>
384
+ * </Table>
385
+ * </TableRoot>
329
386
  * ```
330
387
  *
331
388
  * @see https://mantle.ngrok.com/components/table#api-table-cell
@@ -342,37 +399,39 @@ declare const TableCell: react.ForwardRefExoticComponent<Omit<react.DetailedHTML
342
399
  *
343
400
  * @example
344
401
  * ```tsx
345
- * <Table>
346
- * <TableCaption>A list of your recent invoices.</TableCaption>
347
- * <TableHead>
348
- * <TableRow>
349
- * <TableHeader className="w-[100px]">Invoice</TableHeader>
350
- * <TableHeader>Status</TableHeader>
351
- * <TableHeader>Method</TableHeader>
352
- * <TableHeader className="text-right">Amount</TableHeader>
353
- * </TableRow>
354
- * </TableHead>
355
- * <TableBody>
356
- * {invoices.map((invoice) => (
357
- * <TableRow key={invoice.invoice}>
358
- * <TableCell className="font-medium">{invoice.invoice}</TableCell>
359
- * <TableCell>{invoice.paymentStatus}</TableCell>
360
- * <TableCell>{invoice.paymentMethod}</TableCell>
361
- * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
402
+ * <TableRoot>
403
+ * <Table>
404
+ * <TableCaption>A list of your recent invoices.</TableCaption>
405
+ * <TableHead>
406
+ * <TableRow>
407
+ * <TableHeader className="w-[100px]">Invoice</TableHeader>
408
+ * <TableHeader>Status</TableHeader>
409
+ * <TableHeader>Method</TableHeader>
410
+ * <TableHeader className="text-right">Amount</TableHeader>
411
+ * </TableRow>
412
+ * </TableHead>
413
+ * <TableBody>
414
+ * {invoices.map((invoice) => (
415
+ * <TableRow key={invoice.invoice}>
416
+ * <TableCell className="font-medium">{invoice.invoice}</TableCell>
417
+ * <TableCell>{invoice.paymentStatus}</TableCell>
418
+ * <TableCell>{invoice.paymentMethod}</TableCell>
419
+ * <TableCell className="text-right">{invoice.totalAmount}</TableCell>
420
+ * </TableRow>
421
+ * ))}
422
+ * </TableBody>
423
+ * <TableFoot>
424
+ * <TableRow>
425
+ * <TableCell colSpan={3}>Total</TableCell>
426
+ * <TableCell className="text-right">$2,500.00</TableCell>
362
427
  * </TableRow>
363
- * ))}
364
- * </TableBody>
365
- * <TableFoot>
366
- * <TableRow>
367
- * <TableCell colSpan={3}>Total</TableCell>
368
- * <TableCell className="text-right">$2,500.00</TableCell>
369
- * </TableRow>
370
- * </TableFoot>
371
- * </Table>
428
+ * </TableFoot>
429
+ * </Table>
430
+ * </TableRoot>
372
431
  * ```
373
432
  *
374
433
  * @see https://mantle.ngrok.com/components/table#api-table-caption
375
434
  */
376
435
  declare const TableCaption: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
377
436
 
378
- export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };
437
+ export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRoot, TableRow };
package/dist/table.js CHANGED
@@ -1,2 +1,2 @@
1
- import{a as e,b as a,c as l,d as b,e as T,f as o,g as d,h as r}from"./chunk-DD3VIOV5.js";import"./chunk-AZ56JGNY.js";export{e as Table,l as TableBody,r as TableCaption,d as TableCell,b as TableFoot,a as TableHead,o as TableHeader,T as TableRow};
1
+ import{a as e,b as a,c as l,d as b,e as o,f as T,g as t,h as d,i as r}from"./chunk-EG5SROPQ.js";import"./chunk-MF2QITTY.js";import"./chunk-AZ56JGNY.js";export{a as Table,b as TableBody,r as TableCaption,d as TableCell,o as TableFoot,l as TableHead,t as TableHeader,e as TableRoot,T as TableRow};
2
2
  //# sourceMappingURL=table.js.map