@ngrok/mantle 0.66.0 → 0.66.2

package/dist/table.d.ts

@@ -1,396 +1,2 @@
-import * as react from 'react';
-
-/**
- * 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
- *
- * @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/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: 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#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: 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#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: 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#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: 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#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: 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#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: 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#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: 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#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: 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#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: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "ref"> & react.RefAttributes<HTMLTableRowElement>>;
-};
-
-export { Table };
+import { t as Table } from "./table-Dpt192qt.js";
+export { Table };

package/dist/table.js

@@ -1,2 +1 @@
-import{a as e}from"./chunk-RED6SFAV.js";import"./chunk-HKSO72E5.js";import"./chunk-PFXFESEN.js";export{e as Table};
-//# sourceMappingURL=table.js.map
+import{t as e}from"./table-BWMp12sl.js";export{e as Table};

package/dist/tabs.d.ts

@@ -1,8 +1,9 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
-import { HTMLAttributes } from 'react';
-import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
+import * as react from "react";
+import { HTMLAttributes } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as _radix_ui_react_tabs0 from "@radix-ui/react-tabs";
 
+//#region src/components/tabs/tabs.d.ts
 /**
  * A set of layered sections of content—known as tab panels—that are displayed one at a time.
  * The root component that provides context for all tab components.
@@ -26,107 +27,112 @@ import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
  * ```
  */
 declare const Tabs: {
+  /**
+   * The root container of the tabs component that provides context for all tab components.
+   * A set of layered sections of content—known as tab panels—that are displayed one at a time.
+   *
+   * @see https://mantle.ngrok.com/components/tabs#tabsroot
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Root defaultValue="account">
+   *   <Tabs.List>
+   *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+   *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+   *   </Tabs.List>
+   *   <Tabs.Content value="account">
+   *     <p>Make changes to your account here.</p>
+   *   </Tabs.Content>
+   * </Tabs.Root>
+   * ```
+   */
+  readonly Root: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs0.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
     /**
-     * The root container of the tabs component that provides context for all tab components.
-     * A set of layered sections of content—known as tab panels—that are displayed one at a time.
-     *
-     * @see https://mantle.ngrok.com/components/tabs#tabsroot
-     *
-     * @example
-     * ```tsx
-     * <Tabs.Root defaultValue="account">
-     *   <Tabs.List>
-     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
-     *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
-     *   </Tabs.List>
-     *   <Tabs.Content value="account">
-     *     <p>Make changes to your account here.</p>
-     *   </Tabs.Content>
-     * </Tabs.Root>
-     * ```
+     * The appearance of the tabs. Classic appearance shows the tab
+     * list with an underline; pill appearance shows each tab as a pill.
+     * @default "classic"
      */
-    readonly Root: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
-        /**
-         * The appearance of the tabs. Classic appearance shows the tab
-         * list with an underline; pill appearance shows each tab as a pill.
-         * @default "classic"
-         */
-        appearance?: "classic" | "pill";
-    } & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Contains the content associated with each trigger.
-     * The content panel that displays when its corresponding tab trigger is active.
-     *
-     * @see https://mantle.ngrok.com/components/tabs#tabscontent
-     *
-     * @example
-     * ```tsx
-     * <Tabs.Root defaultValue="account">
-     *   <Tabs.List>
-     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
-     *   </Tabs.List>
-     *   <Tabs.Content value="account">
-     *     <p>Make changes to your account here.</p>
-     *   </Tabs.Content>
-     * </Tabs.Root>
-     * ```
-     */
-    readonly Content: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * Contains the triggers that are aligned along the edge of the active content.
-     * The container for tab triggers that provides the visual layout for tab navigation.
-     *
-     * @see https://mantle.ngrok.com/components/tabs#tabslist
-     *
-     * @example
-     * ```tsx
-     * <Tabs.Root defaultValue="account">
-     *   <Tabs.List>
-     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
-     *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
-     *   </Tabs.List>
-     * </Tabs.Root>
-     * ```
-     */
-    readonly List: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The button that activates its associated content.
-     * A clickable tab trigger that switches between different tab content panels.
-     *
-     * @see https://mantle.ngrok.com/components/tabs#tabstrigger
-     *
-     * @example
-     * ```tsx
-     * <Tabs.Root defaultValue="account">
-     *   <Tabs.List>
-     *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
-     *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
-     *   </Tabs.List>
-     * </Tabs.Root>
-     * ```
-     */
-    readonly Trigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
-    /**
-     * A badge component that can be used inside tab triggers to display additional information.
-     * Typically used to show counts or status indicators within tab headers.
-     *
-     * @see https://mantle.ngrok.com/components/tabs#tabsbadge
-     *
-     * @example
-     * ```tsx
-     * <Tabs.Root defaultValue="account">
-     *   <Tabs.List>
-     *     <Tabs.Trigger value="account">
-     *       Account <Tabs.Badge>5</Tabs.Badge>
-     *     </Tabs.Trigger>
-     *   </Tabs.List>
-     * </Tabs.Root>
-     * ```
-     */
-    readonly Badge: {
-        ({ className, children, ...props }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
-        displayName: string;
-    };
+    appearance?: "classic" | "pill";
+  } & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Contains the content associated with each trigger.
+   * The content panel that displays when its corresponding tab trigger is active.
+   *
+   * @see https://mantle.ngrok.com/components/tabs#tabscontent
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Root defaultValue="account">
+   *   <Tabs.List>
+   *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+   *   </Tabs.List>
+   *   <Tabs.Content value="account">
+   *     <p>Make changes to your account here.</p>
+   *   </Tabs.Content>
+   * </Tabs.Root>
+   * ```
+   */
+  readonly Content: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs0.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * Contains the triggers that are aligned along the edge of the active content.
+   * The container for tab triggers that provides the visual layout for tab navigation.
+   *
+   * @see https://mantle.ngrok.com/components/tabs#tabslist
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Root defaultValue="account">
+   *   <Tabs.List>
+   *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+   *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+   *   </Tabs.List>
+   * </Tabs.Root>
+   * ```
+   */
+  readonly List: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs0.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The button that activates its associated content.
+   * A clickable tab trigger that switches between different tab content panels.
+   *
+   * @see https://mantle.ngrok.com/components/tabs#tabstrigger
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Root defaultValue="account">
+   *   <Tabs.List>
+   *     <Tabs.Trigger value="account">Account</Tabs.Trigger>
+   *     <Tabs.Trigger value="password">Password</Tabs.Trigger>
+   *   </Tabs.List>
+   * </Tabs.Root>
+   * ```
+   */
+  readonly Trigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs0.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+  /**
+   * A badge component that can be used inside tab triggers to display additional information.
+   * Typically used to show counts or status indicators within tab headers.
+   *
+   * @see https://mantle.ngrok.com/components/tabs#tabsbadge
+   *
+   * @example
+   * ```tsx
+   * <Tabs.Root defaultValue="account">
+   *   <Tabs.List>
+   *     <Tabs.Trigger value="account">
+   *       Account <Tabs.Badge>5</Tabs.Badge>
+   *     </Tabs.Trigger>
+   *   </Tabs.List>
+   * </Tabs.Root>
+   * ```
+   */
+  readonly Badge: {
+    ({
+      className,
+      children,
+      ...props
+    }: HTMLAttributes<HTMLSpanElement>): react_jsx_runtime0.JSX.Element;
+    displayName: string;
+  };
 };
-
+//#endregion
 export { Tabs };
+//# sourceMappingURL=tabs.d.ts.map