Number Field

import * as React from 'react'
import { NumberField } from '@hamur/react/number-field'

export default function NumberFieldExample() {
  const [quantity, setQuantity] = React.useState<number | null>(2)
  return (
    <div className="stack">
      <NumberField.Root
        className="stack"
        defaultValue={2}
        min={1}
        max={10}
        onValueChange={setQuantity}
      >
        <NumberField.ScrubArea className="scrub">
          <span>Quantity</span>
          <NumberField.ScrubAreaCursor className="scrub-cursor">
            ↔
          </NumberField.ScrubAreaCursor>
        </NumberField.ScrubArea>
        <NumberField.Group className="nf-group">
          <NumberField.Decrement className="button" aria-label="Decrease">
            −
          </NumberField.Decrement>
          <NumberField.Input className="input nf-input" aria-label="Quantity" />
          <NumberField.Increment className="button" aria-label="Increase">
            +
          </NumberField.Increment>
        </NumberField.Group>
      </NumberField.Root>
      <p className="muted">Quantity is {quantity ?? 'empty'}</p>
      <NumberField.Root
        defaultValue={19.99}
        step={0.5}
        locale="en-US"
        format={{ style: 'currency', currency: 'USD' }}
      >
        <NumberField.Group className="nf-group">
          <NumberField.Decrement
            className="button"
            aria-label="Lower the price"
          >
            −
          </NumberField.Decrement>
          <NumberField.Input className="input nf-input" aria-label="Price" />
          <NumberField.Increment
            className="button"
            aria-label="Raise the price"
          >
            +
          </NumberField.Increment>
        </NumberField.Group>
      </NumberField.Root>
    </div>
  )
}