velocis 1.0.0 → 1.1.0

package/docs/table2.md

@@ -0,0 +1,265 @@
+# Table2 (`velocis/table2`)
+
+Highly flexible data tables with render-prop columns, optional row selection, client-side pagination hooks, and full styling control at every layer.
+
+Use **Table2** when you need a custom UI table (card rows, bespoke cells, selection column). Use [`velocis/table`](./table.md) when you need sorting, filtering, virtualization, or tree data via the table engine.
+
+## Import
+
+```tsx
+'use client';
+
+import {
+  Table2,
+  useTable2Pagination,
+  useTable2Selection,
+  cardRowStyles,
+} from 'velocis/table2';
+```
+
+## When to use
+
+| Scenario | Use |
+|----------|-----|
+| Custom cell renderers per column | `Table2` with `columns[].cell` |
+| Card-style separated rows | `appearance="card"` or `cardRowStyles` |
+| Bulk row selection | `useTable2Selection` + `selection` prop |
+| Client-side paging | `useTable2Pagination` |
+| Server-side paging | Pass your own `pagination` prop |
+| Sort / filter / virtual scroll | [`velocis/table`](./table.md) instead |
+
+## Basic usage
+
+```tsx
+type Customer = { id: string; name: string; phone: string };
+
+const columns = [
+  {
+    id: 'name',
+    header: 'Name',
+    cell: (row: Customer) => <span className="font-medium">{row.name}</span>,
+  },
+  {
+    id: 'phone',
+    header: 'Phone',
+    cell: (row: Customer) => row.phone || '—',
+  },
+];
+
+<Table2 rows={customers} columns={columns} />
+```
+
+## Compound API (`Table2`)
+
+| Property | Component | Use when |
+|----------|-----------|----------|
+| `Table2` | `Table2Root` | Main table |
+| `Table2.Pagination` | `Table2Pagination` | Standalone pagination bar |
+| `Table2.Checkbox` | `Table2Checkbox` | Custom selection UI |
+
+## Column definition
+
+```tsx
+const columns: Table2Column<Customer>[] = [
+  {
+    id: 'name',
+    header: 'Customer',
+    headClassName: 'bg-velocis-background',
+    cellClassName: 'max-w-[200px]',
+    hidden: false,
+    cell: (row) => row.name,
+  },
+];
+```
+
+| Field | Type | Description |
+|-------|------|-------------|
+| `id` | `string` | Unique column id |
+| `header` | `ReactNode` | Header content |
+| `cell` | `(row) => ReactNode` | Cell renderer |
+| `headClassName` | `string` | Header cell classes |
+| `cellClassName` | `string` | Body cell classes |
+| `hidden` | `boolean` | Hide column |
+
+## Selection
+
+Pass a `selection` object or use `useTable2Selection` for a ready-made config:
+
+```tsx
+const { pageRows, page, totalPages, nextPage, prevPage } = useTable2Pagination({
+  rows: customers,
+  pageSize: 10,
+});
+
+const { selectionColumn, selectedIds } = useTable2Selection({
+  pageIds: pageRows.map((c) => c.id),
+  getRowId: (c) => c.id,
+  // controlled (optional):
+  // selectedIds,
+  // onSelectedIdsChange: setSelectedIds,
+});
+
+<Table2
+  rows={pageRows}
+  columns={columns}
+  selection={selectionColumn}
+  pagination={{
+    currentPage: page,
+    totalPages,
+    onNext: nextPage,
+    onPrev: prevPage,
+  }}
+/>
+```
+
+`useTable2Selection` returns:
+
+| Field | Description |
+|-------|-------------|
+| `selectedIds` | Currently selected row ids |
+| `setSelectedIds` | Update selection (supports updater fn) |
+| `toggleOne` | Toggle a single id |
+| `togglePage` | Select/deselect all rows on current page |
+| `isPageAllSelected` | All page rows selected |
+| `isPageSomeSelected` | Partial page selection (indeterminate header) |
+| `selectionColumn` | Ready to pass as `Table2.selection` |
+
+## Pagination
+
+Built-in pagination renders when `pagination.totalPages > 1`:
+
+```tsx
+<Table2
+  rows={pageRows}
+  columns={columns}
+  pagination={{
+    currentPage: page,
+    totalPages,
+    onNext: nextPage,
+    onPrev: prevPage,
+    labelRenderer: ({ currentPage, totalPages }) => (
+      <span>Page {currentPage} of {totalPages}</span>
+    ),
+    prevLabel: 'Previous',
+    nextLabel: 'Next',
+  }}
+/>
+```
+
+- `pagination={false}` — hide pagination
+- `pagination={<CustomPager />}` — fully custom footer
+
+## Card appearance
+
+`appearance="card"` applies the card-row preset (borders on `<td>`, separated rows):
+
+```tsx
+<Table2 rows={rows} columns={columns} appearance="card" />
+```
+
+Or use `cardRowStyles` manually for finer control:
+
+```tsx
+import { cardRowStyles } from 'velocis/table2';
+
+<Table2
+  rows={rows}
+  columns={columns}
+  tableClassName={cardRowStyles.tableClassName}
+  cellClassName={cardRowStyles.cellClassName}
+  rowClassName={cardRowStyles.rowClassName}
+/>
+```
+
+## Full example (customers-style)
+
+```tsx
+'use client';
+
+import { Table2, useTable2Pagination, useTable2Selection } from 'velocis/table2';
+import type { Table2Column } from 'velocis/table2';
+
+type Row = { id: string; name: string; email: string; status: string };
+
+const data: Row[] = [/* ... */];
+
+const columns: Table2Column<Row>[] = [
+  { id: 'name', header: 'Name', cell: (r) => r.name },
+  { id: 'email', header: 'Email', cell: (r) => r.email },
+  {
+    id: 'status',
+    header: 'Status',
+    cell: (r) => (
+      <span className="rounded-full bg-velocis-border/40 px-3 py-1 text-xs">
+        {r.status}
+      </span>
+    ),
+  },
+];
+
+export function CustomersTable() {
+  const { pageRows, page, totalPages, nextPage, prevPage } = useTable2Pagination({
+    rows: data,
+    pageSize: 10,
+  });
+
+  const { selectionColumn } = useTable2Selection({
+    pageIds: pageRows.map((r) => r.id),
+    getRowId: (r) => r.id,
+  });
+
+  return (
+    <div className="overflow-x-auto rounded-3xl bg-velocis-background px-5">
+      <Table2
+        rows={pageRows}
+        columns={columns}
+        appearance="card"
+        selection={selectionColumn}
+        getRowProps={(row) => ({
+          className: 'shadow-sm hover:shadow-md',
+          key: row.id,
+        })}
+        pagination={{
+          currentPage: page,
+          totalPages,
+          onNext: nextPage,
+          onPrev: prevPage,
+        }}
+      />
+    </div>
+  );
+}
+```
+
+## Styling props
+
+| Prop | Applied to |
+|------|------------|
+| `containerClassName` | Outer wrapper |
+| `tableClassName` | `<table>` |
+| `headerClassName` | `<thead>` |
+| `headerRowClassName` | Header `<tr>` |
+| `bodyClassName` | `<tbody>` |
+| `rowClassName` | Each data `<tr>` |
+| `cellClassName` | All body cells |
+| `getRowProps` | Per-row `<tr>` props (merge className) |
+| `toolbar` | Slot above table |
+| `footer` | Slot below table (above pagination) |
+| `emptyState` | Shown when `rows` is empty |
+| `dir` | Override text direction (`rtl` / `ltr`; defaults from `DirectionProvider`) |
+
+## Primitives
+
+Low-level table elements are exported for fully custom layouts:
+
+```tsx
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from 'velocis/table2';
+```
+
+## vs `velocis/table`
+
+| | `velocis/table` | `velocis/table2` |
+|--|-----------------|------------------|
+| Columns | `accessor` + optional `sortable` | `cell: (row) => ReactNode` |
+| State | `useTableEngine`, URL sync, persistence | `useTable2Pagination`, `useTable2Selection` |
+| Best for | Data grids, trees, virtualization | Custom UI tables, card rows, bulk actions |

package/docs/theme.md

@@ -0,0 +1,66 @@
+# Theme (`velocis/theme`)
+
+Design tokens, i18n messages, and global providers.
+
+## Import
+
+```tsx
+import {
+  VelocisProvider,
+  DirectionProvider,
+  useTheme,
+  useMessages,
+  defaultMessages,
+} from 'velocis/theme';
+```
+
+## Components
+
+### `VelocisProvider`
+
+Wraps the app. Handles light/dark/system theme, optional persistence, and error logging.
+
+```tsx
+<VelocisProvider theme="system" persistTheme storageKey="velocis-theme">
+  {children}
+</VelocisProvider>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `theme` | `'light' \| 'dark' \| 'system'` | `'system'` | Color scheme |
+| `messages` | `Partial<VelocisMessages>` | — | Override built-in strings |
+| `persistTheme` | `boolean` | `true` | Save theme to localStorage |
+| `storageKey` | `string` | `'velocis-theme'` | localStorage key |
+| `onError` | `Logger['error']` | — | Custom error handler |
+
+### `DirectionProvider`
+
+Sets document direction for RTL/LTR layouts.
+
+```tsx
+<DirectionProvider direction="rtl">{children}</DirectionProvider>
+```
+
+| Prop | Type | Default |
+|------|------|---------|
+| `direction` | `'ltr' \| 'rtl'` | `'ltr'` |
+
+## Hooks
+
+| Hook | Returns |
+|------|---------|
+| `useTheme()` | `{ theme, resolvedTheme, setTheme }` |
+| `useMessages()` | Merged `VelocisMessages` object |
+
+## Design tokens
+
+Re-exported from `velocis/theme`:
+
+`colors`, `spacing`, `radius`, `typography`, `shadows`, `zIndex`, `animation`, `breakpoints`, `opacity`, `borders`, `gradients`, `iconSizes`
+
+## When to use
+
+- **Always** wrap your app with `VelocisProvider` + `DirectionProvider` before using any Velocis component.
+- Use `direction="rtl"` for Arabic, Hebrew, etc.
+- Use `theme="system"` for automatic dark mode.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "velocis",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Extremely dynamic RTL/LTR React UI component library",
   "license": "MIT",
   "type": "module",
@@ -36,6 +36,21 @@
       "import": "./dist/table.js",
       "require": "./dist/table.cjs"
     },
+    "./table2": {
+      "types": "./dist/table2.d.ts",
+      "import": "./dist/table2.js",
+      "require": "./dist/table2.cjs"
+    },
+    "./dialog1": {
+      "types": "./dist/dialog1.d.ts",
+      "import": "./dist/dialog1.js",
+      "require": "./dist/dialog1.cjs"
+    },
+    "./dropdown1": {
+      "types": "./dist/dropdown1.d.ts",
+      "import": "./dist/dropdown1.js",
+      "require": "./dist/dropdown1.cjs"
+    },
     "./list": {
       "types": "./dist/list.d.ts",
       "import": "./dist/list.js",
@@ -62,6 +77,7 @@
       "require": "./dist/navigation.cjs"
     },
     "./styles.css": "./dist/velocis.css",
+    "./tailwind-v4.css": "./dist/tailwind-v4.css",
     "./tailwind-preset": {
       "types": "./dist/tailwind-preset.d.ts",
       "import": "./dist/tailwind-preset.js",
@@ -69,23 +85,34 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "docs",
+    "README.md",
+    "AGENTS.md"
   ],
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": ">=3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "tailwindcss": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@velocis/card": "0.1.0",
-    "@velocis/feedback": "0.1.0",
-    "@velocis/core": "0.1.0",
-    "@velocis/navigation": "0.1.0",
     "@velocis/forms": "0.1.0",
+    "@velocis/navigation": "0.1.1",
+    "@velocis/core": "0.1.0",
+    "@velocis/feedback": "0.1.1",
     "@velocis/hero": "0.1.0",
-    "@velocis/theme": "0.1.0",
-    "@velocis/table": "0.1.0",
-    "@velocis/list": "0.1.0"
+    "@velocis/table": "0.1.1",
+    "@velocis/list": "0.1.1",
+    "@velocis/table2": "0.2.0",
+    "@velocis/theme": "0.1.1",
+    "@velocis/dialog1": "0.2.0",
+    "@velocis/dropdown1": "0.2.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5",