@rentnerkev/table 0.0.0-stage → 0.0.2

package/dist/shared/Table/Types/table.types.d.ts

@@ -0,0 +1,80 @@
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import type { ColumnDef, Header, ReactTable, Row, RowData, SortingState, TableOptions } from '@tanstack/react-table';
+import type { rentnerTableFeatures } from '../../../lib/Table/table.ts';
+import type { TableInteractionMessages, TableRowEvents } from './interaction.types.ts';
+export type TableLocale = 'de' | 'en';
+export type TableSize = 'sm' | 'md' | 'lg';
+export interface TableMessages extends Partial<TableInteractionMessages> {
+    empty: string;
+    loading: string;
+    sortAscending: string;
+    sortDescending: string;
+    clearSorting: string;
+    title: string;
+    search: string;
+    searchPlaceholder: string;
+    filters: string;
+    columns: string;
+    resetFilters: string;
+    noResults: string;
+    noResultsDescription: string;
+    emptyDescription: string;
+    error: string;
+    retry: string;
+    all: string;
+    filterColumn: (label: string) => string;
+    rowsPerPage: string;
+    firstPage: string;
+    previousPage: string;
+    nextPage: string;
+    lastPage: string;
+    pageInfo: (page: number, pages: number | null) => string;
+    rowRange: (first: number, last: number, total: number | null) => string;
+    results: (count: number) => string;
+    selected: (count: number) => string;
+    clearSelection: string;
+    selectPage: string;
+    selectRow: (label: string) => string;
+    expandRow: (label: string) => string;
+    collapseRow: (label: string) => string;
+}
+export type TableColumn<TData extends RowData, TValue = unknown> = ColumnDef<typeof rentnerTableFeatures, TData, TValue>;
+export type RentnerTableInstance<TData extends RowData> = ReactTable<typeof rentnerTableFeatures, TData>;
+export type RentnerTableOptions<TData extends RowData> = Omit<TableOptions<typeof rentnerTableFeatures, TData>, 'features'>;
+export type TableLogicOptions<TData extends RowData> = Pick<TableOptions<typeof rentnerTableFeatures, TData>, 'data' | 'columns' | 'getRowId' | 'enableSorting'> & {
+    initialSorting?: SortingState;
+    locale?: TableLocale;
+    messages?: Partial<TableMessages>;
+    /** Enable horizontal drag handles and keyboard column resizing. Defaults to false. */
+    resizableColumns?: boolean;
+};
+export type TableProps<TData extends RowData> = Omit<ComponentPropsWithRef<'table'>, 'children'> & TableLogicOptions<TData> & TableRowEvents<TData> & {
+    children?: never;
+    caption?: ReactNode;
+    size?: TableSize;
+    striped?: boolean;
+    isLoading?: boolean;
+    emptyState?: ReactNode;
+    loadingState?: ReactNode;
+    containerClassName?: string;
+};
+export interface TableHeaderState<TData extends RowData> {
+    header: Header<typeof rentnerTableFeatures, TData, unknown>;
+    canSort: boolean;
+    sortDirection: 'ascending' | 'descending' | undefined;
+    sortAction: string;
+    sortIndicator: string;
+}
+export interface TableLogicResult<TData extends RowData> {
+    table: ReactTable<typeof rentnerTableFeatures, TData>;
+    state: {
+        headerGroups: {
+            id: string;
+            headers: TableHeaderState<TData>[];
+        }[];
+        rows: Row<typeof rentnerTableFeatures, TData>[];
+        columnCount: number;
+        messages: TableMessages;
+    };
+}
+//# sourceMappingURL=table.types.d.ts.map

package/dist/shared/Table/Types/table.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.types.d.ts","sourceRoot":"","sources":["../../../../src/shared/Table/Types/table.types.ts"],"names":[],"mappings":"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"}

package/dist/shared/Table/Types/table.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=table.types.js.map

package/dist/shared/Table/Types/table.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.types.js","sourceRoot":"","sources":["../../../../src/shared/Table/Types/table.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react'\nimport type {\n    ColumnDef,\n    Header,\n    ReactTable,\n    Row,\n    RowData,\n    SortingState,\n    TableOptions,\n} from '@tanstack/react-table'\nimport type { rentnerTableFeatures } from '../../../lib/Table/table.ts'\nimport type {\n    TableInteractionMessages,\n    TableRowEvents,\n} from './interaction.types.ts'\n\nexport type TableLocale = 'de' | 'en'\nexport type TableSize = 'sm' | 'md' | 'lg'\n\nexport interface TableMessages extends Partial<TableInteractionMessages> {\n    empty: string\n    loading: string\n    sortAscending: string\n    sortDescending: string\n    clearSorting: string\n    title: string\n    search: string\n    searchPlaceholder: string\n    filters: string\n    columns: string\n    resetFilters: string\n    noResults: string\n    noResultsDescription: string\n    emptyDescription: string\n    error: string\n    retry: string\n    all: string\n    filterColumn: (label: string) => string\n    rowsPerPage: string\n    firstPage: string\n    previousPage: string\n    nextPage: string\n    lastPage: string\n    pageInfo: (page: number, pages: number | null) => string\n    rowRange: (first: number, last: number, total: number | null) => string\n    results: (count: number) => string\n    selected: (count: number) => string\n    clearSelection: string\n    selectPage: string\n    selectRow: (label: string) => string\n    expandRow: (label: string) => string\n    collapseRow: (label: string) => string\n}\n\nexport type TableColumn<TData extends RowData, TValue = unknown> = ColumnDef<\n    typeof rentnerTableFeatures,\n    TData,\n    TValue\n>\n\nexport type RentnerTableInstance<TData extends RowData> = ReactTable<\n    typeof rentnerTableFeatures,\n    TData\n>\nexport type RentnerTableOptions<TData extends RowData> = Omit<\n    TableOptions<typeof rentnerTableFeatures, TData>,\n    'features'\n>\n\nexport type TableLogicOptions<TData extends RowData> = Pick<\n    TableOptions<typeof rentnerTableFeatures, TData>,\n    'data' | 'columns' | 'getRowId' | 'enableSorting'\n> & {\n    initialSorting?: SortingState\n    locale?: TableLocale\n    messages?: Partial<TableMessages>\n    /** Enable horizontal drag handles and keyboard column resizing. Defaults to false. */\n    resizableColumns?: boolean\n}\n\nexport type TableProps<TData extends RowData> = Omit<\n    ComponentPropsWithRef<'table'>,\n    'children'\n> &\n    TableLogicOptions<TData> &\n    TableRowEvents<TData> & {\n        children?: never\n        caption?: ReactNode\n        size?: TableSize\n        striped?: boolean\n        isLoading?: boolean\n        emptyState?: ReactNode\n        loadingState?: ReactNode\n        containerClassName?: string\n    }\n\nexport interface TableHeaderState<TData extends RowData> {\n    header: Header<typeof rentnerTableFeatures, TData, unknown>\n    canSort: boolean\n    sortDirection: 'ascending' | 'descending' | undefined\n    sortAction: string\n    sortIndicator: string\n}\n\nexport interface TableLogicResult<TData extends RowData> {\n    table: ReactTable<typeof rentnerTableFeatures, TData>\n    state: {\n        headerGroups: {\n            id: string\n            headers: TableHeaderState<TData>[]\n        }[]\n        rows: Row<typeof rentnerTableFeatures, TData>[]\n        columnCount: number\n        messages: TableMessages\n    }\n}\n"]}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+export type { TableCell, TableRowEvents, TableRowOrderChange, TableInteractionMessages, } from './shared/Table/Types/interaction.types.ts';
+export type { TableColumn, TableLocale, TableLogicOptions, TableLogicResult, TableMessages, TableProps, TableSize, RentnerTableInstance, RentnerTableOptions, } from './shared/Table/Types/table.types.ts';
+export type { TableColumnMeta, TableColumnFilter, TableDateRange, } from './shared/Table/Types/column.types.ts';
+export type { TableProviderProps } from './shared/Table/Types/dataTable.types.ts';
+export type { DataTableProps, DataTableLogicOptions, DataTableLogicResult, DataTableContext, DataTableClassNames, TableRow, TableColumnInstance, TableSurfaceProps, DataTableToolbarProps, DataTablePaginationProps, TableRowActionsProps, } from './shared/Table/Types/dataTable.types.ts';
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,YAAY,EACR,SAAS,EACT,cAAc,EACd,mBAAmB,EACnB,wBAAwB,GAC3B,MAAM,2CAA2C,CAAA;AAClD,YAAY,EACR,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,gBAAgB,EAChB,aAAa,EACb,UAAU,EACV,SAAS,EACT,oBAAoB,EACpB,mBAAmB,GACtB,MAAM,qCAAqC,CAAA;AAC5C,YAAY,EACR,eAAe,EACf,iBAAiB,EACjB,cAAc,GACjB,MAAM,sCAAsC,CAAA;AAC7C,YAAY,EAAE,kBAAkB,EAAE,MAAM,yCAAyC,CAAA;AACjF,YAAY,EACR,cAAc,EACd,qBAAqB,EACrB,oBAAoB,EACpB,gBAAgB,EAChB,mBAAmB,EACnB,QAAQ,EACR,mBAAmB,EACnB,iBAAiB,EACjB,qBAAqB,EACrB,wBAAwB,EACxB,oBAAoB,GACvB,MAAM,yCAAyC,CAAA"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export type {\n    TableCell,\n    TableRowEvents,\n    TableRowOrderChange,\n    TableInteractionMessages,\n} from './shared/Table/Types/interaction.types.ts'\nexport type {\n    TableColumn,\n    TableLocale,\n    TableLogicOptions,\n    TableLogicResult,\n    TableMessages,\n    TableProps,\n    TableSize,\n    RentnerTableInstance,\n    RentnerTableOptions,\n} from './shared/Table/Types/table.types.ts'\nexport type {\n    TableColumnMeta,\n    TableColumnFilter,\n    TableDateRange,\n} from './shared/Table/Types/column.types.ts'\nexport type { TableProviderProps } from './shared/Table/Types/dataTable.types.ts'\nexport type {\n    DataTableProps,\n    DataTableLogicOptions,\n    DataTableLogicResult,\n    DataTableContext,\n    DataTableClassNames,\n    TableRow,\n    TableColumnInstance,\n    TableSurfaceProps,\n    DataTableToolbarProps,\n    DataTablePaginationProps,\n    TableRowActionsProps,\n} from './shared/Table/Types/dataTable.types.ts'\n"]}

package/docs/usage.md

@@ -0,0 +1,184 @@
+# RentnerTable usage
+
+The package supports React 19, React DOM 19, Tailwind CSS 4 and TanStack Table 9. Import `@rentnerkev/table/tailwind.css` after Tailwind; see the [README quick start](../README.md#quick-start) for a complete typed component.
+
+## Components and entry points
+
+| Entry                            | API                                                  |
+| -------------------------------- | ---------------------------------------------------- |
+| `@rentnerkev/table`              | Public components, hooks, helpers, filters and types |
+| `@rentnerkev/table/table`        | `Table`, a minimal sortable table                    |
+| `@rentnerkev/table/data-table`   | `DataTable`, the complete table interface            |
+| `@rentnerkev/table/hooks`        | `useDataTableLogic`                                  |
+| `@rentnerkev/table/filters`      | Portable text, equality and date-range filters       |
+| `@rentnerkev/table/types`        | Type-only contracts                                  |
+| `@rentnerkev/table/tailwind.css` | Theme, scanned library classes and control styles    |
+| `@rentnerkev/table/theme.css`    | Shared theme token mapping only                      |
+
+`DataTable` requires `data`, `columns` and `getRowId`. Supply a stable string ID from the record rather than a page-relative array index. `getRowLabel` gives selection and detail buttons a readable accessible name.
+
+`Table` takes `data`, `columns`, an optional `getRowId` and a `caption`. It renders every supplied row and supports `enableSorting`, `initialSorting`, `locale`, `messages`, density, striped rows and loading/empty content. It accepts native table attributes and a ref.
+
+## Resizing and row reordering
+
+Both capabilities are opt-in. `resizableColumns` works with `Table` and `DataTable`; `reorderableRows` is provided by `DataTable`.
+
+```tsx
+import { useState } from 'react'
+import { DataTable, createTableColumnHelper } from '@rentnerkev/table'
+
+interface Member {
+    id: string
+    name: string
+    role: string
+}
+const initialMembers: Member[] = [
+    { id: 'alex', name: 'Alex Weber', role: 'Developer' },
+    { id: 'sam', name: 'Sam Fischer', role: 'Designer' },
+]
+const column = createTableColumnHelper<Member>()
+const columns = column.columns([
+    column.accessor('name', { header: 'Member', minSize: 100, maxSize: 600 }),
+    column.accessor('role', { header: 'Role', enableResizing: false }),
+])
+
+export default function ReusableTeam() {
+    const [data, setData] = useState(initialMembers)
+    return (
+        <DataTable
+            data={data}
+            columns={columns}
+            getRowId={(member) => member.id}
+            getRowLabel={(member) => member.name}
+            title="Project team"
+            resizableColumns
+            reorderableRows
+            onRowOrderChange={(next) => setData(next)}
+        />
+    )
+}
+```
+
+Resize a leaf column at its edge. Arrow keys change width by 10 pixels, Shift+Arrow by 50; Home or double-click resets its configured size, and End selects its maximum. `minSize`, `maxSize` and `enableResizing` configure each column. Native `tableOptions.columnResizeMode`, `columnResizeDirection`, controlled `state.columnSizing` and `onColumnSizingChange` remain available on `DataTable`.
+
+Drag a row by its handle, hold the handle briefly on touch devices, or use Space, arrow keys and Space/Enter to move it with the keyboard. Escape and drops outside the table cancel. The preview stays within the visible table width and includes expanded details. Clear sorting before reordering; dragging is disabled while sorting is active or the table is loading or showing an error.
+
+`reorderableRows` alone keeps the order internally. Providing `onRowOrderChange(data, change)` makes the caller responsible for applying the returned array. `TableRowOrderChange` contains `activeId`, `overId`, `fromIndex` and `toIndex`; indices refer to the full supplied data, before filtering and pagination. Only rendered rows are drag targets. Keep stable record IDs, preserve the rest of the data when persisting server-page changes, and retain order in your backend when required. Selection and expanded details stay attached to their record during reordering. Drag dependencies load on demand.
+
+## Row, cell and table events
+
+`Table` and `DataTable` provide `onRowClick`, `onRowDoubleClick`, `onRowContextMenu`, `onCellClick`, `onCellDoubleClick` and `onCellContextMenu`. Callbacks receive the native typed row/cell followed by the React mouse event. Use `row.original`, `cell.row.original` and `cell.column.id` to route application actions.
+
+Row click and double-click notifications ignore interactive controls, prevented events and descendants marked `data-no-row-click`. Cell handlers can call `preventDefault()` to suppress the row callback, or `stopPropagation()` to stop bubbling. Render editable cells as accessible buttons or shared RentnerKev controls; those controls keep their own keyboard behavior.
+
+For context menus, either prevent the browser menu and open your own UI, or wrap the table with `ContextMenu` from `@rentnerkev/menu` and let the event bubble to that wrapper. Set the target row in `onRowContextMenu` before the wrapper opens. Native table events, attributes and refs go through `DataTable.tableProps`; `Table` accepts them directly. When using headless composition, pass `handler.handleRowReorder` to `TableSurface.onRowReorder` together with `reorderableRows`.
+
+## Columns and filters
+
+Create columns with `createTableColumnHelper<YourRecord>()`. `helper.columns([...])` preserves typed values across heterogeneous accessor columns. Define reusable columns outside render, or memoize columns that depend on locale or callbacks.
+
+| Column setting                                | Behavior                                                                          |
+| --------------------------------------------- | --------------------------------------------------------------------------------- |
+| `meta.label`                                  | Plain-text label for filter and visibility controls when the header is custom JSX |
+| `meta.align`                                  | `left`, `center` or `right` alignment for headers and cells                       |
+| `meta.headerClassName`, `meta.cellClassName`  | Extra classes for that column                                                     |
+| `meta.filter: { type: 'text' }`               | Trimmed, case-insensitive substring matching                                      |
+| `meta.filter: { type: 'select', options }`    | Exact scalar value matching; options use string values                            |
+| `meta.filter: { type: 'dateRange' }`          | Inclusive local calendar-day boundaries                                           |
+| `meta.filter: { type: 'custom', render }`     | Render a custom control with `value`, `onValueChange` and `label`                 |
+| `enableColumnFilter: false`                   | Disable the column filter                                                         |
+| `enableGlobalFilter: false`                   | Exclude a column from global search                                               |
+| `enableSorting: false`, `enableHiding: false` | Disable individual capabilities                                                   |
+
+An explicit TanStack `filterFn` takes precedence over the default function selected by metadata. A custom filter control should supply a matching `filterFn` when text matching is unsuitable.
+
+`TableDateRange` is `{ from?: string; to?: string }`, using `YYYY-MM-DD` boundaries. Rows may contain valid `Date` objects, timestamps or date strings. Date-only strings are interpreted as local dates. Invalid dates and reversed ranges produce no matches. Search, sorting and column-filter changes return to page one by default; `tableOptions.autoResetPageIndex: false` opts out. Client pages still clamp when the current page no longer exists.
+
+## Selection, actions and expanded rows
+
+Set `selectable` to `true` or a predicate receiving the native row. The header checkbox selects eligible rows on the current page. Selection uses record IDs and survives page changes; `bulkActions` receives the currently filtered selected rows and the native table instance. With manual server pagination it can only resolve selected records in the data currently supplied by the application. Keep a separate application-level ID selection when actions must span unloaded server pages.
+
+`toolbarActions` accepts a node or a function receiving `{ table, selectedRows }`. `bulkActions` receives the same context. Use `table.resetRowSelection(true)` after a successful bulk operation when the selection should clear. Disabling `selectable` hides selection UI while preserving native selection state.
+
+`TableRowActions` accepts an accessible `label` and the existing RentnerMenu item model. Place it in a display column; item callbacks can act on that column's row. See the [playground implementation](../playground/src/Hooks/useTeamTableLogic.tsx) for row menus and a bulk update.
+
+`renderExpandedRow(row)` renders content in a separate full-width table row. Use `row.original` for the record. Keep data requests and mutations in application hooks; the table does not fetch or persist records.
+
+## Controlled server data
+
+Pass controlled TanStack state and callbacks through `tableOptions`. Set `manualPagination`, `manualFiltering` and `manualSorting` to make the server responsible for those operations. The application supplies the current page's records and a total `rowCount` when known.
+
+```tsx
+import { useState } from 'react'
+import { useDataTableLogic, createTableColumnHelper } from '@rentnerkev/table'
+
+type Member = { id: string; name: string }
+const column = createTableColumnHelper<Member>()
+const columns = column.columns([column.accessor('name', { header: 'Member' })])
+
+export function useRemoteMembersLogic(
+    data: readonly Member[],
+    rowCount: number,
+) {
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 })
+    const [globalFilter, setGlobalFilter] = useState('')
+
+    return useDataTableLogic({
+        data,
+        columns,
+        getRowId: (member) => member.id,
+        tableOptions: {
+            manualPagination: true,
+            manualFiltering: true,
+            manualSorting: true,
+            rowCount,
+            state: { pagination, globalFilter },
+            onPaginationChange: setPagination,
+            onGlobalFilterChange: setGlobalFilter,
+        },
+    })
+}
+```
+
+Connect these controlled values to your application's query hook and pass the query results into the table. For controlled sorting and column filters, add their state and matching callbacks as well. `useDataTableLogic` returns the native `table` alongside `state`, `handler` and `refs` for a custom UI. A controlled state slice needs its corresponding callback; `initialState` only sets uncontrolled defaults.
+
+For an unknown total, use `pageCount: -1`; the footer omits the total page count and disables last-page navigation. Bound next-page navigation from your server response through an application-owned pagination UI when using this mode. `pagination={false}` renders all supplied rows.
+
+## Appearance and messages
+
+`size` accepts `sm`, `md` or `lg`. `DataTable` defaults to striped rows; `striped={false}` disables them. `stickyHeader` sticks within the table viewport; constrain the viewport height through `classNames.viewport` when using a vertically scrolling table.
+
+The table scrolls horizontally inside its viewport at narrow widths. `classNames` exposes `root`, `toolbar`, `viewport`, `table`, `header`, `headerCell`, `row`, `cell` and `footer`. `rowClassName(row)` adds record-specific row classes.
+
+Override shared `--rentner-*` tokens on `:root` or a container. For example:
+
+```css
+.light-table {
+    --rentner-surface: #ffffff;
+    --rentner-control: #edf1f6;
+    --rentner-foreground: #0f172a;
+    --rentner-muted: #475569;
+    --rentner-border: #cbd5e1;
+    --rentner-accent: #006d64;
+    --rentner-accent-hover: #00564f;
+    --rentner-accent-foreground: #ffffff;
+    --rentner-success: #047857;
+    --rentner-danger: #b91c1c;
+}
+```
+
+Popup controls use the table root as their default portal container, retaining scoped theme tokens. Pass `portalContainer` explicitly for an application overlay boundary. `TableProvider` is available for custom composition using these controls.
+
+Set `locale="de"` or `locale="en"` and override individual labels or formatter functions through `messages`. Search, filter, visibility and pagination controls use the resolved messages. `searchable`, `columnFilters` and `columnVisibility` can independently hide their controls.
+
+## Loading and errors
+
+`isLoading` displays the loading state and disables built-in controls. `isRefreshing` retains the visible rows and adds a refresh indicator. Custom `toolbarActions` and `bulkActions` remain application-owned; manage their disabled state in your action components.
+
+Use `error={true}` for the translated default error message, a React node for custom content, and `onRetry` for retry behavior. `error={false}` leaves data visible. `emptyState`, `loadingState` and `noResultsState` customize their respective content. Filtered empty results include a reset action.
+
+## Rendering and performance
+
+The library is ESM with public subpath exports and server-renderable markup. Interactive consumers need a client boundary in frameworks that distinguish server and client components. Date-filter UI loads lazily; row data remains application-owned.
+
+Pagination bounds rendered rows. Row virtualization, fetching, CSV export, editing, persistence and infinite scrolling are application responsibilities. For large remote datasets, filter/sort/page on the server and provide a page of rows. Keep `data`, columns and controlled state referentially stable when their contents have not changed.

package/package.json

@@ -1,6 +1,114 @@
 {
-  "name": "@rentnerkev/table",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@rentnerkev/table",
+    "version": "0.0.2",
+    "description": "Accessible, typed React tables with TanStack Table and shared RentnerKev styling.",
+    "author": "RentnerKev",
+    "license": "MIT",
+    "type": "module",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "files": [
+        "dist",
+        "tailwind.css",
+        "theme.css",
+        "README.md",
+        "docs/usage.md"
+    ],
+    "sideEffects": [
+        "./tailwind.css",
+        "./theme.css"
+    ],
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "import": "./dist/index.js"
+        },
+        "./table": {
+            "types": "./dist/shared/Table/Components/Table.d.ts",
+            "import": "./dist/shared/Table/Components/Table.js"
+        },
+        "./data-table": {
+            "types": "./dist/shared/Table/Components/DataTable.d.ts",
+            "import": "./dist/shared/Table/Components/DataTable.js"
+        },
+        "./hooks": {
+            "types": "./dist/shared/Table/Hooks/useDataTableLogic.d.ts",
+            "import": "./dist/shared/Table/Hooks/useDataTableLogic.js"
+        },
+        "./filters": {
+            "types": "./dist/lib/Table/filters.d.ts",
+            "import": "./dist/lib/Table/filters.js"
+        },
+        "./types": {
+            "types": "./dist/types.d.ts",
+            "import": "./dist/types.js"
+        },
+        "./tailwind.css": "./tailwind.css",
+        "./theme.css": "./theme.css",
+        "./package.json": "./package.json"
+    },
+    "scripts": {
+        "build": "bun scripts/build.ts && tsc",
+        "prepare": "bun run build",
+        "typecheck": "tsc --noEmit && tsc --project tsconfig.type-tests.json && bun run typecheck:playground && bun run typecheck:automation",
+        "typecheck:playground": "tsc --noEmit -p playground/tsconfig.json",
+        "typecheck:automation": "tsc --noEmit -p .github/scripts/tsconfig.json",
+        "test": "bun test",
+        "e2e": "playwright test",
+        "pack:check": "bun pm pack --dry-run",
+        "pack:consumer": "bun scripts/consumer/verify.ts",
+        "playground:install": "bun install --cwd playground --frozen-lockfile",
+        "playground:dev": "bun --cwd playground dev",
+        "playground:build": "bun --cwd playground build",
+        "lint": "oxlint --deny-warnings src scripts playground/src playground/vite.config.ts playwright.config.ts .github/scripts",
+        "lint:fix": "oxlint --fix --deny-warnings src scripts playground/src playground/vite.config.ts playwright.config.ts .github/scripts",
+        "format": "bun fmt src scripts playground .github docs README.md package.json tsconfig.json tsconfig.type-tests.json playwright.config.ts .oxlintrc.json bunfig.toml theme.css tailwind.css cliff.toml",
+        "format:check": "bun fmt --check src scripts playground .github docs README.md package.json tsconfig.json tsconfig.type-tests.json playwright.config.ts .oxlintrc.json bunfig.toml theme.css tailwind.css cliff.toml",
+        "verify": "bun run playground:install && bun run typecheck && bun run lint && bun run format:check && bun run test && bun run build && bun run pack:check && bun run pack:consumer && bun run playground:build && bun run e2e"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/RentnerKev/RentnerTable.git"
+    },
+    "homepage": "https://github.com/RentnerKev/RentnerTable",
+    "bugs": {
+        "url": "https://github.com/RentnerKev/RentnerTable/issues"
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org"
+    },
+    "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+    },
+    "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/modifiers": "^9.0.0",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
+        "@rentnerkev/calendar": "^2.9.0",
+        "@rentnerkev/inputs": "^2.8.1",
+        "@rentnerkev/menu": "^1.1.0",
+        "@rentnerkev/select": "^6.1.0",
+        "@tanstack/react-table": "^9.3.1",
+        "lucide-react": "^1.73.0"
+    },
+    "devDependencies": {
+        "@axe-core/playwright": "^4.14.0",
+        "@happy-dom/global-registrator": "^21.0.4",
+        "@playwright/test": "^1.64.1",
+        "@testing-library/react": "^16.3.3",
+        "@testing-library/user-event": "^14.6.8",
+        "@types/bun": "^1.4.4",
+        "@types/node": "^26.6.6",
+        "@types/react": "^19.3.0",
+        "@types/react-dom": "^19.3.0",
+        "happy-dom": "^21.0.4",
+        "oxlint": "^1.91.0",
+        "react": "^19.3.1",
+        "react-dom": "^19.3.1",
+        "typescript": "^7.0.2"
+    },
+    "packageManager": "bun@1.4.4"
+}

package/tailwind.css

@@ -0,0 +1,7 @@
+@import './theme.css';
+@import '@rentnerkev/inputs/tailwind.css';
+@import '@rentnerkev/select/tailwind.css';
+@import '@rentnerkev/menu/tailwind.css';
+@import '@rentnerkev/calendar/tailwind.css';
+
+@source './dist/**/*.js';

package/theme.css

@@ -0,0 +1,40 @@
+/* Shared RentnerKev tokens. Set --rentner-* once on :root or a scoped container. */
+@theme inline {
+    --color-rentner-control: var(
+        --rentner-control,
+        var(--color-input-dark, #22252b)
+    );
+    --color-rentner-surface: var(
+        --rentner-surface,
+        var(--color-surface-dark, #181a1f)
+    );
+    --color-rentner-foreground: var(--rentner-foreground, #ffffff);
+    --color-rentner-muted: var(
+        --rentner-muted,
+        var(--color-secondary-text, #9ca3af)
+    );
+    --color-rentner-border: var(
+        --rentner-border,
+        var(--color-border-dark, #2e323b)
+    );
+    --color-rentner-accent: var(
+        --rentner-accent,
+        var(--color-primary, #13ecd6)
+    );
+    --color-rentner-accent-hover: var(
+        --rentner-accent-hover,
+        var(--color-primary-hover, #0fbdaa)
+    );
+    --color-rentner-accent-foreground: var(
+        --rentner-accent-foreground,
+        #0f1014
+    );
+    --color-rentner-danger: var(--rentner-danger, #fb7185);
+    --color-rentner-success: var(--rentner-success, #34d399);
+    --color-rentner-warning: var(--rentner-warning, #fbbf24);
+    --color-rentner-info: var(--rentner-info, #60a5fa);
+    --radius-rentner-control: var(--rentner-radius, 0.75rem);
+    --spacing-rentner-control-sm: var(--rentner-control-sm, 2.25rem);
+    --spacing-rentner-control-md: var(--rentner-control-md, 2.75rem);
+    --spacing-rentner-control-lg: var(--rentner-control-lg, 3rem);
+}