@mage-ui/components 1.0.73 → 1.0.76

package/dist/components/controls/dropdown/DropdownClearButton.mjs

@@ -1,2 +1,2 @@
-import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.mjs";import{useDropdownContext as t}from"./DropdownContextProvider.mjs";import{dropdownClearButton as n,dropdownClearButtonIcon as r,dropdownClearButtonIconRaw as i,dropdownClearButtonIconRawRoot as a,dropdownClearButtonRoot as o}from"@mage-ui/styled-system/recipes";import{jsx as s}from"react/jsx-runtime";const c=({classNames:c,label:l=`Clear selection`,name:u=`mage-clear-button-x`,path:d=`/icons/sprite-mage.svg`,...f})=>{let{setValue:p,setQuery:m}=t();return s(e,{label:l,name:u,path:d,onClick:e=>{e.stopPropagation(),e.preventDefault(),p(void 0),m(void 0)},classNames:{buttonIcon:c?.clearButton??n(),root:c?.root??o(),icon:c?.icon??r(),iconRaw:{iconRaw:c?.iconRaw?.iconRaw??i(),root:c?.iconRaw?.root??a()}},...f})};export{c as DropdownClearButton};
+import{useDropdownContext as e}from"./DropdownContextProvider.mjs";import{ButtonIcon as t}from"../../buttons/button-icon/ButtonIcon.mjs";import{dropdownClearButton as n,dropdownClearButtonIcon as r,dropdownClearButtonIconRaw as i,dropdownClearButtonIconRawRoot as a,dropdownClearButtonRoot as o}from"@mage-ui/styled-system/recipes";import{jsx as s}from"react/jsx-runtime";const c=({classNames:c,label:l=`Clear selection`,name:u=`mage-clear-button-x`,path:d=`/icons/sprite-mage.svg`,...f})=>{let{setValue:p,setQuery:m}=e();return s(t,{label:l,name:u,path:d,onClick:e=>{e.stopPropagation(),e.preventDefault(),p(void 0),m(void 0)},classNames:{buttonIcon:c?.clearButton??n(),root:c?.root??o(),icon:c?.icon??r(),iconRaw:{iconRaw:c?.iconRaw?.iconRaw??i(),root:c?.iconRaw?.root??a()}},...f})};export{c as DropdownClearButton};
 //# sourceMappingURL=DropdownClearButton.mjs.map

package/dist/components/controls/dropdown/DropdownTargetTextInput.mjs

@@ -1,2 +1,2 @@
-import{TextInput as e}from"../text-input/TextInput.mjs";import{useDropdownContext as t}from"./DropdownContextProvider.mjs";import{DropdownEndSlot as n}from"./DropdownEndSlot.mjs";import{dropdownTextInput as r,dropdownTextInputDescription as i,dropdownTextInputError as a,dropdownTextInputInput as o,dropdownTextInputLabel as s,dropdownTextInputRequired as c,dropdownTextInputRoot as l,dropdownTextInputSection as u,dropdownTextInputWrapper as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";const p=({classNames:p,clearable:m,showChevron:h,clearButtonProps:g,chevronProps:_,closeOnBlur:v=!0,startSlot:y,...b})=>{let{store:x,value:S,query:C,setQuery:w}=t(),T=m&&(C??S?.value??``)!==``,E={"--dropdown-text-input-right-section-pointer-events":T?`auto`:`none`};return f(e,{readOnly:!1,value:C??S?.value??``,startSlot:y,endSlot:f(n,{clearable:T,showChevron:h,clearButtonProps:g,chevronProps:_}),onFocus:e=>{e.stopPropagation(),e.preventDefault(),x.openDropdown()},onBlur:e=>{e.stopPropagation(),e.preventDefault(),v&&(x.closeDropdown(),w(void 0))},classNames:{textInput:p?.dropdownTextInput??r(),root:p?.root??l(),label:p?.label??s(),description:p?.description??i(),error:p?.error??a(),wrapper:p?.wrapper??d(),input:p?.input??o(),section:p?.section??u(),required:p?.required??c()},style:E,...b})};export{p as DropdownTargetTextInput};
+import{useDropdownContext as e}from"./DropdownContextProvider.mjs";import{TextInput as t}from"../text-input/TextInput.mjs";import{DropdownEndSlot as n}from"./DropdownEndSlot.mjs";import{dropdownTextInput as r,dropdownTextInputDescription as i,dropdownTextInputError as a,dropdownTextInputInput as o,dropdownTextInputLabel as s,dropdownTextInputRequired as c,dropdownTextInputRoot as l,dropdownTextInputSection as u,dropdownTextInputWrapper as d}from"@mage-ui/styled-system/recipes";import{jsx as f}from"react/jsx-runtime";const p=({classNames:p,clearable:m,showChevron:h,clearButtonProps:g,chevronProps:_,closeOnBlur:v=!0,startSlot:y,...b})=>{let{store:x,value:S,query:C,setQuery:w}=e(),T=m&&(C??S?.value??``)!==``,E={"--dropdown-text-input-right-section-pointer-events":T?`auto`:`none`};return f(t,{readOnly:!1,value:C??S?.value??``,startSlot:y,endSlot:f(n,{clearable:T,showChevron:h,clearButtonProps:g,chevronProps:_}),onFocus:e=>{e.stopPropagation(),e.preventDefault(),x.openDropdown()},onBlur:e=>{e.stopPropagation(),e.preventDefault(),v&&(x.closeDropdown(),w(void 0))},classNames:{textInput:p?.dropdownTextInput??r(),root:p?.root??l(),label:p?.label??s(),description:p?.description??i(),error:p?.error??a(),wrapper:p?.wrapper??d(),input:p?.input??o(),section:p?.section??u(),required:p?.required??c()},style:E,...b})};export{p as DropdownTargetTextInput};
 //# sourceMappingURL=DropdownTargetTextInput.mjs.map

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

@@ -1,5 +1,6 @@
 import { TableClassNames, TableProps } from "../table/TableRoot.mjs";
 import "../table/Table.mjs";
+import { DataTableBulkBarClassNames } from "./DataTableBulkBar.mjs";
 import { DataTableSlots } from "./DataTableSlotRow.mjs";
 import { DataTableLabels } from "./useDataTableContext.mjs";
 import { ReactNode } from "react";
@@ -51,9 +52,10 @@ type DataTableClassNames = {
   viewport?: string;
   header?: string;
   sortButton?: string;
+  sortIndicator?: string;
   expandButton?: string;
   slotRow?: string;
-  bulkBar?: string;
+  bulkBar?: DataTableBulkBarClassNames;
   loading?: string;
   empty?: string;
   expandedContent?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;KA2BY,eAAA,GAAkB,MAAA;AAAA,KAElB,sBAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,yBAAA;EACV,WAAA;EACA,QAAA;EACA,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,mBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,KAIQ,wBAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;AAAA;AAAA,KAG/B,wBAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;AAAA;AAAA,KAGpB,qBAAA;EACV,WAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA,EAAS,MAAA;EACT,MAAA,GACE,OAAA,EAAS,MAAA,mBACT,QAAA,GAAW,IAAA,EAAM,MAAA,+BACd,SAAA;AAAA;AAAA,KAGK,oBAAA,GAAuB,IAAA,CAAK,UAAA;AAAA,KAE5B,mBAAA;EACV,SAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA,UAAA;EACA,YAAA;EACA,OAAA;EACA,OAAA;EACA,OAAA;EACA,KAAA;EACA,eAAA;EACA,QAAA;EACA,KAAA,GAAQ,eAAA;AAAA;AAAA,KAGL,uBAAA,SAAgC,OAAA,CACnC,IAAA,CACE,YAAA,CAAa,IAAA;AAAA,KAUL,0BAAA;EACV,MAAA,EAAQ,SAAA,CAAU,IAAA;EAClB,QAAA;AAAA;AAAA,KAGU,cAAA;EACV,IAAA,EAAM,IAAA;EACN,OAAA,EAAS,SAAA,CAAU,IAAA;EACnB,YAAA,GAAe,0BAAA,CAA2B,IAAA;EAC1C,OAAA,GAAU,sBAAA;EACV,UAAA,GAAa,yBAAA;EACb,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,OAAA;EACA,QAAA;EACA,SAAA,gBAAyB,OAAA;EACzB,KAAA,GAAQ,cAAA;EACR,UAAA,GAAa,mBAAA;EACb,OAAA,GAAU,uBAAA,CAAwB,IAAA;EAClC,MAAA,GAAS,OAAA,CAAQ,eAAA;AAAA,IACf,oBAAA;AAAA,cAES,SAAA;EAAoB,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,YAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;AAAA,GAgB9B,cAAA,CAAe,IAAA,MAAQ,SAAA"}
+{"version":3,"file":"DataTable.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"mappings":";;;;;;;;;KA8BY,eAAA,GAAkB,MAAA;AAAA,KAElB,sBAAA;EACV,KAAA,EAAO,YAAA;EACP,QAAA,EAAU,UAAA,CAAW,YAAA;AAAA;AAAA,KAGX,yBAAA;EACV,WAAA;EACA,QAAA;EACA,QAAA,EAAU,UAAA,CAAW,eAAA;EACrB,SAAA;EACA,QAAA;AAAA;AAAA,KAGU,mBAAA;EACV,UAAA;IACE,MAAA;IACA,IAAA;EAAA;AAAA;AAAA,KAIQ,wBAAA;EACV,KAAA,EAAO,iBAAA;EACP,QAAA,EAAU,UAAA,CAAW,iBAAA;EACrB,QAAA,IAAY,GAAA,EAAK,IAAA;EACjB,aAAA,IAAiB,GAAA,EAAK,IAAA;EACtB,WAAA,IAAe,WAAA,eAA0B,SAAA;AAAA;AAAA,KAG/B,wBAAA;EACV,KAAA,EAAO,aAAA;EACP,QAAA,EAAU,UAAA,CAAW,aAAA;EACrB,aAAA,GAAgB,GAAA,EAAK,IAAA,KAAS,SAAA;AAAA;AAAA,KAGpB,qBAAA;EACV,WAAA;EACA,KAAA;AAAA;AAAA,KAGU,sBAAA;EACV,OAAA,EAAS,MAAA;EACT,MAAA,GACE,OAAA,EAAS,MAAA,mBACT,QAAA,GAAW,IAAA,EAAM,MAAA,+BACd,SAAA;AAAA;AAAA,KAGK,oBAAA,GAAuB,IAAA,CAAK,UAAA;AAAA,KAE5B,mBAAA;EACV,SAAA;EACA,IAAA;EACA,QAAA;EACA,MAAA;EACA,UAAA;EACA,aAAA;EACA,YAAA;EACA,OAAA;EACA,OAAA,GAAU,0BAAA;EACV,OAAA;EACA,KAAA;EACA,eAAA;EACA,QAAA;EACA,KAAA,GAAQ,eAAA;AAAA;AAAA,KAGL,uBAAA,SAAgC,OAAA,CACnC,IAAA,CACE,YAAA,CAAa,IAAA;AAAA,KAUL,0BAAA;EACV,MAAA,EAAQ,SAAA,CAAU,IAAA;EAClB,QAAA;AAAA;AAAA,KAGU,cAAA;EACV,IAAA,EAAM,IAAA;EACN,OAAA,EAAS,SAAA,CAAU,IAAA;EACnB,YAAA,GAAe,0BAAA,CAA2B,IAAA;EAC1C,OAAA,GAAU,sBAAA;EACV,UAAA,GAAa,yBAAA;EACb,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,SAAA,GAAY,wBAAA,CAAyB,IAAA;EACrC,OAAA;EACA,QAAA;EACA,SAAA,gBAAyB,OAAA;EACzB,KAAA,GAAQ,cAAA;EACR,UAAA,GAAa,mBAAA;EACb,OAAA,GAAU,uBAAA,CAAwB,IAAA;EAClC,MAAA,GAAS,OAAA,CAAQ,eAAA;AAAA,IACf,oBAAA;AAAA,cAES,SAAA;EAAoB,UAAA;EAAA,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,SAAA;EAAA,SAAA;EAAA,IAAA;EAAA,OAAA;EAAA,YAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;AAAA,GAgB9B,cAAA,CAAe,IAAA,MAAQ,SAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n  ColumnDef,\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  RowSelectionState,\n  SortingState,\n  TableOptions,\n} from '@tanstack/react-table';\n\nimport { Table, type TableClassNames, type TableProps } from '../table/Table';\nimport { DataTableBody } from './DataTableBody';\nimport { DataTableBulkBar } from './DataTableBulkBar';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableRootContainer } from './DataTableRootContainer';\nimport { DataTableSkeleton } from './DataTableSkeleton';\nimport { DataTableSlotRow, type DataTableSlots } from './DataTableSlotRow';\nimport { DataTableViewport } from './DataTableViewport';\nimport { useDataTable } from './useDataTable';\nimport {\n  DataTableContextProvider,\n  type DataTableContextValue,\n  type DataTableLabels,\n} from './useDataTableContext';\n\nexport type DataTableRecord = Record<string, unknown>;\n\nexport type DataTableSortingConfig = {\n  state: SortingState;\n  onChange: OnChangeFn<SortingState>;\n};\n\nexport type DataTablePaginationConfig = {\n  currentPage: number;\n  pageSize: number;\n  onChange: OnChangeFn<PaginationState>;\n  pageCount: number;\n  rowCount?: number;\n};\n\nexport type DataTableColumnMeta = {\n  classNames?: {\n    header?: string;\n    cell?: string;\n  };\n};\n\nexport type DataTableSelectionConfig<Data = unknown> = {\n  state: RowSelectionState;\n  onChange: OnChangeFn<RowSelectionState>;\n  getRowId?: (row: Data) => string;\n  isRowDisabled?: (row: Data) => boolean;\n  bulkActions?: (selectedIds: string[]) => ReactNode;\n};\n\nexport type DataTableExpansionConfig<Data = unknown> = {\n  state: ExpandedState;\n  onChange: OnChangeFn<ExpandedState>;\n  renderContent: (row: Data) => ReactNode;\n};\n\nexport type DataTableSearchConfig = {\n  placeholder?: string;\n  label?: string;\n};\n\nexport type DataTableFiltersConfig = {\n  initial: Record<string, unknown>;\n  render: (\n    filters: Record<string, unknown>,\n    onChange: (next: Record<string, unknown>) => void,\n  ) => ReactNode;\n};\n\nexport type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;\n\nexport type DataTableClassNames = {\n  dataTable?: string;\n  root?: string;\n  viewport?: string;\n  header?: string;\n  sortButton?: string;\n  expandButton?: string;\n  slotRow?: string;\n  bulkBar?: string;\n  loading?: string;\n  empty?: string;\n  expandedContent?: string;\n  skeleton?: string;\n  table?: TableClassNames;\n};\n\ntype DataTableManagedOptions<Data> = Partial<\n  Omit<\n    TableOptions<Data>,\n    | 'columns'\n    | 'data'\n    | 'onExpandedChange'\n    | 'onPaginationChange'\n    | 'onRowSelectionChange'\n    | 'onSortingChange'\n  >\n>;\n\nexport type DataTableExtraColumnConfig<Data> = {\n  column: ColumnDef<Data, unknown>;\n  position?: number;\n};\n\nexport type DataTableProps<Data> = {\n  data: Data[];\n  columns: ColumnDef<Data, unknown>[];\n  extraColumns?: DataTableExtraColumnConfig<Data>[];\n  sorting?: DataTableSortingConfig;\n  pagination?: DataTablePaginationConfig;\n  selection?: DataTableSelectionConfig<Data>;\n  expansion?: DataTableExpansionConfig<Data>;\n  loading?: boolean;\n  skeleton?: number;\n  onRefresh?: () => void | Promise<void>;\n  slots?: DataTableSlots;\n  classNames?: DataTableClassNames;\n  options?: DataTableManagedOptions<Data>;\n  labels?: Partial<DataTableLabels>;\n} & DataTableTableConfig;\n\nexport const DataTable = <Data,>({\n  classNames,\n  slots,\n  loading,\n  skeleton,\n  pagination,\n  selection,\n  expansion,\n  data,\n  columns,\n  extraColumns,\n  sorting,\n  onRefresh,\n  options,\n  labels,\n  ...tableProps\n}: DataTableProps<Data>): ReactNode => {\n  const { layout, contextValue, table } = useDataTable({\n    data,\n    columns,\n    extraColumns,\n    sorting,\n    onRefresh,\n    options,\n    labels,\n    classNames,\n    loading,\n    skeleton,\n    pagination,\n    selection,\n    expansion,\n    ...tableProps,\n  });\n\n  return (\n    <DataTableContextProvider\n      value={contextValue as DataTableContextValue<unknown>}\n    >\n      <DataTableRootContainer busy={loading} classNames={classNames}>\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.top}\n        </DataTableSlotRow>\n\n        <DataTableViewport className={classNames?.viewport}>\n          {skeleton != null && data.length === 0 ? (\n            <DataTableSkeleton\n              rows={skeleton}\n              className={classNames?.skeleton}\n            />\n          ) : (\n            <Table\n              {...tableProps}\n              layout={layout}\n              classNames={classNames?.table}\n            >\n              <DataTableHeader\n                loading={loading}\n                classNames={classNames}\n                headerGroups={table.getHeaderGroups()}\n                totalSize={table.getTotalSize()}\n              />\n              <DataTableBody\n                rows={table.getRowModel().rows}\n                colCount={table.getVisibleLeafColumns().length}\n                loading={loading}\n                empty={slots?.empty}\n                emptyClassName={classNames?.empty}\n                expandedContentClassName={classNames?.expandedContent}\n                expansion={expansion}\n                selection={selection}\n              />\n            </Table>\n          )}\n        </DataTableViewport>\n\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.bottom}\n        </DataTableSlotRow>\n\n        <DataTableBulkBar\n          selectedIds={contextValue.selectedIds}\n          className={classNames?.bulkBar}\n          selection={selection}\n        />\n      </DataTableRootContainer>\n    </DataTableContextProvider>\n  );\n};\n"],"mappings":"knBAgIA,MAAa,GAAoB,CAC/B,aACA,QACA,UACA,WACA,aACA,YACA,YACA,OACA,UACA,eACA,UACA,YACA,UACA,SACA,GAAG,KACkC,CACrC,GAAM,CAAE,SAAQ,eAAc,SAAU,EAAa,CACnD,OACA,UACA,eACA,UACA,YACA,UACA,SACA,aACA,UACA,WACA,aACA,YACA,YACA,GAAG,EACJ,CAAC,CAEF,OACE,EAAC,EAAA,CACC,MAAO,WAEP,EAAC,EAAA,CAAuB,KAAM,EAAqB,uBACjD,EAAC,EAAA,CAAiB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,KACS,CAEnB,EAAC,EAAA,CAAkB,UAAW,GAAY,kBACvC,GAAY,MAAQ,EAAK,SAAW,EACnC,EAAC,EAAA,CACC,KAAM,EACN,UAAW,GAAY,UACvB,CAEF,EAAC,EAAA,CACC,GAAI,EACI,SACR,WAAY,GAAY,gBAExB,EAAC,EAAA,CACU,UACG,aACZ,aAAc,EAAM,iBAAiB,CACrC,UAAW,EAAM,cAAc,EAC/B,CACF,EAAC,EAAA,CACC,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACd,eAAgB,GAAY,MAC5B,yBAA0B,GAAY,gBAC3B,YACA,aACX,CAAA,EACI,EAEQ,CAEpB,EAAC,EAAA,CAAiB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,QACS,CAEnB,EAAC,EAAA,CACC,YAAa,EAAa,YAC1B,UAAW,GAAY,QACZ,aACX,GACqB,EACA"}
+{"version":3,"file":"DataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTable.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n  ColumnDef,\n  ExpandedState,\n  OnChangeFn,\n  PaginationState,\n  RowSelectionState,\n  SortingState,\n  TableOptions,\n} from '@tanstack/react-table';\n\nimport { Table, type TableClassNames, type TableProps } from '../table/Table';\nimport { DataTableBody } from './DataTableBody';\nimport {\n  DataTableBulkBar,\n  type DataTableBulkBarClassNames,\n} from './DataTableBulkBar';\nimport { DataTableHeader } from './DataTableHeader';\nimport { DataTableRootContainer } from './DataTableRootContainer';\nimport { DataTableSkeleton } from './DataTableSkeleton';\nimport { DataTableSlotRow, type DataTableSlots } from './DataTableSlotRow';\nimport { DataTableViewport } from './DataTableViewport';\nimport { useDataTable } from './useDataTable';\nimport {\n  DataTableContextProvider,\n  type DataTableContextValue,\n  type DataTableLabels,\n} from './useDataTableContext';\n\nexport type DataTableRecord = Record<string, unknown>;\n\nexport type DataTableSortingConfig = {\n  state: SortingState;\n  onChange: OnChangeFn<SortingState>;\n};\n\nexport type DataTablePaginationConfig = {\n  currentPage: number;\n  pageSize: number;\n  onChange: OnChangeFn<PaginationState>;\n  pageCount: number;\n  rowCount?: number;\n};\n\nexport type DataTableColumnMeta = {\n  classNames?: {\n    header?: string;\n    cell?: string;\n  };\n};\n\nexport type DataTableSelectionConfig<Data = unknown> = {\n  state: RowSelectionState;\n  onChange: OnChangeFn<RowSelectionState>;\n  getRowId?: (row: Data) => string;\n  isRowDisabled?: (row: Data) => boolean;\n  bulkActions?: (selectedIds: string[]) => ReactNode;\n};\n\nexport type DataTableExpansionConfig<Data = unknown> = {\n  state: ExpandedState;\n  onChange: OnChangeFn<ExpandedState>;\n  renderContent: (row: Data) => ReactNode;\n};\n\nexport type DataTableSearchConfig = {\n  placeholder?: string;\n  label?: string;\n};\n\nexport type DataTableFiltersConfig = {\n  initial: Record<string, unknown>;\n  render: (\n    filters: Record<string, unknown>,\n    onChange: (next: Record<string, unknown>) => void,\n  ) => ReactNode;\n};\n\nexport type DataTableTableConfig = Omit<TableProps, 'children' | 'classNames'>;\n\nexport type DataTableClassNames = {\n  dataTable?: string;\n  root?: string;\n  viewport?: string;\n  header?: string;\n  sortButton?: string;\n  sortIndicator?: string;\n  expandButton?: string;\n  slotRow?: string;\n  bulkBar?: DataTableBulkBarClassNames;\n  loading?: string;\n  empty?: string;\n  expandedContent?: string;\n  skeleton?: string;\n  table?: TableClassNames;\n};\n\ntype DataTableManagedOptions<Data> = Partial<\n  Omit<\n    TableOptions<Data>,\n    | 'columns'\n    | 'data'\n    | 'onExpandedChange'\n    | 'onPaginationChange'\n    | 'onRowSelectionChange'\n    | 'onSortingChange'\n  >\n>;\n\nexport type DataTableExtraColumnConfig<Data> = {\n  column: ColumnDef<Data, unknown>;\n  position?: number;\n};\n\nexport type DataTableProps<Data> = {\n  data: Data[];\n  columns: ColumnDef<Data, unknown>[];\n  extraColumns?: DataTableExtraColumnConfig<Data>[];\n  sorting?: DataTableSortingConfig;\n  pagination?: DataTablePaginationConfig;\n  selection?: DataTableSelectionConfig<Data>;\n  expansion?: DataTableExpansionConfig<Data>;\n  loading?: boolean;\n  skeleton?: number;\n  onRefresh?: () => void | Promise<void>;\n  slots?: DataTableSlots;\n  classNames?: DataTableClassNames;\n  options?: DataTableManagedOptions<Data>;\n  labels?: Partial<DataTableLabels>;\n} & DataTableTableConfig;\n\nexport const DataTable = <Data,>({\n  classNames,\n  slots,\n  loading,\n  skeleton,\n  pagination,\n  selection,\n  expansion,\n  data,\n  columns,\n  extraColumns,\n  sorting,\n  onRefresh,\n  options,\n  labels,\n  ...tableProps\n}: DataTableProps<Data>): ReactNode => {\n  const { layout, contextValue, table } = useDataTable({\n    data,\n    columns,\n    extraColumns,\n    sorting,\n    onRefresh,\n    options,\n    labels,\n    classNames,\n    loading,\n    skeleton,\n    pagination,\n    selection,\n    expansion,\n    ...tableProps,\n  });\n\n  return (\n    <DataTableContextProvider\n      value={contextValue as DataTableContextValue<unknown>}\n    >\n      <DataTableRootContainer busy={loading} classNames={classNames}>\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.top}\n        </DataTableSlotRow>\n\n        <DataTableViewport className={classNames?.viewport}>\n          {skeleton != null && data.length === 0 ? (\n            <DataTableSkeleton\n              rows={skeleton}\n              className={classNames?.skeleton}\n            />\n          ) : (\n            <Table\n              {...tableProps}\n              layout={layout}\n              classNames={classNames?.table}\n            >\n              <DataTableHeader\n                loading={loading}\n                classNames={classNames}\n                headerGroups={table.getHeaderGroups()}\n                totalSize={table.getTotalSize()}\n              />\n              <DataTableBody\n                rows={table.getRowModel().rows}\n                colCount={table.getVisibleLeafColumns().length}\n                loading={loading}\n                empty={slots?.empty}\n                emptyClassName={classNames?.empty}\n                expandedContentClassName={classNames?.expandedContent}\n                expansion={expansion}\n                selection={selection}\n              />\n            </Table>\n          )}\n        </DataTableViewport>\n\n        <DataTableSlotRow classNames={{ root: classNames?.slotRow }}>\n          {slots?.bottom}\n        </DataTableSlotRow>\n\n        <DataTableBulkBar\n          selectedIds={contextValue.selectedIds}\n          className={classNames?.bulkBar}\n          selection={selection}\n        />\n      </DataTableRootContainer>\n    </DataTableContextProvider>\n  );\n};\n"],"mappings":"knBAoIA,MAAa,GAAoB,CAC/B,aACA,QACA,UACA,WACA,aACA,YACA,YACA,OACA,UACA,eACA,UACA,YACA,UACA,SACA,GAAG,KACkC,CACrC,GAAM,CAAE,SAAQ,eAAc,SAAU,EAAa,CACnD,OACA,UACA,eACA,UACA,YACA,UACA,SACA,aACA,UACA,WACA,aACA,YACA,YACA,GAAG,EACJ,CAAC,CAEF,OACE,EAAC,EAAA,CACC,MAAO,WAEP,EAAC,EAAA,CAAuB,KAAM,EAAqB,uBACjD,EAAC,EAAA,CAAiB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,KACS,CAEnB,EAAC,EAAA,CAAkB,UAAW,GAAY,kBACvC,GAAY,MAAQ,EAAK,SAAW,EACnC,EAAC,EAAA,CACC,KAAM,EACN,UAAW,GAAY,UACvB,CAEF,EAAC,EAAA,CACC,GAAI,EACI,SACR,WAAY,GAAY,gBAExB,EAAC,EAAA,CACU,UACG,aACZ,aAAc,EAAM,iBAAiB,CACrC,UAAW,EAAM,cAAc,EAC/B,CACF,EAAC,EAAA,CACC,KAAM,EAAM,aAAa,CAAC,KAC1B,SAAU,EAAM,uBAAuB,CAAC,OAC/B,UACT,MAAO,GAAO,MACd,eAAgB,GAAY,MAC5B,yBAA0B,GAAY,gBAC3B,YACA,aACX,CAAA,EACI,EAEQ,CAEpB,EAAC,EAAA,CAAiB,WAAY,CAAE,KAAM,GAAY,QAAS,UACxD,GAAO,QACS,CAEnB,EAAC,EAAA,CACC,YAAa,EAAa,YAC1B,UAAW,GAAY,QACZ,aACX,GACqB,EACA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBody.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBody.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  dataTableEmpty,\n  dataTableExpandedContent,\n} from '@mage-ui/styled-system/recipes';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { Table } from '../table/Table';\nimport type {\n  DataTableColumnMeta,\n  DataTableExpansionConfig,\n  DataTableProps,\n  DataTableSelectionConfig,\n} from './DataTable';\n\n\ntype DataTableBodyProps<Data> = Pick<\n  DataTableProps<Data>,\n  'loading' | 'expansion' | 'selection'\n> & {\n  rows: Row<Data>[];\n  colCount: number;\n  empty?: ReactNode;\n  emptyClassName?: string;\n  expandedContentClassName?: string;\n};\n\nconst BodyCell = <Data,>({\n  cell,\n}: {\n  cell: import('@tanstack/react-table').Cell<Data, unknown>;\n}): ReactNode => {\n  const columnMeta = cell.column.columnDef.meta as\n    | DataTableColumnMeta\n    | undefined;\n\n  return (\n    <Table.Cell\n      classNames={\n        columnMeta?.classNames?.cell\n          ? { td: columnMeta.classNames.cell }\n          : undefined\n      }\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  );\n};\n\nconst ExpandedRow = <Data,>({\n  row,\n  colCount,\n  className,\n  expansion,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  className?: string;\n  expansion: DataTableExpansionConfig<Data>;\n}): ReactNode => (\n  <Table.Row id={`data-table-expanded-${row.id}`}>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableExpandedContent() }}\n    >\n      {expansion.renderContent(row.original)}\n    </Table.Cell>\n  </Table.Row>\n);\n\nconst BodyRow = <Data,>({\n  row,\n  colCount,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  expandedContentClassName?: string;\n  expansion?: DataTableExpansionConfig<Data>;\n  selection?: DataTableSelectionConfig<Data>;\n}): ReactNode => (\n  <>\n    <Table.Row\n      data-selected={row.getIsSelected() || undefined}\n      data-disabled={(selection && !row.getCanSelect()) || undefined}\n      data-expanded={row.getIsExpanded() || undefined}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <BodyCell key={cell.id} cell={cell} />\n      ))}\n    </Table.Row>\n    {expansion && row.getIsExpanded() ? (\n      <ExpandedRow\n        row={row}\n        colCount={colCount}\n        className={expandedContentClassName}\n        expansion={expansion}\n      />\n    ) : null}\n  </>\n);\n\nconst EmptyRow = ({\n  colCount,\n  className,\n  children,\n}: {\n  colCount: number;\n  className?: string;\n  children?: ReactNode;\n}): ReactNode => (\n  <Table.Row>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableEmpty() }}\n    >\n      {children}\n    </Table.Cell>\n  </Table.Row>\n);\n\nexport const DataTableBody = <Data,>({\n  rows,\n  colCount,\n  loading,\n  empty,\n  emptyClassName,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: DataTableBodyProps<Data>): ReactNode => {\n  const showEmptyState = !loading && rows.length === 0;\n\n  return (\n    <Table.Body>\n      {showEmptyState ? (\n        <EmptyRow colCount={colCount} className={emptyClassName}>\n          {empty}\n        </EmptyRow>\n      ) : (\n        rows.map((row) => (\n          <BodyRow\n            key={row.id}\n            row={row}\n            colCount={colCount}\n            expandedContentClassName={expandedContentClassName}\n            expansion={expansion}\n            selection={selection}\n          />\n        ))\n      )}\n    </Table.Body>\n  );\n};\n"],"mappings":"4PA4BA,MAAM,GAAmB,CACvB,UAGe,CACf,IAAM,EAAa,EAAK,OAAO,UAAU,KAIzC,OACE,EAAC,EAAM,KAAA,CACL,WACE,GAAY,YAAY,KACpB,CAAE,GAAI,EAAW,WAAW,KAAM,CAClC,IAAA,YAGL,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,EAC/C,EAIX,GAAsB,CAC1B,MACA,WACA,YACA,eAOA,EAAC,EAAM,IAAA,CAAI,GAAI,uBAAuB,EAAI,cACxC,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAA0B,CAAE,UAE1D,EAAU,cAAc,EAAI,SAAS,EAC3B,EACH,CAGR,GAAkB,CACtB,MACA,WACA,2BACA,YACA,eAQA,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAM,IAAA,CACL,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAgB,GAAa,CAAC,EAAI,cAAc,EAAK,IAAA,GACrD,gBAAe,EAAI,eAAe,EAAI,IAAA,YAErC,EAAI,iBAAiB,CAAC,IAAK,GAC1B,EAAC,EAAA,CAA6B,OAAA,CAAf,EAAK,GAAkB,CACtC,EACQ,CACX,GAAa,EAAI,eAAe,CAC/B,EAAC,EAAA,CACM,MACK,WACV,UAAW,EACA,aACX,CACA,KAAA,CAAA,CACH,CAGC,GAAY,CAChB,WACA,YACA,cAMA,EAAC,EAAM,IAAA,CAAA,SACL,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAAgB,CAAE,CAEhD,YACU,CAAA,CACH,CAGD,GAAwB,CACnC,OACA,WACA,UACA,QACA,iBACA,2BACA,YACA,eACyC,CACzC,IAAM,EAAiB,CAAC,GAAW,EAAK,SAAW,EAEnD,OACE,EAAC,EAAM,KAAA,CAAA,SACJ,EACC,EAAC,EAAA,CAAmB,WAAU,UAAW,WACtC,GACQ,CAEX,EAAK,IAAK,GACR,EAAC,EAAA,CAEM,MACK,WACgB,2BACf,YACA,aALN,EAAI,GAMT,CACF,CAAA,CAEO"}
+{"version":3,"file":"DataTableBody.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBody.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  dataTableEmpty,\n  dataTableExpandedContent,\n} from '@mage-ui/styled-system/recipes';\nimport { flexRender, type Row } from '@tanstack/react-table';\n\nimport { Table } from '../table/Table';\nimport type {\n  DataTableColumnMeta,\n  DataTableExpansionConfig,\n  DataTableProps,\n  DataTableSelectionConfig,\n} from './DataTable';\n\ntype DataTableBodyProps<Data> = Pick<\n  DataTableProps<Data>,\n  'loading' | 'expansion' | 'selection'\n> & {\n  rows: Row<Data>[];\n  colCount: number;\n  empty?: ReactNode;\n  emptyClassName?: string;\n  expandedContentClassName?: string;\n};\n\nconst BodyCell = <Data,>({\n  cell,\n}: {\n  cell: import('@tanstack/react-table').Cell<Data, unknown>;\n}): ReactNode => {\n  const columnMeta = cell.column.columnDef.meta as\n    | DataTableColumnMeta\n    | undefined;\n\n  return (\n    <Table.Cell\n      classNames={\n        columnMeta?.classNames?.cell\n          ? { td: columnMeta.classNames.cell }\n          : undefined\n      }\n    >\n      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n    </Table.Cell>\n  );\n};\n\nconst ExpandedRow = <Data,>({\n  row,\n  colCount,\n  className,\n  expansion,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  className?: string;\n  expansion: DataTableExpansionConfig<Data>;\n}): ReactNode => (\n  <Table.Row id={`data-table-expanded-${row.id}`}>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableExpandedContent() }}\n    >\n      {expansion.renderContent(row.original)}\n    </Table.Cell>\n  </Table.Row>\n);\n\nconst BodyRow = <Data,>({\n  row,\n  colCount,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: {\n  row: Row<Data>;\n  colCount: number;\n  expandedContentClassName?: string;\n  expansion?: DataTableExpansionConfig<Data>;\n  selection?: DataTableSelectionConfig<Data>;\n}): ReactNode => (\n  <>\n    <Table.Row\n      data-selected={row.getIsSelected() || undefined}\n      data-disabled={(selection && !row.getCanSelect()) || undefined}\n      data-expanded={row.getIsExpanded() || undefined}\n    >\n      {row.getVisibleCells().map((cell) => (\n        <BodyCell key={cell.id} cell={cell} />\n      ))}\n    </Table.Row>\n    {expansion && row.getIsExpanded() ? (\n      <ExpandedRow\n        row={row}\n        colCount={colCount}\n        className={expandedContentClassName}\n        expansion={expansion}\n      />\n    ) : null}\n  </>\n);\n\nconst EmptyRow = ({\n  colCount,\n  className,\n  children,\n}: {\n  colCount: number;\n  className?: string;\n  children?: ReactNode;\n}): ReactNode => (\n  <Table.Row>\n    <Table.Cell\n      colSpan={colCount}\n      classNames={{ td: className ?? dataTableEmpty() }}\n    >\n      {children}\n    </Table.Cell>\n  </Table.Row>\n);\n\nexport const DataTableBody = <Data,>({\n  rows,\n  colCount,\n  loading,\n  empty,\n  emptyClassName,\n  expandedContentClassName,\n  expansion,\n  selection,\n}: DataTableBodyProps<Data>): ReactNode => {\n  const showEmptyState = !loading && rows.length === 0;\n\n  return (\n    <Table.Body>\n      {showEmptyState ? (\n        <EmptyRow colCount={colCount} className={emptyClassName}>\n          {empty}\n        </EmptyRow>\n      ) : (\n        rows.map((row) => (\n          <BodyRow\n            key={row.id}\n            row={row}\n            colCount={colCount}\n            expandedContentClassName={expandedContentClassName}\n            expansion={expansion}\n            selection={selection}\n          />\n        ))\n      )}\n    </Table.Body>\n  );\n};\n"],"mappings":"4PA2BA,MAAM,GAAmB,CACvB,UAGe,CACf,IAAM,EAAa,EAAK,OAAO,UAAU,KAIzC,OACE,EAAC,EAAM,KAAA,CACL,WACE,GAAY,YAAY,KACpB,CAAE,GAAI,EAAW,WAAW,KAAM,CAClC,IAAA,YAGL,EAAW,EAAK,OAAO,UAAU,KAAM,EAAK,YAAY,CAAC,EAC/C,EAIX,GAAsB,CAC1B,MACA,WACA,YACA,eAOA,EAAC,EAAM,IAAA,CAAI,GAAI,uBAAuB,EAAI,cACxC,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAA0B,CAAE,UAE1D,EAAU,cAAc,EAAI,SAAS,EAC3B,EACH,CAGR,GAAkB,CACtB,MACA,WACA,2BACA,YACA,eAQA,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAM,IAAA,CACL,gBAAe,EAAI,eAAe,EAAI,IAAA,GACtC,gBAAgB,GAAa,CAAC,EAAI,cAAc,EAAK,IAAA,GACrD,gBAAe,EAAI,eAAe,EAAI,IAAA,YAErC,EAAI,iBAAiB,CAAC,IAAK,GAC1B,EAAC,EAAA,CAA6B,OAAA,CAAf,EAAK,GAAkB,CACtC,EACQ,CACX,GAAa,EAAI,eAAe,CAC/B,EAAC,EAAA,CACM,MACK,WACV,UAAW,EACA,aACX,CACA,KAAA,CAAA,CACH,CAGC,GAAY,CAChB,WACA,YACA,cAMA,EAAC,EAAM,IAAA,CAAA,SACL,EAAC,EAAM,KAAA,CACL,QAAS,EACT,WAAY,CAAE,GAAI,GAAa,GAAgB,CAAE,CAEhD,YACU,CAAA,CACH,CAGD,GAAwB,CACnC,OACA,WACA,UACA,QACA,iBACA,2BACA,YACA,eACyC,CACzC,IAAM,EAAiB,CAAC,GAAW,EAAK,SAAW,EAEnD,OACE,EAAC,EAAM,KAAA,CAAA,SACJ,EACC,EAAC,EAAA,CAAmB,WAAU,UAAW,WACtC,GACQ,CAEX,EAAK,IAAK,GACR,EAAC,EAAA,CAEM,MACK,WACgB,2BACf,YACA,aALN,EAAI,GAMT,CACF,CAAA,CAEO"}

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

@@ -0,0 +1,15 @@
+import "./DataTable.mjs";
+import { ReactNode } from "react";
+
+//#region src/components/data-display/datatables/DataTableBulkBar.d.ts
+type DataTableBulkBarClassNames = {
+  root?: string;
+  count?: string;
+  countBadge?: string;
+  actions?: string;
+  dragHandle?: string;
+  dragHandleIcon?: string;
+};
+//#endregion
+export { DataTableBulkBarClassNames };
+//# sourceMappingURL=DataTableBulkBar.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableBulkBar.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"mappings":";;;;KAqBY,0BAAA;EACV,IAAA;EACA,KAAA;EACA,UAAA;EACA,OAAA;EACA,UAAA;EACA,cAAA;AAAA"}

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

@@ -1,2 +1,2 @@
-import{useDataTableContext as e}from"./useDataTableContext.mjs";import{dataTableBulkBar as t}from"@mage-ui/styled-system/recipes";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({selectedIds:i,className:a,selection:o})=>{let{labels:s}=e();return!o?.bulkActions||i.length===0?null:r(`div`,{className:a??t(),children:[n(`span`,{children:s.selectedCount(i.length)}),o.bulkActions(i)]})};export{i as DataTableBulkBar};
+import{Badge as e}from"../badge/Badge.mjs";import{Icon as t}from"../icons/icon/Icon.mjs";import{useDataTableContext as n}from"./useDataTableContext.mjs";import{dataTableBulkBar as r,dataTableBulkBarActions as i,dataTableBulkBarCount as a,dataTableBulkBarCountBadge as o,dataTableBulkBarDragHandle as s,dataTableBulkBarDragHandleIcon as c}from"@mage-ui/styled-system/recipes";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useState as d}from"react";import{DndContext as f,useDraggable as p}from"@dnd-kit/core";import{restrictToWindowEdges as m}from"@dnd-kit/modifiers";const h=({selectedIds:t,className:n,selection:s,labels:c})=>u(`div`,{className:n?.root??r(),"data-draggable":!1,children:[l(`span`,{className:n?.count??a(),children:c.selectedCount(l(e,{classNames:{badge:o()},children:t.length}))}),l(`div`,{className:n?.actions??i(),children:s?.bulkActions?.(t)})]}),g=({coordinates:n,selectedIds:d,className:f,selection:m,labels:h})=>{let{attributes:g,listeners:_,setNodeRef:v,isDragging:y,transform:b}=p({id:`data-table-bulk-bar`});return u(`div`,{ref:v,style:b?{transform:`translate(calc(-50% + ${n.x+b.x}px), calc(-50% + ${n.y+b.y}px))`}:{transform:`translate(calc(-50% + ${n.x}px), calc(-50% + ${n.y}px))`},className:f?.root??r(),"data-draggable":!0,"data-is-dragging":y,children:[l(`span`,{...g,..._,className:f?.dragHandle??s(),"data-is-dragging":y,"aria-hidden":`true`,children:l(t,{name:`mage-bulk-actions-dots-grid-2`,path:`/icons/sprite-mage.svg`,classNames:{icon:c()}})}),l(`span`,{className:f?.count??a(),children:h.selectedCount(l(e,{classNames:{badge:o()},children:d.length}))}),l(`div`,{className:f?.actions??i(),children:m?.bulkActions?.(d)})]})},_=({selectedIds:e,className:t,selection:r,isDraggable:i=!0})=>{let{labels:a}=n(),[o,s]=d({x:0,y:0});return!r?.bulkActions||e.length===0?null:i?l(f,{onDragEnd:e=>{let{delta:t}=e;s(e=>({x:e.x+t.x,y:e.y+t.y}))},modifiers:[m],children:l(g,{coordinates:o,selectedIds:e,className:t,selection:r,labels:a})}):l(h,{selectedIds:e,className:t,selection:r,isDraggable:!1,labels:a})};export{_ as DataTableBulkBar};
 //# sourceMappingURL=DataTableBulkBar.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableBulkBar.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTableBulkBar } from '@mage-ui/styled-system/recipes';\n\nimport type { DataTableSelectionConfig } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableBulkBarProps<Data> = {\n  selectedIds: string[];\n  className?: string;\n  selection?: DataTableSelectionConfig<Data>;\n};\n\nexport const DataTableBulkBar = <Data,>({\n  selectedIds,\n  className,\n  selection,\n}: DataTableBulkBarProps<Data>): ReactNode => {\n  const { labels } = useDataTableContext();\n\n  if (!selection?.bulkActions || selectedIds.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className={className ?? dataTableBulkBar()}>\n      <span>{labels.selectedCount(selectedIds.length)}</span>\n      {selection.bulkActions(selectedIds)}\n    </div>\n  );\n};\n"],"mappings":"oLAaA,MAAa,GAA2B,CACtC,cACA,YACA,eAC4C,CAC5C,GAAM,CAAE,UAAW,GAAqB,CAMxC,MAJI,CAAC,GAAW,aAAe,EAAY,SAAW,EAC7C,KAIP,EAAC,MAAA,CAAI,UAAW,GAAa,GAAkB,WAC7C,EAAC,OAAA,CAAA,SAAM,EAAO,cAAc,EAAY,OAAO,CAAA,CAAQ,CACtD,EAAU,YAAY,EAAY,CAAA,EAC/B"}
+{"version":3,"file":"DataTableBulkBar.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableBulkBar.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport { DndContext, type DragEndEvent, useDraggable } from '@dnd-kit/core';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport {\n  dataTableBulkBar,\n  dataTableBulkBarActions,\n  dataTableBulkBarCount,\n  dataTableBulkBarCountBadge,\n  dataTableBulkBarDragHandle,\n  dataTableBulkBarDragHandleIcon,\n} from '@mage-ui/styled-system/recipes';\nimport { Badge } from '@/components/data-display/badge/Badge';\nimport { Icon } from '@/components/data-display/icons/icon/Icon';\n\nimport type { DataTableSelectionConfig } from './DataTable';\nimport {\n  type DataTableLabels,\n  useDataTableContext,\n} from './useDataTableContext';\n\nexport type DataTableBulkBarClassNames = {\n  root?: string;\n  count?: string;\n  countBadge?: string;\n  actions?: string;\n  dragHandle?: string;\n  dragHandleIcon?: string;\n};\n\ntype DataTableBulkBarProps<Data> = {\n  selectedIds: string[];\n  className?: DataTableBulkBarClassNames;\n  selection?: DataTableSelectionConfig<Data>;\n  isDraggable?: boolean;\n};\n\ntype DataTableBulkBarContentProps<Data> = DataTableBulkBarProps<Data> & {\n  labels: DataTableLabels;\n};\n\nconst DataTableBulkBarStatic = <Data,>({\n  selectedIds,\n  className,\n  selection,\n  labels,\n}: DataTableBulkBarContentProps<Data>) => {\n  return (\n    <div\n      className={className?.root ?? dataTableBulkBar()}\n      data-draggable={false}\n    >\n      <span className={className?.count ?? dataTableBulkBarCount()}>\n        {labels.selectedCount(\n          <Badge classNames={{ badge: dataTableBulkBarCountBadge() }}>\n            {selectedIds.length}\n          </Badge>,\n        )}\n      </span>\n      <div className={className?.actions ?? dataTableBulkBarActions()}>\n        {selection?.bulkActions?.(selectedIds)}\n      </div>\n    </div>\n  );\n};\n\ntype DraggableBulkBarWrapperProps<Data> = DataTableBulkBarProps<Data> & {\n  coordinates: { x: number; y: number };\n  labels: DataTableLabels;\n};\n\nconst DraggableBulkBarWrapper = <Data,>({\n  coordinates,\n  selectedIds,\n  className,\n  selection,\n  labels,\n}: DraggableBulkBarWrapperProps<Data>) => {\n  const { attributes, listeners, setNodeRef, isDragging, transform } =\n    useDraggable({\n      id: 'data-table-bulk-bar',\n    });\n\n  const style = transform\n    ? {\n        transform: `translate(calc(-50% + ${coordinates.x + transform.x}px), calc(-50% + ${coordinates.y + transform.y}px))`,\n      }\n    : {\n        transform: `translate(calc(-50% + ${coordinates.x}px), calc(-50% + ${coordinates.y}px))`,\n      };\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={className?.root ?? dataTableBulkBar()}\n      data-draggable={true}\n      data-is-dragging={isDragging}\n    >\n      <span\n        {...attributes}\n        {...listeners}\n        className={className?.dragHandle ?? dataTableBulkBarDragHandle()}\n        data-is-dragging={isDragging}\n        aria-hidden='true'\n      >\n        <Icon\n          name='mage-bulk-actions-dots-grid-2'\n          path='/icons/sprite-mage.svg'\n          classNames={{ icon: dataTableBulkBarDragHandleIcon() }}\n        />\n      </span>\n      <span className={className?.count ?? dataTableBulkBarCount()}>\n        {labels.selectedCount(\n          <Badge classNames={{ badge: dataTableBulkBarCountBadge() }}>\n            {selectedIds.length}\n          </Badge>,\n        )}\n      </span>\n      <div className={className?.actions ?? dataTableBulkBarActions()}>\n        {selection?.bulkActions?.(selectedIds)}\n      </div>\n    </div>\n  );\n};\n\nexport const DataTableBulkBar = <Data,>({\n  selectedIds,\n  className,\n  selection,\n  isDraggable = true,\n}: DataTableBulkBarProps<Data>): ReactNode => {\n  const { labels } = useDataTableContext();\n  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });\n\n  if (!selection?.bulkActions || selectedIds.length === 0) {\n    return null;\n  }\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { delta } = event;\n    setCoordinates((prev) => ({\n      x: prev.x + delta.x,\n      y: prev.y + delta.y,\n    }));\n  };\n\n  if (!isDraggable) {\n    return (\n      <DataTableBulkBarStatic\n        selectedIds={selectedIds}\n        className={className}\n        selection={selection}\n        isDraggable={false}\n        labels={labels}\n      />\n    );\n  }\n\n  return (\n    <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToWindowEdges]}>\n      <DraggableBulkBarWrapper\n        coordinates={coordinates}\n        selectedIds={selectedIds}\n        className={className}\n        selection={selection}\n        labels={labels}\n      />\n    </DndContext>\n  );\n};\n"],"mappings":"kkBAyCA,MAAM,GAAiC,CACrC,cACA,YACA,YACA,YAGE,EAAC,MAAA,CACC,UAAW,GAAW,MAAQ,GAAkB,CAChD,iBAAgB,aAEhB,EAAC,OAAA,CAAK,UAAW,GAAW,OAAS,GAAuB,UACzD,EAAO,cACN,EAAC,EAAA,CAAM,WAAY,CAAE,MAAO,GAA4B,CAAE,UACvD,EAAY,QACP,CACT,EACI,CACP,EAAC,MAAA,CAAI,UAAW,GAAW,SAAW,GAAyB,UAC5D,GAAW,cAAc,EAAY,EAClC,CAAA,EACF,CASJ,GAAkC,CACtC,cACA,cACA,YACA,YACA,YACwC,CACxC,GAAM,CAAE,aAAY,YAAW,aAAY,aAAY,aACrD,EAAa,CACX,GAAI,sBACL,CAAC,CAUJ,OACE,EAAC,MAAA,CACC,IAAK,EACL,MAXU,EACV,CACE,UAAW,yBAAyB,EAAY,EAAI,EAAU,EAAE,mBAAmB,EAAY,EAAI,EAAU,EAAE,MAChH,CACD,CACE,UAAW,yBAAyB,EAAY,EAAE,mBAAmB,EAAY,EAAE,MACpF,CAMD,UAAW,GAAW,MAAQ,GAAkB,CAChD,iBAAgB,GAChB,mBAAkB,YAElB,EAAC,OAAA,CACC,GAAI,EACJ,GAAI,EACJ,UAAW,GAAW,YAAc,GAA4B,CAChE,mBAAkB,EAClB,cAAY,gBAEZ,EAAC,EAAA,CACC,KAAK,gCACL,KAAK,yBACL,WAAY,CAAE,KAAM,GAAgC,CAAE,EACtD,EACG,CACP,EAAC,OAAA,CAAK,UAAW,GAAW,OAAS,GAAuB,UACzD,EAAO,cACN,EAAC,EAAA,CAAM,WAAY,CAAE,MAAO,GAA4B,CAAE,UACvD,EAAY,QACP,CACT,EACI,CACP,EAAC,MAAA,CAAI,UAAW,GAAW,SAAW,GAAyB,UAC5D,GAAW,cAAc,EAAY,EAClC,GACF,EAIG,GAA2B,CACtC,cACA,YACA,YACA,cAAc,MAC8B,CAC5C,GAAM,CAAE,UAAW,GAAqB,CAClC,CAAC,EAAa,GAAkB,EAAS,CAAE,EAAG,EAAG,EAAG,EAAG,CAAC,CA0B9D,MAxBI,CAAC,GAAW,aAAe,EAAY,SAAW,EAC7C,KAWJ,EAaH,EAAC,EAAA,CAAW,UArBS,GAAwB,CAC7C,GAAM,CAAE,SAAU,EAClB,EAAgB,IAAU,CACxB,EAAG,EAAK,EAAI,EAAM,EAClB,EAAG,EAAK,EAAI,EAAM,EACnB,EAAE,EAgBmC,UAAW,CAAC,EAAsB,UACtE,EAAC,EAAA,CACc,cACA,cACF,YACA,YACH,UACR,EACS,CAnBX,EAAC,EAAA,CACc,cACF,YACA,YACX,YAAa,GACL,UACR"}

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

@@ -1,2 +1,2 @@
-import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as t}from"../table/Table.mjs";import{useDataTableContext as n}from"./useDataTableContext.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dataTableHeader as i,dataTableLoading as a,dataTableSortButton as o}from"@mage-ui/styled-system/recipes";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{flexRender as l}from"@tanstack/react-table";const u=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,d=({sorted:e})=>s(`span`,{"aria-hidden":!0,children:e===`asc`?`↑`:e===`desc`?`↓`:``}),f=({header:t,className:r})=>{let{labels:i}=n(),a=t.column.getIsSorted();return c(`button`,{className:r??o(),type:`button`,onClick:t.column.getToggleSortingHandler(),children:[s(`span`,{children:l(t.column.columnDef.header,t.getContext())}),s(d,{sorted:a}),s(e,{children:a===`asc`?i.sortedAscending:a===`desc`?i.sortedDescending:i.activateToSort})]})},p=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?s(f,{header:e,className:t}):l(e.column.columnDef.header,e.getContext()),m=({header:e,totalSize:n,classNames:r})=>{let i=e.column.getCanSort(),a=e.column.getIsSorted(),o=e.column.columnDef.meta,c=n>0&&e.column.columnDef.size!==150?`${e.getSize()/n*100}%`:void 0;return s(t.HeaderCell,{classNames:o?.classNames?.header?{th:o.classNames.header}:void 0,scope:`col`,style:{width:c},"aria-sort":i?u(a):void 0,"data-sortable":i||void 0,"data-sort":a||void 0,children:s(p,{header:e,sortButtonClassName:r?.sortButton})})},h=({headerGroups:e,totalSize:n,loading:o,classNames:c})=>s(t.Head,{classNames:{thead:r(c?.header??i(),o?c?.loading??a():void 0)},"data-loading":o||void 0,children:e.map(e=>s(t.Row,{children:e.headers.map(e=>s(m,{header:e,totalSize:n,classNames:c},e.id))},e.id))});export{h as DataTableHeader};
+import{Button as e}from"../../buttons/button/Button.mjs";import{VisuallyHidden as t}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{Table as n}from"../table/Table.mjs";import{Icon as r}from"../icons/icon/Icon.mjs";import{useDataTableContext as i}from"./useDataTableContext.mjs";import{cx as a}from"@mage-ui/styled-system/css";import{dataTableHeader as o,dataTableLoading as s,dataTableSortButton as c,dataTableSortButtonIndicator as l}from"@mage-ui/styled-system/recipes";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";const p=e=>e===`asc`?`ascending`:e===`desc`?`descending`:`none`,m=({sorted:e,className:t})=>u(r,{path:`/icons/sprite-mage.svg`,name:e===`asc`?`mage-datatable-sort-arrow-narrow-up`:e===`desc`?`mage-datatable-sort-arrow-narrow-down`:`mage-datatable-sort-switch-vertical-02`,classNames:{icon:t??l()}}),h=({header:n,className:r})=>{let{labels:o}=i(),s=n.column.getIsSorted();return d(e,{classNames:{button:a(r??c(),`group`)},onClick:n.column.getToggleSortingHandler(),endSlot:u(m,{sorted:s}),children:[f(n.column.columnDef.header,n.getContext()),u(t,{children:s===`asc`?o.sortedAscending:s===`desc`?o.sortedDescending:o.activateToSort})]})},g=({header:e,sortButtonClassName:t})=>e.isPlaceholder?null:e.column.getCanSort()?u(h,{header:e,className:t}):f(e.column.columnDef.header,e.getContext()),_=({header:e,totalSize:t,classNames:r})=>{let i=e.column.getCanSort(),a=e.column.getIsSorted(),o=e.column.columnDef.meta,s=t>0&&e.column.columnDef.size!==150?`${e.getSize()/t*100}%`:void 0;return u(n.HeaderCell,{classNames:o?.classNames?.header?{th:o.classNames.header}:void 0,scope:`col`,style:{width:s},"aria-sort":i?p(a):void 0,"data-sortable":i||void 0,"data-sort":a||void 0,children:u(g,{header:e,sortButtonClassName:r?.sortButton})})},v=({headerGroups:e,totalSize:t,loading:r,classNames:i})=>u(n.Head,{classNames:{thead:a(i?.header??o(),r?i?.loading??s():void 0)},"data-loading":r||void 0,children:e.map(e=>u(n.Row,{children:e.headers.map(e=>u(_,{header:e,totalSize:t,classNames:i},e.id))},e.id))});export{v as DataTableHeader};
 //# sourceMappingURL=DataTableHeader.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTableHeader.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dataTableHeader,\n  dataTableLoading,\n  dataTableSortButton,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  flexRender,\n  type Header,\n  type HeaderGroup,\n} from '@tanstack/react-table';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n  headerGroups: HeaderGroup<Data>[];\n  totalSize: number;\n  loading?: boolean;\n  classNames?: Pick<DataTableClassNames, 'header' | 'loading' | 'sortButton'>;\n};\n\nconst getAriaSort = (sorted: false | 'asc' | 'desc') => {\n  if (sorted === 'asc') return 'ascending';\n  if (sorted === 'desc') return 'descending';\n  return 'none';\n};\n\nconst SortIndicator = ({ sorted }: { sorted: false | 'asc' | 'desc' }) => (\n  <span aria-hidden>\n    {sorted === 'asc' ? '↑' : sorted === 'desc' ? '↓' : ''}\n  </span>\n);\n\nconst SortButton = <Data,>({\n  header,\n  className,\n}: {\n  header: Header<Data, unknown>;\n  className?: string;\n}): ReactNode => {\n  const { labels } = useDataTableContext();\n  const sorted = header.column.getIsSorted();\n\n  const getSortStatusText = () => {\n    if (sorted === 'asc') return labels.sortedAscending;\n    if (sorted === 'desc') return labels.sortedDescending;\n    return labels.activateToSort;\n  };\n\n  return (\n    <button\n      className={className ?? dataTableSortButton()}\n      type='button'\n      onClick={header.column.getToggleSortingHandler()}\n    >\n      <span>\n        {flexRender(header.column.columnDef.header, header.getContext())}\n      </span>\n      <SortIndicator sorted={sorted} />\n      <VisuallyHidden>{getSortStatusText()}</VisuallyHidden>\n    </button>\n  );\n};\n\nconst HeaderCellContent = <Data,>({\n  header,\n  sortButtonClassName,\n}: {\n  header: Header<Data, unknown>;\n  sortButtonClassName?: string;\n}): ReactNode => {\n  if (header.isPlaceholder) return null;\n\n  if (header.column.getCanSort()) {\n    return <SortButton header={header} className={sortButtonClassName} />;\n  }\n\n  return flexRender(header.column.columnDef.header, header.getContext());\n};\n\nconst HeaderCell = <Data,>({\n  header,\n  totalSize,\n  classNames,\n}: {\n  header: Header<Data, unknown>;\n  totalSize: number;\n  classNames?: Pick<DataTableClassNames, 'sortButton'>;\n}): ReactNode => {\n  const canSort = header.column.getCanSort();\n  const sorted = header.column.getIsSorted();\n  const columnMeta = header.column.columnDef.meta as\n    | DataTableColumnMeta\n    | undefined;\n  const width =\n    totalSize > 0 && header.column.columnDef.size !== 150\n      ? `${(header.getSize() / totalSize) * 100}%`\n      : undefined;\n\n  return (\n    <Table.HeaderCell\n      classNames={\n        columnMeta?.classNames?.header\n          ? { th: columnMeta.classNames.header }\n          : undefined\n      }\n      scope='col'\n      style={{ width }}\n      aria-sort={canSort ? getAriaSort(sorted) : undefined}\n      data-sortable={canSort || undefined}\n      data-sort={(sorted || undefined) as string | undefined}\n    >\n      <HeaderCellContent\n        header={header}\n        sortButtonClassName={classNames?.sortButton}\n      />\n    </Table.HeaderCell>\n  );\n};\n\nexport const DataTableHeader = <Data,>({\n  headerGroups,\n  totalSize,\n  loading,\n  classNames,\n}: DataTableHeaderProps<Data>): ReactNode => (\n  <Table.Head\n    classNames={{\n      thead: cx(\n        classNames?.header ?? dataTableHeader(),\n        loading ? (classNames?.loading ?? dataTableLoading()) : undefined,\n      ),\n    }}\n    data-loading={loading || undefined}\n  >\n    {headerGroups.map((headerGroup) => (\n      <Table.Row key={headerGroup.id}>\n        {headerGroup.headers.map((header) => (\n          <HeaderCell\n            key={header.id}\n            header={header}\n            totalSize={totalSize}\n            classNames={classNames}\n          />\n        ))}\n      </Table.Row>\n    ))}\n  </Table.Head>\n);\n"],"mappings":"+bA0BA,MAAM,EAAe,GACf,IAAW,MAAc,YACzB,IAAW,OAAe,aACvB,OAGH,GAAiB,CAAE,YACvB,EAAC,OAAA,CAAK,cAAA,YACH,IAAW,MAAQ,IAAM,IAAW,OAAS,IAAM,IAC/C,CAGH,GAAqB,CACzB,SACA,eAIe,CACf,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAS,EAAO,OAAO,aAAa,CAQ1C,OACE,EAAC,SAAA,CACC,UAAW,GAAa,GAAqB,CAC7C,KAAK,SACL,QAAS,EAAO,OAAO,yBAAyB,WAEhD,EAAC,OAAA,CAAA,SACE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAAA,CAC3D,CACP,EAAC,EAAA,CAAsB,SAAA,CAAU,CACjC,EAAC,EAAA,CAAA,SAfC,IAAW,MAAc,EAAO,gBAChC,IAAW,OAAe,EAAO,iBAC9B,EAAO,eAawB,CAAkB,GAC/C,EAIP,GAA4B,CAChC,SACA,yBAKI,EAAO,cAAsB,KAE7B,EAAO,OAAO,YAAY,CACrB,EAAC,EAAA,CAAmB,SAAQ,UAAW,GAAuB,CAGhE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAGlE,GAAqB,CACzB,SACA,YACA,gBAKe,CACf,IAAM,EAAU,EAAO,OAAO,YAAY,CACpC,EAAS,EAAO,OAAO,aAAa,CACpC,EAAa,EAAO,OAAO,UAAU,KAGrC,EACJ,EAAY,GAAK,EAAO,OAAO,UAAU,OAAS,IAC9C,GAAI,EAAO,SAAS,CAAG,EAAa,IAAI,GACxC,IAAA,GAEN,OACE,EAAC,EAAM,WAAA,CACL,WACE,GAAY,YAAY,OACpB,CAAE,GAAI,EAAW,WAAW,OAAQ,CACpC,IAAA,GAEN,MAAM,MACN,MAAO,CAAE,QAAO,CAChB,YAAW,EAAU,EAAY,EAAO,CAAG,IAAA,GAC3C,gBAAe,GAAW,IAAA,GAC1B,YAAY,GAAU,IAAA,YAEtB,EAAC,EAAA,CACS,SACR,oBAAqB,GAAY,YACjC,EACe,EAIV,GAA0B,CACrC,eACA,YACA,UACA,gBAEA,EAAC,EAAM,KAAA,CACL,WAAY,CACV,MAAO,EACL,GAAY,QAAU,GAAiB,CACvC,EAAW,GAAY,SAAW,GAAkB,CAAI,IAAA,GACzD,CACF,CACD,eAAc,GAAW,IAAA,YAExB,EAAa,IAAK,GACjB,EAAC,EAAM,IAAA,CAAA,SACJ,EAAY,QAAQ,IAAK,GACxB,EAAC,EAAA,CAES,SACG,YACC,cAHP,EAAO,GAIZ,CACF,CAAA,CARY,EAAY,GAShB,CACZ,EACS"}
+{"version":3,"file":"DataTableHeader.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTableHeader.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dataTableHeader,\n  dataTableLoading,\n  dataTableSortButton,\n  dataTableSortButtonIndicator,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  flexRender,\n  type Header,\n  type HeaderGroup,\n} from '@tanstack/react-table';\nimport { Button } from '@/components/buttons';\n\nimport { VisuallyHidden } from '../../misc/visually-hidden/VisuallyHidden';\nimport { Icon } from '../icons/icon/Icon';\nimport { Table } from '../table/Table';\nimport type { DataTableClassNames, DataTableColumnMeta } from './DataTable';\nimport { useDataTableContext } from './useDataTableContext';\n\ntype DataTableHeaderProps<Data> = {\n  headerGroups: HeaderGroup<Data>[];\n  totalSize: number;\n  loading?: boolean;\n  classNames?: Pick<DataTableClassNames, 'header' | 'loading' | 'sortButton'>;\n};\n\nconst getAriaSort = (sorted: false | 'asc' | 'desc') => {\n  if (sorted === 'asc') return 'ascending';\n  if (sorted === 'desc') return 'descending';\n  return 'none';\n};\n\nconst SortIndicator = ({\n  sorted,\n  className,\n}: {\n  sorted: false | 'asc' | 'desc';\n  className?: string;\n}) => (\n  <Icon\n    path='/icons/sprite-mage.svg'\n    name={\n      sorted === 'asc'\n        ? 'mage-datatable-sort-arrow-narrow-up'\n        : sorted === 'desc'\n          ? 'mage-datatable-sort-arrow-narrow-down'\n          : 'mage-datatable-sort-switch-vertical-02'\n    }\n    classNames={{\n      icon: className ?? dataTableSortButtonIndicator(),\n    }}\n  />\n);\n\nconst SortButton = <Data,>({\n  header,\n  className,\n}: {\n  header: Header<Data, unknown>;\n  className?: string;\n}): ReactNode => {\n  const { labels } = useDataTableContext();\n  const sorted = header.column.getIsSorted();\n\n  const getSortStatusText = () => {\n    if (sorted === 'asc') return labels.sortedAscending;\n    if (sorted === 'desc') return labels.sortedDescending;\n    return labels.activateToSort;\n  };\n\n  return (\n    <Button\n      classNames={{\n        button: cx(className ?? dataTableSortButton(), 'group'),\n      }}\n      onClick={header.column.getToggleSortingHandler()}\n      endSlot={<SortIndicator sorted={sorted} />}\n    >\n      {flexRender(header.column.columnDef.header, header.getContext())}\n      <VisuallyHidden>{getSortStatusText()}</VisuallyHidden>\n    </Button>\n  );\n};\n\nconst HeaderCellContent = <Data,>({\n  header,\n  sortButtonClassName,\n}: {\n  header: Header<Data, unknown>;\n  sortButtonClassName?: string;\n}): ReactNode => {\n  if (header.isPlaceholder) return null;\n\n  if (header.column.getCanSort()) {\n    return <SortButton header={header} className={sortButtonClassName} />;\n  }\n\n  return flexRender(header.column.columnDef.header, header.getContext());\n};\n\nconst HeaderCell = <Data,>({\n  header,\n  totalSize,\n  classNames,\n}: {\n  header: Header<Data, unknown>;\n  totalSize: number;\n  classNames?: Pick<DataTableClassNames, 'sortButton'>;\n}): ReactNode => {\n  const canSort = header.column.getCanSort();\n  const sorted = header.column.getIsSorted();\n  const columnMeta = header.column.columnDef.meta as\n    | DataTableColumnMeta\n    | undefined;\n  const width =\n    totalSize > 0 && header.column.columnDef.size !== 150\n      ? `${(header.getSize() / totalSize) * 100}%`\n      : undefined;\n\n  return (\n    <Table.HeaderCell\n      classNames={\n        columnMeta?.classNames?.header\n          ? { th: columnMeta.classNames.header }\n          : undefined\n      }\n      scope='col'\n      style={{ width }}\n      aria-sort={canSort ? getAriaSort(sorted) : undefined}\n      data-sortable={canSort || undefined}\n      data-sort={(sorted || undefined) as string | undefined}\n    >\n      <HeaderCellContent\n        header={header}\n        sortButtonClassName={classNames?.sortButton}\n      />\n    </Table.HeaderCell>\n  );\n};\n\nexport const DataTableHeader = <Data,>({\n  headerGroups,\n  totalSize,\n  loading,\n  classNames,\n}: DataTableHeaderProps<Data>): ReactNode => (\n  <Table.Head\n    classNames={{\n      thead: cx(\n        classNames?.header ?? dataTableHeader(),\n        loading ? (classNames?.loading ?? dataTableLoading()) : undefined,\n      ),\n    }}\n    data-loading={loading || undefined}\n  >\n    {headerGroups.map((headerGroup) => (\n      <Table.Row key={headerGroup.id}>\n        {headerGroup.headers.map((header) => (\n          <HeaderCell\n            key={header.id}\n            header={header}\n            totalSize={totalSize}\n            classNames={classNames}\n          />\n        ))}\n      </Table.Row>\n    ))}\n  </Table.Head>\n);\n"],"mappings":"wkBA6BA,MAAM,EAAe,GACf,IAAW,MAAc,YACzB,IAAW,OAAe,aACvB,OAGH,GAAiB,CACrB,SACA,eAKA,EAAC,EAAA,CACC,KAAK,yBACL,KACE,IAAW,MACP,sCACA,IAAW,OACT,wCACA,yCAER,WAAY,CACV,KAAM,GAAa,GAA8B,CAClD,EACD,CAGE,GAAqB,CACzB,SACA,eAIe,CACf,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAS,EAAO,OAAO,aAAa,CAQ1C,OACE,EAAC,EAAA,CACC,WAAY,CACV,OAAQ,EAAG,GAAa,GAAqB,CAAE,QAAQ,CACxD,CACD,QAAS,EAAO,OAAO,yBAAyB,CAChD,QAAS,EAAC,EAAA,CAAsB,SAAA,CAAU,WAEzC,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAChE,EAAC,EAAA,CAAA,SAdC,IAAW,MAAc,EAAO,gBAChC,IAAW,OAAe,EAAO,iBAC9B,EAAO,eAYwB,CAAkB,CAAA,EAC/C,EAIP,GAA4B,CAChC,SACA,yBAKI,EAAO,cAAsB,KAE7B,EAAO,OAAO,YAAY,CACrB,EAAC,EAAA,CAAmB,SAAQ,UAAW,GAAuB,CAGhE,EAAW,EAAO,OAAO,UAAU,OAAQ,EAAO,YAAY,CAAC,CAGlE,GAAqB,CACzB,SACA,YACA,gBAKe,CACf,IAAM,EAAU,EAAO,OAAO,YAAY,CACpC,EAAS,EAAO,OAAO,aAAa,CACpC,EAAa,EAAO,OAAO,UAAU,KAGrC,EACJ,EAAY,GAAK,EAAO,OAAO,UAAU,OAAS,IAC9C,GAAI,EAAO,SAAS,CAAG,EAAa,IAAI,GACxC,IAAA,GAEN,OACE,EAAC,EAAM,WAAA,CACL,WACE,GAAY,YAAY,OACpB,CAAE,GAAI,EAAW,WAAW,OAAQ,CACpC,IAAA,GAEN,MAAM,MACN,MAAO,CAAE,QAAO,CAChB,YAAW,EAAU,EAAY,EAAO,CAAG,IAAA,GAC3C,gBAAe,GAAW,IAAA,GAC1B,YAAY,GAAU,IAAA,YAEtB,EAAC,EAAA,CACS,SACR,oBAAqB,GAAY,YACjC,EACe,EAIV,GAA0B,CACrC,eACA,YACA,UACA,gBAEA,EAAC,EAAM,KAAA,CACL,WAAY,CACV,MAAO,EACL,GAAY,QAAU,GAAiB,CACvC,EAAW,GAAY,SAAW,GAAkB,CAAI,IAAA,GACzD,CACF,CACD,eAAc,GAAW,IAAA,YAExB,EAAa,IAAK,GACjB,EAAC,EAAM,IAAA,CAAA,SACJ,EAAY,QAAQ,IAAK,GACxB,EAAC,EAAA,CAES,SACG,YACC,cAHP,EAAO,GAIZ,CACF,CAAA,CARY,EAAY,GAShB,CACZ,EACS"}

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

@@ -7,7 +7,8 @@ type DataTablePageSizeProps = {
   onChange: (size: number) => void;
   label?: string;
   classNames?: {
-    root?: string;
+    textInput?: string;
+    dropdown?: string;
   };
 };
 declare const DataTablePageSize: ({

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

@@ -1 +1 @@
-{"version":3,"file":"DataTablePageSize.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePageSize.tsx"],"mappings":";;;KAMY,sBAAA;EACV,KAAA;EACA,OAAA;EACA,QAAA,GAAW,IAAA;EACX,KAAA;EACA,UAAA;IACE,IAAA;EAAA;AAAA;AAAA,cAIS,iBAAA;EAAqB,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA;AAAA,GAM/B,sBAAA,KAAyB,SAAA"}
+{"version":3,"file":"DataTablePageSize.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePageSize.tsx"],"mappings":";;;KAOY,sBAAA;EACV,KAAA;EACA,OAAA;EACA,QAAA,GAAW,IAAA;EACX,KAAA;EACA,UAAA;IACE,SAAA;IACA,QAAA;EAAA;AAAA;AAAA,cAIS,iBAAA;EAAqB,KAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA;AAAA,GAM/B,sBAAA,KAAyB,SAAA"}

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

@@ -1,2 +1,2 @@
-import{useDataTableContext as e}from"./useDataTableContext.mjs";import{dataTablePageSize as t}from"@mage-ui/styled-system/recipes";import{jsx as n,jsxs as r}from"react/jsx-runtime";const i=({value:i,options:a,onChange:o,label:s,classNames:c})=>{let{labels:l}=e(),u=s??l.rowsPerPage;return r(`label`,{className:c?.root??t(),children:[n(`span`,{children:u}),n(`select`,{value:i,onChange:e=>o(Number(e.target.value)),children:a.map(e=>n(`option`,{value:e,children:e},e))})]})};export{i as DataTablePageSize};
+import{useDataTableContext as e}from"./useDataTableContext.mjs";import{Select as t}from"../../controls/dropdown/select/Select.mjs";import{dataTablePageSize as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({value:i,options:a,onChange:o,label:s,classNames:c})=>{let{labels:l}=e();return r(t,{label:s??l.rowsPerPage,options:a.map(e=>({id:String(e),value:String(e)})),defaultValue:{id:String(i),value:String(i)},onChange:e=>{e?.value&&o(Number(e.value))},clearable:!1,classNames:{target:{dropdownTextInput:c?.textInput??n()}}})};export{i as DataTablePageSize};
 //# sourceMappingURL=DataTablePageSize.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTablePageSize.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePageSize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTablePageSize } from '@mage-ui/styled-system/recipes';\n\nimport { useDataTableContext } from './useDataTableContext';\n\nexport type DataTablePageSizeProps = {\n  value: number;\n  options: number[];\n  onChange: (size: number) => void;\n  label?: string;\n  classNames?: {\n    root?: string;\n  };\n};\n\nexport const DataTablePageSize = ({\n  value,\n  options,\n  onChange,\n  label,\n  classNames,\n}: DataTablePageSizeProps): ReactNode => {\n  const { labels } = useDataTableContext();\n  const displayLabel = label ?? labels.rowsPerPage;\n\n  return (\n    <label className={classNames?.root ?? dataTablePageSize()}>\n      <span>{displayLabel}</span>\n      <select value={value} onChange={(e) => onChange(Number(e.target.value))}>\n        {options.map((size) => (\n          <option key={size} value={size}>\n            {size}\n          </option>\n        ))}\n      </select>\n    </label>\n  );\n};\n"],"mappings":"qLAgBA,MAAa,GAAqB,CAChC,QACA,UACA,WACA,QACA,gBACuC,CACvC,GAAM,CAAE,UAAW,GAAqB,CAClC,EAAe,GAAS,EAAO,YAErC,OACE,EAAC,QAAA,CAAM,UAAW,GAAY,MAAQ,GAAmB,WACvD,EAAC,OAAA,CAAA,SAAM,EAAA,CAAoB,CAC3B,EAAC,SAAA,CAAc,QAAO,SAAW,GAAM,EAAS,OAAO,EAAE,OAAO,MAAM,CAAC,UACpE,EAAQ,IAAK,GACZ,EAAC,SAAA,CAAkB,MAAO,WACvB,GADU,EAEJ,CACT,EACK,CAAA,EACH"}
+{"version":3,"file":"DataTablePageSize.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePageSize.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { dataTablePageSize } from '@mage-ui/styled-system/recipes';\nimport { Select } from '@/components/controls/dropdown/select/Select';\n\nimport { useDataTableContext } from './useDataTableContext';\n\nexport type DataTablePageSizeProps = {\n  value: number;\n  options: number[];\n  onChange: (size: number) => void;\n  label?: string;\n  classNames?: {\n    textInput?: string;\n    dropdown?: string;\n  };\n};\n\nexport const DataTablePageSize = ({\n  value,\n  options,\n  onChange,\n  label,\n  classNames,\n}: DataTablePageSizeProps): ReactNode => {\n  const { labels } = useDataTableContext();\n  const displayLabel = label ?? labels.rowsPerPage;\n\n  return (\n    <Select\n      label={displayLabel}\n      options={options.map((size) => ({\n        id: String(size),\n        value: String(size),\n      }))}\n      defaultValue={{ id: String(value), value: String(value) }}\n      onChange={(val) => {\n        if (val?.value) {\n          onChange(Number(val.value));\n        }\n      }}\n      clearable={false}\n      classNames={{\n        target: {\n          dropdownTextInput: classNames?.textInput ?? dataTablePageSize(),\n        },\n      }}\n    />\n  );\n};\n"],"mappings":"8OAkBA,MAAa,GAAqB,CAChC,QACA,UACA,WACA,QACA,gBACuC,CACvC,GAAM,CAAE,UAAW,GAAqB,CAGxC,OACE,EAAC,EAAA,CACC,MAJiB,GAAS,EAAO,YAKjC,QAAS,EAAQ,IAAK,IAAU,CAC9B,GAAI,OAAO,EAAK,CAChB,MAAO,OAAO,EAAK,CACpB,EAAE,CACH,aAAc,CAAE,GAAI,OAAO,EAAM,CAAE,MAAO,OAAO,EAAM,CAAE,CACzD,SAAW,GAAQ,CACb,GAAK,OACP,EAAS,OAAO,EAAI,MAAM,CAAC,EAG/B,UAAW,GACX,WAAY,CACV,OAAQ,CACN,kBAAmB,GAAY,WAAa,GAAmB,CAChE,CACF,EACD"}

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

@@ -1,2 +1,2 @@
-import{useDataTableContext as e}from"./useDataTableContext.mjs";import{Pagination as t}from"../../navigations/pagination/Pagination.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dataTablePagination as r,paginationWrapper as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({withEdges:s=!1,classNames:c})=>{let{pagination:l}=e();return l?a(`div`,{className:c?.root??r(),children:o(t.Root,{classNames:c?.pagination,total:l.pageCount,value:l.currentPage,onChange:e=>{l.onChange(t=>({...t,pageIndex:e-1}))},children:[s&&a(t.First,{}),o(`div`,{className:n(c?.paginationWrapper??i(),`group`),children:[a(t.Previous,{}),a(t.Items,{}),a(t.Next,{})]}),s&&a(t.Last,{})]})}):null};export{s as DataTablePagination};
+import{useDataTableContext as e}from"./useDataTableContext.mjs";import{Pagination as t}from"../../navigations/pagination/Pagination.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dataTablePagination as r,paginationWrapper as i}from"@mage-ui/styled-system/recipes";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({withEdges:s=!1,classNames:c})=>{let{pagination:l}=e();return l?a(`div`,{className:c?.root??r(),children:o(t.Root,{classNames:c?.pagination,total:l.pageCount,value:l.currentPage,onChange:e=>{l.onChange(t=>({...t,pageIndex:e-1}))},children:[s&&a(t.First,{"aria-label":`First page`}),o(`div`,{className:n(c?.paginationWrapper??i(),`group`),children:[a(t.Previous,{"aria-label":`Previous page`}),a(t.Items,{}),a(t.Next,{"aria-label":`Next page`})]}),s&&a(t.Last,{"aria-label":`Last page`})]})}):null};export{s as DataTablePagination};
 //# sourceMappingURL=DataTablePagination.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePagination.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dataTablePagination,\n  paginationWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport {\n  Pagination,\n  type PaginationClassNames,\n} from '../../navigations/pagination/Pagination';\nimport { useDataTableContext } from './useDataTableContext';\n\nexport type DataTablePaginationProps = {\n  withEdges?: boolean;\n  classNames?: {\n    root?: string;\n    pagination?: PaginationClassNames;\n    paginationWrapper?: string;\n  };\n};\n\nexport const DataTablePagination = ({\n  withEdges = false,\n  classNames,\n}: DataTablePaginationProps): ReactNode => {\n  const { pagination } = useDataTableContext();\n\n  if (!pagination) {\n    return null;\n  }\n\n  return (\n    <div className={classNames?.root ?? dataTablePagination()}>\n      <Pagination.Root\n        classNames={classNames?.pagination}\n        total={pagination.pageCount}\n        value={pagination.currentPage}\n        onChange={(page: number) => {\n          pagination.onChange((current) => ({\n            ...current,\n            pageIndex: page - 1,\n          }));\n        }}\n      >\n        {withEdges && <Pagination.First />}\n        <div\n          className={cx(\n            classNames?.paginationWrapper ?? paginationWrapper(),\n            'group',\n          )}\n        >\n          <Pagination.Previous />\n          <Pagination.Items />\n          <Pagination.Next />\n        </div>\n        {withEdges && <Pagination.Last />}\n      </Pagination.Root>\n    </div>\n  );\n};\n"],"mappings":"uUAuBA,MAAa,GAAuB,CAClC,YAAY,GACZ,gBACyC,CACzC,GAAM,CAAE,cAAe,GAAqB,CAM5C,OAJK,EAKH,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAqB,UACvD,EAAC,EAAW,KAAA,CACV,WAAY,GAAY,WACxB,MAAO,EAAW,UAClB,MAAO,EAAW,YAClB,SAAW,GAAiB,CAC1B,EAAW,SAAU,IAAa,CAChC,GAAG,EACH,UAAW,EAAO,EACnB,EAAE,YAGJ,GAAa,EAAC,EAAW,MAAA,EAAA,CAAQ,CAClC,EAAC,MAAA,CACC,UAAW,EACT,GAAY,mBAAqB,GAAmB,CACpD,QACD,WAED,EAAC,EAAW,SAAA,EAAA,CAAW,CACvB,EAAC,EAAW,MAAA,EAAA,CAAQ,CACpB,EAAC,EAAW,KAAA,EAAA,CAAO,GACf,CACL,GAAa,EAAC,EAAW,KAAA,EAAA,CAAO,GACjB,EACd,CA7BC"}
+{"version":3,"file":"DataTablePagination.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/DataTablePagination.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dataTablePagination,\n  paginationWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport {\n  Pagination,\n  type PaginationClassNames,\n} from '../../navigations/pagination/Pagination';\nimport { useDataTableContext } from './useDataTableContext';\n\nexport type DataTablePaginationProps = {\n  withEdges?: boolean;\n  classNames?: {\n    root?: string;\n    pagination?: PaginationClassNames;\n    paginationWrapper?: string;\n  };\n};\n\nexport const DataTablePagination = ({\n  withEdges = false,\n  classNames,\n}: DataTablePaginationProps): ReactNode => {\n  const { pagination } = useDataTableContext();\n\n  if (!pagination) {\n    return null;\n  }\n\n  return (\n    <div className={classNames?.root ?? dataTablePagination()}>\n      <Pagination.Root\n        classNames={classNames?.pagination}\n        total={pagination.pageCount}\n        value={pagination.currentPage}\n        onChange={(page: number) => {\n          pagination.onChange((current) => ({\n            ...current,\n            pageIndex: page - 1,\n          }));\n        }}\n      >\n        {/* TODO: labels for the empty controls */}\n        {withEdges && <Pagination.First aria-label='First page' />}\n        <div\n          className={cx(\n            classNames?.paginationWrapper ?? paginationWrapper(),\n            'group',\n          )}\n        >\n          <Pagination.Previous aria-label='Previous page' />\n          <Pagination.Items />\n          <Pagination.Next aria-label='Next page' />\n        </div>\n        {withEdges && <Pagination.Last aria-label='Last page' />}\n      </Pagination.Root>\n    </div>\n  );\n};\n"],"mappings":"uUAuBA,MAAa,GAAuB,CAClC,YAAY,GACZ,gBACyC,CACzC,GAAM,CAAE,cAAe,GAAqB,CAM5C,OAJK,EAKH,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAqB,UACvD,EAAC,EAAW,KAAA,CACV,WAAY,GAAY,WACxB,MAAO,EAAW,UAClB,MAAO,EAAW,YAClB,SAAW,GAAiB,CAC1B,EAAW,SAAU,IAAa,CAChC,GAAG,EACH,UAAW,EAAO,EACnB,EAAE,YAIJ,GAAa,EAAC,EAAW,MAAA,CAAM,aAAW,aAAA,CAAe,CAC1D,EAAC,MAAA,CACC,UAAW,EACT,GAAY,mBAAqB,GAAmB,CACpD,QACD,WAED,EAAC,EAAW,SAAA,CAAS,aAAW,gBAAA,CAAkB,CAClD,EAAC,EAAW,MAAA,EAAA,CAAQ,CACpB,EAAC,EAAW,KAAA,CAAK,aAAW,YAAA,CAAc,GACtC,CACL,GAAa,EAAC,EAAW,KAAA,CAAK,aAAW,YAAA,CAAc,GACxC,EACd,CA9BC"}

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

@@ -1 +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"}
+{"version":3,"file":"useDataTable.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTable.ts"],"sourcesContent":["import { useCallback, useMemo } from 'react';\n\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  type DataTableContextValue,\n  DEFAULT_DATA_TABLE_LABELS,\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":"2TA+BA,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

@@ -1,11 +1,12 @@
 import { DataTableProps } from "./DataTable.mjs";
 import * as react from "react";
+import { ReactNode } 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;
+  selectedCount: (count: ReactNode) => ReactNode;
   sortedAscending: string;
   sortedDescending: string;
   activateToSort: string;

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

@@ -1 +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"}
+{"version":3,"file":"useDataTableContext.d.mts","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTableContext.ts"],"mappings":";;;;;;KAIY,eAAA;EACV,WAAA;EACA,aAAA,GAAgB,KAAA,EAAO,SAAA,KAAc,SAAA;EACrC,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

@@ -1,2 +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};
+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

@@ -1 +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"}
+{"version":3,"file":"useDataTableContext.mjs","names":[],"sources":["../../../../src/components/data-display/datatables/useDataTableContext.ts"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react';\n\nimport type { DataTableProps } from './DataTable';\n\nexport type DataTableLabels = {\n  rowsPerPage: string;\n  selectedCount: (count: ReactNode) => ReactNode;\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,CAAC,EAAO,YAAY,CAC9C,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

@@ -26,7 +26,7 @@ import { IconSvg, IconSvgProps } from "./icons/icon-svg/IconSvg.mjs";
 import { IconWrapped, IconWrappedProps } from "./icons/icon-wrapped/IconWrapped.mjs";
 import { Indicator, IndicatorProps } from "./indicator/Indicator.mjs";
 import { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps } from "./kanban/Kanban.mjs";
-import { KanbanCard, KanbanCardProps } from "./kanban/KanbanCard.mjs";
+import { KanbanCardBase, KanbanCardBaseProps } from "./kanban/KanbanCardBase.mjs";
 import { LoaderDot, LoaderDotProps } from "./loader-dot/LoaderDot.mjs";
 import { LoaderOval, LoaderOvalProps } from "./loader-oval/LoaderOval.mjs";
 import { LogoImage, LogoImageProps } from "./logos/logo-image/LogoImage.mjs";

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

@@ -2,48 +2,40 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/data-display/kanban/Kanban.d.ts
-interface BoardItem {
+interface BoardItem<T extends object = Record<string, unknown>> {
   id: string;
   title: string;
   parentId: string | null;
   children: string[];
-  content?: {
-    description?: string;
-    priority?: string;
-    assignee?: {
-      name: string;
-      src?: string;
-      alt?: string;
-    };
-    inTop?: boolean;
-    [key: string]: unknown;
-  };
+  content?: T;
   type?: string | number;
   status?: string;
   totalChildrenCount: number;
   totalItemsCount?: number;
   isDraggable?: boolean;
 }
-interface BoardData {
-  root: BoardItem;
-  [key: string]: BoardItem;
+interface BoardData<T extends object = Record<string, unknown>> {
+  root: BoardItem<T>;
+  [key: string]: BoardItem<T>;
 }
-interface CardRenderProps {
-  data: BoardItem;
-  column: BoardItem;
+interface CardRenderProps<T extends object = Record<string, unknown>> {
+  data: BoardItem<T>;
+  column: BoardItem<T>;
   index: number;
   isDraggable: boolean;
 }
-type ConfigMap = {
+type ConfigMap<T extends object = Record<string, unknown>> = {
   [type: string]: {
-    render: (props: CardRenderProps) => ReactNode;
+    render: (props: CardRenderProps<T>) => ReactNode;
     isDraggable?: boolean;
   };
 };
-interface KanbanProps {
-  dataSource: BoardData;
-  configMap?: ConfigMap;
+interface KanbanProps<T extends object = Record<string, unknown>> {
+  dataSource: BoardData<T>;
+  configMap: ConfigMap<T>;
   onCardMove?: (move: CardMove) => void;
+  renderColumnFooter?: (column: BoardItem<T>) => ReactNode;
+  maxColumnHeight?: string | number;
   classNames?: {
     kanban?: string;
     root?: string;
@@ -61,12 +53,13 @@ interface CardMove {
   taskBelow: string | null;
   position: number;
 }
-declare const Kanban: ({
+declare const Kanban: <T extends object = Record<string, unknown>>({
   dataSource,
   configMap,
   onCardMove,
+  renderColumnFooter,
   classNames
-}: KanbanProps) => react_jsx_runtime0.JSX.Element;
+}: KanbanProps<T>) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps };
 //# sourceMappingURL=Kanban.d.mts.map

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":";;;;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"}
+{"version":3,"file":"Kanban.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/Kanban.tsx"],"mappings":";;;;UAgBiB,SAAA,oBAA6B,MAAA;EAC5C,EAAA;EACA,KAAA;EACA,QAAA;EACA,QAAA;EACA,OAAA,GAAU,CAAA;EACV,IAAA;EACA,MAAA;EACA,kBAAA;EACA,eAAA;EACA,WAAA;AAAA;AAAA,UAEe,SAAA,oBAA6B,MAAA;EAC5C,IAAA,EAAM,SAAA,CAAU,CAAA;EAAA,CACf,GAAA,WAAc,SAAA,CAAU,CAAA;AAAA;AAAA,UAEV,eAAA,oBAAmC,MAAA;EAClD,IAAA,EAAM,SAAA,CAAU,CAAA;EAChB,MAAA,EAAQ,SAAA,CAAU,CAAA;EAClB,KAAA;EACA,WAAA;AAAA;AAAA,KAGU,SAAA,oBAA6B,MAAA;EAAA,CACtC,IAAA;IACC,MAAA,GAAS,KAAA,EAAO,eAAA,CAAgB,CAAA,MAAO,SAAA;IACvC,WAAA;EAAA;AAAA;AAAA,UAIa,WAAA,oBAA+B,MAAA;EAC9C,UAAA,EAAY,SAAA,CAAU,CAAA;EACtB,SAAA,EAAW,SAAA,CAAU,CAAA;EACrB,UAAA,IAAc,IAAA,EAAM,QAAA;EACpB,kBAAA,IAAsB,MAAA,EAAQ,SAAA,CAAU,CAAA,MAAO,SAAA;EAC/C,eAAA;EACA,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,sBAA6B,MAAA;EAAyB,UAAA;EAAA,SAAA;EAAA,UAAA;EAAA,kBAAA;EAAA;AAAA,GAMhE,WAAA,CAAY,CAAA,MAAE,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,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};
+import{KanbanCardDragIndicator as e}from"./KanbanCardDragIndicator.mjs";import{KanbanColumnHeader as t}from"./KanbanColumnHeader.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{kanban as r,kanbanCardWrapper as i,kanbanCardWrapperRoot as a,kanbanColumn as o,kanbanRoot as s,kanbanWrapperColumn as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useState as u}from"react";import{Kanban as d,dropHandler as f}from"react-kanban-kit";const p=({dataSource:p,configMap:m,onCardMove:h,renderColumnFooter:g,classNames:_})=>{let[v,y]=u(p);return l(d,{dataSource:v,configMap:m,renderColumnHeader:e=>l(t,{column:e}),renderCardDragIndicator:()=>l(e,{}),renderColumnFooter:g,onCardMove:e=>{y(t=>f(e,structuredClone(t),()=>{},e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)+1}),e=>({...e,totalChildrenCount:(e.totalChildrenCount||0)-1}))),h?.(e)},rootClassName:n(_?.kanban??r(),_?.root??s(),`group`),columnWrapperClassName:()=>_?.columnWrapper??c(),columnClassName:()=>_?.column??o(),cardWrapperClassName:n(_?.cardWrapper??i(),_?.cardWrapperRoot??a())})};export{p 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  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"}
+{"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 { KanbanCardDragIndicator } from './KanbanCardDragIndicator';\nimport { KanbanColumnHeader } from './KanbanColumnHeader';\n\nexport interface BoardItem<T extends object = Record<string, unknown>> {\n  id: string;\n  title: string;\n  parentId: string | null;\n  children: string[];\n  content?: T;\n  type?: string | number;\n  status?: string;\n  totalChildrenCount: number;\n  totalItemsCount?: number;\n  isDraggable?: boolean;\n}\nexport interface BoardData<T extends object = Record<string, unknown>> {\n  root: BoardItem<T>;\n  [key: string]: BoardItem<T>;\n}\nexport interface CardRenderProps<T extends object = Record<string, unknown>> {\n  data: BoardItem<T>;\n  column: BoardItem<T>;\n  index: number;\n  isDraggable: boolean;\n}\n\nexport type ConfigMap<T extends object = Record<string, unknown>> = {\n  [type: string]: {\n    render: (props: CardRenderProps<T>) => ReactNode;\n    isDraggable?: boolean;\n  };\n};\n\nexport interface KanbanProps<T extends object = Record<string, unknown>> {\n  dataSource: BoardData<T>;\n  configMap: ConfigMap<T>;\n  onCardMove?: (move: CardMove) => void;\n  renderColumnFooter?: (column: BoardItem<T>) => ReactNode;\n  maxColumnHeight?: string | number;\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 = <T extends object = Record<string, unknown>>({\n  dataSource,\n  configMap,\n  onCardMove,\n  renderColumnFooter,\n  classNames,\n}: KanbanProps<T>) => {\n  const [board, setBoard] = useState<BoardData<T>>(dataSource);\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<T>,\n    );\n    onCardMove?.(move);\n  };\n\n  return (\n    <KanbanKit\n      dataSource={board}\n      configMap={configMap}\n      renderColumnHeader={(column) => <KanbanColumnHeader column={column} />}\n      renderCardDragIndicator={() => <KanbanCardDragIndicator />}\n      renderColumnFooter={renderColumnFooter}\n      onCardMove={handleCardMove}\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    />\n  );\n};\n"],"mappings":"+dAuEA,MAAaA,GAAsD,CACjE,aACA,YACA,aACA,qBACA,gBACoB,CACpB,GAAM,CAAC,EAAO,GAAY,EAAuB,EAAW,CAsB5D,OACE,EAACC,EAAAA,CACC,WAAY,EACD,YACX,mBAAqB,GAAW,EAAC,EAAA,CAA2B,SAAA,CAAU,CACtE,4BAA+B,EAAC,EAAA,EAAA,CAA0B,CACtC,qBACpB,WA3BoB,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,EAWhB,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,EACD"}

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

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/data-display/kanban/KanbanCardBase.d.ts
+interface KanbanCardBaseProps {
+  children?: React.ReactNode;
+  classNames?: {
+    card?: string;
+    cardRoot?: string;
+  };
+}
+declare const KanbanCardBase: ({
+  children,
+  classNames
+}: KanbanCardBaseProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+export { KanbanCardBase, KanbanCardBaseProps };
+//# sourceMappingURL=KanbanCardBase.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCardBase.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCardBase.tsx"],"mappings":";;;UAGiB,mBAAA;EACf,QAAA,GAAW,KAAA,CAAM,SAAA;EACjB,UAAA;IACE,IAAA;IACA,QAAA;EAAA;AAAA;AAAA,cAIS,cAAA;EAAkB,QAAA;EAAA;AAAA,GAG5B,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -0,0 +1,2 @@
+import{cx as e}from"@mage-ui/styled-system/css";import{kanbanCard as t,kanbanCardRoot as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({children:i,classNames:a})=>r(`div`,{className:e(a?.card??t(),a?.cardRoot??n()),children:i});export{i as KanbanCardBase};
+//# sourceMappingURL=KanbanCardBase.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KanbanCardBase.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCardBase.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport { kanbanCard, kanbanCardRoot } from '@mage-ui/styled-system/recipes';\n\nexport interface KanbanCardBaseProps {\n  children?: React.ReactNode;\n  classNames?: {\n    card?: string;\n    cardRoot?: string;\n  };\n}\n\nexport const KanbanCardBase = ({\n  children,\n  classNames,\n}: KanbanCardBaseProps) => {\n  return (\n    <div\n      className={cx(\n        classNames?.card ?? kanbanCard(),\n        classNames?.cardRoot ?? kanbanCardRoot(),\n      )}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":"wKAWA,MAAa,GAAkB,CAC7B,WACA,gBAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,MAAQ,GAAY,CAChC,GAAY,UAAY,GAAgB,CACzC,CAEA,YACG"}

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

@@ -1 +1 @@
-{"version":3,"file":"KanbanColumnHeader.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanColumnHeader.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n  kanbanColumnHeader,\n  kanbanColumnHeaderCount,\n  kanbanColumnHeaderRoot,\n  kanbanColumnHeaderTitle,\n} from '@mage-ui/styled-system/recipes';\n\nimport type { BoardItem } from './Kanban';\n\nexport interface KanbanColumnHeaderProps {\n  column: BoardItem;\n  classNames?: {\n    columnHeader?: string;\n    columnHeaderRoot?: string;\n    columnHeaderTitle?: string;\n    columnHeaderCount?: string;\n  };\n}\n\nexport const KanbanColumnHeader = ({\n  column,\n  classNames,\n}: KanbanColumnHeaderProps) => {\n  return (\n    <div\n      className={cx(\n        classNames?.columnHeader ?? kanbanColumnHeader(),\n        classNames?.columnHeaderRoot ?? kanbanColumnHeaderRoot(),\n      )}\n    >\n      <p className={classNames?.columnHeaderTitle ?? kanbanColumnHeaderTitle()}>\n        {column.title}\n      </p>\n      <span\n        className={classNames?.columnHeaderCount ?? kanbanColumnHeaderCount()}\n      >\n        {column.totalChildrenCount}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"4PAoBA,MAAa,GAAsB,CACjC,SACA,gBAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,cAAgB,GAAoB,CAChD,GAAY,kBAAoB,GAAwB,CACzD,WAED,EAAC,IAAA,CAAE,UAAW,GAAY,mBAAqB,GAAyB,UACrE,EAAO,OACN,CACJ,EAAC,OAAA,CACC,UAAW,GAAY,mBAAqB,GAAyB,UAEpE,EAAO,oBACH,CAAA,EACH"}
+{"version":3,"file":"KanbanColumnHeader.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanColumnHeader.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n  kanbanColumnHeader,\n  kanbanColumnHeaderCount,\n  kanbanColumnHeaderRoot,\n  kanbanColumnHeaderTitle,\n} from '@mage-ui/styled-system/recipes';\n\nimport type { BoardItem } from './Kanban';\n\nexport interface KanbanColumnHeaderProps {\n  column: Pick<BoardItem, 'id' | 'title' | 'totalChildrenCount'>;\n  classNames?: {\n    columnHeader?: string;\n    columnHeaderRoot?: string;\n    columnHeaderTitle?: string;\n    columnHeaderCount?: string;\n  };\n}\n\nexport const KanbanColumnHeader = ({\n  column,\n  classNames,\n}: KanbanColumnHeaderProps) => {\n  return (\n    <div\n      className={cx(\n        classNames?.columnHeader ?? kanbanColumnHeader(),\n        classNames?.columnHeaderRoot ?? kanbanColumnHeaderRoot(),\n      )}\n    >\n      <p className={classNames?.columnHeaderTitle ?? kanbanColumnHeaderTitle()}>\n        {column.title}\n      </p>\n      <span\n        className={classNames?.columnHeaderCount ?? kanbanColumnHeaderCount()}\n      >\n        {column.totalChildrenCount}\n      </span>\n    </div>\n  );\n};\n"],"mappings":"4PAoBA,MAAa,GAAsB,CACjC,SACA,gBAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,cAAgB,GAAoB,CAChD,GAAY,kBAAoB,GAAwB,CACzD,WAED,EAAC,IAAA,CAAE,UAAW,GAAY,mBAAqB,GAAyB,UACrE,EAAO,OACN,CACJ,EAAC,OAAA,CACC,UAAW,GAAY,mBAAqB,GAAyB,UAEpE,EAAO,oBACH,CAAA,EACH"}

package/dist/components/index.d.mts

@@ -46,7 +46,7 @@ import { IconSvg, IconSvgProps } from "./data-display/icons/icon-svg/IconSvg.mjs
 import { IconWrapped, IconWrappedProps } from "./data-display/icons/icon-wrapped/IconWrapped.mjs";
 import { Indicator, IndicatorProps } from "./data-display/indicator/Indicator.mjs";
 import { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps } from "./data-display/kanban/Kanban.mjs";
-import { KanbanCard, KanbanCardProps } from "./data-display/kanban/KanbanCard.mjs";
+import { KanbanCardBase, KanbanCardBaseProps } from "./data-display/kanban/KanbanCardBase.mjs";
 import { LoaderDot, LoaderDotProps } from "./data-display/loader-dot/LoaderDot.mjs";
 import { LoaderOval, LoaderOvalProps } from "./data-display/loader-oval/LoaderOval.mjs";
 import { LogoImage, LogoImageProps } from "./data-display/logos/logo-image/LogoImage.mjs";

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,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"}
+{"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,cAqBA,YAAA;;;;KAjB2B,mBAAA,KAAsB,SAAA"}

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

@@ -1 +1 @@
-{"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"}
+{"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\n// TODO: pagination datatable: buttons; pagination pages <a>\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\n// TODO: semantic markup: nav, ul, li\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":"8PAyDA,MAAaE,EAAa,CACxB,MAlBY,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,CAOJ,MAAOD,EAAkB,MACzB,SAAUA,EAAkB,SAC5B,KAAMA,EAAkB,KACxB,KAAMA,EAAkB,KACxB,MAAOA,EAAkB,MACzB,QAASA,EAAkB,QAC3B,KAAMA,EAAkB,KACzB"}

package/dist/index.d.mts

@@ -44,7 +44,7 @@ import { IconSvg, IconSvgProps } from "./components/data-display/icons/icon-svg/
 import { IconWrapped, IconWrappedProps } from "./components/data-display/icons/icon-wrapped/IconWrapped.mjs";
 import { Indicator, IndicatorProps } from "./components/data-display/indicator/Indicator.mjs";
 import { BoardData, BoardItem, CardMove, CardRenderProps, ConfigMap, Kanban, KanbanProps } from "./components/data-display/kanban/Kanban.mjs";
-import { KanbanCard, KanbanCardProps } from "./components/data-display/kanban/KanbanCard.mjs";
+import { KanbanCardBase, KanbanCardBaseProps } from "./components/data-display/kanban/KanbanCardBase.mjs";
 import { LoaderDot, LoaderDotProps } from "./components/data-display/loader-dot/LoaderDot.mjs";
 import { LoaderOval, LoaderOvalProps } from "./components/data-display/loader-oval/LoaderOval.mjs";
 import { LogoImage, LogoImageProps } from "./components/data-display/logos/logo-image/LogoImage.mjs";
@@ -83,4 +83,4 @@ import { Tooltip, TooltipProps } from "./components/overlays/tooltip/Tooltip.mjs
 import "./components/index.mjs";
 import { MageUiProvider, MageUiProviderProps } from "./providers/MageUiProvider.mjs";
 import "./providers/index.mjs";
-export { AssignedUser, AssignedUserProps, Autocomplete, AutocompleteProps, Avatar, AvatarProps, Badge, BadgeProps, BoardData, BoardItem, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarVariant, Card, CardMove, CardProps, CardRenderProps, Checkbox, CheckboxProps, ColumnDef, Combobox, ComboboxProps, ConfigMap, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableErrorState, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerProps, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Dropzone, DropzoneFiles, DropzoneFilesProps, DropzoneProps, ExpandedState, FileData, FileInput, FileInputMultiple, FileInputMultipleProps, FileInputProps, FluidGrid, FluidGridProps, Form, FormProps, Grid, GridClassNames, HorizontalDivider, HorizontalDividerProps, Icon, IconProps, IconRaw, IconRawProps, IconSvg, IconSvgProps, IconWrapped, IconWrappedProps, Indicator, IndicatorProps, Kanban, KanbanCard, KanbanCardProps, KanbanProps, LoaderDot, LoaderDotProps, LoaderOval, LoaderOvalProps, LogoImage, LogoImageProps, LogoSvg, LogoSvgProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, Modal, ModalClassNames, ModalIntent, ModalProps, ModalRegistry, ModalRegistryEntry, ModalRootProps, Modals, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RowSelectionState, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, momentLocalizer, useDataTableContext, usePasswordRules, z };
+export { AssignedUser, AssignedUserProps, Autocomplete, AutocompleteProps, Avatar, AvatarProps, Badge, BadgeProps, BoardData, BoardItem, Breadcrumbs, BreadcrumbsBarProps, BreadcrumbsProps, Button, ButtonAction, ButtonActionProps, ButtonIcon, ButtonIconProps, ButtonIconVisual, ButtonIconVisualProps, ButtonLoader, ButtonProps, ButtonVisual, ButtonVisualProps, Calendar, CalendarEvent, CalendarProps, CalendarVariant, Card, CardMove, CardProps, CardRenderProps, Checkbox, CheckboxProps, ColumnDef, Combobox, ComboboxProps, ConfigMap, DEFAULT_DATA_TABLE_LABELS, DataTable, DataTableBottomSlot, DataTableBottomSlotProps, DataTableClassNames, DataTableColumnMeta, DataTableContextProvider, DataTableContextValue, DataTableErrorState, DataTableExpansionConfig, DataTableExtraColumnConfig, DataTableFiltersConfig, DataTableLabels, DataTablePageSize, DataTablePageSizeProps, DataTablePagination, DataTablePaginationConfig, DataTablePaginationProps, DataTableProps, DataTableRecord, DataTableSearchConfig, DataTableSelectionConfig, DataTableSortingConfig, DataTableTableConfig, DataTableTopSlot, DataTableTopSlotProps, DateLocalizer, DatePicker, DatePickerProps, DescriptionList, DescriptionListClassNames, DescriptionListItemProps, DescriptionListProps, Dropzone, DropzoneFiles, DropzoneFilesProps, DropzoneProps, ExpandedState, FileData, FileInput, FileInputMultiple, FileInputMultipleProps, FileInputProps, FluidGrid, FluidGridProps, Form, FormProps, Grid, GridClassNames, HorizontalDivider, HorizontalDividerProps, Icon, IconProps, IconRaw, IconRawProps, IconSvg, IconSvgProps, IconWrapped, IconWrappedProps, Indicator, IndicatorProps, Kanban, KanbanCardBase, KanbanCardBaseProps, KanbanProps, LoaderDot, LoaderDotProps, LoaderOval, LoaderOvalProps, LogoImage, LogoImageProps, LogoSvg, LogoSvgProps, MageUiProvider, MageUiProviderProps, Menu, MenuProps, Modal, ModalClassNames, ModalIntent, ModalProps, ModalRegistry, ModalRegistryEntry, ModalRootProps, Modals, NotificationBanner, NotificationBannerIntent, NotificationBannerProps, PASSWORD_RULES, Pagination, PaginationClassNames, PaginationRootProps, PaginationState, PasswordInput, PasswordInputProps, PasswordRule, PasswordRuleDefinition, PasswordSegment, PasswordStrengthInput, PasswordStrengthInputProps, Radio, RadioProps, RemovableItem, RemovableItemProps, RowSelectionState, ScrollArea, ScrollAreaAutosize, ScrollAreaAutosizeProps, ScrollAreaClassNames, ScrollAreaProps, Select, SelectProps, Sidebar, SidebarClassNames, SidebarProps, SortingState, Table, TableBodyProps, TableCaptionProps, TableCellProps, TableClassNames, TableFootProps, TableHeadProps, TableHeaderCellProps, TableProps, TableRowProps, Tag, TagGroup, TagGroupProps, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, Toast, ToastOptions, ToastProviderProps, Tooltip, TooltipProps, UploadedFile, UploadedFileDetails, UploadedFileDetailsProps, UploadedFileProps, Virtual, VirtualItem, VirtualPadding, VirtualProps, VisuallyHidden, VisuallyHiddenProps, momentLocalizer, useDataTableContext, usePasswordRules, z };

package/dist/index.mjs

@@ -1 +1 @@
-import{Button as e}from"./components/buttons/button/Button.mjs";import{VisuallyHidden as t}from"./components/misc/visually-hidden/VisuallyHidden.mjs";import{ButtonAction as n}from"./components/buttons/button-action/ButtonAction.mjs";import{ButtonLoader as r}from"./components/buttons/button-action/ButtonLoader.mjs";import{AssignedUser as i}from"./components/data-display/assigned-user/AssignedUser.mjs";import{Avatar as a}from"./components/data-display/avatar/Avatar.mjs";import{Badge as o}from"./components/data-display/badge/Badge.mjs";import{Calendar as s,momentLocalizer as c}from"./components/data-display/calendar/Calendar.mjs";import{Virtual as l}from"./components/misc/virtual/Virtual.mjs";import{ScrollArea as u}from"./components/misc/scroll-area/ScrollArea.mjs";import{Table as d}from"./components/data-display/table/Table.mjs";import{DEFAULT_DATA_TABLE_LABELS as f,DataTableContextProvider as p,useDataTableContext as m}from"./components/data-display/datatables/useDataTableContext.mjs";import{Checkbox as h}from"./components/controls/checkbox/Checkbox.mjs";import{DataTable as g}from"./components/data-display/datatables/DataTable.mjs";import{DataTablePageSize as _}from"./components/data-display/datatables/DataTablePageSize.mjs";import{Pagination as v}from"./components/navigations/pagination/Pagination.mjs";import{DataTablePagination as y}from"./components/data-display/datatables/DataTablePagination.mjs";import{DataTableBottomSlot as b}from"./components/data-display/datatables/DataTableBottomSlot.mjs";import{DataTableErrorState as x}from"./components/data-display/datatables/DataTableErrorState.mjs";import{TextInput as S}from"./components/controls/text-input/TextInput.mjs";import{DataTableTopSlot as C}from"./components/data-display/datatables/DataTableTopSlot.mjs";import{DescriptionList as w}from"./components/data-display/description-list/DescriptionList.mjs";import{IconRaw as T}from"./components/data-display/icons/icon-raw/IconRaw.mjs";import{Icon as E}from"./components/data-display/icons/icon/Icon.mjs";import{IconSvg as D}from"./components/data-display/icons/icon-svg/IconSvg.mjs";import{IconWrapped as O}from"./components/data-display/icons/icon-wrapped/IconWrapped.mjs";import{Indicator as k}from"./components/data-display/indicator/Indicator.mjs";import{KanbanCard as A}from"./components/data-display/kanban/KanbanCard.mjs";import{Kanban as j}from"./components/data-display/kanban/Kanban.mjs";import{LoaderDot as M}from"./components/data-display/loader-dot/LoaderDot.mjs";import{LoaderOval as N}from"./components/data-display/loader-oval/LoaderOval.mjs";import{LogoImage as P}from"./components/data-display/logos/logo-image/LogoImage.mjs";import{LogoSvg as F}from"./components/data-display/logos/logo-svg/LogoSvg.mjs";import{NotificationBanner as I}from"./components/data-display/notification-banner/NotificationBanner.mjs";import{RemovableItem as L}from"./components/data-display/removable-item/RemovableItem.mjs";import{TagGroup as R}from"./components/data-display/tag-group/TagGroup.mjs";import{Tag as z}from"./components/data-display/tag/Tag.mjs";import{UploadedFile as B}from"./components/data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as V}from"./components/data-display/uploaded-file/UploadedFileDetails.mjs";import{HorizontalDivider as H}from"./components/misc/horizontal-divider/HorizontalDivider.mjs";import{ScrollAreaAutosize as U}from"./components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{ButtonIcon as W}from"./components/buttons/button-icon/ButtonIcon.mjs";import{ButtonIconVisual as G}from"./components/buttons/button-icon-visual/ButtonIconVisual.mjs";import{ButtonVisual as K}from"./components/buttons/button-visual/ButtonVisual.mjs";import{DatePicker as q}from"./components/controls/date-picker/DatePicker.mjs";import{Autocomplete as J}from"./components/controls/dropdown/autocomplete/Autocomplete.mjs";import{Combobox as Y}from"./components/controls/dropdown/combobox/Combobox.mjs";import{Select as X}from"./components/controls/dropdown/select/Select.mjs";import{Dropzone as Z}from"./components/controls/dropzone/Dropzone.mjs";import{DropzoneFiles as Q}from"./components/controls/dropzone-files/DropzoneFiles.mjs";import{FileInput as $}from"./components/controls/file-input/FileInput.mjs";import{FileInputMultiple as ee}from"./components/controls/file-input/FileInputMultiple.mjs";import{PasswordInput as te}from"./components/controls/password-input/PasswordInput.mjs";import{PasswordStrengthInput as ne}from"./components/controls/password-input/PasswordStrengthInput.mjs";import{usePasswordRules as re}from"./components/controls/password-input/usePasswordRules.mjs";import{Radio as ie}from"./components/controls/radio/Radio.mjs";import{Textarea as ae}from"./components/controls/textarea/Textarea.mjs";import{PASSWORD_RULES as oe}from"./components/forms/rules/password-rules.mjs";import{z as se}from"./components/forms/rules/zod.mjs";import{Form as ce}from"./components/forms/Form.mjs";import{Card as le}from"./components/layouts/card/Card.mjs";import{FluidGrid as ue}from"./components/layouts/fluid-grid/FluidGrid.mjs";import{Grid as de}from"./components/layouts/grid/Grid.mjs";import{Breadcrumbs as fe}from"./components/navigations/breadcrumbs/Breadcrumbs.mjs";import{Menu as pe}from"./components/navigations/menu/Menu.mjs";import{Modal as me}from"./components/overlays/modal/Modal.mjs";import{Modals as he}from"./components/overlays/modal/index.mjs";import{Toast as ge}from"./components/overlays/toast/toast.mjs";import{Tooltip as _e}from"./components/overlays/tooltip/Tooltip.mjs";import{Sidebar as ve}from"./components/navigations/sidebars/sidebar/Sidebar.mjs";import{MageUiProvider as ye}from"./providers/MageUiProvider.mjs";export{i as AssignedUser,J as Autocomplete,a as Avatar,o as Badge,fe as Breadcrumbs,e as Button,n as ButtonAction,W as ButtonIcon,G as ButtonIconVisual,r as ButtonLoader,K as ButtonVisual,s as Calendar,le as Card,h as Checkbox,Y as Combobox,f as DEFAULT_DATA_TABLE_LABELS,g as DataTable,b as DataTableBottomSlot,p as DataTableContextProvider,x as DataTableErrorState,_ as DataTablePageSize,y as DataTablePagination,C as DataTableTopSlot,q as DatePicker,w as DescriptionList,Z as Dropzone,Q as DropzoneFiles,$ as FileInput,ee as FileInputMultiple,ue as FluidGrid,ce as Form,de as Grid,H as HorizontalDivider,E as Icon,T as IconRaw,D as IconSvg,O as IconWrapped,k as Indicator,j as Kanban,A as KanbanCard,M as LoaderDot,N as LoaderOval,P as LogoImage,F as LogoSvg,ye as MageUiProvider,pe as Menu,me as Modal,he as Modals,I as NotificationBanner,oe as PASSWORD_RULES,v as Pagination,te as PasswordInput,ne as PasswordStrengthInput,ie as Radio,L as RemovableItem,u as ScrollArea,U as ScrollAreaAutosize,X as Select,ve as Sidebar,d as Table,z as Tag,R as TagGroup,S as TextInput,ae as Textarea,ge as Toast,_e as Tooltip,B as UploadedFile,V as UploadedFileDetails,l as Virtual,t as VisuallyHidden,c as momentLocalizer,m as useDataTableContext,re as usePasswordRules,se as z};
+import{Button as e}from"./components/buttons/button/Button.mjs";import{VisuallyHidden as t}from"./components/misc/visually-hidden/VisuallyHidden.mjs";import{ButtonAction as n}from"./components/buttons/button-action/ButtonAction.mjs";import{ButtonLoader as r}from"./components/buttons/button-action/ButtonLoader.mjs";import{AssignedUser as i}from"./components/data-display/assigned-user/AssignedUser.mjs";import{Avatar as a}from"./components/data-display/avatar/Avatar.mjs";import{Badge as o}from"./components/data-display/badge/Badge.mjs";import{Calendar as s,momentLocalizer as c}from"./components/data-display/calendar/Calendar.mjs";import{Virtual as l}from"./components/misc/virtual/Virtual.mjs";import{ScrollArea as u}from"./components/misc/scroll-area/ScrollArea.mjs";import{Table as d}from"./components/data-display/table/Table.mjs";import{IconRaw as f}from"./components/data-display/icons/icon-raw/IconRaw.mjs";import{Icon as p}from"./components/data-display/icons/icon/Icon.mjs";import{DEFAULT_DATA_TABLE_LABELS as m,DataTableContextProvider as h,useDataTableContext as g}from"./components/data-display/datatables/useDataTableContext.mjs";import{Checkbox as _}from"./components/controls/checkbox/Checkbox.mjs";import{DataTable as v}from"./components/data-display/datatables/DataTable.mjs";import{HorizontalDivider as y}from"./components/misc/horizontal-divider/HorizontalDivider.mjs";import{ScrollAreaAutosize as b}from"./components/misc/scroll-area-autosize/ScrollAreaAutosize.mjs";import{TextInput as x}from"./components/controls/text-input/TextInput.mjs";import{IconWrapped as S}from"./components/data-display/icons/icon-wrapped/IconWrapped.mjs";import{Select as C}from"./components/controls/dropdown/select/Select.mjs";import{DataTablePageSize as w}from"./components/data-display/datatables/DataTablePageSize.mjs";import{Pagination as T}from"./components/navigations/pagination/Pagination.mjs";import{DataTablePagination as E}from"./components/data-display/datatables/DataTablePagination.mjs";import{DataTableBottomSlot as D}from"./components/data-display/datatables/DataTableBottomSlot.mjs";import{DataTableErrorState as O}from"./components/data-display/datatables/DataTableErrorState.mjs";import{DataTableTopSlot as k}from"./components/data-display/datatables/DataTableTopSlot.mjs";import{DescriptionList as A}from"./components/data-display/description-list/DescriptionList.mjs";import{IconSvg as j}from"./components/data-display/icons/icon-svg/IconSvg.mjs";import{Indicator as M}from"./components/data-display/indicator/Indicator.mjs";import{Kanban as N}from"./components/data-display/kanban/Kanban.mjs";import{KanbanCardBase as P}from"./components/data-display/kanban/KanbanCardBase.mjs";import{LoaderDot as F}from"./components/data-display/loader-dot/LoaderDot.mjs";import{LoaderOval as I}from"./components/data-display/loader-oval/LoaderOval.mjs";import{LogoImage as L}from"./components/data-display/logos/logo-image/LogoImage.mjs";import{LogoSvg as R}from"./components/data-display/logos/logo-svg/LogoSvg.mjs";import{NotificationBanner as z}from"./components/data-display/notification-banner/NotificationBanner.mjs";import{RemovableItem as B}from"./components/data-display/removable-item/RemovableItem.mjs";import{TagGroup as V}from"./components/data-display/tag-group/TagGroup.mjs";import{Tag as H}from"./components/data-display/tag/Tag.mjs";import{UploadedFile as U}from"./components/data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as W}from"./components/data-display/uploaded-file/UploadedFileDetails.mjs";import{ButtonIcon as G}from"./components/buttons/button-icon/ButtonIcon.mjs";import{ButtonIconVisual as K}from"./components/buttons/button-icon-visual/ButtonIconVisual.mjs";import{ButtonVisual as q}from"./components/buttons/button-visual/ButtonVisual.mjs";import{DatePicker as J}from"./components/controls/date-picker/DatePicker.mjs";import{Autocomplete as Y}from"./components/controls/dropdown/autocomplete/Autocomplete.mjs";import{Combobox as X}from"./components/controls/dropdown/combobox/Combobox.mjs";import{Dropzone as Z}from"./components/controls/dropzone/Dropzone.mjs";import{DropzoneFiles as Q}from"./components/controls/dropzone-files/DropzoneFiles.mjs";import{FileInput as $}from"./components/controls/file-input/FileInput.mjs";import{FileInputMultiple as ee}from"./components/controls/file-input/FileInputMultiple.mjs";import{PasswordInput as te}from"./components/controls/password-input/PasswordInput.mjs";import{PasswordStrengthInput as ne}from"./components/controls/password-input/PasswordStrengthInput.mjs";import{usePasswordRules as re}from"./components/controls/password-input/usePasswordRules.mjs";import{Radio as ie}from"./components/controls/radio/Radio.mjs";import{Textarea as ae}from"./components/controls/textarea/Textarea.mjs";import{PASSWORD_RULES as oe}from"./components/forms/rules/password-rules.mjs";import{z as se}from"./components/forms/rules/zod.mjs";import{Form as ce}from"./components/forms/Form.mjs";import{Card as le}from"./components/layouts/card/Card.mjs";import{FluidGrid as ue}from"./components/layouts/fluid-grid/FluidGrid.mjs";import{Grid as de}from"./components/layouts/grid/Grid.mjs";import{Breadcrumbs as fe}from"./components/navigations/breadcrumbs/Breadcrumbs.mjs";import{Menu as pe}from"./components/navigations/menu/Menu.mjs";import{Modal as me}from"./components/overlays/modal/Modal.mjs";import{Modals as he}from"./components/overlays/modal/index.mjs";import{Toast as ge}from"./components/overlays/toast/toast.mjs";import{Tooltip as _e}from"./components/overlays/tooltip/Tooltip.mjs";import{Sidebar as ve}from"./components/navigations/sidebars/sidebar/Sidebar.mjs";import{MageUiProvider as ye}from"./providers/MageUiProvider.mjs";export{i as AssignedUser,Y as Autocomplete,a as Avatar,o as Badge,fe as Breadcrumbs,e as Button,n as ButtonAction,G as ButtonIcon,K as ButtonIconVisual,r as ButtonLoader,q as ButtonVisual,s as Calendar,le as Card,_ as Checkbox,X as Combobox,m as DEFAULT_DATA_TABLE_LABELS,v as DataTable,D as DataTableBottomSlot,h as DataTableContextProvider,O as DataTableErrorState,w as DataTablePageSize,E as DataTablePagination,k as DataTableTopSlot,J as DatePicker,A as DescriptionList,Z as Dropzone,Q as DropzoneFiles,$ as FileInput,ee as FileInputMultiple,ue as FluidGrid,ce as Form,de as Grid,y as HorizontalDivider,p as Icon,f as IconRaw,j as IconSvg,S as IconWrapped,M as Indicator,N as Kanban,P as KanbanCardBase,F as LoaderDot,I as LoaderOval,L as LogoImage,R as LogoSvg,ye as MageUiProvider,pe as Menu,me as Modal,he as Modals,z as NotificationBanner,oe as PASSWORD_RULES,T as Pagination,te as PasswordInput,ne as PasswordStrengthInput,ie as Radio,B as RemovableItem,u as ScrollArea,b as ScrollAreaAutosize,C as Select,ve as Sidebar,d as Table,H as Tag,V as TagGroup,x as TextInput,ae as Textarea,ge as Toast,_e as Tooltip,U as UploadedFile,W as UploadedFileDetails,l as Virtual,t as VisuallyHidden,c as momentLocalizer,g as useDataTableContext,re as usePasswordRules,se as z};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.73",
+  "version": "1.0.76",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,8 +25,8 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
-    "@mage-ui/styled-system": "1.0.8",
-    "@mage-ui/preset": "1.0.73"
+    "@mage-ui/preset": "1.0.76",
+    "@mage-ui/styled-system": "1.0.8"
   },
   "peerDependencies": {
     "@ebay/nice-modal-react": "^1.2.13",

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

@@ -1,25 +0,0 @@
-import { AvatarProps } from "../avatar/Avatar.mjs";
-import { BadgeProps } from "../badge/Badge.mjs";
-import { BoardItem } from "./Kanban.mjs";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/components/data-display/kanban/KanbanCard.d.ts
-interface KanbanCardProps {
-  data: BoardItem;
-  classNames?: {
-    card?: string;
-    cardRoot?: string;
-    cardTitle?: string;
-    cardDescription?: string;
-    cardSection?: string;
-    avatar?: AvatarProps['classNames'];
-    badge?: BadgeProps['classNames'];
-  };
-}
-declare const KanbanCard: ({
-  data,
-  classNames
-}: KanbanCardProps) => react_jsx_runtime0.JSX.Element;
-//#endregion
-export { KanbanCard, KanbanCardProps };
-//# sourceMappingURL=KanbanCard.d.mts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"KanbanCard.d.mts","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCard.tsx"],"mappings":";;;;;;UAsBiB,eAAA;EACf,IAAA,EAAM,SAAA;EACN,UAAA;IACE,IAAA;IACA,QAAA;IACA,SAAA;IACA,eAAA;IACA,WAAA;IACA,MAAA,GAAS,WAAA;IACT,KAAA,GAAQ,UAAA;EAAA;AAAA;AAAA,cAIC,UAAA;EAAc,IAAA;EAAA;AAAA,GAAsB,eAAA,KAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

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

@@ -1,2 +0,0 @@
-import{Avatar as e}from"../avatar/Avatar.mjs";import{Badge as t}from"../badge/Badge.mjs";import{getPriorityColor as n}from"./kanbanUtils.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{kanbanCard as i,kanbanCardAvatar as a,kanbanCardAvatarImage as o,kanbanCardAvatarPlaceholder as s,kanbanCardAvatarRoot as c,kanbanCardBadge as l,kanbanCardBadgeLabel as u,kanbanCardBadgeRoot as d,kanbanCardBadgeSection as f,kanbanCardDescription as p,kanbanCardRoot as m,kanbanCardSection as h,kanbanCardTitle as g}from"@mage-ui/styled-system/recipes";import{jsx as _,jsxs as v}from"react/jsx-runtime";const y=({data:y,classNames:b})=>v(`div`,{className:r(b?.card??i(),b?.cardRoot??m()),children:[_(`p`,{className:r(b?.cardTitle??g()),children:y.title}),y.content?.description&&_(`p`,{className:r(b?.cardDescription??p()),children:y.content.description}),v(`div`,{className:b?.cardSection??h(),children:[y.content?.assignee?.name&&_(e,{name:y.content?.assignee?.name,src:y.content?.assignee?.src,alt:y.content?.assignee?.alt,classNames:{avatar:b?.avatar?.avatar??a(),root:b?.avatar?.root??c(),image:b?.avatar?.image??o(),placeholder:b?.avatar?.placeholder??s()}}),y.content?.priority&&_(t,{classNames:{badge:b?.badge?.badge??l(),root:b?.badge?.root??d({priority:n(y.content?.priority)}),section:b?.badge?.section??f(),label:b?.badge?.label??u()},children:y.content?.priority})]})]});export{y as KanbanCard};
-//# sourceMappingURL=KanbanCard.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"KanbanCard.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCard.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n  kanbanCard,\n  kanbanCardAvatar,\n  kanbanCardAvatarImage,\n  kanbanCardAvatarPlaceholder,\n  kanbanCardAvatarRoot,\n  kanbanCardBadge,\n  kanbanCardBadgeLabel,\n  kanbanCardBadgeRoot,\n  kanbanCardBadgeSection,\n  kanbanCardDescription,\n  kanbanCardRoot,\n  kanbanCardSection,\n  kanbanCardTitle,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Avatar, type AvatarProps } from '../avatar/Avatar';\nimport { Badge, type BadgeProps } from '../badge/Badge';\nimport type { BoardItem } from './Kanban';\nimport { getPriorityColor } from './kanbanUtils';\n\nexport interface KanbanCardProps {\n  data: BoardItem;\n  classNames?: {\n    card?: string;\n    cardRoot?: string;\n    cardTitle?: string;\n    cardDescription?: string;\n    cardSection?: string;\n    avatar?: AvatarProps['classNames'];\n    badge?: BadgeProps['classNames'];\n  };\n}\n\nexport const KanbanCard = ({ data, classNames }: KanbanCardProps) => {\n  return (\n    <div\n      className={cx(\n        classNames?.card ?? kanbanCard(),\n        classNames?.cardRoot ?? kanbanCardRoot(),\n      )}\n    >\n      <p className={cx(classNames?.cardTitle ?? kanbanCardTitle())}>\n        {data.title}\n      </p>\n      {data.content?.description && (\n        <p\n          className={cx(classNames?.cardDescription ?? kanbanCardDescription())}\n        >\n          {data.content.description}\n        </p>\n      )}\n      <div className={classNames?.cardSection ?? kanbanCardSection()}>\n        {data.content?.assignee?.name && (\n          <Avatar\n            name={data.content?.assignee?.name}\n            src={data.content?.assignee?.src}\n            alt={data.content?.assignee?.alt}\n            classNames={{\n              avatar: classNames?.avatar?.avatar ?? kanbanCardAvatar(),\n              root: classNames?.avatar?.root ?? kanbanCardAvatarRoot(),\n              image: classNames?.avatar?.image ?? kanbanCardAvatarImage(),\n              placeholder:\n                classNames?.avatar?.placeholder ??\n                kanbanCardAvatarPlaceholder(),\n            }}\n          />\n        )}\n        {data.content?.priority && (\n          <Badge\n            classNames={{\n              badge: classNames?.badge?.badge ?? kanbanCardBadge(),\n              root:\n                classNames?.badge?.root ??\n                kanbanCardBadgeRoot({\n                  priority: getPriorityColor(data.content?.priority),\n                }),\n              section: classNames?.badge?.section ?? kanbanCardBadgeSection(),\n              label: classNames?.badge?.label ?? kanbanCardBadgeLabel(),\n            }}\n          >\n            {data.content?.priority}\n          </Badge>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"mappings":"ulBAmCA,MAAa,GAAc,CAAE,OAAM,gBAE/B,EAAC,MAAA,CACC,UAAW,EACT,GAAY,MAAQ,GAAY,CAChC,GAAY,UAAY,GAAgB,CACzC,WAED,EAAC,IAAA,CAAE,UAAW,EAAG,GAAY,WAAa,GAAiB,CAAC,UACzD,EAAK,OACJ,CACH,EAAK,SAAS,aACb,EAAC,IAAA,CACC,UAAW,EAAG,GAAY,iBAAmB,GAAuB,CAAC,UAEpE,EAAK,QAAQ,aACZ,CAEN,EAAC,MAAA,CAAI,UAAW,GAAY,aAAe,GAAmB,WAC3D,EAAK,SAAS,UAAU,MACvB,EAAC,EAAA,CACC,KAAM,EAAK,SAAS,UAAU,KAC9B,IAAK,EAAK,SAAS,UAAU,IAC7B,IAAK,EAAK,SAAS,UAAU,IAC7B,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAkB,CACxD,KAAM,GAAY,QAAQ,MAAQ,GAAsB,CACxD,MAAO,GAAY,QAAQ,OAAS,GAAuB,CAC3D,YACE,GAAY,QAAQ,aACpB,GAA6B,CAChC,EACD,CAEH,EAAK,SAAS,UACb,EAAC,EAAA,CACC,WAAY,CACV,MAAO,GAAY,OAAO,OAAS,GAAiB,CACpD,KACE,GAAY,OAAO,MACnB,EAAoB,CAClB,SAAU,EAAiB,EAAK,SAAS,SAAS,CACnD,CAAC,CACJ,QAAS,GAAY,OAAO,SAAW,GAAwB,CAC/D,MAAO,GAAY,OAAO,OAAS,GAAsB,CAC1D,UAEA,EAAK,SAAS,UACT,CAAA,EAEN,GACF"}

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

@@ -1,2 +0,0 @@
-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/kanban/KanbanCardAdder.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"KanbanCardAdder.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanCardAdder.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\nimport {\n  kanbanCardAdder,\n  kanbanCardAdderButtonAdd,\n  kanbanCardAdderButtonAddInner,\n  kanbanCardAdderButtonAddLabel,\n  kanbanCardAdderButtonAddRoot,\n  kanbanCardAdderButtonAddSection,\n  kanbanCardAdderButtonCancel,\n  kanbanCardAdderButtonCancelInner,\n  kanbanCardAdderButtonCancelLabel,\n  kanbanCardAdderButtonCancelRoot,\n  kanbanCardAdderButtonCancelSection,\n  kanbanCardAdderButtonWrapper,\n  kanbanCardAdderRoot,\n  kanbanCardAdderTextInput,\n  kanbanCardAdderTextInputDescription,\n  kanbanCardAdderTextInputError,\n  kanbanCardAdderTextInputInput,\n  kanbanCardAdderTextInputLabel,\n  kanbanCardAdderTextInputRequired,\n  kanbanCardAdderTextInputRoot,\n  kanbanCardAdderTextInputSection,\n  kanbanCardAdderTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { Button, type ButtonProps } from '../../buttons/button/Button';\nimport {\n  TextInput,\n  type TextInputProps,\n} from '../../controls/text-input/TextInput';\nimport type { BoardData } from './Kanban';\nimport { addCard, removeCardPlaceholder } from './kanbanUtils';\n\nexport interface KanbanCardAdderProps {\n  columnId: string;\n  dataSource: BoardData;\n  setDataSource: (dataSource: BoardData) => void;\n  inTop: boolean;\n  inputLabel?: string;\n  inputPlaceholder?: string;\n  addLabel?: string;\n  cancelLabel?: string;\n  classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {\n    cardAdder?: string;\n    textInput?: string;\n    buttonWrapper?: string;\n    addButton?: ButtonProps['classNames'];\n    cancelButton?: ButtonProps['classNames'];\n  };\n}\n\nexport const KanbanCardAdder = ({\n  columnId,\n  dataSource,\n  setDataSource,\n  inTop,\n  inputLabel = 'Task Title',\n  inputPlaceholder = 'Enter task title',\n  addLabel = 'Add Task',\n  cancelLabel = 'Cancel',\n  classNames,\n}: KanbanCardAdderProps) => {\n  const [newCardTitle, setNewCardTitle] = useState('');\n\n  const removeCardPlaceholderHandler = (id: string) => {\n    setDataSource(removeCardPlaceholder(id, dataSource));\n  };\n\n  const addCardHandler = (id: string, title: string) => {\n    if (!title.trim()) return;\n    setDataSource(addCard(id, dataSource, title, inTop));\n  };\n\n  return (\n    <div\n      className={cx(\n        classNames?.cardAdder ?? kanbanCardAdder(),\n        classNames?.root ?? kanbanCardAdderRoot(),\n      )}\n    >\n      <TextInput\n        label={inputLabel}\n        value={newCardTitle}\n        onChange={(e) => setNewCardTitle(e.currentTarget.value)}\n        placeholder={inputPlaceholder}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            addCardHandler(columnId, newCardTitle);\n          } else if (e.key === 'Escape') {\n            removeCardPlaceholderHandler(columnId);\n          }\n        }}\n        classNames={{\n          textInput: classNames?.textInput ?? kanbanCardAdderTextInput(),\n          root: classNames?.root ?? kanbanCardAdderTextInputRoot(),\n          label:\n            classNames?.label ??\n            cx(kanbanCardAdderTextInputLabel(), visuallyHidden()),\n          description:\n            classNames?.description ?? kanbanCardAdderTextInputDescription(),\n          error: classNames?.error ?? kanbanCardAdderTextInputError(),\n          wrapper: classNames?.wrapper ?? kanbanCardAdderTextInputWrapper(),\n          input: classNames?.input ?? kanbanCardAdderTextInputInput(),\n          section: classNames?.section ?? kanbanCardAdderTextInputSection(),\n          required: classNames?.required ?? kanbanCardAdderTextInputRequired(),\n        }}\n      />\n      <div\n        className={classNames?.buttonWrapper ?? kanbanCardAdderButtonWrapper()}\n      >\n        <Button\n          type='button'\n          onClick={() => removeCardPlaceholderHandler(columnId)}\n          classNames={{\n            button:\n              classNames?.cancelButton?.button ?? kanbanCardAdderButtonCancel(),\n            root:\n              classNames?.cancelButton?.root ??\n              kanbanCardAdderButtonCancelRoot(),\n            inner:\n              classNames?.cancelButton?.inner ??\n              kanbanCardAdderButtonCancelInner(),\n            label:\n              classNames?.cancelButton?.label ??\n              kanbanCardAdderButtonCancelLabel(),\n            section:\n              classNames?.cancelButton?.section ??\n              kanbanCardAdderButtonCancelSection(),\n          }}\n        >\n          {cancelLabel}\n        </Button>\n        <Button\n          type='button'\n          onClick={() => addCardHandler(columnId, newCardTitle)}\n          classNames={{\n            button: classNames?.addButton?.button ?? kanbanCardAdderButtonAdd(),\n            root: classNames?.addButton?.root ?? kanbanCardAdderButtonAddRoot(),\n            inner:\n              classNames?.addButton?.inner ?? kanbanCardAdderButtonAddInner(),\n            label:\n              classNames?.addButton?.label ?? kanbanCardAdderButtonAddLabel(),\n            section:\n              classNames?.addButton?.section ??\n              kanbanCardAdderButtonAddSection(),\n          }}\n        >\n          {addLabel}\n        </Button>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"2qCAuDA,MAAa,GAAmB,CAC9B,WACA,aACA,gBACA,QACA,aAAa,aACb,mBAAmB,mBACnB,WAAW,WACX,cAAc,SACd,gBAC0B,CAC1B,GAAM,CAAC,EAAc,GAAmB,EAAS,GAAG,CAE9C,EAAgC,GAAe,CACnD,EAAc,EAAsB,EAAI,EAAW,CAAC,EAGhD,GAAkB,EAAY,IAAkB,CAC/C,EAAM,MAAM,EACjB,EAAc,EAAQ,EAAI,EAAY,EAAO,EAAM,CAAC,EAGtD,OACE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,WAAa,GAAiB,CAC1C,GAAY,MAAQ,GAAqB,CAC1C,WAED,EAAC,EAAA,CACC,MAAO,EACP,MAAO,EACP,SAAW,GAAM,EAAgB,EAAE,cAAc,MAAM,CACvD,YAAa,EACb,UAAY,GAAM,CACZ,EAAE,MAAQ,QACZ,EAAe,EAAU,EAAa,CAC7B,EAAE,MAAQ,UACnB,EAA6B,EAAS,EAG1C,WAAY,CACV,UAAW,GAAY,WAAa,GAA0B,CAC9D,KAAM,GAAY,MAAQ,GAA8B,CACxD,MACE,GAAY,OACZ,EAAG,GAA+B,CAAE,GAAgB,CAAC,CACvD,YACE,GAAY,aAAe,GAAqC,CAClE,MAAO,GAAY,OAAS,GAA+B,CAC3D,QAAS,GAAY,SAAW,GAAiC,CACjE,MAAO,GAAY,OAAS,GAA+B,CAC3D,QAAS,GAAY,SAAW,GAAiC,CACjE,SAAU,GAAY,UAAY,GAAkC,CACrE,EACD,CACF,EAAC,MAAA,CACC,UAAW,GAAY,eAAiB,GAA8B,WAEtE,EAAC,EAAA,CACC,KAAK,SACL,YAAe,EAA6B,EAAS,CACrD,WAAY,CACV,OACE,GAAY,cAAc,QAAU,GAA6B,CACnE,KACE,GAAY,cAAc,MAC1B,GAAiC,CACnC,MACE,GAAY,cAAc,OAC1B,GAAkC,CACpC,MACE,GAAY,cAAc,OAC1B,GAAkC,CACpC,QACE,GAAY,cAAc,SAC1B,GAAoC,CACvC,UAEA,GACM,CACT,EAAC,EAAA,CACC,KAAK,SACL,YAAe,EAAe,EAAU,EAAa,CACrD,WAAY,CACV,OAAQ,GAAY,WAAW,QAAU,GAA0B,CACnE,KAAM,GAAY,WAAW,MAAQ,GAA8B,CACnE,MACE,GAAY,WAAW,OAAS,GAA+B,CACjE,MACE,GAAY,WAAW,OAAS,GAA+B,CACjE,QACE,GAAY,WAAW,SACvB,GAAiC,CACpC,UAEA,GACM,CAAA,EACL,CAAA,EACF"}

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

@@ -1,2 +0,0 @@
-import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{kanbanListFooter as n,kanbanListFooterButtonIcon as r,kanbanListFooterButtonIconIcon as i,kanbanListFooterButtonIconIconRaw as a,kanbanListFooterButtonIconIconRawRoot as o,kanbanListFooterButtonIconRoot as s,kanbanListFooterRoot as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";const u=({onAddTask:u,buttonText:d=`Add task`,classNames:f})=>l(`div`,{className:t(f?.listFooter??n(),f?.listFooterRoot??c()),children:l(e,{onClick:u,label:d,name:`plus`,path:`/icons/sprite-theme.svg`,classNames:{buttonIcon:f?.buttonIcon?.buttonIcon??r(),root:f?.buttonIcon?.root??s(),icon:f?.buttonIcon?.icon??i(),iconRaw:{iconRaw:f?.buttonIcon?.iconRaw?.iconRaw??a(),root:f?.buttonIcon?.iconRaw?.root??o()}}})});export{u as KanbanListFooter};
-//# sourceMappingURL=KanbanListFooter.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"KanbanListFooter.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/KanbanListFooter.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n  kanbanListFooter,\n  kanbanListFooterButtonIcon,\n  kanbanListFooterButtonIconIcon,\n  kanbanListFooterButtonIconIconRaw,\n  kanbanListFooterButtonIconIconRawRoot,\n  kanbanListFooterButtonIconRoot,\n  kanbanListFooterRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { ButtonIcon } from '@/components/buttons';\n\nexport interface KanbanListFooterProps {\n  onAddTask?: () => void;\n  buttonText?: string;\n  classNames?: {\n    listFooter?: string;\n    listFooterRoot?: string;\n    buttonIcon?: {\n      buttonIcon?: string;\n      root?: string;\n      icon?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n  };\n}\n\nexport const KanbanListFooter = ({\n  onAddTask,\n  buttonText = 'Add task',\n  classNames,\n}: KanbanListFooterProps) => {\n  return (\n    <div\n      className={cx(\n        classNames?.listFooter ?? kanbanListFooter(),\n        classNames?.listFooterRoot ?? kanbanListFooterRoot(),\n      )}\n    >\n      <ButtonIcon\n        onClick={onAddTask}\n        label={buttonText}\n        name='plus'\n        path='/icons/sprite-theme.svg'\n        classNames={{\n          buttonIcon:\n            classNames?.buttonIcon?.buttonIcon ?? kanbanListFooterButtonIcon(),\n          root:\n            classNames?.buttonIcon?.root ?? kanbanListFooterButtonIconRoot(),\n          icon:\n            classNames?.buttonIcon?.icon ?? kanbanListFooterButtonIconIcon(),\n          iconRaw: {\n            iconRaw:\n              classNames?.buttonIcon?.iconRaw?.iconRaw ??\n              kanbanListFooterButtonIconIconRaw(),\n            root:\n              classNames?.buttonIcon?.iconRaw?.root ??\n              kanbanListFooterButtonIconIconRawRoot(),\n          },\n        }}\n      />\n    </div>\n  );\n};\n"],"mappings":"obA8BA,MAAa,GAAoB,CAC/B,YACA,aAAa,WACb,gBAGE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,YAAc,GAAkB,CAC5C,GAAY,gBAAkB,GAAsB,CACrD,UAED,EAAC,EAAA,CACC,QAAS,EACT,MAAO,EACP,KAAK,OACL,KAAK,0BACL,WAAY,CACV,WACE,GAAY,YAAY,YAAc,GAA4B,CACpE,KACE,GAAY,YAAY,MAAQ,GAAgC,CAClE,KACE,GAAY,YAAY,MAAQ,GAAgC,CAClE,QAAS,CACP,QACE,GAAY,YAAY,SAAS,SACjC,GAAmC,CACrC,KACE,GAAY,YAAY,SAAS,MACjC,GAAuC,CAC1C,CACF,EACD,EACE"}

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

@@ -1,2 +0,0 @@
-const e=e=>`add-card-${e}`,t=(t,n,r=!0)=>{let i=e(t);return n[t].children.includes(i)?n:{...n,[t]:{...n[t],totalChildrenCount:n[t].totalChildrenCount+1,children:r?[i,...n[t].children]:[...n[t].children,i]},[i]:{id:i,title:`Add card`,parentId:t,children:[],totalChildrenCount:0,type:`new-card`,isDraggable:!1,content:{inTop:r,id:i}}}},n=(t,n)=>{let r=e(t),i={...n};return delete i[r],{...i,[t]:{...n[t],totalChildrenCount:n[t].totalChildrenCount-1,children:n[t].children.filter(e=>e!==r)}}},r=(e,t,r,i=!0)=>{let a=`card-${crypto.randomUUID()}`,o=n(e,t);return{...o,[e]:{...o[e],totalChildrenCount:o[e].totalChildrenCount+1,children:i?[a,...o[e].children]:[...o[e].children,a]},[a]:{id:a,title:r,parentId:e,children:[],totalChildrenCount:0,type:`card`}}},i=e=>e;export{r as addCard,t as addCardPlaceholder,e as getAddCardPlaceholderKey,i as getPriorityColor,n as removeCardPlaceholder};
-//# sourceMappingURL=kanbanUtils.mjs.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"kanbanUtils.mjs","names":[],"sources":["../../../../src/components/data-display/kanban/kanbanUtils.ts"],"sourcesContent":["import type { KanbanCardBadgeRootVariantProps } from '@mage-ui/styled-system/recipes';\n\nimport type { BoardData } from './Kanban';\n\nexport type KanbanPriorityColor = NonNullable<\n  KanbanCardBadgeRootVariantProps['priority']\n>;\n\nexport const getAddCardPlaceholderKey = (columnId: string) =>\n  `add-card-${columnId}`;\n\nexport const addCardPlaceholder = (\n  columnId: string,\n  dataSource: BoardData,\n  inTop = true,\n): BoardData => {\n  const placeholderKey = getAddCardPlaceholderKey(columnId);\n  const alreadyExists = dataSource[columnId].children.includes(placeholderKey);\n\n  if (alreadyExists) return dataSource;\n\n  return {\n    ...dataSource,\n    [columnId]: {\n      ...dataSource[columnId],\n      totalChildrenCount: dataSource[columnId].totalChildrenCount + 1,\n      children: inTop\n        ? [placeholderKey, ...dataSource[columnId].children]\n        : [...dataSource[columnId].children, placeholderKey],\n    },\n    [placeholderKey]: {\n      id: placeholderKey,\n      title: 'Add card',\n      parentId: columnId,\n      children: [],\n      totalChildrenCount: 0,\n      type: 'new-card',\n      isDraggable: false,\n      content: {\n        inTop,\n        id: placeholderKey,\n      },\n    },\n  } as BoardData;\n};\n\nexport const removeCardPlaceholder = (\n  columnId: string,\n  dataSource: BoardData,\n): BoardData => {\n  const placeholderKey = getAddCardPlaceholderKey(columnId);\n  const updated = { ...dataSource };\n  delete updated[placeholderKey];\n  return {\n    ...updated,\n    [columnId]: {\n      ...dataSource[columnId],\n      totalChildrenCount: dataSource[columnId].totalChildrenCount - 1,\n      children: dataSource[columnId].children.filter(\n        (id) => id !== placeholderKey,\n      ),\n    },\n  };\n};\n\nexport const addCard = (\n  columnId: string,\n  dataSource: BoardData,\n  title: string,\n  inTop = true,\n): BoardData => {\n  const newCardId = `card-${crypto.randomUUID()}`;\n  const withoutPlaceholder = removeCardPlaceholder(columnId, dataSource);\n\n  return {\n    ...withoutPlaceholder,\n    [columnId]: {\n      ...withoutPlaceholder[columnId],\n      totalChildrenCount: withoutPlaceholder[columnId].totalChildrenCount + 1,\n      children: inTop\n        ? [newCardId, ...withoutPlaceholder[columnId].children]\n        : [...withoutPlaceholder[columnId].children, newCardId],\n    },\n    [newCardId]: {\n      id: newCardId,\n      title,\n      parentId: columnId,\n      children: [],\n      totalChildrenCount: 0,\n      type: 'card',\n    },\n  } as BoardData;\n};\n\nexport const getPriorityColor = (priority?: string) =>\n  priority as KanbanPriorityColor;\n"],"mappings":"AAQA,MAAa,EAA4B,GACvC,YAAY,IAED,GACX,EACA,EACA,EAAQ,KACM,CACd,IAAM,EAAiB,EAAyB,EAAS,CAKzD,OAJsB,EAAW,GAAU,SAAS,SAAS,EAAe,CAElD,EAEnB,CACL,GAAG,GACF,GAAW,CACV,GAAG,EAAW,GACd,mBAAoB,EAAW,GAAU,mBAAqB,EAC9D,SAAU,EACN,CAAC,EAAgB,GAAG,EAAW,GAAU,SAAS,CAClD,CAAC,GAAG,EAAW,GAAU,SAAU,EAAe,CACvD,EACA,GAAiB,CAChB,GAAI,EACJ,MAAO,WACP,SAAU,EACV,SAAU,EAAE,CACZ,mBAAoB,EACpB,KAAM,WACN,YAAa,GACb,QAAS,CACP,QACA,GAAI,EACL,CACF,CACF,EAGU,GACX,EACA,IACc,CACd,IAAM,EAAiB,EAAyB,EAAS,CACnD,EAAU,CAAE,GAAG,EAAY,CAEjC,OADA,OAAO,EAAQ,GACR,CACL,GAAG,GACF,GAAW,CACV,GAAG,EAAW,GACd,mBAAoB,EAAW,GAAU,mBAAqB,EAC9D,SAAU,EAAW,GAAU,SAAS,OACrC,GAAO,IAAO,EAChB,CACF,CACF,EAGU,GACX,EACA,EACA,EACA,EAAQ,KACM,CACd,IAAM,EAAY,QAAQ,OAAO,YAAY,GACvC,EAAqB,EAAsB,EAAU,EAAW,CAEtE,MAAO,CACL,GAAG,GACF,GAAW,CACV,GAAG,EAAmB,GACtB,mBAAoB,EAAmB,GAAU,mBAAqB,EACtE,SAAU,EACN,CAAC,EAAW,GAAG,EAAmB,GAAU,SAAS,CACrD,CAAC,GAAG,EAAmB,GAAU,SAAU,EAAU,CAC1D,EACA,GAAY,CACX,GAAI,EACJ,QACA,SAAU,EACV,SAAU,EAAE,CACZ,mBAAoB,EACpB,KAAM,OACP,CACF,EAGU,EAAoB,GAC/B"}