@ngrok/mantle 0.66.0 → 0.66.1

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-RED6SFAV.js";import{a as b}from"./chunk-HL2HWYKP.js";import{m}from"./chunk-7MJQGBE4.js";import"./chunk-HKSO72E5.js";import{a as D}from"./chunk-W5A5HSFE.js";import"./chunk-63ZAW25Z.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-IVQ626TU.js";import"./chunk-ADF5DAYG.js";import"./chunk-SBQHQ2SJ.js";import{a as c}from"./chunk-PFXFESEN.js";export*from"@tanstack/react-table";import{flexRender as S}from"@tanstack/react-table";import{Fragment as g,createContext as E,useContext as M,useMemo as j}from"react";import F from"tiny-invariant";var _=["unsorted","asc","desc"],A=["unsorted","desc","asc"];function f(t,o){return V(o==="alphanumeric"?_:A,t)??"unsorted"}function V(t,o,e){if(t.length===0)return e;let n=t.findIndex(i=>i===o);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{jsx as a,jsxs as y}from"react/jsx-runtime";var C=E(null);function x(){let t=M(C);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function P({children:t,table:o,...e}){let n=j(()=>({table:o}),[o]);return a(C.Provider,{value:n,children:a(r.Root,{...e,children:a(r.Element,{children:t})})})}function R({children:t,className:o,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:i,sortIcon:v,onClick:B,...k}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",O=v?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none not-disabled:active:scale-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:O,iconPlacement:l,onClick:T=>{B?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",...k,children:[p&&s!=="unsorted"&&y("span",{className:"sr-only",children:["Column sorted in"," ",i==="alphanumeric"?s==="asc"?"ascending":"descending":m(s)," ","order"]}),t]})}function w({children:t,className:o,...e}){return a(r.Header,{className:c("has-data-table-header-action:px-0",o),...e,children:t})}var d=r.Body;d.displayName="DataTableBody";function h(t){let{table:o}=x();return a(r.Head,{...t,children:o.getHeaderGroups().map(e=>a(r.Row,{children:e.headers.map(n=>a(g,{children:n.isPlaceholder?a(r.Header,{},n.id):S(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function H({row:t,...o}){return a(r.Row,{...o,children:t.getVisibleCells().map(e=>a(g,{children:S(e.column.columnDef.cell,e.getContext())},e.id))})}function N({children:t,...o}){let{table:e}=x(),n=e.getAllColumns().length;return a(r.Row,{...o,children:a(r.Cell,{colSpan:n,children:t})})}function I({children:t,className:o,...e}){return a(r.Cell,{className:c("sticky z-10 right-0 top-px -bottom-px group-data-sticky-active/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0/15%)]",o),...e,children:a("div",{className:"flex justify-end",children:t})})}P.displayName="DataTable";I.displayName="DataTableActionCell";d.displayName="DataTableBody";N.displayName="DataTableEmptyRow";h.displayName="DataTableHead";w.displayName="DataTableHeader";R.displayName="DataTableHeaderSortButton";H.displayName="DataTableRow";var z={Root:P,ActionCell:I,Cell:r.Cell,Body:d,EmptyRow:N,Head:h,Header:w,HeaderSortButton:R,Row:H};function L({direction:t,mode:o,...e}){return t==="unsorted"||!o||!t?a("svg",{"aria-hidden":!0,...e}):a(b,{mode:o,direction:t,...e})}function $(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(f(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./button-CRRPesae.js";import{i as n}from"./direction-DfrtFTny.js";import{t as r}from"./sort-CfPsu1Gs.js";import{t as i}from"./table-BWMp12sl.js";import{Fragment as a,createContext as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";export*from"@tanstack/react-table";const p=[`unsorted`,`asc`,`desc`],m=[`unsorted`,`desc`,`asc`];function h(e,t){return g(t===`alphanumeric`?p:m,e)??`unsorted`}function g(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const _=o(null);function v(){let e=s(_);return l(e,`useDataTableContext should only be used within a DataTable child component`),e}function y({children:e,table:t,...n}){let r=c(()=>({table:t}),[t]);return u(_.Provider,{value:r,children:u(i.Root,{...n,children:u(i.Element,{children:e})})})}function b({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:f,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??u(O,{mode:c,direction:g});return d(t,{appearance:`ghost`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{f?.(e),!e.defaultPrevented&&(!h||o||c===void 0||k(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&d(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function x({children:t,className:n,...r}){return u(i.Header,{className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const S=i.Body;S.displayName=`DataTableBody`;function C(e){let{table:t}=v();return u(i.Head,{...e,children:t.getHeaderGroups().map(e=>u(i.Row,{children:e.headers.map(e=>u(a,{children:e.isPlaceholder?u(i.Header,{},e.id):f(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function w({row:e,...t}){return u(i.Row,{...t,children:e.getVisibleCells().map(e=>u(a,{children:f(e.column.columnDef.cell,e.getContext())},e.id))})}function T({children:e,...t}){let{table:n}=v(),r=n.getAllColumns().length;return u(i.Row,{...t,children:u(i.Cell,{colSpan:r,children:e})})}function E({children:t,className:n,...r}){return u(i.Cell,{className:e(`sticky z-10 right-0 top-px -bottom-px group-data-sticky-active/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0/15%)]`,n),...r,children:u(`div`,{className:`flex justify-end`,children:t})})}y.displayName=`DataTable`,E.displayName=`DataTableActionCell`,S.displayName=`DataTableBody`,T.displayName=`DataTableEmptyRow`,C.displayName=`DataTableHead`,x.displayName=`DataTableHeader`,b.displayName=`DataTableHeaderSortButton`,w.displayName=`DataTableRow`;const D={Root:y,ActionCell:E,Cell:i.Cell,Body:S,EmptyRow:T,Head:C,Header:x,HeaderSortButton:b,Row:w};function O({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?u(`svg`,{"aria-hidden":!0,...n}):u(r,{mode:t,direction:e,...n})}function k(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(h(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{D as DataTable};
 //# sourceMappingURL=data-table.js.map

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/data-table/index.ts","../src/components/data-table/data-table.tsx","../src/components/data-table/helpers.ts"],"sourcesContent":["export * from \"@tanstack/react-table\";\n\nexport {\n\t//,\n\tDataTable,\n} from \"./data-table.js\";\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line typescript/no-explicit-any - known limitation of react context when using generics 😭\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * <DataTable.HeaderSortButton\n *   column={column}\n *   sortingMode=\"alphanumeric\"\n * >\n *   Column Title\n * </DataTable.HeaderSortButton>\n * ```\n *\n * Each click cycles through:\n * - For alphanumeric sorting: unsorted ➡️ ascending ➡️ descending ➡️ unsorted\n * - For time sorting: unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTable.HeaderSortButton` component.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * <DataTable.Header>\n *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n *     Column Title\n *   </DataTable.HeaderSortButton>\n * </DataTable.Header>\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header className={cx(\"has-data-table-header-action:px-0\", className)} {...props}>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\nconst Body = Table.Body;\nBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\nfunction Row<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\tclassName={cx(\n\t\t\t\t\"sticky z-10 right-0 top-px -bottom-px group-data-sticky-active/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0/15%)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex justify-end\">{children}</div>\n\t\t</Table.Cell>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     <DataTable.Rows />\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row for action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.ActionCell>\n\t *   <Button size=\"sm\">Edit</Button>\n\t *   <Button size=\"sm\">Delete</Button>\n\t * </DataTable.ActionCell>\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A table cell component for rendering individual data cells.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Cell>\n\t *   Cell content\n\t * </DataTable.Cell>\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The table body container for rows of data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   <DataTable.Rows />\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty state row that spans all columns when there's no data to display.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.EmptyRow>\n\t *   No data available\n\t * </DataTable.EmptyRow>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The table header container that renders column headers automatically.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Head />\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A header cell component optimized for data table header actions.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Header>\n\t *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n\t *     Column Title\n\t *   </DataTable.HeaderSortButton>\n\t * </DataTable.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for column headers with sorting functionality.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.HeaderSortButton\n\t *   column={column}\n\t *   sortingMode=\"alphanumeric\"\n\t * >\n\t *   Column Title\n\t * </DataTable.HeaderSortButton>\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table row component for rendering custom row layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Row row={row} />\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n","import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n"],"mappings":"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","names":["flexRender","Fragment","createContext","useContext","useMemo","invariant","alphanumericSortingOrder","timeSortingOrder","getNextSortDirection","currentSortDirection","sortingMode","getNextInCircularList","list","currentItem","fallback","currentItemIndex","item","nextIndex","jsx","jsxs","DataTableContext","createContext","useDataTableContext","context","useContext","invariant","Root","children","table","props","useMemo","Table","HeaderSortButton","className","column","disableSorting","iconPlacement","sortingMode","propSortIcon","onClick","_sortDirection","canSort","sortDirection","sortIcon","DefaultSortIcon","Button","cx","event","toggleNextSortingDirection","$timeSortingDirection","Header","Body","Head","headerGroup","header","Fragment","flexRender","Row","row","cell","EmptyRow","numberOfColumns","ActionCell","DataTable","DefaultSortIcon","direction","mode","props","jsx","SortIcon","toggleNextSortingDirection","column","sortingMode","sortDirection","getNextSortDirection"]}
+{"version":3,"file":"data-table.js","names":["Table","Row"],"sources":["../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line typescript/no-explicit-any - known limitation of react context when using generics 😭\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table.\n * If the column is sortable, clicking the button will toggle the sorting\n * direction.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * <DataTable.HeaderSortButton\n *   column={column}\n *   sortingMode=\"alphanumeric\"\n * >\n *   Column Title\n * </DataTable.HeaderSortButton>\n * ```\n *\n * Each click cycles through:\n * - For alphanumeric sorting: unsorted ➡️ ascending ➡️ descending ➡️ unsorted\n * - For time sorting: unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst _sortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof _sortDirection === \"string\" ? _sortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A header for a data table.\n * This is typically used to wrap the `DataTable.HeaderSortButton` component.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * <DataTable.Header>\n *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n *     Column Title\n *   </DataTable.HeaderSortButton>\n * </DataTable.Header>\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header className={cx(\"has-data-table-header-action:px-0\", className)} {...props}>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\nconst Body = Table.Body;\nBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\nfunction Row<TData>({ row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row {...props}>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\tclassName={cx(\n\t\t\t\t\"sticky z-10 right-0 top-px -bottom-px group-data-sticky-active/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0/15%)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex justify-end\">{children}</div>\n\t\t</Table.Cell>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * A data table component that provides sorting and other data table functionality.\n * Built on top of TanStack Table for advanced table features.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * ```tsx\n * <DataTable table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     <DataTable.Rows />\n *   </DataTable.Body>\n * </DataTable>\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     <DataTable.Rows />\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row for action buttons.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.ActionCell>\n\t *   <Button size=\"sm\">Edit</Button>\n\t *   <Button size=\"sm\">Delete</Button>\n\t * </DataTable.ActionCell>\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A table cell component for rendering individual data cells.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Cell>\n\t *   Cell content\n\t * </DataTable.Cell>\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The table body container for rows of data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   <DataTable.Rows />\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty state row that spans all columns when there's no data to display.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.EmptyRow>\n\t *   No data available\n\t * </DataTable.EmptyRow>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The table header container that renders column headers automatically.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Head />\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A header cell component optimized for data table header actions.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Header>\n\t *   <DataTable.HeaderSortButton column={column} sortingMode=\"alphanumeric\">\n\t *     Column Title\n\t *   </DataTable.HeaderSortButton>\n\t * </DataTable.Header>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for column headers with sorting functionality.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.HeaderSortButton\n\t *   column={column}\n\t *   sortingMode=\"alphanumeric\"\n\t * >\n\t *   Column Title\n\t * </DataTable.HeaderSortButton>\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table row component for rendering custom row layouts.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Row row={row} />\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"2bAGA,MAAM,EAA2B,CAAC,WAAY,MAAO,OAAO,CAEtD,EAAmB,CAAC,WAAY,OAAQ,MAAM,CAKpD,SAAS,EAAqB,EAAqC,EAA0B,CAG5F,OAAO,EAFW,IAAgB,eAAiB,EAA2B,EAEtC,EAAqB,EAAI,WAOlE,SAAS,EAAyB,EAAW,EAAgB,EAA0B,CACtF,GAAI,EAAK,SAAW,EACnB,OAAO,EAGR,IAAM,EAAmB,EAAK,UAAW,GAAS,IAAS,EAAY,CACvE,GAAI,IAAqB,GACxB,OAAO,EAGR,IAAM,GAAa,EAAmB,GAAK,EAAK,OAChD,OAAO,EAAK,GAAG,EAAU,EAAI,ECD9B,MAAM,EAAmB,EAAiD,KAAK,CAK/E,SAAS,GAA6B,CACrC,IAAM,EAAU,EAAW,EAAiB,CAI5C,OAFA,EAAU,EAAS,6EAA6E,CAEzF,EAuBR,SAAS,EAAY,CAAE,WAAU,QAAO,GAAG,GAAgC,CAC1E,IAAM,EAAwC,OAAe,CAAE,QAAO,EAAG,CAAC,EAAM,CAAC,CAEjF,OACC,EAAC,EAAiB,SAAlB,CAA2B,MAAO,WACjC,EAACA,EAAM,KAAP,CAAY,GAAI,WACf,EAACA,EAAM,QAAP,CAAgB,WAAyB,CAAA,CAC7B,CAAA,CACc,CAAA,CA2D9B,SAAS,EAAgC,CACxC,WACA,YACA,SACA,iBAAiB,GACjB,gBAAgB,MAChB,cACA,SAAU,EACV,UACA,GAAG,GAC8C,CACjD,IAAM,EAAiB,EAAO,aAAa,CACrC,EAAU,CAAC,GAAkB,EAAO,YAAY,CAEhD,EACL,GAAW,OAAO,GAAmB,SAAW,EAAiB,WAE5D,EAAW,IAAe,EAAc,EAC7C,EAAC,EAAD,CAAiB,KAAM,EAAa,UAAW,EAAiB,CAAA,CAGjE,OACC,EAAC,EAAD,CACC,WAAW,QACX,UAAW,EACV,+EACA,EACA,CACD,sBAAqB,EACrB,2BAAA,GACA,KAAM,EACS,gBACf,QAAU,GAAU,CACnB,IAAU,EAAM,CACZ,GAAM,mBAGN,CAAC,GAAW,GAAyB,IAAgB,QAGzD,EAA2B,EAAQ,EAAY,GAEhD,SAAS,UACT,KAAK,SACL,GAAI,WAtBL,CAwBE,GAAW,IAAkB,YAC7B,EAAC,OAAD,CAAM,UAAU,mBAAhB,CAA0B,mBACR,IAChB,IAAgB,eACd,IAAkB,MACjB,YACA,aACD,EAAsB,EAAc,CAAE,IAAI,QAEvC,GAEP,EACO,GAqBX,SAAS,EAAO,CAAE,WAAU,YAAW,GAAG,GAA+B,CACxE,OACC,EAACA,EAAM,OAAP,CAAc,UAAW,EAAG,oCAAqC,EAAU,CAAE,GAAI,EAC/E,WACa,CAAA,CAIjB,MAAM,EAAOA,EAAM,KACnB,EAAK,YAAc,gBAInB,SAAS,EAAY,EAA2B,CAC/C,GAAM,CAAE,SAAU,GAA4B,CAE9C,OACC,EAACA,EAAM,KAAP,CAAY,GAAI,WACd,EAAM,iBAAiB,CAAC,IAAK,GAC7B,EAACA,EAAM,IAAP,CAAA,SACE,EAAY,QAAQ,IAAK,GACzB,EAAC,EAAD,CAAA,SACE,EAAO,cACP,EAACA,EAAM,OAAP,EAAgC,CAAb,EAAO,GAAM,CAEhC,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAEtD,CANI,EAAO,GAMX,CACV,CACS,CAVI,EAAY,GAUhB,CACX,CACU,CAAA,CAQf,SAASC,EAAW,CAAE,MAAK,GAAG,GAAmC,CAChE,OACC,EAACD,EAAM,IAAP,CAAW,GAAI,WACb,EAAI,iBAAiB,CAAC,IAAK,GAC3B,EAAC,EAAD,CAAA,SACE,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,CAChD,CAFI,EAAK,GAET,CACV,CACS,CAAA,CAMd,SAAS,EAAgB,CAAE,WAAU,GAAG,GAAiC,CACxE,GAAM,CAAE,SAAU,GAA4B,CACxC,EAAkB,EAAM,eAAe,CAAC,OAE9C,OACC,EAACA,EAAM,IAAP,CAAW,GAAI,WACd,EAACA,EAAM,KAAP,CAAY,QAAS,EAAkB,WAAsB,CAAA,CAClD,CAAA,CAMd,SAAS,EAAW,CAAE,WAAU,YAAW,GAAG,GAAmC,CAChF,OACC,EAACA,EAAM,KAAP,CACC,UAAW,EACV,2HACA,EACA,CACD,GAAI,WAEJ,EAAC,MAAD,CAAK,UAAU,mBAAoB,WAAe,CAAA,CACtC,CAAA,CAKf,EAAK,YAAc,YACnB,EAAW,YAAc,sBACzB,EAAK,YAAc,gBACnB,EAAS,YAAc,oBACvB,EAAK,YAAc,gBACnB,EAAO,YAAc,kBACrB,EAAiB,YAAc,4BAC/B,EAAI,YAAc,eAkBlB,MAAM,EAAY,CAgBjB,OAcA,aAaA,KAAMA,EAAM,KAaZ,OAaA,WAWA,OAeA,SAgBA,mBAWA,IAAA,EACA,CAYD,SAAS,EAAgB,CAAE,YAAW,OAAM,GAAG,GAA+B,CAK7E,OAJI,IAAc,YAAc,CAAC,GAAQ,CAAC,EAClC,EAAC,MAAD,CAAK,cAAA,GAAY,GAAI,EAAS,CAAA,CAG/B,EAAC,EAAD,CAAgB,OAAiB,YAAW,GAAI,EAAS,CAAA,CAqBjE,SAAS,EACR,EACA,EACC,CACD,GAAI,CAAC,EAAO,YAAY,CACvB,OAGD,IAAM,EAAgB,EAAO,aAAa,CAM1C,OAF0B,EAFzB,OAAO,GAAkB,SAAW,EAAgB,WAEgB,EAAY,CAEjF,CACC,IAAK,WACJ,EAAO,cAAc,CACrB,OACD,IAAK,MACJ,EAAO,cAAc,GAAM,CAC3B,OACD,IAAK,OACJ,EAAO,cAAc,GAAK,CAC1B,OACD,QACC"}

package/dist/deep-non-nullable-BLM3Gz0I.d.ts

@@ -0,0 +1,8 @@
+//#region src/types/deep-non-nullable.d.ts
+/**
+ * Makes all properties in an object non-nullable, recursively.
+ */
+type DeepNonNullable<Type> = { [Property in keyof Type]-?: Type[Property] & {} };
+//#endregion
+export { DeepNonNullable as t };
+//# sourceMappingURL=deep-non-nullable-BLM3Gz0I.d.ts.map

package/dist/description-list.d.ts

@@ -1,7 +1,8 @@
-import * as react from 'react';
-import { ComponentProps } from 'react';
-import { W as WithAsChild } from './as-child-DJ7x3JFV.js';
+import { t as WithAsChild } from "./as-child-XMVTepJu.js";
+import * as react from "react";
+import { ComponentProps } from "react";
 
+//#region src/components/description-list/description-list.d.ts
 type DescriptionListProps = ComponentProps<"dl"> & WithAsChild;
 type DescriptionListItemProps = ComponentProps<"div"> & WithAsChild;
 type DescriptionListLabelProps = ComponentProps<"dt"> & WithAsChild;
@@ -35,61 +36,62 @@ type DescriptionListValueProps = ComponentProps<"dd"> & WithAsChild;
  * ```
  */
 declare const DescriptionList: {
-    /**
-     * The root container for a description list. Renders a `<dl>` element.
-     *
-     * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot
-     *
-     * @example
-     * ```tsx
-     * <DescriptionList.Root>
-     *   <DescriptionList.Item>
-     *     <DescriptionList.Label>Name</DescriptionList.Label>
-     *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
-     *   </DescriptionList.Item>
-     * </DescriptionList.Root>
-     * ```
-     */
-    readonly Root: react.ForwardRefExoticComponent<Omit<DescriptionListProps, "ref"> & react.RefAttributes<HTMLDListElement>>;
-    /**
-     * A wrapper that groups a label/value pair. Renders a `<div>` with a default
-     * subgrid layout.
-     *
-     * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem
-     *
-     * @example
-     * ```tsx
-     * <DescriptionList.Item>
-     *   <DescriptionList.Label>ID</DescriptionList.Label>
-     *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>
-     * </DescriptionList.Item>
-     * ```
-     */
-    readonly Item: react.ForwardRefExoticComponent<Omit<DescriptionListItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-    /**
-     * The label for a description list item. Renders a `<dt>` element.
-     *
-     * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel
-     *
-     * @example
-     * ```tsx
-     * <DescriptionList.Label>Name</DescriptionList.Label>
-     * ```
-     */
-    readonly Label: react.ForwardRefExoticComponent<Omit<DescriptionListLabelProps, "ref"> & react.RefAttributes<HTMLElement>>;
-    /**
-     * The value for a description list item. Renders a `<dd>` element.
-     *
-     * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue
-     *
-     * @example
-     * ```tsx
-     * <DescriptionList.Value>
-     *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5
-     * </DescriptionList.Value>
-     * ```
-     */
-    readonly Value: react.ForwardRefExoticComponent<Omit<DescriptionListValueProps, "ref"> & react.RefAttributes<HTMLElement>>;
+  /**
+   * The root container for a description list. Renders a `<dl>` element.
+   *
+   * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot
+   *
+   * @example
+   * ```tsx
+   * <DescriptionList.Root>
+   *   <DescriptionList.Item>
+   *     <DescriptionList.Label>Name</DescriptionList.Label>
+   *     <DescriptionList.Value>my-api-key</DescriptionList.Value>
+   *   </DescriptionList.Item>
+   * </DescriptionList.Root>
+   * ```
+   */
+  readonly Root: react.ForwardRefExoticComponent<Omit<DescriptionListProps, "ref"> & react.RefAttributes<HTMLDListElement>>;
+  /**
+   * A wrapper that groups a label/value pair. Renders a `<div>` with a default
+   * subgrid layout.
+   *
+   * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem
+   *
+   * @example
+   * ```tsx
+   * <DescriptionList.Item>
+   *   <DescriptionList.Label>ID</DescriptionList.Label>
+   *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>
+   * </DescriptionList.Item>
+   * ```
+   */
+  readonly Item: react.ForwardRefExoticComponent<Omit<DescriptionListItemProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+  /**
+   * The label for a description list item. Renders a `<dt>` element.
+   *
+   * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel
+   *
+   * @example
+   * ```tsx
+   * <DescriptionList.Label>Name</DescriptionList.Label>
+   * ```
+   */
+  readonly Label: react.ForwardRefExoticComponent<Omit<DescriptionListLabelProps, "ref"> & react.RefAttributes<HTMLElement>>;
+  /**
+   * The value for a description list item. Renders a `<dd>` element.
+   *
+   * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue
+   *
+   * @example
+   * ```tsx
+   * <DescriptionList.Value>
+   *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5
+   * </DescriptionList.Value>
+   * ```
+   */
+  readonly Value: react.ForwardRefExoticComponent<Omit<DescriptionListValueProps, "ref"> & react.RefAttributes<HTMLElement>>;
 };
-
+//#endregion
 export { DescriptionList, type DescriptionListProps };
+//# sourceMappingURL=description-list.d.ts.map

package/dist/description-list.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-ADF5DAYG.js";import{a as i}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as m}from"react/jsx-runtime";var l=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"dl",{ref:n,className:i("relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-base p-1",t),...s,children:e}));l.displayName="DescriptionList";var c=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"div",{ref:n,className:i("rounded-xs col-span-full grid grid-cols-subgrid items-center",t),...s,children:e}));c.displayName="DescriptionListItem";var a=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"dt",{ref:n,className:i("text-muted text-sm font-sans font-semibold min-w-36 p-3",t),...s,children:e}));a.displayName="DescriptionListLabel";var f=r(({asChild:o=!1,className:t,children:e,...s},n)=>m(o?p:"dd",{ref:n,className:i("text-body font-mono text-mono p-3",t),...s,children:e}));f.displayName="DescriptionListValue";var C={Root:l,Item:c,Label:a,Value:f};export{C as DescriptionList};
+import{t as e}from"./cx-bKromGBh.js";import{t}from"./slot-DdnjeV2n.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dl`,{ref:s,className:e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-base p-1`,i),...o,children:a}));i.displayName=`DescriptionList`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,className:e(`rounded-xs col-span-full grid grid-cols-subgrid items-center`,i),...o,children:a}));a.displayName=`DescriptionListItem`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dt`,{ref:s,className:e(`text-muted text-sm font-sans font-semibold min-w-36 p-3`,i),...o,children:a}));o.displayName=`DescriptionListLabel`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dd`,{ref:s,className:e(`text-body font-mono text-mono p-3`,i),...o,children:a}));s.displayName=`DescriptionListValue`;const c={Root:i,Item:a,Label:o,Value:s};export{c as DescriptionList};
 //# sourceMappingURL=description-list.js.map

package/dist/description-list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/description-list/description-list.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 DescriptionListProps = ComponentProps<\"dl\"> & WithAsChild;\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>Name</DescriptionList.Label>\n *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n *   </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"dl\">, DescriptionListProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dl\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-base p-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"DescriptionList\";\n\ntype DescriptionListItemProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`\n * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that\n * inherits column tracks from the root.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n *\n * @example\n * ```tsx\n * <DescriptionList.Item>\n *   <DescriptionList.Label>ID</DescriptionList.Label>\n *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n * </DescriptionList.Item>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, DescriptionListItemProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"rounded-xs col-span-full grid grid-cols-subgrid items-center\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nItem.displayName = \"DescriptionListItem\";\n\ntype DescriptionListLabelProps = ComponentProps<\"dt\"> & WithAsChild;\n\n/**\n * The label for a description list item. Renders as a `<dt>` element.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n *\n * @example\n * ```tsx\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"dt\">, DescriptionListLabelProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dt\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-muted text-sm font-sans font-semibold min-w-36 p-3\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nLabel.displayName = \"DescriptionListLabel\";\n\ntype DescriptionListValueProps = ComponentProps<\"dd\"> & WithAsChild;\n\n/**\n * The value for a description list item. Renders as a `<dd>` element.\n * Compose any content inside — the component is intentionally \"dumb\" and\n * imposes no layout on its children.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n *\n * @example\n * ```tsx\n * <DescriptionList.Value>\n *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * ```\n */\nconst Value = forwardRef<ComponentRef<\"dd\">, DescriptionListValueProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dd\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"text-body font-mono text-mono p-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nValue.displayName = \"DescriptionListValue\";\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource\n * (e.g., API keys, secrets, domains).\n *\n * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and\n * `DescriptionList.Value` as direct children.\n *\n * @see https://mantle.ngrok.com/components/description-list\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>Name</DescriptionList.Label>\n *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n *   </DescriptionList.Item>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>ID</DescriptionList.Label>\n *     <DescriptionList.Value>\n *       aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n *     </DescriptionList.Value>\n *   </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst DescriptionList = {\n\t/**\n\t * The root container for a description list. Renders a `<dl>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Root>\n\t *   <DescriptionList.Item>\n\t *     <DescriptionList.Label>Name</DescriptionList.Label>\n\t *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n\t *   </DescriptionList.Item>\n\t * </DescriptionList.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A wrapper that groups a label/value pair. Renders a `<div>` with a default\n\t * subgrid layout.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Item>\n\t *   <DescriptionList.Label>ID</DescriptionList.Label>\n\t *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The label for a description list item. Renders a `<dt>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * The value for a description list item. Renders a `<dd>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Value>\n\t *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n\t * </DescriptionList.Value>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tDescriptionList,\n};\n\nexport type {\n\t//,\n\tDescriptionListProps,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QA8BxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,KAGjC,CACA,IAAKD,EACL,UAAWE,EACV,wJACAL,CACD,EACC,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,kBAmBnB,IAAMS,EAAOR,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,+DAAgEL,CAAS,EACtF,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAK,EAAK,YAAc,sBAcnB,IAAMC,EAAQT,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,KAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,0DAA2DL,CAAS,EACjF,GAAGE,EAEH,SAAAD,EACF,CAGH,EACAM,EAAM,YAAc,uBAkBpB,IAAMC,EAAQV,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,GAAGC,CAAK,EAAGC,IAIlDP,EAHiBG,EAAUK,EAAO,KAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,oCAAqCL,CAAS,EAAI,GAAGE,EACtF,SAAAD,EACF,CAGH,EACAO,EAAM,YAAc,uBA8BpB,IAAMC,EAAkB,CAgBvB,KAAAZ,EAeA,KAAAS,EAWA,MAAAC,EAaA,MAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","rest","ref","Slot","cx","Item","Label","Value","DescriptionList"]}
+{"version":3,"file":"description-list.js","names":[],"sources":["../src/components/description-list/description-list.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 DescriptionListProps = ComponentProps<\"dl\"> & WithAsChild;\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>Name</DescriptionList.Label>\n *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n *   </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst Root = forwardRef<ComponentRef<\"dl\">, DescriptionListProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dl\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-base p-1\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"DescriptionList\";\n\ntype DescriptionListItemProps = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * A wrapper that groups a `DescriptionList.Label` and `DescriptionList.Value`\n * pair. Renders as a `<div>` inside the `<dl>` with a subgrid layout that\n * inherits column tracks from the root.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n *\n * @example\n * ```tsx\n * <DescriptionList.Item>\n *   <DescriptionList.Label>ID</DescriptionList.Label>\n *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n * </DescriptionList.Item>\n * ```\n */\nconst Item = forwardRef<ComponentRef<\"div\">, DescriptionListItemProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"rounded-xs col-span-full grid grid-cols-subgrid items-center\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nItem.displayName = \"DescriptionListItem\";\n\ntype DescriptionListLabelProps = ComponentProps<\"dt\"> & WithAsChild;\n\n/**\n * The label for a description list item. Renders as a `<dt>` element.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n *\n * @example\n * ```tsx\n * <DescriptionList.Label>Name</DescriptionList.Label>\n * ```\n */\nconst Label = forwardRef<ComponentRef<\"dt\">, DescriptionListLabelProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dt\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"text-muted text-sm font-sans font-semibold min-w-36 p-3\", className)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nLabel.displayName = \"DescriptionListLabel\";\n\ntype DescriptionListValueProps = ComponentProps<\"dd\"> & WithAsChild;\n\n/**\n * The value for a description list item. Renders as a `<dd>` element.\n * Compose any content inside — the component is intentionally \"dumb\" and\n * imposes no layout on its children.\n *\n * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n *\n * @example\n * ```tsx\n * <DescriptionList.Value>\n *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n * </DescriptionList.Value>\n * ```\n */\nconst Value = forwardRef<ComponentRef<\"dd\">, DescriptionListValueProps>(\n\t({ asChild = false, className, children, ...rest }, ref) => {\n\t\tconst Component = asChild ? Slot : \"dd\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"text-body font-mono text-mono p-3\", className)} {...rest}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nValue.displayName = \"DescriptionListValue\";\n\n/**\n * A semantically correct description list built on the HTML `<dl>` element.\n * Renders a list of label/value pairs with alternating row backgrounds,\n * commonly used in detail views to display metadata about a resource\n * (e.g., API keys, secrets, domains).\n *\n * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and\n * `DescriptionList.Value` as direct children.\n *\n * @see https://mantle.ngrok.com/components/description-list\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl\n *\n * @example\n * ```tsx\n * <DescriptionList.Root>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>Name</DescriptionList.Label>\n *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n *   </DescriptionList.Item>\n *   <DescriptionList.Item>\n *     <DescriptionList.Label>ID</DescriptionList.Label>\n *     <DescriptionList.Value>\n *       aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n *     </DescriptionList.Value>\n *   </DescriptionList.Item>\n * </DescriptionList.Root>\n * ```\n */\nconst DescriptionList = {\n\t/**\n\t * The root container for a description list. Renders a `<dl>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Root>\n\t *   <DescriptionList.Item>\n\t *     <DescriptionList.Label>Name</DescriptionList.Label>\n\t *     <DescriptionList.Value>my-api-key</DescriptionList.Value>\n\t *   </DescriptionList.Item>\n\t * </DescriptionList.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A wrapper that groups a label/value pair. Renders a `<div>` with a default\n\t * subgrid layout.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Item>\n\t *   <DescriptionList.Label>ID</DescriptionList.Label>\n\t *   <DescriptionList.Value>aigk_2fKm9x8Hn3...</DescriptionList.Value>\n\t * </DescriptionList.Item>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * The label for a description list item. Renders a `<dt>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Label>Name</DescriptionList.Label>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * The value for a description list item. Renders a `<dd>` element.\n\t *\n\t * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue\n\t *\n\t * @example\n\t * ```tsx\n\t * <DescriptionList.Value>\n\t *   aigk_2fKm9x8Hn3QpYT7zKlR0vW5\n\t * </DescriptionList.Value>\n\t * ```\n\t */\n\tValue,\n} as const;\n\nexport {\n\t//,\n\tDescriptionList,\n};\n\nexport type {\n\t//,\n\tDescriptionListProps,\n};\n"],"mappings":"kJA0BA,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,UAAW,EACV,wJACA,EACA,CACD,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,kBAmBnB,MAAM,EAAO,GACX,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,MAGlC,CACM,MACL,UAAW,EAAG,+DAAgE,EAAU,CACxF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAK,YAAc,sBAcnB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CACM,MACL,UAAW,EAAG,0DAA2D,EAAU,CACnF,GAAI,EAEH,WACU,CAAA,CAGd,CACD,EAAM,YAAc,uBAkBpB,MAAM,EAAQ,GACZ,CAAE,UAAU,GAAO,YAAW,WAAU,GAAG,GAAQ,IAIlD,EAHiB,EAAU,EAAO,KAGlC,CAAgB,MAAK,UAAW,EAAG,oCAAqC,EAAU,CAAE,GAAI,EACtF,WACU,CAAA,CAGd,CACD,EAAM,YAAc,uBA8BpB,MAAM,EAAkB,CAgBvB,OAeA,OAWA,QAaA,QACA"}