@mage-ui/components 1.0.70 → 1.0.72

package/dist/components/data-display/datatables/DataTableSkeleton.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSkeleton.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSkeleton.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  dataTableSkeleton,\n  dataTableSkeletonCell,\n  dataTableSkeletonRow,\n} from '@mage-ui/styled-system/recipes';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { useDataTableContext } from './useDataTableContext';\n\n// Cycling widths to give rows visual variety\nconst CELL_WIDTH_PATTERNS = [\n  ['35%', '45%', '20%'],\n  ['25%', '55%', '20%'],\n  ['40%', '35%', '25%'],\n];\n\ntype DataTableSkeletonProps = {\n  rows: number;\n  className?: string;\n};\n\nexport const DataTableSkeleton = ({\n  rows,\n  className,\n}: DataTableSkeletonProps): ReactNode => {\n  const { labels } = useDataTableContext();\n\n  return (\n    <div\n      className={className ?? dataTableSkeleton()}\n      role='status'\n      aria-busy='true'\n    >\n      <VisuallyHidden>{labels.loading}</VisuallyHidden>\n      {Array.from({ length: rows }, (_, i) => {\n        const widths = CELL_WIDTH_PATTERNS[i % CELL_WIDTH_PATTERNS.length];\n\n        return (\n          <div key={i} className={dataTableSkeletonRow()}>\n            {widths.map((width, j) => (\n              <div\n                key={j}\n                className={dataTableSkeletonCell()}\n                style={{ width }}\n              />\n            ))}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n"],"mappings":"yTAYA,MAAM,EAAsB,CAC1B,CAAC,MAAO,MAAO,MAAM,CACrB,CAAC,MAAO,MAAO,MAAM,CACrB,CAAC,MAAO,MAAO,MAAM,CACtB,CAOY,GAAqB,CAChC,OACA,eACuC,CACvC,GAAM,CAAE,UAAW,GAAqB,CAExC,OACE,EAAC,MAAA,CACC,UAAW,GAAa,GAAmB,CAC3C,KAAK,SACL,YAAU,iBAEV,EAAC,EAAA,CAAA,SAAgB,EAAO,QAAA,CAAyB,CAChD,MAAM,KAAK,CAAE,OAAQ,EAAM,EAAG,EAAG,IAAM,CACtC,IAAM,EAAS,EAAoB,EAAI,EAAoB,QAE3D,OACE,EAAC,MAAA,CAAY,UAAW,GAAsB,UAC3C,EAAO,KAAK,EAAO,IAClB,EAAC,MAAA,CAEC,UAAW,GAAuB,CAClC,MAAO,CAAE,QAAO,EAFX,EAGL,CACF,EAPM,EAQJ,EAER,CAAA,EACE"}

package/dist/components/data-display/datatables/DataTableSlotRow.d.mts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+
+//#region src/components/data-display/datatables/DataTableSlotRow.d.ts
+type DataTableSlots = {
+  top?: ReactNode;
+  bottom?: ReactNode;
+  empty?: ReactNode;
+};
+//#endregion
+export { DataTableSlots };
+//# sourceMappingURL=DataTableSlotRow.d.mts.map

package/dist/components/data-display/datatables/DataTableSlotRow.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSlotRow.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSlotRow.tsx"],"mappings":";;;KAIY,cAAA;EACV,GAAA,GAAM,SAAA;EACN,MAAA,GAAS,SAAA;EACT,KAAA,GAAQ,SAAA;AAAA"}

package/dist/components/data-display/datatables/DataTableSlotRow.mjs

@@ -0,0 +1,2 @@
+import{dataTableSlotRow as e}from"@mage-ui/styled-system/recipes";import{jsx as t}from"react/jsx-runtime";const n=({children:n,classNames:r})=>n==null||n===!1?null:t(`div`,{className:r?.root??e(),children:n});export{n as DataTableSlotRow};
+//# sourceMappingURL=DataTableSlotRow.mjs.map

package/dist/components/data-display/datatables/DataTableSlotRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSlotRow.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableSlotRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableSlotRow } from '@mage-ui/styled-system/recipes';\n\nexport type DataTableSlots = {\n  top?: ReactNode;\n  bottom?: ReactNode;\n  empty?: ReactNode;\n};\n\ntype DataTableSlotRowProps = {\n  children?: ReactNode;\n  classNames?: {\n    root?: string;\n  };\n};\n\nexport const DataTableSlotRow = ({\n  children,\n  classNames,\n}: DataTableSlotRowProps): ReactNode => {\n  if (children === null || children === undefined || children === false) {\n    return null;\n  }\n\n  return (\n    <div className={classNames?.root ?? dataTableSlotRow()}>{children}</div>\n  );\n};\n"],"mappings":"0GAiBA,MAAa,GAAoB,CAC/B,WACA,gBAEI,GAAa,MAAkC,IAAa,GACvD,KAIP,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAkB,CAAG,YAAe"}

package/dist/components/data-display/datatables/DataTableTopSlot.d.mts

@@ -0,0 +1,30 @@
+import { DataTableFiltersConfig, DataTableSearchConfig } from "./DataTable.mjs";
+import { ReactNode } from "react";
+
+//#region src/components/data-display/datatables/DataTableTopSlot.d.ts
+type DataTableTopSlotClassNames = {
+  root?: string;
+};
+type DataTableTopSlotProps = {
+  children?: ReactNode;
+  search?: DataTableSearchConfig;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  filters?: DataTableFiltersConfig;
+  filtersState?: Record<string, unknown>;
+  onFiltersChange?: (next: Record<string, unknown>) => void;
+  classNames?: DataTableTopSlotClassNames;
+};
+declare const DataTableTopSlot: ({
+  children,
+  search,
+  searchValue,
+  onSearchChange,
+  filters,
+  filtersState,
+  onFiltersChange,
+  classNames
+}: DataTableTopSlotProps) => ReactNode;
+//#endregion
+export { DataTableTopSlot, DataTableTopSlotProps };
+//# sourceMappingURL=DataTableTopSlot.d.mts.map

package/dist/components/data-display/datatables/DataTableTopSlot.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTopSlot.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"mappings":";;;;KAUK,0BAAA;EACH,IAAA;AAAA;AAAA,KAGU,qBAAA;EACV,QAAA,GAAW,SAAA;EACX,MAAA,GAAS,qBAAA;EACT,WAAA;EACA,cAAA,IAAkB,KAAA;EAClB,OAAA,GAAU,sBAAA;EACV,YAAA,GAAe,MAAA;EACf,eAAA,IAAmB,IAAA,EAAM,MAAA;EACzB,UAAA,GAAa,0BAAA;AAAA;AAAA,cAGF,gBAAA;EAAoB,QAAA;EAAA,MAAA;EAAA,WAAA;EAAA,cAAA;EAAA,OAAA;EAAA,YAAA;EAAA,eAAA;EAAA;AAAA,GAS9B,qBAAA,KAAwB,SAAA"}

package/dist/components/data-display/datatables/DataTableTopSlot.mjs

@@ -0,0 +1,2 @@
+import{TextInput as e}from"../../controls/text-input/TextInput.mjs";import{dataTableTopSlot as t}from"@mage-ui/styled-system/recipes";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({children:i,search:a,searchValue:o,onSearchChange:s,filters:c,filtersState:l,onFiltersChange:u,classNames:d})=>{let f=a!=null,p=c!=null&&l!=null&&u!=null;return!f&&!p&&!(i!=null&&i!==!1)?null:r(`div`,{className:d?.root??t(),children:[p?c.render(l,u):null,f&&s?n(e,{placeholder:a.placeholder,"aria-label":a.label??a.placeholder,value:o??``,onChange:e=>s(e.currentTarget.value)}):null,i]})};export{i as DataTableTopSlot};
+//# sourceMappingURL=DataTableTopSlot.mjs.map

package/dist/components/data-display/datatables/DataTableTopSlot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableTopSlot.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableTopSlot.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableTopSlot } from '@mage-ui/styled-system/recipes';\n\nimport { TextInput } from '../../controls/text-input/TextInput';\nimport type {\n  DataTableFiltersConfig,\n  DataTableSearchConfig,\n} from './DataTable';\n\ntype DataTableTopSlotClassNames = {\n  root?: string;\n};\n\nexport type DataTableTopSlotProps = {\n  children?: ReactNode;\n  search?: DataTableSearchConfig;\n  searchValue?: string;\n  onSearchChange?: (value: string) => void;\n  filters?: DataTableFiltersConfig;\n  filtersState?: Record<string, unknown>;\n  onFiltersChange?: (next: Record<string, unknown>) => void;\n  classNames?: DataTableTopSlotClassNames;\n};\n\nexport const DataTableTopSlot = ({\n  children,\n  search,\n  searchValue,\n  onSearchChange,\n  filters,\n  filtersState,\n  onFiltersChange,\n  classNames,\n}: DataTableTopSlotProps): ReactNode => {\n  const hasSearch = search != null;\n  const hasFilters =\n    filters != null && filtersState != null && onFiltersChange != null;\n  const hasChildren =\n    children !== null && children !== undefined && children !== false;\n\n  if (!hasSearch && !hasFilters && !hasChildren) {\n    return null;\n  }\n\n  return (\n    <div className={classNames?.root ?? dataTableTopSlot()}>\n      {hasFilters ? filters.render(filtersState, onFiltersChange) : null}\n      {hasSearch && onSearchChange ? (\n        <TextInput\n          placeholder={search.placeholder}\n          aria-label={search.label ?? search.placeholder}\n          value={searchValue ?? ''}\n          onChange={(event) => onSearchChange(event.currentTarget.value)}\n        />\n      ) : null}\n      {children}\n    </div>\n  );\n};\n"],"mappings":"wLAyBA,MAAa,GAAoB,CAC/B,WACA,SACA,cACA,iBACA,UACA,eACA,kBACA,gBACsC,CACtC,IAAM,EAAY,GAAU,KACtB,EACJ,GAAW,MAAQ,GAAgB,MAAQ,GAAmB,KAQhE,MAJI,CAAC,GAAa,CAAC,GAAc,EAF/B,GAAa,MAAkC,IAAa,IAGrD,KAIP,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAkB,WACnD,EAAa,EAAQ,OAAO,EAAc,EAAgB,CAAG,KAC7D,GAAa,EACZ,EAAC,EAAA,CACC,YAAa,EAAO,YACpB,aAAY,EAAO,OAAS,EAAO,YACnC,MAAO,GAAe,GACtB,SAAW,GAAU,EAAe,EAAM,cAAc,MAAM,EAC9D,CACA,KACH,IACG"}

package/dist/components/data-display/datatables/DataTableViewport.mjs

@@ -0,0 +1,2 @@
+import{dataTableViewport as e}from"@mage-ui/styled-system/recipes";import{jsx as t}from"react/jsx-runtime";const n=({className:n,children:r})=>t(`div`,{className:n??e(),children:r});export{n as DataTableViewport};
+//# sourceMappingURL=DataTableViewport.mjs.map

package/dist/components/data-display/datatables/DataTableViewport.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableViewport.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableViewport.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableViewport } from '@mage-ui/styled-system/recipes';\n\ntype DataTableViewportProps = {\n  className?: string;\n  children: ReactNode;\n};\n\nexport const DataTableViewport = ({\n  className,\n  children,\n}: DataTableViewportProps): ReactNode => {\n  return <div className={className ?? dataTableViewport()}>{children}</div>;\n};\n"],"mappings":"2GASA,MAAa,GAAqB,CAChC,YACA,cAEO,EAAC,MAAA,CAAI,UAAW,GAAa,GAAmB,CAAG,YAAe"}

package/dist/components/data-display/datatables/index.d.mts

@@ -1,5 +1,8 @@
-import { StatelessDataTableContextProvider, StatelessDataTableContextValue, useStatelessDataTableContext } from "./datatable-stateless/useStatelessDataTableContext.mjs";
-import { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots } from "./datatable-stateless/StatelessDataTableSlotRow.mjs";
-import { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig } from "./datatable-stateless/StatelessDataTable.mjs";
-import { StatelessDataTablePageSize, StatelessDataTablePageSizeProps } from "./datatable-stateless/StatelessDataTablePageSize.mjs";
-import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./datatable-stateless/index.mjs";
+import { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext } from "./useDataTableContext.mjs";
+import { DataTable, DataTableClassNames, DataTableColumnMeta, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTablePaginationConfig, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig } from "./DataTable.mjs";
+import { DataTablePageSize, DataTablePageSizeProps } from "./DataTablePageSize.mjs";
+import { DataTablePagination, DataTablePaginationProps } from "./DataTablePagination.mjs";
+import { DataTableBottomSlot, DataTableBottomSlotProps } from "./DataTableBottomSlot.mjs";
+import { DataTableTopSlot, DataTableTopSlotProps } from "./DataTableTopSlot.mjs";
+import { ColumnDef as ColumnDef$1, ExpandedState as ExpandedState$1, PaginationState as PaginationState$1, RowSelectionState as RowSelectionState$1, SortingState as SortingState$1 } from "@tanstack/react-table";
+export { type ColumnDef$1 as ColumnDef, type ExpandedState$1 as ExpandedState, type PaginationState$1 as PaginationState, type RowSelectionState$1 as RowSelectionState, type SortingState$1 as SortingState };

package/dist/components/data-display/datatables/useDataTable.mjs

@@ -0,0 +1,2 @@
+import{DEFAULT_DATA_TABLE_LABELS as e}from"./useDataTableContext.mjs";import{getDataTableExpandColumn as t,getDataTableSelectColumn as n}from"./DataTableColumns.mjs";import{useCallback as r,useMemo as i}from"react";import{getCoreRowModel as a,getExpandedRowModel as o,useReactTable as s}from"@tanstack/react-table";const c=(e,t)=>{if(!t||t.length===0)return e;let n=e.map((e,t)=>({column:e,index:t})),r=t.map(({column:t,position:n},r)=>({column:t,position:n,index:e.length+r}));return[...n,...r].sort((e,t)=>{let n=e.position??e.index,r=t.position??t.index;return n===r?e.index-t.index:n-r}).map(({column:e})=>e)},l=({data:l,columns:u,extraColumns:d,sorting:f,pagination:p,selection:m,expansion:h,loading:g,onRefresh:_,options:v,classNames:y,labels:b,layout:x})=>{let S=x??`fixed`,C={...e,...b},w=m?.isRowDisabled,T=p?{pageIndex:Math.max(p.currentPage-1,0),pageSize:p.pageSize}:void 0,E=i(()=>[...h?[t(y?.expandButton,C)]:[],...m?[n(C)]:[]],[h,m,y?.expandButton,C]),D=s({data:l,columns:i(()=>[...E,...c(u,d)],[E,u,d]),getCoreRowModel:a(),enableSorting:!!f,...f&&{manualSorting:!0,onSortingChange:f.onChange},...p&&{manualPagination:!0,onPaginationChange:p.onChange,pageCount:p.pageCount,...p.rowCount!==void 0&&{rowCount:p.rowCount}},...m&&{enableRowSelection:w?e=>!w(e.original):!0,onRowSelectionChange:m.onChange,...m.getRowId&&{getRowId:e=>m.getRowId?.(e)??``}},...h&&{enableExpanding:!0,getRowCanExpand:()=>!0,getExpandedRowModel:o(),onExpandedChange:h.onChange},...v,state:{...f&&{sorting:f.state},...T&&{pagination:T},...m&&{rowSelection:m.state},...h&&{expanded:h.state}}}),O=i(()=>m?Object.entries(m.state).filter(([,e])=>e).map(([e])=>e):[],[m?.state]),k=r(()=>{_?.()},[_]);return{layout:S,contextValue:i(()=>({table:D,refresh:k,loading:g,selectedIds:O,labels:C,sorting:f,pagination:p,selection:m,expansion:h}),[D,k,g,O,C,f,p,m,h]),table:D}};export{l as useDataTable};
+//# sourceMappingURL=useDataTable.mjs.map

package/dist/components/data-display/datatables/useDataTable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\nimport type { ColumnDef } from '@tanstack/react-table';\nimport {\n  getCoreRowModel,\n  getExpandedRowModel,\n  useReactTable,\n} from '@tanstack/react-table';\n\nimport type { DataTableExtraColumnConfig, DataTableProps } from './DataTable';\nimport {\n  getDataTableExpandColumn,\n  getDataTableSelectColumn,\n} from './DataTableColumns';\nimport {\n  DEFAULT_DATA_TABLE_LABELS,\n  type DataTableContextValue,\n} from './useDataTableContext';\n\ntype UseDataTableResult<Data> = {\n  layout: 'auto' | 'fixed';\n  contextValue: DataTableContextValue<Data>;\n  table: DataTableContextValue<Data>['table'];\n};\n\ntype PositionedColumn<Data> = {\n  column: ColumnDef<Data, unknown>;\n  position?: number;\n  index: number;\n};\n\nconst resolveColumns = <Data>(\n  baseColumns: ColumnDef<Data, unknown>[],\n  extraColumns?: DataTableExtraColumnConfig<Data>[],\n): ColumnDef<Data, unknown>[] => {\n  if (!extraColumns || extraColumns.length === 0) {\n    return baseColumns;\n  }\n\n  const baseEntries: PositionedColumn<Data>[] = baseColumns.map(\n    (column, index) => ({ column, index }),\n  );\n\n  const extraEntries: PositionedColumn<Data>[] = extraColumns.map(\n    ({ column, position }, index) => ({\n      column,\n      position,\n      index: baseColumns.length + index,\n    }),\n  );\n\n  return [...baseEntries, ...extraEntries]\n    .sort((left, right) => {\n      const leftOrder = left.position ?? left.index;\n      const rightOrder = right.position ?? right.index;\n\n      if (leftOrder !== rightOrder) {\n        return leftOrder - rightOrder;\n      }\n\n      return left.index - right.index;\n    })\n    .map(({ column }) => column);\n};\n\nexport const useDataTable = <Data>({\n  data,\n  columns,\n  extraColumns,\n  sorting,\n  pagination,\n  selection,\n  expansion,\n  loading,\n  onRefresh,\n  options,\n  classNames,\n  labels,\n  layout: providedLayout,\n}: DataTableProps<Data>): UseDataTableResult<Data> => {\n  const layout = providedLayout ?? 'fixed';\n  const resolvedLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...labels };\n  const isRowDisabled = selection?.isRowDisabled;\n  const paginationState = pagination\n    ? {\n        pageIndex: Math.max(pagination.currentPage - 1, 0),\n        pageSize: pagination.pageSize,\n      }\n    : undefined;\n\n  const builtInColumns = useMemo(\n    () => [\n      ...(expansion\n        ? [\n            getDataTableExpandColumn<Data>(\n              classNames?.expandButton,\n              resolvedLabels,\n            ),\n          ]\n        : []),\n      ...(selection ? [getDataTableSelectColumn<Data>(resolvedLabels)] : []),\n    ],\n    [expansion, selection, classNames?.expandButton, resolvedLabels],\n  );\n\n  const allColumns = useMemo(\n    () => [...builtInColumns, ...resolveColumns(columns, extraColumns)],\n    [builtInColumns, columns, extraColumns],\n  );\n\n  const table = useReactTable<Data>({\n    data,\n    columns: allColumns,\n    getCoreRowModel: getCoreRowModel(),\n    enableSorting: Boolean(sorting),\n    ...(sorting && {\n      manualSorting: true,\n      onSortingChange: sorting.onChange,\n    }),\n    ...(pagination && {\n      manualPagination: true,\n      onPaginationChange: pagination.onChange,\n      pageCount: pagination.pageCount,\n      ...(pagination.rowCount !== undefined && {\n        rowCount: pagination.rowCount,\n      }),\n    }),\n    ...(selection && {\n      enableRowSelection: isRowDisabled\n        ? (row) => !isRowDisabled(row.original)\n        : true,\n      onRowSelectionChange: selection.onChange,\n      ...(selection.getRowId && {\n        getRowId: (row: Data) => selection.getRowId?.(row) ?? '',\n      }),\n    }),\n    ...(expansion && {\n      enableExpanding: true,\n      getRowCanExpand: () => true,\n      getExpandedRowModel: getExpandedRowModel(),\n      onExpandedChange: expansion.onChange,\n    }),\n    ...options,\n    state: {\n      ...(sorting && { sorting: sorting.state }),\n      ...(paginationState && { pagination: paginationState }),\n      ...(selection && { rowSelection: selection.state }),\n      ...(expansion && { expanded: expansion.state }),\n    },\n  });\n\n  const selectedIds = useMemo(() => {\n    return selection\n      ? Object.entries(selection.state)\n          .filter(([, isSelected]) => isSelected)\n          .map(([id]) => id)\n      : [];\n  }, [selection?.state]);\n\n  const refresh = useCallback(() => {\n    void onRefresh?.();\n  }, [onRefresh]);\n\n  const contextValue = useMemo(\n    () =>\n      ({\n        table,\n        refresh,\n        loading,\n        selectedIds,\n        labels: resolvedLabels,\n        sorting,\n        pagination,\n        selection,\n        expansion,\n      }) satisfies DataTableContextValue<Data>,\n    [\n      table,\n      refresh,\n      loading,\n      selectedIds,\n      resolvedLabels,\n      sorting,\n      pagination,\n      selection,\n      expansion,\n    ],\n  );\n\n  return {\n    layout,\n    contextValue,\n    table,\n  };\n};\n"],"mappings":"2TA8BA,MAAM,GACJ,EACA,IAC+B,CAC/B,GAAI,CAAC,GAAgB,EAAa,SAAW,EAC3C,OAAO,EAGT,IAAM,EAAwC,EAAY,KACvD,EAAQ,KAAW,CAAE,SAAQ,QAAO,EACtC,CAEK,EAAyC,EAAa,KACzD,CAAE,SAAQ,YAAY,KAAW,CAChC,SACA,WACA,MAAO,EAAY,OAAS,EAC7B,EACF,CAED,MAAO,CAAC,GAAG,EAAa,GAAG,EAAa,CACrC,MAAM,EAAM,IAAU,CACrB,IAAM,EAAY,EAAK,UAAY,EAAK,MAClC,EAAa,EAAM,UAAY,EAAM,MAM3C,OAJI,IAAc,EAIX,EAAK,MAAQ,EAAM,MAHjB,EAAY,GAIrB,CACD,KAAK,CAAE,YAAa,EAAO,EAGnB,GAAsB,CACjC,OACA,UACA,eACA,UACA,aACA,YACA,YACA,UACA,YACA,UACA,aACA,SACA,OAAQ,KAC4C,CACpD,IAAM,EAAS,GAAkB,QAC3B,EAAiB,CAAE,GAAG,EAA2B,GAAG,EAAQ,CAC5D,EAAgB,GAAW,cAC3B,EAAkB,EACpB,CACE,UAAW,KAAK,IAAI,EAAW,YAAc,EAAG,EAAE,CAClD,SAAU,EAAW,SACtB,CACD,IAAA,GAEE,EAAiB,MACf,CACJ,GAAI,EACA,CACE,EACE,GAAY,aACZ,EACD,CACF,CACD,EAAE,CACN,GAAI,EAAY,CAAC,EAA+B,EAAe,CAAC,CAAG,EAAE,CACtE,CACD,CAAC,EAAW,EAAW,GAAY,aAAc,EAAe,CACjE,CAOK,EAAQ,EAAoB,CAChC,OACA,QAPiB,MACX,CAAC,GAAG,EAAgB,GAAG,EAAe,EAAS,EAAa,CAAC,CACnE,CAAC,EAAgB,EAAS,EAAa,CACxC,CAKC,gBAAiB,GAAiB,CAClC,cAAe,EAAQ,EACvB,GAAI,GAAW,CACb,cAAe,GACf,gBAAiB,EAAQ,SAC1B,CACD,GAAI,GAAc,CAChB,iBAAkB,GAClB,mBAAoB,EAAW,SAC/B,UAAW,EAAW,UACtB,GAAI,EAAW,WAAa,IAAA,IAAa,CACvC,SAAU,EAAW,SACtB,CACF,CACD,GAAI,GAAa,CACf,mBAAoB,EACf,GAAQ,CAAC,EAAc,EAAI,SAAS,CACrC,GACJ,qBAAsB,EAAU,SAChC,GAAI,EAAU,UAAY,CACxB,SAAW,GAAc,EAAU,WAAW,EAAI,EAAI,GACvD,CACF,CACD,GAAI,GAAa,CACf,gBAAiB,GACjB,oBAAuB,GACvB,oBAAqB,GAAqB,CAC1C,iBAAkB,EAAU,SAC7B,CACD,GAAG,EACH,MAAO,CACL,GAAI,GAAW,CAAE,QAAS,EAAQ,MAAO,CACzC,GAAI,GAAmB,CAAE,WAAY,EAAiB,CACtD,GAAI,GAAa,CAAE,aAAc,EAAU,MAAO,CAClD,GAAI,GAAa,CAAE,SAAU,EAAU,MAAO,CAC/C,CACF,CAAC,CAEI,EAAc,MACX,EACH,OAAO,QAAQ,EAAU,MAAM,CAC5B,QAAQ,EAAG,KAAgB,EAAW,CACtC,KAAK,CAAC,KAAQ,EAAG,CACpB,EAAE,CACL,CAAC,GAAW,MAAM,CAAC,CAEhB,EAAU,MAAkB,CAC3B,KAAa,EACjB,CAAC,EAAU,CAAC,CA4Bf,MAAO,CACL,SACA,aA5BmB,OAEhB,CACC,QACA,UACA,UACA,cACA,OAAQ,EACR,UACA,aACA,YACA,YACD,EACH,CACE,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACA,EACD,CACF,CAKC,QACD"}

package/dist/components/data-display/datatables/useDataTableContext.d.mts

@@ -0,0 +1,29 @@
+import { DataTableProps } from "./DataTable.mjs";
+import * as react from "react";
+import * as _tanstack_react_table0 from "@tanstack/react-table";
+
+//#region src/components/data-display/datatables/useDataTableContext.d.ts
+type DataTableLabels = {
+  rowsPerPage: string;
+  selectedCount: (count: number) => string;
+  sortedAscending: string;
+  sortedDescending: string;
+  activateToSort: string;
+  selectAllRows: string;
+  selectRow: (index: number) => string;
+  expandRow: string;
+  collapseRow: string;
+  loading: string;
+};
+declare const DEFAULT_DATA_TABLE_LABELS: DataTableLabels;
+type DataTableContextValue<Data> = {
+  table: _tanstack_react_table0.Table<Data>;
+  refresh: () => void;
+  selectedIds: string[];
+  labels: DataTableLabels;
+} & Pick<DataTableProps<Data>, 'loading' | 'sorting' | 'pagination' | 'selection' | 'expansion'>;
+declare const useDataTableContext: <Data>() => DataTableContextValue<Data>;
+declare const DataTableContextProvider: react.Provider<DataTableContextValue<unknown> | null>;
+//#endregion
+export { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext };
+//# sourceMappingURL=useDataTableContext.d.mts.map

package/dist/components/data-display/datatables/useDataTableContext.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableContext.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTableContext.ts"],"mappings":";;;;;KAIY,eAAA;EACV,WAAA;EACA,aAAA,GAAgB,KAAA;EAChB,eAAA;EACA,gBAAA;EACA,cAAA;EACA,aAAA;EACA,SAAA,GAAY,KAAA;EACZ,SAAA;EACA,WAAA;EACA,OAAA;AAAA;AAAA,cAGW,yBAAA,EAA2B,eAAA;AAAA,KAa5B,qBAAA;EACV,KAAA,EAAiD,sBAAA,CAAV,KAAA,CAAM,IAAA;EAC7C,OAAA;EACA,WAAA;EACA,MAAA,EAAQ,eAAA;AAAA,IACN,IAAA,CACF,cAAA,CAAe,IAAA;AAAA,cAQJ,mBAAA,cAAgC,qBAAA,CAAsB,IAAA;AAAA,cAYtD,wBAAA,EAAwB,KAAA,CAAA,QAAA,CAAA,qBAAA"}

package/dist/components/data-display/datatables/useDataTableContext.mjs

@@ -0,0 +1,2 @@
+import{createContext as e,useContext as t}from"react";const n={rowsPerPage:`Rows per page`,selectedCount:e=>`${e} selected`,sortedAscending:`Sorted ascending`,sortedDescending:`Sorted descending`,activateToSort:`Activate to sort`,selectAllRows:`Select all rows`,selectRow:e=>`Select row ${e}`,expandRow:`Expand row`,collapseRow:`Collapse row`,loading:`Loading`},r=e(null),i=()=>{let e=t(r);if(!e)throw Error(`useDataTableContext must be used within <DataTable> or one of its slots.`);return e},a=r.Provider;export{n as DEFAULT_DATA_TABLE_LABELS,a as DataTableContextProvider,i as useDataTableContext};
+//# sourceMappingURL=useDataTableContext.mjs.map

package/dist/components/data-display/datatables/useDataTableContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDataTableContext.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTableContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport type { DataTableProps } from './DataTable';\n\nexport type DataTableLabels = {\n  rowsPerPage: string;\n  selectedCount: (count: number) => string;\n  sortedAscending: string;\n  sortedDescending: string;\n  activateToSort: string;\n  selectAllRows: string;\n  selectRow: (index: number) => string;\n  expandRow: string;\n  collapseRow: string;\n  loading: string;\n};\n\nexport const DEFAULT_DATA_TABLE_LABELS: DataTableLabels = {\n  rowsPerPage: 'Rows per page',\n  selectedCount: (count) => `${count} selected`,\n  sortedAscending: 'Sorted ascending',\n  sortedDescending: 'Sorted descending',\n  activateToSort: 'Activate to sort',\n  selectAllRows: 'Select all rows',\n  selectRow: (index) => `Select row ${index}`,\n  expandRow: 'Expand row',\n  collapseRow: 'Collapse row',\n  loading: 'Loading',\n};\n\nexport type DataTableContextValue<Data> = {\n  table: import('@tanstack/react-table').Table<Data>;\n  refresh: () => void;\n  selectedIds: string[];\n  labels: DataTableLabels;\n} & Pick<\n  DataTableProps<Data>,\n  'loading' | 'sorting' | 'pagination' | 'selection' | 'expansion'\n>;\n\nconst DataTableContext = createContext<DataTableContextValue<unknown> | null>(\n  null,\n);\n\nexport const useDataTableContext = <Data>(): DataTableContextValue<Data> => {\n  const context = useContext(DataTableContext);\n\n  if (!context) {\n    throw new Error(\n      'useDataTableContext must be used within <DataTable> or one of its slots.',\n    );\n  }\n\n  return context as DataTableContextValue<Data>;\n};\n\nexport const DataTableContextProvider = DataTableContext.Provider;\n"],"mappings":"sDAiBA,MAAa,EAA6C,CACxD,YAAa,gBACb,cAAgB,GAAU,GAAG,EAAM,WACnC,gBAAiB,mBACjB,iBAAkB,oBAClB,eAAgB,mBAChB,cAAe,kBACf,UAAY,GAAU,cAAc,IACpC,UAAW,aACX,YAAa,eACb,QAAS,UACV,CAYK,EAAmB,EACvB,KACD,CAEY,MAA+D,CAC1E,IAAM,EAAU,EAAW,EAAiB,CAE5C,GAAI,CAAC,EACH,MAAU,MACR,2EACD,CAGH,OAAO,GAGI,EAA2B,EAAiB"}

package/dist/components/data-display/index.d.mts

@@ -11,12 +11,13 @@ import { TableHeaderCellProps } from "./table/TableHeaderCell.mjs";
 import { TableCellProps } from "./table/TableCell.mjs";
 import { TableCaptionProps } from "./table/TableCaption.mjs";
 import { Table } from "./table/Table.mjs";
-import { StatelessDataTableContextProvider, StatelessDataTableContextValue, useStatelessDataTableContext } from "./datatables/datatable-stateless/useStatelessDataTableContext.mjs";
-import { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots } from "./datatables/datatable-stateless/StatelessDataTableSlotRow.mjs";
-import { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig } from "./datatables/datatable-stateless/StatelessDataTable.mjs";
-import { StatelessDataTablePageSize, StatelessDataTablePageSizeProps } from "./datatables/datatable-stateless/StatelessDataTablePageSize.mjs";
-import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./datatables/datatable-stateless/index.mjs";
-import "./datatables/index.mjs";
+import { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext } from "./datatables/useDataTableContext.mjs";
+import { DataTable, DataTableClassNames, DataTableColumnMeta, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTablePaginationConfig, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig } from "./datatables/DataTable.mjs";
+import { DataTablePageSize, DataTablePageSizeProps } from "./datatables/DataTablePageSize.mjs";
+import { DataTablePagination, DataTablePaginationProps } from "./datatables/DataTablePagination.mjs";
+import { DataTableBottomSlot, DataTableBottomSlotProps } from "./datatables/DataTableBottomSlot.mjs";
+import { DataTableTopSlot, DataTableTopSlotProps } from "./datatables/DataTableTopSlot.mjs";
+import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./datatables/index.mjs";
 import { DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps } from "./description-list/DescriptionList.mjs";
 import { Icon, IconProps } from "./icons/icon/Icon.mjs";
 import { IconRaw, IconRawProps } from "./icons/icon-raw/IconRaw.mjs";

package/dist/components/data-display/kanban/Kanban.d.mts

@@ -49,6 +49,8 @@ interface KanbanProps {
     root?: string;
     columnWrapper?: string;
     column?: string;
+    cardWrapper?: string;
+    cardWrapperRoot?: string;
   };
 }
 interface CardMove {

package/dist/components/data-display/kanban/Kanban.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Kanban.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"mappings":";;;;UAkBiB,SAAA;EACf,EAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,OAAA;IACE,WAAA;IACA,QAAA;IACA,QAAA;MACE,IAAA;MACA,GAAA;MACA,GAAA;IAAA;IAEF,KAAA;IAAA,CACC,GAAA;EAAA;EAEH,IAAA;EACA,MAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,SAAA;EACf,IAAA,EAAM,SAAA;EAAA,CACL,GAAA,WAAc,SAAA;AAAA;AAAA,UAEA,eAAA;EACf,IAAA,EAAM,SAAA;EACN,MAAA,EAAQ,SAAA;EACR,KAAA;EACA,WAAA;AAAA;AAAA,KAGU,SAAA;EAAA,CACT,IAAA;IACC,MAAA,GAAS,KAAA,EAAO,eAAA,KAAoB,SAAA;IACpC,WAAA;EAAA;AAAA;AAAA,UAIa,WAAA;EACf,UAAA,EAAY,SAAA;EACZ,SAAA,GAAY,SAAA;EACZ,UAAA,IAAc,IAAA,EAAM,QAAA;EACpB,UAAA;IACE,MAAA;IACA,IAAA;IACA,aAAA;IACA,MAAA;EAAA;AAAA;AAAA,UAIa,QAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;AAAA;AAAA,cAGW,MAAA;EAAU,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA;AAAA,GAKpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Kanban.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"mappings":";;;;UAoBiB,SAAA;EACf,EAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,OAAA;IACE,WAAA;IACA,QAAA;IACA,QAAA;MACE,IAAA;MACA,GAAA;MACA,GAAA;IAAA;IAEF,KAAA;IAAA,CACC,GAAA;EAAA;EAEH,IAAA;EACA,MAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,SAAA;EACf,IAAA,EAAM,SAAA;EAAA,CACL,GAAA,WAAc,SAAA;AAAA;AAAA,UAEA,eAAA;EACf,IAAA,EAAM,SAAA;EACN,MAAA,EAAQ,SAAA;EACR,KAAA;EACA,WAAA;AAAA;AAAA,KAGU,SAAA;EAAA,CACT,IAAA;IACC,MAAA,GAAS,KAAA,EAAO,eAAA,KAAoB,SAAA;IACpC,WAAA;EAAA;AAAA;AAAA,UAIa,WAAA;EACf,UAAA,EAAY,SAAA;EACZ,SAAA,GAAY,SAAA;EACZ,UAAA,IAAc,IAAA,EAAM,QAAA;EACpB,UAAA;IACE,MAAA;IACA,IAAA;IACA,aAAA;IACA,MAAA;IACA,WAAA;IACA,eAAA;EAAA;AAAA;AAAA,UAIa,QAAA;EACf,MAAA;EACA,YAAA;EACA,UAAA;EACA,SAAA;EACA,SAAA;EACA,QAAA;AAAA;AAAA,cAGW,MAAA;EAAU,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA;AAAA,GAKpB,WAAA,KAAW,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/data-display/kanban/Kanban.mjs

@@ -1,2 +1,2 @@
-import{addCardPlaceholder as e,getAddCardPlaceholderKey as t}from"./kanbanUtils.mjs";import{KanbanCard as n}from"./KanbanCard.mjs";import{KanbanCardAdder as r}from"./KanbanCardAdder.mjs";import{KanbanCardDragIndicator as i}from"./KanbanCardDragIndicator.mjs";import{KanbanColumnHeader as a}from"./KanbanColumnHeader.mjs";import{KanbanListFooter as o}from"./KanbanListFooter.mjs";import{cx as s}from"@mage-ui/styled-system/css";import{kanban as c,kanbanColumn as l,kanbanRoot as u,kanbanWrapperColumn as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";import{useState as p}from"react";import{Kanban as m,dropHandler as h}from"react-kanban-kit";const g=({dataSource:g,configMap:_,onCardMove:v,classNames:y})=>{let[b,x]=p(g);return f(m,{dataSource:b,configMap:_??{card:{render:({data:e})=>f(n,{data:e}),isDraggable:!0},"new-card":{render:({column:e,data:t})=>f(r,{columnId:e.id,dataSource:b,setDataSource:x,inTop:t?.content?.inTop??!0}),isDraggable:!1}},renderColumnHeader:e=>f(a,{column:e}),renderCardDragIndicator:()=>f(i,{}),rootClassName:s(y?.kanban??c(),y?.root??u(),`group`),columnWrapperClassName:()=>y?.columnWrapper??d(),columnClassName:()=>y?.column??l(),renderListFooter:t=>f(o,{onAddTask:()=>x(e(t.id,b,!1))}),allowListFooter:e=>!e.children.includes(t(e.id)),onCardMove:e=>{x(t=>h(e,structuredClone(t),()=>{},e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)+1}),e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)-1}))),v?.(e)}})};export{g as Kanban};
+import{addCardPlaceholder as e,getAddCardPlaceholderKey as t}from"./kanbanUtils.mjs";import{KanbanCard as n}from"./KanbanCard.mjs";import{KanbanCardAdder as r}from"./KanbanCardAdder.mjs";import{KanbanCardDragIndicator as i}from"./KanbanCardDragIndicator.mjs";import{KanbanColumnHeader as a}from"./KanbanColumnHeader.mjs";import{KanbanListFooter as o}from"./KanbanListFooter.mjs";import{cx as s}from"@mage-ui/styled-system/css";import{kanban as c,kanbanCardWrapper as l,kanbanCardWrapperRoot as u,kanbanColumn as d,kanbanRoot as f,kanbanWrapperColumn as p}from"@mage-ui/styled-system/recipes";import{jsx as m}from"react/jsx-runtime";import{useState as h}from"react";import{Kanban as g,dropHandler as _}from"react-kanban-kit";const v=({dataSource:v,configMap:y,onCardMove:b,classNames:x})=>{let[S,C]=h(v);return m(g,{dataSource:S,configMap:y??{card:{render:({data:e})=>m(n,{data:e}),isDraggable:!0},"new-card":{render:({column:e,data:t})=>m(r,{columnId:e.id,dataSource:S,setDataSource:C,inTop:t?.content?.inTop??!0}),isDraggable:!1}},renderColumnHeader:e=>m(a,{column:e}),renderCardDragIndicator:()=>m(i,{}),rootClassName:s(x?.kanban??c(),x?.root??f(),`group`),columnWrapperClassName:()=>x?.columnWrapper??p(),columnClassName:()=>x?.column??d(),cardWrapperClassName:s(x?.cardWrapper??l(),x?.cardWrapperRoot??u()),renderListFooter:t=>m(o,{onAddTask:()=>C(e(t.id,S,!1))}),allowListFooter:e=>!e.children.includes(t(e.id)),onCardMove:e=>{C(t=>_(e,structuredClone(t),()=>{},e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)+1}),e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)-1}))),b?.(e)}})};export{v as Kanban};
 //# sourceMappingURL=Kanban.mjs.map

package/dist/components/data-display/kanban/Kanban.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Kanban.mjs","names":["Kanban","KanbanKit"],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\nimport { dropHandler, Kanban as KanbanKit } from 'react-kanban-kit';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  kanban,\n  kanbanColumn,\n  kanbanRoot,\n  kanbanWrapperColumn,\n} from '@mage-ui/styled-system/recipes';\n\nimport { KanbanCard } from './KanbanCard';\nimport { KanbanCardAdder } from './KanbanCardAdder';\nimport { KanbanCardDragIndicator } from './KanbanCardDragIndicator';\nimport { KanbanColumnHeader } from './KanbanColumnHeader';\nimport { KanbanListFooter } from './KanbanListFooter';\nimport { addCardPlaceholder, getAddCardPlaceholderKey } from './kanbanUtils';\n\nexport interface BoardItem {\n  id: string;\n  title: string;\n  parentId: string | null;\n  children: string[];\n  content?: {\n    description?: string;\n    priority?: string;\n    assignee?: {\n      name: string;\n      src?: string;\n      alt?: string;\n    };\n    inTop?: boolean;\n    [key: string]: unknown;\n  };\n  type?: string | number;\n  status?: string;\n  totalChildrenCount: number;\n  totalItemsCount?: number;\n  isDraggable?: boolean;\n}\nexport interface BoardData {\n  root: BoardItem;\n  [key: string]: BoardItem;\n}\nexport interface CardRenderProps {\n  data: BoardItem;\n  column: BoardItem;\n  index: number;\n  isDraggable: boolean;\n}\n\nexport type ConfigMap = {\n  [type: string]: {\n    render: (props: CardRenderProps) => ReactNode;\n    isDraggable?: boolean;\n  };\n};\n\nexport interface KanbanProps {\n  dataSource: BoardData;\n  configMap?: ConfigMap;\n  onCardMove?: (move: CardMove) => void;\n  classNames?: {\n    kanban?: string;\n    root?: string;\n    columnWrapper?: string;\n    column?: string;\n  };\n}\n\nexport interface CardMove {\n  cardId: string;\n  fromColumnId: string;\n  toColumnId: string;\n  taskAbove: string | null;\n  taskBelow: string | null;\n  position: number;\n}\n\nexport const Kanban = ({\n  dataSource,\n  configMap,\n  onCardMove,\n  classNames,\n}: KanbanProps) => {\n  const [board, setBoard] = useState<BoardData>(dataSource);\n\n  const defaultConfigMap: ConfigMap = {\n    card: {\n      render: ({ data }: CardRenderProps) => <KanbanCard data={data} />,\n      isDraggable: true,\n    },\n    'new-card': {\n      render: ({ column, data }: CardRenderProps) => (\n        <KanbanCardAdder\n          columnId={column.id}\n          dataSource={board}\n          setDataSource={setBoard}\n          inTop={data?.content?.inTop ?? true}\n        />\n      ),\n      isDraggable: false,\n    },\n  };\n\n  const handleCardMove = (move: CardMove) => {\n    setBoard(\n      (prev) =>\n        dropHandler(\n          move,\n          structuredClone(prev),\n          () => {},\n          (newColumn) => ({\n            ...newColumn,\n            totalChildrenCount: (newColumn.totalChildrenCount || 0) + 1,\n          }),\n          (sourceColumn) => ({\n            ...sourceColumn,\n            totalChildrenCount: (sourceColumn.totalChildrenCount || 0) - 1,\n          }),\n        ) as BoardData,\n    );\n    onCardMove?.(move);\n  };\n\n  return (\n    <KanbanKit\n      dataSource={board}\n      configMap={configMap ?? defaultConfigMap}\n      renderColumnHeader={(column) => <KanbanColumnHeader column={column} />}\n      renderCardDragIndicator={() => <KanbanCardDragIndicator />}\n      rootClassName={cx(\n        classNames?.kanban ?? kanban(),\n        classNames?.root ?? kanbanRoot(),\n        'group',\n      )}\n      columnWrapperClassName={() =>\n        classNames?.columnWrapper ?? kanbanWrapperColumn()\n      }\n      columnClassName={() => classNames?.column ?? kanbanColumn()}\n      renderListFooter={(column) => (\n        <KanbanListFooter\n          onAddTask={() =>\n            setBoard(addCardPlaceholder(column.id, board, false))\n          }\n        />\n      )}\n      allowListFooter={(column) =>\n        !column.children.includes(getAddCardPlaceholderKey(column.id))\n      }\n      onCardMove={handleCardMove}\n    />\n  );\n};\n"],"mappings":"kqBA+EA,MAAaA,GAAU,CACrB,aACA,YACA,aACA,gBACiB,CACjB,GAAM,CAAC,EAAO,GAAY,EAAoB,EAAW,CAwCzD,OACE,EAACC,EAAAA,CACC,WAAY,EACZ,UAAW,GAzCqB,CAClC,KAAM,CACJ,QAAS,CAAE,UAA4B,EAAC,EAAA,CAAiB,OAAA,CAAQ,CACjE,YAAa,GACd,CACD,WAAY,CACV,QAAS,CAAE,SAAQ,UACjB,EAAC,EAAA,CACC,SAAU,EAAO,GACjB,WAAY,EACZ,cAAe,EACf,MAAO,GAAM,SAAS,OAAS,IAC/B,CAEJ,YAAa,GACd,CACF,CA0BG,mBAAqB,GAAW,EAAC,EAAA,CAA2B,SAAA,CAAU,CACtE,4BAA+B,EAAC,EAAA,EAAA,CAA0B,CAC1D,cAAe,EACb,GAAY,QAAU,GAAQ,CAC9B,GAAY,MAAQ,GAAY,CAChC,QACD,CACD,2BACE,GAAY,eAAiB,GAAqB,CAEpD,oBAAuB,GAAY,QAAU,GAAc,CAC3D,iBAAmB,GACjB,EAAC,EAAA,CACC,cACE,EAAS,EAAmB,EAAO,GAAI,EAAO,GAAM,CAAC,CAAA,CAEvD,CAEJ,gBAAkB,GAChB,CAAC,EAAO,SAAS,SAAS,EAAyB,EAAO,GAAG,CAAC,CAEhE,WA7CoB,GAAmB,CACzC,EACG,GACC,EACE,EACA,gBAAgB,EAAK,KACf,GACL,IAAe,CACd,GAAG,EACH,oBAAqB,EAAU,oBAAsB,GAAK,EAC3D,EACA,IAAkB,CACjB,GAAG,EACH,oBAAqB,EAAa,oBAAsB,GAAK,EAC9D,EACF,CACJ,CACD,IAAa,EAAK,GA6BhB"}
+{"version":3,"file":"Kanban.mjs","names":["Kanban","KanbanKit"],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\nimport { dropHandler, Kanban as KanbanKit } from 'react-kanban-kit';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  kanban,\n  kanbanCardWrapper,\n  kanbanCardWrapperRoot,\n  kanbanColumn,\n  kanbanRoot,\n  kanbanWrapperColumn,\n} from '@mage-ui/styled-system/recipes';\n\nimport { KanbanCard } from './KanbanCard';\nimport { KanbanCardAdder } from './KanbanCardAdder';\nimport { KanbanCardDragIndicator } from './KanbanCardDragIndicator';\nimport { KanbanColumnHeader } from './KanbanColumnHeader';\nimport { KanbanListFooter } from './KanbanListFooter';\nimport { addCardPlaceholder, getAddCardPlaceholderKey } from './kanbanUtils';\n\nexport interface BoardItem {\n  id: string;\n  title: string;\n  parentId: string | null;\n  children: string[];\n  content?: {\n    description?: string;\n    priority?: string;\n    assignee?: {\n      name: string;\n      src?: string;\n      alt?: string;\n    };\n    inTop?: boolean;\n    [key: string]: unknown;\n  };\n  type?: string | number;\n  status?: string;\n  totalChildrenCount: number;\n  totalItemsCount?: number;\n  isDraggable?: boolean;\n}\nexport interface BoardData {\n  root: BoardItem;\n  [key: string]: BoardItem;\n}\nexport interface CardRenderProps {\n  data: BoardItem;\n  column: BoardItem;\n  index: number;\n  isDraggable: boolean;\n}\n\nexport type ConfigMap = {\n  [type: string]: {\n    render: (props: CardRenderProps) => ReactNode;\n    isDraggable?: boolean;\n  };\n};\n\nexport interface KanbanProps {\n  dataSource: BoardData;\n  configMap?: ConfigMap;\n  onCardMove?: (move: CardMove) => void;\n  classNames?: {\n    kanban?: string;\n    root?: string;\n    columnWrapper?: string;\n    column?: string;\n    cardWrapper?: string;\n    cardWrapperRoot?: string;\n  };\n}\n\nexport interface CardMove {\n  cardId: string;\n  fromColumnId: string;\n  toColumnId: string;\n  taskAbove: string | null;\n  taskBelow: string | null;\n  position: number;\n}\n\nexport const Kanban = ({\n  dataSource,\n  configMap,\n  onCardMove,\n  classNames,\n}: KanbanProps) => {\n  const [board, setBoard] = useState<BoardData>(dataSource);\n\n  const defaultConfigMap: ConfigMap = {\n    card: {\n      render: ({ data }: CardRenderProps) => <KanbanCard data={data} />,\n      isDraggable: true,\n    },\n    'new-card': {\n      render: ({ column, data }: CardRenderProps) => (\n        <KanbanCardAdder\n          columnId={column.id}\n          dataSource={board}\n          setDataSource={setBoard}\n          inTop={data?.content?.inTop ?? true}\n        />\n      ),\n      isDraggable: false,\n    },\n  };\n\n  const handleCardMove = (move: CardMove) => {\n    setBoard(\n      (prev) =>\n        dropHandler(\n          move,\n          structuredClone(prev),\n          () => {},\n          (newColumn) => ({\n            ...newColumn,\n            totalChildrenCount: (newColumn.totalChildrenCount || 0) + 1,\n          }),\n          (sourceColumn) => ({\n            ...sourceColumn,\n            totalChildrenCount: (sourceColumn.totalChildrenCount || 0) - 1,\n          }),\n        ) as BoardData,\n    );\n    onCardMove?.(move);\n  };\n\n  return (\n    <KanbanKit\n      dataSource={board}\n      configMap={configMap ?? defaultConfigMap}\n      renderColumnHeader={(column) => <KanbanColumnHeader column={column} />}\n      renderCardDragIndicator={() => <KanbanCardDragIndicator />}\n      rootClassName={cx(\n        classNames?.kanban ?? kanban(),\n        classNames?.root ?? kanbanRoot(),\n        'group',\n      )}\n      columnWrapperClassName={() =>\n        classNames?.columnWrapper ?? kanbanWrapperColumn()\n      }\n      columnClassName={() => classNames?.column ?? kanbanColumn()}\n      cardWrapperClassName={cx(\n        classNames?.cardWrapper ?? kanbanCardWrapper(),\n        classNames?.cardWrapperRoot ?? kanbanCardWrapperRoot(),\n      )}\n      renderListFooter={(column) => (\n        <KanbanListFooter\n          onAddTask={() =>\n            setBoard(addCardPlaceholder(column.id, board, false))\n          }\n        />\n      )}\n      allowListFooter={(column) =>\n        !column.children.includes(getAddCardPlaceholderKey(column.id))\n      }\n      onCardMove={handleCardMove}\n    />\n  );\n};\n"],"mappings":"otBAmFA,MAAaA,GAAU,CACrB,aACA,YACA,aACA,gBACiB,CACjB,GAAM,CAAC,EAAO,GAAY,EAAoB,EAAW,CAwCzD,OACE,EAACC,EAAAA,CACC,WAAY,EACZ,UAAW,GAzCqB,CAClC,KAAM,CACJ,QAAS,CAAE,UAA4B,EAAC,EAAA,CAAiB,OAAA,CAAQ,CACjE,YAAa,GACd,CACD,WAAY,CACV,QAAS,CAAE,SAAQ,UACjB,EAAC,EAAA,CACC,SAAU,EAAO,GACjB,WAAY,EACZ,cAAe,EACf,MAAO,GAAM,SAAS,OAAS,IAC/B,CAEJ,YAAa,GACd,CACF,CA0BG,mBAAqB,GAAW,EAAC,EAAA,CAA2B,SAAA,CAAU,CACtE,4BAA+B,EAAC,EAAA,EAAA,CAA0B,CAC1D,cAAe,EACb,GAAY,QAAU,GAAQ,CAC9B,GAAY,MAAQ,GAAY,CAChC,QACD,CACD,2BACE,GAAY,eAAiB,GAAqB,CAEpD,oBAAuB,GAAY,QAAU,GAAc,CAC3D,qBAAsB,EACpB,GAAY,aAAe,GAAmB,CAC9C,GAAY,iBAAmB,GAAuB,CACvD,CACD,iBAAmB,GACjB,EAAC,EAAA,CACC,cACE,EAAS,EAAmB,EAAO,GAAI,EAAO,GAAM,CAAC,CAAA,CAEvD,CAEJ,gBAAkB,GAChB,CAAC,EAAO,SAAS,SAAS,EAAyB,EAAO,GAAG,CAAC,CAEhE,WAjDoB,GAAmB,CACzC,EACG,GACC,EACE,EACA,gBAAgB,EAAK,KACf,GACL,IAAe,CACd,GAAG,EACH,oBAAqB,EAAU,oBAAsB,GAAK,EAC3D,EACA,IAAkB,CACjB,GAAG,EACH,oBAAqB,EAAa,oBAAsB,GAAK,EAC9D,EACF,CACJ,CACD,IAAa,EAAK,GAiChB"}

package/dist/components/data-display/kanban/KanbanCardAdder.mjs

@@ -1,2 +1,2 @@
-import{Button as e}from"../../buttons/button/Button.mjs";import{addCard as t,removeCardPlaceholder as n}from"./kanbanUtils.mjs";import{TextInput as r}from"../../controls/text-input/TextInput.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{kanbanCardAdder as a,kanbanCardAdderButtonAdd as o,kanbanCardAdderButtonAddInner as s,kanbanCardAdderButtonAddLabel as c,kanbanCardAdderButtonAddRoot as l,kanbanCardAdderButtonAddSection as u,kanbanCardAdderButtonCancel as d,kanbanCardAdderButtonCancelInner as f,kanbanCardAdderButtonCancelLabel as p,kanbanCardAdderButtonCancelRoot as m,kanbanCardAdderButtonCancelSection as h,kanbanCardAdderButtonWrapper as g,kanbanCardAdderRoot as _,kanbanCardAdderTextInput as v,kanbanCardAdderTextInputDescription as y,kanbanCardAdderTextInputError as b,kanbanCardAdderTextInputInput as x,kanbanCardAdderTextInputLabel as S,kanbanCardAdderTextInputRequired as C,kanbanCardAdderTextInputRoot as w,kanbanCardAdderTextInputSection as T,kanbanCardAdderTextInputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D,jsxs as O}from"react/jsx-runtime";import{useState as k}from"react";import{visuallyHidden as A}from"@mage-ui/styled-system/patterns";const j=({columnId:j,dataSource:M,setDataSource:N,inTop:P,inputLabel:F=`Task Title`,inputPlaceholder:I=`Enter task title`,addLabel:L=`Add Task`,cancelLabel:R=`Cancel`,classNames:z})=>{let[B,V]=k(``),H=e=>{N(n(e,M))},U=(e,n)=>{n.trim()&&N(t(e,M,n,P))};return O(`div`,{className:i(z?.cardAdder??a(),z?.root??_()),children:[D(r,{label:F,value:B,onChange:e=>V(e.currentTarget.value),placeholder:I,onKeyDown:e=>{e.key===`Enter`?U(j,B):e.key===`Escape`&&H(j)},classNames:{textInput:z?.textInput??v(),root:z?.root??w(),label:z?.label??i(S(),A()),description:z?.description??y(),error:z?.error??b(),wrapper:z?.wrapper??E(),input:z?.input??x(),section:z?.section??T(),required:z?.required??C()}}),O(`div`,{className:z?.buttonWrapper??g(),children:[D(e,{type:`button`,onClick:()=>H(j),classNames:{button:z?.cancelButton?.button??d(),root:z?.cancelButton?.root??m(),inner:z?.cancelButton?.inner??f(),label:z?.cancelButton?.label??p(),section:z?.cancelButton?.section??h()},children:R}),D(e,{type:`button`,onClick:()=>U(j,B),classNames:{button:z?.addButton?.button??o(),root:z?.addButton?.root??l(),inner:z?.addButton?.inner??s(),label:z?.addButton?.label??c(),section:z?.addButton?.section??u()},children:L})]})]})};export{j as KanbanCardAdder};
+import{Button as e}from"../../buttons/button/Button.mjs";import{TextInput as t}from"../../controls/text-input/TextInput.mjs";import{addCard as n,removeCardPlaceholder as r}from"./kanbanUtils.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{kanbanCardAdder as a,kanbanCardAdderButtonAdd as o,kanbanCardAdderButtonAddInner as s,kanbanCardAdderButtonAddLabel as c,kanbanCardAdderButtonAddRoot as l,kanbanCardAdderButtonAddSection as u,kanbanCardAdderButtonCancel as d,kanbanCardAdderButtonCancelInner as f,kanbanCardAdderButtonCancelLabel as p,kanbanCardAdderButtonCancelRoot as m,kanbanCardAdderButtonCancelSection as h,kanbanCardAdderButtonWrapper as g,kanbanCardAdderRoot as _,kanbanCardAdderTextInput as v,kanbanCardAdderTextInputDescription as y,kanbanCardAdderTextInputError as b,kanbanCardAdderTextInputInput as x,kanbanCardAdderTextInputLabel as S,kanbanCardAdderTextInputRequired as C,kanbanCardAdderTextInputRoot as w,kanbanCardAdderTextInputSection as T,kanbanCardAdderTextInputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D,jsxs as O}from"react/jsx-runtime";import{useState as k}from"react";import{visuallyHidden as A}from"@mage-ui/styled-system/patterns";const j=({columnId:j,dataSource:M,setDataSource:N,inTop:P,inputLabel:F=`Task Title`,inputPlaceholder:I=`Enter task title`,addLabel:L=`Add Task`,cancelLabel:R=`Cancel`,classNames:z})=>{let[B,V]=k(``),H=e=>{N(r(e,M))},U=(e,t)=>{t.trim()&&N(n(e,M,t,P))};return O(`div`,{className:i(z?.cardAdder??a(),z?.root??_()),children:[D(t,{label:F,value:B,onChange:e=>V(e.currentTarget.value),placeholder:I,onKeyDown:e=>{e.key===`Enter`?U(j,B):e.key===`Escape`&&H(j)},classNames:{textInput:z?.textInput??v(),root:z?.root??w(),label:z?.label??i(S(),A()),description:z?.description??y(),error:z?.error??b(),wrapper:z?.wrapper??E(),input:z?.input??x(),section:z?.section??T(),required:z?.required??C()}}),O(`div`,{className:z?.buttonWrapper??g(),children:[D(e,{type:`button`,onClick:()=>H(j),classNames:{button:z?.cancelButton?.button??d(),root:z?.cancelButton?.root??m(),inner:z?.cancelButton?.inner??f(),label:z?.cancelButton?.label??p(),section:z?.cancelButton?.section??h()},children:R}),D(e,{type:`button`,onClick:()=>U(j,B),classNames:{button:z?.addButton?.button??o(),root:z?.addButton?.root??l(),inner:z?.addButton?.inner??s(),label:z?.addButton?.label??c(),section:z?.addButton?.section??u()},children:L})]})]})};export{j as KanbanCardAdder};
 //# sourceMappingURL=KanbanCardAdder.mjs.map

package/dist/components/data-display/table/TableBody.mjs

@@ -1,2 +1,2 @@
-import{Virtual as e}from"../../misc/virtual/Virtual.mjs";import{useScrollableContext as t}from"./TableContext.mjs";import{Table as n}from"@mantine/core";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{Children as o,cloneElement as s,isValidElement as c}from"react";const l=({height:e})=>e<=0?null:i(`tr`,{"aria-hidden":!0,children:i(`td`,{style:{height:e}})}),u=({item:e})=>{let t=e.row;if(!c(t))return t;let n=t.props.ref;return s(t,{ref:t=>{e.measureRef(t),typeof n==`function`?n(t):n&&(n.current=t)}})},d=({classNames:s,children:c,...d})=>{let f=t();if(f){let t=o.toArray(c);return i(n.Tbody,{className:s?.tbody,...d,children:i(e,{rows:t,estimateSize:f.estimateSize,scrollRef:f.viewportRef,overscan:f.overscan,children:(e,t)=>a(r,{children:[i(l,{height:t.top}),e.map(e=>i(u,{item:e},e.key)),i(l,{height:t.bottom})]})})})}return i(n.Tbody,{className:s?.tbody,...d,children:c})};export{d as TableBody};
+import{Virtual as e}from"../../misc/virtual/Virtual.mjs";import{useScrollableContext as t}from"./TableContext.mjs";import{Table as n}from"@mantine/core";import{Fragment as r,jsx as i,jsxs as a}from"react/jsx-runtime";import{Children as o,cloneElement as s,isValidElement as c}from"react";const l=({height:e})=>e<=0?null:i(`tr`,{"aria-hidden":!0,children:i(`td`,{style:{height:e}})}),u=({item:e})=>{let t=e.row;if(!c(t))return t;let n=t.props.ref;return s(t,{ref:t=>{e.measureRef(t),typeof n==`function`?n(t):n&&(n.current=t)}})},d=({classNames:s,children:c,...d})=>{let f=t();if(f?.virtualized){let t=o.toArray(c);return i(n.Tbody,{className:s?.tbody,...d,children:i(e,{rows:t,estimateSize:f.estimateSize,scrollRef:f.viewportRef,overscan:f.overscan,children:(e,t)=>a(r,{children:[i(l,{height:t.top}),e.map(e=>i(u,{item:e},e.key)),i(l,{height:t.bottom})]})})})}return i(n.Tbody,{className:s?.tbody,...d,children:c})};export{d as TableBody};
 //# sourceMappingURL=TableBody.mjs.map

package/dist/components/data-display/table/TableBody.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableBody.mjs","names":["MantineTable"],"sources":["../../../../src/components/data-display/table/TableBody.tsx"],"sourcesContent":["import {\n  Children,\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n} from 'react';\n\nimport { Table as MantineTable } from '@mantine/core';\n\nimport { Virtual, type VirtualItem } from '../../misc/virtual/Virtual';\nimport { useScrollableContext } from './TableContext';\nimport type { TableClassNames } from './TableRoot';\n\nconst SpacerRow = ({ height }: { height: number }): ReactNode => {\n  if (height <= 0) return null;\n  return (\n    <tr aria-hidden>\n      <td style={{ height }} />\n    </tr>\n  );\n};\n\nconst VirtualRow = ({ item }: { item: VirtualItem<ReactNode> }): ReactNode => {\n  const child = item.row;\n  if (!isValidElement(child)) return child;\n\n  const existingRef = (child.props as Record<string, unknown>).ref as\n    | React.Ref<Element>\n    | undefined;\n\n  return cloneElement(\n    child as React.ReactElement<{ ref?: React.Ref<Element> }>,\n    {\n      ref: (node: Element | null) => {\n        item.measureRef(node);\n        if (typeof existingRef === 'function') {\n          existingRef(node);\n        } else if (existingRef) {\n          existingRef.current = node;\n        }\n      },\n    },\n  );\n};\n\nexport type TableBodyProps = Omit<\n  ComponentPropsWithoutRef<'tbody'>,\n  'children' | 'className'\n> & {\n  children: ReactNode;\n  classNames?: Pick<TableClassNames, 'tbody'>;\n};\n\nexport const TableBody = ({\n  classNames,\n  children,\n  ...props\n}: TableBodyProps): ReactNode => {\n  const scrollable = useScrollableContext();\n\n  if (scrollable) {\n    const childArray = Children.toArray(children);\n\n    return (\n      <MantineTable.Tbody className={classNames?.tbody} {...props}>\n        <Virtual\n          rows={childArray}\n          estimateSize={scrollable.estimateSize}\n          scrollRef={scrollable.viewportRef}\n          overscan={scrollable.overscan}\n        >\n          {(items, padding) => (\n            <>\n              <SpacerRow height={padding.top} />\n              {items.map((item) => (\n                <VirtualRow key={item.key} item={item} />\n              ))}\n              <SpacerRow height={padding.bottom} />\n            </>\n          )}\n        </Virtual>\n      </MantineTable.Tbody>\n    );\n  }\n\n  return (\n    <MantineTable.Tbody className={classNames?.tbody} {...props}>\n      {children}\n    </MantineTable.Tbody>\n  );\n};\n"],"mappings":"gSAcA,MAAM,GAAa,CAAE,YACf,GAAU,EAAU,KAEtB,EAAC,KAAA,CAAG,cAAA,YACF,EAAC,KAAA,CAAG,MAAO,CAAE,SAAQ,CAAA,CAAI,EACtB,CAIH,GAAc,CAAE,UAAwD,CAC5E,IAAM,EAAQ,EAAK,IACnB,GAAI,CAAC,EAAe,EAAM,CAAE,OAAO,EAEnC,IAAM,EAAe,EAAM,MAAkC,IAI7D,OAAO,EACL,EACA,CACE,IAAM,GAAyB,CAC7B,EAAK,WAAW,EAAK,CACjB,OAAO,GAAgB,WACzB,EAAY,EAAK,CACR,IACT,EAAY,QAAU,IAG3B,CACF,EAWU,GAAa,CACxB,aACA,WACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,GAAsB,CAEzC,GAAI,EAAY,CACd,IAAM,EAAa,EAAS,QAAQ,EAAS,CAE7C,OACE,EAACA,EAAa,MAAA,CAAM,UAAW,GAAY,MAAO,GAAI,WACpD,EAAC,EAAA,CACC,KAAM,EACN,aAAc,EAAW,aACzB,UAAW,EAAW,YACtB,SAAU,EAAW,mBAEnB,EAAO,IACP,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CAAU,OAAQ,EAAQ,IAAA,CAAO,CACjC,EAAM,IAAK,GACV,EAAC,EAAA,CAAgC,OAAA,CAAhB,EAAK,IAAmB,CACzC,CACF,EAAC,EAAA,CAAU,OAAQ,EAAQ,OAAA,CAAU,GACpC,EAEG,EACS,CAIzB,OACE,EAACA,EAAa,MAAA,CAAM,UAAW,GAAY,MAAO,GAAI,EACnD,YACkB"}
+{"version":3,"file":"TableBody.mjs","names":["MantineTable"],"sources":["../../../../src/components/data-display/table/TableBody.tsx"],"sourcesContent":["import {\n  Children,\n  type ComponentPropsWithoutRef,\n  cloneElement,\n  isValidElement,\n  type ReactNode,\n} from 'react';\n\nimport { Table as MantineTable } from '@mantine/core';\n\nimport { Virtual, type VirtualItem } from '../../misc/virtual/Virtual';\nimport { useScrollableContext } from './TableContext';\nimport type { TableClassNames } from './TableRoot';\n\nconst SpacerRow = ({ height }: { height: number }): ReactNode => {\n  if (height <= 0) return null;\n  return (\n    <tr aria-hidden>\n      <td style={{ height }} />\n    </tr>\n  );\n};\n\nconst VirtualRow = ({ item }: { item: VirtualItem<ReactNode> }): ReactNode => {\n  const child = item.row;\n  if (!isValidElement(child)) return child;\n\n  const existingRef = (child.props as Record<string, unknown>).ref as\n    | React.Ref<Element>\n    | undefined;\n\n  return cloneElement(\n    child as React.ReactElement<{ ref?: React.Ref<Element> }>,\n    {\n      ref: (node: Element | null) => {\n        item.measureRef(node);\n        if (typeof existingRef === 'function') {\n          existingRef(node);\n        } else if (existingRef) {\n          existingRef.current = node;\n        }\n      },\n    },\n  );\n};\n\nexport type TableBodyProps = Omit<\n  ComponentPropsWithoutRef<'tbody'>,\n  'children' | 'className'\n> & {\n  children: ReactNode;\n  classNames?: Pick<TableClassNames, 'tbody'>;\n};\n\nexport const TableBody = ({\n  classNames,\n  children,\n  ...props\n}: TableBodyProps): ReactNode => {\n  const scrollable = useScrollableContext();\n\n  if (scrollable?.virtualized) {\n    const childArray = Children.toArray(children);\n\n    return (\n      <MantineTable.Tbody className={classNames?.tbody} {...props}>\n        <Virtual\n          rows={childArray}\n          estimateSize={scrollable.estimateSize}\n          scrollRef={scrollable.viewportRef}\n          overscan={scrollable.overscan}\n        >\n          {(items, padding) => (\n            <>\n              <SpacerRow height={padding.top} />\n              {items.map((item) => (\n                <VirtualRow key={item.key} item={item} />\n              ))}\n              <SpacerRow height={padding.bottom} />\n            </>\n          )}\n        </Virtual>\n      </MantineTable.Tbody>\n    );\n  }\n\n  return (\n    <MantineTable.Tbody className={classNames?.tbody} {...props}>\n      {children}\n    </MantineTable.Tbody>\n  );\n};\n"],"mappings":"gSAcA,MAAM,GAAa,CAAE,YACf,GAAU,EAAU,KAEtB,EAAC,KAAA,CAAG,cAAA,YACF,EAAC,KAAA,CAAG,MAAO,CAAE,SAAQ,CAAA,CAAI,EACtB,CAIH,GAAc,CAAE,UAAwD,CAC5E,IAAM,EAAQ,EAAK,IACnB,GAAI,CAAC,EAAe,EAAM,CAAE,OAAO,EAEnC,IAAM,EAAe,EAAM,MAAkC,IAI7D,OAAO,EACL,EACA,CACE,IAAM,GAAyB,CAC7B,EAAK,WAAW,EAAK,CACjB,OAAO,GAAgB,WACzB,EAAY,EAAK,CACR,IACT,EAAY,QAAU,IAG3B,CACF,EAWU,GAAa,CACxB,aACA,WACA,GAAG,KAC4B,CAC/B,IAAM,EAAa,GAAsB,CAEzC,GAAI,GAAY,YAAa,CAC3B,IAAM,EAAa,EAAS,QAAQ,EAAS,CAE7C,OACE,EAACA,EAAa,MAAA,CAAM,UAAW,GAAY,MAAO,GAAI,WACpD,EAAC,EAAA,CACC,KAAM,EACN,aAAc,EAAW,aACzB,UAAW,EAAW,YACtB,SAAU,EAAW,mBAEnB,EAAO,IACP,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CAAU,OAAQ,EAAQ,IAAA,CAAO,CACjC,EAAM,IAAK,GACV,EAAC,EAAA,CAAgC,OAAA,CAAhB,EAAK,IAAmB,CACzC,CACF,EAAC,EAAA,CAAU,OAAQ,EAAQ,OAAA,CAAU,GACpC,EAEG,EACS,CAIzB,OACE,EAACA,EAAa,MAAA,CAAM,UAAW,GAAY,MAAO,GAAI,EACnD,YACkB"}

package/dist/components/data-display/table/TableContext.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableContext.mjs","names":[],"sources":["../../../../src/components/data-display/table/TableContext.tsx"],"sourcesContent":["import { createContext, type RefObject, useContext } from 'react';\n\nexport type ScrollableContextValue = {\n  viewportRef: RefObject<HTMLDivElement | null>;\n  estimateSize: number;\n  overscan?: number;\n  stickyHeader?: boolean;\n  setHeaderHeight: (height: number) => void;\n};\n\nexport const ScrollableContext = createContext<ScrollableContextValue | null>(\n  null,\n);\n\nexport const useScrollableContext = () => useContext(ScrollableContext);\n"],"mappings":"sDAUA,MAAa,EAAoB,EAC/B,KACD,CAEY,MAA6B,EAAW,EAAkB"}
+{"version":3,"file":"TableContext.mjs","names":[],"sources":["../../../../src/components/data-display/table/TableContext.tsx"],"sourcesContent":["import { createContext, type RefObject, useContext } from 'react';\n\nexport type ScrollableContextValue = {\n  viewportRef: RefObject<HTMLDivElement | null>;\n  estimateSize: number;\n  overscan?: number;\n  stickyHeader?: boolean;\n  setHeaderHeight: (height: number) => void;\n  virtualized?: boolean;\n};\n\nexport const ScrollableContext = createContext<ScrollableContextValue | null>(\n  null,\n);\n\nexport const useScrollableContext = () => useContext(ScrollableContext);\n"],"mappings":"sDAWA,MAAa,EAAoB,EAC/B,KACD,CAEY,MAA6B,EAAW,EAAkB"}

package/dist/components/data-display/table/TableScroll.d.mts

@@ -5,8 +5,9 @@ import { ReactNode } from "react";
 type ScrollableTableConfig = {
   maxHeight?: number | string;
   minWidth?: number | string;
-  estimateSize: number;
+  estimateSize?: number;
   overscan?: number;
+  virtualized?: boolean;
   scrollAreaProps?: Omit<ScrollAreaProps, 'children' | 'viewportRef' | 'style'>;
 };
 //#endregion

package/dist/components/data-display/table/TableScroll.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"TableScroll.d.mts","names":[],"sources":["../../../../src/components/data-display/table/TableScroll.tsx"],"mappings":";;;;KAmBY,qBAAA;EACV,SAAA;EACA,QAAA;EACA,YAAA;EACA,QAAA;EACA,eAAA,GAAkB,IAAA,CAAK,eAAA;AAAA"}
+{"version":3,"file":"TableScroll.d.mts","names":[],"sources":["../../../../src/components/data-display/table/TableScroll.tsx"],"mappings":";;;;KAmBY,qBAAA;EACV,SAAA;EACA,QAAA;EACA,YAAA;EACA,QAAA;EACA,WAAA;EACA,eAAA,GAAkB,IAAA,CAAK,eAAA;AAAA"}

package/dist/components/data-display/table/TableScroll.mjs

@@ -1,2 +1,2 @@
-import{ScrollableContext as e}from"./TableContext.mjs";import{ScrollArea as t}from"../../misc/scroll-area/ScrollArea.mjs";import{tableScroll as n,tableScrollContent as r,tableScrollCorner as i,tableScrollRoot as a,tableScrollScrollbar as o,tableScrollThumb as s,tableScrollViewport as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useRef as u,useState as d}from"react";const f=({children:f,scrollable:p,stickyHeader:m})=>{let h=u(null),[g,_]=d(0),{maxHeight:v,minWidth:y,estimateSize:b,overscan:x,scrollAreaProps:S}=p,C={...v&&{"--scrollarea-viewport-max-height":typeof v==`number`?`${v}px`:v},...y&&{"--scrollable-table-min-width":typeof y==`number`?`${y}px`:y},...m&&{"--scrollarea-scrollbar-vertical-top":`${g}px`}},w={scrollArea:S?.classNames?.scrollArea??n(),root:S?.classNames?.root??a(),viewport:S?.classNames?.viewport??c(),content:S?.classNames?.content??r(),scrollbar:S?.classNames?.scrollbar??o(),thumb:S?.classNames?.thumb??s(),corner:S?.classNames?.corner??i()};return l(e.Provider,{value:{viewportRef:h,estimateSize:b,overscan:x,stickyHeader:m,setHeaderHeight:_},children:l(t,{scrollbars:`xy`,type:`hover`,offsetScrollbars:!1,"data-sticky-header":m||void 0,viewportRef:h,classNames:w,style:C,...S,children:f})})};export{f as TableScroll};
+import{ScrollableContext as e}from"./TableContext.mjs";import{ScrollArea as t}from"../../misc/scroll-area/ScrollArea.mjs";import{tableScroll as n,tableScrollContent as r,tableScrollCorner as i,tableScrollRoot as a,tableScrollScrollbar as o,tableScrollThumb as s,tableScrollViewport as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useMemo as u,useRef as d,useState as f}from"react";const p=({children:p,scrollable:m,stickyHeader:h})=>{let g=d(null),[_,v]=f(0),{maxHeight:y,minWidth:b,estimateSize:x,overscan:S,virtualized:C,scrollAreaProps:w}=m,T={...y&&{"--scrollarea-viewport-max-height":typeof y==`number`?`${y}px`:y},...b&&{"--scrollable-table-min-width":typeof b==`number`?`${b}px`:b},...h&&{"--scrollarea-scrollbar-vertical-top":`${_}px`}},E={scrollArea:w?.classNames?.scrollArea??n(),root:w?.classNames?.root??a(),viewport:w?.classNames?.viewport??c(),content:w?.classNames?.content??r(),scrollbar:w?.classNames?.scrollbar??o(),thumb:w?.classNames?.thumb??s(),corner:w?.classNames?.corner??i()},D=u(()=>({viewportRef:g,estimateSize:x??40,overscan:S,stickyHeader:h,setHeaderHeight:v,virtualized:C}),[x,S,h,C]);return l(e.Provider,{value:D,children:l(t,{scrollbars:`xy`,type:`hover`,offsetScrollbars:!1,"data-sticky-header":h||void 0,viewportRef:g,classNames:E,style:T,...w,children:p})})};export{p as TableScroll};
 //# sourceMappingURL=TableScroll.mjs.map

package/dist/components/data-display/table/TableScroll.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableScroll.mjs","names":["tableScrollRecipe"],"sources":["../../../../src/components/data-display/table/TableScroll.tsx"],"sourcesContent":["import { type ReactNode, useRef, useState } from 'react';\n\nimport {\n  tableScrollContent,\n  tableScrollCorner,\n  tableScroll as tableScrollRecipe,\n  tableScrollRoot,\n  tableScrollScrollbar,\n  tableScrollThumb,\n  tableScrollViewport,\n} from '@mage-ui/styled-system/recipes';\n\nimport {\n  ScrollArea,\n  type ScrollAreaClassNames,\n  type ScrollAreaProps,\n} from '../../misc/scroll-area/ScrollArea';\nimport { ScrollableContext } from './TableContext';\n\nexport type ScrollableTableConfig = {\n  maxHeight?: number | string;\n  minWidth?: number | string;\n  estimateSize: number;\n  overscan?: number;\n  scrollAreaProps?: Omit<ScrollAreaProps, 'children' | 'viewportRef' | 'style'>;\n};\n\ntype TableScrollProps = {\n  children: ReactNode;\n  scrollable: ScrollableTableConfig;\n  stickyHeader?: boolean;\n};\n\nexport const TableScroll = ({\n  children,\n  scrollable,\n  stickyHeader,\n}: TableScrollProps): ReactNode => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [headerHeight, setHeaderHeight] = useState(0);\n\n  const { maxHeight, minWidth, estimateSize, overscan, scrollAreaProps } =\n    scrollable;\n\n  const style = {\n    ...(maxHeight && {\n      '--scrollarea-viewport-max-height':\n        typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n    }),\n    ...(minWidth && {\n      '--scrollable-table-min-width':\n        typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n    }),\n    ...(stickyHeader && {\n      '--scrollarea-scrollbar-vertical-top': `${headerHeight}px`,\n    }),\n  } as React.CSSProperties;\n\n  const classNames: ScrollAreaClassNames = {\n    scrollArea: scrollAreaProps?.classNames?.scrollArea ?? tableScrollRecipe(),\n    root: scrollAreaProps?.classNames?.root ?? tableScrollRoot(),\n    viewport: scrollAreaProps?.classNames?.viewport ?? tableScrollViewport(),\n    content: scrollAreaProps?.classNames?.content ?? tableScrollContent(),\n    scrollbar: scrollAreaProps?.classNames?.scrollbar ?? tableScrollScrollbar(),\n    thumb: scrollAreaProps?.classNames?.thumb ?? tableScrollThumb(),\n    corner: scrollAreaProps?.classNames?.corner ?? tableScrollCorner(),\n  };\n\n  return (\n    <ScrollableContext.Provider\n      value={{\n        viewportRef,\n        estimateSize,\n        overscan,\n        stickyHeader,\n        setHeaderHeight,\n      }}\n    >\n      <ScrollArea\n        scrollbars='xy'\n        type='hover'\n        offsetScrollbars={false}\n        data-sticky-header={stickyHeader || undefined}\n        viewportRef={viewportRef}\n        classNames={classNames}\n        style={style}\n        {...scrollAreaProps}\n      >\n        {children}\n      </ScrollArea>\n    </ScrollableContext.Provider>\n  );\n};\n"],"mappings":"yZAiCA,MAAa,GAAe,CAC1B,WACA,aACA,kBACiC,CACjC,IAAM,EAAc,EAAuB,KAAK,CAC1C,CAAC,EAAc,GAAmB,EAAS,EAAE,CAE7C,CAAE,YAAW,WAAU,eAAc,WAAU,mBACnD,EAEI,EAAQ,CACZ,GAAI,GAAa,CACf,mCACE,OAAO,GAAc,SAAW,GAAG,EAAU,IAAM,EACtD,CACD,GAAI,GAAY,CACd,+BACE,OAAO,GAAa,SAAW,GAAG,EAAS,IAAM,EACpD,CACD,GAAI,GAAgB,CAClB,sCAAuC,GAAG,EAAa,IACxD,CACF,CAEK,EAAmC,CACvC,WAAY,GAAiB,YAAY,YAAcA,GAAmB,CAC1E,KAAM,GAAiB,YAAY,MAAQ,GAAiB,CAC5D,SAAU,GAAiB,YAAY,UAAY,GAAqB,CACxE,QAAS,GAAiB,YAAY,SAAW,GAAoB,CACrE,UAAW,GAAiB,YAAY,WAAa,GAAsB,CAC3E,MAAO,GAAiB,YAAY,OAAS,GAAkB,CAC/D,OAAQ,GAAiB,YAAY,QAAU,GAAmB,CACnE,CAED,OACE,EAAC,EAAkB,SAAA,CACjB,MAAO,CACL,cACA,eACA,WACA,eACA,kBACD,UAED,EAAC,EAAA,CACC,WAAW,KACX,KAAK,QACL,iBAAkB,GAClB,qBAAoB,GAAgB,IAAA,GACvB,cACD,aACL,QACP,GAAI,EAEH,YACU,EACc"}
+{"version":3,"file":"TableScroll.mjs","names":["tableScrollRecipe"],"sources":["../../../../src/components/data-display/table/TableScroll.tsx"],"sourcesContent":["import { type ReactNode, useMemo, useRef, useState } from 'react';\n\nimport {\n  tableScrollContent,\n  tableScrollCorner,\n  tableScroll as tableScrollRecipe,\n  tableScrollRoot,\n  tableScrollScrollbar,\n  tableScrollThumb,\n  tableScrollViewport,\n} from '@mage-ui/styled-system/recipes';\n\nimport {\n  ScrollArea,\n  type ScrollAreaClassNames,\n  type ScrollAreaProps,\n} from '../../misc/scroll-area/ScrollArea';\nimport { ScrollableContext } from './TableContext';\n\nexport type ScrollableTableConfig = {\n  maxHeight?: number | string;\n  minWidth?: number | string;\n  estimateSize?: number;\n  overscan?: number;\n  virtualized?: boolean;\n  scrollAreaProps?: Omit<ScrollAreaProps, 'children' | 'viewportRef' | 'style'>;\n};\n\ntype TableScrollProps = {\n  children: ReactNode;\n  scrollable: ScrollableTableConfig;\n  stickyHeader?: boolean;\n};\n\nexport const TableScroll = ({\n  children,\n  scrollable,\n  stickyHeader,\n}: TableScrollProps): ReactNode => {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const [headerHeight, setHeaderHeight] = useState(0);\n\n  const {\n    maxHeight,\n    minWidth,\n    estimateSize,\n    overscan,\n    virtualized,\n    scrollAreaProps,\n  } = scrollable;\n\n  const style = {\n    ...(maxHeight && {\n      '--scrollarea-viewport-max-height':\n        typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight,\n    }),\n    ...(minWidth && {\n      '--scrollable-table-min-width':\n        typeof minWidth === 'number' ? `${minWidth}px` : minWidth,\n    }),\n    ...(stickyHeader && {\n      '--scrollarea-scrollbar-vertical-top': `${headerHeight}px`,\n    }),\n  } as React.CSSProperties;\n\n  const classNames: ScrollAreaClassNames = {\n    scrollArea: scrollAreaProps?.classNames?.scrollArea ?? tableScrollRecipe(),\n    root: scrollAreaProps?.classNames?.root ?? tableScrollRoot(),\n    viewport: scrollAreaProps?.classNames?.viewport ?? tableScrollViewport(),\n    content: scrollAreaProps?.classNames?.content ?? tableScrollContent(),\n    scrollbar: scrollAreaProps?.classNames?.scrollbar ?? tableScrollScrollbar(),\n    thumb: scrollAreaProps?.classNames?.thumb ?? tableScrollThumb(),\n    corner: scrollAreaProps?.classNames?.corner ?? tableScrollCorner(),\n  };\n\n  const contextValue = useMemo(\n    () => ({\n      viewportRef,\n      estimateSize: estimateSize ?? 40,\n      overscan,\n      stickyHeader,\n      setHeaderHeight,\n      virtualized,\n    }),\n    [estimateSize, overscan, stickyHeader, virtualized],\n  );\n\n  return (\n    <ScrollableContext.Provider value={contextValue}>\n      <ScrollArea\n        scrollbars='xy'\n        type='hover'\n        offsetScrollbars={false}\n        data-sticky-header={stickyHeader || undefined}\n        viewportRef={viewportRef}\n        classNames={classNames}\n        style={style}\n        {...scrollAreaProps}\n      >\n        {children}\n      </ScrollArea>\n    </ScrollableContext.Provider>\n  );\n};\n"],"mappings":"saAkCA,MAAa,GAAe,CAC1B,WACA,aACA,kBACiC,CACjC,IAAM,EAAc,EAAuB,KAAK,CAC1C,CAAC,EAAc,GAAmB,EAAS,EAAE,CAE7C,CACJ,YACA,WACA,eACA,WACA,cACA,mBACE,EAEE,EAAQ,CACZ,GAAI,GAAa,CACf,mCACE,OAAO,GAAc,SAAW,GAAG,EAAU,IAAM,EACtD,CACD,GAAI,GAAY,CACd,+BACE,OAAO,GAAa,SAAW,GAAG,EAAS,IAAM,EACpD,CACD,GAAI,GAAgB,CAClB,sCAAuC,GAAG,EAAa,IACxD,CACF,CAEK,EAAmC,CACvC,WAAY,GAAiB,YAAY,YAAcA,GAAmB,CAC1E,KAAM,GAAiB,YAAY,MAAQ,GAAiB,CAC5D,SAAU,GAAiB,YAAY,UAAY,GAAqB,CACxE,QAAS,GAAiB,YAAY,SAAW,GAAoB,CACrE,UAAW,GAAiB,YAAY,WAAa,GAAsB,CAC3E,MAAO,GAAiB,YAAY,OAAS,GAAkB,CAC/D,OAAQ,GAAiB,YAAY,QAAU,GAAmB,CACnE,CAEK,EAAe,OACZ,CACL,cACA,aAAc,GAAgB,GAC9B,WACA,eACA,kBACA,cACD,EACD,CAAC,EAAc,EAAU,EAAc,EAAY,CACpD,CAED,OACE,EAAC,EAAkB,SAAA,CAAS,MAAO,WACjC,EAAC,EAAA,CACC,WAAW,KACX,KAAK,QACL,iBAAkB,GAClB,qBAAoB,GAAgB,IAAA,GACvB,cACD,aACL,QACP,GAAI,EAEH,YACU,EACc"}

package/dist/components/index.d.mts

@@ -30,11 +30,14 @@ import { TableHeaderCellProps } from "./data-display/table/TableHeaderCell.mjs";
 import { TableCellProps } from "./data-display/table/TableCell.mjs";
 import { TableCaptionProps } from "./data-display/table/TableCaption.mjs";
 import { Table } from "./data-display/table/Table.mjs";
-import { StatelessDataTableContextProvider, StatelessDataTableContextValue, useStatelessDataTableContext } from "./data-display/datatables/datatable-stateless/useStatelessDataTableContext.mjs";
-import { StatelessDataTableSlotContent, StatelessDataTableSlotRenderProps, StatelessDataTableSlotRow, StatelessDataTableSlotRowProps, StatelessDataTableSlots } from "./data-display/datatables/datatable-stateless/StatelessDataTableSlotRow.mjs";
-import { StatelessDataTable, StatelessDataTableClassNames, StatelessDataTableExpansionConfig, StatelessDataTablePaginationConfig, StatelessDataTableProps, StatelessDataTableSelectionConfig, StatelessDataTableSortingConfig, StatelessDataTableTableConfig } from "./data-display/datatables/datatable-stateless/StatelessDataTable.mjs";
-import { StatelessDataTablePageSize, StatelessDataTablePageSizeProps } from "./data-display/datatables/datatable-stateless/StatelessDataTablePageSize.mjs";
-import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./data-display/datatables/datatable-stateless/index.mjs";
+import { DEFAULT_DATA_TABLE_LABELS, DataTableContextProvider, DataTableContextValue, DataTableLabels, useDataTableContext } from "./data-display/datatables/useDataTableContext.mjs";
+import { DataTable, DataTableClassNames, DataTableColumnMeta, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTablePaginationConfig, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig } from "./data-display/datatables/DataTable.mjs";
+import { DataTablePageSize, DataTablePageSizeProps } from "./data-display/datatables/DataTablePageSize.mjs";
+import { Pagination, PaginationClassNames, PaginationRootProps } from "./navigations/pagination/Pagination.mjs";
+import { DataTablePagination, DataTablePaginationProps } from "./data-display/datatables/DataTablePagination.mjs";
+import { DataTableBottomSlot, DataTableBottomSlotProps } from "./data-display/datatables/DataTableBottomSlot.mjs";
+import { DataTableTopSlot, DataTableTopSlotProps } from "./data-display/datatables/DataTableTopSlot.mjs";
+import { ColumnDef, ExpandedState, PaginationState, RowSelectionState, SortingState } from "./data-display/datatables/index.mjs";
 import { DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps } from "./data-display/description-list/DescriptionList.mjs";
 import { Icon, IconProps } from "./data-display/icons/icon/Icon.mjs";
 import { IconRaw, IconRawProps } from "./data-display/icons/icon-raw/IconRaw.mjs";
@@ -75,7 +78,6 @@ import "./layouts/index.mjs";
 import { BreadcrumbsBarProps } from "./navigations/breadcrumbs/BreadcrumbsBar.mjs";
 import { Breadcrumbs, BreadcrumbsProps } from "./navigations/breadcrumbs/Breadcrumbs.mjs";
 import { Menu, MenuProps } from "./navigations/menu/Menu.mjs";
-import { Pagination, PaginationClassNames, PaginationProps } from "./navigations/pagination/Pagination.mjs";
 import { Sidebar, SidebarClassNames, SidebarProps } from "./navigations/sidebars/sidebar/Sidebar.mjs";
 import "./navigations/index.mjs";
 import { ModalClassNames, ModalIntent, ModalProps, ModalRootProps } from "./overlays/modal/modal-types.mjs";

package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{scrollAreaAutosize as t,scrollAreaAutosizeContent as n,scrollAreaAutosizeCorner as r,scrollAreaAutosizeRoot as i,scrollAreaAutosizeScrollbar as a,scrollAreaAutosizeThumb as o,scrollAreaAutosizeViewport as s}from"@mage-ui/styled-system/recipes";import{ScrollArea as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({mah:u,children:d,classNames:f,...p})=>l(c.Autosize,{mah:u,classNames:{root:e(f?.scrollArea??t(),f?.root??i()),viewport:f?.viewport??s(),content:f?.content??n(),scrollbar:f?.scrollbar??a(),thumb:f?.thumb??o(),corner:f?.corner??r()},...p,children:d});export{u as ScrollAreaAutosize};
+import{cx as e}from"@mage-ui/styled-system/css";import{scrollAreaAutosize as t,scrollAreaAutosizeContent as n,scrollAreaAutosizeCorner as r,scrollAreaAutosizeRoot as i,scrollAreaAutosizeScrollbar as a,scrollAreaAutosizeThumb as o,scrollAreaAutosizeViewport as s}from"@mage-ui/styled-system/recipes";import{ScrollArea as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";const u=({mah:u,children:d,classNames:f,...p})=>l(c.Autosize,{mah:u,style:{maxHeight:u,...p.style},classNames:{root:e(f?.scrollArea??t(),f?.root??i()),viewport:f?.viewport??s(),content:f?.content??n(),scrollbar:f?.scrollbar??a(),thumb:f?.thumb??o(),corner:f?.corner??r()},...p,children:d});export{u as ScrollAreaAutosize};
 //# sourceMappingURL=ScrollAreaAutosize.mjs.map

package/dist/components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollAreaAutosize.mjs","names":["MantineScrollArea"],"sources":["../../../../src/components/misc/scroll-area-autosize/ScrollAreaAutosize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  scrollAreaAutosize,\n  scrollAreaAutosizeContent,\n  scrollAreaAutosizeCorner,\n  scrollAreaAutosizeRoot,\n  scrollAreaAutosizeScrollbar,\n  scrollAreaAutosizeThumb,\n  scrollAreaAutosizeViewport,\n} from '@mage-ui/styled-system/recipes';\nimport { ScrollArea as MantineScrollArea } from '@mantine/core';\n\nimport type { ScrollAreaProps } from '../scroll-area/ScrollArea';\n\nexport type ScrollAreaAutosizeProps = {\n  mah: string | number;\n} & ScrollAreaProps;\n\nexport const ScrollAreaAutosize = ({\n  mah,\n  children,\n  classNames,\n  ...props\n}: ScrollAreaAutosizeProps): ReactNode => {\n  return (\n    <MantineScrollArea.Autosize\n      mah={mah}\n      classNames={{\n        root: cx(\n          classNames?.scrollArea ?? scrollAreaAutosize(),\n          classNames?.root ?? scrollAreaAutosizeRoot(),\n        ),\n        viewport: classNames?.viewport ?? scrollAreaAutosizeViewport(),\n        content: classNames?.content ?? scrollAreaAutosizeContent(),\n        scrollbar: classNames?.scrollbar ?? scrollAreaAutosizeScrollbar(),\n        thumb: classNames?.thumb ?? scrollAreaAutosizeThumb(),\n        corner: classNames?.corner ?? scrollAreaAutosizeCorner(),\n      }}\n      {...props}\n    >\n      {children}\n    </MantineScrollArea.Autosize>\n  );\n};\n"],"mappings":"8XAoBA,MAAa,GAAsB,CACjC,MACA,WACA,aACA,GAAG,KAGD,EAACA,EAAkB,SAAA,CACZ,MACL,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAoB,CAC9C,GAAY,MAAQ,GAAwB,CAC7C,CACD,SAAU,GAAY,UAAY,GAA4B,CAC9D,QAAS,GAAY,SAAW,GAA2B,CAC3D,UAAW,GAAY,WAAa,GAA6B,CACjE,MAAO,GAAY,OAAS,GAAyB,CACrD,OAAQ,GAAY,QAAU,GAA0B,CACzD,CACD,GAAI,EAEH,YAC0B"}
+{"version":3,"file":"ScrollAreaAutosize.mjs","names":["MantineScrollArea"],"sources":["../../../../src/components/misc/scroll-area-autosize/ScrollAreaAutosize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  scrollAreaAutosize,\n  scrollAreaAutosizeContent,\n  scrollAreaAutosizeCorner,\n  scrollAreaAutosizeRoot,\n  scrollAreaAutosizeScrollbar,\n  scrollAreaAutosizeThumb,\n  scrollAreaAutosizeViewport,\n} from '@mage-ui/styled-system/recipes';\nimport { ScrollArea as MantineScrollArea } from '@mantine/core';\n\nimport type { ScrollAreaProps } from '../scroll-area/ScrollArea';\n\nexport type ScrollAreaAutosizeProps = {\n  mah: string | number;\n} & ScrollAreaProps;\n\nexport const ScrollAreaAutosize = ({\n  mah,\n  children,\n  classNames,\n  ...props\n}: ScrollAreaAutosizeProps): ReactNode => {\n  return (\n    <MantineScrollArea.Autosize\n      mah={mah}\n      style={{ maxHeight: mah, ...props.style }}\n      classNames={{\n        root: cx(\n          classNames?.scrollArea ?? scrollAreaAutosize(),\n          classNames?.root ?? scrollAreaAutosizeRoot(),\n        ),\n        viewport: classNames?.viewport ?? scrollAreaAutosizeViewport(),\n        content: classNames?.content ?? scrollAreaAutosizeContent(),\n        scrollbar: classNames?.scrollbar ?? scrollAreaAutosizeScrollbar(),\n        thumb: classNames?.thumb ?? scrollAreaAutosizeThumb(),\n        corner: classNames?.corner ?? scrollAreaAutosizeCorner(),\n      }}\n      {...props}\n    >\n      {children}\n    </MantineScrollArea.Autosize>\n  );\n};\n"],"mappings":"8XAoBA,MAAa,GAAsB,CACjC,MACA,WACA,aACA,GAAG,KAGD,EAACA,EAAkB,SAAA,CACZ,MACL,MAAO,CAAE,UAAW,EAAK,GAAG,EAAM,MAAO,CACzC,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAoB,CAC9C,GAAY,MAAQ,GAAwB,CAC7C,CACD,SAAU,GAAY,UAAY,GAA4B,CAC9D,QAAS,GAAY,SAAW,GAA2B,CAC3D,UAAW,GAAY,WAAa,GAA6B,CACjE,MAAO,GAAY,OAAS,GAAyB,CACrD,OAAQ,GAAY,QAAU,GAA0B,CACzD,CACD,GAAI,EAEH,YAC0B"}

package/dist/components/navigations/index.d.mts

@@ -1,5 +1,5 @@
+import { Pagination, PaginationClassNames, PaginationRootProps } from "./pagination/Pagination.mjs";
 import { BreadcrumbsBarProps } from "./breadcrumbs/BreadcrumbsBar.mjs";
 import { Breadcrumbs, BreadcrumbsProps } from "./breadcrumbs/Breadcrumbs.mjs";
 import { Menu, MenuProps } from "./menu/Menu.mjs";
-import { Pagination, PaginationClassNames, PaginationProps } from "./pagination/Pagination.mjs";
 import { Sidebar, SidebarClassNames, SidebarProps } from "./sidebars/sidebar/Sidebar.mjs";

package/dist/components/navigations/pagination/Pagination.d.mts

@@ -1,3 +1,5 @@
+import * as _mantine_core0 from "@mantine/core";
+import * as react from "react";
 import { ReactNode } from "react";
 
 //#region src/components/navigations/pagination/Pagination.d.ts
@@ -7,7 +9,7 @@ type PaginationClassNames = {
   control?: string;
   dots?: string;
 };
-type PaginationProps = {
+type PaginationRootProps = {
   total: number;
   value?: number;
   defaultValue?: number;
@@ -25,11 +27,63 @@ type PaginationProps = {
   onLastPage?: () => void;
   getItemProps?: (page: number) => Record<string, unknown>;
   classNames?: PaginationClassNames;
+  children?: ReactNode;
+};
+declare const Pagination$1: {
+  Root: ({
+    classNames,
+    ...props
+  }: PaginationRootProps) => ReactNode;
+  First: (<C = "button">(props: _mantine_core0.PolymorphicComponentProps<C, _mantine_core0.PaginationEdgeProps>) => React.ReactElement) & Omit<react.FunctionComponent<(_mantine_core0.PaginationEdgeProps & {
+    component?: any;
+  } & Omit<Omit<any, "ref">, "component" | keyof _mantine_core0.PaginationEdgeProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+  }) | (_mantine_core0.PaginationEdgeProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+  })>, never> & Record<string, never>;
+  Previous: (<C = "button">(props: _mantine_core0.PolymorphicComponentProps<C, _mantine_core0.PaginationEdgeProps>) => React.ReactElement) & Omit<react.FunctionComponent<(_mantine_core0.PaginationEdgeProps & {
+    component?: any;
+  } & Omit<Omit<any, "ref">, "component" | keyof _mantine_core0.PaginationEdgeProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+  }) | (_mantine_core0.PaginationEdgeProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+  })>, never> & Record<string, never>;
+  Next: (<C = "button">(props: _mantine_core0.PolymorphicComponentProps<C, _mantine_core0.PaginationEdgeProps>) => React.ReactElement) & Omit<react.FunctionComponent<(_mantine_core0.PaginationEdgeProps & {
+    component?: any;
+  } & Omit<Omit<any, "ref">, "component" | keyof _mantine_core0.PaginationEdgeProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+  }) | (_mantine_core0.PaginationEdgeProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+  })>, never> & Record<string, never>;
+  Last: (<C = "button">(props: _mantine_core0.PolymorphicComponentProps<C, _mantine_core0.PaginationEdgeProps>) => React.ReactElement) & Omit<react.FunctionComponent<(_mantine_core0.PaginationEdgeProps & {
+    component?: any;
+  } & Omit<Omit<any, "ref">, "component" | keyof _mantine_core0.PaginationEdgeProps> & {
+    ref?: any;
+    renderRoot?: (props: any) => any;
+  }) | (_mantine_core0.PaginationEdgeProps & {
+    component: React.ElementType;
+    renderRoot?: (props: Record<string, any>) => any;
+  })>, never> & Record<string, never>;
+  Items: typeof _mantine_core0.PaginationItems;
+  Control: _mantine_core0.MantineComponent<{
+    props: _mantine_core0.PaginationControlProps;
+    ref: HTMLButtonElement;
+    stylesNames: "control";
+    compound: true;
+  }>;
+  Dots: _mantine_core0.MantineComponent<{
+    props: _mantine_core0.PaginationDotsProps;
+    ref: HTMLDivElement;
+    stylesNames: "dots";
+    compound: true;
+  }>;
 };
-declare const Pagination: ({
-  classNames,
-  ...props
-}: PaginationProps) => ReactNode;
 //#endregion
-export { Pagination, PaginationClassNames, PaginationProps };
+export { Pagination$1 as Pagination, PaginationClassNames, PaginationRootProps };
 //# sourceMappingURL=Pagination.d.mts.map

package/dist/components/navigations/pagination/Pagination.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.mts","names":[],"sources":["../../../../src/components/navigations/pagination/Pagination.tsx"],"mappings":";;;KAWY,oBAAA;EACV,UAAA;EACA,IAAA;EACA,OAAA;EACA,IAAA;AAAA;AAAA,KAGU,eAAA;EACV,KAAA;EACA,KAAA;EACA,YAAA;EACA,QAAA,IAAY,KAAA;EACZ,QAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA;EACA,YAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,cAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA,IAAgB,IAAA,aAAiB,MAAA;EACjC,UAAA,GAAa,oBAAA;AAAA;AAAA,cAGF,UAAA;EAAc,UAAA;EAAA,GAAA;AAAA,GAGxB,eAAA,KAAkB,SAAA"}
+{"version":3,"file":"Pagination.d.mts","names":[],"sources":["../../../../src/components/navigations/pagination/Pagination.tsx"],"mappings":";;;;;KAWY,oBAAA;EACV,UAAA;EACA,IAAA;EACA,OAAA;EACA,IAAA;AAAA;AAAA,KAGU,mBAAA;EACV,KAAA;EACA,KAAA;EACA,YAAA;EACA,QAAA,IAAY,KAAA;EACZ,QAAA;EACA,QAAA;EACA,UAAA;EACA,SAAA;EACA,YAAA;EACA,SAAA;EACA,eAAA;EACA,UAAA;EACA,cAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA,IAAgB,IAAA,aAAiB,MAAA;EACjC,UAAA,GAAa,oBAAA;EACb,QAAA,GAAW,SAAA;AAAA;AAAA,cAmBA,YAAA;;;;KAhB2B,mBAAA,KAAsB,SAAA"}

package/dist/components/navigations/pagination/Pagination.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{pagination as t,paginationControl as n,paginationDots as r,paginationRoot as i}from"@mage-ui/styled-system/recipes";import{Pagination as a}from"@mantine/core";import{jsx as o}from"react/jsx-runtime";const s=({classNames:s,...c})=>o(a,{classNames:{root:e(s?.pagination??t(),s?.root??i()),control:s?.control??n(),dots:s?.dots??r()},...c});export{s as Pagination};
+import{cx as e}from"@mage-ui/styled-system/css";import{pagination as t,paginationControl as n,paginationDots as r,paginationRoot as i}from"@mage-ui/styled-system/recipes";import{Pagination as a}from"@mantine/core";import{jsx as o}from"react/jsx-runtime";const s={Root:({classNames:s,...c})=>o(a.Root,{classNames:{root:e(s?.pagination??t(),s?.root??i()),control:s?.control??n(),dots:s?.dots??r()},...c}),First:a.First,Previous:a.Previous,Next:a.Next,Last:a.Last,Items:a.Items,Control:a.Control,Dots:a.Dots};export{s as Pagination};
 //# sourceMappingURL=Pagination.mjs.map

package/dist/components/navigations/pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":["Pagination","MantinePagination","paginationRecipe"],"sources":["../../../../src/components/navigations/pagination/Pagination.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  pagination as paginationRecipe,\n  paginationControl,\n  paginationDots,\n  paginationRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Pagination as MantinePagination } from '@mantine/core';\n\nexport type PaginationClassNames = {\n  pagination?: string;\n  root?: string;\n  control?: string;\n  dots?: string;\n};\n\nexport type PaginationProps = {\n  total: number;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  disabled?: boolean;\n  siblings?: number;\n  boundaries?: number;\n  withEdges?: boolean;\n  withControls?: boolean;\n  withPages?: boolean;\n  hideWithOnePage?: boolean;\n  onNextPage?: () => void;\n  onPreviousPage?: () => void;\n  onFirstPage?: () => void;\n  onLastPage?: () => void;\n  getItemProps?: (page: number) => Record<string, unknown>;\n  classNames?: PaginationClassNames;\n};\n\nexport const Pagination = ({\n  classNames,\n  ...props\n}: PaginationProps): ReactNode => {\n  return (\n    <MantinePagination\n      classNames={{\n        root: cx(\n          classNames?.pagination ?? paginationRecipe(),\n          classNames?.root ?? paginationRoot(),\n        ),\n        control: classNames?.control ?? paginationControl(),\n        dots: classNames?.dots ?? paginationDots(),\n      }}\n      {...props}\n    />\n  );\n};\n"],"mappings":"8PAsCA,MAAaA,GAAc,CACzB,aACA,GAAG,KAGD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,YAAcC,GAAkB,CAC5C,GAAY,MAAQ,GAAgB,CACrC,CACD,QAAS,GAAY,SAAW,GAAmB,CACnD,KAAM,GAAY,MAAQ,GAAgB,CAC3C,CACD,GAAI,GACJ"}
+{"version":3,"file":"Pagination.mjs","names":["MantinePagination","paginationRecipe","Pagination"],"sources":["../../../../src/components/navigations/pagination/Pagination.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  paginationControl,\n  paginationDots,\n  pagination as paginationRecipe,\n  paginationRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Pagination as MantinePagination } from '@mantine/core';\n\nexport type PaginationClassNames = {\n  pagination?: string;\n  root?: string;\n  control?: string;\n  dots?: string;\n};\n\nexport type PaginationRootProps = {\n  total: number;\n  value?: number;\n  defaultValue?: number;\n  onChange?: (value: number) => void;\n  disabled?: boolean;\n  siblings?: number;\n  boundaries?: number;\n  withEdges?: boolean;\n  withControls?: boolean;\n  withPages?: boolean;\n  hideWithOnePage?: boolean;\n  onNextPage?: () => void;\n  onPreviousPage?: () => void;\n  onFirstPage?: () => void;\n  onLastPage?: () => void;\n  getItemProps?: (page: number) => Record<string, unknown>;\n  classNames?: PaginationClassNames;\n  children?: ReactNode;\n};\n\nconst Root = ({ classNames, ...props }: PaginationRootProps): ReactNode => {\n  return (\n    <MantinePagination.Root\n      classNames={{\n        root: cx(\n          classNames?.pagination ?? paginationRecipe(),\n          classNames?.root ?? paginationRoot(),\n        ),\n        control: classNames?.control ?? paginationControl(),\n        dots: classNames?.dots ?? paginationDots(),\n      }}\n      {...props}\n    />\n  );\n};\n\nexport const Pagination = {\n  Root,\n  First: MantinePagination.First,\n  Previous: MantinePagination.Previous,\n  Next: MantinePagination.Next,\n  Last: MantinePagination.Last,\n  Items: MantinePagination.Items,\n  Control: MantinePagination.Control,\n  Dots: MantinePagination.Dots,\n};\n"],"mappings":"8PAuDA,MAAaE,EAAa,CACxB,MAjBY,CAAE,aAAY,GAAG,KAE3B,EAACF,EAAkB,KAAA,CACjB,WAAY,CACV,KAAM,EACJ,GAAY,YAAcC,GAAkB,CAC5C,GAAY,MAAQ,GAAgB,CACrC,CACD,QAAS,GAAY,SAAW,GAAmB,CACnD,KAAM,GAAY,MAAQ,GAAgB,CAC3C,CACD,GAAI,GACJ,CAMJ,MAAOD,EAAkB,MACzB,SAAUA,EAAkB,SAC5B,KAAMA,EAAkB,KACxB,KAAMA,EAAkB,KACxB,MAAOA,EAAkB,MACzB,QAASA,EAAkB,QAC3B,KAAMA,EAAkB,KACzB"}