@dashforge/tw 0.8.1-beta → 0.9.1-beta

package/src/components/Table/Table.perf.test.tsx

@@ -0,0 +1,81 @@
+// @vitest-environment jsdom
+/**
+ * Performance guardrails for `<Table>` (non-virtualized).
+ *
+ * Table renders EVERY row in the DOM — its design ceiling is ~500
+ * rows (past that, the consumer should switch to `<DataGrid>`). These
+ * tests pin the mount cost at that ceiling so a regression in the
+ * render path (e.g. an accidental O(n²) in the sort / search pipeline)
+ * surfaces in CI.
+ *
+ * Budgets are deliberately generous — they catch order-of-magnitude
+ * regressions under a cold workspace-wide test run, not micro-jitter.
+ */
+import * as React from 'react';
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, cleanup } from '@testing-library/react';
+import { Table } from './Table.js';
+import type { TableColumn } from './table.types.js';
+
+void React;
+afterEach(() => cleanup());
+
+interface Row {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  city: string;
+}
+
+const COLS: TableColumn<Row>[] = [
+  { field: 'name', header: 'Name', sortable: true, searchable: true },
+  { field: 'email', header: 'Email', searchable: true },
+  { field: 'age', header: 'Age', sortable: true },
+  { field: 'city', header: 'City' },
+];
+
+function makeRows(n: number): Row[] {
+  const cities = ['Roma', 'Milano', 'Berlin'];
+  return Array.from({ length: n }).map((_, i) => ({
+    id: `r${i}`,
+    name: `User ${i}`,
+    email: `user${i}@example.com`,
+    age: 20 + (i % 50),
+    city: cities[i % 3] as string,
+  }));
+}
+
+describe('<Table> performance', () => {
+  it("mounts 500 rows (Table's row-count ceiling) under 800ms", () => {
+    const rows = makeRows(500);
+    const t0 = performance.now();
+    render(<Table rows={rows} cols={COLS} getRowId={(r) => r.id} />);
+    const t1 = performance.now();
+    expect(t1 - t0).toBeLessThan(800);
+  });
+
+  it('renders every row in the DOM (non-virtualized contract)', () => {
+    const rows = makeRows(500);
+    const { container } = render(
+      <Table rows={rows} cols={COLS} getRowId={(r) => r.id} />,
+    );
+    // Non-virtualized: all 500 data rows are mounted.
+    expect(container.querySelectorAll('tbody tr').length).toBe(500);
+  });
+
+  it('applies a default sort over 500 rows within the mount budget', () => {
+    const rows = makeRows(500);
+    const t0 = performance.now();
+    render(
+      <Table
+        rows={rows}
+        cols={COLS}
+        getRowId={(r) => r.id}
+        defaultSortModel={[{ field: 'name', direction: 'asc' }]}
+      />,
+    );
+    const t1 = performance.now();
+    expect(t1 - t0).toBeLessThan(800);
+  });
+});

package/src/components/Table/Table.test.tsx

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import * as React from 'react';
-import { describe, it, expect, afterEach, beforeAll } from 'vitest';
+import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
 import { render, screen, fireEvent, cleanup } from '@testing-library/react';
 import { Table } from './Table.js';
 import type { TableColumn } from './table.types.js';
@@ -601,3 +601,74 @@ describe('Table — i18n', () => {
     expect(screen.queryByLabelText('Seleziona tutte')).not.toBeNull();
   });
 });
+
+describe('Table — Sprint 6 P2 refinements', () => {
+  // ───── D7: no-results vs no-data empty state ─────
+
+  it('shows the noData message when the dataset is genuinely empty', () => {
+    render(<Table rows={[]} cols={baseCols} getRowId={getRowId} />);
+    expect(screen.queryByText('No data')).not.toBeNull();
+  });
+
+  it('shows the noResults message when a search excludes every row', () => {
+    render(
+      <Table
+        rows={baseRows}
+        cols={baseCols}
+        getRowId={getRowId}
+        enableSearch
+        searchQuery="zzz-no-match"
+        searchDebounceMs={0}
+      />,
+    );
+    expect(screen.queryByText('No matching results')).not.toBeNull();
+    expect(screen.queryByText('No data')).toBeNull();
+  });
+
+  it('shows the noResults message when a filter excludes every row', () => {
+    render(
+      <Table
+        rows={baseRows}
+        cols={baseCols}
+        getRowId={getRowId}
+        filterModel={[{ field: 'name', op: 'contains', value: 'zzz-no-match' }]}
+      />,
+    );
+    expect(screen.queryByText('No matching results')).not.toBeNull();
+  });
+
+  // ───── T1: dev-warn when getRowId omitted + identity-sensitive feature ─────
+
+  it('warns in dev when getRowId is omitted and a sortable column exists', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    // baseCols has sortable columns; no getRowId passed.
+    render(<Table rows={baseRows} cols={baseCols} />);
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('`getRowId` is not set'),
+    );
+    warn.mockRestore();
+  });
+
+  it('does NOT warn when getRowId is provided', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Table rows={baseRows} cols={baseCols} getRowId={getRowId} />);
+    expect(warn).not.toHaveBeenCalledWith(
+      expect.stringContaining('`getRowId` is not set'),
+    );
+    warn.mockRestore();
+  });
+
+  it('does NOT warn when getRowId is omitted but no identity-sensitive feature is active', () => {
+    const warn = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    // Plain columns: not sortable, not searchable, no selection/expansion.
+    const plainCols: TableColumn<User>[] = [
+      { field: 'name', header: 'Name' },
+      { field: 'email', header: 'Email' },
+    ];
+    render(<Table rows={baseRows} cols={plainCols} />);
+    expect(warn).not.toHaveBeenCalledWith(
+      expect.stringContaining('`getRowId` is not set'),
+    );
+    warn.mockRestore();
+  });
+});

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode, type MouseEvent } from 'react';
+import { useMemo, useEffect, type ReactNode, type MouseEvent } from 'react';
 import { cn } from '../../utils/cn.js';
 import { useAccessState } from '../../hooks/useAccessState.js';
 import { Skeleton } from '../Skeleton/Skeleton.js';
@@ -27,6 +27,7 @@ import type {
 const DEFAULT_LABELS: Required<TableLabels> = {
   searchPlaceholder: 'Search...',
   noData: 'No data',
+  noResults: 'No matching results',
   loading: 'Loading…',
   ariaSortNone: 'Not sorted. Click to sort ascending.',
   ariaSortAscending: 'Sorted ascending. Click to sort descending.',
@@ -53,8 +54,7 @@ const DEFAULT_LABELS: Required<TableLabels> = {
   densitySpacious: 'Spacious',
   columnsButton: 'Columns',
   columnsTitle: 'Toggle columns',
-  columnsShowAll: 'Show all',
-  columnsHideAll: 'Hide all',
+  columnsToggleAll: 'Toggle all columns',
 };
 
 const DEFAULT_GET_ROW_ID = <T extends object>(_row: T, index: number) => String(index);
@@ -132,6 +132,31 @@ export function Table<T extends object>(props: TableProps<T>) {
   const labels = { ...DEFAULT_LABELS, ...labelsProp };
   const tableAccessState = useAccessState(tableAccess);
 
+  // Dev-only guard: `getRowId` is optional (positional-index fallback)
+  // but that fallback breaks row identity once rows reorder (sort) or
+  // change presence (search / filter) — selection + expansion state
+  // then jump to the wrong rows. Warn when it's omitted AND a feature
+  // that relies on stable identity is active. Stripped in production.
+  const getRowIdProvided = props.getRowId !== undefined;
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (getRowIdProvided) return;
+    const identityMatters =
+      rowSelection !== 'none' ||
+      expandable != null ||
+      enableSearch ||
+      cols.some((c) => Boolean(c.sortable));
+    if (identityMatters) {
+      console.warn(
+        '[Dashforge Table] `getRowId` is not set — falling back to the ' +
+          'positional row index. With sort / search / selection / ' +
+          'expandable rows active, the index-based key breaks row ' +
+          'identity when rows reorder. Pass a stable resolver, e.g. ' +
+          '`getRowId={(row) => row.id}`.',
+      );
+    }
+  }, [getRowIdProvided, rowSelection, expandable, enableSearch, cols]);
+
   // ───── Controllable state machinery ─────
 
   const [sortModel, setSortModel] = useControllableState<TableSortModel>({
@@ -341,7 +366,14 @@ export function Table<T extends object>(props: TableProps<T>) {
                 ? renderEmptyState({
                     totalColumnCount,
                     emptyState,
-                    fallback: labels.noData,
+                    // Distinguish a genuinely empty dataset from one
+                    // emptied by an active search / filter.
+                    fallback:
+                      rows.length > 0 &&
+                      (debouncedSearchQuery.trim().length > 0 ||
+                        filterModel.length > 0)
+                        ? labels.noResults
+                        : labels.noData,
                     cellClass: cn(v.cell(), v.emptyState(), slotProps?.emptyState?.className),
                   })
                 : sortedRows.map((row, idx) => {
@@ -733,6 +765,10 @@ function renderLoadingRows<T extends object>(args: {
   cellClass: string;
 }): ReactNode {
   const { count, visibleCols, showSelectionColumn, showExpandColumn, showRowActionsColumn, rowClass, cellClass } = args;
+  // No explicit row height here (unlike DataGrid's loading rows, which
+  // pin `rowHeight` for the virtualization math): Table is auto-height
+  // by design. Skeleton rows inherit the same density padding via
+  // `cellClass`, so they line up with real rows without a fixed height.
   return Array.from({ length: count }).map((_, i) => (
     <tr key={`loading-${i}`} className={rowClass} aria-busy="true">
       {showSelectionColumn && <td className={cellClass}><Skeleton variant="rectangle" width="16px" height="16px" /></td>}

package/src/components/Table/cells/RenderChip.tsx

@@ -53,15 +53,12 @@ const chipVariants = tv({
     { variant: 'soft', color: 'danger',    class: 'bg-danger-100 dark:bg-danger-950 text-danger-700 dark:text-danger-300' },
     { variant: 'soft', color: 'info',      class: 'bg-info-100 dark:bg-info-950 text-info-700 dark:text-info-300' },
     { variant: 'soft', color: 'secondary', class: 'bg-secondary-100 dark:bg-secondary-950 text-secondary-700 dark:text-secondary-300' },
-    // solid = full bg + light text
-    // solid neutral: bg + text both anchored to neutral palette
-    // (auto-inverts). `text-white` would not invert and would break
-    // contrast in light mode against a `bg-neutral-700` dark bg, so
-    // we stick to `text-neutral-50` (light text in light mode, dark
-    // in dark — wait, that's wrong too). Actually `text-neutral-50`
-    // auto-inverts: light text in light mode (against dark bg) is
-    // what we want; in dark mode `bg-neutral-700` becomes light AND
-    // `text-neutral-50` becomes dark — contrast preserved.
+    // solid = full bg + contrasting text.
+    // solid neutral: both `bg-neutral-700` and `text-neutral-50` sit
+    // on the neutral palette, so they auto-invert together via the
+    // CSS-var swap — bg/text contrast is preserved in BOTH modes.
+    // (`text-white` is deliberately NOT used here: white does not
+    // auto-invert, which would flip the contrast in dark mode.)
     { variant: 'solid', color: 'neutral',   class: 'bg-neutral-700 text-neutral-50' },
     { variant: 'solid', color: 'primary',   class: 'bg-primary-500 text-white' },
     { variant: 'solid', color: 'success',   class: 'bg-success-500 text-white' },

package/src/components/Table/cells/cells.test.tsx

@@ -0,0 +1,247 @@
+// @vitest-environment jsdom
+/**
+ * Unit tests for the Table cell renderer library — `RenderText`,
+ * `RenderTwoLine`, `RenderChip`, `RenderButton`, `RowActionsMenu`.
+ *
+ * Sprint 6 P4 — these shipped in Sprint 4.1 with only integration
+ * coverage (via Table/DataGrid tests). This file exercises them
+ * directly, including the RBAC + edge-case branches.
+ */
+import * as React from 'react';
+import { describe, it, expect, afterEach, beforeAll, vi } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { RenderText } from './RenderText.js';
+import { RenderTwoLine } from './RenderTwoLine.js';
+import { RenderChip } from './RenderChip.js';
+import { RenderButton } from './RenderButton.js';
+import { RowActionsMenu } from './RowActionsMenu.js';
+
+void React;
+afterEach(() => cleanup());
+
+beforeAll(() => {
+  if (typeof globalThis.ResizeObserver === 'undefined') {
+    (globalThis as unknown as { ResizeObserver: unknown }).ResizeObserver =
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      };
+  }
+});
+
+describe('RenderText', () => {
+  it('renders the value in a span', () => {
+    render(<RenderText value="hello" />);
+    expect(screen.getByText('hello').tagName).toBe('SPAN');
+  });
+
+  it('applies the truncate class when truncate is set', () => {
+    render(<RenderText value="long text" truncate />);
+    expect(screen.getByText('long text').className).toContain('truncate');
+  });
+
+  it('applies the muted neutral color when muted is set', () => {
+    render(<RenderText value="dim" muted />);
+    expect(screen.getByText('dim').className).toContain('text-neutral-500');
+  });
+
+  it('merges a custom className', () => {
+    render(<RenderText value="x" className="custom-cls" />);
+    expect(screen.getByText('x').className).toContain('custom-cls');
+  });
+
+  it('renders nothing extra when no flags are set', () => {
+    render(<RenderText value="plain" />);
+    const el = screen.getByText('plain');
+    expect(el.className).not.toContain('truncate');
+    expect(el.className).not.toContain('text-neutral-500');
+  });
+});
+
+describe('RenderTwoLine', () => {
+  it('renders both primary and secondary text', () => {
+    render(<RenderTwoLine primary="Jane Doe" secondary="jane@example.com" />);
+    expect(screen.getByText('Jane Doe')).not.toBeNull();
+    expect(screen.getByText('jane@example.com')).not.toBeNull();
+  });
+
+  it('primary is font-medium, secondary is muted + smaller', () => {
+    render(<RenderTwoLine primary="P" secondary="S" />);
+    expect(screen.getByText('P').className).toContain('font-medium');
+    expect(screen.getByText('S').className).toContain('text-neutral-500');
+  });
+
+  it('merges a custom className on the wrapper', () => {
+    const { container } = render(
+      <RenderTwoLine primary="P" secondary="S" className="twoline-cls" />,
+    );
+    expect(container.firstElementChild?.className).toContain('twoline-cls');
+  });
+});
+
+describe('RenderChip', () => {
+  it('renders children', () => {
+    render(<RenderChip>active</RenderChip>);
+    expect(screen.getByText('active')).not.toBeNull();
+  });
+
+  it('defaults to soft + neutral + sm', () => {
+    render(<RenderChip>x</RenderChip>);
+    // soft neutral → bg-neutral-100
+    expect(screen.getByText('x').className).toContain('bg-neutral-100');
+  });
+
+  it.each(['primary', 'success', 'warning', 'danger', 'info', 'secondary'] as const)(
+    'renders soft variant for the %s intent',
+    (color) => {
+      render(<RenderChip color={color}>{color}</RenderChip>);
+      expect(screen.getByText(color).className).toContain(`bg-${color}-100`);
+    },
+  );
+
+  it('renders the solid variant', () => {
+    render(
+      <RenderChip variant="solid" color="primary">
+        solid
+      </RenderChip>,
+    );
+    expect(screen.getByText('solid').className).toContain('bg-primary-500');
+  });
+
+  it('renders the outline variant', () => {
+    render(
+      <RenderChip variant="outline" color="danger">
+        outline
+      </RenderChip>,
+    );
+    expect(screen.getByText('outline').className).toContain('border-danger-500');
+  });
+
+  it('renders the md size', () => {
+    render(
+      <RenderChip size="md">md</RenderChip>,
+    );
+    expect(screen.getByText('md').className).toContain('h-6');
+  });
+
+  it('merges a custom className', () => {
+    render(<RenderChip className="chip-cls">x</RenderChip>);
+    expect(screen.getByText('x').className).toContain('chip-cls');
+  });
+});
+
+describe('RenderButton', () => {
+  it('renders the label inside a button', () => {
+    render(<RenderButton label="Edit" />);
+    expect(screen.getByRole('button', { name: 'Edit' })).not.toBeNull();
+  });
+
+  it('fires onClick when clicked', () => {
+    const onClick = vi.fn();
+    render(<RenderButton label="Go" onClick={onClick} />);
+    fireEvent.click(screen.getByRole('button', { name: 'Go' }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('honors the disabled prop', () => {
+    const onClick = vi.fn();
+    render(<RenderButton label="Nope" onClick={onClick} disabled />);
+    const btn = screen.getByRole('button', { name: 'Nope' }) as HTMLButtonElement;
+    expect(btn.disabled).toBe(true);
+    fireEvent.click(btn);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+});
+
+describe('RowActionsMenu', () => {
+  interface Row {
+    id: string;
+  }
+  const row: Row = { id: 'r1' };
+
+  it('renders the default 3-dot trigger', () => {
+    render(
+      <RowActionsMenu
+        row={row}
+        actions={[{ label: 'Edit', onClick: () => {} }]}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'Row actions' })).not.toBeNull();
+  });
+
+  it('returns null when there are no visible actions', () => {
+    const { container } = render(
+      <RowActionsMenu row={row} actions={[]} />,
+    );
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('opens the menu and renders the action items', () => {
+    render(
+      <RowActionsMenu
+        row={row}
+        actions={[
+          { label: 'Edit', onClick: () => {} },
+          { label: 'Delete', onClick: () => {}, color: 'danger' },
+        ]}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
+    expect(screen.getByRole('menuitem', { name: 'Edit' })).not.toBeNull();
+    expect(screen.getByRole('menuitem', { name: 'Delete' })).not.toBeNull();
+  });
+
+  it('invokes the action onClick with the row', () => {
+    const onClick = vi.fn();
+    render(
+      <RowActionsMenu row={row} actions={[{ label: 'Edit', onClick }]} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
+    fireEvent.click(screen.getByRole('menuitem', { name: 'Edit' }));
+    expect(onClick).toHaveBeenCalledWith(row);
+  });
+
+  it('filters out actions whose RBAC says hide', () => {
+    render(
+      <RowActionsMenu
+        row={row}
+        actions={[
+          { label: 'Edit', onClick: () => {} },
+          {
+            label: 'SecretDelete',
+            onClick: () => {},
+            access: { onUnauthorized: 'hide' },
+          },
+        ]}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
+    expect(screen.queryByRole('menuitem', { name: 'Edit' })).not.toBeNull();
+    expect(screen.queryByRole('menuitem', { name: 'SecretDelete' })).toBeNull();
+  });
+
+  it('renders a disabled action item when action.disabled is set', () => {
+    render(
+      <RowActionsMenu
+        row={row}
+        actions={[{ label: 'Edit', onClick: () => {}, disabled: true }]}
+      />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Row actions' }));
+    const item = screen.getByRole('menuitem', { name: 'Edit' }) as HTMLButtonElement;
+    expect(item.disabled).toBe(true);
+  });
+
+  it('uses a custom trigger when provided', () => {
+    render(
+      <RowActionsMenu
+        row={row}
+        actions={[{ label: 'Edit', onClick: () => {} }]}
+        trigger={<button type="button">custom-trigger</button>}
+      />,
+    );
+    expect(screen.getByRole('button', { name: 'custom-trigger' })).not.toBeNull();
+    expect(screen.queryByRole('button', { name: 'Row actions' })).toBeNull();
+  });
+});

package/src/components/Table/table.types.ts

@@ -258,7 +258,14 @@ export type TableRowSelectionMode = 'none' | 'single' | 'multiple';
  */
 export interface TableLabels {
   searchPlaceholder?: string;
+  /** Shown when the dataset itself is empty (0 input rows). */
   noData?: string;
+  /**
+   * Shown when the dataset has rows but an active search / filter
+   * excluded them all. Distinct from `noData` so the user can tell
+   * "nothing here" from "nothing matches your query".
+   */
+  noResults?: string;
   loading?: string;
   ariaSortNone?: string;
   ariaSortAscending?: string;
@@ -291,8 +298,8 @@ export interface TableLabels {
   /** Column visibility menu (Popover-based, auto-commit). */
   columnsButton?: string;
   columnsTitle?: string;
-  columnsShowAll?: string;
-  columnsHideAll?: string;
+  /** Aria-label for the tri-state show/hide-all master checkbox. */
+  columnsToggleAll?: string;
 }
 
 // ───── Slot props ─────
@@ -353,7 +360,25 @@ export interface TableProps<T extends object>
   // ───── Data ─────
   rows: T[];
   cols: TableColumn<T>[];
-  /** Stable row id resolver. Default: positional index. */
+  /**
+   * Stable row-id resolver — the React key + the identity used by
+   * selection and row-expansion state.
+   *
+   * **Strongly recommended whenever sort / search / selection /
+   * expandable rows are used.** The default falls back to the
+   * positional index (`String(index)`); once rows reorder (sort) or
+   * change presence (search / filter), index `2` points at a
+   * *different* row, so selection and expansion state silently jump
+   * to the wrong rows. Pass a value derived from the data itself:
+   *
+   * ```tsx
+   * <Table getRowId={(row) => row.id} … />
+   * ```
+   *
+   * Dashforge emits a `console.warn` in development when `getRowId`
+   * is omitted and one of those features is active. (`<DataGrid>`
+   * makes this prop required for the same reason.)
+   */
   getRowId?: (row: T, index: number) => string;
 
   // ───── Sort ─────

package/src/components/Typography/Typography.test.tsx

@@ -84,6 +84,21 @@ describe('<Typography>', () => {
       const { container } = render(<Typography color="inherit">x</Typography>);
       expect(container.firstElementChild?.className).toContain('text-inherit');
     });
+
+    it('defaults to color="neutral" (text-neutral-900, NOT text-inherit)', () => {
+      // Sprint 6 P5 fix — a bare <Typography> must emit the
+      // auto-inverting neutral token, not inherit the consumer's
+      // arbitrary root colour (which broke dark-mode consistency).
+      const { container } = render(<Typography>x</Typography>);
+      const cls = container.firstElementChild?.className ?? '';
+      expect(cls).toContain('text-neutral-900');
+      expect(cls).not.toContain('text-inherit');
+    });
+
+    it('color="muted" emits text-neutral-600', () => {
+      const { container } = render(<Typography color="muted">x</Typography>);
+      expect(container.firstElementChild?.className).toContain('text-neutral-600');
+    });
   });
 
   // ─── Override semantics ─────────────────────────────────────────────

package/src/components/Typography/typography.variants.ts

@@ -55,6 +55,15 @@ export const typographyVariants = tv({
      * paints white text).
      */
     color: {
+      // `inherit` is the explicit escape hatch — use it on a
+      // `<Typography>` inside a coloured surface (e.g.
+      // `<Box variant="solid" color="primary">` paints white text)
+      // so the text picks up the surface colour. It is NO LONGER the
+      // default: a bare `<Typography>` would otherwise inherit the
+      // consuming app's arbitrary root colour (often OS-`prefers-
+      // color-scheme` driven), which diverges from the Dashforge
+      // `data-dash-tw-theme` mode and breaks colour consistency in
+      // dark mode. The default is now `neutral` — see `defaultVariants`.
       inherit:   'text-inherit',
       primary:   'text-primary-700 dark:text-primary-400',
       secondary: 'text-secondary-700 dark:text-secondary-400',
@@ -109,7 +118,11 @@ export const typographyVariants = tv({
 
   defaultVariants: {
     variant: 'body1',
-    color:   'inherit',
+    // `neutral` (not `inherit`): a bare `<Typography>` emits
+    // `text-neutral-900`, which auto-inverts via the dashforgePreset()
+    // CSS-var swap and follows the Dashforge mode. Pass
+    // `color="inherit"` explicitly inside a coloured surface.
+    color:   'neutral',
     align:   'left',
   },
 });

package/src/index.ts

@@ -108,6 +108,26 @@ export type {
 } from './components/DateTimePicker/dateTimePicker.types.js';
 export { dateTimePickerVariants } from './components/DateTimePicker/dateTimePicker.variants.js';
 
+// Custom calendar suite — Calendar primitive + bridge-integrated DatePicker,
+// both built on the shared headless `@dashforge/calendar-core` engine.
+
+export { Calendar } from './components/Calendar/Calendar.js';
+export type {
+  CalendarProps,
+  CalendarSlotProps,
+} from './components/Calendar/calendar.types.js';
+export {
+  calendarVariants,
+  calendarDayVariants,
+} from './components/Calendar/calendar.variants.js';
+
+export { DatePicker } from './components/DatePicker/DatePicker.js';
+export type {
+  DatePickerProps,
+  DatePickerSlotProps,
+} from './components/DatePicker/datePicker.types.js';
+export { datePickerVariants } from './components/DatePicker/datePicker.variants.js';
+
 // F6 layout: router-agnostic navigation primitives.
 
 export { Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs.js';
@@ -353,4 +373,4 @@ export type { VariantProps } from 'tailwind-variants';
 /**
  * Package version (synced with `package.json` at publish time).
  */
-export const VERSION = '0.7.0-beta';
+export const VERSION = '0.9.1-beta';