numora-react 1.0.3 → 1.0.5

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "numora-react",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Numora for React - Headless finance input library",
-  "homepage": "https://numora.xyz/",
+  "homepage": "https://numora.netlify.app/",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "sideEffects": false,
   "repository": {
     "type": "git",
@@ -46,13 +43,6 @@
     }
   ],
   "license": "MIT",
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "dependencies": {
-    "numora": "^2.0.2"
-  },
   "devDependencies": {
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
@@ -66,13 +56,13 @@
     "rollup": "^4.38.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
-    "typescript": "^5.8.2",
+    "typescript": "^5.8.2"
+  },
+  "dependencies": {
+    "numora": "^2.0.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
     "build": "rollup -c",
     "watch": "rollup -c -w"

package/rollup.config.mjs

@@ -0,0 +1,38 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import babel from '@rollup/plugin-babel';
+import typescript from '@rollup/plugin-typescript';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import packageJson from './package.json' assert { type: 'json' };
+
+export default {
+  input: 'src/index.tsx',
+  output: [
+    {
+      file: packageJson.main,
+      format: 'cjs',
+      sourcemap: true,
+    },
+    {
+      file: packageJson.module,
+      format: 'esm',
+      sourcemap: true,
+    },
+  ],
+  plugins: [
+    peerDepsExternal(),
+    resolve(),
+    commonjs(),
+    typescript({ tsconfig: './tsconfig.json' }),
+    babel({
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      babelHelpers: 'bundled',
+      presets: [
+        ['@babel/preset-env', { targets: 'defaults' }],
+        ['@babel/preset-react', { runtime: 'automatic' }],
+      ],
+    }),
+  ],
+  external: ['react', 'react-dom', 'numora'],
+};

package/src/index.tsx

@@ -0,0 +1,144 @@
+import React, { ChangeEvent, ClipboardEvent, forwardRef } from 'react';
+import {
+  handleOnChangeNumoraInput,
+  handleOnPasteNumoraInput,
+  handleOnKeyDownNumoraInput,
+  FormatOn,
+  ThousandStyle,
+  type FormattingOptions,
+  type CaretPositionInfo,
+} from 'numora';
+
+interface NumericInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'type' | 'inputMode'> {
+  maxDecimals?: number;
+  onChange?: (e: ChangeEvent<HTMLInputElement> | ClipboardEvent<HTMLInputElement>) => void;
+
+  // Formatting options
+  formatOn?: FormatOn;
+  thousandSeparator?: string;
+  thousandStyle?: ThousandStyle;
+  decimalSeparator?: string;
+  decimalMinLength?: number;
+
+  // Feature flags
+  enableCompactNotation?: boolean;
+  enableNegative?: boolean;
+  enableLeadingZeros?: boolean;
+  rawValueMode?: boolean;
+}
+
+const DEFAULT_PROPS = {
+  autoComplete: 'off',
+  autoCorrect: 'off',
+  autoCapitalize: 'none',
+  minLength: 1,
+  placeholder: '0.0',
+  pattern: '^[0-9]*[.,]?[0-9]*$',
+  spellCheck: false,
+  step: 'any',
+};
+
+const NumoraInput = forwardRef<HTMLInputElement, NumericInputProps>(
+  ({
+    maxDecimals = 2,
+    onChange,
+    formatOn = FormatOn.Blur,
+    thousandSeparator = ',',
+    thousandStyle = ThousandStyle.Thousand,
+    decimalSeparator = '.',
+    decimalMinLength,
+    enableCompactNotation = false,
+    enableNegative = false,
+    enableLeadingZeros = false,
+    rawValueMode = false,
+    ...props
+  }: NumericInputProps, ref) => {
+    const [caretPositionBeforeChange, setCaretPositionBeforeChange] =
+      React.useState<CaretPositionInfo>();
+
+    const formattingOptions: FormattingOptions = {
+      formatOn,
+      thousandSeparator,
+      ThousandStyle: thousandStyle as any,
+      decimalSeparator,
+      decimalMinLength,
+      enableCompactNotation,
+      enableNegative,
+      enableLeadingZeros,
+      rawValueMode,
+    };
+
+    function handleOnKeyDown(e: React.KeyboardEvent<HTMLInputElement>): void {
+      const caretInfo = handleOnKeyDownNumoraInput(e.nativeEvent, formattingOptions);
+
+      if (caretInfo) {
+        setCaretPositionBeforeChange(caretInfo);
+      } else {
+        const input = e.currentTarget;
+        setCaretPositionBeforeChange({
+          selectionStart: input.selectionStart ?? 0,
+          selectionEnd: input.selectionEnd ?? 0,
+        });
+      }
+
+      if (props.onKeyDown) {
+        props.onKeyDown(e);
+      }
+    }
+
+    function handleOnChange(e: ChangeEvent<HTMLInputElement>): void {
+      handleOnChangeNumoraInput(
+        e.nativeEvent,
+        maxDecimals,
+        caretPositionBeforeChange,
+        formattingOptions
+      );
+      setCaretPositionBeforeChange(undefined);
+      if (onChange) onChange(e);
+    }
+
+    function handleOnPaste(e: ClipboardEvent<HTMLInputElement>): void {
+      handleOnPasteNumoraInput(e.nativeEvent, maxDecimals, formattingOptions);
+      if (onChange) onChange(e);
+    }
+
+    function handleOnFocus(e: React.FocusEvent<HTMLInputElement>): void {
+      if (formatOn === FormatOn.Blur && thousandSeparator) {
+        const target = e.currentTarget;
+        target.value = target.value.replace(
+          new RegExp(thousandSeparator.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'),
+          ''
+        );
+      }
+
+      if (props.onFocus) {
+        props.onFocus(e);
+      }
+    }
+
+    function handleOnBlur(e: React.FocusEvent<HTMLInputElement>): void {
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    }
+
+    return (
+      <input
+        {...DEFAULT_PROPS}
+        {...props}
+        ref={ref}
+        onChange={handleOnChange}
+        onKeyDown={handleOnKeyDown}
+        onPaste={handleOnPaste}
+        onFocus={handleOnFocus}
+        onBlur={handleOnBlur}
+        type="text"
+        inputMode="decimal"
+      />
+    );
+  }
+);
+
+NumoraInput.displayName = 'NumoraInput';
+
+export default NumoraInput;

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["ESNext", "DOM"]
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}