@plexui/ui 0.7.39 → 0.7.41

package/dist/es/components/DataTable/DataTable.js

@@ -52,8 +52,14 @@ export const DataTable = ({ columns, data, variant = "default", globalFilter, on
     const totalRows = table.getFilteredRowModel().rows.length;
     const hasPagination = shouldPaginate && totalRows > pageSize;
     const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1);
-    return (_jsxs("div", { className: clsx(s.DataTable, className), "data-variant": variant, "data-clickable": onRowClick ? "" : undefined, children: [_jsx("div", { className: s.TableContainer, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => (_jsx(TableHead, { children: header.isPlaceholder
-                                        ? null
-                                        : flexRender(header.column.columnDef.header, header.getContext()) }, header.id))) }, headerGroup.id))) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: visibleColumnCount, className: s.EmptyCell, children: emptyMessage }) })) : (rows.map((row) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) })] }) }), showPagination && hasPagination && _jsx(DataTablePagination, { table: table })] }));
+    return (_jsxs("div", { className: clsx(s.DataTable, className), "data-variant": variant, "data-clickable": onRowClick ? "" : undefined, children: [_jsx("div", { className: s.TableContainer, children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                    const align = header.column.columnDef.meta?.align;
+                                    return (_jsx(TableHead, { style: align ? { textAlign: align } : undefined, children: header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: rows.length === 0 ? (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: visibleColumnCount, className: s.EmptyCell, children: emptyMessage }) })) : (rows.map((row) => (_jsx(TableRow, { onClick: onRowClick ? () => onRowClick(row.original) : undefined, children: row.getVisibleCells().map((cell) => {
+                                    const align = cell.column.columnDef.meta?.align;
+                                    return (_jsx(TableCell, { style: align ? { textAlign: align } : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                }) }, row.id)))) })] }) }), showPagination && hasPagination && _jsx(DataTablePagination, { table: table })] }));
 };
 //# sourceMappingURL=DataTable.js.map

package/dist/es/components/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type OnChangeFn,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\nimport clsx from \"clsx\"\nimport { useState, type ReactNode } from \"react\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n  /** Column definitions following TanStack Table v8 ColumnDef API */\n  columns: ColumnDef<TData, unknown>[]\n  /** Data array to display */\n  data: TData[]\n  /** Visual variant\n   * - `\"default\"` — borderless table with transparent header\n   * - `\"bordered\"` — rounded border around the table with a tinted header background\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"bordered\"\n  /** External search/filter string (controlled) */\n  globalFilter?: string\n  /** Callback when global filter changes */\n  onGlobalFilterChange?: (value: string) => void\n  /** Click handler for rows */\n  onRowClick?: (row: TData) => void\n  /** Number of rows per page. Set to 0 or Infinity to disable pagination.\n   * @default 10\n   */\n  pageSize?: number\n  /** Initial sorting state */\n  initialSorting?: SortingState\n  /** Controlled column visibility */\n  columnVisibility?: VisibilityState\n  /** Callback when column visibility changes */\n  onColumnVisibilityChange?: (visibility: VisibilityState) => void\n  /** Enable row selection checkboxes\n   * @default false\n   */\n  enableRowSelection?: boolean\n  /** Controlled row selection state */\n  rowSelection?: RowSelectionState\n  /** Callback when row selection changes */\n  onRowSelectionChange?: (selection: RowSelectionState) => void\n  /** Custom row ID accessor */\n  getRowId?: (row: TData) => string\n  /** Message shown when there are no rows\n   * @default \"No results.\"\n   */\n  emptyMessage?: ReactNode\n  /** Class applied to the outermost wrapper */\n  className?: string\n  /** Whether to show pagination controls. Auto-hidden when all rows fit.\n   * @default true\n   */\n  showPagination?: boolean\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n  return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\nexport const DataTable = <TData,>({\n  columns,\n  data,\n  variant = \"default\",\n  globalFilter,\n  onGlobalFilterChange,\n  onRowClick,\n  pageSize = 10,\n  initialSorting,\n  columnVisibility,\n  onColumnVisibilityChange,\n  enableRowSelection = false,\n  rowSelection,\n  onRowSelectionChange,\n  getRowId,\n  emptyMessage = \"No results.\",\n  className,\n  showPagination = true,\n}: DataTableProps<TData>) => {\n  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n  const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n  const handleGlobalFilterChange: OnChangeFn<string> | undefined = onGlobalFilterChange\n    ? (updater) => {\n        onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? \"\"))\n      }\n    : undefined\n\n  const handleColumnVisibilityChange: OnChangeFn<VisibilityState> | undefined =\n    onColumnVisibilityChange\n      ? (updater) => {\n          onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}))\n        }\n      : undefined\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> | undefined = onRowSelectionChange\n    ? (updater) => {\n        onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}))\n      }\n    : undefined\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      globalFilter,\n      columnVisibility,\n      rowSelection,\n    },\n    ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n    onSortingChange: setSorting,\n    onGlobalFilterChange: handleGlobalFilterChange,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n    enableRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n  })\n\n  const rows = table.getRowModel().rows\n  const totalRows = table.getFilteredRowModel().rows.length\n  const hasPagination = shouldPaginate && totalRows > pageSize\n  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n  return (\n    <div\n      className={clsx(s.DataTable, className)}\n      data-variant={variant}\n      data-clickable={onRowClick ? \"\" : undefined}\n    >\n      <div className={s.TableContainer}>\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => (\n                  <TableHead key={header.id}>\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(header.column.columnDef.header, header.getContext())}\n                  </TableHead>\n                ))}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {rows.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n                  {emptyMessage}\n                </TableCell>\n              </TableRow>\n            ) : (\n              rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                >\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id}>\n                      {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      {showPagination && hasPagination && <DataTablePagination table={table} />}\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"DataTable.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,qBAAqB,EACrB,iBAAiB,EACjB,aAAa,GAQd,MAAM,uBAAuB,CAAA;AAQ9B,OAAO,IAAI,MAAM,MAAM,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AACxF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAmDtC,MAAM,cAAc,GAAG,CAAK,OAAmB,EAAE,KAAQ,EAAK,EAAE;IAC9D,OAAO,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAE,OAAyB,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAA;AACpF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,CAAS,EAChC,OAAO,EACP,IAAI,EACJ,OAAO,GAAG,SAAS,EACnB,YAAY,EACZ,oBAAoB,EACpB,UAAU,EACV,QAAQ,GAAG,EAAE,EACb,cAAc,EACd,gBAAgB,EAChB,wBAAwB,EACxB,kBAAkB,GAAG,KAAK,EAC1B,YAAY,EACZ,oBAAoB,EACpB,QAAQ,EACR,YAAY,GAAG,aAAa,EAC5B,SAAS,EACT,cAAc,GAAG,IAAI,GACC,EAAE,EAAE;IAC1B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAe,cAAc,IAAI,EAAE,CAAC,CAAA;IAE1E,MAAM,cAAc,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;IAEhE,MAAM,wBAAwB,GAAmC,oBAAoB;QACnF,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,oBAAoB,CAAC,cAAc,CAAC,OAAO,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,4BAA4B,GAChC,wBAAwB;QACtB,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,wBAAwB,CAAC,cAAc,CAAC,OAAO,EAAE,gBAAgB,IAAI,EAAE,CAAC,CAAC,CAAA;QAC3E,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEf,MAAM,wBAAwB,GAA8C,oBAAoB;QAC9F,CAAC,CAAC,CAAC,OAAO,EAAE,EAAE;YACV,oBAAoB,CAAC,cAAc,CAAC,OAAO,EAAE,YAAY,IAAI,EAAE,CAAC,CAAC,CAAA;QACnE,CAAC;QACH,CAAC,CAAC,SAAS,CAAA;IAEb,MAAM,KAAK,GAAG,aAAa,CAAC;QAC1B,IAAI;QACJ,OAAO;QACP,KAAK,EAAE;YACL,OAAO;YACP,YAAY;YACZ,gBAAgB;YAChB,YAAY;SACb;QACD,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,EAAE,UAAU,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvF,eAAe,EAAE,UAAU;QAC3B,oBAAoB,EAAE,wBAAwB;QAC9C,wBAAwB,EAAE,4BAA4B;QACtD,oBAAoB,EAAE,wBAAwB;QAC9C,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,SAAS;QACvE,kBAAkB;QAClB,eAAe,EAAE,eAAe,EAAE;QAClC,iBAAiB,EAAE,iBAAiB,EAAE;QACtC,mBAAmB,EAAE,mBAAmB,EAAE;QAC1C,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;KAC9E,CAAC,CAAA;IAEF,MAAM,IAAI,GAAG,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAA;IACrC,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,aAAa,GAAG,cAAc,IAAI,SAAS,GAAG,QAAQ,CAAA;IAC5D,MAAM,kBAAkB,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,qBAAqB,EAAE,CAAC,MAAM,EAAE,CAAC,CAAC,CAAA;IAE5E,OAAO,CACL,eACE,SAAS,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,EAAE,SAAS,CAAC,kBACzB,OAAO,oBACL,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,aAE3C,cAAK,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,MAAC,KAAK,eACJ,KAAC,WAAW,cACT,KAAK,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,WAAW,EAAE,EAAE,CAAC,CAC5C,KAAC,QAAQ,cACN,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oCAClC,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAA;oCACjD,OAAO,CACL,KAAC,SAAS,IAAiB,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YACvE,MAAM,CAAC,aAAa;4CACnB,CAAC,CAAC,IAAI;4CACN,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,CAAC,IAHrD,MAAM,CAAC,EAAE,CAIb,CACb,CAAA;gCACH,CAAC,CAAC,IAVW,WAAW,CAAC,EAAE,CAWlB,CACZ,CAAC,GACU,EACd,KAAC,SAAS,cACP,IAAI,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,CACnB,KAAC,QAAQ,cACP,KAAC,SAAS,IAAC,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,CAAC,SAAS,YAC3D,YAAY,GACH,GACH,CACZ,CAAC,CAAC,CAAC,CACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAChB,KAAC,QAAQ,IAEP,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,YAE/D,GAAG,CAAC,eAAe,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;oCAClC,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,KAAK,CAAA;oCAC/C,OAAO,CACL,KAAC,SAAS,IAAe,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,YACrE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,IAD5C,IAAI,CAAC,EAAE,CAEX,CACb,CAAA;gCACH,CAAC,CAAC,IAVG,GAAG,CAAC,EAAE,CAWF,CACZ,CAAC,CACH,GACS,IACN,GACJ,EACL,cAAc,IAAI,aAAa,IAAI,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,GAAI,IACrE,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport {\n  flexRender,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useReactTable,\n  type ColumnDef,\n  type OnChangeFn,\n  type RowData,\n  type RowSelectionState,\n  type SortingState,\n  type Updater,\n  type VisibilityState,\n} from \"@tanstack/react-table\"\n\ndeclare module \"@tanstack/react-table\" {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  interface ColumnMeta<TData extends RowData, TValue> {\n    align?: \"left\" | \"center\" | \"right\"\n  }\n}\nimport clsx from \"clsx\"\nimport { useState, type ReactNode } from \"react\"\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../Table\"\nimport { DataTablePagination } from \"./DataTablePagination\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTableProps<TData> = {\n  /** Column definitions following TanStack Table v8 ColumnDef API */\n  columns: ColumnDef<TData, unknown>[]\n  /** Data array to display */\n  data: TData[]\n  /** Visual variant\n   * - `\"default\"` — borderless table with transparent header\n   * - `\"bordered\"` — rounded border around the table with a tinted header background\n   * @default \"default\"\n   */\n  variant?: \"default\" | \"bordered\"\n  /** External search/filter string (controlled) */\n  globalFilter?: string\n  /** Callback when global filter changes */\n  onGlobalFilterChange?: (value: string) => void\n  /** Click handler for rows */\n  onRowClick?: (row: TData) => void\n  /** Number of rows per page. Set to 0 or Infinity to disable pagination.\n   * @default 10\n   */\n  pageSize?: number\n  /** Initial sorting state */\n  initialSorting?: SortingState\n  /** Controlled column visibility */\n  columnVisibility?: VisibilityState\n  /** Callback when column visibility changes */\n  onColumnVisibilityChange?: (visibility: VisibilityState) => void\n  /** Enable row selection checkboxes\n   * @default false\n   */\n  enableRowSelection?: boolean\n  /** Controlled row selection state */\n  rowSelection?: RowSelectionState\n  /** Callback when row selection changes */\n  onRowSelectionChange?: (selection: RowSelectionState) => void\n  /** Custom row ID accessor */\n  getRowId?: (row: TData) => string\n  /** Message shown when there are no rows\n   * @default \"No results.\"\n   */\n  emptyMessage?: ReactNode\n  /** Class applied to the outermost wrapper */\n  className?: string\n  /** Whether to show pagination controls. Auto-hidden when all rows fit.\n   * @default true\n   */\n  showPagination?: boolean\n}\n\nconst resolveUpdater = <T,>(updater: Updater<T>, value: T): T => {\n  return typeof updater === \"function\" ? (updater as (old: T) => T)(value) : updater\n}\n\nexport const DataTable = <TData,>({\n  columns,\n  data,\n  variant = \"default\",\n  globalFilter,\n  onGlobalFilterChange,\n  onRowClick,\n  pageSize = 10,\n  initialSorting,\n  columnVisibility,\n  onColumnVisibilityChange,\n  enableRowSelection = false,\n  rowSelection,\n  onRowSelectionChange,\n  getRowId,\n  emptyMessage = \"No results.\",\n  className,\n  showPagination = true,\n}: DataTableProps<TData>) => {\n  const [sorting, setSorting] = useState<SortingState>(initialSorting ?? [])\n\n  const shouldPaginate = Number.isFinite(pageSize) && pageSize > 0\n\n  const handleGlobalFilterChange: OnChangeFn<string> | undefined = onGlobalFilterChange\n    ? (updater) => {\n        onGlobalFilterChange(resolveUpdater(updater, globalFilter ?? \"\"))\n      }\n    : undefined\n\n  const handleColumnVisibilityChange: OnChangeFn<VisibilityState> | undefined =\n    onColumnVisibilityChange\n      ? (updater) => {\n          onColumnVisibilityChange(resolveUpdater(updater, columnVisibility ?? {}))\n        }\n      : undefined\n\n  const handleRowSelectionChange: OnChangeFn<RowSelectionState> | undefined = onRowSelectionChange\n    ? (updater) => {\n        onRowSelectionChange(resolveUpdater(updater, rowSelection ?? {}))\n      }\n    : undefined\n\n  const table = useReactTable({\n    data,\n    columns,\n    state: {\n      sorting,\n      globalFilter,\n      columnVisibility,\n      rowSelection,\n    },\n    ...(shouldPaginate ? { initialState: { pagination: { pageIndex: 0, pageSize } } } : {}),\n    onSortingChange: setSorting,\n    onGlobalFilterChange: handleGlobalFilterChange,\n    onColumnVisibilityChange: handleColumnVisibilityChange,\n    onRowSelectionChange: handleRowSelectionChange,\n    getRowId: getRowId ? (originalRow) => getRowId(originalRow) : undefined,\n    enableRowSelection,\n    getCoreRowModel: getCoreRowModel(),\n    getSortedRowModel: getSortedRowModel(),\n    getFilteredRowModel: getFilteredRowModel(),\n    ...(shouldPaginate ? { getPaginationRowModel: getPaginationRowModel() } : {}),\n  })\n\n  const rows = table.getRowModel().rows\n  const totalRows = table.getFilteredRowModel().rows.length\n  const hasPagination = shouldPaginate && totalRows > pageSize\n  const visibleColumnCount = Math.max(table.getVisibleLeafColumns().length, 1)\n\n  return (\n    <div\n      className={clsx(s.DataTable, className)}\n      data-variant={variant}\n      data-clickable={onRowClick ? \"\" : undefined}\n    >\n      <div className={s.TableContainer}>\n        <Table>\n          <TableHeader>\n            {table.getHeaderGroups().map((headerGroup) => (\n              <TableRow key={headerGroup.id}>\n                {headerGroup.headers.map((header) => {\n                  const align = header.column.columnDef.meta?.align\n                  return (\n                    <TableHead key={header.id} style={align ? { textAlign: align } : undefined}>\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(header.column.columnDef.header, header.getContext())}\n                    </TableHead>\n                  )\n                })}\n              </TableRow>\n            ))}\n          </TableHeader>\n          <TableBody>\n            {rows.length === 0 ? (\n              <TableRow>\n                <TableCell colSpan={visibleColumnCount} className={s.EmptyCell}>\n                  {emptyMessage}\n                </TableCell>\n              </TableRow>\n            ) : (\n              rows.map((row) => (\n                <TableRow\n                  key={row.id}\n                  onClick={onRowClick ? () => onRowClick(row.original) : undefined}\n                >\n                  {row.getVisibleCells().map((cell) => {\n                    const align = cell.column.columnDef.meta?.align\n                    return (\n                      <TableCell key={cell.id} style={align ? { textAlign: align } : undefined}>\n                        {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                      </TableCell>\n                    )\n                  })}\n                </TableRow>\n              ))\n            )}\n          </TableBody>\n        </Table>\n      </div>\n      {showPagination && hasPagination && <DataTablePagination table={table} />}\n    </div>\n  )\n}\n"]}

package/dist/es/components/DataTable/DataTablePagination.js

@@ -9,6 +9,6 @@ export const DataTablePagination = ({ table }) => {
     const { pageIndex, pageSize } = table.getState().pagination;
     const from = pageIndex * pageSize + 1;
     const to = Math.min((pageIndex + 1) * pageSize, totalRows);
-    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
+    return (_jsxs("div", { className: s.Pagination, children: [_jsxs("div", { className: s.PaginationLeft, children: [_jsx("span", { className: s.PaginationLabel, children: "Rows per page" }), _jsx("select", { className: s.PaginationSelect, value: pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: [10, 20, 50, 100].map((size) => (_jsx("option", { value: size, children: size }, size))) })] }), _jsxs("div", { className: s.PaginationRight, children: [_jsx("span", { className: s.PaginationInfo, children: totalRows === 0 ? "0 results" : `${from}–${to} of ${totalRows}` }), _jsxs("div", { className: s.PaginationButtons, children: [_jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: _jsx(ChevronLeftMd, {}) }), _jsx(Button, { color: "secondary", variant: "outline", size: "sm", pill: false, uniform: true, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: _jsx(ChevronRightMd, {}) })] })] })] }));
 };
 //# sourceMappingURL=DataTablePagination.js.map

package/dist/es/components/DataTable/DataTablePagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAMtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,iBACE,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,YAEnC,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,YAE/B,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {[10, 20, 50, 100].map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}
+{"version":3,"file":"DataTablePagination.js","sourceRoot":"","sources":["../../../../src/components/DataTable/DataTablePagination.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAc,MAAM,uBAAuB,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AACvD,OAAO,CAAC,MAAM,wBAAwB,CAAA;AAMtC,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAS,EAAE,KAAK,EAAmC,EAAE,EAAE;IACxF,MAAM,SAAS,GAAG,KAAK,CAAC,mBAAmB,EAAE,CAAC,IAAI,CAAC,MAAM,CAAA;IACzD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC,QAAQ,EAAE,CAAC,UAAU,CAAA;IAC3D,MAAM,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,SAAS,CAAC,CAAA;IAE1D,OAAO,CACL,eAAK,SAAS,EAAE,CAAC,CAAC,UAAU,aAC1B,eAAK,SAAS,EAAE,CAAC,CAAC,cAAc,aAC9B,eAAM,SAAS,EAAE,CAAC,CAAC,eAAe,8BAAsB,EACxD,iBACE,SAAS,EAAE,CAAC,CAAC,gBAAgB,EAC7B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,YAEzD,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAC/B,iBAAmB,KAAK,EAAE,IAAI,YAC3B,IAAI,IADM,IAAI,CAER,CACV,CAAC,GACK,IACL,EACN,eAAK,SAAS,EAAE,CAAC,CAAC,eAAe,aAC/B,eAAM,SAAS,EAAE,CAAC,CAAC,cAAc,YAC9B,SAAS,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,IAAI,EAAE,OAAO,SAAS,EAAE,GAC3D,EACP,eAAK,SAAS,EAAE,CAAC,CAAC,iBAAiB,aACjC,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,kBAAkB,EAAE,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,YAEnC,KAAC,aAAa,KAAG,GACV,EACT,KAAC,MAAM,IACL,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,KAAK,EACX,OAAO,QACP,QAAQ,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE,EACjC,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,QAAQ,EAAE,YAE/B,KAAC,cAAc,KAAG,GACX,IACL,IACF,IACF,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { type Table } from \"@tanstack/react-table\"\nimport { Button } from \"../Button\"\nimport { ChevronLeftMd, ChevronRightMd } from \"../Icon\"\nimport s from \"./DataTable.module.css\"\n\nexport type DataTablePaginationProps<TData> = {\n  table: Table<TData>\n}\n\nexport const DataTablePagination = <TData,>({ table }: DataTablePaginationProps<TData>) => {\n  const totalRows = table.getFilteredRowModel().rows.length\n  const { pageIndex, pageSize } = table.getState().pagination\n  const from = pageIndex * pageSize + 1\n  const to = Math.min((pageIndex + 1) * pageSize, totalRows)\n\n  return (\n    <div className={s.Pagination}>\n      <div className={s.PaginationLeft}>\n        <span className={s.PaginationLabel}>Rows per page</span>\n        <select\n          className={s.PaginationSelect}\n          value={pageSize}\n          onChange={(e) => table.setPageSize(Number(e.target.value))}\n        >\n          {[10, 20, 50, 100].map((size) => (\n            <option key={size} value={size}>\n              {size}\n            </option>\n          ))}\n        </select>\n      </div>\n      <div className={s.PaginationRight}>\n        <span className={s.PaginationInfo}>\n          {totalRows === 0 ? \"0 results\" : `${from}–${to} of ${totalRows}`}\n        </span>\n        <div className={s.PaginationButtons}>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanPreviousPage()}\n            onClick={() => table.previousPage()}\n          >\n            <ChevronLeftMd />\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outline\"\n            size=\"sm\"\n            pill={false}\n            uniform\n            disabled={!table.getCanNextPage()}\n            onClick={() => table.nextPage()}\n          >\n            <ChevronRightMd />\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js

@@ -7,7 +7,7 @@ import { FieldError } from "../FieldError";
 import { X } from "../Icon";
 import s from "./FloatingLabelInput.module.css";
 export const FloatingLabelInput = forwardRef(function FloatingLabelInput(props, ref) {
-    const { label, errorMessage, "invalid": invalidProp, disabled = false, readOnly = false, onClear, onAutofill, allowAutofillExtensions = false, endAdornment, className, "id": idProp, name, type = "text", value, defaultValue, onChange, onFocus, onBlur, onAnimationStart, "aria-describedby": ariaDescribedByProp, ...restProps } = props;
+    const { label, errorMessage, "invalid": invalidProp, disabled = false, readOnly = false, onClear, onAutofill, allowAutofillExtensions = false, startAdornment, endAdornment, className, "id": idProp, name, type = "text", value, defaultValue, onChange, onFocus, onBlur, onAnimationStart, "aria-describedby": ariaDescribedByProp, ...restProps } = props;
     const inputRef = useRef(null);
     const generatedId = useId();
     const inputId = idProp || `floating-label-input-${generatedId}`;
@@ -70,7 +70,7 @@ export const FloatingLabelInput = forwardRef(function FloatingLabelInput(props,
     }, [onAnimationStart, onAutofill]);
     return (_jsxs("div", { className: clsx(s.Root, className), children: [_jsxs("div", { className: clsx(s.FieldFootprint, {
                     [s.HasValue]: hasValue,
-                }), "data-focused": focused ? "" : undefined, "data-has-value": hasValue ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, onMouseDown: handleContainerMouseDown, children: [_jsx("label", { className: s.TypeableLabel, htmlFor: inputId, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: inputId, name: name, type: type, className: s.Input, value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), endAdornment && (_jsx("div", { className: s.EndAdornment, children: endAdornment })), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.ClearButton, onClick: onClear, children: _jsx(X, {}) }))] }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
+                }), "data-focused": focused ? "" : undefined, "data-has-value": hasValue ? "" : undefined, "data-invalid": invalid ? "" : undefined, "data-disabled": disabled ? "" : undefined, "data-readonly": readOnly ? "" : undefined, onMouseDown: handleContainerMouseDown, children: [_jsx("label", { className: s.TypeableLabel, htmlFor: inputId, children: _jsx("div", { className: s.LabelPositioner, children: _jsx("div", { className: s.LabelText, children: label }) }) }), startAdornment && (_jsx("div", { className: s.StartAdornment, children: startAdornment })), _jsx("input", { ...restProps, ref: mergeRefs([ref, inputRef]), id: inputId, name: name, type: type, className: s.Input, value: value, defaultValue: defaultValue, disabled: disabled, readOnly: readOnly, "aria-invalid": invalid ? true : undefined, "aria-describedby": ariaDescribedBy, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onAnimationStart: handleAnimationStart, "data-lpignore": allowAutofillExtensions ? undefined : true, "data-1p-ignore": allowAutofillExtensions ? undefined : true }), endAdornment && (_jsx("div", { className: s.EndAdornment, children: endAdornment })), showClearButton && (_jsx("button", { type: "button", "aria-label": "Clear input", className: s.ClearButton, onClick: onClear, children: _jsx(X, {}) }))] }), errorMessage && (_jsx(FieldError, { id: errorId, className: s.ErrorMessage, children: errorMessage }))] }));
 });
 FloatingLabelInput.displayName = "FloatingLabelInput";
 //# sourceMappingURL=FloatingLabelInput.js.map

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { FieldError } from \"../FieldError\"\nimport { X } from \"../Icon\"\n\nimport s from \"./FloatingLabelInput.module.css\"\n\nexport type FloatingLabelInputProps = {\n  /**\n   * Label text for the floating label\n   */\n  label: string\n  /**\n   * Error message to display below the input\n   */\n  errorMessage?: string\n  /**\n   * Mark the input as invalid\n   * @default false (or true if errorMessage is provided)\n   */\n  invalid?: boolean\n  /**\n   * Disables the input visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Makes the input read-only\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Callback invoked when the clear button is clicked\n   */\n  onClear?: () => void\n  /**\n   * Callback invoked when the input is autofilled by the browser\n   */\n  onAutofill?: () => void\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Content rendered after the input, before the clear button.\n   * Useful for toggle buttons (e.g. password visibility), icons, or other interactive elements.\n   */\n  endAdornment?: React.ReactNode\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nexport const FloatingLabelInput = forwardRef<HTMLInputElement, FloatingLabelInputProps>(\n  function FloatingLabelInput(props, ref) {\n    const {\n      label,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      readOnly = false,\n      onClear,\n      onAutofill,\n      allowAutofillExtensions = false,\n      endAdornment,\n      className,\n      \"id\": idProp,\n      name,\n      type = \"text\",\n      value,\n      defaultValue,\n      onChange,\n      onFocus,\n      onBlur,\n      onAnimationStart,\n      \"aria-describedby\": ariaDescribedByProp,\n      ...restProps\n    } = props\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const generatedId = useId()\n    const inputId = idProp || `floating-label-input-${generatedId}`\n    const errorId = `${inputId}-error`\n\n    const [focused, setFocused] = useState(false)\n    const [hasValue, setHasValue] = useState(() => {\n      return !!(value !== undefined ? value : defaultValue)\n    })\n\n    // Sync hasValue with controlled value prop\n    useEffect(() => {\n      if (value !== undefined) {\n        setHasValue(!!value)\n      }\n    }, [value])\n\n    // Determine invalid state from prop or presence of errorMessage\n    const invalid = invalidProp ?? !!errorMessage\n\n    // Determine if clear button should be shown\n    const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n\n    // Merge aria-describedby with error id\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    // Handle clicks on the container to focus the input\n    const handleContainerMouseDown = useCallback((evt: React.MouseEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      if (input.contains(evt.target)) {\n        return\n      }\n      if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n        return\n      }\n      evt.preventDefault()\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n      const length = input.value.length\n      input.setSelectionRange(length, length)\n    }, [])\n\n    const handleFocus = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true)\n        onFocus?.(evt)\n      },\n      [onFocus],\n    )\n\n    const handleBlur = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(false)\n        onBlur?.(evt)\n      },\n      [onBlur],\n    )\n\n    const handleChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        setHasValue(!!evt.currentTarget.value)\n        onChange?.(evt)\n      },\n      [onChange],\n    )\n\n    const handleAnimationStart = useCallback(\n      (evt: React.AnimationEvent<HTMLInputElement>) => {\n        onAnimationStart?.(evt)\n        // Detect browser autofill\n        if (evt.animationName === \"native-autofill-in\") {\n          setHasValue(true)\n          onAutofill?.()\n        }\n      },\n      [onAnimationStart, onAutofill],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: hasValue,\n          })}\n          data-focused={focused ? \"\" : undefined}\n          data-has-value={hasValue ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <label className={s.TypeableLabel} htmlFor={inputId}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </label>\n          <input\n            {...restProps}\n            ref={mergeRefs([ref, inputRef])}\n            id={inputId}\n            name={name}\n            type={type}\n            className={s.Input}\n            value={value}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={ariaDescribedBy}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onAnimationStart={handleAnimationStart}\n            data-lpignore={allowAutofillExtensions ? undefined : true}\n            data-1p-ignore={allowAutofillExtensions ? undefined : true}\n          />\n          {endAdornment && (\n            <div className={s.EndAdornment}>\n              {endAdornment}\n            </div>\n          )}\n          {showClearButton && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear input\"\n              className={s.ClearButton}\n              onClick={onClear}\n            >\n              <X />\n            </button>\n          )}\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelInput.displayName = \"FloatingLabelInput\"\n"]}
+{"version":3,"file":"FloatingLabelInput.js","sourceRoot":"","sources":["../../../../src/components/FloatingLabelInput/FloatingLabelInput.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport clsx from \"clsx\"\nimport { forwardRef, useCallback, useEffect, useId, useRef, useState } from \"react\"\nimport { mergeRefs } from \"react-merge-refs\"\n\nimport { FieldError } from \"../FieldError\"\nimport { X } from \"../Icon\"\n\nimport s from \"./FloatingLabelInput.module.css\"\n\nexport type FloatingLabelInputProps = {\n  /**\n   * Label text for the floating label\n   */\n  label: string\n  /**\n   * Error message to display below the input\n   */\n  errorMessage?: string\n  /**\n   * Mark the input as invalid\n   * @default false (or true if errorMessage is provided)\n   */\n  invalid?: boolean\n  /**\n   * Disables the input visually and from interactions\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * Makes the input read-only\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * Callback invoked when the clear button is clicked\n   */\n  onClear?: () => void\n  /**\n   * Callback invoked when the input is autofilled by the browser\n   */\n  onAutofill?: () => void\n  /**\n   * Allow autofill extensions to appear in the input\n   * @default false\n   */\n  allowAutofillExtensions?: boolean\n  /**\n   * Content rendered after the input, before the clear button.\n   * Useful for toggle buttons (e.g. password visibility), icons, or other interactive elements.\n   */\n  startAdornment?: React.ReactNode\n  endAdornment?: React.ReactNode\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nexport const FloatingLabelInput = forwardRef<HTMLInputElement, FloatingLabelInputProps>(\n  function FloatingLabelInput(props, ref) {\n    const {\n      label,\n      errorMessage,\n      \"invalid\": invalidProp,\n      disabled = false,\n      readOnly = false,\n      onClear,\n      onAutofill,\n      allowAutofillExtensions = false,\n      startAdornment,\n      endAdornment,\n      className,\n      \"id\": idProp,\n      name,\n      type = \"text\",\n      value,\n      defaultValue,\n      onChange,\n      onFocus,\n      onBlur,\n      onAnimationStart,\n      \"aria-describedby\": ariaDescribedByProp,\n      ...restProps\n    } = props\n\n    const inputRef = useRef<HTMLInputElement | null>(null)\n    const generatedId = useId()\n    const inputId = idProp || `floating-label-input-${generatedId}`\n    const errorId = `${inputId}-error`\n\n    const [focused, setFocused] = useState(false)\n    const [hasValue, setHasValue] = useState(() => {\n      return !!(value !== undefined ? value : defaultValue)\n    })\n\n    // Sync hasValue with controlled value prop\n    useEffect(() => {\n      if (value !== undefined) {\n        setHasValue(!!value)\n      }\n    }, [value])\n\n    // Determine invalid state from prop or presence of errorMessage\n    const invalid = invalidProp ?? !!errorMessage\n\n    // Determine if clear button should be shown\n    const showClearButton = !!onClear && hasValue && !disabled && !readOnly\n\n    // Merge aria-describedby with error id\n    const ariaDescribedBy =\n      [ariaDescribedByProp, errorMessage ? errorId : undefined].filter(Boolean).join(\" \") ||\n      undefined\n\n    // Handle clicks on the container to focus the input\n    const handleContainerMouseDown = useCallback((evt: React.MouseEvent<HTMLDivElement>) => {\n      const input = inputRef.current\n      if (!evt.target || !(evt.target instanceof Element) || !input) {\n        return\n      }\n      if (input.contains(evt.target)) {\n        return\n      }\n      if (evt.target.closest(\"button, [type='button'], [role='button']\")) {\n        return\n      }\n      evt.preventDefault()\n      if (document.activeElement !== input) {\n        input.focus()\n      }\n      const length = input.value.length\n      input.setSelectionRange(length, length)\n    }, [])\n\n    const handleFocus = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(true)\n        onFocus?.(evt)\n      },\n      [onFocus],\n    )\n\n    const handleBlur = useCallback(\n      (evt: React.FocusEvent<HTMLInputElement>) => {\n        setFocused(false)\n        onBlur?.(evt)\n      },\n      [onBlur],\n    )\n\n    const handleChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        setHasValue(!!evt.currentTarget.value)\n        onChange?.(evt)\n      },\n      [onChange],\n    )\n\n    const handleAnimationStart = useCallback(\n      (evt: React.AnimationEvent<HTMLInputElement>) => {\n        onAnimationStart?.(evt)\n        // Detect browser autofill\n        if (evt.animationName === \"native-autofill-in\") {\n          setHasValue(true)\n          onAutofill?.()\n        }\n      },\n      [onAnimationStart, onAutofill],\n    )\n\n    return (\n      <div className={clsx(s.Root, className)}>\n        <div\n          className={clsx(s.FieldFootprint, {\n            [s.HasValue]: hasValue,\n          })}\n          data-focused={focused ? \"\" : undefined}\n          data-has-value={hasValue ? \"\" : undefined}\n          data-invalid={invalid ? \"\" : undefined}\n          data-disabled={disabled ? \"\" : undefined}\n          data-readonly={readOnly ? \"\" : undefined}\n          onMouseDown={handleContainerMouseDown}\n        >\n          <label className={s.TypeableLabel} htmlFor={inputId}>\n            <div className={s.LabelPositioner}>\n              <div className={s.LabelText}>{label}</div>\n            </div>\n          </label>\n          {startAdornment && (\n            <div className={s.StartAdornment}>{startAdornment}</div>\n          )}\n          <input\n            {...restProps}\n            ref={mergeRefs([ref, inputRef])}\n            id={inputId}\n            name={name}\n            type={type}\n            className={s.Input}\n            value={value}\n            defaultValue={defaultValue}\n            disabled={disabled}\n            readOnly={readOnly}\n            aria-invalid={invalid ? true : undefined}\n            aria-describedby={ariaDescribedBy}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n            onAnimationStart={handleAnimationStart}\n            data-lpignore={allowAutofillExtensions ? undefined : true}\n            data-1p-ignore={allowAutofillExtensions ? undefined : true}\n          />\n          {endAdornment && (\n            <div className={s.EndAdornment}>\n              {endAdornment}\n            </div>\n          )}\n          {showClearButton && (\n            <button\n              type=\"button\"\n              aria-label=\"Clear input\"\n              className={s.ClearButton}\n              onClick={onClear}\n            >\n              <X />\n            </button>\n          )}\n        </div>\n        {errorMessage && (\n          <FieldError id={errorId} className={s.ErrorMessage}>\n            {errorMessage}\n          </FieldError>\n        )}\n      </div>\n    )\n  },\n)\n\nFloatingLabelInput.displayName = \"FloatingLabelInput\"\n"]}

package/dist/es/components/FloatingLabelInput/FloatingLabelInput.module.css

@@ -82,6 +82,17 @@
   color: var(--floating-input-label-color-focus);
 }/* Invalid label color */.FieldFootprint[data-invalid] .LabelText {
   color: var(--floating-input-label-color-invalid);
+}.StartAdornment {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity var(--floating-input-transition-duration) ease-in-out;
+}.FieldFootprint[data-focused] .StartAdornment,
+.HasValue .StartAdornment {
+  opacity: 1;
 }/* Input element */.Input {
   background-color: transparent;
   outline: none;

package/dist/es/components/Table/Table.module.css

@@ -4,6 +4,7 @@
   overflow: auto;
 }.Table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: collapse;
   font-size: var(--table-cell-font-size);
   line-height: var(--table-cell-line-height);

package/dist/types/components/DataTable/DataTable.d.ts

@@ -1,4 +1,9 @@
-import { type ColumnDef, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table";
+import { type ColumnDef, type RowData, type RowSelectionState, type SortingState, type VisibilityState } from "@tanstack/react-table";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: "left" | "center" | "right";
+    }
+}
 import { type ReactNode } from "react";
 export type DataTableProps<TData> = {
     /** Column definitions following TanStack Table v8 ColumnDef API */

package/dist/types/components/FloatingLabelInput/FloatingLabelInput.d.ts

@@ -39,6 +39,7 @@ export type FloatingLabelInputProps = {
      * Content rendered after the input, before the clear button.
      * Useful for toggle buttons (e.g. password visibility), icons, or other interactive elements.
      */
+    startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
 } & React.InputHTMLAttributes<HTMLInputElement>;
 export declare const FloatingLabelInput: import("react").ForwardRefExoticComponent<{
@@ -82,5 +83,6 @@ export declare const FloatingLabelInput: import("react").ForwardRefExoticCompone
      * Content rendered after the input, before the clear button.
      * Useful for toggle buttons (e.g. password visibility), icons, or other interactive elements.
      */
+    startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
 } & import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plexui/ui",
-  "version": "0.7.39",
+  "version": "0.7.41",
   "description": "Modern design system for building high-quality applications",
   "type": "module",
   "license": "MIT",