Component: Locale-aware Number Input #93

Component: Locale-aware Number Input

A number input that lets people type and read numbers the way their locale writes them: 1.234,56 in German, 1,234.56 in English, 1 234,56 in French. It still gives your code a plain JavaScript number.

Requirements

• TypeScript-first with exported props interface
• Derives the decimal and grouping separators from Intl.NumberFormat(locale).formatToParts(), not from a hardcoded table
• Accepts input with the locale's separators, parses it to a number (or null when empty), and reformats on blur
• Keeps the caret in a sensible place while typing; doesn't reformat mid-typing in a way that jumps the cursor
• Supports min, max, step and maximumFractionDigits
• Follows the component conventions: value / defaultValue / onValueChange (number), forwarded ref, ...rest
• inputMode="decimal" so mobile keyboards show the right keys
• Works with React Hook Form and other form libraries (controlled and uncontrolled)

Expected API

<NumberInput
  locale="de-DE"
  defaultValue={1234.56}
  maximumFractionDigits={2}
  onValueChange={(value) => setAmount(value)} // 1234.56
/>

Deliverables

• Component source in src/registry/components/
• Export in src/registry/components/index.ts and entry in src/registry/registry.ts
• Tests in test/ covering parsing and formatting for en-US, de-DE, fr-FR (narrow no-break space grouping) and hi-IN (lakh grouping), plus min/max and empty input
• Documentation page in content/docs/components/inputs/

Related: #5 (Currency Input) could build on this once it lands.

See CONTRIBUTING.md and the Contributor Rulebook.