@ngrok/mantle 0.25.1 → 0.26.0

package/dist/table.d.ts

@@ -1,13 +1,378 @@
 import * as react from 'react';
-import { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
 
-declare const Table: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: react.ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: react.ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
+/**
+ * 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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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
+ * <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>
+ * ```
+ *
+ * @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>>;
 
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export { Table, TableBody, TableCaption, TableCell, TableFoot, TableHead, TableHeader, TableRow };

package/dist/table.js

@@ -1,2 +1,2 @@
-import{a as l}from"./chunk-AZ56JGNY.js";import{forwardRef as b}from"react";import{jsx as r}from"react/jsx-runtime";var o=b(({className:e,...t},a)=>r("table",{ref:a,className:l("relative w-full caption-bottom overflow-auto text-sm",e),...t}));o.displayName="Table";var T=b(({className:e,...t},a)=>r("thead",{ref:a,className:l("bg-base [&_tr]:border-b",e),...t}));T.displayName="TableHeader";var s=b(({className:e,...t},a)=>r("tbody",{ref:a,className:l("[&_tr:last-child]:border-0",e),...t}));s.displayName="TableBody";var m=b(({className:e,...t},a)=>r("tfoot",{ref:a,className:l("border-t border-gray-300 bg-gray-50/50 font-medium [&>tr]:last:border-b-0",e),...t}));m.displayName="TableFooter";var d=b(({className:e,...t},a)=>r("tr",{ref:a,className:l("data-state-selected:bg-gray-200 border-b border-gray-300 hover:bg-gray-200/50",e),...t}));d.displayName="TableRow";var i=b(({className:e,...t},a)=>r("th",{ref:a,className:l("text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0",e),...t}));i.displayName="TableHead";var n=b(({className:e,...t},a)=>r("td",{ref:a,className:l("p-4 align-middle [&:has([role=checkbox])]:pr-0",e),...t}));n.displayName="TableCell";var H=b(({className:e,...t},a)=>r("caption",{ref:a,className:l("border-t border-gray-300 py-4 text-sm text-gray-500",e),...t}));H.displayName="TableCaption";export{o as Table,s as TableBody,H as TableCaption,n as TableCell,m as TableFooter,i as TableHead,T as TableHeader,d as TableRow};
+import{a as e,b as a,c as l,d as b,e as T,f as o,g as d,h as r}from"./chunk-QMAGKYIX.js";import"./chunk-AZ56JGNY.js";export{e as Table,l as TableBody,r as TableCaption,d as TableCell,b as TableFoot,a as TableHead,o as TableHeader,T as TableRow};
 //# sourceMappingURL=table.js.map

package/dist/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/table/table.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { HTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\nconst Table = forwardRef<HTMLTableElement, HTMLAttributes<HTMLTableElement>>(\n\t({ className, ...props }, ref) => (\n\t\t// <div className=\"\">\n\t\t<table\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"relative w-full caption-bottom overflow-auto text-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t\t// </div>\n\t),\n);\nTable.displayName = \"Table\";\n\nconst TableHeader = forwardRef<\n\tHTMLTableSectionElement,\n\tHTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<thead\n\t\tref={ref}\n\t\tclassName={cx(\"bg-base [&_tr]:border-b\", className)}\n\t\t{...props}\n\t/>\n));\nTableHeader.displayName = \"TableHeader\";\n\nconst TableBody = forwardRef<\n\tHTMLTableSectionElement,\n\tHTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<tbody\n\t\tref={ref}\n\t\tclassName={cx(\"[&_tr:last-child]:border-0\", className)}\n\t\t{...props}\n\t/>\n));\nTableBody.displayName = \"TableBody\";\n\nconst TableFooter = forwardRef<\n\tHTMLTableSectionElement,\n\tHTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n\t<tfoot\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"border-t border-gray-300 bg-gray-50/50 font-medium [&>tr]:last:border-b-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableFooter.displayName = \"TableFooter\";\n\nconst TableRow = forwardRef<\n\tHTMLTableRowElement,\n\tHTMLAttributes<HTMLTableRowElement>\n>(({ className, ...props }, ref) => (\n\t<tr\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"data-state-selected:bg-gray-200 border-b border-gray-300 hover:bg-gray-200/50\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableRow.displayName = \"TableRow\";\n\nconst TableHead = forwardRef<\n\tHTMLTableCellElement,\n\tThHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n\t<th\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-muted-foreground h-12 px-4 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableHead.displayName = \"TableHead\";\n\nconst TableCell = forwardRef<\n\tHTMLTableCellElement,\n\tTdHTMLAttributes<HTMLTableCellElement>\n>(({ className, ...props }, ref) => (\n\t<td\n\t\tref={ref}\n\t\tclassName={cx(\"p-4 align-middle [&:has([role=checkbox])]:pr-0\", className)}\n\t\t{...props}\n\t/>\n));\nTableCell.displayName = \"TableCell\";\n\nconst TableCaption = forwardRef<\n\tHTMLTableCaptionElement,\n\tHTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"border-t border-gray-300 py-4 text-sm text-gray-500\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\tTable,\n\tTableHeader,\n\tTableBody,\n\tTableFooter,\n\tTableHead,\n\tTableRow,\n\tTableCell,\n\tTableCaption,\n};\n"],"mappings":"wCAAA,OAAS,cAAAA,MAAkB,QAOzB,cAAAC,MAAA,oBAHF,IAAMC,EAAQC,EACb,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAEzBL,EAAC,SACA,IAAKK,EACL,UAAWC,EACV,uDACAH,CACD,EACC,GAAGC,EACL,CAGF,EACAH,EAAM,YAAc,QAEpB,IAAMM,EAAcL,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,SACA,IAAKK,EACL,UAAWC,EAAG,0BAA2BH,CAAS,EACjD,GAAGC,EACL,CACA,EACDG,EAAY,YAAc,cAE1B,IAAMC,EAAYN,EAGhB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,SACA,IAAKK,EACL,UAAWC,EAAG,6BAA8BH,CAAS,EACpD,GAAGC,EACL,CACA,EACDI,EAAU,YAAc,YAExB,IAAMC,EAAcP,EAGlB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,SACA,IAAKK,EACL,UAAWC,EACV,4EACAH,CACD,EACC,GAAGC,EACL,CACA,EACDK,EAAY,YAAc,cAE1B,IAAMC,EAAWR,EAGf,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,MACA,IAAKK,EACL,UAAWC,EACV,gFACAH,CACD,EACC,GAAGC,EACL,CACA,EACDM,EAAS,YAAc,WAEvB,IAAMC,EAAYT,EAGhB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,MACA,IAAKK,EACL,UAAWC,EACV,mGACAH,CACD,EACC,GAAGC,EACL,CACA,EACDO,EAAU,YAAc,YAExB,IAAMC,EAAYV,EAGhB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,MACA,IAAKK,EACL,UAAWC,EAAG,iDAAkDH,CAAS,EACxE,GAAGC,EACL,CACA,EACDQ,EAAU,YAAc,YAExB,IAAMC,EAAeX,EAGnB,CAAC,CAAE,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAC3BL,EAAC,WACA,IAAKK,EACL,UAAWC,EACV,sDACAH,CACD,EACC,GAAGC,EACL,CACA,EACDS,EAAa,YAAc","names":["forwardRef","jsx","Table","forwardRef","className","props","ref","cx","TableHeader","TableBody","TableFooter","TableRow","TableHead","TableCell","TableCaption"]}
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.25.1",
+  "version": "0.26.0",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",
@@ -26,17 +26,17 @@
   },
   "dependencies": {
     "@ariakit/react": "0.4.17",
-    "@headlessui/react": "2.2.1",
-    "@radix-ui/react-accordion": "1.2.4",
-    "@radix-ui/react-dialog": "1.1.7",
-    "@radix-ui/react-dropdown-menu": "2.1.7",
-    "@radix-ui/react-hover-card": "1.1.7",
-    "@radix-ui/react-popover": "1.1.7",
-    "@radix-ui/react-select": "2.1.7",
+    "@headlessui/react": "2.2.2",
+    "@radix-ui/react-accordion": "1.2.7",
+    "@radix-ui/react-dialog": "1.1.10",
+    "@radix-ui/react-dropdown-menu": "2.1.11",
+    "@radix-ui/react-hover-card": "1.1.10",
+    "@radix-ui/react-popover": "1.1.10",
+    "@radix-ui/react-select": "2.2.2",
     "@radix-ui/react-slot": "1.2.0",
-    "@radix-ui/react-switch": "1.1.4",
-    "@radix-ui/react-tabs": "1.1.4",
-    "@radix-ui/react-tooltip": "1.2.0",
+    "@radix-ui/react-switch": "1.2.2",
+    "@radix-ui/react-tabs": "1.1.8",
+    "@radix-ui/react-tooltip": "1.2.3",
     "@tanstack/react-table": "8.21.3",
     "@uidotdev/usehooks": "2.4.1",
     "class-variance-authority": "0.7.1",
@@ -58,7 +58,7 @@
     "@types/prismjs": "1.26.5",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
-    "@vitejs/plugin-react": "4.4.0",
+    "@vitejs/plugin-react": "4.4.1",
     "autoprefixer": "10.4.21",
     "browserslist": "4.24.4",
     "date-fns": "4.1.0",
@@ -66,11 +66,11 @@
     "postcss": "8.5.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "react-router": "7.5.0",
+    "react-router": "7.5.1",
     "tailwindcss": "3.4.17",
     "tsup": "8.4.0",
     "typescript": "5.8.3",
-    "zod": "3.24.2",
+    "zod": "3.24.3",
     "@cfg/tsconfig": "1.0.0"
   },
   "peerDependencies": {
@@ -80,7 +80,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "tailwindcss": "^3.4.17",
-    "zod": "^3.24.2"
+    "zod": "^3.24.3"
   },
   "exports": {
     "./mantle.css": "./assets/mantle.css",
@@ -197,6 +197,11 @@
       "import": "./dist/icon.js",
       "types": "./dist/icon.d.ts"
     },
+    "./icons": {
+      "@ngrok/mantle/source": "./src/components/icons/index.ts",
+      "import": "./dist/icons.js",
+      "types": "./dist/icons.d.ts"
+    },
     "./inline-code": {
       "@ngrok/mantle/source": "./src/components/inline-code/index.ts",
       "import": "./dist/inline-code.js",
@@ -301,6 +306,11 @@
       "@ngrok/mantle/source": "./src/types/index.ts",
       "import": "./dist/types.js",
       "types": "./dist/types.d.ts"
+    },
+    "./utils/sorting": {
+      "@ngrok/mantle/source": "./src/utils/sorting/index.ts",
+      "import": "./dist/sorting.js",
+      "types": "./dist/sorting.d.ts"
     }
   },
   "scripts": {

package/dist/chunk-7FIV4E5C.js

@@ -1,2 +0,0 @@
-import{a as S}from"./chunk-MF2QITTY.js";import{b as g}from"./chunk-UXH22BMO.js";import{a as r}from"./chunk-AZ56JGNY.js";import{CaretDown as P}from"@phosphor-icons/react/CaretDown";import{CaretUp as R}from"@phosphor-icons/react/CaretUp";import{Check as I}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-select";import{createContext as N,forwardRef as n,useContext as T}from"react";import{jsx as i,jsxs as u}from"react/jsx-runtime";var h=N({}),B=n(({"aria-invalid":o,children:a,id:t,validation:l,onBlur:s,onChange:d,...p},c)=>i(e.Root,{...p,onValueChange:d,children:i(h.Provider,{value:{"aria-invalid":o,id:t,validation:l,onBlur:s,ref:c},children:a})}));B.displayName="Select";var F=e.Group,G=e.Value,W=n(({"aria-invalid":o,className:a,children:t,id:l,validation:s,...d},p)=>{let c=T(h),m=c["aria-invalid"]??o,x=m!=null&&m!=="false",f=c.validation??s,v=x?"error":typeof f=="function"?f():f,C=m??v==="error",w=c.id??l;return u(e.Trigger,{"aria-invalid":C,className:r("h-9 text-sm","border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left","hover:border-neutral-400","focus:outline-none focus:ring-4 aria-expanded:ring-4","focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent","data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success","data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning","data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger",a),"data-validation":v||void 0,id:w,ref:S(p,c.ref),...d,children:[t,i(e.Icon,{asChild:!0,children:i(P,{className:"size-4 shrink-0",weight:"bold"})})]})});W.displayName="SelectTrigger";var y=n(({className:o,...a},t)=>i(e.ScrollUpButton,{ref:t,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:i(R,{className:"size-4 shrink-0",weight:"bold"})}));y.displayName="SelectScrollUpButton";var b=n(({className:o,...a},t)=>i(e.ScrollDownButton,{ref:t,className:r("flex cursor-default items-center justify-center py-1",o),...a,children:i(P,{className:"size-4 shrink-0",weight:"bold"})}));b.displayName="SelectScrollDownButton";var L=n(({className:o,children:a,position:t="popper",width:l="trigger",...s},d)=>i(e.Portal,{children:u(e.Content,{ref:d,className:r("border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md","bg-popover",t==="popper"&&"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]",l==="trigger"&&"w-[var(--radix-select-trigger-width)]",o),position:t,...s,children:[i(y,{}),i(e.Viewport,{className:r("p-1",t==="popper"&&"h-[var(--radix-select-trigger-height)] w-full"),children:a}),i(b,{})]})}));L.displayName="SelectContent";var k=n(({className:o,...a},t)=>i(e.Label,{ref:t,className:r("px-2 py-1.5 text-sm font-semibold",o),...a}));k.displayName="SelectLabel";var V=n(({className:o,children:a,...t},l)=>u(e.Item,{ref:l,className:r("relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none","focus:bg-popover-hover","data-disabled:pointer-events-none data-disabled:opacity-50","data-state-checked:bg-filled-accent data-state-checked:text-on-filled","focus:data-state-checked:bg-filled-accent",o),...t,children:[i(e.ItemText,{children:a}),i(e.ItemIndicator,{className:"absolute right-2 flex h-3.5 w-3.5 items-center justify-center",children:i(I,{className:"size-4 shrink-0",weight:"bold"})})]}));V.displayName="SelectItem";var E=n(({className:o,...a},t)=>i(g,{ref:t,className:r("-mx-1 my-1 h-px w-auto",o),...a}));E.displayName="SelectSeparator";export{B as a,F as b,G as c,W as d,L as e,k as f,V as g,E as h};
-//# sourceMappingURL=chunk-7FIV4E5C.js.map

package/dist/chunk-7FIV4E5C.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/select/select.tsx"],"sourcesContent":["import { CaretDown } from \"@phosphor-icons/react/CaretDown\";\nimport { CaretUp } from \"@phosphor-icons/react/CaretUp\";\nimport { Check } from \"@phosphor-icons/react/Check\";\nimport * as SelectPrimitive from \"@radix-ui/react-select\";\nimport type {\n\tComponentProps,\n\tComponentPropsWithoutRef,\n\tComponentRef,\n\tFocusEvent,\n\tRef,\n\tSelectHTMLAttributes,\n} from \"react\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { WithValidation } from \"../input/types.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype WithAriaInvalid = Pick<\n\tSelectHTMLAttributes<HTMLSelectElement>,\n\t\"aria-invalid\"\n>;\ntype SelectContextType = WithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Ref for the trigger button.\n\t\t */\n\t\tref?: Ref<HTMLButtonElement>;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\nconst SelectContext = createContext<SelectContextType>({});\n\ntype SelectProps = Omit<\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Root>,\n\t\"onValueChange\"\n> &\n\tWithValidation &\n\tWithAriaInvalid & {\n\t\t/**\n\t\t * Event handler called when the value changes.\n\t\t */\n\t\tonChange?: (value: string) => void;\n\t\t/**\n\t\t * Event handler called when Select blurs.\n\t\t * @note this is a no-op for now until we can guarantee that it works identically to a native select onBlur\n\t\t */\n\t\tonBlur?: (event: FocusEvent<HTMLButtonElement>) => void;\n\t} & Pick<ComponentProps<\"button\">, \"id\">;\n\n/**\n * Displays a list of options for the user to pick from—triggered by a button.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectGroup>\n *       <SelectLabel>Fruits</SelectLabel>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectGroup>\n *     <SelectSeparator />\n *     <SelectGroup>\n *       <SelectLabel>Veggies</SelectLabel>\n *       <SelectItem value=\"carrot\">Carrot</SelectItem>\n *       <SelectItem value=\"cucumber\">Cucumber</SelectItem>\n *     </SelectGroup>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select\n */\nconst Select = forwardRef<HTMLButtonElement, SelectProps>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": _ariaInvalid,\n\t\t\tchildren,\n\t\t\tid,\n\t\t\tvalidation,\n\t\t\tonBlur,\n\t\t\tonChange,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<SelectPrimitive.Root {...props} onValueChange={onChange}>\n\t\t\t\t<SelectContext.Provider\n\t\t\t\t\tvalue={{ \"aria-invalid\": _ariaInvalid, id, validation, onBlur, ref }}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectContext.Provider>\n\t\t\t</SelectPrimitive.Root>\n\t\t);\n\t},\n);\nSelect.displayName = \"Select\";\n\n/**\n * A group of related options within a select menu. Similar to an html `<optgroup>` element.\n * Use in conjunction with SelectLabel to ensure good accessibility via automatic labelling.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectGroup>\n *       <SelectLabel>Fruits</SelectLabel>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectGroup>\n *     <SelectGroup>\n *       <SelectLabel>Veggies</SelectLabel>\n *       <SelectItem value=\"carrot\">Carrot</SelectItem>\n *       <SelectItem value=\"cucumber\">Cucumber</SelectItem>\n *     </SelectGroup>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-group\n */\nconst SelectGroup = SelectPrimitive.Group;\n\n/**\n * The part that reflects the selected value. By default the selected item's text will be rendered. if you require more control, you can instead control the select and pass your own children. It should not be styled to ensure correct positioning. An optional placeholder prop is also available for when the select has no value.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *     <SelectItem value=\"cherry\">Cherry</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-value\n */\nconst SelectValue = SelectPrimitive.Value;\n\ntype SelectTriggerProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Trigger\n> &\n\tWithAriaInvalid &\n\tWithValidation;\n\n/**\n * The button that toggles the select. The SelectContent will position itself adjacent to the trigger.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *     <SelectItem value=\"cherry\">Cherry</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-trigger\n */\nconst SelectTrigger = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Trigger>,\n\tSelectTriggerProps\n>(\n\t(\n\t\t{\n\t\t\t\"aria-invalid\": ariaInValidProp,\n\t\t\tclassName,\n\t\t\tchildren,\n\t\t\tid: propId,\n\t\t\tvalidation: propValidation,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(SelectContext);\n\t\tconst _ariaInvalid = ctx[\"aria-invalid\"] ?? ariaInValidProp;\n\t\tconst isInvalid = _ariaInvalid != null && _ariaInvalid !== \"false\";\n\t\tconst _validation = ctx.validation ?? propValidation;\n\t\tconst validation = isInvalid\n\t\t\t? \"error\"\n\t\t\t: typeof _validation === \"function\"\n\t\t\t\t? _validation()\n\t\t\t\t: _validation;\n\t\tconst ariaInvalid = _ariaInvalid ?? validation === \"error\";\n\t\tconst id = ctx.id ?? propId;\n\n\t\treturn (\n\t\t\t<SelectPrimitive.Trigger\n\t\t\t\taria-invalid={ariaInvalid}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"h-9 text-sm\",\n\t\t\t\t\t\"border-form bg-form text-strong placeholder:text-placeholder hover:bg-form-hover hover:text-strong flex w-full items-center justify-between gap-1.5 rounded-md border px-3 py-2 disabled:pointer-events-none disabled:opacity-50 [&>span]:line-clamp-1 [&>span]:text-left\",\n\t\t\t\t\t\"hover:border-neutral-400\",\n\t\t\t\t\t\"focus:outline-none focus:ring-4 aria-expanded:ring-4\",\n\t\t\t\t\t\"focus:border-accent-600 focus:ring-focus-accent aria-expanded:border-accent-600 aria-expanded:ring-focus-accent\",\n\t\t\t\t\t\"data-validation-success:border-success-600 data-validation-success:focus:border-success-600 data-validation-success:focus:ring-focus-success data-validation-success:aria-expanded:border-success-600 data-validation-success:aria-expanded:ring-focus-success\",\n\t\t\t\t\t\"data-validation-warning:border-warning-600 data-validation-warning:focus:border-warning-600 data-validation-warning:focus:ring-focus-warning data-validation-warning:aria-expanded:border-warning-600 data-validation-warning:aria-expanded:ring-focus-warning\",\n\t\t\t\t\t\"data-validation-error:border-danger-600 data-validation-error:focus:border-danger-600 data-validation-error:focus:ring-focus-danger data-validation-error:aria-expanded:border-danger-600 data-validation-error:aria-expanded:ring-focus-danger\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-validation={validation || undefined}\n\t\t\t\tid={id}\n\t\t\t\tref={composeRefs(ref, ctx.ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t<SelectPrimitive.Icon asChild>\n\t\t\t\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t\t\t</SelectPrimitive.Icon>\n\t\t\t</SelectPrimitive.Trigger>\n\t\t);\n\t},\n);\nSelectTrigger.displayName = \"SelectTrigger\";\n\n/**\n * The button that scrolls the select content up.\n * @private\n */\nconst SelectScrollUpButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollUpButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollUpButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CaretUp className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollUpButton>\n));\nSelectScrollUpButton.displayName = \"SelectScrollUpButton\";\n\n/**\n * The button that scrolls the select content down.\n * @private\n */\nconst SelectScrollDownButton = forwardRef<\n\tComponentRef<typeof SelectPrimitive.ScrollDownButton>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.ScrollDownButton\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"flex cursor-default items-center justify-center py-1\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<CaretDown className=\"size-4 shrink-0\" weight=\"bold\" />\n\t</SelectPrimitive.ScrollDownButton>\n));\nSelectScrollDownButton.displayName = \"SelectScrollDownButton\";\n\ntype SelectContentProps = ComponentPropsWithoutRef<\n\ttypeof SelectPrimitive.Content\n> & {\n\t/**\n\t * The width of the content. Defaults to the width of the trigger.\n\t * If set to \"content\", the content will use the intrinsic content width; it will be the width of the longest/widest item.\n\t * @default \"trigger\"\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The component that pops out when the select is open as a portal adjacent to the trigger button.\n * It contains a scrolling viewport of the select items.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *     <SelectItem value=\"cherry\">Cherry</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-content\n */\nconst SelectContent = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Content>,\n\tSelectContentProps\n>(\n\t(\n\t\t{ className, children, position = \"popper\", width = \"trigger\", ...props },\n\t\tref,\n\t) => (\n\t\t<SelectPrimitive.Portal>\n\t\t\t<SelectPrimitive.Content\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-popover data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md\",\n\t\t\t\t\t\"bg-popover\",\n\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\"data-side-bottom:translate-y-2 data-side-left:-translate-x-2 data-side-right:translate-x-2 data-side-top:-translate-y-2 max-h-[var(--radix-select-content-available-height)]\",\n\t\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-select-trigger-width)]\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tposition={position}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<SelectScrollUpButton />\n\t\t\t\t<SelectPrimitive.Viewport\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"p-1\",\n\t\t\t\t\t\tposition === \"popper\" &&\n\t\t\t\t\t\t\t\"h-[var(--radix-select-trigger-height)] w-full\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</SelectPrimitive.Viewport>\n\t\t\t\t<SelectScrollDownButton />\n\t\t\t</SelectPrimitive.Content>\n\t\t</SelectPrimitive.Portal>\n\t),\n);\nSelectContent.displayName = \"SelectContent\";\n\n/**\n * Used to render the label of a group. It won't be focusable using arrow keys.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectGroup>\n *       <SelectLabel>Fruits</SelectLabel>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectGroup>\n *     <SelectGroup>\n *       <SelectLabel>Veggies</SelectLabel>\n *       <SelectItem value=\"carrot\">Carrot</SelectItem>\n *       <SelectItem value=\"cucumber\">Cucumber</SelectItem>\n *     </SelectGroup>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-label\n */\nconst SelectLabel = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Label>\n>(({ className, ...props }, ref) => (\n\t<SelectPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\"px-2 py-1.5 text-sm font-semibold\", className)}\n\t\t{...props}\n\t/>\n));\nSelectLabel.displayName = \"SelectLabel\";\n\n/**\n * An option within a select menu. Similar to an html `<option>` element.\n * Has a required `value` prop that will be passed to the `onChange` handler of the `Select` component when this item is selected.\n * Displays the children as the option's text.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectItem value=\"apple\">Apple</SelectItem>\n *     <SelectItem value=\"banana\">Banana</SelectItem>\n *     <SelectItem value=\"cherry\">Cherry</SelectItem>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-item\n */\nconst SelectItem = forwardRef<\n\tComponentRef<typeof SelectPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof SelectPrimitive.Item>\n>(({ className, children, ...props }, ref) => (\n\t<SelectPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex w-full cursor-pointer select-none items-center rounded py-1.5 pl-2 pr-8 text-sm outline-none\",\n\t\t\t\"focus:bg-popover-hover\",\n\t\t\t\"data-disabled:pointer-events-none data-disabled:opacity-50\",\n\t\t\t\"data-state-checked:bg-filled-accent data-state-checked:text-on-filled\",\n\t\t\t\"focus:data-state-checked:bg-filled-accent\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n\t\t<SelectPrimitive.ItemIndicator className=\"absolute right-2 flex h-3.5 w-3.5 items-center justify-center\">\n\t\t\t<Check className=\"size-4 shrink-0\" weight=\"bold\" />\n\t\t</SelectPrimitive.ItemIndicator>\n\t</SelectPrimitive.Item>\n));\nSelectItem.displayName = \"SelectItem\";\n\n/**\n * Used to visually separate items or groups of items in the select content.\n *\n * @example\n * <Select>\n *   <SelectTrigger>\n *     <SelectValue placeholder=\"Select a fruit\" />\n *   </SelectTrigger>\n *   <SelectContent>\n *     <SelectGroup>\n *       <SelectLabel>Fruits</SelectLabel>\n *       <SelectItem value=\"apple\">Apple</SelectItem>\n *       <SelectItem value=\"banana\">Banana</SelectItem>\n *       <SelectItem value=\"cherry\">Cherry</SelectItem>\n *     </SelectGroup>\n *     <SelectSeparator />\n *     <SelectGroup>\n *       <SelectLabel>Veggies</SelectLabel>\n *       <SelectItem value=\"carrot\">Carrot</SelectItem>\n *       <SelectItem value=\"cucumber\">Cucumber</SelectItem>\n *     </SelectGroup>\n *   </SelectContent>\n * </Select>\n *\n * @see https://mantle.ngrok.com/components/select#api-select-separator\n */\nconst SelectSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1 my-1 h-px w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nSelectSeparator.displayName = \"SelectSeparator\";\n\nexport {\n\t//,\n\tSelect,\n\tSelectContent,\n\tSelectGroup,\n\tSelectItem,\n\tSelectLabel,\n\tSelectSeparator,\n\tSelectTrigger,\n\tSelectValue,\n};\n"],"mappings":"wHAAA,OAAS,aAAAA,MAAiB,kCAC1B,OAAS,WAAAC,MAAe,gCACxB,OAAS,SAAAC,MAAa,8BACtB,UAAYC,MAAqB,yBASjC,OAAS,iBAAAC,EAAe,cAAAC,EAAY,cAAAC,MAAkB,QAmFlD,cAAAC,EA6GD,QAAAC,MA7GC,oBA5DJ,IAAMC,EAAgBC,EAAiC,CAAC,CAAC,EA6CnDC,EAASC,EACd,CACC,CACC,eAAgBC,EAChB,SAAAC,EACA,GAAAC,EACA,WAAAC,EACA,OAAAC,EACA,SAAAC,EACA,GAAGC,CACJ,EACAC,IAGCb,EAAiB,OAAhB,CAAsB,GAAGY,EAAO,cAAeD,EAC/C,SAAAX,EAACE,EAAc,SAAd,CACA,MAAO,CAAE,eAAgBI,EAAc,GAAAE,EAAI,WAAAC,EAAY,OAAAC,EAAQ,IAAAG,CAAI,EAElE,SAAAN,EACF,EACD,CAGH,EACAH,EAAO,YAAc,SA4BrB,IAAMU,EAA8B,QAmB9BC,EAA8B,QAyB9BC,EAAgBX,EAIrB,CACC,CACC,eAAgBY,EAChB,UAAAC,EACA,SAAAX,EACA,GAAIY,EACJ,WAAYC,EACZ,GAAGR,CACJ,EACAC,IACI,CACJ,IAAMQ,EAAMC,EAAWpB,CAAa,EAC9BI,EAAee,EAAI,cAAc,GAAKJ,EACtCM,EAAYjB,GAAgB,MAAQA,IAAiB,QACrDkB,EAAcH,EAAI,YAAcD,EAChCX,EAAac,EAChB,QACA,OAAOC,GAAgB,WACtBA,EAAY,EACZA,EACEC,EAAcnB,GAAgBG,IAAe,QAC7CD,EAAKa,EAAI,IAAMF,EAErB,OACClB,EAAiB,UAAhB,CACA,eAAcwB,EACd,UAAWC,EACV,cACA,4QACA,2BACA,uDACA,kHACA,iQACA,iQACA,kPACAR,CACD,EACA,kBAAiBT,GAAc,OAC/B,GAAID,EACJ,IAAKmB,EAAYd,EAAKQ,EAAI,GAAG,EAC5B,GAAGT,EAEH,UAAAL,EACDP,EAAiB,OAAhB,CAAqB,QAAO,GAC5B,SAAAA,EAAC4B,EAAA,CAAU,UAAU,kBAAkB,OAAO,OAAO,EACtD,GACD,CAEF,CACD,EACAZ,EAAc,YAAc,gBAM5B,IAAMa,EAAuBxB,EAG3B,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAAiB,iBAAhB,CACA,IAAKa,EACL,UAAWa,EACV,uDACAR,CACD,EACC,GAAGN,EAEJ,SAAAZ,EAAC8B,EAAA,CAAQ,UAAU,kBAAkB,OAAO,OAAO,EACpD,CACA,EACDD,EAAqB,YAAc,uBAMnC,IAAME,EAAyB1B,EAG7B,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAAiB,mBAAhB,CACA,IAAKa,EACL,UAAWa,EACV,uDACAR,CACD,EACC,GAAGN,EAEJ,SAAAZ,EAAC4B,EAAA,CAAU,UAAU,kBAAkB,OAAO,OAAO,EACtD,CACA,EACDG,EAAuB,YAAc,yBA+BrC,IAAMC,EAAgB3B,EAIrB,CACC,CAAE,UAAAa,EAAW,SAAAX,EAAU,SAAA0B,EAAW,SAAU,MAAAC,EAAQ,UAAW,GAAGtB,CAAM,EACxEC,IAEAb,EAAiB,SAAhB,CACA,SAAAC,EAAiB,UAAhB,CACA,IAAKY,EACL,UAAWa,EACV,8ZACA,aACAO,IAAa,UACZ,+KACDC,IAAU,WAAa,wCACvBhB,CACD,EACA,SAAUe,EACT,GAAGrB,EAEJ,UAAAZ,EAAC6B,EAAA,EAAqB,EACtB7B,EAAiB,WAAhB,CACA,UAAW0B,EACV,MACAO,IAAa,UACZ,+CACF,EAEC,SAAA1B,EACF,EACAP,EAAC+B,EAAA,EAAuB,GACzB,EACD,CAEF,EACAC,EAAc,YAAc,gBA2B5B,IAAMG,EAAc9B,EAGlB,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAAiB,QAAhB,CACA,IAAKa,EACL,UAAWa,EAAG,oCAAqCR,CAAS,EAC3D,GAAGN,EACL,CACA,EACDuB,EAAY,YAAc,cAqB1B,IAAMC,EAAa/B,EAGjB,CAAC,CAAE,UAAAa,EAAW,SAAAX,EAAU,GAAGK,CAAM,EAAGC,IACrCZ,EAAiB,OAAhB,CACA,IAAKY,EACL,UAAWa,EACV,6GACA,yBACA,6DACA,wEACA,4CACAR,CACD,EACC,GAAGN,EAEJ,UAAAZ,EAAiB,WAAhB,CAA0B,SAAAO,EAAS,EACpCP,EAAiB,gBAAhB,CAA8B,UAAU,gEACxC,SAAAA,EAACqC,EAAA,CAAM,UAAU,kBAAkB,OAAO,OAAO,EAClD,GACD,CACA,EACDD,EAAW,YAAc,aA4BzB,IAAME,EAAkBjC,EAGtB,CAAC,CAAE,UAAAa,EAAW,GAAGN,CAAM,EAAGC,IAC3Bb,EAACuC,EAAA,CACA,IAAK1B,EACL,UAAWa,EAAG,yBAA0BR,CAAS,EAChD,GAAGN,EACL,CACA,EACD0B,EAAgB,YAAc","names":["CaretDown","CaretUp","Check","SelectPrimitive","createContext","forwardRef","useContext","jsx","jsxs","SelectContext","createContext","Select","forwardRef","_ariaInvalid","children","id","validation","onBlur","onChange","props","ref","SelectGroup","SelectValue","SelectTrigger","ariaInValidProp","className","propId","propValidation","ctx","useContext","isInvalid","_validation","ariaInvalid","cx","composeRefs","CaretDown","SelectScrollUpButton","CaretUp","SelectScrollDownButton","SelectContent","position","width","SelectLabel","SelectItem","Check","SelectSeparator","Separator"]}