@ngrok/mantle 0.59.0 → 0.60.0

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-STC52KT6.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-BWGCYXLX.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.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 O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(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:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,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{a as r}from"./chunk-STC52KT6.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-DRVKSKOI.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.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 O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(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:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,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};
 //# 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 {\n\t$timeSortingDirection,\n\ttype SortingMode,\n} 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\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(\n\t\tcontext,\n\t\t\"useDataTableContext should only be used within a DataTable child component\",\n\t);\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#api-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 */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(\n\t\t() => ({ table }),\n\t\t[table],\n\t);\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<\n\tComponentProps<typeof Button>,\n\t\"icon\"\n> &\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#api-data-table-header-sort-button\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(\"flex justify-start w-full h-full rounded-none\", className)}\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#api-data-table-header\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<TData, TValue>({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header\n\t\t\tclassName={cx(\"has-[[data-table-header-action]]:px-0\", className)}\n\t\t\t{...props}\n\t\t>\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<\n\tComponentProps<typeof Table.Row>,\n\t\"children\"\n> & {\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({\n\tchildren,\n\tclassName,\n\t...props\n}: 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#api-data-table\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#api-data-table-action-cell\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#api-data-table-cell\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#api-data-table-body\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#api-data-table-empty-row\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#api-data-table-head\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#api-data-table-header\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#api-data-table-header-sort-button\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#api-data-table-row\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(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\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 = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: 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>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\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":"2WAAA,WAAc,wBCAd,OAKC,cAAAA,MACM,wBACP,OAEC,YAAAC,EAEA,iBAAAC,EACA,cAAAC,EACA,WAAAC,MACM,QACP,OAAOC,MAAe,iBCZtB,IAAMC,EAA2B,CAChC,WACA,MACA,MACD,EAEMC,EAAmB,CACxB,WACA,OACA,KACD,EAKA,SAASC,EACRC,EACAC,EACC,CAMD,OAAOC,EAJND,IAAgB,eACbJ,EACAC,EAEoCE,CAAoB,GAAK,UAClE,CAMA,SAASE,EACRC,EACAC,EACAC,EACC,CACD,GAAIF,EAAK,SAAW,EACnB,OAAOE,EAGR,IAAMC,EAAmBH,EAAK,UAAWI,GAASA,IAASH,CAAW,EACtE,GAAIE,IAAqB,GACxB,OAAOD,EAGR,IAAMG,GAAaF,EAAmB,GAAKH,EAAK,OAChD,OAAOA,EAAK,GAAGK,CAAS,GAAKH,CAC9B,CD2BI,cAAAI,EA4GA,QAAAC,MA5GA,oBA7CJ,IAAMC,EAAmBC,EAAiD,IAAI,EAK9E,SAASC,GAA6B,CACrC,IAAMC,EAAUC,EAAWJ,CAAgB,EAE3C,OAAAK,EACCF,EACA,4EACD,EAEOA,CACR,CAsBA,SAASG,EAAY,CAAE,SAAAC,EAAU,MAAAC,EAAO,GAAGC,CAAM,EAA0B,CAC1E,IAAMN,EAAwCO,EAC7C,KAAO,CAAE,MAAAF,CAAM,GACf,CAACA,CAAK,CACP,EAEA,OACCV,EAACE,EAAiB,SAAjB,CAA0B,MAAOG,EACjC,SAAAL,EAACa,EAAM,KAAN,CAAY,GAAGF,EACf,SAAAX,EAACa,EAAM,QAAN,CAAe,SAAAJ,EAAS,EAC1B,EACD,CAEF,CA4DA,SAASK,EAAgC,CACxC,SAAAL,EACA,UAAAM,EACA,OAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,MAChB,YAAAC,EACA,SAAUC,EACV,QAAAC,EACA,GAAGV,CACJ,EAAkD,CACjD,IAAMW,EAAiBN,EAAO,YAAY,EACpCO,EAAU,CAACN,GAAkBD,EAAO,WAAW,EAE/CQ,EACLD,GAAW,OAAOD,GAAmB,SAAWA,EAAiB,WAE5DG,EAAWL,IAAeI,CAAa,GAC5CxB,EAAC0B,EAAA,CAAgB,KAAMP,EAAa,UAAWK,EAAe,EAG/D,OACCvB,EAAC0B,EAAA,CACA,WAAW,QACX,UAAWC,EAAG,gDAAiDb,CAAS,EACxE,sBAAqBS,EACrB,2BAAwB,GACxB,KAAMC,EACN,cAAeP,EACf,QAAUW,GAAU,CACnBR,IAAUQ,CAAK,EACX,CAAAA,EAAM,mBAGN,CAACN,GAAWN,GAAkB,OAAOE,EAAgB,KAGzDW,EAA2Bd,EAAQG,CAAW,EAC/C,EACA,SAAS,UACT,KAAK,SACJ,GAAGR,EAEH,UAAAY,GAAWC,IAAkB,YAC7BvB,EAAC,QAAK,UAAU,UAAU,6BACR,IAChBkB,IAAgB,eACdK,IAAkB,MACjB,YACA,aACDO,EAAsBP,CAAa,EAAG,IAAI,SAE9C,EAEAf,GACF,CAEF,CAmBA,SAASuB,EAAsB,CAC9B,SAAAvB,EACA,UAAAM,EACA,GAAGJ,CACJ,EAAyB,CACxB,OACCX,EAACa,EAAM,OAAN,CACA,UAAWe,EAAG,wCAAyCb,CAAS,EAC/D,GAAGJ,EAEH,SAAAF,EACF,CAEF,CAEA,IAAMwB,EAAOpB,EAAM,KACnBoB,EAAK,YAAc,gBAInB,SAASC,EAAYvB,EAA2B,CAC/C,GAAM,CAAE,MAAAD,CAAM,EAAIN,EAA2B,EAE7C,OACCJ,EAACa,EAAM,KAAN,CAAY,GAAGF,EACd,SAAAD,EAAM,gBAAgB,EAAE,IAAKyB,GAC7BnC,EAACa,EAAM,IAAN,CACC,SAAAsB,EAAY,QAAQ,IAAKC,GACzBpC,EAACqC,EAAA,CACC,SAAAD,EAAO,cACPpC,EAACa,EAAM,OAAN,GAAkBuB,EAAO,EAAI,EAE9BE,EAAWF,EAAO,OAAO,UAAU,OAAQA,EAAO,WAAW,CAAC,GAJjDA,EAAO,EAMtB,CACA,GATcD,EAAY,EAU5B,CACA,EACF,CAEF,CASA,SAASI,EAAW,CAAE,IAAAC,EAAK,GAAG7B,CAAM,EAA6B,CAChE,OACCX,EAACa,EAAM,IAAN,CAAW,GAAGF,EACb,SAAA6B,EAAI,gBAAgB,EAAE,IAAKC,GAC3BzC,EAACqC,EAAA,CACC,SAAAC,EAAWG,EAAK,OAAO,UAAU,KAAMA,EAAK,WAAW,CAAC,GAD3CA,EAAK,EAEpB,CACA,EACF,CAEF,CAIA,SAASC,EAAgB,CAAE,SAAAjC,EAAU,GAAGE,CAAM,EAA2B,CACxE,GAAM,CAAE,MAAAD,CAAM,EAAIN,EAA2B,EACvCuC,EAAkBjC,EAAM,cAAc,EAAE,OAE9C,OACCV,EAACa,EAAM,IAAN,CAAW,GAAGF,EACd,SAAAX,EAACa,EAAM,KAAN,CAAW,QAAS8B,EAAkB,SAAAlC,EAAS,EACjD,CAEF,CAIA,SAASmC,EAAW,CACnB,SAAAnC,EACA,UAAAM,EACA,GAAGJ,CACJ,EAA6B,CAC5B,OACCX,EAACa,EAAM,KAAN,CACA,UAAWe,EACV,+HACAb,CACD,EACC,GAAGJ,EAEJ,SAAAX,EAAC,OAAI,UAAU,mBAAoB,SAAAS,EAAS,EAC7C,CAEF,CAGAD,EAAK,YAAc,YACnBoC,EAAW,YAAc,sBACzBX,EAAK,YAAc,gBACnBS,EAAS,YAAc,oBACvBR,EAAK,YAAc,gBACnBF,EAAO,YAAc,kBACrBlB,EAAiB,YAAc,4BAC/ByB,EAAI,YAAc,eAkBlB,IAAMM,EAAY,CAgBjB,KAAArC,EAcA,WAAAoC,EAaA,KAAM/B,EAAM,KAaZ,KAAAoB,EAaA,SAAAS,EAWA,KAAAR,EAeA,OAAAF,EAgBA,iBAAAlB,EAWA,IAAAyB,CACD,EAYA,SAASO,EAAgB,CAAE,UAAAC,EAAW,KAAAC,EAAM,GAAGC,CAAM,EAAyB,CAC7E,OAAIF,IAAc,YAAc,CAACC,GAAQ,CAACD,EAClCG,EAAC,OAAI,cAAW,GAAE,GAAGD,EAAO,EAG7BC,EAACC,EAAA,CAAS,KAAMH,EAAM,UAAWD,EAAY,GAAGE,EAAO,CAC/D,CAoBA,SAASG,EACRC,EACAC,EACC,CACD,GAAI,CAACD,EAAO,WAAW,EACtB,OAGD,IAAME,EAAgBF,EAAO,YAAY,EASzC,OAL0BG,EAFzB,OAAOD,GAAkB,SAAWA,EAAgB,WAIpDD,CACD,EAE2B,CAC1B,IAAK,WACJD,EAAO,aAAa,EACpB,OACD,IAAK,MACJA,EAAO,cAAc,EAAK,EAC1B,OACD,IAAK,OACJA,EAAO,cAAc,EAAI,EACzB,OACD,QACC,MACF,CACD","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,"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 {\n\t$timeSortingDirection,\n\ttype SortingMode,\n} 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\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(\n\t\tcontext,\n\t\t\"useDataTableContext should only be used within a DataTable child component\",\n\t);\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#api-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 */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(\n\t\t() => ({ table }),\n\t\t[table],\n\t);\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<\n\tComponentProps<typeof Button>,\n\t\"icon\"\n> &\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#api-data-table-header-sort-button\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(\"flex justify-start w-full h-full rounded-none\", className)}\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#api-data-table-header\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<TData, TValue>({\n\tchildren,\n\tclassName,\n\t...props\n}: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header\n\t\t\tclassName={cx(\"has-[[data-table-header-action]]:px-0\", className)}\n\t\t\t{...props}\n\t\t>\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<\n\tComponentProps<typeof Table.Row>,\n\t\"children\"\n> & {\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({\n\tchildren,\n\tclassName,\n\t...props\n}: 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#api-data-table\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#api-data-table-action-cell\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#api-data-table-cell\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#api-data-table-body\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#api-data-table-empty-row\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#api-data-table-head\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#api-data-table-header\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#api-data-table-header-sort-button\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#api-data-table-row\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(\n\t\tcurrentSortDirection,\n\t\tsortingMode,\n\t);\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 = [\n\t\"unsorted\",\n\t\"asc\",\n\t\"desc\",\n] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\n\t\"unsorted\",\n\t\"desc\",\n\t\"asc\",\n] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(\n\tcurrentSortDirection: SortDirection,\n\tsortingMode: SortingMode,\n) {\n\tconst sortOrder =\n\t\tsortingMode === \"alphanumeric\"\n\t\t\t? alphanumericSortingOrder\n\t\t\t: 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>(\n\tlist: T[],\n\tcurrentItem: T,\n\tfallback?: T | undefined,\n) {\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"]}

package/dist/dialog.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-GPMVEDRP.js";import{i as o}from"./chunk-VIKPHWPP.js";import"./chunk-WY3TZBNK.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-QXNUFNG4.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{r as Dialog,o as isDialogOverlayTarget};
+import{a as r}from"./chunk-4IX2UWKO.js";import{i as o}from"./chunk-OE4YWO7O.js";import"./chunk-UKS7NFNC.js";import"./chunk-VBNDWNIJ.js";import"./chunk-6J7D73WA.js";import"./chunk-NJNFZ2EG.js";import"./chunk-KMNACVH6.js";import"./chunk-BRV6XRNS.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import"./chunk-PFXFESEN.js";export{r as Dialog,o as isDialogOverlayTarget};
 //# sourceMappingURL=dialog.js.map

package/dist/dropdown-menu.js

@@ -1,2 +1,2 @@
-import{b as c}from"./chunk-4DVFVPF2.js";import{a as s}from"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{CaretRightIcon as S}from"@phosphor-icons/react/CaretRight";import{CheckIcon as f}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as o,jsxs as l}from"react/jsx-runtime";var g=e.Root;g.displayName="DropdownMenu";var h=e.Trigger;h.displayName="DropdownMenuTrigger";var v=e.Group;v.displayName="DropdownMenuGroup";var m=e.Portal;m.displayName="DropdownMenuPortal";var w=e.Sub;w.displayName="DropdownMenuSub";var b=e.RadioGroup;b.displayName="DropdownMenuRadioGroup";var M=d(({className:t,inset:n,children:r,...i},p)=>l(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-hidden","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),ref:p,...i,children:[r,o("span",{className:"absolute right-2 flex items-center",children:o(s,{svg:o(S,{weight:"bold"}),className:"size-4"})})]}));M.displayName="DropdownMenuSubTrigger";var D=d(({className:t,loop:n=!0,...r},i)=>o(m,{children:o(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",t),loop:n,ref:i,...r})}));D.displayName="DropdownMenuSubContent";var P=d(({className:t,onClick:n,loop:r=!0,width:i,...p},k)=>o(m,{children:o(e.Content,{ref:k,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-hidden","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",t),loop:r,onClick:u=>{u.stopPropagation(),n?.(u)},...p})}));P.displayName="DropdownMenuContent";var y=d(({className:t,inset:n,...r},i)=>o(e.Item,{ref:i,className:a("relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-hidden transition-colors","data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover","focus:bg-accent focus:text-accent-foreground","data-disabled:cursor-default data-disabled:opacity-50","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),...r}));y.displayName="DropdownMenuItem";var x=d(({className:t,children:n,checked:r,...i},p)=>l(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",t),checked:r,...i,children:[o("span",{className:"absolute right-2 flex items-center",children:o(e.ItemIndicator,{children:o(s,{svg:o(f,{weight:"bold"}),className:"size-4"})})}),n]}));x.displayName="DropdownMenuCheckboxItem";var C=d(({className:t,children:n,...r},i)=>l(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",t),ref:i,...r,children:[o("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:o(e.ItemIndicator,{children:o(s,{svg:o(f,{weight:"bold"}),className:"size-4"})})}),n]}));C.displayName="DropdownMenuRadioItem";var R=d(({className:t,inset:n,...r},i)=>o(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",n&&"pl-8",t),...r}));R.displayName="DropdownMenuLabel";var N=d(({className:t,...n},r)=>o(c,{ref:r,className:a("-mx-1.25 my-1 w-auto",t),...n}));N.displayName="DropdownMenuSeparator";var I=({className:t,...n})=>o("span",{className:a("ml-auto text-xs tracking-widest opacity-60",t),...n});I.displayName="DropdownMenuShortcut";var z={Root:g,CheckboxItem:x,Content:P,Group:v,Item:y,Label:R,RadioGroup:b,RadioItem:C,Separator:N,Shortcut:I,Sub:w,SubContent:D,SubTrigger:M,Trigger:h};export{z as DropdownMenu};
+import{b as c}from"./chunk-YKYEISYH.js";import{a as s}from"./chunk-2NIR7PCL.js";import"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a}from"./chunk-PFXFESEN.js";import{CaretRightIcon as S}from"@phosphor-icons/react/CaretRight";import{CheckIcon as f}from"@phosphor-icons/react/Check";import*as e from"@radix-ui/react-dropdown-menu";import{forwardRef as d}from"react";import{jsx as o,jsxs as l}from"react/jsx-runtime";var g=e.Root;g.displayName="DropdownMenu";var h=e.Trigger;h.displayName="DropdownMenuTrigger";var v=e.Group;v.displayName="DropdownMenuGroup";var m=e.Portal;m.displayName="DropdownMenuPortal";var w=e.Sub;w.displayName="DropdownMenuSub";var b=e.RadioGroup;b.displayName="DropdownMenuRadioGroup";var M=d(({className:t,inset:n,children:r,...i},p)=>l(e.SubTrigger,{className:a("focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-hidden","data-highlighted:bg-popover-hover data-state-open:bg-popover-hover","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),ref:p,...i,children:[r,o("span",{className:"absolute right-2 flex items-center",children:o(s,{svg:o(S,{weight:"bold"}),className:"size-4"})})]}));M.displayName="DropdownMenuSubTrigger";var D=d(({className:t,loop:n=!0,...r},i)=>o(m,{children:o(e.SubContent,{className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",t),loop:n,ref:i,...r})}));D.displayName="DropdownMenuSubContent";var P=d(({className:t,onClick:n,loop:r=!0,width:i,...p},k)=>o(m,{children:o(e.Content,{ref:k,className:a("scrollbar","text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-hidden","data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95","my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto",i==="trigger"&&"w-[var(--radix-dropdown-menu-trigger-width)]",t),loop:r,onClick:u=>{u.stopPropagation(),n?.(u)},...p})}));P.displayName="DropdownMenuContent";var y=d(({className:t,inset:n,...r},i)=>o(e.Item,{ref:i,className:a("relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-hidden transition-colors","data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover","focus:bg-accent focus:text-accent-foreground","data-disabled:cursor-default data-disabled:opacity-50","[&>svg]:size-5 [&_svg]:shrink-0",n&&"pl-8",t),...r}));y.displayName="DropdownMenuItem";var x=d(({className:t,children:n,checked:r,...i},p)=>l(e.CheckboxItem,{ref:p,className:a("text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium","[&>svg]:size-5 [&_svg]:shrink-0",t),checked:r,...i,children:[o("span",{className:"absolute right-2 flex items-center",children:o(e.ItemIndicator,{children:o(s,{svg:o(f,{weight:"bold"}),className:"size-4"})})}),n]}));x.displayName="DropdownMenuCheckboxItem";var C=d(({className:t,children:n,...r},i)=>l(e.RadioItem,{className:a("group/dropdown-menu-radio-item","text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none","data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover","aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9","[&>svg]:size-5 [&_svg]:shrink-0",t),ref:i,...r,children:[o("span",{className:"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex",children:o(e.ItemIndicator,{children:o(s,{svg:o(f,{weight:"bold"}),className:"size-4"})})}),n]}));C.displayName="DropdownMenuRadioItem";var R=d(({className:t,inset:n,...r},i)=>o(e.Label,{ref:i,className:a("px-2 py-1.5 text-sm font-semibold",n&&"pl-8",t),...r}));R.displayName="DropdownMenuLabel";var N=d(({className:t,...n},r)=>o(c,{ref:r,className:a("-mx-1.25 my-1 w-auto",t),...n}));N.displayName="DropdownMenuSeparator";var I=({className:t,...n})=>o("span",{className:a("ml-auto text-xs tracking-widest opacity-60",t),...n});I.displayName="DropdownMenuShortcut";var z={Root:g,CheckboxItem:x,Content:P,Group:v,Item:y,Label:R,RadioGroup:b,RadioItem:C,Separator:N,Shortcut:I,Sub:w,SubContent:D,SubTrigger:M,Trigger:h};export{z as DropdownMenu};
 //# sourceMappingURL=dropdown-menu.js.map

package/dist/dropdown-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Root = DropdownMenuPrimitive.Root;\nRoot.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Trigger = DropdownMenuPrimitive.Trigger;\nTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst Group = DropdownMenuPrimitive.Group;\nGroup.displayName = \"DropdownMenuGroup\";\n\n/**\n * The portal container for rendering dropdown content outside the normal DOM tree.\n */\nconst Portal = DropdownMenuPrimitive.Portal;\nPortal.displayName = \"DropdownMenuPortal\";\n\nconst Sub = DropdownMenuPrimitive.Sub;\nSub.displayName = \"DropdownMenuSub\";\n\nconst RadioGroup = DropdownMenuPrimitive.RadioGroup;\nRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\n/**\n * A trigger for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger\n */\nconst SubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-hidden\",\n\t\t\t\"data-highlighted:bg-popover-hover data-state-open:bg-popover-hover\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\n/**\n * The content container for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content\n */\nconst SubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.Content\n> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-hidden\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-dropdown-menu-trigger-width)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-hidden transition-colors\",\n\t\t\t\"data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-disabled:cursor-default data-disabled:opacity-50\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nItem.displayName = \"DropdownMenuItem\";\n\n/**\n * A menu item with a checkbox that can be controlled or uncontrolled.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item\n */\nconst CheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\n/**\n * A menu item with a radio button that can be controlled or uncontrolled.\n * Used within a RadioGroup to create a set of mutually exclusive options.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item\n */\nconst RadioItem = forwardRef<ComponentRef<\"input\">, DropdownMenuRadioItemProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cx(\n\t\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9\",\n\t\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\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<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t),\n);\nRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/**\n * A label for a group of dropdown menu items.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label\n */\nconst Label = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"px-2 py-1.5 text-sm font-semibold\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * A visual separator between dropdown menu items or groups.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator\n */\nconst DropdownSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst Shortcut = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nShortcut.displayName = \"DropdownMenuShortcut\";\n\n/**\n * A menu of options or actions, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst DropdownMenu = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button>Open Menu</Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A checkbox item in the dropdown menu that can be toggled on and off.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>\n\t *       Show notifications\n\t *     </DropdownMenu.CheckboxItem>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tCheckboxItem,\n\t/**\n\t * The container for the dropdown menu content. Appears in a portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content width=\"trigger\">\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group container for organizing related dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Group>\n\t *       <DropdownMenu.Label>Account</DropdownMenu.Label>\n\t *       <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *       <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *     </DropdownMenu.Group>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A standard item in the dropdown menu that can be selected or activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item onSelect={() => handleEdit()}>\n\t *       Edit\n\t *     </DropdownMenu.Item>\n\t *     <DropdownMenu.Item disabled>\n\t *       Delete\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * A label for grouping and describing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Label>My Account</DropdownMenu.Label>\n\t *     <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * A radio group container for exclusive selection within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>\n\t *       <DropdownMenu.RadioItem value=\"option1\">Option 1</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"option2\">Option 2</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioGroup,\n\t/**\n\t * A radio item in the dropdown menu where only one item in the group can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value=\"small\" onValueChange={setSize}>\n\t *       <DropdownMenu.RadioItem value=\"small\">Small</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"medium\">Medium</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"large\">Large</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioItem,\n\t/**\n\t * A visual separator for dividing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Copy</DropdownMenu.Item>\n\t *     <DropdownMenu.Separator />\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSeparator: DropdownSeparator,\n\t/**\n\t * A keyboard shortcut indicator for dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>\n\t *       Save\n\t *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tShortcut,\n\t/**\n\t * A submenu container for creating nested dropdown menus.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSub,\n\t/**\n\t * The content container for submenu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubContent,\n\t/**\n\t * The trigger item that opens a submenu when hovered or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Email</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubTrigger,\n\t/**\n\t * The trigger button that opens the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Menu\n\t *     </Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDropdownMenu,\n};\n"],"mappings":"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","names":["CaretRightIcon","CheckIcon","DropdownMenuPrimitive","forwardRef","jsx","jsxs","Root","Trigger","Group","Portal","Sub","RadioGroup","SubTrigger","forwardRef","className","inset","children","props","ref","cx","Icon","CaretRightIcon","SubContent","loop","Content","onClick","width","event","Item","CheckboxItem","checked","CheckIcon","RadioItem","Label","DropdownSeparator","Separator","Shortcut","DropdownMenu"]}
+{"version":3,"sources":["../src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["import { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithoutRef, ComponentRef } from \"react\";\nimport { forwardRef } from \"react\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport { Separator } from \"../separator/separator.js\";\n\n/**\n * A menu of options or actions, triggered by a button.\n * This is the root, stateful component that manages the open/closed state of the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Root = DropdownMenuPrimitive.Root;\nRoot.displayName = \"DropdownMenu\";\n\n/**\n * The trigger button that opens the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Trigger = DropdownMenuPrimitive.Trigger;\nTrigger.displayName = \"DropdownMenuTrigger\";\n\nconst Group = DropdownMenuPrimitive.Group;\nGroup.displayName = \"DropdownMenuGroup\";\n\n/**\n * The portal container for rendering dropdown content outside the normal DOM tree.\n */\nconst Portal = DropdownMenuPrimitive.Portal;\nPortal.displayName = \"DropdownMenuPortal\";\n\nconst Sub = DropdownMenuPrimitive.Sub;\nSub.displayName = \"DropdownMenuSub\";\n\nconst RadioGroup = DropdownMenuPrimitive.RadioGroup;\nRadioGroup.displayName = \"DropdownMenuRadioGroup\";\n\n/**\n * A trigger for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger\n */\nconst SubTrigger = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, children, ...props }, ref) => (\n\t<DropdownMenuPrimitive.SubTrigger\n\t\tclassName={cx(\n\t\t\t\"focus:bg-accent data-state-open:bg-accent relative flex select-none items-center rounded py-1.5 pl-2 pr-9 text-sm outline-hidden\",\n\t\t\t\"data-highlighted:bg-popover-hover data-state-open:bg-popover-hover\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\tref={ref}\n\t\t{...props}\n\t>\n\t\t{children}\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<Icon svg={<CaretRightIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t</span>\n\t</DropdownMenuPrimitive.SubTrigger>\n));\nSubTrigger.displayName = \"DropdownMenuSubTrigger\";\n\n/**\n * The content container for a dropdown menu sub-menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content\n */\nconst SubContent = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.SubContent>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>\n>(({ className, loop = true, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.SubContent\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nSubContent.displayName = \"DropdownMenuSubContent\";\n\ntype DropdownMenuContentProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.Content\n> & {\n\t/**\n\t * Whether the DropdownMenuContent should match the width of the trigger or use the intrinsic content width.\n\t */\n\twidth?: \"trigger\" | \"content\";\n};\n\n/**\n * The container for the dropdown menu content.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Content = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Content>,\n\tDropdownMenuContentProps\n>(({ className, onClick, loop = true, width, ...props }, ref) => (\n\t<Portal>\n\t\t<DropdownMenuPrimitive.Content\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"scrollbar\",\n\t\t\t\t\"text-popover-foreground border-popover bg-popover p-1.25 z-50 min-w-[8rem] overflow-hidden rounded-md border shadow-xl outline-hidden\",\n\t\t\t\t\"data-side-bottom:slide-in-from-top-2 data-side-left:slide-in-from-right-2 data-side-right:slide-in-from-left-2 data-side-top:slide-in-from-bottom-2 data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95\",\n\t\t\t\t\"my-2 max-h-[calc(var(--radix-dropdown-menu-content-available-height)_-_16px)] overflow-auto\",\n\t\t\t\twidth === \"trigger\" && \"w-[var(--radix-dropdown-menu-trigger-width)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tloop={loop}\n\t\t\tonClick={(event) => {\n\t\t\t\t/**\n\t\t\t\t * Prevent the click event from propagating up to parent/containing elements\n\t\t\t\t * of the DropdownMenu\n\t\t\t\t */\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t</Portal>\n));\nContent.displayName = \"DropdownMenuContent\";\n\n/**\n * An item in the dropdown menu.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst Item = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Item>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Item\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"relative flex cursor-pointer select-none items-center rounded px-2 py-1.5 text-sm font-normal outline-hidden transition-colors\",\n\t\t\t\"data-highlighted:bg-popover-hover data-active-item:dark:bg-popover-hover\",\n\t\t\t\"focus:bg-accent focus:text-accent-foreground\",\n\t\t\t\"data-disabled:cursor-default data-disabled:opacity-50\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nItem.displayName = \"DropdownMenuItem\";\n\n/**\n * A menu item with a checkbox that can be controlled or uncontrolled.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item\n */\nconst CheckboxItem = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n\t<DropdownMenuPrimitive.CheckboxItem\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 pl-2 pr-9 text-sm font-normal outline-hidden\",\n\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium\",\n\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\n\t\t\tclassName,\n\t\t)}\n\t\tchecked={checked}\n\t\t{...props}\n\t>\n\t\t<span className=\"absolute right-2 flex items-center\">\n\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t</span>\n\t\t{children}\n\t</DropdownMenuPrimitive.CheckboxItem>\n));\nCheckboxItem.displayName = \"DropdownMenuCheckboxItem\";\n\ntype DropdownMenuRadioItemProps = ComponentPropsWithoutRef<\n\ttypeof DropdownMenuPrimitive.RadioItem\n> & {\n\tname?: string;\n\tid?: string;\n};\n\n/**\n * A menu item with a radio button that can be controlled or uncontrolled.\n * Used within a RadioGroup to create a set of mutually exclusive options.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item\n */\nconst RadioItem = forwardRef<ComponentRef<\"input\">, DropdownMenuRadioItemProps>(\n\t({ className, children, ...props }, ref) => (\n\t\t<DropdownMenuPrimitive.RadioItem\n\t\t\tclassName={cx(\n\t\t\t\t\"group/dropdown-menu-radio-item\",\n\t\t\t\t\"text-strong data-disabled:pointer-events-none data-disabled:opacity-50 relative flex cursor-pointer select-none items-center gap-2 rounded py-1.5 px-2 text-sm font-normal outline-none\",\n\t\t\t\t\"data-highlighted:bg-popover-hover data-highlighted:dark:bg-popover-hover\",\n\t\t\t\t\"aria-checked:!bg-filled-accent aria-checked:text-on-filled aria-checked:font-medium aria-checked:pr-9\",\n\t\t\t\t\"[&>svg]:size-5 [&_svg]:shrink-0\",\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<span className=\"absolute right-2 items-center hidden group-aria-checked/dropdown-menu-radio-item:flex\">\n\t\t\t\t<DropdownMenuPrimitive.ItemIndicator>\n\t\t\t\t\t<Icon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t</DropdownMenuPrimitive.ItemIndicator>\n\t\t\t</span>\n\t\t\t{children}\n\t\t</DropdownMenuPrimitive.RadioItem>\n\t),\n);\nRadioItem.displayName = \"DropdownMenuRadioItem\";\n\n/**\n * A label for a group of dropdown menu items.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label\n */\nconst Label = forwardRef<\n\tComponentRef<typeof DropdownMenuPrimitive.Label>,\n\tComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {\n\t\tinset?: boolean;\n\t}\n>(({ className, inset, ...props }, ref) => (\n\t<DropdownMenuPrimitive.Label\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"px-2 py-1.5 text-sm font-semibold\",\n\t\t\tinset && \"pl-8\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nLabel.displayName = \"DropdownMenuLabel\";\n\n/**\n * A visual separator between dropdown menu items or groups.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator\n */\nconst DropdownSeparator = forwardRef<\n\tComponentRef<typeof Separator>,\n\tComponentPropsWithoutRef<typeof Separator>\n>(({ className, ...props }, ref) => (\n\t<Separator\n\t\tref={ref}\n\t\tclassName={cx(\"-mx-1.25 my-1 w-auto\", className)}\n\t\t{...props}\n\t/>\n));\nDropdownSeparator.displayName = \"DropdownMenuSeparator\";\n\nconst Shortcut = ({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n\treturn (\n\t\t<span\n\t\t\tclassName={cx(\"ml-auto text-xs tracking-widest opacity-60\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n};\nShortcut.displayName = \"DropdownMenuShortcut\";\n\n/**\n * A menu of options or actions, triggered by a button.\n *\n * @see https://mantle.ngrok.com/components/dropdown-menu\n *\n * @example\n * ```tsx\n * <DropdownMenu.Root>\n *   <DropdownMenu.Trigger asChild>\n *     <Button type=\"button\" appearance=\"outlined\">\n *       Open Menu\n *     </Button>\n *   </DropdownMenu.Trigger>\n *   <DropdownMenu.Content>\n *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n *     <DropdownMenu.Item>Item 2</DropdownMenu.Item>\n *   </DropdownMenu.Content>\n * </DropdownMenu.Root>\n * ```\n */\nconst DropdownMenu = {\n\t/**\n\t * The root, stateful component that manages the open/closed state of the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button>Open Menu</Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A checkbox item in the dropdown menu that can be toggled on and off.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-checkbox-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.CheckboxItem checked={true} onCheckedChange={setChecked}>\n\t *       Show notifications\n\t *     </DropdownMenu.CheckboxItem>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tCheckboxItem,\n\t/**\n\t * The container for the dropdown menu content. Appears in a portal with scrolling and animations.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content width=\"trigger\">\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tContent,\n\t/**\n\t * A group container for organizing related dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Group>\n\t *       <DropdownMenu.Label>Account</DropdownMenu.Label>\n\t *       <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *       <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *     </DropdownMenu.Group>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tGroup,\n\t/**\n\t * A standard item in the dropdown menu that can be selected or activated.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item onSelect={() => handleEdit()}>\n\t *       Edit\n\t *     </DropdownMenu.Item>\n\t *     <DropdownMenu.Item disabled>\n\t *       Delete\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tItem,\n\t/**\n\t * A label for grouping and describing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-label\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Label>My Account</DropdownMenu.Label>\n\t *     <DropdownMenu.Item>Profile</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Settings</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tLabel,\n\t/**\n\t * A radio group container for exclusive selection within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-group\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value={value} onValueChange={setValue}>\n\t *       <DropdownMenu.RadioItem value=\"option1\">Option 1</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"option2\">Option 2</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioGroup,\n\t/**\n\t * A radio item in the dropdown menu where only one item in the group can be selected.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-radio-item\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.RadioGroup value=\"small\" onValueChange={setSize}>\n\t *       <DropdownMenu.RadioItem value=\"small\">Small</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"medium\">Medium</DropdownMenu.RadioItem>\n\t *       <DropdownMenu.RadioItem value=\"large\">Large</DropdownMenu.RadioItem>\n\t *     </DropdownMenu.RadioGroup>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tRadioItem,\n\t/**\n\t * A visual separator for dividing sections within the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-separator\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Edit</DropdownMenu.Item>\n\t *     <DropdownMenu.Item>Copy</DropdownMenu.Item>\n\t *     <DropdownMenu.Separator />\n\t *     <DropdownMenu.Item>Delete</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSeparator: DropdownSeparator,\n\t/**\n\t * A keyboard shortcut indicator for dropdown menu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-shortcut\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>\n\t *       Save\n\t *       <DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>\n\t *     </DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tShortcut,\n\t/**\n\t * A submenu container for creating nested dropdown menus.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>More options</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Sub item 1</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Sub item 2</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSub,\n\t/**\n\t * The content container for submenu items.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Export</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Export as PDF</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Export as CSV</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubContent,\n\t/**\n\t * The trigger item that opens a submenu when hovered or focused.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-sub-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger>Open</DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Sub>\n\t *       <DropdownMenu.SubTrigger>Share</DropdownMenu.SubTrigger>\n\t *       <DropdownMenu.SubContent>\n\t *         <DropdownMenu.Item>Email</DropdownMenu.Item>\n\t *         <DropdownMenu.Item>Copy link</DropdownMenu.Item>\n\t *       </DropdownMenu.SubContent>\n\t *     </DropdownMenu.Sub>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tSubTrigger,\n\t/**\n\t * The trigger button that opens the dropdown menu.\n\t *\n\t * @see https://mantle.ngrok.com/components/dropdown-menu#api-dropdown-menu-trigger\n\t *\n\t * @example\n\t * ```tsx\n\t * <DropdownMenu.Root>\n\t *   <DropdownMenu.Trigger asChild>\n\t *     <Button type=\"button\" appearance=\"outlined\">\n\t *       Open Menu\n\t *     </Button>\n\t *   </DropdownMenu.Trigger>\n\t *   <DropdownMenu.Content>\n\t *     <DropdownMenu.Item>Item 1</DropdownMenu.Item>\n\t *   </DropdownMenu.Content>\n\t * </DropdownMenu.Root>\n\t * ```\n\t */\n\tTrigger,\n} as const;\n\nexport {\n\t//,\n\tDropdownMenu,\n};\n"],"mappings":"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","names":["CaretRightIcon","CheckIcon","DropdownMenuPrimitive","forwardRef","jsx","jsxs","Root","Trigger","Group","Portal","Sub","RadioGroup","SubTrigger","forwardRef","className","inset","children","props","ref","cx","Icon","CaretRightIcon","SubContent","loop","Content","onClick","width","event","Item","CheckboxItem","checked","CheckIcon","RadioItem","Label","DropdownSeparator","Separator","Shortcut","DropdownMenu"]}

package/dist/media-object.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-PFXFESEN.js";import{Slot as m}from"@radix-ui/react-slot";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";var l=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("flex gap-4",o),style:n,children:t}));l.displayName="MediaObject";var d=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("shrink-0 leading-none",o),style:n,children:t}));d.displayName="MediaObjectMedia";var c=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("min-w-0 flex-1",o),style:n,children:t}));c.displayName="MediaObject.Content";var f={Root:l,Media:d,Content:c};export{f as MediaObject};
+import{a as m}from"./chunk-UNFO4DZV.js";import{a as p}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";var l=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("flex gap-4",o),style:n,children:t}));l.displayName="MediaObject";var d=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("shrink-0 leading-none",o),style:n,children:t}));d.displayName="MediaObjectMedia";var c=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("min-w-0 flex-1",o),style:n,children:t}));c.displayName="MediaObject.Content";var f={Root:l,Media:d,Content:c};export{f as MediaObject};
 //# sourceMappingURL=media-object.js.map

package/dist/media-object.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, 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(\"flex gap-4\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, 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(\"shrink-0 leading-none\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, 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(\"min-w-0 flex-1\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-media\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"wCAAA,OAAS,QAAAA,MAAY,uBAErB,OAAS,cAAAC,MAAkB,QAgBxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,aAAcL,CAAS,EACrC,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,cAKnB,IAAMS,EAAQR,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wBAAyBL,CAAS,EAChD,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAK,EAAM,YAAc,mBAKpB,IAAMC,EAAUT,EACf,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,iBAAkBL,CAAS,EACzC,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAM,EAAQ,YAAc,sBA6BtB,IAAMC,EAAc,CA4BnB,KAAAX,EAkBA,MAAAS,EAkBA,QAAAC,CACD","names":["Slot","forwardRef","jsx","Root","forwardRef","asChild","className","children","style","ref","Slot","cx","Media","Content","MediaObject"]}
+{"version":3,"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, 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(\"flex gap-4\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, 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(\"shrink-0 leading-none\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, 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(\"min-w-0 flex-1\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-media\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAiBxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,aAAcL,CAAS,EACrC,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,cAKnB,IAAMS,EAAQR,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wBAAyBL,CAAS,EAChD,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAK,EAAM,YAAc,mBAKpB,IAAMC,EAAUT,EACf,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,iBAAkBL,CAAS,EACzC,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAM,EAAQ,YAAc,sBA6BtB,IAAMC,EAAc,CA4BnB,KAAAX,EAkBA,MAAAS,EAkBA,QAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","style","ref","Slot","cx","Media","Content","MediaObject"]}

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-5QSZM7K4.js";import{b}from"./chunk-4DVFVPF2.js";import"./chunk-MF2QITTY.js";import{a as z}from"./chunk-GC6NS32Q.js";import{c as m}from"./chunk-QXNUFNG4.js";import"./chunk-BWGCYXLX.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as L}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as U}from"@phosphor-icons/react/CaretRight";import{Slot as j}from"@radix-ui/react-slot";import{createContext as k,forwardRef as c,useContext as v,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),y=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});y.displayName="CursorPagination";var x=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(z,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(L,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(b,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(U,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));x.displayName="CursorButtons";var E=[5,10,20,50,100],h=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=v(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});h.displayName="CursorPageSizeSelect";function N({asChild:r=!1,className:e,...a}){let t=v(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?j:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}N.displayName="CursorPageSizeValue";var F={Root:y,Buttons:x,PageSizeSelect:h,PageSizeValue:N};import{useEffect as O,useState as T}from"react";function W({listSize:r,pageSize:e}){let[a,t]=T(1),[i,o]=T(e);O(()=>{o(e),t(1)},[e]),O(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function V(u){let G=Math.max(1,Math.min(u,n));t(G)}function B(){d&&t(u=>Math.min(u+1,n))}function R(){C&&t(u=>Math.max(u-1,1))}function w(u){o(u),t(1)}function I(){t(n)}function M(){t(1)}return{currentPage:a,goToFirstPage:M,goToLastPage:I,goToPage:V,hasNextPage:d,hasPreviousPage:C,nextPage:B,offset:g,pageSize:i,previousPage:R,setPageSize:w,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-EVAIBP32.js";import{b as v}from"./chunk-YKYEISYH.js";import"./chunk-MF2QITTY.js";import{a as b}from"./chunk-GC6NS32Q.js";import{c as m}from"./chunk-BRV6XRNS.js";import"./chunk-DRVKSKOI.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import{a as z}from"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<\n\tCursorPaginationContextValue | undefined\n>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n *   hasNextPage={hasNext}\n *   hasPreviousPage={hasPrevious}\n *   onNextPage={() => loadNextPage()}\n *   onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeftIcon />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<\n\tComponentProps<typeof Select.Trigger>,\n\t\"children\"\n> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n *   pageSizes={[10, 20, 50, 100]}\n *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<\n\tComponentRef<typeof Select.Trigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> &\n\tWithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n *   <span>Items per page:</span>\n *   <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\nPageSizeValue.displayName = \"CursorPageSizeValue\";\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t *   <CursorPagination.Buttons\n\t *     hasNextPage={hasNext}\n\t *     hasPreviousPage={hasPrevious}\n\t *     onNextPage={handleNext}\n\t *     onPreviousPage={handlePrevious}\n\t *   />\n\t *   <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t *   hasNextPage={hasNext}\n\t *   hasPreviousPage={hasPrevious}\n\t *   onNextPage={() => loadNextPage()}\n\t *   onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t *   pageSizes={[10, 20, 50, 100]}\n\t *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t *   <span>Items per page:</span>\n\t *   <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n *   listSize: 150,\n *   pageSize: 10\n * });\n *\n * return (\n *   <div>\n *     <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n *     <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n *       Previous\n *     </button>\n *     <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n *       Next\n *     </button>\n *   </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeftIcon","CaretRightIcon","Slot","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","Root","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","Buttons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeftIcon","Separator","CaretRightIcon","defaultPageSizes","PageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","size","PageSizeValue","asChild","Slot","CursorPagination","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}
+{"version":3,"sources":["../src/components/pagination/cursor-pagination.tsx","../src/components/pagination/use-offset-pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport { CaretLeftIcon } from \"@phosphor-icons/react/CaretLeft\";\nimport { CaretRightIcon } from \"@phosphor-icons/react/CaretRight\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseState,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { ButtonGroup, IconButton } from \"../button/index.js\";\nimport { Select } from \"../select/select.js\";\nimport { Separator } from \"../separator/separator.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype CursorPaginationContextValue = {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n\t/**\n\t * The current number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * A function to set the number of items per page.\n\t */\n\tsetPageSize: (value: number) => void;\n};\n\nconst CursorPaginationContext = createContext<\n\tCursorPaginationContextValue | undefined\n>(undefined);\n\ntype CursorPaginationProps = ComponentProps<\"div\"> & {\n\t/**\n\t * The default number of items per page.\n\t */\n\tdefaultPageSize: number;\n};\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst Root = forwardRef<HTMLDivElement, CursorPaginationProps>(\n\t({ className, children, defaultPageSize, ...props }, ref) => {\n\t\tconst [pageSize, setPageSize] = useState<number>(defaultPageSize);\n\n\t\treturn (\n\t\t\t<CursorPaginationContext.Provider\n\t\t\t\tvalue={{ defaultPageSize, pageSize, setPageSize }}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"inline-flex items-center justify-between gap-2\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CursorPaginationContext.Provider>\n\t\t);\n\t},\n);\nRoot.displayName = \"CursorPagination\";\n\ntype CursorButtonsProps = Omit<\n\tComponentProps<typeof ButtonGroup>,\n\t\"appearance\"\n> & {\n\t/**\n\t * Whether there is a next page of data to load.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Whether there is a previous page of data to load.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * A callback that is called when the next page button is clicked.\n\t */\n\tonNextPage?: () => void;\n\t/**\n\t * A callback that is called when the previous page button is clicked.\n\t */\n\tonPreviousPage?: () => void;\n};\n\n/**\n * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons\n *\n * @example\n * ```tsx\n * <CursorPagination.Buttons\n *   hasNextPage={hasNext}\n *   hasPreviousPage={hasPrevious}\n *   onNextPage={() => loadNextPage()}\n *   onPreviousPage={() => loadPreviousPage()}\n * />\n * ```\n */\nconst Buttons = forwardRef<\n\tComponentRef<typeof ButtonGroup>,\n\tCursorButtonsProps\n>(\n\t(\n\t\t{ hasNextPage, hasPreviousPage, onNextPage, onPreviousPage, ...props },\n\t\tref,\n\t) => {\n\t\t// TODO(cody): this _feels_ like a good spot for left and right arrow keys to navigate between pages when focused on the buttons\n\n\t\treturn (\n\t\t\t<ButtonGroup appearance=\"panel\" ref={ref} {...props}>\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasPreviousPage}\n\t\t\t\t\ticon={<CaretLeftIcon />}\n\t\t\t\t\tlabel=\"Previous page\"\n\t\t\t\t\tonClick={onPreviousPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t\t<Separator orientation=\"vertical\" className=\"min-h-5\" />\n\t\t\t\t<IconButton\n\t\t\t\t\tappearance=\"ghost\"\n\t\t\t\t\tdisabled={!hasNextPage}\n\t\t\t\t\ticon={<CaretRightIcon />}\n\t\t\t\t\tlabel=\"Next page\"\n\t\t\t\t\tonClick={onNextPage}\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t/>\n\t\t\t</ButtonGroup>\n\t\t);\n\t},\n);\nButtons.displayName = \"CursorButtons\";\n\nconst defaultPageSizes = [5, 10, 20, 50, 100] as const;\n\ntype CursorPageSizeSelectProps = Omit<\n\tComponentProps<typeof Select.Trigger>,\n\t\"children\"\n> & {\n\t/**\n\t * A list of page sizes to choose from. The default page size must be included in this list.\n\t */\n\tpageSizes?: typeof defaultPageSizes | readonly number[];\n\t/**\n\t * A callback that is called when the page size is changed.\n\t */\n\tonChangePageSize?: (value: number) => void;\n};\n\n/**\n * A select input for changing the number of items per page when using cursor-based pagination.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select\n *\n * @example\n * ```tsx\n * <CursorPagination.PageSizeSelect\n *   pageSizes={[10, 20, 50, 100]}\n *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n * />\n * ```\n */\nconst PageSizeSelect = forwardRef<\n\tComponentRef<typeof Select.Trigger>,\n\tCursorPageSizeSelectProps\n>(\n\t(\n\t\t{ className, pageSizes = defaultPageSizes, onChangePageSize, ...rest },\n\t\tref,\n\t) => {\n\t\tconst ctx = useContext(CursorPaginationContext);\n\n\t\tinvariant(\n\t\t\tctx,\n\t\t\t\"CursorPageSizeSelect must be used as a child of a CursorPagination component\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.defaultPageSize),\n\t\t\t\"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\tinvariant(\n\t\t\tpageSizes.includes(ctx.pageSize),\n\t\t\t\"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes\",\n\t\t);\n\n\t\treturn (\n\t\t\t<Select.Root\n\t\t\t\tdefaultValue={`${ctx.pageSize}`}\n\t\t\t\tonValueChange={(value) => {\n\t\t\t\t\tlet newPageSize = Number.parseInt(value, 10);\n\t\t\t\t\tif (Number.isNaN(newPageSize)) {\n\t\t\t\t\t\tnewPageSize = ctx.defaultPageSize;\n\t\t\t\t\t}\n\t\t\t\t\tctx.setPageSize(newPageSize);\n\t\t\t\t\tonChangePageSize?.(newPageSize);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<Select.Trigger\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cx(\"w-auto min-w-36\", className)}\n\t\t\t\t\tvalue={ctx.pageSize}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t<Select.Value />\n\t\t\t\t</Select.Trigger>\n\t\t\t\t<Select.Content width=\"trigger\">\n\t\t\t\t\t{pageSizes.map((size) => (\n\t\t\t\t\t\t<Select.Item key={size} value={`${size}`}>\n\t\t\t\t\t\t\t{size} per page\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t))}\n\t\t\t\t</Select.Content>\n\t\t\t</Select.Root>\n\t\t);\n\t},\n);\nPageSizeSelect.displayName = \"CursorPageSizeSelect\";\n\ntype CursorPageSizeValueProps = Omit<ComponentProps<\"span\">, \"children\"> &\n\tWithAsChild;\n\n/**\n * Displays the current page size when using cursor-based pagination as a read-only value.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value\n *\n * @example\n * ```tsx\n * <div className=\"flex items-center gap-2\">\n *   <span>Items per page:</span>\n *   <CursorPagination.PageSizeValue />\n * </div>\n * ```\n */\nfunction PageSizeValue({\n\tasChild = false,\n\tclassName,\n\t...props\n}: CursorPageSizeValueProps) {\n\tconst ctx = useContext(CursorPaginationContext);\n\n\tinvariant(\n\t\tctx,\n\t\t\"CursorPageSizeValue must be used as a child of a CursorPagination component\",\n\t);\n\n\tconst Component = asChild ? Slot : \"span\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\"text-muted text-sm font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{ctx.pageSize} per page\n\t\t</Component>\n\t);\n}\nPageSizeValue.displayName = \"CursorPageSizeValue\";\n\n/**\n * A pagination component for use with cursor-based pagination.\n *\n * Cursor-based pagination is a way of loading data in chunks by using a cursor\n * from the last item on the current page to know where to start the next set,\n * making sure nothing is missed or repeated. Like a linked list, but for chunks\n * of data. It doesn't let you jump to a specific page or know how many total pages\n * there are, but it's more efficient for large or real-time data sets.\n *\n * @see https://mantle.ngrok.com/components/cursor-pagination\n *\n * @example\n * ```tsx\n * <CursorPagination defaultPageSize={10}>\n *   <CursorPagination.Buttons\n *     hasNextPage={hasNext}\n *     hasPreviousPage={hasPrevious}\n *     onNextPage={handleNext}\n *     onPreviousPage={handlePrevious}\n *   />\n *   <CursorPagination.PageSizeSelect />\n * </CursorPagination>\n * ```\n */\nconst CursorPagination = {\n\t/**\n\t * The root container of the cursor pagination component.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-pagination\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Root defaultPageSize={10}>\n\t *   <CursorPagination.Buttons\n\t *     hasNextPage={hasNext}\n\t *     hasPreviousPage={hasPrevious}\n\t *     onNextPage={handleNext}\n\t *     onPreviousPage={handlePrevious}\n\t *   />\n\t *   <CursorPagination.PageSizeSelect />\n\t * </CursorPagination.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A pair of buttons for navigating between pages of data when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-buttons\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.Buttons\n\t *   hasNextPage={hasNext}\n\t *   hasPreviousPage={hasPrevious}\n\t *   onNextPage={() => loadNextPage()}\n\t *   onPreviousPage={() => loadPreviousPage()}\n\t * />\n\t * ```\n\t */\n\tButtons,\n\t/**\n\t * A select input for changing the number of items per page when using cursor-based pagination.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-select\n\t *\n\t * @example\n\t * ```tsx\n\t * <CursorPagination.PageSizeSelect\n\t *   pageSizes={[10, 20, 50, 100]}\n\t *   onChangePageSize={(size) => console.log('Page size changed to:', size)}\n\t * />\n\t * ```\n\t */\n\tPageSizeSelect,\n\t/**\n\t * Displays the current page size when using cursor-based pagination as a read-only value.\n\t *\n\t * @see https://mantle.ngrok.com/components/cursor-pagination#api-cursor-page-size-value\n\t *\n\t * @example\n\t * ```tsx\n\t * <div className=\"flex items-center gap-2\">\n\t *   <span>Items per page:</span>\n\t *   <CursorPagination.PageSizeValue />\n\t * </div>\n\t * ```\n\t */\n\tPageSizeValue,\n} as const;\n\nexport {\n\t//,\n\tCursorPagination,\n};\n\nexport type {\n\t//,\n\tCursorButtonsProps,\n\tCursorPageSizeSelectProps,\n\tCursorPageSizeValueProps,\n\tCursorPaginationProps,\n};\n","\"use client\";\n\nimport { useEffect, useState } from \"react\";\n\ntype UseOffsetPaginationProps = {\n\t/**\n\t * The total number of items in the list to be paginated.\n\t */\n\tlistSize: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n};\n\ntype OffsetPaginationState = {\n\t/**\n\t * The current page number, 1-indexed (starting at 1).\n\t */\n\tcurrentPage: number;\n\t/**\n\t * Whether there is a previous page.\n\t */\n\thasPreviousPage: boolean;\n\t/**\n\t * Whether there is a next page.\n\t */\n\thasNextPage: boolean;\n\t/**\n\t * Go to a specific page.\n\t */\n\tgoToPage: (page: number) => void;\n\t/**\n\t * Go to the first page.\n\t */\n\tgoToFirstPage: () => void;\n\t/**\n\t * Go to the last page.\n\t */\n\tgoToLastPage: () => void;\n\t/**\n\t * Go to the next page.\n\t */\n\tnextPage: () => void;\n\t/**\n\t * The offset of the current page in the list.\n\t */\n\toffset: number;\n\t/**\n\t * The number of items per page.\n\t */\n\tpageSize: number;\n\t/**\n\t * Go to the previous page.\n\t */\n\tpreviousPage: () => void;\n\t/**\n\t * Set the number of items per page. This will reset the current page to the first page.\n\t */\n\tsetPageSize: (size: number) => void;\n\t/**\n\t * The total number of pages.\n\t */\n\ttotalPages: number;\n};\n\n/**\n * A headless hook for managing offset-based pagination state\n *\n * @example\n * ```tsx\n * const pagination = useOffsetPagination({\n *   listSize: 150,\n *   pageSize: 10\n * });\n *\n * return (\n *   <div>\n *     <p>Page {pagination.currentPage} of {pagination.totalPages}</p>\n *     <button onClick={pagination.previousPage} disabled={!pagination.hasPreviousPage}>\n *       Previous\n *     </button>\n *     <button onClick={pagination.nextPage} disabled={!pagination.hasNextPage}>\n *       Next\n *     </button>\n *   </div>\n * );\n * ```\n */\nfunction useOffsetPagination({\n\tlistSize,\n\tpageSize,\n}: UseOffsetPaginationProps): OffsetPaginationState {\n\tconst [currentPage, setCurrentPage] = useState(1);\n\tconst [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n\t// Reset the current page to 1 when the page size prop changes\n\tuseEffect(() => {\n\t\tsetCurrentPageSize(pageSize);\n\t\tsetCurrentPage(1);\n\t}, [pageSize]);\n\n\t// Reset the current page to 1 when the list size prop changes\n\t// biome-ignore lint/correctness/useExhaustiveDependencies: when the listSize prop changes, we want to reset the current page to the start\n\tuseEffect(() => {\n\t\tsetCurrentPage(1);\n\t}, [listSize]);\n\n\tconst totalPages = Math.ceil(listSize / currentPageSize);\n\tconst offset = (currentPage - 1) * currentPageSize;\n\n\tconst hasPreviousPage = currentPage > 1;\n\tconst hasNextPage = currentPage < totalPages;\n\n\tfunction goToPage(page: number) {\n\t\tconst nextPage = Math.max(1, Math.min(page, totalPages));\n\t\tsetCurrentPage(nextPage);\n\t}\n\n\tfunction nextPage() {\n\t\tif (hasNextPage) {\n\t\t\tsetCurrentPage((prev) => Math.min(prev + 1, totalPages));\n\t\t}\n\t}\n\n\tfunction previousPage() {\n\t\tif (hasPreviousPage) {\n\t\t\tsetCurrentPage((prev) => Math.max(prev - 1, 1));\n\t\t}\n\t}\n\n\tfunction setPageSize(size: number) {\n\t\tsetCurrentPageSize(size);\n\t\tsetCurrentPage(1); // reset to the first page when page size changes\n\t}\n\n\tfunction goToLastPage() {\n\t\tsetCurrentPage(totalPages);\n\t}\n\n\tfunction goToFirstPage() {\n\t\tsetCurrentPage(1);\n\t}\n\n\treturn {\n\t\tcurrentPage,\n\t\tgoToFirstPage,\n\t\tgoToLastPage,\n\t\tgoToPage,\n\t\thasNextPage,\n\t\thasPreviousPage,\n\t\tnextPage,\n\t\toffset,\n\t\tpageSize: currentPageSize,\n\t\tpreviousPage,\n\t\tsetPageSize,\n\t\ttotalPages,\n\t};\n}\n\n/**\n * Get a paginated slice of a list based on the current offset pagination state.\n *\n * @example\n * ```tsx\n * const data = ['a', 'b', 'c', 'd', 'e', 'f'];\n * const pagination = useOffsetPagination({ listSize: data.length, pageSize: 2 });\n * const currentPageData = getOffsetPaginatedSlice(data, pagination);\n * // Returns: ['a', 'b'] for page 1, ['c', 'd'] for page 2, etc.\n * ```\n */\nfunction getOffsetPaginatedSlice<T>(\n\tlist: readonly T[],\n\tpagination: OffsetPaginationState,\n): T[] {\n\treturn list.slice(pagination.offset, pagination.offset + pagination.pageSize);\n}\n\nexport {\n\t//,\n\tgetOffsetPaginatedSlice,\n\tuseOffsetPagination,\n};\n\nexport type {\n\t//,\n\tOffsetPaginationState,\n\tUseOffsetPaginationProps,\n};\n"],"mappings":"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","names":["CaretLeftIcon","CaretRightIcon","createContext","forwardRef","useContext","useState","invariant","jsx","jsxs","CursorPaginationContext","createContext","Root","forwardRef","className","children","defaultPageSize","props","ref","pageSize","setPageSize","useState","cx","Buttons","hasNextPage","hasPreviousPage","onNextPage","onPreviousPage","ButtonGroup","IconButton","CaretLeftIcon","Separator","CaretRightIcon","defaultPageSizes","PageSizeSelect","pageSizes","onChangePageSize","rest","ctx","useContext","invariant","Select","value","newPageSize","size","PageSizeValue","asChild","Slot","CursorPagination","useEffect","useState","useOffsetPagination","listSize","pageSize","currentPage","setCurrentPage","currentPageSize","setCurrentPageSize","totalPages","offset","hasPreviousPage","hasNextPage","goToPage","page","nextPage","prev","previousPage","setPageSize","size","goToLastPage","goToFirstPage","getOffsetPaginatedSlice","list","pagination"]}

package/dist/radio-group.d.ts

@@ -75,7 +75,7 @@ declare const RadioGroup: {
      * </RadioGroup.Root>
      * ```
      */
-    readonly ButtonGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
+    readonly ButtonGroup: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "children" | "as"> & {
         children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
     /**
@@ -208,7 +208,7 @@ declare const RadioGroup: {
      * </RadioGroup.Root>
      * ```
      */
-    readonly List: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
+    readonly List: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "children" | "as"> & {
         children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
     /**
@@ -254,7 +254,7 @@ declare const RadioGroup: {
      * </RadioGroup.Root>
      * ```
      */
-    readonly Root: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "as" | "children"> & {
+    readonly Root: react.ForwardRefExoticComponent<Omit<RadioGroupProps, "children" | "as"> & {
         children?: ReactNode | undefined;
     } & react.RefAttributes<HTMLElement>>;
 };

package/dist/radio-group.js

@@ -1,2 +1,2 @@
-import{a as y}from"./chunk-EYZYDUS2.js";import{a as l}from"./chunk-PFXFESEN.js";import{Radio as u,RadioGroup as L}from"@headlessui/react";import{Slot as S}from"@radix-ui/react-slot";import f from"clsx";import{Children as T,cloneElement as z,createContext as M,forwardRef as n,isValidElement as w,useContext as b,useRef as D}from"react";import{Fragment as h,jsx as a}from"react/jsx-runtime";var m=n((e,o)=>a(L,{...e,ref:o}));m.displayName="RadioGroup";var c=M({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),v=n(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden",o),as:"div",...r,ref:t,children:i=>a(c.Provider,{value:i,children:e})}));v.displayName="RadioItem";var E=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("border-form flex size-4 items-center justify-center rounded-full border shrink-0",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-focus-accent ring-4",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff] shrink-0"})}),x=({children:e,className:o,...r})=>{let t=b(c);return a("div",{className:l("radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0",o),...r,children:e==null?a(E,{...t}):typeof e=="function"?e(t):e})};x.displayName="RadioIndicator";var P=n(({className:e,...o},r)=>a(m,{className:f("-space-y-px",e),...o,ref:r}));P.displayName="RadioGroupList";var C=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));C.displayName="RadioListItem";var g=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));g.displayName="RadioCard";var I=({asChild:e=!1,children:o,className:r,...t})=>{let i=b(c);return a(e?S:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})};I.displayName="RadioItemContent";var k=n(({className:e,...o},r)=>a(m,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));k.displayName="RadioButtonGroup";var N=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm","h-9","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));N.displayName="RadioButton";var H=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=D(null),s=b(c),p=T.only(e),G=s.disabled||!s.checked;return a("div",{ref:i,"aria-disabled":s.disabled,onKeyDown:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}let R=d.target;y(R)&&window.requestAnimationFrame(()=>{R.focus()}),o?.(d)},...t,children:w(p)?z(p,{disabled:s.disabled||p.props.disabled,tabIndex:G?-1:p.props.tabIndex}):null})};H.displayName="RadioInputSandbox";var A={Button:N,ButtonGroup:k,Card:g,Indicator:x,InputSandbox:H,Item:v,ItemContent:I,List:P,ListItem:C,Root:m};export{A as RadioGroup};
+import{a as v}from"./chunk-EYZYDUS2.js";import{a as y}from"./chunk-UNFO4DZV.js";import{a as l}from"./chunk-PFXFESEN.js";import{Radio as u,RadioGroup as S}from"@headlessui/react";import f from"clsx";import{Children as T,cloneElement as z,createContext as M,forwardRef as n,isValidElement as w,useContext as b,useRef as D}from"react";import{Fragment as h,jsx as a}from"react/jsx-runtime";var m=n((e,o)=>a(S,{...e,ref:o}));m.displayName="RadioGroup";var c=M({autofocus:!1,checked:!1,disabled:!1,focus:!1,hover:!1}),x=n(({children:e,className:o,...r},t)=>a(u,{className:l("group/radio cursor-pointer aria-disabled:cursor-default [&_label]:cursor-inherit flex gap-2 py-1 text-sm focus:outline-hidden",o),as:"div",...r,ref:t,children:i=>a(c.Provider,{value:i,children:e})}));x.displayName="RadioItem";var E=({checked:e,disabled:o,focus:r,hover:t})=>a("span",{className:l("border-form flex size-4 items-center justify-center rounded-full border shrink-0",o&&"cursor-default opacity-50",e&&"border-accent-500 bg-accent-500",r&&!o&&"border-accent-600 ring-focus-accent ring-4",t&&"border-accent-600"),children:e&&a("span",{className:"size-2 rounded-full bg-[#fff] shrink-0"})}),P=({children:e,className:o,...r})=>{let t=b(c);return a("div",{className:l("radio-indicator inline-flex size-5 select-none items-center justify-center shrink-0",o),...r,children:e==null?a(E,{...t}):typeof e=="function"?e(t):e})};P.displayName="RadioIndicator";var C=n(({className:e,...o},r)=>a(m,{className:f("-space-y-px",e),...o,ref:r}));C.displayName="RadioGroupList";var g=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex select-none gap-2 border px-3 py-2 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));g.displayName="RadioListItem";var I=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:f("group/radio border-card bg-card [&_label]:cursor-inherit relative rounded-md border p-4 text-sm","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","first-of-type:rounded-tl-md first-of-type:rounded-tr-md last-of-type:rounded-bl-md last-of-type:rounded-br-md","aria-disabled:border-form/50 not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600 dark-high-contrast:aria-checked:border-accent-400 high-contrast:aria-checked:border-accent-400",o),...r,ref:t,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));I.displayName="RadioCard";var k=({asChild:e=!1,children:o,className:r,...t})=>{let i=b(c);return a(e?y:"div",{className:f("min-w-0 flex-1",i.disabled&&"opacity-50",r),...t,children:o})};k.displayName="RadioItemContent";var N=n(({className:e,...o},r)=>a(m,{className:f("flex flex-row flex-nowrap -space-x-px",e),...o,ref:r}));N.displayName="RadioButtonGroup";var H=n(({children:e,className:o,...r},t)=>a(u,{as:"div",className:l("group/radio border-form [&_label]:cursor-inherit relative flex flex-1 select-none items-center justify-center gap-2 border px-3 text-sm","h-9","focus-visible:ring-focus-accent not-aria-disabled:focus-visible:border-accent-600 focus-visible:ring-4","cursor-pointer aria-disabled:cursor-default focus:outline-hidden","first-of-type:rounded-bl-md first-of-type:rounded-tl-md last-of-type:rounded-br-md last-of-type:rounded-tr-md","not-aria-disabled:hover:z-1 not-aria-disabled:hover:border-accent-600 aria-disabled:opacity-50","aria-checked:z-1 aria-checked:border-accent-500/40 aria-checked:bg-accent-500/10 not-aria-disabled:hover:aria-checked:border-accent-600","has-[.radio-indicator:first-child]:pl-2 has-[.radio-indicator:last-child]:pr-2",o),ref:t,...r,children:i=>a(h,{children:a(c.Provider,{value:i,children:e})})}));H.displayName="RadioButton";var G=({children:e,onClick:o,onKeyDown:r,...t})=>{let i=D(null),s=b(c),p=T.only(e),L=s.disabled||!s.checked;return a("div",{ref:i,"aria-disabled":s.disabled,onKeyDown:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}switch(d.key){case"Enter":case"Tab":break;default:d.stopPropagation()}r?.(d)},onClick:d=>{if(s.disabled){d.stopPropagation(),d.preventDefault();return}let R=d.target;v(R)&&window.requestAnimationFrame(()=>{R.focus()}),o?.(d)},...t,children:w(p)?z(p,{disabled:s.disabled||p.props.disabled,tabIndex:L?-1:p.props.tabIndex}):null})};G.displayName="RadioInputSandbox";var A={Button:H,ButtonGroup:N,Card:I,Indicator:P,InputSandbox:G,Item:x,ItemContent:k,List:C,ListItem:g,Root:m};export{A as RadioGroup};
 //# sourceMappingURL=radio-group.js.map