@ngrok/mantle 0.79.2 → 0.80.0

package/dist/table-DUSvU_Jw.d.ts

@@ -0,0 +1,875 @@
+import { ComponentProps } from "react";
+//#region src/components/table/table.d.ts
+/**
+ * The `<Table.Root>` is the root container element for all `Table`s.
+ * It provides styling and additional functionality, such as horizontal overflow
+ * detection.
+ *
+ * Must be used as the parent of a `<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-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tableroot
+ */
+declare const Root: {
+  ({ children, className, ref, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Element>` 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: `<Table.Caption>`
+ * 2. 0 or more: `<colgroup>` elements
+ * 3. optional: `<Table.Head>`
+ * 4. either one of the following:
+ *    - 0 or more: `<Table.Body>`
+ *    - 0 or more: `<Table.Row>`
+ * 5. optional: `<Table.Foot>`
+ *
+ * @description
+ * Establishes a table formatting context. Elements inside the `<Table.Element>`
+ * 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
+ * <Table.Root>
+ *   <Table.Element>
+ *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.Header className="w-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tableelement
+ */
+declare const Element: {
+  ({ children, className, ref, ...props }: ComponentProps<"table">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Head>` is a container for the table's column headers.
+ * Encapsulates a set of `<Table.Row>`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 (`<Table.Header>`).
+ *
+ * Must be used as a child of a `<Table.Element>`. It should only come after any
+ * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.
+ *
+ * Permitted Content:
+ * 1. 0 or more: `<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-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tableheader
+ */
+declare const Head: {
+  ({ children, className, ref, ...props }: ComponentProps<"thead">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they
+ * comprise the body of a table's (main) data.
+ *
+ * Must be used as a child of a `<Table.Element>` and only come after any
+ * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.
+ *
+ * Permitted Content:
+ * 1. 0 or more: `<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-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tablebody
+ */
+declare const Body: {
+  ({ children, className, ref, ...props }: ComponentProps<"tbody">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Foot>` encapsulates a set of `<Table.Row>`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.Element>` and only come after any
+ * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.
+ *
+ * Permitted Content:
+ * 1. 0 or more: `<Table.Row>` elements
+ *
+ * @example
+ * ```tsx
+ * <Table.Root>
+ *   <Table.Element>
+ *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.Header className="w-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tablefoot
+ */
+declare const Foot: {
+  ({ children, className, ref, ...props }: ComponentProps<"tfoot">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Row>` defines a row of cells in a table. The row's cells can then
+ * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.
+ *
+ * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.
+ *
+ * Permitted Content:
+ * 1. 0 or more: `<Table.Header>` or `<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-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tablerow
+ */
+declare const Row: {
+  ({ children, className, ref, ...props }: ComponentProps<"tr">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Header>` defines a cell as the header of a group of table cells
+ * and may be used as a child of a `<Table.Row>`. The exact nature of this group
+ * is defined by the scope and headers attributes.
+ *
+ * Must be used as a child of a `<Table.Row>`.
+ *
+ * Permitted Content:
+ * 1. Flow content, but with no header, footer, sectioning content, or heading
+ * content descendants.
+ *
+ * @example
+ * ```tsx
+ * <Table.Root>
+ *   <Table.Element>
+ *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.Header className="w-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tableheader
+ */
+declare const Header: {
+  ({ children, className, ref, ...props }: ComponentProps<"th">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The `<Table.Cell>` defines a cell of a table that contains data and may be
+ * used as a child of a `<Table.Row>`.
+ *
+ * Must be used as a child of a `<Table.Row>`.
+ *
+ * Permitted Content:
+ * 1. Flow content
+ *
+ * @example
+ * ```tsx
+ * <Table.Root>
+ *   <Table.Element>
+ *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.Header className="w-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tablecell
+ */
+declare const Cell: {
+  ({ children, className, ref, ...props }: ComponentProps<"td">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * The optional `<Table.Caption>` specifies the caption (or title) of a table,
+ * providing the table an accessible description.
+ *
+ * If used, must be the first child of a `<Table.Element>`.
+ *
+ * Permitted Content:
+ * 1. Flow content
+ *
+ * @example
+ * ```tsx
+ * <Table.Root>
+ *   <Table.Element>
+ *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+ *     <Table.Head>
+ *       <Table.Row>
+ *         <Table.Header className="w-25">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>
+ * ```
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table#tablecaption
+ */
+declare const Caption: {
+  ({ children, className, ref, ...props }: ComponentProps<"caption">): import("react").JSX.Element;
+  displayName: string;
+};
+/**
+ * Use `Table` for STATIC, layout-driven tabular data — read-only data dumps,
+ * simple key/value displays, plain markup tables. The API matches the HTML
+ * `<table>` element 1:1, with no built-in sorting, filtering, or pagination.
+ *
+ * For INTERACTIVE tabular data with sorting / filtering / pagination / row
+ * selection, use `DataTable` (built on TanStack Table) instead.
+ *
+ * @see https://mantle.ngrok.com/components/data-display/table
+ *
+ * @example
+ * Composition:
+ * ```
+ * Table.Root
+ * └── Table.Element
+ *     ├── Table.Caption
+ *     ├── Table.Head
+ *     │   └── Table.Row
+ *     │       └── Table.Header
+ *     ├── Table.Body
+ *     │   └── Table.Row
+ *     │       └── Table.Cell
+ *     └── 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-25">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>
+ * ```
+ */
+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/data-display/table#tablebody
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Body;
+  /**
+   * An optional caption that specifies the caption (or title) of a table, providing an accessible description.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/table#tablecaption
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Caption;
+  /**
+   * A cell that contains data and may be used as a child of a table row.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/table#tablecell
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Cell;
+  /**
+   * 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/data-display/table#tableelement
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Element;
+  /**
+   * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/table#tablefoot
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Foot;
+  /**
+   * The head section of a table. Contains the table's column headers information.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/table#tableheader
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Head;
+  /**
+   * 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/data-display/table#tableheader
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Header;
+  /**
+   * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/table#tableroot
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Root;
+  /**
+   * Defines a row of cells in a table. Contains a mix of table cells and table headers.
+   *
+   * @see https://mantle.ngrok.com/components/data-display/table#tablerow
+   *
+   * @example
+   * ```tsx
+   * <Table.Root>
+   *   <Table.Element>
+   *     <Table.Caption>A list of your recent invoices.</Table.Caption>
+   *     <Table.Head>
+   *       <Table.Row>
+   *         <Table.Header className="w-25">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: typeof Row;
+};
+//#endregion
+export { Table as t };