feat: number-field component

[thejasonxie]

Needed a nice number input.

Saw that https://github.com/shadcn-ui/ui/pull/1818 is becoming stale.

Took inspiration from shadcn's example in that stale PR to create one.

Used react-number-format to handle number formatting

Usage:

<NumberField>
  <NumberFieldInput thousandSeparator="," placeholder="Enter a number" />
  <NumberFieldIncrement />
  <NumberFieldDecrement />
</NumberField>

[vercel[bot]]

@thejasonxie is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[thejasonxie]

Sorry, don't merge yet because there is a bug. I also think using react-aria's useNumberField hook is better. Fill fix soon.

[thejasonxie]

I changed my mind on using react-aria as the installation comes with much more than just the useNumberField hook.

I fixed the bug I was having with controlled state and used react-number-format's useNumericFormat hook instead for full customization.

The merge is good to go once reviewed.

Thanks!

[devongovett]

Given its popularity, it would be great if Shadcn UI could encourage the use of libraries that have good accessibility and internationalization support. React Aria's number field has been carefully designed to handle those concerns. See our blog post: https://react-spectrum.adobe.com/blog/how-we-internationalized-our-numberfield.html

Looking through the source code for react-number-format I see a lot of hard coded assumptions about the format and numbering system, e.g. decimals, negative signs, latin numerals, etc. It is also missing accessibility support to ensure the values are clearly announced to screen reader users.

Let me know if I can help with React Aria in any way. Would be amazing to collaborate on this.

[thejasonxie]

@devongovett Yeah I agree, React Aria's number field component/hook would have been better to use in my opinion. The only thing that stopped me from using it is because the React Aria installation comes with a bunch of other React Aria's components when Shadcn is Radix based.

It would be nice if React Aria can provide a way to install components individually.

[devongovett]

hmm yeah, you can do that with the hooks - useNumberField comes from the @react-aria/numberfield package. For React Aria Components we decided not to do individual packages because it was too many dependencies to manage, and people often had problems upgrading them when they used many components. Putting them all in one package makes upgrading a lot easier. They should tree-shake well though, so even though the package includes many components you should only get the ones you use in your bundle. Was that your concern or something else?

[thejasonxie]

Oh great, I didn't know @react-aria/numberfield existed, I will refactor and change to that when i have some time. Thanks @devongovett!

[thejasonxie]

@devongovett was about to refactor but someone made a PR with react-aria's NumberField component. Probably better than my code if I were to refactor 😂, so i'll be closing this PR.