@molecule/app-amount-input-react 1.0.0 → 1.0.2

package/README.md

@@ -0,0 +1,158 @@
+<!--
+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-04T01:49:59.720Z
+-->
+
+# @molecule/app-amount-input-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.
+
+React amount input with type toggle.
+
+Exports:
+
+- `<AmountInput>` — large currency input with income/expense toggle.
+- `AmountType` — `'income' | 'expense' | 'transfer' | 'other'`.
+- `formatCurrency` — convenience re-export.
+
+## Quick Start
+
+```tsx
+import { AmountInput } from '@molecule/app-amount-input-react'
+
+const [amount, setAmount] = useState<number | ''>(0)
+const [type, setType] = useState<'income' | 'expense'>('expense')
+
+<AmountInput
+  amount={amount}
+  onAmountChange={setAmount}
+  type={type}
+  onTypeChange={(t) => setType(t as 'income' | 'expense')}
+  currencySymbol="$"
+  size="lg"
+/>
+```
+
+## Type
+
+`feature`
+
+## Installation
+
+```bash
+npm install @molecule/app-amount-input-react @molecule/app-react @molecule/app-ui @molecule/app-ui-react react
+npm install -D @types/react
+```
+
+## API
+
+### Interfaces
+
+#### `AmountInputProps`
+
+Props for {@link AmountInput}.
+
+```typescript
+interface AmountInputProps {
+  /** Current numeric amount (major units). */
+  amount: number | ''
+  /** Called whenever the amount text changes. */
+  onAmountChange: (amount: number | '') => void
+  /** Optional type (income/expense/transfer) toggle. */
+  type?: AmountType
+  /** Called when the user changes the type. When omitted, the toggle is hidden. */
+  onTypeChange?: (type: AmountType) => void
+  /** Type options to show in the toggle. Defaults to `['income', 'expense']`. */
+  typeOptions?: AmountType[]
+  /**
+   * Optional per-type label overrides. A value provided for a type wins over
+   * the translated / `defaultValue` label (prop > `t()` > default), letting a
+   * consumer relabel the toggle without wiring a locale bond.
+   */
+  typeLabels?: Partial<Record<AmountType, string>>
+  /** Currency symbol or label rendered to the left of the input. Defaults to `'$'`. */
+  currencySymbol?: string
+  /**
+   * Accessible label for the numeric input. Overrides the translated /
+   * `defaultValue` `'Amount'` (prop > `t()` > default).
+   */
+  ariaLabel?: string
+  /** Input size. */
+  size?: 'md' | 'lg' | 'xl'
+  /** Extra classes. */
+  className?: string
+}
+```
+
+### Types
+
+#### `AmountType`
+
+Transaction type used to categorise an amount entry.
+
+```typescript
+type AmountType = 'income' | 'expense' | 'transfer' | 'other'
+```
+
+### Functions
+
+#### `AmountInput(props)`
+
+Large transaction-style amount input with optional type toggle +
+currency symbol. Common in budgeting, expense-reporting, and
+financial-form UX.
+
+```typescript
+function AmountInput({
+  amount,
+  onAmountChange,
+  type,
+  onTypeChange,
+  typeOptions = ['income', 'expense'],
+  typeLabels,
+  currencySymbol = '$',
+  ariaLabel,
+  size = 'lg',
+  className,
+}: AmountInputProps): ReactElement<unknown, string | JSXElementConstructor<any>>
+```
+
+- `props` — Component props (see {@link AmountInputProps}).
+
+#### `formatCurrency(amount, currency, locale)`
+
+Formats a numeric amount as a localized currency string.
+
+```typescript
+function formatCurrency(amount: number, currency?: string, locale?: string): string
+```
+
+## Injection Notes
+
+### Requirements
+
+Peer dependencies:
+
+- `@molecule/app-react` ^1.0.1
+- `@molecule/app-ui` ^1.0.1
+- `@molecule/app-ui-react` ^1.0.1
+- `react` ^18.0.0 || ^19.0.0
+
+### Runtime Dependencies
+
+- `@molecule/app-react`
+- `@molecule/app-ui`
+- `@molecule/app-ui-react`
+- `react`
+
+All user-facing text flows through `t()` with English `defaultValue`
+fallbacks under the `amountInput.*` keys, so a wired locale bond (or the
+host app's own locale) can translate the type-toggle labels and the input's
+accessible name. Both are also overridable per-instance without a bond: the
+`typeLabels` prop relabels the toggle and `ariaLabel` sets the input's
+accessible name (prop > `t()` > default).

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@molecule/app-amount-input-react",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Large amount input with income/expense toggle + currency symbol",
+  "homepage": "https://www.molecule.dev/packages/app-amount-input-react",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -17,7 +18,8 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "keywords": [
     "molecule",
@@ -25,23 +27,28 @@
     "react"
   ],
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/molecule-dev/molecule.git",
+    "directory": "packages/app/features/amount-input-react"
+  },
   "peerDependencies": {
-    "@molecule/app-react": "^1.0.0",
-    "@molecule/app-ui": "^1.0.0",
-    "@molecule/app-ui-react": "^1.0.0",
+    "@molecule/app-react": "^1.0.1",
+    "@molecule/app-ui": "^1.0.1",
+    "@molecule/app-ui-react": "^1.0.1",
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@molecule/app-i18n": "1.0.0",
-    "@molecule/app-react": "1.0.0",
-    "@molecule/app-ui": "1.0.0",
-    "@molecule/app-ui-react": "1.0.0",
+    "@molecule/app-i18n": "1.0.2",
+    "@molecule/app-react": "1.5.1",
+    "@molecule/app-ui": "1.1.1",
+    "@molecule/app-ui-react": "1.0.2",
     "@types/node": "26.1.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
     "react": "19.2.8",
     "react-dom": "19.2.8",
     "typescript": "6.0.3",
-    "vitest": "4.1.10"
+    "vitest": "4.1.11"
   }
 }