QuantityUnitField

export function NumericFieldsMatrix() {
  const [deposit, setDeposit] = useState('150000')
  const [tables, setTables] = useState(8)
  const [guests, setGuests] = useState(186)
  const [flour, setFlour] = useState<string | null>('2.5')
  const [flourUnit, setFlourUnit] = useState('kg')
  const [milk, setMilk] = useState<string | null>('5')
  const [milkUnit, setMilkUnit] = useState('L')

  return (
    <Stage label="Campos numéricos · moneda, stepper editable y cantidad+unidad" tall wide>
      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-3">
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="deposit">Depósito de reserva</Label>
          <CurrencyInput id="deposit" value={deposit} onChange={setDeposit} symbol="$" locale="es-AR" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Comisión de la agencia</Label>
          <CurrencyInput value="45000" onChange={() => {}} symbol="US$" locale="en-US" disabled />
          <span className="text-xs text-content/50">CurrencyInput no tiene error — KIT-021.</span>
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Mesas redondas</Label>
          <QuantityStepper value={tables} onChange={setTables} min={1} max={40} size="sm" />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label>Cantidad de invitados</Label>
          <QuantityStepper
            value={guests}
            onChange={setGuests}
            min={1}
            max={400}
            editable
            inputLabel="Cantidad de invitados"
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="qty-harina">Harina (heladería)</Label>
          <QuantityUnitField
            id="qty-harina"
            value={flour}
            unit={flourUnit}
            family="weight"
            onChange={(v, u) => {
              setFlour(v)
              setFlourUnit(u)
            }}
          />
        </div>
        <div className="flex flex-col gap-1.5">
          <Label htmlFor="qty-leche">Leche (heladería) — sin stock</Label>
          <QuantityUnitField
            id="qty-leche"
            value={milk}
            unit={milkUnit}
            family="volume"
            onChange={(v, u) => {
              setMilk(v)
              setMilkUnit(u)
            }}
            disabled
          />
        </div>
      </div>
    </Stage>
  )
}

De specimens/input.tsx · NumericFieldsMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.