@molecule/app-transactions-table-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,202 @@
+<!--
+AUTO-GENERATED — DO NOT EDIT THIS FILE.
+Generated by `mlcl sync-docs` from the package's src/index.ts JSDoc + mlcl/registry.json.
+Edits here are overwritten on the next commit (molecule's pre-commit hook regenerates).
+To change this document, edit the module-level JSDoc in src/index.ts.
+Generated: 2026-08-04T00:41:27.360Z
+-->
+
+# @molecule/app-transactions-table-react
+
+> **Auto-generated, AI-first package reference** for the [molecule.dev](https://molecule.dev) ecosystem.
+> It is written to be read by coding agents as much as by people, and is generated from this
+> package's source — edit `src/index.ts` JSDoc, not this file.
+
+`@molecule/app-transactions-table-react` — financial transactions
+table primitive.
+
+- Columns: Date / Description (with category icon tile) / Category
+  chip / Account / signed Amount (income tinted with the theme's
+  `primary` token, expense with `tertiary`).
+- Loading skeleton, error state with retry, customisable empty state.
+- Stateless about routing: pass `onRowClick` to navigate.
+- Localisable: `formatAmount`, `formatDate`, `headers`, `retryLabel`
+  and `emptyState` override the en-US/USD/English defaults.
+
+Generalised from the personal-finance TransactionsTable. Works for
+any income/expense ledger: subscription billing rows, refund tables,
+payout history, etc.
+
+## Quick Start
+
+```tsx
+import {
+  TransactionsTable,
+  type CategoryStyle,
+  type TransactionRowData,
+} from '@molecule/app-transactions-table-react'
+
+const categoryStyles: Record<string, CategoryStyle> = {
+  groceries: { bg: '#d1fae5', color: '#059669', icon: 'shopping_cart' },
+  rent: { bg: '#ffe4e6', color: '#e11d48', icon: 'home' },
+}
+
+const rows: TransactionRowData[] = [
+  {
+    id: 't1',
+    date: '2026-03-01',
+    description: 'Groceries',
+    categoryKey: 'groceries',
+    categoryLabel: 'Groceries',
+    account: 'Checking',
+    amount: -54.2,
+  },
+]
+
+<TransactionsTable
+  transactions={rows}
+  categoryStyles={categoryStyles}
+  onRowClick={(tx) => console.log('open', tx.id)}
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-transactions-table-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `CategoryStyle`
+
+Visual treatment for a particular category key.
+
+```typescript
+interface CategoryStyle {
+  bg: string
+  color: string
+  icon: string
+}
+```
+
+#### `TransactionRowData`
+
+Per-row data. Stays minimal so the consumer can fold their domain shape in.
+
+```typescript
+interface TransactionRowData {
+  id: string
+  date: string | Date
+  description: ReactNode
+  /** Category key (used for the icon + chip styling lookup). */
+  categoryKey: string
+  categoryLabel: ReactNode
+  /** Account name / id rendered in the Account column. */
+  account: ReactNode
+  /** Signed amount (positive = income, negative = expense) — used for the colour + sign. */
+  amount: number
+  /** Override sign detection (e.g. when `type` is the canonical signal). */
+  isIncome?: boolean
+}
+```
+
+#### `TransactionsTableProps`
+
+Props for the {@link TransactionsTable} component.
+
+```typescript
+interface TransactionsTableProps {
+  transactions: TransactionRowData[]
+  loading?: boolean
+  error?: ReactNode
+  onRetry?: () => void
+  retryLabel?: ReactNode
+  /** Map a category key (lowercased automatically) to a style; falls back to neutral grey. */
+  categoryStyles?: Record<string, CategoryStyle>
+  /** Localised currency formatter; defaults to en-US USD. */
+  formatAmount?: (amount: number) => string
+  /** Localised date formatter; defaults to "MMM d, yyyy". */
+  formatDate?: (date: string | Date) => string
+  /** Click handler for each row (typically navigates to a detail page). */
+  onRowClick?: (row: TransactionRowData) => void
+  /** Column header labels (pre-translated). */
+  headers?: {
+    date?: ReactNode
+    description?: ReactNode
+    category?: ReactNode
+    account?: ReactNode
+    amount?: ReactNode
+  }
+  /** Empty-state slot (rendered when transactions.length === 0). */
+  emptyState?: ReactNode
+  /** Optional footer slot (typically a pagination control). */
+  footer?: ReactNode
+  className?: string
+}
+```
+
+### Functions
+
+#### `TransactionsTable(props)`
+
+Renders a pageable financial transactions table with loading, error, and empty states.
+
+```typescript
+function TransactionsTable({
+  transactions,
+  loading,
+  error,
+  onRetry,
+  retryLabel = 'Try again',
+  categoryStyles,
+  formatAmount = DEFAULT_AMOUNT_FORMAT,
+  formatDate = DEFAULT_DATE_FORMAT,
+  onRowClick,
+  headers,
+  emptyState,
+  footer,
+  className,
+}: TransactionsTableProps): JSX.Element
+```
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.0
+- `@molecule/app-ui` ^1.0.0
+- `@molecule/app-ui-react` ^1.0.0
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+A custom `formatAmount` receives the SIGNED amount but must return the
+absolute formatted value — the component prepends its own +/− sign (the
+default already does `Math.abs`). Header labels, `retryLabel` and the
+date/amount formats default to English/en-US/USD — pass translated
+overrides (`headers`, `retryLabel`) in non-English apps; there is no
+companion locale bond. `categoryStyles` keys are matched against the
+LOWERCASED `categoryKey`; `icon` is a Material Symbols ligature name, so
+the host must load that font. Styling mixes ClassMap with raw Tailwind +
+Material-3 tokens (`bg-surface-container-lowest`, `font-headline`,
+`text-slate-400/500`), so a Tailwind build source-scanning this package's
+dist + an M3 theme are prerequisites, and the slate grays lean
+light-theme. Props (documented on the exported `TransactionsTableProps`
+interface): transactions, loading, error, onRetry, retryLabel,
+categoryStyles, formatAmount, formatDate, onRowClick, headers,
+emptyState, footer, className.

package/dist/TransactionsTable.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Financial transactions table with date / description+icon / category
+ * chip / account / signed amount columns, plus loading skeleton, error
+ * state, and empty state.
+ *
+ * Stateless about routing — pass `onRowClick` to navigate, or omit it
+ * to render an inert table.
+ *
+ * @module
+ */
+import type { JSX, ReactNode } from 'react';
+import type { CategoryStyle, TransactionRowData } from './types.js';
+/** Props for the {@link TransactionsTable} component. */
+export interface TransactionsTableProps {
+    transactions: TransactionRowData[];
+    loading?: boolean;
+    error?: ReactNode;
+    onRetry?: () => void;
+    retryLabel?: ReactNode;
+    /** Map a category key (lowercased automatically) to a style; falls back to neutral grey. */
+    categoryStyles?: Record<string, CategoryStyle>;
+    /** Localised currency formatter; defaults to en-US USD. */
+    formatAmount?: (amount: number) => string;
+    /** Localised date formatter; defaults to "MMM d, yyyy". */
+    formatDate?: (date: string | Date) => string;
+    /** Click handler for each row (typically navigates to a detail page). */
+    onRowClick?: (row: TransactionRowData) => void;
+    /** Column header labels (pre-translated). */
+    headers?: {
+        date?: ReactNode;
+        description?: ReactNode;
+        category?: ReactNode;
+        account?: ReactNode;
+        amount?: ReactNode;
+    };
+    /** Empty-state slot (rendered when transactions.length === 0). */
+    emptyState?: ReactNode;
+    /** Optional footer slot (typically a pagination control). */
+    footer?: ReactNode;
+    className?: string;
+}
+/** Renders a pageable financial transactions table with loading, error, and empty states. */
+export declare function TransactionsTable({ transactions, loading, error, onRetry, retryLabel, categoryStyles, formatAmount, formatDate, onRowClick, headers, emptyState, footer, className, }: TransactionsTableProps): JSX.Element;
+export default TransactionsTable;
+//# sourceMappingURL=TransactionsTable.d.ts.map

package/dist/TransactionsTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TransactionsTable.d.ts","sourceRoot":"","sources":["../src/TransactionsTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3C,OAAO,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEnE,yDAAyD;AACzD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,kBAAkB,EAAE,CAAA;IAClC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,4FAA4F;IAC5F,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAC9C,2DAA2D;IAC3D,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAA;IACzC,2DAA2D;IAC3D,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,MAAM,CAAA;IAC5C,yEAAyE;IACzE,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAA;IAC9C,6CAA6C;IAC7C,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,SAAS,CAAA;QAChB,WAAW,CAAC,EAAE,SAAS,CAAA;QACvB,QAAQ,CAAC,EAAE,SAAS,CAAA;QACpB,OAAO,CAAC,EAAE,SAAS,CAAA;QACnB,MAAM,CAAC,EAAE,SAAS,CAAA;KACnB,CAAA;IACD,kEAAkE;IAClE,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAgBD,6FAA6F;AAC7F,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAwB,EACxB,cAAc,EACd,YAAoC,EACpC,UAAgC,EAChC,UAAU,EACV,OAAO,EACP,UAAU,EACV,MAAM,EACN,SAAS,GACV,EAAE,sBAAsB,GAAG,GAAG,CAAC,OAAO,CA4MtC;AAED,eAAe,iBAAiB,CAAA"}

package/dist/TransactionsTable.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getClassMap } from '@molecule/app-ui';
+const NEUTRAL_STYLE = { bg: '#f3f4f6', color: '#374151', icon: 'receipt' };
+const DEFAULT_AMOUNT_FORMAT = (n) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Math.abs(n));
+const DEFAULT_DATE_FORMAT = (d) => {
+    if (!d)
+        return '';
+    return new Date(d).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+    });
+};
+/** Renders a pageable financial transactions table with loading, error, and empty states. */
+export function TransactionsTable({ transactions, loading, error, onRetry, retryLabel = 'Try again', categoryStyles, formatAmount = DEFAULT_AMOUNT_FORMAT, formatDate = DEFAULT_DATE_FORMAT, onRowClick, headers, emptyState, footer, className, }) {
+    const cm = getClassMap();
+    if (loading) {
+        return (_jsx("div", { className: cm.cn('bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm', cm.sp('p', 6), className), "data-mol-id": "transactions-table-loading", children: Array.from({ length: 6 }).map((_, i) => (_jsx("div", { "aria-hidden": "true", className: cm.cn('h-12 bg-surface-container-low rounded-lg animate-pulse', cm.sp('mb', 3)) }, i))) }));
+    }
+    if (error) {
+        return (_jsxs("div", { role: "alert", className: cm.cn('bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm', cm.sp('p', 10), cm.textCenter, className), "data-mol-id": "transactions-table-error", children: [_jsx("p", { className: cm.cn('text-tertiary', cm.textSize('sm'), cm.sp('mb', 3)), children: error }), onRetry ? (_jsx("button", { onClick: onRetry, className: cm.cn(cm.sp('px', 4), cm.sp('py', 2), cm.textSize('sm'), cm.fontWeight('bold'), 'bg-primary text-on-primary rounded-lg'), children: retryLabel })) : null] }));
+    }
+    if (transactions.length === 0 && emptyState) {
+        return (_jsx("div", { className: cm.cn('bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm', cm.sp('p', 12), cm.textCenter, cm.stack(4), className), "data-mol-id": "transactions-table-empty", children: emptyState }));
+    }
+    return (_jsx("div", { className: cm.cn('bg-surface-container-lowest rounded-3xl overflow-hidden shadow-sm', className), children: _jsxs("div", { className: cm.cn('overflow-x-auto'), children: [_jsxs("table", { className: cm.cn(cm.w('full'), 'text-left border-collapse'), children: [_jsx("thead", { children: _jsx("tr", { className: cm.cn('bg-surface-container-low/50 border-none'), children: [
+                                    { key: 'date', label: headers?.date ?? 'Date', right: false },
+                                    {
+                                        key: 'description',
+                                        label: headers?.description ?? 'Description',
+                                        right: false,
+                                    },
+                                    { key: 'category', label: headers?.category ?? 'Category', right: false },
+                                    { key: 'account', label: headers?.account ?? 'Account', right: false },
+                                    { key: 'amount', label: headers?.amount ?? 'Amount', right: true },
+                                ].map((h) => (_jsx("th", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('xs'), cm.fontWeight('bold'), 'font-headline uppercase tracking-widest text-slate-400', h.right ? cm.textRight : ''), children: h.label }, h.key))) }) }), _jsx("tbody", { className: cm.cn('divide-y divide-transparent'), children: transactions.map((tx) => {
+                                const catKey = tx.categoryKey.toLowerCase();
+                                const catStyle = categoryStyles?.[catKey] ?? NEUTRAL_STYLE;
+                                const isIncome = tx.isIncome ?? tx.amount >= 0;
+                                return (_jsxs("tr", { "data-mol-id": "transactions-table-row", className: cm.cn(onRowClick ? cm.cursorPointer : '', 'group hover:bg-surface-container-low transition-colors duration-200'), onClick: onRowClick ? () => onRowClick(tx) : undefined, children: [_jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('sm'), 'text-slate-500'), children: formatDate(tx.date) }), _jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5)), children: _jsxs("div", { className: cm.cn(cm.flex({ align: 'center' }), 'gap-3'), children: [_jsx("div", { className: cm.cn(cm.w(10), cm.h(10), cm.roundedFull, cm.flex({ align: 'center', justify: 'center' })), style: { backgroundColor: catStyle.bg, color: catStyle.color }, children: _jsx("span", { className: cm.cn('material-symbols-outlined'), children: catStyle.icon }) }), _jsx("span", { className: cm.cn(cm.fontWeight('bold'), 'text-on-surface'), children: tx.description })] }) }), _jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5)), children: _jsx("span", { className: cm.cn(cm.sp('px', 3), cm.sp('py', 1), cm.fontWeight('bold'), cm.roundedFull, 'text-[10px] uppercase tracking-wider'), style: { backgroundColor: catStyle.bg, color: catStyle.color }, children: tx.categoryLabel }) }), _jsx("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textSize('sm'), 'text-slate-500 italic'), children: tx.account }), _jsxs("td", { className: cm.cn(cm.sp('px', 6), cm.sp('py', 5), cm.textRight, cm.fontWeight('bold'), 'font-headline', isIncome ? 'text-primary' : 'text-tertiary'), children: [isIncome ? '+' : '-', formatAmount(tx.amount)] })] }, tx.id));
+                            }) })] }), footer ?? null] }) }));
+}
+export default TransactionsTable;

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * `@molecule/app-transactions-table-react` — financial transactions
+ * table primitive.
+ *
+ * - Columns: Date / Description (with category icon tile) / Category
+ *   chip / Account / signed Amount (income tinted with the theme's
+ *   `primary` token, expense with `tertiary`).
+ * - Loading skeleton, error state with retry, customisable empty state.
+ * - Stateless about routing: pass `onRowClick` to navigate.
+ * - Localisable: `formatAmount`, `formatDate`, `headers`, `retryLabel`
+ *   and `emptyState` override the en-US/USD/English defaults.
+ *
+ * Generalised from the personal-finance TransactionsTable. Works for
+ * any income/expense ledger: subscription billing rows, refund tables,
+ * payout history, etc.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   TransactionsTable,
+ *   type CategoryStyle,
+ *   type TransactionRowData,
+ * } from '@molecule/app-transactions-table-react'
+ *
+ * const categoryStyles: Record<string, CategoryStyle> = {
+ *   groceries: { bg: '#d1fae5', color: '#059669', icon: 'shopping_cart' },
+ *   rent: { bg: '#ffe4e6', color: '#e11d48', icon: 'home' },
+ * }
+ *
+ * const rows: TransactionRowData[] = [
+ *   {
+ *     id: 't1',
+ *     date: '2026-03-01',
+ *     description: 'Groceries',
+ *     categoryKey: 'groceries',
+ *     categoryLabel: 'Groceries',
+ *     account: 'Checking',
+ *     amount: -54.2,
+ *   },
+ * ]
+ *
+ * <TransactionsTable
+ *   transactions={rows}
+ *   categoryStyles={categoryStyles}
+ *   onRowClick={(tx) => console.log('open', tx.id)}
+ * />
+ * ```
+ *
+ * @remarks
+ * A custom `formatAmount` receives the SIGNED amount but must return the
+ * absolute formatted value — the component prepends its own +/− sign (the
+ * default already does `Math.abs`). Header labels, `retryLabel` and the
+ * date/amount formats default to English/en-US/USD — pass translated
+ * overrides (`headers`, `retryLabel`) in non-English apps; there is no
+ * companion locale bond. `categoryStyles` keys are matched against the
+ * LOWERCASED `categoryKey`; `icon` is a Material Symbols ligature name, so
+ * the host must load that font. Styling mixes ClassMap with raw Tailwind +
+ * Material-3 tokens (`bg-surface-container-lowest`, `font-headline`,
+ * `text-slate-400/500`), so a Tailwind build source-scanning this package's
+ * dist + an M3 theme are prerequisites, and the slate grays lean
+ * light-theme. Props (documented on the exported `TransactionsTableProps`
+ * interface): transactions, loading, error, onRetry, retryLabel,
+ * categoryStyles, formatAmount, formatDate, onRowClick, headers,
+ * emptyState, footer, className.
+ *
+ * @module
+ */
+export * from './TransactionsTable.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AAEH,cAAc,wBAAwB,CAAA;AACtC,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,69 @@
+/**
+ * `@molecule/app-transactions-table-react` — financial transactions
+ * table primitive.
+ *
+ * - Columns: Date / Description (with category icon tile) / Category
+ *   chip / Account / signed Amount (income tinted with the theme's
+ *   `primary` token, expense with `tertiary`).
+ * - Loading skeleton, error state with retry, customisable empty state.
+ * - Stateless about routing: pass `onRowClick` to navigate.
+ * - Localisable: `formatAmount`, `formatDate`, `headers`, `retryLabel`
+ *   and `emptyState` override the en-US/USD/English defaults.
+ *
+ * Generalised from the personal-finance TransactionsTable. Works for
+ * any income/expense ledger: subscription billing rows, refund tables,
+ * payout history, etc.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   TransactionsTable,
+ *   type CategoryStyle,
+ *   type TransactionRowData,
+ * } from '@molecule/app-transactions-table-react'
+ *
+ * const categoryStyles: Record<string, CategoryStyle> = {
+ *   groceries: { bg: '#d1fae5', color: '#059669', icon: 'shopping_cart' },
+ *   rent: { bg: '#ffe4e6', color: '#e11d48', icon: 'home' },
+ * }
+ *
+ * const rows: TransactionRowData[] = [
+ *   {
+ *     id: 't1',
+ *     date: '2026-03-01',
+ *     description: 'Groceries',
+ *     categoryKey: 'groceries',
+ *     categoryLabel: 'Groceries',
+ *     account: 'Checking',
+ *     amount: -54.2,
+ *   },
+ * ]
+ *
+ * <TransactionsTable
+ *   transactions={rows}
+ *   categoryStyles={categoryStyles}
+ *   onRowClick={(tx) => console.log('open', tx.id)}
+ * />
+ * ```
+ *
+ * @remarks
+ * A custom `formatAmount` receives the SIGNED amount but must return the
+ * absolute formatted value — the component prepends its own +/− sign (the
+ * default already does `Math.abs`). Header labels, `retryLabel` and the
+ * date/amount formats default to English/en-US/USD — pass translated
+ * overrides (`headers`, `retryLabel`) in non-English apps; there is no
+ * companion locale bond. `categoryStyles` keys are matched against the
+ * LOWERCASED `categoryKey`; `icon` is a Material Symbols ligature name, so
+ * the host must load that font. Styling mixes ClassMap with raw Tailwind +
+ * Material-3 tokens (`bg-surface-container-lowest`, `font-headline`,
+ * `text-slate-400/500`), so a Tailwind build source-scanning this package's
+ * dist + an M3 theme are prerequisites, and the slate grays lean
+ * light-theme. Props (documented on the exported `TransactionsTableProps`
+ * interface): transactions, loading, error, onRetry, retryLabel,
+ * categoryStyles, formatAmount, formatDate, onRowClick, headers,
+ * emptyState, footer, className.
+ *
+ * @module
+ */
+export * from './TransactionsTable.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Types for the transactions table.
+ *
+ * @module
+ */
+import type { ReactNode } from 'react';
+/** Per-row data. Stays minimal so the consumer can fold their domain shape in. */
+export interface TransactionRowData {
+    id: string;
+    date: string | Date;
+    description: ReactNode;
+    /** Category key (used for the icon + chip styling lookup). */
+    categoryKey: string;
+    categoryLabel: ReactNode;
+    /** Account name / id rendered in the Account column. */
+    account: ReactNode;
+    /** Signed amount (positive = income, negative = expense) — used for the colour + sign. */
+    amount: number;
+    /** Override sign detection (e.g. when `type` is the canonical signal). */
+    isIncome?: boolean;
+}
+/** Visual treatment for a particular category key. */
+export interface CategoryStyle {
+    bg: string;
+    color: string;
+    icon: string;
+}
+//# 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;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,kFAAkF;AAClF,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IACnB,WAAW,EAAE,SAAS,CAAA;IACtB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAA;IACnB,aAAa,EAAE,SAAS,CAAA;IACxB,wDAAwD;IACxD,OAAO,EAAE,SAAS,CAAA;IAClB,0FAA0F;IAC1F,MAAM,EAAE,MAAM,CAAA;IACd,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,sDAAsD;AACtD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;CACb"}

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Types for the transactions table.
+ *
+ * @module
+ */
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@molecule/app-transactions-table-react",
+  "version": "1.0.0",
+  "description": "Financial transactions table: date / description+icon / category chip / account / signed amount columns. Loading skeleton, error state, empty state. Extracted from personal-finance TransactionsTable.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "molecule",
+    "transactions",
+    "finance",
+    "ledger",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "@molecule/app-ui-react": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@molecule/app-ui-react": "1.0.0",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "react": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}