@ngrok/mantle 0.76.1 → 0.76.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/agent.json +1 -1
- package/dist/alert-dialog.d.ts +4 -4
- package/dist/alert.d.ts +1 -1
- package/dist/{button-BYZOBUgj.d.ts → button-BXZ_JTu_.d.ts} +4 -4
- package/dist/button.d.ts +2 -2
- package/dist/checkbox.d.ts +30 -1
- package/dist/checkbox.js +1 -1
- package/dist/checkbox.js.map +1 -1
- package/dist/command.d.ts +7 -7
- package/dist/data-table.d.ts +123 -43
- package/dist/data-table.js +1 -1
- package/dist/data-table.js.map +1 -1
- package/dist/dialog.d.ts +1 -1
- package/dist/empty.js +1 -1
- package/dist/empty.js.map +1 -1
- package/dist/field.d.ts +2 -2
- package/dist/{icon-button-Ct3A7aoj.d.ts → icon-button-ntupABbM.d.ts} +2 -2
- package/dist/{index-BL5WVva_.d.ts → index-CJbKEKr2.d.ts} +4 -2
- package/dist/input.d.ts +3 -3
- package/dist/llms.txt +1 -1
- package/dist/mantle.css +178 -8
- package/dist/sandboxed-on-click.d.ts +1 -0
- package/dist/sandboxed-on-click.js.map +1 -1
- package/dist/sheet.d.ts +2 -2
- package/dist/sheet.js.map +1 -1
- package/dist/slot.d.ts +1 -1
- package/dist/split-button.d.ts +2 -2
- package/dist/table-DWy_oNta.js +2 -0
- package/dist/table-DWy_oNta.js.map +1 -0
- package/dist/table.js +1 -1
- package/dist/tabs.js +1 -1
- package/dist/tabs.js.map +1 -1
- package/dist/theme.d.ts +3 -3
- package/dist/well.js +1 -1
- package/dist/well.js.map +1 -1
- package/package.json +19 -19
- package/dist/table-eyoUW2Uv.js +0 -2
- package/dist/table-eyoUW2Uv.js.map +0 -1
package/dist/theme.d.ts
CHANGED
|
@@ -201,14 +201,14 @@ declare function useTheme(): ThemeProviderState;
|
|
|
201
201
|
* Read the theme and applied theme from the `<html>` element.
|
|
202
202
|
*/
|
|
203
203
|
declare function readThemeFromHtmlElement(): {
|
|
204
|
-
appliedTheme: "
|
|
205
|
-
theme: "
|
|
204
|
+
appliedTheme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | undefined;
|
|
205
|
+
theme: "dark" | "light" | "system" | "light-high-contrast" | "dark-high-contrast" | undefined;
|
|
206
206
|
};
|
|
207
207
|
/**
|
|
208
208
|
* If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.
|
|
209
209
|
* This will mirror the result that gets applied to the <html> element.
|
|
210
210
|
*/
|
|
211
|
-
declare function useAppliedTheme(): "
|
|
211
|
+
declare function useAppliedTheme(): "dark" | "light" | "light-high-contrast" | "dark-high-contrast";
|
|
212
212
|
/**
|
|
213
213
|
* determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.
|
|
214
214
|
* @private
|
package/dist/well.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{ref:o,"data-slot":`well`,className:e(`border-card bg-base relative rounded-md border shadow-inner`,i),...a}));i.displayName=`Well`;export{i as Well};
|
|
1
|
+
import{t as e}from"./cx-CBSnSC36.js";import{t}from"./slot-CV5fmqFr.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,...a},o)=>r(n?t:`div`,{ref:o,"data-slot":`well`,className:e(`border-card-muted bg-base relative rounded-md border shadow-inner`,i),...a}));i.displayName=`Well`;export{i as Well};
|
|
2
2
|
//# sourceMappingURL=well.js.map
|
package/dist/well.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"well.js","names":[],"sources":["../src/components/well/well.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype WellProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A recessed, inset container used to visually group and de-emphasize content\n * relative to the surrounding surface, such as code samples, supplementary\n * notes, or read-only summaries.\n *\n * Renders a `<div>` by default. Pass `asChild` to render as a different element\n * or your own component, forwarding all class names, `data-*` attributes, and\n * the ref onto that child.\n *\n * @see https://mantle.ngrok.com/components/well\n *\n * @example\n * ```tsx\n * <Well>\n * <p>Eu ad sint laborum nostrud ullamco esse.</p>\n * </Well>\n * ```\n *\n * @example\n * ```tsx\n * <Well asChild>\n * <section aria-label=\"Summary\">…</section>\n * </Well>\n * ```\n */\nconst Well = forwardRef<ComponentRef<\"div\">, WellProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"well\"\n\t\t\t\tclassName={cx(\"border-card bg-base relative rounded-md border shadow-inner\"
|
|
1
|
+
{"version":3,"file":"well.js","names":[],"sources":["../src/components/well/well.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype WellProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A recessed, inset container used to visually group and de-emphasize content\n * relative to the surrounding surface, such as code samples, supplementary\n * notes, or read-only summaries.\n *\n * Renders a `<div>` by default. Pass `asChild` to render as a different element\n * or your own component, forwarding all class names, `data-*` attributes, and\n * the ref onto that child.\n *\n * @see https://mantle.ngrok.com/components/well\n *\n * @example\n * ```tsx\n * <Well>\n * <p>Eu ad sint laborum nostrud ullamco esse.</p>\n * </Well>\n * ```\n *\n * @example\n * ```tsx\n * <Well asChild>\n * <section aria-label=\"Summary\">…</section>\n * </Well>\n * ```\n */\nconst Well = forwardRef<ComponentRef<\"div\">, WellProps>(\n\t({ asChild = false, className, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Comp\n\t\t\t\tref={ref}\n\t\t\t\tdata-slot=\"well\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"border-card-muted bg-base relative rounded-md border shadow-inner\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nWell.displayName = \"Well\";\n\nexport {\n\t//,\n\tWell,\n};\n"],"mappings":"kJAiCA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,GAAG,GAAS,IAIzC,EAHY,EAAU,EAAO,MAG7B,CACM,MACL,YAAU,OACV,UAAW,EACV,oEACA,CACD,EACA,GAAI,CACJ,CAAA,CAGJ,EACA,EAAK,YAAc"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ngrok/mantle",
|
|
3
|
-
"version": "0.76.
|
|
3
|
+
"version": "0.76.3",
|
|
4
4
|
"description": "mantle is ngrok's UI library and design system.",
|
|
5
5
|
"homepage": "https://mantle.ngrok.com",
|
|
6
6
|
"license": "MIT",
|
|
@@ -349,24 +349,24 @@
|
|
|
349
349
|
"dependencies": {
|
|
350
350
|
"@ariakit/react": "0.4.29",
|
|
351
351
|
"@headlessui/react": "2.2.10",
|
|
352
|
-
"@radix-ui/react-accordion": "1.2.
|
|
353
|
-
"@radix-ui/react-dialog": "1.1.
|
|
354
|
-
"@radix-ui/react-dropdown-menu": "2.1.
|
|
355
|
-
"@radix-ui/react-hover-card": "1.1.
|
|
356
|
-
"@radix-ui/react-popover": "1.1.
|
|
357
|
-
"@radix-ui/react-progress": "1.1.
|
|
358
|
-
"@radix-ui/react-select": "2.3.
|
|
359
|
-
"@radix-ui/react-slider": "1.4.
|
|
360
|
-
"@radix-ui/react-slot": "1.
|
|
361
|
-
"@radix-ui/react-switch": "1.3.
|
|
362
|
-
"@radix-ui/react-tabs": "1.1.
|
|
363
|
-
"@radix-ui/react-tooltip": "1.2.
|
|
352
|
+
"@radix-ui/react-accordion": "1.2.14",
|
|
353
|
+
"@radix-ui/react-dialog": "1.1.17",
|
|
354
|
+
"@radix-ui/react-dropdown-menu": "2.1.18",
|
|
355
|
+
"@radix-ui/react-hover-card": "1.1.17",
|
|
356
|
+
"@radix-ui/react-popover": "1.1.17",
|
|
357
|
+
"@radix-ui/react-progress": "1.1.10",
|
|
358
|
+
"@radix-ui/react-select": "2.3.1",
|
|
359
|
+
"@radix-ui/react-slider": "1.4.1",
|
|
360
|
+
"@radix-ui/react-slot": "1.3.0",
|
|
361
|
+
"@radix-ui/react-switch": "1.3.1",
|
|
362
|
+
"@radix-ui/react-tabs": "1.1.15",
|
|
363
|
+
"@radix-ui/react-tooltip": "1.2.10",
|
|
364
364
|
"@tanstack/react-table": "8.21.3",
|
|
365
365
|
"class-variance-authority": "0.7.1",
|
|
366
366
|
"clsx": "2.1.1",
|
|
367
367
|
"cmdk": "1.1.1",
|
|
368
368
|
"input-otp": "1.4.2",
|
|
369
|
-
"react-day-picker": "
|
|
369
|
+
"react-day-picker": "10.0.1",
|
|
370
370
|
"sonner": "2.0.7",
|
|
371
371
|
"tailwind-merge": "3.6.0",
|
|
372
372
|
"tiny-invariant": "1.3.3",
|
|
@@ -382,14 +382,14 @@
|
|
|
382
382
|
"@tsdown/css": "0.22.2",
|
|
383
383
|
"@types/react": "19.2.17",
|
|
384
384
|
"@types/react-dom": "19.2.3",
|
|
385
|
-
"@vitest/browser-playwright": "4.1.
|
|
385
|
+
"@vitest/browser-playwright": "4.1.9",
|
|
386
386
|
"browserslist": "4.28.2",
|
|
387
387
|
"date-fns": "4.4.0",
|
|
388
|
-
"happy-dom": "20.10.
|
|
389
|
-
"playwright": "1.
|
|
388
|
+
"happy-dom": "20.10.3",
|
|
389
|
+
"playwright": "1.61.0",
|
|
390
390
|
"react": "19.2.7",
|
|
391
391
|
"react-dom": "19.2.7",
|
|
392
|
-
"tailwindcss": "4.3.
|
|
392
|
+
"tailwindcss": "4.3.1",
|
|
393
393
|
"tsdown": "0.22.2",
|
|
394
394
|
"typescript": "6.0.3",
|
|
395
395
|
"@cfg/tsconfig": "1.0.0"
|
|
@@ -399,7 +399,7 @@
|
|
|
399
399
|
"date-fns": "^4.4.0",
|
|
400
400
|
"react": "^18 || ^19",
|
|
401
401
|
"react-dom": "^18 || ^19",
|
|
402
|
-
"tailwindcss": "^4.3.
|
|
402
|
+
"tailwindcss": "^4.3.1"
|
|
403
403
|
},
|
|
404
404
|
"browserslist": [
|
|
405
405
|
"last 2 years, not dead, > 0.2%"
|
package/dist/table-eyoUW2Uv.js
DELETED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import{t as e}from"./cx-CBSnSC36.js";import{t}from"./compose-refs-Cjf2gfB8.js";import{forwardRef as n,useLayoutEffect as r,useMemo as i,useRef as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=n(({children:n,className:r,...i},a)=>{let o=v();return s(`div`,{"data-slot":`table`,className:e(`group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100`,r),"data-sticky-active":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,"data-x-overflow":o.state.hasOverflow,"data-x-scroll-end":o.state.hasOverflow&&o.state.scrolledToEnd,...i,children:s(`div`,{className:e(`scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none`,`has-data-mantle-table-sticky-right:[--_fade-right:black]`),"data-scroll-left":o.state.hasOverflow&&!o.state.scrolledToStart||void 0,"data-scroll-right":o.state.hasOverflow&&!o.state.scrolledToEnd||void 0,ref:t(o.ref,a),children:n})})});c.displayName=`TableRoot`;const l=n(({children:t,className:n,...r},i)=>s(`table`,{"data-slot":`table-element`,ref:i,className:e(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...r,children:t}));l.displayName=`TableElement`;const u=n(({children:t,className:n,...r},i)=>s(`thead`,{"data-slot":`table-head`,ref:i,className:e(`[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...r,children:t}));u.displayName=`TableHead`;const d=n(({children:t,className:n,...r},i)=>s(`tbody`,{"data-slot":`table-body`,className:e(`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-body`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover`,n),ref:i,...r,children:t}));d.displayName=`TableBody`;const f=n(({children:t,className:n,...r},i)=>s(`tfoot`,{"data-slot":`table-foot`,ref:i,className:e(`font-medium text-body`,`[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...r,children:t}));f.displayName=`TableFoot`;const p=n(({children:t,className:n,...r},i)=>s(`tr`,{"data-slot":`table-row`,ref:i,className:e(n),...r,children:t}));p.displayName=`TableRow`;const m=n(({children:t,className:n,...r},i)=>s(`th`,{"data-slot":`table-header`,ref:i,className:e(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...r,children:t}));m.displayName=`TableHeader`;const h=n(({children:t,className:n,...r},i)=>s(`td`,{"data-slot":`table-cell`,ref:i,className:e(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...r,children:t}));h.displayName=`TableCell`;const g=n(({children:t,className:n,...r},i)=>s(`caption`,{"data-slot":`table-caption`,ref:i,className:e(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...r,children:t}));g.displayName=`TableCaption`;const _={Body:d,Caption:g,Cell:h,Element:l,Foot:f,Head:u,Header:m,Root:c,Row:p};function v(){let e=a(null),[t,n]=o({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return r(()=>{let t=e.current;if(!t)return;let r=0,i=()=>{let e=t.scrollWidth>t.clientWidth,r=t.scrollLeft<1,i=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;n(t=>t.hasOverflow!==e||t.scrolledToStart!==r||t.scrolledToEnd!==i?{hasOverflow:e,scrolledToStart:r,scrolledToEnd:i}:t)},a=()=>{r===0&&(r=requestAnimationFrame(()=>{r=0,i()}))},o=new ResizeObserver(a);o.observe(t);let s=new MutationObserver(a);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,a,{passive:!0}),i(),()=>{cancelAnimationFrame(r),o.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,a)}},[]),i(()=>({ref:e,state:t}),[t])}export{_ as t};
|
|
2
|
-
//# sourceMappingURL=table-eyoUW2Uv.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"table-eyoUW2Uv.js","names":[],"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableroot\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow = useHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tdata-slot=\"table\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow && horizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none\",\n\t\t\t\t\t\t// When the table contains a sticky right column (e.g., DataTable.ActionCell\n\t\t\t\t\t\t// / DataTable.ActionHeader), suppress the container's right-side fade so the\n\t\t\t\t\t\t// pinned column stays fully opaque. The pinned column provides its own\n\t\t\t\t\t\t// left-side gradient for the scroll-under effect.\n\t\t\t\t\t\t\"has-data-mantle-table-sticky-right:[--_fade-right:black]\",\n\t\t\t\t\t)}\n\t\t\t\t\tdata-scroll-left={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToStart) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tdata-scroll-right={\n\t\t\t\t\t\t(horizontalOverflow.state.hasOverflow && !horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\t\tundefined\n\t\t\t\t\t}\n\t\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n * - 0 or more: `<Table.Body>`\n * - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n * 1. The row boxes fill the table in the source code order from top to bottom.\n * Each row box occupies one row of cells.\n * 2. A row group box occupies one or more row boxes.\n * 3. Column boxes are placed next to each other in source code order.\n * Depending on the value of the dir attribute, the columns are laid in\n * left-to-right or right-to-left direction. A column box occupies one or\n * more columns of table cells.\n * 4. A column group box occupies one or more column boxes.\n * 5. A cell box may span over multiple rows and columns. User agents trim\n * cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableelement\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tdata-slot=\"table-element\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tdata-slot=\"table-head\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<thead> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-muted bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablebody\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tdata-slot=\"table-body\"\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t// In border-separate, <tr>/<tbody> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablefoot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tdata-slot=\"table-foot\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t// In border-separate, <tr>/<tfoot> borders don't render, so apply\n\t\t\t\t// dividers directly to cells.\n\t\t\t\t\"[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted\",\n\t\t\t\t\"[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablerow\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tdata-slot=\"table-row\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tableheader\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tdata-slot=\"table-header\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tdata-slot=\"table-cell\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#tablecaption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tdata-slot=\"table-caption\"\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"py-4 text-sm text-gray-500\", \"border-t border-card-muted\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * Use `Table` for STATIC, layout-driven tabular data — read-only data dumps,\n * simple key/value displays, plain markup tables. The API matches the HTML\n * `<table>` element 1:1, with no built-in sorting, filtering, or pagination.\n *\n * For INTERACTIVE tabular data with sorting / filtering / pagination / row\n * selection, use `DataTable` (built on TanStack Table) instead.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * Composition:\n * ```\n * Table.Root\n * └── Table.Element\n * ├── Table.Caption\n * ├── Table.Head\n * │ └── Table.Row\n * │ └── Table.Header\n * ├── Table.Body\n * │ └── Table.Row\n * │ └── Table.Cell\n * └── Table.Foot\n * ```\n *\n * @example\n * ```tsx\n * <Table.Root>\n * <Table.Element>\n * <Table.Caption>A list of your recent invoices.</Table.Caption>\n * <Table.Head>\n * <Table.Row>\n * <Table.Header className=\"w-25\">Invoice</Table.Header>\n * <Table.Header>Status</Table.Header>\n * <Table.Header>Method</Table.Header>\n * <Table.Header className=\"text-right\">Amount</Table.Header>\n * </Table.Row>\n * </Table.Head>\n * <Table.Body>\n * {invoices.map((invoice) => (\n * <Table.Row key={invoice.invoice}>\n * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n * </Table.Row>\n * ))}\n * </Table.Body>\n * <Table.Foot>\n * <Table.Row>\n * <Table.Cell colSpan={3}>Total</Table.Cell>\n * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n * </Table.Row>\n * </Table.Foot>\n * </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecaption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableelement\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablefoot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#tablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t * <Table.Element>\n\t * <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t * <Table.Head>\n\t * <Table.Row>\n\t * <Table.Header className=\"w-25\">Invoice</Table.Header>\n\t * <Table.Header>Status</Table.Header>\n\t * <Table.Header>Method</Table.Header>\n\t * <Table.Header className=\"text-right\">Amount</Table.Header>\n\t * </Table.Row>\n\t * </Table.Head>\n\t * <Table.Body>\n\t * {invoices.map((invoice) => (\n\t * <Table.Row key={invoice.invoice}>\n\t * <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t * <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t * <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t * </Table.Row>\n\t * ))}\n\t * </Table.Body>\n\t * <Table.Foot>\n\t * <Table.Row>\n\t * <Table.Cell colSpan={3}>Total</Table.Cell>\n\t * <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t * </Table.Row>\n\t * </Table.Foot>\n\t * </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToStart: true,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseLayoutEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet frameId = 0;\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToStart = element.scrollLeft < 1;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(element.scrollWidth - element.scrollLeft - element.clientWidth) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToStart !== scrolledToStart ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToStart, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\t// Coalesce rapid-fire events (scroll, mutation, resize) into a single\n\t\t// layout read per animation frame to avoid redundant work.\n\t\tconst scheduleCheck = () => {\n\t\t\tif (frameId === 0) {\n\t\t\t\tframeId = requestAnimationFrame(() => {\n\t\t\t\t\tframeId = 0;\n\t\t\t\t\tcheckState();\n\t\t\t\t});\n\t\t\t}\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(scheduleCheck);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(scheduleCheck);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", scheduleCheck, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(frameId);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", scheduleCheck);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"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"}
|