@molecule/app-amount-input-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/dist/AmountInput.d.ts

@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import { formatCurrency } from './utils.js';
+/** Transaction type used to categorise an amount entry. */
+export type AmountType = 'income' | 'expense' | 'transfer' | 'other';
+/** Props for {@link AmountInput}. */
+export 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;
+}
+/**
+ * Large transaction-style amount input with optional type toggle +
+ * currency symbol. Common in budgeting, expense-reporting, and
+ * financial-form UX.
+ * @param props - Component props (see {@link AmountInputProps}).
+ */
+export declare function AmountInput({ amount, onAmountChange, type, onTypeChange, typeOptions, typeLabels, currencySymbol, ariaLabel, size, className, }: AmountInputProps): ReactElement;
+export { formatCurrency };
+//# sourceMappingURL=AmountInput.d.ts.map

package/dist/AmountInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AmountInput.d.ts","sourceRoot":"","sources":["../src/AmountInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAe,YAAY,EAAE,MAAM,OAAO,CAAA;AAMtD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAA;AAEpE,qCAAqC;AACrC,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,MAAM,EAAE,MAAM,GAAG,EAAE,CAAA;IACnB,+CAA+C;IAC/C,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,EAAE,KAAK,IAAI,CAAA;IAC7C,sDAAsD;IACtD,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,iFAAiF;IACjF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,KAAK,IAAI,CAAA;IACzC,+EAA+E;IAC/E,WAAW,CAAC,EAAE,UAAU,EAAE,CAAA;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAA;IAChD,qFAAqF;IACrF,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kBAAkB;IAClB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAUD;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,cAAc,EACd,IAAI,EACJ,YAAY,EACZ,WAAmC,EACnC,UAAU,EACV,cAAoB,EACpB,SAAS,EACT,IAAW,EACX,SAAS,GACV,EAAE,gBAAgB,GAAG,YAAY,CAoDjC;AAGD,OAAO,EAAE,cAAc,EAAE,CAAA"}

package/dist/AmountInput.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { t } from '@molecule/app-i18n';
+import { getClassMap } from '@molecule/app-ui';
+import { Button } from '@molecule/app-ui-react';
+import { formatCurrency } from './utils.js';
+/** English fallback labels for each amount type — keyed to `amountInput.type.*`. */
+const TYPE_LABEL = {
+    income: 'Income',
+    expense: 'Expense',
+    transfer: 'Transfer',
+    other: 'Other',
+};
+/**
+ * Large transaction-style amount input with optional type toggle +
+ * currency symbol. Common in budgeting, expense-reporting, and
+ * financial-form UX.
+ * @param props - Component props (see {@link AmountInputProps}).
+ */
+export function AmountInput({ amount, onAmountChange, type, onTypeChange, typeOptions = ['income', 'expense'], typeLabels, currencySymbol = '$', ariaLabel, size = 'lg', className, }) {
+    const cm = getClassMap();
+    const amountLabel = ariaLabel ?? t('amountInput.ariaLabel', undefined, { defaultValue: 'Amount' });
+    /**
+     * Parses the raw input value and fires onAmountChange with a number or empty string.
+     * @param e
+     */
+    function handleChange(e) {
+        const raw = e.target.value.replace(/[^0-9.-]/g, '');
+        if (raw === '' || raw === '-') {
+            onAmountChange('');
+            return;
+        }
+        const n = Number(raw);
+        if (Number.isFinite(n))
+            onAmountChange(n);
+    }
+    const fontClass = size === 'xl' ? cm.textSize('5xl') : size === 'lg' ? cm.textSize('4xl') : cm.textSize('2xl');
+    return (_jsxs("div", { className: cm.cn(cm.stack(3), className), children: [onTypeChange && (_jsx("div", { className: cm.flex({ align: 'center', gap: 'xs' }), children: typeOptions.map((opt) => (_jsx(Button, { type: "button", variant: type === opt ? 'solid' : 'ghost', color: type === opt ? 'primary' : undefined, size: "sm", onClick: () => onTypeChange(opt), children: typeLabels?.[opt] ??
+                        t(`amountInput.type.${opt}`, undefined, { defaultValue: TYPE_LABEL[opt] }) }, opt))) })), _jsxs("div", { className: cm.flex({ align: 'baseline', gap: 'xs' }), children: [_jsx("span", { className: cm.cn(fontClass, cm.fontWeight('bold')), children: currencySymbol }), _jsx("input", { type: "text", inputMode: "decimal", value: amount === '' ? '' : String(amount), onChange: handleChange, placeholder: "0", "aria-label": amountLabel, className: cm.cn(fontClass, cm.fontWeight('bold')), style: { border: 'none', outline: 'none', background: 'transparent', flex: 1 } })] })] }));
+}
+// Re-export formatCurrency util for convenience.
+export { formatCurrency };

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * React amount input with type toggle.
+ *
+ * Exports:
+ * - `<AmountInput>` — large currency input with income/expense toggle.
+ * - `AmountType` — `'income' | 'expense' | 'transfer' | 'other'`.
+ * - `formatCurrency` — convenience re-export.
+ *
+ * @example
+ * ```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"
+ * />
+ * ```
+ *
+ * @remarks
+ * 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).
+ *
+ * @module
+ */
+export * from './AmountInput.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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,cAAc,kBAAkB,CAAA"}

package/dist/index.js

@@ -0,0 +1,36 @@
+/**
+ * React amount input with type toggle.
+ *
+ * Exports:
+ * - `<AmountInput>` — large currency input with income/expense toggle.
+ * - `AmountType` — `'income' | 'expense' | 'transfer' | 'other'`.
+ * - `formatCurrency` — convenience re-export.
+ *
+ * @example
+ * ```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"
+ * />
+ * ```
+ *
+ * @remarks
+ * 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).
+ *
+ * @module
+ */
+export * from './AmountInput.js';

package/dist/utils.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Formats a numeric amount as currency via `Intl.NumberFormat`.
+ * (Duplicated from `@molecule/app-currency-display-react` so this package
+ * stays standalone — or wire the peer dep if you prefer.)
+ *
+ * @module
+ */
+/**
+ * Formats a numeric amount as a localized currency string.
+ * @param amount
+ * @param currency
+ * @param locale
+ */
+export declare function formatCurrency(amount: number, currency?: string, locale?: string): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,GAAE,MAAc,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAEhG"}

package/dist/utils.js

@@ -0,0 +1,16 @@
+/**
+ * Formats a numeric amount as currency via `Intl.NumberFormat`.
+ * (Duplicated from `@molecule/app-currency-display-react` so this package
+ * stays standalone — or wire the peer dep if you prefer.)
+ *
+ * @module
+ */
+/**
+ * Formats a numeric amount as a localized currency string.
+ * @param amount
+ * @param currency
+ * @param locale
+ */
+export function formatCurrency(amount, currency = 'USD', locale) {
+    return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount);
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@molecule/app-amount-input-react",
+  "version": "1.0.0",
+  "description": "Large amount input with income/expense toggle + currency symbol",
+  "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"
+  ],
+  "keywords": [
+    "molecule",
+    "amount-input",
+    "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-i18n": "1.0.0",
+    "@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",
+    "@types/react-dom": "19.2.3",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}