@ngrok/mantle 0.32.3 → 0.40.1

package/dist/table.d.ts

@@ -1,437 +1,396 @@
 import * as react from 'react';
 
 /**
- * The `<TableRoot>` is the root container element for all `<Table>`s.
- * It provides styling and additional functionality, such as horizontal overflow
- * detection.
+ * A structured way to display data in rows and columns. The API matches the
+ * HTML table element 1:1.
  *
- * Must be used as the parent of a `<Table>`.
+ * @see https://mantle.ngrok.com/components/table
  *
  * @example
  * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
+ * <Table.Root>
+ *   <Table.Element>
+ *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+ *         <Table.Header>Status</Table.Header>
+ *         <Table.Header>Method</Table.Header>
+ *         <Table.Header className="text-right">Amount</Table.Header>
+ *       </Table.Row>
+ *     </Table.Head>
+ *     <Table.Body>
  *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
+ *         <Table.Row key={invoice.invoice}>
+ *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+ *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+ *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+ *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+ *         </Table.Row>
  *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
+ *     </Table.Body>
+ *     <Table.Foot>
+ *       <Table.Row>
+ *         <Table.Cell colSpan={3}>Total</Table.Cell>
+ *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+ *       </Table.Row>
+ *     </Table.Foot>
+ *   </Table.Element>
+ * </Table.Root>
  * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-root
- */
-declare const TableRoot: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-/**
- * The `<Table>` is a structured way to display data in rows and columns. The API
- * matches the HTML `<table>` element 1:1.
- *
- * Permitted content in this order:
- * 1. optional: `<TableCaption>`
- * 2. 0 or more: `<colgroup>` elements
- * 3. optional: `<TableHead>`
- * 4. either one of the following:
- *    - 0 or more: `<TableBody>`
- *    - 0 or more: `<TableRow>`
- * 5. optional: `<TableFoot>`
- *
- * @description
- * Establishes a table formatting context. Elements inside the `<Table>`
- * generate rectangular boxes. Each box occupies a number of table cells
- * according to the following rules:
- *   1. The row boxes fill the table in the source code order from top to bottom.
- *      Each row box occupies one row of cells.
- *   2. A row group box occupies one or more row boxes.
- *   3. Column boxes are placed next to each other in source code order.
- *      Depending on the value of the dir attribute, the columns are laid in
- *      left-to-right or right-to-left direction. A column box occupies one or
- *      more columns of table cells.
- *   4. A column group box occupies one or more column boxes.
- *   5. A cell box may span over multiple rows and columns. User agents trim
- *      cells to fit in the available number of rows and columns.
- * Table cells do have padding. Boxes that make up a table do not have margins.
- * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table
- */
-declare const Table: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & react.RefAttributes<HTMLTableElement>>;
-/**
- * The `<TableHead>` is a container for the table's column headers.
- * Encapsulates a set of `<TableRow>`s, indicating that they comprise the head
- * of a table with information about the table's columns. This is usually in the
- * form of column headers (`<TableHeader>`).
- *
- * Must be used as a child of a `<Table>`. It should only come after any
- * `<TableCaption>` or `<colgroup>` and before any `<TableBody>` or `<TableFoot>`.
- *
- * Permitted Content:
- * 1. 0 or more: `<TableRow>`
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-header
- */
-declare const TableHead: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
-/**
- * The `<TableBody>` encapsulates a set of `<TableRow>`s, indicating that they
- * comprise the body of a table's (main) data.
- *
- * Must be used as a child of a `<Table>` and only come after any
- * `<TableCaption>`, `<colgroup>`, or `<TableHead>`.
- *
- * Permitted Content:
- * 1. 0 or more: `<TableRow>`
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-body
- */
-declare const TableBody: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
-/**
- * The `<TableFoot>` encapsulates a set of `<TableRow>`s, indicating that they
- * comprise the foot of a table with information about the table's columns. This
- * is usually a summary of the columns, e.g., a sum of the given numbers in a
- * column.
- *
- * Must be used as a child of a `<Table>` and only come after any
- * `<TableCaption>`, `<colgroup>`, `<TableHead>`, and `<TableBody>`.
- *
- * Permitted Content:
- * 1. 0 or more: `<TableRow>` elements
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-foot
- */
-declare const TableFoot: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
-/**
- * The `<TableRow>` defines a row of cells in a table. The row's cells can then
- * be established using a mix of `<TableCell>` and `<TableHeader>` components.
- *
- * Must be used as a child of a `<TableHead>`, `<TableBody>`, or `<TableFoot>`.
- *
- * Permitted Content:
- * 1. 0 or more: `<TableHeader>` or `<TableCell>`
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-row
- */
-declare const TableRow: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
-/**
- * The `<TableHeader>` defines a cell as the header of a group of table cells
- * and may be used as a child of a `<TableRow>`. The exact nature of this group
- * is defined by the scope and headers attributes.
- *
- * Must be used as a child of a `<TableRow>`.
- *
- * Permitted Content:
- * 1. Flow content, but with no header, footer, sectioning content, or heading
- * content descendants.
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-header
- */
-declare const TableHeader: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & react.RefAttributes<HTMLTableHeaderCellElement>>;
-/**
- * The `<TableCell>` defines a cell of a table that contains data and may be
- * used as a child of a `<TableRow>`.
- *
- * Must be used as a child of a `<TableRow>`.
- *
- * Permitted Content:
- * 1. Flow content
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-cell
- */
-declare const TableCell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
-/**
- * The optional `<TableCaption>` specifies the caption (or title) of a table,
- * providing the table an accessible description.
- *
- * If used, must be the first child of a `<Table>`.
- *
- * Permitted Content:
- * 1. Flow content
- *
- * @example
- * ```tsx
- * <TableRoot>
- *   <Table>
- *     <TableCaption>A list of your recent invoices.</TableCaption>
- *     <TableHead>
- *       <TableRow>
- *         <TableHeader className="w-[100px]">Invoice</TableHeader>
- *         <TableHeader>Status</TableHeader>
- *         <TableHeader>Method</TableHeader>
- *         <TableHeader className="text-right">Amount</TableHeader>
- *       </TableRow>
- *     </TableHead>
- *     <TableBody>
- *       {invoices.map((invoice) => (
- *         <TableRow key={invoice.invoice}>
- *           <TableCell className="font-medium">{invoice.invoice}</TableCell>
- *           <TableCell>{invoice.paymentStatus}</TableCell>
- *           <TableCell>{invoice.paymentMethod}</TableCell>
- *           <TableCell className="text-right">{invoice.totalAmount}</TableCell>
- *         </TableRow>
- *       ))}
- *     </TableBody>
- *     <TableFoot>
- *       <TableRow>
- *         <TableCell colSpan={3}>Total</TableCell>
- *         <TableCell className="text-right">$2,500.00</TableCell>
- *       </TableRow>
- *     </TableFoot>
- *   </Table>
- * </TableRoot>
- * ```
- *
- * @see https://mantle.ngrok.com/components/table#api-table-caption
  */
-declare const TableCaption: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+declare const Table: {
+    /**
+     * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-body
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Body: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+    /**
+     * An optional caption that specifies the caption (or title) of a table, providing an accessible description.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-caption
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Caption: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & react.RefAttributes<HTMLElement>>;
+    /**
+     * A cell that contains data and may be used as a child of a table row.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-cell
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Cell: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & react.RefAttributes<HTMLTableDataCellElement>>;
+    /**
+     * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-element
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Element: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & react.RefAttributes<HTMLTableElement>>;
+    /**
+     * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-foot
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Foot: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+    /**
+     * The head section of a table. Contains the table's column headers information.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-header
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Head: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & react.RefAttributes<HTMLTableSectionElement>>;
+    /**
+     * A cell that defines the header of a group of table cells as a child of a table row.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-header
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Header: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "ref"> & react.RefAttributes<HTMLTableHeaderCellElement>>;
+    /**
+     * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-root
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Root: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    /**
+     * Defines a row of cells in a table. Contains a mix of table cells and table headers.
+     *
+     * @see https://mantle.ngrok.com/components/table#api-table-row
+     *
+     * @example
+     * ```tsx
+     * <Table.Root>
+     *   <Table.Element>
+     *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+     *     <Table.Head>
+     *       <Table.Row>
+     *         <Table.Header className="w-[100px]">Invoice</Table.Header>
+     *         <Table.Header>Status</Table.Header>
+     *         <Table.Header>Method</Table.Header>
+     *         <Table.Header className="text-right">Amount</Table.Header>
+     *       </Table.Row>
+     *     </Table.Head>
+     *     <Table.Body>
+     *       {invoices.map((invoice) => (
+     *         <Table.Row key={invoice.invoice}>
+     *           <Table.Cell className="font-medium">{invoice.invoice}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>
+     *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>
+     *           <Table.Cell className="text-right">{invoice.totalAmount}</Table.Cell>
+     *         </Table.Row>
+     *       ))}
+     *     </Table.Body>
+     *     <Table.Foot>
+     *       <Table.Row>
+     *         <Table.Cell colSpan={3}>Total</Table.Cell>
+     *         <Table.Cell className="text-right">$2,500.00</Table.Cell>
+     *       </Table.Row>
+     *     </Table.Foot>
+     *   </Table.Element>
+     * </Table.Root>
+     * ```
+     */
+    readonly Row: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
+};
 
-export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRoot, TableRow };
+export { Table };