noecosystem-design 0.2.2 → 0.3.0

package/README.md

@@ -100,8 +100,8 @@ Advanced Security are enabled in repository settings.
 CodeQL is similarly opt-in through `ENABLE_CODEQL=true`: first enable **Code
 Security** for this private repository in GitHub’s security settings, then set the
 variable. This avoids a misleading failed workflow when GitHub cannot accept SARIF
-uploads. The workflows use Node 24; the runner’s Node 20 deprecation notice does not
-require a compatibility override.
+uploads. The workflows configure Node 24 and use `actions/setup-node@v6`, whose
+action runtime is also Node 24.
 
 ## Architecture
 

package/apps/storybook/stories/catalog/app-frame.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { AppFrame } from '../../../../packages/ui/src/app-frame';
+import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
 
 const navigation = (
@@ -36,6 +37,44 @@ function AppFrameDemo() {
   );
 }
 
+function FinanceAppFrameDemo() {
+  return (
+    <div style={{ height: '28rem' }}>
+      <AppFrame
+        header={
+          <div className="flex min-h-14 items-center bg-surface-raised px-4 text-sm font-medium">
+            NOCFO
+          </div>
+        }
+        navigation={
+          <SidebarNavigation
+            label="NOCFO navigation"
+            sections={[
+              {
+                id: 'finance',
+                label: 'Finance',
+                items: [
+                  { href: '#dashboard', icon: <ChartSquare />, label: 'Dashboard', current: true },
+                  { href: '#contracts', icon: <ReceiptSearch />, label: 'Contracts' },
+                  { href: '#cashflow', icon: <WalletMoney />, label: 'Cash flow', badge: '12' },
+                ],
+              },
+            ]}
+          />
+        }
+        variant="finance"
+      >
+        <section className="rounded-lg bg-surface p-5">
+          <h2 className="m-0 text-lg font-semibold">Financial overview</h2>
+          <p className="mb-0 mt-2 text-sm text-muted-foreground">
+            Flat surfaces are separated by semantic color and spacing, not shadows or card strokes.
+          </p>
+        </section>
+      </AppFrame>
+    </div>
+  );
+}
+
 const meta = {
   title: 'Catalog/Patterns/Pages/App Frame',
   component: AppFrameDemo,
@@ -45,3 +84,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const Finance: Story = {
+  render: () => <FinanceAppFrameDemo />,
+};

package/apps/storybook/stories/catalog/button.stories.tsx

@@ -22,6 +22,7 @@ export const Default: Story = {
 };
 
 export const Outline: Story = { args: { variant: 'outline', children: 'Outline' } };
+export const Secondary: Story = { args: { variant: 'secondary', children: 'Secondary' } };
 export const Ghost: Story = { args: { variant: 'ghost', children: 'Ghost' } };
 export const Destructive: Story = { args: { variant: 'destructive', children: 'Delete' } };
 export const Loading: Story = { args: { loading: true, children: 'Saving' } };

package/apps/storybook/stories/catalog/checkbox.stories.tsx

@@ -8,11 +8,16 @@ const meta = {
 } satisfies Meta<typeof Checkbox>;
 export default meta;
 type Story = StoryObj<typeof meta>;
-export const Default: Story = {};
+export const Default: Story = {
+  render: () => <Checkbox label="Enable notifications" />,
+};
+export const Bare: Story = {
+  render: () => <Checkbox aria-label="Enable notifications" />,
+};
 export const RTL: Story = {
   render: () => (
     <div dir="rtl">
-      <Checkbox />
+      <Checkbox label="فعال‌سازی اعلان‌ها" />
     </div>
   ),
 };

package/apps/storybook/stories/catalog/data-table.stories.tsx

@@ -1,11 +1,23 @@
+import { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '@noe/ui/button';
+import { EmptyState } from '@noe/ui/empty-state';
+import { Input } from '@noe/ui/input';
 
-import { type DataColumn, DataTable } from '../../../../packages/data-ui/src/data-table';
+import {
+  type DataColumn,
+  DataTable,
+  type DataSort,
+  type FilterSpec,
+  type PageSpec,
+  type RowId,
+} from '../../../../packages/data-ui/src/data-table';
+import { FilterBar } from '../../../../packages/data-ui/src/filter-bar';
 
 type ServiceRow = { id: string; service: string; owner: string; status: string; updated: string };
 
 const columns: DataColumn<ServiceRow>[] = [
-  { key: 'service', header: 'Service' },
+  { key: 'service', header: 'Service', technical: true },
   { key: 'owner', header: 'Owner' },
   { key: 'status', header: 'Status' },
   { key: 'updated', header: 'Updated', technical: true, align: 'end' },
@@ -29,6 +41,18 @@ const rows: ServiceRow[] = [
   },
 ];
 
+const moreRows: ServiceRow[] = [
+  ...rows,
+  {
+    id: '4',
+    service: 'registry-api',
+    owner: 'Design Systems',
+    status: 'Healthy',
+    updated: '3h ago',
+  },
+  { id: '5', service: 'agent-gateway', owner: 'AI Platform', status: 'Healthy', updated: '5h ago' },
+];
+
 function DataTableDemo() {
   return (
     <DataTable columns={columns} rows={rows} caption="Service health" empty="No services yet." />
@@ -44,8 +68,207 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
 export const Empty: Story = {
   render: () => (
-    <DataTable columns={columns} rows={[]} caption="Service health" empty="No services yet." />
+    <DataTable
+      columns={columns}
+      rows={[]}
+      caption="Service health"
+      empty={
+        <EmptyState
+          title="No services yet"
+          description="Services appear here once they report health to the platform."
+        />
+      }
+    />
+  ),
+};
+
+function SortingDemo() {
+  const [sorting, setSorting] = useState<DataSort[]>([{ field: 'service', direction: 'asc' }]);
+  return (
+    <DataTable
+      columns={columns}
+      rows={[...moreRows]}
+      caption="Service health"
+      empty="No services yet."
+      sorting={sorting}
+      onSortingChange={setSorting}
+    />
+  );
+}
+export const Sorting: Story = { render: () => <SortingDemo /> };
+
+function SelectionDemo() {
+  const [selected, setSelected] = useState<RowId[]>(['2']);
+  return (
+    <DataTable
+      columns={columns}
+      rows={rows}
+      caption="Service health"
+      empty="No services yet."
+      selection={selected}
+      onSelectionChange={setSelected}
+      selectAllLabel="Select all services"
+      rowSelectionLabel={(row: ServiceRow) => `Select ${row.service}`}
+      selectedCountLabel={(count: number) => `${count} selected`}
+      renderSelectionActions={({ selectedIds }) => (
+        <Button size="sm" variant="outline">
+          Restart {selectedIds.length > 0 ? `(${selectedIds.length})` : ''}
+        </Button>
+      )}
+    />
+  );
+}
+export const Selection: Story = { render: () => <SelectionDemo /> };
+
+function PaginationDemo() {
+  const [page, setPage] = useState<PageSpec>({ index: 0, size: 2 });
+  return (
+    <DataTable
+      columns={columns}
+      rows={[...moreRows]}
+      caption="Service health"
+      empty="No services yet."
+      page={page}
+      onPageChange={setPage}
+      previousPageLabel="Previous page"
+      nextPageLabel="Next page"
+      paginationLabel="Service health pagination"
+    />
+  );
+}
+export const Pagination: Story = { render: () => <PaginationDemo /> };
+
+function WithFiltersDemo() {
+  const [search, setSearch] = useState('');
+  const [filters, setFilters] = useState<FilterSpec[]>([]);
+  return (
+    <div className="flex flex-col gap-3">
+      <FilterBar
+        label="Filter services"
+        search={
+          <Input
+            aria-label="Search services"
+            onChange={(event) => {
+              setSearch(event.target.value);
+              setFilters(
+                event.target.value
+                  ? [{ field: 'service', operator: 'contains', value: event.target.value }]
+                  : [],
+              );
+            }}
+            placeholder="Search services"
+            size="sm"
+            value={search}
+          />
+        }
+      />
+      <DataTable
+        columns={columns}
+        rows={[...moreRows]}
+        caption="Service health"
+        empty="No services match the current filter."
+        filters={filters}
+        onFiltersChange={setFilters}
+      />
+    </div>
+  );
+}
+export const WithFilters: Story = { render: () => <WithFiltersDemo /> };
+
+function CompactDemo() {
+  return (
+    <DataTable
+      columns={columns}
+      rows={[...moreRows]}
+      caption="Service health"
+      density="compact"
+      empty="No services yet."
+      page={{ index: 0, size: 3 }}
+      onPageChange={() => {}}
+      previousPageLabel="Previous page"
+      nextPageLabel="Next page"
+      paginationLabel="Service health pagination"
+    />
+  );
+}
+export const Compact: Story = { render: () => <CompactDemo /> };
+
+function RtlDemo() {
+  const [sorting, setSorting] = useState<DataSort[]>([{ field: 'service', direction: 'asc' }]);
+  const faColumns: DataColumn<ServiceRow>[] = [
+    { key: 'service', header: 'سرویس', technical: true },
+    { key: 'owner', header: 'مالک' },
+    { key: 'status', header: 'وضعیت' },
+    { key: 'updated', header: 'آخرین به‌روزرسانی', align: 'end' },
+  ];
+  return (
+    <div dir="rtl" lang="fa">
+      <DataTable
+        columns={faColumns}
+        rows={rows}
+        caption="وضعیت سرویس‌ها"
+        density="compact"
+        empty="هنوز سرویسی ثبت نشده است."
+        sorting={sorting}
+        onSortingChange={setSorting}
+        selectAllLabel="انتخاب همه سرویس‌ها"
+        rowSelectionLabel={(row: ServiceRow) => `انتخاب ${row.service}`}
+        selectedCountLabel={(count: number) => `${count} مورد انتخاب شده`}
+        page={{ index: 0, size: 2 }}
+        onPageChange={() => {}}
+        previousPageLabel="صفحه قبلی"
+        nextPageLabel="صفحه بعدی"
+        paginationLabel="صفحه‌بندی وضعیت سرویس‌ها"
+      />
+    </div>
+  );
+}
+export const RTL: Story = { render: () => <RtlDemo /> };
+
+function ServerSideDemo() {
+  const [query, setQuery] = useState<{ sorts: DataSort[]; filters: FilterSpec[]; page: PageSpec }>({
+    sorts: [],
+    filters: [],
+    page: { index: 0, size: 2 },
+  });
+  // A real product sends `toDataQuery(query)` to Django and renders the page.
+  const serverPage = moreRows.slice(
+    query.page.index * query.page.size,
+    (query.page.index + 1) * query.page.size,
+  );
+  return (
+    <DataTable
+      columns={columns}
+      rows={serverPage}
+      caption="Service health"
+      empty="No services yet."
+      sorting={query.sorts}
+      onSortingChange={(sorts) => setQuery((q) => ({ ...q, sorts }))}
+      manualSorting
+      page={query.page}
+      onPageChange={(next) => setQuery((q) => ({ ...q, page: next }))}
+      manualPagination
+      totalRowCount={moreRows.length}
+      previousPageLabel="Previous page"
+      nextPageLabel="Next page"
+      paginationLabel="Service health pagination"
+    />
+  );
+}
+export const ServerSide: Story = { render: () => <ServerSideDemo /> };
+
+export const Loading: Story = {
+  render: () => (
+    <DataTable
+      columns={columns}
+      rows={[]}
+      caption="Service health"
+      empty="No services yet."
+      loading
+      loadingRows={3}
+    />
   ),
 };

package/apps/storybook/stories/catalog/sidebar-navigation.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { SidebarNavigation } from '../../../../packages/ui/src/sidebar-navigation';
+import { ChartSquare, ReceiptSearch, WalletMoney } from '../../../../packages/icons/src';
 
 const sections = [
   {
@@ -38,3 +39,24 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
+
+export const PersianRtl: Story = {
+  render: () => (
+    <div dir="rtl" lang="fa" style={{ maxWidth: '17.5rem' }}>
+      <SidebarNavigation
+        label="ناوبری نوکفو"
+        sections={[
+          {
+            id: 'finance',
+            label: 'مدیریت مالی',
+            items: [
+              { href: '#dashboard', icon: <ChartSquare />, label: 'داشبورد', current: true },
+              { href: '#contracts', icon: <ReceiptSearch />, label: 'قراردادها' },
+              { href: '#cashflow', icon: <WalletMoney />, label: 'جریان نقدی', badge: '۱۲' },
+            ],
+          },
+        ]}
+      />
+    </div>
+  ),
+};

package/docs/design-system/brand-theme.md

@@ -18,8 +18,9 @@ interfaces use the same language rather than a related palette.
 Use large, confident headings; quiet metadata with tracked uppercase only for
 Latin labels; generous spacing; and low-contrast graphite/paper layers. Interactive
 boundaries use the semantic border token and the shared rounded geometry. Floating
-chat and modal surfaces use `shadow.raised` or `shadow.overlay` plus the quiet mint
-ambient gradient from the official reference. Do not create a separate app palette.
+chat and modal surfaces remain flat, using a quiet mint ambient layer or overlay
+scrim when separation is needed; `shadow.raised` and `shadow.overlay` stay `none`.
+Do not create a separate app palette.
 
 ## Product mapping
 

package/docs/design-system/components.md

@@ -47,6 +47,19 @@ For application pages, compose `app-frame`, `page-header`, `sidebar-navigation`,
 Use the [flat surface and navigation policy](surface-policy.md) to decide surface
 tone, CTA hierarchy, adaptive navigation, icon coloring, and review evidence.
 
+### Finance application shell
+
+For NOCFO-class workspaces use `AppFrame variant="finance"` with
+`HeaderNavigation` and `SidebarNavigation`. It uses a 280px desktop navigation
+column, a compact 56px header, and semantic background/surface/sunken layers for
+separation. It never solves Persian or English layout with `row-reverse`: icons
+render at the logical start and end adornments use `margin-inline-start`.
+
+The shell is deliberately flat. Sections and cards are differentiated by the
+surface tokens and spacing; their outer stroke and every shadow are absent. Use
+the standard `Button variant="secondary"` for transparent, currentColor outline
+actions. It is white on dark/colored surfaces and graphite on paper.
+
 Mapping to the Untitled UI reference taxonomy (honest as of 2026-08-27 — foundation stabilization):
 
 | Untitled UI category      | NOE coverage                                                        |
@@ -88,6 +101,38 @@ Implemented source includes Button, Input, Field, Dialog, Drawer, Tabs, auto-dir
 - Tab arrow behavior resolves against active direction.
 - Email, URL, telephone, numeric, code and identifier content preserve technical direction.
 
+## Data tables
+
+`DataTable` in `@noe/data-ui` owns the semantic `<table>` markup, NOE tokens,
+RTL behavior and accessibility, while TanStack Table v9 provides the headless
+state engine behind an internal adapter
+(`packages/data-ui/src/table/adapters/tanstack.ts`, per ADR 0008). TanStack
+types never appear in the public API: products program against NOE contracts
+(`DataColumn`, `DataSort`, `FilterSpec`, `PageSpec`, `RowId`, `SelectionState`,
+`DataQuery`) exported from `@noe/data-ui`.
+
+- Sorting headers cycle ascending → descending → unsorted and expose `aria-sort`;
+  icons are direction-neutral so RTL needs no mirroring.
+- Filtering uses NOE `FilterSpec` operators (`contains`, `equals`, `in`,
+  `between`, …). `FilterBar` composes the controls; `DataTable` owns state.
+- Pagination is controlled via `PageSpec` with caller-provided accessible
+  labels, matching the `Pagination` primitive contract.
+- Selection keeps stable row ids (`RowId`), supports single/multiple modes and
+  never selects by positional index.
+- Server mode (`manualSorting`/`manualFiltering`/`manualPagination` +
+  `totalRowCount`) trusts incoming data order and slicing; pair it with
+  `toDataQuery` to serialize state into a Django query.
+- `density="compact"` tightens row rhythm for dense workspaces using the
+  spacing scale; `regular` is the default.
+- `empty` accepts composed content — pass an `EmptyState` for full empty
+  affordances. The `WithFilters` catalog story demonstrates the FilterBar +
+  Input + DataTable composition.
+
+Deterministic visual evidence (light, dark, RTL, selection, loading) is
+captured by `packages/data-ui/src/table/data-table-visual.evidence.browser.test.tsx`
+into `evidence/data-table/`; the browser test project renders with the real
+Tailwind-expanded NOE tokens.
+
 ## Product adapters
 
 Data, chart, agent and workflow packages own the NOE composition. Product screens should never import an unnormalized marketplace component directly.

package/docs/design-system/inventory.md

@@ -386,3 +386,4 @@ Total catalog entries: **129** · registry items: **67**
 - `fab`: Mobile-only floating action button anchored to the logical end edge above the bottom navigation, with safe-area padding and required accessible label.
 - `mobile-screen`: Single-column mobile page scaffold composing an app bar, scrollable content region, optional floating action button and bottom navigation.
 - `bottom-navigation`: Mobile-only bottom tab bar with current-page state, badges, icon slots and safe-area padding; hidden from the medium breakpoint upward.
+

package/docs/design-system/surface-policy.md

@@ -14,16 +14,18 @@ passes caused by arbitrary shadows, card borders, or ambiguous mobile navigation
    `appearance="outlined"` is reserved for a selection, data-entry, or comparison
    boundary where a stroke conveys real meaning.
 
-Use the shared shadow tokens only for floating chat, drawer, popover and modal
-layers. Sections and ordinary cards do not receive ad-hoc elevation. A focus state
-is an outline/ring, not elevation.
+NOE surfaces are fully flat: `shadow.raised` and `shadow.overlay` are `none` in
+every theme, including dialogs, drawers, menus and popovers. Separation comes from
+semantic surface color, radius, spacing and an overlay scrim—not shadow. Sections
+and ordinary cards do not receive ad-hoc elevation. A focus state is an
+outline/ring, not elevation.
 
 ## Actions
 
 - One screen has one contained primary CTA.
-- Secondary actions are outline or ghost actions. On a dark or colored surface,
-  a white outline action remains transparent with a white label and stroke; never
-  give it an opaque white fill that removes its hierarchy.
+- Secondary actions are transparent outline actions. Their label and stroke use
+  `currentColor`; therefore the standard foreground is white in dark/colored
+  contexts and graphite on paper. Never give a secondary action an opaque fill.
 - Destructive actions retain an explicit label and confirmation/recovery path;
   color alone is never the signal.
 - Every focusable action keeps a visible `focus-visible` outline.
@@ -52,8 +54,9 @@ is an outline/ring, not elevation.
 
 - Test every route in Persian/RTL and English/LTR, in light and dark themes.
 - Verify no page-level horizontal overflow at the mobile breakpoint.
-- Verify sections/cards have no visible outer stroke or ad-hoc shadow unless they
-  are an explicitly outlined control or a floating overlay using `shadow.overlay`.
+- Verify sections/cards have no visible outer stroke or shadow unless they are an
+  explicitly outlined control (for example a secondary action, input or table
+  affordance).
 - Verify interactive targets are at least 44 px on touch devices and have
   accessible names.
 - Test desktop sidebar and mobile drawer independently, including keyboard focus

package/docs/design-system/visual-qa.md

@@ -7,4 +7,10 @@ The capture script generates deterministic PNG evidence for:
 - Consumer, dashboard, agent and workflow surfaces at representative desktop conditions.
 - Pseudo-LTR and pseudo-RTL stress views.
 
+The NOE DataTable has its own deterministic component-level evidence:
+`packages/data-ui/src/table/data-table-visual.evidence.browser.test.tsx`
+renders regular and compact density, Persian RTL, selection (light and dark)
+and loading states with the real Tailwind-expanded tokens into
+`evidence/data-table/`.
+
 Review checks include overflow, clipped Persian, bidi corruption, arrow direction, sidebar collapse, technical-value isolation, table scrolling, excessive cards, random shadows, coral overuse, mirrored brand marks, focus order and mobile composition.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noecosystem-design",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "private": false,
   "description": "Agent-readable NOE design-system source, registry metadata, and verification contracts.",
   "keywords": [

package/packages/data-ui/package.json

@@ -5,11 +5,16 @@
   "type": "module",
   "dependencies": {
     "@noe/icons": "workspace:*",
-    "@noe/ui": "workspace:*"
+    "@noe/ui": "workspace:*",
+    "@tanstack/react-table": "^9.2.4"
   },
   "peerDependencies": {
     "react": "^19.2.0"
   },
+  "devDependencies": {
+    "vitest": "4.1.11",
+    "vitest-browser-react": "2.2.0"
+  },
   "exports": {
     ".": "./src/index.ts"
   }

package/packages/data-ui/src/data-table.tsx

@@ -1,99 +1,2 @@
-import { useId } from 'react';
-import type * as React from 'react';
-import { TechnicalValue } from '@noe/ui/bidi';
-import { cn } from '@noe/ui/lib/cn';
-
-export type DataColumn<Row> = {
-  key: keyof Row & string;
-  header: React.ReactNode;
-  align?: 'start' | 'end';
-  technical?: boolean;
-  render?: (row: Row) => React.ReactNode;
-};
-
-export function DataTable<Row extends { id: string }>({
-  columns,
-  rows,
-  caption,
-  empty,
-  className,
-}: {
-  columns: DataColumn<Row>[];
-  rows: Row[];
-  caption: string;
-  empty: React.ReactNode;
-  className?: string;
-}) {
-  const captionId = useId();
-  if (!rows.length)
-    return (
-      <div
-        className={cn(
-          'flex min-h-32 items-center justify-center rounded-lg border border-dashed border-border bg-surface-sunken/30 p-6 text-center text-sm text-muted-foreground',
-          className,
-        )}
-        data-slot="data-table-empty"
-      >
-        {empty}
-      </div>
-    );
-
-  return (
-    // WCAG 2.1: keyboard-accessible scrollable container for overflow tables.
-    <section
-      aria-labelledby={captionId}
-      className={cn('overflow-x-auto rounded-lg border border-border', className)}
-      data-slot="data-table-scroll"
-      // biome-ignore lint/a11y/noNoninteractiveTabindex: scrollable region focus pattern
-      tabIndex={0}
-    >
-      <table className="w-full min-w-full border-collapse text-sm" data-slot="data-table">
-        <caption className="sr-only" id={captionId}>
-          {caption}
-        </caption>
-        <thead>
-          <tr className="border-b border-border bg-surface-sunken/60">
-            {columns.map((column) => (
-              <th
-                className={cn(
-                  'whitespace-nowrap px-4 py-2.5 text-xs font-medium text-muted-foreground',
-                  column.align === 'end' ? 'text-end' : 'text-start',
-                )}
-                data-align={column.align ?? 'start'}
-                key={column.key}
-                scope="col"
-              >
-                {column.header}
-              </th>
-            ))}
-          </tr>
-        </thead>
-        <tbody>
-          {rows.map((row) => {
-            const cells = columns.map((column) => {
-              const content = column.render ? column.render(row) : String(row[column.key] ?? '');
-              const value = column.technical ? <TechnicalValue>{content}</TechnicalValue> : content;
-              return (
-                <td
-                  className={cn(
-                    'whitespace-nowrap px-4 py-2.5 text-foreground',
-                    column.align === 'end' ? 'text-end' : 'text-start',
-                  )}
-                  data-align={column.align ?? 'start'}
-                  key={column.key}
-                >
-                  {value}
-                </td>
-              );
-            });
-            return (
-              <tr className="border-b border-border last:border-b-0 hover:bg-muted/50" key={row.id}>
-                {cells}
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
-    </section>
-  );
-}
+export * from './table/contracts';
+export * from './table/data-table';

package/packages/data-ui/src/pagination.tsx

@@ -8,8 +8,8 @@ export interface PaginationProps extends React.ComponentProps<'nav'> {
   status: React.ReactNode;
   previousLabel: string;
   nextLabel: string;
-  onPrevious?: () => void;
-  onNext?: () => void;
+  onPrevious?: (() => void) | undefined;
+  onNext?: (() => void) | undefined;
   canPrevious?: boolean;
   canNext?: boolean;
 }